Network Configuration Diagram Editor With Groups
GoJS can be used to create network configuration diagrams for either monitoring or display. This example shows some editing capabilities:
- Drag-and-drop a Node from the Palette on the left side into the Diagram on the right side. You can move Nodes around in the Diagram, delete them, or copy them.
- You can edit any text that you see by first selecting the node or group, and then either using the F2 key command or clicking on the text.
- You can draw new connections (Links) via mouse-down around the edges of a Node or Group, and then dragging to the desired Node or Group. At such points the cursor will turn into a pointer.
-
The Diagram CommandHandler.archetypeGroupData is set,
allowing you to create new groups by pressing
Ctrl + G(orCmd + G) with two or more Nodes selected.
Icons in this sample are open-licensed from here.
GoJS Features in this sample
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 learn pages.
Links
The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS learn pages.
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 learn pages.