Function NodeEditor

packages/node-editor/src/components/editor/NodeEditor.tsx:87–537

({
    graph,
    // templates is reserved for future node palette feature
    // templates 保留用于未来的节点面板功能
    templates: _templates = [],
    selectedNodeIds = new Set(),
    selectedConnectionIds = new Set(),
    executionStates,
    animateExecConnections = false,
    readOnly = false,
    renderIcon,
    onGraphChange,
    onSelectionChange,
    // onNodeDoubleClick is reserved for future double-click handling
    // onNodeDoubleClick 保留用于未来的双击处理
    onNodeDoubleClick: _onNodeDoubleClick,
    onCanvasContextMenu,
    onNodeContextMenu,
    onConnectionContextMenu
})

 * NodeEditor - 完整的节点图编辑器组件
 */
export const NodeEditor: React.FC<NodeEditorProps> = ({
    graph,
    // templates is reserved for future node palette feature
    // templates 保留用于未来的节点面板功能
    templates: _templates = [],
    selectedNodeIds = new Set(),
    selectedConnectionIds = new Set(),
    executionStates,
    animateExecConnections = false,
    readOnly = false,
    renderIcon,
    onGraphChange,
    onSelectionChange,
    // onNodeDoubleClick is reserved for future double-click handling
    // onNodeDoubleClick 保留用于未来的双击处理
    onNodeDoubleClick: _onNodeDoubleClick,
    onCanvasContextMenu,
    onNodeContextMenu,
    onConnectionContextMenu
}) => {
    // Silence unused variable warnings (消除未使用变量警告)
    void _templates;
    void _onNodeDoubleClick;
    const containerRef = useRef<HTMLDivElement>(null);

    // Canvas transform state - use ref to always have latest values
    // 画布变换状态 - 使用 ref 保证总是能获取最新值
    const transformRef = useRef({ pan: Position.ZERO, zoom: 1 });

    // Callbacks for GraphCanvas to sync transform state
    const handlePanChange = useCallback((newPan: Position) => {
        transformRef.current.pan = newPan;
    }, []);

    const handleZoomChange = useCallback((newZoom: number) => {
        transformRef.current.zoom = newZoom;
    }, []);

    // Local state for dragging (拖拽的本地状态)
    const [dragState, setDragState] = useState<DragState | null>(null);
    const [connectionDrag, setConnectionDrag] = useState<ConnectionDragState | null>(null);
    const [hoveredPin, setHoveredPin] = useState<Pin | null>(null);

    /**
     * Converts screen coordinates to canvas coordinates
     * 将屏幕坐标转换为画布坐标
     * 使用 ref 中的最新值，避免闭包捕获旧状态
     */
    const screenToCanvas = useCallback((screenX: number, screenY: number): Position => {
        if (!containerRef.current) return new Position(screenX, screenY);
        const rect = containerRef.current.getBoundingClientRect();
        const { pan, zoom } = transformRef.current;
        const x = (screenX - rect.left - pan.x) / zoom;
        const y = (screenY - rect.top - pan.y) / zoom;
        return new Position(x, y);
    }, []);

    /**