This sample demonstrates the ability for the user to drag around a Link as if it were a Node. When either end of the link passes over a valid port, the port is highlighted.
The link-dragging functionality is enabled by setting some or all of the following properties: DraggingTool.dragsLink, LinkingTool.isUnconnectedLinkValid, and RelinkingTool.isUnconnectedLinkValid.
Note that a Link is present in the Palette so that it too can be dragged out and onto the main Diagram. Because links are not automatically routed when either end is not connected with a Node, the route is provided explicitly when that Palette item is defined.
This also demonstrates several custom Adornments: Part.selectionAdornmentTemplate, Part.resizeAdornmentTemplate, and Part.rotateAdornmentTemplate.
Finally this sample demonstrates saving and restoring the Diagram.position as a property on the Model.modelData object that is automatically saved and restored when calling Model.toJson and Model.fromJson.
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.
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 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.
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.
GoJS provides functionality to display a grid of lines drawn at regular intervals. Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.
Grids are implemented using a type of Panel, Panel.Grid. Grid Panels, like most other types of Panels, can be used within Nodes or any other kind of Part. However when they are used as the Diagram.grid, they are effectively infinite in extent.
More information can be found in the GoJS Intro.