feat: 迭代开发

zhanbo.lh · zhanbo.lh · commit 7c0beb155a92 · 2024-11-18T03:19:34.000+08:00
diff --git a/docs/xflow/index.md b/docs/xflow/index.md
@@ -50,15 +50,15 @@ import data from './data/basic';
 const nodeMenus = [
   {
     title: 'Input',
-    type: 'Input',
+    type: 'Start',
     icon: {
       type: 'icon-start',
       bgColor: '#17B26A',
     }
   },
   {
     title: 'Output',
-    type: 'Output',
+    type: 'End',
     icon: {
       type: 'icon-end',
       bgColor: '#F79009',
@@ -160,11 +160,15 @@ export default () => {
     }
   ];
 
+  const edges = [
+    { source: '1', target: '2', id: '234123' }
+  ]
+
   return (
     <div style={{ height: '600px' }}>
       <XFlow 
         nodes={nodes}
-        edges={[]}
+        edges={edges}
         nodeMenus={nodeMenus}
       />
     </div>
diff --git a/packages/x-flow/src/components/CustomEdge/index.less b/packages/x-flow/src/components/CustomEdge/index.less
@@ -11,24 +11,14 @@
     align-items: center;
   }
 
-  .icon-box {
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
+  .line-icon-box {
+    width: 16px;
+    height: 16px;
+    border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #c6c6c6;
-    visibility: hidden;
-  }
-
-  .icon-box:hover {
     background: #296dff;
-  }
-}
-
-.custom-edge-line:hover {
-  .icon-box {
     visibility: visible;
   }
 }
diff --git a/packages/x-flow/src/components/CustomEdge/index.tsx b/packages/x-flow/src/components/CustomEdge/index.tsx
@@ -1,32 +1,27 @@
-import React, { memo, useContext } from 'react';
+import React, { memo, useState } from 'react';
 import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
 import { BezierEdge, EdgeLabelRenderer, getBezierPath, useReactFlow } from '@xyflow/react';
 import { useShallow } from 'zustand/react/shallow';
 import produce from 'immer';
 import { uuid } from '../../core/utils';
 import useStore from '../../core/store';
-import { ConfigContext } from '../../models/context';
 import NodeSelectPopover from '../NodeSelectPopover';
 import './index.less';
 
 export default memo((edge: any) => {
   const {
-    label,
     id,
+    selected,
     sourceX,
     sourceY,
     targetX,
     targetY,
-    data,
-    selected,
     source,
     target,
-    layout,
   } = edge;
 
-  const configCtx: any = useContext(ConfigContext);
-
   const reactflow = useReactFlow();
+  const [isHovered, setIsHovered] = useState(false);
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -36,29 +31,58 @@ export default memo((edge: any) => {
 
   const {
     nodes,
+    edges,
     setNodes,
+    setEdges,
     mousePosition,
+    onEdgesChange,
+    layout,
   } = useStore(
     useShallow((state: any) => ({
+      layout: state.layout,
       nodes: state.nodes,
+      edges: state.edges,
       mousePosition: state.mousePosition,
-      setNodes: state.setNodes
+      setNodes: state.setNodes,
+      setEdges: state.setEdges,
+      onEdgesChange: state.onEdgesChange
     }))
   );
 
   const handleAddNode = (data: any) => {
     const { screenToFlowPosition } = reactflow;
     const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY });
 
+
+    const targetId = uuid();
     const newNodes = produce(nodes, (draft: any) => {
       draft.push({
-        id: uuid(),
+        id: targetId,
         type: 'custom',
         data,
         position: { x, y }
       });
     });
+
+    const newEdges = produce(edges, (draft: any) => {
+      draft.push(...[
+        {
+          id: uuid(),
+          source,
+          target: targetId,
+        },
+        {
+          id: uuid(),
+          source: targetId,
+          target,
+        }
+    ])
+
+    });
+   
     setNodes(newNodes);
+    setEdges(newEdges);
+    onEdgesChange([{ id, type: 'remove' }]);
   };
 
   let edgeExtra: any = {
@@ -73,32 +97,36 @@ export default memo((edge: any) => {
   }
   
   return (
-    <BezierEdge
-      {...edge}
-      {...edgeExtra}
-      selected={false}
-      edgePath={edgePath}
-      label={
-        <EdgeLabelRenderer>
-          <div
-            className='custom-edge-line'
-            style={{
-              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
-            }}
-          >
-            <div className='line-content'>
-              <div className='icon-box'>
-                <CloseOutlined style={{ color: '#fff', fontSize: 12 }} />
+    <g
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <BezierEdge
+        {...edge}
+        {...edgeExtra}
+        edgePath={edgePath}
+        label={
+          isHovered && <EdgeLabelRenderer>
+            <div
+              className='custom-edge-line'
+              style={{
+                transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              }}
+            >
+              <div className='line-content'>
+                <div className='line-icon-box' onClick={() => onEdgesChange([{ id, type: 'remove' }])}>
+                    <CloseOutlined style={{ color: '#fff', fontSize: 10 }} />
+                  </div>
+                <NodeSelectPopover placement='right' addNode={handleAddNode}>
+                  <div className='line-icon-box'>
+                    <PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
+                  </div>
+                </NodeSelectPopover>
               </div>
-              <NodeSelectPopover placement='right' addNode={handleAddNode}>
-                <div className='icon-box'>
-                  <PlusOutlined style={{ color: '#fff', fontSize: 12 }} />
-                </div>
-              </NodeSelectPopover>
             </div>
-          </div>
-        </EdgeLabelRenderer>
-      }
-    />
+          </EdgeLabelRenderer>
+        }
+      />
+    </g>
   );
 })
diff --git a/packages/x-flow/src/components/CustomNode/index.tsx b/packages/x-flow/src/components/CustomNode/index.tsx
@@ -2,9 +2,13 @@ import React, { memo, useContext, useState } from 'react';
 import { Tooltip } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
-import { Handle, Position } from '@xyflow/react';
-import { capitalize } from '../../core/utils';
+import produce from 'immer';
+import { useShallow } from 'zustand/react/shallow';
+import { Handle, Position, useReactFlow } from '@xyflow/react';
+import useStore from '../../core/store';
+import { capitalize, uuid } from '../../core/utils';
 import { ConfigContext } from '../../models/context';
+import NodeSelectPopover from '../NodeSelectPopover';
 import './index.less';
 
 export default memo((props: any) => {
@@ -13,6 +17,49 @@ export default memo((props: any) => {
   const NodeWidget = configCtx?.nodeWidgets[`${capitalize(type)}Node`];
 
   const [isHovered, setIsHovered] = useState(false);
+  const reactflow = useReactFlow();
+  const {
+    edges,
+    nodes,
+    setNodes,
+    setEdges,
+    mousePosition,
+  } = useStore(
+    useShallow((state: any) => ({
+      nodes: state.nodes,
+      edges: state.edges,
+      mousePosition: state.mousePosition,
+      setNodes: state.setNodes,
+      setEdges: state.setEdges,
+      onEdgesChange: state.onEdgesChange
+    }))
+  );
+
+  // 增加节点并进行联系
+  const handleAddNode = (data: any) => {
+    const { screenToFlowPosition } = reactflow;
+    const { x, y } = screenToFlowPosition({ x: mousePosition.pageX + 100, y: mousePosition.pageY  + 100 });
+    const targetId = uuid();
+
+    const newNodes = produce(nodes, (draft: any) => {
+      draft.push({
+        id: targetId,
+        type: 'custom',
+        data,
+        position: { x, y }
+      });
+    });
+    const newEdges = produce(edges, (draft: any) => {
+      draft.push({
+        id: uuid(),
+        source: id,
+        target: targetId,
+      })
+    });
+    setNodes(newNodes);
+    setEdges(newEdges);
+  };
+
 
   let targetPosition = Position.Left;
   let sourcePosition = Position.Right;
@@ -30,7 +77,7 @@ export default memo((props: any) => {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {capitalize(type)!== 'Start' && (
+      { (
         <Handle
           type='target'
           position={targetPosition}
@@ -43,25 +90,27 @@ export default memo((props: any) => {
         data={data} 
         onClick={() => onClick(data)}
       />
-      {capitalize(type) !== 'End' && (
+      {(
         <Handle
           type='source'
           position={sourcePosition}
           isConnectable={isConnectable}
         >
           {(selected || isHovered) && (
             <div className='xflow-node-add-box'>
-              <Tooltip 
-                title='点击添加节点'
-                arrow={false}
-                overlayInnerStyle={{
-                  background: '#fff',
-                  color: '#354052',
-                  fontSize: '12px'
-                }}
-                >
-                <PlusOutlined style={{ color: '#fff', fontSize: 10 }}/>
-              </Tooltip>
+               <NodeSelectPopover placement='right' addNode={handleAddNode}>
+                  <Tooltip 
+                    title='点击添加节点'
+                    arrow={false}
+                    overlayInnerStyle={{
+                      background: '#fff',
+                      color: '#354052',
+                      fontSize: '12px'
+                    }}
+                    >
+                      <PlusOutlined style={{ color: '#fff', fontSize: 10 }}/>
+                  </Tooltip>
+                </NodeSelectPopover>
             </div>
           )}
         </Handle>
diff --git a/packages/x-flow/src/components/NodeSelectPopover/index.tsx b/packages/x-flow/src/components/NodeSelectPopover/index.tsx
@@ -2,7 +2,6 @@
 import React, { useCallback, useState, useRef } from 'react';
 import { Popover, Input, Tabs } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import { useEventListener } from 'ahooks';
 import { useShallow } from 'zustand/react/shallow';
 import { useClickAway } from 'ahooks';
 import { useSet } from '../../core/utils/hooks';
@@ -154,14 +153,14 @@ export default (props: any) => {
 
   const handAddNode = useCallback<any>((ev: any, type: any) => {
     ev.stopPropagation(); // 阻止事件冒泡
-    addNode({ node: type });
+    addNode({ _nodeType: type });
     setOpen(false);
   }, []);
 
   return (
     <Popover
       content={<SelectNodeView onCreate={handAddNode} nodeMenus={nodeMenus} containerRef={ref}/>} 
-      zIndex={1000}
+      zIndex={2000}
       trigger='click'
       arrow={false}
       open={open}
diff --git a/packages/x-flow/src/core/index.tsx b/packages/x-flow/src/core/index.tsx
