• Stars
    star
    221
  • Rank 173,399 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Ruler component that can draw grids and scroll infinitely.

Ruler

npm version React Preact Angular Vue Vue

A Ruler component that can draw grids and scroll infinitely.

Demo / API / Guides / Main Project

⚙️ Installation

npm

$ npm i @scena/ruler

scripts

<script src="//daybrush.com/ruler/release/latest/dist/ruler.min.js"></script>

🚀 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<any>;
    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.

MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

More Repositories

1

moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
TypeScript
7,799
star
2

scenejs

🎬 Scene.js is JavaScript & CSS timeline-based animation library
TypeScript
2,441
star
3

selecto

Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
TypeScript
1,280
star
4

scena

🎬 Scena is a component that represents the timeline of Scene.js. You can control time, properties, and items.
TypeScript
577
star
5

guides

A Guides component that can draw ruler and manage guidelines.
TypeScript
240
star
6

scenejs-timeline

🎬 @scenejs/timeline is a component that represents the timeline of Scene.js. You can control time, properties, and items.
TypeScript
150
star
7

infinite-viewer

Infinite Viewer is Document Viewer Component with infinite scrolling.
TypeScript
143
star
8

scenejs-render

🎬 Make a movie of CSS animation through scenejs.
HTML
117
star
9

gesto

You can set up drag, pinch events in any browser.
TypeScript
74
star
10

overlap-area

Find the Overlap Area.
TypeScript
42
star
11

scenejs-effects

🎬 ✨ Effect collection library where you can add effects with Scene.js.
TypeScript
36
star
12

figur

Make SVG Polygon & Star Shape
TypeScript
28
star
13

keycon

Keyboard Controller
TypeScript
25
star
14

drag

You can set up drag events in any browser.
TypeScript
18
star
15

react-folder

A React Folder component that can fold, sort, and move lists.
TypeScript
15
star
16

moveable-helper

TypeScript
10
star
17

scenejs-media

🎬 A library for playing or controlling media
TypeScript
10
star
18

css-styled

⚖️ This component is a lightweight, simple line style component.
TypeScript
10
star
19

utils

utils for daybrush
TypeScript
9
star
20

framework-utils

utils for framework
TypeScript
8
star
21

dragscroll

TypeScript
7
star
22

daybrush.github.io

Daybrush https://daybrush.com
TypeScript
7
star
23

css-to-mat

TypeScript
6
star
24

ast-parser

ast parser
JavaScript
6
star
25

builder

JavaScript
6
star
26

css

5
star
27

matrix

TypeScript
5
star
28

scenejs-iframe

🎬 A library that control the animation of iframe with scenejs
TypeScript
5
star
29

tester

JavaScript
3
star
30

print-sizes

Prints a list of files in the directory.
JavaScript
3
star
31

data-dom

TypeScript
3
star
32

react-simple-compat

Simple React for compatible use
TypeScript
3
star
33

rollup-plugin-preact

Rollup Plugin for Preact Compat
JavaScript
3
star
34

order-map

TypeScript
3
star
35

keyframer

Make the CSS Keyframes the keyframes object.
TypeScript
3
star
36

fjx

fjx is an functional javascript extension. Support Typescript
TypeScript
2
star
37

pure-props

compare only the props. If the state does not change, do not re-render.
JavaScript
2
star
38

vue-test

TypeScript
2
star
39

pvu

JavaScript
2
star
40

list-map

📋 A list-map collection in the form of key, value, that ensures the index.
TypeScript
2
star
41

rollup-plugin-react-compat

JavaScript
2
star
42

code-converter

TypeScript
1
star
43

scenejs-server

JavaScript
1
star
44

page

You can check the page in and out of the screen.
TypeScript
1
star
45

daylightjs

daylightJS
JavaScript
1
star
46

project

JavaScript
1
star
47

movable

You can add a movable element
1
star
48

daybrush

1
star
49

codepen

JavaScript
1
star
50

print-coveralls

print-coveralls
JavaScript
1
star
51

test-server

test
HTML
1
star
52

movable-angular-error

TypeScript
1
star
53

release

JavaScript
1
star
54

redux

JavaScript
1
star
55

demo

JavaScript
1
star