@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/templates/systemFlow/nodes/TreeSystemNode.tsx

@@ -0,0 +1,755 @@
+import { memo, useRef, useCallback, useState, useEffect } from "react"
+import { Handle, Position, type NodeProps, useReactFlow } from "@xyflow/react"
+import { Paper, Typography, Box } from "@mui/material"
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { useTreeChildNode } from "../../../hooks/useTreeChildNode";
+import { useAddChildButton } from "../../../hooks/useAddChildButton";
+import { SystemFlowNodeData } from '../../../types/system-flow-types';
+
+const TreeSystemNode = ({ id, data, isConnectable }: NodeProps) => {
+    const nodeRef = useRef<HTMLDivElement>(null);
+    const { getNode, setNodes, getNodes, addNodes } = useReactFlow();
+
+    const nodeData = data as SystemFlowNodeData;
+    const isTreeStructure = nodeData.isTreeStructure;
+    const structureId = nodeData.structureId;
+    const nodeType = nodeData.nodeType;
+
+    // State to track node dimensions for auto-centering
+    const [nodeDimensions, setNodeDimensions] = useState<{
+        width: number;
+        height: number;
+    }>({ width: 120, height: 60 });
+
+    // State to track if root node is being edited
+    const [isRootBeingEdited, setIsRootBeingEdited] = useState(false);
+
+    // Use custom hooks for tree child node functionality
+    const { addChildNode, adjustChildPositions, forceLayoutRecalculation } = useTreeChildNode({
+        id,
+        isTreeStructure: isTreeStructure || false,
+        nodeType: nodeType || 'root',
+        structureId
+    });
+
+    // Function to auto-center root node after editing
+    const autoCenterRootNode = useCallback(() => {
+        if (isTreeStructure && nodeType === 'root') {
+            const allNodes = getNodes();
+            const currentNode = allNodes.find(n => n.id === id);
+            if (!currentNode) return;
+
+            // Calculate new center position based on current width
+            const newWidth = nodeDimensions.width;
+            const currentX = currentNode.position.x;
+            const currentCenterX = currentX + (currentNode.width || 120) / 2;
+            const newCenterX = currentX + newWidth / 2;
+
+            // Calculate offset to keep the node centered
+            const offsetX = currentCenterX - newCenterX;
+            const newPosition = {
+                x: currentX + offsetX,
+                y: currentNode.position.y
+            };
+
+            // Update the root node position
+            const updatedNodes = allNodes.map(n => {
+                if (n.id === id) {
+                    return {
+                        ...n,
+                        position: newPosition,
+                        measured: {
+                            width: newWidth,
+                            height: nodeDimensions.height
+                        },
+                        width: newWidth,
+                        height: nodeDimensions.height
+                    };
+                }
+                return n;
+            });
+            setNodes(updatedNodes);
+
+            // Adjust child positions after centering
+            setTimeout(() => adjustChildPositions(), 0);
+        }
+    }, [isTreeStructure, nodeType, nodeDimensions, getNodes, setNodes, adjustChildPositions, id]);
+
+    const { isHovered, setIsHovered, AddChildButton } = useAddChildButton({
+        isTreeStructure: isTreeStructure || false,
+        nodeType: nodeType || 'root',
+        nodeColor: nodeData.color || '#2196F3',
+        onAddChild: addChildNode
+    });
+
+    // Debounced layout recalculation to prevent excessive recalculations
+    const layoutTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Flag to prevent infinite loops during layout recalculation
+    const isRecalculatingLayout = useRef(false);
+
+    // Timestamp to prevent rapid successive calls
+    const lastResizeTime = useRef(0);
+
+    // Store last calculated dimensions to prevent unnecessary recalculations
+    const lastCalculatedDimensions = useRef<Map<string, { width: number; height: number }>>(new Map());
+
+    // Store last node labels to detect content changes
+    const lastNodeLabels = useRef<Map<string, string>>(new Map());
+
+    // Debounced layout recalculation to prevent excessive recalculations
+    const debouncedLayoutRecalculation = useCallback(() => {
+        if (layoutTimeoutRef.current) {
+            clearTimeout(layoutTimeoutRef.current);
+        }
+        layoutTimeoutRef.current = setTimeout(() => {
+            // Only recalculate if we're not already recalculating
+            if (!isRecalculatingLayout.current) {
+                adjustChildPositions();
+            }
+        }, 50); // 50ms debounce
+    }, [adjustChildPositions]);
+
+    // Use a ref to store the resize handler to prevent callback recreation
+    const handleResizeRef = useRef<(({ width, height }: { width: number; height: number }) => void) | null>(null);
+
+    // Create a stable resize handler that doesn't change on every render
+    const createResizeHandler = useCallback(() => {
+        return ({ width, height }: { width: number; height: number }) => {
+            const actualWidth = nodeRef.current?.scrollWidth || width;
+            const actualHeight = nodeRef.current?.scrollHeight || height;
+
+            // Update local dimensions state
+            setNodeDimensions({ width: actualWidth, height: actualHeight });
+
+            // For root nodes, don't auto-center during editing - let it extend freely
+            if (isTreeStructure && nodeType === 'root') {
+                // Mark that root is being edited
+                setIsRootBeingEdited(true);
+                // Don't auto-center during editing, just update dimensions
+            }
+
+            // For child nodes, trigger layout recalculation when dimensions change
+            if (isTreeStructure && nodeType === 'child') {
+                const now = Date.now();
+                const timeSinceLastResize = now - lastResizeTime.current;
+
+                // Skip if we're already recalculating layout to prevent loops
+                if (isRecalculatingLayout.current) {
+                    return;
+                }
+
+                // Skip if resize happened too recently (less than 100ms ago)
+                if (timeSinceLastResize < 100) {
+                    return;
+                }
+
+                lastResizeTime.current = now;
+
+
+                // Update this child node's measured dimensions first
+                const allNodes = getNodes();
+                const updatedNodes = allNodes.map(n => {
+                    if (n.id === id) {
+                        return {
+                            ...n,
+                            measured: {
+                                width: actualWidth,
+                                height: actualHeight
+                            },
+                            width: actualWidth,
+                            height: actualHeight
+                        };
+                    }
+                    return n;
+                });
+                setNodes(updatedNodes);
+
+                // Clear the stored dimensions and labels for this node to force recalculation
+                lastCalculatedDimensions.current.delete(id);
+                lastNodeLabels.current.delete(id);
+
+                // Find the root node and trigger its layout recalculation
+                const rootNode = allNodes.find(n =>
+                    n.data.isTreeStructure &&
+                    n.data.structureId === structureId &&
+                    n.data.nodeType === 'root'
+                );
+
+                if (rootNode) {
+                    // Use a longer delay to ensure the node dimensions are updated before layout calculation
+                    setTimeout(() => {
+                        const forceLayoutRecalculation = rootNode.data?.forceLayoutRecalculation;
+                        if (typeof forceLayoutRecalculation === 'function') {
+                            forceLayoutRecalculation();
+                        } else {
+                            // Fallback: Use debounced layout recalculation
+                            debouncedLayoutRecalculation();
+                        }
+                    }, 150); // Increased delay to ensure dimensions are updated
+                }
+            }
+
+            // Call parent onResize if provided
+            if (typeof nodeData.onResize === 'function') {
+                nodeData.onResize(id, actualWidth, actualHeight);
+            }
+        };
+    }, [
+        isTreeStructure,
+        nodeType,
+        structureId,
+        id,
+        nodeData.label,
+        nodeData.onResize,
+        adjustChildPositions,
+        debouncedLayoutRecalculation,
+        getNodes,
+        setNodes
+    ]);
+
+    // Update the ref with the latest handler
+    handleResizeRef.current = createResizeHandler();
+
+    // Create a stable callback that uses the ref
+    const stableResizeHandler = useCallback(({ width, height }: { width: number; height: number }) => {
+        if (handleResizeRef.current) {
+            handleResizeRef.current({ width, height });
+        }
+    }, []); // Empty dependency array - this callback never changes
+
+    useResizeObserver(nodeRef, stableResizeHandler);
+
+    // Effect to adjust child positions when dimensions change
+    useEffect(() => {
+        if (isTreeStructure && nodeType === 'root' && nodeDimensions.width > 0) {
+            adjustChildPositions();
+        }
+    }, [nodeDimensions.width, adjustChildPositions, isTreeStructure, nodeType]);
+
+    // Effect to detect label changes and trigger layout recalculation
+    useEffect(() => {
+        if (isTreeStructure && nodeType === 'child' && nodeData.label) {
+            const lastLabel = lastNodeLabels.current.get(id);
+            if (lastLabel !== nodeData.label) {
+                lastNodeLabels.current.set(id, nodeData.label as string);
+
+                // Trigger layout recalculation after a short delay to allow for resize
+                setTimeout(() => {
+                    const allNodes = getNodes();
+                    const rootNode = allNodes.find(n =>
+                        n.data.isTreeStructure &&
+                        n.data.structureId === structureId &&
+                        n.data.nodeType === 'root'
+                    );
+
+                    if (rootNode) {
+                        debouncedLayoutRecalculation();
+                    }
+                }, 100);
+            }
+        }
+    }, [nodeData.label, isTreeStructure, nodeType, structureId, id, getNodes, debouncedLayoutRecalculation]);
+
+    // Effect to trigger initial layout calculation when component mounts
+    useEffect(() => {
+        if (isTreeStructure && nodeType === 'root') {
+            // Small delay to ensure all nodes are loaded
+            const timer = setTimeout(() => {
+                const allNodes = getNodes();
+                const childNodes = allNodes.filter(n =>
+                    n.data.isTreeStructure &&
+                    n.data.structureId === structureId &&
+                    n.data.nodeType === 'child'
+                );
+
+                if (childNodes.length > 0) {
+                    // Clear caches to force initial layout calculation
+                    lastCalculatedDimensions.current.clear();
+                    lastNodeLabels.current.clear();
+                    adjustChildPositions();
+                }
+            }, 100);
+
+            return () => clearTimeout(timer);
+        }
+    }, [isTreeStructure, nodeType, structureId, getNodes, adjustChildPositions]);
+
+    // Effect to update existing child nodes with structure type when component mounts
+    useEffect(() => {
+        if (isTreeStructure && nodeType === 'root' && nodeData.structureType) {
+            const timer = setTimeout(() => {
+                const allNodes = getNodes();
+                const childNodes = allNodes.filter(n =>
+                    n.data.isTreeStructure &&
+                    n.data.structureId === structureId &&
+                    n.data.nodeType === 'child' &&
+                    !n.data.structureType
+                );
+
+                if (childNodes.length > 0) {
+                    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: nodeData.structureType,
+                                },
+                            };
+                        }
+                        return node;
+                    });
+                    setNodes(updatedNodes);
+                }
+            }, 200);
+
+            return () => clearTimeout(timer);
+        }
+    }, [isTreeStructure, nodeType, structureId, nodeData.structureType, getNodes, setNodes]);
+
+    // Effect to recalculate positions when child nodes change (add/remove)
+    useEffect(() => {
+        if (isTreeStructure && nodeType === 'root') {
+            const allNodes = getNodes();
+            const childNodes = allNodes.filter(n =>
+                n.data.isTreeStructure &&
+                n.data.structureId === structureId &&
+                n.data.nodeType === 'child'
+            );
+
+            // If we have child nodes, ensure they're positioned correctly
+            if (childNodes.length > 0) {
+                // Clear caches to force initial layout calculation
+                lastCalculatedDimensions.current.clear();
+                lastNodeLabels.current.clear();
+                setTimeout(() => adjustChildPositions(), 0);
+            }
+        }
+    }, [getNodes, isTreeStructure, nodeType, structureId, adjustChildPositions]);
+
+    // Effect to trigger layout recalculation when lastLayoutUpdate changes
+    useEffect(() => {
+        if (isTreeStructure && nodeType === 'root' && nodeData.lastLayoutUpdate) {
+            // Clear caches and recalculate layout
+            lastCalculatedDimensions.current.clear();
+            lastNodeLabels.current.clear();
+            setTimeout(() => adjustChildPositions(), 0);
+        }
+    }, [nodeData.lastLayoutUpdate, isTreeStructure, nodeType, adjustChildPositions]);
+
+    // Expose forceLayoutRecalculation and autoCenterRootNode functions through node data
+    useEffect(() => {
+        if (isTreeStructure) {
+            // Update the node data to include the functions
+            const allNodes = getNodes();
+            const updatedNodes = allNodes.map(n => {
+                if (n.id === id) {
+                    return {
+                        ...n,
+                        data: {
+                            ...n.data,
+                            forceLayoutRecalculation,
+                            autoCenterRootNode: nodeType === 'root' ? autoCenterRootNode : undefined,
+                            isRootBeingEdited: nodeType === 'root' ? isRootBeingEdited : undefined
+                        }
+                    };
+                }
+                return n;
+            });
+            setNodes(updatedNodes);
+        }
+    }, [id, isTreeStructure, nodeType, forceLayoutRecalculation, autoCenterRootNode, isRootBeingEdited, getNodes, setNodes]);
+
+    // Cleanup effect to clear timeouts
+    useEffect(() => {
+        return () => {
+            if (layoutTimeoutRef.current) {
+                clearTimeout(layoutTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    return (
+        <div style={{ position: 'relative' }}>
+            {/* Main Node */}
+            <Paper
+                ref={nodeRef}
+                elevation={2}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                sx={{
+                    minWidth: 120,
+                    minHeight: 60,
+                    width: 'max-content',
+                    height: 'max-content',
+                    borderRadius: 2,
+                    border: `2px solid ${nodeData.color || '#2196F3'}`,
+                    padding: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    position: 'relative',
+                    overflow: 'visible',
+                    boxSizing: 'border-box',
+                    backgroundColor: 'white',
+                    cursor: 'move',
+                    userSelect: 'none',
+                }}
+            >
+                <Handle
+                    type="target"
+                    position={Position.Left}
+                    isConnectable={isConnectable}
+                    style={{
+                        left: '-6px',
+                        backgroundColor: nodeData.color || '#2196F3',
+                        border: '2px solid #fff',
+                        width: '12px',
+                        height: '12px'
+                    }}
+                />
+
+                <Box sx={{
+                    textAlign: "center",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    width: 'max-content',
+                    minWidth: 'min-content'
+                }}>
+                    <Typography
+                        variant="subtitle1"
+                        fontWeight="bold"
+                        sx={{
+                            whiteSpace: 'nowrap',
+                            overflow: 'visible',
+                            width: 'max-content',
+                            color: nodeData.color || '#2196F3',
+                        }}
+                    >
+                        {(nodeData.label as string) || 'System'}
+                    </Typography>
+
+                    {/* Add Child Button - Using custom hook */}
+                    {AddChildButton}
+                </Box>
+
+                <Handle
+                    type="source"
+                    position={Position.Right}
+                    isConnectable={isConnectable}
+                    style={{
+                        right: '-6px',
+                        backgroundColor: nodeData.color || '#2196F3',
+                        border: '2px solid #fff',
+                        width: '12px',
+                        height: '12px'
+                    }}
+                />
+            </Paper>
+
+            {/* SVG Connection Lines - Render for all nodes that have children */}
+            {isTreeStructure && (() => {
+                // Get structure type from current node, or fallback to root node's structure type
+                let structureType: 'structure1' | 'structure2' | 'structure3' = nodeData.structureType || 'structure1';
+                if (!nodeData.structureType && structureId) {
+                    const allNodes = getNodes();
+                    const rootNode = allNodes.find(n =>
+                        n.data.isTreeStructure &&
+                        n.data.structureId === structureId &&
+                        n.data.nodeType === 'root'
+                    );
+                    structureType = (rootNode?.data?.structureType as 'structure1' | 'structure2' | 'structure3') || 'structure1';
+                }
+
+                // Calculate SVG positioning based on node position and width
+                // Use current dimensions if root is being edited, otherwise use measured dimensions
+                const currentNode = getNodes().find(n => n.id === id);
+                if (!currentNode) return null;
+
+                const actualNodeWidth = isRootBeingEdited ? nodeDimensions.width : (currentNode?.measured?.width || currentNode?.width || nodeDimensions.width);
+                const nodeCenterX = actualNodeWidth / 2; // This is the center relative to the node's left edge
+
+                // Calculate the actual span needed for child nodes
+                const allNodes = getNodes();
+                const childNodes = allNodes.filter(n =>
+                    n.data.isTreeStructure &&
+                    n.data.structureId === structureId &&
+                    n.data.parentId === id
+                );
+
+                // Only render SVG if this node has children
+                if (childNodes.length === 0) return null;
+
+                // Calculate SVG bounds based on child node positions
+                const leftmostChild = Math.min(...childNodes.map(n => {
+                    const childWidth = n.measured?.width || n.width || 120;
+                    return n.position.x;
+                }));
+                const rightmostChild = Math.max(...childNodes.map(n => {
+                    const childWidth = n.measured?.width || n.width || 120;
+                    return n.position.x + childWidth;
+                }));
+
+                // Add padding to ensure the SVG covers the extended horizontal line
+                const padding = 40;
+                const minWidth = 400;
+                const svgWidth = Math.max(minWidth, rightmostChild - leftmostChild + padding * 2);
+                const svgLeft = leftmostChild - padding - currentNode.position.x; // Relative to current node position
+
+                // Render different SVG designs based on structure type
+                if (structureType === 'structure2') {
+                    // Structure 2: Arrow from root with space before horizontal line
+                    return (
+                        <svg
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: `${svgLeft}px`,
+                                width: `${svgWidth}px`,
+                                height: '210px',
+                                pointerEvents: 'none',
+                                zIndex: 5,
+                            }}
+                            viewBox={`${svgLeft} 0 ${svgWidth} 210`}
+                        >
+                            {/* Arrow from root node bottom center */}
+                            <g>
+                                {/* Arrow shaft */}
+                                <line
+                                    x1={nodeCenterX}
+                                    y1="60"  // Bottom of root node
+                                    x2={nodeCenterX}
+                                    y2="110" // Extended down with space
+                                    stroke="#666"
+                                    strokeWidth="2"
+                                />
+                                {/* Arrow head pointing down */}
+                                <polygon
+                                    points={`${nodeCenterX},110 ${nodeCenterX - 6},104 ${nodeCenterX + 6},104`}
+                                    fill="#666"
+                                />
+                            </g>
+
+                            {/* Dynamic horizontal line connecting all child nodes with space from arrow */}
+                            {childNodes.length > 0 && (() => {
+                                const leftmostChild = Math.min(...childNodes.map(n => {
+                                    const relativePos = n.data.relativePosition as { x: number; y: number };
+                                    const childWidth = n.measured?.width || n.width || 120;
+                                    return relativePos ? nodeCenterX + relativePos.x + (childWidth / 2) : 0;
+                                }));
+                                const rightmostChild = Math.max(...childNodes.map(n => {
+                                    const relativePos = n.data.relativePosition as { x: number; y: number };
+                                    const childWidth = n.measured?.width || n.width || 120;
+                                    return relativePos ? nodeCenterX + relativePos.x + (childWidth / 2) : 0;
+                                }));
+
+                                return (
+                                    <line
+                                        x1={leftmostChild}
+                                        y1="110"   // Space below the arrow
+                                        x2={rightmostChild}
+                                        y2="110"   // Same y
+                                        stroke="#666"
+                                        strokeWidth="2"
+                                    />
+                                );
+                            })()}
+
+                            {/* Dynamic vertical lines and arrows for each child node */}
+                            {childNodes.map((childNode, index) => {
+                                const relativePos = childNode.data.relativePosition as { x: number; y: number };
+                                if (!relativePos) return null;
+
+                                const childWidth = childNode.measured?.width || childNode.width || 120;
+                                const childX = nodeCenterX + relativePos.x + (childWidth / 2);
+
+                                return (
+                                    <g key={childNode.id}>
+                                        {/* Vertical line down to child node - connect directly to node */}
+                                        <line
+                                            x1={childX}
+                                            y1="110"   // From horizontal line
+                                            x2={childX}
+                                            y2="145"   // Connect directly to child node top
+                                            stroke="#666"
+                                            strokeWidth="2"
+                                        />
+
+                                        {/* Arrow head pointing down to child node - positioned at node top */}
+                                        <polygon
+                                            points={`${childX},150 ${childX - 6},144 ${childX + 6},144`}
+                                            fill="#666"
+                                        />
+                                    </g>
+                                );
+                            })}
+                        </svg>
+                    );
+                } else if (structureType === 'structure3') {
+                    // Structure 3: Normal root line with circle center point for child connections
+                    return (
+                        <svg
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: `${svgLeft}px`,
+                                width: `${svgWidth}px`,
+                                height: '210px',
+                                pointerEvents: 'none',
+                                zIndex: 5,
+                            }}
+                            viewBox={`${svgLeft} 0 ${svgWidth} 210`}
+                        >
+                            {/* Vertical line from root node bottom center */}
+                            <line
+                                x1={nodeCenterX}
+                                y1="60"  // Bottom of root node
+                                x2={nodeCenterX}
+                                y2="90"  // Fixed distance down
+                                stroke="#666"
+                                strokeWidth="2"
+                            />
+
+                            {/* Circle center point for child connections */}
+                            {childNodes.length > 0 && (
+                                <circle
+                                    cx={nodeCenterX}
+                                    cy="90"
+                                    r="8"
+                                    fill="white"
+                                    stroke="white"
+                                    strokeWidth="2"
+                                />
+                            )}
+
+                            {/* Dynamic lines from circle to each child node */}
+                            {childNodes.map((childNode, index) => {
+                                const relativePos = childNode.data.relativePosition as { x: number; y: number };
+                                if (!relativePos) return null;
+
+                                const childWidth = childNode.measured?.width || childNode.width || 120;
+                                const childX = nodeCenterX + relativePos.x + (childWidth / 2);
+                                const childY = 160; // Child nodes start at y=160
+
+                                // Calculate angle from circle center to child node
+                                const deltaX = childX - nodeCenterX;
+                                const deltaY = childY - 90;
+                                const angle = Math.atan2(deltaY, deltaX);
+
+                                // Calculate circle edge point
+                                const circleRadius = 8;
+                                const circleEdgeX = nodeCenterX + circleRadius * Math.cos(angle);
+                                const circleEdgeY = 90 + circleRadius * Math.sin(angle);
+
+                                return (
+                                    <g key={childNode.id}>
+                                        {/* Line from circle edge to child node */}
+                                        <line
+                                            x1={circleEdgeX}
+                                            y1={circleEdgeY}
+                                            x2={childX}
+                                            y2="145"  // Connect directly to child node top
+                                            stroke="#666"
+                                            strokeWidth="2"
+                                        />
+
+                                        {/* Arrow head pointing down to child node */}
+                                        <polygon
+                                            points={`${childX},150 ${childX - 6},144 ${childX + 6},144`}
+                                            fill="#666"
+                                        />
+                                    </g>
+                                );
+                            })}
+                        </svg>
+                    );
+                } else {
+                    // Structure 1: Original design with connected lines
+                    return (
+                        <svg
+                            style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: `${svgLeft}px`,
+                                width: `${svgWidth}px`,
+                                height: '210px',
+                                pointerEvents: 'none',
+                                zIndex: 5,
+                            }}
+                            viewBox={`0 0 ${svgWidth} 210`}
+                        >
+                            {/* Vertical line from current node bottom center */}
+                            <line
+                                x1={nodeCenterX - svgLeft}
+                                y1="60"  // Bottom of current node
+                                x2={nodeCenterX - svgLeft}
+                                y2="90"  // Fixed distance down
+                                stroke="#666"
+                                strokeWidth="2"
+                            />
+
+                            {/* Dynamic horizontal line connecting all child nodes */}
+                            {childNodes.length > 0 && (() => {
+                                const leftmostChild = Math.min(...childNodes.map(n => {
+                                    const childWidth = n.measured?.width || n.width || 120;
+                                    return n.position.x + (childWidth / 2) - currentNode.position.x;
+                                }));
+                                const rightmostChild = Math.max(...childNodes.map(n => {
+                                    const childWidth = n.measured?.width || n.width || 120;
+                                    return n.position.x + (childWidth / 2) - currentNode.position.x;
+                                }));
+
+                                return (
+                                    <line
+                                        x1={leftmostChild - svgLeft}
+                                        y1="90"   // Same y as vertical line end
+                                        x2={rightmostChild - svgLeft}
+                                        y2="90"   // Same y
+                                        stroke="#666"
+                                        strokeWidth="2"
+                                    />
+                                );
+                            })()}
+
+                            {/* Dynamic vertical lines and arrows for each child node */}
+                            {childNodes.map((childNode, index) => {
+                                const childWidth = childNode.measured?.width || childNode.width || 120;
+                                const childX = childNode.position.x + (childWidth / 2) - currentNode.position.x;
+
+                                return (
+                                    <g key={childNode.id}>
+                                        {/* Vertical line down to child node - connect directly to node */}
+                                        <line
+                                            x1={childX - svgLeft}
+                                            y1="90"   // From horizontal line
+                                            x2={childX - svgLeft}
+                                            y2="145"  // Connect directly to child node top
+                                            stroke="#666"
+                                            strokeWidth="2"
+                                        />
+
+                                        {/* Arrow head pointing down to child node - positioned at node top */}
+                                        <polygon
+                                            points={`${childX - svgLeft},150 ${childX - svgLeft - 6},144 ${childX - svgLeft + 6},144`}
+                                            fill="#666"
+                                        />
+                                    </g>
+                                );
+                            })}
+                        </svg>
+                    );
+                }
+            })()}
+        </div>
+    )
+}
+
+export default memo(TreeSystemNode)
+