Ruler in React Diagram component

28 Oct 202412 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";

function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} rulerSettings={{ showRulers: true }}></DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Diagram,DiagramComponent} from "@syncfusion/ej2-react-diagrams";
function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      rulerSettings={{ showRulers: true }}
    ></DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

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 thesegmentWidth 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";

function App() {
    return (<DiagramComponent id="container" 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',
            },
        }}></DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Diagram,DiagramComponent} from "@syncfusion/ej2-react-diagrams";

function App() {
  return (
    <DiagramComponent
      id="container"
      width={'100%'}
      height={'600px'}
      rulerSettings={{
        showRulers: true,
        horizontalRuler: {
          interval: 8,
          segmentWidth: 100,
          thickness: 35,
          //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',
        },
      }}
    ></DiagramComponent>
  );
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

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 * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";

let node=[{
    id: 'node1',
    width: 100,
    height: 100,
    offsetX: 100,
    offsetY: 100,
}]

let arrange = (args) => {
    if (args.tickInterval % 10 === 0) {
        // Sets the tick length to 25 if the interval is divisible by 10
        args.tickLength = 25;
    } 
};

function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} 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',
            }}}

        ></DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,NodeModel } from "@syncfusion/ej2-react-diagrams";
import { IArrangeTickOptions } from '@syncfusion/ej2-react-diagrams/src/ruler/objects/interface/interfaces';

let node: NodeModel[] =[{
    id: 'node1',
    width: 100,
    height: 100,
    offsetX: 100,
    offsetY: 100,
}]

let arrange = (args: IArrangeTickOptions) => {
    if (args.tickInterval % 10 === 0) {
        // Sets the tick length to 25 if the interval is divisible by 10
        args.tickLength = 25;
    } 
};

function App() {
    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} 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',
            }}}

        ></DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);

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.