@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/hooks/useTreeChildNode.ts

@@ -1,536 +1,536 @@
-import { useCallback } from 'react';
-import { useReactFlow, Node } from '@xyflow/react';
-import { SystemFlowNodeData } from '../types/system-flow-types';
-
-interface UseTreeChildNodeProps {
-  id: string;
-  isTreeStructure: boolean;
-  nodeType: 'root' | 'child';
-  structureId?: string;
-}
-
-interface UseTreeChildNodeReturn {
-  generateChildId: () => string;
-  addChildNode: () => void;
-  adjustChildPositions: () => void;
-  forceLayoutRecalculation: () => void;
-}
-
-export const useTreeChildNode = ({
-  id,
-  isTreeStructure,
-  nodeType,
-  structureId,
-}: UseTreeChildNodeProps): UseTreeChildNodeReturn => {
-  const { getNode, setNodes, getNodes, addNodes } = useReactFlow();
-
-  // Generate unique ID for new child nodes
-  const generateChildId = useCallback(() => {
-    const timestamp = Date.now();
-    const random = Math.random().toString(36).substr(2, 9);
-    return `tree-child-${timestamp}-${random}`;
-  }, []);
-
-  // Dynamic layout system for tree structure nodes - similar to ELK layout
-  const calculateTreeLayout = useCallback(() => {
-    if (!isTreeStructure) return;
-
-    const startTime = performance.now();
-
-    // Always get fresh node data to ensure we have the latest dimensions
-    const allNodes = getNodes();
-    const allStructureNodes = allNodes.filter(
-      (n) => n.data.isTreeStructure && n.data.structureId === structureId,
-    );
-
-    // Early exit if no structure nodes found
-    if (allStructureNodes.length === 0) {
-      return;
-    }
-
-    // Performance optimization: Only check structure nodes and batch DOM queries
-    const structureNodes = allNodes.filter(
-      (node) =>
-        node.data.isTreeStructure && node.data.structureId === structureId,
-    );
-
-    // Batch DOM queries to avoid repeated querySelector calls
-    const domElements = new Map<string, DOMRect>();
-    structureNodes.forEach((node) => {
-      const domElement = document.querySelector(`[data-id="${node.id}"]`);
-      if (domElement) {
-        domElements.set(node.id, domElement.getBoundingClientRect());
-      }
-    });
-
-    // Only update nodes that actually need dimension updates
-    const updatedNodesWithDimensions = allNodes.map((node) => {
-      if (node.data.isTreeStructure && node.data.structureId === structureId) {
-        const rect = domElements.get(node.id);
-        if (rect) {
-          const actualWidth = rect.width;
-          const actualHeight = rect.height;
-
-          // Calculate expected width based on label length
-          let expectedWidth = 120;
-          if (node.data?.label && typeof node.data.label === 'string') {
-            expectedWidth = Math.max(120, node.data.label.length * 10 + 60);
-          }
-
-          // Only update if dimensions actually changed significantly
-          const currentWidth = node.measured?.width || 120;
-          const shouldUpdate =
-            actualWidth > 0 &&
-            (actualWidth !== currentWidth || expectedWidth > currentWidth + 50);
-
-          if (shouldUpdate) {
-            return {
-              ...node,
-              measured: {
-                width: Math.max(actualWidth, expectedWidth),
-                height: actualHeight,
-              },
-              width: Math.max(actualWidth, expectedWidth),
-              height: actualHeight,
-            };
-          }
-        }
-      }
-      return node;
-    });
-
-    // Update nodes with fresh dimensions if any were found
-    const hasDimensionUpdates = updatedNodesWithDimensions.some(
-      (node, index) => node !== allNodes[index],
-    );
-
-    if (hasDimensionUpdates) {
-      setNodes(updatedNodesWithDimensions);
-      // Get the updated nodes for layout calculation
-      const freshAllNodes = updatedNodesWithDimensions;
-      const freshStructureNodes = freshAllNodes.filter(
-        (n) => n.data.isTreeStructure && n.data.structureId === structureId,
-      );
-      return calculateTreeLayoutWithNodes(
-        freshAllNodes,
-        freshStructureNodes,
-        startTime,
-      );
-    }
-
-    // Use the current nodes for layout calculation
-    return calculateTreeLayoutWithNodes(allNodes, allStructureNodes, startTime);
-  }, [isTreeStructure, nodeType, structureId, getNodes, setNodes, id]);
-
-  // Helper function to calculate layout with specific node data
-  const calculateTreeLayoutWithNodes = useCallback(
-    (allNodes: any[], allStructureNodes: any[], startTime: number) => {
-      // Find the root node of this structure
-      const rootNode = allStructureNodes.find(
-        (n) => n.data.nodeType === 'root',
-      );
-
-      if (!rootNode || allStructureNodes.length === 0) {
-        return;
-      }
-
-      // Performance optimization: Memoize node widths to avoid recalculating
-      const nodeWidthCache = new Map<string, number>();
-
-      const getNodeWidth = (node: any) => {
-        // Check cache first
-        if (nodeWidthCache.has(node.id)) {
-          return nodeWidthCache.get(node.id)!;
-        }
-
-        // Force refresh of node data to get latest dimensions
-        const freshNode = allNodes.find((n) => n.id === node.id) || node;
-
-        // If we have a label, estimate width based on label length
-        let estimatedWidth = 120; // Default width
-        if (freshNode.data?.label && typeof freshNode.data.label === 'string') {
-          const labelLength = freshNode.data.label.length;
-          // More accurate estimation: 10px per character + padding
-          estimatedWidth = Math.max(120, labelLength * 10 + 60);
-        }
-
-        // Try to get actual DOM element width if available
-        let actualWidth =
-          freshNode.measured?.width || freshNode.width || estimatedWidth;
-
-        // If we have a very long label, use the estimated width even if measured width is small
-        if (
-          freshNode.data?.label &&
-          typeof freshNode.data.label === 'string' &&
-          freshNode.data.label.length > 10
-        ) {
-          const labelBasedWidth = freshNode.data.label.length * 10 + 60;
-          if (labelBasedWidth > actualWidth) {
-            actualWidth = labelBasedWidth;
-          }
-        }
-
-        // Cache the result
-        nodeWidthCache.set(node.id, actualWidth);
-
-        return actualWidth;
-      };
-
-      const rootCenterX = rootNode.position.x + getNodeWidth(rootNode) / 2;
-      const minSpacing = 40; // Minimum spacing between nodes
-      const verticalDistance = 150; // Fixed Y distance between levels
-
-      // Build tree structure to understand hierarchy
-      const buildTree = (parentId: string): any[] => {
-        return allStructureNodes
-          .filter((n) => n.data.parentId === parentId)
-          .map((node) => ({
-            ...node,
-            children: buildTree(node.id),
-          }));
-      };
-
-      const tree = buildTree(rootNode.id); // Start from root
-
-      // Two-pass hierarchical tree layout that adjusts parent positions based on children
-      const calculateHierarchicalTreeLayout = () => {
-        const positionedNodes: any[] = [];
-
-        // First, position the root node
-        positionedNodes.push({
-          ...rootNode,
-          position: rootNode.position,
-          data: {
-            ...rootNode.data,
-            relativePosition: { x: 0, y: 0 },
-          },
-        });
-
-        // PASS 1: Calculate subtree widths for each node (already memoized)
-        const subtreeWidths = new Map<string, number>();
-
-        const calculateSubtreeWidth = (node: any): number => {
-          if (subtreeWidths.has(node.id)) {
-            return subtreeWidths.get(node.id)!;
-          }
-
-          const nodeWidth = getNodeWidth(node);
-
-          if (!node.children || node.children.length === 0) {
-            // Leaf node - just its own width
-            subtreeWidths.set(node.id, nodeWidth);
-            return nodeWidth;
-          }
-
-          // Calculate total width of children
-          const childrenWidths = node.children.map((child: any) =>
-            calculateSubtreeWidth(child),
-          );
-          const totalChildrenWidth = childrenWidths.reduce(
-            (sum: number, width: number) => sum + width,
-            0,
-          );
-          const childrenSpacing = (node.children.length - 1) * minSpacing;
-          const totalChildrenSpace = totalChildrenWidth + childrenSpacing;
-
-          // Subtree width is the maximum of node width and children space
-          const subtreeWidth = Math.max(nodeWidth, totalChildrenSpace);
-          subtreeWidths.set(node.id, subtreeWidth);
-
-          return subtreeWidth;
-        };
-
-        // Calculate subtree widths for all nodes
-        tree.forEach((node) => calculateSubtreeWidth(node));
-
-        // PASS 2: Position nodes with proper spacing based on subtree widths
-        const positionNodeHierarchy = (
-          nodes: any[],
-          parentX: number,
-          parentY: number,
-          level: number,
-        ) => {
-          if (nodes.length === 0) return;
-
-          const currentY = parentY + verticalDistance;
-
-          // Calculate total space needed for all subtrees
-          const subtreeWidthsForLevel = nodes.map(
-            (node) => subtreeWidths.get(node.id) || getNodeWidth(node),
-          );
-          const totalSubtreeWidth = subtreeWidthsForLevel.reduce(
-            (sum, width) => sum + width,
-            0,
-          );
-          const totalSpacing = (nodes.length - 1) * minSpacing;
-          const totalRequiredWidth = totalSubtreeWidth + totalSpacing;
-
-          // Center the group under the parent
-          let startX = parentX - totalRequiredWidth / 2;
-          let currentX = startX;
-
-          nodes.forEach((node) => {
-            const nodeWidth = getNodeWidth(node);
-            const subtreeWidth = subtreeWidths.get(node.id) || nodeWidth;
-            const nodeHeight = 60; // Standard height
-
-            // Center the node within its subtree space
-            const nodeX = currentX + (subtreeWidth - nodeWidth) / 2;
-            const nodeY = currentY;
-
-            // Ensure level is set
-            if (!node.data.level) {
-              node.data.level = level;
-            }
-
-            positionedNodes.push({
-              ...node,
-              position: { x: nodeX, y: nodeY },
-              data: {
-                ...node.data,
-                relativePosition: { x: nodeX - parentX, y: verticalDistance },
-              },
-            });
-
-            // Recursively position children of this node
-            if (node.children && node.children.length > 0) {
-              const childParentX = nodeX + nodeWidth / 2; // Center children under this node
-              positionNodeHierarchy(
-                node.children,
-                childParentX,
-                nodeY,
-                level + 1,
-              );
-            }
-
-            // Move to next position based on subtree width
-            currentX += subtreeWidth + minSpacing;
-          });
-        };
-
-        // Start positioning from the root
-        positionNodeHierarchy(tree, rootCenterX, rootNode.position.y, 1);
-
-        return positionedNodes;
-      };
-
-      // Calculate all positions using hierarchical tree layout
-      const allPositionedNodes = calculateHierarchicalTreeLayout();
-
-      // Performance optimization: Only update nodes that actually changed position
-      const updatedNodes: any[] = [];
-      let hasPositionChanges = false;
-
-      for (const node of allNodes) {
-        const positionedNode = allPositionedNodes.find(
-          (pn) => pn.id === node.id,
-        );
-        if (positionedNode) {
-          const oldPos = node.position;
-          const newPos = positionedNode.position;
-          const positionChanged =
-            oldPos.x !== newPos.x || oldPos.y !== newPos.y;
-
-          if (positionChanged) {
-            hasPositionChanges = true;
-            updatedNodes.push({
-              ...node,
-              position: positionedNode.position,
-              data: positionedNode.data,
-            });
-          } else {
-            updatedNodes.push(node);
-          }
-        } else {
-          updatedNodes.push(node);
-        }
-      }
-
-      const endTime = performance.now();
-      const duration = endTime - startTime;
-
-      if (hasPositionChanges) {
-        setNodes(updatedNodes);
-      } else {
-      }
-    },
-    [setNodes],
-  );
-
-  // Auto-adjust child node positions when node dimensions change
-  const adjustChildPositions = useCallback(() => {
-    calculateTreeLayout();
-  }, [calculateTreeLayout]);
-
-  // Add new child node to the tree structure
-  const addChildNode = useCallback(() => {
-    if (!isTreeStructure || !structureId) return;
-
-    const allNodes = getNodes();
-    const currentNode = allNodes.find((n) => n.id === id);
-    if (!currentNode) return;
-
-    // Find the root node to get the structure type
-    const rootNodeForStructureType = allNodes.find(
-      (n) =>
-        n.data.isTreeStructure &&
-        n.data.structureId === structureId &&
-        n.data.nodeType === 'root',
-    );
-
-    // Determine the level of the new child node
-    const currentLevel =
-      currentNode.data.nodeType === 'root'
-        ? 0
-        : (currentNode.data.level as number) || 1;
-    const newLevel = currentLevel + 1;
-
-    // Count existing child nodes at the same level under this parent
-    const existingChildNodes = allNodes.filter(
-      (n) =>
-        n.data.isTreeStructure &&
-        n.data.structureId === structureId &&
-        n.data.parentId === id &&
-        n.data.level === newLevel,
-    );
-
-    const childCount = existingChildNodes.length;
-    const newChildId = generateChildId();
-
-    // Calculate position for new child node
-    const relativeX = 0; // Will be calculated by layout system
-    const verticalDistance = 150; // Fixed Y distance between levels
-
-    const newChildNode: Node = {
-      id: newChildId,
-      type: 'TreeSystemNode',
-      position: { x: 0, y: 0 }, // Will be calculated by adjustChildPositions
-      data: {
-        label: `Child ${childCount + 1}`,
-        color: '#F44336',
-        isTreeStructure: true,
-        structureId: structureId,
-        nodeType: 'child',
-        parentId: id, // Track parent node
-        level: newLevel, // Track level in tree
-        relativePosition: { x: relativeX, y: verticalDistance },
-        // Inherit structure type from root node
-        structureType:
-          rootNodeForStructureType?.data?.structureType || 'structure1',
-      } as SystemFlowNodeData,
-      draggable: true,
-      width: 120,
-      height: 60,
-      measured: {
-        width: 120,
-        height: 60,
-      },
-    };
-
-    // Add the new child node
-    addNodes(newChildNode);
-
-    // Find the root node and trigger its layout recalculation
-    const rootNodeForLayout = allNodes.find(
-      (n) =>
-        n.data.isTreeStructure &&
-        n.data.structureId === structureId &&
-        n.data.nodeType === 'root',
-    );
-
-    if (rootNodeForLayout) {
-      // Use a small delay to ensure the new node is added before recalculation
-      setTimeout(() => {
-        const forceLayoutRecalculation =
-          rootNodeForLayout.data?.forceLayoutRecalculation;
-        if (typeof forceLayoutRecalculation === 'function') {
-          forceLayoutRecalculation();
-        } else {
-          // Fallback: trigger layout recalculation by updating the root node
-          setNodes((nds) =>
-            nds.map((node) => {
-              if (node.id === rootNodeForLayout.id) {
-                return {
-                  ...node,
-                  data: {
-                    ...node.data,
-                    lastLayoutUpdate: Date.now(),
-                  },
-                };
-              }
-              return node;
-            }),
-          );
-        }
-      }, 50);
-    }
-  }, [
-    isTreeStructure,
-    structureId,
-    getNodes,
-    addNodes,
-    setNodes,
-    id,
-    generateChildId,
-  ]);
-
-  // Update existing child nodes to inherit structure type from root
-  const updateChildNodesStructureType = useCallback(() => {
-    if (!isTreeStructure || !structureId) return;
-
-    const allNodes = getNodes();
-    const rootNode = allNodes.find(
-      (n) =>
-        n.data.isTreeStructure &&
-        n.data.structureId === structureId &&
-        n.data.nodeType === 'root',
-    );
-
-    if (!rootNode?.data?.structureType) return;
-
-    const updatedNodes = allNodes.map((node) => {
-      if (
-        node.data.isTreeStructure &&
-        node.data.structureId === structureId &&
-        node.data.nodeType === 'child' &&
-        !node.data.structureType
-      ) {
-        return {
-          ...node,
-          data: {
-            ...node.data,
-            structureType: rootNode.data.structureType,
-          },
-        };
-      }
-      return node;
-    });
-
-    // Only update if there were changes
-    const hasChanges = updatedNodes.some(
-      (node, index) => node !== allNodes[index],
-    );
-    if (hasChanges) {
-      setNodes(updatedNodes);
-    }
-  }, [isTreeStructure, structureId, getNodes, setNodes]);
-
-  // Force layout recalculation - can be called externally
-  const forceLayoutRecalculation = useCallback(() => {
-    if (isTreeStructure) {
-      // First update any existing child nodes that don't have structure type
-      updateChildNodesStructureType();
-      // Add a small delay to ensure all DOM updates are complete
-      setTimeout(() => {
-        calculateTreeLayout();
-      }, 50);
-    }
-  }, [isTreeStructure, calculateTreeLayout, updateChildNodesStructureType]);
-
-  return {
-    generateChildId,
-    addChildNode,
-    adjustChildPositions,
-    forceLayoutRecalculation,
-  };
-};
+import { useCallback } from 'react';
+import { useReactFlow, Node } from '@xyflow/react';
+import { SystemFlowNodeData } from '../types/system-flow-types';
+
+interface UseTreeChildNodeProps {
+  id: string;
+  isTreeStructure: boolean;
+  nodeType: 'root' | 'child';
+  structureId?: string;
+}
+
+interface UseTreeChildNodeReturn {
+  generateChildId: () => string;
+  addChildNode: () => void;
+  adjustChildPositions: () => void;
+  forceLayoutRecalculation: () => void;
+}
+
+export const useTreeChildNode = ({
+  id,
+  isTreeStructure,
+  nodeType,
+  structureId,
+}: UseTreeChildNodeProps): UseTreeChildNodeReturn => {
+  const { getNode, setNodes, getNodes, addNodes } = useReactFlow();
+
+  // Generate unique ID for new child nodes
+  const generateChildId = useCallback(() => {
+    const timestamp = Date.now();
+    const random = Math.random().toString(36).substr(2, 9);
+    return `tree-child-${timestamp}-${random}`;
+  }, []);
+
+  // Dynamic layout system for tree structure nodes - similar to ELK layout
+  const calculateTreeLayout = useCallback(() => {
+    if (!isTreeStructure) return;
+
+    const startTime = performance.now();
+
+    // Always get fresh node data to ensure we have the latest dimensions
+    const allNodes = getNodes();
+    const allStructureNodes = allNodes.filter(
+      (n) => n.data.isTreeStructure && n.data.structureId === structureId,
+    );
+
+    // Early exit if no structure nodes found
+    if (allStructureNodes.length === 0) {
+      return;
+    }
+
+    // Performance optimization: Only check structure nodes and batch DOM queries
+    const structureNodes = allNodes.filter(
+      (node) =>
+        node.data.isTreeStructure && node.data.structureId === structureId,
+    );
+
+    // Batch DOM queries to avoid repeated querySelector calls
+    const domElements = new Map<string, DOMRect>();
+    structureNodes.forEach((node) => {
+      const domElement = document.querySelector(`[data-id="${node.id}"]`);
+      if (domElement) {
+        domElements.set(node.id, domElement.getBoundingClientRect());
+      }
+    });
+
+    // Only update nodes that actually need dimension updates
+    const updatedNodesWithDimensions = allNodes.map((node) => {
+      if (node.data.isTreeStructure && node.data.structureId === structureId) {
+        const rect = domElements.get(node.id);
+        if (rect) {
+          const actualWidth = rect.width;
+          const actualHeight = rect.height;
+
+          // Calculate expected width based on label length
+          let expectedWidth = 120;
+          if (node.data?.label && typeof node.data.label === 'string') {
+            expectedWidth = Math.max(120, node.data.label.length * 10 + 60);
+          }
+
+          // Only update if dimensions actually changed significantly
+          const currentWidth = node.measured?.width || 120;
+          const shouldUpdate =
+            actualWidth > 0 &&
+            (actualWidth !== currentWidth || expectedWidth > currentWidth + 50);
+
+          if (shouldUpdate) {
+            return {
+              ...node,
+              measured: {
+                width: Math.max(actualWidth, expectedWidth),
+                height: actualHeight,
+              },
+              width: Math.max(actualWidth, expectedWidth),
+              height: actualHeight,
+            };
+          }
+        }
+      }
+      return node;
+    });
+
+    // Update nodes with fresh dimensions if any were found
+    const hasDimensionUpdates = updatedNodesWithDimensions.some(
+      (node, index) => node !== allNodes[index],
+    );
+
+    if (hasDimensionUpdates) {
+      setNodes(updatedNodesWithDimensions);
+      // Get the updated nodes for layout calculation
+      const freshAllNodes = updatedNodesWithDimensions;
+      const freshStructureNodes = freshAllNodes.filter(
+        (n) => n.data.isTreeStructure && n.data.structureId === structureId,
+      );
+      return calculateTreeLayoutWithNodes(
+        freshAllNodes,
+        freshStructureNodes,
+        startTime,
+      );
+    }
+
+    // Use the current nodes for layout calculation
+    return calculateTreeLayoutWithNodes(allNodes, allStructureNodes, startTime);
+  }, [isTreeStructure, nodeType, structureId, getNodes, setNodes, id]);
+
+  // Helper function to calculate layout with specific node data
+  const calculateTreeLayoutWithNodes = useCallback(
+    (allNodes: any[], allStructureNodes: any[], startTime: number) => {
+      // Find the root node of this structure
+      const rootNode = allStructureNodes.find(
+        (n) => n.data.nodeType === 'root',
+      );
+
+      if (!rootNode || allStructureNodes.length === 0) {
+        return;
+      }
+
+      // Performance optimization: Memoize node widths to avoid recalculating
+      const nodeWidthCache = new Map<string, number>();
+
+      const getNodeWidth = (node: any) => {
+        // Check cache first
+        if (nodeWidthCache.has(node.id)) {
+          return nodeWidthCache.get(node.id)!;
+        }
+
+        // Force refresh of node data to get latest dimensions
+        const freshNode = allNodes.find((n) => n.id === node.id) || node;
+
+        // If we have a label, estimate width based on label length
+        let estimatedWidth = 120; // Default width
+        if (freshNode.data?.label && typeof freshNode.data.label === 'string') {
+          const labelLength = freshNode.data.label.length;
+          // More accurate estimation: 10px per character + padding
+          estimatedWidth = Math.max(120, labelLength * 10 + 60);
+        }
+
+        // Try to get actual DOM element width if available
+        let actualWidth =
+          freshNode.measured?.width || freshNode.width || estimatedWidth;
+
+        // If we have a very long label, use the estimated width even if measured width is small
+        if (
+          freshNode.data?.label &&
+          typeof freshNode.data.label === 'string' &&
+          freshNode.data.label.length > 10
+        ) {
+          const labelBasedWidth = freshNode.data.label.length * 10 + 60;
+          if (labelBasedWidth > actualWidth) {
+            actualWidth = labelBasedWidth;
+          }
+        }
+
+        // Cache the result
+        nodeWidthCache.set(node.id, actualWidth);
+
+        return actualWidth;
+      };
+
+      const rootCenterX = rootNode.position.x + getNodeWidth(rootNode) / 2;
+      const minSpacing = 40; // Minimum spacing between nodes
+      const verticalDistance = 150; // Fixed Y distance between levels
+
+      // Build tree structure to understand hierarchy
+      const buildTree = (parentId: string): any[] => {
+        return allStructureNodes
+          .filter((n) => n.data.parentId === parentId)
+          .map((node) => ({
+            ...node,
+            children: buildTree(node.id),
+          }));
+      };
+
+      const tree = buildTree(rootNode.id); // Start from root
+
+      // Two-pass hierarchical tree layout that adjusts parent positions based on children
+      const calculateHierarchicalTreeLayout = () => {
+        const positionedNodes: any[] = [];
+
+        // First, position the root node
+        positionedNodes.push({
+          ...rootNode,
+          position: rootNode.position,
+          data: {
+            ...rootNode.data,
+            relativePosition: { x: 0, y: 0 },
+          },
+        });
+
+        // PASS 1: Calculate subtree widths for each node (already memoized)
+        const subtreeWidths = new Map<string, number>();
+
+        const calculateSubtreeWidth = (node: any): number => {
+          if (subtreeWidths.has(node.id)) {
+            return subtreeWidths.get(node.id)!;
+          }
+
+          const nodeWidth = getNodeWidth(node);
+
+          if (!node.children || node.children.length === 0) {
+            // Leaf node - just its own width
+            subtreeWidths.set(node.id, nodeWidth);
+            return nodeWidth;
+          }
+
+          // Calculate total width of children
+          const childrenWidths = node.children.map((child: any) =>
+            calculateSubtreeWidth(child),
+          );
+          const totalChildrenWidth = childrenWidths.reduce(
+            (sum: number, width: number) => sum + width,
+            0,
+          );
+          const childrenSpacing = (node.children.length - 1) * minSpacing;
+          const totalChildrenSpace = totalChildrenWidth + childrenSpacing;
+
+          // Subtree width is the maximum of node width and children space
+          const subtreeWidth = Math.max(nodeWidth, totalChildrenSpace);
+          subtreeWidths.set(node.id, subtreeWidth);
+
+          return subtreeWidth;
+        };
+
+        // Calculate subtree widths for all nodes
+        tree.forEach((node) => calculateSubtreeWidth(node));
+
+        // PASS 2: Position nodes with proper spacing based on subtree widths
+        const positionNodeHierarchy = (
+          nodes: any[],
+          parentX: number,
+          parentY: number,
+          level: number,
+        ) => {
+          if (nodes.length === 0) return;
+
+          const currentY = parentY + verticalDistance;
+
+          // Calculate total space needed for all subtrees
+          const subtreeWidthsForLevel = nodes.map(
+            (node) => subtreeWidths.get(node.id) || getNodeWidth(node),
+          );
+          const totalSubtreeWidth = subtreeWidthsForLevel.reduce(
+            (sum, width) => sum + width,
+            0,
+          );
+          const totalSpacing = (nodes.length - 1) * minSpacing;
+          const totalRequiredWidth = totalSubtreeWidth + totalSpacing;
+
+          // Center the group under the parent
+          let startX = parentX - totalRequiredWidth / 2;
+          let currentX = startX;
+
+          nodes.forEach((node) => {
+            const nodeWidth = getNodeWidth(node);
+            const subtreeWidth = subtreeWidths.get(node.id) || nodeWidth;
+            const nodeHeight = 60; // Standard height
+
+            // Center the node within its subtree space
+            const nodeX = currentX + (subtreeWidth - nodeWidth) / 2;
+            const nodeY = currentY;
+
+            // Ensure level is set
+            if (!node.data.level) {
+              node.data.level = level;
+            }
+
+            positionedNodes.push({
+              ...node,
+              position: { x: nodeX, y: nodeY },
+              data: {
+                ...node.data,
+                relativePosition: { x: nodeX - parentX, y: verticalDistance },
+              },
+            });
+
+            // Recursively position children of this node
+            if (node.children && node.children.length > 0) {
+              const childParentX = nodeX + nodeWidth / 2; // Center children under this node
+              positionNodeHierarchy(
+                node.children,
+                childParentX,
+                nodeY,
+                level + 1,
+              );
+            }
+
+            // Move to next position based on subtree width
+            currentX += subtreeWidth + minSpacing;
+          });
+        };
+
+        // Start positioning from the root
+        positionNodeHierarchy(tree, rootCenterX, rootNode.position.y, 1);
+
+        return positionedNodes;
+      };
+
+      // Calculate all positions using hierarchical tree layout
+      const allPositionedNodes = calculateHierarchicalTreeLayout();
+
+      // Performance optimization: Only update nodes that actually changed position
+      const updatedNodes: any[] = [];
+      let hasPositionChanges = false;
+
+      for (const node of allNodes) {
+        const positionedNode = allPositionedNodes.find(
+          (pn) => pn.id === node.id,
+        );
+        if (positionedNode) {
+          const oldPos = node.position;
+          const newPos = positionedNode.position;
+          const positionChanged =
+            oldPos.x !== newPos.x || oldPos.y !== newPos.y;
+
+          if (positionChanged) {
+            hasPositionChanges = true;
+            updatedNodes.push({
+              ...node,
+              position: positionedNode.position,
+              data: positionedNode.data,
+            });
+          } else {
+            updatedNodes.push(node);
+          }
+        } else {
+          updatedNodes.push(node);
+        }
+      }
+
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+
+      if (hasPositionChanges) {
+        setNodes(updatedNodes);
+      } else {
+      }
+    },
+    [setNodes],
+  );
+
+  // Auto-adjust child node positions when node dimensions change
+  const adjustChildPositions = useCallback(() => {
+    calculateTreeLayout();
+  }, [calculateTreeLayout]);
+
+  // Add new child node to the tree structure
+  const addChildNode = useCallback(() => {
+    if (!isTreeStructure || !structureId) return;
+
+    const allNodes = getNodes();
+    const currentNode = allNodes.find((n) => n.id === id);
+    if (!currentNode) return;
+
+    // Find the root node to get the structure type
+    const rootNodeForStructureType = allNodes.find(
+      (n) =>
+        n.data.isTreeStructure &&
+        n.data.structureId === structureId &&
+        n.data.nodeType === 'root',
+    );
+
+    // Determine the level of the new child node
+    const currentLevel =
+      currentNode.data.nodeType === 'root'
+        ? 0
+        : (currentNode.data.level as number) || 1;
+    const newLevel = currentLevel + 1;
+
+    // Count existing child nodes at the same level under this parent
+    const existingChildNodes = allNodes.filter(
+      (n) =>
+        n.data.isTreeStructure &&
+        n.data.structureId === structureId &&
+        n.data.parentId === id &&
+        n.data.level === newLevel,
+    );
+
+    const childCount = existingChildNodes.length;
+    const newChildId = generateChildId();
+
+    // Calculate position for new child node
+    const relativeX = 0; // Will be calculated by layout system
+    const verticalDistance = 150; // Fixed Y distance between levels
+
+    const newChildNode: Node = {
+      id: newChildId,
+      type: 'TreeSystemNode',
+      position: { x: 0, y: 0 }, // Will be calculated by adjustChildPositions
+      data: {
+        label: `Child ${childCount + 1}`,
+        color: '#F44336',
+        isTreeStructure: true,
+        structureId: structureId,
+        nodeType: 'child',
+        parentId: id, // Track parent node
+        level: newLevel, // Track level in tree
+        relativePosition: { x: relativeX, y: verticalDistance },
+        // Inherit structure type from root node
+        structureType:
+          rootNodeForStructureType?.data?.structureType || 'structure1',
+      } as SystemFlowNodeData,
+      draggable: true,
+      width: 120,
+      height: 60,
+      measured: {
+        width: 120,
+        height: 60,
+      },
+    };
+
+    // Add the new child node
+    addNodes(newChildNode);
+
+    // Find the root node and trigger its layout recalculation
+    const rootNodeForLayout = allNodes.find(
+      (n) =>
+        n.data.isTreeStructure &&
+        n.data.structureId === structureId &&
+        n.data.nodeType === 'root',
+    );
+
+    if (rootNodeForLayout) {
+      // Use a small delay to ensure the new node is added before recalculation
+      setTimeout(() => {
+        const forceLayoutRecalculation =
+          rootNodeForLayout.data?.forceLayoutRecalculation;
+        if (typeof forceLayoutRecalculation === 'function') {
+          forceLayoutRecalculation();
+        } else {
+          // Fallback: trigger layout recalculation by updating the root node
+          setNodes((nds) =>
+            nds.map((node) => {
+              if (node.id === rootNodeForLayout.id) {
+                return {
+                  ...node,
+                  data: {
+                    ...node.data,
+                    lastLayoutUpdate: Date.now(),
+                  },
+                };
+              }
+              return node;
+            }),
+          );
+        }
+      }, 50);
+    }
+  }, [
+    isTreeStructure,
+    structureId,
+    getNodes,
+    addNodes,
+    setNodes,
+    id,
+    generateChildId,
+  ]);
+
+  // Update existing child nodes to inherit structure type from root
+  const updateChildNodesStructureType = useCallback(() => {
+    if (!isTreeStructure || !structureId) return;
+
+    const allNodes = getNodes();
+    const rootNode = allNodes.find(
+      (n) =>
+        n.data.isTreeStructure &&
+        n.data.structureId === structureId &&
+        n.data.nodeType === 'root',
+    );
+
+    if (!rootNode?.data?.structureType) return;
+
+    const updatedNodes = allNodes.map((node) => {
+      if (
+        node.data.isTreeStructure &&
+        node.data.structureId === structureId &&
+        node.data.nodeType === 'child' &&
+        !node.data.structureType
+      ) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            structureType: rootNode.data.structureType,
+          },
+        };
+      }
+      return node;
+    });
+
+    // Only update if there were changes
+    const hasChanges = updatedNodes.some(
+      (node, index) => node !== allNodes[index],
+    );
+    if (hasChanges) {
+      setNodes(updatedNodes);
+    }
+  }, [isTreeStructure, structureId, getNodes, setNodes]);
+
+  // Force layout recalculation - can be called externally
+  const forceLayoutRecalculation = useCallback(() => {
+    if (isTreeStructure) {
+      // First update any existing child nodes that don't have structure type
+      updateChildNodesStructureType();
+      // Add a small delay to ensure all DOM updates are complete
+      setTimeout(() => {
+        calculateTreeLayout();
+      }, 50);
+    }
+  }, [isTreeStructure, calculateTreeLayout, updateChildNodesStructureType]);
+
+  return {
+    generateChildId,
+    addChildNode,
+    adjustChildPositions,
+    forceLayoutRecalculation,
+  };
+};