diff --git a/examples/react/src/examples/Subflow/DebugNode.tsx b/examples/react/src/examples/Subflow/DebugNode.tsx index 6a8a2d26..547da524 100644 --- a/examples/react/src/examples/Subflow/DebugNode.tsx +++ b/examples/react/src/examples/Subflow/DebugNode.tsx @@ -1,6 +1,6 @@ import React, { memo, FC, CSSProperties } from 'react'; -import { Handle, NodeProps, Position } from '@xyflow/react'; +import { Handle, NodeProps, Position, useInternalNode } from '@xyflow/react'; const infoStyle: CSSProperties = { fontSize: 11 }; const idStyle: CSSProperties = { @@ -12,6 +12,8 @@ const idStyle: CSSProperties = { }; const DebugNode: FC = ({ zIndex, positionAbsoluteX, positionAbsoluteY, id }) => { + const node = useInternalNode(id)!; + return ( <> @@ -19,6 +21,9 @@ const DebugNode: FC = ({ zIndex, positionAbsoluteX, positionAbsoluteY
x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
+
+ x:{Math.round(node.position.x)} y:{Math.round(node.position.y)} +
); diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx index 53008fb3..74654870 100644 --- a/examples/react/src/examples/Subflow/index.tsx +++ b/examples/react/src/examples/Subflow/index.tsx @@ -29,7 +29,7 @@ const defaultViewport = { x: 0, y: 0, zoom: 1.5 }; const initialNodes: Node[] = [ { id: '1', - // type: 'input', + type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light', @@ -90,11 +90,10 @@ const initialNodes: Node[] = [ id: '5', type: 'group', data: { label: 'Node 5' }, - position: { x: 900, y: 250 }, + position: { x: 650, y: 250 }, className: 'light', style: { width: 100, height: 100 }, zIndex: 1000, - origin: [1, 0], }, { id: '5a', @@ -107,7 +106,7 @@ const initialNodes: Node[] = [ { id: '5b', data: { label: 'Node 5b' }, - position: { x: 225, y: 50 }, + position: { x: 200, y: 200 }, className: 'light', parentId: '5', expandParent: true, @@ -121,9 +120,9 @@ const initialNodes: Node[] = [ { id: '3', data: { label: 'Node 3' }, - position: { x: 250, y: 100 }, + position: { x: 400, y: 100 }, className: 'light', - // extent: 'parent', + extent: 'parent', }, ]; @@ -220,6 +219,7 @@ const Subflow = () => { onlyRenderVisibleElements={false} nodeTypes={nodeTypes} fitView + nodeOrigin={[0, 0]} >