From f050b8228ce72ee6ee3b086fca7e991dceb033b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=9A=E8=BE=B0=E5=85=88=E7=94=9F?= <qichen111@126.com>
Date: Thu, 5 Dec 2024 21:54:23 +0800
Subject: [PATCH] 1

---
 .../Designer/components/Toolbar/index.tsx     | 108 ++++++++++++++----
 1 file changed, 84 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
index 148d7007..017cb30d 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Space, Button, Tooltip, Divider } from 'antd';
 import {
     ZoomInOutlined,
@@ -12,7 +12,11 @@ import {
     CopyOutlined,
     SnippetsOutlined,
 } from '@ant-design/icons';
-import { Graph } from '@antv/x6';
+import { Graph, Cell } from '@antv/x6';
+import { Selection } from '@antv/x6-plugin-selection';
+import { History } from '@antv/x6-plugin-history';
+import { Clipboard } from '@antv/x6-plugin-clipboard';
+import { Transform } from '@antv/x6-plugin-transform';
 import './index.less';
 
 interface ToolbarProps {
@@ -20,6 +24,39 @@ interface ToolbarProps {
 }
 
 const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
+    useEffect(() => {
+        if (graph) {
+            // 启用选择插件
+            graph.use(
+                new Selection({
+                    enabled: true,
+                    multiple: true,
+                    rubberband: true,
+                    movable: true,
+                    showNodeSelectionBox: true,
+                })
+            );
+            // 启用历史记录
+            graph.use(
+                new History({
+                    enabled: true,
+                })
+            );
+            // 启用剪贴板
+            graph.use(
+                new Clipboard({
+                    enabled: true,
+                })
+            );
+            // 启用变换
+            graph.use(
+                new Transform({
+                    enabled: true,
+                })
+            );
+        }
+    }, [graph]);
+
     // 缩放画布
     const zoom = (delta: number) => {
         if (!graph) return;
@@ -43,55 +80,77 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
     // 全选
     const selectAll = () => {
         if (!graph) return;
-        const nodes = graph.getNodes();
-        const edges = graph.getEdges();
-        graph.resetSelection();
-        graph.select(nodes);
-        graph.select(edges);
+        const cells = graph.getCells();
+        const selection = graph.getPlugin<Selection>('selection');
+        selection?.clean();
+        cells.forEach((cell: Cell) => selection?.select(cell));
     };
 
     // 删除选中
     const deleteSelected = () => {
         if (!graph) return;
-        const cells = graph.getSelectedCells();
-        graph.removeCells(cells);
+        const selection = graph.getPlugin<Selection>('selection');
+        const cells = selection?.getSelectedCells();
+        if (cells?.length) {
+            graph.removeCells(cells);
+        }
     };
 
     // 撤销
     const undo = () => {
         if (!graph) return;
-        if (graph.canUndo()) {
-            graph.undo();
+        const history = graph.getPlugin<History>('history');
+        if (history?.canUndo()) {
+            history.undo();
         }
     };
 
     // 重做
     const redo = () => {
         if (!graph) return;
-        if (graph.canRedo()) {
-            graph.redo();
+        const history = graph.getPlugin<History>('history');
+        if (history?.canRedo()) {
+            history.redo();
         }
     };
 
     // 复制
     const copy = () => {
         if (!graph) return;
-        const cells = graph.getSelectedCells();
-        if (cells.length > 0) {
-            graph.copy(cells);
+        const clipboard = graph.getPlugin<Clipboard>('clipboard');
+        const selection = graph.getPlugin<Selection>('selection');
+        const cells = selection?.getSelectedCells();
+        if (cells?.length) {
+            clipboard?.copy(cells);
         }
     };
 
     // 粘贴
     const paste = () => {
         if (!graph) return;
-        if (!graph.isClipboardEmpty()) {
-            const cells = graph.paste({ offset: 20 });
-            graph.cleanSelection();
-            graph.select(cells);
+        const clipboard = graph.getPlugin<Clipboard>('clipboard');
+        const selection = graph.getPlugin<Selection>('selection');
+        if (!clipboard?.isEmpty()) {
+            const cells = clipboard.paste();
+            selection?.clean();
+            cells.forEach((cell: Cell) => selection?.select(cell));
         }
     };
 
+    // 检查是否有选中的节点或边
+    const hasSelection = () => {
+        if (!graph) return false;
+        const selection = graph.getPlugin<Selection>('selection');
+        return (selection?.getSelectedCells().length || 0) > 0;
+    };
+
+    // 检查是否可以粘贴
+    const canPaste = () => {
+        if (!graph) return false;
+        const clipboard = graph.getPlugin<Clipboard>('clipboard');
+        return !clipboard?.isEmpty();
+    };
+
     return (
         <div className="workflow-toolbar">
             <Space split={<Divider type="vertical" />}>
@@ -118,6 +177,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                         <Button 
                             icon={<DeleteOutlined />} 
                             onClick={deleteSelected}
+                            disabled={!hasSelection()}
                             danger
                         />
                     </Tooltip>
@@ -128,14 +188,14 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                         <Button 
                             icon={<UndoOutlined />} 
                             onClick={undo}
-                            disabled={!graph?.canUndo()}
+                            disabled={!graph?.getPlugin<History>('history')?.canUndo()}
                         />
                     </Tooltip>
                     <Tooltip title="重做">
                         <Button 
                             icon={<RedoOutlined />} 
                             onClick={redo}
-                            disabled={!graph?.canRedo()}
+                            disabled={!graph?.getPlugin<History>('history')?.canRedo()}
                         />
                     </Tooltip>
                 </Space>
@@ -145,14 +205,14 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                         <Button 
                             icon={<CopyOutlined />} 
                             onClick={copy}
-                            disabled={!graph?.getSelectedCells().length}
+                            disabled={!hasSelection()}
                         />
                     </Tooltip>
                     <Tooltip title="粘贴">
                         <Button 
                             icon={<SnippetsOutlined />} 
                             onClick={paste}
-                            disabled={graph?.isClipboardEmpty()}
+                            disabled={!canPaste()}
                         />
                     </Tooltip>
                 </Space>