image fix

frontend/src/viewer/LayoutBlockLayer.tsx

@@ -10,6 +10,14 @@ interface LayoutBlockLayerProps {
     blockId: string,
     bounds: { x: number; y: number; width: number; height: number }
   ) => void;
+  /** Original PDF-baked bounds for each block, keyed by block ID.
+   *  Survives page navigation so we can still show eraser + image tile after remount. */
+  originalBoundsMap?: Record<string, { x: number; y: number; width: number; height: number }>;
+  /** Called when a block is first dragged so the parent can persist its original bounds. */
+  onRecordOriginalBounds?: (
+    blockId: string,
+    bounds: { x: number; y: number; width: number; height: number }
+  ) => void;
 }
 
 type HandleType = 'move' | 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w';
@@ -22,6 +30,8 @@ export const LayoutBlockLayer: React.FC<LayoutBlockLayerProps> = ({
   selectedBlockId,
   onSelectBlock,
   onUpdateBlockBounds,
+  originalBoundsMap = {},
+  onRecordOriginalBounds,
 }) => {
   const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
 
@@ -30,11 +40,6 @@ export const LayoutBlockLayer: React.FC<LayoutBlockLayerProps> = ({
     Record<string, { x: number; y: number; width: number; height: number }>
   >({});
 
-  // The block's original bounds on the PDF canvas (set on first real drag)
-  const [originalBounds, setOriginalBounds] = useState<
-    Record<string, { x: number; y: number; width: number; height: number }>
-  >({});
-
   const latestBoundsRef = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
 
   const startDrag = (
@@ -69,9 +74,9 @@ export const LayoutBlockLayer: React.FC<LayoutBlockLayerProps> = ({
         if (Math.hypot(rawDx, rawDy) < DRAG_THRESHOLD_PX) return;
         dragStarted = true;
         // Record original PDF-canvas position on first real drag (once per block)
-        setOriginalBounds((prev) =>
-          prev[block.id] ? prev : { ...prev, [block.id]: { ...block.bounds } }
-        );
+        if (!originalBoundsMap[block.id] && onRecordOriginalBounds) {
+          onRecordOriginalBounds(block.id, { ...block.bounds });
+        }
       }
 
       const dx = rawDx / scale;
@@ -139,7 +144,6 @@ export const LayoutBlockLayer: React.FC<LayoutBlockLayerProps> = ({
         const isSelected = selectedBlockId === block.id;
         const isEditing  = editingBlockId  === block.id;
         const isImage    = block.type === 'image';
-        const hasMoved   = !!tempBounds[block.id];
 
         const bounds = tempBounds[block.id] || block.bounds;
         const left   = bounds.x      * scale;
@@ -147,7 +151,17 @@ export const LayoutBlockLayer: React.FC<LayoutBlockLayerProps> = ({
         const width  = bounds.width  * scale;
         const height = bounds.height * scale;
 
-        const orig = originalBounds[block.id] || block.bounds;
+        // Use parent-persisted original bounds (survives page navigation)
+        const orig = originalBoundsMap[block.id] || block.bounds;
+        // Block has moved if we have recorded original bounds that differ from current
+        const hasMoved = !!tempBounds[block.id] || (
+          !!originalBoundsMap[block.id] && (
+            Math.abs(bounds.x - orig.x) > 0.5 ||
+            Math.abs(bounds.y - orig.y) > 0.5 ||
+            Math.abs(bounds.width - orig.width) > 0.5 ||
+            Math.abs(bounds.height - orig.height) > 0.5
+          )
+        );
 
         const imageUrl = block.imageUrl
           ? block.imageUrl.startsWith('http')

frontend/src/viewer/PDFViewer.tsx

@@ -206,11 +206,18 @@ export const PDFViewer = React.forwardRef<PDFViewerRef, PDFViewerProps>(
     const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
     const [layoutDataByPage, setLayoutDataByPage] = useState<Record<number, PageLayoutResponse>>({});
     const inFlightLayoutRef = useRef<Set<number>>(new Set());
+    /** Original PDF-baked bounds per block, keyed by page then block-id.
+     *  Persists across page navigation so LayoutBlockLayer can show
+     *  the white eraser + image tile even after remount. */
+    const [originalBlockBounds, setOriginalBlockBounds] = useState<
+      Record<number, Record<string, { x: number; y: number; width: number; height: number }>>
+    >({});
 
     // Clear cache whenever the document itself changes
     useEffect(() => {
       setLayoutDataByPage({});
       setSelectedBlockId(null);
+      setOriginalBlockBounds({});
     }, [documentId]);
 
 
@@ -767,6 +774,16 @@ export const PDFViewer = React.forwardRef<PDFViewerRef, PDFViewerProps>(
                           scale={zoom}
                           selectedBlockId={selectedBlockId}
                           onSelectBlock={(bId) => setSelectedBlockId(bId)}
+                          originalBoundsMap={originalBlockBounds[page.index] || {}}
+                          onRecordOriginalBounds={(blockId, bounds) => {
+                            setOriginalBlockBounds((prev) => ({
+                              ...prev,
+                              [page.index]: {
+                                ...(prev[page.index] || {}),
+                                [blockId]: bounds,
+                              },
+                            }));
+                          }}
                           onUpdateBlockBounds={(blockId, newBounds) => {
                             setLayoutDataByPage((prev) => {
                               const curLayout = prev[page.index];