I open sourced a lightweight web editor ruler plugin!

Preface

Front-end colleagues who have done web-side editors will more or less come into contact with ruler plug-ins, similar to plug-ins in software such as ps or PPT.

Older web plug-ins such as jqury will generate a lot of dom, so I wrote a ruler drawn with pure TS and canvas, and does not rely on any third-party libraries. The usage method of the document is as follows, welcome to use, contribute and raise issue!

PS: The auxiliary line function is not supported yet, it will be launched as soon as possible

The plug-in also refers to another Daniel's ruler plug-in daybrush/ruler

light-ruler

DEMO / Github

Main features (Features)

• Use canvas to draw, support infinite scrolling, will not generate multiple DOMs and cause page redraw
• Support custom ruler background color, text color, scale color and unit
• Support the translate mode, that is, after the ruler is drawn on the canvas for the first time, scrolling is achieved through css transform
• Written in Typescript, does not rely on any third-party libraries, and the packaged file is only 26kb (including styles)
• Support zoom scale value
• Currently provides 2 ruler theme styles
• Provides a multi-instance controller to manage multiple scale instances

Installation

---

npm i light-ruler

Useage

---

• Basic use

import LightRuler from "light-ruler";

const ruler = new LightRuler({
    mode: "infinite",
    wrapperElement: document.getElementById("box"),
    scrollElement: document.getElementById("wrap"),
    rulerId: "my-ruler",
    width: 30000,
    height: 30000,
    style: {
        mode: "right",
    },
    onScroll: (x, y) => {
        console.log(x, y);
    },
});

• React use

import React, { useRef, useEffect } from "react";
import LightRuler from "light-ruler";

export default function () {
    const rulerRef = useRef(null);

    useEffect(() => {
        const ruler = new LightRuler({
            mode: "infinite",
            mountRef: rulerRef.current,
            scrollElement: document.getElementById("wrap"),
            rulerId: "ruler",
            width: 30000,
            height: 30000,
            onScroll: (x, y) => {
                console.log(x, y);
            },
        });
    }, []);
    return (
        <div id="root">
            <div id="box">
                <div id="wrap">...</div>
                <div id="ruler" ref={rulerRef}></div>
            </div>
        </div>
    );
}

• Vue3 use

<template>
    <div id="gomi-homePage">
        <div
            id="box"
            :style="{ position: 'relative', width: '800px', height: '600px', overflow: 'hidden', background: 'red' }"
        >
            <div id="s" :style="{ width: '100%', height: '100%', overflow: 'auto' }">
                <div id="wrap" :style="{ width: '30000px', height: '4600px' }"></div>
            </div>
            <div id="ruler" ref="ruler"></div>
        </div>
        <footer>
        </footer>
    </div>
</template>

<script lang="ts">
import LightRuler from 'light-ruler';
import { onMounted, ref, defineComponent } from "vue";

export default defineComponent({
    name: "Home",
    props: {},
    setup: () => {
        const ruler = ref(null);
        onMounted(() => {
            const myRuler = new LightRuler({
                mountRef: ruler.value,
                mode: "infinite",
                scrollElement: "#s",
                rulerId: "hh",
                width: 30000,
                height: 30000,
                style: {
                    mode: 'right'
                },
                onScroll: (x, y) => {
                    console.log(x, y);
                },
            })
        });

        return {  ruler };
    },
});
</script>

<style scoped lang="scss">
</style>

Tips: Because the ruler uses position: absolute, the container that wraps the ruler must set the position property.
At the same time, the ruler should be fixed, and the element that monitors the rolling cannot be the element that wraps the ruler.

Configuration (Config)

---

name	meaning	value
mode？	Drawing mode	'infinite'/'translate'/'auto'
mountRef？	DOM mounted by the ruler (prior to wrapperElement, the parentElement of mountRef will be used as the parent container)	HTMLElement
wrapperElement？	The ruler's parent container DOM (the ruler DOM will be automatically generated)	HTMLElement / CSSSelector
scrollElement?	Monitor scrolling DOM	HTMLElement / CSSSelector
width？	Ruler drawing width	number
height？	Ruler drawing height	number
rulerId?	Ruler id	string
style?	Ruler style	Object
onScroll?	Scroll callback function	(x: number, y: number) => Function

• style attribute

name	meaning	value
size？	Ruler size (such as 20, the height of the horizontal ruler is 20px, and the width of the vertical ruler is 20px)	number
backgroundColor？	Ruler background color	string
fontColor？	Ruler font color	string
fontSize?	Ruler font size (if not set, the appropriate size will be automatically calculated, if set, it will be an absolute value and will not be adaptive)	number
fontWeight？	Ruler font weight	'bold'/ number
tickColor？	Ruler scale color	string
unit?	Ruler unit style	Object
gap?	Ruler scale interval	number
scale?	Scale factor for scale value	number
show?	Whether the ruler is displayed after initialization	boolean
mode?	Ruler theme style	'center'/'right'

• unit attribute

name	meaning	value
backgroundColor？	Unit background color	string
fontColor？	Unit font color	string
fontSize?	Unit font size	number
text？	Unit display content	string

API

---

scale

Set the scale factor of the scale, the scale value of the scale will change according to the scale factor

params

name	meaning	value
scaleNumber	Zoom factor	number

ruler.scale(0.5);

resize

Reset ruler width, height or size

params

name	meaning	value
width?	Ruler drawing width	number
height?	Ruler drawing height	number
size?	Ruler size	number

ruler.resize({
    width: 1920,
    height: 1080,
    size: 18,
});

update

Update ruler style

params

name	meaning	value
style?	Ruler style	Object

ruler.update({
    fontColor: "#fff",
    unit: {
        text: "mm",
    },
});

changeScrollElement

Change the scroll object monitored by the ruler

params

name	meaning	value
scrollElement	Scrolling object to monitor	HTMLElement/CSSSelector

ruler.changeScrollElement("#wrap");

show

Show ruler

ruler.show();

hide

Hide ruler

ruler.hide();

destroy

Clear ruler

ruler.destroy();