Nodes in this sample use Shape.geometryString to determine their shape. You can see more custom geometry examples and read about geometryString on the Geometry Path Strings Introduction page.
As a part's unconnected port (shown by an X) comes close to a stationary port with which it is compatible, the dragged selection snaps so that those ports coincide. A custom DraggingTool, called SnappingTool, is used to check compatibility.
Dragging automatically drags all connected parts. Hold down the Shift key before dragging in order to detach a part from the parts it is connected with. These functionalities are also controlled by the custom SnappingTool.
Use the GraphObject.contextMenu to rotate, detach, or delete a node. If it is connected with other parts, the whole collection rotates.
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS Intro.
GoJS provides its own collection classes: List, Set, and Map. You can iterate over a collection by using an Iterator. More information can be found in the GoJS Intro.
A GoJS context menu is an Adornment that is shown when the user context-clicks (right mouse click or long touch hold) an object that has its GraphObject.contextMenu set. The context menu is bound to the same data as the part itself.
It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s,
as you can see in the code below in the assignment of the Node's GraphObject.contextMenu and Diagram.contextMenu properties.
Each "ContextMenu" is just a "Vertical" Panel Adornment that is shadowed.
Each "ContextMenuButton" is a Panel on which you can set the GraphObject.click event handler.
In the event handler obj.part will be the whole context menu Adornment.
obj.part.adornedPart will be the adorned Node or Link.
The bound data is obj.part.data, which will be the same as obj.part.adornedPart.data.
More information can be found in the GoJS Intro.
Tools handle all input events, such as mouse and keyboard interactions, in a Diagram. There are many kinds of predefined Tool classes that implement all of the common operations that users do.
For flexibility and simplicity, all input events are canonicalized as InputEvents and redirected by the diagram to go to the Diagram.currentTool. By default the Diagram.currentTool is an instance of ToolManager held as the Diagram.toolManager. The ToolManager implements support for all mode-less tools. The ToolManager is responsible for finding another tool that is ready to run and then making it the new current tool. This causes the new tool to process all of the input events (mouse, keyboard, and touch) until the tool decides that it is finished, at which time the diagram's current tool reverts back to the Diagram.defaultTool, which is normally the ToolManager, again.
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.
The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.
One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.
More information can be found in the GoJS Intro.