Handle Mouse Down Update checking mouse move as tag goes to top 0 and left 0 issue - fixed

src/components/process/processStepTwo/DroppedItemsTagsCon.tsx

@@ -172,42 +172,29 @@ const DroppedItemsTagsCon = forwardRef(({
         const scaleX = renderedWidth && pageWidth ? renderedWidth / pageWidth : 1;
         const scaleY = renderedHeight && pageHeight ? renderedHeight / pageHeight : 1;
 
-        console.log("=== DRAG DEBUG ===");
-        console.log("scaleFactor (zoom):", scale);
-        console.log("renderedWidth:", renderedWidth, "pageWidth:", pageWidth);
-        console.log("renderedHeight:", renderedHeight, "pageHeight:", pageHeight);
-        console.log("scaleX (render ratio):", scaleX);
-        console.log("scaleY (render ratio):", scaleY);
-        console.log("combined scaleX:", scaleX * scale);
-        console.log("combined scaleY:", scaleY * scale);
-
         let targetContainer = event?.currentTarget?.parentElement?.parentElement;
         let targetElement = event?.currentTarget?.parentElement;
         if (!targetContainer || !targetElement) return;
 
-        // Get container rect in screen space
+        const containerRect = targetContainer.getBoundingClientRect();
-        // const containerRect = targetContainer.getBoundingClientRect();
         const elementRect = targetElement.getBoundingClientRect();
 
-        const containerRect = targetContainer.getBoundingClientRect();
-
-        console.log("containerRect:", containerRect.left, containerRect.top, containerRect.width, containerRect.height);
-        console.log("elementRect:", elementRect.left, elementRect.top, elementRect.width, elementRect.height);
-        console.log("mouse at:", event.clientX, event.clientY);
-
-        // Current tag position in original coord space (from state)
         const currentItem = droppedItems[key][index];
         const tagOriginalLeft = currentItem.dimensions.left;
         const tagOriginalTop = currentItem.dimensions.top;
 
-        // Tag's top-left in screen space
         const tagScreenLeft = containerRect.left + tagOriginalLeft * scaleX * scale;
         const tagScreenTop = containerRect.top + tagOriginalTop * scaleY * scale;
 
-        // Click offset within tag in screen pixels
         const clickOffsetX = event.clientX - tagScreenLeft;
         const clickOffsetY = event.clientY - tagScreenTop;
 
+        // Track whether mouse actually moved
+        let hasMoved = false;
+
+        // Initialize positionRef with CURRENT position, not 0,0
+        positionRef.current = { left: tagOriginalLeft, top: tagOriginalTop };
+
         let isGroupAttr = event.currentTarget.hasAttribute("group");
         let groupId = null;
         if (isGroupAttr) groupId = event.currentTarget.getAttribute("group");
@@ -219,25 +206,21 @@ const DroppedItemsTagsCon = forwardRef(({
         }
 
         const handleMouseMove = (event: MouseEvent) => {
+            hasMoved = true; // Marking that it ge tmoved
+
             const currentContainerRect = targetContainer!.getBoundingClientRect();
 
-            // Mouse relative to container in screen pixels
             const mouseScreenX = event.clientX - currentContainerRect.left;
             const mouseScreenY = event.clientY - currentContainerRect.top;
 
-            // Subtract click offset to get tag's top-left in screen pixels
             const tagScreenX = mouseScreenX - clickOffsetX;
             const tagScreenY = mouseScreenY - clickOffsetY;
 
-            // Convert screen pixels to original coord space
-            // screen = original * scaleX * scale  →  original = screen / scaleX / scale
             const originalLeft = tagScreenX / scale / scaleX;
             const originalTop = tagScreenY / scale / scaleY;
 
             positionRef.current = { left: originalLeft, top: originalTop };
 
-            // Set style in rendered pixel space (original * scaleX)
-            // The parent transform:scale handles the rest
             targetElement!.style.left = `${originalLeft * scaleX}px`;
             targetElement!.style.top = `${originalTop * scaleY}px`;
 
@@ -249,6 +232,13 @@ const DroppedItemsTagsCon = forwardRef(({
         };
 
         const handleMouseUp = (e: MouseEvent) => {
+            // Just clean not update - NOTE
+            if (!hasMoved) {
+                document.removeEventListener("pointermove", handleMouseMove);
+                document.removeEventListener("pointerup", handleMouseUp);
+                return;
+            }
+
             let hoveredDocId: any = ""
             let hoveredPageIndex: string = ""
             let { left, top } = positionRef.current;
@@ -277,7 +267,6 @@ const DroppedItemsTagsCon = forwardRef(({
             }
 
             if (hoveredContainer === null || hoveredDocId != currentDocumentId) {
-                // Revert
                 targetElement!.style.left = `${tagOriginalLeft * scaleX}px`;
                 targetElement!.style.top = `${tagOriginalTop * scaleY}px`;
 
@@ -338,7 +327,6 @@ const DroppedItemsTagsCon = forwardRef(({
                     };
                 }
 
-                // Cross page
                 const newContainerRect = hoveredContainer?.getBoundingClientRect() as DOMRect;
                 const newMouseScreenX = e.clientX - newContainerRect.left;
                 const newMouseScreenY = e.clientY - newContainerRect.top;