migrate Minimap

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   declare const window: Window | undefined;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
@@ -21,32 +21,28 @@
   import interactive from './interactive';
   import type { GetMiniMapNodeAttribute, MiniMapProps } from './types';
 
-  type $$Props = MiniMapProps;
+  let {
+    position = 'bottom-right',
+    ariaLabel = 'Mini map',
+    nodeStrokeColor = 'transparent',
+    nodeColor,
+    nodeClass = '',
+    nodeBorderRadius = 5,
+    nodeStrokeWidth = 2,
+    bgColor,
+    maskColor,
+    maskStrokeColor,
+    maskStrokeWidth,
+    width = 200,
+    height = 150,
+    pannable = true,
+    zoomable = true,
+    inversePan,
+    zoomStep,
+    style = '',
+    class: className
+  }: MiniMapProps = $props();
 
-  export let position: $$Props['position'] = 'bottom-right';
-  export let ariaLabel: $$Props['ariaLabel'] = 'Mini map';
-  export let nodeStrokeColor: $$Props['nodeStrokeColor'] = 'transparent';
-  export let nodeColor: $$Props['nodeColor'] = undefined;
-  export let nodeClass: $$Props['nodeClass'] = '';
-  export let nodeBorderRadius: $$Props['nodeBorderRadius'] = 5;
-  export let nodeStrokeWidth: $$Props['nodeStrokeWidth'] = 2;
-  export let bgColor: $$Props['bgColor'] = undefined;
-  export let maskColor: $$Props['maskColor'] = undefined;
-  export let maskStrokeColor: $$Props['maskStrokeColor'] = undefined;
-  export let maskStrokeWidth: $$Props['maskStrokeWidth'] = undefined;
-  export let width: $$Props['width'] = undefined;
-  export let height: $$Props['height'] = undefined;
-  export let pannable: $$Props['pannable'] = true;
-  export let zoomable: $$Props['zoomable'] = true;
-  export let inversePan: $$Props['inversePan'] = undefined;
-  export let zoomStep: $$Props['zoomStep'] = undefined;
-  export let style: $$Props['style'] = '';
-
-  let className: $$Props['class'] = '';
-  export { className as class };
-
-  const defaultWidth = 200;
-  const defaultHeight = 150;
   const {
     nodes,
     nodeLookup,
@@ -66,32 +62,26 @@
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
   const labelledBy = `svelte-flow__minimap-desc-${$flowId}`;
 
-  $: viewBB = {
+  // TODO: simplify this
+  let viewBB = $derived({
     x: -$viewport.x / $viewport.zoom,
     y: -$viewport.y / $viewport.zoom,
     width: $containerWidth / $viewport.zoom,
     height: $containerHeight / $viewport.zoom
-  };
+  });
-  let boundingRect: Rect = viewBB;
+  let boundingRect = $derived(
-
+    $nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds($nodeLookup), viewBB) : viewBB
-  $: {
+  );
-    boundingRect =
+  let scaledWidth = $derived(boundingRect.width / width);
-      $nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds($nodeLookup), viewBB) : viewBB;
+  let scaledHeight = $derived(boundingRect.height / height);
-    $nodes;
+  let viewScale = $derived(Math.max(scaledWidth, scaledHeight));
-  }
+  let viewWidth = $derived(viewScale * width);
-
+  let viewHeight = $derived(viewScale * height);
-  $: elementWidth = width ?? defaultWidth;
+  let offset = $derived(5 * viewScale);
-  $: elementHeight = height ?? defaultHeight;
+  let x = $derived(boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset);
-  $: scaledWidth = boundingRect.width / elementWidth;
+  let y = $derived(boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset);
-  $: scaledHeight = boundingRect.height / elementHeight;
+  let viewboxWidth = $derived(viewWidth + offset * 2);
-  $: viewScale = Math.max(scaledWidth, scaledHeight);
+  let viewboxHeight = $derived(viewHeight + offset * 2);
-  $: viewWidth = viewScale * elementWidth;
-  $: viewHeight = viewScale * elementHeight;
-  $: offset = 5 * viewScale;
-  $: x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
-  $: y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
-  $: viewboxWidth = viewWidth + offset * 2;
-  $: viewboxHeight = viewHeight + offset * 2;
 
   const getViewScale = () => viewScale;
 </script>
@@ -104,8 +94,8 @@
 >
   {#if $panZoom}
     <svg
-      width={elementWidth}
+      {width}
-      height={elementHeight}
+      {height}
       viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
       class="svelte-flow__minimap-svg"
       role="img"

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -1,18 +1,31 @@
 <script lang="ts">
   import cc from 'classcat';
 
-  export let x: number;
+  let {
-  export let y: number;
+    x,
-  export let width: number = 0;
+    y,
-  export let height: number = 0;
+    width,
-  export let borderRadius: number = 5;
+    height,
-  export let color: string | undefined = undefined;
+    borderRadius = 5,
-  export let shapeRendering: string;
+    color,
-  export let strokeColor: string | undefined = undefined;
+    shapeRendering,
-  export let strokeWidth: number = 2;
+    strokeColor,
-  export let selected: boolean = false;
+    strokeWidth = 2,
-  let className: string = '';
+    selected,
-  export { className as class };
+    class: className
+  }: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius?: number;
+    color?: string;
+    shapeRendering: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    selected?: boolean;
+    class?: string;
+  } = $props();
 </script>
 
 <rect