Overrides & Exposed Methods (Advanced)

Disclaimer: By hooking into the selection you’re modifying internal behavior. Don’t expect support for any misbehaving caused by hooking in. We will try our best to not introduce breaking changes the overrideable methods but if you use them, it’s best if you double check each time before updating the library even on minor changes.

DragSelect exposes some internal methods that are available to override. It is not recommended to use them unless Methods or Events are not possible for your use-case and you know what you are doing.

For a concrete example on how to use the overrides see CustomSelectionFilter.

.Selection

method	properties	returns	usage
filterSelected	{ select: Map<DSElement, DSBoundingRect>, unselect: Map<DSElement, DSBoundingRect>, selectorRect: DSBoundingRect }	{ select: Map<DSElement, DSBoundingRect>, unselect: Map<DSElement, DSBoundingRect> }	Can be overridden to apply further filtering logic after the items to select are identified but before they actually get selected. Is expected to return the select / unselect maps in the same shape as passed in

Example

const ds = new DragSelect({});
ds.Selection.filterSelected = (obj) => obj;

.Drag

method	properties	returns	usage
filterDragElements	{ elements: DSElement[], direction: { x: number, y: number }, }	{ elements: DSElement[], direction: { x: number, y: number }, }	Can be overridden to apply further filtering logic after the items to move are identified but before they actually get moved. Is expected to return the elements in the same shape as passed in.

Example

const ds = new DragSelect({});
ds.Drag.filterDragElements = (obj) => obj;

Exposed Helper Methods

method	properties	usage
isCollision	el1: { left:number, right:number, top:number, bottom:number }, el2: { left:number, right:number, top:number, bottom:number }, percent:number	Axis-Aligned Bounding Box Collision Detection. (Docs)

Example

DragSelect.isCollision(
  document.querySelector("#foo").getBoundingClientRect(),
  document.querySelector("#bar").getBoundingClientRect(),
  1
);

Example

const ds = new DragSelect({});
ds.Selection.filterSelected = (obj) => {
  // do something here
  console.log("filterSelected", obj);
  // you can also use helper methods:
  if (
    DragSelect.isCollision(
      document.querySelector("#foo").getBoundingClientRect(),
      obj.selectorRect,
      1
    )
  ) {
    console.log("#foo is inside the selector");
  }
  // return what needs to be returned
  return obj;
};

Something is missing?

Feel free to open a feature request for more overrides.