Fix: PEN as default TOOL don't work bug (Issue #288)

scaleflex · Feb 9, 2023 · 3388b6d · 3388b6d
1 parent 2e6a0a9
commit 3388b6d
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx
@@ -43,7 +43,7 @@ const PenOptions = ({ t }) => {
       pos.offsetX - (designLayer.attrs.xPadding || 0),
       pos.offsetY - (designLayer.attrs.yPadding || 0),
     ];
-  }, []);
+  }, [designLayer]);
 
   const handlePointerMove = useCallback(() => {
     if (!updatedPen.current.moved) {
@@ -72,7 +72,7 @@ const PenOptions = ({ t }) => {
         },
       });
     }
-  }, []);
+  }, [getPointerPosition]);
 
   const handlePointerUp = useCallback(() => {
     if (updatedPen.current.id) {
@@ -91,23 +91,26 @@ const PenOptions = ({ t }) => {
     document.removeEventListener('touchend', handlePointerUp, eventsOptions);
     document.removeEventListener('mouseleave', handlePointerUp, eventsOptions);
     document.removeEventListener('touchcancel', handlePointerUp, eventsOptions);
-  }, []);
+  }, [handlePointerMove]);
 
-  const handlePointerDown = useCallback((e) => {
-    if (e.target.attrs.draggable) {
-      return;
-    }
-    e.evt.preventDefault();
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (e.target.attrs.draggable) {
+        return;
+      }
+      e.evt.preventDefault();
 
-    updatedPen.current = { points: getPointerPosition() };
+      updatedPen.current = { points: getPointerPosition() };
 
-    canvasRef.current.on('mousemove touchmove', handlePointerMove);
-    canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
-    document.addEventListener('mouseup', handlePointerUp, eventsOptions);
-    document.addEventListener('touchend', handlePointerUp, eventsOptions);
-    document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
-    document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
-  }, []);
+      canvasRef.current.on('mousemove touchmove', handlePointerMove);
+      canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
+      document.addEventListener('mouseup', handlePointerUp, eventsOptions);
+      document.addEventListener('touchend', handlePointerUp, eventsOptions);
+      document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
+      document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
+    },
+    [getPointerPosition, handlePointerMove, handlePointerUp],
+  );
 
   useEffect(() => {
     canvasRef.current = designLayer?.getStage();
@@ -120,7 +123,7 @@ const PenOptions = ({ t }) => {
         canvasRef.current.off('mousedown touchstart', handlePointerDown);
       }
     };
-  }, []);
+  }, [designLayer]);
 
   return (
     <AnnotationOptions