@viselect/vanilla - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

./dist/viselect.umd.js

@@ -1,3 +0,3 @@
-/*! @viselect/vanilla v3.3.1 MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */
-(function(E,g){typeof exports=="object"&&typeof module<"u"?module.exports=g():typeof define=="function"&&define.amd?define(g):(E=typeof globalThis<"u"?globalThis:E||self,E.SelectionArea=g())})(this,function(){"use strict";var X=Object.defineProperty;var Y=(E,g,v)=>g in E?X(E,g,{enumerable:!0,configurable:!0,writable:!0,value:v}):E[g]=v;var u=(E,g,v)=>(Y(E,typeof g!="symbol"?g+"":g,v),v);class E{constructor(){u(this,"_listeners",new Map);u(this,"on",this.addEventListener);u(this,"off",this.removeEventListener);u(this,"emit",this.dispatchEvent)}addEventListener(l,e){const t=this._listeners.get(l)??new Set;return this._listeners.set(l,t),t.add(e),this}removeEventListener(l,e){var t;return(t=this._listeners.get(l))==null||t.delete(e),this}dispatchEvent(l,...e){let t=!0;for(const s of this._listeners.get(l)??[])t=s(...e)!==!1&&t;return t}unbindAllListeners(){this._listeners.clear()}}const g=(c,l="px")=>typeof c=="number"?c+l:c;function v({style:c},l,e){if(typeof l=="object")for(const[t,s]of Object.entries(l))s!==void 0&&(c[t]=g(s));else e!==void 0&&(c[l]=g(e))}function C(c){return(l,e,t,s={})=>{l instanceof HTMLCollection||l instanceof NodeList?l=Array.from(l):Array.isArray(l)||(l=[l]),Array.isArray(e)||(e=[e]);for(const i of l)for(const n of e)i[c](n,t,{capture:!1,...s});return[l,e,t,s]}}const T=C("addEventListener"),b=C("removeEventListener"),w=c=>{var s;const{clientX:l,clientY:e,target:t}=((s=c.touches)==null?void 0:s[0])??c;return{x:l,y:e,target:t}};function M(c,l,e="touch"){switch(e){case"center":{const t=l.left+l.width/2,s=l.top+l.height/2;return t>=c.left&&t<=c.right&&s>=c.top&&s<=c.bottom}case"cover":return l.left>=c.left&&l.top>=c.top&&l.right<=c.right&&l.bottom<=c.bottom;case"touch":return c.right>=l.left&&c.left<=l.right&&c.bottom>=l.top&&c.top<=l.bottom}}function A(c,l=document){const e=Array.isArray(c)?c:[c];let t=[];for(let s=0,i=e.length;s<i;s++){const n=e[s];typeof n=="string"?t=t.concat(Array.from(l.querySelectorAll(n))):n instanceof Element&&t.push(n)}return t}const O=()=>matchMedia("(hover: none), (pointer: coarse)").matches,H=()=>"safari"in window,q=c=>{let l,e=-1,t=!1;return{next(...s){l=s,t||(t=!0,e=requestAnimationFrame(()=>{c(...l),t=!1}))},cancel(){cancelAnimationFrame(e),t=!1}}},{abs:S,max:R,min:k,ceil:D}=Math;class B extends E{constructor(e){var n,r,o,h,_;super();u(this,"_options");u(this,"_selection",{stored:[],selected:[],touched:[],changed:{added:[],removed:[]}});u(this,"_area");u(this,"_clippingElement");u(this,"_targetElement");u(this,"_targetRect");u(this,"_selectables",[]);u(this,"_latestElement");u(this,"_areaRect",new DOMRect);u(this,"_areaLocation",{y1:0,x2:0,y2:0,x1:0});u(this,"_singleClick",!0);u(this,"_frame");u(this,"_scrollAvailable",!0);u(this,"_scrollingActive",!1);u(this,"_scrollSpeed",{x:0,y:0});u(this,"_scrollDelta",{x:0,y:0});u(this,"disable",this._bindStartEvents.bind(this,!1));u(this,"enable",this._bindStartEvents);this._options={selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,startAreas:["html"],boundaries:["html"],container:"body",...e,behaviour:{overlap:"invert",intersect:"touch",...e.behaviour,startThreshold:(n=e.behaviour)!=null&&n.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,...(r=e.behaviour)==null?void 0:r.scrolling,startScrollMargins:{x:0,y:0,...(h=(o=e.behaviour)==null?void 0:o.scrolling)==null?void 0:h.startScrollMargins}}},features:{range:!0,touch:!0,...e.features,singleTap:{allow:!0,intersect:"native",...(_=e.features)==null?void 0:_.singleTap}}};for(const f of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))typeof this[f]=="function"&&(this[f]=this[f].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=q(f=>{this._recalculateSelectionAreaRect(),this._updateElementSelection(),this._emitEvent("move",f),this._redrawSelectionArea()}),this.enable()}_bindStartEvents(e=!0){const{document:t,features:s}=this._options,i=e?T:b;i(t,"mousedown",this._onTapStart),s.touch&&i(t,"touchstart",this._onTapStart,{passive:!1})}_onTapStart(e,t=!1){const{x:s,y:i,target:n}=w(e),{_options:r}=this,{document:o}=this._options,h=n.getBoundingClientRect(),_=A(r.startAreas,r.document),f=A(r.boundaries,r.document);this._targetElement=f.find(y=>M(y.getBoundingClientRect(),h));const m=e.composedPath();if(!this._targetElement||!_.find(y=>m.includes(y))||!f.find(y=>m.includes(y))||!t&&this._emitEvent("beforestart",e)===!1)return;this._areaLocation={x1:s,y1:i,x2:0,y2:0};const a=o.scrollingElement??o.body;this._scrollDelta={x:a.scrollLeft,y:a.scrollTop},this._singleClick=!0,this.clearSelection(!1,!0),T(o,["touchmove","mousemove"],this._delayedTapMove,{passive:!1}),T(o,["mouseup","touchcancel","touchend"],this._onTapStop),T(o,"scroll",this._onScroll)}_onSingleTap(e){const{singleTap:{intersect:t},range:s}=this._options.features,i=w(e);let n;if(t==="native")n=i.target;else if(t==="touch"){this.resolveSelectables();const{x:o,y:h}=i;n=this._selectables.find(_=>{const{right:f,left:m,top:a,bottom:y}=_.getBoundingClientRect();return o<f&&o>m&&h<y&&h>a})}if(!n)return;for(this.resolveSelectables();!this._selectables.includes(n);){if(!n.parentElement)return;n=n.parentElement}const{stored:r}=this._selection;if(this._emitEvent("start",e),e.shiftKey&&s&&this._latestElement){const o=this._latestElement,[h,_]=o.compareDocumentPosition(n)&4?[n,o]:[o,n],f=[...this._selectables.filter(m=>m.compareDocumentPosition(h)&4&&m.compareDocumentPosition(_)&2),h,_];this.select(f),this._latestElement=o}else r.includes(n)&&(r.length===1||e.ctrlKey||r.every(o=>this._selection.stored.includes(o)))?this.deselect(n):(this.select(n),this._latestElement=n);this._emitEvent("stop",e)}_delayedTapMove(e){const{container:t,document:s,behaviour:{startThreshold:i}}=this._options,{x1:n,y1:r}=this._areaLocation,{x:o,y:h}=w(e);if(typeof i=="number"&&S(o+h-(n+r))>=i||typeof i=="object"&&S(o-n)>=i.x||S(h-r)>=i.y){if(b(s,["mousemove","touchmove"],this._delayedTapMove,{passive:!1}),this._emitEvent("beforedrag",e)===!1){b(s,["mouseup","touchcancel","touchend"],this._onTapStop);return}T(s,["mousemove","touchmove"],this._onTapMove,{passive:!1}),v(this._area,"display","block"),A(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&&(T(s,"wheel",this._manualScroll,{passive:!1}),this._selectables=this._selectables.filter(_=>this._targetElement.contains(_))),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{x:t,y:s}=w(e),{_scrollSpeed:i,_areaLocation:n,_options:r,_frame:o}=this,{speedDivider:h}=r.behaviour.scrolling,_=this._targetElement;if(n.x2=t,n.y2=s,this._scrollAvailable&&!this._scrollingActive&&(i.y||i.x)){this._scrollingActive=!0;const f=()=>{if(!i.x&&!i.y){this._scrollingActive=!1;return}const{scrollTop:m,scrollLeft:a}=_;i.y&&(_.scrollTop+=D(i.y/h),n.y1-=_.scrollTop-m),i.x&&(_.scrollLeft+=D(i.x/h),n.x1-=_.scrollLeft-a),o.next(e),requestAnimationFrame(f)};requestAnimationFrame(f)}else o.next(e);this._handleMoveEvent(e)}_handleMoveEvent(e){const{features:t}=this._options;(t.touch&&O()||this._scrollAvailable&&H())&&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)}_manualScroll(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()}_recalculateSelectionAreaRect(){const{_scrollSpeed:e,_areaLocation:t,_areaRect:s,_targetElement:i,_options:n}=this,{scrollTop:r,scrollHeight:o,clientHeight:h,scrollLeft:_,scrollWidth:f,clientWidth:m}=i,a=this._targetRect,{x1:y,y1:L}=t;let{x2:p,y2:d}=t;const{behaviour:{scrolling:{startScrollMargins:x}}}=n;p<a.left+x.x?(e.x=_?-S(a.left-p+x.x):0,p=p<a.left?a.left:p):p>a.right-x.x?(e.x=f-_-m?S(a.left+a.width-p-x.x):0,p=p>a.right?a.right:p):e.x=0,d<a.top+x.y?(e.y=r?-S(a.top-d+x.y):0,d=d<a.top?a.top:d):d>a.bottom-x.y?(e.y=o-r-h?S(a.top+a.height-d-x.y):0,d=d>a.bottom?a.bottom:d):e.y=0;const P=k(y,p),j=k(L,d),F=R(y,p),W=R(L,d);s.x=P,s.y=j,s.width=F-P,s.height=W-j}_redrawSelectionArea(){const{x:e,y:t,width:s,height:i}=this._areaRect,{style:n}=this._area;n.left=`${e}px`,n.top=`${t}px`,n.width=`${s}px`,n.height=`${i}px`}_onTapStop(e,t){var r;const{document:s,features:i}=this._options,{_singleClick:n}=this;b(s,["mousemove","touchmove"],this._delayedTapMove),b(s,["touchmove","mousemove"],this._onTapMove),b(s,["mouseup","touchcancel","touchend"],this._onTapStop),b(s,"scroll",this._onScroll),this._keepSelection(),e&&n&&i.singleTap.allow?this._onSingleTap(e):!n&&!t&&(this._updateElementSelection(),this._emitEvent("stop",e)),this._scrollSpeed.x=0,this._scrollSpeed.y=0,this._scrollAvailable&&b(s,"wheel",this._manualScroll,{passive:!0}),this._clippingElement.remove(),(r=this._frame)==null||r.cancel(),v(this._area,"display","none")}_updateElementSelection(){const{_selectables:e,_options:t,_selection:s,_areaRect:i}=this,{stored:n,selected:r,touched:o}=s,{intersect:h,overlap:_}=t.behaviour,f=_==="invert",m=[],a=[],y=[];for(let p=0;p<e.length;p++){const d=e[p];if(M(i,d.getBoundingClientRect(),h)){if(r.includes(d))n.includes(d)&&!o.includes(d)&&o.push(d);else if(f&&n.includes(d)){y.push(d);continue}else a.push(d);m.push(d)}}f&&a.push(...n.filter(p=>!r.includes(p)));const L=_==="keep";for(let p=0;p<r.length;p++){const d=r[p];!m.includes(d)&&!(L&&n.includes(d))&&y.push(d)}s.selected=m,s.changed={added:a,removed:y},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:n,stored:r}=t,o=s.filter(h=>!r.includes(h));switch(e.behaviour.overlap){case"drop":{t.stored=[...o,...r.filter(h=>!n.includes(h))];break}case"invert":{t.stored=[...o,...r.filter(h=>!i.removed.includes(h))];break}case"keep":{t.stored=[...r,...s.filter(h=>!r.includes(h))];break}}}trigger(e,t=!0){this._onTapStart(e,t)}resolveSelectables(){this._selectables=A(this._options.selectables,this._options.document)}clearSelection(e=!0,t=!1){const{selected:s,stored:i,changed:n}=this._selection;n.added=[],n.removed.push(...s,...e?i:[]),t||(this._emitEvent("move",null),this._emitEvent("stop",null)),this._selection={stored:e?[]:i,selected:[],touched:[],changed:{added:[],removed:[]}}}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:n}=this._selection,r=A(e,this._options.document).filter(o=>!i.includes(o)&&!n.includes(o));return n.push(...r),i.push(...r),s.added.push(...r),s.removed=[],this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)),r}deselect(e,t=!1){const{selected:s,stored:i,changed:n}=this._selection,r=A(e,this._options.document).filter(o=>s.includes(o)||i.includes(o));r.length&&(this._selection.stored=i.filter(o=>!r.includes(o)),this._selection.selected=s.filter(o=>!r.includes(o)),this._selection.changed.added=[],this._selection.changed.removed.push(...r.filter(o=>!n.removed.includes(o))),this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)))}}return u(B,"version","3.3.1"),B});
+/*! @viselect/vanilla v3.4.0 MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */
+(function(E,g){typeof exports=="object"&&typeof module<"u"?module.exports=g():typeof define=="function"&&define.amd?define(g):(E=typeof globalThis<"u"?globalThis:E||self,E.SelectionArea=g())})(this,function(){"use strict";var X=Object.defineProperty;var Y=(E,g,v)=>g in E?X(E,g,{enumerable:!0,configurable:!0,writable:!0,value:v}):E[g]=v;var u=(E,g,v)=>(Y(E,typeof g!="symbol"?g+"":g,v),v);class E{constructor(){u(this,"_listeners",new Map);u(this,"on",this.addEventListener);u(this,"off",this.removeEventListener);u(this,"emit",this.dispatchEvent)}addEventListener(l,e){const t=this._listeners.get(l)??new Set;return this._listeners.set(l,t),t.add(e),this}removeEventListener(l,e){var t;return(t=this._listeners.get(l))==null||t.delete(e),this}dispatchEvent(l,...e){let t=!0;for(const s of this._listeners.get(l)??[])t=s(...e)!==!1&&t;return t}unbindAllListeners(){this._listeners.clear()}}const g=(c,l="px")=>typeof c=="number"?c+l:c;function v({style:c},l,e){if(typeof l=="object")for(const[t,s]of Object.entries(l))s!==void 0&&(c[t]=g(s));else e!==void 0&&(c[l]=g(e))}const C=c=>(l,e,t,s={})=>{l instanceof HTMLCollection||l instanceof NodeList?l=Array.from(l):Array.isArray(l)||(l=[l]),Array.isArray(e)||(e=[e]);for(const i of l)if(i)for(const n of e)i[c](n,t,{capture:!1,...s});return[l,e,t,s]},T=C("addEventListener"),b=C("removeEventListener"),w=c=>{var s;const{clientX:l,clientY:e,target:t}=((s=c.touches)==null?void 0:s[0])??c;return{x:l,y:e,target:t}};function M(c,l,e="touch"){switch(e){case"center":{const t=l.left+l.width/2,s=l.top+l.height/2;return t>=c.left&&t<=c.right&&s>=c.top&&s<=c.bottom}case"cover":return l.left>=c.left&&l.top>=c.top&&l.right<=c.right&&l.bottom<=c.bottom;case"touch":return c.right>=l.left&&c.left<=l.right&&c.bottom>=l.top&&c.top<=l.bottom}}function A(c,l=document){const e=Array.isArray(c)?c:[c];let t=[];for(let s=0,i=e.length;s<i;s++){const n=e[s];typeof n=="string"?t=t.concat(Array.from(l.querySelectorAll(n))):n instanceof Element&&t.push(n)}return t}const O=()=>matchMedia("(hover: none), (pointer: coarse)").matches,H=()=>"safari"in window,q=c=>{let l,e=-1,t=!1;return{next(...s){l=s,t||(t=!0,e=requestAnimationFrame(()=>{c(...l),t=!1}))},cancel(){cancelAnimationFrame(e),t=!1}}},{abs:S,max:R,min:k,ceil:D}=Math;class B extends E{constructor(e){var n,r,o,h,_;super();u(this,"_options");u(this,"_selection",{stored:[],selected:[],touched:[],changed:{added:[],removed:[]}});u(this,"_area");u(this,"_clippingElement");u(this,"_targetElement");u(this,"_targetRect");u(this,"_selectables",[]);u(this,"_latestElement");u(this,"_areaRect",new DOMRect);u(this,"_areaLocation",{y1:0,x2:0,y2:0,x1:0});u(this,"_singleClick",!0);u(this,"_frame");u(this,"_scrollAvailable",!0);u(this,"_scrollingActive",!1);u(this,"_scrollSpeed",{x:0,y:0});u(this,"_scrollDelta",{x:0,y:0});u(this,"disable",this._bindStartEvents.bind(this,!1));u(this,"enable",this._bindStartEvents);this._options={selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,startAreas:["html"],boundaries:["html"],container:"body",...e,behaviour:{overlap:"invert",intersect:"touch",...e.behaviour,startThreshold:(n=e.behaviour)!=null&&n.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,...(r=e.behaviour)==null?void 0:r.scrolling,startScrollMargins:{x:0,y:0,...(h=(o=e.behaviour)==null?void 0:o.scrolling)==null?void 0:h.startScrollMargins}}},features:{range:!0,touch:!0,...e.features,singleTap:{allow:!0,intersect:"native",...(_=e.features)==null?void 0:_.singleTap}}};for(const f of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))typeof this[f]=="function"&&(this[f]=this[f].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=q(f=>{this._recalculateSelectionAreaRect(),this._updateElementSelection(),this._emitEvent("move",f),this._redrawSelectionArea()}),this.enable()}_bindStartEvents(e=!0){const{document:t,features:s}=this._options,i=e?T:b;i(t,"mousedown",this._onTapStart),s.touch&&i(t,"touchstart",this._onTapStart,{passive:!1})}_onTapStart(e,t=!1){const{x:s,y:i,target:n}=w(e),{_options:r}=this,{document:o}=this._options,h=n.getBoundingClientRect(),_=A(r.startAreas,r.document),f=A(r.boundaries,r.document);this._targetElement=f.find(y=>M(y.getBoundingClientRect(),h));const m=e.composedPath();if(!this._targetElement||!_.find(y=>m.includes(y))||!f.find(y=>m.includes(y))||!t&&this._emitEvent("beforestart",e)===!1)return;this._areaLocation={x1:s,y1:i,x2:0,y2:0};const a=o.scrollingElement??o.body;this._scrollDelta={x:a.scrollLeft,y:a.scrollTop},this._singleClick=!0,this.clearSelection(!1,!0),T(o,["touchmove","mousemove"],this._delayedTapMove,{passive:!1}),T(o,["mouseup","touchcancel","touchend"],this._onTapStop),T(o,"scroll",this._onScroll)}_onSingleTap(e){const{singleTap:{intersect:t},range:s}=this._options.features,i=w(e);let n;if(t==="native")n=i.target;else if(t==="touch"){this.resolveSelectables();const{x:o,y:h}=i;n=this._selectables.find(_=>{const{right:f,left:m,top:a,bottom:y}=_.getBoundingClientRect();return o<f&&o>m&&h<y&&h>a})}if(!n)return;for(this.resolveSelectables();!this._selectables.includes(n);){if(!n.parentElement)return;n=n.parentElement}const{stored:r}=this._selection;if(this._emitEvent("start",e),e.shiftKey&&s&&this._latestElement){const o=this._latestElement,[h,_]=o.compareDocumentPosition(n)&4?[n,o]:[o,n],f=[...this._selectables.filter(m=>m.compareDocumentPosition(h)&4&&m.compareDocumentPosition(_)&2),h,_];this.select(f),this._latestElement=o}else r.includes(n)&&(r.length===1||e.ctrlKey||r.every(o=>this._selection.stored.includes(o)))?this.deselect(n):(this.select(n),this._latestElement=n);this._emitEvent("stop",e)}_delayedTapMove(e){const{container:t,document:s,behaviour:{startThreshold:i}}=this._options,{x1:n,y1:r}=this._areaLocation,{x:o,y:h}=w(e);if(typeof i=="number"&&S(o+h-(n+r))>=i||typeof i=="object"&&S(o-n)>=i.x||S(h-r)>=i.y){if(b(s,["mousemove","touchmove"],this._delayedTapMove,{passive:!1}),this._emitEvent("beforedrag",e)===!1){b(s,["mouseup","touchcancel","touchend"],this._onTapStop);return}T(s,["mousemove","touchmove"],this._onTapMove,{passive:!1}),v(this._area,"display","block"),A(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&&(T(this._targetElement,"wheel",this._manualScroll,{passive:!1}),this._selectables=this._selectables.filter(_=>this._targetElement.contains(_))),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{x:t,y:s}=w(e),{_scrollSpeed:i,_areaLocation:n,_options:r,_frame:o}=this,{speedDivider:h}=r.behaviour.scrolling,_=this._targetElement;if(n.x2=t,n.y2=s,this._scrollAvailable&&!this._scrollingActive&&(i.y||i.x)){this._scrollingActive=!0;const f=()=>{if(!i.x&&!i.y){this._scrollingActive=!1;return}const{scrollTop:m,scrollLeft:a}=_;i.y&&(_.scrollTop+=D(i.y/h),n.y1-=_.scrollTop-m),i.x&&(_.scrollLeft+=D(i.x/h),n.x1-=_.scrollLeft-a),o.next(e),requestAnimationFrame(f)};requestAnimationFrame(f)}else o.next(e);this._handleMoveEvent(e)}_handleMoveEvent(e){const{features:t}=this._options;(t.touch&&O()||this._scrollAvailable&&H())&&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)}_manualScroll(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()}_recalculateSelectionAreaRect(){const{_scrollSpeed:e,_areaLocation:t,_areaRect:s,_targetElement:i,_options:n}=this,{scrollTop:r,scrollHeight:o,clientHeight:h,scrollLeft:_,scrollWidth:f,clientWidth:m}=i,a=this._targetRect,{x1:y,y1:L}=t;let{x2:p,y2:d}=t;const{behaviour:{scrolling:{startScrollMargins:x}}}=n;p<a.left+x.x?(e.x=_?-S(a.left-p+x.x):0,p=p<a.left?a.left:p):p>a.right-x.x?(e.x=f-_-m?S(a.left+a.width-p-x.x):0,p=p>a.right?a.right:p):e.x=0,d<a.top+x.y?(e.y=r?-S(a.top-d+x.y):0,d=d<a.top?a.top:d):d>a.bottom-x.y?(e.y=o-r-h?S(a.top+a.height-d-x.y):0,d=d>a.bottom?a.bottom:d):e.y=0;const P=k(y,p),j=k(L,d),F=R(y,p),W=R(L,d);s.x=P,s.y=j,s.width=F-P,s.height=W-j}_redrawSelectionArea(){const{x:e,y:t,width:s,height:i}=this._areaRect,{style:n}=this._area;n.left=`${e}px`,n.top=`${t}px`,n.width=`${s}px`,n.height=`${i}px`}_onTapStop(e,t){var r;const{document:s,features:i}=this._options,{_singleClick:n}=this;b(s,["mousemove","touchmove"],this._delayedTapMove),b(s,["touchmove","mousemove"],this._onTapMove),b(s,["mouseup","touchcancel","touchend"],this._onTapStop),b(s,"scroll",this._onScroll),this._keepSelection(),e&&n&&i.singleTap.allow?this._onSingleTap(e):!n&&!t&&(this._updateElementSelection(),this._emitEvent("stop",e)),this._scrollSpeed.x=0,this._scrollSpeed.y=0,b(this._targetElement,"wheel",this._manualScroll,{passive:!0}),this._clippingElement.remove(),(r=this._frame)==null||r.cancel(),v(this._area,"display","none")}_updateElementSelection(){const{_selectables:e,_options:t,_selection:s,_areaRect:i}=this,{stored:n,selected:r,touched:o}=s,{intersect:h,overlap:_}=t.behaviour,f=_==="invert",m=[],a=[],y=[];for(let p=0;p<e.length;p++){const d=e[p];if(M(i,d.getBoundingClientRect(),h)){if(r.includes(d))n.includes(d)&&!o.includes(d)&&o.push(d);else if(f&&n.includes(d)){y.push(d);continue}else a.push(d);m.push(d)}}f&&a.push(...n.filter(p=>!r.includes(p)));const L=_==="keep";for(let p=0;p<r.length;p++){const d=r[p];!m.includes(d)&&!(L&&n.includes(d))&&y.push(d)}s.selected=m,s.changed={added:a,removed:y},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:n,stored:r}=t,o=s.filter(h=>!r.includes(h));switch(e.behaviour.overlap){case"drop":{t.stored=[...o,...r.filter(h=>!n.includes(h))];break}case"invert":{t.stored=[...o,...r.filter(h=>!i.removed.includes(h))];break}case"keep":{t.stored=[...r,...s.filter(h=>!r.includes(h))];break}}}trigger(e,t=!0){this._onTapStart(e,t)}resolveSelectables(){this._selectables=A(this._options.selectables,this._options.document)}clearSelection(e=!0,t=!1){const{selected:s,stored:i,changed:n}=this._selection;n.added=[],n.removed.push(...s,...e?i:[]),t||(this._emitEvent("move",null),this._emitEvent("stop",null)),this._selection={stored:e?[]:i,selected:[],touched:[],changed:{added:[],removed:[]}}}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:n}=this._selection,r=A(e,this._options.document).filter(o=>!i.includes(o)&&!n.includes(o));return n.push(...r),i.push(...r),s.added.push(...r),s.removed=[],this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)),r}deselect(e,t=!1){const{selected:s,stored:i,changed:n}=this._selection,r=A(e,this._options.document).filter(o=>s.includes(o)||i.includes(o));r.length&&(this._selection.stored=i.filter(o=>!r.includes(o)),this._selection.selected=s.filter(o=>!r.includes(o)),this._selection.changed.added=[],this._selection.changed.removed.push(...r.filter(o=>!n.removed.includes(o))),this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)))}}return u(B,"version","3.4.0"),B});
 //# sourceMappingURL=viselect.umd.js.map

