Ruler in Angular Diagram component

22 Oct 20247 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 rulerSettingsproperty of diagram is used to control the visibility and appearance of the ruler in the diagram.

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

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

app.component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent ,RulerSettingsModel} from '@syncfusion/ej2-angular-diagrams';


@Component({
imports: [
         DiagramModule
    ],
    providers: [ ],
    standalone: true,
    selector: "app-container",
    template: `<div><ejs-diagram #diagram id="diagram" width="100%" height="600px" [rulerSettings]='rulerSettings'></ejs-diagram></div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public rulerSettings: RulerSettingsModel = { showRulers: true}
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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, 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.

app.component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent ,RulerSettingsModel} from '@syncfusion/ej2-angular-diagrams';


@Component({
imports: [
         DiagramModule
    ],
    providers: [ ],
    standalone: true,
    selector: "app-container",
    template: `<div><ejs-diagram #diagram id="diagram" width="100%" height="600px" [rulerSettings]='rulerSettings'></ejs-diagram></div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public rulerSettings: RulerSettingsModel = { 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"
        } 
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

app.component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent ,RulerSettingsModel} from '@syncfusion/ej2-angular-diagrams';


@Component({
imports: [
         DiagramModule
    ],
    providers: [ ],
    standalone: true,
    selector: "app-container",
    template: `<div><ejs-diagram #diagram id="diagram" width="100%" height="600px" [rulerSettings]='rulerSettings'></ejs-diagram></div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public rulerSettings: RulerSettingsModel = { showRulers: true, horizontalRuler:{interval:10, segmentWidth:50, thickness:50, arrangeTick: this.arrangeTicks },verticalRuler:{interval:20, segmentWidth:200, thickness:20, tickAlignment:"LeftOrTop", markerColor: 'blue' }  };

    // To arrange ruler tick.
    private arrangeTicks(args: any) {
        if (args.tickInterval % 10 === 0) {
          // Set the tick length to 25 when the interval is divisible by 10
          args.tickLength = 45;
        }
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.