Selecto

Extends

• EventEmitter

Members

(static, constant) OPTIONS

Source:

• packages/selecto/src/consts.ts, line 48

(static, constant) METHODS

Source:

• packages/selecto/src/consts.ts, line 108

(static, constant) EVENTS

Source:

• packages/selecto/src/consts.ts, line 92

(static, constant) CLASS_NAME

Source:

• packages/selecto/src/consts.ts, line 19

Methods

triggerDragStart(e)

Source:

• packages/selecto/src/SelectoManager.tsx, line 255

Example

import Selecto from "selecto";

const selecto = new Selecto();

window.addEventListener("mousedown", e => {
  selecto.triggerDragStart(e);
});

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:

• node_modules/@scena/event-emitter/src/EventEmitter.ts, line 199

Overrides:

• EventEmitter#trigger

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Example

import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
     

Returns:

Type

boolean

setSelectedTargetsByPoints(point1, point2) → {SelectedTargetsWithRect}

Source:

• packages/selecto/src/SelectoManager.tsx, line 176

Returns:

Type

SelectedTargetsWithRect

setSelectedTargets(selectedTargets) → {SelectedTargets}

Source:

• packages/selecto/src/SelectoManager.tsx, line 155

Returns:

Type

SelectedTargets

selectTargetsByPoints(startPoint, endPoint)

Source:

• packages/selecto/src/SelectoManager.tsx, line 207

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:

• node_modules/@scena/event-emitter/src/EventEmitter.ts, line 101

Overrides:

• EventEmitter#once

Example

import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});

Returns:

Type

Promise<OnEvent<Param, this>>

on(eventName, listeneropt) → {this}

Source:

• node_modules/@scena/event-emitter/src/EventEmitter.ts, line 32

Overrides:

• EventEmitter#on

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

on(events) → {this}

Example

import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});

Returns:

Type

this

off(eventNameopt, listeneropt) → {this}

Source:

• node_modules/@scena/event-emitter/src/EventEmitter.ts, line 63

Overrides:

• EventEmitter#off

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

off(events) → {this}

Example

import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);

Returns:

Type

this

getSelectedTargets() → {ElementType[]}

Source:

• packages/selecto/src/SelectoManager.tsx, line 240

Returns:

Type

ElementType[]

getSelectableElements()

Source:

• packages/selecto/src/SelectoManager.tsx, line 297

findSelectableTargets(dataopt)

Source:

• packages/selecto/src/SelectoManager.tsx, line 346

emit(eventName, paramopt) → {boolean}

Source:

• node_modules/@scena/event-emitter/src/EventEmitter.ts, line 134

Overrides:

• EventEmitter#emit

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Example

import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});

Returns:

Type

boolean

destroy()

Source:

• packages/selecto/src/SelectoManager.tsx, line 262

clickTarget(e, clickedTargetopt) → {this}

Source:

• packages/selecto/src/SelectoManager.tsx, line 421

Returns:

Type

this

checkScroll()

Source:

• packages/selecto/src/SelectoManager.tsx, line 326

Type Definitions

BoundContainer

Source:

• packages/selecto/src/types.ts, line 175

Properties:

Type:

• TSInterface

CurrentTarget<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 216

Properties:

Type:

• TSInterface

OnDrag<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 376

Properties:

Type:

• TSInterface

OnDragEnd<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 386

Properties:

Type:

• TSInterface

OnDragStart<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 365

Properties:

Type:

• TSInterface

OnSelect<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 286

Properties:

Type:

• TSInterface

OnSelectEnd<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 305

Properties:

Type:

• TSInterface

OnSelectEvent<T = Selecto>

Source:

• packages/selecto/src/types.ts, line 263

Properties:

Type:

• TSInterface

SelectedTargets

Source:

• packages/selecto/src/types.ts, line 227

Properties:

Type:

• TSInterface

SelectedTargetsWithRect

Source:

• packages/selecto/src/types.ts, line 250

Properties:

Type:

• TSInterface

SelectoOptions

Source:

• packages/selecto/src/types.ts, line 20

Properties:

Type:

• TSInterface

Events

drag

Source:

• packages/selecto/src/SelectoManager.tsx, line 1228

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  selectByClick: true,
  selectFromInside: false,
});

selecto.on("drag", e => {
  e.stop();
}).on("select", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
});

dragEnd

Source:

• packages/selecto/src/SelectoManager.tsx, line 1289

dragStart

Source:

• packages/selecto/src/SelectoManager.tsx, line 1057

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  selectByClick: true,
  selectFromInside: false,
});

selecto.on("dragStart", e => {
  if (e.inputEvent.target.tagName === "SPAN") {
    e.stop();
  }
}).on("select", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
});

keydown

Source:

• packages/selecto/src/SelectoManager.tsx, line 1366

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  toggleContinueSelect: "shift";
  keyContainer: window,
});

selecto.on("keydown", () => {
  document.querySelector(".button").classList.add("selected");
}).on("keyup", () => {
  document.querySelector(".button").classList.remove("selected");
}).on("select", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
});

keyup

Source:

• packages/selecto/src/SelectoManager.tsx, line 1417

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  toggleContinueSelect: "shift";
  keyContainer: window,
});

selecto.on("keydown", () => {
  document.querySelector(".button").classList.add("selected");
}).on("keyup", () => {
  document.querySelector(".button").classList.remove("selected");
}).on("select", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
});

select

Source:

• packages/selecto/src/SelectoManager.tsx, line 829

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  selectByClick: true,
  selectFromInside: false,
});

selecto.on("select", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
});

selectEnd

Source:

• packages/selecto/src/SelectoManager.tsx, line 885

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  selectByClick: true,
  selectFromInside: false,
});

selecto.on("selectStart", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
}).on("selectEnd", e => {
  e.afterAdded.forEach(el => {
    el.classList.add("selected");
  });
  e.afterRemoved.forEach(el => {
    el.classList.remove("selected");
  });
});

selectStart

Source:

• packages/selecto/src/SelectoManager.tsx, line 788

Example

import Selecto from "selecto";

const selecto = new Selecto({
  container: document.body,
  selectByClick: true,
  selectFromInside: false,
});

selecto.on("selectStart", e => {
  e.added.forEach(el => {
    el.classList.add("selected");
  });
  e.removed.forEach(el => {
    el.classList.remove("selected");
  });
}).on("selectEnd", e => {
  e.afterAdded.forEach(el => {
    el.classList.add("selected");
  });
  e.afterRemoved.forEach(el => {
    el.classList.remove("selected");
  });
});