Draft: Issue #3466063: Middle click + drag and moving fast with the mouse...

Issue #3466063: Middle click + drag and moving fast with the mouse miscalculates canvas scroll position

Closes #3466063

ui/src/features/canvas/Canvas.tsx

@@ -54,8 +54,36 @@ const Canvas = () => {
     modifierKeyPressedRef.current = modifierKeyPressed;
   }, [modifierKeyPressed]);
 
-  // Add an event listener for a message from the iFrame that a user used hot keys for zooming in/out
-  // while inside the iFrame.
+  const handleMouseMove = useCallback(
+    (clientX: number, clientY: number) => {
+      if (isPanningParentRef.current || isPanningIFrameRef.current) {
+        const translationX = startPos.x - clientX;
+        const translationY = startPos.y - clientY;
+
+        if (animFrameIdRef.current) {
+          cancelAnimationFrame(animFrameIdRef.current);
+        }
+
+        animFrameIdRef.current = requestAnimationFrame(() => {
+          if (canvasRef.current) {
+            canvasRef.current.style.transform = `scale(${canvasViewPort.scale})`;
+          }
+          if (canvasPaneRef.current) {
+            canvasPaneRef.current.scrollLeft = translationX;
+            canvasPaneRef.current.scrollTop = translationY;
+            dispatch(
+              setCanvasViewPort({
+                x: translationX,
+                y: translationY,
+              }),
+            );
+          }
+        });
+      }
+    },
+    [dispatch, canvasViewPort.scale, startPos.x, startPos.y],
+  );
+
   useEffect(() => {
     function handleIframeEvent(event: MessageEvent) {
       const type = event.data.type ? event.data.type : event.data;
@@ -81,8 +109,9 @@ const Canvas = () => {
           dispatch(setPanningParent(false));
           break;
         case 'dispatchMouseMove':
-          isPanningIFrameRef.current &&
-            handlePreviewMouseMove(event.data.coordinates);
+          if (isPanningIFrameRef.current) {
+            handleMouseMove(event.data.coordinates.x, event.data.coordinates.y);
+          }
           break;
       }
     }
@@ -90,19 +119,10 @@ const Canvas = () => {
     return () => {
       window.removeEventListener('message', handleIframeEvent);
     };
-  });
+  }, [dispatch, handleMouseMove]);
 
   useEffect(() => {
     if (previewsContainerRef.current && canvasRef.current) {
-      // let previewContainerWidth = previewsContainerRef.current.offsetWidth;
-      // console.log(previewContainerWidth);
-      // let previewContainerHeight = previewsContainerRef.current.offsetHeight;
-      // let canvasX = canvasRef.current.offsetWidth / 2;
-      // let canvasY = canvasRef.current.offsetHeight / 2;
-      //
-      // canvasX = canvasX + previewContainerWidth;
-      // canvasY = canvasY - previewContainerHeight / 2;
-      // @todo - this calc should be dynamic to correctly center the preview container in the canvas pane.
       dispatch(setCanvasViewPort({ x: 3740, y: 4500 }));
     }
   }, [dispatch]);
@@ -135,52 +155,6 @@ const Canvas = () => {
     }
   };
 
-  const handleCanvasMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isPanningParentRef.current) {
-      const { clientX, clientY } = e;
-      const translationX = startPos.x - clientX;
-      const translationY = startPos.y - clientY;
-
-      if (animFrameIdRef.current) {
-        cancelAnimationFrame(animFrameIdRef.current);
-      }
-
-      animFrameIdRef.current = requestAnimationFrame(() => {
-        if (canvasRef.current) {
-          canvasRef.current.style.transform = `scale(${canvasViewPort.scale})`;
-        }
-        if (canvasPaneRef.current) {
-          canvasPaneRef.current.scrollLeft = translationX;
-          canvasPaneRef.current.scrollTop = translationY;
-          dispatch(
-            setCanvasViewPort({
-              x: translationX,
-              y: translationY,
-            }),
-          );
-        }
-      });
-    }
-  };
-
-  const handlePreviewMouseMove = ({ x, y }: { x: number; y: number }) => {
-    if (isPanningIFrameRef.current) {
-      const translationX = startPos.x - x;
-      const translationY = startPos.y - y;
-
-      if (animFrameIdRef.current) {
-        cancelAnimationFrame(animFrameIdRef.current);
-      }
-
-      animFrameIdRef.current = requestAnimationFrame(() => {
-        if (canvasPaneRef.current) {
-          canvasPaneRef.current.scrollLeft += translationX;
-          canvasPaneRef.current.scrollTop += translationY;
-        }
-      });
-    }
-  };
-
   const handleMouseUp = useCallback(() => {
     dispatch(setPanningParent(false));
     dispatch(setPanningIFrame(false));
@@ -189,7 +163,6 @@ const Canvas = () => {
   const handleWheel = useCallback(
     (e: WheelEvent) => {
       if (modifierKeyPressedRef.current) {
-        // Determine zoom direction
         e.deltaY > 0
           ? dispatch(canvasViewPortZoomOut())
           : dispatch(canvasViewPortZoomIn());
@@ -230,6 +203,10 @@ const Canvas = () => {
     };
   }, [handleWheel, handleMouseUp]);
 
+  const handleCanvasMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    handleMouseMove(e.clientX, e.clientY);
+  };
+
   return (
     <div
       className={clsx(styles.canvasPane, {