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 {