feat(svelte): add minimap component

packages/svelte/src/lib/components/nodes/BaseNode.svelte

@@ -8,10 +8,13 @@
 
   export let id: string;
   export let positionAbsolute: XYPosition = { x: 0, y: 0 };
+  export let position: XYPosition = { x: 0, y: 0 };
   export let dragging: boolean = false;
   export let data: any = {};
   export let resizeObserver: ResizeObserver | null = null;
   export let style: any = {};
+  export let width: number = 0;
+  export let height: number = 0;
 
   let nodeRef: HTMLDivElement;
 
@@ -32,6 +35,7 @@
 <div
   use:drag={{ nodeId: id, nodesStore, transformStore, updateNodePositions }}
   class="react-flow__node"
+  class:initializing={!width && !height}
   class:dragging={dragging}
   bind:this={nodeRef}
   style="transform: translate({positionAbsolute.x}px, {positionAbsolute.y}px);"
@@ -59,4 +63,8 @@
   .dragging {
     cursor: grabbing;
   }
+
+  .initializing {
+    visibility: hidden;
+  }
 </style>

packages/svelte/src/lib/container/NodeRenderer.svelte

@@ -18,6 +18,7 @@
   onDestroy(() => {
     resizeObserver?.disconnect();
   });
+
 </script>
 
 <div class="react-flow__nodes">

packages/svelte/src/lib/index.ts

@@ -1,5 +1,6 @@
 import SvelteFlow from '$lib/container/SvelteFlow.svelte';
 export { Controls, ControlButton } from '$lib/plugins/Controls';
 export { Background, BackgroundVariant } from '$lib/plugins/Background';
