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 div uses onmouseover and onmouseout events to show or hide the indicators as the mouse moves into or out of the diagram.

The rulers depend on the Diagram.viewportBounds, which can be impacted by changes to the Diagram.documentBounds. Therefore, the Part.isInDocumentBounds property is set to false to prevent circular dependencies in cases where the rulers grow/shrink to fit the viewport.