diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx index 82d0d413..ac806c59 100644 --- a/examples/react/src/examples/Subflow/index.tsx +++ b/examples/react/src/examples/Subflow/index.tsx @@ -27,15 +27,15 @@ 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], - zIndex: -1, - }, + // { + // id: 'extent', + // position: { x: 0, y: 0 }, + // width: 1000, + // height: 1000, + // data: { label: 'Extent' }, + // origin: [0, 0], + // zIndex: -1, + // }, { id: '1', type: 'input', @@ -96,12 +96,12 @@ const initialNodes: Node[] = [ }, { id: '5', - type: 'group', + // type: 'group', data: { label: 'Node 5' }, position: { x: 650, y: 250 }, className: 'light', style: { width: 100, height: 100 }, - zIndex: 1000, + // zIndex: 1000, }, { id: '5a', diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index 37293e61..24400db1 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -95,6 +95,7 @@ export type InternalNodeBase = Omit( ): boolean { const _options = mergeObjects(adoptUserNodesDefaultOptions, options); + let rootParentIndex = { i: -1 }; let nodesInitialized = nodes.length > 0; const tmpLookup = new Map(nodeLookup); const selectedNodeZ: number = _options?.elevateNodesOnSelect ? 1000 : 0; @@ -166,7 +167,7 @@ export function adoptUserNodes( } if (userNode.parentId) { - updateChildNode(internalNode, nodeLookup, parentLookup, options); + updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex); } } @@ -197,7 +198,8 @@ function updateChildNode( node: InternalNodeBase, nodeLookup: NodeLookup>, parentLookup: ParentLookup>, - options?: UpdateNodesOptions + options?: UpdateNodesOptions, + rootParentIndex?: { i: number } ) { const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options); const parentId = node.parentId!; @@ -212,6 +214,17 @@ function updateChildNode( updateParentLookup(node, parentLookup); + // We just want to set the rootParentIndex for the first child + if (rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === undefined) { + parentNode.internals.rootParentIndex = ++rootParentIndex.i; + parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * 10; + } + + // But we need to update rootParentIndex.i also when parent has not been updated + if (rootParentIndex && parentNode.internals.rootParentIndex !== undefined) { + rootParentIndex.i = parentNode.internals.rootParentIndex; + } + const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0; const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ); const { positionAbsolute } = node.internals; @@ -261,6 +274,8 @@ function calculateChildXYZ( const childZ = calculateZ(childNode, selectedNodeZ); const parentZ = parentNode.internals.z ?? 0; + console.log(parentNode.id, parentZ, childZ); + return { x: absolutePosition.x, y: absolutePosition.y,