DrawingSelector

Introduction

This package provides a utility to get elements with mouse trajectory.

Installation

To use this package, run the following command in your terminal:

npm install drawingselector

Preparation

Set data-ds to get with mouse trajectory like so.

<div id="container">
    <input type="checkbox" data-ds> This can be retrieved by mouse trajectory.
    <input type="checkbox"> This can NOT be retrieved!
</div>

Usage

for JavaScript

import { DrawingSelector } from 'drawingselector/dist/DrawingSelector';

const containerElement = document.getElementById('container');
const options = {
    drawing: {
        backgroundColor: '#FFA5001A',
        strokeColor: '#44444D',
        strokeWidth: 3,
    },
    elements: {
        borderColor: '#D21B49',
        borderWidth: 2,
    },
    callbacks: {
        onDraw(elements) {
            console.log(elements);
        },
        onEnd(elements) {
            console.log(elements);
        }
    }
};
new DrawingSelector(containerElement, options);

for TypeScript

import { DrawingSelector, DrawingSelectorOptions } from 'drawingselector';

window.addEventListener('load', () => {
    const containerElement = document.getElementById('container') as HTMLElement;
    if (containerElement) {
        const options: DrawingSelectorOptions = {
            drawing: {
                backgroundColor: '#FFA5001A',
                strokeColor: '#44444D',
                strokeWidth: 3,
            },
            elements: {
                borderColor: '#D21B49',
                borderWidth: 2,
            },
            callbacks: {
                onDraw(elements) {
                    console.log(elements);
                },
                onEnd(elements) {
                    console.log(elements);
                }
            }
        };
        new DrawingSelector(containerElement, options);
    }
});

License

This project is licensed under the MIT License.