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;` : ''
+  };
+}