selecto

Selecto is a vanilla JavaScript library that implements drag-to-select (rubber-band selection) for arbitrary DOM elements. You give it a container and a list of selectable targets — elements or CSS selectors — and it draws a selection box as the user drags with a mouse or touch, firing events as elements enter or leave the selection area.

Under the hood it composes several other daybrush packages: Gesto for unified mouse/touch drag handling, css-styled for injecting the selection-box element, overlap-area for precise hit-testing against rotated or transformed targets, and @scena/dragscroll for automatic scrolling while dragging near a container’s edge. The core package is framework-agnostic, and the monorepo ships thin wrapper packages (react-selecto, vue-selecto, vue3-selecto, ngx-selecto, svelte-selecto, preact-selecto, lit-selecto) so the same drag-selection behavior can be dropped into any major frontend framework.

What You Get

• A Selecto class you instantiate with a container and selectableTargets, no build step or framework required.
• Drag, click, and keyboard-modified (continueSelect) selection modes out of the box.
• Automatic edge-scrolling via the bundled dragscroll integration when dragging near a container boundary.
• Official framework wrapper packages (react-selecto, vue-selecto, vue3-selecto, ngx-selecto, svelte-selecto, preact-selecto, lit-selecto) published alongside the core library.

Common Use Cases

• Multi-select file/asset grids in an admin dashboard or file manager UI.
• Selecting multiple nodes on a canvas-style editor (diagramming tools, design tools) before a bulk move/delete/style action.
• Building spreadsheet- or kanban-style bulk selection interactions.
• Pairing with daybrush’s Moveable library to select then drag/resize/rotate multiple elements together.

Under The Hood

Architecture The library centers on a single Selecto class (src/Selecto.tsx re-exporting SelectoManager) that extends EventEmitter and uses a @Properties class decorator to proxy every option in SelectoOptions onto getter/setter pairs, falling back to custom get*/set* methods when defined. Rather than implementing drag detection, hit-testing, and auto-scroll itself, the class composes several purpose-built sibling packages from the same daybrush ecosystem — Gesto for pointer/touch drag events, DragScroll for edge auto-scrolling, KeyController for modifier-key combos, and the overlap-area/css-to-mat pair for geometric hit-testing against transformed elements — so the core file is largely orchestration and event-emission glue rather than low-level DOM math. A comparable pattern repeats across the eight per-framework packages in the monorepo, each a thin adapter that instantiates and proxies the same vanilla class.

Tech Stack The core package is written in TypeScript, built with Rollup, and typed via a separate tsc declaration pass; the monorepo as a whole is managed with Lerna and Yarn workspaces, with each framework wrapper (React, Vue 2/3, Angular, Svelte, Preact, Lit) as its own publishable package sharing the same src/ conventions. Runtime dependencies are exclusively other daybrush/scena packages (@daybrush/utils, @scena/event-emitter, @scena/dragscroll, css-styled, css-to-mat, gesto, keycon, overlap-area) rather than general-purpose npm utilities, giving the whole ecosystem a consistent internal dependency graph.

Code Quality The core selecto package has no automated unit test suite — its test/ directory contains only manual HTML pages exercising specific interaction scenarios (scrolling, iframes, zoom, nested containers) rather than an assertion-based suite; only the react-selecto wrapper has a single automated test file. Documentation is comprehensive at the type level: types.ts and the manager class carry extensive JSDoc annotations (used to generate the published API docs), and naming is consistent throughout, but there is no CI workflow configured in .github/ to enforce build or test passage on contributions.

API Design The public API is a single constructor call, new Selecto({ container, selectableTargets, ... }), followed by familiar .on('select', handler) event subscriptions — a shape any JavaScript developer already knows from DOM EventTarget-style APIs. Options are extensively documented inline with defaults, and advanced behavior (custom hit-testing via getElementRect, bounded/inner-scroll containers) is opt-in rather than required for basic usage, keeping the entry-level integration to a handful of lines while still exposing the escape hatches larger integrations need.