Ruler in EJ2 TypeScript Diagram control

4 Dec 202410 minutes to read

The ruler provides horizontal and vertical guides for measuring in the diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful for creating scale models.The ruler also includes a position indicator that displays the precise location of the mouse cursor on the diagram canvas, with the default color of the position indicator marker being red.

Define rulers

The rulerSettings property of diagram is used to control the visibility and appearance of the ruler in the diagram.

The showRulers property is used to show or hide the rulers in the diagram.

The following code shows how to add a ruler to the diagram.

import {
    Diagram} from '@syncfusion/ej2-diagrams';
let diagram: Diagram = new Diagram({
        width: '100%', height: '600px', rulerSettings: {
            showRulers: true
        },
    });
    diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    </body>

</html>

Customizing the Ruler

horizontalRuler and verticalRuler properties of rulerSettings are used to customize the rulers appearance in the diagram.

By default, the ruler segments are arranged based on pixel values.

The HorizontalRuler’s interval property defines the spacing between ruler segments, and the segmentWidth property sets the width of each segment. Similarly, the VerticalRuler’s interval and segmentWidth properties control the interval and segment width for the vertical ruler.

The HorizontalRuler’s tickAlignment property aligns the ruler ticks to the left or right side, while the VerticalRuler’s tickAlignment aligns them to the top or bottom.

The HorizontalRuler’s thickness property sets the thickness of the horizontal ruler, and the VerticalRuler’s thickness property sets the thickness of the vertical ruler.

The following code shows how the diagram ruler can be customized.

import { Diagram } from '@syncfusion/ej2-diagrams';
let diagram: Diagram = new Diagram({
  width: '100%',
  height: '600px',
  rulerSettings: {
    showRulers: true,
    horizontalRuler: {
      interval: 8,
      segmentWidth: 100,
      thickness: 25,
      //Align horizontal ruler tick to the bottom side.
      tickAlignment: 'RightOrBottom',
    },
    verticalRuler: {
      interval: 10,
      segmentWidth: 200,
      thickness: 35,
      //Align vertical ruler tick to the left side.
      tickAlignment: 'LeftOrTop',
    },
  },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    </body>

</html>

Arrange tick

The HorizontalRuler’s arrangeTick and VerticalRuler’s arrangeTick functions allow you to customize the appearance of ruler ticks. These functions are called for each tick rendering.

The following code demonstrates how to use the arrangeTick function to customize the tickLength.

import { Diagram } from '@syncfusion/ej2-diagrams';
import { IArrangeTickOptions } from '@syncfusion/ej2-diagrams/src/ruler/objects/interface/interfaces';
// To arrange ruler tick.
let arrange: Function = (args: IArrangeTickOptions) => {
  if (args.tickInterval % 10 == 0) {
    //Sets the tick length to 25
    args.tickLength = 25;
  }
};
let diagram: Diagram = new Diagram({
  width: 1000,
  height: 500,
  nodes: [
    {
      id: 'node1',
      width: 100,
      height: 100,
      offsetX: 100,
      offsetY: 100,
    },
  ],
  rulerSettings: {
    showRulers: true,
    horizontalRuler: {
      segmentWidth: 50,
      orientation: 'Horizontal',
      interval: 10,
      thickness: 50,
      arrangeTick: arrange,
    },
    verticalRuler: {
      segmentWidth: 200,
      interval: 20,
      thickness: 20,
      tickAlignment: 'LeftOrTop',
      markerColor: 'red',
    },
  },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    </body>

</html>

Marker color

The HorizontalRuler’s markerColor and VerticalRuler’s markerColor properties are used to define the ruler marker color and marker will be shown while hovering mouse over the diagram canvas.

NOTE

The MarkerColor property can be customized using the marker CSS style.