Removing a node from group and refreshing the display

GoJS
1

I am busy implementing dragging nodes in and out of groups on a workflow canvas.

When a node is dragged into a group, the node is added to the group by setting the node’s groupId to the groupId it is being added to. The problem arises when dragging a node out of a group and dropping it outside of the group on the canvas. The groupId is being set to null of the node to remove it from the group, but the display does not update. The node still seems like it is part of the group (this is validated by dragging the group around, the node follows the group) but when the page is reloaded, it is clearly seen that the node has been removed from the group.

I have tried a few suggestions to “reload” the display. More detail below:

  • The code is surrounded by start and commit Transactions.

  • I have tried Diagram.requestUpdate(), nothing happens.

  • Diagram.rebuildParts() updates the display but the links between the nodes are removed

  • I have tried creating a new diagram by setting this to the current diagram’s nodes and links. This also does not work.

  • I am able to use the Diagram.updateAllRelationshipsFromData() in the code block where I add the node to the group, but where it remove the node, it is not possible to use this as I receive a console error.

Any suggestions on how to resolve this would be highly appreciated.

2

I hope you have examined how this sample is implemented: Regrouping Demo

Note how it sets Group.computesBoundsAfterDrag to true and how it implements finishDrop. Setting Group.handlesDragDropForMembers to true also saves some code.

3

Thank you for your reply.

Yes, I have examined that sample. I have also set the Group.computesBoundsAfterDrag and Group.handlesDragDropForMembers to true in my code.

4

What about your mouseDrop event handlers?

5

Thank you for your reply.

I have found the solution. I just needed to add:
Diagram.commandHandler.addTopLevelParts(this.diagram.selection, true)