Drag Drop Swimlanes From Html Canvas - Keys Not Auto Updating

GoJS
1

Hello,

I am trying to manually add swimlane groups, as per the example from a custom HTML toolbox.

The way I am doing this is associating data to a toolbox item and manually adding this to the diagram in an event handler that is called when the items are dropped onto the canvas.
For example:
this.diagram.model.addNodeDataCollection(nodeCollection);

where nodeDataCollection will always be pulled from the HTML toolbox item and look like:

[{ key: “501”, “text”: “Pool 1”, “isGroup”: “true”, “category”: “Pool” },
{ key: “Lane5”, “text”: “Lane 1”, “isGroup”: “true”, “group”: “501”, “color”: “lightyellow”, “category”: “Lane” },
{ key: “Lane6”, “text”: “Lane 2”, “isGroup”: “true”, “group”: “501”, “color”: “lightgreen”, “category”: “Lane” }];

However, this results in every new drop from the palette associating the lanes to group 501. So if I do two drops of the swimlane component I get the lanes being associated with the first pool instead of the second. See screenshot below.

Pasted image770×680 15 KB

The BPMN example http://gojs.net/latest/extensions/BPMN.html# seems to have something going on under the hood of go.js itself that “automagically” reassigns keys when they are dropped onto the canvas.

How can I perform a key reassignment via my manual method here? Or is there some better way of manually doing this?

Thanks.

2

Model.addNodeDataCollection is just iterating over the argument and adding each data object individually. It cannot know that the argument data has inter-data references in an independent context, rather than the context of the model/diagram to which you are adding the data. Otherwise you could not add a new node that is a member of an existing group.

It might be easiest to have a hidden Diagram in memory. For that item being dropped you could copy the group including its members from the hidden diagram to the target diagram.