This sample is a simplified version of the Draggable Link sample. Links are not draggable, there are no custom Adornments, nodes are not rotatable, and links do not have text labels.
Its purpose is to demonstrate the SnapLinkReshapingTool, an extension of LinkReshapingTool that snaps each dragged reshape handle of selected Links to the nearest grid point. If the SnapLinkReshapingTool.avoidsNodes option is true, as it is by default, then the reshaping is limited to points where the adjacent segments would not be crossing over any avoidable nodes.
Note how the "LinkReshaped" DiagramEvent listener changes the Link.routing of the reshaped Link, so that it is no longer AvoidsNodes routing but simple Orthogonal routing. This combined with Link.adjusting being End permits the middle points of the link route to be retained even after the user moves or resizes nodes. Furthermore there is a TwoWay Binding on Link.routing, so that the model remembers whether the link route had ever been reshaped manually.
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.
GoJS can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the GraphObject, Diagram, CommandHandler, Tool, or Layout. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the GoJS classes.
In addition to our samples, GoJS provides an extensions gallery,
showcasing the creation of custom tools and layouts.
Those classes and samples are written in TypeScript, available at ../extensionsJSM/,
as ECMAScript/JavaScript modules -- these use the ../release/go-module.js library.
We recommend that you copy the files that you need into your project, so that you can adjust how they refer to the GoJS library
that you choose and so that you can include them into your own building and packaging procedures.
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.