@viselect/vanilla - npm Package Compare versions

Comparing version 3.8.1 to 3.9.0

dist/src/index.d.ts

 import { EventTarget } from './EventEmitter';
-import { ScrollEvent, SelectionEvents, PartialSelectionOptions } from './types';
+import { AreaLocation, ScrollEvent, SelectionEvents, PartialSelectionOptions } from './types';
 import { SelectAllSelectors } from './utils/selectAll';
@@ -47,12 +47,12 @@ export * from './types';
      * @param evt A MouseEvent / TouchEvent-like object
-     * @param silent If beforestart should be fired,
+     * @param silent If beforestart should be fired
      */
     trigger(evt: MouseEvent | TouchEvent, silent?: boolean): void;
     /**
-     * Can be used if during a selection elements have been added.
-     * Will update everything that can be selected.
+     * Can be used if during a selection elements have been added
+     * Will update everything that can be selected
      */
     resolveSelectables(): void;
     /**
-     * Same as deselecting, but for all elements currently selected.
+     * Same as deselecting, but for all elements currently selected
      * @param includeStored If the store should also get cleared
@@ -71,4 +71,18 @@ * @param quiet If move / stop events should be fired
     /**
-     * Cancel the current selection process, pass true to fire a stop event after cancel.
+     * @returns {Element[]} Available selectable elements for current selection
      */
+    getSelectables(): Element[];
+    /**
+     * Set the location of the selection area
+     * @param location A partial AreaLocation object
+     */
+    setAreaLocation(location: Partial<AreaLocation>): void;
+    /**
+     * @returns {AreaLocation} The current location of the selection area
+     */
+    getAreaLocation(): AreaLocation;
+    /**
+     * Cancel the current selection process, pass true to fire a stop event after cancel
+     * @param keepEvent If a stop event should be fired
+     */
     cancel(keepEvent?: boolean): void;
@@ -79,16 +93,22 @@ /**
     destroy(): void;
-    disable: () => void;
+    /**
+     * Enable selecting elements
+     */
     enable: (activate?: boolean) => void;
     /**
+     * Disable selecting elements
+     */
+    disable: () => void;
+    /**
      * Adds elements to the selection
-     * @param query - CSS Query, can be an array of queries
-     * @param quiet - If this should not trigger the move event
+     * @param query CSS Query, can be an array of queries
+     * @param quiet If this should not trigger the move event
      */
     select(query: SelectAllSelectors, quiet?: boolean): Element[];
     /**
-     * Removes a particular element from the selection.
-     * @param query - CSS Query, can be an array of queries
-     * @param quiet - If this should not trigger the move event
+     * Removes a particular element from the selection
+     * @param query CSS Query, can be an array of queries
+     * @param quiet If this should not trigger the move event
      */
     deselect(query: SelectAllSelectors, quiet?: boolean): void;
 }

dist/src/utils/events.d.ts

 type AnyFunction = (...arg: any) => any;
-export type EventBindingArgs = [
-    (EventTarget | undefined) | (EventTarget | undefined)[],
-    string | string[],
-    AnyFunction,
-    Record<string, unknown>?
-];
 /**
@@ -16,3 +10,3 @@ * Add event(s) to element(s).
  */
-export declare const on: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => EventBindingArgs;
+export declare const on: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => void;
 /**
@@ -26,3 +20,3 @@ * Remove event(s) from element(s).
  */
