This sample allows the user to drag nodes, including groups, into and out of groups, both from the Palette as well as from within the Diagram. See the Groups Intro page for an explanation of GoJS Groups.
Highlighting to show feedback about potential addition to a group during a drag is implemented using GraphObject.mouseDragEnter and GraphObject.mouseDragLeave event handlers. Because Group.computesBoundsAfterDrag is true, the Group's Placeholder's bounds are not computed until the drop happens, so the group does not continuously expand as the user drags a member of a group.
When a drop occurs on a Group or a regular Node, the GraphObject.mouseDrop event handler adds the selection (the dragged Nodes) to the Group as new members. The Diagram.mouseDrop event handler changes the dragged selected Nodes to be top-level, rather than members of whatever Groups they had been in.
The slider controls how many nested levels of Groups are expanded. Semantic zoom level:
This predefined layout is used for placing Nodes in a grid-like arrangement. Nodes can be ordered, spaced apart, and wrapped as needed. This Layout ignores any Links connecting the nodes being laid out. More information can be found in the GoJS Intro.
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.
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.
GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.
More information can be found in the GoJS Intro.