@viselect/vanilla - npm Package Compare versions

Comparing version 3.0.0-beta.10 to 3.0.0-beta.11

lib/viselect.cjs.d.ts

@@ -39,3 +39,4 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 type SelectionEvents = {
-    beforestart: (e: SelectionEvent) => boolean;
+    beforestart: (e: SelectionEvent) => boolean | void;
+    beforedrag: (e: SelectionEvent) => boolean | void;
     start: (e: SelectionEvent) => void;
@@ -42,0 +43,0 @@ move: (e: SelectionEvent) => void;

lib/viselect.cjs.js

@@ -1,3 +0,3 @@
-/*! @viselect/vanilla 3.0.0-beta.10 MIT | https://github.com/Simonwep/selection */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SelectionArea=e()}(this,(function(){"use strict";const t=(t,e="px")=>"number"==typeof t?t+e:t;function e({style:e},s,i){if("object"==typeof s)for(const[i,o]of Object.entries(s))e[i]=t(o);else void 0!==i&&(e[s]=t(i))}function s(t){return(e,s,i,o={})=>{e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(s)||(s=[s]);for(const n of e)for(const e of s)n[t](e,i,{capture:!1,...o});return[e,s,i,o]}}const i=s("addEventListener"),o=s("removeEventListener"),n=t=>{const e=t.touches&&t.touches[0]||t;return{tap:e,x:e.clientX,y:e.clientY,target:e.target}};function h(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let s=t.target.parentElement;for(e=[t.target,s];s=s.parentElement;)e.push(s);return e.push(document,window),e}function r(t,e,s="touch"){switch(s){case"center":{const s=e.left+e.width/2,i=e.top+e.height/2;return s>=t.left&&s<=t.right&&i>=t.top&&i<=t.bottom}case"cover":return e.left>=t.left&&e.top>=t.top&&e.right<=t.right&&e.bottom<=t.bottom;case"touch":return t.right>=e.left&&t.left<=e.right&&t.bottom>=e.top&&t.top<=e.bottom;default:throw new Error(`Unkown intersection mode: ${s}`)}}function c(t,e){const s=t.indexOf(e);~s&&t.splice(s,1)}function l(t,e=document){const s=Array.isArray(t)?t:[t],i=[];for(let t=0,o=s.length;t<o;t++){const o=s[t];"string"==typeof o?i.push(...Array.from(e.querySelectorAll(o))):o instanceof Element&&i.push(o)}return i}const a=()=>window.matchMedia("(hover: none), (pointer: coarse)").matches,u=(t,e)=>{for(const[s,i]of Object.entries(t)){const o=e[s];t[s]=void 0===o?t[s]:"object"!=typeof o||"object"!=typeof i||null===i||Array.isArray(i)?o:u(i,o)}return t},{abs:d,max:f,min:p,ceil:m}=Math;class SelectionArea extends class{constructor(){this.t=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(t,e){const s=this.t.get(t)||new Set;return this.t.set(t,s),s.add(e),this}removeEventListener(t,e){return this.t.get(t)?.delete(e),this}dispatchEvent(t,...e){let s=!0;for(const i of this.t.get(t)||[])s=!1!==i(...e)&&s;return s}unbindAllListeners(){this.t.clear()}}{constructor(t){super(),this.i={touched:[],stored:[],selected:[],changed:{added:[],removed:[]}},this.o=[],this.h=new DOMRect,this.l={y1:0,x2:0,y2:0,x1:0},this.u=!0,this.p=!0,this.m={x:0,y:0},this.v={x:0,y:0},this.disable=this.g.bind(this,!1),this.enable=this.g,this._=u({selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,behaviour:{overlap:"invert",intersect:"touch",startThreshold:{x:10,y:10},scrolling:{speedDivider:10,manualSpeed:750,startScrollMargins:{x:0,y:0}}},features:{range:!0,touch:!0,singleTap:{allow:!0,intersect:"native"}},startAreas:["html"],boundaries:["html"],container:"body"},t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))"function"==typeof this[t]&&(this[t]=this[t].bind(this));const{document:s,selectionAreaClass:i,selectionContainerClass:o}=this._;this.S=s.createElement("div"),this.A=s.createElement("div"),this.A.appendChild(this.S),this.S.classList.add(i),o&&this.A.classList.add(o),e(this.S,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),e(this.A,{overflow:"hidden",position:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this.enable()}g(t=!0){const{document:e,features:s}=this._,n=t?i:o;n(e,"mousedown",this.T),s.touch&&n(e,"touchstart",this.T,{passive:!1})}T(t,e=!1){const{x:s,y:o,target:c}=n(t),{_:a}=this,{document:u}=this._,d=c.getBoundingClientRect(),f=l(a.startAreas,a.document),p=l(a.boundaries,a.document);this.L=p.find((t=>r(t.getBoundingClientRect(),d)));const m=h(t);if(!this.L||!f.find((t=>m.includes(t)))||!p.find((t=>m.includes(t))))return;if(!e&&!1===this.j("beforestart",t))return;this.l={x1:s,y1:o,x2:0,y2:0};const v=u.scrollingElement||u.body;this.v={x:v.scrollLeft,y:v.scrollTop},this.u=!0,this.clearSelection(!1),i(u,["touchmove","mousemove"],this.C,{passive:!1}),i(u,["mouseup","touchcancel","touchend"],this.k),i(u,"scroll",this.M)}O(t){const{singleTap:{intersect:e},range:s}=this._.features,i=n(t);let o=null;if("native"===e)o=i.target;else if("touch"===e){this.resolveSelectables();const{x:t,y:e}=i;o=this.o.find((s=>{const{right:i,left:o,top:n,bottom:h}=s.getBoundingClientRect();return t<i&&t>o&&e<h&&e>n}))}if(!o)return;for(this.resolveSelectables();!this.o.includes(o);){if(!o.parentElement)return;o=o.parentElement}const{stored:h}=this.i;if(this.j("start",t),t.shiftKey&&h.length&&s){const t=h[0],[e,s]=4&t.compareDocumentPosition(o)?[o,t]:[t,o],i=[...this.o.filter((t=>4&t.compareDocumentPosition(e)&&2&t.compareDocumentPosition(s))),o,e,s];this.select(i)}else h.includes(o)&&(1===h.length||t.ctrlKey||h.every((t=>this.i.stored.includes(t))))?this.deselect(o):this.select(o);this.j("stop",t)}C(t){const{container:s,document:h,features:r,behaviour:{startThreshold:c}}=this._,{x1:u,y1:f}=this.l,{x:p,y:m}=n(t),v=typeof c;("number"===v&&d(p+m-(u+f))>=c||"object"===v&&d(p-u)>=c.x||d(m-f)>=c.y)&&(o(h,["mousemove","touchmove"],this.C,{passive:!1}),i(h,["mousemove","touchmove"],this.R,{passive:!1}),e(this.S,"display","block"),l(s,h)[0].appendChild(this.A),this.resolveSelectables(),this.u=!1,this.$=this.L.getBoundingClientRect(),this.p=this.L.scrollHeight!==this.L.clientHeight||this.L.scrollWidth!==this.L.clientWidth,this.p&&(i(h,"wheel",this.D,{passive:!1}),this.o=this.o.filter((t=>this.L.contains(t)))),this.H(),this.j("start",t),this.R(t)),r.touch&&a()&&t.preventDefault()}H(){const{A:t,L:s,S:i}=this,o=this.$=s.getBoundingClientRect();this.p?(e(t,{top:o.top,left:o.left,width:o.width,height:o.height}),e(i,{marginTop:-o.top,marginLeft:-o.left})):(e(t,{top:0,left:0,width:"100%",height:"100%"}),e(i,{marginTop:0,marginLeft:0}))}R(t){const{x:e,y:s}=n(t),{m:i,l:o,_:h}=this,{features:r}=h,{speedDivider:c}=h.behaviour.scrolling,l=this.L;if(o.x2=e,o.y2=s,this.p&&(i.y||i.x)){const e=()=>{if(!i.x&&!i.y)return;const{scrollTop:s,scrollLeft:n}=l;i.y&&(l.scrollTop+=m(i.y/c),o.y1-=l.scrollTop-s),i.x&&(l.scrollLeft+=m(i.x/c),o.x1-=l.scrollLeft-n),this.q(),this.F(),this.j("move",t),this.W(),requestAnimationFrame(e)};requestAnimationFrame(e)}else this.q(),this.F(),this.j("move",t),this.W();r.touch&&a()&&t.preventDefault()}M(){const{v:t,_:{document:e}}=this,{scrollTop:s,scrollLeft:i}=e.scrollingElement||e.body;this.l.x1+=t.x-i,this.l.y1+=t.y-s,t.x=i,t.y=s,this.H(),this.q(),this.F(),this.j("move",null),this.W()}D(t){const{manualSpeed:e}=this._.behaviour.scrolling,s=t.deltaY?t.deltaY>0?1:-1:0,i=t.deltaX?t.deltaX>0?1:-1:0;this.m.y+=s*e,this.m.x+=i*e,this.R(t),t.preventDefault()}q(){const{m:t,l:e,h:s,L:i,$:o,_:n}=this,{scrollTop:h,scrollHeight:r,clientHeight:c,scrollLeft:l,scrollWidth:a,clientWidth:u}=i,m=o,{x1:v,y1:y}=e;let{x2:g,y2:_}=e;const{behaviour:{scrolling:{startScrollMargins:b}}}=n;g<m.left+b.x?(t.x=l?-d(m.left-g+b.x):0,g=g<m.left?m.left:g):g>m.right-b.x?(t.x=a-l-u?d(m.left+m.width-g-b.x):0,g=g>m.right?m.right:g):t.x=0,_<m.top+b.y?(t.y=h?-d(m.top-_+b.y):0,_=_<m.top?m.top:_):_>m.bottom-b.y?(t.y=r-h-c?d(m.top+m.height-_-b.y):0,_=_>m.bottom?m.bottom:_):t.y=0;const x=p(v,g),w=p(y,_),S=f(v,g),A=f(y,_);s.x=x,s.y=w,s.width=S-x,s.height=A-w}W(){const{x:t,y:e,width:s,height:i}=this.h,{style:o}=this.S;o.left=`${t}px`,o.top=`${e}px`,o.width=`${s}px`,o.height=`${i}px`}k(t,s){const{document:i,features:n}=this._,{u:h}=this;o(i,["mousemove","touchmove"],this.C),o(i,["touchmove","mousemove"],this.R),o(i,["mouseup","touchcancel","touchend"],this.k),o(i,"scroll",this.M),t&&h&&n.singleTap.allow?this.O(t):h||s||(this.F(),this.j("stop",t)),this.m.x=0,this.m.y=0,this.p&&o(i,"wheel",this.D,{passive:!0}),this.A.remove(),e(this.S,"display","none"),this.I()}F(){const{o:t,_:e,i:s,h:i}=this,{stored:o,selected:n,touched:h}=s,{intersect:c,overlap:l}=e.behaviour,a=[],u=[],d=[];for(let e=0;e<t.length;e++){const s=t[e];if(r(i,s.getBoundingClientRect(),c)){if(n.includes(s))o.includes(s)&&!h.includes(s)&&h.push(s);else{if("invert"===l&&o.includes(s)){d.push(s);continue}u.push(s)}a.push(s)}}"invert"===l&&u.push(...o.filter((t=>!n.includes(t))));for(let t=0;t<n.length;t++){const e=n[t];a.includes(e)||"keep"===l&&o.includes(e)||d.push(e)}s.selected=a,s.changed={added:u,removed:d}}j(t,e){return this.emit(t,{event:e,store:this.i,selection:this})}I(){const{_:t,i:e}=this,{selected:s,changed:i,touched:o,stored:n}=e,h=s.filter((t=>!n.includes(t)));switch(t.behaviour.overlap){case"drop":e.stored=h.concat(n.filter((t=>!o.includes(t))));break;case"invert":e.stored=h.concat(n.filter((t=>!i.removed.includes(t))));break;case"keep":e.stored=n.concat(s.filter((t=>!n.includes(t))))}}trigger(t,e=!0){this.T(t,e)}resolveSelectables(){this.o=l(this._.selectables,this._.document)}clearSelection(t=!0){this.i={stored:t?[]:this.i.stored,selected:[],touched:[],changed:{added:[],removed:[]}}}getSelection(){return this.i.stored}getSelectionArea(){return this.S}cancel(t=!1){this.k(null,!t)}destroy(){this.cancel(),this.disable(),this.A.remove(),super.unbindAllListeners()}select(t,e=!1){const{changed:s,selected:i,stored:o}=this.i,n=l(t,this._.document).filter((t=>!i.includes(t)&&!o.includes(t)));return o.push(...n),i.push(...n),s.added.push(...n),!e&&this.j("move",null),n}deselect(t,e=!1){const{selected:s,stored:i,changed:o}=this.i;return!(!s.includes(t)&&!i.includes(t))&&(o.removed.push(t),c(i,t),c(s,t),!e&&this.j("move",null),!0)}}return SelectionArea.version="3.0.0-beta.10",SelectionArea}));
+/*! @viselect/vanilla 3.0.0-beta.11 MIT | https://github.com/Simonwep/selection */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SelectionArea=e()}(this,(function(){"use strict";const t=(t,e="px")=>"number"==typeof t?t+e:t;function e({style:e},s,i){if("object"==typeof s)for(const[i,o]of Object.entries(s))e[i]=t(o);else void 0!==i&&(e[s]=t(i))}function s(t){return(e,s,i,o={})=>{e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(s)||(s=[s]);for(const n of e)for(const e of s)n[t](e,i,{capture:!1,...o});return[e,s,i,o]}}const i=s("addEventListener"),o=s("removeEventListener"),n=t=>{const e=t.touches&&t.touches[0]||t;return{tap:e,x:e.clientX,y:e.clientY,target:e.target}};function h(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let s=t.target.parentElement;for(e=[t.target,s];s=s.parentElement;)e.push(s);return e.push(document,window),e}function r(t,e,s="touch"){switch(s){case"center":{const s=e.left+e.width/2,i=e.top+e.height/2;return s>=t.left&&s<=t.right&&i>=t.top&&i<=t.bottom}case"cover":return e.left>=t.left&&e.top>=t.top&&e.right<=t.right&&e.bottom<=t.bottom;case"touch":return t.right>=e.left&&t.left<=e.right&&t.bottom>=e.top&&t.top<=e.bottom;default:throw new Error(`Unkown intersection mode: ${s}`)}}function c(t,e){const s=t.indexOf(e);~s&&t.splice(s,1)}function l(t,e=document){const s=Array.isArray(t)?t:[t],i=[];for(let t=0,o=s.length;t<o;t++){const o=s[t];"string"==typeof o?i.push(...Array.from(e.querySelectorAll(o))):o instanceof Element&&i.push(o)}return i}const a=()=>matchMedia("(hover: none), (pointer: coarse)").matches,u=(t,e)=>{for(const[s,i]of Object.entries(t)){const o=e[s];t[s]=void 0===o?t[s]:"object"!=typeof o||"object"!=typeof i||null===i||Array.isArray(i)?o:u(i,o)}return t},{abs:d,max:f,min:p,ceil:m}=Math;class SelectionArea extends class{constructor(){this.t=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(t,e){const s=this.t.get(t)||new Set;return this.t.set(t,s),s.add(e),this}removeEventListener(t,e){return this.t.get(t)?.delete(e),this}dispatchEvent(t,...e){let s=!0;for(const i of this.t.get(t)||[])s=!1!==i(...e)&&s;return s}unbindAllListeners(){this.t.clear()}}{constructor(t){super(),this.i={touched:[],stored:[],selected:[],changed:{added:[],removed:[]}},this.o=[],this.h=new DOMRect,this.l={y1:0,x2:0,y2:0,x1:0},this.u=!0,this.p=!0,this.m={x:0,y:0},this.v={x:0,y:0},this.disable=this.g.bind(this,!1),this.enable=this.g,this._=u({selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,behaviour:{overlap:"invert",intersect:"touch",startThreshold:{x:10,y:10},scrolling:{speedDivider:10,manualSpeed:750,startScrollMargins:{x:0,y:0}}},features:{range:!0,touch:!0,singleTap:{allow:!0,intersect:"native"}},startAreas:["html"],boundaries:["html"],container:"body"},t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))"function"==typeof this[t]&&(this[t]=this[t].bind(this));const{document:s,selectionAreaClass:i,selectionContainerClass:o}=this._;this.S=s.createElement("div"),this.A=s.createElement("div"),this.A.appendChild(this.S),this.S.classList.add(i),o&&this.A.classList.add(o),e(this.S,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),e(this.A,{overflow:"hidden",position:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this.enable()}g(t=!0){const{document:e,features:s}=this._,n=t?i:o;n(e,"mousedown",this.T),s.touch&&n(e,"touchstart",this.T,{passive:!1})}T(t,e=!1){const{x:s,y:o,target:c}=n(t),{_:a}=this,{document:u}=this._,d=c.getBoundingClientRect(),f=l(a.startAreas,a.document),p=l(a.boundaries,a.document);this.L=p.find((t=>r(t.getBoundingClientRect(),d)));const m=h(t);if(!this.L||!f.find((t=>m.includes(t)))||!p.find((t=>m.includes(t))))return;if(!e&&!1===this.j("beforestart",t))return;this.l={x1:s,y1:o,x2:0,y2:0};const v=u.scrollingElement||u.body;this.v={x:v.scrollLeft,y:v.scrollTop},this.u=!0,this.clearSelection(!1),i(u,["touchmove","mousemove"],this.C,{passive:!1}),i(u,["mouseup","touchcancel","touchend"],this.M),i(u,"scroll",this.k)}O(t){const{singleTap:{intersect:e},range:s}=this._.features,i=n(t);let o=null;if("native"===e)o=i.target;else if("touch"===e){this.resolveSelectables();const{x:t,y:e}=i;o=this.o.find((s=>{const{right:i,left:o,top:n,bottom:h}=s.getBoundingClientRect();return t<i&&t>o&&e<h&&e>n}))}if(!o)return;for(this.resolveSelectables();!this.o.includes(o);){if(!o.parentElement)return;o=o.parentElement}const{stored:h}=this.i;if(this.j("start",t),t.shiftKey&&h.length&&s){const t=h[0],[e,s]=4&t.compareDocumentPosition(o)?[o,t]:[t,o],i=[...this.o.filter((t=>4&t.compareDocumentPosition(e)&&2&t.compareDocumentPosition(s))),e,s];this.select(i)}else h.includes(o)&&(1===h.length||t.ctrlKey||h.every((t=>this.i.stored.includes(t))))?this.deselect(o):this.select(o);this.j("stop",t)}C(t){const{container:s,document:h,features:r,behaviour:{startThreshold:c}}=this._,{x1:u,y1:f}=this.l,{x:p,y:m}=n(t),v=typeof c;if("number"===v&&d(p+m-(u+f))>=c||"object"===v&&d(p-u)>=c.x||d(m-f)>=c.y){if(o(h,["mousemove","touchmove"],this.C,{passive:!1}),!1===this.j("beforedrag",t))return void o(h,["mouseup","touchcancel","touchend"],this.M);i(h,["mousemove","touchmove"],this.R,{passive:!1}),e(this.S,"display","block"),l(s,h)[0].appendChild(this.A),this.resolveSelectables(),this.u=!1,this.$=this.L.getBoundingClientRect(),this.p=this.L.scrollHeight!==this.L.clientHeight||this.L.scrollWidth!==this.L.clientWidth,this.p&&(i(h,"wheel",this.D,{passive:!1}),this.o=this.o.filter((t=>this.L.contains(t)))),this.H(),this.j("start",t),this.R(t)}r.touch&&a()&&t.preventDefault()}H(){const{A:t,L:s,S:i}=this,o=this.$=s.getBoundingClientRect();this.p?(e(t,{top:o.top,left:o.left,width:o.width,height:o.height}),e(i,{marginTop:-o.top,marginLeft:-o.left})):(e(t,{top:0,left:0,width:"100%",height:"100%"}),e(i,{marginTop:0,marginLeft:0}))}R(t){const{x:e,y:s}=n(t),{m:i,l:o,_:h}=this,{features:r}=h,{speedDivider:c}=h.behaviour.scrolling,l=this.L;if(o.x2=e,o.y2=s,this.p&&(i.y||i.x)){const e=()=>{if(!i.x&&!i.y)return;const{scrollTop:s,scrollLeft:n}=l;i.y&&(l.scrollTop+=m(i.y/c),o.y1-=l.scrollTop-s),i.x&&(l.scrollLeft+=m(i.x/c),o.x1-=l.scrollLeft-n),this.q(),this.F(),this.j("move",t),this.W(),requestAnimationFrame(e)};requestAnimationFrame(e)}else this.q(),this.F(),this.j("move",t),this.W();r.touch&&a()&&t.preventDefault()}k(){const{v:t,_:{document:e}}=this,{scrollTop:s,scrollLeft:i}=e.scrollingElement||e.body;this.l.x1+=t.x-i,this.l.y1+=t.y-s,t.x=i,t.y=s,this.H(),this.q(),this.F(),this.j("move",null),this.W()}D(t){const{manualSpeed:e}=this._.behaviour.scrolling,s=t.deltaY?t.deltaY>0?1:-1:0,i=t.deltaX?t.deltaX>0?1:-1:0;this.m.y+=s*e,this.m.x+=i*e,this.R(t),t.preventDefault()}q(){const{m:t,l:e,h:s,L:i,$:o,_:n}=this,{scrollTop:h,scrollHeight:r,clientHeight:c,scrollLeft:l,scrollWidth:a,clientWidth:u}=i,m=o,{x1:v,y1:g}=e;let{x2:y,y2:_}=e;const{behaviour:{scrolling:{startScrollMargins:b}}}=n;y<m.left+b.x?(t.x=l?-d(m.left-y+b.x):0,y=y<m.left?m.left:y):y>m.right-b.x?(t.x=a-l-u?d(m.left+m.width-y-b.x):0,y=y>m.right?m.right:y):t.x=0,_<m.top+b.y?(t.y=h?-d(m.top-_+b.y):0,_=_<m.top?m.top:_):_>m.bottom-b.y?(t.y=r-h-c?d(m.top+m.height-_-b.y):0,_=_>m.bottom?m.bottom:_):t.y=0;const x=p(v,y),S=p(g,_),w=f(v,y),A=f(g,_);s.x=x,s.y=S,s.width=w-x,s.height=A-S}W(){const{x:t,y:e,width:s,height:i}=this.h,{style:o}=this.S;o.left=`${t}px`,o.top=`${e}px`,o.width=`${s}px`,o.height=`${i}px`}M(t,s){const{document:i,features:n}=this._,{u:h}=this;o(i,["mousemove","touchmove"],this.C),o(i,["touchmove","mousemove"],this.R),o(i,["mouseup","touchcancel","touchend"],this.M),o(i,"scroll",this.k),t&&h&&n.singleTap.allow?this.O(t):h||s||(this.F(),this.j("stop",t)),this.m.x=0,this.m.y=0,this.p&&o(i,"wheel",this.D,{passive:!0}),this.A.remove(),e(this.S,"display","none"),this.I()}F(){const{o:t,_:e,i:s,h:i}=this,{stored:o,selected:n,touched:h}=s,{intersect:c,overlap:l}=e.behaviour,a=[],u=[],d=[];for(let e=0;e<t.length;e++){const s=t[e];if(r(i,s.getBoundingClientRect(),c)){if(n.includes(s))o.includes(s)&&!h.includes(s)&&h.push(s);else{if("invert"===l&&o.includes(s)){d.push(s);continue}u.push(s)}a.push(s)}}"invert"===l&&u.push(...o.filter((t=>!n.includes(t))));for(let t=0;t<n.length;t++){const e=n[t];a.includes(e)||"keep"===l&&o.includes(e)||d.push(e)}s.selected=a,s.changed={added:u,removed:d}}j(t,e){return this.emit(t,{event:e,store:this.i,selection:this})}I(){const{_:t,i:e}=this,{selected:s,changed:i,touched:o,stored:n}=e,h=s.filter((t=>!n.includes(t)));switch(t.behaviour.overlap){case"drop":e.stored=h.concat(n.filter((t=>!o.includes(t))));break;case"invert":e.stored=h.concat(n.filter((t=>!i.removed.includes(t))));break;case"keep":e.stored=n.concat(s.filter((t=>!n.includes(t))))}}trigger(t,e=!0){this.T(t,e)}resolveSelectables(){this.o=l(this._.selectables,this._.document)}clearSelection(t=!0){this.i={stored:t?[]:this.i.stored,selected:[],touched:[],changed:{added:[],removed:[]}}}getSelection(){return this.i.stored}getSelectionArea(){return this.S}cancel(t=!1){this.M(null,!t)}destroy(){this.cancel(),this.disable(),this.A.remove(),super.unbindAllListeners()}select(t,e=!1){const{changed:s,selected:i,stored:o}=this.i,n=l(t,this._.document).filter((t=>!i.includes(t)&&!o.includes(t)));return o.push(...n),i.push(...n),s.added.push(...n),!e&&this.j("move",null),n}deselect(t,e=!1){const{selected:s,stored:i,changed:o}=this.i;return!(!s.includes(t)&&!i.includes(t))&&(o.removed.push(t),c(i,t),c(s,t),!e&&this.j("move",null),!0)}}return SelectionArea.version="3.0.0-beta.11",SelectionArea}));
 //# sourceMappingURL=viselect.cjs.js.map

lib/viselect.esm.d.ts

@@ -39,3 +39,4 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 type SelectionEvents = {
-    beforestart: (e: SelectionEvent) => boolean;
+    beforestart: (e: SelectionEvent) => boolean | void;
+    beforedrag: (e: SelectionEvent) => boolean | void;
     start: (e: SelectionEvent) => void;
@@ -42,0 +43,0 @@ move: (e: SelectionEvent) => void;

lib/viselect.esm.js

@@ -1,3 +0,3 @@
-/*! @viselect/vanilla 3.0.0-beta.10 MIT | https://github.com/Simonwep/selection */
-const t=(t,e="px")=>"number"==typeof t?t+e:t;function e({style:e},s,i){if("object"==typeof s)for(const[i,o]of Object.entries(s))e[i]=t(o);else void 0!==i&&(e[s]=t(i))}function s(t){return(e,s,i,o={})=>{e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(s)||(s=[s]);for(const n of e)for(const e of s)n[t](e,i,{capture:!1,...o});return[e,s,i,o]}}const i=s("addEventListener"),o=s("removeEventListener"),n=t=>{const e=t.touches&&t.touches[0]||t;return{tap:e,x:e.clientX,y:e.clientY,target:e.target}};function h(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let s=t.target.parentElement;for(e=[t.target,s];s=s.parentElement;)e.push(s);return e.push(document,window),e}function r(t,e,s="touch"){switch(s){case"center":{const s=e.left+e.width/2,i=e.top+e.height/2;return s>=t.left&&s<=t.right&&i>=t.top&&i<=t.bottom}case"cover":return e.left>=t.left&&e.top>=t.top&&e.right<=t.right&&e.bottom<=t.bottom;case"touch":return t.right>=e.left&&t.left<=e.right&&t.bottom>=e.top&&t.top<=e.bottom;default:throw new Error(`Unkown intersection mode: ${s}`)}}function c(t,e){const s=t.indexOf(e);~s&&t.splice(s,1)}function l(t,e=document){const s=Array.isArray(t)?t:[t],i=[];for(let t=0,o=s.length;t<o;t++){const o=s[t];"string"==typeof o?i.push(...Array.from(e.querySelectorAll(o))):o instanceof Element&&i.push(o)}return i}const a=()=>window.matchMedia("(hover: none), (pointer: coarse)").matches,u=(t,e)=>{for(const[s,i]of Object.entries(t)){const o=e[s];t[s]=void 0===o?t[s]:"object"!=typeof o||"object"!=typeof i||null===i||Array.isArray(i)?o:u(i,o)}return t},{abs:d,max:p,min:f,ceil:m}=Math;class SelectionArea extends class{constructor(){this.t=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(t,e){const s=this.t.get(t)||new Set;return this.t.set(t,s),s.add(e),this}removeEventListener(t,e){return this.t.get(t)?.delete(e),this}dispatchEvent(t,...e){let s=!0;for(const i of this.t.get(t)||[])s=!1!==i(...e)&&s;return s}unbindAllListeners(){this.t.clear()}}{constructor(t){super(),this.i={touched:[],stored:[],selected:[],changed:{added:[],removed:[]}},this.o=[],this.h=new DOMRect,this.l={y1:0,x2:0,y2:0,x1:0},this.u=!0,this.p=!0,this.m={x:0,y:0},this.v={x:0,y:0},this.disable=this.g.bind(this,!1),this.enable=this.g,this._=u({selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,behaviour:{overlap:"invert",intersect:"touch",startThreshold:{x:10,y:10},scrolling:{speedDivider:10,manualSpeed:750,startScrollMargins:{x:0,y:0}}},features:{range:!0,touch:!0,singleTap:{allow:!0,intersect:"native"}},startAreas:["html"],boundaries:["html"],container:"body"},t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))"function"==typeof this[t]&&(this[t]=this[t].bind(this));const{document:s,selectionAreaClass:i,selectionContainerClass:o}=this._;this.S=s.createElement("div"),this.A=s.createElement("div"),this.A.appendChild(this.S),this.S.classList.add(i),o&&this.A.classList.add(o),e(this.S,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),e(this.A,{overflow:"hidden",position:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this.enable()}g(t=!0){const{document:e,features:s}=this._,n=t?i:o;n(e,"mousedown",this.T),s.touch&&n(e,"touchstart",this.T,{passive:!1})}T(t,e=!1){const{x:s,y:o,target:c}=n(t),{_:a}=this,{document:u}=this._,d=c.getBoundingClientRect(),p=l(a.startAreas,a.document),f=l(a.boundaries,a.document);this.L=f.find((t=>r(t.getBoundingClientRect(),d)));const m=h(t);if(!this.L||!p.find((t=>m.includes(t)))||!f.find((t=>m.includes(t))))return;if(!e&&!1===this.C("beforestart",t))return;this.l={x1:s,y1:o,x2:0,y2:0};const v=u.scrollingElement||u.body;this.v={x:v.scrollLeft,y:v.scrollTop},this.u=!0,this.clearSelection(!1),i(u,["touchmove","mousemove"],this.j,{passive:!1}),i(u,["mouseup","touchcancel","touchend"],this.k),i(u,"scroll",this.M)}O(t){const{singleTap:{intersect:e},range:s}=this._.features,i=n(t);let o=null;if("native"===e)o=i.target;else if("touch"===e){this.resolveSelectables();const{x:t,y:e}=i;o=this.o.find((s=>{const{right:i,left:o,top:n,bottom:h}=s.getBoundingClientRect();return t<i&&t>o&&e<h&&e>n}))}if(!o)return;for(this.resolveSelectables();!this.o.includes(o);){if(!o.parentElement)return;o=o.parentElement}const{stored:h}=this.i;if(this.C("start",t),t.shiftKey&&h.length&&s){const t=h[0],[e,s]=4&t.compareDocumentPosition(o)?[o,t]:[t,o],i=[...this.o.filter((t=>4&t.compareDocumentPosition(e)&&2&t.compareDocumentPosition(s))),o,e,s];this.select(i)}else h.includes(o)&&(1===h.length||t.ctrlKey||h.every((t=>this.i.stored.includes(t))))?this.deselect(o):this.select(o);this.C("stop",t)}j(t){const{container:s,document:h,features:r,behaviour:{startThreshold:c}}=this._,{x1:u,y1:p}=this.l,{x:f,y:m}=n(t),v=typeof c;("number"===v&&d(f+m-(u+p))>=c||"object"===v&&d(f-u)>=c.x||d(m-p)>=c.y)&&(o(h,["mousemove","touchmove"],this.j,{passive:!1}),i(h,["mousemove","touchmove"],this.R,{passive:!1}),e(this.S,"display","block"),l(s,h)[0].appendChild(this.A),this.resolveSelectables(),this.u=!1,this.$=this.L.getBoundingClientRect(),this.p=this.L.scrollHeight!==this.L.clientHeight||this.L.scrollWidth!==this.L.clientWidth,this.p&&(i(h,"wheel",this.D,{passive:!1}),this.o=this.o.filter((t=>this.L.contains(t)))),this.H(),this.C("start",t),this.R(t)),r.touch&&a()&&t.preventDefault()}H(){const{A:t,L:s,S:i}=this,o=this.$=s.getBoundingClientRect();this.p?(e(t,{top:o.top,left:o.left,width:o.width,height:o.height}),e(i,{marginTop:-o.top,marginLeft:-o.left})):(e(t,{top:0,left:0,width:"100%",height:"100%"}),e(i,{marginTop:0,marginLeft:0}))}R(t){const{x:e,y:s}=n(t),{m:i,l:o,_:h}=this,{features:r}=h,{speedDivider:c}=h.behaviour.scrolling,l=this.L;if(o.x2=e,o.y2=s,this.p&&(i.y||i.x)){const e=()=>{if(!i.x&&!i.y)return;const{scrollTop:s,scrollLeft:n}=l;i.y&&(l.scrollTop+=m(i.y/c),o.y1-=l.scrollTop-s),i.x&&(l.scrollLeft+=m(i.x/c),o.x1-=l.scrollLeft-n),this.q(),this.F(),this.C("move",t),this.W(),requestAnimationFrame(e)};requestAnimationFrame(e)}else this.q(),this.F(),this.C("move",t),this.W();r.touch&&a()&&t.preventDefault()}M(){const{v:t,_:{document:e}}=this,{scrollTop:s,scrollLeft:i}=e.scrollingElement||e.body;this.l.x1+=t.x-i,this.l.y1+=t.y-s,t.x=i,t.y=s,this.H(),this.q(),this.F(),this.C("move",null),this.W()}D(t){const{manualSpeed:e}=this._.behaviour.scrolling,s=t.deltaY?t.deltaY>0?1:-1:0,i=t.deltaX?t.deltaX>0?1:-1:0;this.m.y+=s*e,this.m.x+=i*e,this.R(t),t.preventDefault()}q(){const{m:t,l:e,h:s,L:i,$:o,_:n}=this,{scrollTop:h,scrollHeight:r,clientHeight:c,scrollLeft:l,scrollWidth:a,clientWidth:u}=i,m=o,{x1:v,y1:g}=e;let{x2:y,y2:_}=e;const{behaviour:{scrolling:{startScrollMargins:x}}}=n;y<m.left+x.x?(t.x=l?-d(m.left-y+x.x):0,y=y<m.left?m.left:y):y>m.right-x.x?(t.x=a-l-u?d(m.left+m.width-y-x.x):0,y=y>m.right?m.right:y):t.x=0,_<m.top+x.y?(t.y=h?-d(m.top-_+x.y):0,_=_<m.top?m.top:_):_>m.bottom-x.y?(t.y=r-h-c?d(m.top+m.height-_-x.y):0,_=_>m.bottom?m.bottom:_):t.y=0;const b=f(v,y),w=f(g,_),S=p(v,y),A=p(g,_);s.x=b,s.y=w,s.width=S-b,s.height=A-w}W(){const{x:t,y:e,width:s,height:i}=this.h,{style:o}=this.S;o.left=`${t}px`,o.top=`${e}px`,o.width=`${s}px`,o.height=`${i}px`}k(t,s){const{document:i,features:n}=this._,{u:h}=this;o(i,["mousemove","touchmove"],this.j),o(i,["touchmove","mousemove"],this.R),o(i,["mouseup","touchcancel","touchend"],this.k),o(i,"scroll",this.M),t&&h&&n.singleTap.allow?this.O(t):h||s||(this.F(),this.C("stop",t)),this.m.x=0,this.m.y=0,this.p&&o(i,"wheel",this.D,{passive:!0}),this.A.remove(),e(this.S,"display","none"),this.I()}F(){const{o:t,_:e,i:s,h:i}=this,{stored:o,selected:n,touched:h}=s,{intersect:c,overlap:l}=e.behaviour,a=[],u=[],d=[];for(let e=0;e<t.length;e++){const s=t[e];if(r(i,s.getBoundingClientRect(),c)){if(n.includes(s))o.includes(s)&&!h.includes(s)&&h.push(s);else{if("invert"===l&&o.includes(s)){d.push(s);continue}u.push(s)}a.push(s)}}"invert"===l&&u.push(...o.filter((t=>!n.includes(t))));for(let t=0;t<n.length;t++){const e=n[t];a.includes(e)||"keep"===l&&o.includes(e)||d.push(e)}s.selected=a,s.changed={added:u,removed:d}}C(t,e){return this.emit(t,{event:e,store:this.i,selection:this})}I(){const{_:t,i:e}=this,{selected:s,changed:i,touched:o,stored:n}=e,h=s.filter((t=>!n.includes(t)));switch(t.behaviour.overlap){case"drop":e.stored=h.concat(n.filter((t=>!o.includes(t))));break;case"invert":e.stored=h.concat(n.filter((t=>!i.removed.includes(t))));break;case"keep":e.stored=n.concat(s.filter((t=>!n.includes(t))))}}trigger(t,e=!0){this.T(t,e)}resolveSelectables(){this.o=l(this._.selectables,this._.document)}clearSelection(t=!0){this.i={stored:t?[]:this.i.stored,selected:[],touched:[],changed:{added:[],removed:[]}}}getSelection(){return this.i.stored}getSelectionArea(){return this.S}cancel(t=!1){this.k(null,!t)}destroy(){this.cancel(),this.disable(),this.A.remove(),super.unbindAllListeners()}select(t,e=!1){const{changed:s,selected:i,stored:o}=this.i,n=l(t,this._.document).filter((t=>!i.includes(t)&&!o.includes(t)));return o.push(...n),i.push(...n),s.added.push(...n),!e&&this.C("move",null),n}deselect(t,e=!1){const{selected:s,stored:i,changed:o}=this.i;return!(!s.includes(t)&&!i.includes(t))&&(o.removed.push(t),c(i,t),c(s,t),!e&&this.C("move",null),!0)}}SelectionArea.version="3.0.0-beta.10";export{SelectionArea as default};
+/*! @viselect/vanilla 3.0.0-beta.11 MIT | https://github.com/Simonwep/selection */
+const t=(t,e="px")=>"number"==typeof t?t+e:t;function e({style:e},s,i){if("object"==typeof s)for(const[i,o]of Object.entries(s))e[i]=t(o);else void 0!==i&&(e[s]=t(i))}function s(t){return(e,s,i,o={})=>{e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(s)||(s=[s]);for(const n of e)for(const e of s)n[t](e,i,{capture:!1,...o});return[e,s,i,o]}}const i=s("addEventListener"),o=s("removeEventListener"),n=t=>{const e=t.touches&&t.touches[0]||t;return{tap:e,x:e.clientX,y:e.clientY,target:e.target}};function h(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let s=t.target.parentElement;for(e=[t.target,s];s=s.parentElement;)e.push(s);return e.push(document,window),e}function r(t,e,s="touch"){switch(s){case"center":{const s=e.left+e.width/2,i=e.top+e.height/2;return s>=t.left&&s<=t.right&&i>=t.top&&i<=t.bottom}case"cover":return e.left>=t.left&&e.top>=t.top&&e.right<=t.right&&e.bottom<=t.bottom;case"touch":return t.right>=e.left&&t.left<=e.right&&t.bottom>=e.top&&t.top<=e.bottom;default:throw new Error(`Unkown intersection mode: ${s}`)}}function c(t,e){const s=t.indexOf(e);~s&&t.splice(s,1)}function l(t,e=document){const s=Array.isArray(t)?t:[t],i=[];for(let t=0,o=s.length;t<o;t++){const o=s[t];"string"==typeof o?i.push(...Array.from(e.querySelectorAll(o))):o instanceof Element&&i.push(o)}return i}const a=()=>matchMedia("(hover: none), (pointer: coarse)").matches,u=(t,e)=>{for(const[s,i]of Object.entries(t)){const o=e[s];t[s]=void 0===o?t[s]:"object"!=typeof o||"object"!=typeof i||null===i||Array.isArray(i)?o:u(i,o)}return t},{abs:d,max:p,min:f,ceil:m}=Math;class SelectionArea extends class{constructor(){this.t=new Map,this.on=this.addEventListener,this.off=this.removeEventListener,this.emit=this.dispatchEvent}addEventListener(t,e){const s=this.t.get(t)||new Set;return this.t.set(t,s),s.add(e),this}removeEventListener(t,e){return this.t.get(t)?.delete(e),this}dispatchEvent(t,...e){let s=!0;for(const i of this.t.get(t)||[])s=!1!==i(...e)&&s;return s}unbindAllListeners(){this.t.clear()}}{constructor(t){super(),this.i={touched:[],stored:[],selected:[],changed:{added:[],removed:[]}},this.o=[],this.h=new DOMRect,this.l={y1:0,x2:0,y2:0,x1:0},this.u=!0,this.p=!0,this.m={x:0,y:0},this.v={x:0,y:0},this.disable=this.g.bind(this,!1),this.enable=this.g,this._=u({selectionAreaClass:"selection-area",selectionContainerClass:void 0,selectables:[],document:window.document,behaviour:{overlap:"invert",intersect:"touch",startThreshold:{x:10,y:10},scrolling:{speedDivider:10,manualSpeed:750,startScrollMargins:{x:0,y:0}}},features:{range:!0,touch:!0,singleTap:{allow:!0,intersect:"native"}},startAreas:["html"],boundaries:["html"],container:"body"},t);for(const t of Object.getOwnPropertyNames(Object.getPrototypeOf(this)))"function"==typeof this[t]&&(this[t]=this[t].bind(this));const{document:s,selectionAreaClass:i,selectionContainerClass:o}=this._;this.S=s.createElement("div"),this.A=s.createElement("div"),this.A.appendChild(this.S),this.S.classList.add(i),o&&this.A.classList.add(o),e(this.S,{willChange:"top, left, bottom, right, width, height",top:0,left:0,position:"fixed"}),e(this.A,{overflow:"hidden",position:"fixed",transform:"translate3d(0, 0, 0)",pointerEvents:"none",zIndex:"1"}),this.enable()}g(t=!0){const{document:e,features:s}=this._,n=t?i:o;n(e,"mousedown",this.T),s.touch&&n(e,"touchstart",this.T,{passive:!1})}T(t,e=!1){const{x:s,y:o,target:c}=n(t),{_:a}=this,{document:u}=this._,d=c.getBoundingClientRect(),p=l(a.startAreas,a.document),f=l(a.boundaries,a.document);this.L=f.find((t=>r(t.getBoundingClientRect(),d)));const m=h(t);if(!this.L||!p.find((t=>m.includes(t)))||!f.find((t=>m.includes(t))))return;if(!e&&!1===this.C("beforestart",t))return;this.l={x1:s,y1:o,x2:0,y2:0};const v=u.scrollingElement||u.body;this.v={x:v.scrollLeft,y:v.scrollTop},this.u=!0,this.clearSelection(!1),i(u,["touchmove","mousemove"],this.M,{passive:!1}),i(u,["mouseup","touchcancel","touchend"],this.j),i(u,"scroll",this.k)}O(t){const{singleTap:{intersect:e},range:s}=this._.features,i=n(t);let o=null;if("native"===e)o=i.target;else if("touch"===e){this.resolveSelectables();const{x:t,y:e}=i;o=this.o.find((s=>{const{right:i,left:o,top:n,bottom:h}=s.getBoundingClientRect();return t<i&&t>o&&e<h&&e>n}))}if(!o)return;for(this.resolveSelectables();!this.o.includes(o);){if(!o.parentElement)return;o=o.parentElement}const{stored:h}=this.i;if(this.C("start",t),t.shiftKey&&h.length&&s){const t=h[0],[e,s]=4&t.compareDocumentPosition(o)?[o,t]:[t,o],i=[...this.o.filter((t=>4&t.compareDocumentPosition(e)&&2&t.compareDocumentPosition(s))),e,s];this.select(i)}else h.includes(o)&&(1===h.length||t.ctrlKey||h.every((t=>this.i.stored.includes(t))))?this.deselect(o):this.select(o);this.C("stop",t)}M(t){const{container:s,document:h,features:r,behaviour:{startThreshold:c}}=this._,{x1:u,y1:p}=this.l,{x:f,y:m}=n(t),v=typeof c;if("number"===v&&d(f+m-(u+p))>=c||"object"===v&&d(f-u)>=c.x||d(m-p)>=c.y){if(o(h,["mousemove","touchmove"],this.M,{passive:!1}),!1===this.C("beforedrag",t))return void o(h,["mouseup","touchcancel","touchend"],this.j);i(h,["mousemove","touchmove"],this.R,{passive:!1}),e(this.S,"display","block"),l(s,h)[0].appendChild(this.A),this.resolveSelectables(),this.u=!1,this.$=this.L.getBoundingClientRect(),this.p=this.L.scrollHeight!==this.L.clientHeight||this.L.scrollWidth!==this.L.clientWidth,this.p&&(i(h,"wheel",this.D,{passive:!1}),this.o=this.o.filter((t=>this.L.contains(t)))),this.H(),this.C("start",t),this.R(t)}r.touch&&a()&&t.preventDefault()}H(){const{A:t,L:s,S:i}=this,o=this.$=s.getBoundingClientRect();this.p?(e(t,{top:o.top,left:o.left,width:o.width,height:o.height}),e(i,{marginTop:-o.top,marginLeft:-o.left})):(e(t,{top:0,left:0,width:"100%",height:"100%"}),e(i,{marginTop:0,marginLeft:0}))}R(t){const{x:e,y:s}=n(t),{m:i,l:o,_:h}=this,{features:r}=h,{speedDivider:c}=h.behaviour.scrolling,l=this.L;if(o.x2=e,o.y2=s,this.p&&(i.y||i.x)){const e=()=>{if(!i.x&&!i.y)return;const{scrollTop:s,scrollLeft:n}=l;i.y&&(l.scrollTop+=m(i.y/c),o.y1-=l.scrollTop-s),i.x&&(l.scrollLeft+=m(i.x/c),o.x1-=l.scrollLeft-n),this.q(),this.F(),this.C("move",t),this.W(),requestAnimationFrame(e)};requestAnimationFrame(e)}else this.q(),this.F(),this.C("move",t),this.W();r.touch&&a()&&t.preventDefault()}k(){const{v:t,_:{document:e}}=this,{scrollTop:s,scrollLeft:i}=e.scrollingElement||e.body;this.l.x1+=t.x-i,this.l.y1+=t.y-s,t.x=i,t.y=s,this.H(),this.q(),this.F(),this.C("move",null),this.W()}D(t){const{manualSpeed:e}=this._.behaviour.scrolling,s=t.deltaY?t.deltaY>0?1:-1:0,i=t.deltaX?t.deltaX>0?1:-1:0;this.m.y+=s*e,this.m.x+=i*e,this.R(t),t.preventDefault()}q(){const{m:t,l:e,h:s,L:i,$:o,_:n}=this,{scrollTop:h,scrollHeight:r,clientHeight:c,scrollLeft:l,scrollWidth:a,clientWidth:u}=i,m=o,{x1:v,y1:g}=e;let{x2:y,y2:_}=e;const{behaviour:{scrolling:{startScrollMargins:b}}}=n;y<m.left+b.x?(t.x=l?-d(m.left-y+b.x):0,y=y<m.left?m.left:y):y>m.right-b.x?(t.x=a-l-u?d(m.left+m.width-y-b.x):0,y=y>m.right?m.right:y):t.x=0,_<m.top+b.y?(t.y=h?-d(m.top-_+b.y):0,_=_<m.top?m.top:_):_>m.bottom-b.y?(t.y=r-h-c?d(m.top+m.height-_-b.y):0,_=_>m.bottom?m.bottom:_):t.y=0;const x=f(v,y),S=f(g,_),w=p(v,y),A=p(g,_);s.x=x,s.y=S,s.width=w-x,s.height=A-S}W(){const{x:t,y:e,width:s,height:i}=this.h,{style:o}=this.S;o.left=`${t}px`,o.top=`${e}px`,o.width=`${s}px`,o.height=`${i}px`}j(t,s){const{document:i,features:n}=this._,{u:h}=this;o(i,["mousemove","touchmove"],this.M),o(i,["touchmove","mousemove"],this.R),o(i,["mouseup","touchcancel","touchend"],this.j),o(i,"scroll",this.k),t&&h&&n.singleTap.allow?this.O(t):h||s||(this.F(),this.C("stop",t)),this.m.x=0,this.m.y=0,this.p&&o(i,"wheel",this.D,{passive:!0}),this.A.remove(),e(this.S,"display","none"),this.I()}F(){const{o:t,_:e,i:s,h:i}=this,{stored:o,selected:n,touched:h}=s,{intersect:c,overlap:l}=e.behaviour,a=[],u=[],d=[];for(let e=0;e<t.length;e++){const s=t[e];if(r(i,s.getBoundingClientRect(),c)){if(n.includes(s))o.includes(s)&&!h.includes(s)&&h.push(s);else{if("invert"===l&&o.includes(s)){d.push(s);continue}u.push(s)}a.push(s)}}"invert"===l&&u.push(...o.filter((t=>!n.includes(t))));for(let t=0;t<n.length;t++){const e=n[t];a.includes(e)||"keep"===l&&o.includes(e)||d.push(e)}s.selected=a,s.changed={added:u,removed:d}}C(t,e){return this.emit(t,{event:e,store:this.i,selection:this})}I(){const{_:t,i:e}=this,{selected:s,changed:i,touched:o,stored:n}=e,h=s.filter((t=>!n.includes(t)));switch(t.behaviour.overlap){case"drop":e.stored=h.concat(n.filter((t=>!o.includes(t))));break;case"invert":e.stored=h.concat(n.filter((t=>!i.removed.includes(t))));break;case"keep":e.stored=n.concat(s.filter((t=>!n.includes(t))))}}trigger(t,e=!0){this.T(t,e)}resolveSelectables(){this.o=l(this._.selectables,this._.document)}clearSelection(t=!0){this.i={stored:t?[]:this.i.stored,selected:[],touched:[],changed:{added:[],removed:[]}}}getSelection(){return this.i.stored}getSelectionArea(){return this.S}cancel(t=!1){this.j(null,!t)}destroy(){this.cancel(),this.disable(),this.A.remove(),super.unbindAllListeners()}select(t,e=!1){const{changed:s,selected:i,stored:o}=this.i,n=l(t,this._.document).filter((t=>!i.includes(t)&&!o.includes(t)));return o.push(...n),i.push(...n),s.added.push(...n),!e&&this.C("move",null),n}deselect(t,e=!1){const{selected:s,stored:i,changed:o}=this.i;return!(!s.includes(t)&&!i.includes(t))&&(o.removed.push(t),c(i,t),c(s,t),!e&&this.C("move",null),!0)}}SelectionArea.version="3.0.0-beta.11";export{SelectionArea as default};
 //# sourceMappingURL=viselect.esm.js.map

package.json

 {
     "name": "@viselect/vanilla",
-    "version": "3.0.0-beta.10",
+    "version": "3.0.0-beta.11",
     "description": "Simple, lightweight and modern library library for making visual DOM Selections.",
@@ -47,3 +47,3 @@ "main": "./lib/viselect.cjs.js",
     },
-    "gitHead": "fd0d03ac6a90d80bc3d66ccdeea57bb34b294b9a"
+    "gitHead": "bc04eff9a94b690fddf8ed47243cff64d71ba807"
 }

README.md

@@ -182,5 +182,6 @@ <h3 align="center">
 
-| Event          | Description |
-| -------------- | ----------- | 
+| Event | Description |
+| ----- | ----------- | 
 | `beforestart` | The user tapped one of the areas within the specified boundaries. Return `false` to cancel selection immediatly.  |
+| `beforedrag` | Same as `beforestart` but _before_ the user starts selecting by dragging the mouse. Can be used to conditionally allow a selection by dragging. Return `false` to cancel the selection. |
 | `start` | Selection started, here you can decide if you want to keep your previously selected elements. | 
@@ -203,2 +204,6 @@ | `move` | Selection is active, user is moving the pointer around. |
     console.log('beforestart', evt);
+}).on('beforedrag', evt => {
+
+    // Same as 'beforestart' but before a selection via dragging happens.
+    console.log('beforedrag', evt);
 }).on('start', evt => {
@@ -205,0 +210,0 @@

src/index.ts

@@ -231,3 +231,3 @@ import {EventTarget} from './EventEmitter';
                 (el.compareDocumentPosition(following) & 2)
-            ), target, preceding, following];
+            ), preceding, following];
 
@@ -265,2 +265,8 @@ this.select(rangeItems);
             off(document, ['mousemove', 'touchmove'], this._delayedTapMove, {passive: false});
+
+            if (this._emitEvent('beforedrag', evt) === false) {
+                off(document, ['mouseup', 'touchcancel', 'touchend'], this._onTapStop);
+                return;
+            }
+
             on(document, ['mousemove', 'touchmove'], this._onTapMove, {passive: false});
@@ -466,10 +472,10 @@
         let {x2, y2} = _areaLocation;
-        const {behaviour: {scrolling: {startScrollMargins}}} = _options
+        const {behaviour: {scrolling: {startScrollMargins}}} = _options;
 
         if (x2 < brect.left + startScrollMargins.x) {
             _scrollSpeed.x = scrollLeft ? -abs(brect.left - x2 + startScrollMargins.x) : 0;
-            x2 = x2 < brect.left ? brect.left : x2
+            x2 = x2 < brect.left ? brect.left : x2;
         } else if (x2 > brect.right - startScrollMargins.x) {
             _scrollSpeed.x = scrollWidth - scrollLeft - clientWidth ? abs(brect.left + brect.width - x2 - startScrollMargins.x) : 0;
-            x2 = x2 > brect.right ? brect.right : x2
+            x2 = x2 > brect.right ? brect.right : x2;
         } else {
@@ -481,6 +487,6 @@ _scrollSpeed.x = 0;
             _scrollSpeed.y = scrollTop ? -abs(brect.top - y2 + startScrollMargins.y) : 0;
-            y2 = y2 < brect.top ? brect.top : y2
+            y2 = y2 < brect.top ? brect.top : y2;
         } else if (y2 > brect.bottom - startScrollMargins.y) {
             _scrollSpeed.y = scrollHeight - scrollTop - clientHeight ? abs(brect.top + brect.height - y2 - startScrollMargins.y) : 0;
-            y2 = y2 > brect.bottom ? brect.bottom : y2
+            y2 = y2 > brect.bottom ? brect.bottom : y2;
         } else {
@@ -487,0 +493,0 @@ _scrollSpeed.y = 0;

src/types.ts

@@ -30,3 +30,4 @@ import type SelectionArea from '@vanilla/index';
 export type SelectionEvents = {
-    beforestart: (e: SelectionEvent) => boolean;
+    beforestart: (e: SelectionEvent) => boolean | void;
+    beforedrag: (e: SelectionEvent) => boolean | void;
     start: (e: SelectionEvent) => void;
@@ -55,3 +56,3 @@ move: (e: SelectionEvent) => void
     manualSpeed: number;
-    startScrollMargins: {x: number, y: number}
+    startScrollMargins: {x: number, y: number};
 }
@@ -58,0 +59,0 @@

src/utils/constants.ts

 // Determines if the device's primary input supports touch
 // See this article: https://css-tricks.com/touch-devices-not-judged-size/
-export const isTouchDevice = (): boolean => window.matchMedia('(hover: none), (pointer: coarse)').matches;
+export const isTouchDevice = (): boolean => matchMedia('(hover: none), (pointer: coarse)').matches;

No alert changes

Improved metrics

Total package byte prevSize

192281

increased by0.76%

Lines of code

1466

increased by0.48%

Number of lines in readme file

242

increased by2.11%

No dependency changes