fix: calculate correct position and size of viewport in minimap (#121)

jmjuanes · Nov 29, 2024 · c91e87d · c91e87d
1 parent 741d5b6
commit c91e87d
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/app/components/panels/minimap.jsx b/app/components/panels/minimap.jsx
@@ -21,30 +21,29 @@ export const MinimapPanel = ({width = MINIMAP_WIDTH, height = MINIMAP_HEIGHT}) =
         }
         const bounds = scene.page.elements.length > 0 ? getRectangleBounds(scene.page.elements) : {};
         // calculate the start and end points for the minimap
-        const x1 = Math.min(bounds.x1 ?? Infinity, (-1) * scene.page.translateX);
-        const y1 = Math.min(bounds.y1 ?? Infinity, (-1) * scene.page.translateY);
-        const x2 = Math.max(bounds.x2 ?? 0, (-1) * scene.page.translateX + (scene.width / scene.page.zoom));
-        const y2 = Math.max(bounds.y2 ?? 0, (-1) * scene.page.translateY + (scene.height / scene.page.zoom));
-        // const width = x2 - x1, height = y2 - y1;
+        const x1 = Math.min(bounds.x1 ?? Infinity, (-1) * scene.page.translateX / scene.page.zoom);
+        const y1 = Math.min(bounds.y1 ?? Infinity, (-1) * scene.page.translateY / scene.page.zoom);
+        const x2 = Math.max(bounds.x2 ?? -Infinity, ((-1) * scene.page.translateX + scene.width) / scene.page.zoom);
+        const y2 = Math.max(bounds.y2 ?? -Infinity, ((-1) * scene.page.translateY + scene.height) / scene.page.zoom);
         // calculate the scale factor for the minimap
         const ratio = Math.min(width / Math.max(1, x2 - x1), height / Math.max(1, y2 - y1));
         return {
             width: Math.min(width, (x2 - x1) * ratio),
             height: Math.min(height, (y2 - y1) * ratio),
-            ratio: ratio,
+            // ratio: ratio,
             elements: scene.page.elements.map(element => ({
                 id: element.id,
                 x1: (Math.min(element.x1, element.x2) - x1) * ratio,
                 y1: (Math.min(element.y1, element.y2) - y1) * ratio,
                 x2: (Math.max(element.x1, element.x2) - x1) * ratio,
                 y2: (Math.max(element.y1, element.y2) - y1) * ratio,
             })),
-            visibleX: ((-1) * scene.page.translateX - x1) * ratio, // update the visible x position
-            visibleY: ((-1) * scene.page.translateY - y1) * ratio, // update the visible y position
+            visibleX: (((-1) * scene.page.translateX / scene.page.zoom) - x1) * ratio, // update the visible x position
+            visibleY: (((-1) * scene.page.translateY / scene.page.zoom) - y1) * ratio, // update the visible y position
             visibleWidth: scene.width * ratio / scene.page.zoom, // update the visible width
             visibleHeight: scene.height * ratio / scene.page.zoom, // update the visible height
         };
-    }, [scene.updatedAt, scene.page.id, scene.width, scene.height, scene.page.translateX, scene.page.translateY]);
+    }, [scene.updatedAt, scene.page.id, scene.width, scene.height, scene.page.zoom, scene.page.translateX, scene.page.translateY]);
     return (
         <Island className="items-center justify-center">
             {!!minimap && (