rulerjs-libs v1.1.0

rulerjs-libs

A typeScript library for ruler.js

Background

rulerjs-libs is the typescript library for ruler.js and designed for easily apply in Angular porjects or Vue.js projects.

Installation

npm

npm install rulerjs-libs --save

Add rulerjs-libs.scss to your main scss file

@import "rulerjs-libs/dist/rulerjs-libs.scss";

Add a div as the container to your page

<div id="RulerWrapper"></div>

Add RulerjsLib and Options to your component

import { RulerjsLib } from 'rulerjs-libs';
import { Options } from 'rulerjs-libs/dist/types/models';

const options = new Options();
options.container = document.getElementById('RulerWrapper') as HTMLElement;
const myRuler = new RulerjsLib(options);

Functions

Change the unit for the rulers. Default is RulerUnitType.PIXELS

// ...
import { RulerUnitType } from 'rulerjs-libs/dist/types/utils';
// ...

// ...
myRuler.setUnit(RulerUnitType.INCHES);
// ...

Change the theme of the rulers. Default is RulerTheme.LIGHT_THEME

// ...
import { RulerTheme } from 'rulerjs-libs/dist/types/utils';
// ...

// ...
myRuler.setTheme(RulerTheme.DARK_THEME);
// ...

Change the scale of the rulers to match measure target scale in current unit

// ...
myRuler.setScale(2);
// ...

API

Options

The options for generating rulers

container // The container for rulers
measuringTarget default: null // Optional. If your measure target has different size from the container
rulerHeight default: 15 // The height of the ruler
fontFamily default: 'arial' // The font family for the display texts
fontSize default: 8 // The font size of the display texts
fontColor default: '#333' // The font color of the display texts
strokeStyle default: 'gray' // The stroke style for the rulers
rulerAlignments default: [RulerAlignment.TOP, RulerAlignment.LEFT] // The positions of rulers
conerAlignments default: [CornerAlignment.LEFT_TOP] // The positions of corners
lineWidth default: 1 // The line width for the context
enableMouseTracking default: true // Is showing the mouse trackers
enableTooltip default: true // Is showing the tooltip

Todo List

• Set custom start point of the ruler other than (0, 0)
• Show negative values when start point is not at (0, 0)