@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,536 +0,0 @@
-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,
-  };
-};