This sample let's users construct a flowing diagrmam with a few quality of life features. Nodes can be deleted by dragging them over the "Drop Here To Delete" box.
This sample implements a custom DragLinkingTool that allows Links to be re-linked by dragging them to different Nodes.
To create a new Node, click the "+". This will create and link a new Node.
When Nodes are dragged to new locations they will be snapped to the nearest lane.
All Nodes TextBlocks are editable.
This predefined layout is used for placing Nodes of a general directed graph in layers (rows or columns). This is more general than TreeLayout, as it does not require that the graph be tree-structured. 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.
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.