support multi actions for a status area button (#41)

Author: eagleoflqj

src/api.d.ts

@@ -78,8 +78,8 @@ export type VirtualKeyboardEvent = {
   type: 'COMMIT' | 'SET_INPUT_METHOD'
   data: string
 } | {
-  type: 'UNDO' | 'REDO' | 'CUT' | 'COPY' | 'PASTE' | 'COLLAPSE' |
-    'SELECT' | 'DESELECT' | 'SELECT_ALL' | 'GLOBE'
+  type: 'UNDO' | 'REDO' | 'CUT' | 'COPY' | 'PASTE' | 'COLLAPSE'
+    | 'SELECT' | 'DESELECT' | 'SELECT_ALL' | 'GLOBE'
 } | {
   type: 'SELECT_CANDIDATE' | 'ASK_CANDIDATE_ACTIONS' | 'STATUS_AREA_ACTION'
   data: number

src/contextmenu.ts

@@ -1,4 +1,4 @@
-import { div, handleClick, hide, press, release, show } from './util'
+import { div, enableScroll, handleClick, hide, press, release, show } from './util'
 
 export function hideContextMenu() {
   hide(document.querySelector('.fcitx-keyboard-contextmenu-container')!)
@@ -7,6 +7,7 @@ export function hideContextMenu() {
 export function renderContextmenu() {
   const container = div('fcitx-keyboard-contextmenu-container')
   const contextmenu = div('fcitx-keyboard-contextmenu')
+  enableScroll(contextmenu)
   container.appendChild(contextmenu)
   container.addEventListener('touchstart', (event) => {
     // Don't hide if touching menu instead of outside.
@@ -29,17 +30,27 @@ function renderItem(text: string) {
 
 export function showContextmenu(element: Element, items: {
   text: string
+  separator?: boolean
   callback: () => void
 }[]) {
   const contextmenu = document.querySelector('.fcitx-keyboard-contextmenu') as HTMLElement
   contextmenu.innerHTML = ''
-  for (const item of items) {
-    const element = renderItem(item.text)
-    handleClick(element, () => {
-      item.callback()
-      hideContextMenu()
-    })
-    contextmenu.appendChild(element)
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.separator) {
+      if (i === 0 || i === items.length - 1 || items[i - 1].separator) {
+        continue
+      }
+      contextmenu.appendChild(document.createElement('hr'))
+    }
+    else {
+      const element = renderItem(item.text)
+      handleClick(element, () => {
+        item.callback()
+        hideContextMenu()
+      })
+      contextmenu.appendChild(element)
+    }
   }
   show(contextmenu.parentElement!)
   const containerBox = contextmenu.parentElement!.getBoundingClientRect()
@@ -48,12 +59,21 @@ export function showContextmenu(element: Element, items: {
   const containerYBar = (containerBox.top + containerBox.bottom) / 2
   const targetYBar = (targetBox.top + targetBox.bottom) / 2
   let y: number
+  // First step: place it above or below the target element.
   if (targetYBar < containerYBar) {
     y = targetBox.bottom
   }
   else {
     y = targetBox.top - menuBox.height
   }
+  // Next step: adjust the bottom position if it exceeds the container.
+  if (y + menuBox.height > containerBox.bottom) {
+    y = containerBox.bottom - menuBox.height
+  }
+  // Final step: adjust the top position if it exceeds the container.
+  if (y < containerBox.top) {
+    y = containerBox.top
+  }
   const x = Math.min(targetBox.left, containerBox.right - menuBox.width)
   contextmenu.style.left = `${x}px`
   contextmenu.style.top = `${y}px`

src/layout.d.ts

@@ -54,13 +54,13 @@ export interface GlobeKey {
 
 export type Key = {
   flex?: string
-} & (NormalKey |
-  EnterKey |
-  BackspaceKey |
-  ShiftKey |
-  SpaceKey |
-  GlobeKey |
-  SymbolKey | {
+} & (NormalKey
+  | EnterKey
+  | BackspaceKey
+  | ShiftKey
+  | SpaceKey
+  | GlobeKey
+  | SymbolKey | {
     type: 'placeholder'
   })
 

src/preset.css

@@ -329,6 +329,15 @@
   background-color: white;
   box-shadow: 0 0 8px rgb(0 0 0 / 30%);
   position: fixed;
+  max-height: 100cqh;
+  overflow: scroll;
+}
+
+.fcitx-keyboard-contextmenu hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #7f7f7f;
 }
 
 .fcitx-keyboard-contextmenu-item {

src/statusArea.ts

@@ -5,14 +5,17 @@ import HalfPunc from 'bundle-text:../svg/half-punc.svg'
 import HalfWidth from 'bundle-text:../svg/half-width.svg'
 import LightbulbOutline from 'bundle-text:../svg/lightbulb-outline.svg'
 import Lightbulb from 'bundle-text:../svg/lightbulb.svg'
+import { showContextmenu } from './contextmenu'
 import { div, getStatusArea, handleClick } from './util'
 import { sendEvent } from './ux'
 
 export function renderStatusArea() {
   return div('fcitx-keyboard-status-area')
 }
 
-function getLabel(icon: string) {
+const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+
+function getLabel(icon: string, desc: string) {
   switch (icon) {
     case 'fcitx-chttrans-active':
       return '繁'
@@ -30,8 +33,10 @@ function getLabel(icon: string) {
       return Lightbulb
     case 'fcitx-remind-inactive':
       return LightbulbOutline
-    default:
-      return ''
+    default: {
+      const segmentData = Array.from(segmenter.segment(desc))
+      return segmentData.length ? segmentData[0].segment : ''
+    }
   }
 }
 
@@ -41,10 +46,16 @@ export function setStatusArea(actions: StatusAreaAction[]) {
   for (const action of actions) {
     const button = div('fcitx-keyboard-status-area-container')
     const circle = div('fcitx-keyboard-status-area-circle')
-    circle.innerHTML = getLabel(action.icon)
+    circle.innerHTML = getLabel(action.icon, action.desc)
     handleClick(circle, () => {
       if (action.children) {
-        // TODO: implement it for rime
+        showContextmenu(circle, action.children.map(child => ({
+          text: child.desc,
+          separator: child.separator,
+          callback: () => {
+            sendEvent({ type: 'STATUS_AREA_ACTION', data: child.id })
+          },
+        })))
       }
       else {
         sendEvent({ type: 'STATUS_AREA_ACTION', data: action.id })

tests/test-status-area.spec.ts

@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
-import { getKey, getSentEvents, getToolbarButton, init, sendSystemEvent, tapReturn } from './util'
+import { getBox, getKey, getSentEvents, getToolbarButton, init, sendSystemEvent, tapReturn } from './util'
 
 function gotoStatusArea(page: Page) {
   return getToolbarButton(page, 5).tap()
@@ -40,3 +40,56 @@ test('Return', async ({ page }) => {
   await tapReturn(page)
   await expect(q).toBeVisible()
 })
+
+test('Multiple actions: align bottom', async ({ page }) => {
+  await init(page)
+
+  await sendSystemEvent(page, {
+    type: 'STATUS_AREA',
+    data: [{ desc: '😁 → 😭', children: Array.from({ length: 5 }).map((_, i) => ({
+      desc: `子项${i}`,
+      icon: '',
+      id: i,
+    })), icon: '', id: -1 }],
+  })
+  await gotoStatusArea(page)
+
+  const button = page.locator('.fcitx-keyboard-status-area-circle')
+  await expect(button).toHaveText('😁')
+
+  await button.tap()
+  const contextmenu = page.locator('.fcitx-keyboard-contextmenu')
+  await expect(contextmenu).toBeVisible()
+  const box = await getBox(contextmenu)
+  const containerBox = await getBox(page.locator('.fcitx-keyboard-container'))
+  expect(box.y + box.height).toBeCloseTo(containerBox.y + containerBox.height, 1)
+})
+
+test('Many actions: align top', async ({ page }) => {
+  await init(page)
+
+  await sendSystemEvent(page, {
+    type: 'STATUS_AREA',
+    data: [{ desc: '有 → 无', children: Array.from({ length: 10 }).map((_, i) => ({
+      desc: `子项${i}`,
+      icon: '',
+      id: i,
+    })), icon: '', id: -1 }],
+  })
+  await gotoStatusArea(page)
+
+  const button = page.locator('.fcitx-keyboard-status-area-circle')
+  await expect(button).toHaveText('有')
+
+  await button.tap()
+  const contextmenu = page.locator('.fcitx-keyboard-contextmenu')
+  await expect(contextmenu).toBeVisible()
+  const box = await getBox(contextmenu)
+  const containerBox = await getBox(page.locator('.fcitx-keyboard-container'))
+  expect(box.y).toBeCloseTo(containerBox.y, 1)
+  const lastItem = contextmenu.locator('.fcitx-keyboard-contextmenu-item').last()
+  await expect(lastItem).not.toBeInViewport()
+
+  await contextmenu.evaluate(element => element.scrollBy(0, element.scrollHeight))
+  await expect(lastItem).toBeInViewport()
+})

tests/util.ts

@@ -17,13 +17,17 @@ export async function init(page: Page) {
   await page.goto(url)
 }
 
+export async function getBox(locator: Locator) {
+  return (await locator.boundingBox())!
+}
+
 async function center(locator: Locator) {
-  const box = (await locator.boundingBox())!
+  const box = await getBox(locator)
   return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
 }
 
 async function isInside(point: { x: number, y: number }, locator: Locator) {
-  const box = (await locator.boundingBox())!
+  const box = await getBox(locator)
   return box.x <= point.x && point.x <= box.x + box.width && box.y <= point.y && point.y <= box.y + box.height
 }