diff --git a/src/demo/App.tsx b/src/demo/App.tsx
index c5b50278..d6f76941 100755
--- 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}
/>
diff --git a/src/lib/components/context.ts b/src/lib/components/context.ts
index 93b431b0..36f43306 100644
--- 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
index a5f9c5ee..c9de4752 100644
--- 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
{
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(
{
diff --git a/src/lib/components/topology/index.tsx b/src/lib/components/topology/index.tsx
index ce080cac..0960d81d 100644
--- a/src/lib/components/topology/index.tsx
+++ b/src/lib/components/topology/index.tsx
@@ -125,6 +125,8 @@ export interface ITopologyProps {
customToolboxList?: { wrapperProps?: HTMLAttributes; 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 {
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 {
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 {
});
this.setContext(
{
- selectedData: selectData,
- curClickNodeId: node.id
+ selectedData: selectData
},
() => {
if (mode === SelectMode.BOX_SELECTION) {
@@ -1280,7 +1275,7 @@ class Topology extends React.Component {
* @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 {
}
- 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
index 7687b08b..36805114 100644
--- 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 {