Some optimizations for mouse gesture tips

Chance-fyi · Jun 13, 2024 · 02aafaf · 02aafaf
1 parent 501d206
commit 02aafaf
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/src/content.tsx b/src/content.tsx
@@ -28,10 +28,18 @@ const PlasmoOverlay = () => {
   useEffect(() => {
     if (canvasRef.current) {
       const canvasCtx = canvasRef.current.getContext();
-      document.addEventListener('mousedown', handleMouseDown.bind(null, setCanvasVisible, canvasCtx, setTooltipVisible, setTooltipValue));
+
+      const arg = {
+        canvasCtx: canvasCtx,
+        setCanvasVisible: setCanvasVisible,
+        setTooltipVisible: setTooltipVisible,
+        setTooltipValue: setTooltipValue,
+      };
+
+      document.addEventListener('mousedown', handleMouseDown.bind(null, arg));
       // Clean up the event listeners on component unmount
       return () => {
-        document.removeEventListener('mousedown', handleMouseDown.bind(null, setCanvasVisible, canvasCtx, setTooltipVisible, setTooltipValue));
+        document.removeEventListener('mousedown', handleMouseDown.bind(null, arg));
       };
     }
   }, []);

diff --git a/src/event.ts b/src/event.ts
@@ -2,20 +2,25 @@ import {getConfig} from "~config";
 import type {Point} from "~trajectory";
 import {getPathDirections} from "~trajectory";
 import {Operation} from "~operation";
+import {Operations} from "~enum";
 
 // Block right-click menu
 let blockMenu: boolean = false;
 const _ = require('lodash');
-export const handleMouseDown = async (setCanvasVisible, canvasCtx, setTooltipVisible, setTooltipValue, e: MouseEvent) => {
+export const handleMouseDown = async (arg, e: MouseEvent) => {
   // Determine if it is a right-click press
   if (e.button != 2) {
     return;
   }
-  setCanvasVisible(true);
+
+  const DefaultTooltipValue = {
+    arrow: "",
+    operation: Operations.Invalid,
+  };
+  arg.setTooltipValue(DefaultTooltipValue);
+  arg.setCanvasVisible(true);
   const config = await getConfig();
-  if (config.enableGestureCue) {
-    setTooltipVisible(true);
-  }
+  const threshold: number = 5;
 
   blockMenu = false;
   let X: number = e.clientX;
@@ -25,39 +30,44 @@ export const handleMouseDown = async (setCanvasVisible, canvasCtx, setTooltipVis
   let points: Point[] = [{x: X, y: Y}];
   let gesture: string = "";
   const handleMouseMove = (e: MouseEvent) => {
+    if (config.enableGestureCue && (Math.abs(X - e.clientX) > threshold || Math.abs(Y - e.clientY) > threshold)) {
+      arg.setTooltipVisible(true);
+    }
     const currentX: number = e.clientX;
     const currentY: number = e.clientY;
-    canvasCtx.beginPath();
-    canvasCtx.moveTo(lastX, lastY);
+    arg.canvasCtx.beginPath();
+    arg.canvasCtx.moveTo(lastX, lastY);
     // Using Bessel curves to smooth trajectories
-    canvasCtx.quadraticCurveTo(
+    arg.canvasCtx.quadraticCurveTo(
       (lastX + currentX) / 2,
       (lastY + currentY) / 2,
       currentX,
       currentY
     );
-    canvasCtx.strokeStyle = config.strokeStyle;
-    canvasCtx.lineWidth = config.lineWidth;
-    canvasCtx.stroke();
-    canvasCtx.closePath();
+    arg.canvasCtx.strokeStyle = config.strokeStyle;
+    arg.canvasCtx.lineWidth = config.lineWidth;
+    arg.canvasCtx.stroke();
+    arg.canvasCtx.closePath();
     lastX = currentX;
     lastY = currentY;
     points.push({x: currentX, y: currentY});
     gesture = _.join(getPathDirections(points), "");
     if (_.has(config.gestures, gesture)) {
-      setTooltipValue({
+      arg.setTooltipValue({
         arrow: config.arrows[gesture],
         operation: config.gestures[gesture],
       });
+    } else {
+      arg.setTooltipValue(DefaultTooltipValue);
     }
   };
   const handleMouseUp = (e: MouseEvent) => {
-    canvasCtx.clearRect(0, 0, canvasCtx.canvas.width, canvasCtx.canvas.height);
+    arg.canvasCtx.clearRect(0, 0, arg.canvasCtx.canvas.width, arg.canvasCtx.canvas.height);
     document.removeEventListener("mousemove", handleMouseMove);
     document.removeEventListener("mouseup", handleMouseUp);
-    setCanvasVisible(false);
-    setTooltipVisible(false);
-    if (X != e.clientX || Y != e.clientY) {
+    arg.setCanvasVisible(false);
+    arg.setTooltipVisible(false);
+    if (Math.abs(X - e.clientX) > threshold || Math.abs(Y - e.clientY) > threshold) {
       // Mouseover prevents right-click menu
       blockMenu = true;
     }