From 3388b6db261b6ee12dd20e504b5f5a94411b478d Mon Sep 17 00:00:00 2001
From: Ahmed Mostafa <ahmed.mostafa1198@gmail.com>
Date: Fri, 10 Feb 2023 00:21:07 +0200
Subject: [PATCH] Fix: PEN as default TOOL don't work bug (Issue #288)

---
 .../src/components/tools/Pen/PenOptions.jsx   | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 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
index f6caccdd..ee7bd8ba 100644
--- 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