feat: MiniMap preview use viewport ratio (#482)

BetterTyped · Jun 27, 2024 · 2b436bd · 2b436bd
1 parent 16e1466
commit 2b436bd
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/components/mini-map/mini-map.tsx b/src/components/mini-map/mini-map.tsx
@@ -51,6 +51,21 @@ export const MiniMap: React.FC<MiniMapProps> = ({
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const previewRef = useRef<HTMLDivElement | null>(null);
 
+  const getViewportSize = useCallback(() => {
+    if (instance.wrapperComponent) {
+      const rect = instance.wrapperComponent.getBoundingClientRect();
+
+      return {
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    return {
+      width: 0,
+      height: 0
+    };
+  }, [instance.wrapperComponent]);
+
   const getContentSize = useCallback(() => {
     if (instance.contentComponent) {
       const rect = instance.contentComponent.getBoundingClientRect();
@@ -116,7 +131,7 @@ export const MiniMap: React.FC<MiniMapProps> = ({
       mainRef.current.style.height = `${miniSize.height}px`;
     }
     if (previewRef.current) {
-      const size = getContentSize();
+      const size = getViewportSize();
       const scale = computeMiniMapScale();
       const previewScale = scale * (1 / instance.transformState.scale);
       const transform = instance.handleTransformStyles(