BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

This commit is contained in:
Bhagwan Singh 2026-05-26 13:03:54 +05:30
parent 68c45678a3
commit f7352c04aa
1 changed files with 16 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
View File

@ -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;