Hi, I’m using Vue with GoJS
I’m trying to save the model using Model.toJson() to Session Storage and load them on refresh with Model.fromJson(). However I tested the this out and the diagram drawn differently and become messed up. I already use .makeTwoWay on both node and link.
Please find the code references below
Save Function
function save(){
console.log(diagram.model.toJson());
sessionStorage.setItem("model",diagram.model.toJson());
diagram.isModified = false;
}
Link Template:
const linkTemplateSimple = $(go.Link,{
adjusting: go.Link.Stretch,
reshapable: true,
resegmentable: true,
routing: go.Link.Orthogonal,
corner: 10,
fromEndSegmentLength:20,
toEndSegmentLength:12,
fromSpot: go.Spot.None,
toSpot: go.Spot.None,
},
// Line preset
$(go.Shape, {
contextMenu: linkContextMenuTemplate
},
new go.Binding("stroke", "isHighlighted", function(h)
{
return h ? mappings[currentTheme].highlight : mappings[currentTheme].fill;
}).ofObject(),
new go.Binding("strokeWidth", "isHighlighted", function(h)
{
return h ? 2 : 1;
}).ofObject()
),
// Arrow preset
$(go.Shape, {
toArrow: "Standard",
},
new go.Binding("stroke", "isHighlighted", function(h)
{
return h ? mappings[currentTheme].highlight : mappings[currentTheme].fill;
}).ofObject(),
new go.Binding("fill", "isHighlighted", function(h)
{
return h ? mappings[currentTheme].highlight : mappings[currentTheme].fill;
}).ofObject(),
),
// Line label preset
$(go.Panel, "Auto",
$(go.TextBlock, new go.Binding("text","type"), {
stroke: mappings[this.themeConfig].text,
font: "small-caps 14px Sans-Serif",
background: mappings[this.themeConfig].text_background,
segmentOffset: new go.Point(0, 0),
textAlign: "center",
contextMenu: linkContextMenuTemplate,
segmentIndex: 1,
},),
),
new go.Binding("points").makeTwoWay(),
);
Node Template
const nodeTemplateSimple =
$(go.Node, "Auto",
{
fromSpot: go.Spot.None,
toSpot: go.Spot.None,
avoidable: true,
movable: false,
layerName: "Foreground",
contextMenu: nodeContextMenuTemplate,
click: highlight,
},
$(go.Panel, "Auto",
// Container Panel
$(go.Shape, {stroke: mappings[this.themeConfig].fill},
// Binding corresponding to dataNode data
// stroke and strokeWidth changes when highlighted
new go.Binding("figure", "shape"),
new go.Binding("fill", "color"),
new go.Binding("stroke", "isHighlighted", function(h)
{
return h ? mappings[currentTheme].highlight : mappings[currentTheme].fill;
}).ofObject(),
new go.Binding("strokeWidth", "isHighlighted", function(h)
{
return h ? 4 : 1;
}).ofObject()),
// Info Panel
// Render name, icon, and canonical_name data from dataNode
$(go.Panel, "Vertical", { padding: 20 },
$(go.TextBlock, new go.Binding("text", "name"), { font: '12pt sans-serif' }),
$(go.Picture, new go.Binding("source","icon"),{desiredSize: new go.Size(50,50)}),
$(go.TextBlock, new go.Binding("text", "canonical_name"), { font: '12pt sans-serif' }),
),
),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
);
Group Template
/**
* Group simple template - Used for application level grouping
*/
const groupTemplateSimple = $(go.Group, "Auto", {
contextMenu: groupContextMenuTemplate,
avoidable: true,
movable: false,
layout: $(go.LayeredDigraphLayout,
{
aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
linkSpacing: 50,
layerSpacing: 150,
layeringOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
direction:180,
setsPortSpots: false,
columnSpacing: 50,
}
),
subGraphExpandedChanged: function(group){
if(group.isSubGraphExpanded){
group.layerName = 'Background';
}else{
group.layerName = 'Foreground';
}
},
click: highlight,
},
new go.Binding("isSubGraphExpanded", "expanded"),
$(go.Shape, "Rectangle",
{ stroke: mappings[this.themeConfig].fill, strokeWidth: 1, strokeCap: 'round', strokeDashArray: [5,10] },new go.Binding("fill", "color")),
$(go.Panel, "Vertical",
{ defaultAlignment: go.Spot.TopLeft, margin: 50},
$(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.Center},
$("SubGraphExpanderButton"),
$(go.TextBlock, { font: "small-caps 25px Sans-Serif", margin: 4, stroke: mappings[this.themeConfig].groupText }, new go.Binding("text", "key")),
),
$(go.Placeholder, { padding: 50 }),
),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
)
/**
* Group structural template - Used for pillar / business context level grouping
*/
const groupTemplateStructural = $(go.Group, "Auto", {
avoidable: true,
movable: false,
layout: $(go.LayeredDigraphLayout,
{
aggressiveOption: go.LayeredDigraphLayout.AggressiveMore,
linkSpacing: 100,
layerSpacing: 100,
direction:180,
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSink,
setsPortSpots: false,
columnSpacing: 50,
},),
// If not expanded, put node on the foreground, else put on the background
// Prevent links to overlap the nodes
subGraphExpandedChanged: function(group){
if(group.isSubGraphExpanded){
group.layerName = 'Background';
}else{
group.layerName = 'Foreground';
}
},
click: highlight,
},
new go.Binding("isSubGraphExpanded", "expanded"),
$(go.Shape,
new go.Binding("figure", "shape"),
{ stroke: mappings[this.themeConfig].fill, fill: null, strokeWidth: 1, strokeCap: 'round', strokeDashArray: [5,10] }),
$(go.Panel, "Vertical",
{ defaultAlignment: go.Spot.Left, padding: 10},
$(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.TopLeft },
$("SubGraphExpanderButton"),
$(go.TextBlock, {stroke: mappings[this.themeConfig].fill, font: '14pt sans-serif', margin: new go.Margin(0,0,0,10) }, new go.Binding("text", "name"),
),
),
$(go.Placeholder, { padding: 100 })
),
new go.Binding("stroke", "isHighlighted", function(h)
{
return h ? mappings[currentTheme].fill : mappings[currentTheme].fill;
}).ofObject(),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
)
/**
* Group main template - Used for service bigger business grouping / bigger partition
*/
const groupTemplateMain = $(go.Group, "Auto", {
avoidable: true,
movable: false,
layout: $(go.TreeLayout, {
sorting: go.TreeLayout.SortingAscending,
comparer: function(a, b){
let aData = a.data;
let bData = b.data;
if(aData.key < bData.key) return -1;
if(aData.key > bData.key) return 1;
return 0;
},
}),
// If not expanded, put node on the foreground, else put on the background
// Prevent links to overlap the nodes
subGraphExpandedChanged: function(group){
if(group.isSubGraphExpanded){
group.layerName = 'Background';
}else{
group.layerName = 'Foreground';
}
}
},
$(go.Shape,
new go.Binding("figure", "shape"),
{ stroke: mappings[this.themeConfig].fill, fill: null, strokeWidth: 1, strokeCap: 'round', strokeDashArray: [5,10] }),
$(go.Panel, "Auto",
{ defaultAlignment: go.Spot.Left, padding: 10},
$(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.TopLeft },
$(go.TextBlock, {stroke: mappings[this.themeConfig].fill, font: 'bold 30pt sans-serif', margin: new go.Margin(0,0,0,10) }, new go.Binding("text", "name"),),
),
$(go.Placeholder, { padding: 80 })
),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
)
Loading function
if(sessionStorage.getItem("model") === null){
// Default data when saved model does not exist
diagram.model.nodeDataArray = dataNodes;
diagram.model.linkDataArray = dataLinks;
}else{
diagram.layout.isInitial = false;
diagram.model = go.Model.fromJson(sessionStorage.getItem("model"));
diagram.updateAllRelationshipsFromData();
diagram.updateAllTargetBindings();
}
Saved model:
After loading:
Saved model snippet:
{ "class": "GraphLinksModel",
"modelData": {"position":"1088.203306039712 -348.02078361192434"},
"nodeDataArray": [
...
{"key":3,"group":"main","name":"LOGISTICS","isGroup":true,"expanded":true,"category":"structural","loc":"1006.03515625 496.2070892333984"},
{"key":"driver-app","description":"Driver App","group":3,"isGroup":true,"expanded":false,"category":"simple","color":"#d5f5e3","loc":"3465.97607421875 681.7798431396484"}
...
],
"linkDataArray": [
...
{"category":"simple","key":"a-to-b","from":"a","to":"b","type":"TRIGGER_EVENT","documentations":<redacted>,"points":[4455.521484375,655.0652923583984,4425.521484375,655.0652923583984,4235.021484375,655.0652923583984,4235.021484375,764.2434661865234,3704.0009765625,764.2434661865234,3704.0009765625,914.2434661865234,3671.82421875,914.2434661865234,3645.82421875,914.2434661865234]}
...
]}
My assumption for now, is the save function does not capture the correct points (not sure why), any kind of help will be much appreciated.
Regards,
K.