Feat(nodes): add initialWidth and initialHeight (#3953)

* feat(react/svelte): add initialWidth/initialHeight closes #3793

* chore(packages): update changelogs

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

@@ -11,6 +11,7 @@
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
   import type { Node } from '$lib/types';
+  import { getNodeInlineStyleDimensions } from './utils';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -34,6 +35,10 @@
   export let sourcePosition: NodeWrapperProps['sourcePosition'] = undefined;
   export let targetPosition: NodeWrapperProps['targetPosition'] = undefined;
   export let zIndex: NodeWrapperProps['zIndex'];
+  export let computedWidth: NodeWrapperProps['computedWidth'] = undefined;
+  export let computedHeight: NodeWrapperProps['computedHeight'] = undefined;
+  export let initialWidth: NodeWrapperProps['initialWidth'] = undefined;
+  export let initialHeight: NodeWrapperProps['initialHeight'] = undefined;
   export let width: NodeWrapperProps['width'] = undefined;
   export let height: NodeWrapperProps['height'] = undefined;
   export let dragHandle: NodeWrapperProps['dragHandle'] = undefined;
@@ -77,6 +82,15 @@
   let prevSourcePosition: Position | undefined = undefined;
   let prevTargetPosition: Position | undefined = undefined;
 
+  $: inlineStyleDimensions = getNodeInlineStyleDimensions({
+    width,
+    height,
+    initialWidth,
+    initialHeight,
+    computedWidth,
+    computedHeight
+  });
+
   $: {
     connectableStore.set(!!connectable);
   }
@@ -170,9 +184,7 @@
     style:z-index={zIndex}
     style:transform="translate({positionOriginX}px, {positionOriginY}px)"
     style:visibility={initialized ? 'visible' : 'hidden'}
-    style="{style ?? ''}; {!width ? '' : `width:${width}px;`} {!height
-      ? ''
-      : `height:${height}px;`}"
+    style="{inlineStyleDimensions.width} {inlineStyleDimensions.height} {style ?? ''};"
     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

@@ -16,9 +16,13 @@ export type NodeWrapperProps = Pick<
   | 'targetPosition'
   | 'dragHandle'
   | 'hidden'
+  | 'width'
+  | 'height'
+  | 'initialWidth'
+  | 'initialHeight'
 > & {
-  width?: number;
-  height?: number;
+  computedWidth?: number;
+  computedHeight?: number;
   type: string;
   positionX: number;
   positionY: number;

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

@@ -0,0 +1,33 @@
+export function getNodeInlineStyleDimensions({
+  width,
+  height,
+  initialWidth,
+  initialHeight,
+  computedWidth,
+  computedHeight
+}: {
+  width?: number;
+  height?: number;
+  initialWidth?: number;
+  initialHeight?: number;
+  computedWidth?: number;
+  computedHeight?: number;
+}): {
+  width: string | undefined;
+  height: string | undefined;
+} {
+  if (computedWidth === undefined && computedHeight === undefined) {
+    const styleWidth = width ?? initialWidth;
+    const styleHeight = height ?? initialHeight;
+
+    return {
+      width: styleWidth ? `width:${styleWidth}px;` : '',
+      height: styleHeight ? `height:${styleHeight}px;` : ''
+    };
+  }
+
+  return {
+    width: width ? `width:${width}px;` : '',
+    height: height ? `height:${height}px;` : ''
+  };
+}

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

@@ -1,6 +1,11 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
-  import { internalsSymbol, getPositionWithOrigin } from '@xyflow/system';
+  import {
+    internalsSymbol,
+    getPositionWithOrigin,
+    getNodeDimensions,
+    nodeHasDimensions
+  } from '@xyflow/system';
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
   import { useStore } from '$lib/store';
@@ -39,11 +44,11 @@
 
 <div class="svelte-flow__nodes">
   {#each $visibleNodes as node (node.id)}
+    {@const nodeDimesions = getNodeDimensions(node)}
     {@const posOrigin = getPositionWithOrigin({
       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,
+      ...nodeDimesions,
       origin: node.origin
     })}
     <NodeWrapper
@@ -74,10 +79,13 @@
       dragging={node.dragging}
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
-      width={node.width ?? undefined}
-      height={node.height ?? undefined}
-      initialized={(!!node.computed?.width && !!node.computed?.height) ||
-        (!!node.width && !!node.height)}
+      initialized={nodeHasDimensions(node)}
+      width={node.width}
+      height={node.height}
+      initialWidth={node.initialWidth}
+      initialHeight={node.initialHeight}
+      computedWidth={node.computed?.width}
+      computedHeight={node.computed?.height}
       {resizeObserver}
       on:nodeclick
       on:nodemouseenter

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

@@ -7,7 +7,13 @@
 
 <script lang="ts">
   import cc from 'classcat';
-  import { getBoundsOfRects, getNodePositionWithOrigin, getNodesBounds } from '@xyflow/system';
+  import {
+    getBoundsOfRects,
+    getNodeDimensions,
+    getNodePositionWithOrigin,
+    getNodesBounds,
+    nodeHasDimensions
+  } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Panel } from '$lib/container/Panel';
@@ -116,13 +122,13 @@
       {#if ariaLabel}<title id={labelledBy}>{ariaLabel}</title>{/if}
 
       {#each $nodes as node (node.id)}
-        {#if (node.computed?.width || node?.width) && (node.computed?.height || node.height)}
+        {#if nodeHasDimensions(node)}
           {@const pos = getNodePositionWithOrigin(node).positionAbsolute}
+          {@const nodeDimesions = getNodeDimensions(node)}
           <MinimapNode
             x={pos.x}
             y={pos.y}
-            width={node.computed?.width ?? node.width ?? 0}
-            height={node.computed?.height ?? node.height ?? 0}
+            {...nodeDimesions}
             selected={node.selected}
             color={nodeColorFunc?.(node)}
             borderRadius={nodeBorderRadius}

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

@@ -1,7 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
 import {
-  internalsSymbol,
   createMarkerIds,
   fitView as fitViewUtil,
   getElementsToRemove,
@@ -15,7 +14,6 @@ import {
   type XYPosition,
   type CoordinateExtent,
   type UpdateConnection,
-  type NodeDragItem,
   errorMessages
 } from '@xyflow/system';
 

packages/svelte/src/lib/store/initial-store.ts

@@ -91,7 +91,9 @@ export const getInitialStore = ({
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
   if (fitView && width && height) {
-    const nodesWithDimensions = nextNodes.filter((node) => node.width && node.height);
+    const nodesWithDimensions = nextNodes.filter(
+      (node) => (node.width && node.height) || (node.initialWidth && node.initialHeight)
+    );
     // @todo users nodeOrigin should be used here
     const bounds = getNodesBounds(nodesWithDimensions, { nodeOrigin: [0, 0] });
     viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
@@ -101,7 +103,7 @@ export const getInitialStore = ({
     flowId: writable<string | null>(null),
     nodes: createNodesStore(nextNodes, nodeLookup),
     nodeLookup: readable<NodeLookup<Node>>(nodeLookup),
-    edgeLookup: readable<EdgeLookup>(edgeLookup),
+    edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
     visibleNodes: readable<Node[]>([]),
     edges: createEdgesStore(edges, connectionLookup, edgeLookup),
     visibleEdges: readable<EdgeLayouted[]>([]),