diff --git a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx index 3718728..e238f59 100644 --- a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx +++ b/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;