RoyalHaskoningDHV/caffeine-ruler

The Caffeine customized ruler based on the one from @scena

Ruler

This is a fork of the @Scena Main Ruler component that can draw grids and scroll infinitely.

Main Ruler Demo / Main Ruler API / Main Ruler Guides / Main Ruler Repo

⚙️ Installation

npm

$ npm i @royalhaskoningdhv/ruler

🚀 How to use

import Ruler from "@royalhaskoningdhv/react-ruler"; // For example

import React, { useEffect, useRef } from "react";
import Ruler from "@royalhaskoningdhv/react-ruler";

const RulerExample = (): JSX.Element => {
    const rulerRefVertical = useRef<Ruler>();

    useEffect(() => {
        let scrollY = 0;
        const onMouseWheel = (e: WheelEvent): void => {
            scrollY += e.deltaY;
            if (rulerRefVertical) {
                rulerRefVertical.current.scroll(scrollY);
            }
        }

        window.addEventListener('wheel', onMouseWheel, { passive: false });
        return () => {
            window.removeEventListener('wheel',onMouseWheel)
        }
    }, [])

    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            <Ruler
                type="vertical"
                ref={rulerRefVertical}
                mainLineSize={12}
                shortLineSize={6}
                longLineSize={6}
                style={{
                    width: '24px',
                    height: '100%',
                }}
                unit={UNIT}
                zoom={ZOOM_LEVEL * STEP_DISTANCE}
                zoomLevel={ZOOM_LEVEL}
                direction="start"
                backgroundColor="#000000"
                lineColor="#78797b"
                textAlign="left"
                textColor="#bbbbbb"
                textOffset={[-7, 0]}
                textFormat={(scale: number): string => (-scale).toString()}
                fontSize={10}
                highlight={[5, 6.3]}
            />
        </div>
    );
}

export default App;

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;
    fontSize?: string
    highlight?: [number, number]
}

Steps to edit/contribute on the react-ruler

Step 1: Change directory

    CD to packages/react-ruler

Step 2: Install the dependencies

    npm install or npm i

Step 3: Run the app (default will open http://localhost:3000)

    npm start

To change the ruler setting open src/demo/App.tsx

To change the logic edit the src/react-ruler/Ruler.tsx

Types are in src/react-ruler/types

📝 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.