📝 feat: zoom switch, drag node demo

docs/guide/demos/customEdge/btn.less

@@ -11,3 +11,7 @@
 .edgebutton:hover {
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
 }
+
+.customEdge:hover path {
+  stroke: red;
+}

docs/guide/demos/customEdge/data.ts

@@ -25,5 +25,6 @@ export const edges = [
     source: 'a1',
     target: 'a2',
     type: 'buttonEdge',
+    className: 'customEdge',
   },
 ];

docs/guide/demos/flowEditor/css/dragAddNode.less

@@ -6,6 +6,7 @@
 
   .aside {
     width: 100%;
+    box-sizing: border-box;
     border-right: 1px solid #eee;
     padding: 15px 10px;
     font-size: 12px;
@@ -43,5 +44,4 @@
   .selectall {
     margin-top: 10px;
   }
-
 }

docs/guide/demos/flowEditor/dragAddNode.tsx

@@ -2,15 +2,26 @@
  * compact: true
  * defaultShowCode: true
  */
-import { FlowEditor, FlowEditorProvider, useFlowEditor } from '@ant-design/pro-flow';
+import {
+  BasicNode,
+  EditNode,
+  FlowEditor,
+  FlowEditorProvider,
+  useFlowEditor,
+} from '@ant-design/pro-flow';
 import { useCallback, useEffect } from 'react';
 import { StringRender } from './StringNode';
 import './css/dragAddNode.less';
 import Sidebar from './sidebar';
 
 let id = 0;
-const getId = () => `dndnode_${id++}`;
+const getId = () => `node_${id++}`;
 
