@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,755 +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)
-
+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)
+