+export { Minimap } from '$lib/plugins/Minimap';
 
 export default SvelteFlow;

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import cc from 'classcat';
+	import type { PanelPosition, Rect, Node } from '@reactflow/system';
+	import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@reactflow/utils';
+
+  import { useStore } from '$lib/store';
+	import Panel from '$lib/container/Panel.svelte';
+  import MinimapNode from './MinimapNode.svelte';
+
+  let position: PanelPosition = 'bottom-right';
+  let ariaLabel: string = 'Mini map';
+  let className: string = '';
+  let style: Record<string, unknown> = {};
+  let nodeStrokeColor: string = 'transparent';
+  let nodeColor: string = '#e2e2e2';
+  let nodeClassName: string = '';
+  let nodeBorderRadius: number = 5;
+  let nodeStrokeWidth: number = 2;
+  let maskColor: string = 'rgb(240, 240, 240, 0.6)';
+  let maskStrokeColor: string = 'none';
+  let maskStrokeWidth: number = 1;
+  export { className as class };
+
+  const defaultWidth = 200;
+  const defaultHeight = 150;
+  const { nodesStore, transformStore, widthStore, heightStore, nodeOriginStore, idStore } = useStore();
+
+  type GetMiniMapNodeAttribute = (node: Node) => string;
+  const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func);
+  const nodeColorFunc = getAttrFunction(nodeColor);
+  const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
+  const nodeClassNameFunc = getAttrFunction(nodeClassName);
+  const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+  const labelledBy = `react-flow__minimap-desc-${$idStore}`;
+  
+  $: viewBB = {
+    x: -$transformStore[0] / $transformStore[2],
+    y: -$transformStore[1] / $transformStore[2],
+    width: $widthStore / $transformStore[2],
+    height: $heightStore / $transformStore[2],
+  } as Rect;
+  $: boundingRect = $nodesStore.length > 0 ? getBoundsOfRects(getRectOfNodes($nodesStore, $nodeOriginStore), viewBB) : viewBB
+  $: elementWidth = (style?.width as number) ?? defaultWidth;
+  $: elementHeight = (style?.height as number) ?? defaultHeight;  
+  $: scaledWidth = boundingRect.width / elementWidth;
+  $: scaledHeight = boundingRect.height / elementHeight;
+  $: viewScale = Math.max(scaledWidth, scaledHeight);
+  $: 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;
+  $: width = viewWidth + offset * 2;
+  $: height = viewHeight + offset * 2;
+</script>
+
+<Panel position={position} class={cc(['react-flow__minimap', className])}>
+  <svg
+    width={elementWidth}
+    height={elementHeight}
+    viewBox={`${x} ${y} ${width} ${height}`}
+    role="img"
+    aria-labelledby={labelledBy}
+  >
+    {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
+
+    {#each $nodesStore as node}
+      {#if node.width && node.height}
+        {@const pos = getNodePositionWithOrigin(node, $nodeOriginStore).positionAbsolute}
+        <MinimapNode
+          x={pos.x}
+          y={pos.y}
+          width={node.width}
+          height={node.height}
+          color={nodeColorFunc(node)}
+          borderRadius={nodeBorderRadius}
+          strokeColor={nodeStrokeColorFunc(node)}
+          strokeWidth={nodeStrokeWidth}
+          shapeRendering={shapeRendering}
+          class={nodeClassNameFunc(node)}
+          style={{}}
+        />
+      {/if}
+    {/each}
+    <path
+      class="react-flow__minimap-mask"
+      d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+    M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
+      fill={maskColor}
+      fill-rule="evenodd"
+      stroke={maskStrokeColor}
+      stroke-width={maskStrokeWidth}
+      pointer-events="none"
+    />
+  </svg>
+</Panel>
+
+<style>
+  .react-flow__minimap {
+    background-color: #fff;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import cc from 'classcat';
+
+  export let x: number;
+  export let y: number;
+  export let width: number = 0;
+  export let height: number = 0;
+  export let borderRadius: number;
+  export let color: string;
+  export let shapeRendering: string;
+  export let strokeColor: string;
+  export let strokeWidth: number;
+  export let className: string = '';
+  export let style: Record<string, string>;
+
+  export { className as class };
+
+  const { background, backgroundColor } = style || {};
+  const fill = (color || background || backgroundColor) as string;
+</script>
+
+<rect
+  class={cc(['react-flow__minimap-node', className])}
+  x={x}
+  y={y}
+  rx={borderRadius}
+  ry={borderRadius}
+  width={width}
+  height={height}
+  fill={fill}
+  stroke={strokeColor}
+  stroke-width={strokeWidth}
+  shape-rendering={shapeRendering}
+/>

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

@@ -0,0 +1 @@
+export { default as Minimap } from './Minimap.svelte';

packages/svelte/src/lib/store/index.ts

@@ -13,9 +13,9 @@ import {
 	type D3SelectionInstance,
 	type ViewportHelperFunctionOptions
 } from '@reactflow/system';
-import { fitView, getD3Transition } from '@reactflow/utils';
+import { fitView, getD3Transition, getDimensions } from '@reactflow/utils';
 
-import { getDimensions, getHandleBounds } from '../../utils';
+import { getHandleBounds } from '../../utils';
 import {
 	getEdgePositions,
 	getHandle,
@@ -51,6 +51,7 @@ type SvelteFlowStore = {
 	transformStore: Writable<Transform>;
 	edgesWithDataStore: Readable<EdgeWithData[]>;
 	idStore: Writable<string>;
+	nodeOriginStore: Writable<NodeOrigin>;
 	zoomIn: (options?: ViewportHelperFunctionOptions) => void;
 	zoomOut: (options?: ViewportHelperFunctionOptions) => void;
 	fitView: (options?: ViewportHelperFunctionOptions) => boolean;
@@ -243,6 +244,7 @@ export function createStore({
 		widthStore,
 		edgesWithDataStore,
 		idStore,
+		nodeOriginStore,
 		updateNodePositions,
 		updateNodeDimensions,
 		zoomIn,

packages/svelte/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Node, Edge } from '@reactflow/system';
   
-  import SvelteFlow, { Controls, Background, BackgroundVariant } from '../lib/index';
+  import SvelteFlow, { Controls, Background, BackgroundVariant, Minimap } from '../lib/index';
 
   const yNodes = 10;
   const xNodes = 10;
@@ -60,6 +60,7 @@
 <SvelteFlow {nodes} {edges} fitView >
   <Controls />
   <Background variant={BackgroundVariant.Dots} />
+  <Minimap />
 </SvelteFlow>
 
 <style>