Hi, I find that in the ‘Page Flow’ diagram sample, if you drag-drop (create) two ‘Drop’ nodes in the diagram and change the content of ‘Reason’ in one of the nodes (say Node1), the other ones (Node2) will be updated as well. Even the one you create afterwards will be the same as well. Does anyone know why this happens? How can it be solved?
Yes, that's a bug in the sample. Thanks for reporting it. The problem is that the Array of data that is bound as the Panel.itemArray is not being copied when the node data is copied. When the Array is shared by multiple nodes, modifying the Array causes all of those nodes to change.
This is easy to fix. First, add a function that copies the node data object correctly:
function copyNodeData(data) {
var copy = {};
copy.key = data.key; // adding to the Model will make the key value unique
copy.category = data.category;
copy.text = data.text;
copy.loc = data.loc;
if (data.reasonsList) {
var rl = data.reasonsList;
var arr = [];
for (var i = 0; i < rl.length; i++) {
arr.push({ text: rl[i].text });
}
copy.reasonsList = arr;
}
// if you add data properties, you should copy them here too
return copy;
}Then have the Model use this function to do the copying of the data:
function load() {
var str = document.getElementById("mySavedModel").value;
myDiagram.model = go.Model.fromJson(str);
// Customize the node data copying function
myDiagram.model.copyNodeDataFunction = copyNodeData;
myDiagram.undoManager.isEnabled = true;
}
Note that this assignment is done after loading the model, since one cannot read/write functions in JSON. Alternatively we could have defined a subclass of GraphLinksModel that had this functional property assignment performed in the constructor. But doing the assignment as part of loading the model seems simple enough.
Wow! Very quick reply. That works great! Thank you so much!
Oops, the automatic formatting of the code by this forum’s editor resulted in loss of code in my reply, above.
I have edited it so that the text value put into the object pushed onto the array is correct.
arr.push({ text: rl[i].text });