Fix display leftover (#74)

fcitx-contrib · Oct 3, 2024 · 94aff6d · 94aff6d
1 parent bbe6662
commit 94aff6d
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 16 deletions.
diff --git a/include/webview_candidate_window.hpp b/include/webview_candidate_window.hpp
@@ -8,6 +8,7 @@
 #else
 #include "webview.h"
 #endif
+#include <cstdint>
 #include <iostream>
 #include <nlohmann/json.hpp>
 #include <sstream>
@@ -67,6 +68,8 @@ class WebviewCandidateWindow : public CandidateWindow {
     int accent_color_ = 0;
     layout_t layout_ = layout_t::horizontal;
     writing_mode_t writing_mode_ = writing_mode_t::horizontal_tb;
+    uint32_t epoch = 0; // A timestamp for async results from
+                        // webview
 
   private:
     /* Platform-specific interfaces (implemented in 'platform') */

diff --git a/page/global.d.ts b/page/global.d.ts
@@ -34,13 +34,13 @@ declare global {
     _scroll: (start: number, length: number) => void
     _askActions: (index: number) => void
     _action: (index: number, id: number) => void
-    _resize: (dx: number, dy: number, anchorTop: number, anchorRight: number, anchorBottom: number, anchorLeft: number, panelTop: number, panelRight: number, panelBottom: number, panelLeft: number, panelRadius: number, borderWidth: number, fullWidth: number, fullHeight: number, dragging: boolean) => void
+    _resize: (epoch: number, dx: number, dy: number, anchorTop: number, anchorRight: number, anchorBottom: number, anchorLeft: number, panelTop: number, panelRight: number, panelBottom: number, panelLeft: number, panelRadius: number, borderWidth: number, fullWidth: number, fullHeight: number, dragging: boolean) => void
 
     // JavaScript APIs that webview_candidate_window.mm calls
     setCandidates: (cands: Candidate[], highlighted: number, markText: string, pageable: boolean, hasPrev: boolean, hasNext: boolean, scrollState: SCROLL_STATE, scrollStart: boolean, scrollEnd: boolean) => void
     setLayout: (layout: 0 | 1) => void
     updateInputPanel: (preeditHTML: string, auxUpHTML: string, auxDownHTML: string) => void
-    resize: (dx: number, dy: number, dragging: boolean, hasContextmenu: boolean) => void
+    resize: (new_epoch: number, dx: number, dy: number, dragging: boolean, hasContextmenu: boolean) => void
     setTheme: (theme: 0 | 1 | 2) => void
     setAccentColor: (color: number | null) => void
     setStyle: (style: string) => void

diff --git a/page/ux.ts b/page/ux.ts
@@ -12,6 +12,7 @@ import {
 
 const DRAG_THRESHOLD = 10
 
+let epoch = 0
 let pressed = false
 let dragging = false
 let startX = 0
@@ -37,11 +38,13 @@ interface ShadowBox {
 }
 
 export function resize(
+  new_epoch: number,
   dx: number,
   dy: number,
   dragging: boolean,
   hasContextmenu: boolean,
 ) {
+  epoch = new_epoch
   function adaptWindowSize(reserveSpaceForContextmenu: boolean) {
     let {
       anchorTop,
@@ -85,7 +88,7 @@ export function resize(
     const { borderRadius, borderWidth } = getComputedStyle(panel)
     const bWidth = Math.max(...borderWidth.split(' ').map(Number.parseFloat))
     const pRadius = Math.max(...borderRadius.split(' ').map(Number.parseFloat))
-    window.fcitx._resize(dx, dy, anchorTop, anchorRight, anchorBottom, anchorLeft, pRect.top, pRect.right, pRect.bottom, pRect.left, pRadius, bWidth, right, bottom, dragging)
+    window.fcitx._resize(epoch, dx, dy, anchorTop, anchorRight, anchorBottom, anchorLeft, pRect.top, pRect.right, pRect.bottom, pRect.left, pRadius, bWidth, right, bottom, dragging)
   }
   adaptWindowSize(hasContextmenu)
   if (!dragging) {
@@ -165,7 +168,7 @@ export function showContextmenu(x: number, y: number, index: number, actions: Ca
   contextmenu.style.top = `${y}px`
   contextmenu.style.left = `${x}px`
   contextmenu.style.display = 'block'
-  resize(0, 0, false, true)
+  resize(epoch, 0, 0, false, true)
 }
 
 export function hideContextmenu() {
@@ -207,7 +210,7 @@ receiver.addEventListener('mousemove', (e) => {
   dX += dx
   dY += dy
   dragOffset = Math.max(dragOffset, dX * dX + dY * dY)
-  resize(dx, dy, true, false)
+  resize(epoch, dx, dy, true, false)
 })
 
 receiver.addEventListener('mouseup', (e) => {

diff --git a/src/platform/js.cpp b/src/platform/js.cpp
@@ -18,7 +18,10 @@ void WebviewCandidateWindow::set_transparent_background() {}
 
 void WebviewCandidateWindow::update_accent_color() {}
 
-void WebviewCandidateWindow::hide() { EM_ASM(fcitx.hidePanel()); }
+void WebviewCandidateWindow::hide() {
+    EM_ASM(fcitx.hidePanel());
+    epoch += 1;
+}
 
 void WebviewCandidateWindow::write_clipboard(const std::string &html) {}
 

diff --git a/src/platform/linux.cpp b/src/platform/linux.cpp
@@ -37,7 +37,7 @@ void WebviewCandidateWindow::set_transparent_background() {
 
 void WebviewCandidateWindow::update_accent_color() {}
 
-void WebviewCandidateWindow::hide() {}
+void WebviewCandidateWindow::hide() { epoch += 1; }
 
 void WebviewCandidateWindow::write_clipboard(const std::string &html) {}
 

diff --git a/src/platform/macos.mm b/src/platform/macos.mm
@@ -217,6 +217,7 @@ NSRect getNearestScreenFrame(double x, double y) {
     [window orderBack:nil];
     [window setIsVisible:NO];
     hidden_ = true;
+    epoch += 1;
 }
 
 void WebviewCandidateWindow::write_clipboard(const std::string &html) {

diff --git a/src/webview_candidate_window.cpp b/src/webview_candidate_window.cpp
@@ -44,11 +44,17 @@ WebviewCandidateWindow::WebviewCandidateWindow()
     update_accent_color();
 
     bind("_resize",
-         [this](double dx, double dy, double anchor_top, double anchor_right,
-                double anchor_bottom, double anchor_left, double panel_top,
-                double panel_right, double panel_bottom, double panel_left,
-                double panel_radius, double border_width, double width,
-                double height, bool dragging) {
+         [this](uint32_t result_epoch, double dx, double dy, double anchor_top,
+                double anchor_right, double anchor_bottom, double anchor_left,
+                double panel_top, double panel_right, double panel_bottom,
+                double panel_left, double panel_radius, double border_width,
+                double width, double height, bool dragging) {
+             // Drop results from previous epochs. This can happen
+             // because JS code runs in another thread and can be slow
+             // sometimes.
+             // NOTE: accept result_epoch=0 because of wrapping.
+             if (result_epoch != 0 && result_epoch < epoch)
+                 return;
              resize(dx, dy, anchor_top, anchor_right, anchor_bottom,
                     anchor_left, panel_top, panel_right, panel_bottom,
                     panel_left, panel_radius, border_width, width, height,
@@ -144,7 +150,8 @@ void WebviewCandidateWindow::show(double x, double y) {
         // warmed-up yet, and it won't be updated until user changes color.
         set_accent_color();
     }
-    invoke_js("resize", 0., 0., false);
+    epoch += 1;
+    invoke_js("resize", epoch, 0., 0., false);
 }
 
 static void build_html_open_tags(std::stringstream &ss, int flags) {

diff --git a/tests/global.d.ts b/tests/global.d.ts
@@ -1,6 +1,6 @@
 declare global {
   type CppCall = {
-    resize: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, boolean]
+    resize: [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, boolean]
   } | {
     select: number
   } | {

diff --git a/tests/util.ts b/tests/util.ts
@@ -10,9 +10,9 @@ export async function init(page: Page) {
   await page.evaluate(() => {
     window.fcitx.setTheme(2)
     window.cppCalls = []
-    window.fcitx._resize = (dx: number, dy: number, anchorTop: number, anchorRight: number, anchorBottom: number, anchorLeft: number, panelTop: number, panelRight: number, panelBottom: number, panelLeft: number, panelRadius: number, borderWidth: number, fullWidth: number, fullHeight: number, dragging: boolean) => {
+    window.fcitx._resize = (epoch: number, dx: number, dy: number, anchorTop: number, anchorRight: number, anchorBottom: number, anchorLeft: number, panelTop: number, panelRight: number, panelBottom: number, panelLeft: number, panelRadius: number, borderWidth: number, fullWidth: number, fullHeight: number, dragging: boolean) => {
       window.cppCalls.push({
-        resize: [dx, dy, anchorTop, anchorRight, anchorBottom, anchorLeft, panelTop, panelRight, panelBottom, panelLeft, panelRadius, borderWidth, fullWidth, fullHeight, dragging],
+        resize: [epoch, dx, dy, anchorTop, anchorRight, anchorBottom, anchorLeft, panelTop, panelRight, panelBottom, panelLeft, panelRadius, borderWidth, fullWidth, fullHeight, dragging],
       })
     }
     window.fcitx._select = (index: number) => {