feat: 快捷插入节点连线处理

byai · Apr 30, 2024 · 3fb919d · 3fb919d
1 parent e6c650c
commit 3fb919d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 17 deletions.
diff --git a/src/demo/App.tsx b/src/demo/App.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable no-console */
 import React from 'react';
 import * as Lib from '../lib';
-import { ITopologyNode, ITopologyData, IWrapperOptions } from '../lib/declare';
+import {
+    ITopologyNode, ITopologyData, IWrapperOptions, ITopologyLine
+} from '../lib/declare';
 import './index.less';
 
 const { Topology, topologyWrapper, TemplateWrapper } = Lib;
@@ -42,10 +44,20 @@ class Flow extends React.Component<{}, FlowState> {
                     branches: ['锚点1', '锚点2', '锚点3'],
                     position: {
                         x: 19629.79557800293,
-                        y: 19696.197512626648,
+                        y: 20050.197512626648,
                     },
                     // canDrag: false,
                 },
+                {
+                    id: '1111',
+                    name: '宽节点2',
+                    content: '快捷插入测试',
+                    branches: ['锚点1', '锚点2', '锚点3'],
+                    position: {
+                        x: 20000.79557800293,
+                        y: 19800.197512626648,
+                    },
+                },
             ],
         },
         readonly: false,
@@ -146,6 +158,20 @@ class Flow extends React.Component<{}, FlowState> {
         );
     }
 
+    /**
+     * 快捷插入节点连线处理
+     * 可根据id、newLines信息判断是否可以插入节点，返回oldLines表示不许节点插入
+     * @param id: 节点id
+     * @param oldLines: 原连线线数据
+     * @param newLines: 新连线数据
+     * @returns ITopologyLine[]
+     */
+    handleInsertNodeLines = (id: string, oldLines: ITopologyLine[], newLines: ITopologyLine[]) => {
+        console.log(id, oldLines);
+        // return oldLines; /** 不可插入 */
+        return newLines; /** 可插入 */
+    }
+
     render() {
         const {
             data, readonly, showBar, overlap,
@@ -187,6 +213,8 @@ class Flow extends React.Component<{}, FlowState> {
                         getInstance={
                             // eslint-disable-next-line
                             (ins: any) => { this.topology = ins; }}
+                        allowNodeInsertOnEdge
+                        handleInsertNodeLines={this.handleInsertNodeLines}
                     />
                 </div>
                 <div className="topology-templates" data-html2canvas-ignore="true">

diff --git a/src/lib/components/context.ts b/src/lib/components/context.ts
@@ -12,7 +12,6 @@ export const defaultContext: ITopologyContext = {
         nodes: [],
         lines: [],
     },
-    curClickNodeId: null,
 };
 
 const Context = React.createContext(defaultContext);

diff --git a/src/lib/components/node-wrapper/index.tsx b/src/lib/components/node-wrapper/index.tsx
@@ -222,7 +222,7 @@ class NodeWrapper extends React.Component<INodeWrapperProps> {
             onMouseLeave
         } = this.props;
 
-        const { selectedData, activeLine, curClickNodeId } = context;
+        const { selectedData, activeLine } = context;
         const isSelected = selectedData.nodes.find(item => item.id === data.id) !== undefined;
         return connectDragSource(
             <div
@@ -245,7 +245,7 @@ class NodeWrapper extends React.Component<INodeWrapperProps> {
                 <div
                     className={classnames({
                         "topology-node-content": true,
-                        "topology-node-selected": isSelected || curClickNodeId === id,
+                        "topology-node-selected": isSelected,
                         "topology-node-impact": activeLine && this.impactCheck()
                     })}
                 >

diff --git a/src/lib/components/topology/index.tsx b/src/lib/components/topology/index.tsx
@@ -125,6 +125,8 @@ export interface ITopologyProps {
     customToolboxList?: { wrapperProps?: HTMLAttributes<HTMLDivElement>; content: React.ReactNode; tooltip: string; }[];
     renderMinimapChild?: (params) => React.ReactNode;
     autoLayoutOption?: AutoLayoutOptions;
+    /** 快捷插入节点连线处理 */
+    handleInsertNodeLines?: (id: string, oldLines: ITopologyLine[], newLines: ITopologyLine[]) => ITopologyLine[]
 }
 
 export interface ITopologyState {
@@ -248,11 +250,6 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
             this.defaultScaleNum = this.scaleNum;
             return { scaleNum };
         });
-        this.$topology.addEventListener('click', this.handleContainerClick.bind(this), true);
-    }
-
-    handleContainerClick() {
-        this.setContext({ curClickNodeId: null })
     }
 
     getAutoClearSelectedFn() {
@@ -293,7 +290,6 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
 
         this.removeKeydownEvent();
         this.removeWheelEvent();
-        this.$topology.removeEventListener('click', this.handleContainerClick.bind(this), true);
     }
 
     onChange = (data: ITopologyData, type: ChangeType) => {
@@ -696,8 +692,7 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
         });
         this.setContext(
             {
-                selectedData: selectData,
-                curClickNodeId: node.id
+                selectedData: selectData
             },
             () => {
                 if (mode === SelectMode.BOX_SELECTION) {
@@ -1280,7 +1275,7 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
      * @returns
      */
     generateLinesByInsertNodeInLine = (dragId, targetPos) => {
-        const { data, lineColor, allowNodeInsertOnEdge = false } = this.props;
+        const { data, lineColor, allowNodeInsertOnEdge = false, handleInsertNodeLines } = this.props;
         let insertLines = [];
         let cloneLines = [...data.lines];
 
@@ -1313,7 +1308,9 @@ class Topology extends React.Component<ITopologyProps, ITopologyState> {
 
         }
 
-        return [...cloneLines, ...insertLines];
+        return handleInsertNodeLines 
+            ? handleInsertNodeLines(dragId, data.lines, [...cloneLines, ...insertLines]) 
+            : [...cloneLines, ...insertLines]
     }
 
     handleNodeDraw = (nodeInfoList: [string, IPosition][], childPosMap?: {

diff --git a/src/lib/declare.ts b/src/lib/declare.ts
@@ -83,8 +83,6 @@ export interface ITopologyContext {
         nodes: ITopologyNode[];
         lines: ITopologyLine[];
     };
-    /** 当前点击的节点Id */
-    curClickNodeId: string | null;
 }
 
 export interface ITopologyData {