GoJS Sample for JSFIDDLE
Impressive software, just way too expensive in my opinion.
HTML
<script src="http://gojs.net/latest/release/go.js"></script>
<div id="sample">
<div id="myDiagram" style="border: solid 1px black; width:100%; height:300px"></div>
</div>
<br>
<button>No-Op Move</button>
CSS
body {
font-family: sans-serif;
font-size: 13px;
}
JavaScript
document.querySelector('button').addEventListener("click", noopMove);
function noopMove() {
var cursor = myDiagram.findTopLevelGroups();
while (cursor.next()) {
let group = cursor.value;
let loc = go.Point.parse(group.data.loc);
group.move(new go.Point(loc.x, loc.y));
}
}
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagram", { initialContentAlignment: go.Spot.Center });
myDiagram.groupTemplate = $(go.Group, "Spot",
{
locationObjectName: "MAIN",
selectionObjectName: "MAIN"
},
$(go.Shape, "RoundedRectangle", {
name: "MAIN",
parameter1: 10,
fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
stroke: "black",
}),
$(go.TextBlock, {
font: "bold 11pt helvetica, bold arial, sans-serif",
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Bottom },
new go.Binding("text", "text")
)
);
myDiagram.model = new go.GraphLinksModel(
[{ "id": 0, "loc": "20 20", "text": "Initial", isGroup: true }], []
);