| | |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | |
| | | |
| | | const leftConnectNode = this.createConnectNode(x, y + 87) |
| | | const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87) |
| | | const rightConnectNode = this.createBridgeNode(x + 530, y + 87) |
| | | |
| | | const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160) |
| | | const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160) |
| | | let edgeTop = this.graph.addEdge({ |
| | | source: {cell: leftTopDashedBox}, |
| | | target: {cell: rightTopDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | let edgeBottom = this.graph.addEdge({ |
| | | source: {cell: leftBottomDashedBox}, |
| | | target: {cell: rightBottomDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | |
| | | const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id) |
| | | |
| | | rightConnectNode.setData({startNodeId: leftConnectNode.id}) |
| | | leftConnectNode.setData({endNodeId: rightConnectNode.id}) |
| | |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['top', 'bottom'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | |
| | | let edgeTop = this.graph.addEdge({ |
| | | source: {cell: leftTopDashedBox}, |
| | | target: {cell: rightTopDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | let edgeBottom = this.graph.addEdge({ |
| | | source: {cell: leftBottomDashedBox}, |
| | | target: {cell: rightBottomDashedBox}, |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | |
| | | connectNode.position(x, y - connectNode.size().height / 2) |
| | | return connectNode |
| | | }, |
| | | createBridgeNode(x, y) { |
| | | const connectId = getUUID().toString() |
| | | createBridgeNode(x, y, connectId, edgeTopId, edgeBottomId) { |
| | | const dragNodeId = getUUID().toString() |
| | | let bridgeNode = this.graph.addNode({ |
| | | shape: 'image', |
| | | width: 30, |
| | | height: 30, |
| | | id: connectId, |
| | | id: dragNodeId, |
| | | data: { |
| | | isSelfCreated: true, |
| | | type: 'imageNodes', |
| | | endNodeId: dragNodeId, |
| | | startNodeId: connectId, |
| | | edgeTopId: edgeTopId, |
| | | edgeBottomId: edgeBottomId, |
| | | dataId: '', |
| | | nodeType: 'bridge', |
| | | nodeTypeExt: '', |