Ruler in Vue Diagram component

7 Dec 202411 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 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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :rulerSettings='rulerSettings'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const width = "600px";
const height = "600px";
const rulerSettings = {
    showRulers: true
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :rulerSettings='rulerSettings'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "600px",
            rulerSettings: {
                showRulers: true
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :rulerSettings='rulerSettings'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const width = "100%";
const height = "600px";
const rulerSettings = {
    showRulers: true, 
    horizontalRuler: { interval: 8, segmentWidth: 100, thickness: 35, tickAlignment: "RightOrBottom" }, 
    verticalRuler: { interval: 10, segmentWidth: 200, thickness: 35, tickAlignment: "LeftOrTop" }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :rulerSettings='rulerSettings'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "600px",
            rulerSettings: {
                showRulers: true,
                horizontalRuler: { interval: 8, segmentWidth: 100, thickness: 35, tickAlignment: "RightOrBottom" }, 
                verticalRuler: { interval: 10, segmentWidth: 200, thickness: 35, tickAlignment: "LeftOrTop" }
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :rulerSettings='rulerSettings'></ejs-diagram>
    </div>
</template>
<script setup>
import { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const width = "600px";
const height = "600px";

const arrangeTicks = (args) => {
  if (args.tickInterval % 10 === 0) {
    args.tickLength = 25;
  }
};

const nodes= [
    {
      id: 'node1',
      width: 100,
      height: 100,
      offsetX: 100,
      offsetY: 100,
    },
];

const rulerSettings = {
    showRulers: true,
    horizontalRuler: { interval: 10, segmentWidth: 50, thickness: 50,orientation: 'Horizontal',arrangeTick: arrangeTicks,  },
    verticalRuler: { interval: 20, segmentWidth: 200, thickness: 20, tickAlignment: "LeftOrTop", markerColor: 'blue', }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :rulerSettings='rulerSettings'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';


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

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "600px",
            nodes: nodes,
            rulerSettings: {
                showRulers: true, 
                horizontalRuler: { interval: 10, segmentWidth: 50, thickness: 50,orientation: 'Horizontal',arrangeTick: this.arrangeTicks  },
                verticalRuler: { interval: 20, segmentWidth: 200, thickness: 20, tickAlignment: "LeftOrTop", markerColor: 'blue', }
            }
        }
    },
    methods: {
    arrangeTicks(args) {
      if (args.tickInterval % 10 === 0) {
        args.tickLength = 25;
      }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

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.