From dd20eb896e938ef718aff49311caf11d49268d11 Mon Sep 17 00:00:00 2001
From: Kim Lan Phan Hoang <pyphilia@gmail.com>
Date: Fri, 27 Sep 2024 09:21:33 +0200
Subject: [PATCH] fix: prevent panning on label edit or label drag (#198)

---
 .../AddLabelsStep/AddLabelWithinFrame.tsx     | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
index b615570..819074d 100644
--- a/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
+++ b/src/modules/builder/configuration/AddLabelsStep/AddLabelWithinFrame.tsx
@@ -100,13 +100,9 @@ const AddLabelWithinFrame = (): JSX.Element => {
           labelToDelete={labelToEdit}
         />
       )}
-      <ImageFrame />
       <Box
         width="100%"
         height="100%"
-        position="absolute"
-        top="0px"
-        left="0px"
         onClick={showLabelForm}
         sx={{ cursor: 'cell' }}
         id={ADD_LABELS_IMAGE_CONTAINER_ID}
@@ -118,6 +114,7 @@ const AddLabelWithinFrame = (): JSX.Element => {
             showEditForm={showEditForm}
           />
         ))}
+        <ImageFrame />
       </Box>
     </Box>
   );
@@ -129,6 +126,9 @@ const AddLabelWithinFrameWrapper = (): JSX.Element => {
   const { isDragging, labels } = useContext(LabelsContext);
   const disabled = isDragging;
 
+  // should start enabled
+  const [disabledPanning, setDisablePanning] = useState(false);
+
   return (
     <Box sx={{ width: '100%' }}>
       {labels.length === 0 && (
@@ -138,12 +138,30 @@ const AddLabelWithinFrameWrapper = (): JSX.Element => {
       <TransformContainer
         doubleClick={{ disabled: true }}
         centerOnInit
-        panning={{ disabled }}
+        panning={{ disabled: disabledPanning }}
         pinch={{ disabled }}
         wheel={{ disabled }}
         zoomAnimation={{ disabled }}
         alignmentAnimation={{ disabled }}
         velocityAnimation={{ disabled }}
+        onPanningStart={(_instance, event) => {
+          // panning start is always called, even when disabled
+
+          // enable panning only if the clicked element is the box
+          if (
+            event.target &&
+            'nodeName' in event.target &&
+            event.target.nodeName === 'IMG'
+          ) {
+            setDisablePanning(false);
+          } else {
+            setDisablePanning(true);
+          }
+        }}
+        onPanningStop={() => {
+          // disable panning again
+          setDisablePanning(false);
+        }}
       >
         <TransformComponent
           wrapperStyle={{