previewzoomoverlay

frontend/src/skeuomorphic_ws.jsx

@@ -500,7 +500,13 @@ const useDocumentDrag = ({
         const docId = state.docId;
         finishDrag(event.pointerId);
         if (!moved) {
-          openOverlayForDoc(docId);
+          const originInfo = {
+            rotation: state.rotation || 0,
+            scale: state.scale || 1,
+            width: state.width,
+            height: state.height,
+          };
+          openOverlayForDoc(docId, originInfo);
         }
         return;
       }
@@ -593,6 +599,8 @@ const SkeuomorphicWorkspace = ({
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
   const [draggingId, setDraggingId] = useState(null);
   const [overlayDocId, setOverlayDocId] = useState(null);
+  const [overlayOriginRect, setOverlayOriginRect] = useState(null);
+  const [overlayOriginTransform, setOverlayOriginTransform] = useState(null);
   const [previewSnapshots, setPreviewSnapshots] = useState(() => new Map());
   const [tagDropTargetId, setTagDropTargetId] = useState(null);
   const [pendingTagDocId, setPendingTagDocId] = useState(null);
@@ -852,11 +860,15 @@ const SkeuomorphicWorkspace = ({
 
   const closeOverlay = useCallback(() => {
     setOverlayDocId(null);
+    setOverlayOriginRect(null);
+    setOverlayOriginTransform(null);
   }, []);
 
   useEffect(() => {
     if (overlayDocId && !documentLookup.has(overlayDocId)) {
       setOverlayDocId(null);
+      setOverlayOriginRect(null);
+      setOverlayOriginTransform(null);
     }
   }, [overlayDocId, documentLookup]);
 
@@ -1031,7 +1043,7 @@ const SkeuomorphicWorkspace = ({
   );
 
   const openOverlayForDoc = useCallback(
-    (docId) => {
+    (docId, originInfo = null) => {
       if (!docId) {
         return;
       }
@@ -1039,10 +1051,53 @@ const SkeuomorphicWorkspace = ({
       if (!snapshot || !snapshot.url) {
         return;
       }
+      const container = itemRefs.current.get(docId);
+      const imageNode = container?.querySelector?.('.skeuo-item__card img');
+      if (!container || !imageNode) {
+        return;
+      }
+      const rect = imageNode.getBoundingClientRect();
+      let originTransform = null;
+      if (originInfo) {
+        const { rotation = 0, scale = 1, width: originWidth, height: originHeight } = originInfo;
+        originTransform = {
+          rotation,
+          scaleX: scale,
+          scaleY: scale,
+          baseWidth: originWidth,
+          baseHeight: originHeight,
+        };
+      }
+      if (!originTransform) {
+        const entry = layoutRef.current.get(docId) || null;
+        const doc = documentLookup.get(docId) || null;
+        const { width: cardWidth, height: cardHeight } = ensureDocumentSize(doc);
+        const { baseWidth, baseHeight, baseScale } = resolveBaseMetrics(doc, cardWidth, cardHeight);
+        const effectiveWidth = baseWidth * baseScale;
+        const effectiveHeight = baseHeight * baseScale;
+        originTransform = {
+          rotation: entry?.rotation ?? 0,
+          scaleX: baseScale,
+          scaleY: baseScale,
+          baseWidth: Number.isFinite(effectiveWidth) && effectiveWidth > 0 ? effectiveWidth : cardWidth,
+          baseHeight: Number.isFinite(effectiveHeight) && effectiveHeight > 0 ? effectiveHeight : cardHeight,
+        };
+      }
       bringToFront(docId);
+      setOverlayOriginRect(rect);
+      setOverlayOriginTransform(originTransform);
       setOverlayDocId(docId);
     },
-    [bringToFront, previewSnapshots],
+    [
+      bringToFront,
+      previewSnapshots,
+      itemRefs,
+      setOverlayOriginTransform,
+      ensureDocumentSize,
+      resolveBaseMetrics,
+      documentLookup,
+      layoutRef,
+    ],
   );
   const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } = useDocumentDrag({
     layoutRef,
@@ -1662,6 +1717,8 @@ const SkeuomorphicWorkspace = ({
         open={Boolean(overlayDisplay?.url)}
         display={overlayDisplay}
         onClose={closeOverlay}
+        originRect={overlayOriginRect}
+        originTransform={overlayOriginTransform}
       />
     </>
   );