<body onload="init()">
<div style="width: 100%; display: flex; justify-content: space-between">
<div id="myPaletteDiv" style="width: 130px; border: solid 1px black"></div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</div>
<p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>function init() {
var $ = go.GraphObject.make;
function onModelChanged(evt) {
// ignore unimportant Transaction events
if (!evt.isTransactionFinished) return;
var txn = evt.object; // a Transaction
if (txn === null) return;
var nodesToAdd = [];
// iterate over all of the actual ChangedEvents of the Transaction
txn.changes.each(function(e) {
// ignore any kind of change other than adding a node
if (e.modelChange !== "nodeDataArray" && e.change === go.ChangedEvent.Insert) {
if (e.newValue.data.createFriend) {
nodesToAdd.push({ key: "special friend" });
}
}
});
evt.model.addNodeDataCollection(nodesToAdd);
}
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true,
allowDrop: true,
"ModelChanged": onModelChanged
}
);
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "lightgray" }),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text", "key")
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
],
[
{ from: "Alpha", to: "Beta" }
]
);
myPalette =
$(go.Palette, "myPaletteDiv",
{
// limit the standard Palette.layout, a GridLayout, to one column
"layout.wrappingColumn": 1,
// don't allow scrolling/panning
allowHorizontalScroll: false,
allowVerticalScroll: false,
// share the templates with the main Diagram
nodeTemplateMap: myDiagram.nodeTemplateMap
});
myPalette.model = new go.Model(
[
{ key: 'new node' },
{ key: 'special node', createFriend: true },
]
);
}
External CSS
This Pen doesn't use any external CSS resources.