Require multiple components of the same type with Unique names

GoJS
1

I have similar drag and drop palette and diagram as shown in this sample: Simulating Input Events

But here if we drag and drop multiple Alpha nodes. The count increment is happening as the text Binding is with the Key. Which is why we get Alpha, Alpha1, Alpha2 etc.

I want this same increment to happen with a custom node property called ‘componentName’.

my palette structure for a node will be something like this:
{
name: ‘Trigger’,
componentName: ‘Sensor’,
}

Now when i drag multiple components from this palette, i want the names to be Sensor, Sensor1, Sensor2 etc.

How can i achieve this?

This is what I have tried:

$(go.TextBlock, ‘’,
{
row: 0, column: 1,
margin: 10,
textAlign: ‘left’,
verticalAlignment: go.Spot.TopRight,
background: ‘white’,
width: 70,
height: 30,
maxLines: 1,
overflow: go.TextBlock.OverflowEllipsis,
},
new go.Binding(‘text’, ‘’, function(data) {
console.log('data in concat function: ', data);
return data.componentName + Math.abs(data.key);
}).makeTwoWay())

But this only reflects on the View, But my model data is not updated.

2

That is true – and if you modified some counter in that conversion function, you might get unexpected results, because it might be called more than once. It is one of several reasons why conversion functions should not have any side-effects.

Instead, the most common solution is to implement an “ExternalObjectsDropped” DiagramEvent listener that increments some counter and updates some data property on the newly dropped/copied node(s). If you want to save that counter in the model, put it on the Model.modelData object where it will be saved by Model.toJson and loaded by Model.fromJson.

https://gojs.net/latest/intro/events.html#ExternalObjectsDropped