Selector

A tiny DIV based selector supporting mouse and touch written in TypeScript.

Features

• Modes for selecting elements
  • Elements needs to be only partially covered
  • Elements must be fully covered
• Callback at end of selection with list of selected elements
• Can switch between selecting and deselecting (already selected) elements

Using selector

import{SelectionMode,Selector}from"@vitoni/selector";// identifies all elements which can be selectedconstselectableElementsSelector="div.selectable";functionhandleSelected(selectedElements: HTMLElement[],selectionMode: SelectionMode){// Other uses cases might change the data model which the elements visualize instead of the elements themselves.// The changed data model would trigger an update of the respective elements indirectly.selectedElements.forEach((selectedElement)=>{if(selectionMode==SelectionMode.ADD){selectedElement.classList.add(selectectedClass);}else{selectedElement.classList.remove(selectectedClass);}});}constselector=newSelector(selectableElementsSelector,handleSelected);
...
selector.mount();
...
// change mode of selection to deselect elementsselector.setSelectionMode(SelectionMode.REMOVE);
...
// change mode of selection to select elementsselector.setSelectionMode(SelectionMode.ADD);
...
// cleanup only needed for SPAselector.unmount();

• mount() registers event listeners and adds a <div> element to DOM to visualize the selection area.
• unmount() deregisters event listeners and removes the selection area <div> element from DOM.
• The callback handleSelected is called at the end of the selection with all elements which have been marked by the selection area.
• The SelectionMode indicates whether the elements matching the selection should be regarded as selected or deselected.

Multiple selectors

 ...
constareaSelector="#"+areaId;// Identifies an area, the selection is restricted to.// Useful:// - when multiple selection areas are used// - to show visual constrains of the selection areaconstselectablesRootSelector=areaSelector+" div.selectables-root";// identifies all elements which can be selectedconstselectableElementsSelector="div.selectable";
...
constselector=newSelector(selectableElementsSelector,handleSelected,{
selectablesRootSelector
});
...

• The selectablesRootSelector allows to restrict the selection to the area identified by the selector.

Allow selection of single elements by clicking

 ...
// allows changes on single elements without selection / changing the selection modefunctiononClick(element: HTMLElement){if(element.classList.contains(selectectedClass)){element.classList.remove(selectectedClass);}else{element.classList.add(selectectedClass);}}constselector=newSelector(selectableElementsSelector,handleSelected,{
onClick
});
...

Example code

The example code in setup.ts shows how all these work together and also shows usage of multiple selection areas.

Getting started with development

Install dependencies

npm install

Start local vite server

npm run dev

Linting and fixing linting errors automatically

The workspace is configured to apply ESLint rules on save. To allow linting without IDE support there are also CLI commands available:

Show linting errors:

npm run lint

Fix linting errors automatically:

npm run lint-fix

Local usage without publishing for development

Make selector package locally available:

cd selector
npm link

Use local version directly in consuming project

cd consuming-project
npm link "@vitoni/selector"