-export declare const off: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => EventBindingArgs;
+export declare const off: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => void;
 /**
@@ -29,0 +23,0 @@ * Simplifies a touch / mouse-event

dist/src/utils/selectAll.d.ts

@@ -1,2 +0,2 @@
-export type SelectAllSelectors = readonly (string | Element)[] | string | Element;
+export type SelectAllSelectors = (string | Element)[] | string | Element;
 /**
@@ -3,0 +3,0 @@ * Takes a selector (or array of selectors) and returns the matched nodes.

dist/viselect.umd.js

@@ -1,3 +0,3 @@
-/*! @viselect/vanilla v3.8.1 MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */
-(function(A,E){typeof exports=="object"&&typeof module<"u"?module.exports=E():typeof define=="function"&&define.amd?define(E):(A=typeof globalThis<"u"?globalThis:A||self,A.SelectionArea=E())})(this,function(){"use strict";class A{constructor(){this._listeners=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(e,t){const s=this._listeners.get(e)??new Set;return this._listeners.set(e,s),s.add(t),this}removeEventListener(e,t){var s;return(s=this._listeners.get(e))==null||s.delete(t),this}dispatchEvent(e,...t){let s=!0;for(const i of this._listeners.get(e)??[])s=i(...t)!==!1&&s;return s}unbindAllListeners(){this._listeners.clear()}}const E=(l,e="px")=>typeof l=="number"?l+e:l,v=({style:l},e,t)=>{if(typeof e=="object")for(const[s,i]of Object.entries(e))i!==void 0&&(l[s]=E(i));else t!==void 0&&(l[e]=E(t))},M=(l=0,e=0,t=0,s=0)=>{const i={x:l,y:e,width:t,height:s,top:e,left:l,right:l+t,bottom:e+s};return{...i,toJSON:()=>JSON.stringify(i)}},j=l=>{let e,t=-1,s=!1;return{next:(...i)=>{e=i,s||(s=!0,t=requestAnimationFrame(()=>{l(...e),s=!1}))},cancel:()=>{cancelAnimationFrame(t),s=!1}}},k=(l,e,t="touch")=>{switch(t){case"center":{const s=e.left+e.width/2,i=e.top+e.height/2;return s>=l.left&&s<=l.right&&i>=l.top&&i<=l.bottom}case"cover":return e.left>=l.left&&e.top>=l.top&&e.right<=l.right&&e.bottom<=l.bottom;case"touch":return l.right>=e.left&&l.left<=e.right&&l.bottom>=e.top&&l.top<=e.bottom}},K=()=>matchMedia("(hover: none), (pointer: coarse)").matches,X=()=>"safari"in window,C=l=>(e,t,s,i={})=>{e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(t)||(t=[t]);for(const o of e)if(o)for(const n of t)o[l](n,s,{capture:!1,...i});return[e,t,s,i]},y=C("addEventListener"),m=C("removeEventListener"),T=l=>{var i;const{clientX:e,clientY:t,target:s}=((i=l.touches)==null?void 0:i[0])??l;return{x:e,y:t,target:s}},x=(l,e=document)=>{const t=Array.isArray(l)?l:[l];let s=[];for(let i=0,o=t.length;i<o;i++){const n=t[i];typeof n=="string"?s=s.concat(Array.from(e.querySelectorAll(n))):n instanceof Element&&s.push(n)}return s},Y=(l,e)=>e.some(t=>typeof t=="number"?l.button===t:typeof t=="object"?t.button!==l.button?!1:t.modifiers.every(s=>{switch(s){case"alt":return l.altKey;case"ctrl":return l.ctrlKey||l.metaKey;case"shift":return l.shiftKey}}):!1),{abs:b,max:R,min:B,ceil:D}=Math,P=(l=[])=>({stored:l,selected:[],touched:[],changed:{added:[],removed:[]}}),L=class L extends A{constructor(e){var o,n,r,a,u;super(),this._selection=P(),this._targetBoundaryScrolled=!0,this._selectables=[],this._areaLocation={y1:0,x2:0,y2:0,x1:0},this._areaRect=M(),this._singleClick=!0,this._scrollAvailable=!0,this._scrollingActive=!1,this._scrollSpeed={x:0,y:0},this._scrollDelta={x:0,y:0},this._lastMousePosition={x:0,y:0},this.disable=this._toggleStartEvents.bind(this,!1),this.enable=this._toggleStartEvents,this._options={selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,startAreas:["html"],boundaries:["html"],container:"body",...e,behaviour:{overlap:"invert",intersect:"touch",triggers:[0],...e.behaviour,startThreshold:(o=e.behaviour)!=null&&o.startThreshold?typeof e.behaviour.startThreshold=="number"?e.behaviour.startThreshold:{x:10,y:10,...e.behaviour.startThreshold}:{x:10,y:10},scrolling:{speedDivider:10,manualSpeed:750,...(n=e.behaviour)==null?void 0:n.scrolling,startScrollMargins:{x:0,y:0,...(a=(r=e.behaviour)==null?void 0:r.scrolling)==null?void 0:a.startScrollMargins}}},features:{range:!0,touch:!0,deselectOnBlur:!1,...e.features,singleTap:{allow:!0,intersect:"native",...(u=e.features)==null?void 0:u.singleTap}}};for(const _ of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))typeof this[_]=="function"&&(this[_]=this[_].bind(this));const{document:t,selectionAreaClass:s,selectionContainerClass:i}=this._options;this._area=t.createElement("div"),this._clippingElement=t.createElement("div"),this._clippingElement.appendChild(this._area),this._area.classList.add(s),i&&this._clippingElement.classList.add(i),v(this._area,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),v(this._clippingElement,{overflow:"hidden",position:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this._frame=j(_=>{this._recalculateSelectionAreaRect(),this._updateElementSelection(),this._emitEvent("move",_),this._redrawSelectionArea()}),this.enable()}_toggleStartEvents(e=!0){const{document:t,features:s}=this._options,i=e?y:m;i(t,"mousedown",this._onTapStart),s.touch&&i(t,"touchstart",this._onTapStart,{passive:!1})}_onTapStart(e,t=!1){const{x:s,y:i,target:o}=T(e),{document:n,startAreas:r,boundaries:a,features:u,behaviour:_}=this._options,c=o.getBoundingClientRect();if(e instanceof MouseEvent&&!Y(e,_.triggers))return;const p=x(r,n),g=x(a,n);this._targetElement=g.find(S=>k(S.getBoundingClientRect(),c));const f=e.composedPath(),d=p.find(S=>f.includes(S));if(this._targetBoundary=g.find(S=>f.includes(S)),!this._targetElement||!d||!this._targetBoundary||!t&&this._emitEvent("beforestart",e)===!1)return;this._areaLocation={x1:s,y1:i,x2:0,y2:0};const h=n.scrollingElement??n.body;this._scrollDelta={x:h.scrollLeft,y:h.scrollTop},this._singleClick=!0,this.clearSelection(!1,!0),y(n,["touchmove","mousemove"],this._delayedTapMove,{passive:!1}),y(n,["mouseup","touchcancel","touchend"],this._onTapStop),y(n,"scroll",this._onScroll),u.deselectOnBlur&&(this._targetBoundaryScrolled=!1,y(this._targetBoundary,"scroll",this._onStartAreaScroll))}_onSingleTap(e){const{singleTap:{intersect:t},range:s}=this._options.features,i=T(e);let o;if(t==="native")o=i.target;else if(t==="touch"){this.resolveSelectables();const{x:r,y:a}=i;o=this._selectables.find(u=>{const{right:_,left:c,top:p,bottom:g}=u.getBoundingClientRect();return r<_&&r>c&&a<g&&a>p})}if(!o)return;for(this.resolveSelectables();!this._selectables.includes(o);)if(o.parentElement)o=o.parentElement;else{this._targetBoundaryScrolled||this.clearSelection();return}const{stored:n}=this._selection;if(this._emitEvent("start",e),e.shiftKey&&s&&this._latestElement){const r=this._latestElement,[a,u]=r.compareDocumentPosition(o)&4?[o,r]:[r,o],_=[...this._selectables.filter(c=>c.compareDocumentPosition(a)&4&&c.compareDocumentPosition(u)&2),a,u];this.select(_),this._latestElement=r}else n.includes(o)&&(n.length===1||e.ctrlKey||n.every(r=>this._selection.stored.includes(r)))?this.deselect(o):(this.select(o),this._latestElement=o)}_delayedTapMove(e){const{container:t,document:s,behaviour:{startThreshold:i}}=this._options,{x1:o,y1:n}=this._areaLocation,{x:r,y:a}=T(e);if(typeof i=="number"&&b(r+a-(o+n))>=i||typeof i=="object"&&b(r-o)>=i.x||b(a-n)>=i.y){if(m(s,["mousemove","touchmove"],this._delayedTapMove,{passive:!1}),this._emitEvent("beforedrag",e)===!1){m(s,["mouseup","touchcancel","touchend"],this._onTapStop);return}y(s,["mousemove","touchmove"],this._onTapMove,{passive:!1}),v(this._area,"display","block"),x(t,s)[0].appendChild(this._clippingElement),this.resolveSelectables(),this._singleClick=!1,this._targetRect=this._targetElement.getBoundingClientRect(),this._scrollAvailable=this._targetElement.scrollHeight!==this._targetElement.clientHeight||this._targetElement.scrollWidth!==this._targetElement.clientWidth,this._scrollAvailable&&(y(this._targetElement,"wheel",this._wheelScroll,{passive:!1}),y(this._options.document,"keydown",this._keyboardScroll,{passive:!1}),this._selectables=this._selectables.filter(u=>this._targetElement.contains(u))),this._setupSelectionArea(),this._emitEvent("start",e),this._onTapMove(e)}this._handleMoveEvent(e)}_setupSelectionArea(){const{_clippingElement:e,_targetElement:t,_area:s}=this,i=this._targetRect=t.getBoundingClientRect();this._scrollAvailable?(v(e,{top:i.top,left:i.left,width:i.width,height:i.height}),v(s,{marginTop:-i.top,marginLeft:-i.left})):(v(e,{top:0,left:0,width:"100%",height:"100%"}),v(s,{marginTop:0,marginLeft:0}))}_onTapMove(e){const{_scrollSpeed:t,_areaLocation:s,_options:i,_frame:o}=this,{speedDivider:n}=i.behaviour.scrolling,r=this._targetElement,{x:a,y:u}=T(e);if(s.x2=a,s.y2=u,this._lastMousePosition.x=a,this._lastMousePosition.y=u,this._scrollAvailable&&!this._scrollingActive&&(t.y||t.x)){this._scrollingActive=!0;const _=()=>{if(!t.x&&!t.y){this._scrollingActive=!1;return}const{scrollTop:c,scrollLeft:p}=r;t.y&&(r.scrollTop+=D(t.y/n),s.y1-=r.scrollTop-c),t.x&&(r.scrollLeft+=D(t.x/n),s.x1-=r.scrollLeft-p),o.next(e),requestAnimationFrame(_)};requestAnimationFrame(_)}else o.next(e);this._handleMoveEvent(e)}_handleMoveEvent(e){const{features:t}=this._options;(t.touch&&K()||this._scrollAvailable&&X())&&e.preventDefault()}_onScroll(){const{_scrollDelta:e,_options:{document:t}}=this,{scrollTop:s,scrollLeft:i}=t.scrollingElement??t.body;this._areaLocation.x1+=e.x-i,this._areaLocation.y1+=e.y-s,e.x=i,e.y=s,this._setupSelectionArea(),this._frame.next(null)}_onStartAreaScroll(){this._targetBoundaryScrolled=!0,m(this._targetElement,"scroll",this._onStartAreaScroll)}_wheelScroll(e){const{manualSpeed:t}=this._options.behaviour.scrolling,s=e.deltaY?e.deltaY>0?1:-1:0,i=e.deltaX?e.deltaX>0?1:-1:0;this._scrollSpeed.y+=s*t,this._scrollSpeed.x+=i*t,this._onTapMove(e),e.preventDefault()}_keyboardScroll(e){const{manualSpeed:t}=this._options.behaviour.scrolling,s=e.key==="ArrowLeft"?-1:e.key==="ArrowRight"?1:0,i=e.key==="ArrowUp"?-1:e.key==="ArrowDown"?1:0;this._scrollSpeed.x+=Math.sign(s)*t,this._scrollSpeed.y+=Math.sign(i)*t,e.preventDefault(),this._onTapMove({clientX:this._lastMousePosition.x,clientY:this._lastMousePosition.y,preventDefault:()=>{}})}_recalculateSelectionAreaRect(){const{_scrollSpeed:e,_areaLocation:t,_targetElement:s,_options:i}=this,{scrollTop:o,scrollHeight:n,clientHeight:r,scrollLeft:a,scrollWidth:u,clientWidth:_}=s,c=this._targetRect,{x1:p,y1:g}=t;let{x2:f,y2:d}=t;const{behaviour:{scrolling:{startScrollMargins:h}}}=i;f<c.left+h.x?(e.x=a?-b(c.left-f+h.x):0,f=f<c.left?c.left:f):f>c.right-h.x?(e.x=u-a-_?b(c.left+c.width-f-h.x):0,f=f>c.right?c.right:f):e.x=0,d<c.top+h.y?(e.y=o?-b(c.top-d+h.y):0,d=d<c.top?c.top:d):d>c.bottom-h.y?(e.y=n-o-r?b(c.top+c.height-d-h.y):0,d=d>c.bottom?c.bottom:d):e.y=0;const S=B(p,f),O=B(g,d),H=R(p,f),N=R(g,d);this._areaRect=M(S,O,H-S,N-O)}_redrawSelectionArea(){const{x:e,y:t,width:s,height:i}=this._areaRect,{style:o}=this._area;o.left=`${e}px`,o.top=`${t}px`,o.width=`${s}px`,o.height=`${i}px`}_onTapStop(e,t){var n;const{document:s,features:i}=this._options,{_singleClick:o}=this;m(this._targetElement,"scroll",this._onStartAreaScroll),m(s,["mousemove","touchmove"],this._delayedTapMove),m(s,["touchmove","mousemove"],this._onTapMove),m(s,["mouseup","touchcancel","touchend"],this._onTapStop),m(s,"scroll",this._onScroll),this._keepSelection(),e&&o&&i.singleTap.allow?this._onSingleTap(e):!o&&!t&&(this._updateElementSelection(),this._emitEvent("stop",e)),this._scrollSpeed.x=0,this._scrollSpeed.y=0,m(this._targetElement,"wheel",this._wheelScroll,{passive:!0}),m(this._options.document,"keydown",this._keyboardScroll,{passive:!0}),this._clippingElement.remove(),(n=this._frame)==null||n.cancel(),v(this._area,"display","none")}_updateElementSelection(){const{_selectables:e,_options:t,_selection:s,_areaRect:i}=this,{stored:o,selected:n,touched:r}=s,{intersect:a,overlap:u}=t.behaviour,_=u==="invert",c=[],p=[],g=[];for(let d=0;d<e.length;d++){const h=e[d];if(k(i,h.getBoundingClientRect(),a)){if(n.includes(h))o.includes(h)&&!r.includes(h)&&r.push(h);else if(_&&o.includes(h)){g.push(h);continue}else p.push(h);c.push(h)}}_&&p.push(...o.filter(d=>!n.includes(d)));const f=u==="keep";for(let d=0;d<n.length;d++){const h=n[d];!c.includes(h)&&!(f&&o.includes(h))&&g.push(h)}s.selected=c,s.changed={added:p,removed:g},this._latestElement=void 0}_emitEvent(e,t){return this.emit(e,{event:t,store:this._selection,selection:this})}_keepSelection(){const{_options:e,_selection:t}=this,{selected:s,changed:i,touched:o,stored:n}=t,r=s.filter(a=>!n.includes(a));switch(e.behaviour.overlap){case"drop":{t.stored=[...r,...n.filter(a=>!o.includes(a))];break}case"invert":{t.stored=[...r,...n.filter(a=>!i.removed.includes(a))];break}case"keep":{t.stored=[...n,...s.filter(a=>!n.includes(a))];break}}}trigger(e,t=!0){this._onTapStart(e,t)}resolveSelectables(){this._selectables=x(this._options.selectables,this._options.document)}clearSelection(e=!0,t=!1){const{selected:s,stored:i,changed:o}=this._selection;o.added=[],o.removed.push(...s,...e?i:[]),t||(this._emitEvent("move",null),this._emitEvent("stop",null)),this._selection=P(e?[]:i)}getSelection(){return this._selection.stored}getSelectionArea(){return this._area}cancel(e=!1){this._onTapStop(null,!e)}destroy(){this.cancel(),this.disable(),this._clippingElement.remove(),super.unbindAllListeners()}select(e,t=!1){const{changed:s,selected:i,stored:o}=this._selection,n=x(e,this._options.document).filter(r=>!i.includes(r)&&!o.includes(r));return o.push(...n),i.push(...n),s.added.push(...n),s.removed=[],this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)),n}deselect(e,t=!1){const{selected:s,stored:i,changed:o}=this._selection,n=x(e,this._options.document).filter(r=>s.includes(r)||i.includes(r));this._selection.stored=i.filter(r=>!n.includes(r)),this._selection.selected=s.filter(r=>!n.includes(r)),this._selection.changed.added=[],this._selection.changed.removed.push(...n.filter(r=>!o.removed.includes(r))),this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null))}};L.version="3.8.1";let w=L;return w});
+/*! @viselect/vanilla v3.9.0 MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */
+(function(A,E){typeof exports=="object"&&typeof module<"u"?module.exports=E():typeof define=="function"&&define.amd?define(E):(A=typeof globalThis<"u"?globalThis:A||self,A.SelectionArea=E())})(this,function(){"use strict";class A{constructor(){this._listeners=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(e,t){const s=this._listeners.get(e)??new Set;return this._listeners.set(e,s),s.add(t),this}removeEventListener(e,t){var s;return(s=this._listeners.get(e))==null||s.delete(t),this}dispatchEvent(e,...t){let s=!0;for(const i of this._listeners.get(e)??[])s=i(...t)!==!1&&s;return s}unbindAllListeners(){this._listeners.clear()}}const E=(l,e="px")=>typeof l=="number"?l+e:l,v=({style:l},e,t)=>{if(typeof e=="object")for(const[s,i]of Object.entries(e))i!==void 0&&(l[s]=E(i));else t!==void 0&&(l[e]=E(t))},k=(l=0,e=0,t=0,s=0)=>{const i={x:l,y:e,width:t,height:s,top:e,left:l,right:l+t,bottom:e+s};return{...i,toJSON:()=>JSON.stringify(i)}},K=l=>{let e,t=-1,s=!1;return{next:(...i)=>{e=i,s||(s=!0,t=requestAnimationFrame(()=>{l(...e),s=!1}))},cancel:()=>{cancelAnimationFrame(t),s=!1}}},C=(l,e,t="touch")=>{switch(t){case"center":{const s=e.left+e.width/2,i=e.top+e.height/2;return s>=l.left&&s<=l.right&&i>=l.top&&i<=l.bottom}case"cover":return e.left>=l.left&&e.top>=l.top&&e.right<=l.right&&e.bottom<=l.bottom;case"touch":return l.right>=e.left&&l.left<=e.right&&l.bottom>=e.top&&l.top<=e.bottom}},X=()=>matchMedia("(hover: none), (pointer: coarse)").matches,Y=()=>"safari"in window,w=l=>Array.isArray(l)?l:[l],B=l=>(e,t,s,i={})=>{(e instanceof HTMLCollection||e instanceof NodeList)&&(e=Array.from(e)),t=w(t),e=w(e);for(const o of e)if(o)for(const n of t)o[l](n,s,{capture:!1,...i})},y=B("addEventListener"),m=B("removeEventListener"),T=l=>{var i;const{clientX:e,clientY:t,target:s}=((i=l.touches)==null?void 0:i[0])??l;return{x:e,y:t,target:s}},x=(l,e=document)=>w(l).map(t=>typeof t=="string"?Array.from(e.querySelectorAll(t)):t instanceof Element?t:null).flat().filter(Boolean),H=(l,e)=>e.some(t=>typeof t=="number"?l.button===t:typeof t=="object"?t.button!==l.button?!1:t.modifiers.every(s=>{switch(s){case"alt":return l.altKey;case"ctrl":return l.ctrlKey||l.metaKey;case"shift":return l.shiftKey}}):!1),{abs:b,max:R,min:D,ceil:P}=Math,O=(l=[])=>({stored:l,selected:[],touched:[],changed:{added:[],removed:[]}}),M=class M extends A{constructor(e){var o,n,r,a,u;super(),this._selection=O(),this._targetBoundaryScrolled=!0,this._selectables=[],this._areaLocation={y1:0,x2:0,y2:0,x1:0},this._areaRect=k(),this._singleClick=!0,this._scrollAvailable=!0,this._scrollingActive=!1,this._scrollSpeed={x:0,y:0},this._scrollDelta={x:0,y:0},this._lastMousePosition={x:0,y:0},this.enable=this._toggleStartEvents,this.disable=this._toggleStartEvents.bind(this,!1),this._options={selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,startAreas:["html"],boundaries:["html"],container:"body",...e,behaviour:{overlap:"invert",intersect:"touch",triggers:[0],...e.behaviour,startThreshold:(o=e.behaviour)!=null&&o.startThreshold?typeof e.behaviour.startThreshold=="number"?e.behaviour.startThreshold:{x:10,y:10,...e.behaviour.startThreshold}:{x:10,y:10},scrolling:{speedDivider:10,manualSpeed:750,...(n=e.behaviour)==null?void 0:n.scrolling,startScrollMargins:{x:0,y:0,...(a=(r=e.behaviour)==null?void 0:r.scrolling)==null?void 0:a.startScrollMargins}}},features:{range:!0,touch:!0,deselectOnBlur:!1,...e.features,singleTap:{allow:!0,intersect:"native",...(u=e.features)==null?void 0:u.singleTap}}};for(const _ of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))typeof this[_]=="function"&&(this[_]=this[_].bind(this));const{document:t,selectionAreaClass:s,selectionContainerClass:i}=this._options;this._area=t.createElement("div"),this._clippingElement=t.createElement("div"),this._clippingElement.appendChild(this._area),this._area.classList.add(s),i&&this._clippingElement.classList.add(i),v(this._area,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),v(this._clippingElement,{overflow:"hidden",position:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this._frame=K(_=>{this._recalculateSelectionAreaRect(),this._updateElementSelection(),this._emitEvent("move",_),this._redrawSelectionArea()}),this.enable()}_toggleStartEvents(e=!0){const{document:t,features:s}=this._options,i=e?y:m;i(t,"mousedown",this._onTapStart),s.touch&&i(t,"touchstart",this._onTapStart,{passive:!1})}_onTapStart(e,t=!1){const{x:s,y:i,target:o}=T(e),{document:n,startAreas:r,boundaries:a,features:u,behaviour:_}=this._options,c=o.getBoundingClientRect();if(e instanceof MouseEvent&&!H(e,_.triggers))return;const p=x(r,n),g=x(a,n);this._targetElement=g.find(S=>C(S.getBoundingClientRect(),c));const f=e.composedPath(),d=p.find(S=>f.includes(S));if(this._targetBoundary=g.find(S=>f.includes(S)),!this._targetElement||!d||!this._targetBoundary||!t&&this._emitEvent("beforestart",e)===!1)return;this._areaLocation={x1:s,y1:i,x2:0,y2:0};const h=n.scrollingElement??n.body;this._scrollDelta={x:h.scrollLeft,y:h.scrollTop},this._singleClick=!0,this.clearSelection(!1,!0),y(n,["touchmove","mousemove"],this._delayedTapMove,{passive:!1}),y(n,["mouseup","touchcancel","touchend"],this._onTapStop),y(n,"scroll",this._onScroll),u.deselectOnBlur&&(this._targetBoundaryScrolled=!1,y(this._targetBoundary,"scroll",this._onStartAreaScroll))}_onSingleTap(e){const{singleTap:{intersect:t},range:s}=this._options.features,i=T(e);let o;if(t==="native")o=i.target;else if(t==="touch"){this.resolveSelectables();const{x:r,y:a}=i;o=this._selectables.find(u=>{const{right:_,left:c,top:p,bottom:g}=u.getBoundingClientRect();return r<_&&r>c&&a<g&&a>p})}if(!o)return;for(this.resolveSelectables();!this._selectables.includes(o);)if(o.parentElement)o=o.parentElement;else{this._targetBoundaryScrolled||this.clearSelection();return}const{stored:n}=this._selection;if(this._emitEvent("start",e),e.shiftKey&&s&&this._latestElement){const r=this._latestElement,[a,u]=r.compareDocumentPosition(o)&4?[o,r]:[r,o],_=[...this._selectables.filter(c=>c.compareDocumentPosition(a)&4&&c.compareDocumentPosition(u)&2),a,u];this.select(_),this._latestElement=r}else n.includes(o)&&(n.length===1||e.ctrlKey||n.every(r=>this._selection.stored.includes(r)))?this.deselect(o):(this.select(o),this._latestElement=o)}_delayedTapMove(e){const{container:t,document:s,behaviour:{startThreshold:i}}=this._options,{x1:o,y1:n}=this._areaLocation,{x:r,y:a}=T(e);if(typeof i=="number"&&b(r+a-(o+n))>=i||typeof i=="object"&&b(r-o)>=i.x||b(a-n)>=i.y){if(m(s,["mousemove","touchmove"],this._delayedTapMove,{passive:!1}),this._emitEvent("beforedrag",e)===!1){m(s,["mouseup","touchcancel","touchend"],this._onTapStop);return}y(s,["mousemove","touchmove"],this._onTapMove,{passive:!1}),v(this._area,"display","block"),x(t,s)[0].appendChild(this._clippingElement),this.resolveSelectables(),this._singleClick=!1,this._targetRect=this._targetElement.getBoundingClientRect(),this._scrollAvailable=this._targetElement.scrollHeight!==this._targetElement.clientHeight||this._targetElement.scrollWidth!==this._targetElement.clientWidth,this._scrollAvailable&&(y(this._targetElement,"wheel",this._wheelScroll,{passive:!1}),y(this._options.document,"keydown",this._keyboardScroll,{passive:!1}),this._selectables=this._selectables.filter(u=>this._targetElement.contains(u))),this._setupSelectionArea(),this._emitEvent("start",e),this._onTapMove(e)}this._handleMoveEvent(e)}_setupSelectionArea(){const{_clippingElement:e,_targetElement:t,_area:s}=this,i=this._targetRect=t.getBoundingClientRect();this._scrollAvailable?(v(e,{top:i.top,left:i.left,width:i.width,height:i.height}),v(s,{marginTop:-i.top,marginLeft:-i.left})):(v(e,{top:0,left:0,width:"100%",height:"100%"}),v(s,{marginTop:0,marginLeft:0}))}_onTapMove(e){const{_scrollSpeed:t,_areaLocation:s,_options:i,_frame:o}=this,{speedDivider:n}=i.behaviour.scrolling,r=this._targetElement,{x:a,y:u}=T(e);if(s.x2=a,s.y2=u,this._lastMousePosition.x=a,this._lastMousePosition.y=u,this._scrollAvailable&&!this._scrollingActive&&(t.y||t.x)){this._scrollingActive=!0;const _=()=>{if(!t.x&&!t.y){this._scrollingActive=!1;return}const{scrollTop:c,scrollLeft:p}=r;t.y&&(r.scrollTop+=P(t.y/n),s.y1-=r.scrollTop-c),t.x&&(r.scrollLeft+=P(t.x/n),s.x1-=r.scrollLeft-p),o.next(e),requestAnimationFrame(_)};requestAnimationFrame(_)}else o.next(e);this._handleMoveEvent(e)}_handleMoveEvent(e){const{features:t}=this._options;(t.touch&&X()||this._scrollAvailable&&Y())&&e.preventDefault()}_onScroll(){const{_scrollDelta:e,_options:{document:t}}=this,{scrollTop:s,scrollLeft:i}=t.scrollingElement??t.body;this._areaLocation.x1+=e.x-i,this._areaLocation.y1+=e.y-s,e.x=i,e.y=s,this._setupSelectionArea(),this._frame.next(null)}_onStartAreaScroll(){this._targetBoundaryScrolled=!0,m(this._targetElement,"scroll",this._onStartAreaScroll)}_wheelScroll(e){const{manualSpeed:t}=this._options.behaviour.scrolling,s=e.deltaY?e.deltaY>0?1:-1:0,i=e.deltaX?e.deltaX>0?1:-1:0;this._scrollSpeed.y+=s*t,this._scrollSpeed.x+=i*t,this._onTapMove(e),e.preventDefault()}_keyboardScroll(e){const{manualSpeed:t}=this._options.behaviour.scrolling,s=e.key==="ArrowLeft"?-1:e.key==="ArrowRight"?1:0,i=e.key==="ArrowUp"?-1:e.key==="ArrowDown"?1:0;this._scrollSpeed.x+=Math.sign(s)*t,this._scrollSpeed.y+=Math.sign(i)*t,e.preventDefault(),this._onTapMove({clientX:this._lastMousePosition.x,clientY:this._lastMousePosition.y,preventDefault:()=>{}})}_recalculateSelectionAreaRect(){const{_scrollSpeed:e,_areaLocation:t,_targetElement:s,_options:i}=this,{scrollTop:o,scrollHeight:n,clientHeight:r,scrollLeft:a,scrollWidth:u,clientWidth:_}=s,c=this._targetRect,{x1:p,y1:g}=t;let{x2:f,y2:d}=t;const{behaviour:{scrolling:{startScrollMargins:h}}}=i;f<c.left+h.x?(e.x=a?-b(c.left-f+h.x):0,f=f<c.left?c.left:f):f>c.right-h.x?(e.x=u-a-_?b(c.left+c.width-f-h.x):0,f=f>c.right?c.right:f):e.x=0,d<c.top+h.y?(e.y=o?-b(c.top-d+h.y):0,d=d<c.top?c.top:d):d>c.bottom-h.y?(e.y=n-o-r?b(c.top+c.height-d-h.y):0,d=d>c.bottom?c.bottom:d):e.y=0;const S=D(p,f),j=D(g,d),N=R(p,f),q=R(g,d);this._areaRect=k(S,j,N-S,q-j)}_redrawSelectionArea(){const{x:e,y:t,width:s,height:i}=this._areaRect,{style:o}=this._area;o.left=`${e}px`,o.top=`${t}px`,o.width=`${s}px`,o.height=`${i}px`}_onTapStop(e,t){var n;const{document:s,features:i}=this._options,{_singleClick:o}=this;m(this._targetElement,"scroll",this._onStartAreaScroll),m(s,["mousemove","touchmove"],this._delayedTapMove),m(s,["touchmove","mousemove"],this._onTapMove),m(s,["mouseup","touchcancel","touchend"],this._onTapStop),m(s,"scroll",this._onScroll),this._keepSelection(),e&&o&&i.singleTap.allow?this._onSingleTap(e):!o&&!t&&(this._updateElementSelection(),this._emitEvent("stop",e)),this._scrollSpeed.x=0,this._scrollSpeed.y=0,m(this._targetElement,"wheel",this._wheelScroll,{passive:!0}),m(this._options.document,"keydown",this._keyboardScroll,{passive:!0}),this._clippingElement.remove(),(n=this._frame)==null||n.cancel(),v(this._area,"display","none")}_updateElementSelection(){const{_selectables:e,_options:t,_selection:s,_areaRect:i}=this,{stored:o,selected:n,touched:r}=s,{intersect:a,overlap:u}=t.behaviour,_=u==="invert",c=[],p=[],g=[];for(let d=0;d<e.length;d++){const h=e[d];if(C(i,h.getBoundingClientRect(),a)){if(n.includes(h))o.includes(h)&&!r.includes(h)&&r.push(h);else if(_&&o.includes(h)){g.push(h);continue}else p.push(h);c.push(h)}}_&&p.push(...o.filter(d=>!n.includes(d)));const f=u==="keep";for(let d=0;d<n.length;d++){const h=n[d];!c.includes(h)&&!(f&&o.includes(h))&&g.push(h)}s.selected=c,s.changed={added:p,removed:g},this._latestElement=void 0}_emitEvent(e,t){return this.emit(e,{event:t,store:this._selection,selection:this})}_keepSelection(){const{_options:e,_selection:t}=this,{selected:s,changed:i,touched:o,stored:n}=t,r=s.filter(a=>!n.includes(a));switch(e.behaviour.overlap){case"drop":{t.stored=[...r,...n.filter(a=>!o.includes(a))];break}case"invert":{t.stored=[...r,...n.filter(a=>!i.removed.includes(a))];break}case"keep":{t.stored=[...n,...s.filter(a=>!n.includes(a))];break}}}trigger(e,t=!0){this._onTapStart(e,t)}resolveSelectables(){this._selectables=x(this._options.selectables,this._options.document)}clearSelection(e=!0,t=!1){const{selected:s,stored:i,changed:o}=this._selection;o.added=[],o.removed.push(...s,...e?i:[]),t||(this._emitEvent("move",null),this._emitEvent("stop",null)),this._selection=O(e?[]:i)}getSelection(){return this._selection.stored}getSelectionArea(){return this._area}getSelectables(){return this._selectables}setAreaLocation(e){Object.assign(this._areaLocation,e),this._redrawSelectionArea()}getAreaLocation(){return this._areaLocation}cancel(e=!1){this._onTapStop(null,!e)}destroy(){this.cancel(),this.disable(),this._clippingElement.remove(),super.unbindAllListeners()}select(e,t=!1){const{changed:s,selected:i,stored:o}=this._selection,n=x(e,this._options.document).filter(r=>!i.includes(r)&&!o.includes(r));return o.push(...n),i.push(...n),s.added.push(...n),s.removed=[],this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)),n}deselect(e,t=!1){const{selected:s,stored:i,changed:o}=this._selection,n=x(e,this._options.document).filter(r=>s.includes(r)||i.includes(r));this._selection.stored=i.filter(r=>!n.includes(r)),this._selection.selected=s.filter(r=>!n.includes(r)),this._selection.changed.added=[],this._selection.changed.removed.push(...n.filter(r=>!o.removed.includes(r))),this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null))}};M.version="3.9.0";let L=M;return L});
 //# sourceMappingURL=viselect.umd.js.map

