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

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

* chore(packages): update changelogs

examples/astro-xyflow/src/components/ReactFlowExample/index.tsx

@@ -81,6 +81,8 @@ const initialNodes: Node[] = [
     id: '4',
     data: { label: 'Node 4' },
     position: { x: 400, y: 200 },
+    width: 200,
+    height: 50,
     type: 'custom',
   },
 ];

examples/astro-xyflow/src/components/ReactFlowInitialExample/CustomNode.tsx

@@ -0,0 +1,21 @@
+import { memo, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+function CustomNode() {
+  const [text, setText] = useState('this is a pretty long text');
+
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div style={{ background: '#eee', padding: 10 }}>
+        <div>
+          <input value={text} onChange={(e) => setText(e.target.value)} />
+          <div>text: {text}</div>
+        </div>
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+    </>
+  );
+}
+
+export default memo(CustomNode);

examples/astro-xyflow/src/components/ReactFlowInitialExample/index.tsx

@@ -0,0 +1,69 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  useEdgesState,
+  useNodesState,
+  Background,
+  Controls,
+  type Connection,
+  type Edge,
+  type Node,
+} from '@xyflow/react';
+
+import CustomNode from './CustomNode';
+
+import '@xyflow/react/dist/style.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: {},
+    position: { x: 0, y: 0 },
+    initialWidth: 200,
+    initialHeight: 50,
+    type: 'custom',
+  },
+  {
+    id: '2',
+    data: {},
+    position: { x: 0, y: 200 },
+    width: 200,
+    initialHeight: 50,
+    type: 'custom',
+  },
+];
+
+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+function Flow() {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <div style={{ width: 700, height: 400 }}>
+      <ReactFlow
+        nodes={nodes}
+        onNodesChange={onNodesChange}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        width={700}
+        height={400}
+        debug
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export default Flow;

examples/astro-xyflow/src/components/SvelteFlowInitialExample/CustomNode.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+
+  type $$Props = NodeProps;
+
+  let text = 'some default text';
+</script>
+
+<Handle type="target" position={Position.Left} />
+<div class="custom">
+  <div>
+    text: {text}
+  </div>
+  <input type="text" bind:value={text} />
+</div>
+<Handle type="source" position={Position.Right} />
+
+<style>
+  .custom {
+    background-color: white;
+    padding: 10px;
+    border: 1px solid #777;
+    border-radius: 20px;
+  }
+</style>

examples/astro-xyflow/src/components/SvelteFlowInitialExample/index.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { SvelteFlow, Controls, Background, BackgroundVariant, type Node, type Edge } from '@xyflow/svelte';
+
+  import '@xyflow/svelte/dist/style.css';
+  import CustomNode from './CustomNode.svelte';
+
+  const nodes = writable<Node[]>([
+    {
+      id: '1',
+      position: { x: 0, y: 0 },
+      data: {},
+      initialWidth: 100,
+      initialHeight: 40,
+      type: 'input-node',
+    },
+    {
+      id: '2',
+      position: { x: 0, y: 150 },
+      data: {},
+      initialWidth: 100,
+      initialHeight: 40,
+      type: 'input-node',
+    },
+  ]);
+
+  const edges = writable<Edge[]>([{ id: '1-2', source: '1', target: '2' }]);
+
+  const nodeTypes = {
+    'input-node': CustomNode,
+  };
+</script>
+
+<div style="height: 400px; width: 700px;">
+  <SvelteFlow {nodes} {edges} {nodeTypes} fitView width={700} height={400}>
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+  </SvelteFlow>
+</div>