| | |
| | | line: { |
| | | stroke: '#A2B1C3', |
| | | strokeWidth: 2, |
| | | targetMarker: 'classic' |
| | | targetMarker: null, |
| | | } |
| | | }, |
| | | tools: { |
| | |
| | | this.shape = cell.shape |
| | | this.id = cell.id |
| | | console.log(this.shape, 'this.shape') |
| | | if (this.type === 'edge') { |
| | | //this.nodeType = cell.getData().nodeType |
| | | this.$refs.configEdge.loadData(cell) |
| | | } |
| | | // this.nodeOpt(this.id, this.globalGridAttr) |
| | | }) |
| | | //单击边节点 |
| | |
| | | this.showPorts(ports, false) |
| | | }) |
| | | |
| | | this.graph.on('edge:mouseenter', ({cell, view}) => { |
| | | // alert(123) |
| | | cell.addTools([ |
| | | { |
| | | name: 'source-arrowhead', |
| | | }, |
| | | { |
| | | name: 'target-arrowhead', |
| | | args: { |
| | | attrs: { |
| | | fill: 'red', |
| | | }, |
| | | }, |
| | | }, |
| | | ]) |
| | | cell.addTools( |
| | | [ |
| | | { |
| | | name: 'segments', |
| | | args: {snapRadius: 20, attrs: {fill: '#444'}} |
| | | } |
| | | ] |
| | | ) |
| | | }) |
| | | |
| | | this.graph.on('edge:mouseleave', ({cell}) => { |
| | | cell.removeTools() |
| | | }) |
| | | // this.graph.on('edge:mouseenter', ({cell, view}) => { |
| | | // // alert(123) |
| | | // cell.addTools([ |
| | | // { |
| | | // name: 'source-arrowhead', |
| | | // }, |
| | | // { |
| | | // name: 'target-arrowhead', |
| | | // args: { |
| | | // attrs: { |
| | | // fill: 'red', |
| | | // }, |
| | | // }, |
| | | // }, |
| | | // ]) |
| | | // cell.addTools( |
| | | // [ |
| | | // { |
| | | // name: 'segments', |
| | | // args: {snapRadius: 20, attrs: {fill: '#444'}} |
| | | // } |
| | | // ] |
| | | // ) |
| | | // }) |
| | | // |
| | | // this.graph.on('edge:mouseleave', ({cell}) => { |
| | | // cell.removeTools() |
| | | // }) |
| | | }, |
| | | showPorts(ports, show) { |
| | | for (let i = 0, len = ports.length; i < len; i = i + 1) { |
| | | ports[i].style.visibility = show ? 'visible' : 'hidden' |
| | | } |
| | | }, |
| | | // showPorts(ports, show) { |
| | | // for (let i = 0, len = ports.length; i < len; i = i + 1) { |
| | | // ports[i].style.visibility = show ? 'visible' : 'hidden' |
| | | // } |
| | | // }, |
| | | |
| | | async saveDiagram() { |
| | | console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') |
| | |
| | | } |
| | | |
| | | .x6-graph-scroller.x6-graph-scroller-pannable { |
| | | width: 100% !important; |
| | | width: 100% ; |
| | | } |
| | | |
| | | #stencil { |