Type Definitions
CallbackObject
The Object that is passed back to any callback method
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
items |
Array.<(HTMLElement|SVGElement|any)>
|
<optional> |
The items currently selected |
event |
MouseEvent
|
TouchEvent
|
KeyboardEvent
|
Event
|
<optional> |
The respective event object |
item |
HTMLElement
|
SVGElement
|
any
|
<optional> |
The single item currently interacted with |
isDragging |
boolean
|
<optional> |
Whether the interaction is a drag or a select |
isDraggingKeyboard |
boolean
|
<optional> |
Whether or not the drag interaction is via keyboard |
key |
string
|
<optional> |
Pressed key (lowercase) |
scroll_directions |
Array.<('top'|'bottom'|'left'|'right'|undefined)>
|
<optional> |
|
scroll_multiplier |
number
|
<optional> |
Type:
-
Object
DSArea
area within which you can drag
Type:
-
HTMLElement
|SVGElement
|HTMLDocument
DSCallbackNames
the name of the callback
Type:
DSElement
a single element that can be selected
Type:
-
HTMLElement
|SVGElement
DSElements
the elements that can be selected
Type:
-
Array.<(HTMLElement|SVGElement)>
DSEvent
en event from a touch or mouse interaction
Type:
-
MouseEvent
|TouchEvent
DSEventNames
Type:
-
'dragmove'
|'autoscroll'
|'dragstart'
|'elementselect'
|'elementunselect'
|'callback'
DSInputElements
the elements that can be selected
Type:
-
Array.<(HTMLElement|SVGElement)>
|HTMLElement
|SVGElement
DSInternalEventNames
Type:
-
'Interaction:init'
|'Interaction:start'
|'Interaction:end'
|'Interaction:update'
|'Area:modified'
|'Area:scroll'
|'PointerStore:updated'
|'Selected:added'
|'Selected:removed'
|'Selectable:click'
|'Selectable:pointer'
|'KeyStore:down'
|'KeyStore:up'
DSInternalEventNamesPre
Type:
-
'Interaction:init:pre'
|'Interaction:start:pre'
|'Interaction:end:pre'
|'Interaction:update:pre'
|'Area:modified:pre'
|'Area:scroll:pre'
|'PointerStore:updated:pre'
|'Selected:added:pre'
|'Selected:removed:pre'
|'Selectable:click:pre'
|'Selectable:pointer:pre'
|'KeyStore:down:pre'
|'KeyStore:up:pre'
DSMultiSelectKeys
An array of keys that allows switching to the multi-select mode
Type:
-
Array.<('Shift'|'Control'|'Meta'|string)>
Settings
The Settings to be passed to the Class
Properties:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
area |
HTMLElement
|
SVGElement
|
HTMLDocument
|
<optional> |
document | area in which you can drag. If not provided it will be the whole document |
selectables |
DSInputElements
|
<optional> |
[] | the elements that can be selected |
autoScrollSpeed |
number
|
<optional> |
5 | Speed in which the area scrolls while selecting (if available). Unit is pixel per movement. |
overflowTolerance |
Vect2
|
<optional> |
{x:25,y:25} | Tolerance for autoScroll (how close one has to be near an edges for autoScroll to start) |
zoom |
number
|
<optional> |
1 | Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom. |
customStyles |
boolean
|
<optional> |
false | if set to true, no styles (except for position absolute) will be applied by default |
multiSelectMode |
boolean
|
<optional> |
false | Add newly selected elements to the selection instead of replacing them |
multiSelectToggling |
boolean
|
<optional> |
true | Whether or not to toggle already active elements while multi-selecting |
multiSelectKeys |
DSMultiSelectKeys
|
<optional> |
['Control', 'Shift', 'Meta'] | Keys that allows switching to the multi-select mode (see the multiSelectMode option). Any key value is possible ([see MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)). Note that the best support is given for Control, Shift and Meta. Provide an empty array `[]` if you want to turn off the functionality. |
selector |
HTMLElement
|
<optional> |
HTMLElement | the square that will draw the selection |
draggability |
boolean
|
<optional> |
true | When a user is dragging on an already selected element, the selection is dragged. |
immediateDrag |
boolean
|
<optional> |
true | Whether an element is draggable from the start or needs to be selected first |
keyboardDrag |
boolean
|
<optional> |
true | Whether or not the user can drag with the keyboard (we don't recommend disabling it) |
dragKeys |
DSDragKeys
|
<optional> |
{up:['ArrowUp'],down:['ArrowDown'],left:['ArrowLeft'],righ:['ArrowRight']} | The keys available to drag element using the keyboard. |
keyboardDragSpeed |
number
|
<optional> |
10 | The speed at which elements are dragged using the keyboard. In pixels per keydown. |
useTransform |
boolean
|
<optional> |
true | Whether to use hardware accelerated css transforms when dragging or top/left instead |
hoverClass |
string
|
<optional> |
ds-hover | the class assigned to the mouse hovered items |
selectableClass |
string
|
<optional> |
ds-selectable | the class assigned to the elements that can be selected |
selectedClass |
string
|
<optional> |
ds-selected | the class assigned to the selected items |
selectorClass |
string
|
<optional> |
ds-selector | the class assigned to the square selector helper |
selectorAreaClass |
string
|
<optional> |
ds-selector-area | the class assigned to the square in which the selector resides. By default it's invisible |
callback |
DSCallback
|
<optional> |
Deprecated: please use DragSelect.subscribe('callback', callback) instead | |
onDragMove |
DSCallback
|
<optional> |
Deprecated: please use DragSelect.subscribe('onDragMove', onDragMove) instead | |
onDragStartBegin |
DSCallback
|
<optional> |
Deprecated: please use DragSelect.subscribe('onDragStartBegin', onDragStartBegin) instead | |
onDragStart |
DSCallback
|
<optional> |
Deprecated: please use DragSelect.subscribe('onDragStart', onDragStart) instead | |
onElementSelect |
DSCallback
|
<optional> |
Deprecated: please use DragSelect.subscribe('onElementSelect', onElementSelect) instead | |
onElementUnselect |
DSCallback
|
<optional> |
Deprecated: please use DragSelect.subscribe('onElementUnselect', onElementUnselect) instead |
Type:
-
Object