refactor(nodes): add computed attr for width/height and absolute position

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -34,6 +34,8 @@
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
+  export let width: NodeWrapperProps['width'] = undefined;
+  export let height: NodeWrapperProps['height'] = undefined;
   export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
   export let initialized: NodeWrapperProps['initialized'] = false;
   let className: string = '';
@@ -168,9 +170,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style} {node.size?.width ? `;width=${node.size?.width}px` : ''} {node.size?.height
-      ? `;height=${node.size?.height}px;`
-      : ''}"
+    style="{style} {width ? `;width=${width}px` : ''} {height ? `;height=${height}px;` : ''}"
     on:click={onSelectNodeHandler}
     on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
     on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -11,14 +11,15 @@ export type NodeWrapperProps = Pick<
   | 'selected'
   | 'selectable'
   | 'style'
-  | 'type'
   | 'width'
   | 'height'
+  | 'type'
   | 'sourcePosition'
   | 'targetPosition'
   | 'dragHandle'
   | 'hidden'
 > & {
+  type: string;
   positionX: number;
   positionY: number;
   positionOriginX: number;

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

@@ -40,10 +40,10 @@
 <div class="svelte-flow__nodes">
   {#each $visibleNodes as node (node.id)}
     {@const posOrigin = getPositionWithOrigin({
-      x: node.positionAbsolute?.x ?? 0,
-      y: node.positionAbsolute?.y ?? 0,
-      width: (node.size?.width || node.width) ?? 0,
-      height: (node.size?.height || node.height) ?? 0,
+      x: node.computed?.positionAbsolute?.x ?? 0,
+      y: node.computed?.positionAbsolute?.y ?? 0,
+      width: node.computed?.width ?? node.width ?? 0,
+      height: node.computed?.height ?? node.height ?? 0,
       origin: node.origin
     })}
     <NodeWrapper
@@ -61,20 +61,23 @@
         node.connectable ||
         ($nodesConnectable && typeof node.connectable === 'undefined')
       )}
-      positionX={node.positionAbsolute?.x ?? 0}
-      positionY={node.positionAbsolute?.y ?? 0}
+      positionX={node.computed?.positionAbsolute?.x ?? 0}
+      positionY={node.computed?.positionAbsolute?.y ?? 0}
       positionOriginX={posOrigin.x ?? 0}
       positionOriginY={posOrigin.y ?? 0}
       isParent={!!node[internalsSymbol]?.isParent}
       style={node.style}
       class={node.class}
-      type={node.type}
+      type={node.type || 'default'}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}
       dragging={node.dragging}
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
-      initialized={(!!node.width && !!node.height) || (!!node.size?.width && !!node.size?.height)}
+      width={node.width}
+      height={node.height}
+      initialized={(!!node.computed?.width && !!node.computed?.height) ||
+        (!!node.width && !!node.height)}
       {resizeObserver}
       on:nodeclick
       on:nodemouseenter

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -141,7 +141,7 @@ export function useSvelteFlow(): {
       }
 
       return (nodesToIntersect || get(nodes)).filter((n) => {
-        if (!isRect && (n.id === node.id || !n.positionAbsolute)) {
+        if (!isRect && (n.id === node.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 

packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts

@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import type { UpdateNodeInternals, NodeDimensionUpdate } from '@xyflow/system';
+import type { UpdateNodeInternals } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
 

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

@@ -114,13 +114,13 @@
       {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
 
       {#each $nodes as node (node.id)}
-        {#if node.width && node.height}
+        {#if (node.computed?.width || node?.width) && (node.computed?.height || node.height)}
           {@const pos = getNodePositionWithOrigin(node).positionAbsolute}
           <MinimapNode
             x={pos.x}
             y={pos.y}
-            width={node.width}
-            height={node.height}
+            width={node.computed?.width ?? node.width ?? 0}
+            height={node.computed?.height ?? node.height ?? 0}
             selected={node.selected}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}

packages/svelte/src/lib/store/derived-connection-props.ts

@@ -80,10 +80,12 @@ export function getDerivedConnectionProps(
         : handleBounds[0];
       const fromHandleX = fromHandle
         ? fromHandle.x + fromHandle.width / 2
-        : (fromNode?.width ?? 0) / 2;
-      const fromHandleY = fromHandle ? fromHandle.y + fromHandle.height / 2 : fromNode?.height ?? 0;
-      const fromX = (fromNode?.positionAbsolute?.x ?? 0) + fromHandleX;
-      const fromY = (fromNode?.positionAbsolute?.y ?? 0) + fromHandleY;
+        : (fromNode?.computed?.width ?? 0) / 2;
+      const fromHandleY = fromHandle
+        ? fromHandle.y + fromHandle.height / 2
+        : fromNode?.computed?.height ?? 0;
+      const fromX = (fromNode?.computed?.positionAbsolute?.x ?? 0) + fromHandleX;
+      const fromY = (fromNode?.computed?.positionAbsolute?.y ?? 0) + fromHandleY;
       const fromPosition = fromHandle?.position;
       const toPosition = fromPosition ? oppositePosition[fromPosition] : undefined;
 

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

@@ -66,22 +66,25 @@ export function createStore({
 
   const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => {
     store.nodes.update((nds) => {
-      return nds.map((n) => {
+      return nds.map((node) => {
         const nodeDragItem = (nodeDragItems as Array<NodeBase | NodeDragItem>).find(
-          (ndi) => ndi.id === n.id
+          (ndi) => ndi.id === node.id
         );
 
         if (nodeDragItem) {
           return {
-            ...n,
-            [internalsSymbol]: n[internalsSymbol],
+            ...node,
             dragging,
-            positionAbsolute: nodeDragItem.positionAbsolute,
-            position: nodeDragItem.position
+            position: nodeDragItem.position,
+            computed: {
+              ...node.computed,
+              positionAbsolute: nodeDragItem.computed?.positionAbsolute
+            },
+            [internalsSymbol]: node[internalsSymbol]
           };
         }
 
-        return n;
+        return node;
       });
     });
   };