add rootNodeIndex to internals & implement sorting of group nodes

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',

packages/system/src/types/nodes.ts

@@ -95,6 +95,7 @@ export type InternalNodeBase<NodeType extends NodeBase = NodeBase> = Omit<NodeTy
   internals: {
     positionAbsolute: XYPosition;
     z: number;
+    rootParentIndex?: number;
     /**
      * Holds a reference to the original node object provided by the user.
      * Used as an optimization to avoid certain operations.

packages/system/src/utils/store.ts

@@ -120,6 +120,7 @@ export function adoptUserNodes<NodeType extends NodeBase>(
 ): 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<NodeType extends NodeBase>(
     }
 
     if (userNode.parentId) {
-      updateChildNode(internalNode, nodeLookup, parentLookup, options);
+      updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
     }
   }
 
@@ -197,7 +198,8 @@ function updateChildNode<NodeType extends NodeBase>(
   node: InternalNodeBase<NodeType>,
   nodeLookup: NodeLookup<InternalNodeBase<NodeType>>,
   parentLookup: ParentLookup<InternalNodeBase<NodeType>>,
-  options?: UpdateNodesOptions<NodeType>
+  options?: UpdateNodesOptions<NodeType>,
+  rootParentIndex?: { i: number }
 ) {
   const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
   const parentId = node.parentId!;
@@ -212,6 +214,17 @@ function updateChildNode<NodeType extends NodeBase>(
 
   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<NodeType extends NodeBase>(
   const childZ = calculateZ(childNode, selectedNodeZ);
   const parentZ = parentNode.internals.z ?? 0;
 
+  console.log(parentNode.id, parentZ, childZ);
+
   return {
     x: absolutePosition.x,
     y: absolutePosition.y,