I am using GoJS in React, I created the model using one of the default Layouts (CircularLayout) but I only want a node to obey this layout’s positioning on creation, the user should be able to rearrange the node and when they leave the page, I want to make a call to the backend to save the current position of all nodes and load them in those exact position on subsequent mounts.
The code for my diagram’s wrapper component:
private initDiagram(): Diagram {
const $ = GraphObject.make;
const diagram = $(
Diagram, {
'undoManager.isEnabled': true,
'undoManager.maxHistoryLength': 0,
'clickCreatingTool.archetypeNodeData': {text: "New", color: "lightblue"},
layout: $(CircularLayout,
{ spacing: 100, sorting: CircularLayout.Optimized }),
model: $(GraphLinksModel, {
linkKeyProperty: 'key',
// positive keys for nodes
makeUniqueKeyFunction: (m: go.Model, data: any) => {
let k = data.key || 1;
while (m.findNodeDataForKey(k)) k++;
data.key = k;
return k;
},
// negative keys for links
makeUniqueLinkKeyFunction: (m: go.GraphLinksModel, data: any) => {
let k = data.key || -1;
while (m.findLinkDataForKey(k)) k--;
data.key = k;
return k;
}
})
}
);
Shape.defineFigureGenerator('Badge', function(shape, w, h) {
var radius = h / 2,
geo = new Geometry();
// a single figure consisting of straight lines and half-circle arcs
geo.add(new PathFigure(0, radius)
.add(new PathSegment(PathSegment.Arc, 90, 180, radius, radius, radius, radius))
.add(new PathSegment(PathSegment.Line, w - radius, 0))
.add(new PathSegment(PathSegment.Arc, 270, 180, w - radius, radius, radius, radius))
.add(new PathSegment(PathSegment.Line, radius, h).close()));
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new Spot(0, 0, 0.1 * radius, 0.1 * radius);
geo.spot2 = new Spot(1, 1, -0.1 * radius, 0);
return geo;
});
diagram.nodeTemplate = $(
Node, 'Auto', { selectionObjectName: "STAGE" },
new Binding('location', 'loc', Point.parse).makeTwoWay(Point.stringify),
$(
Shape, 'Badge', {
name: 'SHAPE', fill: 'white', strokeWidth: 0,
// Port properties
portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer'
},
// Shape.fill is bound to Node.data.color
new Binding('fill', 'color')
),
$(Panel, "Horizontal",
{ margin: 5 },
$(TextBlock,
{ text: '\uf055', font: '12pt FontAwesome' }),
// { click: function(e, obj) {
// const = wrapperComponent =
// } },
$(
TextBlock, {
margin: new Margin(5, 10, 5, 10), font: '400 .875rem Roboto, sans-serif', name: "STAGE"
// Add more styles if needed
},
new Binding('text').makeTwoWay()
),
$(TextBlock,
{ text: '\uf142', font: '12pt FontAwesome' }),
),
) as unknown as Node;
// Linking
diagram.linkTemplate = $(
Link, new Binding('relinkableFrom', 'canRelink').ofModel(),
new Binding('relinkableTo', 'canRelink').ofModel(),
$(Shape),
$(Shape, { toArrow: 'Standard' }),
$(TextBlock, new Binding('text', "label"),
{ segmentOffset: new Point(0, -10),
segmentOrientation: Link.OrientUpright }),
);
return diagram;
}
I do not know how to go about this.