diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx index 74654870..7b429d39 100644 --- a/examples/react/src/examples/Subflow/index.tsx +++ b/examples/react/src/examples/Subflow/index.tsx @@ -27,11 +27,19 @@ const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge); const defaultViewport = { x: 0, y: 0, zoom: 1.5 }; const initialNodes: Node[] = [ + { + id: 'extent', + position: { x: 0, y: 0 }, + width: 1000, + height: 1000, + data: { label: 'Extent' }, + origin: [0, 0], + }, { id: '1', type: 'input', data: { label: 'Node 1' }, - position: { x: 250, y: 5 }, + position: { x: -200, y: -500 }, className: 'light', origin: [0.5, 0.5], }, @@ -40,7 +48,7 @@ const initialNodes: Node[] = [ data: { label: 'Node 4' }, position: { x: 100, y: 200 }, className: 'light', - origin: [0.5, 0.5], + origin: [0, 0], style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, @@ -53,11 +61,11 @@ const initialNodes: Node[] = [ position: { x: 15, y: 15 }, className: 'light', parentId: '4', - origin: [0.5, 0.5], + origin: [0, 0], extent: [ [0, 0], - [100, 100], + [300, 100], ], }, { @@ -98,9 +106,13 @@ const initialNodes: Node[] = [ { id: '5a', data: { label: 'Node 5a' }, - position: { x: 0, y: 0 }, + position: { x: -100, y: -100 }, className: 'light', parentId: '5', + // extent: [ + // [0, 0], + // [300, 300], + // ], extent: 'parent', }, { @@ -220,6 +232,10 @@ const Subflow = () => { nodeTypes={nodeTypes} fitView nodeOrigin={[0, 0]} + nodeExtent={[ + [0, 0], + [1000, 1000], + ]} > @@ -239,7 +255,12 @@ const Subflow = () => { }; export default () => ( - + );