vue中使用gojs/jointjs的示例代码

var Link = joint.dia.Link.define('default.Link',{
attrs: {
'.connection': {
stroke: '#2F4F4F',//线
strokeWidth: 1,pointerEvents: 'none',targetMarker: {//箭头
type: 'path',fill: '#2F4F4F',//填充颜色
stroke: '#2F4F4F',//边框颜色
strokeWidth:'1',d: 'M 2 -2 0 0 2 2 z'//形状
}
}
},connector: {
name: 'rounded'
},z: -1,weight: 1,minLen: 1,labelPosition: 'c',labelOffset: 10,labelSize: {
width: 50,height: 30
},labels: [{
markup: '',attrs: {
text: {
fill: 'gray',refY: 5,refY2: '-50%',fontSize: 10,cursor: 'pointer'
},// rect: {
// fill: 'lightgray',// stroke: 'gray',// strokeWidth: 2,// refWidth: '100%',// refHeight: '100%',// refX: '-50%',// refY: '-50%',// rx: 5,// ry: 5
// }
},size: {
width: 50,height: 10
}
}]

},{
markup: '<path class="connection"/><g class="labels"/>',connect: function(sourceId,targetId) {
return this.set({
source: { id: sourceId },target: { id: targetId }
});
},setLabelText: function(text) {
return this.prop('labels/0/attrs/text/text',text || '');
}
});

var ElementView = joint.dia.ElementView.extend({
pointerdown: function () {

// this._click = true;
// joint.dia.ElementView.prototype.pointerdown.apply(this,arguments);
},pointermove: function(evt,x,y) {
// this._click = false;
// joint.dia.ElementView.prototype.pointermove.apply(this,pointerup: function (evt,y) {
// if (this._click) {
// // triggers an event on the paper and the element itself
// this.notify('cell:click',evt,y);
// } else {
// joint.dia.ElementView.prototype.pointerup.apply(this,arguments);
// }
}
});
var LinkView = joint.dia.LinkView.extend({
addVertex: function(evt,y) {},removeVertex: function(endType) {},pointerdown:function(evt,y) {}
});

export default {
data(){
return{
graph:null,paper:null,show:true
}
},props:{
graphData:{
type:Object,required:true
}
},mounted(){
let w = document.getElementById('container').width ;
this.graph = new joint.dia.Graph;
this.paper = new joint.dia.Paper({
el: document.getElementById('myholder'),width: w,height: 250,model: this.graph,elementView: ElementView,//禁止拖拽
linkView:LinkView//禁止拖拽
});
this.layout();
},methods:{
getWidthandHeight(label){
let maxLineLength = _.max(label.split('n'),function(l) { return l.length; }).length,// Compute width/height of the rectangle based on the number
// of lines in the label and the letter size. 0.6 letterSize is
// an approximation of the monospace font letter width.
letterSize = 8,width = 2 (letterSize (0.6 maxLineLength + 1)),height = 2 ((label.split('n').length + 1) letterSize);
return {width,height}
},getLayoutOptions() {
return {
// setVertices: false,// setLabels: false,// ranker:'longer-path',//'tight-tree'/'network-simplex',rankDir: 'LR',align: 'UR',rankSep:0,edgeSep:0,nodeSep:0,};
},buildGraphFromAdjacencyList(adjacencyList) {
let elements = [],links = [],obj,size,node;
const _this=this;
const map=this.graphData.node;

Object.keys(adjacencyList).forEach(function(parentId) {
// Add element

obj =map[parentId];
size = _this.getWidthandHeight(obj.text);
node =new Shape({id:parentId,size:size}).setText(obj.text);

if(obj.category&&obj.category.shapeStyle){
 node = node.setShapeStyle(obj.category.shapeStyle);
}
if(obj.category&&obj.category.textStyle){
 node = node.setTextStyle(obj.category.textStyle);
}

elements.push(node);

// Add links
adjacencyList[parentId].forEach(function(childId) {
 links.push(
  new Link().connect(parentId,childId)// .setLabelText(parentLabel + '-' + childLabel)           
 );
});

});

return elements.concat(links);
},layout() {
let cells = this.buildGraphFromAdjacencyList(this.graphData.edge);
this.graph.resetCells(cells);
joint.layout.DirectedGraph.layout(this.graph,this.getLayoutOptions());
},}
}