| | |
| | | name: "timeDiagramThumbnail", |
| | | data(){ |
| | | return{ |
| | | graph:null, |
| | | thumbnailGraph:null, |
| | | smallWidth:0, |
| | | targetNode:{}, |
| | | } |
| | |
| | | console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') |
| | | console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') |
| | | |
| | | this.graph = new Graph({ |
| | | this.thumbnailGraph = new Graph({ |
| | | container: document.getElementById('timeDiagramThumbnail'), |
| | | // width:250, |
| | | height: 150, |
| | |
| | | // autoResize: true, |
| | | // keyboard: true, |
| | | }) |
| | | this.graph.centerContent() |
| | | this.thumbnailGraph.centerContent() |
| | | Graph.registerNode( |
| | | 'custom-rect', |
| | | { |
| | |
| | | true, |
| | | ) |
| | | |
| | | this.graph.on('node:moving', ({ e, x, y, node, view }) => { |
| | | this.thumbnailGraph.on('node:moving', ({ e, x, y, node, view }) => { |
| | | this.$emit('getPoint',x,this.smallWidth) |
| | | }) |
| | | }, |
| | | getThumbnail(smallDiagramJson){ |
| | | this.graph.fromJSON(smallDiagramJson) |
| | | this.graph.centerContent() |
| | | this.smallWidth = this.graph.getContentBBox().width |
| | | const nodes = this.graph.getNodes() |
| | | this.thumbnailGraph.fromJSON(smallDiagramJson) |
| | | this.thumbnailGraph.centerContent() |
| | | this.smallWidth = this.thumbnailGraph.getContentBBox().width |
| | | const nodes = this.thumbnailGraph.getNodes() |
| | | for (const otherNode of nodes) { |
| | | if (otherNode.hasParent()){ |
| | | this.targetNode = otherNode |
| | | console.log(this.targetNode,'targetNode') |
| | | } |
| | | } |
| | | // console.log(this.graph.getContentBBox().width,'DiagramJson11') |
| | | // this.graph.zoomToFit() |
| | | // console.log(this.thumbnailGraph.getContentBBox().width,'DiagramJson11') |
| | | // this.thumbnailGraph.zoomToFit() |
| | | }, |
| | | getNodePointX(x,bigWidth){ |
| | | let pointX = Number((x / ( bigWidth /this.smallWidth)).toFixed(0)) |
| | |
| | | |
| | | }, |
| | | // setScroll(top){ |
| | | // this.graph.setScrollbarPosition(null, top) |
| | | // this.thumbnailGraph.setScrollbarPosition(null, top) |
| | | // } |
| | | }, |
| | | } |