selekter

About

Selekter is a selection model for DOM. It features both selection management and tooling. Selekter provides a set of tools, such as rectangular lasso tool, for selecting elements in the DOM. This library is particularly preeminent when it comes to selecting elements laid out in a grid.

Install

$ npm install selekter --save

Selekter depends on the following modern JavaScript features:

• Set (with values() and new Set(iterable) constructor)
• MutationObserver
• Element.closest
• CustomEvent (constructor)

Please use polyfills if one of those is not supported by your browser.

Usage

Let's start with creating new Area.

import { Area } from 'selekter';
 
let root = document.querySelector('.area');
new Area(root);

This will make all .selekter-selectable inside .area selectable. The .selekter-selectable is the default CSS selector and can be changed in options. Each time selection changes, custom selection event for that selectable element will be dispatched. The selection event bubbles so we can listen for it directly from the root element:

import { SelectionEvent, SELECTION_EVENT } from 'selekter';
 
root.addEventListener(SELECTION_EVENT, (event: SelectionEvent) =>
  console.log(`${event.target} was ${event.detail.selected}`));

If default selection tool options are unfavorable or custom selectors are needed, pass them to Area constructor as a third parameter. For example:

import { defaultSelectors, RectSelector } from 'selekter';
 
new Area(root, { /* options */ }, [
  ...defaultSelectors,
  new RectSelector({ threshold: 20 })
]);  

This will result in rectangular selector with new threshold taking precedence over default selector.

License

MIT