From a9c9845f1ddc3c67b513b078918c9b037e5dbcc5 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:57:23 +0800
Subject: [PATCH] 1

---
 .../Designer/components/Toolbar/index.tsx     | 92 +++++++++++++++++--
 1 file changed, 84 insertions(+), 8 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 017cb30d..c8cd3895 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/components/Toolbar/index.tsx
@@ -17,6 +17,7 @@ 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 { Keyboard } from '@antv/x6-plugin-keyboard';
 import './index.less';
 
 interface ToolbarProps {
@@ -34,6 +35,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                     rubberband: true,
                     movable: true,
                     showNodeSelectionBox: true,
+                    showEdgeSelectionBox: true,
                 })
             );
             // 启用历史记录
@@ -51,9 +53,83 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
             // 启用变换
             graph.use(
                 new Transform({
-                    enabled: true,
+                    resizing: {
+                        enabled: true,
+                    },
+                    rotating: {
+                        enabled: true,
+                    },
                 })
             );
+            // 启用键盘
+            graph.use(new Keyboard({
+                enabled: true,
+            }));
+
+            // 启用画布交互
+            graph.enableSelection();
+            graph.enableRubberband();
+
+            const keyboard = graph.getPlugin<Keyboard>('keyboard');
+            if (keyboard) {
+                // 复制粘贴快捷键
+                keyboard.bindKey(['meta+c', 'ctrl+c'], () => {
+                    const selection = graph.getPlugin<Selection>('selection');
+                    const clipboard = graph.getPlugin<Clipboard>('clipboard');
+                    const cells = selection?.getSelectedCells();
+                    if (cells?.length) {
+                        clipboard?.copy(cells);
+                    }
+                    return false;
+                });
+
+                keyboard.bindKey(['meta+v', 'ctrl+v'], () => {
+                    const clipboard = graph.getPlugin<Clipboard>('clipboard');
+                    const selection = graph.getPlugin<Selection>('selection');
+                    if (clipboard && !clipboard.isEmpty()) {
+                        const cells = clipboard.paste();
+                        selection?.clean();
+                        cells.forEach((cell: Cell) => selection?.select(cell));
+                    }
+                    return false;
+                });
+
+                // 全选快捷键
+                keyboard.bindKey(['meta+a', 'ctrl+a'], () => {
+                    const selection = graph.getPlugin<Selection>('selection');
+                    const cells = graph.getCells();
+                    selection?.clean();
+                    cells.forEach((cell: Cell) => selection?.select(cell));
+                    return false;
+                });
+
+                // 删除快捷键
+                keyboard.bindKey(['backspace', 'delete'], () => {
+                    const selection = graph.getPlugin<Selection>('selection');
+                    const cells = selection?.getSelectedCells();
+                    if (cells?.length) {
+                        graph.removeCells(cells);
+                    }
+                    return false;
+                });
+
+                // 撤销重做快捷键
+                keyboard.bindKey(['meta+z', 'ctrl+z'], () => {
+                    const history = graph.getPlugin<History>('history');
+                    if (history?.canUndo()) {
+                        history.undo();
+                    }
+                    return false;
+                });
+
+                keyboard.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
+                    const history = graph.getPlugin<History>('history');
+                    if (history?.canRedo()) {
+                        history.redo();
+                    }
+                    return false;
+                });
+            }
         }
     }, [graph]);
 
@@ -130,7 +206,7 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
         if (!graph) return;
         const clipboard = graph.getPlugin<Clipboard>('clipboard');
         const selection = graph.getPlugin<Selection>('selection');
-        if (!clipboard?.isEmpty()) {
+        if (clipboard && !clipboard.isEmpty()) {
             const cells = clipboard.paste();
             selection?.clean();
             cells.forEach((cell: Cell) => selection?.select(cell));
@@ -170,10 +246,10 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                 </Space>
 
                 <Space>
-                    <Tooltip title="全选">
+                    <Tooltip title="全选 (Ctrl + A)">
                         <Button icon={<SelectOutlined />} onClick={selectAll} />
                     </Tooltip>
-                    <Tooltip title="删除">
+                    <Tooltip title="删除 (Delete)">
                         <Button 
                             icon={<DeleteOutlined />} 
                             onClick={deleteSelected}
@@ -184,14 +260,14 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                 </Space>
 
                 <Space>
-                    <Tooltip title="撤销">
+                    <Tooltip title="撤销 (Ctrl + Z)">
                         <Button 
                             icon={<UndoOutlined />} 
                             onClick={undo}
                             disabled={!graph?.getPlugin<History>('history')?.canUndo()}
                         />
                     </Tooltip>
-                    <Tooltip title="重做">
+                    <Tooltip title="重做 (Ctrl + Shift + Z)">
                         <Button 
                             icon={<RedoOutlined />} 
                             onClick={redo}
@@ -201,14 +277,14 @@ const Toolbar: React.FC<ToolbarProps> = ({ graph }) => {
                 </Space>
 
                 <Space>
-                    <Tooltip title="复制">
+                    <Tooltip title="复制 (Ctrl + C)">
                         <Button 
                             icon={<CopyOutlined />} 
                             onClick={copy}
                             disabled={!hasSelection()}
                         />
                     </Tooltip>
-                    <Tooltip title="粘贴">
+                    <Tooltip title="粘贴 (Ctrl + V)">
                         <Button 
                             icon={<SnippetsOutlined />} 
                             onClick={paste}