<template>
|
<div></div>
|
</template>
|
|
<script>
|
import 'gojs/release/go.js'
|
var $ = go.GraphObject.make
|
export default {
|
name: 'diagram',
|
props: ['modelData'], // accept model data as a parameter
|
mounted: function() {
|
var self = this
|
var myDiagram = $(go.Diagram, this.$el, {
|
// layout: $(go.TreeLayout, { angle: 0, arrangement: go.TreeLayout.ArrangementHorizontal }),
|
'undoManager.isEnabled': true,
|
// Model ChangedEvents get passed up to component users
|
ModelChanged: function(e) {
|
self.$emit('model-changed', e)
|
},
|
ChangedSelection: function(e) {
|
self.$emit('changed-selection', e)
|
}
|
})
|
|
myDiagram.nodeTemplate = $(
|
go.Node,
|
'Auto',
|
{
|
mouseEnter: this.mouseEnter,
|
mouseLeave: this.mouseLeave
|
},
|
{ desiredSize: new go.Size(65, 65) },
|
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(
|
go.Point.stringify
|
),
|
|
$(
|
go.Shape,
|
'circle',
|
{
|
fill: 'white',
|
strokeWidth: 2,
|
stroke: null,
|
portId: '',
|
fromLinkable: true,
|
toLinkable: true,
|
cursor: 'pointer',
|
name: 'SHAPE'
|
},
|
new go.Binding('fill', 'color')
|
),
|
$(
|
go.TextBlock,
|
{
|
margin: 8,
|
editable: false,
|
stroke: 'white',
|
name: 'TEXT',
|
width: 32,
|
height: 32,
|
textAlign: 'center',
|
verticalAlignment: go.Spot.Center
|
},
|
new go.Binding('text').makeTwoWay()
|
)
|
)
|
|
myDiagram.linkTemplate = $(
|
go.Link,
|
{ relinkableFrom: true, relinkableTo: true },
|
$(go.Shape, { stroke: 'gray', strokeWidth: 3 }),
|
$(go.Shape, {
|
toArrow: 'Triangle',
|
scale: 1,
|
fill: 'gray',
|
strokeWidth: 0
|
}),
|
$(
|
go.TextBlock,
|
{
|
editable: true,
|
segmentOffset: new go.Point(0, -20),
|
cursor: 'pointer'
|
},
|
new go.Binding('text', 'text')
|
)
|
)
|
|
this.diagram = myDiagram
|
|
this.updateModel(this.modelData)
|
|
this.diagram.allowCopy = false
|
this.diagram.allowClipboard = false
|
},
|
watch: {
|
modelData: function(val) {
|
this.updateModel(val)
|
}
|
},
|
methods: {
|
model: function() {
|
return this.diagram.model
|
},
|
updateModel: function(val) {
|
// No GoJS transaction permitted when replacing Diagram.model.
|
if (val instanceof go.Model) {
|
this.diagram.model = val
|
} else {
|
var m = new go.GraphLinksModel()
|
if (val) {
|
for (var p in val) {
|
m[p] = val[p]
|
}
|
}
|
this.diagram.model = m
|
}
|
},
|
updateDiagramFromData: function() {
|
this.diagram.startTransaction()
|
// This is very general but very inefficient.
|
// It would be better to modify the diagramData data by calling
|
// Model.setDataProperty or Model.addNodeData, et al.
|
this.diagram.updateAllRelationshipsFromData()
|
this.diagram.updateAllTargetBindings()
|
this.diagram.commitTransaction('updated')
|
},
|
mouseEnter: function(e, obj) {
|
var shape = obj.findObject('SHAPE')
|
shape.fill = '#6DAB80'
|
shape.stroke = '#A6E6A1'
|
var text = obj.findObject('TEXT')
|
text.stroke = 'black'
|
},
|
mouseLeave: function(e, obj) {
|
var shape = obj.findObject('SHAPE')
|
// Return the Shape's fill and stroke to the defaults
|
shape.fill = obj.data.color
|
shape.stroke = null
|
// Return the TextBlock's stroke to its default
|
var text = obj.findObject('TEXT')
|
text.stroke = 'white'
|
}
|
}
|
}
|
</script>
|
