ruler

Ruler

A Ruler component that can draw grids and scroll infinitely.

Demo /
API /
Guides /
Main Project

⚙️ Installation

npm

$ npm i @scena/ruler

scripts

How to use

import Ruler from "@scena/ruler";

const ruler = new Ruler(document.body, {
    type: "horizontal",
});

window.addEventListener("resize", () => {
    ruler.resize();
});

export interface RulerInterface {
    scroll(scrollPos: number): any;
    resize(): any;
}
export interface RulerProps {
    type?: "horizontal" | "vertical";
    width?: number;
    height?: number;
    unit?: number;
    zoom?: number;
    direction?: "start" | "end";
    style?: IObject;
    backgroundColor?: string;
    lineColor?: string;
    textColor?: string;
    textFormat?: (scale: number) => string;
}

Ruler Units

The default unit is px, and a line is drawn every 50px. If you want to use a different unit instead of the px unit, use it like this:

• 1px (Default)
  • zoom: 1
  • unit: 50 (every 50px)
• 1cm = 37.7952px
  • zoom: 37.7952
  • unit: 1 (every 1cm)
• 1in = 96px = 2.54cm
  • zoom: 96
  • unit: 1 (every 1in)

⚙️ Developments

The ruler repo is managed as a monorepo with yarn.

yarn config set registry https://registry.npmjs.org/

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

Contributing

If you have any questions or requests or want to contribute to ruler or other packages, please write the issue or give me a Pull Request freely.

Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

License

This project is MIT licensed.

…