dist/src/utils/events.d.ts

 type AnyFunction = (...arg: any) => any;
 export type EventBindingArgs = [
-    EventTarget | EventTarget[],
+    (EventTarget | undefined) | (EventTarget | undefined)[],
     string | string[],
@@ -8,5 +8,2 @@ AnyFunction,
 ];
-interface EventBinding {
-    (elements: EventTarget | EventTarget[], events: string | string[], fn: AnyFunction, options?: Record<string, unknown>): EventBindingArgs;
-}
 /**
@@ -20,3 +17,3 @@ * Add event(s) to element(s).
  */
-export declare const on: EventBinding;
+export declare const on: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => EventBindingArgs;
 /**
@@ -30,3 +27,3 @@ * Remove event(s) from element(s).
  */
-export declare const off: EventBinding;
+export declare const off: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => EventBindingArgs;
 /**
@@ -33,0 +30,0 @@ * Simplifies a touch / mouse-event

dist/viselect.umd.js

@@ -1,3 +0,3 @@
-/*! @viselect/vanilla v3.3.1 MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */
-(function(E,g){typeof exports=="object"&&typeof module<"u"?module.exports=g():typeof define=="function"&&define.amd?define(g):(E=typeof globalThis<"u"?globalThis:E||self,E.SelectionArea=g())})(this,function(){"use strict";var X=Object.defineProperty;var Y=(E,g,v)=>g in E?X(E,g,{enumerable:!0,configurable:!0,writable:!0,value:v}):E[g]=v;var u=(E,g,v)=>(Y(E,typeof g!="symbol"?g+"":g,v),v);class E{constructor(){u(this,"_listeners",new Map);u(this,"on",this.addEventListener);u(this,"off",this.removeEventListener);u(this,"emit",this.dispatchEvent)}addEventListener(l,e){const t=this._listeners.get(l)??new Set;return this._listeners.set(l,t),t.add(e),this}removeEventListener(l,e){var t;return(t=this._listeners.get(l))==null||t.delete(e),this}dispatchEvent(l,...e){let t=!0;for(const s of this._listeners.get(l)??[])t=s(...e)!==!1&&t;return t}unbindAllListeners(){this._listeners.clear()}}const g=(c,l="px")=>typeof c=="number"?c+l:c;function v({style:c},l,e){if(typeof l=="object")for(const[t,s]of Object.entries(l))s!==void 0&&(c[t]=g(s));else e!==void 0&&(c[l]=g(e))}function C(c){return(l,e,t,s={})=>{l instanceof HTMLCollection||l instanceof NodeList?l=Array.from(l):Array.isArray(l)||(l=[l]),Array.isArray(e)||(e=[e]);for(const i of l)for(const n of e)i[c](n,t,{capture:!1,...s});return[l,e,t,s]}}const T=C("addEventListener"),b=C("removeEventListener"),w=c=>{var s;const{clientX:l,clientY:e,target:t}=((s=c.touches)==null?void 0:s[0])??c;return{x:l,y:e,target:t}};function M(c,l,e="touch"){switch(e){case"center":{const t=l.left+l.width/2,s=l.top+l.height/2;return t>=c.left&&t<=c.right&&s>=c.top&&s<=c.bottom}case"cover":return l.left>=c.left&&l.top>=c.top&&l.right<=c.right&&l.bottom<=c.bottom;case"touch":return c.right>=l.left&&c.left<=l.right&&c.bottom>=l.top&&c.top<=l.bottom}}function A(c,l=document){const e=Array.isArray(c)?c:[c];let t=[];for(let s=0,i=e.length;s<i;s++){const n=e[s];typeof n=="string"?t=t.concat(Array.from(l.querySelectorAll(n))):n instanceof Element&&t.push(n)}return t}const O=()=>matchMedia("(hover: none), (pointer: coarse)").matches,H=()=>"safari"in window,q=c=>{let l,e=-1,t=!1;return{next(...s){l=s,t||(t=!0,e=requestAnimationFrame(()=>{c(...l),t=!1}))},cancel(){cancelAnimationFrame(e),t=!1}}},{abs:S,max:R,min:k,ceil:D}=Math;class B extends E{constructor(e){var n,r,o,h,_;super();u(this,"_options");u(this,"_selection",{stored:[],selected:[],touched:[],changed:{added:[],removed:[]}});u(this,"_area");u(this,"_clippingElement");u(this,"_targetElement");u(this,"_targetRect");u(this,"_selectables",[]);u(this,"_latestElement");u(this,"_areaRect",new DOMRect);u(this,"_areaLocation",{y1:0,x2:0,y2:0,x1:0});u(this,"_singleClick",!0);u(this,"_frame");u(this,"_scrollAvailable",!0);u(this,"_scrollingActive",!1);u(this,"_scrollSpeed",{x:0,y:0});u(this,"_scrollDelta",{x:0,y:0});u(this,"disable",this._bindStartEvents.bind(this,!1));u(this,"enable",this._bindStartEvents);this._options={selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,startAreas:["html"],boundaries:["html"],container:"body",...e,behaviour:{overlap:"invert",intersect:"touch",...e.behaviour,startThreshold:(n=e.behaviour)!=null&&n.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,...(r=e.behaviour)==null?void 0:r.scrolling,startScrollMargins:{x:0,y:0,...(h=(o=e.behaviour)==null?void 0:o.scrolling)==null?void 0:h.startScrollMargins}}},features:{range:!0,touch:!0,...e.features,singleTap:{allow:!0,intersect:"native",...(_=e.features)==null?void 0:_.singleTap}}};for(const f of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))typeof this[f]=="function"&&(this[f]=this[f].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=q(f=>{this._recalculateSelectionAreaRect(),this._updateElementSelection(),this._emitEvent("move",f),this._redrawSelectionArea()}),this.enable()}_bindStartEvents(e=!0){const{document:t,features:s}=this._options,i=e?T:b;i(t,"mousedown",this._onTapStart),s.touch&&i(t,"touchstart",this._onTapStart,{passive:!1})}_onTapStart(e,t=!1){const{x:s,y:i,target:n}=w(e),{_options:r}=this,{document:o}=this._options,h=n.getBoundingClientRect(),_=A(r.startAreas,r.document),f=A(r.boundaries,r.document);this._targetElement=f.find(y=>M(y.getBoundingClientRect(),h));const m=e.composedPath();if(!this._targetElement||!_.find(y=>m.includes(y))||!f.find(y=>m.includes(y))||!t&&this._emitEvent("beforestart",e)===!1)return;this._areaLocation={x1:s,y1:i,x2:0,y2:0};const a=o.scrollingElement??o.body;this._scrollDelta={x:a.scrollLeft,y:a.scrollTop},this._singleClick=!0,this.clearSelection(!1,!0),T(o,["touchmove","mousemove"],this._delayedTapMove,{passive:!1}),T(o,["mouseup","touchcancel","touchend"],this._onTapStop),T(o,"scroll",this._onScroll)}_onSingleTap(e){const{singleTap:{intersect:t},range:s}=this._options.features,i=w(e);let n;if(t==="native")n=i.target;else if(t==="touch"){this.resolveSelectables();const{x:o,y:h}=i;n=this._selectables.find(_=>{const{right:f,left:m,top:a,bottom:y}=_.getBoundingClientRect();return o<f&&o>m&&h<y&&h>a})}if(!n)return;for(this.resolveSelectables();!this._selectables.includes(n);){if(!n.parentElement)return;n=n.parentElement}const{stored:r}=this._selection;if(this._emitEvent("start",e),e.shiftKey&&s&&this._latestElement){const o=this._latestElement,[h,_]=o.compareDocumentPosition(n)&4?[n,o]:[o,n],f=[...this._selectables.filter(m=>m.compareDocumentPosition(h)&4&&m.compareDocumentPosition(_)&2),h,_];this.select(f),this._latestElement=o}else r.includes(n)&&(r.length===1||e.ctrlKey||r.every(o=>this._selection.stored.includes(o)))?this.deselect(n):(this.select(n),this._latestElement=n);this._emitEvent("stop",e)}_delayedTapMove(e){const{container:t,document:s,behaviour:{startThreshold:i}}=this._options,{x1:n,y1:r}=this._areaLocation,{x:o,y:h}=w(e);if(typeof i=="number"&&S(o+h-(n+r))>=i||typeof i=="object"&&S(o-n)>=i.x||S(h-r)>=i.y){if(b(s,["mousemove","touchmove"],this._delayedTapMove,{passive:!1}),this._emitEvent("beforedrag",e)===!1){b(s,["mouseup","touchcancel","touchend"],this._onTapStop);return}T(s,["mousemove","touchmove"],this._onTapMove,{passive:!1}),v(this._area,"display","block"),A(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&&(T(s,"wheel",this._manualScroll,{passive:!1}),this._selectables=this._selectables.filter(_=>this._targetElement.contains(_))),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{x:t,y:s}=w(e),{_scrollSpeed:i,_areaLocation:n,_options:r,_frame:o}=this,{speedDivider:h}=r.behaviour.scrolling,_=this._targetElement;if(n.x2=t,n.y2=s,this._scrollAvailable&&!this._scrollingActive&&(i.y||i.x)){this._scrollingActive=!0;const f=()=>{if(!i.x&&!i.y){this._scrollingActive=!1;return}const{scrollTop:m,scrollLeft:a}=_;i.y&&(_.scrollTop+=D(i.y/h),n.y1-=_.scrollTop-m),i.x&&(_.scrollLeft+=D(i.x/h),n.x1-=_.scrollLeft-a),o.next(e),requestAnimationFrame(f)};requestAnimationFrame(f)}else o.next(e);this._handleMoveEvent(e)}_handleMoveEvent(e){const{features:t}=this._options;(t.touch&&O()||this._scrollAvailable&&H())&&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)}_manualScroll(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()}_recalculateSelectionAreaRect(){const{_scrollSpeed:e,_areaLocation:t,_areaRect:s,_targetElement:i,_options:n}=this,{scrollTop:r,scrollHeight:o,clientHeight:h,scrollLeft:_,scrollWidth:f,clientWidth:m}=i,a=this._targetRect,{x1:y,y1:L}=t;let{x2:p,y2:d}=t;const{behaviour:{scrolling:{startScrollMargins:x}}}=n;p<a.left+x.x?(e.x=_?-S(a.left-p+x.x):0,p=p<a.left?a.left:p):p>a.right-x.x?(e.x=f-_-m?S(a.left+a.width-p-x.x):0,p=p>a.right?a.right:p):e.x=0,d<a.top+x.y?(e.y=r?-S(a.top-d+x.y):0,d=d<a.top?a.top:d):d>a.bottom-x.y?(e.y=o-r-h?S(a.top+a.height-d-x.y):0,d=d>a.bottom?a.bottom:d):e.y=0;const P=k(y,p),j=k(L,d),F=R(y,p),W=R(L,d);s.x=P,s.y=j,s.width=F-P,s.height=W-j}_redrawSelectionArea(){const{x:e,y:t,width:s,height:i}=this._areaRect,{style:n}=this._area;n.left=`${e}px`,n.top=`${t}px`,n.width=`${s}px`,n.height=`${i}px`}_onTapStop(e,t){var r;const{document:s,features:i}=this._options,{_singleClick:n}=this;b(s,["mousemove","touchmove"],this._delayedTapMove),b(s,["touchmove","mousemove"],this._onTapMove),b(s,["mouseup","touchcancel","touchend"],this._onTapStop),b(s,"scroll",this._onScroll),this._keepSelection(),e&&n&&i.singleTap.allow?this._onSingleTap(e):!n&&!t&&(this._updateElementSelection(),this._emitEvent("stop",e)),this._scrollSpeed.x=0,this._scrollSpeed.y=0,this._scrollAvailable&&b(s,"wheel",this._manualScroll,{passive:!0}),this._clippingElement.remove(),(r=this._frame)==null||r.cancel(),v(this._area,"display","none")}_updateElementSelection(){const{_selectables:e,_options:t,_selection:s,_areaRect:i}=this,{stored:n,selected:r,touched:o}=s,{intersect:h,overlap:_}=t.behaviour,f=_==="invert",m=[],a=[],y=[];for(let p=0;p<e.length;p++){const d=e[p];if(M(i,d.getBoundingClientRect(),h)){if(r.includes(d))n.includes(d)&&!o.includes(d)&&o.push(d);else if(f&&n.includes(d)){y.push(d);continue}else a.push(d);m.push(d)}}f&&a.push(...n.filter(p=>!r.includes(p)));const L=_==="keep";for(let p=0;p<r.length;p++){const d=r[p];!m.includes(d)&&!(L&&n.includes(d))&&y.push(d)}s.selected=m,s.changed={added:a,removed:y},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:n,stored:r}=t,o=s.filter(h=>!r.includes(h));switch(e.behaviour.overlap){case"drop":{t.stored=[...o,...r.filter(h=>!n.includes(h))];break}case"invert":{t.stored=[...o,...r.filter(h=>!i.removed.includes(h))];break}case"keep":{t.stored=[...r,...s.filter(h=>!r.includes(h))];break}}}trigger(e,t=!0){this._onTapStart(e,t)}resolveSelectables(){this._selectables=A(this._options.selectables,this._options.document)}clearSelection(e=!0,t=!1){const{selected:s,stored:i,changed:n}=this._selection;n.added=[],n.removed.push(...s,...e?i:[]),t||(this._emitEvent("move",null),this._emitEvent("stop",null)),this._selection={stored:e?[]:i,selected:[],touched:[],changed:{added:[],removed:[]}}}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:n}=this._selection,r=A(e,this._options.document).filter(o=>!i.includes(o)&&!n.includes(o));return n.push(...r),i.push(...r),s.added.push(...r),s.removed=[],this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)),r}deselect(e,t=!1){const{selected:s,stored:i,changed:n}=this._selection,r=A(e,this._options.document).filter(o=>s.includes(o)||i.includes(o));r.length&&(this._selection.stored=i.filter(o=>!r.includes(o)),this._selection.selected=s.filter(o=>!r.includes(o)),this._selection.changed.added=[],this._selection.changed.removed.push(...r.filter(o=>!n.removed.includes(o))),this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)))}}return u(B,"version","3.3.1"),B});
+/*! @viselect/vanilla v3.4.0 MIT | https://github.com/Simonwep/selection/tree/master/packages/vanilla */
+(function(E,g){typeof exports=="object"&&typeof module<"u"?module.exports=g():typeof define=="function"&&define.amd?define(g):(E=typeof globalThis<"u"?globalThis:E||self,E.SelectionArea=g())})(this,function(){"use strict";var X=Object.defineProperty;var Y=(E,g,v)=>g in E?X(E,g,{enumerable:!0,configurable:!0,writable:!0,value:v}):E[g]=v;var u=(E,g,v)=>(Y(E,typeof g!="symbol"?g+"":g,v),v);class E{constructor(){u(this,"_listeners",new Map);u(this,"on",this.addEventListener);u(this,"off",this.removeEventListener);u(this,"emit",this.dispatchEvent)}addEventListener(l,e){const t=this._listeners.get(l)??new Set;return this._listeners.set(l,t),t.add(e),this}removeEventListener(l,e){var t;return(t=this._listeners.get(l))==null||t.delete(e),this}dispatchEvent(l,...e){let t=!0;for(const s of this._listeners.get(l)??[])t=s(...e)!==!1&&t;return t}unbindAllListeners(){this._listeners.clear()}}const g=(c,l="px")=>typeof c=="number"?c+l:c;function v({style:c},l,e){if(typeof l=="object")for(const[t,s]of Object.entries(l))s!==void 0&&(c[t]=g(s));else e!==void 0&&(c[l]=g(e))}const C=c=>(l,e,t,s={})=>{l instanceof HTMLCollection||l instanceof NodeList?l=Array.from(l):Array.isArray(l)||(l=[l]),Array.isArray(e)||(e=[e]);for(const i of l)if(i)for(const n of e)i[c](n,t,{capture:!1,...s});return[l,e,t,s]},T=C("addEventListener"),b=C("removeEventListener"),w=c=>{var s;const{clientX:l,clientY:e,target:t}=((s=c.touches)==null?void 0:s[0])??c;return{x:l,y:e,target:t}};function M(c,l,e="touch"){switch(e){case"center":{const t=l.left+l.width/2,s=l.top+l.height/2;return t>=c.left&&t<=c.right&&s>=c.top&&s<=c.bottom}case"cover":return l.left>=c.left&&l.top>=c.top&&l.right<=c.right&&l.bottom<=c.bottom;case"touch":return c.right>=l.left&&c.left<=l.right&&c.bottom>=l.top&&c.top<=l.bottom}}function A(c,l=document){const e=Array.isArray(c)?c:[c];let t=[];for(let s=0,i=e.length;s<i;s++){const n=e[s];typeof n=="string"?t=t.concat(Array.from(l.querySelectorAll(n))):n instanceof Element&&t.push(n)}return t}const O=()=>matchMedia("(hover: none), (pointer: coarse)").matches,H=()=>"safari"in window,q=c=>{let l,e=-1,t=!1;return{next(...s){l=s,t||(t=!0,e=requestAnimationFrame(()=>{c(...l),t=!1}))},cancel(){cancelAnimationFrame(e),t=!1}}},{abs:S,max:R,min:k,ceil:D}=Math;class B extends E{constructor(e){var n,r,o,h,_;super();u(this,"_options");u(this,"_selection",{stored:[],selected:[],touched:[],changed:{added:[],removed:[]}});u(this,"_area");u(this,"_clippingElement");u(this,"_targetElement");u(this,"_targetRect");u(this,"_selectables",[]);u(this,"_latestElement");u(this,"_areaRect",new DOMRect);u(this,"_areaLocation",{y1:0,x2:0,y2:0,x1:0});u(this,"_singleClick",!0);u(this,"_frame");u(this,"_scrollAvailable",!0);u(this,"_scrollingActive",!1);u(this,"_scrollSpeed",{x:0,y:0});u(this,"_scrollDelta",{x:0,y:0});u(this,"disable",this._bindStartEvents.bind(this,!1));u(this,"enable",this._bindStartEvents);this._options={selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,startAreas:["html"],boundaries:["html"],container:"body",...e,behaviour:{overlap:"invert",intersect:"touch",...e.behaviour,startThreshold:(n=e.behaviour)!=null&&n.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,...(r=e.behaviour)==null?void 0:r.scrolling,startScrollMargins:{x:0,y:0,...(h=(o=e.behaviour)==null?void 0:o.scrolling)==null?void 0:h.startScrollMargins}}},features:{range:!0,touch:!0,...e.features,singleTap:{allow:!0,intersect:"native",...(_=e.features)==null?void 0:_.singleTap}}};for(const f of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))typeof this[f]=="function"&&(this[f]=this[f].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=q(f=>{this._recalculateSelectionAreaRect(),this._updateElementSelection(),this._emitEvent("move",f),this._redrawSelectionArea()}),this.enable()}_bindStartEvents(e=!0){const{document:t,features:s}=this._options,i=e?T:b;i(t,"mousedown",this._onTapStart),s.touch&&i(t,"touchstart",this._onTapStart,{passive:!1})}_onTapStart(e,t=!1){const{x:s,y:i,target:n}=w(e),{_options:r}=this,{document:o}=this._options,h=n.getBoundingClientRect(),_=A(r.startAreas,r.document),f=A(r.boundaries,r.document);this._targetElement=f.find(y=>M(y.getBoundingClientRect(),h));const m=e.composedPath();if(!this._targetElement||!_.find(y=>m.includes(y))||!f.find(y=>m.includes(y))||!t&&this._emitEvent("beforestart",e)===!1)return;this._areaLocation={x1:s,y1:i,x2:0,y2:0};const a=o.scrollingElement??o.body;this._scrollDelta={x:a.scrollLeft,y:a.scrollTop},this._singleClick=!0,this.clearSelection(!1,!0),T(o,["touchmove","mousemove"],this._delayedTapMove,{passive:!1}),T(o,["mouseup","touchcancel","touchend"],this._onTapStop),T(o,"scroll",this._onScroll)}_onSingleTap(e){const{singleTap:{intersect:t},range:s}=this._options.features,i=w(e);let n;if(t==="native")n=i.target;else if(t==="touch"){this.resolveSelectables();const{x:o,y:h}=i;n=this._selectables.find(_=>{const{right:f,left:m,top:a,bottom:y}=_.getBoundingClientRect();return o<f&&o>m&&h<y&&h>a})}if(!n)return;for(this.resolveSelectables();!this._selectables.includes(n);){if(!n.parentElement)return;n=n.parentElement}const{stored:r}=this._selection;if(this._emitEvent("start",e),e.shiftKey&&s&&this._latestElement){const o=this._latestElement,[h,_]=o.compareDocumentPosition(n)&4?[n,o]:[o,n],f=[...this._selectables.filter(m=>m.compareDocumentPosition(h)&4&&m.compareDocumentPosition(_)&2),h,_];this.select(f),this._latestElement=o}else r.includes(n)&&(r.length===1||e.ctrlKey||r.every(o=>this._selection.stored.includes(o)))?this.deselect(n):(this.select(n),this._latestElement=n);this._emitEvent("stop",e)}_delayedTapMove(e){const{container:t,document:s,behaviour:{startThreshold:i}}=this._options,{x1:n,y1:r}=this._areaLocation,{x:o,y:h}=w(e);if(typeof i=="number"&&S(o+h-(n+r))>=i||typeof i=="object"&&S(o-n)>=i.x||S(h-r)>=i.y){if(b(s,["mousemove","touchmove"],this._delayedTapMove,{passive:!1}),this._emitEvent("beforedrag",e)===!1){b(s,["mouseup","touchcancel","touchend"],this._onTapStop);return}T(s,["mousemove","touchmove"],this._onTapMove,{passive:!1}),v(this._area,"display","block"),A(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&&(T(this._targetElement,"wheel",this._manualScroll,{passive:!1}),this._selectables=this._selectables.filter(_=>this._targetElement.contains(_))),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{x:t,y:s}=w(e),{_scrollSpeed:i,_areaLocation:n,_options:r,_frame:o}=this,{speedDivider:h}=r.behaviour.scrolling,_=this._targetElement;if(n.x2=t,n.y2=s,this._scrollAvailable&&!this._scrollingActive&&(i.y||i.x)){this._scrollingActive=!0;const f=()=>{if(!i.x&&!i.y){this._scrollingActive=!1;return}const{scrollTop:m,scrollLeft:a}=_;i.y&&(_.scrollTop+=D(i.y/h),n.y1-=_.scrollTop-m),i.x&&(_.scrollLeft+=D(i.x/h),n.x1-=_.scrollLeft-a),o.next(e),requestAnimationFrame(f)};requestAnimationFrame(f)}else o.next(e);this._handleMoveEvent(e)}_handleMoveEvent(e){const{features:t}=this._options;(t.touch&&O()||this._scrollAvailable&&H())&&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)}_manualScroll(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()}_recalculateSelectionAreaRect(){const{_scrollSpeed:e,_areaLocation:t,_areaRect:s,_targetElement:i,_options:n}=this,{scrollTop:r,scrollHeight:o,clientHeight:h,scrollLeft:_,scrollWidth:f,clientWidth:m}=i,a=this._targetRect,{x1:y,y1:L}=t;let{x2:p,y2:d}=t;const{behaviour:{scrolling:{startScrollMargins:x}}}=n;p<a.left+x.x?(e.x=_?-S(a.left-p+x.x):0,p=p<a.left?a.left:p):p>a.right-x.x?(e.x=f-_-m?S(a.left+a.width-p-x.x):0,p=p>a.right?a.right:p):e.x=0,d<a.top+x.y?(e.y=r?-S(a.top-d+x.y):0,d=d<a.top?a.top:d):d>a.bottom-x.y?(e.y=o-r-h?S(a.top+a.height-d-x.y):0,d=d>a.bottom?a.bottom:d):e.y=0;const P=k(y,p),j=k(L,d),F=R(y,p),W=R(L,d);s.x=P,s.y=j,s.width=F-P,s.height=W-j}_redrawSelectionArea(){const{x:e,y:t,width:s,height:i}=this._areaRect,{style:n}=this._area;n.left=`${e}px`,n.top=`${t}px`,n.width=`${s}px`,n.height=`${i}px`}_onTapStop(e,t){var r;const{document:s,features:i}=this._options,{_singleClick:n}=this;b(s,["mousemove","touchmove"],this._delayedTapMove),b(s,["touchmove","mousemove"],this._onTapMove),b(s,["mouseup","touchcancel","touchend"],this._onTapStop),b(s,"scroll",this._onScroll),this._keepSelection(),e&&n&&i.singleTap.allow?this._onSingleTap(e):!n&&!t&&(this._updateElementSelection(),this._emitEvent("stop",e)),this._scrollSpeed.x=0,this._scrollSpeed.y=0,b(this._targetElement,"wheel",this._manualScroll,{passive:!0}),this._clippingElement.remove(),(r=this._frame)==null||r.cancel(),v(this._area,"display","none")}_updateElementSelection(){const{_selectables:e,_options:t,_selection:s,_areaRect:i}=this,{stored:n,selected:r,touched:o}=s,{intersect:h,overlap:_}=t.behaviour,f=_==="invert",m=[],a=[],y=[];for(let p=0;p<e.length;p++){const d=e[p];if(M(i,d.getBoundingClientRect(),h)){if(r.includes(d))n.includes(d)&&!o.includes(d)&&o.push(d);else if(f&&n.includes(d)){y.push(d);continue}else a.push(d);m.push(d)}}f&&a.push(...n.filter(p=>!r.includes(p)));const L=_==="keep";for(let p=0;p<r.length;p++){const d=r[p];!m.includes(d)&&!(L&&n.includes(d))&&y.push(d)}s.selected=m,s.changed={added:a,removed:y},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:n,stored:r}=t,o=s.filter(h=>!r.includes(h));switch(e.behaviour.overlap){case"drop":{t.stored=[...o,...r.filter(h=>!n.includes(h))];break}case"invert":{t.stored=[...o,...r.filter(h=>!i.removed.includes(h))];break}case"keep":{t.stored=[...r,...s.filter(h=>!r.includes(h))];break}}}trigger(e,t=!0){this._onTapStart(e,t)}resolveSelectables(){this._selectables=A(this._options.selectables,this._options.document)}clearSelection(e=!0,t=!1){const{selected:s,stored:i,changed:n}=this._selection;n.added=[],n.removed.push(...s,...e?i:[]),t||(this._emitEvent("move",null),this._emitEvent("stop",null)),this._selection={stored:e?[]:i,selected:[],touched:[],changed:{added:[],removed:[]}}}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:n}=this._selection,r=A(e,this._options.document).filter(o=>!i.includes(o)&&!n.includes(o));return n.push(...r),i.push(...r),s.added.push(...r),s.removed=[],this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)),r}deselect(e,t=!1){const{selected:s,stored:i,changed:n}=this._selection,r=A(e,this._options.document).filter(o=>s.includes(o)||i.includes(o));r.length&&(this._selection.stored=i.filter(o=>!r.includes(o)),this._selection.selected=s.filter(o=>!r.includes(o)),this._selection.changed.added=[],this._selection.changed.removed.push(...r.filter(o=>!n.removed.includes(o))),this._latestElement=void 0,t||(this._emitEvent("move",null),this._emitEvent("stop",null)))}}return u(B,"version","3.4.0"),B});
 //# sourceMappingURL=viselect.umd.js.map

package.json

 {
     "name": "@viselect/vanilla",
-    "version": "3.3.1",
+    "version": "3.4.0",
     "description": "Simple, lightweight and modern library library for making visual DOM Selections.",
@@ -39,3 +39,3 @@ "author": "Simon Reinisch <[e-mail]>",
     },
-    "gitHead": "2fd71bdec94d4d630239efd8fc6e877f14715436"
+    "gitHead": "0d77effda4d55968838aab76e8f7bc536f41c331"
 }

No alert changes

Worsened metrics

Total package byte prevSize

176763

decreased by-0.23%

Lines of code

825

decreased by-0.6%

No dependency changes