long press globe; rework status area/input methods update (#29)

Author: eagleoflqj

src/api.d.ts

@@ -45,8 +45,10 @@ export type SystemEvent = {
   }
 } | {
   type: 'STATUS_AREA'
+  data: StatusAreaAction[]
+} | {
+  type: 'INPUT_METHODS'
   data: {
-    actions: StatusAreaAction[]
     currentInputMethod: string
     inputMethods: InputMethod[]
   }
@@ -59,7 +61,7 @@ export type VirtualKeyboardEvent = {
     code: string
   }
 } | {
-  type: 'COMMIT'
+  type: 'COMMIT' | 'SET_INPUT_METHOD'
   data: string
 } | {
   type: 'UNDO' | 'REDO' | 'CUT' | 'COPY' | 'PASTE' | 'COLLAPSE' |

src/keyboard.ts

@@ -12,7 +12,7 @@ import { renderStatusArea, setStatusArea } from './statusArea'
 import { renderSymbolSelector } from './symbol'
 import { enableRedo, enableUndo, renderToolbar } from './toolbar'
 import { div, hide } from './util'
-import { onTouchEnd, onTouchMove, onTouchStart, setEnterKeyType, setLayer, setLayout as setLayout_ } from './ux'
+import { onTouchEnd, onTouchMove, onTouchStart, setEnterKeyType, setInputMethods, setLayer, setLayout as setLayout_ } from './ux'
 
 const builtInLayoutMap = { qwerty } as { [key: string]: Layout }
 
@@ -108,7 +108,10 @@ export function onMessage(message: string) {
       setCandidateActions(event.data.index, event.data.actions)
       break
     case 'STATUS_AREA':
-      setStatusArea(event.data.actions, event.data.currentInputMethod, event.data.inputMethods)
+      setStatusArea(event.data)
+      break
+    case 'INPUT_METHODS':
+      setInputMethods(event.data.inputMethods, event.data.currentInputMethod)
       break
     case 'SELECT':
       return select()

src/statusArea.ts

@@ -1,12 +1,12 @@
-import type { InputMethod, StatusAreaAction } from './api'
+import type { StatusAreaAction } from './api'
 import FullPunc from 'bundle-text:../svg/full-punc.svg'
 import FullWidth from 'bundle-text:../svg/full-width.svg'
 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 { div, getStatusArea } from './util'
-import { sendEvent, setSpaceKeyLabel } from './ux'
+import { sendEvent } from './ux'
 
 export function renderStatusArea() {
   return div('fcitx-keyboard-status-area')
@@ -35,7 +35,7 @@ function getLabel(icon: string) {
   }
 }
 
-export function setStatusArea(actions: StatusAreaAction[], currentInputMethod: string, inputMethods: InputMethod[]) {
+export function setStatusArea(actions: StatusAreaAction[]) {
   const statusArea = getStatusArea()
   statusArea.innerHTML = ''
   for (const action of actions) {
@@ -56,10 +56,4 @@ export function setStatusArea(actions: StatusAreaAction[], currentInputMethod: s
     button.appendChild(text)
     statusArea.appendChild(button)
   }
-  for (const inputMethod of inputMethods) {
-    if (inputMethod.name === currentInputMethod) {
-      setSpaceKeyLabel(inputMethod.displayName)
-      break
-    }
-  }
 }

src/ux.ts

@@ -1,11 +1,12 @@
 import type { Key, Layout } from '../src/layout'
-import type { VirtualKeyboardClient, VirtualKeyboardEvent } from './api'
+import type { InputMethod, VirtualKeyboardClient, VirtualKeyboardEvent } from './api'
 import ArrowLeft from 'bundle-text:../svg/arrow-left.svg'
 import ArrowRight from 'bundle-text:../svg/arrow-right.svg'
 import CheckMark from 'bundle-text:../svg/checkmark.svg'
 import Enter from 'bundle-text:../svg/enter.svg'
 import Search from 'bundle-text:../svg/search.svg'
 import Send from 'bundle-text:../svg/send.svg'
+import { showContextmenu } from './contextmenu'
 import { setDisplayMode } from './display'
 import { renderRow } from './key'
 import { getContainer, getKey, press, release } from './util'
@@ -19,9 +20,12 @@ let shiftReleased = true
 let keyPressedWithShiftPressed = false
 let enterKeyType = ''
 let spaceKeyLabel = ''
+let inputMethods_: InputMethod[] = []
 let pendingTouch: Touch | null = null
 const touches: { [key: number]: Touch } = {}
 let startX = 0
+let startY = 0
+let longPressId: number | null = null
 let lastX = 0
 // We assume only one key can slide at a time, and another touch suspends it.
 let slidingKey: Key | null = null
@@ -30,6 +34,22 @@ let completedSteps = 0
 const slideStep = 10
 
 const DOUBLE_TAP_INTERVAL = 300 // Same with f5a.
+const LONG_PRESS_THRESHOLD = 500
+const DRAG_THRESHOLD = 10
+
+function dragged(touch: Touch) {
+  const { clientX, clientY } = touch
+  const dX = clientX - startX
+  const dY = clientY - startY
+  return dX * dX + dY * dY > DRAG_THRESHOLD
+}
+
+function cancelLongPress() {
+  if (longPressId) {
+    clearTimeout(longPressId)
+    longPressId = null
+  }
+}
 
 export function setLayout(layout: Layout) {
   layout_ = layout
@@ -143,9 +163,11 @@ function touchUp(touch: Touch) {
 export function onTouchStart(event: TouchEvent) {
   const touch = event.changedTouches[0]
   startX = touch.clientX
+  startY = touch.clientY
   lastX = startX
   resetSlide()
-  const key = getKey(getContainer(touch))
+  let container = getContainer(touch)
+  const key = getKey(container)
   if (key) {
     slidingKey = key
     if (pendingTouch) {
@@ -158,15 +180,30 @@ export function onTouchStart(event: TouchEvent) {
     else {
       pendingTouch = touch
     }
+    if (key.type === 'globe') {
+      longPressId = window.setTimeout(() => {
+        longPressId = null
+        pendingTouch = null
+        showContextmenu(container!, inputMethods_.map(inputMethod => ({
+          text: inputMethod.displayName,
+          callback() { sendEvent({ type: 'SET_INPUT_METHOD', data: inputMethod.name }) },
+        })))
+      }, LONG_PRESS_THRESHOLD)
+    }
   }
   // Must recalculate container as layer may have been changed.
-  const container = getContainer(touch)
+  container = getContainer(touch)
   container && press(container)
   touches[touch.identifier] = touch
 }
 
 export function onTouchMove(event: TouchEvent) {
   const touch = event.changedTouches[0]
+  // If same touch of startX/Y, great.
+  // If comparing with a more recent touch, we don't care if it's cancelled or not.
+  if (dragged(touch)) {
+    cancelLongPress()
+  }
   const { clientX } = touch
   if (['space', 'backspace'].includes(slidingKey?.type ?? '')) {
     if ((clientX - lastX) * (clientX - startX) < 0) { // turn around
@@ -194,6 +231,7 @@ export function onTouchMove(event: TouchEvent) {
 }
 
 export function onTouchEnd(event: TouchEvent) {
+  cancelLongPress()
   if (slidingKey) {
     if (slidingKey.type === 'backspace' && slid) {
       sendEvent({ type: 'BACKSPACE_SLIDE', data: 'RELEASE' })
@@ -266,3 +304,13 @@ export function setSpaceKeyLabel(label: string) {
     space.innerHTML = spaceKeyLabel
   }
 }
+
+export function setInputMethods(inputMethods: InputMethod[], currentInputMethod: string) {
+  inputMethods_ = inputMethods
+  for (const inputMethod of inputMethods) {
+    if (inputMethod.name === currentInputMethod) {
+      setSpaceKeyLabel(inputMethod.displayName)
+      break
+    }
+  }
+}

tests/test-globe.spec.ts

@@ -1,9 +1,33 @@
 import { expect, test } from '@playwright/test'
-import { getSentEvents, init, tap } from './util'
+import { getSentEvents, init, longPress, sendSystemEvent, tap } from './util'
 
 test('Tap', async ({ page }) => {
   await init(page)
+
   const globe = page.locator('.fcitx-keyboard-globe')
   await tap(globe)
   expect(await getSentEvents(page)).toEqual([{ type: 'GLOBE' }])
 })
+
+test('Long press', async ({ page }) => {
+  await init(page)
+
+  await sendSystemEvent(page, { type: 'INPUT_METHODS', data: {
+    currentInputMethod: 'pinyin',
+    inputMethods: [
+      { name: 'keyboard-us', displayName: 'English' },
+      { name: 'pinyin', displayName: '拼音' },
+    ],
+  } })
+  const globe = page.locator('.fcitx-keyboard-globe')
+  await longPress(globe)
+  const contextmenu = page.locator('.fcitx-keyboard-contextmenu')
+  const english = contextmenu.getByText('English')
+  const pinyin = contextmenu.getByText('拼音')
+  await expect(english).toBeVisible()
+  await expect(pinyin).toBeVisible()
+
+  await english.tap()
+  await expect(contextmenu).not.toBeVisible()
+  expect(await getSentEvents(page)).toEqual([{ type: 'SET_INPUT_METHOD', data: 'keyboard-us' }])
+})

tests/test-space.spec.ts

@@ -12,8 +12,7 @@ test('Space', async ({ page }) => {
   await init(page)
 
   const space = page.locator('.fcitx-keyboard-space')
-  await sendSystemEvent(page, { type: 'STATUS_AREA', data: {
-    actions: [],
+  await sendSystemEvent(page, { type: 'INPUT_METHODS', data: {
     currentInputMethod: 'pinyin',
     inputMethods: [
       { name: 'keyboard-us', displayName: 'English' },
@@ -37,8 +36,7 @@ test('Adjust font size', async ({ page }) => {
 
   const space = page.locator('.fcitx-keyboard-space')
   const longLabel = 'Long Long Long Long Long'
-  await sendSystemEvent(page, { type: 'STATUS_AREA', data: {
-    actions: [],
+  await sendSystemEvent(page, { type: 'INPUT_METHODS', data: {
     currentInputMethod: 'long',
     inputMethods: [
       { name: 'long', displayName: longLabel },

tests/test-status-area.spec.ts

@@ -9,11 +9,10 @@ function gotoStatusArea(page: Page) {
 test('Simplified and traditional', async ({ page }) => {
   await init(page)
 
-  await sendSystemEvent(page, { type: 'STATUS_AREA', data: {
-    actions: [{ desc: '简体中文', icon: 'fcitx-chttrans-inactive', id: 4 }],
-    currentInputMethod: '',
-    inputMethods: [],
-  } })
+  await sendSystemEvent(page, {
+    type: 'STATUS_AREA',
+    data: [{ desc: '简体中文', icon: 'fcitx-chttrans-inactive', id: 4 }],
+  })
   await gotoStatusArea(page)
 
   const button = page.locator('.fcitx-keyboard-status-area-circle')
@@ -24,11 +23,10 @@ test('Simplified and traditional', async ({ page }) => {
     { type: 'STATUS_AREA_ACTION', data: 4 },
   ])
 
-  await sendSystemEvent(page, { type: 'STATUS_AREA', data: {
-    actions: [{ desc: '繁体中文', icon: 'fcitx-chttrans-active', id: 4 }],
-    currentInputMethod: '',
-    inputMethods: [],
-  } })
+  await sendSystemEvent(page, {
+    type: 'STATUS_AREA',
+    data: [{ desc: '繁体中文', icon: 'fcitx-chttrans-active', id: 4 }],
+  })
   await expect(button).toHaveText('繁')
 })