render preedit underline (#37)

Author: eagleoflqj

page/client.ts

@@ -7,21 +7,30 @@ let y = 0
 let preedit = ''
 let preeditIndex = 0
 
+// compared with macOS pinyin
+const UNDERLINE_OFFSET = 1
+const CANDIDATE_WINDOW_OFFSET = 6
+
 const textEncoder = new TextEncoder()
 
+function getFontSize(element: HTMLElement) {
+  return Number.parseFloat(getComputedStyle(element).fontSize)
+}
+
 export function placePanel(dx: number, dy: number, anchorTop: number, anchorLeft: number, dragging: boolean) {
   const input = getInputElement()
   if (!input) {
     return
   }
   const rect = input.getBoundingClientRect()
   const { top, left, height } = getCaretCoordinates(input, input.selectionStart! - (window.fcitx.followCursor ? 0 : preeditIndex))
-  const h = height /* NaN if no line-height is set */ || Number(getComputedStyle(input).fontSize.slice(0, -'px'.length))
+  const h = height /* NaN if no line-height is set */ || getFontSize(input) + CANDIDATE_WINDOW_OFFSET
   const panel = <HTMLElement>document.querySelector('#fcitx-theme')
   const frame = panel.getBoundingClientRect()
   panel.style.opacity = '1'
   panel.style.position = 'absolute'
   panel.style.height = '0' // let mouse event pass through
+  panel.style.zIndex = '2147483647' // absolutely above preedit underline
   if (dragging) {
     x += dx
     y += dy
@@ -40,6 +49,59 @@ export function hidePanel() {
   panel.style.opacity = '0'
 }
 
+function clearPreeditUnderline() {
+  document.querySelectorAll('.fcitx-preedit-underline').forEach(div => div.remove())
+}
+
+function drawUnderline(top: number, left: number, width: number, color: string) {
+  const div = document.createElement('div')
+  div.className = 'fcitx-preedit-underline'
+  div.style.position = 'absolute'
+  div.style.top = `${top}px`
+  div.style.left = `${left}px`
+  div.style.height = '1px'
+  div.style.width = `${width}px`
+  div.style.backgroundColor = color
+  document.body.appendChild(div)
+}
+
+function getTextWidth(input: HTMLElement, text: string) {
+  const div = document.createElement('div')
+  const style = getComputedStyle(input)
+  div.style.position = 'absolute'
+  div.style.opacity = '0'
+  div.style.font = style.font
+  div.textContent = text
+  document.body.append(div)
+  const { width } = div.getBoundingClientRect()
+  div.remove()
+  return width
+}
+
+function drawPreeditUnderline(input: HTMLElement, start: number) {
+  const box = input.getBoundingClientRect()
+  const color = getComputedStyle(input).color
+  const fontSize = getFontSize(input)
+  const { top: startTop, left: startLeft } = getCaretCoordinates(input, start)
+  const { top: endTop, left: endLeft } = getCaretCoordinates(input, start + preedit.length)
+  let lastLeft = startLeft
+  for (let i = 1, rowLeft = startLeft, rowTop = startTop; i <= preedit.length && rowTop < endTop; ++i) {
+    const { top, left } = getCaretCoordinates(input, start + i)
+    if (top !== rowTop) {
+      // getCaretCoordinates can't tell the position of the end of previous line,
+      // because it's equivalent to the start of next line, which is the actual place
+      // that new character is written. So we need to calculate width of the last character.
+      drawUnderline(box.top + rowTop + fontSize + UNDERLINE_OFFSET, box.left + rowLeft, lastLeft - rowLeft + getTextWidth(input, preedit[i - 1]), color)
+      rowTop = top
+      rowLeft = lastLeft
+    }
+    lastLeft = left
+  }
+  if (lastLeft !== endLeft) {
+    drawUnderline(box.top + endTop + fontSize + UNDERLINE_OFFSET, box.left + lastLeft, endLeft - lastLeft, color)
+  }
+}
+
 function changeInput(commitText: string, preeditText: string, index: number) {
 /*
 ____ pre|edit ____
@@ -64,15 +126,20 @@ ____ commit pre|edit ____
 
   const start = input.selectionStart! - preeditIndex
   const end = preedit ? start + preedit.length : input.selectionEnd!
+  const newStart = start + commitText.length
   input.value = input.value.slice(0, start) + commitText + preeditText + input.value.slice(end)
   // This may be triggered by user clicking panel. Focus to ensure setting selectionEnd works.
   input.focus()
-  input.selectionStart = input.selectionEnd = start + commitText.length + i
+  input.selectionStart = input.selectionEnd = newStart + i
   // For vue-based input, this is needed to synchronize state.
   input.dispatchEvent(new Event('change'))
   preedit = preeditText
   preeditIndex = i
   setSpellCheck(!preedit)
+  clearPreeditUnderline()
+  if (preedit) {
+    drawPreeditUnderline(input, newStart)
+  }
 }
 
 export function setPreedit(text: string, index: number) {
@@ -86,4 +153,5 @@ export function commit(text: string) {
 export function resetPreedit() {
   preedit = ''
   preeditIndex = 0
+  clearPreeditUnderline()
 }

tests/test-preedit.spec.ts

@@ -1,6 +1,6 @@
 import type { Locator } from '@playwright/test'
 import { expect, test } from '@playwright/test'
-import { init } from './util'
+import { getBox, init } from './util'
 
 function getSpellCheck(locator: Locator) {
   return locator.evaluate((el: HTMLElement) => el.spellcheck)
@@ -32,6 +32,7 @@ test('Respect original spellcheck value (manually set false)', async ({ page })
     el.spellcheck = false
   })
 
+  await textarea.click()
   await page.evaluate(() => {
     window.fcitx.setPreedit('pin xie', 7)
   })
@@ -42,3 +43,51 @@ test('Respect original spellcheck value (manually set false)', async ({ page })
   })
   expect(await getSpellCheck(textarea), 'Original spellcheck value is restored').toBe(false)
 })
+
+test('Underline', async ({ page }) => {
+  await init(page)
+
+  const textarea = page.locator('textarea')
+  await textarea.evaluate((el: HTMLElement) => {
+    el.style.width = '20px'
+    el.style.fontSize = '16px'
+  })
+  await textarea.focus()
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('aa', 0)
+  })
+  const underline = page.locator('.fcitx-preedit-underline')
+  await expect(underline).toHaveCount(1)
+  const box = await getBox(underline)
+  expect(box.height).toBe(1)
+
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('', 0)
+  })
+  await expect(underline, 'Clearing preedit should clear underline').not.toBeAttached()
+
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('aaa', 0)
+  })
+  await expect(underline).toHaveCount(2)
+  const firstBox = await getBox(underline.nth(0))
+  const secondBox = await getBox(underline.nth(1))
+  expect(firstBox).toEqual(box)
+  expect(secondBox.height).toBe(1)
+  expect(secondBox.x).toEqual(box.x)
+  expect(secondBox.y).toBeGreaterThan(box.y)
+  expect(secondBox.width, 'a should be thinner than aa').toBeLessThan(box.width)
+
+  await page.evaluate(() => {
+    window.fcitx.setPreedit('啊', 0)
+  })
+  await expect(underline).toHaveCount(1)
+  const aBox = await getBox(underline)
+  expect(aBox.height).toBe(1)
+  expect(aBox.x).toEqual(box.x)
+  expect(aBox.y, '啊 could be taller than a').toBeGreaterThanOrEqual(box.y)
+  expect(aBox.width, '啊 should be wider than a').toBeGreaterThan(secondBox.width)
+
+  await page.locator('input').click()
+  await expect(underline, 'Focusing out should clear underline').not.toBeAttached()
+})

tests/util.ts

@@ -1,10 +1,12 @@
-import type {
-  Page,
-} from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 export async function init(page: Page) {
   await page.goto('http://localhost:9000')
   return page.evaluate(() => {
     return window.fcitxReady
   })
 }
+
+export async function getBox(locator: Locator) {
+  return (await locator.boundingBox())!
+}