When one drags the "Macro" node (actually a Group) from the Palette into the main Diagram, the "ExternalObjectsDropped" DiagramEvent listener automatically ungroups that group node to show all of its members nodes and links that were copied by the drag-and-drop.

Note also that a drop causes the TextEditingTool to automatically start editing the text in the node.

Diagram Model saved in JSON format:


GoJS Features in this sample

Groups

The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.

A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.

More information can be found in the GoJS Intro.

Related samples


Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples