IME in wasm. Closes #521

Author: yglukhov

nimx/formatted_text.nim

@@ -377,6 +377,7 @@ proc getByteOffsetsForRunePositions(t: FormattedText, positions: openarray[int],
     r = positions[i]
 
 proc uniDelete*(t: FormattedText, start, stop: int) =
+  if stop < start: return
   t.cacheValid = false
 
   var sa = t.attrIndexForRuneAtPos(start)

nimx/private/windows/web_window.nim

@@ -10,6 +10,7 @@ import nimx/private/js_vk_map
 type WebWindow* = ref object of Window
   renderingContext: GraphicsContext
   canvasId: string
+  textInputCompositionInProgress: bool
 
 proc fullScreenAvailableAux(): int {.importwasmraw: """
   var d = document;
@@ -304,19 +305,33 @@ method onResize*(w: WebWindow, newSize: Size) =
   let vp = w.frame.size * p
   sharedGL().viewport(0, 0, GLSizei(vp.width), GLsizei(vp.height))
 
-proc startTextInputAux(cb: proc(a: JSRef) {.cdecl.}) {.importwasmraw: """
-  if (window.__nimx_textinput === undefined) {
-    var i = window.__nimx_textinput = document.createElement('input');
-    i.type = 'text';
-    i.style.position = 'absolute';
-    i.style.top = '-99999px';
-    document.body.appendChild(i)
-  }
-  window.__nimx_textinput.oninput = () => {
-    _nime._dvi($0, _nimok(window.__nimx_textinput.value));
-    window.__nimx_textinput.value = ""
-  };
-  setTimeout(() => window.__nimx_textinput.focus(), 1)
+proc startTextInputAux(cb: proc(e: int32, a: JSRef) {.cdecl.}, x, y, w, h: float32, canvasId: cstring) {.importwasmraw: """
+  if (window.__nimx_textinput) window.__nimx_textinput.remove();
+  var d = document, i = window.__nimx_textinput = d.createElement('input'),
+  c = d.getElementById(_nimsj($5)),
+  l = (n, k) => i.addEventListener(n, e => _nime._dvii($0, k, _nimok(e.data)));
+
+  i.type = 'text';
+
+  Object.assign(i.style, {
+    position: 'absolute',
+    left: (c.offsetLeft + $1) + 'px',
+    top: (c.offsetTop + $2) + 'px',
+    width: $3 + 'px',
+    height: $4 + 'px',
+    opacity: '0',            // Fully transparent
+    pointerEvents: 'none',   // Not interactive
+    zIndex: 10               // Above canvas
+  });
+
+  d.body.appendChild(i);
+
+  l("input", 0);
+  l("compositionupdate", 1);
+  l("compositionstart", 2);
+  l("compositionend", 3);
+
+  setTimeout(() => i.focus(), 1)
 """.}
 
 proc length(j: JSObj): int {.importwasmp.}
@@ -330,29 +345,45 @@ proc jsStringToStr(v: JSObj): string =
       let actualSz = strWriteOut(v, addr result[0], sz)
       result.setLen(actualSz)
 
-proc onInput(a: JSRef) {.cdecl.} =
-  var e = newEvent(etTextInput)
-  e.text = block:
+proc onInput(eventKind: int32, text: JSRef) {.cdecl.} =
+  let text = block:
     # Force JSRef destruction early
-    jsStringToStr(JSObj(o: a))
-
+    jsStringToStr(JSObj(o: text))
   let a = mainApplication()
-  e.window = a.keyWindow
-  if not e.window.isNil:
-    discard a.handleEvent(e)
+  let w = WebWindow(a.keyWindow)
+  var e = newEvent(etTextInput)
+  e.text = text
+  e.window = w
+
+  if not w.isNil:
+    case eventKind
+    of 0, 1: # 0 = input, 1 = compositionupdate
+      if eventKind == 0:
+        if not w.textInputCompositionInProgress:
+          discard a.handleEvent(e)
+      else:
+        e.kind = etTextEditing
+        discard a.handleEvent(e)
+
+    of 2: # compositionstart
+      w.textInputCompositionInProgress = true
+    else: # compositionend
+      w.textInputCompositionInProgress = false
+      discard a.handleEvent(e)
 
 method startTextInput*(w: WebWindow, r: Rect) =
-  defineDyncall("vi")
-  startTextInputAux(onInput)
+  defineDyncall("vii")
+  startTextInputAux(onInput, r.x, r.y, r.width, r.height, w.canvasId)
 
 proc stopTextInputAux() {.importwasmraw: """
-  if (window.__nimx_textinput !== undefined) {
-    window.__nimx_textinput.oninput = null;
-    window.__nimx_textinput.blur()
+  if (window.__nimx_textinput) {
+    window.__nimx_textinput.remove();
+    window.__nimx_textinput = null
   }
 """.}
 
 method stopTextInput*(w: WebWindow) =
+  w.textInputCompositionInProgress = false
   stopTextInputAux()
 
 # window.onload = () => _nime._dv(p)

nimx/text_field.nim

@@ -18,6 +18,7 @@ type
     selectionStartLine: int
     selectionEndLine: int
     textSelection: Slice[int]
+    editingRange: Slice[int] # For IME input
     multiline*: bool
     hasBezel*: bool
 
@@ -113,6 +114,7 @@ method init*(t: TextField) =
   t.editable = true
   t.selectable = true
   t.textSelection = -1 .. -1
+  t.editingRange = -1 .. -1
   t.backgroundColor = whiteColor()
   t.hasBezel = true
   t.mText = newFormattedText()
@@ -351,7 +353,7 @@ proc clearSelection(t: TextField) =
 proc insertText(t: TextField, s: string) =
   #if t.mText.isNil: t.mText.text = ""
 
-  let th = t.mText.totalHeight
+  # let th = t.mText.totalHeight
   if t.textSelection.len > 0:
     t.clearSelection()
 
@@ -499,7 +501,34 @@ method onKeyDown*(t: TextField, e: var Event): bool =
 method onTextInput*(t: TextField, s: string): bool =
   if not t.editable: return false
   result = true
-  t.insertText(s)
+  if t.editingRange.a >= 0:
+    # We're im IME mode. Exit it
+    t.mText.uniDelete(t.editingRange.a, t.editingRange.b)
+    t.mText.uniInsert(t.editingRange.a, s)
+    cursorPos = t.editingRange.a + s.runeLen
+    t.editingRange.a = -1
+    t.updateCursorOffset()
+    t.bumpCursorVisibility()
+    t.sendAction()
+  else:
+    t.insertText(s)
+
+method onTextEditing*(t: TextField, s: string): bool =
+  if not t.editable: return false
+  result = true
+
+  if t.textSelection.len > 0:
+    t.clearSelection()
+
+  if t.editingRange.a >= 0:
+    t.mText.uniDelete(t.editingRange.a, t.editingRange.b)
+  else:
+    t.editingRange.a = cursorPos
+  t.mText.uniInsert(t.editingRange.a, s)
+  t.editingRange.b = t.editingRange.a + s.runeLen - 1
+  cursorPos = t.editingRange.b + 1
+  t.updateCursorOffset()
+  t.bumpCursorVisibility()
 
 method viewShouldResignFirstResponder*(v: TextField, newFirstResponder: View): bool =
   result = true

nimx/unistring.nim

@@ -60,5 +60,8 @@ when isMainModule:
   testDelete("bye", 1, 2, "b")
   testDelete("asdf", 1, 1, "adf")
   testDelete("абвЙ", 1, 2, "аЙ")
+  testDelete("абвЙ", 1, 0, "абвЙ")
+  testDelete("абвЙ", 3, 1, "абвЙ")
+  testDelete("абвЙ", 0, -1, "абвЙ")
 
 

nimx/view_event_handling.nim

@@ -5,6 +5,7 @@ export event
 method onKeyDown*(v: View, e: var Event): bool {.base, gcsafe.} = discard
 method onKeyUp*(v: View, e: var Event): bool {.base, gcsafe.} = discard
 method onTextInput*(v: View, s: string): bool {.base, gcsafe.} = discard
+method onTextEditing*(v: View, s: string): bool {.base, gcsafe.} = discard
 method onGestEvent*(d: GestureDetector, e: var Event): bool {.base, gcsafe.} = discard
 method onScroll*(v: View, e: var Event): bool {.base, gcsafe.} = discard
 
@@ -207,5 +208,7 @@ proc processKeyboardEvent*(v: View, e: var Event): bool =
       result = v.onKeyUp(e)
   of etTextInput:
     result = v.onTextInput(e.text)
+  of etTextEditing:
+    result = v.onTextEditing(e.text)
   else:
     discard

nimx/window_event_handling.nim

@@ -69,9 +69,7 @@ method handleEvent*(w: Window, e: var Event): bool {.base, gcsafe.} =
       currentDragSystem().processDragEvent(e)
       w.handleMouseOverEvent(e)
       result = w.processTouchEvent(e)
-    of etKeyboard:
-      result = w.propagateEventThroughResponderChain(e)
-    of etTextInput:
+    of etKeyboard, etTextInput, etTextEditing:
       result = w.propagateEventThroughResponderChain(e)
     of etWindowResized:
       result = true