debounce

frontend/src/desktop/useDocumentDrag.js

@@ -19,7 +19,6 @@ const useDocumentDrag = (options = {}) => {
     resolveBaseMetrics,
     bringToFront,
     setDraggingId,
-    syncLayoutSnapshot,
     canvasSize,
     openOverlayForDoc,
     recalcVisibleDocIds,
@@ -114,7 +113,7 @@ const useDocumentDrag = (options = {}) => {
   }, [dragTransformsRef, layoutRef, markLayoutDirty]);
 
   const finishDrag = useCallback(
-    (pointerId, { shouldSync = false, clearTransforms = true } = {}) => {
+    (pointerId, { clearTransforms = true } = {}) => {
       const state = dragStateRef.current;
       if (state && state.pointerId === pointerId) {
         const capturedTarget = state.capturedTarget;
@@ -134,11 +133,8 @@ const useDocumentDrag = (options = {}) => {
       if (clearTransforms) {
         clearDragTransforms();
       }
-      if (shouldSync) {
-        syncLayoutSnapshot(true);
-      }
     },
-    [clearDragTransforms, debugDrag, engine, setDraggingId, syncLayoutSnapshot],
+    [clearDragTransforms, debugDrag, engine, setDraggingId],
   );
 
   const handlePointerDown = useCallback(
@@ -176,7 +172,7 @@ const useDocumentDrag = (options = {}) => {
         : [];
 
       if (!stackDocIdsOption && !pointerModifierActive && !wasSelectedAtPointerDown) {
-        selectionIds = [];
+        selectionIds = [docKey];
       }
 
       if (stackDocIdsOption && stackDocIdsOption.length) {
@@ -193,20 +189,23 @@ const useDocumentDrag = (options = {}) => {
       if (!stackDocIdsOption && metaOrCtrl && !selectionIds.includes(docKey)) {
         selectionIds = [...selectionIds, docKey];
       }
-      let groupDocIds = selectionIds
+
+      selectionIds = selectionIds
         .map((id) => String(id))
         .filter((id, index, array) => array.indexOf(id) === index && documentLookup.has(id));
-      if (!groupDocIds.includes(docKey)) {
-        groupDocIds.unshift(docKey);
+
+      if (!selectionIds.includes(docKey)) {
+        selectionIds.unshift(docKey);
       }
-      groupDocIds = groupDocIds.filter((id, index, array) => array.indexOf(id) === index);
-      if (!groupDocIds.length) {
-        groupDocIds = [docKey];
+
+      if (!selectionIds.length) {
+        selectionIds = [docKey];
       }
-      const isGroupDrag = groupDocIds.length > 1;
+
+      const isGroupDrag = selectionIds.length > 1;
 
       if (isGroupDrag) {
-        groupDocIds.forEach((id) => {
+        selectionIds.forEach((id) => {
           if (id !== docKey) {
         engine?.cancelInertiaAnimation?.(id);
           }
@@ -230,7 +229,7 @@ const useDocumentDrag = (options = {}) => {
       if (!modifierPressed) {
         if (isGroupDrag) {
           const layout = layoutRef.current;
-          const ordered = [...groupDocIds]
+          const ordered = [...selectionIds]
             .filter((id, index, array) => array.indexOf(id) === index)
             .sort((a, b) => {
               const aZ = layout.get(a)?.z ?? 0;
@@ -275,7 +274,7 @@ const useDocumentDrag = (options = {}) => {
       const localPointerOffsetX = pointerOffsetX * cosInitial - pointerOffsetY * sinInitial;
       const localPointerOffsetY = pointerOffsetX * sinInitial + pointerOffsetY * cosInitial;
 
-      const groupItems = groupDocIds.map((id) => {
+      const groupItems = selectionIds.map((id) => {
         const itemDoc = documentLookup.get(id);
         const itemSize = ensureDocumentSize(itemDoc) || sizeInfo;
         const itemWidth = itemSize.width || docWidth;
@@ -343,7 +342,7 @@ const useDocumentDrag = (options = {}) => {
         containerRectLeft: containerLeft,
         containerRectTop: containerTop,
         isGroup: isGroupDrag,
-        groupDocIds,
+        activeDocIds: selectionIds,
         groupItems,
         groupElevated: !isGroupDrag,
         stackDocIds: hasStackSource ? stackDocIdsOption : null,
@@ -368,7 +367,7 @@ const useDocumentDrag = (options = {}) => {
         });
       });
 
-      engine?.beginDrag?.(state.groupDocIds);
+      engine?.beginDrag?.(state.activeDocIds);
 
       setDraggingId(docKey);
 
@@ -380,6 +379,7 @@ const useDocumentDrag = (options = {}) => {
         const node = itemRefs.current.get(item.docId);
         if (node) {
           item.displayRotation = item.initialRotation;
+          const itemEntry = layoutRef.current.get(item.docId) || null;
           applyDomTransform(node, {
             centerX: item.currentCenterX,
             centerY: item.currentCenterY,
@@ -387,6 +387,7 @@ const useDocumentDrag = (options = {}) => {
             height: item.height,
             rotation: item.displayRotation ?? 0,
             scale: 1,
+            zIndex: itemEntry?.z,
           });
         }
       });
@@ -447,7 +448,7 @@ const useDocumentDrag = (options = {}) => {
         }
         if (!state.groupElevated) {
           const layout = layoutRef.current;
-          const sortedGroup = state.groupDocIds
+          const sortedGroup = state.activeDocIds
             .filter((id) => id !== state.docKey)
             .sort((a, b) => {
               const aZ = layout.get(a)?.z ?? 0;
@@ -515,6 +516,7 @@ const useDocumentDrag = (options = {}) => {
           item.displayRotation += (item.targetRotation - item.displayRotation) * rotationBlend;
         }
 
+        const entry = layoutRef.current.get(item.docId) || null;
         const payload = {
           centerX: item.currentCenterX,
           centerY: item.currentCenterY,
@@ -522,6 +524,7 @@ const useDocumentDrag = (options = {}) => {
           width: item.width,
           height: item.height,
           scale: isPrimary ? state.dragScale || 1 : 1,
+          zIndex: entry?.z,
         };
 
         setDragTransform(item.docId, payload);
@@ -630,6 +633,7 @@ const useDocumentDrag = (options = {}) => {
       state.currentCenterX = currentCenterX;
       state.currentCenterY = currentCenterY;
 
+      const layoutEntry = layoutRef.current.get(state.docKey) || null;
       const transformPayload = {
         centerX: currentCenterX,
         centerY: currentCenterY,
@@ -637,6 +641,7 @@ const useDocumentDrag = (options = {}) => {
         width: state.width,
         height: state.height,
         scale: state.dragScale || 1,
+        zIndex: layoutEntry?.z,
       };
 
       setDragTransform(state.docKey, transformPayload);
@@ -710,8 +715,8 @@ const useDocumentDrag = (options = {}) => {
 
       if (state.isGroup) {
         engine?.finalizeGroupDrag?.(state);
-        commitActiveDragTransforms(state.groupDocIds);
-        finishDrag(event.pointerId, { shouldSync: true });
+        commitActiveDragTransforms(state.activeDocIds);
+        finishDrag(event.pointerId);
         recalcVisibleDocIds();
         return;
       }
@@ -728,7 +733,7 @@ const useDocumentDrag = (options = {}) => {
           dragScale: state.dragScale || 1,
         };
         const docId = state.docKey;
-        finishDrag(event.pointerId, { shouldSync: true });
+        finishDrag(event.pointerId);
         engine?.startInertiaAnimation?.(docId, inertiaState);
         return;
       }
@@ -770,8 +775,8 @@ const useDocumentDrag = (options = {}) => {
       if (state && state.pointerId === event.pointerId && state.moved) {
         if (state.isGroup) {
           engine?.finalizeGroupDrag?.(state);
-          commitActiveDragTransforms(state.groupDocIds);
-          finishDrag(event.pointerId, { shouldSync: true });
+          commitActiveDragTransforms(state.activeDocIds);
+          finishDrag(event.pointerId);
           recalcVisibleDocIds();
           return;
         }
@@ -787,7 +792,7 @@ const useDocumentDrag = (options = {}) => {
           dragScale: state.dragScale || 1,
         };
         const docId = state.docKey;
-        finishDrag(event.pointerId, { shouldSync: true });
+        finishDrag(event.pointerId);
         engine?.startInertiaAnimation?.(docId, inertiaState);
         return;
       }