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

* feat(react/svelte): add initialWidth/initialHeight closes #3793 * chore(packages): update changelogs
2024-02-27 15:21:35 +01:00
parent 14516ab061
commit e5c667d068
28 changed files with 362 additions and 60 deletions
@@ -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);
@@ -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;