feat: 增加冒泡

Author: lhbxs

docs/xflow/api.md

@@ -202,3 +202,14 @@ Handle 配置继承自 React Flow 的 Handle 配置，用于控制节点连接
 | key | 节点菜单项的key | `string`  |        |
 | nodeId | 节点ID | `string`  |        |
 | sourceHandle | 连接头ID | `string`  |        |
+
+
+## 画布快捷键
+
+| 快捷键                | 功能描述         |
+|----------------------|------------------|
+| Ctrl/Cmd + C         | 复制选中节点      |
+| Ctrl/Cmd + V         | 粘贴节点          |
+| Delete/Backspace     | 删除选中节点或边  |
+| Ctrl/Cmd + Z         | 撤销              |
+| Ctrl/Cmd + Y         | 重做              |

docs/xflow/demo/nodeWidget/index.tsx

@@ -74,7 +74,7 @@ const HTTPNodeWidget = ({ data }) => {
 
 // 问题分类器节点
 const ClassifierNodeWidget = ({ data }) => {
-  const { categories, rules, defaultCategory } = data;
+  const { categories = [], rules, defaultCategory } = data;
   return (
     <Card
       size="small"
@@ -85,7 +85,7 @@ const ClassifierNodeWidget = ({ data }) => {
           <Typography.Text type="secondary" style={{ fontSize: 12 }}>分类</Typography.Text>
           <div style={{ marginTop: 4 }}>
             <Space wrap>
-              {categories.map(cat => (
+              {(categories || [])?.map(cat => (
                 <Tag
                   key={cat}
                   color={cat === defaultCategory ? 'purple' : 'default'}

docs/xflow/index.md

@@ -243,7 +243,7 @@ group:
     <div class="feature-name">画布操作</div>
     <div class="feature-content">
       <div class="feature-desc">
-        支持画布缩放、撤销/重置、节点添加、鼠标模式切换、节点整理、全屏展示等功能。提供丰富的画布操作工具，提升用户体验。
+        支持画布缩放、撤销/重置、节点添加、鼠标模式切换、节点整理、全屏展示、画布快捷键等功能。提供丰富的画布操作工具，提升用户体验。
       </div>
        <div class="feature-image node-show-img">
         <img src="https://img.alicdn.com/imgextra/i3/O1CN01Pcb1wd1RKe0hVF7nG_!!6000000002093-0-tps-3172-1234.jpg" alt="画布操作" />

packages/x-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrenders/xflow",
-  "version": "1.0.8-beta.4",
+  "version": "1.0.8-beta.6",
   "description": "一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品",
   "keywords": [
     "xflow"

packages/x-flow/src/XFlow.tsx

@@ -26,6 +26,7 @@ import { useEventEmitterContextContext } from './models/event-emitter';
 
 import CustomNodeComponent from './components/CustomNode';
 import { useStore, useStoreApi } from './hooks/useStore';
+import { useFlow } from './hooks/useFlow';
 
 import Operator from './operator';
 import FlowProps from './types';
@@ -89,6 +90,8 @@ const XFlow: FC<FlowProps> = memo(props => {
   const [openLogPanel, setOpenLogPanel] = useState<boolean>(true);
   const { onNodeClick, onEdgeClick, zoomOnScroll = true, panOnScroll = false, preventScrolling = true } = props;
   const nodeEditorRef = useRef(null);
+  const { copyNode, pasteNodeSimple } = useFlow();
+  const { undo, redo } = useTemporalStore();
 
   useEffect(() => {
     zoomTo(0.8);
@@ -101,12 +104,27 @@ const XFlow: FC<FlowProps> = memo(props => {
   useEventListener('keydown', e => {
     if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
-    if ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey))
+    if ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
-    if ((e.key === 'y' || e.key === 'Y') && (e.ctrlKey || e.metaKey))
+      undo();
+    }
+    if ((e.key === 'y' || e.key === 'Y') && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
+      redo();
+    }
     if ((e.key === 's' || e.key === 'S') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
+    if ((e.key === 'c' || e.key === 'C') && (e.ctrlKey || e.metaKey)) {
+      const selectedNode = nodes?.find(node => node.selected);
+      if (selectedNode) {
+        copyNode(selectedNode.id);
+        e.preventDefault();
+      }
+    }
+    else if ((e.key === 'v' || e.key === 'V') && (e.ctrlKey || e.metaKey)) {
+      pasteNodeSimple();
+      e.preventDefault();
+    }
   });
 
   useEventListener(
@@ -125,7 +143,8 @@ const XFlow: FC<FlowProps> = memo(props => {
     },
     {
       target: workflowContainerRef.current,
-      enable: isAddingNode,
+      // enable: isAddingNode,
+      enable: true, // 复制粘贴的时候需要监听鼠标位置
     }
   );
 
@@ -262,6 +281,9 @@ const XFlow: FC<FlowProps> = memo(props => {
               }
               setOpenLogPanel(true);
             }}
+            onDelete={(delId)=>{
+              setActiveNode(null);// 删除节点并关闭弹窗
+            }}
           />
         );
       },
@@ -366,7 +388,7 @@ const XFlow: FC<FlowProps> = memo(props => {
           }
         }}
         onNodesDelete={() => {
-          // setActiveNode(null);
+           setActiveNode(null);
         }}
         onNodeClick={(event, node) => {
           onNodeClick && onNodeClick(event, node);

packages/x-flow/src/components/CustomEdge/index.tsx

@@ -129,7 +129,8 @@ export default memo((edge: any) => {
                   {!hideEdgeDelBtn && !readOnly && (
                     <div
                       className="line-icon-box"
-                      onClick={() => {
+                      onClick={(ev: any) => {
+                        ev.stopPropagation();
                         if (readOnly) {
                           return;
                         }

packages/x-flow/src/components/CustomNode/index.tsx

@@ -20,7 +20,7 @@ import SourceHandle from './sourceHandle';
 import { useFlow } from '../../hooks/useFlow';
 
 export default memo((props: any) => {
-  const { id, type, data, layout, isConnectable, selected, onClick, status } =
+  const { id, type, data, layout, isConnectable, selected, onClick, status, onDelete } =
     props;
   const {
     widgets,
@@ -136,6 +136,7 @@ export default memo((props: any) => {
 
   const handleDeleteNode = useCallback(() => {
     deleteNode(id);
+    onDelete(id)
   }, [deleteNode, id]);
 
   const defaultAction = (e, sourceHandle) => {
@@ -160,6 +161,7 @@ export default memo((props: any) => {
     if (!e.key) {
       return;
     }
+
     const sourceHandle = e.item.props?.sourcehandle;
     if (isFunction(onMenuItemClick)) {
       const data: Record<string, string> = {
@@ -368,4 +370,4 @@ export default memo((props: any) => {
       }
     </div>
   );
-});
+});

packages/x-flow/src/hooks/useFlow.ts

@@ -33,7 +33,7 @@ export const useFlow = () => {
     screenToFlowPosition,
     flowToScreenPosition
   } = useReactFlow();
-  
+
   const { record } = useTemporalStore();
 
   const toObject = useMemoizedFn(() => {
@@ -123,21 +123,55 @@ export const useFlow = () => {
     }
   });
 
-  const deleteNode = useMemoizedFn((nodeId) => {
+  const pasteNodeSimple = useMemoizedFn(() => {
+    const mousePosition = storeApi.getState().mousePosition;
+    if (storeApi.getState().copyNodes.length > 0) {
+      const flowPos = screenToFlowPosition({
+        x: mousePosition.elementX,
+        y: mousePosition.elementY,
+      });
+      const copyNodes = storeApi.getState().copyNodes.map(node => ({
+        ...node,
+        position: {
+          x: flowPos.x,
+          y: flowPos.y,
+        },
+      }));
+      record(() => {
+        storeApi.getState().addNodes(copyNodes, false);
+        // 将清空剪贴板的操作也加入记录，使其可撤销
+        storeApi.setState({
+          copyNodes: [],
+        });
+      });
+    } else {
+      // message.warning('请先复制节点！');
+    }
+  });
+
+  const deleteNode = useMemoizedFn(nodeId => {
     record(() => {
       storeApi.setState({
-        edges: storeApi.getState().edges.filter((edge) => edge.source !== nodeId && edge.target !== nodeId),
+        edges: storeApi
+          .getState()
+          .edges.filter(
+            edge => edge.source !== nodeId && edge.target !== nodeId
+          ),
       });
-    })
+    });
     record(() => {
       storeApi.setState({
-        nodes: storeApi.getState().nodes.filter((node) => node.id !== nodeId),
+        nodes: storeApi.getState().nodes.filter(node => node.id !== nodeId),
       });
-    })
+    });
   });
 
   const runAutoLayout = useMemoizedFn(() => {
-    const newNodes: any = autoLayoutNodes(storeApi.getState().nodes, storeApi.getState().edges, storeApi.getState().layout);
+    const newNodes: any = autoLayoutNodes(
+      storeApi.getState().nodes,
+      storeApi.getState().edges,
+      storeApi.getState().layout
+    );
     setNodes(newNodes);
   });
 
@@ -166,8 +200,9 @@ export const useFlow = () => {
       runAutoLayout,
       copyNode,
       pasteNode,
-      deleteNode
+      pasteNodeSimple,
+      deleteNode,
     }),
     [instance]
   );
-}
+}

packages/x-flow/src/models/store.ts

@@ -125,7 +125,7 @@ const createStore = (initProps?: Partial<FlowProps>) => {
           };
         },
         onSave(pastState, currentState) {
-          console.log('onSave', pastState, currentState);
+          // console.log('onSave', pastState, currentState);
         },
       }
     ),