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 {