Hello,
I am trying to make a POC based on GOJS in Angular. When I change the data of a node it applies to every instance of that node in the diagram instead of that specific node.
whenever a new node is selected in the diagram a listener is activated
this.diagram.addDiagramListener("ChangedSelection", e => {
const node = e.diagram.selection.first();
this.nodeSelected.emit(node instanceof go.Node ? node : null);
});
this listener copies the selected node to a variable “node” in another component which builds an inspector for the nod.data by copying over all “data” into a second object called data where it is edited.
once your ready to save that data is pushed back to the node using the following
onCommitDetails() {
if (this.node) {
// copy the edited properties back into the node's model data,
this.model.startTransaction();
this.model.setDataProperty(this.node.data, "properties", this.data.properties);
this.model.commitTransaction("modified properties");
console.log(this.model.toJson());
}
}
or in the case of adding ports:
addInputPort(name) {
if(this.node) {
// this.data.outArray.push({ portId: "test"});
this.model.startTransaction("addPort");
// get the Array of port data to be modified
if (this.node.data["properties"]["Options"]) {
// create a new port data object
console.log(this.node.data["properties"]["Options"])
const newportdata = {
portId: name
};
// and add it to the Array of port data
this.model.insertArrayItem(this.node.data["properties"]["Options"], -1, newportdata);
}
this.model.commitTransaction("addPort");
}
}
What happens is every node in the diagram that is of the same type copied from the palette ends up being updated with the changes not just one the selected
before:
after:
I need each one to be unique and not share data.
This is an open source project so you can run it yourself: https://github.com/quasarke/ArkeManager
I have tried so far the following:
-
making sure keys are unique and all palette and initial graphlinksmodel items have a key property
-
adding a uniquekeygenerator
