External objects dropped on to the grid have values set for the older objects

GoJS
1

We have a palette with several objects in our Angular application. These objects have several keys. Once after we drag and drop objects on to the screen, we set values for them. Once we set values for them and then we drag and drop new instance of the same object it has the values pre-filled with the values set for the last object. What can we do to have a new instance of the same object without the values pre-filled.

this.diagram.addDiagramListener(‘ExternalObjectsDropped’, (e) => {
let node = e.subject.Ea.value.Zd;
this.nodeSelected.emit(node);
this.diagram.requestUpdate();
});

2

Are you using a GoJS palette? Are you modifying the data of the nodes in that palette?

Note that you shouldn’t be using any minified property names like e.subject.Ea.value.Zd. It’s also rare that requestUpdate needs to be called.

3

Yes, we are using the gojs palette. We are currently using e.subject.Ea.value.Zd to fetch the node being dragged and dropped onto the screen from the palette. Is there any other way we can achieve this without using the minified property names?
Also, the way we have designed our application we have added extra properties that we need into the palette, each instance will have it’s own unique data for those properties.

4

You can always read the API to see the available properties. In this case, e.subject is a Set of Parts being dropped onto the diagram. Take a look at that Set API to decide what’s needed.

I’m not sure I understand what you mean regarding your extra properties. Could you show me some example palette data and what changes you are making when dropped on the diagram?

5

The following is a sample structure of the node palette structure.

{
text: ‘Calculation’,
componentName: ‘Calculation’,
displayName: ‘(no-title)’,
source: ‘assets/Calculation.svg’,
sensorIcon: ‘assets/settings-icon.png’,
figure: ‘RoundedRectangle’,
fill: ‘#FFFFFF’,
loc: ‘’,
rightArray: [{
‘portId’: ‘Out’
}],
‘leftArray’: [{
‘portId’: ‘In’
}],
components: [
{
‘category’: ‘’,
‘type’: ‘’,
‘name’: ‘’,
‘version’: ‘1.0’,
‘metaData’: [{
‘class’: ‘’,
‘action’: ‘’,
‘calculationInput’: ‘’
}],
‘properties’: [{
‘Action’: ‘’,
‘Input’: ‘’,
}]
}
]
}

So, when we drag and drop a node on to the screen, we fill up a few forms that in turn update the components array of that node in our diagram model. Components array here are for our internal usage and also for display purposes to the user.

Our node looks something like this

variableheight

As you can see, when we set the values from the forms on to the properties of the node the user can view them here in the last row of the node.

So, the main issue here is that when we have 2 or more nodes of the same palette item the data updated in one node somehow affects the other nodes as well. We need a solution where each instance of the palette item on the screen can be configured uniquely.

6

You may need to try setting Model.copiesArrays and Model.copiesArrayObjects. See this section of the item array intro.