package.json

 {
     "name": "@viselect/vanilla",
-    "version": "3.8.1",
+    "version": "3.9.0",
     "description": "Simple, lightweight and modern library library for making visual DOM Selections.",
@@ -40,3 +40,3 @@ "author": "Simon Reinisch <[e-mail]>",
     },
-    "gitHead": "af5818681d7e3cb95b08ab61e6f7bfb9dafe1d53"
+    "gitHead": "1c5a08946f27acfd41384968e16ae55b72db4a1c"
 }

README.md

@@ -228,2 +228,5 @@ <h3 align="center">
 | `trigger(evt: MouseEvent / TouchEvent, silent = true): void`    | Manually trigger a selection.                                                                                                                       |
+| `getSelectables(): Element[]`                                   | Returns all selectables.                                                                                                                            |
+| `getAreaLocation(): AreaLocation`                               | Returns the current location of the selection area.                                                                                                 |
+| `setAreaLocation(location: AreaLocation): void`                 | Update the location of the selection area.                                                                                                          |
 
@@ -230,0 +233,0 @@

No alert changes

Improved metrics

Total package byte prevSize

180938

increased by1.35%

Number of package files

20

increased by5.26%

Lines of code

798

increased by3.64%

Number of lines in readme file

292

increased by1.04%

No dependency changes