Merge pull request #5698 from xyflow/fix/svelte-subflow-minimap

Fix/svelte subflow minimap

.changeset/wicked-sloths-greet.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Fix child nodes not updating on the Minimap when parent is dragged

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

@@ -6,12 +6,7 @@
 </script>
 
 <script lang="ts">
-  import {
+  import { getBoundsOfRects, getInternalNodesBounds, nodeHasDimensions } from '@xyflow/system';
-    getBoundsOfRects,
-    getInternalNodesBounds,
-    getNodeDimensions,
-    nodeHasDimensions
-  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Panel } from '$lib/container/Panel';
@@ -45,9 +40,6 @@
   let store = $derived(useStore());
   let ariaLabelConfig = $derived(store.ariaLabelConfig);
 
-  const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
-  const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
-  const nodeClassFunc = getAttrFunction(nodeClass);
   const shapeRendering =
     // @ts-expect-error - TS doesn't know about chrome
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
@@ -119,20 +111,16 @@
       {#each store.nodes as userNode (userNode.id)}
         {@const node = store.nodeLookup.get(userNode.id)}
         {#if node && nodeHasDimensions(node) && !node.hidden}
-          {@const nodeDimesions = getNodeDimensions(node)}
           <MinimapNode
             id={node.id}
-            x={node.internals.positionAbsolute.x}
-            y={node.internals.positionAbsolute.y}
-            {...nodeDimesions}
             selected={node.selected}
             {nodeComponent}
-            color={nodeColorFunc?.(node)}
+            color={nodeColor === undefined ? undefined : getAttrFunction(nodeColor)(userNode)}
             borderRadius={nodeBorderRadius}
-            strokeColor={nodeStrokeColorFunc(node)}
+            strokeColor={getAttrFunction(nodeStrokeColor)(userNode)}
             strokeWidth={nodeStrokeWidth}
             {shapeRendering}
-            class={nodeClassFunc(node)}
+            class={getAttrFunction(nodeClass)(userNode)}
           />
         {/if}
       {/each}

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

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import type { ClassValue } from 'svelte/elements';
   import type { Component } from 'svelte';
   import type { MiniMapNodeProps } from './types';
+  import { useInternalNode } from '$lib/hooks/useInternalNode.svelte';
+  import { getNodeDimensions } from '@xyflow/system';
 
   let {
     id,
-    x,
+    x: xProp,
-    y,
+    y: yProp,
-    width,
+    width: widthProp,
-    height,
+    height: heightProp,
     borderRadius = 5,
     color,
     shapeRendering,
@@ -17,21 +18,26 @@
     selected,
     class: className,
     nodeComponent
-  }: {
+  }: MiniMapNodeProps & {
-    id: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    borderRadius?: number;
-    color?: string;
-    shapeRendering: string;
-    strokeColor?: string;
-    strokeWidth?: number;
-    selected?: boolean;
-    class?: ClassValue;
     nodeComponent?: Component<MiniMapNodeProps>;
   } = $props();
+
+  let internalNode = $derived(useInternalNode(id));
+
+  let { width, height, x, y } = $derived.by(() => {
+    if (!internalNode.current) {
+      return { width: 0, height: 0, x: 0, y: 0 };
+    }
+
+    const { width, height } = getNodeDimensions(internalNode.current);
+
+    return {
+      width: widthProp ?? width,
+      height: heightProp ?? height,
+      x: xProp ?? internalNode.current.internals.positionAbsolute.x,
+      y: yProp ?? internalNode.current.internals.positionAbsolute.y
+    };
+  });
 </script>
 
 {#if nodeComponent}

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

@@ -12,10 +12,10 @@ export type GetMiniMapNodeAttribute = (node: Node) => string;
  */
 export type MiniMapNodeProps = {
   id: string;
-  x: number;
+  x?: number;
-  y: number;
+  y?: number;
-  width: number;
+  width?: number;
-  height: number;
+  height?: number;
   borderRadius?: number;
   class?: ClassValue;
   color?: string;