Drag Drop Swimlanes From Html Canvas - Keys Not Auto Updating


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:

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.

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?


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.