This sample demonstrates a diagram with rulers at its edges and indicators which display the mouse's position.

The rulers are implemented using Graduated Panels. The main element of each panel is sized according to the width/height of the viewport, with the Panel.graduatedMin and Panel.graduatedMax being set to the edges of the viewport.

Event listeners and Tool overrides are used to keep the rulers and indicators in sync as the viewport bounds change or the mouse moves around the diagram.

  • ViewportBoundsChanged listeners are used to keep the rulers and indicators against the edge of the diagram and to update the min and max values of the rulers.
  • An InitialLayoutCompleted listener is used for initial placement after the diagram has positioned the rest of the nodes.
  • ToolManager.doMouseMove, LinkingTool.doMouseMove, DraggingTool.doMouseMove, and DragSelectingTool.doMouseMove are overridden to update the mouse indicators after executing their default behavior. Each is overridden so that whichever tool is active will properly adjust the indicators in addition to its normal functionality.
  • Finally, the Diagram's Diagram.mouseEnter and Diagram.mouseLeave event handlers show and hide the indicators as the mouse moves into or out of the diagram's HTMLDivElement.

The rulers and the indicators are implemented using simple Parts, not Nodes, so that they are not treated as nodes by some layouts and so that they do not show up in the collection of Diagram.nodes. They are put in the "Grid" Layer so that any changes to them are not recorded by the UndoManager, because the "Grid" Layer has all of its Parts ignored by the UndoManager.

GoJS Features in this sample

Geometry Path Strings

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.

Related samples

Grid Patterns

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.

Related samples