| | |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "start", |
| | | "text": "", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "dashedBox", |
| | | "text": "", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | |
| | | "r": 4, |
| | | "magnet": true, |
| | | "stroke": "#5F95FF", |
| | | "strokeWidth": 1, |
| | | |
| | | "fill": "#fff", |
| | | "style": { |
| | | "visibility": "hidden" |
| | |
| | | "text": { |
| | | "refY": "100%", |
| | | "textVerticalAnchor": "top", |
| | | "text": "end", |
| | | "text": "", |
| | | "refY2": 4 |
| | | }, |
| | | "image": { |
| | |
| | | imagesList: [ |
| | | { |
| | | imgPath: 'switch', |
| | | imgName: 'switch', |
| | | imgName: '', |
| | | nodeType: 'switch', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | | imgId: '5', |
| | | data: {} |
| | | }, |
| | | {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, |
| | | { |
| | | imgPath: 'parallel', |
| | | imgName: 'parallel', |
| | | nodeType: 'parallel', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | | imgId: '9', |
| | | data: {} |
| | | }, |
| | | {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, |
| | | { |
| | | imgPath: 'parallel', |
| | | imgName: '', |
| | | nodeType: 'parallel', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | | imgId: '5', |
| | | data: {} |
| | | }, |
| | | { |
| | | imgPath: 'bridgeConnection', |
| | | imgName: 'bridgeConnection', |
| | | imgName: '', |
| | | nodeType: 'bridgeConnection', |
| | | imgWidth: 50, |
| | | imgHeight: 50, |
| | |
| | | createParallelBrach(x, y, dragNode) { |
| | | dragNode.position(x + 320, y - dragNode.size().height / 2) |
| | | const connectNode = this.createConnectNode(x + 50, y) |
| | | this.createBrach(dragNode,connectNode,x,y-50) |
| | | this.createBrach(dragNode,connectNode,x,y+50) |
| | | |
| | | return {newStartNode: connectNode, newEndNode: dragNode} |
| | | }, |
| | | createBrach(dragNode,connectNode,x,y){ |
| | | const dashedBox = this.createDashedBox(x + 150, y) |
| | | dragNode.setData({startNodeId: connectNode.id}) |
| | | |
| | |
| | | router: { |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | startDirections: ['top','bottom'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | }, |
| | | }, |
| | |
| | | name: 'manhattan', |
| | | args: { |
| | | startDirections: ['right'], // 从下方开始 |
| | | endDirections: ['left'], // 向左方结束 |
| | | endDirections: ['top','bottom'], // 向左方结束 |
| | | }, |
| | | }, |
| | | connector: {name: 'rounded'}, |
| | | zIndex: -1 |
| | | }) |
| | | return {newStartNode: connectNode, newEndNode: dragNode} |
| | | /* this.graph.addEdge({ |
| | | source: {cell: startNode, port: 'right1'}, |
| | | target: {cell: connectNode, port: 'left1'}, |
| | | router: {name: 'manhattan'}, |
| | | connector: {name: 'rounded'} |
| | | }) |
| | | this.graph.addEdge({ |
| | | source: {cell: dragNode, port: 'right1'}, |
| | | target: {cell: endNode, port: 'left1'}, |
| | | router: {name: 'manhattan'}, |
| | | connector: {name: 'rounded'} |
| | | })*/ |
| | | }, |
| | | createBridgeConnection(x, y, dragNode) { |
| | | console.log(x, y, 'leftX centerY') |
| | |
| | | |
| | | 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'], // 向左方结束 |
| | | }, |
| | | }, |
| | |
| | | 'xlink:href': '/modelImg/dashedBox.svg', |
| | | }, |
| | | text: { |
| | | text: 'dashedBox', |
| | | text: '', |
| | | fontSize: 14, |
| | | refX: 0.5, |
| | | refY: '100%', |
| | |
| | | 'xlink:href': '/modelImg/connect.svg', |
| | | }, |
| | | text: { |
| | | text: 'connect', |
| | | text: '', |
| | | fontSize: 14, |
| | | refX: 0.5, |
| | | refY: '100%', |
| | |
| | | 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: '', |