A process flow diagram is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment. A simple SCADA diagram, with animation of the flow along the pipes, is implemented here.
The diagram displays the background grid layer by setting grid.visible to true, and also allows snapping to the grid using DraggingTool.isGridSnapEnabled, ResizingTool.isGridSnapEnabled, and RotatingTool.snapAngleMultiple alongside RotatingTool.snapAngleEpsilon.
There is also a custom animation that modifies the Shape.strokeDashOffset for each link.
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.
GoJS offers several built-in animations, enabled by default, as well as the ability to create arbitrary animations.
The Diagram.animationManager handles animations within a Diagram. The AnimationManager automatically sets up and dispatches default animations, and has properties to customize and disable them. Custom animations are possible by creating instances of Animation or AnimationTrigger. More information can be found in the GoJS Intro.