It is customary to define an “ExternalObjectsDropped” DiagramEvent listener on the target Diagram that modifies the collection of dropped Parts as needed. Typically there will just be one Node in the e.subject collection, but the user might be dragging multiple nodes.
Here’s a complete sample. Note how the Palette and the Diagram use different Node templates, where the one in the main Diagram shows the additional properties “prop1” and “prop2”.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Editor</title>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
<div style="width: 100%; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
<div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: floralwhite; border: solid 1px black"></div>
<div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
</div>
<div>
<button id="myLoadButton">Load</button>
<button id="mySaveButton">Save</button>
</div>
<textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0", "prop1":"hallo", "prop2":"bonjour"},
{"key":2, "text":"world", "color":"red", "location":"70 0", "prop1":"wereld", "prop2":"monde"}
],
"linkDataArray": [
{"from":1, "to":2}
]}
</textarea>
<script src="go.js"></script>
<script id="code">
const $ = go.GraphObject.make;
// initialize main Diagram
const myDiagram =
new go.Diagram("myDiagramDiv",
{
"ExternalObjectsDropped": e => {
e.subject.each(node => {
const extra = ExtraData[node.data.color];
if (extra) e.diagram.model.assignAllDataProperties(node.data, extra);
});
},
"undoManager.isEnabled": true
});
const ExtraData = {
"red": { prop1: "magenta", prop2: "pink" },
"blue": { prop1: "cyan", prop2: "navy" },
"green": { prop1: "lime", prop2: "olivedrab" },
"orange": { prop1: "yellow", prop2: "goldenrod" },
}
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,
{
fill: "white", stroke: "gray", strokeWidth: 2,
portId: "", fromLinkable: true, toLinkable: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true
},
new go.Binding("stroke", "color")),
$(go.Panel, "Vertical",
{ margin: new go.Margin(5, 5, 3, 5) },
$(go.TextBlock,
{
font: "10pt sans-serif",
minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
editable: true
},
new go.Binding("text").makeTwoWay()),
$(go.TextBlock,
new go.Binding("text", "prop1")),
$(go.TextBlock,
new go.Binding("text", "prop2"))
)
);
// initialize Palette
myPalette =
new go.Palette("myPaletteDiv",
{
nodeTemplate:
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape,
{ fill: "white", stroke: "gray", strokeWidth: 2 },
new go.Binding("stroke", "color")),
$(go.TextBlock,
{
margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN),
},
new go.Binding("text")),
),
model: new go.GraphLinksModel([
{ text: "red node", color: "red" },
{ text: "green node", color: "green" },
{ text: "blue node", color: "blue" },
{ text: "orange node", color: "orange" }
])
});
// initialize Overview
myOverview =
new go.Overview("myOverviewDiv",
{
observed: myDiagram,
contentAlignment: go.Spot.Center
});
// save a model to and load a model from Json text, displayed below the Diagram
function save() {
const str = myDiagram.model.toJson();
document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);
function load() {
const str = document.getElementById("mySavedModel").value;
myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);
load();
</script>
</body>
</html>
