|  |  |  | 
|---|
|  |  |  | "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: '', | 
|---|