jch-config-editor 0.1.0

package/dist/components/Canvas/index.js

@@ -0,0 +1,759 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useCallback, useState, useEffect } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { Button, Space, Tooltip, Empty, Modal, Form, Input, Collapse, } from "antd";
+import { ZoomInOutlined, ZoomOutOutlined, UndoOutlined, RedoOutlined, SelectOutlined, DragOutlined, EyeOutlined, DeleteOutlined, ExperimentOutlined, GroupOutlined, AppstoreAddOutlined, SaveOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, AlignLeftOutlined, AlignRightOutlined, } from "@ant-design/icons";
+import { useEditorStore } from "../../store/editorStore";
+import { NodeRenderer } from "../NodeRenderer";
+import { createDefaultNode, createDefaultStatus } from "../../utils/initData";
+import { nanoid } from "nanoid";
+const { Panel } = Collapse;
+const { TextArea } = Input;
+export const Canvas = ({ defaultTestData, }) => {
+    const transformRef = useRef(null);
+    const canvasRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const { nodes, selectedNodeId, selectedStatusId, mode, lineDrawing, viewport, setViewport, addNode, selectNode, updateNode, removeNode, undo, redo, setMode, startLineDrawing, updateLineDrawing, endLineDrawing, cancelLineDrawing, addMaterial, } = useEditorStore();
+    // 使用 ref 存储拖拽状态，避免频繁触发 useEffect 重新绑定事件
+    const isDraggingRef = useRef(false);
+    const dragStartRef = useRef({ x: 0, y: 0 });
+    const dragOffsetRef = useRef({ x: 0, y: 0, newX: 0, newY: 0 });
+    const draggingNodeRef = useRef(null);
+    // 用于强制刷新（实际拖拽逻辑使用 ref）
+    const [, forceUpdate] = useState({});
+    const [isDragOver, setIsDragOver] = useState(false);
+    // 线条绘制状态
+    const [linePreview, setLinePreview] = useState({ start: null, end: null, isDrawing: false });
+    // 框选状态
+    const [isBoxSelecting, setIsBoxSelecting] = useState(false);
+    const [selectionBox, setSelectionBox] = useState({ start: null, end: null });
+    const [selectedNodeIds, setSelectedNodeIds] = useState([]);
+    // 使用 ref 存储状态，避免 useEffect 依赖它们导致频繁重新绑定事件
+    const nodesRef = useRef(nodes);
+    const selectionBoxRef = useRef({ start: null, end: null });
+    const isBoxSelectingRef = useRef(isBoxSelecting);
+    // 同步 nodes 到 ref
+    useEffect(() => {
+        nodesRef.current = nodes;
+    }, [nodes]);
+    // 同步 selectionBox 到 ref
+    useEffect(() => {
+        selectionBoxRef.current = selectionBox;
+    }, [selectionBox]);
+    // 同步 isBoxSelecting 到 ref
+    useEffect(() => {
+        isBoxSelectingRef.current = isBoxSelecting;
+    }, [isBoxSelecting]);
+    // 数据模拟面板
+    const [dataModalVisible, setDataModalVisible] = useState(false);
+    // 编辑模式：数据只渲染一次，使用 ref 避免重渲染
+    // 预览模式：数据实时更新
+    const testDataRef = useRef(defaultTestData);
+    const [previewData, setPreviewData] = useState(defaultTestData);
+    const [dataInput, setDataInput] = useState(JSON.stringify(defaultTestData, null, 2));
+    const [dataError, setDataError] = useState(null);
+    // 根据模式处理数据更新
+    useEffect(() => {
+        if (mode === 'preview') {
+            // 预览模式：实时更新数据
+            setPreviewData(defaultTestData);
+        }
+        // 编辑模式：只更新 ref，不触发重渲染
+        testDataRef.current = defaultTestData;
+        // 只在弹窗关闭时更新输入框
+        if (!dataModalVisible) {
+            setDataInput(JSON.stringify(defaultTestData, null, 2));
+        }
+    }, [defaultTestData, dataModalVisible, mode]);
+    // 同步视口状态
+    const handleTransform = useCallback(() => {
+        const state = transformRef.current?.state;
+        if (state) {
+            setViewport({
+                scale: state.scale,
+                positionX: state.positionX,
+                positionY: state.positionY
+            });
+        }
+    }, [setViewport]);
+    // 处理画布点击
+    const handleCanvasClick = useCallback((e) => {
+        if (isDraggingRef.current)
+            return;
+        // 框选拖拽过程中不处理点击（避免清除选择）
+        if (isBoxSelecting && selectionBox.start)
+            return;
+        if (e.target === canvasRef.current ||
+            e.target.dataset?.canvas === "true") {
+            selectNode(null);
+        }
+    }, [selectNode, isBoxSelecting, selectionBox.start]);
+    // 处理拖拽悬停
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "copy";
+        if (!isDragOver) {
+            setIsDragOver(true);
+        }
+    }, [isDragOver]);
+    // 处理拖拽离开
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    // 处理放置
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        if (!canvasRef.current || mode !== "select")
+            return;
+        try {
+            const data = e.dataTransfer.getData("application/json");
+            if (!data)
+                return;
+            const material = JSON.parse(data);
+            const rect = canvasRef.current.getBoundingClientRect();
+            // 优先使用 transformRef 中的实时状态
+            const currentTransform = transformRef.current?.state;
+            const scale = currentTransform?.scale ?? viewport.scale;
+            const positionX = currentTransform?.positionX ?? viewport.positionX;
+            const positionY = currentTransform?.positionY ?? viewport.positionY;
+            const x = (e.clientX - rect.left - positionX) / scale - 50;
+            const y = (e.clientY - rect.top - positionY) / scale - 50;
+            const newNode = createDefaultNode(x, y, material);
+            addNode(newNode);
+        }
+        catch (error) {
+            console.error("Failed to parse dropped material:", error);
+        }
+    }, [mode, viewport, addNode]);
+    // 处理节点拖拽开始
+    const handleNodeMouseDown = useCallback((e, node) => {
+        if (mode !== "select" || !node.controlInfo.isDraggable)
+            return;
+        e.stopPropagation();
+        selectNode(node.id);
+        // 使用 ref 存储拖拽状态，避免触发重渲染
+        isDraggingRef.current = true;
+        dragStartRef.current = { x: e.clientX, y: e.clientY };
+        dragOffsetRef.current = {
+            x: node.normalStyle.x || 0,
+            y: node.normalStyle.y || 0,
+            newX: node.normalStyle.x || 0,
+            newY: node.normalStyle.y || 0,
+        };
+        draggingNodeRef.current = node;
+        // 阻止文本选中
+        e.preventDefault();
+    }, [mode, selectNode]);
+    // 获取鼠标在画布上的坐标（考虑缩放和平移）
+    const getCanvasPosition = useCallback((clientX, clientY) => {
+        if (!canvasRef.current) {
+            console.log('[getCanvasPosition] canvas ref not ready');
+            return { x: 0, y: 0 };
+        }
+        // 获取 canvas 元素在屏幕上的位置（已经包含变换）
+        const canvasRect = canvasRef.current.getBoundingClientRect();
+        // 从 transformRef 获取 scale
+        const scale = transformRef.current?.state?.scale ?? 1;
+        // 计算鼠标相对于 canvas 左上角的屏幕坐标
+        const mouseXInCanvas = clientX - canvasRect.left;
+        const mouseYInCanvas = clientY - canvasRect.top;
+        // canvas 的逻辑尺寸是 1920x1080
+        // canvasRect 是视觉尺寸 = 1920 * scale
+        // 所以转换比例 = 逻辑尺寸 / 视觉尺寸 = 1920 / (1920 * scale) = 1 / scale
+        const x = mouseXInCanvas * (1920 / canvasRect.width);
+        const y = mouseYInCanvas * (1080 / canvasRect.height);
+        const result = { x: Math.round(x), y: Math.round(y) };
+        console.log('[getCanvasPosition]', { clientX, clientY, canvasRect, scale, result });
+        return result;
+    }, []);
+    // 创建线条节点
+    const createLineNode = useCallback((start, end, continueDrawing = true) => {
+        if (!lineDrawing.material)
+            return;
+        const material = lineDrawing.material;
+        const config = material.config || {};
+        const lineWeight = config.lineWeight || config.thickness || 2;
+        // 节点位置：覆盖起点和终点的最小矩形左上角
+        const x = Math.min(start.x, end.x);
+        const y = Math.min(start.y, end.y);
+        // 起点和终点相对于节点左上角的坐标
+        const relativeStartX = Math.round(start.x - x);
+        const relativeStartY = Math.round(start.y - y);
+        const relativeEndX = Math.round(end.x - x);
+        const relativeEndY = Math.round(end.y - y);
+        // 节点大小：刚好包含整条线
+        const minNodeSize = Math.max(lineWeight * 2, 4);
+        const nodeWidth = Math.max(Math.abs(start.x - end.x), minNodeSize);
+        const nodeHeight = Math.max(Math.abs(start.y - end.y), minNodeSize);
+        // 创建线条物料的复制，只保留关键参数
+        const lineMaterial = {
+            ...material,
+            id: nanoid(),
+            config: {
+                // 只保留关键配置：颜色、线宽、线型
+                color: config.color,
+                lineWeight,
+                thickness: lineWeight,
+                lineType: config.lineType,
+                // 起止位置（相对于节点）
+                startX: relativeStartX,
+                startY: relativeStartY,
+                endX: relativeEndX,
+                endY: relativeEndY,
+            },
+        };
+        // 创建节点
+        const newNode = {
+            id: nanoid(),
+            name: `${material.name}_${Date.now()}`,
+            type: 'normal',
+            normalStyle: {
+                width: nodeWidth,
+                height: nodeHeight,
+                x,
+                y,
+                background: 'transparent',
+            },
+            contentInfo: {
+                statusList: [createDefaultStatus(lineMaterial)],
+                currentStatusId: undefined,
+            },
+            controlInfo: {
+                isDraggable: true,
+                isClickable: true,
+                isResizable: true,
+                isSelectable: true,
+            },
+        };
+        // 绘制线条时不自动选中节点，避免属性面板弹出影响绘制
+        addNode(newNode, false);
+        if (continueDrawing) {
+            // 继续绘制下一条线段，以当前终点作为新起点
+            const nextStart = { x: end.x, y: end.y };
+            setLinePreview({
+                start: nextStart,
+                end: { ...nextStart },
+                isDrawing: true,
+            });
+        }
+        else {
+            // 结束绘制
+            setLinePreview({ start: null, end: null, isDrawing: false });
+            endLineDrawing();
+        }
+    }, [lineDrawing.material, addNode, endLineDrawing]);
+    // 处理画布鼠标按下
+    const handleCanvasMouseDown = useCallback((e) => {
+        // 使用 ref 获取最新状态，避免闭包问题
+        const currentIsBoxSelecting = isBoxSelectingRef.current;
+        console.log('[handleCanvasMouseDown]', { button: e.button, mode, isBoxSelecting: currentIsBoxSelecting, isBoxSelectingState: isBoxSelecting, lineDrawingMaterial: !!lineDrawing.material });
+        console.log('[handleCanvasMouseDown] ref values:', { isBoxSelectingRef: isBoxSelectingRef.current, selectionBoxRef: selectionBoxRef.current });
+        // 只处理左键
+        if (e.button !== 0)
+            return;
+        // 框选模式
+        if (currentIsBoxSelecting) {
+            const pos = getCanvasPosition(e.clientX, e.clientY);
+            setSelectionBox({ start: pos, end: pos });
+            setSelectedNodeIds([]);
+            return;
+        }
+        // 普通选择模式：让 TransformWrapper 处理画布平移，不阻止事件
+        if (mode === "select" && !lineDrawing.material) {
+            // 不处理，让事件冒泡给 TransformWrapper 进行平移
+            return;
+        }
+        // 线条绘制模式
+        if (mode !== "line-draw" || !lineDrawing.material) {
+            console.log('[handleCanvasMouseDown] not in line-draw mode or no material');
+            return;
+        }
+        const pos = getCanvasPosition(e.clientX, e.clientY);
+        console.log('[handleCanvasMouseDown] drawing at', pos, 'isDrawing:', linePreview.isDrawing);
+        if (!linePreview.isDrawing) {
+            // 开始绘制
+            setLinePreview({
+                start: pos,
+                end: pos,
+                isDrawing: true,
+            });
+        }
+        else {
+            // 绘制线段，继续绘制下一条（连续绘制模式）
+            if (linePreview.start) {
+                createLineNode(linePreview.start, pos, true);
+            }
+        }
+    }, [mode, lineDrawing.material, linePreview.isDrawing, linePreview.start, getCanvasPosition, createLineNode]);
+    // 处理双击结束绘制
+    const handleCanvasDoubleClick = useCallback((e) => {
+        if (mode !== "line-draw" || !lineDrawing.material)
+            return;
+        if (linePreview.isDrawing && linePreview.start) {
+            // 绘制最后一条线段并结束绘制
+            const pos = getCanvasPosition(e.clientX, e.clientY);
+            createLineNode(linePreview.start, pos, false);
+        }
+    }, [mode, lineDrawing.material, linePreview.isDrawing, linePreview.start, getCanvasPosition, createLineNode]);
+    // 处理框选 - 判断节点是否在选择框内
+    const getNodesInSelectionBox = useCallback(() => {
+        if (!selectionBox.start || !selectionBox.end)
+            return [];
+        const minX = Math.min(selectionBox.start.x, selectionBox.end.x);
+        const maxX = Math.max(selectionBox.start.x, selectionBox.end.x);
+        const minY = Math.min(selectionBox.start.y, selectionBox.end.y);
+        const maxY = Math.max(selectionBox.start.y, selectionBox.end.y);
+        return nodes.filter(node => {
+            const nodeX = node.normalStyle.x || 0;
+            const nodeY = node.normalStyle.y || 0;
+            const nodeWidth = node.normalStyle.width || 0;
+            const nodeHeight = node.normalStyle.height || 0;
+            // 检查节点中心点是否在选择框内
+            const centerX = nodeX + nodeWidth / 2;
+            const centerY = nodeY + nodeHeight / 2;
+            return centerX >= minX && centerX <= maxX && centerY >= minY && centerY <= maxY;
+        }).map(node => node.id);
+    }, [selectionBox, nodes]);
+    // 组合选中节点
+    const handleGroupNodes = useCallback(() => {
+        if (selectedNodeIds.length < 2)
+            return;
+        const selectedNodes = nodes.filter(n => selectedNodeIds.includes(n.id));
+        if (selectedNodes.length < 2)
+            return;
+        // 计算边界框
+        let minX = Infinity, minY = Infinity;
+        let maxX = -Infinity, maxY = -Infinity;
+        selectedNodes.forEach(node => {
+            const x = node.normalStyle.x || 0;
+            const y = node.normalStyle.y || 0;
+            const w = node.normalStyle.width || 0;
+            const h = node.normalStyle.height || 0;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + w);
+            maxY = Math.max(maxY, y + h);
+        });
+        // 调整子节点位置为相对坐标，并移除 scale 避免双重缩放
+        const children = selectedNodes.map(node => ({
+            ...node,
+            normalStyle: {
+                ...node.normalStyle,
+                x: (node.normalStyle.x || 0) - minX,
+                y: (node.normalStyle.y || 0) - minY,
+                scale: undefined, // 移除 scale，由父级容器统一控制
+            },
+        }));
+        // 创建群组节点
+        const groupNode = {
+            id: nanoid(),
+            name: `群组_${Date.now()}`,
+            type: 'group',
+            normalStyle: {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                // 不设置背景和边框，由 NodeRenderer 控制
+            },
+            contentInfo: {
+                statusList: [],
+                currentStatusId: undefined,
+            },
+            controlInfo: {
+                isDraggable: true,
+                isClickable: true,
+                isResizable: true,
+                isSelectable: true,
+            },
+            children,
+        };
+        // 删除原子节点并添加群组节点
+        selectedNodeIds.forEach(id => removeNode(id));
+        addNode(groupNode);
+        setSelectedNodeIds([]);
+        selectNode(groupNode.id);
+    }, [selectedNodeIds, nodes, addNode, removeNode, selectNode]);
+    // 保存群组到物料库
+    const handleSaveGroupToMaterial = useCallback(() => {
+        if (!selectedNodeId)
+            return;
+        const selectedNode = nodes.find(n => n.id === selectedNodeId);
+        if (!selectedNode || selectedNode.type !== 'group')
+            return;
+        // 创建群组物料
+        const groupMaterial = {
+            id: nanoid(),
+            name: `群组_${selectedNode.name || Date.now()}`,
+            type: 'CUSTOM',
+            config: {
+                nodes: selectedNode.children,
+            },
+        };
+        addMaterial(groupMaterial);
+        // 显示成功提示
+        console.log('[Canvas] 群组已保存到物料库:', groupMaterial.name);
+    }, [selectedNodeId, nodes, addMaterial]);
+    // 对齐选中的节点
+    const handleAlignNodes = useCallback((direction) => {
+        if (selectedNodeIds.length < 2)
+            return;
+        // 获取选中的非群组节点
+        const selectedNodes = selectedNodeIds
+            .map(id => nodes.find(n => n.id === id))
+            .filter((n) => !!n && n.type !== 'group');
+        if (selectedNodes.length < 2)
+            return;
+        // 计算对齐基准值
+        let alignValue;
+        switch (direction) {
+            case 'left':
+                alignValue = Math.min(...selectedNodes.map(n => n.normalStyle.x || 0));
+                break;
+            case 'right':
+                alignValue = Math.max(...selectedNodes.map(n => (n.normalStyle.x || 0) + (n.normalStyle.width || 0)));
+                break;
+            case 'top':
+                alignValue = Math.min(...selectedNodes.map(n => n.normalStyle.y || 0));
+                break;
+            case 'bottom':
+                alignValue = Math.max(...selectedNodes.map(n => (n.normalStyle.y || 0) + (n.normalStyle.height || 0)));
+                break;
+            default:
+                return;
+        }
+        // 更新每个节点的位置
+        selectedNodes.forEach(node => {
+            let newX = node.normalStyle.x || 0;
+            let newY = node.normalStyle.y || 0;
+            switch (direction) {
+                case 'left':
+                    newX = alignValue;
+                    break;
+                case 'right':
+                    newX = alignValue - (node.normalStyle.width || 0);
+                    break;
+                case 'top':
+                    newY = alignValue;
+                    break;
+                case 'bottom':
+                    newY = alignValue - (node.normalStyle.height || 0);
+                    break;
+            }
+            updateNode(node.id, {
+                normalStyle: {
+                    ...node.normalStyle,
+                    x: newX,
+                    y: newY,
+                },
+            });
+        });
+    }, [selectedNodeIds, nodes, updateNode]);
+    // 处理鼠标移动（线条绘制预览和框选）
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            // 使用 ref 获取最新状态，避免闭包问题
+            const currentIsBoxSelecting = isBoxSelectingRef.current;
+            const currentSelectionBox = selectionBoxRef.current;
+            // 框选处理
+            if (currentIsBoxSelecting && currentSelectionBox.start) {
+                const pos = getCanvasPosition(e.clientX, e.clientY);
+                setSelectionBox(prev => ({ ...prev, end: pos }));
+                // 实时更新选中的节点
+                const box = {
+                    start: currentSelectionBox.start,
+                    end: pos,
+                };
+                const minX = Math.min(box.start.x, box.end.x);
+                const maxX = Math.max(box.start.x, box.end.x);
+                const minY = Math.min(box.start.y, box.end.y);
+                const maxY = Math.max(box.start.y, box.end.y);
+                // 使用 ref 获取最新 nodes，避免依赖导致的重新绑定
+                const selectedIds = nodesRef.current.filter(node => {
+                    const nodeX = node.normalStyle.x || 0;
+                    const nodeY = node.normalStyle.y || 0;
+                    const nodeWidth = node.normalStyle.width || 0;
+                    const nodeHeight = node.normalStyle.height || 0;
+                    const centerX = nodeX + nodeWidth / 2;
+                    const centerY = nodeY + nodeHeight / 2;
+                    return centerX >= minX && centerX <= maxX && centerY >= minY && centerY <= maxY;
+                }).map(node => node.id);
+                setSelectedNodeIds(selectedIds);
+                return;
+            }
+            // 节点拖拽 - 直接操作 DOM，不触发 React 重渲染
+            if (isDraggingRef.current && selectedNodeId && draggingNodeRef.current) {
+                if (!canvasRef.current)
+                    return;
+                // 获取 canvas 的视觉尺寸
+                const canvasRect = canvasRef.current.getBoundingClientRect();
+                // 计算转换比例（与 getCanvasPosition 保持一致）
+                const scaleX = 1920 / canvasRect.width;
+                const scaleY = 1080 / canvasRect.height;
+                // 计算鼠标位移（屏幕像素）并转换为画布坐标位移
+                const screenDx = e.clientX - dragStartRef.current.x;
+                const screenDy = e.clientY - dragStartRef.current.y;
+                const canvasDx = screenDx * scaleX;
+                const canvasDy = screenDy * scaleY;
+                const newX = dragOffsetRef.current.x + canvasDx;
+                const newY = dragOffsetRef.current.y + canvasDy;
+                // 直接操作 DOM，不触发 React 重渲染
+                const nodeEl = document.querySelector(`[data-node-id="${selectedNodeId}"]`);
+                if (nodeEl) {
+                    nodeEl.style.left = `${newX}px`;
+                    nodeEl.style.top = `${newY}px`;
+                }
+                // 同时更新 ref 中的位置，用于拖拽结束时保存
+                dragOffsetRef.current.newX = newX;
+                dragOffsetRef.current.newY = newY;
+            }
+            // 线条绘制预览
+            if (mode === 'line-draw' && linePreview.isDrawing) {
+                const pos = getCanvasPosition(e.clientX, e.clientY);
+                setLinePreview((prev) => ({
+                    ...prev,
+                    end: pos,
+                }));
+            }
+        };
+        const handleMouseUp = () => {
+            // 拖拽结束，将最终位置同步到 store
+            if (isDraggingRef.current && selectedNodeId && draggingNodeRef.current) {
+                const newX = dragOffsetRef.current.newX ?? dragOffsetRef.current.x;
+                const newY = dragOffsetRef.current.newY ?? dragOffsetRef.current.y;
+                updateNode(selectedNodeId, {
+                    normalStyle: {
+                        ...draggingNodeRef.current.normalStyle,
+                        x: newX,
+                        y: newY,
+                    },
+                });
+            }
+            // 使用 ref 更新拖拽状态
+            isDraggingRef.current = false;
+            draggingNodeRef.current = null;
+            forceUpdate({}); // 触发一次渲染更新鼠标样式
+            // 结束框选（使用 ref 获取最新状态）
+            if (isBoxSelectingRef.current) {
+                setSelectionBox({ start: null, end: null });
+            }
+        };
+        const handleKeyDown = (e) => {
+            // ESC 取消线条绘制
+            if (e.key === 'Escape' && mode === 'line-draw') {
+                setLinePreview({ start: null, end: null, isDrawing: false });
+                cancelLineDrawing();
+            }
+        };
+        // 始终监听事件，在 handler 内部根据 ref 判断状态
+        // 避免 ref 变化无法触发 useEffect 重新执行的问题
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+        // 移除了 isDragging, dragStart, dragOffset, nodes, selectionBox, isBoxSelecting
+        // 使用 ref 替代这些状态，避免拖拽时频繁重新绑定事件导致卡顿
+    }, [
+        selectedNodeId,
+        updateNode,
+        mode,
+        linePreview.isDrawing,
+        getCanvasPosition,
+        cancelLineDrawing,
+    ]);
+    // 键盘快捷键
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Delete" && selectedNodeId) {
+                removeNode(selectedNodeId);
+            }
+            if (e.ctrlKey && e.key === "z") {
+                e.preventDefault();
+                undo();
+            }
+            if (e.ctrlKey && e.key === "y") {
+                e.preventDefault();
+                redo();
+            }
+            // ESC 取消线条绘制
+            if (e.key === "Escape" && mode === "line-draw") {
+                setLinePreview({ start: null, end: null, isDrawing: false });
+                cancelLineDrawing();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [selectedNodeId, removeNode, undo, redo, mode, cancelLineDrawing]);
+    // 应用测试数据
+    const handleApplyData = () => {
+        try {
+            const parsed = JSON.parse(dataInput);
+            testDataRef.current = parsed;
+            // 同时更新预览数据
+            setPreviewData(parsed);
+            setDataError(null);
+            setDataModalVisible(false);
+        }
+        catch (error) {
+            setDataError("JSON 格式错误，请检查输入");
+        }
+    };
+    // 工具栏按钮
+    const toolbarButtons = [
+        {
+            icon: _jsx(SelectOutlined, {}),
+            title: "选择模式",
+            active: mode === "select",
+            onClick: () => {
+                setMode("select");
+                setIsBoxSelecting(false);
+            },
+        },
+        {
+            icon: _jsx(DragOutlined, {}),
+            title: "拖拽模式",
+            active: mode === "drag",
+            onClick: () => {
+                setMode("drag");
+                setIsBoxSelecting(false);
+            },
+        },
+        {
+            icon: _jsx(EyeOutlined, {}),
+            title: "预览模式",
+            active: mode === "preview",
+            onClick: () => {
+                setMode("preview");
+                setIsBoxSelecting(false);
+            },
+        },
+    ];
+    const actionButtons = [
+        {
+            icon: _jsx(UndoOutlined, {}),
+            title: "撤销 (Ctrl+Z)",
+            onClick: undo,
+        },
+        {
+            icon: _jsx(RedoOutlined, {}),
+            title: "重做 (Ctrl+Y)",
+            onClick: redo,
+        },
+        {
+            icon: _jsx(GroupOutlined, {}),
+            title: "框选模式",
+            active: isBoxSelecting,
+            onClick: () => {
+                setIsBoxSelecting(!isBoxSelecting);
+                setMode("select");
+                setSelectedNodeIds([]);
+            },
+        },
+        {
+            icon: _jsx(AppstoreAddOutlined, {}),
+            title: "组合选中节点",
+            disabled: selectedNodeIds.length < 2,
+            onClick: handleGroupNodes,
+        },
+        {
+            icon: _jsx(AlignLeftOutlined, {}),
+            title: "左对齐",
+            disabled: selectedNodeIds.filter(id => nodes.find(n => n.id === id)?.type !== 'group').length < 2,
+            onClick: () => handleAlignNodes('left'),
+        },
+        {
+            icon: _jsx(AlignRightOutlined, {}),
+            title: "右对齐",
+            disabled: selectedNodeIds.filter(id => nodes.find(n => n.id === id)?.type !== 'group').length < 2,
+            onClick: () => handleAlignNodes('right'),
+        },
+        {
+            icon: _jsx(VerticalAlignTopOutlined, {}),
+            title: "上对齐",
+            disabled: selectedNodeIds.filter(id => nodes.find(n => n.id === id)?.type !== 'group').length < 2,
+            onClick: () => handleAlignNodes('top'),
+        },
+        {
+            icon: _jsx(VerticalAlignBottomOutlined, {}),
+            title: "下对齐",
+            disabled: selectedNodeIds.filter(id => nodes.find(n => n.id === id)?.type !== 'group').length < 2,
+            onClick: () => handleAlignNodes('bottom'),
+        },
+        {
+            icon: _jsx(SaveOutlined, {}),
+            title: "保存群组到物料库",
+            disabled: !selectedNodeId || nodes.find(n => n.id === selectedNodeId)?.type !== 'group',
+            onClick: handleSaveGroupToMaterial,
+        },
+        {
+            icon: _jsx(ExperimentOutlined, {}),
+            title: "数据模拟",
+            type: "primary",
+            onClick: () => setDataModalVisible(true),
+        },
+        {
+            icon: _jsx(DeleteOutlined, {}),
+            title: "删除选中 (Delete)",
+            disabled: !selectedNodeId && selectedNodeIds.length === 0,
+            onClick: () => {
+                if (selectedNodeId) {
+                    removeNode(selectedNodeId);
+                }
+                else if (selectedNodeIds.length > 0) {
+                    selectedNodeIds.forEach(id => removeNode(id));
+                    setSelectedNodeIds([]);
+                }
+            },
+        },
+    ];
+    return (_jsxs("div", { className: "flex-1 flex flex-col h-full bg-gray-100", children: [_jsxs("div", { className: "h-12 bg-white border-b border-gray-200 flex items-center justify-between px-4", children: [_jsx(Space, { children: toolbarButtons.map((btn) => (_jsx(Tooltip, { title: btn.title, children: _jsx(Button, { type: btn.active ? "primary" : "default", icon: btn.icon, onClick: btn.onClick }) }, btn.title))) }), _jsx(Space, { children: actionButtons.map((btn) => (_jsx(Tooltip, { title: btn.title, children: _jsx(Button, { type: btn.type || "default", icon: btn.icon, onClick: btn.onClick, disabled: btn.disabled }) }, btn.title))) })] }), _jsx("div", { ref: wrapperRef, className: "flex-1 relative", children: _jsx(TransformWrapper, { ref: transformRef, initialScale: 1, initialPositionX: 0, initialPositionY: 0, minScale: 0.5, maxScale: 5, onTransformed: handleTransform, limitToBounds: false, centerZoomedOut: false, panning: {
+                        disabled: false,
+                        velocityDisabled: true,
+                    }, wheel: {
+                        disabled: false,
+                        step: 0.1,
+                    }, pinch: {
+                        disabled: false,
+                    }, doubleClick: {
+                        disabled: true,
+                    }, children: ({ zoomIn, zoomOut, resetTransform }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute bottom-4 right-4 z-10 bg-white rounded-lg shadow-lg p-2", children: _jsxs(Space, { direction: "vertical", children: [_jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { icon: _jsx(ZoomInOutlined, {}), onClick: () => zoomIn() }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { icon: _jsx(ZoomOutOutlined, {}), onClick: () => zoomOut() }) }), _jsx(Tooltip, { title: "\u91CD\u7F6E\u89C6\u56FE", children: _jsx(Button, { onClick: () => resetTransform(), children: "100%" }) }), _jsxs("div", { className: "text-center text-xs text-gray-500", children: [Math.round(viewport.scale * 100), "%"] })] }) }), _jsx(TransformComponent, { wrapperStyle: { width: "100%", height: "100%", position: "relative" }, contentStyle: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsxs("div", { ref: canvasRef, "data-canvas": "true", className: `
+                    relative bg-white
+                    ${isDragOver ? "ring-4 ring-blue-400 ring-opacity-50" : ""}
+                    ${mode === "line-draw" ? "cursor-crosshair" : ""}
+                  `, style: {
+                                        width: 1920,
+                                        height: 1080,
+                                        flexShrink: 0,
+                                    }, onClick: handleCanvasClick, onMouseDown: handleCanvasMouseDown, onDoubleClick: handleCanvasDoubleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsxs("svg", { className: "absolute top-0 left-0 pointer-events-none", width: "1920", height: "1080", children: [_jsx("defs", { children: _jsx("pattern", { id: "grid", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: _jsx("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "#e8e8e8", strokeWidth: "1" }) }) }), _jsx("rect", { width: "1920", height: "1080", fill: "url(#grid)" })] }), _jsx("div", { className: "absolute left-1/2 top-1/2 w-4 h-4 -ml-2 -mt-2 border border-blue-300 rounded-full opacity-50" }), isDragOver && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: _jsx("div", { className: "bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg text-lg font-medium", children: "\u91CA\u653E\u4EE5\u6DFB\u52A0\u8282\u70B9" }) })), mode === "line-draw" && (_jsx("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-50 pointer-events-none", children: _jsxs("div", { className: "bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg text-sm font-medium flex items-center gap-2", children: [_jsx("span", { children: "\u7EBF\u6761\u7ED8\u5236\u6A21\u5F0F" }), _jsx("span", { className: "text-blue-200", children: "|" }), _jsx("span", { className: "text-blue-100", children: linePreview.isDrawing
+                                                            ? "点击绘制下一条线段，双击结束绘制"
+                                                            : "点击确定起点" }), _jsx("span", { className: "text-blue-200", children: "|" }), _jsx("span", { className: "text-blue-100 text-xs", children: "ESC \u53D6\u6D88" })] }) })), mode === "line-draw" && linePreview.isDrawing && linePreview.start && linePreview.end && (_jsxs("svg", { className: "absolute top-0 left-0 pointer-events-none", style: {
+                                                zIndex: 1000,
+                                                width: 1920,
+                                                height: 1080,
+                                                overflow: 'visible'
+                                            }, children: [_jsx("line", { x1: linePreview.start.x, y1: linePreview.start.y, x2: linePreview.end.x, y2: linePreview.end.y, stroke: "#1890ff", strokeWidth: 2, strokeDasharray: "5,5" }), _jsx("circle", { cx: linePreview.start.x, cy: linePreview.start.y, r: 4, fill: "#1890ff" }), _jsx("circle", { cx: linePreview.end.x, cy: linePreview.end.y, r: 4, fill: "#1890ff", stroke: "#fff", strokeWidth: 2 })] })), isBoxSelecting && selectionBox.start && selectionBox.end && (_jsx("div", { className: "absolute border-2 border-blue-500 bg-blue-500/10 pointer-events-none", style: {
+                                                left: Math.min(selectionBox.start.x, selectionBox.end.x),
+                                                top: Math.min(selectionBox.start.y, selectionBox.end.y),
+                                                width: Math.abs(selectionBox.end.x - selectionBox.start.x),
+                                                height: Math.abs(selectionBox.end.y - selectionBox.start.y),
+                                                zIndex: 999,
+                                            } })), nodes.map((node) => (_jsx(NodeRenderer, { node: node, isSelected: (selectedNodeId === node.id || selectedNodeIds.includes(node.id)) && mode !== "preview", onClick: () => {
+                                                if (isBoxSelecting)
+                                                    return;
+                                                selectNode(node.id);
+                                            }, onMouseDown: (e) => handleNodeMouseDown(e, node), data: mode === 'preview' ? previewData : testDataRef.current, onUpdateNode: updateNode, scale: transformRef.current?.state?.scale ?? 1 }, node.id))), nodes.length === 0 && !isDragOver && mode !== "line-draw" && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Empty, { description: _jsx("span", { children: "\u62D6\u62FD\u5DE6\u4FA7\u7269\u6599\u5E93\u4E2D\u7684\u7269\u6599\u5230\u753B\u5E03\u4EE5\u521B\u5EFA\u8282\u70B9" }) }) }))] }) })] })) }) }), _jsxs("div", { className: "h-8 bg-white border-t border-gray-200 flex items-center justify-between px-4 text-xs text-gray-500", children: [_jsxs("span", { children: ["\u8282\u70B9\u6570: ", nodes.length, " | \u9009\u4E2D\u8282\u70B9: ", selectedNodeId ? "是" : "否", " | \u9009\u4E2D\u72B6\u6001: ", selectedStatusId || "无"] }), _jsxs("span", { children: ["\u4F4D\u7F6E: (", Math.round(viewport.positionX), ",", " ", Math.round(viewport.positionY), ") | \u7F29\u653E:", " ", Math.round(viewport.scale * 100), "%"] })] }), _jsx(Modal, { title: "\u6570\u636E\u6A21\u62DF", open: dataModalVisible, onOk: handleApplyData, onCancel: () => setDataModalVisible(false), width: 600, okText: "\u5E94\u7528", cancelText: "\u53D6\u6D88", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("p", { className: "text-sm text-gray-500", children: ["\u8F93\u5165\u6D4B\u8BD5\u6570\u636E\uFF08JSON\u683C\u5F0F\uFF09\uFF0C\u7528\u4E8E\u72B6\u6001\u8868\u8FBE\u5F0F\u8BA1\u7B97\u3002\u72B6\u6001\u8868\u8FBE\u5F0F\u53EF\u4EE5\u4F7F\u7528", " ", _jsx("code", { children: "data" }), " \u53D8\u91CF\u8BBF\u95EE\u8FD9\u4E9B\u6570\u636E\u3002"] }), _jsx(Form, { layout: "vertical", children: _jsx(Form.Item, { label: "\u6D4B\u8BD5\u6570\u636E", validateStatus: dataError ? "error" : "", help: dataError, children: _jsx(TextArea, { value: dataInput, onChange: (e) => {
+                                        setDataInput(e.target.value);
+                                        setDataError(null);
+                                    }, rows: 10, placeholder: `{
+  "running": true,
+  "temperature": 25,
+  "pressure": 1.5
+}` }) }) }), _jsx(Collapse, { ghost: true, children: _jsx(Panel, { header: "\u4F7F\u7528\u793A\u4F8B", children: _jsxs("div", { className: "space-y-2 text-sm", children: [_jsx("p", { children: _jsx("strong", { children: "\u72B6\u6001A\uFF08\u8FD0\u884C\u4E2D\uFF09:" }) }), _jsx("code", { className: "bg-gray-100 px-2 py-1 rounded", children: "return data.running === true;" }), _jsx("p", { className: "mt-2", children: _jsx("strong", { children: "\u72B6\u6001B\uFF08\u9AD8\u6E29\u62A5\u8B66\uFF09:" }) }), _jsx("code", { className: "bg-gray-100 px-2 py-1 rounded", children: "return data.temperature > 80;" }), _jsx("p", { className: "mt-2", children: _jsx("strong", { children: "\u72B6\u6001C\uFF08\u9ED8\u8BA4\uFF09:" }) }), _jsx("code", { className: "bg-gray-100 px-2 py-1 rounded", children: "return true;" })] }) }, "examples") })] }) })] }));
+};