feat:两个节点连线之前的插入按钮配置化

Author: 昔梦

docs/xflow/api.md

@@ -16,6 +16,7 @@ title: API
 | nodeSelector     | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`                                             |
 | iconFontUrl      | iconfont url，用于配置图标渲染       | `String`                                                    |        |
 | configPanelWidth | 统一设置配置面板宽度                 | `number`                                                    | 400    |
+| hideLineInsertBtn |是否隐藏两个节点之间，连线上的增加节点按钮               | `boolean`                                                    |  false   |
 
 
 ### TNodeGroup

docs/xflow/demo/nodeSetting/index.tsx

@@ -215,6 +215,7 @@ export default () => {
         }}
         layout="LR"
         configPanelWidth={410}
+        hideLineInsertBtn={true}
       />
     </div>
   );

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

@@ -6,12 +6,13 @@ import {
   useReactFlow,
 } from '@xyflow/react';
 import produce from 'immer';
-import React, { memo, useState } from 'react';
+import React, { memo, useContext, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
 import { uuid } from '../../utils';
 import NodeSelectPopover from '../NodesPopover';
 import './index.less';
+import { ConfigContext } from '../../models/context';
 
 export default memo((edge: any) => {
   const { id, selected, sourceX, sourceY, targetX, targetY, source, target } =
@@ -26,6 +27,9 @@ export default memo((edge: any) => {
     targetY,
   });
 
+  const { hideLineInsertBtn } =
+    useContext(ConfigContext);
+
   const {
     nodes,
     edges,
@@ -45,7 +49,7 @@ export default memo((edge: any) => {
       onEdgesChange: state.onEdgesChange,
     }),
     shallow
-  );
+    );
 
   const handleAddNode = (data: any) => {
     const { screenToFlowPosition } = reactflow;
@@ -122,11 +126,13 @@ export default memo((edge: any) => {
                   >
                     <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>
+                  {
+                    !hideLineInsertBtn && <NodeSelectPopover placement="right" addNode={handleAddNode}>
+                      <div className="line-icon-box">
+                        <PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
+                      </div>
+                    </NodeSelectPopover>
+                  }
                 </div>
               </div>
             </EdgeLabelRenderer>

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

@@ -27,7 +27,6 @@ export default memo((props: any) => {
     shallow
   );
   const isSwitchNode = type === 'Switch';
-
   // 增加节点并进行联系
   const handleAddNode = (data: any) => {
     const { screenToFlowPosition } = reactflow;

packages/x-flow/src/withProvider.tsx

@@ -27,6 +27,7 @@ export default function withProvider<T>(
       initialValues,
       iconFontUrl,
       configPanelWidth,
+      hideLineInsertBtn,
       ...restProps
     } = props;
 
@@ -51,6 +52,7 @@ export default function withProvider<T>(
       settingMap,
       iconFontUrl,
       configPanelWidth,
+      hideLineInsertBtn,
       widgets: {
         ...defaultWidgets,
         ...widgets,