+const nodeTypes = {
+  StringNode: StringRender,
+  BasicNode: BasicNode,
+  EditNode: EditNode,
+};
 const ProFlowDemo = () => {
   const editor = useFlowEditor();
 
@@ -22,11 +33,9 @@ const ProFlowDemo = () => {
   const onDrop = useCallback(
     (event) => {
       event.preventDefault();
+      if (!editor) return;
 
       const type = event.dataTransfer.getData('application/reactflow');
-
-      console.log(type);
-
       if (typeof type === 'undefined' || !type) {
         return;
       }
@@ -39,7 +48,7 @@ const ProFlowDemo = () => {
         id: getId(),
         type,
         position,
-        data: { label: `${type} node` },
+        data: { title: `${type} node` },
       };
 
       editor.addNode(newNode);
@@ -49,25 +58,23 @@ const ProFlowDemo = () => {
 
   useEffect(() => {
     editor.addNode({
-      id: 'a1',
+      id: getId(),
       type: 'StringNode',
       position: { x: 200, y: 100 },
       data: {
         title: 'String Node',
-        handles: {
-          source: 'a1-source',
-          target: 'a1-target',
-        },
       },
     });
   }, [editor]);
 
   return (
     <div className="container">
       <FlowEditor
-        nodeTypes={{ StringNode: StringRender }}
-        onDrop={onDrop}
-        onDragOver={onDragOver}
+        nodeTypes={nodeTypes}
+        flowProps={{
+          onDrop,
+          onDragOver,
+        }}
         miniMap={false}
         devtools={true}
       ></FlowEditor>

docs/guide/demos/flowEditor/sidebar.tsx

@@ -1,25 +1,28 @@
 export default () => {
   const onDragStart = (event, nodeType) => {
-    console.log(event);
     event.dataTransfer.setData('application/reactflow', nodeType);
     event.dataTransfer.effectAllowed = 'move';
   };
 
   return (
     <div className="aside">
       <div className="description">您可以将这些节点拖到上面的画布中</div>
-      <div className="dndnode input" onDragStart={(event) => onDragStart(event, 'input')} draggable>
-        Input Node
+      <div
+        className="dndnode input"
+        onDragStart={(event) => onDragStart(event, 'StringNode')}
+        draggable
+      >
+        String Node
       </div>
-      <div className="dndnode" onDragStart={(event) => onDragStart(event, 'default')} draggable>
-        Default Node
+      <div className="dndnode" onDragStart={(event) => onDragStart(event, 'BasicNode')} draggable>
+        BasicNode Node
       </div>
       <div
         className="dndnode output"
-        onDragStart={(event) => onDragStart(event, 'output')}
+        onDragStart={(event) => onDragStart(event, 'EditNode')}
         draggable
       >
-        Output Node
+        EditNode Node
       </div>
     </div>
   );

docs/guide/demos/flowViewIntro/autoFlow.tsx

@@ -9,7 +9,13 @@ import { edges, nodes } from './data/data2';
 function App() {
   return (
     <div className="container">
-      <FlowView nodes={nodes} edges={edges}></FlowView>
+      <FlowView
+        nodes={nodes}
+        edges={edges}
+        onEdgeClick={(e, edge) => {
+          console.log(edge);
+        }}
+      ></FlowView>
     </div>
   );
 }

docs/guide/flowEditor.zh-CN.md

@@ -31,9 +31,10 @@ const editor = useFlowEditor();
 <code src='./demos/flowEditor/proBase.tsx'></code>
 
 <!-- 下一期补充 -->
-<!-- ## 拖拽插入节点
 
-<code src='./demos/flowEditor/dragAddNode.tsx'></code> -->
+## 拖拽插入节点
+
+<code src='./demos/flowEditor/dragAddNode.tsx'></code>
 
 ## 可编辑节点
 

package.json

@@ -76,7 +76,7 @@
     "polished": "^4",
     "react-hotkeys-hook": "^4",
     "react-layout-kit": "^1",
-    "reactflow": "^11.8",
+    "reactflow": "^11.10.0",
     "use-merge-value": "^1",
     "yjs": "^13",
     "zustand": "^4.4.1",

src/FlowDrawer/index.less

@@ -0,0 +1,44 @@
+.dataFlowDrawer {
+  text-align: left;
+  color: #000;
+
+  :global {
+    .ant-drawer-title {
+      text-align: left;
+    }
+
+    /*
+     * 横向折叠面板
+     */
+    // 最外层
+    .dataFlowDrawerDraggablePanel.studio-draggable-panel {
+      height: 100%;
+      overflow: visible;
+      z-index: 19;
+      border-color: transparent;
+      border-left-width: 0 !important;
+    }
+
+    // 内容容器(伪类结合)
+    .studio-draggable-panel-left-handle:hover::before {
+      background-color: rgb(195, 195, 195) !important;
+      background: rgb(195, 195, 195) !important;
+    }
+
+    .studio-draggable-panel-left-handle:active::before {
+      background-color: rgb(195, 195, 195) !important;
+      background: rgb(195, 195, 195) !important;
+    }
+
+    .dataFlowDrawerDraggablePanel .studio-draggable-panel-toggle {
+      display: none;
+    }
+
+    /**
+    抽屉
+   */
+    .ant-drawer-wrapper-body .ant-drawer-body {
+      padding: 0;
+    }
+  }
+}

src/FlowDrawer/index.tsx

@@ -0,0 +1,78 @@
+import { DraggablePanel } from '@ant-design/pro-editor';
+import type { DrawerProps } from 'antd';
+import { Drawer } from 'antd';
+import { createStyles } from 'antd-style';
+import React from 'react';
+import './index.less';
+
+interface DataFlowDrawProps extends DrawerProps {
+  resize?: boolean;
+}
+// interface Size {
+//   width: string | number;
+//   height: string | number;
+// }
+// interface NumberSize {
+//   width: number;
+//   height: number;
+// }
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+  `,
+}));
+// const VisibleMinWidth = 300; // 画布最小可视宽度
+const FlowDrawer: React.FC<DataFlowDrawProps> = ({
+  resize = false,
+  open,
+  width,
+  mask = false,
+  style = {},
+  rootStyle = {},
+  className,
+  onClose = () => {},
+  children,
+  ...props
+}) => {
+  const { cx } = useStyles();
+
+  // const [dragedWith, setDragedWidth] = useState<string | number | undefined>(width);
+  // const onSizeDragging = (delta: NumberSize, size?: Size) => {
+  //   const reactFlowWidth = document.querySelector('.react-flow')?.offsetWidth; // 画布宽度
+  //   const drawerWidthNum = size?.width?.split('px')?.[0]
+  //     ? Number(size?.width?.split('px')?.[0])
+  //     : 0; // 侧边抽屉动态宽度
+  //   if (drawerWidthNum && drawerWidthNum <= reactFlowWidth - VisibleMinWidth) {
+  //     setDragedWidth(size?.width);
+  //   }
+  // };
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      width={width}
+      mask={mask}
+      className={className ? cx({ ['dataFlowDrawer']: true, className: true }) : 'dataFlowDrawer'}
+      getContainer={false}
+      style={{ ...style, padding: '0 0' }}
+      rootStyle={{ ...rootStyle, position: 'absolute' }}
+      {...props}
+    >
+      <DraggablePanel
+        isExpand={open}
+        placement={'right'}
+        resize={resize}
+        // size={{ width: dragedWith, height: '100%' }} // panel 尺寸受控模式
+        // onSizeDragging={onSizeDragging}
+        style={{ padding: '16px 12px' }}
+        className="dataFlowDrawerDraggablePanel"
+      >
+        {children}
+      </DraggablePanel>
+    </Drawer>
+  );
+};
+
+export default FlowDrawer;

src/FlowEditor/demos/index.less

@@ -0,0 +1,17 @@
+.container {
+  width: 100%;
+  height: 600px;
+  .ant-progress-text {
+    text-align: center !important;
+  }
+}
+
+.stringNode {
+  width: 150px;
+  height: 30px;
+  text-align: center;
+  background-color: white;
+  border: 1px solid aqua;
+  border-radius: 4px;
+  line-height: 30px;
+}

src/FlowEditor/demos/index.tsx

@@ -8,34 +8,14 @@ import {
   Position,
   useFlowEditor,
 } from '@ant-design/pro-flow';
-import { createStyles } from 'antd-style';
 import { FC, useEffect } from 'react';
-
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    width: 100%;
-    height: 600px;
-    .ant-progress-text {
-      text-align: center !important;
-    }
-  `,
-  stringNode: css`
-    width: 150px;
-    height: 30px;
-    text-align: center;
-    background-color: white;
-    border: 1px solid aqua;
-    border-radius: 4px;
-    line-height: 30px;
-  `,
-}));
+import './index.less';
 
 const StringRender: FC = (node: any) => {
   const { handles, id } = node;
-  const { styles } = useStyles();
 
   return (
-    <div className={styles.stringNode}>
+    <div className={'stringNode'}>
       <Handle
         id={typeof handles?.source === 'string' ? handles?.source : id}
         type={'target'}
@@ -51,9 +31,10 @@ const StringRender: FC = (node: any) => {
   );
 };
 
+const nodeTypes = { StringNode: StringRender };
+
 const ProFlowDemo = () => {
   const editor = useFlowEditor();
-  const { styles } = useStyles();
 
   useEffect(() => {
     editor.addNode({
@@ -68,8 +49,8 @@ const ProFlowDemo = () => {
   }, [editor]);
 
   return (
-    <div className={styles.container}>
-      <FlowEditor nodeTypes={{ StringNode: StringRender }} />
+    <div className={'container'}>
+      <FlowEditor nodeTypes={nodeTypes} />
     </div>
   );
 };