diff --git a/404.html b/404.html index 334c977a..0d1ac9f7 100644 --- a/404.html +++ b/404.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/DragSelect.d.ts b/DragSelect.d.ts index 7236bc61..8fe4f7ab 100644 --- a/DragSelect.d.ts +++ b/DragSelect.d.ts @@ -403,6 +403,8 @@ type Settings = { dropZoneTargetClass?: string; /** [=ds-dropzone-inside] on dropZone that has elements inside after any drop */ dropZoneInsideClass?: string; + /** [=true] Whether to use z-index when selecting and dragging an item */ + useLayers?: boolean; }; type DSCallbackObject = Readonly & DSAreaPublishEventData & DSKeyStorePublishEventData & DSPointerStorePublishEventData & DSInteractionPublishEventData & DSSelectablePublishEventData & DSSelectedPublishEventData & DSPublicPublishAdditionalEventData>>; type DSInputDropZone = { diff --git a/DragSelect.esm.js b/DragSelect.esm.js index f4814fd0..2615b661 100644 --- a/DragSelect.esm.js +++ b/DragSelect.esm.js @@ -554,7 +554,9 @@ class Drag { this.moveElements(posDirection); }; handleZIndex = (add) => { - this._elements.forEach((element) => (element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + (add ? 9999 : -9998)}`)); + if (this.Settings.useLayers) { + this._elements.forEach((element) => (element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + (add ? 9999 : -9998)}`)); + } }; moveElements = (posDirection) => { // [PUBLICLY EXPOSED METHOD] @@ -1578,7 +1580,8 @@ class SelectedSet extends Set { this.PS.publish('Selected:added:pre', publishData); super.add(element); element.classList.add(this.Settings.selectedClass); - element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + 1}`; + if (this.Settings.useLayers) + element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + 1}`; this.PS.publish('Selected:added', publishData); return this; } @@ -1592,7 +1595,8 @@ class SelectedSet extends Set { this.PS.publish('Selected:removed:pre', publishData); const deleted = super.delete(element); element.classList.remove(this.Settings.selectedClass); - element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) - 1}`; + if (this.Settings.useLayers) + element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) - 1}`; this.PS.publish('Selected:removed', publishData); return deleted; } @@ -2187,6 +2191,7 @@ const hydrateSettings = (settings, withFallback) => ({ ...hydrateHelper('dropZoneReadyClass', settings.dropZoneReadyClass, withFallback, 'ds-dropzone-ready'), ...hydrateHelper('dropZoneTargetClass', settings.dropZoneTargetClass, withFallback, 'ds-dropzone-target'), ...hydrateHelper('dropZoneInsideClass', settings.dropZoneInsideClass, withFallback, 'ds-dropzone-inside'), + ...hydrateHelper('useLayers', settings.useLayers, withFallback, true), }); class SettingsStore { diff --git a/DragSelect.js b/DragSelect.js index fc16f1ac..716d9c81 100644 --- a/DragSelect.js +++ b/DragSelect.js @@ -560,7 +560,9 @@ this.moveElements(posDirection); }; handleZIndex = (add) => { - this._elements.forEach((element) => (element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + (add ? 9999 : -9998)}`)); + if (this.Settings.useLayers) { + this._elements.forEach((element) => (element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + (add ? 9999 : -9998)}`)); + } }; moveElements = (posDirection) => { // [PUBLICLY EXPOSED METHOD] @@ -1584,7 +1586,8 @@ this.PS.publish('Selected:added:pre', publishData); super.add(element); element.classList.add(this.Settings.selectedClass); - element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + 1}`; + if (this.Settings.useLayers) + element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) + 1}`; this.PS.publish('Selected:added', publishData); return this; } @@ -1598,7 +1601,8 @@ this.PS.publish('Selected:removed:pre', publishData); const deleted = super.delete(element); element.classList.remove(this.Settings.selectedClass); - element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) - 1}`; + if (this.Settings.useLayers) + element.style.zIndex = `${(parseInt(element.style.zIndex) || 0) - 1}`; this.PS.publish('Selected:removed', publishData); return deleted; } @@ -2193,6 +2197,7 @@ ...hydrateHelper('dropZoneReadyClass', settings.dropZoneReadyClass, withFallback, 'ds-dropzone-ready'), ...hydrateHelper('dropZoneTargetClass', settings.dropZoneTargetClass, withFallback, 'ds-dropzone-target'), ...hydrateHelper('dropZoneInsideClass', settings.dropZoneInsideClass, withFallback, 'ds-dropzone-inside'), + ...hydrateHelper('useLayers', settings.useLayers, withFallback, true), }); class SettingsStore { diff --git a/assets/js/94c45520.fc75be7d.js b/assets/js/94c45520.924470a6.js similarity index 53% rename from assets/js/94c45520.fc75be7d.js rename to assets/js/94c45520.924470a6.js index 41c22471..3968a572 100644 --- a/assets/js/94c45520.fc75be7d.js +++ b/assets/js/94c45520.924470a6.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdrag_select_docs=self.webpackChunkdrag_select_docs||[]).push([[537],{5318:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>k});var a=n(7378);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var d=a.createContext({}),p=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,d=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),m=p(n),g=r,k=m["".concat(d,".").concat(g)]||m[g]||u[g]||l;return n?a.createElement(k,i(i({ref:t},s),{},{components:n})):a.createElement(k,i({ref:t},s))}));function k(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=g;var o={};for(var d in t)hasOwnProperty.call(t,d)&&(o[d]=t[d]);o.originalType=e,o[m]="string"==typeof e?e:r,i[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>o,toc:()=>p});var a=n(5773),r=(n(7378),n(5318));const l={sidebar_position:1,description:"DragSelect Settings (API)"},i="Settings",o={unversionedId:"API/Settings",id:"API/Settings",title:"Settings",description:"DragSelect Settings (API)",source:"@site/docs/API/Settings.mdx",sourceDirName:"API",slug:"/API/Settings",permalink:"/docs/API/Settings",draft:!1,editUrl:"https://github.com/ThibaultJanBeyer/DragSelect/docs/API/Settings.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,description:"DragSelect Settings (API)"},sidebar:"tutorialSidebar",previous:{title:"API",permalink:"/docs/category/api"},next:{title:"Events (Pub/sub)",permalink:"/docs/API/Events"}},d={},p=[{value:"Selecting",id:"selecting",level:2},{value:"AutoScroll",id:"autoscroll",level:2},{value:"Dragging",id:"dragging",level:2},{value:"Dropping",id:"dropping",level:2},{value:"Styling",id:"styling",level:2},{value:"Miscellaneous",id:"miscellaneous",level:2},{value:"DragSelect Example with all Props",id:"dragselect-example-with-all-props",level:2}],s={toc:p},m="wrapper";function u(e){let{components:t,...n}=e;return(0,r.kt)(m,(0,a.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"settings"},"Settings"),(0,r.kt)("p",null,"aka ",(0,r.kt)("inlineCode",{parentName:"p"},"Constructor Properties")," aka ",(0,r.kt)("inlineCode",{parentName:"p"},"Properties")," aka ",(0,r.kt)("inlineCode",{parentName:"p"},"options"),". "),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const ds = new DragSelect({\n selectables: document.querySelectorAll('.selectable'),\n});\n")),(0,r.kt)("p",null,(0,r.kt)("em",{parentName:"p"},"DragSelect is hyper customizable"),": all properties are optional, you can totally just pass an empty object and set the settings later. See ",(0,r.kt)("a",{parentName:"p",href:"../guided-examples/Updating-Settings"},"updating-settings")),(0,r.kt)("h2",{id:"selecting"},"Selecting"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectables")),(0,r.kt)("td",{parentName:"tr",align:null},"[HTMLElement ","|"," SVGElement]"," ","|"," HTMLElement ","|"," SVGElement"),(0,r.kt)("td",{parentName:"tr",align:null},"[]"),(0,r.kt)("td",{parentName:"tr",align:null},"The elements that can be selected")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"area")),(0,r.kt)("td",{parentName:"tr",align:null},"HTMLElement ","|"," SVGElement ","|"," Document"),(0,r.kt)("td",{parentName:"tr",align:null},"document"),(0,r.kt)("td",{parentName:"tr",align:null},"The square in which you are able to select the elements")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selector")),(0,r.kt)("td",{parentName:"tr",align:null},"HTMLElement"),(0,r.kt)("td",{parentName:"tr",align:null},"Is Auto-Created"),(0,r.kt)("td",{parentName:"tr",align:null},"The square that will be used to draw the selection.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectionThreshold")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"0"),(0,r.kt)("td",{parentName:"tr",align:null},"How much % of the element has to be selected to be considered selected (0 = just touching, 1 = fully inside the selection)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"multiSelectMode")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"false"),(0,r.kt)("td",{parentName:"tr",align:null},"Add newly selected elements to the selection instead of replacing them")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"multiSelectToggling")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether or not to toggle already active elements while multi-selecting (default mimics MacOS behavior)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"multiSelectKeys")),(0,r.kt)("td",{parentName:"tr",align:null},"['Shift'","|","'Control'","|","'Meta'","|","string]"),(0,r.kt)("td",{parentName:"tr",align:null},"['Control', 'Shift', 'Meta']"),(0,r.kt)("td",{parentName:"tr",align:null},"Keys for multi-selection. Any key value is possible (",(0,r.kt)("a",{parentName:"td",href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key"},"see MDN docs"),"). The best support is given for ",(0,r.kt)("kbd",null,"Control"),", ",(0,r.kt)("kbd",null,"Shift")," and ",(0,r.kt)("kbd",null,"Meta"),". Provide an empty array ",(0,r.kt)("inlineCode",{parentName:"td"},"[]")," if you want to turn off the functionality.")))),(0,r.kt)("h2",{id:"autoscroll"},"AutoScroll"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"autoScrollSpeed")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"5"),(0,r.kt)("td",{parentName:"tr",align:null},"The speed in which the area scrolls while selecting (if available). The unit is arbitrary (aims for 30fps). Set to ",(0,r.kt)("inlineCode",{parentName:"td"},"0.0001")," to disable auto-scrolling")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"overflowTolerance")),(0,r.kt)("td",{parentName:"tr",align:null},"{ x:number, y:number }"),(0,r.kt)("td",{parentName:"tr",align:null},"{ x: 25, y: 25 }"),(0,r.kt)("td",{parentName:"tr",align:null},"Tolerance for autoScroll (how close one has to be near an edges for autoScroll to start)")))),(0,r.kt)("h2",{id:"dragging"},"Dragging"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"draggability")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"When a user is dragging on an already selected element, the selection is dragged.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"useTransform")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether to use the more performant hardware accelerated css transforms when dragging instead of the top/left positions.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"immediateDrag")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether a selectable element is draggable before being selected or needs to be selected first")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"keyboardDrag")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether or not the user can drag with the keyboard (Accessibility).")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dragKeys")),(0,r.kt)("td",{parentName:"tr",align:null},"{ up:string[], down:string[], left:string[], right:string[] }"),(0,r.kt)("td",{parentName:"tr",align:null},"{ up:","['ArrowUp']",", down: ","['ArrowDown']",", left: ","['ArrowLeft']",", right: ","['ArrowRight']"," }"),(0,r.kt)("td",{parentName:"tr",align:null},"The keys available to drag element using the keyboard. Any key value is possible (",(0,r.kt)("a",{parentName:"td",href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key"},"see MDN docs"),").")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"keyboardDragSpeed")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"10"),(0,r.kt)("td",{parentName:"tr",align:null},"The speed at which elements are dragged using the keyboard. In pixels per keyDown.")))),(0,r.kt)("h2",{id:"dropping"},"Dropping"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZones")),(0,r.kt)("td",{parentName:"tr",align:null},"[{ id:string, element:HTMLElement, droppables?: ","[HTMLElement ","|"," SVGElement]"," ","|"," HTMLElement ","|"," SVGElement }]"),(0,r.kt)("td",{parentName:"tr",align:null},"[]"),(0,r.kt)("td",{parentName:"tr",align:null},"Zones with association of droppable items that can be dropped into them. ",(0,r.kt)("inlineCode",{parentName:"td"},"id"),": any unique identifying string. ",(0,r.kt)("inlineCode",{parentName:"td"},"element"),": is the dropzone itself. ",(0,r.kt)("inlineCode",{parentName:"td"},"droppables"),": the elements that can be dropped into that zone. This is optional, by default it is all selectables")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropInsideThreshold")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"1"),(0,r.kt)("td",{parentName:"tr",align:null},"How much % of the item has to be inside the dropzone to be considered inside (0 = barely touching, 1 = completely inside)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropTargetThreshold")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"0"),(0,r.kt)("td",{parentName:"tr",align:null},"How much % of the zone does the pointer has to be in to be considered a target (0 = anywhere in the zone, max: 0.5 = has to point at the center of the zone)")))),(0,r.kt)("h2",{id:"styling"},"Styling"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"customStyles")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"false"),(0,r.kt)("td",{parentName:"tr",align:null},"If true, no styles will be automatically applied to the selector element (except position: absolute)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectedClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selected"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the selected items.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"hoverClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-hover"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the mouse hovered items.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectorClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selector"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the square selector helper.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectableClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selectable"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the elements that can be selected.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectorAreaClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selector-area"),(0,r.kt)("td",{parentName:"tr",align:null},"The class assigned to the square in which the selector resides. By default it's invisible")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"droppedTargetClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropped-target & ds-dropped-target-${zone.id}"),(0,r.kt)("td",{parentName:"tr",align:null},"On an item corresponding the target dropzone. This is also the prefix for ds-dropped-target-${zone.id}.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"droppedInsideClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropped-inside & ds-dropped-inside-${zone.id}"),(0,r.kt)("td",{parentName:"tr",align:null},"On an item that is within its dropzone bounds after a drop. This is also the prefix for ds-dropped-inside-${zone.id}")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"droppableClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-droppable & ds-droppable-${zone.id}"),(0,r.kt)("td",{parentName:"tr",align:null},"On element that can be dropped into at least one container. This is also the prefix for ds-droppable-${zone.id}")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone"),(0,r.kt)("td",{parentName:"tr",align:null},"On each dropZone")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneReadyClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone-ready"),(0,r.kt)("td",{parentName:"tr",align:null},"On corresponding dropZone when element is dragged")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneTargetClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone-target"),(0,r.kt)("td",{parentName:"tr",align:null},"On dropZone that has elements from any successful target drop")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneInsideClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone-inside"),(0,r.kt)("td",{parentName:"tr",align:null},"On dropZone that has elements inside after any drop")))),(0,r.kt)("h2",{id:"miscellaneous"},"Miscellaneous"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"refreshMemoryRate")),(0,r.kt)("td",{parentName:"tr",align:null},"number (milliseconds)"),(0,r.kt)("td",{parentName:"tr",align:null},"80"),(0,r.kt)("td",{parentName:"tr",align:null},"Refresh rate on memoization, higher numbers mean better performance but more lag if elements are moving while interacting/selecting, lower numbers mean less lag but worse performance. If none of your DOMNodes are moving, you can set it to a very high number to increase performance")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"usePointerEvents")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"false"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether to use Pointer Events to replace traditional Mouse or Touch Events. Useful for tools like Google Blockly.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"zoom")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"1"),(0,r.kt)("td",{parentName:"tr",align:null},"Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom. (deprecated)")))),(0,r.kt)("h2",{id:"dragselect-example-with-all-props"},"DragSelect Example with all Props"),(0,r.kt)("p",null,"Here is an example using all available settings for your convenience:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"new DragSelect({\n selectables: document.querySelectorAll('.selectable'),\n area: document.querySelector('#area'),\n selector: document.querySelector('#selector'),\n selectionThreshold: 0,\n multiSelectMode: false,\n multiSelectToggling: true,\n multiSelectKeys: ['Control', 'Shift', 'Meta'],\n autoScrollSpeed: 5,\n overflowTolerance: { x: 25, y: 25 },\n draggability: true,\n useTransform: true,\n immediateDrag: true,\n keyboardDrag: true,\n dragKeys: { up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] },\n keyboardDragSpeed: 10,\n dropZones: [{ id: 'foo', element: document.querySelector('#zone') }],\n dropInsideThreshold: 1,\n dropTargetThreshold: 0,\n customStyles: false,\n selectedClass: 'ds-selected',\n hoverClass: 'ds-hover',\n selectorClass: 'ds-selector',\n selectableClass: 'ds-selectable',\n selectorAreaClass: 'ds-selector-area',\n droppedTargetClass: 'ds-dropped-target',\n droppedInsideClass: 'ds-dropped-inside',\n droppableClass: 'ds-droppable',\n dropZoneClass: 'ds-dropzone',\n dropZoneReadyClass: 'ds-dropzone-ready',\n dropZoneTargetClass: 'ds-dropzone-target',\n dropZoneInsideClass: 'ds-dropzone-inside',\n refreshMemoryRate: 80,\n usePointerEvents: false,\n zoom: 1,\n});\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkdrag_select_docs=self.webpackChunkdrag_select_docs||[]).push([[537],{5318:(e,t,n)=>{n.d(t,{Zo:()=>s,kt:()=>k});var a=n(7378);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var d=a.createContext({}),p=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=p(e.components);return a.createElement(d.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},g=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,d=e.parentName,s=o(e,["components","mdxType","originalType","parentName"]),m=p(n),g=r,k=m["".concat(d,".").concat(g)]||m[g]||u[g]||l;return n?a.createElement(k,i(i({ref:t},s),{},{components:n})):a.createElement(k,i({ref:t},s))}));function k(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=g;var o={};for(var d in t)hasOwnProperty.call(t,d)&&(o[d]=t[d]);o.originalType=e,o[m]="string"==typeof e?e:r,i[1]=o;for(var p=2;p{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>l,metadata:()=>o,toc:()=>p});var a=n(5773),r=(n(7378),n(5318));const l={sidebar_position:1,description:"DragSelect Settings (API)"},i="Settings",o={unversionedId:"API/Settings",id:"API/Settings",title:"Settings",description:"DragSelect Settings (API)",source:"@site/docs/API/Settings.mdx",sourceDirName:"API",slug:"/API/Settings",permalink:"/docs/API/Settings",draft:!1,editUrl:"https://github.com/ThibaultJanBeyer/DragSelect/docs/API/Settings.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,description:"DragSelect Settings (API)"},sidebar:"tutorialSidebar",previous:{title:"API",permalink:"/docs/category/api"},next:{title:"Events (Pub/sub)",permalink:"/docs/API/Events"}},d={},p=[{value:"Selecting",id:"selecting",level:2},{value:"AutoScroll",id:"autoscroll",level:2},{value:"Dragging",id:"dragging",level:2},{value:"Dropping",id:"dropping",level:2},{value:"Styling",id:"styling",level:2},{value:"Miscellaneous",id:"miscellaneous",level:2},{value:"DragSelect Example with all Props",id:"dragselect-example-with-all-props",level:2}],s={toc:p},m="wrapper";function u(e){let{components:t,...n}=e;return(0,r.kt)(m,(0,a.Z)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"settings"},"Settings"),(0,r.kt)("p",null,"aka ",(0,r.kt)("inlineCode",{parentName:"p"},"Constructor Properties")," aka ",(0,r.kt)("inlineCode",{parentName:"p"},"Properties")," aka ",(0,r.kt)("inlineCode",{parentName:"p"},"options"),". "),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"const ds = new DragSelect({\n selectables: document.querySelectorAll('.selectable'),\n});\n")),(0,r.kt)("p",null,(0,r.kt)("em",{parentName:"p"},"DragSelect is hyper customizable"),": all properties are optional, you can totally just pass an empty object and set the settings later. See ",(0,r.kt)("a",{parentName:"p",href:"../guided-examples/Updating-Settings"},"updating-settings")),(0,r.kt)("h2",{id:"selecting"},"Selecting"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectables")),(0,r.kt)("td",{parentName:"tr",align:null},"[HTMLElement ","|"," SVGElement]"," ","|"," HTMLElement ","|"," SVGElement"),(0,r.kt)("td",{parentName:"tr",align:null},"[]"),(0,r.kt)("td",{parentName:"tr",align:null},"The elements that can be selected")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"area")),(0,r.kt)("td",{parentName:"tr",align:null},"HTMLElement ","|"," SVGElement ","|"," Document"),(0,r.kt)("td",{parentName:"tr",align:null},"document"),(0,r.kt)("td",{parentName:"tr",align:null},"The square in which you are able to select the elements")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selector")),(0,r.kt)("td",{parentName:"tr",align:null},"HTMLElement"),(0,r.kt)("td",{parentName:"tr",align:null},"Is Auto-Created"),(0,r.kt)("td",{parentName:"tr",align:null},"The square that will be used to draw the selection.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectionThreshold")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"0"),(0,r.kt)("td",{parentName:"tr",align:null},"How much % of the element has to be selected to be considered selected (0 = just touching, 1 = fully inside the selection)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"multiSelectMode")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"false"),(0,r.kt)("td",{parentName:"tr",align:null},"Add newly selected elements to the selection instead of replacing them")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"multiSelectToggling")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether or not to toggle already active elements while multi-selecting (default mimics MacOS behavior)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"multiSelectKeys")),(0,r.kt)("td",{parentName:"tr",align:null},"['Shift'","|","'Control'","|","'Meta'","|","string]"),(0,r.kt)("td",{parentName:"tr",align:null},"['Control', 'Shift', 'Meta']"),(0,r.kt)("td",{parentName:"tr",align:null},"Keys for multi-selection. Any key value is possible (",(0,r.kt)("a",{parentName:"td",href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key"},"see MDN docs"),"). The best support is given for ",(0,r.kt)("kbd",null,"Control"),", ",(0,r.kt)("kbd",null,"Shift")," and ",(0,r.kt)("kbd",null,"Meta"),". Provide an empty array ",(0,r.kt)("inlineCode",{parentName:"td"},"[]")," if you want to turn off the functionality.")))),(0,r.kt)("h2",{id:"autoscroll"},"AutoScroll"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"autoScrollSpeed")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"5"),(0,r.kt)("td",{parentName:"tr",align:null},"The speed in which the area scrolls while selecting (if available). The unit is arbitrary (aims for 30fps). Set to ",(0,r.kt)("inlineCode",{parentName:"td"},"0.0001")," to disable auto-scrolling")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"overflowTolerance")),(0,r.kt)("td",{parentName:"tr",align:null},"{ x:number, y:number }"),(0,r.kt)("td",{parentName:"tr",align:null},"{ x: 25, y: 25 }"),(0,r.kt)("td",{parentName:"tr",align:null},"Tolerance for autoScroll (how close one has to be near an edges for autoScroll to start)")))),(0,r.kt)("h2",{id:"dragging"},"Dragging"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"draggability")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"When a user is dragging on an already selected element, the selection is dragged.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"useTransform")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether to use the more performant hardware accelerated css transforms when dragging instead of the top/left positions.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"immediateDrag")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether a selectable element is draggable before being selected or needs to be selected first")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"keyboardDrag")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether or not the user can drag with the keyboard (Accessibility).")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dragKeys")),(0,r.kt)("td",{parentName:"tr",align:null},"{ up:string[], down:string[], left:string[], right:string[] }"),(0,r.kt)("td",{parentName:"tr",align:null},"{ up:","['ArrowUp']",", down: ","['ArrowDown']",", left: ","['ArrowLeft']",", right: ","['ArrowRight']"," }"),(0,r.kt)("td",{parentName:"tr",align:null},"The keys available to drag element using the keyboard. Any key value is possible (",(0,r.kt)("a",{parentName:"td",href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key"},"see MDN docs"),").")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"keyboardDragSpeed")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"10"),(0,r.kt)("td",{parentName:"tr",align:null},"The speed at which elements are dragged using the keyboard. In pixels per keyDown.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"useLayers")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"true"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether to apply z-index when dragging and once dragged.")))),(0,r.kt)("h2",{id:"dropping"},"Dropping"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZones")),(0,r.kt)("td",{parentName:"tr",align:null},"[{ id:string, element:HTMLElement, droppables?: ","[HTMLElement ","|"," SVGElement]"," ","|"," HTMLElement ","|"," SVGElement }]"),(0,r.kt)("td",{parentName:"tr",align:null},"[]"),(0,r.kt)("td",{parentName:"tr",align:null},"Zones with association of droppable items that can be dropped into them. ",(0,r.kt)("inlineCode",{parentName:"td"},"id"),": any unique identifying string. ",(0,r.kt)("inlineCode",{parentName:"td"},"element"),": is the dropzone itself. ",(0,r.kt)("inlineCode",{parentName:"td"},"droppables"),": the elements that can be dropped into that zone. This is optional, by default it is all selectables")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropInsideThreshold")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"1"),(0,r.kt)("td",{parentName:"tr",align:null},"How much % of the item has to be inside the dropzone to be considered inside (0 = barely touching, 1 = completely inside)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropTargetThreshold")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"0"),(0,r.kt)("td",{parentName:"tr",align:null},"How much % of the zone does the pointer has to be in to be considered a target (0 = anywhere in the zone, max: 0.5 = has to point at the center of the zone)")))),(0,r.kt)("h2",{id:"styling"},"Styling"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"customStyles")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"false"),(0,r.kt)("td",{parentName:"tr",align:null},"If true, no styles will be automatically applied to the selector element (except position: absolute)")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectedClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selected"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the selected items.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"hoverClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-hover"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the mouse hovered items.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectorClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selector"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the square selector helper.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectableClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selectable"),(0,r.kt)("td",{parentName:"tr",align:null},"The class name assigned to the elements that can be selected.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"selectorAreaClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-selector-area"),(0,r.kt)("td",{parentName:"tr",align:null},"The class assigned to the square in which the selector resides. By default it's invisible")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"droppedTargetClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropped-target & ds-dropped-target-${zone.id}"),(0,r.kt)("td",{parentName:"tr",align:null},"On an item corresponding the target dropzone. This is also the prefix for ds-dropped-target-${zone.id}.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"droppedInsideClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropped-inside & ds-dropped-inside-${zone.id}"),(0,r.kt)("td",{parentName:"tr",align:null},"On an item that is within its dropzone bounds after a drop. This is also the prefix for ds-dropped-inside-${zone.id}")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"droppableClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-droppable & ds-droppable-${zone.id}"),(0,r.kt)("td",{parentName:"tr",align:null},"On element that can be dropped into at least one container. This is also the prefix for ds-droppable-${zone.id}")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone"),(0,r.kt)("td",{parentName:"tr",align:null},"On each dropZone")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneReadyClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone-ready"),(0,r.kt)("td",{parentName:"tr",align:null},"On corresponding dropZone when element is dragged")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneTargetClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone-target"),(0,r.kt)("td",{parentName:"tr",align:null},"On dropZone that has elements from any successful target drop")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"dropZoneInsideClass")),(0,r.kt)("td",{parentName:"tr",align:null},"string"),(0,r.kt)("td",{parentName:"tr",align:null},"ds-dropzone-inside"),(0,r.kt)("td",{parentName:"tr",align:null},"On dropZone that has elements inside after any drop")))),(0,r.kt)("h2",{id:"miscellaneous"},"Miscellaneous"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:null},"property"),(0,r.kt)("th",{parentName:"tr",align:null},"type"),(0,r.kt)("th",{parentName:"tr",align:null},"default"),(0,r.kt)("th",{parentName:"tr",align:null},"description"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"refreshMemoryRate")),(0,r.kt)("td",{parentName:"tr",align:null},"number (milliseconds)"),(0,r.kt)("td",{parentName:"tr",align:null},"80"),(0,r.kt)("td",{parentName:"tr",align:null},"Refresh rate on memoization, higher numbers mean better performance but more lag if elements are moving while interacting/selecting, lower numbers mean less lag but worse performance. If none of your DOMNodes are moving, you can set it to a very high number to increase performance")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"usePointerEvents")),(0,r.kt)("td",{parentName:"tr",align:null},"boolean"),(0,r.kt)("td",{parentName:"tr",align:null},"false"),(0,r.kt)("td",{parentName:"tr",align:null},"Whether to use Pointer Events to replace traditional Mouse or Touch Events. Useful for tools like Google Blockly.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:null},(0,r.kt)("inlineCode",{parentName:"td"},"zoom")),(0,r.kt)("td",{parentName:"tr",align:null},"number"),(0,r.kt)("td",{parentName:"tr",align:null},"1"),(0,r.kt)("td",{parentName:"tr",align:null},"Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom. (deprecated)")))),(0,r.kt)("h2",{id:"dragselect-example-with-all-props"},"DragSelect Example with all Props"),(0,r.kt)("p",null,"Here is an example using all available settings for your convenience:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"new DragSelect({\n selectables: document.querySelectorAll('.selectable'),\n area: document.querySelector('#area'),\n selector: document.querySelector('#selector'),\n selectionThreshold: 0,\n multiSelectMode: false,\n multiSelectToggling: true,\n multiSelectKeys: ['Control', 'Shift', 'Meta'],\n autoScrollSpeed: 5,\n overflowTolerance: { x: 25, y: 25 },\n draggability: true,\n useTransform: true,\n immediateDrag: true,\n keyboardDrag: true,\n dragKeys: { up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] },\n keyboardDragSpeed: 10,\n dropZones: [{ id: 'foo', element: document.querySelector('#zone') }],\n dropInsideThreshold: 1,\n dropTargetThreshold: 0,\n customStyles: false,\n selectedClass: 'ds-selected',\n hoverClass: 'ds-hover',\n selectorClass: 'ds-selector',\n selectableClass: 'ds-selectable',\n selectorAreaClass: 'ds-selector-area',\n droppedTargetClass: 'ds-dropped-target',\n droppedInsideClass: 'ds-dropped-inside',\n droppableClass: 'ds-droppable',\n dropZoneClass: 'ds-dropzone',\n dropZoneReadyClass: 'ds-dropzone-ready',\n dropZoneTargetClass: 'ds-dropzone-target',\n dropZoneInsideClass: 'ds-dropzone-inside',\n refreshMemoryRate: 80,\n usePointerEvents: false,\n zoom: 1,\n useLayers: true,\n});\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.e9d6d4ad.js b/assets/js/runtime~main.afad88fe.js similarity index 98% rename from assets/js/runtime~main.e9d6d4ad.js rename to assets/js/runtime~main.afad88fe.js index 6f5ee3b8..ea6e5084 100644 --- a/assets/js/runtime~main.e9d6d4ad.js +++ b/assets/js/runtime~main.afad88fe.js @@ -1 +1 @@ -(()=>{"use strict";var e,t,r,a,f,d={},o={};function c(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,loaded:!1,exports:{}};return d[e].call(r.exports,r,r.exports,c),r.loaded=!0,r.exports}c.m=d,c.c=o,e=[],c.O=(t,r,a,f)=>{if(!r){var d=1/0;for(l=0;l=f)&&Object.keys(c.O).every((e=>c.O[e](r[n])))?r.splice(n--,1):(o=!1,f0&&e[l-1][2]>f;l--)e[l]=e[l-1];e[l]=[r,a,f]},c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);c.r(f);var d={};t=t||[null,r({}),r([]),r(r)];for(var o=2&a&&e;"object"==typeof o&&!~t.indexOf(o);o=r(o))Object.getOwnPropertyNames(o).forEach((t=>d[t]=()=>e[t]));return d.default=()=>e,c.d(f,d),f},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((t,r)=>(c.f[r](e,t),t)),[])),c.u=e=>"assets/js/"+({3:"4022cc72",40:"b91564ff",53:"935f2afb",158:"009b9a4c",206:"f8409a7e",237:"1df93b7f",265:"1cd16d8e",329:"516d925c",335:"1d6fa843",391:"ef24aaad",406:"d004f1d9",422:"2777a583",481:"66990a94",493:"988781e2",514:"1be78505",537:"94c45520",625:"9596d493",638:"dfbf2a2a",656:"9eb7e184",682:"69e9432f",783:"a64269bf",817:"14eb3368",883:"698c490d",897:"56267c29",918:"17896441",920:"1a4e3797",928:"f06d3d6a",952:"950e315b",978:"82fcd85e"}[e]||e)+"."+{3:"99613e40",40:"c7c9f840",41:"9f26e2d0",53:"a161b6e0",127:"9f63bfa6",158:"b36af2df",206:"06d6335e",237:"550dca79",265:"acb34b33",329:"a98bb521",335:"49495094",374:"99e70a06",391:"7c5dbd2e",406:"4f03ff40",422:"88f15133",481:"501af493",493:"2b6102fe",514:"33724dfa",537:"fc75be7d",604:"159b9e3e",625:"de41af1c",638:"bae044a8",656:"0a322e23",670:"63f7bee2",682:"537517fc",699:"0cd7f517",783:"1faa1b62",817:"6686f448",883:"19c112e0",893:"216a4509",897:"6a6cce32",918:"d20e4110",920:"c0dbb825",928:"41c146e9",952:"5636b099",978:"7d47a6fd"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="drag-select-docs:",c.l=(e,t,r,d)=>{if(a[e])a[e].push(t);else{var o,n;if(void 0!==r)for(var i=document.getElementsByTagName("script"),l=0;l{o.onerror=o.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(b.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=b.bind(null,o.onerror),o.onload=b.bind(null,o.onload),n&&document.head.appendChild(o)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/",c.gca=function(e){return e={17896441:"918","4022cc72":"3",b91564ff:"40","935f2afb":"53","009b9a4c":"158",f8409a7e:"206","1df93b7f":"237","1cd16d8e":"265","516d925c":"329","1d6fa843":"335",ef24aaad:"391",d004f1d9:"406","2777a583":"422","66990a94":"481","988781e2":"493","1be78505":"514","94c45520":"537","9596d493":"625",dfbf2a2a:"638","9eb7e184":"656","69e9432f":"682",a64269bf:"783","14eb3368":"817","698c490d":"883","56267c29":"897","1a4e3797":"920",f06d3d6a:"928","950e315b":"952","82fcd85e":"978"}[e]||e,c.p+c.u(e)},(()=>{var e={303:0,532:0};c.f.j=(t,r)=>{var a=c.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var d=c.p+c.u(t),o=new Error;c.l(d,(r=>{if(c.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;o.message="Loading chunk "+t+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,a[1](o)}}),"chunk-"+t,t)}},c.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,d=r[0],o=r[1],n=r[2],i=0;if(d.some((t=>0!==e[t]))){for(a in o)c.o(o,a)&&(c.m[a]=o[a]);if(n)var l=n(c)}for(t&&t(r);i{"use strict";var e,t,r,a,f,d={},o={};function c(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,loaded:!1,exports:{}};return d[e].call(r.exports,r,r.exports,c),r.loaded=!0,r.exports}c.m=d,c.c=o,e=[],c.O=(t,r,a,f)=>{if(!r){var d=1/0;for(l=0;l=f)&&Object.keys(c.O).every((e=>c.O[e](r[n])))?r.splice(n--,1):(o=!1,f0&&e[l-1][2]>f;l--)e[l]=e[l-1];e[l]=[r,a,f]},c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);c.r(f);var d={};t=t||[null,r({}),r([]),r(r)];for(var o=2&a&&e;"object"==typeof o&&!~t.indexOf(o);o=r(o))Object.getOwnPropertyNames(o).forEach((t=>d[t]=()=>e[t]));return d.default=()=>e,c.d(f,d),f},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((t,r)=>(c.f[r](e,t),t)),[])),c.u=e=>"assets/js/"+({3:"4022cc72",40:"b91564ff",53:"935f2afb",158:"009b9a4c",206:"f8409a7e",237:"1df93b7f",265:"1cd16d8e",329:"516d925c",335:"1d6fa843",391:"ef24aaad",406:"d004f1d9",422:"2777a583",481:"66990a94",493:"988781e2",514:"1be78505",537:"94c45520",625:"9596d493",638:"dfbf2a2a",656:"9eb7e184",682:"69e9432f",783:"a64269bf",817:"14eb3368",883:"698c490d",897:"56267c29",918:"17896441",920:"1a4e3797",928:"f06d3d6a",952:"950e315b",978:"82fcd85e"}[e]||e)+"."+{3:"99613e40",40:"c7c9f840",41:"9f26e2d0",53:"a161b6e0",127:"9f63bfa6",158:"b36af2df",206:"06d6335e",237:"550dca79",265:"acb34b33",329:"a98bb521",335:"49495094",374:"99e70a06",391:"7c5dbd2e",406:"4f03ff40",422:"88f15133",481:"501af493",493:"2b6102fe",514:"33724dfa",537:"924470a6",604:"159b9e3e",625:"de41af1c",638:"bae044a8",656:"0a322e23",670:"63f7bee2",682:"537517fc",699:"0cd7f517",783:"1faa1b62",817:"6686f448",883:"19c112e0",893:"216a4509",897:"6a6cce32",918:"d20e4110",920:"c0dbb825",928:"41c146e9",952:"5636b099",978:"7d47a6fd"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="drag-select-docs:",c.l=(e,t,r,d)=>{if(a[e])a[e].push(t);else{var o,n;if(void 0!==r)for(var i=document.getElementsByTagName("script"),l=0;l{o.onerror=o.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(b.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=b.bind(null,o.onerror),o.onload=b.bind(null,o.onload),n&&document.head.appendChild(o)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/",c.gca=function(e){return e={17896441:"918","4022cc72":"3",b91564ff:"40","935f2afb":"53","009b9a4c":"158",f8409a7e:"206","1df93b7f":"237","1cd16d8e":"265","516d925c":"329","1d6fa843":"335",ef24aaad:"391",d004f1d9:"406","2777a583":"422","66990a94":"481","988781e2":"493","1be78505":"514","94c45520":"537","9596d493":"625",dfbf2a2a:"638","9eb7e184":"656","69e9432f":"682",a64269bf:"783","14eb3368":"817","698c490d":"883","56267c29":"897","1a4e3797":"920",f06d3d6a:"928","950e315b":"952","82fcd85e":"978"}[e]||e,c.p+c.u(e)},(()=>{var e={303:0,532:0};c.f.j=(t,r)=>{var a=c.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var d=c.p+c.u(t),o=new Error;c.l(d,(r=>{if(c.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;o.message="Loading chunk "+t+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,a[1](o)}}),"chunk-"+t,t)}},c.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,d=r[0],o=r[1],n=r[2],i=0;if(d.some((t=>0!==e[t]))){for(a in o)c.o(o,a)&&(c.m[a]=o[a]);if(n)var l=n(c)}for(t&&t(r);i - + @@ -18,7 +18,7 @@ note: you can change every class name via settings, see Settings section.

Selection​

nametrigger
ds-selectedOn items that are selected
ds-hoverOn items that are currently hovered
ds-selectorOn the selector element
ds-selector-areaThe overlay where the selector resides in
ds-selectableOn items that can be selected

Drop​

nametrigger
ds-droppableOn item that can be dropped into at least one zone
ds-droppable-${id}On item that can be dropped into a zone with specific identifier, ${id} will be replaced by the corresponding zone.id
ds-dropped-targetOn an item corresponding the target dropzone
ds-dropped-target-${id}On an item corresponding the target dropzone with specific identifier, ${id} will be replaced by the corresponding zone.id
ds-dropped-insideOn an item that is within its dropzone bounds after a drop
ds-dropped-inside-${id}On an item that is within its dropzone bounds after a drop with specific identifier, ${id} will be replaced by the corresponding zone.id

DropZone​

nametrigger
ds-dropzoneOn each dropZone
ds-dropzone-readyOn corresponding dropZone when corresponding item is being dragged
ds-dropzone-targetOn dropZone when it was target of a successful drop
ds-dropzone-insideOn dropZone that has elements inside after any drop
- + \ No newline at end of file diff --git a/docs/API/Events.html b/docs/API/Events.html index faaf886b..07042105 100644 --- a/docs/API/Events.html +++ b/docs/API/Events.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Events (Pub/sub)

DragSelect follows a PubSub pattern. It will emit useful events you can subscribe to like this:

const ds = new DragSelect({});
ds.subscribe('<event_name>', (callback_object) => {})

Public Events​

event_namecallback_objectdescription
DS:end{ items, event, isDragging, isDraggingKeyboard, dropTarget, … }Fired after the selection (i.e. on mouse-up).
DS:start{ items, event, isDragging, isDraggingKeyboard, … }Fired when the selection starts (i.e. on mouse-down).
DS:update{ items, event, isDragging, isDraggingKeyboard, … }Fired when the mouse moves while dragging (i.e. on mouse-move).
DS:scroll{ items, isDragging, scroll_directions, scroll_multiplier, … }Fired when the area is auto-scrolled (i.e. cursor on a corner of the area).
DS:select{ items, item, isDragging, …}Fired when an element is added to the selection.
DS:unselect{ items, item, isDragging, … }Fired when an element is removed from the selection.
DS:added{ items, item, isDragging, … }Fired when an element is added from the list of selectable elements.
DS:removed{ items, item, isDragging, … }Fired when an element is removed from the list of selectable elements.

Note: all your callbacks subscribers will run after the internal code ran. If you want to run something before everything else, use the :pre postfix. I.e. DS:start:pre is an event that runs before any internal start logic.

Note: there are way more so called "internal events" but hooking to those is not recommended since they might change in future and break your implementation.

Callback Object​

The callback object is made up of different parts depending of the event. All properties are not guaranteed so it is important to check for their availability before using them. I.e. like this:

const ds = new DragSelect({});
ds.subscribe('DS:end', (callback_object) => {
  if(callback_object.items) {
    // do something with the items
  }
})
callback_object_keystypedescription
eventMouseEvent | TouchEvent | KeyboardEvent | anyThe native browser event, the type is depending on the situational context
items[ HTMLElement | SVGElement | any ]Current selected elements
itemHTMLElement | SVGElement | anyThe single element currently being interacted with if any
isDraggingbooleanIf true, the user is dragging the selected elements, if false the user is selecting
isDraggingKeyboardbooleanIf true, the user is dragging the selected elements with the keyboard
scroll_directions[ 'top' | 'bottom' | 'left' | 'right' | undefined ]The direction in which the event is happening (i.e. scroll direction)
scroll_multipliernumberThe scrolling speed
dropTarget{
  id: string,
  element: HTMLElement | SVGElement | any,
  droppables: [ HTMLElement | SVGElement | any ],
  itemsDropped: [ HTMLElement | SVGElement | any ],
  itemsInside: [ HTMLElement | SVGElement | * ]
}		dropZone in which the droppable elements were dropped into. id: is the identifier string of the zone. droppables: the elements that are assigned to this zone. itemsDropped: all items that were dropped on the target. itemsInside: all items that are within the bounds of the zone
keystringPressed key (lowercase)
settingsSettingsThe settings being updates/manipulated/passed, also holds the previous value. i.e. updating selectorClass will publish { settings: { selectorClass: 'newVal', 'selectorClass:pre': 'oldVal' } }

Note: all object keys are optional and might not be available, depending on the event type. So make sure to check for availability first

- + \ No newline at end of file diff --git a/docs/API/Methods.html b/docs/API/Methods.html index 451cda27..2c1a1260 100644 --- a/docs/API/Methods.html +++ b/docs/API/Methods.html @@ -9,7 +9,7 @@ - + @@ -18,7 +18,7 @@ When the function is saved into a variable const ds = new DragSelect() you have access to all its inner functions. You can simply use them like this:

const ds = new DragSelect({});
ds.methodName(method_props);

Methods​

Functionality​

methodpropertiesusage
stop/Will teardown/stop the whole functionality
start/Reset the functionality after a stop/teardown
break/Utility to override DragSelect internal functionality. Breaks out of current flow. Read Custom Drag and Drop for more info.

Pub/Sub​

methodpropertiesusage
subscribe(event_name, callback:(callback_object) => void):numberSubscribes to an event, see the Events API for infos on the names and callback_object.
unsubscribe(event_name, callback, id)Unsubscribes from an event, either pass the exact same callback method as when subscribing or the ID which is returned from the subscribe method
publish(event_name, callback_object:any)Publishes an event, see the Events API for infos on the names and callback_object.

Read the Events API for more information

Settings​

methodpropertiesusage
setSettingsSettingsUpdate any setting dynamically, see Updating Settings

Interaction​

methodpropertiesusage
isDragging/Whether the user is currently drag n dropping elements (instead of selection)
isMultiSelectevent:KeyboardEventMouseEvent

Selection​

methodpropertiesusage
getSelection/Returns all currently selected nodes
addSelectionelements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, dontAddToSelectables:booleanadds one or multiple elements to the selection. If boolean is set to true: callback will be called afterwards. Adds them to the selectables if they're not yet in the set (can be turned off by setting the last boolean to true)
removeSelectionelements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, removeFromSelectables:booleanremoves one or multiple elements to the selection. If boolean is set to true: callback will be called afterwards. If last boolean is set to true, it also removes them from the possible selectable nodes if they were.
toggleSelectionelements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, removeFromSelectables:booleantoggles one or multiple elements to the selection. If element is not in selection it will be added, if it is already selected, it will be removed. If triggerCallback is set to true: callback will be called afterward. If removeFromSelectables is set to true: will NOT add elements to the list of selectable elements but will remove elements from the selectables if they are toggled off. (By default the toggling will add elements to the list of selectables and will not remove them).
setSelectionelements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:boolean, dontAddToSelectables:booleansets the selection to one or multiple elements. If boolean is set to true: callback will be called afterwards. Adds them to the selectables if they're not yet in the set (can be turned off by setting the last boolean to true)
clearSelectionelements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, triggerCallback:booleanRemoves all elements from the selection. If callback is set to true: callback will be called afterwards.
clearSelectiontriggerCallback:booleanUnselect / Deselect all current selected Nodes

Selectables​

methodpropertiesusage
addSelectableselements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, addToSelection:booleanAdds elements that can be selected. Don’t worry, nodes are never added twice. addToSelection: elements will also be added to current selection.
removeSelectableselements:[HTMLElement | SVGElement] | HTMLElement | SVGElement, removeFromSelection:booleanRemove elements from the set of elements that can be selected. removeFromSelection: elements will also be removed from current selection.
getSelectables/Returns array with all nodes that can be selected.

Pointer​

methodpropertiesusage
getInitialCursorPosition/Returns the registered x, y coordinates the cursor had when first clicked
getCurrentCursorPosition/Returns current x, y coordinates of the cursor
getPreviousCursorPosition/Returns last registered x, y coordinates of the cursor (after last end callback)
getInitialCursorPositionArea/Returns the registered x, y coordinates relative to the area the cursor had when first clicked
getCurrentCursorPositionArea/Returns current x, y coordinates of the cursor relative to the area
getPreviousCursorPositionArea/Returns last registered x, y coordinates of the cursor relative to the area (after last end callback)

DropZones​

methodpropertiesusage
getZoneByCoordinatescoordinates:{ x:number, y:number } (Optional)Returns the first drop target under the current mouse position, or, if provided at the coordinates.
getItemsDroppedByZoneIdzoneId:stringReturns the items dropped into a specific zone (by zone.id)
getItemsInsideByZoneIdzoneId:string, addClasses:booleanReturns the items that are visually inside a specific zone (by zone.id). addClasses: also add the respective CSS classes to those elements if they don’t have them yet.

Example​

const ds = new DragSelect({});
ds.setSettings({ selectables: document.querySelectorAll('.selectable') });
ds.getSelection();
- + \ No newline at end of file diff --git a/docs/API/Overrides.html b/docs/API/Overrides.html index 2d47c8c4..45bc2d13 100644 --- a/docs/API/Overrides.html +++ b/docs/API/Overrides.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Overrides & Exposed Methods (Advanced)

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

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

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

.Selection​

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

Example​

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

.Drag​

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

Example​

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

Exposed Helper Methods​

methodpropertiesusage
isCollisionel1: { left:number, right:number, top:number, bottom:number }, el2: { left:number, right:number, top:number, bottom:number }, percent:numberAxis-Aligned Bounding Box Collision Detection. (Docs)

Example​

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

Example​

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

Something is missing?​

Feel free to open a feature request for more overrides.

- + \ No newline at end of file diff --git a/docs/API/Settings.html b/docs/API/Settings.html index ed463989..f81cfe67 100644 --- a/docs/API/Settings.html +++ b/docs/API/Settings.html @@ -9,15 +9,15 @@ - +
-

Settings

aka Constructor Properties aka Properties aka options. 

const ds = new DragSelect({
  selectables: document.querySelectorAll('.selectable'),
});

DragSelect is hyper customizable: all properties are optional, you can totally just pass an empty object and set the settings later. See updating-settings

Selecting​

propertytypedefaultdescription
selectables[HTMLElement | SVGElement] | HTMLElement | SVGElement[]The elements that can be selected
areaHTMLElement | SVGElement | DocumentdocumentThe square in which you are able to select the elements
selectorHTMLElementIs Auto-CreatedThe square that will be used to draw the selection.
selectionThresholdnumber0How much % of the element has to be selected to be considered selected (0 = just touching, 1 = fully inside the selection)
multiSelectModebooleanfalseAdd newly selected elements to the selection instead of replacing them
multiSelectTogglingbooleantrueWhether or not to toggle already active elements while multi-selecting (default mimics MacOS behavior)
multiSelectKeys['Shift'|'Control'|'Meta'|string]['Control', 'Shift', 'Meta']Keys for multi-selection. Any key value is possible (see MDN docs). The best support is given for Control, Shift and Meta. Provide an empty array [] if you want to turn off the functionality.

AutoScroll​

propertytypedefaultdescription
autoScrollSpeednumber5The speed in which the area scrolls while selecting (if available). The unit is arbitrary (aims for 30fps). Set to 0.0001 to disable auto-scrolling
overflowTolerance{ x:number, y:number }{ x: 25, y: 25 }Tolerance for autoScroll (how close one has to be near an edges for autoScroll to start)

Dragging​

propertytypedefaultdescription
draggabilitybooleantrueWhen a user is dragging on an already selected element, the selection is dragged.
useTransformbooleantrueWhether to use the more performant hardware accelerated css transforms when dragging instead of the top/left positions.
immediateDragbooleantrueWhether a selectable element is draggable before being selected or needs to be selected first
keyboardDragbooleantrueWhether or not the user can drag with the keyboard (Accessibility).
dragKeys{ up:string[], down:string[], left:string[], right:string[] }{ up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] }The keys available to drag element using the keyboard. Any key value is possible (see MDN docs).
keyboardDragSpeednumber10The speed at which elements are dragged using the keyboard. In pixels per keyDown.

Dropping​

propertytypedefaultdescription
dropZones[{ id:string, element:HTMLElement, droppables?: [HTMLElement | SVGElement] | HTMLElement | SVGElement }][]Zones with association of droppable items that can be dropped into them. id: any unique identifying string. element: is the dropzone itself. droppables: the elements that can be dropped into that zone. This is optional, by default it is all selectables
dropInsideThresholdnumber1How much % of the item has to be inside the dropzone to be considered inside (0 = barely touching, 1 = completely inside)
dropTargetThresholdnumber0How much % of the zone does the pointer has to be in to be considered a target (0 = anywhere in the zone, max: 0.5 = has to point at the center of the zone)

Styling​

propertytypedefaultdescription
customStylesbooleanfalseIf true, no styles will be automatically applied to the selector element (except position: absolute)
selectedClassstringds-selectedThe class name assigned to the selected items.
hoverClassstringds-hoverThe class name assigned to the mouse hovered items.
selectorClassstringds-selectorThe class name assigned to the square selector helper.
selectableClassstringds-selectableThe class name assigned to the elements that can be selected.
selectorAreaClassstringds-selector-areaThe class assigned to the square in which the selector resides. By default it's invisible
droppedTargetClassstringds-dropped-target & ds-dropped-target-${zone.id}On an item corresponding the target dropzone. This is also the prefix for ds-dropped-target-${zone.id}.
droppedInsideClassstringds-dropped-inside & ds-dropped-inside-${zone.id}On an item that is within its dropzone bounds after a drop. This is also the prefix for ds-dropped-inside-${zone.id}
droppableClassstringds-droppable & ds-droppable-${zone.id}On element that can be dropped into at least one container. This is also the prefix for ds-droppable-${zone.id}
dropZoneClassstringds-dropzoneOn each dropZone
dropZoneReadyClassstringds-dropzone-readyOn corresponding dropZone when element is dragged
dropZoneTargetClassstringds-dropzone-targetOn dropZone that has elements from any successful target drop
dropZoneInsideClassstringds-dropzone-insideOn dropZone that has elements inside after any drop

Miscellaneous​

propertytypedefaultdescription
refreshMemoryRatenumber (milliseconds)80Refresh rate on memoization, higher numbers mean better performance but more lag if elements are moving while interacting/selecting, lower numbers mean less lag but worse performance. If none of your DOMNodes are moving, you can set it to a very high number to increase performance
usePointerEventsbooleanfalseWhether to use Pointer Events to replace traditional Mouse or Touch Events. Useful for tools like Google Blockly.
zoomnumber1Zoom scale factor (in case of using CSS style transform: scale() which messes with real positions). Unit scale zoom. (deprecated)

DragSelect Example with all Props​

Here is an example using all available settings for your convenience:

new DragSelect({
  selectables: document.querySelectorAll('.selectable'),
  area: document.querySelector('#area'),
  selector: document.querySelector('#selector'),
  selectionThreshold: 0,
  multiSelectMode: false,
  multiSelectToggling: true,
  multiSelectKeys: ['Control', 'Shift', 'Meta'],
  autoScrollSpeed: 5,
  overflowTolerance: { x: 25, y: 25 },
  draggability: true,
  useTransform: true,
  immediateDrag: true,
  keyboardDrag: true,
  dragKeys: { up:['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'] },
  keyboardDragSpeed: 10,
  dropZones: [{ id: 'foo', element: document.querySelector('#zone') }],
  dropInsideThreshold: 1,
  dropTargetThreshold: 0,
  customStyles: false,
  selectedClass: 'ds-selected',
  hoverClass: 'ds-hover',
  selectorClass: 'ds-selector',
  selectableClass: 'ds-selectable',
  selectorAreaClass: 'ds-selector-area',
  droppedTargetClass: 'ds-dropped-target',
  droppedInsideClass: 'ds-dropped-inside',
  droppableClass: 'ds-droppable',
  dropZoneClass: 'ds-dropzone',
  dropZoneReadyClass: 'ds-dropzone-ready',
  dropZoneTargetClass: 'ds-dropzone-target',
  dropZoneInsideClass: 'ds-dropzone-inside',
  refreshMemoryRate: 80,
  usePointerEvents: false,
  zoom: 1,
});
- + \ No newline at end of file diff --git a/docs/guided-examples/Area.html b/docs/guided-examples/Area.html index eae74879..c9361816 100644 --- a/docs/guided-examples/Area.html +++ b/docs/guided-examples/Area.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

With an Area

  • You can restrict DragSelect to only operate within a certain area
  • This Area will also be auto-scrollable by default

For example:

new DragSelect({
  selectables: document.getElementsByClassName('selectable'),
  area: document.getElementById('area'),
});

^ given this example you can only use the selection/drag inside of the container with the ID area.

Example​

Try it out yourself:

- + \ No newline at end of file diff --git a/docs/guided-examples/Custom-Selection-Filter-Override.html b/docs/guided-examples/Custom-Selection-Filter-Override.html index 763df48a..38eadaae 100644 --- a/docs/guided-examples/Custom-Selection-Filter-Override.html +++ b/docs/guided-examples/Custom-Selection-Filter-Override.html @@ -9,7 +9,7 @@ - + @@ -22,7 +22,7 @@ we can use it:

// initialize like you do before
const ds = new DragSelect({…})

// then you can override the exposed internal method
ds.Selection.filterSelected = ({ selectorRect, select: _select, unselect: _unselect }: {
  select:Map<DSElement,DSBoundingRect>,
  unselect:Map<DSElement,DSBoundingRect>,
  selectorRect:DSBoundingRect
}) => {
  // here we just re-assign the maps to new variables so we can modify them without changing the original ones
  const select = new Map(_select), unselect = new Map(_unselect)
  // now we can do whatever, in this example we just filter out all elements that have a red color style if there is more than five selected elements in total
  select.forEach((boundingRect, element) => {
    if(element.style.color === 'red' && select.size > 5) {
      select.delete(element)
      unselect.set(element, boundingRect)
    }
  })
  // we return the modified maps
  return { select, unselect }
}

That’s it, you’ve successfully overwritten a method to add your custom filter to the selection logic. Now go celebrate that you’ve just learned something new! 🎉

- + \ No newline at end of file diff --git a/docs/guided-examples/CustomDnD.html b/docs/guided-examples/CustomDnD.html index 802e504e..cd21d939 100644 --- a/docs/guided-examples/CustomDnD.html +++ b/docs/guided-examples/CustomDnD.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Custom Drag and Drop

Note: this functionality is still a work in progress. If you find what you want to do is not working, please give your use-case and feedback in the Discussions section and we’ll try to support it.

DragSelect comes with a build-in Drag and Drop functionality. However, the ideal is to be as extensible as possible. So the usage of other libraries in combination with DragSelect is definitively welcome! There is multiple ways to achieve this:

Using .stop()​

// 1. Setup DragSelect:
const ds = new DragSelect({ 
  // if your library can not handle keyboard dragging
  keyboardDragSpeed: 0, 
  keyboardDrag: false,
  // …your other settings…
})

// 2. Setup the other library. Here we call it MyCustomDrag
const myCustomDrag = new MyCustomDrag({/* …your settings… */})

// 3. Stop DragSelect dragging
ds.subscribe('DS:start:pre', ({ items, isDragging, isDraggingKeyboard }) => {
  if(isDragging) {
    ds.stop(false, false)
    // if anything is necessary in MyCustomDrag, here is the place
    myCustomDrag.start(items)
  }
})

// 4. ReStart DragSelect when the other library is done dragging
myCustomDrag.subscribe('finished', () => ds.start())

If your library has no callback you could try to disable, then re-enable directly:

ds.subscribe('DS:start:pre', ({ isDragging, isDraggingKeyboard }) => {
   if(isDragging) {
     ds.stop(false, false)
     setTimeout(ds.start)
   }
})

Note: it is important to debounce (i.e. with setTimeout(ds.start)) the start function if it's called within a single subscriber so that all the scheduled callbacks finish triggering before we start again.

Using .break()​

/!\ only use break when you know what you're doing

In case you want to build something completely custom on top of DragSelect, we got you covered! You can use .break for this.

This utility to override DragSelects internal functionality allowing you to write it all yourself: You can write your own drag and drop, if you want, you can even write your own selection: 

ds.subscribe('DS:update:pre', ({ isDragging, isDraggingKeyboard }) => {
  if(isDragging || isDraggingKeyboard) {
    ds.break()
    /* your custom logic for drag handling here. */
  } else {
    ds.break()
    /* your custom logic for selection handling here. */
  }
}
- + \ No newline at end of file diff --git a/docs/guided-examples/DropZones.html b/docs/guided-examples/DropZones.html index 638ed40e..2be01f19 100644 --- a/docs/guided-examples/DropZones.html +++ b/docs/guided-examples/DropZones.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

With DropZones

DropZones are areas where you can drop the selected elements into.

  • Set it up via Settings.
  • When dropped you’ll find a dropTarget in the DS:end event callback.
  • You can also use some useful methods related to DropZones.
  • Using DropZones will also automatically add respective classes.

Here is an example:

The Setup​

Setting up is easy, here is an example:

const ds = new DragSelect({
  …
  // 1. Add DropZones settings
  dropZones: [
    // 2. By default all selectables can be dropped into a zone
    { element: document.querySelector('#zone-1'), id: 'zone-1' },
    // 3. However, if you want to restrict that, add the `droppables` key to the zone
    { element: document.querySelector('#zone-2'), id: 'zone-2', droppables: document.querySelectorAll('#item-2,#item-4') }, // here, only items 2 & 4 are droppable into zone 2
  ],
  // 4. There are also other customization you can do, for example:
  dropInsideThreshold: 1, // 1 = has to be 100% inside the dropzone, 0.5 = 50% inside, 0 = just touching is fine
});

Find all possible keys in the DropZone Settings section.

The DS:end callback​

Now you will see the dropTarget in the DS:end callback, which represents the topmost Zone that was targeted by the mouse on drag release. Here is an example on how you could use it:

ds.subscribe('DS:end', ({
  // 4. If successfully drop by mouse, you’ll find a dropTarget key
  dropTarget: {
    // 5. It is an object with following keys
    id: "zone-1", // The ID of the zone
    element: <node />, // The DropZone element itself
    droppables: [ <node />, … ], // The elements that can potentially be dropped into that zone
    itemsDropped: [ <node />, … ], // elements that were selected when the mouse targeted the zone on drop
    itemsInside: [ <node />, … ] // elements that are actually inside the bounds of the dropzone
  }) => {
  
  // 6. We can check which items are dropped into the zone and do something
  if(dropTarget?.itemsDropped?.length) {
    console.log('Dropped', dropTarget.itemsDropped, 'into', dropTarget.id);
  }
})

Check out the callback object API for more information.

The methods​

You can also anytime use the DropZone specific methods to get what you need. For example: 

console.log('items dropped into zone-1', ds.getItemsDroppedByZoneId('zone-1'))
console.log('items inside zone-2', ds.getItemsInsideByZoneId('zone-1'))

Check out the DropZone specific methods for more information.

Example​

Try it out yourself:

- + \ No newline at end of file diff --git a/docs/guided-examples/Mobile-Touch.html b/docs/guided-examples/Mobile-Touch.html index 51651dbb..ecdb513c 100644 --- a/docs/guided-examples/Mobile-Touch.html +++ b/docs/guided-examples/Mobile-Touch.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Mobile/Touch usage

Congratulations, DragSelect can be used on a mobile by default 🎉

Keep in mind that using DragSelect on a mobile/touch device will also turn off the default scroll behavior (on click + drag interaction).

In 99% of the use-cases, this is what you want.

However, if DragSelect is only one part of a website, and you still want to be able to scroll the page on mobile, you can use an area see settings. This way the default scroll behavior remains intact for the rest of the page.

For example like this:

const ds = new DragSelect({
  selectables: document.querySelectorAll('.selectable'),
  area: document.querySelector('#area'),
});
- + \ No newline at end of file diff --git a/docs/guided-examples/Publish-Subscribe.html b/docs/guided-examples/Publish-Subscribe.html index a09e6ba0..e0daec5a 100644 --- a/docs/guided-examples/Publish-Subscribe.html +++ b/docs/guided-examples/Publish-Subscribe.html @@ -9,7 +9,7 @@ - + @@ -19,7 +19,7 @@ If you are familiar with .addEventListener in the browser, this is the same concept.

Here is an Example on how you would use it:

const ds = new DragSelect({…})
// Subscribe to an event
const subscriptionId = ds.subscribe('DS:end', (callback_object) => { /* do something */ })
// If you stored the ID of that handler you can just unsubscribe by passing the ID
ds.unsubscribe('DS:end', null, subscriptionId)
// If you want to publish some event yourself, you can totally do that aswell
ds.publish('DS:end', { foo: 'bar' })

Let’s say you can’t store the subsciptionId, then you can also pass in the handler like so:

const ds = new DragSelect({…})
const callbackHandler = (callback_object) => { /* do something */ }
ds.subscribe('DS:end', callbackHandler) // starts listening to the events
ds.unsubscribe('DS:end', callbackHandler) // stops listening to the events

So to unsubscribe you have to either pass in the exact same method or the ID that the subscriber returns. Protip: passing the ID is more performant!

You can find a list of all public event_names as well as all potential callback_object properties in the Events documentation

- + \ No newline at end of file diff --git a/docs/guided-examples/React.html b/docs/guided-examples/React.html index 38768199..eb08790e 100644 --- a/docs/guided-examples/React.html +++ b/docs/guided-examples/React.html @@ -9,7 +9,7 @@ - + @@ -18,7 +18,7 @@ But for your convenience we created this example page to see how we use it in the "react way"!

PS: We are looking into creating custom wrappers for libraries. We will update this guide as soon as available.

1. Create a context​

Feel free to copy+paste the code:

import React, { createContext, useState, useEffect, useContext } from "react";
import DragSelect, { DSInputElement } from "dragselect";

type ProviderProps = {
  children: React.ReactNode;
  settings?: ConstructorParameters<typeof DragSelect<DSInputElement>>[0];
};

const Context = createContext<DragSelect<DSInputElement> | undefined>(
  undefined
);

function DragSelectProvider({ children, settings = {} }: ProviderProps) {
  const [ds, setDS] = useState<DragSelect<DSInputElement>>();

  useEffect(() => {
    setDS((prevState) => {
      if (prevState) return prevState;
      return new DragSelect({});
    });
    return () => {
      if (ds) {
        ds.stop();
        setDS(undefined);
      }
    };
  }, [ds]);

  useEffect(() => {
    ds?.setSettings(settings);
  }, [ds, settings]);

  return <Context.Provider value={ds}>{children}</Context.Provider>;
}

function useDragSelect() {
  return useContext(Context);
}

export { DragSelectProvider, useDragSelect };

2. Wrap it​

import React from "react";

import { DragSelectProvider } from "./DragSelectContext";

export const MyComponent = () => (
  // you can add initial settings by passing a settings object
  <DragSelectProvider settings={{ selectorClass: styles.selector }}>
    <SomeOtherComponentsThatNeedsDragSelect />
  </DragSelectProvider>
);

3. Use it​

import React, { useEffect, useRef } from "react";
import { useDragSelect } from "./DragSelectContext";

export const SomeOtherComponentsThatNeedsDragSelect = () => {
  const ds = useDragSelect();
  const inputEl = useRef(null);

  // adding a selectable element
  useEffect(() => {
    const element = inputEl.current as unknown as HTMLElement;
    if (!element || !ds) return;
    ds.addSelectables(element);
  }, [ds, inputEl]);

  // subscribing to a callback
  useEffect(() => {
    if (!ds) return;
    const id = ds.subscribe("DS:end", (e) => {
      // do something
      console.log(e);
    });

    return () => ds.unsubscribe("DS:end", null, id!);
  }, [ds]);

  return (
    <button ref={inputEl} aria-labelledby="Selectable">
      Selectable
    </button>
  );
};

DragSelect also exports some helper types for type safety, i.e. DSPubCallback which you can pass in the subscriber for the callback type safety:

import { DSPubCallback } from "dragselect";
const cb: DSPubCallback<"DS:end"> = ({ items = [] }) => {
  console.log("CALLBACK", items);
  setSelectedAmount(items.length);
};

You can see this example in use within this docusaurus project. I.e. the context provider here and a random useage example here

- + \ No newline at end of file diff --git a/docs/guided-examples/Simple.html b/docs/guided-examples/Simple.html index 8b5daace..b082b690 100644 --- a/docs/guided-examples/Simple.html +++ b/docs/guided-examples/Simple.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Simple

The simplest possible use-case. Is to choose which elements can be selected:

new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes')
});

That’s it. Check it out:

- + \ No newline at end of file diff --git a/docs/guided-examples/Updating-Settings.html b/docs/guided-examples/Updating-Settings.html index 6a3c3d95..7c56e644 100644 --- a/docs/guided-examples/Updating-Settings.html +++ b/docs/guided-examples/Updating-Settings.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Updating Settings

DragSelect is hyper customizable: all properties are optional, you can totally just pass an empty object and set the settings later.

setSettings​

Any setting can be updated/added after the initialization by using the setSettings method. Here is an example updating the area and the selectables:

const ds = new DragSelect({})
// And set any settings at any point in time
ds.setSettings({
  selectables: document.getElementsByClassName('selectable-nodes'),
  area: document.getElementById('area')
})

See the Settings page for a list of all possible options.

- + \ No newline at end of file diff --git a/docs/info.html b/docs/info.html index a8f14bb8..546cf35c 100644 --- a/docs/info.html +++ b/docs/info.html @@ -9,7 +9,7 @@ - + @@ -20,7 +20,7 @@ If you're broke, you can still support us with your time instead by contributing to the code!

Thank you :)

Thanks to:​

LambdaTest​

LambdaTest

LambdaTest is a Next-Generation Mobile App and Cross Browser Testing Cloud. They support this open source projects by providing us with a free account and with a generous donation!

BrowserStack​

Browserstack

BrowserStack is a service for cross-browser testing. They support this open source projects by providing us with a free account!

DigitalOcean​

DigitalOcean

DigitalOcean is a cloud hosting service. They support this open source projects by providing us with free credits!

You?​

You?

Show your appreciation and support with a donation! Direct Donation to DragSelect (via Bitcoin: 1LdweSpjgSeJC8XxX3swrohBMBLUzg6cmC). Or sponsor via GitHub Sponsors or Get in touch.

Donations are distributed with all project contributors proportionally to their involvement. We are grateful for any amount: we have more than npm downloads count, imagine how much we'd have if everyone would have had donated only 1$ 🤩 (unfortunately this is just a dream). If you donate, we can display your logo here if you want, which will give you infinite fame, fortune and help you recruit great talent.

Licenses​

TL;DR: If your project makes money: Purchase a commercial license.

DragSelect is, and will forever be, a free and open-source tool. Free for any non-commercial project. However, this is a lot of work and hard work should be rewarded, so if you are using DragSelect for business and/or commercial sites, projects, and applications you’ll have to get the commercial license to keep your source proprietary and the project alive.

- + \ No newline at end of file diff --git a/docs/intro.html b/docs/intro.html index d39df55c..03e1ef11 100644 --- a/docs/intro.html +++ b/docs/intro.html @@ -9,7 +9,7 @@ - + @@ -21,7 +21,7 @@ Make sure to read the guides and the documentation. If you’re stuck feel free to reach out on Github.

Typewriter Gif

- + \ No newline at end of file diff --git a/ds.esm.min.js b/ds.esm.min.js index e5093ad4..8f117099 100644 --- a/ds.esm.min.js +++ b/ds.esm.min.js @@ -1 +1 @@ -const t=(t,e)=>{const s=e;window.addEventListener("resize",s),window.addEventListener("scroll",s);const i=new MutationObserver(s),r=new ResizeObserver(s);t.forEach(((t,e)=>{i.observe(t,{childList:0!==e,attributes:!0}),t instanceof Element&&r.observe(t)}));return{observer:i,resizeObserver:r,callback:s,cleanup:()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s),i.disconnect(),r.disconnect()}}},e=(t,e)=>{let s;return(...i)=>{clearTimeout(s),s=setTimeout((()=>{s=void 0,t(...i)}),e)}},s=t=>{const e=(t,s=0)=>{const i=t[s]?.parentNode;return i?(t.push(i),s++,e(t,s)):t};return e([t])},i=({computedStyle:t,node:e})=>{const{position:s}=t;e instanceof Document||("absolute"===s||"relative"===s||"fixed"===s)||(e.style.position="relative")};let r;class n{DS;PS;Settings;_observers;_node;_parentNodes;_computedStyle;_computedBorder;_rect;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this._node=this.Settings.area,this.setArea(this.Settings.area),this.PS.subscribe("Settings:updated:area",(({settings:{area:t}})=>this.setArea(t))),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:end",this.reset)}setArea=t=>{this.reset(),this._node=t,i({computedStyle:this.computedStyle,node:this._node}),setTimeout((()=>{this.PS.publish("Area:modified:pre",{item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{item:this.HTMLNode})}))};init=()=>{this._observers=t(this.parentNodes,e((t=>{this.PS.publish("Area:modified:pre",{event:t,item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{event:t,item:this.HTMLNode})}),60))};reset=()=>{this._computedStyle=void 0,this._rect=void 0,this._computedBorder=void 0,this._parentNodes=void 0};stop=()=>{this._observers?.cleanup(),this.reset()};scroll=(t,e)=>{const s={scroll_directions:t,scroll_multiplier:e};this.PS.publish("Area:scroll:pre",s),((t,e,s=1)=>{if(!e?.length||!t)return;let i=t;if(t instanceof Document&&(r&&(i=r),Number.isFinite(document?.documentElement?.scrollTop))){const t=document.documentElement.scrollTop;document.documentElement.scrollTop+=1,document.documentElement.scrollTop===t?(i=document.body,r=document.body):(document.documentElement.scrollTop=t,i=document.documentElement,r=document.documentElement)}const n=e.includes("top")&&i.scrollTop>0,o=e.includes("bottom")&&i.scrollTop0,a=e.includes("right")&&i.scrollLeft{if(t instanceof Document)return{top:0,left:0,bottom:0,right:0,width:window.innerWidth,height:window.innerHeight};const s=t.getBoundingClientRect();return{top:s.top,left:s.left,bottom:s.bottom,right:s.right,width:(t.clientWidth||s.width)*e,height:(t.clientHeight||s.height)*e}})(this.HTMLNode,this.DS.stores.SettingsStore.s.zoom)}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.HTMLNode)}}const o=({x:t,y:e},s,{x:i,y:r})=>({"+":{x:t+i,y:e+r},"-":{x:t-i,y:e-r},"*":{x:t*i,y:e*r},"/":{x:t/i,y:e/r}}[s]),l=t=>({x:t.left,y:t.top}),a=(t,e=0)=>({left:t.x,top:t.y,right:t.x,bottom:t.y,width:e,height:e}),h=t=>({x:t,y:t}),c=t=>{const e={x:0,y:0},s=window.getComputedStyle(t);if(!s.transform||"none"===s.transform)return e;if(s.transform.indexOf("3d")>=0){const t=s.transform.trim().match(/matrix3d\((.*?)\)/);if(t&&t.length){const s=t[1]?.split(",");e.x=parseInt(s[12])||0,e.y=parseInt(s[13])||0}return e}const i=s.transform.trim().match(/matrix\((.*?)\)/);if(i&&i.length){const t=i[1]?.split(",");e.x=parseInt(t[4])||0,e.y=parseInt(t[5])||0}return e},d=(t,e)=>e?(t=>{const{transform:e}=t.style;if(!e||e.indexOf("translate")<0)return c(t);const s={x:0,y:0},i=e.trim().match(/translate[3dD]*?\(.*?\)/);if(i){const t=i[0]?.split("(");if(t){const e=t[1]?.split(",");s.x=parseInt(e[0])||0,s.y=parseInt(e[1])||0}}return s.x||s.x?s:c(t)})(t):(t=>{const{style:e}=t,s={x:parseInt(e.left)||0,y:parseInt(e.top)||0};if(!s.x&&!s.x){const e=window.getComputedStyle(t);return{x:parseInt(e.left)||0,y:parseInt(e.top)||0}}return s})(t),S=({containerRect:t,selectionRect:e,direction:s,scrollAmount:i})=>{const r={top:t.top-e.top+i.y,left:t.left-e.left+i.x,bottom:t.bottom-e.bottom+i.y,right:t.right-e.right+i.x};return 0===s.x&&0===s.y||(s.y<0&&(s.y=Math.max(s.y,r.top)),s.x<0&&(s.x=Math.max(s.x,r.left)),s.y>0&&(s.y=Math.min(s.y,r.bottom)),s.x>0&&(s.x=Math.min(s.x,r.right)),e.top+=s.y,e.bottom+=s.y,e.left+=s.x,e.right+=s.x),s};class u{_prevCursorPos;_prevScrollPos;_elements=[];_dragKeys;_dragKeysFlat=[];_selectionRect=a(h(0));DS;PS;Settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dragKeys",this.assignDragKeys),this.assignDragKeys(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("KeyStore:down",this.keyboardDrag),this.PS.subscribe("KeyStore:up",this.keyboardEnd)}assignDragKeys=()=>{this._dragKeys={up:this.Settings.dragKeys.up.map((t=>t.toLowerCase())),down:this.Settings.dragKeys.down.map((t=>t.toLowerCase())),left:this.Settings.dragKeys.left.map((t=>t.toLowerCase())),right:this.Settings.dragKeys.right.map((t=>t.toLowerCase()))},this._dragKeysFlat=[...this._dragKeys.up,...this._dragKeys.down,...this._dragKeys.left,...this._dragKeys.right]};keyboardDrag=({event:t,key:e})=>{const s=e.toLowerCase();if(!this.Settings.keyboardDrag||!this._dragKeysFlat.includes(s)||!this.DS.SelectedSet.size||!this.Settings.draggability||this.DS.continue)return;const i={event:t,isDragging:!0,isDraggingKeyboard:!0,key:e};this.PS.publish(["Interaction:start:pre","Interaction:start"],i),this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0);let r=(({shiftKey:t,keyboardDragSpeed:e,zoom:s,key:i,dragKeys:r,scrollDiff:n})=>{const o={x:0,y:0},l=t?4*e*s:e*s;return r?.left.includes(i)&&(o.x=n.x||-l),r?.right.includes(i)&&(o.x=n.x||l),r?.up.includes(i)&&(o.y=n.y||-l),r?.down.includes(i)&&(o.y=n.y||l),o})({shiftKey:this.DS.stores.KeyStore.currentValues.includes("shift"),keyboardDragSpeed:this.Settings.keyboardDragSpeed,zoom:this.Settings.zoom,key:s,scrollDiff:this._scrollDiff,dragKeys:this._dragKeys});r=S({direction:r,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(r),this.PS.publish(["Interaction:update:pre","Interaction:update"],i)};keyboardEnd=({event:t,key:e})=>{const s=e.toLowerCase();if(!(this.Settings.keyboardDrag&&this._dragKeysFlat.includes(s)&&this.DS.SelectedSet.size&&this.Settings.draggability))return;const i={event:t,isDragging:this.Settings.draggability,isDraggingKeyboard:!0,key:e};this.PS.publish(["Interaction:end:pre","Interaction:end"],i)};start=({isDragging:t,isDraggingKeyboard:e})=>{t&&!e&&(this._prevCursorPos=void 0,this._prevScrollPos=void 0,this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0))};stop=()=>{this._prevCursorPos=void 0,this._prevScrollPos=void 0,this.handleZIndex(!1),this._elements=[]};update=({isDragging:t,isDraggingKeyboard:e})=>{if(!t||!this._elements.length||e||this.DS.continue)return;let s=o(this._cursorDiff,"+",this._scrollDiff);s=S({direction:s,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(s)};handleZIndex=t=>{this._elements.forEach((e=>e.style.zIndex=`${(parseInt(e.style.zIndex)||0)+(t?9999:-9998)}`))};moveElements=t=>{const{elements:e,direction:s}=this.filterDragElements({elements:this._elements,direction:t});e.forEach((t=>{(({element:t,posDirection:e,useTransform:s})=>{const i=d(t,s);((t,e,s)=>{if(s){const s=t.style.transform;t.style.transform=`translate3d(${e.x}px,${e.y}px,1px) ${s.replace(/translate.*?\)/g,"")}`}else t.style.left=`${e.x}px`,t.style.top=`${e.y}px`})(t,o(i,"+",e),s)})({element:t,posDirection:s,containerRect:this.DS.SelectorArea.rect,useTransform:this.Settings.useTransform})}))};get _cursorDiff(){const t=this.DS.stores.PointerStore.currentVal,e=this._prevCursorPos?o(t,"-",this._prevCursorPos):{x:0,y:0};return this._prevCursorPos=t,e}get _scrollDiff(){const t=this.DS.stores.ScrollStore.currentVal,e=this._prevScrollPos?o(t,"-",this._prevScrollPos):{x:0,y:0};return this._prevScrollPos=t,e}filterDragElements=({elements:t,direction:e})=>({elements:t,direction:e})}const p=(t,e,s=0)=>{if(!t||!e)return!1;let i=t;if(s>0){const e=(t.right-t.left)*s,r=(t.bottom-t.top)*s;i={left:t.left+e,right:t.right-e,top:t.top+r,bottom:t.bottom-r}}return i.lefte.left&&i.tope.top},g=t=>t?Array.isArray(t)||"function"==typeof t[Symbol.iterator]?[...new Set([...t])]:[t]:[];class m{id;element;_droppables;_rect;_observers;_timeout;_itemsDropped=[];_itemsInside;DS;PS;Settings;isDestroyed=!1;_parentNodes;constructor({DS:s,PS:i,id:r,element:n,droppables:o}){this.DS=s,this.PS=i,this.Settings=this.DS.stores.SettingsStore.s,this.id=r,this.element=n,o&&(this.droppables=g(o)),this.element.classList.add(`${this.Settings.dropZoneClass}`),this.PS.subscribe("Settings:updated:dropZoneClass",(({settings:t})=>{this.element&&(this.element.classList.remove(t["dropZoneClass:pre"]),this.element.classList.add(t.dropZoneClass))})),this._observers=t(this.parentNodes,e((()=>this._rect=void 0),this.Settings.refreshMemoryRate)),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop)}setReadyClasses=t=>{if(this.isDestroyed)return;const e=this.droppables.filter((t=>this.DS.SelectedSet.has(t)));e.length&&(e.forEach((e=>{e.classList[t](`${this.Settings.droppableClass}`),e.classList[t](`${this.Settings.droppableClass}-${this.id}`)})),this.element.classList[t](`${this.Settings.dropZoneReadyClass}`))};handleNoDrop=()=>{this.isDestroyed||(this.DS.SelectedSet.forEach((t=>{t.classList.remove(this.Settings.droppedTargetClass),t.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped=this._itemsDropped.filter((t=>!this.DS.SelectedSet.has(t))),this._itemsDropped?.length||this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`))};handleDrop=()=>{this.isDestroyed||(this._itemsDropped=[...new Set([...this._itemsDropped,...this.droppables?.filter((t=>this.DS.SelectedSet.has(t)))])],this._itemsDropped?.forEach((t=>{t.classList.add(`${this.Settings.droppedTargetClass}`),t.classList.add(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped?.length&&this.element.classList.add(`${this.Settings.dropZoneTargetClass}`))};handleItemsInsideClasses=()=>{let t=!1;this.droppables.forEach((e=>{this.itemsInside?.includes(e)?(e.classList.add(`${this.Settings.droppedInsideClass}`),e.classList.add(`${this.Settings.droppedInsideClass}-${this.id}`),t=!0):(e.classList.remove(`${this.Settings.droppedInsideClass}-${this.id}`),e.className.includes(`${this.Settings.droppedInsideClass}-`)||e.classList.remove(`${this.Settings.droppedInsideClass}`))})),t?this.element.classList.add(`${this.Settings.dropZoneInsideClass}`):this.element.classList.remove(`${this.Settings.dropZoneInsideClass}`)};start=({isDragging:t})=>{t&&!this.isDestroyed&&this.setReadyClasses("add")};stop=({isDragging:t})=>{t&&!this.isDestroyed&&(this.setReadyClasses("remove"),this.handleItemsInsideClasses())};destroy(){this._observers?.cleanup(),this.element.classList.remove(`${this.Settings.dropZoneClass}`),this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`),this.element.classList.remove(`${this.Settings.dropZoneReadyClass}`),this.droppables.forEach((t=>{t.classList.remove(`${this.Settings.droppedTargetClass}`),t.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`),t.classList.remove(`${this.Settings.droppableClass}`),t.classList.remove(`${this.Settings.droppableClass}-${this.id}`)})),this.PS.unsubscribe("Interaction:start",this.start),this.PS.unsubscribe("Interaction:end",this.stop),this.isDestroyed=!0}toObject=()=>({id:this.id,element:this.element,droppables:this.droppables,itemsDropped:this.itemsDropped,itemsInside:this.itemsInside});get rect(){if(!this.isDestroyed)return this._rect?this._rect:this._rect=this.element.getBoundingClientRect()}get itemsDropped(){if(!this.isDestroyed)return this._itemsDropped}get itemsInside(){if(!this.isDestroyed)return this._itemsInside||(this._itemsInside=this.droppables.flatMap((t=>{const e=this.DS.SelectableSet.rects.get(t);return this.rect&&p(e,this.rect,this.Settings.dropInsideThreshold)?[t]:[]})),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._itemsInside=void 0),this.Settings.refreshMemoryRate)),this._itemsInside}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.element)}get droppables(){return this._droppables?this._droppables:this.DS.SelectableSet.elements}set droppables(t){this._droppables=t}}class b{_zoneByElement=new Map;_zoneById=new Map;_zonesByDroppable=new Map;_zones;DS;PS;Settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dropZones",(({settings:t})=>this.setDropZones(t))),this.setDropZones({dropZones:this.Settings.dropZones}),this.PS.subscribe("Interaction:end",this.stop)}setDropZones=({dropZones:t})=>{t&&(this._zones&&this._zones.forEach((t=>t.destroy())),this._zones=t.map((t=>new m({DS:this.DS,PS:this.PS,...t}))),this._zones.forEach((t=>{this._zoneByElement.set(t.element,t),this._zoneById.set(t.id,t),t.droppables.forEach((e=>{const s=this._zonesByDroppable.get(e);if(!s?.length)return this._zonesByDroppable.set(e,[t]);this._zonesByDroppable.set(e,[...new Set([...s,t])])}))})))};_handleDrops=t=>{this._zones?.forEach((e=>{e!==t&&e.handleNoDrop()})),t&&t.handleDrop()};_getZoneByElementsFromPoint=(t,{x:e,y:s})=>{for(let i=0,r=t.length;i{if(!t)return;const i=this.getTarget({isDraggingKeyboard:e,event:s});this._handleDrops(i)};getItemsDroppedById=t=>{const e=this._zoneById.get(t);return e?e.itemsDropped:console.warn(`[DragSelect] No zone found (id: ${t})`)};getItemsInsideById=(t,e)=>{const s=this._zoneById.get(t);return s?(e&&s.handleItemsInsideClasses(),s.itemsInside):console.warn(`[DragSelect] No zone found (id: ${t})`)};getKeyboardItemCenter=(t,e)=>{if(!t||!e)return;const s=e.target?.getBoundingClientRect();return{x:s.left+s.width/2,y:s.top+s.height/2}};getTarget=({coordinates:t,isDraggingKeyboard:e,event:s})=>{if(!this._zones?.length)return;let i;!t&&e&&s&&(i=this.getKeyboardItemCenter(e,s));const r=t?.x||i?.x||this.DS.stores.PointerStore.currentVal.x,n=t?.y||i?.y||this.DS.stores.PointerStore.currentVal.y,o=document.elementsFromPoint(r,n);return this._getZoneByElementsFromPoint(o,{x:r,y:n})}}class y{isInteracting;isDragging=!1;DS;PS;Settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:area",(({settings:t})=>{this.removeAreaEventListeners(t["area:pre"]),this.setAreaEventListeners(t.area)})),this.PS.subscribe("PointerStore:updated",(({event:t})=>this.update({event:t}))),this.PS.subscribe("Selectable:click",this.onClick),this.PS.subscribe("Selectable:pointer",(({event:t})=>this.start(t))),this.PS.subscribe("Interaction:start:pre",(({event:t})=>this._start(t))),this.PS.subscribe("Interaction:init:pre",this._init),this.PS.subscribe("Interaction:end:pre",(({event:t})=>this._reset(t))),this.PS.subscribe("Area:scroll",this.update)}init=()=>this.PS.publish("Interaction:init:pre",{init:!0});_init=()=>{this.stop(),this.setAreaEventListeners(),this.PS.publish("Interaction:init",{init:!0})};_canInteract(t){const e="clientX"in t&&0===t.clientX&&0===t.clientY&&0===t.detail&&t.target;return!("button"in t&&2===t.button||this.isInteracting||t.target&&!this.DS.SelectorArea.isInside(t.target)||!e&&!this.DS.SelectorArea.isClicked(t))}start=t=>this.PS.publish("Interaction:start:pre",{event:t,isDragging:this.isDragging});_start=t=>{"touchstart"===t.type&&t.preventDefault(),this._canInteract(t)&&(this.isInteracting=!0,this.isDragging=this.isDragEvent(t),this.PS.publish("Interaction:start",{event:t,isDragging:this.isDragging}),this.setDocEventListeners())};isDragEvent=t=>{let e=null;return t.target&&"closest"in t.target&&(e=t.target.closest(`.${this.Settings.selectableClass}`)),!(!this.Settings.draggability||this.DS.stores.KeyStore.isMultiSelectKeyPressed(t)||!e)&&(this.Settings.immediateDrag&&(this.DS.SelectedSet.size?this.DS.SelectedSet.has(e)||(this.DS.SelectedSet.clear(),this.DS.SelectedSet.add(e)):this.DS.SelectedSet.add(e)),!!this.DS.SelectedSet.has(e))};onClick=({event:t})=>{if(!this._canInteract(t))return;if(t.detail>0)return;const{stores:{PointerStore:e,KeyStore:s},SelectableSet:i,SelectedSet:r}=this.DS;e.start(t);const n=t.target;n&&!i.has(n)||(s.isMultiSelectKeyPressed(t)||r.clear(),n&&r.toggle(n),this.reset(t))};stop=(t=this.DS.Area.HTMLNode)=>{this.removeAreaEventListeners(t),this.removeDocEventListeners()};update=({event:t,scroll_directions:e,scroll_multiplier:s})=>{this.isInteracting&&this.PS.publish(["Interaction:update:pre","Interaction:update"],{event:t,scroll_directions:e,scroll_multiplier:s,isDragging:this.isDragging})};reset=t=>this.PS.publish("Interaction:end:pre",{event:t,isDragging:this.isDragging});_reset=t=>{const{isDragging:e}=this;this.isInteracting=!1,this.isDragging=!1,this.removeDocEventListeners(),this.PS.publish("Interaction:end",{event:t,isDragging:e})};setAreaEventListeners=(t=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?t.addEventListener("pointerdown",this.start,{passive:!1}):t.addEventListener("mousedown",this.start),t.addEventListener("touchstart",this.start,{passive:!1})};removeAreaEventListeners=(t=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?t.removeEventListener("pointerdown",this.start,{passive:!1}):t.removeEventListener("mousedown",this.start),t.removeEventListener("touchstart",this.start,{passive:!1})};setDocEventListeners=()=>{this.Settings.usePointerEvents?(document.addEventListener("pointerup",this.reset),document.addEventListener("pointercancel",this.reset)):document.addEventListener("mouseup",this.reset),document.addEventListener("touchend",this.reset)};removeDocEventListeners=()=>{this.Settings.usePointerEvents?(document.removeEventListener("pointerup",this.reset),document.removeEventListener("pointercancel",this.reset)):document.removeEventListener("mouseup",this.reset),document.removeEventListener("touchend",this.reset)}}class D{_currentValues=new Set;_keyMapping={control:"ctrlKey",shift:"shiftKey",meta:"metaKey"};DS;PS;settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init)}init=()=>{document.addEventListener("keydown",this.keydown),document.addEventListener("keyup",this.keyup),window.addEventListener("blur",this.reset)};keydown=t=>{if(!t.key?.toLocaleLowerCase)return;const e=t.key.toLowerCase();this.PS.publish("KeyStore:down:pre",{event:t,key:e}),this._currentValues.add(e),this.PS.publish("KeyStore:down",{event:t,key:e})};keyup=t=>{if(!t.key?.toLocaleLowerCase)return;const e=t.key.toLowerCase();this.PS.publish("KeyStore:up:pre",{event:t,key:e}),this._currentValues.delete(e),this.PS.publish("KeyStore:up",{event:t,key:e})};stop=()=>{document.removeEventListener("keydown",this.keydown),document.removeEventListener("keyup",this.reset),window.removeEventListener("blur",this.reset),this.reset()};reset=()=>this._currentValues.clear();isMultiSelectKeyPressed(t){if(this.settings.multiSelectMode)return!0;const e=this.settings.multiSelectKeys?.map((t=>t.toLocaleLowerCase()))??[];return!!this.currentValues.some((t=>e.includes(t)))||!(!t||!e.some((e=>t[this._keyMapping[e]])))}get currentValues(){return Array.from(this._currentValues.values())}}class _{_isMouseInteraction=!1;_initialValArea={x:0,y:0};_currentValArea={x:0,y:0};_lastValArea={x:0,y:0};_initialVal={x:0,y:0};_currentVal={x:0,y:0};_lastVal={x:0,y:0};_lastTouch;DS;PS;settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({event:t})=>this.start(t))),this.PS.subscribe("Interaction:end",(({event:t})=>this.reset(t)))}init=()=>{this.settings.usePointerEvents?document.addEventListener("pointermove",this.update,{passive:!1}):document.addEventListener("mousemove",this.update),document.addEventListener("touchmove",this.update,{passive:!1})};start(t){t&&(this._isMouseInteraction=!0,this.currentVal=this.initialVal=this.getPointerPosition(t))}getPointerPosition=t=>(({event:t})=>({x:t.clientX,y:t.clientY}))({event:this._normalizedEvent(t)});update=t=>{t&&(this.PS.publish("PointerStore:updated:pre",{event:t}),this.currentVal=this.getPointerPosition(t),this._isMouseInteraction&&this.PS.publish("PointerStore:updated",{event:t}))};stop=()=>{this.settings.usePointerEvents?document.removeEventListener("pointermove",this.update,{passive:!1}):document.removeEventListener("mousemove",this.update),document.removeEventListener("touchmove",this.update,{passive:!1}),this.reset()};reset=t=>{this.currentVal=this.lastVal=this.getPointerPosition(t),setTimeout((()=>this._isMouseInteraction=!1),100)};_normalizedEvent(t){return!t||t instanceof KeyboardEvent?{clientX:0,clientY:0}:"touches"in t?("touchend"!==t.type&&(this._lastTouch=t),this._lastTouch?.touches[0]||t.touches[0]):t}get initialValArea(){return this._initialValArea?this._initialValArea:{x:0,y:0}}get currentValArea(){return this._currentValArea?this._currentValArea:{x:0,y:0}}get lastValArea(){return this._lastValArea?this._lastValArea:{x:0,y:0}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal?this._currentVal:{x:0,y:0}}get lastVal(){return this._lastVal?this._lastVal:{x:0,y:0}}set initialVal(t){this._initialVal=t,this._initialValArea=t&&o(t,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set currentVal(t){this._currentVal=t,this._currentValArea=t&&o(t,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set lastVal(t){this._lastVal=t,this._lastValArea=t&&o(t,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}}class v{subscribers={};DS;constructor({DS:t}){this.DS=t}subscribe=(t,e)=>{Array.isArray(this.subscribers[t])||(this.subscribers[t]=[]);const s=this.subscribers[t];return s.push(e),s.length-1};unsubscribe=(t,e,s)=>{const i=s??this.subscribers[t]?.findIndex((t=>t===e));this.subscribers[t]?.splice(Number(i),1)};publish=(t,e)=>{Array.isArray(t)?t.forEach((t=>this._publish(t,e))):this._publish(t,e)};_publish=(t,e)=>{const s=this.subscribers[t]??[];t.includes(":pre")?this._handlePrePublish(s,e):this._handlePublish(s,e)};_handlePublish=(t,e)=>{for(let s=0,i=t.length;s{let s=t.length;for(;s--;){if(this.DS.stopped)return;t[s]?.(e)}}}const P=()=>({y:document.body?.scrollTop||document.documentElement?.scrollTop||0,x:document.body?.scrollLeft||document.documentElement?.scrollLeft||0}),f=t=>!t||t instanceof Document?P():{x:t.scrollLeft>=0?t.scrollLeft:P().x,y:t.scrollTop>=0?t.scrollTop:P().y},I=t=>{const e=t.scrollTop,s=Boolean(t.scrollTop=1);return t.scrollTop=e,s};class L{_initialVal={x:0,y:0};_currentVal={x:0,y:0};_canScroll;DS;PS;Settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Area:modified",(()=>{this.stop(),this.init()})),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(()=>this.start())),this.PS.subscribe("Interaction:end",(()=>this.reset()))}init=()=>this.addListeners();addListeners=()=>this.DS.Area.HTMLNode.addEventListener("scroll",this.update);removeListeners=()=>this.DS.Area.HTMLNode.removeEventListener("scroll",this.update);start=()=>{this._currentVal=this._initialVal=f(this.DS.Area.HTMLNode)};update=()=>this._currentVal=f(this.DS.Area.HTMLNode);stop=()=>{this.reset(),this.removeListeners()};reset=()=>{this._initialVal={x:0,y:0},this._canScroll=void 0};get canScroll(){return"boolean"==typeof this._canScroll?this._canScroll:this._canScroll=(t=>{const e=f(t);return!(!e.x&&!e.y)||(t instanceof Document?t.body?I(t.body):I(t.documentElement):I(t))})(this.DS.Area.HTMLNode)}get scrollAmount(){const t=o(this.currentVal,"-",this.initialVal),e=h(this.Settings.zoom),s=o(o(t,"*",e),"-",t);return{x:t.x+s.x,y:t.y+s.y}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal||(this._currentVal=f(this.DS.Area.HTMLNode)),this._currentVal}}class E extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:t,PS:e}){super(),this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Settings:updated:selectables",(()=>{this.clear(),this.init()})),this.PS.subscribe("Settings:updated:selectableClass",(({settings:t})=>{this.forEach((e=>{e.classList.remove(t["selectableClass:pre"]),e.classList.add(t.selectableClass)}))}))}init=()=>g(this.Settings.selectables).forEach((t=>this.add(t)));add(t){if(!t||super.has(t))return this;const e={items:this.elements,item:t};return this.PS.publish("Selectable:added:pre",e),t.classList.add(this.Settings.selectableClass),t.addEventListener("click",this._onClick),this.Settings.usePointerEvents?t.addEventListener("pointerdown",this._onPointer,{passive:!1}):t.addEventListener("mousedown",this._onPointer),t.addEventListener("touchstart",this._onPointer,{passive:!1}),this.Settings.draggability&&!this.Settings.useTransform&&i({computedStyle:window.getComputedStyle(t),node:t}),this.PS.publish("Selectable:added",e),super.add(t)}delete(t){if(!t||!super.has(t))return!0;const e={items:this.elements,item:t};return this.PS.publish("Selectable:removed:pre",e),t.classList.remove(this.Settings.selectableClass),t.classList.remove(this.Settings.hoverClass),t.removeEventListener("click",this._onClick),this.Settings.usePointerEvents?t.removeEventListener("pointerdown",this._onPointer,{passive:!1}):t.removeEventListener("mousedown",this._onPointer),t.removeEventListener("touchstart",this._onPointer,{passive:!1}),this.PS.publish("Selectable:removed",e),super.delete(t)}clear=()=>this.forEach((t=>this.delete(t)));_onClick=t=>this.PS.publish(["Selectable:click:pre","Selectable:click"],{event:t});_onPointer=t=>this.PS.publish(["Selectable:pointer:pre","Selectable:pointer"],{event:t});addAll=t=>t.forEach((t=>this.add(t)));deleteAll=t=>t.forEach((t=>this.delete(t)));getElementRect=t=>this._rects?this._rects.get(t):t.getBoundingClientRect();get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((t=>this._rects?.set(t,t.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}class T extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:t,PS:e}){super(),this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s}add(t){if(!t||super.has(t))return this;const e={items:this.elements,item:t};return this.PS.publish("Selected:added:pre",e),super.add(t),t.classList.add(this.Settings.selectedClass),t.style.zIndex=`${(parseInt(t.style.zIndex)||0)+1}`,this.PS.publish("Selected:added",e),this}delete(t){if(!t||!super.has(t))return!0;const e={items:this.elements,item:t};this.PS.publish("Selected:removed:pre",e);const s=super.delete(t);return t.classList.remove(this.Settings.selectedClass),t.style.zIndex=""+((parseInt(t.style.zIndex)||0)-1),this.PS.publish("Selected:removed",e),s}clear=()=>this.forEach((t=>this.delete(t)));toggle(t){return this.has(t)?this.delete(t):this.add(t),t}addAll=t=>t.forEach((t=>this.add(t)));deleteAll=t=>t.forEach((t=>this.delete(t)));get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((t=>this._rects?.set(t,t.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}var C=(t,e)=>{e.left&&(t.style.left=`${e.left}px`),e.top&&(t.style.top=`${e.top}px`),e.width&&(t.style.width=`${e.width}px`),e.height&&(t.style.height=`${e.height}px`)};class x{_rect;DS;PS;Settings;HTMLNode;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=this.Settings.selector,this.PS.subscribe("Settings:updated:selectorClass",(({settings:t})=>{this.HTMLNode.classList.remove(t["selectorClass:pre"]),this.HTMLNode.classList.add(t.selectorClass)})),this.PS.subscribe("Settings:updated:selector",this.attachSelector),this.PS.subscribe("Settings:updated:customStyles",this.attachSelector),this.attachSelector(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("Interaction:end",this.stop)}attachSelector=()=>{this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.removeChild(this.HTMLNode),this.HTMLNode=this.Settings.selector||(t=>{const e=document.createElement("div");return e.style.position="absolute",t||(e.style.background="rgba(0, 175, 255, 0.2)",e.style.border="1px solid rgba(0, 175, 255, 0.8)",e.style.display="none",e.style.pointerEvents="none"),e})(this.Settings.customStyles),this.HTMLNode.classList.add(this.Settings.selectorClass),this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.appendChild(this.HTMLNode)};start=({isDragging:t})=>{if(t)return;const{stores:{PointerStore:e}}=this.DS,s=e.initialValArea;C(this.HTMLNode,a(s,1)),this.HTMLNode.style.display="block",this._rect=void 0};stop=()=>{this.HTMLNode.style.width="0",this.HTMLNode.style.height="0",this.HTMLNode.style.display="none"};update=({isDragging:t})=>{if(t||this.DS.continue)return;const{stores:{ScrollStore:e,PointerStore:s}}=this.DS,i=(({scrollAmount:t,initialPointerPos:e,pointerPos:s})=>{const i={};return s.x>e.x-t.x?(i.left=e.x-t.x,i.width=s.x-e.x+t.x):(i.left=s.x,i.width=e.x-s.x-t.x),s.y>e.y-t.y?(i.top=e.y-t.y,i.height=s.y-e.y+t.y):(i.top=s.y,i.height=e.y-s.y-t.y),i})({scrollAmount:e.scrollAmount,initialPointerPos:s.initialValArea,pointerPos:s.currentValArea});C(this.HTMLNode,i),this._rect=void 0};get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}class A{_prevSelectedSet=new Set;_boundingRect;_timeout;DS;PS;Settings;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update)}_storePrevious(t){const{stores:{KeyStore:e},SelectedSet:s}=this.DS;e.isMultiSelectKeyPressed(t)?this._prevSelectedSet=new Set(s):this._prevSelectedSet=new Set}start=({event:t,isDragging:e})=>{e||(this._storePrevious(t),this._handleInsideSelection(!0,t))};update=({isDragging:t})=>{t||this.DS.continue||this._handleInsideSelection()};_handleInsideSelection=(t,e)=>{const{SelectableSet:s,SelectorArea:i,Selector:r}=this.DS,n=this.DS.stores.KeyStore.isMultiSelectKeyPressed(e)&&this.Settings.multiSelectToggling,o=this.Settings.selectionThreshold,l=s.rects,a=r.rect,h=new Map,c=new Map;for(const[t,e]of l)i.isInside(t,e)&&(p(e,a,o)?h.set(t,e):c.set(t,e));if(this.DS.continue)return;const{select:d,unselect:S}=this.filterSelected({select:h,unselect:c,selectorRect:a});d.forEach(((e,s)=>(({element:t,force:e,multiSelectionToggle:s,SelectedSet:i,hoverClassName:r})=>{t.classList.contains(r)&&!e||(i.has(t)?s&&i.delete(t):i.add(t),t.classList.add(r))})({element:s,force:t,multiSelectionToggle:n,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass}))),S.forEach(((e,s)=>(({element:t,force:e,SelectedSet:s,PrevSelectedSet:i,hoverClassName:r})=>{if(!t.classList.contains(r)&&!e)return;const n=s.has(t),o=i.has(t);n&&!o?s.delete(t):!n&&o&&s.add(t),t.classList.remove(r)})({element:s,force:t,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass,PrevSelectedSet:this._prevSelectedSet})))};get boundingRect(){return this._boundingRect||(this._boundingRect=(t=>{const e={top:Number.POSITIVE_INFINITY,left:Number.POSITIVE_INFINITY,bottom:Number.NEGATIVE_INFINITY,right:Number.NEGATIVE_INFINITY,width:Number.NEGATIVE_INFINITY,height:Number.NEGATIVE_INFINITY};return t.rects.forEach((t=>{e.top=Math.min(e.top,t.top||e.top),e.left=Math.min(e.left,t.left||e.left),e.bottom=Math.max(e.bottom,t.bottom||e.bottom),e.right=Math.max(e.right,t.right||e.right)})),e.height=e.bottom-e.top,e.width=e.right-e.left,e})(this.DS.SelectedSet),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._boundingRect=void 0),this.Settings.refreshMemoryRate)),this._boundingRect}filterSelected=({select:t,unselect:e,selectorRect:s})=>({select:t,unselect:e})}class w{_scrollInterval;_rect;currentEdges=[];DS;PS;Settings;HTMLNode;constructor({DS:t,PS:e}){this.DS=t,this.PS=e,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=(()=>{const t=document.createElement("div");return t.style.position="fixed",t.style.overflow="hidden",t.style.pointerEvents="none",t.style.zIndex="999999999999999999",t})(),this.PS.subscribe("Settings:updated:selectorAreaClass",(({settings:t})=>{this.HTMLNode.classList.remove(t["selectorAreaClass:pre"]),this.HTMLNode.classList.add(t.selectorAreaClass)})),this.HTMLNode.classList.add(this.Settings.selectorAreaClass),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({isDraggingKeyboard:t})=>this.startAutoScroll({isDraggingKeyboard:t}))),this.PS.subscribe("Interaction:end",(()=>{this.updatePos(),this.stopAutoScroll()}))}init=()=>{this.applyElements("append"),this.updatePos()};applyElements=t=>{const e=document.body?"body":"documentElement",s=`${t}Child`;this.HTMLNode[s](this.DS.Selector.HTMLNode),document[e][s](this.HTMLNode)};updatePos=()=>{this._rect=void 0;const t=this.DS.Area.rect,e=this.DS.Area.computedBorder,{style:s}=this.HTMLNode,i=`${t.top+e.top}px`,r=`${t.left+e.left}px`,n=`${t.width}px`,o=`${t.height}px`;s.top!==i&&(s.top=i),s.left!==r&&(s.left=r),s.width!==n&&(s.width=n),s.height!==o&&(s.height=o)};stop=t=>{this.stopAutoScroll(),t&&this.applyElements("remove")};startAutoScroll=({isDraggingKeyboard:t})=>{t||(this.currentEdges=[],this._scrollInterval=setInterval((()=>this.handleAutoScroll()),16))};handleAutoScroll=()=>{if(this.DS.continue)return;const{stores:{PointerStore:t},Area:e}=this.DS;this.currentEdges=(({elementRect:t,containerRect:e,tolerance:s={x:0,y:0}})=>{const i=[];return t.top-s.ye.bottom&&i.push("bottom"),t.right+s.y>e.right&&i.push("right"),i})({elementRect:a(t.currentVal),containerRect:this.rect,tolerance:this.Settings.overflowTolerance}),this.currentEdges.length&&e.scroll(this.currentEdges,this.Settings.autoScrollSpeed)};stopAutoScroll=()=>{this.currentEdges=[],clearInterval(this._scrollInterval)};isInside=(t,e)=>!(!this.DS.Area.HTMLNode.contains(t)||!this.DS.stores.ScrollStore.canScroll)||p(this.rect,e||t.getBoundingClientRect());isClicked(t){const{stores:{PointerStore:e}}=this.DS,s=t?e.getPointerPosition(t):e.initialVal;return p({left:s.x,top:s.y,right:s.x,bottom:s.y},this.rect)}get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}const N=(t,e)=>console.warn(`[DragSelect] TypeIssue: setting "${t}" is not of type "${e}".`),M=(t,e,s,i)=>{if(void 0===e)return s?{[t]:i}:{};if(null===e)return{[t]:null};let r=!0,n=!1;const o="string"==typeof i;o&&(r="string"==typeof e||e instanceof String),o&&!r&&(n=!0,N(t,"string"));const l=!Number.isNaN(i)&&"number"==typeof i;l&&(r=!Number.isNaN(e)&&"number"==typeof e),l&&!r&&(n=!0,N(t,"number"));const a="[object Object]"===Object.prototype.toString.call(i);a&&(r="[object Object]"===Object.prototype.toString.call(e)),a&&!r&&(n=!0,N(t,"object"));const h="boolean"==typeof i;h&&(r="boolean"==typeof e),h&&!r&&(n=!0,N(t,"boolean"));const c=Array.isArray(i);c&&(r=Array.isArray(e)),c&&!r&&(n=!0,N(t,"array"));const d=n||s;return"dragKeys"===t&&r?{[t]:Object.assign(i,e)}:"dragKeys"!==t||r?("dropZones"===t&&r&&Array.isArray(e)&&new Set(e.map((t=>t.id))).size!==e.length&&console.warn('[DragSelect] UniqueConstraintsIssue: setting "dropZones" contains duplicate ids.'),r?{[t]:e}:d?{[t]:i}:{}):d?{[t]:i}:{}};class V{_settings={};s={};PS;constructor({PS:t,settings:e}){this.PS=t,this.update({settings:e,init:!0})}update=({settings:t,init:e})=>{this.PS.publish("Settings:updated:pre",{settings:this._settings,"settings:init":Boolean(e),"settings:new":t}),this._update({settings:t,init:e})};_update=({settings:t={},init:e=!1})=>{const s=((t,e)=>({...M("area",t.area,e,document),...M("selectables",t.selectables,e,null),...M("autoScrollSpeed",t.autoScrollSpeed,e,5),...M("overflowTolerance",t.overflowTolerance,e,{x:25,y:25}),...M("zoom",t.zoom,e,1),...M("customStyles",t.customStyles,e,!1),...M("multiSelectMode",t.multiSelectMode,e,!1),...M("multiSelectToggling",t.multiSelectToggling,e,!0),...M("multiSelectKeys",t.multiSelectKeys,e,["Control","Shift","Meta"]),...M("selector",t.selector,e,null),...M("selectionThreshold",t.selectionThreshold,e,0),...M("draggability",t.draggability,e,!0),...M("immediateDrag",t.immediateDrag,e,!0),...M("keyboardDrag",t.keyboardDrag,e,!0),...M("dragKeys",t.dragKeys,e,{up:["ArrowUp"],down:["ArrowDown"],left:["ArrowLeft"],right:["ArrowRight"]}),...M("keyboardDragSpeed",t.keyboardDragSpeed,e,10),...M("useTransform",t.useTransform,e,!0),...M("refreshMemoryRate",t.refreshMemoryRate,e,80),...M("dropZones",t.dropZones,e,[]),...M("dropInsideThreshold",t.dropInsideThreshold,e,1),...M("dropTargetThreshold",t.dropTargetThreshold,e,0),...M("usePointerEvents",t.usePointerEvents,e,!1),...M("hoverClass",t.hoverClass,e,"ds-hover"),...M("selectableClass",t.selectableClass,e,"ds-selectable"),...M("selectedClass",t.selectedClass,e,"ds-selected"),...M("selectorClass",t.selectorClass,e,"ds-selector"),...M("selectorAreaClass",t.selectorAreaClass,e,"ds-selector-area"),...M("droppedTargetClass",t.droppedTargetClass,e,"ds-dropped-target"),...M("droppedInsideClass",t.droppedInsideClass,e,"ds-dropped-inside"),...M("droppableClass",t.droppableClass,e,"ds-droppable"),...M("dropZoneClass",t.dropZoneClass,e,"ds-dropzone"),...M("dropZoneReadyClass",t.dropZoneReadyClass,e,"ds-dropzone-ready"),...M("dropZoneTargetClass",t.dropZoneTargetClass,e,"ds-dropzone-target"),...M("dropZoneInsideClass",t.dropZoneInsideClass,e,"ds-dropzone-inside")}))(t,e);for(const[i,r]of Object.entries(s))((s,i)=>{s in this._settings||Object.defineProperty(this.s,s,{get:()=>this._settings[s],set:t=>this.update({settings:{[s]:t}})}),this._settings[`${s}:pre`]=this._settings[s],this._settings[s]=i;const r={settings:this._settings,"settings:init":e,"settings:new":t};this.PS.publish("Settings:updated",r),this.PS.publish(`Settings:updated:${s}`,r)})(i,r)}}const K={elementselect:"DS:select",elementunselect:"DS:unselect",autoscroll:"DS:scroll",dragstart:"DS:start",dragmove:"DS:update",callback:"DS:end",preelementselect:"DS:select:pre",preelementunselect:"DS:unselect:pre",preautoscroll:"DS:scroll:pre",predragstart:"DS:start:pre",predragmove:"DS:update:pre",precallback:"DS:end:pre"},k=(t,e)=>{const s=e.DropZones.getTarget(t);return{...t,...s?{dropTarget:s.toObject()}:{}}},H=({sub_name:t,DS:e,PS:s,sub_pubs:i})=>{s.subscribe(t,(t=>i.forEach((s=>$({sub_pub:s,data:t,DS:e})))))},$=({sub_pub:t,data:e,DS:s})=>{const i=t.condition?t.condition(e,s):e;if(i){const r=t.extraData&&t.extraData(e,s)||{};s.publish(t.name,{items:s.SelectedSet.elements,isDragging:s.Interaction.isDragging,...i,...r})}};class R{continue=!1;PubSub;stores;Area;Selector;SelectorArea;SelectableSet;SelectedSet;Selection;Drag;DropZones;Interaction;stopped;constructor(t){this.stopped=!1,this.PubSub=new v({DS:this}),this.stores={},this.stores.SettingsStore=new V({settings:t,PS:this.PubSub}),this.stores.PointerStore=new _({DS:this,PS:this.PubSub}),this.stores.ScrollStore=new L({DS:this,PS:this.PubSub}),this.stores.KeyStore=new D({DS:this,PS:this.PubSub}),this.Area=new n({DS:this,PS:this.PubSub}),this.Selector=new x({DS:this,PS:this.PubSub}),this.SelectorArea=new w({DS:this,PS:this.PubSub}),this.SelectableSet=new E({DS:this,PS:this.PubSub}),this.SelectedSet=new T({DS:this,PS:this.PubSub}),this.Selection=new A({DS:this,PS:this.PubSub}),this.Drag=new u({DS:this,PS:this.PubSub}),this.DropZones=new b({DS:this,PS:this.PubSub}),this.Interaction=new y({DS:this,PS:this.PubSub}),(({PS:t,DS:e})=>{const s={"Selected:added":[{name:"preelementselect"},{name:"elementselect"},{name:"DS:select:pre"},{name:"DS:select"}],"Selected:removed":[{name:"preelementunselect"},{name:"elementunselect"},{name:"DS:unselect:pre"},{name:"DS:unselect"}],"Selectable:added":[{name:"DS:added:pre"},{name:"DS:added"}],"Selectable:removed":[{name:"DS:removed:pre"},{name:"DS:removed"}],"Area:scroll":[{name:"preautoscroll"},{name:"autoscroll"},{name:"DS:scroll:pre"},{name:"DS:scroll"}],"Interaction:start":[{name:"predragstart"},{name:"dragstart"},{name:"DS:start:pre"},{name:"DS:start"}],"Interaction:update":[{name:"predragmove",condition:t=>t.event?t:null},{name:"dragmove",condition:t=>t.event?t:null},{name:"DS:update:pre",condition:t=>t.event?t:null},{name:"DS:update",condition:t=>t.event?t:null}],"Interaction:end":[{name:"precallback",extraData:(t,e)=>k(t,e)},{name:"callback",extraData:(t,e)=>k(t,e)},{name:"DS:end:pre",extraData:(t,e)=>k(t,e)},{name:"DS:end",extraData:(t,e)=>k(t,e)}]};for(const[i,r]of Object.entries(s))H({sub_name:i,sub_pubs:r,DS:e,PS:t})})({DS:this,PS:this.PubSub}),this.PubSub.subscribe("Interaction:end",(()=>this.continue=!1)),this.PubSub.subscribe("DS:end",(({items:t})=>this.continue=!1)),this.start()}static isCollision;subscribe=(t,e)=>{K[t]&&console.warn(`[DragSelect]: The event name "${t}" is deprecated and was/will be removed in a future version. Please use the new event name "${K[t]}" instead.`),this.PubSub.subscribe(t,e)};unsubscribe=(t,e,s)=>this.PubSub.unsubscribe(t,e,s);publish=(t,e)=>this.PubSub.publish(t,e);start=()=>{this.stopped=!1,this.Interaction.init()};stop(t=!0,e=!0,s=!1){s&&this.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.Interaction.stop(),this.Area.stop(),this.Drag.stop(),this.Selector.stop(),this.SelectorArea.stop(t),this.stores.KeyStore.stop(),this.stores.PointerStore.stop(),this.stores.ScrollStore.stop(),t&&this.SelectableSet.clear(),e&&this.SelectedSet.clear(),this.stopped=!0}break=()=>this.continue=!0;setSettings=t=>this.stores.SettingsStore.update({settings:t});getSelection=()=>this.SelectedSet.elements;addSelection(t,e=!1,s=!1){const i=g(t);return this.SelectedSet.addAll(i),s||this.addSelectables(t,!1,!1),e&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}removeSelection(t,e=!1,s=!1){const i=g(t);return this.SelectedSet.deleteAll(i),s&&this.removeSelectables(t,!1,!1),e&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}toggleSelection(t,e=!1,s=!1){return g(t).forEach((i=>this.SelectedSet.has(i)?this.removeSelection(t,e,s):this.addSelection(t,e,s))),e&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}setSelection(t,e=!1,s=!1){return this.clearSelection(),this.addSelection(t,e,s),this.getSelection()}clearSelection(t=!1){return this.SelectedSet.clear(),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}addSelectables(t,e,s){const i=g(t);return this.SelectableSet.addAll(i),e&&this.SelectedSet.addAll(i),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getSelectables=()=>this.SelectableSet.elements;removeSelectables(t,e,s){const i=g(t);return this.SelectableSet.deleteAll(i),e&&this.removeSelection(t),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getInitialCursorPosition=()=>this.stores.PointerStore.initialVal;getCurrentCursorPosition=()=>this.stores.PointerStore.currentVal;getPreviousCursorPosition=()=>this.stores.PointerStore.lastVal;getInitialCursorPositionArea=()=>this.stores.PointerStore.initialValArea;getCurrentCursorPositionArea=()=>this.stores.PointerStore.currentValArea;getPreviousCursorPositionArea=()=>this.stores.PointerStore.lastValArea;isMultiSelect=t=>this.stores.KeyStore.isMultiSelectKeyPressed(t);isDragging=()=>this.Interaction.isDragging;getZoneByCoordinates=t=>this.DropZones.getTarget({coordinates:t})?.toObject();getItemsDroppedByZoneId=t=>this.DropZones.getItemsDroppedById(t);getItemsInsideByZoneId=(t,e)=>this.DropZones.getItemsInsideById(t,e)}R.isCollision=p;export{R as default}; \ No newline at end of file +const e=(e,t)=>{const s=t;window.addEventListener("resize",s),window.addEventListener("scroll",s);const i=new MutationObserver(s),r=new ResizeObserver(s);e.forEach(((e,t)=>{i.observe(e,{childList:0!==t,attributes:!0}),e instanceof Element&&r.observe(e)}));return{observer:i,resizeObserver:r,callback:s,cleanup:()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s),i.disconnect(),r.disconnect()}}},t=(e,t)=>{let s;return(...i)=>{clearTimeout(s),s=setTimeout((()=>{s=void 0,e(...i)}),t)}},s=e=>{const t=(e,s=0)=>{const i=e[s]?.parentNode;return i?(e.push(i),s++,t(e,s)):e};return t([e])},i=({computedStyle:e,node:t})=>{const{position:s}=e;t instanceof Document||("absolute"===s||"relative"===s||"fixed"===s)||(t.style.position="relative")};let r;class n{DS;PS;Settings;_observers;_node;_parentNodes;_computedStyle;_computedBorder;_rect;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this._node=this.Settings.area,this.setArea(this.Settings.area),this.PS.subscribe("Settings:updated:area",(({settings:{area:e}})=>this.setArea(e))),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:end",this.reset)}setArea=e=>{this.reset(),this._node=e,i({computedStyle:this.computedStyle,node:this._node}),setTimeout((()=>{this.PS.publish("Area:modified:pre",{item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{item:this.HTMLNode})}))};init=()=>{this._observers=e(this.parentNodes,t((e=>{this.PS.publish("Area:modified:pre",{event:e,item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{event:e,item:this.HTMLNode})}),60))};reset=()=>{this._computedStyle=void 0,this._rect=void 0,this._computedBorder=void 0,this._parentNodes=void 0};stop=()=>{this._observers?.cleanup(),this.reset()};scroll=(e,t)=>{const s={scroll_directions:e,scroll_multiplier:t};this.PS.publish("Area:scroll:pre",s),((e,t,s=1)=>{if(!t?.length||!e)return;let i=e;if(e instanceof Document&&(r&&(i=r),Number.isFinite(document?.documentElement?.scrollTop))){const e=document.documentElement.scrollTop;document.documentElement.scrollTop+=1,document.documentElement.scrollTop===e?(i=document.body,r=document.body):(document.documentElement.scrollTop=e,i=document.documentElement,r=document.documentElement)}const n=t.includes("top")&&i.scrollTop>0,o=t.includes("bottom")&&i.scrollTop0,a=t.includes("right")&&i.scrollLeft{if(e instanceof Document)return{top:0,left:0,bottom:0,right:0,width:window.innerWidth,height:window.innerHeight};const s=e.getBoundingClientRect();return{top:s.top,left:s.left,bottom:s.bottom,right:s.right,width:(e.clientWidth||s.width)*t,height:(e.clientHeight||s.height)*t}})(this.HTMLNode,this.DS.stores.SettingsStore.s.zoom)}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.HTMLNode)}}const o=({x:e,y:t},s,{x:i,y:r})=>({"+":{x:e+i,y:t+r},"-":{x:e-i,y:t-r},"*":{x:e*i,y:t*r},"/":{x:e/i,y:t/r}}[s]),l=e=>({x:e.left,y:e.top}),a=(e,t=0)=>({left:e.x,top:e.y,right:e.x,bottom:e.y,width:t,height:t}),h=e=>({x:e,y:e}),c=e=>{const t={x:0,y:0},s=window.getComputedStyle(e);if(!s.transform||"none"===s.transform)return t;if(s.transform.indexOf("3d")>=0){const e=s.transform.trim().match(/matrix3d\((.*?)\)/);if(e&&e.length){const s=e[1]?.split(",");t.x=parseInt(s[12])||0,t.y=parseInt(s[13])||0}return t}const i=s.transform.trim().match(/matrix\((.*?)\)/);if(i&&i.length){const e=i[1]?.split(",");t.x=parseInt(e[4])||0,t.y=parseInt(e[5])||0}return t},d=(e,t)=>t?(e=>{const{transform:t}=e.style;if(!t||t.indexOf("translate")<0)return c(e);const s={x:0,y:0},i=t.trim().match(/translate[3dD]*?\(.*?\)/);if(i){const e=i[0]?.split("(");if(e){const t=e[1]?.split(",");s.x=parseInt(t[0])||0,s.y=parseInt(t[1])||0}}return s.x||s.x?s:c(e)})(e):(e=>{const{style:t}=e,s={x:parseInt(t.left)||0,y:parseInt(t.top)||0};if(!s.x&&!s.x){const t=window.getComputedStyle(e);return{x:parseInt(t.left)||0,y:parseInt(t.top)||0}}return s})(e),S=({containerRect:e,selectionRect:t,direction:s,scrollAmount:i})=>{const r={top:e.top-t.top+i.y,left:e.left-t.left+i.x,bottom:e.bottom-t.bottom+i.y,right:e.right-t.right+i.x};return 0===s.x&&0===s.y||(s.y<0&&(s.y=Math.max(s.y,r.top)),s.x<0&&(s.x=Math.max(s.x,r.left)),s.y>0&&(s.y=Math.min(s.y,r.bottom)),s.x>0&&(s.x=Math.min(s.x,r.right)),t.top+=s.y,t.bottom+=s.y,t.left+=s.x,t.right+=s.x),s};class u{_prevCursorPos;_prevScrollPos;_elements=[];_dragKeys;_dragKeysFlat=[];_selectionRect=a(h(0));DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dragKeys",this.assignDragKeys),this.assignDragKeys(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("KeyStore:down",this.keyboardDrag),this.PS.subscribe("KeyStore:up",this.keyboardEnd)}assignDragKeys=()=>{this._dragKeys={up:this.Settings.dragKeys.up.map((e=>e.toLowerCase())),down:this.Settings.dragKeys.down.map((e=>e.toLowerCase())),left:this.Settings.dragKeys.left.map((e=>e.toLowerCase())),right:this.Settings.dragKeys.right.map((e=>e.toLowerCase()))},this._dragKeysFlat=[...this._dragKeys.up,...this._dragKeys.down,...this._dragKeys.left,...this._dragKeys.right]};keyboardDrag=({event:e,key:t})=>{const s=t.toLowerCase();if(!this.Settings.keyboardDrag||!this._dragKeysFlat.includes(s)||!this.DS.SelectedSet.size||!this.Settings.draggability||this.DS.continue)return;const i={event:e,isDragging:!0,isDraggingKeyboard:!0,key:t};this.PS.publish(["Interaction:start:pre","Interaction:start"],i),this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0);let r=(({shiftKey:e,keyboardDragSpeed:t,zoom:s,key:i,dragKeys:r,scrollDiff:n})=>{const o={x:0,y:0},l=e?4*t*s:t*s;return r?.left.includes(i)&&(o.x=n.x||-l),r?.right.includes(i)&&(o.x=n.x||l),r?.up.includes(i)&&(o.y=n.y||-l),r?.down.includes(i)&&(o.y=n.y||l),o})({shiftKey:this.DS.stores.KeyStore.currentValues.includes("shift"),keyboardDragSpeed:this.Settings.keyboardDragSpeed,zoom:this.Settings.zoom,key:s,scrollDiff:this._scrollDiff,dragKeys:this._dragKeys});r=S({direction:r,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(r),this.PS.publish(["Interaction:update:pre","Interaction:update"],i)};keyboardEnd=({event:e,key:t})=>{const s=t.toLowerCase();if(!(this.Settings.keyboardDrag&&this._dragKeysFlat.includes(s)&&this.DS.SelectedSet.size&&this.Settings.draggability))return;const i={event:e,isDragging:this.Settings.draggability,isDraggingKeyboard:!0,key:t};this.PS.publish(["Interaction:end:pre","Interaction:end"],i)};start=({isDragging:e,isDraggingKeyboard:t})=>{e&&!t&&(this._prevCursorPos=void 0,this._prevScrollPos=void 0,this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0))};stop=()=>{this._prevCursorPos=void 0,this._prevScrollPos=void 0,this.handleZIndex(!1),this._elements=[]};update=({isDragging:e,isDraggingKeyboard:t})=>{if(!e||!this._elements.length||t||this.DS.continue)return;let s=o(this._cursorDiff,"+",this._scrollDiff);s=S({direction:s,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(s)};handleZIndex=e=>{this.Settings.useLayers&&this._elements.forEach((t=>t.style.zIndex=`${(parseInt(t.style.zIndex)||0)+(e?9999:-9998)}`))};moveElements=e=>{const{elements:t,direction:s}=this.filterDragElements({elements:this._elements,direction:e});t.forEach((e=>{(({element:e,posDirection:t,useTransform:s})=>{const i=d(e,s);((e,t,s)=>{if(s){const s=e.style.transform;e.style.transform=`translate3d(${t.x}px,${t.y}px,1px) ${s.replace(/translate.*?\)/g,"")}`}else e.style.left=`${t.x}px`,e.style.top=`${t.y}px`})(e,o(i,"+",t),s)})({element:e,posDirection:s,containerRect:this.DS.SelectorArea.rect,useTransform:this.Settings.useTransform})}))};get _cursorDiff(){const e=this.DS.stores.PointerStore.currentVal,t=this._prevCursorPos?o(e,"-",this._prevCursorPos):{x:0,y:0};return this._prevCursorPos=e,t}get _scrollDiff(){const e=this.DS.stores.ScrollStore.currentVal,t=this._prevScrollPos?o(e,"-",this._prevScrollPos):{x:0,y:0};return this._prevScrollPos=e,t}filterDragElements=({elements:e,direction:t})=>({elements:e,direction:t})}const p=(e,t,s=0)=>{if(!e||!t)return!1;let i=e;if(s>0){const t=(e.right-e.left)*s,r=(e.bottom-e.top)*s;i={left:e.left+t,right:e.right-t,top:e.top+r,bottom:e.bottom-r}}return i.leftt.left&&i.topt.top},g=e=>e?Array.isArray(e)||"function"==typeof e[Symbol.iterator]?[...new Set([...e])]:[e]:[];class m{id;element;_droppables;_rect;_observers;_timeout;_itemsDropped=[];_itemsInside;DS;PS;Settings;isDestroyed=!1;_parentNodes;constructor({DS:s,PS:i,id:r,element:n,droppables:o}){this.DS=s,this.PS=i,this.Settings=this.DS.stores.SettingsStore.s,this.id=r,this.element=n,o&&(this.droppables=g(o)),this.element.classList.add(`${this.Settings.dropZoneClass}`),this.PS.subscribe("Settings:updated:dropZoneClass",(({settings:e})=>{this.element&&(this.element.classList.remove(e["dropZoneClass:pre"]),this.element.classList.add(e.dropZoneClass))})),this._observers=e(this.parentNodes,t((()=>this._rect=void 0),this.Settings.refreshMemoryRate)),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop)}setReadyClasses=e=>{if(this.isDestroyed)return;const t=this.droppables.filter((e=>this.DS.SelectedSet.has(e)));t.length&&(t.forEach((t=>{t.classList[e](`${this.Settings.droppableClass}`),t.classList[e](`${this.Settings.droppableClass}-${this.id}`)})),this.element.classList[e](`${this.Settings.dropZoneReadyClass}`))};handleNoDrop=()=>{this.isDestroyed||(this.DS.SelectedSet.forEach((e=>{e.classList.remove(this.Settings.droppedTargetClass),e.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped=this._itemsDropped.filter((e=>!this.DS.SelectedSet.has(e))),this._itemsDropped?.length||this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`))};handleDrop=()=>{this.isDestroyed||(this._itemsDropped=[...new Set([...this._itemsDropped,...this.droppables?.filter((e=>this.DS.SelectedSet.has(e)))])],this._itemsDropped?.forEach((e=>{e.classList.add(`${this.Settings.droppedTargetClass}`),e.classList.add(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped?.length&&this.element.classList.add(`${this.Settings.dropZoneTargetClass}`))};handleItemsInsideClasses=()=>{let e=!1;this.droppables.forEach((t=>{this.itemsInside?.includes(t)?(t.classList.add(`${this.Settings.droppedInsideClass}`),t.classList.add(`${this.Settings.droppedInsideClass}-${this.id}`),e=!0):(t.classList.remove(`${this.Settings.droppedInsideClass}-${this.id}`),t.className.includes(`${this.Settings.droppedInsideClass}-`)||t.classList.remove(`${this.Settings.droppedInsideClass}`))})),e?this.element.classList.add(`${this.Settings.dropZoneInsideClass}`):this.element.classList.remove(`${this.Settings.dropZoneInsideClass}`)};start=({isDragging:e})=>{e&&!this.isDestroyed&&this.setReadyClasses("add")};stop=({isDragging:e})=>{e&&!this.isDestroyed&&(this.setReadyClasses("remove"),this.handleItemsInsideClasses())};destroy(){this._observers?.cleanup(),this.element.classList.remove(`${this.Settings.dropZoneClass}`),this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`),this.element.classList.remove(`${this.Settings.dropZoneReadyClass}`),this.droppables.forEach((e=>{e.classList.remove(`${this.Settings.droppedTargetClass}`),e.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`),e.classList.remove(`${this.Settings.droppableClass}`),e.classList.remove(`${this.Settings.droppableClass}-${this.id}`)})),this.PS.unsubscribe("Interaction:start",this.start),this.PS.unsubscribe("Interaction:end",this.stop),this.isDestroyed=!0}toObject=()=>({id:this.id,element:this.element,droppables:this.droppables,itemsDropped:this.itemsDropped,itemsInside:this.itemsInside});get rect(){if(!this.isDestroyed)return this._rect?this._rect:this._rect=this.element.getBoundingClientRect()}get itemsDropped(){if(!this.isDestroyed)return this._itemsDropped}get itemsInside(){if(!this.isDestroyed)return this._itemsInside||(this._itemsInside=this.droppables.flatMap((e=>{const t=this.DS.SelectableSet.rects.get(e);return this.rect&&p(t,this.rect,this.Settings.dropInsideThreshold)?[e]:[]})),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._itemsInside=void 0),this.Settings.refreshMemoryRate)),this._itemsInside}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.element)}get droppables(){return this._droppables?this._droppables:this.DS.SelectableSet.elements}set droppables(e){this._droppables=e}}class b{_zoneByElement=new Map;_zoneById=new Map;_zonesByDroppable=new Map;_zones;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dropZones",(({settings:e})=>this.setDropZones(e))),this.setDropZones({dropZones:this.Settings.dropZones}),this.PS.subscribe("Interaction:end",this.stop)}setDropZones=({dropZones:e})=>{e&&(this._zones&&this._zones.forEach((e=>e.destroy())),this._zones=e.map((e=>new m({DS:this.DS,PS:this.PS,...e}))),this._zones.forEach((e=>{this._zoneByElement.set(e.element,e),this._zoneById.set(e.id,e),e.droppables.forEach((t=>{const s=this._zonesByDroppable.get(t);if(!s?.length)return this._zonesByDroppable.set(t,[e]);this._zonesByDroppable.set(t,[...new Set([...s,e])])}))})))};_handleDrops=e=>{this._zones?.forEach((t=>{t!==e&&t.handleNoDrop()})),e&&e.handleDrop()};_getZoneByElementsFromPoint=(e,{x:t,y:s})=>{for(let i=0,r=e.length;i{if(!e)return;const i=this.getTarget({isDraggingKeyboard:t,event:s});this._handleDrops(i)};getItemsDroppedById=e=>{const t=this._zoneById.get(e);return t?t.itemsDropped:console.warn(`[DragSelect] No zone found (id: ${e})`)};getItemsInsideById=(e,t)=>{const s=this._zoneById.get(e);return s?(t&&s.handleItemsInsideClasses(),s.itemsInside):console.warn(`[DragSelect] No zone found (id: ${e})`)};getKeyboardItemCenter=(e,t)=>{if(!e||!t)return;const s=t.target?.getBoundingClientRect();return{x:s.left+s.width/2,y:s.top+s.height/2}};getTarget=({coordinates:e,isDraggingKeyboard:t,event:s})=>{if(!this._zones?.length)return;let i;!e&&t&&s&&(i=this.getKeyboardItemCenter(t,s));const r=e?.x||i?.x||this.DS.stores.PointerStore.currentVal.x,n=e?.y||i?.y||this.DS.stores.PointerStore.currentVal.y,o=document.elementsFromPoint(r,n);return this._getZoneByElementsFromPoint(o,{x:r,y:n})}}class y{isInteracting;isDragging=!1;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:area",(({settings:e})=>{this.removeAreaEventListeners(e["area:pre"]),this.setAreaEventListeners(e.area)})),this.PS.subscribe("PointerStore:updated",(({event:e})=>this.update({event:e}))),this.PS.subscribe("Selectable:click",this.onClick),this.PS.subscribe("Selectable:pointer",(({event:e})=>this.start(e))),this.PS.subscribe("Interaction:start:pre",(({event:e})=>this._start(e))),this.PS.subscribe("Interaction:init:pre",this._init),this.PS.subscribe("Interaction:end:pre",(({event:e})=>this._reset(e))),this.PS.subscribe("Area:scroll",this.update)}init=()=>this.PS.publish("Interaction:init:pre",{init:!0});_init=()=>{this.stop(),this.setAreaEventListeners(),this.PS.publish("Interaction:init",{init:!0})};_canInteract(e){const t="clientX"in e&&0===e.clientX&&0===e.clientY&&0===e.detail&&e.target;return!("button"in e&&2===e.button||this.isInteracting||e.target&&!this.DS.SelectorArea.isInside(e.target)||!t&&!this.DS.SelectorArea.isClicked(e))}start=e=>this.PS.publish("Interaction:start:pre",{event:e,isDragging:this.isDragging});_start=e=>{"touchstart"===e.type&&e.preventDefault(),this._canInteract(e)&&(this.isInteracting=!0,this.isDragging=this.isDragEvent(e),this.PS.publish("Interaction:start",{event:e,isDragging:this.isDragging}),this.setDocEventListeners())};isDragEvent=e=>{let t=null;return e.target&&"closest"in e.target&&(t=e.target.closest(`.${this.Settings.selectableClass}`)),!(!this.Settings.draggability||this.DS.stores.KeyStore.isMultiSelectKeyPressed(e)||!t)&&(this.Settings.immediateDrag&&(this.DS.SelectedSet.size?this.DS.SelectedSet.has(t)||(this.DS.SelectedSet.clear(),this.DS.SelectedSet.add(t)):this.DS.SelectedSet.add(t)),!!this.DS.SelectedSet.has(t))};onClick=({event:e})=>{if(!this._canInteract(e))return;if(e.detail>0)return;const{stores:{PointerStore:t,KeyStore:s},SelectableSet:i,SelectedSet:r}=this.DS;t.start(e);const n=e.target;n&&!i.has(n)||(s.isMultiSelectKeyPressed(e)||r.clear(),n&&r.toggle(n),this.reset(e))};stop=(e=this.DS.Area.HTMLNode)=>{this.removeAreaEventListeners(e),this.removeDocEventListeners()};update=({event:e,scroll_directions:t,scroll_multiplier:s})=>{this.isInteracting&&this.PS.publish(["Interaction:update:pre","Interaction:update"],{event:e,scroll_directions:t,scroll_multiplier:s,isDragging:this.isDragging})};reset=e=>this.PS.publish("Interaction:end:pre",{event:e,isDragging:this.isDragging});_reset=e=>{const{isDragging:t}=this;this.isInteracting=!1,this.isDragging=!1,this.removeDocEventListeners(),this.PS.publish("Interaction:end",{event:e,isDragging:t})};setAreaEventListeners=(e=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?e.addEventListener("pointerdown",this.start,{passive:!1}):e.addEventListener("mousedown",this.start),e.addEventListener("touchstart",this.start,{passive:!1})};removeAreaEventListeners=(e=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?e.removeEventListener("pointerdown",this.start,{passive:!1}):e.removeEventListener("mousedown",this.start),e.removeEventListener("touchstart",this.start,{passive:!1})};setDocEventListeners=()=>{this.Settings.usePointerEvents?(document.addEventListener("pointerup",this.reset),document.addEventListener("pointercancel",this.reset)):document.addEventListener("mouseup",this.reset),document.addEventListener("touchend",this.reset)};removeDocEventListeners=()=>{this.Settings.usePointerEvents?(document.removeEventListener("pointerup",this.reset),document.removeEventListener("pointercancel",this.reset)):document.removeEventListener("mouseup",this.reset),document.removeEventListener("touchend",this.reset)}}class D{_currentValues=new Set;_keyMapping={control:"ctrlKey",shift:"shiftKey",meta:"metaKey"};DS;PS;settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init)}init=()=>{document.addEventListener("keydown",this.keydown),document.addEventListener("keyup",this.keyup),window.addEventListener("blur",this.reset)};keydown=e=>{if(!e.key?.toLocaleLowerCase)return;const t=e.key.toLowerCase();this.PS.publish("KeyStore:down:pre",{event:e,key:t}),this._currentValues.add(t),this.PS.publish("KeyStore:down",{event:e,key:t})};keyup=e=>{if(!e.key?.toLocaleLowerCase)return;const t=e.key.toLowerCase();this.PS.publish("KeyStore:up:pre",{event:e,key:t}),this._currentValues.delete(t),this.PS.publish("KeyStore:up",{event:e,key:t})};stop=()=>{document.removeEventListener("keydown",this.keydown),document.removeEventListener("keyup",this.reset),window.removeEventListener("blur",this.reset),this.reset()};reset=()=>this._currentValues.clear();isMultiSelectKeyPressed(e){if(this.settings.multiSelectMode)return!0;const t=this.settings.multiSelectKeys?.map((e=>e.toLocaleLowerCase()))??[];return!!this.currentValues.some((e=>t.includes(e)))||!(!e||!t.some((t=>e[this._keyMapping[t]])))}get currentValues(){return Array.from(this._currentValues.values())}}class _{_isMouseInteraction=!1;_initialValArea={x:0,y:0};_currentValArea={x:0,y:0};_lastValArea={x:0,y:0};_initialVal={x:0,y:0};_currentVal={x:0,y:0};_lastVal={x:0,y:0};_lastTouch;DS;PS;settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({event:e})=>this.start(e))),this.PS.subscribe("Interaction:end",(({event:e})=>this.reset(e)))}init=()=>{this.settings.usePointerEvents?document.addEventListener("pointermove",this.update,{passive:!1}):document.addEventListener("mousemove",this.update),document.addEventListener("touchmove",this.update,{passive:!1})};start(e){e&&(this._isMouseInteraction=!0,this.currentVal=this.initialVal=this.getPointerPosition(e))}getPointerPosition=e=>(({event:e})=>({x:e.clientX,y:e.clientY}))({event:this._normalizedEvent(e)});update=e=>{e&&(this.PS.publish("PointerStore:updated:pre",{event:e}),this.currentVal=this.getPointerPosition(e),this._isMouseInteraction&&this.PS.publish("PointerStore:updated",{event:e}))};stop=()=>{this.settings.usePointerEvents?document.removeEventListener("pointermove",this.update,{passive:!1}):document.removeEventListener("mousemove",this.update),document.removeEventListener("touchmove",this.update,{passive:!1}),this.reset()};reset=e=>{this.currentVal=this.lastVal=this.getPointerPosition(e),setTimeout((()=>this._isMouseInteraction=!1),100)};_normalizedEvent(e){return!e||e instanceof KeyboardEvent?{clientX:0,clientY:0}:"touches"in e?("touchend"!==e.type&&(this._lastTouch=e),this._lastTouch?.touches[0]||e.touches[0]):e}get initialValArea(){return this._initialValArea?this._initialValArea:{x:0,y:0}}get currentValArea(){return this._currentValArea?this._currentValArea:{x:0,y:0}}get lastValArea(){return this._lastValArea?this._lastValArea:{x:0,y:0}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal?this._currentVal:{x:0,y:0}}get lastVal(){return this._lastVal?this._lastVal:{x:0,y:0}}set initialVal(e){this._initialVal=e,this._initialValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set currentVal(e){this._currentVal=e,this._currentValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set lastVal(e){this._lastVal=e,this._lastValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}}class v{subscribers={};DS;constructor({DS:e}){this.DS=e}subscribe=(e,t)=>{Array.isArray(this.subscribers[e])||(this.subscribers[e]=[]);const s=this.subscribers[e];return s.push(t),s.length-1};unsubscribe=(e,t,s)=>{const i=s??this.subscribers[e]?.findIndex((e=>e===t));this.subscribers[e]?.splice(Number(i),1)};publish=(e,t)=>{Array.isArray(e)?e.forEach((e=>this._publish(e,t))):this._publish(e,t)};_publish=(e,t)=>{const s=this.subscribers[e]??[];e.includes(":pre")?this._handlePrePublish(s,t):this._handlePublish(s,t)};_handlePublish=(e,t)=>{for(let s=0,i=e.length;s{let s=e.length;for(;s--;){if(this.DS.stopped)return;e[s]?.(t)}}}const P=()=>({y:document.body?.scrollTop||document.documentElement?.scrollTop||0,x:document.body?.scrollLeft||document.documentElement?.scrollLeft||0}),f=e=>!e||e instanceof Document?P():{x:e.scrollLeft>=0?e.scrollLeft:P().x,y:e.scrollTop>=0?e.scrollTop:P().y},I=e=>{const t=e.scrollTop,s=Boolean(e.scrollTop=1);return e.scrollTop=t,s};class L{_initialVal={x:0,y:0};_currentVal={x:0,y:0};_canScroll;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Area:modified",(()=>{this.stop(),this.init()})),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(()=>this.start())),this.PS.subscribe("Interaction:end",(()=>this.reset()))}init=()=>this.addListeners();addListeners=()=>this.DS.Area.HTMLNode.addEventListener("scroll",this.update);removeListeners=()=>this.DS.Area.HTMLNode.removeEventListener("scroll",this.update);start=()=>{this._currentVal=this._initialVal=f(this.DS.Area.HTMLNode)};update=()=>this._currentVal=f(this.DS.Area.HTMLNode);stop=()=>{this.reset(),this.removeListeners()};reset=()=>{this._initialVal={x:0,y:0},this._canScroll=void 0};get canScroll(){return"boolean"==typeof this._canScroll?this._canScroll:this._canScroll=(e=>{const t=f(e);return!(!t.x&&!t.y)||(e instanceof Document?e.body?I(e.body):I(e.documentElement):I(e))})(this.DS.Area.HTMLNode)}get scrollAmount(){const e=o(this.currentVal,"-",this.initialVal),t=h(this.Settings.zoom),s=o(o(e,"*",t),"-",e);return{x:e.x+s.x,y:e.y+s.y}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal||(this._currentVal=f(this.DS.Area.HTMLNode)),this._currentVal}}class E extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){super(),this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Settings:updated:selectables",(()=>{this.clear(),this.init()})),this.PS.subscribe("Settings:updated:selectableClass",(({settings:e})=>{this.forEach((t=>{t.classList.remove(e["selectableClass:pre"]),t.classList.add(e.selectableClass)}))}))}init=()=>g(this.Settings.selectables).forEach((e=>this.add(e)));add(e){if(!e||super.has(e))return this;const t={items:this.elements,item:e};return this.PS.publish("Selectable:added:pre",t),e.classList.add(this.Settings.selectableClass),e.addEventListener("click",this._onClick),this.Settings.usePointerEvents?e.addEventListener("pointerdown",this._onPointer,{passive:!1}):e.addEventListener("mousedown",this._onPointer),e.addEventListener("touchstart",this._onPointer,{passive:!1}),this.Settings.draggability&&!this.Settings.useTransform&&i({computedStyle:window.getComputedStyle(e),node:e}),this.PS.publish("Selectable:added",t),super.add(e)}delete(e){if(!e||!super.has(e))return!0;const t={items:this.elements,item:e};return this.PS.publish("Selectable:removed:pre",t),e.classList.remove(this.Settings.selectableClass),e.classList.remove(this.Settings.hoverClass),e.removeEventListener("click",this._onClick),this.Settings.usePointerEvents?e.removeEventListener("pointerdown",this._onPointer,{passive:!1}):e.removeEventListener("mousedown",this._onPointer),e.removeEventListener("touchstart",this._onPointer,{passive:!1}),this.PS.publish("Selectable:removed",t),super.delete(e)}clear=()=>this.forEach((e=>this.delete(e)));_onClick=e=>this.PS.publish(["Selectable:click:pre","Selectable:click"],{event:e});_onPointer=e=>this.PS.publish(["Selectable:pointer:pre","Selectable:pointer"],{event:e});addAll=e=>e.forEach((e=>this.add(e)));deleteAll=e=>e.forEach((e=>this.delete(e)));getElementRect=e=>this._rects?this._rects.get(e):e.getBoundingClientRect();get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((e=>this._rects?.set(e,e.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}class T extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){super(),this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s}add(e){if(!e||super.has(e))return this;const t={items:this.elements,item:e};return this.PS.publish("Selected:added:pre",t),super.add(e),e.classList.add(this.Settings.selectedClass),this.Settings.useLayers&&(e.style.zIndex=`${(parseInt(e.style.zIndex)||0)+1}`),this.PS.publish("Selected:added",t),this}delete(e){if(!e||!super.has(e))return!0;const t={items:this.elements,item:e};this.PS.publish("Selected:removed:pre",t);const s=super.delete(e);return e.classList.remove(this.Settings.selectedClass),this.Settings.useLayers&&(e.style.zIndex=""+((parseInt(e.style.zIndex)||0)-1)),this.PS.publish("Selected:removed",t),s}clear=()=>this.forEach((e=>this.delete(e)));toggle(e){return this.has(e)?this.delete(e):this.add(e),e}addAll=e=>e.forEach((e=>this.add(e)));deleteAll=e=>e.forEach((e=>this.delete(e)));get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((e=>this._rects?.set(e,e.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}var C=(e,t)=>{t.left&&(e.style.left=`${t.left}px`),t.top&&(e.style.top=`${t.top}px`),t.width&&(e.style.width=`${t.width}px`),t.height&&(e.style.height=`${t.height}px`)};class x{_rect;DS;PS;Settings;HTMLNode;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=this.Settings.selector,this.PS.subscribe("Settings:updated:selectorClass",(({settings:e})=>{this.HTMLNode.classList.remove(e["selectorClass:pre"]),this.HTMLNode.classList.add(e.selectorClass)})),this.PS.subscribe("Settings:updated:selector",this.attachSelector),this.PS.subscribe("Settings:updated:customStyles",this.attachSelector),this.attachSelector(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("Interaction:end",this.stop)}attachSelector=()=>{this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.removeChild(this.HTMLNode),this.HTMLNode=this.Settings.selector||(e=>{const t=document.createElement("div");return t.style.position="absolute",e||(t.style.background="rgba(0, 175, 255, 0.2)",t.style.border="1px solid rgba(0, 175, 255, 0.8)",t.style.display="none",t.style.pointerEvents="none"),t})(this.Settings.customStyles),this.HTMLNode.classList.add(this.Settings.selectorClass),this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.appendChild(this.HTMLNode)};start=({isDragging:e})=>{if(e)return;const{stores:{PointerStore:t}}=this.DS,s=t.initialValArea;C(this.HTMLNode,a(s,1)),this.HTMLNode.style.display="block",this._rect=void 0};stop=()=>{this.HTMLNode.style.width="0",this.HTMLNode.style.height="0",this.HTMLNode.style.display="none"};update=({isDragging:e})=>{if(e||this.DS.continue)return;const{stores:{ScrollStore:t,PointerStore:s}}=this.DS,i=(({scrollAmount:e,initialPointerPos:t,pointerPos:s})=>{const i={};return s.x>t.x-e.x?(i.left=t.x-e.x,i.width=s.x-t.x+e.x):(i.left=s.x,i.width=t.x-s.x-e.x),s.y>t.y-e.y?(i.top=t.y-e.y,i.height=s.y-t.y+e.y):(i.top=s.y,i.height=t.y-s.y-e.y),i})({scrollAmount:t.scrollAmount,initialPointerPos:s.initialValArea,pointerPos:s.currentValArea});C(this.HTMLNode,i),this._rect=void 0};get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}class A{_prevSelectedSet=new Set;_boundingRect;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update)}_storePrevious(e){const{stores:{KeyStore:t},SelectedSet:s}=this.DS;t.isMultiSelectKeyPressed(e)?this._prevSelectedSet=new Set(s):this._prevSelectedSet=new Set}start=({event:e,isDragging:t})=>{t||(this._storePrevious(e),this._handleInsideSelection(!0,e))};update=({isDragging:e})=>{e||this.DS.continue||this._handleInsideSelection()};_handleInsideSelection=(e,t)=>{const{SelectableSet:s,SelectorArea:i,Selector:r}=this.DS,n=this.DS.stores.KeyStore.isMultiSelectKeyPressed(t)&&this.Settings.multiSelectToggling,o=this.Settings.selectionThreshold,l=s.rects,a=r.rect,h=new Map,c=new Map;for(const[e,t]of l)i.isInside(e,t)&&(p(t,a,o)?h.set(e,t):c.set(e,t));if(this.DS.continue)return;const{select:d,unselect:S}=this.filterSelected({select:h,unselect:c,selectorRect:a});d.forEach(((t,s)=>(({element:e,force:t,multiSelectionToggle:s,SelectedSet:i,hoverClassName:r})=>{e.classList.contains(r)&&!t||(i.has(e)?s&&i.delete(e):i.add(e),e.classList.add(r))})({element:s,force:e,multiSelectionToggle:n,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass}))),S.forEach(((t,s)=>(({element:e,force:t,SelectedSet:s,PrevSelectedSet:i,hoverClassName:r})=>{if(!e.classList.contains(r)&&!t)return;const n=s.has(e),o=i.has(e);n&&!o?s.delete(e):!n&&o&&s.add(e),e.classList.remove(r)})({element:s,force:e,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass,PrevSelectedSet:this._prevSelectedSet})))};get boundingRect(){return this._boundingRect||(this._boundingRect=(e=>{const t={top:Number.POSITIVE_INFINITY,left:Number.POSITIVE_INFINITY,bottom:Number.NEGATIVE_INFINITY,right:Number.NEGATIVE_INFINITY,width:Number.NEGATIVE_INFINITY,height:Number.NEGATIVE_INFINITY};return e.rects.forEach((e=>{t.top=Math.min(t.top,e.top||t.top),t.left=Math.min(t.left,e.left||t.left),t.bottom=Math.max(t.bottom,e.bottom||t.bottom),t.right=Math.max(t.right,e.right||t.right)})),t.height=t.bottom-t.top,t.width=t.right-t.left,t})(this.DS.SelectedSet),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._boundingRect=void 0),this.Settings.refreshMemoryRate)),this._boundingRect}filterSelected=({select:e,unselect:t,selectorRect:s})=>({select:e,unselect:t})}class w{_scrollInterval;_rect;currentEdges=[];DS;PS;Settings;HTMLNode;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=(()=>{const e=document.createElement("div");return e.style.position="fixed",e.style.overflow="hidden",e.style.pointerEvents="none",e.style.zIndex="999999999999999999",e})(),this.PS.subscribe("Settings:updated:selectorAreaClass",(({settings:e})=>{this.HTMLNode.classList.remove(e["selectorAreaClass:pre"]),this.HTMLNode.classList.add(e.selectorAreaClass)})),this.HTMLNode.classList.add(this.Settings.selectorAreaClass),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({isDraggingKeyboard:e})=>this.startAutoScroll({isDraggingKeyboard:e}))),this.PS.subscribe("Interaction:end",(()=>{this.updatePos(),this.stopAutoScroll()}))}init=()=>{this.applyElements("append"),this.updatePos()};applyElements=e=>{const t=document.body?"body":"documentElement",s=`${e}Child`;this.HTMLNode[s](this.DS.Selector.HTMLNode),document[t][s](this.HTMLNode)};updatePos=()=>{this._rect=void 0;const e=this.DS.Area.rect,t=this.DS.Area.computedBorder,{style:s}=this.HTMLNode,i=`${e.top+t.top}px`,r=`${e.left+t.left}px`,n=`${e.width}px`,o=`${e.height}px`;s.top!==i&&(s.top=i),s.left!==r&&(s.left=r),s.width!==n&&(s.width=n),s.height!==o&&(s.height=o)};stop=e=>{this.stopAutoScroll(),e&&this.applyElements("remove")};startAutoScroll=({isDraggingKeyboard:e})=>{e||(this.currentEdges=[],this._scrollInterval=setInterval((()=>this.handleAutoScroll()),16))};handleAutoScroll=()=>{if(this.DS.continue)return;const{stores:{PointerStore:e},Area:t}=this.DS;this.currentEdges=(({elementRect:e,containerRect:t,tolerance:s={x:0,y:0}})=>{const i=[];return e.top-s.yt.bottom&&i.push("bottom"),e.right+s.y>t.right&&i.push("right"),i})({elementRect:a(e.currentVal),containerRect:this.rect,tolerance:this.Settings.overflowTolerance}),this.currentEdges.length&&t.scroll(this.currentEdges,this.Settings.autoScrollSpeed)};stopAutoScroll=()=>{this.currentEdges=[],clearInterval(this._scrollInterval)};isInside=(e,t)=>!(!this.DS.Area.HTMLNode.contains(e)||!this.DS.stores.ScrollStore.canScroll)||p(this.rect,t||e.getBoundingClientRect());isClicked(e){const{stores:{PointerStore:t}}=this.DS,s=e?t.getPointerPosition(e):t.initialVal;return p({left:s.x,top:s.y,right:s.x,bottom:s.y},this.rect)}get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}const N=(e,t)=>console.warn(`[DragSelect] TypeIssue: setting "${e}" is not of type "${t}".`),M=(e,t,s,i)=>{if(void 0===t)return s?{[e]:i}:{};if(null===t)return{[e]:null};let r=!0,n=!1;const o="string"==typeof i;o&&(r="string"==typeof t||t instanceof String),o&&!r&&(n=!0,N(e,"string"));const l=!Number.isNaN(i)&&"number"==typeof i;l&&(r=!Number.isNaN(t)&&"number"==typeof t),l&&!r&&(n=!0,N(e,"number"));const a="[object Object]"===Object.prototype.toString.call(i);a&&(r="[object Object]"===Object.prototype.toString.call(t)),a&&!r&&(n=!0,N(e,"object"));const h="boolean"==typeof i;h&&(r="boolean"==typeof t),h&&!r&&(n=!0,N(e,"boolean"));const c=Array.isArray(i);c&&(r=Array.isArray(t)),c&&!r&&(n=!0,N(e,"array"));const d=n||s;return"dragKeys"===e&&r?{[e]:Object.assign(i,t)}:"dragKeys"!==e||r?("dropZones"===e&&r&&Array.isArray(t)&&new Set(t.map((e=>e.id))).size!==t.length&&console.warn('[DragSelect] UniqueConstraintsIssue: setting "dropZones" contains duplicate ids.'),r?{[e]:t}:d?{[e]:i}:{}):d?{[e]:i}:{}};class V{_settings={};s={};PS;constructor({PS:e,settings:t}){this.PS=e,this.update({settings:t,init:!0})}update=({settings:e,init:t})=>{this.PS.publish("Settings:updated:pre",{settings:this._settings,"settings:init":Boolean(t),"settings:new":e}),this._update({settings:e,init:t})};_update=({settings:e={},init:t=!1})=>{const s=((e,t)=>({...M("area",e.area,t,document),...M("selectables",e.selectables,t,null),...M("autoScrollSpeed",e.autoScrollSpeed,t,5),...M("overflowTolerance",e.overflowTolerance,t,{x:25,y:25}),...M("zoom",e.zoom,t,1),...M("customStyles",e.customStyles,t,!1),...M("multiSelectMode",e.multiSelectMode,t,!1),...M("multiSelectToggling",e.multiSelectToggling,t,!0),...M("multiSelectKeys",e.multiSelectKeys,t,["Control","Shift","Meta"]),...M("selector",e.selector,t,null),...M("selectionThreshold",e.selectionThreshold,t,0),...M("draggability",e.draggability,t,!0),...M("immediateDrag",e.immediateDrag,t,!0),...M("keyboardDrag",e.keyboardDrag,t,!0),...M("dragKeys",e.dragKeys,t,{up:["ArrowUp"],down:["ArrowDown"],left:["ArrowLeft"],right:["ArrowRight"]}),...M("keyboardDragSpeed",e.keyboardDragSpeed,t,10),...M("useTransform",e.useTransform,t,!0),...M("refreshMemoryRate",e.refreshMemoryRate,t,80),...M("dropZones",e.dropZones,t,[]),...M("dropInsideThreshold",e.dropInsideThreshold,t,1),...M("dropTargetThreshold",e.dropTargetThreshold,t,0),...M("usePointerEvents",e.usePointerEvents,t,!1),...M("hoverClass",e.hoverClass,t,"ds-hover"),...M("selectableClass",e.selectableClass,t,"ds-selectable"),...M("selectedClass",e.selectedClass,t,"ds-selected"),...M("selectorClass",e.selectorClass,t,"ds-selector"),...M("selectorAreaClass",e.selectorAreaClass,t,"ds-selector-area"),...M("droppedTargetClass",e.droppedTargetClass,t,"ds-dropped-target"),...M("droppedInsideClass",e.droppedInsideClass,t,"ds-dropped-inside"),...M("droppableClass",e.droppableClass,t,"ds-droppable"),...M("dropZoneClass",e.dropZoneClass,t,"ds-dropzone"),...M("dropZoneReadyClass",e.dropZoneReadyClass,t,"ds-dropzone-ready"),...M("dropZoneTargetClass",e.dropZoneTargetClass,t,"ds-dropzone-target"),...M("dropZoneInsideClass",e.dropZoneInsideClass,t,"ds-dropzone-inside"),...M("useLayers",e.useLayers,t,!0)}))(e,t);for(const[i,r]of Object.entries(s))((s,i)=>{s in this._settings||Object.defineProperty(this.s,s,{get:()=>this._settings[s],set:e=>this.update({settings:{[s]:e}})}),this._settings[`${s}:pre`]=this._settings[s],this._settings[s]=i;const r={settings:this._settings,"settings:init":t,"settings:new":e};this.PS.publish("Settings:updated",r),this.PS.publish(`Settings:updated:${s}`,r)})(i,r)}}const K={elementselect:"DS:select",elementunselect:"DS:unselect",autoscroll:"DS:scroll",dragstart:"DS:start",dragmove:"DS:update",callback:"DS:end",preelementselect:"DS:select:pre",preelementunselect:"DS:unselect:pre",preautoscroll:"DS:scroll:pre",predragstart:"DS:start:pre",predragmove:"DS:update:pre",precallback:"DS:end:pre"},k=(e,t)=>{const s=t.DropZones.getTarget(e);return{...e,...s?{dropTarget:s.toObject()}:{}}},H=({sub_name:e,DS:t,PS:s,sub_pubs:i})=>{s.subscribe(e,(e=>i.forEach((s=>$({sub_pub:s,data:e,DS:t})))))},$=({sub_pub:e,data:t,DS:s})=>{const i=e.condition?e.condition(t,s):t;if(i){const r=e.extraData&&e.extraData(t,s)||{};s.publish(e.name,{items:s.SelectedSet.elements,isDragging:s.Interaction.isDragging,...i,...r})}};class R{continue=!1;PubSub;stores;Area;Selector;SelectorArea;SelectableSet;SelectedSet;Selection;Drag;DropZones;Interaction;stopped;constructor(e){this.stopped=!1,this.PubSub=new v({DS:this}),this.stores={},this.stores.SettingsStore=new V({settings:e,PS:this.PubSub}),this.stores.PointerStore=new _({DS:this,PS:this.PubSub}),this.stores.ScrollStore=new L({DS:this,PS:this.PubSub}),this.stores.KeyStore=new D({DS:this,PS:this.PubSub}),this.Area=new n({DS:this,PS:this.PubSub}),this.Selector=new x({DS:this,PS:this.PubSub}),this.SelectorArea=new w({DS:this,PS:this.PubSub}),this.SelectableSet=new E({DS:this,PS:this.PubSub}),this.SelectedSet=new T({DS:this,PS:this.PubSub}),this.Selection=new A({DS:this,PS:this.PubSub}),this.Drag=new u({DS:this,PS:this.PubSub}),this.DropZones=new b({DS:this,PS:this.PubSub}),this.Interaction=new y({DS:this,PS:this.PubSub}),(({PS:e,DS:t})=>{const s={"Selected:added":[{name:"preelementselect"},{name:"elementselect"},{name:"DS:select:pre"},{name:"DS:select"}],"Selected:removed":[{name:"preelementunselect"},{name:"elementunselect"},{name:"DS:unselect:pre"},{name:"DS:unselect"}],"Selectable:added":[{name:"DS:added:pre"},{name:"DS:added"}],"Selectable:removed":[{name:"DS:removed:pre"},{name:"DS:removed"}],"Area:scroll":[{name:"preautoscroll"},{name:"autoscroll"},{name:"DS:scroll:pre"},{name:"DS:scroll"}],"Interaction:start":[{name:"predragstart"},{name:"dragstart"},{name:"DS:start:pre"},{name:"DS:start"}],"Interaction:update":[{name:"predragmove",condition:e=>e.event?e:null},{name:"dragmove",condition:e=>e.event?e:null},{name:"DS:update:pre",condition:e=>e.event?e:null},{name:"DS:update",condition:e=>e.event?e:null}],"Interaction:end":[{name:"precallback",extraData:(e,t)=>k(e,t)},{name:"callback",extraData:(e,t)=>k(e,t)},{name:"DS:end:pre",extraData:(e,t)=>k(e,t)},{name:"DS:end",extraData:(e,t)=>k(e,t)}]};for(const[i,r]of Object.entries(s))H({sub_name:i,sub_pubs:r,DS:t,PS:e})})({DS:this,PS:this.PubSub}),this.PubSub.subscribe("Interaction:end",(()=>this.continue=!1)),this.PubSub.subscribe("DS:end",(({items:e})=>this.continue=!1)),this.start()}static isCollision;subscribe=(e,t)=>{K[e]&&console.warn(`[DragSelect]: The event name "${e}" is deprecated and was/will be removed in a future version. Please use the new event name "${K[e]}" instead.`),this.PubSub.subscribe(e,t)};unsubscribe=(e,t,s)=>this.PubSub.unsubscribe(e,t,s);publish=(e,t)=>this.PubSub.publish(e,t);start=()=>{this.stopped=!1,this.Interaction.init()};stop(e=!0,t=!0,s=!1){s&&this.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.Interaction.stop(),this.Area.stop(),this.Drag.stop(),this.Selector.stop(),this.SelectorArea.stop(e),this.stores.KeyStore.stop(),this.stores.PointerStore.stop(),this.stores.ScrollStore.stop(),e&&this.SelectableSet.clear(),t&&this.SelectedSet.clear(),this.stopped=!0}break=()=>this.continue=!0;setSettings=e=>this.stores.SettingsStore.update({settings:e});getSelection=()=>this.SelectedSet.elements;addSelection(e,t=!1,s=!1){const i=g(e);return this.SelectedSet.addAll(i),s||this.addSelectables(e,!1,!1),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}removeSelection(e,t=!1,s=!1){const i=g(e);return this.SelectedSet.deleteAll(i),s&&this.removeSelectables(e,!1,!1),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}toggleSelection(e,t=!1,s=!1){return g(e).forEach((i=>this.SelectedSet.has(i)?this.removeSelection(e,t,s):this.addSelection(e,t,s))),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}setSelection(e,t=!1,s=!1){return this.clearSelection(),this.addSelection(e,t,s),this.getSelection()}clearSelection(e=!1){return this.SelectedSet.clear(),e&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}addSelectables(e,t,s){const i=g(e);return this.SelectableSet.addAll(i),t&&this.SelectedSet.addAll(i),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getSelectables=()=>this.SelectableSet.elements;removeSelectables(e,t,s){const i=g(e);return this.SelectableSet.deleteAll(i),t&&this.removeSelection(e),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getInitialCursorPosition=()=>this.stores.PointerStore.initialVal;getCurrentCursorPosition=()=>this.stores.PointerStore.currentVal;getPreviousCursorPosition=()=>this.stores.PointerStore.lastVal;getInitialCursorPositionArea=()=>this.stores.PointerStore.initialValArea;getCurrentCursorPositionArea=()=>this.stores.PointerStore.currentValArea;getPreviousCursorPositionArea=()=>this.stores.PointerStore.lastValArea;isMultiSelect=e=>this.stores.KeyStore.isMultiSelectKeyPressed(e);isDragging=()=>this.Interaction.isDragging;getZoneByCoordinates=e=>this.DropZones.getTarget({coordinates:e})?.toObject();getItemsDroppedByZoneId=e=>this.DropZones.getItemsDroppedById(e);getItemsInsideByZoneId=(e,t)=>this.DropZones.getItemsInsideById(e,t)}R.isCollision=p;export{R as default}; \ No newline at end of file diff --git a/ds.min.js b/ds.min.js index 1e740881..b5049696 100644 --- a/ds.min.js +++ b/ds.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).DragSelect=t()}(this,(function(){"use strict";const e=(e,t)=>{const s=t;window.addEventListener("resize",s),window.addEventListener("scroll",s);const i=new MutationObserver(s),r=new ResizeObserver(s);e.forEach(((e,t)=>{i.observe(e,{childList:0!==t,attributes:!0}),e instanceof Element&&r.observe(e)}));return{observer:i,resizeObserver:r,callback:s,cleanup:()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s),i.disconnect(),r.disconnect()}}},t=(e,t)=>{let s;return(...i)=>{clearTimeout(s),s=setTimeout((()=>{s=void 0,e(...i)}),t)}},s=e=>{const t=(e,s=0)=>{const i=e[s]?.parentNode;return i?(e.push(i),s++,t(e,s)):e};return t([e])},i=({computedStyle:e,node:t})=>{const{position:s}=e;t instanceof Document||("absolute"===s||"relative"===s||"fixed"===s)||(t.style.position="relative")};let r;class n{DS;PS;Settings;_observers;_node;_parentNodes;_computedStyle;_computedBorder;_rect;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this._node=this.Settings.area,this.setArea(this.Settings.area),this.PS.subscribe("Settings:updated:area",(({settings:{area:e}})=>this.setArea(e))),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:end",this.reset)}setArea=e=>{this.reset(),this._node=e,i({computedStyle:this.computedStyle,node:this._node}),setTimeout((()=>{this.PS.publish("Area:modified:pre",{item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{item:this.HTMLNode})}))};init=()=>{this._observers=e(this.parentNodes,t((e=>{this.PS.publish("Area:modified:pre",{event:e,item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{event:e,item:this.HTMLNode})}),60))};reset=()=>{this._computedStyle=void 0,this._rect=void 0,this._computedBorder=void 0,this._parentNodes=void 0};stop=()=>{this._observers?.cleanup(),this.reset()};scroll=(e,t)=>{const s={scroll_directions:e,scroll_multiplier:t};this.PS.publish("Area:scroll:pre",s),((e,t,s=1)=>{if(!t?.length||!e)return;let i=e;if(e instanceof Document&&(r&&(i=r),Number.isFinite(document?.documentElement?.scrollTop))){const e=document.documentElement.scrollTop;document.documentElement.scrollTop+=1,document.documentElement.scrollTop===e?(i=document.body,r=document.body):(document.documentElement.scrollTop=e,i=document.documentElement,r=document.documentElement)}const n=t.includes("top")&&i.scrollTop>0,o=t.includes("bottom")&&i.scrollTop0,a=t.includes("right")&&i.scrollLeft{if(e instanceof Document)return{top:0,left:0,bottom:0,right:0,width:window.innerWidth,height:window.innerHeight};const s=e.getBoundingClientRect();return{top:s.top,left:s.left,bottom:s.bottom,right:s.right,width:(e.clientWidth||s.width)*t,height:(e.clientHeight||s.height)*t}})(this.HTMLNode,this.DS.stores.SettingsStore.s.zoom)}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.HTMLNode)}}const o=({x:e,y:t},s,{x:i,y:r})=>({"+":{x:e+i,y:t+r},"-":{x:e-i,y:t-r},"*":{x:e*i,y:t*r},"/":{x:e/i,y:t/r}}[s]),l=e=>({x:e.left,y:e.top}),a=(e,t=0)=>({left:e.x,top:e.y,right:e.x,bottom:e.y,width:t,height:t}),h=e=>({x:e,y:e}),c=e=>{const t={x:0,y:0},s=window.getComputedStyle(e);if(!s.transform||"none"===s.transform)return t;if(s.transform.indexOf("3d")>=0){const e=s.transform.trim().match(/matrix3d\((.*?)\)/);if(e&&e.length){const s=e[1]?.split(",");t.x=parseInt(s[12])||0,t.y=parseInt(s[13])||0}return t}const i=s.transform.trim().match(/matrix\((.*?)\)/);if(i&&i.length){const e=i[1]?.split(",");t.x=parseInt(e[4])||0,t.y=parseInt(e[5])||0}return t},d=(e,t)=>t?(e=>{const{transform:t}=e.style;if(!t||t.indexOf("translate")<0)return c(e);const s={x:0,y:0},i=t.trim().match(/translate[3dD]*?\(.*?\)/);if(i){const e=i[0]?.split("(");if(e){const t=e[1]?.split(",");s.x=parseInt(t[0])||0,s.y=parseInt(t[1])||0}}return s.x||s.x?s:c(e)})(e):(e=>{const{style:t}=e,s={x:parseInt(t.left)||0,y:parseInt(t.top)||0};if(!s.x&&!s.x){const t=window.getComputedStyle(e);return{x:parseInt(t.left)||0,y:parseInt(t.top)||0}}return s})(e),S=({containerRect:e,selectionRect:t,direction:s,scrollAmount:i})=>{const r={top:e.top-t.top+i.y,left:e.left-t.left+i.x,bottom:e.bottom-t.bottom+i.y,right:e.right-t.right+i.x};return 0===s.x&&0===s.y||(s.y<0&&(s.y=Math.max(s.y,r.top)),s.x<0&&(s.x=Math.max(s.x,r.left)),s.y>0&&(s.y=Math.min(s.y,r.bottom)),s.x>0&&(s.x=Math.min(s.x,r.right)),t.top+=s.y,t.bottom+=s.y,t.left+=s.x,t.right+=s.x),s};class u{_prevCursorPos;_prevScrollPos;_elements=[];_dragKeys;_dragKeysFlat=[];_selectionRect=a(h(0));DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dragKeys",this.assignDragKeys),this.assignDragKeys(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("KeyStore:down",this.keyboardDrag),this.PS.subscribe("KeyStore:up",this.keyboardEnd)}assignDragKeys=()=>{this._dragKeys={up:this.Settings.dragKeys.up.map((e=>e.toLowerCase())),down:this.Settings.dragKeys.down.map((e=>e.toLowerCase())),left:this.Settings.dragKeys.left.map((e=>e.toLowerCase())),right:this.Settings.dragKeys.right.map((e=>e.toLowerCase()))},this._dragKeysFlat=[...this._dragKeys.up,...this._dragKeys.down,...this._dragKeys.left,...this._dragKeys.right]};keyboardDrag=({event:e,key:t})=>{const s=t.toLowerCase();if(!this.Settings.keyboardDrag||!this._dragKeysFlat.includes(s)||!this.DS.SelectedSet.size||!this.Settings.draggability||this.DS.continue)return;const i={event:e,isDragging:!0,isDraggingKeyboard:!0,key:t};this.PS.publish(["Interaction:start:pre","Interaction:start"],i),this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0);let r=(({shiftKey:e,keyboardDragSpeed:t,zoom:s,key:i,dragKeys:r,scrollDiff:n})=>{const o={x:0,y:0},l=e?4*t*s:t*s;return r?.left.includes(i)&&(o.x=n.x||-l),r?.right.includes(i)&&(o.x=n.x||l),r?.up.includes(i)&&(o.y=n.y||-l),r?.down.includes(i)&&(o.y=n.y||l),o})({shiftKey:this.DS.stores.KeyStore.currentValues.includes("shift"),keyboardDragSpeed:this.Settings.keyboardDragSpeed,zoom:this.Settings.zoom,key:s,scrollDiff:this._scrollDiff,dragKeys:this._dragKeys});r=S({direction:r,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(r),this.PS.publish(["Interaction:update:pre","Interaction:update"],i)};keyboardEnd=({event:e,key:t})=>{const s=t.toLowerCase();if(!(this.Settings.keyboardDrag&&this._dragKeysFlat.includes(s)&&this.DS.SelectedSet.size&&this.Settings.draggability))return;const i={event:e,isDragging:this.Settings.draggability,isDraggingKeyboard:!0,key:t};this.PS.publish(["Interaction:end:pre","Interaction:end"],i)};start=({isDragging:e,isDraggingKeyboard:t})=>{e&&!t&&(this._prevCursorPos=void 0,this._prevScrollPos=void 0,this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0))};stop=()=>{this._prevCursorPos=void 0,this._prevScrollPos=void 0,this.handleZIndex(!1),this._elements=[]};update=({isDragging:e,isDraggingKeyboard:t})=>{if(!e||!this._elements.length||t||this.DS.continue)return;let s=o(this._cursorDiff,"+",this._scrollDiff);s=S({direction:s,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(s)};handleZIndex=e=>{this._elements.forEach((t=>t.style.zIndex=`${(parseInt(t.style.zIndex)||0)+(e?9999:-9998)}`))};moveElements=e=>{const{elements:t,direction:s}=this.filterDragElements({elements:this._elements,direction:e});t.forEach((e=>{(({element:e,posDirection:t,useTransform:s})=>{const i=d(e,s);((e,t,s)=>{if(s){const s=e.style.transform;e.style.transform=`translate3d(${t.x}px,${t.y}px,1px) ${s.replace(/translate.*?\)/g,"")}`}else e.style.left=`${t.x}px`,e.style.top=`${t.y}px`})(e,o(i,"+",t),s)})({element:e,posDirection:s,containerRect:this.DS.SelectorArea.rect,useTransform:this.Settings.useTransform})}))};get _cursorDiff(){const e=this.DS.stores.PointerStore.currentVal,t=this._prevCursorPos?o(e,"-",this._prevCursorPos):{x:0,y:0};return this._prevCursorPos=e,t}get _scrollDiff(){const e=this.DS.stores.ScrollStore.currentVal,t=this._prevScrollPos?o(e,"-",this._prevScrollPos):{x:0,y:0};return this._prevScrollPos=e,t}filterDragElements=({elements:e,direction:t})=>({elements:e,direction:t})}const p=(e,t,s=0)=>{if(!e||!t)return!1;let i=e;if(s>0){const t=(e.right-e.left)*s,r=(e.bottom-e.top)*s;i={left:e.left+t,right:e.right-t,top:e.top+r,bottom:e.bottom-r}}return i.leftt.left&&i.topt.top},g=e=>e?Array.isArray(e)||"function"==typeof e[Symbol.iterator]?[...new Set([...e])]:[e]:[];class m{id;element;_droppables;_rect;_observers;_timeout;_itemsDropped=[];_itemsInside;DS;PS;Settings;isDestroyed=!1;_parentNodes;constructor({DS:s,PS:i,id:r,element:n,droppables:o}){this.DS=s,this.PS=i,this.Settings=this.DS.stores.SettingsStore.s,this.id=r,this.element=n,o&&(this.droppables=g(o)),this.element.classList.add(`${this.Settings.dropZoneClass}`),this.PS.subscribe("Settings:updated:dropZoneClass",(({settings:e})=>{this.element&&(this.element.classList.remove(e["dropZoneClass:pre"]),this.element.classList.add(e.dropZoneClass))})),this._observers=e(this.parentNodes,t((()=>this._rect=void 0),this.Settings.refreshMemoryRate)),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop)}setReadyClasses=e=>{if(this.isDestroyed)return;const t=this.droppables.filter((e=>this.DS.SelectedSet.has(e)));t.length&&(t.forEach((t=>{t.classList[e](`${this.Settings.droppableClass}`),t.classList[e](`${this.Settings.droppableClass}-${this.id}`)})),this.element.classList[e](`${this.Settings.dropZoneReadyClass}`))};handleNoDrop=()=>{this.isDestroyed||(this.DS.SelectedSet.forEach((e=>{e.classList.remove(this.Settings.droppedTargetClass),e.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped=this._itemsDropped.filter((e=>!this.DS.SelectedSet.has(e))),this._itemsDropped?.length||this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`))};handleDrop=()=>{this.isDestroyed||(this._itemsDropped=[...new Set([...this._itemsDropped,...this.droppables?.filter((e=>this.DS.SelectedSet.has(e)))])],this._itemsDropped?.forEach((e=>{e.classList.add(`${this.Settings.droppedTargetClass}`),e.classList.add(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped?.length&&this.element.classList.add(`${this.Settings.dropZoneTargetClass}`))};handleItemsInsideClasses=()=>{let e=!1;this.droppables.forEach((t=>{this.itemsInside?.includes(t)?(t.classList.add(`${this.Settings.droppedInsideClass}`),t.classList.add(`${this.Settings.droppedInsideClass}-${this.id}`),e=!0):(t.classList.remove(`${this.Settings.droppedInsideClass}-${this.id}`),t.className.includes(`${this.Settings.droppedInsideClass}-`)||t.classList.remove(`${this.Settings.droppedInsideClass}`))})),e?this.element.classList.add(`${this.Settings.dropZoneInsideClass}`):this.element.classList.remove(`${this.Settings.dropZoneInsideClass}`)};start=({isDragging:e})=>{e&&!this.isDestroyed&&this.setReadyClasses("add")};stop=({isDragging:e})=>{e&&!this.isDestroyed&&(this.setReadyClasses("remove"),this.handleItemsInsideClasses())};destroy(){this._observers?.cleanup(),this.element.classList.remove(`${this.Settings.dropZoneClass}`),this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`),this.element.classList.remove(`${this.Settings.dropZoneReadyClass}`),this.droppables.forEach((e=>{e.classList.remove(`${this.Settings.droppedTargetClass}`),e.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`),e.classList.remove(`${this.Settings.droppableClass}`),e.classList.remove(`${this.Settings.droppableClass}-${this.id}`)})),this.PS.unsubscribe("Interaction:start",this.start),this.PS.unsubscribe("Interaction:end",this.stop),this.isDestroyed=!0}toObject=()=>({id:this.id,element:this.element,droppables:this.droppables,itemsDropped:this.itemsDropped,itemsInside:this.itemsInside});get rect(){if(!this.isDestroyed)return this._rect?this._rect:this._rect=this.element.getBoundingClientRect()}get itemsDropped(){if(!this.isDestroyed)return this._itemsDropped}get itemsInside(){if(!this.isDestroyed)return this._itemsInside||(this._itemsInside=this.droppables.flatMap((e=>{const t=this.DS.SelectableSet.rects.get(e);return this.rect&&p(t,this.rect,this.Settings.dropInsideThreshold)?[e]:[]})),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._itemsInside=void 0),this.Settings.refreshMemoryRate)),this._itemsInside}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.element)}get droppables(){return this._droppables?this._droppables:this.DS.SelectableSet.elements}set droppables(e){this._droppables=e}}class b{_zoneByElement=new Map;_zoneById=new Map;_zonesByDroppable=new Map;_zones;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dropZones",(({settings:e})=>this.setDropZones(e))),this.setDropZones({dropZones:this.Settings.dropZones}),this.PS.subscribe("Interaction:end",this.stop)}setDropZones=({dropZones:e})=>{e&&(this._zones&&this._zones.forEach((e=>e.destroy())),this._zones=e.map((e=>new m({DS:this.DS,PS:this.PS,...e}))),this._zones.forEach((e=>{this._zoneByElement.set(e.element,e),this._zoneById.set(e.id,e),e.droppables.forEach((t=>{const s=this._zonesByDroppable.get(t);if(!s?.length)return this._zonesByDroppable.set(t,[e]);this._zonesByDroppable.set(t,[...new Set([...s,e])])}))})))};_handleDrops=e=>{this._zones?.forEach((t=>{t!==e&&t.handleNoDrop()})),e&&e.handleDrop()};_getZoneByElementsFromPoint=(e,{x:t,y:s})=>{for(let i=0,r=e.length;i{if(!e)return;const i=this.getTarget({isDraggingKeyboard:t,event:s});this._handleDrops(i)};getItemsDroppedById=e=>{const t=this._zoneById.get(e);return t?t.itemsDropped:console.warn(`[DragSelect] No zone found (id: ${e})`)};getItemsInsideById=(e,t)=>{const s=this._zoneById.get(e);return s?(t&&s.handleItemsInsideClasses(),s.itemsInside):console.warn(`[DragSelect] No zone found (id: ${e})`)};getKeyboardItemCenter=(e,t)=>{if(!e||!t)return;const s=t.target?.getBoundingClientRect();return{x:s.left+s.width/2,y:s.top+s.height/2}};getTarget=({coordinates:e,isDraggingKeyboard:t,event:s})=>{if(!this._zones?.length)return;let i;!e&&t&&s&&(i=this.getKeyboardItemCenter(t,s));const r=e?.x||i?.x||this.DS.stores.PointerStore.currentVal.x,n=e?.y||i?.y||this.DS.stores.PointerStore.currentVal.y,o=document.elementsFromPoint(r,n);return this._getZoneByElementsFromPoint(o,{x:r,y:n})}}class y{isInteracting;isDragging=!1;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:area",(({settings:e})=>{this.removeAreaEventListeners(e["area:pre"]),this.setAreaEventListeners(e.area)})),this.PS.subscribe("PointerStore:updated",(({event:e})=>this.update({event:e}))),this.PS.subscribe("Selectable:click",this.onClick),this.PS.subscribe("Selectable:pointer",(({event:e})=>this.start(e))),this.PS.subscribe("Interaction:start:pre",(({event:e})=>this._start(e))),this.PS.subscribe("Interaction:init:pre",this._init),this.PS.subscribe("Interaction:end:pre",(({event:e})=>this._reset(e))),this.PS.subscribe("Area:scroll",this.update)}init=()=>this.PS.publish("Interaction:init:pre",{init:!0});_init=()=>{this.stop(),this.setAreaEventListeners(),this.PS.publish("Interaction:init",{init:!0})};_canInteract(e){const t="clientX"in e&&0===e.clientX&&0===e.clientY&&0===e.detail&&e.target;return!("button"in e&&2===e.button||this.isInteracting||e.target&&!this.DS.SelectorArea.isInside(e.target)||!t&&!this.DS.SelectorArea.isClicked(e))}start=e=>this.PS.publish("Interaction:start:pre",{event:e,isDragging:this.isDragging});_start=e=>{"touchstart"===e.type&&e.preventDefault(),this._canInteract(e)&&(this.isInteracting=!0,this.isDragging=this.isDragEvent(e),this.PS.publish("Interaction:start",{event:e,isDragging:this.isDragging}),this.setDocEventListeners())};isDragEvent=e=>{let t=null;return e.target&&"closest"in e.target&&(t=e.target.closest(`.${this.Settings.selectableClass}`)),!(!this.Settings.draggability||this.DS.stores.KeyStore.isMultiSelectKeyPressed(e)||!t)&&(this.Settings.immediateDrag&&(this.DS.SelectedSet.size?this.DS.SelectedSet.has(t)||(this.DS.SelectedSet.clear(),this.DS.SelectedSet.add(t)):this.DS.SelectedSet.add(t)),!!this.DS.SelectedSet.has(t))};onClick=({event:e})=>{if(!this._canInteract(e))return;if(e.detail>0)return;const{stores:{PointerStore:t,KeyStore:s},SelectableSet:i,SelectedSet:r}=this.DS;t.start(e);const n=e.target;n&&!i.has(n)||(s.isMultiSelectKeyPressed(e)||r.clear(),n&&r.toggle(n),this.reset(e))};stop=(e=this.DS.Area.HTMLNode)=>{this.removeAreaEventListeners(e),this.removeDocEventListeners()};update=({event:e,scroll_directions:t,scroll_multiplier:s})=>{this.isInteracting&&this.PS.publish(["Interaction:update:pre","Interaction:update"],{event:e,scroll_directions:t,scroll_multiplier:s,isDragging:this.isDragging})};reset=e=>this.PS.publish("Interaction:end:pre",{event:e,isDragging:this.isDragging});_reset=e=>{const{isDragging:t}=this;this.isInteracting=!1,this.isDragging=!1,this.removeDocEventListeners(),this.PS.publish("Interaction:end",{event:e,isDragging:t})};setAreaEventListeners=(e=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?e.addEventListener("pointerdown",this.start,{passive:!1}):e.addEventListener("mousedown",this.start),e.addEventListener("touchstart",this.start,{passive:!1})};removeAreaEventListeners=(e=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?e.removeEventListener("pointerdown",this.start,{passive:!1}):e.removeEventListener("mousedown",this.start),e.removeEventListener("touchstart",this.start,{passive:!1})};setDocEventListeners=()=>{this.Settings.usePointerEvents?(document.addEventListener("pointerup",this.reset),document.addEventListener("pointercancel",this.reset)):document.addEventListener("mouseup",this.reset),document.addEventListener("touchend",this.reset)};removeDocEventListeners=()=>{this.Settings.usePointerEvents?(document.removeEventListener("pointerup",this.reset),document.removeEventListener("pointercancel",this.reset)):document.removeEventListener("mouseup",this.reset),document.removeEventListener("touchend",this.reset)}}class D{_currentValues=new Set;_keyMapping={control:"ctrlKey",shift:"shiftKey",meta:"metaKey"};DS;PS;settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init)}init=()=>{document.addEventListener("keydown",this.keydown),document.addEventListener("keyup",this.keyup),window.addEventListener("blur",this.reset)};keydown=e=>{if(!e.key?.toLocaleLowerCase)return;const t=e.key.toLowerCase();this.PS.publish("KeyStore:down:pre",{event:e,key:t}),this._currentValues.add(t),this.PS.publish("KeyStore:down",{event:e,key:t})};keyup=e=>{if(!e.key?.toLocaleLowerCase)return;const t=e.key.toLowerCase();this.PS.publish("KeyStore:up:pre",{event:e,key:t}),this._currentValues.delete(t),this.PS.publish("KeyStore:up",{event:e,key:t})};stop=()=>{document.removeEventListener("keydown",this.keydown),document.removeEventListener("keyup",this.reset),window.removeEventListener("blur",this.reset),this.reset()};reset=()=>this._currentValues.clear();isMultiSelectKeyPressed(e){if(this.settings.multiSelectMode)return!0;const t=this.settings.multiSelectKeys?.map((e=>e.toLocaleLowerCase()))??[];return!!this.currentValues.some((e=>t.includes(e)))||!(!e||!t.some((t=>e[this._keyMapping[t]])))}get currentValues(){return Array.from(this._currentValues.values())}}class _{_isMouseInteraction=!1;_initialValArea={x:0,y:0};_currentValArea={x:0,y:0};_lastValArea={x:0,y:0};_initialVal={x:0,y:0};_currentVal={x:0,y:0};_lastVal={x:0,y:0};_lastTouch;DS;PS;settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({event:e})=>this.start(e))),this.PS.subscribe("Interaction:end",(({event:e})=>this.reset(e)))}init=()=>{this.settings.usePointerEvents?document.addEventListener("pointermove",this.update,{passive:!1}):document.addEventListener("mousemove",this.update),document.addEventListener("touchmove",this.update,{passive:!1})};start(e){e&&(this._isMouseInteraction=!0,this.currentVal=this.initialVal=this.getPointerPosition(e))}getPointerPosition=e=>(({event:e})=>({x:e.clientX,y:e.clientY}))({event:this._normalizedEvent(e)});update=e=>{e&&(this.PS.publish("PointerStore:updated:pre",{event:e}),this.currentVal=this.getPointerPosition(e),this._isMouseInteraction&&this.PS.publish("PointerStore:updated",{event:e}))};stop=()=>{this.settings.usePointerEvents?document.removeEventListener("pointermove",this.update,{passive:!1}):document.removeEventListener("mousemove",this.update),document.removeEventListener("touchmove",this.update,{passive:!1}),this.reset()};reset=e=>{this.currentVal=this.lastVal=this.getPointerPosition(e),setTimeout((()=>this._isMouseInteraction=!1),100)};_normalizedEvent(e){return!e||e instanceof KeyboardEvent?{clientX:0,clientY:0}:"touches"in e?("touchend"!==e.type&&(this._lastTouch=e),this._lastTouch?.touches[0]||e.touches[0]):e}get initialValArea(){return this._initialValArea?this._initialValArea:{x:0,y:0}}get currentValArea(){return this._currentValArea?this._currentValArea:{x:0,y:0}}get lastValArea(){return this._lastValArea?this._lastValArea:{x:0,y:0}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal?this._currentVal:{x:0,y:0}}get lastVal(){return this._lastVal?this._lastVal:{x:0,y:0}}set initialVal(e){this._initialVal=e,this._initialValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set currentVal(e){this._currentVal=e,this._currentValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set lastVal(e){this._lastVal=e,this._lastValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}}class v{subscribers={};DS;constructor({DS:e}){this.DS=e}subscribe=(e,t)=>{Array.isArray(this.subscribers[e])||(this.subscribers[e]=[]);const s=this.subscribers[e];return s.push(t),s.length-1};unsubscribe=(e,t,s)=>{const i=s??this.subscribers[e]?.findIndex((e=>e===t));this.subscribers[e]?.splice(Number(i),1)};publish=(e,t)=>{Array.isArray(e)?e.forEach((e=>this._publish(e,t))):this._publish(e,t)};_publish=(e,t)=>{const s=this.subscribers[e]??[];e.includes(":pre")?this._handlePrePublish(s,t):this._handlePublish(s,t)};_handlePublish=(e,t)=>{for(let s=0,i=e.length;s{let s=e.length;for(;s--;){if(this.DS.stopped)return;e[s]?.(t)}}}const P=()=>({y:document.body?.scrollTop||document.documentElement?.scrollTop||0,x:document.body?.scrollLeft||document.documentElement?.scrollLeft||0}),f=e=>!e||e instanceof Document?P():{x:e.scrollLeft>=0?e.scrollLeft:P().x,y:e.scrollTop>=0?e.scrollTop:P().y},I=e=>{const t=e.scrollTop,s=Boolean(e.scrollTop=1);return e.scrollTop=t,s};class L{_initialVal={x:0,y:0};_currentVal={x:0,y:0};_canScroll;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Area:modified",(()=>{this.stop(),this.init()})),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(()=>this.start())),this.PS.subscribe("Interaction:end",(()=>this.reset()))}init=()=>this.addListeners();addListeners=()=>this.DS.Area.HTMLNode.addEventListener("scroll",this.update);removeListeners=()=>this.DS.Area.HTMLNode.removeEventListener("scroll",this.update);start=()=>{this._currentVal=this._initialVal=f(this.DS.Area.HTMLNode)};update=()=>this._currentVal=f(this.DS.Area.HTMLNode);stop=()=>{this.reset(),this.removeListeners()};reset=()=>{this._initialVal={x:0,y:0},this._canScroll=void 0};get canScroll(){return"boolean"==typeof this._canScroll?this._canScroll:this._canScroll=(e=>{const t=f(e);return!(!t.x&&!t.y)||(e instanceof Document?e.body?I(e.body):I(e.documentElement):I(e))})(this.DS.Area.HTMLNode)}get scrollAmount(){const e=o(this.currentVal,"-",this.initialVal),t=h(this.Settings.zoom),s=o(o(e,"*",t),"-",e);return{x:e.x+s.x,y:e.y+s.y}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal||(this._currentVal=f(this.DS.Area.HTMLNode)),this._currentVal}}class T extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){super(),this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Settings:updated:selectables",(()=>{this.clear(),this.init()})),this.PS.subscribe("Settings:updated:selectableClass",(({settings:e})=>{this.forEach((t=>{t.classList.remove(e["selectableClass:pre"]),t.classList.add(e.selectableClass)}))}))}init=()=>g(this.Settings.selectables).forEach((e=>this.add(e)));add(e){if(!e||super.has(e))return this;const t={items:this.elements,item:e};return this.PS.publish("Selectable:added:pre",t),e.classList.add(this.Settings.selectableClass),e.addEventListener("click",this._onClick),this.Settings.usePointerEvents?e.addEventListener("pointerdown",this._onPointer,{passive:!1}):e.addEventListener("mousedown",this._onPointer),e.addEventListener("touchstart",this._onPointer,{passive:!1}),this.Settings.draggability&&!this.Settings.useTransform&&i({computedStyle:window.getComputedStyle(e),node:e}),this.PS.publish("Selectable:added",t),super.add(e)}delete(e){if(!e||!super.has(e))return!0;const t={items:this.elements,item:e};return this.PS.publish("Selectable:removed:pre",t),e.classList.remove(this.Settings.selectableClass),e.classList.remove(this.Settings.hoverClass),e.removeEventListener("click",this._onClick),this.Settings.usePointerEvents?e.removeEventListener("pointerdown",this._onPointer,{passive:!1}):e.removeEventListener("mousedown",this._onPointer),e.removeEventListener("touchstart",this._onPointer,{passive:!1}),this.PS.publish("Selectable:removed",t),super.delete(e)}clear=()=>this.forEach((e=>this.delete(e)));_onClick=e=>this.PS.publish(["Selectable:click:pre","Selectable:click"],{event:e});_onPointer=e=>this.PS.publish(["Selectable:pointer:pre","Selectable:pointer"],{event:e});addAll=e=>e.forEach((e=>this.add(e)));deleteAll=e=>e.forEach((e=>this.delete(e)));getElementRect=e=>this._rects?this._rects.get(e):e.getBoundingClientRect();get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((e=>this._rects?.set(e,e.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}class E extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){super(),this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s}add(e){if(!e||super.has(e))return this;const t={items:this.elements,item:e};return this.PS.publish("Selected:added:pre",t),super.add(e),e.classList.add(this.Settings.selectedClass),e.style.zIndex=`${(parseInt(e.style.zIndex)||0)+1}`,this.PS.publish("Selected:added",t),this}delete(e){if(!e||!super.has(e))return!0;const t={items:this.elements,item:e};this.PS.publish("Selected:removed:pre",t);const s=super.delete(e);return e.classList.remove(this.Settings.selectedClass),e.style.zIndex=""+((parseInt(e.style.zIndex)||0)-1),this.PS.publish("Selected:removed",t),s}clear=()=>this.forEach((e=>this.delete(e)));toggle(e){return this.has(e)?this.delete(e):this.add(e),e}addAll=e=>e.forEach((e=>this.add(e)));deleteAll=e=>e.forEach((e=>this.delete(e)));get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((e=>this._rects?.set(e,e.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}var C=(e,t)=>{t.left&&(e.style.left=`${t.left}px`),t.top&&(e.style.top=`${t.top}px`),t.width&&(e.style.width=`${t.width}px`),t.height&&(e.style.height=`${t.height}px`)};class x{_rect;DS;PS;Settings;HTMLNode;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=this.Settings.selector,this.PS.subscribe("Settings:updated:selectorClass",(({settings:e})=>{this.HTMLNode.classList.remove(e["selectorClass:pre"]),this.HTMLNode.classList.add(e.selectorClass)})),this.PS.subscribe("Settings:updated:selector",this.attachSelector),this.PS.subscribe("Settings:updated:customStyles",this.attachSelector),this.attachSelector(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("Interaction:end",this.stop)}attachSelector=()=>{this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.removeChild(this.HTMLNode),this.HTMLNode=this.Settings.selector||(e=>{const t=document.createElement("div");return t.style.position="absolute",e||(t.style.background="rgba(0, 175, 255, 0.2)",t.style.border="1px solid rgba(0, 175, 255, 0.8)",t.style.display="none",t.style.pointerEvents="none"),t})(this.Settings.customStyles),this.HTMLNode.classList.add(this.Settings.selectorClass),this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.appendChild(this.HTMLNode)};start=({isDragging:e})=>{if(e)return;const{stores:{PointerStore:t}}=this.DS,s=t.initialValArea;C(this.HTMLNode,a(s,1)),this.HTMLNode.style.display="block",this._rect=void 0};stop=()=>{this.HTMLNode.style.width="0",this.HTMLNode.style.height="0",this.HTMLNode.style.display="none"};update=({isDragging:e})=>{if(e||this.DS.continue)return;const{stores:{ScrollStore:t,PointerStore:s}}=this.DS,i=(({scrollAmount:e,initialPointerPos:t,pointerPos:s})=>{const i={};return s.x>t.x-e.x?(i.left=t.x-e.x,i.width=s.x-t.x+e.x):(i.left=s.x,i.width=t.x-s.x-e.x),s.y>t.y-e.y?(i.top=t.y-e.y,i.height=s.y-t.y+e.y):(i.top=s.y,i.height=t.y-s.y-e.y),i})({scrollAmount:t.scrollAmount,initialPointerPos:s.initialValArea,pointerPos:s.currentValArea});C(this.HTMLNode,i),this._rect=void 0};get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}class A{_prevSelectedSet=new Set;_boundingRect;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update)}_storePrevious(e){const{stores:{KeyStore:t},SelectedSet:s}=this.DS;t.isMultiSelectKeyPressed(e)?this._prevSelectedSet=new Set(s):this._prevSelectedSet=new Set}start=({event:e,isDragging:t})=>{t||(this._storePrevious(e),this._handleInsideSelection(!0,e))};update=({isDragging:e})=>{e||this.DS.continue||this._handleInsideSelection()};_handleInsideSelection=(e,t)=>{const{SelectableSet:s,SelectorArea:i,Selector:r}=this.DS,n=this.DS.stores.KeyStore.isMultiSelectKeyPressed(t)&&this.Settings.multiSelectToggling,o=this.Settings.selectionThreshold,l=s.rects,a=r.rect,h=new Map,c=new Map;for(const[e,t]of l)i.isInside(e,t)&&(p(t,a,o)?h.set(e,t):c.set(e,t));if(this.DS.continue)return;const{select:d,unselect:S}=this.filterSelected({select:h,unselect:c,selectorRect:a});d.forEach(((t,s)=>(({element:e,force:t,multiSelectionToggle:s,SelectedSet:i,hoverClassName:r})=>{e.classList.contains(r)&&!t||(i.has(e)?s&&i.delete(e):i.add(e),e.classList.add(r))})({element:s,force:e,multiSelectionToggle:n,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass}))),S.forEach(((t,s)=>(({element:e,force:t,SelectedSet:s,PrevSelectedSet:i,hoverClassName:r})=>{if(!e.classList.contains(r)&&!t)return;const n=s.has(e),o=i.has(e);n&&!o?s.delete(e):!n&&o&&s.add(e),e.classList.remove(r)})({element:s,force:e,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass,PrevSelectedSet:this._prevSelectedSet})))};get boundingRect(){return this._boundingRect||(this._boundingRect=(e=>{const t={top:Number.POSITIVE_INFINITY,left:Number.POSITIVE_INFINITY,bottom:Number.NEGATIVE_INFINITY,right:Number.NEGATIVE_INFINITY,width:Number.NEGATIVE_INFINITY,height:Number.NEGATIVE_INFINITY};return e.rects.forEach((e=>{t.top=Math.min(t.top,e.top||t.top),t.left=Math.min(t.left,e.left||t.left),t.bottom=Math.max(t.bottom,e.bottom||t.bottom),t.right=Math.max(t.right,e.right||t.right)})),t.height=t.bottom-t.top,t.width=t.right-t.left,t})(this.DS.SelectedSet),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._boundingRect=void 0),this.Settings.refreshMemoryRate)),this._boundingRect}filterSelected=({select:e,unselect:t,selectorRect:s})=>({select:e,unselect:t})}class w{_scrollInterval;_rect;currentEdges=[];DS;PS;Settings;HTMLNode;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=(()=>{const e=document.createElement("div");return e.style.position="fixed",e.style.overflow="hidden",e.style.pointerEvents="none",e.style.zIndex="999999999999999999",e})(),this.PS.subscribe("Settings:updated:selectorAreaClass",(({settings:e})=>{this.HTMLNode.classList.remove(e["selectorAreaClass:pre"]),this.HTMLNode.classList.add(e.selectorAreaClass)})),this.HTMLNode.classList.add(this.Settings.selectorAreaClass),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({isDraggingKeyboard:e})=>this.startAutoScroll({isDraggingKeyboard:e}))),this.PS.subscribe("Interaction:end",(()=>{this.updatePos(),this.stopAutoScroll()}))}init=()=>{this.applyElements("append"),this.updatePos()};applyElements=e=>{const t=document.body?"body":"documentElement",s=`${e}Child`;this.HTMLNode[s](this.DS.Selector.HTMLNode),document[t][s](this.HTMLNode)};updatePos=()=>{this._rect=void 0;const e=this.DS.Area.rect,t=this.DS.Area.computedBorder,{style:s}=this.HTMLNode,i=`${e.top+t.top}px`,r=`${e.left+t.left}px`,n=`${e.width}px`,o=`${e.height}px`;s.top!==i&&(s.top=i),s.left!==r&&(s.left=r),s.width!==n&&(s.width=n),s.height!==o&&(s.height=o)};stop=e=>{this.stopAutoScroll(),e&&this.applyElements("remove")};startAutoScroll=({isDraggingKeyboard:e})=>{e||(this.currentEdges=[],this._scrollInterval=setInterval((()=>this.handleAutoScroll()),16))};handleAutoScroll=()=>{if(this.DS.continue)return;const{stores:{PointerStore:e},Area:t}=this.DS;this.currentEdges=(({elementRect:e,containerRect:t,tolerance:s={x:0,y:0}})=>{const i=[];return e.top-s.yt.bottom&&i.push("bottom"),e.right+s.y>t.right&&i.push("right"),i})({elementRect:a(e.currentVal),containerRect:this.rect,tolerance:this.Settings.overflowTolerance}),this.currentEdges.length&&t.scroll(this.currentEdges,this.Settings.autoScrollSpeed)};stopAutoScroll=()=>{this.currentEdges=[],clearInterval(this._scrollInterval)};isInside=(e,t)=>!(!this.DS.Area.HTMLNode.contains(e)||!this.DS.stores.ScrollStore.canScroll)||p(this.rect,t||e.getBoundingClientRect());isClicked(e){const{stores:{PointerStore:t}}=this.DS,s=e?t.getPointerPosition(e):t.initialVal;return p({left:s.x,top:s.y,right:s.x,bottom:s.y},this.rect)}get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}const N=(e,t)=>console.warn(`[DragSelect] TypeIssue: setting "${e}" is not of type "${t}".`),M=(e,t,s,i)=>{if(void 0===t)return s?{[e]:i}:{};if(null===t)return{[e]:null};let r=!0,n=!1;const o="string"==typeof i;o&&(r="string"==typeof t||t instanceof String),o&&!r&&(n=!0,N(e,"string"));const l=!Number.isNaN(i)&&"number"==typeof i;l&&(r=!Number.isNaN(t)&&"number"==typeof t),l&&!r&&(n=!0,N(e,"number"));const a="[object Object]"===Object.prototype.toString.call(i);a&&(r="[object Object]"===Object.prototype.toString.call(t)),a&&!r&&(n=!0,N(e,"object"));const h="boolean"==typeof i;h&&(r="boolean"==typeof t),h&&!r&&(n=!0,N(e,"boolean"));const c=Array.isArray(i);c&&(r=Array.isArray(t)),c&&!r&&(n=!0,N(e,"array"));const d=n||s;return"dragKeys"===e&&r?{[e]:Object.assign(i,t)}:"dragKeys"!==e||r?("dropZones"===e&&r&&Array.isArray(t)&&new Set(t.map((e=>e.id))).size!==t.length&&console.warn('[DragSelect] UniqueConstraintsIssue: setting "dropZones" contains duplicate ids.'),r?{[e]:t}:d?{[e]:i}:{}):d?{[e]:i}:{}};class V{_settings={};s={};PS;constructor({PS:e,settings:t}){this.PS=e,this.update({settings:t,init:!0})}update=({settings:e,init:t})=>{this.PS.publish("Settings:updated:pre",{settings:this._settings,"settings:init":Boolean(t),"settings:new":e}),this._update({settings:e,init:t})};_update=({settings:e={},init:t=!1})=>{const s=((e,t)=>({...M("area",e.area,t,document),...M("selectables",e.selectables,t,null),...M("autoScrollSpeed",e.autoScrollSpeed,t,5),...M("overflowTolerance",e.overflowTolerance,t,{x:25,y:25}),...M("zoom",e.zoom,t,1),...M("customStyles",e.customStyles,t,!1),...M("multiSelectMode",e.multiSelectMode,t,!1),...M("multiSelectToggling",e.multiSelectToggling,t,!0),...M("multiSelectKeys",e.multiSelectKeys,t,["Control","Shift","Meta"]),...M("selector",e.selector,t,null),...M("selectionThreshold",e.selectionThreshold,t,0),...M("draggability",e.draggability,t,!0),...M("immediateDrag",e.immediateDrag,t,!0),...M("keyboardDrag",e.keyboardDrag,t,!0),...M("dragKeys",e.dragKeys,t,{up:["ArrowUp"],down:["ArrowDown"],left:["ArrowLeft"],right:["ArrowRight"]}),...M("keyboardDragSpeed",e.keyboardDragSpeed,t,10),...M("useTransform",e.useTransform,t,!0),...M("refreshMemoryRate",e.refreshMemoryRate,t,80),...M("dropZones",e.dropZones,t,[]),...M("dropInsideThreshold",e.dropInsideThreshold,t,1),...M("dropTargetThreshold",e.dropTargetThreshold,t,0),...M("usePointerEvents",e.usePointerEvents,t,!1),...M("hoverClass",e.hoverClass,t,"ds-hover"),...M("selectableClass",e.selectableClass,t,"ds-selectable"),...M("selectedClass",e.selectedClass,t,"ds-selected"),...M("selectorClass",e.selectorClass,t,"ds-selector"),...M("selectorAreaClass",e.selectorAreaClass,t,"ds-selector-area"),...M("droppedTargetClass",e.droppedTargetClass,t,"ds-dropped-target"),...M("droppedInsideClass",e.droppedInsideClass,t,"ds-dropped-inside"),...M("droppableClass",e.droppableClass,t,"ds-droppable"),...M("dropZoneClass",e.dropZoneClass,t,"ds-dropzone"),...M("dropZoneReadyClass",e.dropZoneReadyClass,t,"ds-dropzone-ready"),...M("dropZoneTargetClass",e.dropZoneTargetClass,t,"ds-dropzone-target"),...M("dropZoneInsideClass",e.dropZoneInsideClass,t,"ds-dropzone-inside")}))(e,t);for(const[i,r]of Object.entries(s))((s,i)=>{s in this._settings||Object.defineProperty(this.s,s,{get:()=>this._settings[s],set:e=>this.update({settings:{[s]:e}})}),this._settings[`${s}:pre`]=this._settings[s],this._settings[s]=i;const r={settings:this._settings,"settings:init":t,"settings:new":e};this.PS.publish("Settings:updated",r),this.PS.publish(`Settings:updated:${s}`,r)})(i,r)}}const K={elementselect:"DS:select",elementunselect:"DS:unselect",autoscroll:"DS:scroll",dragstart:"DS:start",dragmove:"DS:update",callback:"DS:end",preelementselect:"DS:select:pre",preelementunselect:"DS:unselect:pre",preautoscroll:"DS:scroll:pre",predragstart:"DS:start:pre",predragmove:"DS:update:pre",precallback:"DS:end:pre"},k=(e,t)=>{const s=t.DropZones.getTarget(e);return{...e,...s?{dropTarget:s.toObject()}:{}}},H=({sub_name:e,DS:t,PS:s,sub_pubs:i})=>{s.subscribe(e,(e=>i.forEach((s=>$({sub_pub:s,data:e,DS:t})))))},$=({sub_pub:e,data:t,DS:s})=>{const i=e.condition?e.condition(t,s):t;if(i){const r=e.extraData&&e.extraData(t,s)||{};s.publish(e.name,{items:s.SelectedSet.elements,isDragging:s.Interaction.isDragging,...i,...r})}};class R{continue=!1;PubSub;stores;Area;Selector;SelectorArea;SelectableSet;SelectedSet;Selection;Drag;DropZones;Interaction;stopped;constructor(e){this.stopped=!1,this.PubSub=new v({DS:this}),this.stores={},this.stores.SettingsStore=new V({settings:e,PS:this.PubSub}),this.stores.PointerStore=new _({DS:this,PS:this.PubSub}),this.stores.ScrollStore=new L({DS:this,PS:this.PubSub}),this.stores.KeyStore=new D({DS:this,PS:this.PubSub}),this.Area=new n({DS:this,PS:this.PubSub}),this.Selector=new x({DS:this,PS:this.PubSub}),this.SelectorArea=new w({DS:this,PS:this.PubSub}),this.SelectableSet=new T({DS:this,PS:this.PubSub}),this.SelectedSet=new E({DS:this,PS:this.PubSub}),this.Selection=new A({DS:this,PS:this.PubSub}),this.Drag=new u({DS:this,PS:this.PubSub}),this.DropZones=new b({DS:this,PS:this.PubSub}),this.Interaction=new y({DS:this,PS:this.PubSub}),(({PS:e,DS:t})=>{const s={"Selected:added":[{name:"preelementselect"},{name:"elementselect"},{name:"DS:select:pre"},{name:"DS:select"}],"Selected:removed":[{name:"preelementunselect"},{name:"elementunselect"},{name:"DS:unselect:pre"},{name:"DS:unselect"}],"Selectable:added":[{name:"DS:added:pre"},{name:"DS:added"}],"Selectable:removed":[{name:"DS:removed:pre"},{name:"DS:removed"}],"Area:scroll":[{name:"preautoscroll"},{name:"autoscroll"},{name:"DS:scroll:pre"},{name:"DS:scroll"}],"Interaction:start":[{name:"predragstart"},{name:"dragstart"},{name:"DS:start:pre"},{name:"DS:start"}],"Interaction:update":[{name:"predragmove",condition:e=>e.event?e:null},{name:"dragmove",condition:e=>e.event?e:null},{name:"DS:update:pre",condition:e=>e.event?e:null},{name:"DS:update",condition:e=>e.event?e:null}],"Interaction:end":[{name:"precallback",extraData:(e,t)=>k(e,t)},{name:"callback",extraData:(e,t)=>k(e,t)},{name:"DS:end:pre",extraData:(e,t)=>k(e,t)},{name:"DS:end",extraData:(e,t)=>k(e,t)}]};for(const[i,r]of Object.entries(s))H({sub_name:i,sub_pubs:r,DS:t,PS:e})})({DS:this,PS:this.PubSub}),this.PubSub.subscribe("Interaction:end",(()=>this.continue=!1)),this.PubSub.subscribe("DS:end",(({items:e})=>this.continue=!1)),this.start()}static isCollision;subscribe=(e,t)=>{K[e]&&console.warn(`[DragSelect]: The event name "${e}" is deprecated and was/will be removed in a future version. Please use the new event name "${K[e]}" instead.`),this.PubSub.subscribe(e,t)};unsubscribe=(e,t,s)=>this.PubSub.unsubscribe(e,t,s);publish=(e,t)=>this.PubSub.publish(e,t);start=()=>{this.stopped=!1,this.Interaction.init()};stop(e=!0,t=!0,s=!1){s&&this.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.Interaction.stop(),this.Area.stop(),this.Drag.stop(),this.Selector.stop(),this.SelectorArea.stop(e),this.stores.KeyStore.stop(),this.stores.PointerStore.stop(),this.stores.ScrollStore.stop(),e&&this.SelectableSet.clear(),t&&this.SelectedSet.clear(),this.stopped=!0}break=()=>this.continue=!0;setSettings=e=>this.stores.SettingsStore.update({settings:e});getSelection=()=>this.SelectedSet.elements;addSelection(e,t=!1,s=!1){const i=g(e);return this.SelectedSet.addAll(i),s||this.addSelectables(e,!1,!1),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}removeSelection(e,t=!1,s=!1){const i=g(e);return this.SelectedSet.deleteAll(i),s&&this.removeSelectables(e,!1,!1),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}toggleSelection(e,t=!1,s=!1){return g(e).forEach((i=>this.SelectedSet.has(i)?this.removeSelection(e,t,s):this.addSelection(e,t,s))),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}setSelection(e,t=!1,s=!1){return this.clearSelection(),this.addSelection(e,t,s),this.getSelection()}clearSelection(e=!1){return this.SelectedSet.clear(),e&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}addSelectables(e,t,s){const i=g(e);return this.SelectableSet.addAll(i),t&&this.SelectedSet.addAll(i),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getSelectables=()=>this.SelectableSet.elements;removeSelectables(e,t,s){const i=g(e);return this.SelectableSet.deleteAll(i),t&&this.removeSelection(e),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getInitialCursorPosition=()=>this.stores.PointerStore.initialVal;getCurrentCursorPosition=()=>this.stores.PointerStore.currentVal;getPreviousCursorPosition=()=>this.stores.PointerStore.lastVal;getInitialCursorPositionArea=()=>this.stores.PointerStore.initialValArea;getCurrentCursorPositionArea=()=>this.stores.PointerStore.currentValArea;getPreviousCursorPositionArea=()=>this.stores.PointerStore.lastValArea;isMultiSelect=e=>this.stores.KeyStore.isMultiSelectKeyPressed(e);isDragging=()=>this.Interaction.isDragging;getZoneByCoordinates=e=>this.DropZones.getTarget({coordinates:e})?.toObject();getItemsDroppedByZoneId=e=>this.DropZones.getItemsDroppedById(e);getItemsInsideByZoneId=(e,t)=>this.DropZones.getItemsInsideById(e,t)}return R.isCollision=p,R})); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).DragSelect=t()}(this,(function(){"use strict";const e=(e,t)=>{const s=t;window.addEventListener("resize",s),window.addEventListener("scroll",s);const i=new MutationObserver(s),r=new ResizeObserver(s);e.forEach(((e,t)=>{i.observe(e,{childList:0!==t,attributes:!0}),e instanceof Element&&r.observe(e)}));return{observer:i,resizeObserver:r,callback:s,cleanup:()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s),i.disconnect(),r.disconnect()}}},t=(e,t)=>{let s;return(...i)=>{clearTimeout(s),s=setTimeout((()=>{s=void 0,e(...i)}),t)}},s=e=>{const t=(e,s=0)=>{const i=e[s]?.parentNode;return i?(e.push(i),s++,t(e,s)):e};return t([e])},i=({computedStyle:e,node:t})=>{const{position:s}=e;t instanceof Document||("absolute"===s||"relative"===s||"fixed"===s)||(t.style.position="relative")};let r;class n{DS;PS;Settings;_observers;_node;_parentNodes;_computedStyle;_computedBorder;_rect;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this._node=this.Settings.area,this.setArea(this.Settings.area),this.PS.subscribe("Settings:updated:area",(({settings:{area:e}})=>this.setArea(e))),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:end",this.reset)}setArea=e=>{this.reset(),this._node=e,i({computedStyle:this.computedStyle,node:this._node}),setTimeout((()=>{this.PS.publish("Area:modified:pre",{item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{item:this.HTMLNode})}))};init=()=>{this._observers=e(this.parentNodes,t((e=>{this.PS.publish("Area:modified:pre",{event:e,item:this.HTMLNode}),this.reset(),this.PS.publish("Area:modified",{event:e,item:this.HTMLNode})}),60))};reset=()=>{this._computedStyle=void 0,this._rect=void 0,this._computedBorder=void 0,this._parentNodes=void 0};stop=()=>{this._observers?.cleanup(),this.reset()};scroll=(e,t)=>{const s={scroll_directions:e,scroll_multiplier:t};this.PS.publish("Area:scroll:pre",s),((e,t,s=1)=>{if(!t?.length||!e)return;let i=e;if(e instanceof Document&&(r&&(i=r),Number.isFinite(document?.documentElement?.scrollTop))){const e=document.documentElement.scrollTop;document.documentElement.scrollTop+=1,document.documentElement.scrollTop===e?(i=document.body,r=document.body):(document.documentElement.scrollTop=e,i=document.documentElement,r=document.documentElement)}const n=t.includes("top")&&i.scrollTop>0,o=t.includes("bottom")&&i.scrollTop0,a=t.includes("right")&&i.scrollLeft{if(e instanceof Document)return{top:0,left:0,bottom:0,right:0,width:window.innerWidth,height:window.innerHeight};const s=e.getBoundingClientRect();return{top:s.top,left:s.left,bottom:s.bottom,right:s.right,width:(e.clientWidth||s.width)*t,height:(e.clientHeight||s.height)*t}})(this.HTMLNode,this.DS.stores.SettingsStore.s.zoom)}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.HTMLNode)}}const o=({x:e,y:t},s,{x:i,y:r})=>({"+":{x:e+i,y:t+r},"-":{x:e-i,y:t-r},"*":{x:e*i,y:t*r},"/":{x:e/i,y:t/r}}[s]),l=e=>({x:e.left,y:e.top}),a=(e,t=0)=>({left:e.x,top:e.y,right:e.x,bottom:e.y,width:t,height:t}),h=e=>({x:e,y:e}),c=e=>{const t={x:0,y:0},s=window.getComputedStyle(e);if(!s.transform||"none"===s.transform)return t;if(s.transform.indexOf("3d")>=0){const e=s.transform.trim().match(/matrix3d\((.*?)\)/);if(e&&e.length){const s=e[1]?.split(",");t.x=parseInt(s[12])||0,t.y=parseInt(s[13])||0}return t}const i=s.transform.trim().match(/matrix\((.*?)\)/);if(i&&i.length){const e=i[1]?.split(",");t.x=parseInt(e[4])||0,t.y=parseInt(e[5])||0}return t},d=(e,t)=>t?(e=>{const{transform:t}=e.style;if(!t||t.indexOf("translate")<0)return c(e);const s={x:0,y:0},i=t.trim().match(/translate[3dD]*?\(.*?\)/);if(i){const e=i[0]?.split("(");if(e){const t=e[1]?.split(",");s.x=parseInt(t[0])||0,s.y=parseInt(t[1])||0}}return s.x||s.x?s:c(e)})(e):(e=>{const{style:t}=e,s={x:parseInt(t.left)||0,y:parseInt(t.top)||0};if(!s.x&&!s.x){const t=window.getComputedStyle(e);return{x:parseInt(t.left)||0,y:parseInt(t.top)||0}}return s})(e),S=({containerRect:e,selectionRect:t,direction:s,scrollAmount:i})=>{const r={top:e.top-t.top+i.y,left:e.left-t.left+i.x,bottom:e.bottom-t.bottom+i.y,right:e.right-t.right+i.x};return 0===s.x&&0===s.y||(s.y<0&&(s.y=Math.max(s.y,r.top)),s.x<0&&(s.x=Math.max(s.x,r.left)),s.y>0&&(s.y=Math.min(s.y,r.bottom)),s.x>0&&(s.x=Math.min(s.x,r.right)),t.top+=s.y,t.bottom+=s.y,t.left+=s.x,t.right+=s.x),s};class u{_prevCursorPos;_prevScrollPos;_elements=[];_dragKeys;_dragKeysFlat=[];_selectionRect=a(h(0));DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dragKeys",this.assignDragKeys),this.assignDragKeys(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("KeyStore:down",this.keyboardDrag),this.PS.subscribe("KeyStore:up",this.keyboardEnd)}assignDragKeys=()=>{this._dragKeys={up:this.Settings.dragKeys.up.map((e=>e.toLowerCase())),down:this.Settings.dragKeys.down.map((e=>e.toLowerCase())),left:this.Settings.dragKeys.left.map((e=>e.toLowerCase())),right:this.Settings.dragKeys.right.map((e=>e.toLowerCase()))},this._dragKeysFlat=[...this._dragKeys.up,...this._dragKeys.down,...this._dragKeys.left,...this._dragKeys.right]};keyboardDrag=({event:e,key:t})=>{const s=t.toLowerCase();if(!this.Settings.keyboardDrag||!this._dragKeysFlat.includes(s)||!this.DS.SelectedSet.size||!this.Settings.draggability||this.DS.continue)return;const i={event:e,isDragging:!0,isDraggingKeyboard:!0,key:t};this.PS.publish(["Interaction:start:pre","Interaction:start"],i),this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0);let r=(({shiftKey:e,keyboardDragSpeed:t,zoom:s,key:i,dragKeys:r,scrollDiff:n})=>{const o={x:0,y:0},l=e?4*t*s:t*s;return r?.left.includes(i)&&(o.x=n.x||-l),r?.right.includes(i)&&(o.x=n.x||l),r?.up.includes(i)&&(o.y=n.y||-l),r?.down.includes(i)&&(o.y=n.y||l),o})({shiftKey:this.DS.stores.KeyStore.currentValues.includes("shift"),keyboardDragSpeed:this.Settings.keyboardDragSpeed,zoom:this.Settings.zoom,key:s,scrollDiff:this._scrollDiff,dragKeys:this._dragKeys});r=S({direction:r,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(r),this.PS.publish(["Interaction:update:pre","Interaction:update"],i)};keyboardEnd=({event:e,key:t})=>{const s=t.toLowerCase();if(!(this.Settings.keyboardDrag&&this._dragKeysFlat.includes(s)&&this.DS.SelectedSet.size&&this.Settings.draggability))return;const i={event:e,isDragging:this.Settings.draggability,isDraggingKeyboard:!0,key:t};this.PS.publish(["Interaction:end:pre","Interaction:end"],i)};start=({isDragging:e,isDraggingKeyboard:t})=>{e&&!t&&(this._prevCursorPos=void 0,this._prevScrollPos=void 0,this._elements=this.DS.getSelection(),this._selectionRect=this.DS.Selection.boundingRect,this.handleZIndex(!0))};stop=()=>{this._prevCursorPos=void 0,this._prevScrollPos=void 0,this.handleZIndex(!1),this._elements=[]};update=({isDragging:e,isDraggingKeyboard:t})=>{if(!e||!this._elements.length||t||this.DS.continue)return;let s=o(this._cursorDiff,"+",this._scrollDiff);s=S({direction:s,containerRect:this.DS.SelectorArea.rect,scrollAmount:this.DS.stores.ScrollStore.scrollAmount,selectionRect:this._selectionRect}),this.moveElements(s)};handleZIndex=e=>{this.Settings.useLayers&&this._elements.forEach((t=>t.style.zIndex=`${(parseInt(t.style.zIndex)||0)+(e?9999:-9998)}`))};moveElements=e=>{const{elements:t,direction:s}=this.filterDragElements({elements:this._elements,direction:e});t.forEach((e=>{(({element:e,posDirection:t,useTransform:s})=>{const i=d(e,s);((e,t,s)=>{if(s){const s=e.style.transform;e.style.transform=`translate3d(${t.x}px,${t.y}px,1px) ${s.replace(/translate.*?\)/g,"")}`}else e.style.left=`${t.x}px`,e.style.top=`${t.y}px`})(e,o(i,"+",t),s)})({element:e,posDirection:s,containerRect:this.DS.SelectorArea.rect,useTransform:this.Settings.useTransform})}))};get _cursorDiff(){const e=this.DS.stores.PointerStore.currentVal,t=this._prevCursorPos?o(e,"-",this._prevCursorPos):{x:0,y:0};return this._prevCursorPos=e,t}get _scrollDiff(){const e=this.DS.stores.ScrollStore.currentVal,t=this._prevScrollPos?o(e,"-",this._prevScrollPos):{x:0,y:0};return this._prevScrollPos=e,t}filterDragElements=({elements:e,direction:t})=>({elements:e,direction:t})}const p=(e,t,s=0)=>{if(!e||!t)return!1;let i=e;if(s>0){const t=(e.right-e.left)*s,r=(e.bottom-e.top)*s;i={left:e.left+t,right:e.right-t,top:e.top+r,bottom:e.bottom-r}}return i.leftt.left&&i.topt.top},g=e=>e?Array.isArray(e)||"function"==typeof e[Symbol.iterator]?[...new Set([...e])]:[e]:[];class m{id;element;_droppables;_rect;_observers;_timeout;_itemsDropped=[];_itemsInside;DS;PS;Settings;isDestroyed=!1;_parentNodes;constructor({DS:s,PS:i,id:r,element:n,droppables:o}){this.DS=s,this.PS=i,this.Settings=this.DS.stores.SettingsStore.s,this.id=r,this.element=n,o&&(this.droppables=g(o)),this.element.classList.add(`${this.Settings.dropZoneClass}`),this.PS.subscribe("Settings:updated:dropZoneClass",(({settings:e})=>{this.element&&(this.element.classList.remove(e["dropZoneClass:pre"]),this.element.classList.add(e.dropZoneClass))})),this._observers=e(this.parentNodes,t((()=>this._rect=void 0),this.Settings.refreshMemoryRate)),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:end",this.stop)}setReadyClasses=e=>{if(this.isDestroyed)return;const t=this.droppables.filter((e=>this.DS.SelectedSet.has(e)));t.length&&(t.forEach((t=>{t.classList[e](`${this.Settings.droppableClass}`),t.classList[e](`${this.Settings.droppableClass}-${this.id}`)})),this.element.classList[e](`${this.Settings.dropZoneReadyClass}`))};handleNoDrop=()=>{this.isDestroyed||(this.DS.SelectedSet.forEach((e=>{e.classList.remove(this.Settings.droppedTargetClass),e.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped=this._itemsDropped.filter((e=>!this.DS.SelectedSet.has(e))),this._itemsDropped?.length||this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`))};handleDrop=()=>{this.isDestroyed||(this._itemsDropped=[...new Set([...this._itemsDropped,...this.droppables?.filter((e=>this.DS.SelectedSet.has(e)))])],this._itemsDropped?.forEach((e=>{e.classList.add(`${this.Settings.droppedTargetClass}`),e.classList.add(`${this.Settings.droppedTargetClass}-${this.id}`)})),this._itemsDropped?.length&&this.element.classList.add(`${this.Settings.dropZoneTargetClass}`))};handleItemsInsideClasses=()=>{let e=!1;this.droppables.forEach((t=>{this.itemsInside?.includes(t)?(t.classList.add(`${this.Settings.droppedInsideClass}`),t.classList.add(`${this.Settings.droppedInsideClass}-${this.id}`),e=!0):(t.classList.remove(`${this.Settings.droppedInsideClass}-${this.id}`),t.className.includes(`${this.Settings.droppedInsideClass}-`)||t.classList.remove(`${this.Settings.droppedInsideClass}`))})),e?this.element.classList.add(`${this.Settings.dropZoneInsideClass}`):this.element.classList.remove(`${this.Settings.dropZoneInsideClass}`)};start=({isDragging:e})=>{e&&!this.isDestroyed&&this.setReadyClasses("add")};stop=({isDragging:e})=>{e&&!this.isDestroyed&&(this.setReadyClasses("remove"),this.handleItemsInsideClasses())};destroy(){this._observers?.cleanup(),this.element.classList.remove(`${this.Settings.dropZoneClass}`),this.element.classList.remove(`${this.Settings.dropZoneTargetClass}`),this.element.classList.remove(`${this.Settings.dropZoneReadyClass}`),this.droppables.forEach((e=>{e.classList.remove(`${this.Settings.droppedTargetClass}`),e.classList.remove(`${this.Settings.droppedTargetClass}-${this.id}`),e.classList.remove(`${this.Settings.droppableClass}`),e.classList.remove(`${this.Settings.droppableClass}-${this.id}`)})),this.PS.unsubscribe("Interaction:start",this.start),this.PS.unsubscribe("Interaction:end",this.stop),this.isDestroyed=!0}toObject=()=>({id:this.id,element:this.element,droppables:this.droppables,itemsDropped:this.itemsDropped,itemsInside:this.itemsInside});get rect(){if(!this.isDestroyed)return this._rect?this._rect:this._rect=this.element.getBoundingClientRect()}get itemsDropped(){if(!this.isDestroyed)return this._itemsDropped}get itemsInside(){if(!this.isDestroyed)return this._itemsInside||(this._itemsInside=this.droppables.flatMap((e=>{const t=this.DS.SelectableSet.rects.get(e);return this.rect&&p(t,this.rect,this.Settings.dropInsideThreshold)?[e]:[]})),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._itemsInside=void 0),this.Settings.refreshMemoryRate)),this._itemsInside}get parentNodes(){return this._parentNodes?this._parentNodes:this._parentNodes=s(this.element)}get droppables(){return this._droppables?this._droppables:this.DS.SelectableSet.elements}set droppables(e){this._droppables=e}}class b{_zoneByElement=new Map;_zoneById=new Map;_zonesByDroppable=new Map;_zones;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:dropZones",(({settings:e})=>this.setDropZones(e))),this.setDropZones({dropZones:this.Settings.dropZones}),this.PS.subscribe("Interaction:end",this.stop)}setDropZones=({dropZones:e})=>{e&&(this._zones&&this._zones.forEach((e=>e.destroy())),this._zones=e.map((e=>new m({DS:this.DS,PS:this.PS,...e}))),this._zones.forEach((e=>{this._zoneByElement.set(e.element,e),this._zoneById.set(e.id,e),e.droppables.forEach((t=>{const s=this._zonesByDroppable.get(t);if(!s?.length)return this._zonesByDroppable.set(t,[e]);this._zonesByDroppable.set(t,[...new Set([...s,e])])}))})))};_handleDrops=e=>{this._zones?.forEach((t=>{t!==e&&t.handleNoDrop()})),e&&e.handleDrop()};_getZoneByElementsFromPoint=(e,{x:t,y:s})=>{for(let i=0,r=e.length;i{if(!e)return;const i=this.getTarget({isDraggingKeyboard:t,event:s});this._handleDrops(i)};getItemsDroppedById=e=>{const t=this._zoneById.get(e);return t?t.itemsDropped:console.warn(`[DragSelect] No zone found (id: ${e})`)};getItemsInsideById=(e,t)=>{const s=this._zoneById.get(e);return s?(t&&s.handleItemsInsideClasses(),s.itemsInside):console.warn(`[DragSelect] No zone found (id: ${e})`)};getKeyboardItemCenter=(e,t)=>{if(!e||!t)return;const s=t.target?.getBoundingClientRect();return{x:s.left+s.width/2,y:s.top+s.height/2}};getTarget=({coordinates:e,isDraggingKeyboard:t,event:s})=>{if(!this._zones?.length)return;let i;!e&&t&&s&&(i=this.getKeyboardItemCenter(t,s));const r=e?.x||i?.x||this.DS.stores.PointerStore.currentVal.x,n=e?.y||i?.y||this.DS.stores.PointerStore.currentVal.y,o=document.elementsFromPoint(r,n);return this._getZoneByElementsFromPoint(o,{x:r,y:n})}}class y{isInteracting;isDragging=!1;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Settings:updated:area",(({settings:e})=>{this.removeAreaEventListeners(e["area:pre"]),this.setAreaEventListeners(e.area)})),this.PS.subscribe("PointerStore:updated",(({event:e})=>this.update({event:e}))),this.PS.subscribe("Selectable:click",this.onClick),this.PS.subscribe("Selectable:pointer",(({event:e})=>this.start(e))),this.PS.subscribe("Interaction:start:pre",(({event:e})=>this._start(e))),this.PS.subscribe("Interaction:init:pre",this._init),this.PS.subscribe("Interaction:end:pre",(({event:e})=>this._reset(e))),this.PS.subscribe("Area:scroll",this.update)}init=()=>this.PS.publish("Interaction:init:pre",{init:!0});_init=()=>{this.stop(),this.setAreaEventListeners(),this.PS.publish("Interaction:init",{init:!0})};_canInteract(e){const t="clientX"in e&&0===e.clientX&&0===e.clientY&&0===e.detail&&e.target;return!("button"in e&&2===e.button||this.isInteracting||e.target&&!this.DS.SelectorArea.isInside(e.target)||!t&&!this.DS.SelectorArea.isClicked(e))}start=e=>this.PS.publish("Interaction:start:pre",{event:e,isDragging:this.isDragging});_start=e=>{"touchstart"===e.type&&e.preventDefault(),this._canInteract(e)&&(this.isInteracting=!0,this.isDragging=this.isDragEvent(e),this.PS.publish("Interaction:start",{event:e,isDragging:this.isDragging}),this.setDocEventListeners())};isDragEvent=e=>{let t=null;return e.target&&"closest"in e.target&&(t=e.target.closest(`.${this.Settings.selectableClass}`)),!(!this.Settings.draggability||this.DS.stores.KeyStore.isMultiSelectKeyPressed(e)||!t)&&(this.Settings.immediateDrag&&(this.DS.SelectedSet.size?this.DS.SelectedSet.has(t)||(this.DS.SelectedSet.clear(),this.DS.SelectedSet.add(t)):this.DS.SelectedSet.add(t)),!!this.DS.SelectedSet.has(t))};onClick=({event:e})=>{if(!this._canInteract(e))return;if(e.detail>0)return;const{stores:{PointerStore:t,KeyStore:s},SelectableSet:i,SelectedSet:r}=this.DS;t.start(e);const n=e.target;n&&!i.has(n)||(s.isMultiSelectKeyPressed(e)||r.clear(),n&&r.toggle(n),this.reset(e))};stop=(e=this.DS.Area.HTMLNode)=>{this.removeAreaEventListeners(e),this.removeDocEventListeners()};update=({event:e,scroll_directions:t,scroll_multiplier:s})=>{this.isInteracting&&this.PS.publish(["Interaction:update:pre","Interaction:update"],{event:e,scroll_directions:t,scroll_multiplier:s,isDragging:this.isDragging})};reset=e=>this.PS.publish("Interaction:end:pre",{event:e,isDragging:this.isDragging});_reset=e=>{const{isDragging:t}=this;this.isInteracting=!1,this.isDragging=!1,this.removeDocEventListeners(),this.PS.publish("Interaction:end",{event:e,isDragging:t})};setAreaEventListeners=(e=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?e.addEventListener("pointerdown",this.start,{passive:!1}):e.addEventListener("mousedown",this.start),e.addEventListener("touchstart",this.start,{passive:!1})};removeAreaEventListeners=(e=this.DS.Area.HTMLNode)=>{this.Settings.usePointerEvents?e.removeEventListener("pointerdown",this.start,{passive:!1}):e.removeEventListener("mousedown",this.start),e.removeEventListener("touchstart",this.start,{passive:!1})};setDocEventListeners=()=>{this.Settings.usePointerEvents?(document.addEventListener("pointerup",this.reset),document.addEventListener("pointercancel",this.reset)):document.addEventListener("mouseup",this.reset),document.addEventListener("touchend",this.reset)};removeDocEventListeners=()=>{this.Settings.usePointerEvents?(document.removeEventListener("pointerup",this.reset),document.removeEventListener("pointercancel",this.reset)):document.removeEventListener("mouseup",this.reset),document.removeEventListener("touchend",this.reset)}}class D{_currentValues=new Set;_keyMapping={control:"ctrlKey",shift:"shiftKey",meta:"metaKey"};DS;PS;settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init)}init=()=>{document.addEventListener("keydown",this.keydown),document.addEventListener("keyup",this.keyup),window.addEventListener("blur",this.reset)};keydown=e=>{if(!e.key?.toLocaleLowerCase)return;const t=e.key.toLowerCase();this.PS.publish("KeyStore:down:pre",{event:e,key:t}),this._currentValues.add(t),this.PS.publish("KeyStore:down",{event:e,key:t})};keyup=e=>{if(!e.key?.toLocaleLowerCase)return;const t=e.key.toLowerCase();this.PS.publish("KeyStore:up:pre",{event:e,key:t}),this._currentValues.delete(t),this.PS.publish("KeyStore:up",{event:e,key:t})};stop=()=>{document.removeEventListener("keydown",this.keydown),document.removeEventListener("keyup",this.reset),window.removeEventListener("blur",this.reset),this.reset()};reset=()=>this._currentValues.clear();isMultiSelectKeyPressed(e){if(this.settings.multiSelectMode)return!0;const t=this.settings.multiSelectKeys?.map((e=>e.toLocaleLowerCase()))??[];return!!this.currentValues.some((e=>t.includes(e)))||!(!e||!t.some((t=>e[this._keyMapping[t]])))}get currentValues(){return Array.from(this._currentValues.values())}}class _{_isMouseInteraction=!1;_initialValArea={x:0,y:0};_currentValArea={x:0,y:0};_lastValArea={x:0,y:0};_initialVal={x:0,y:0};_currentVal={x:0,y:0};_lastVal={x:0,y:0};_lastTouch;DS;PS;settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({event:e})=>this.start(e))),this.PS.subscribe("Interaction:end",(({event:e})=>this.reset(e)))}init=()=>{this.settings.usePointerEvents?document.addEventListener("pointermove",this.update,{passive:!1}):document.addEventListener("mousemove",this.update),document.addEventListener("touchmove",this.update,{passive:!1})};start(e){e&&(this._isMouseInteraction=!0,this.currentVal=this.initialVal=this.getPointerPosition(e))}getPointerPosition=e=>(({event:e})=>({x:e.clientX,y:e.clientY}))({event:this._normalizedEvent(e)});update=e=>{e&&(this.PS.publish("PointerStore:updated:pre",{event:e}),this.currentVal=this.getPointerPosition(e),this._isMouseInteraction&&this.PS.publish("PointerStore:updated",{event:e}))};stop=()=>{this.settings.usePointerEvents?document.removeEventListener("pointermove",this.update,{passive:!1}):document.removeEventListener("mousemove",this.update),document.removeEventListener("touchmove",this.update,{passive:!1}),this.reset()};reset=e=>{this.currentVal=this.lastVal=this.getPointerPosition(e),setTimeout((()=>this._isMouseInteraction=!1),100)};_normalizedEvent(e){return!e||e instanceof KeyboardEvent?{clientX:0,clientY:0}:"touches"in e?("touchend"!==e.type&&(this._lastTouch=e),this._lastTouch?.touches[0]||e.touches[0]):e}get initialValArea(){return this._initialValArea?this._initialValArea:{x:0,y:0}}get currentValArea(){return this._currentValArea?this._currentValArea:{x:0,y:0}}get lastValArea(){return this._lastValArea?this._lastValArea:{x:0,y:0}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal?this._currentVal:{x:0,y:0}}get lastVal(){return this._lastVal?this._lastVal:{x:0,y:0}}set initialVal(e){this._initialVal=e,this._initialValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set currentVal(e){this._currentVal=e,this._currentValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}set lastVal(e){this._lastVal=e,this._lastValArea=e&&o(e,"-",o(l(this.DS.Area.rect),"+",l(this.DS.Area.computedBorder)))}}class v{subscribers={};DS;constructor({DS:e}){this.DS=e}subscribe=(e,t)=>{Array.isArray(this.subscribers[e])||(this.subscribers[e]=[]);const s=this.subscribers[e];return s.push(t),s.length-1};unsubscribe=(e,t,s)=>{const i=s??this.subscribers[e]?.findIndex((e=>e===t));this.subscribers[e]?.splice(Number(i),1)};publish=(e,t)=>{Array.isArray(e)?e.forEach((e=>this._publish(e,t))):this._publish(e,t)};_publish=(e,t)=>{const s=this.subscribers[e]??[];e.includes(":pre")?this._handlePrePublish(s,t):this._handlePublish(s,t)};_handlePublish=(e,t)=>{for(let s=0,i=e.length;s{let s=e.length;for(;s--;){if(this.DS.stopped)return;e[s]?.(t)}}}const P=()=>({y:document.body?.scrollTop||document.documentElement?.scrollTop||0,x:document.body?.scrollLeft||document.documentElement?.scrollLeft||0}),f=e=>!e||e instanceof Document?P():{x:e.scrollLeft>=0?e.scrollLeft:P().x,y:e.scrollTop>=0?e.scrollTop:P().y},I=e=>{const t=e.scrollTop,s=Boolean(e.scrollTop=1);return e.scrollTop=t,s};class L{_initialVal={x:0,y:0};_currentVal={x:0,y:0};_canScroll;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Area:modified",(()=>{this.stop(),this.init()})),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(()=>this.start())),this.PS.subscribe("Interaction:end",(()=>this.reset()))}init=()=>this.addListeners();addListeners=()=>this.DS.Area.HTMLNode.addEventListener("scroll",this.update);removeListeners=()=>this.DS.Area.HTMLNode.removeEventListener("scroll",this.update);start=()=>{this._currentVal=this._initialVal=f(this.DS.Area.HTMLNode)};update=()=>this._currentVal=f(this.DS.Area.HTMLNode);stop=()=>{this.reset(),this.removeListeners()};reset=()=>{this._initialVal={x:0,y:0},this._canScroll=void 0};get canScroll(){return"boolean"==typeof this._canScroll?this._canScroll:this._canScroll=(e=>{const t=f(e);return!(!t.x&&!t.y)||(e instanceof Document?e.body?I(e.body):I(e.documentElement):I(e))})(this.DS.Area.HTMLNode)}get scrollAmount(){const e=o(this.currentVal,"-",this.initialVal),t=h(this.Settings.zoom),s=o(o(e,"*",t),"-",e);return{x:e.x+s.x,y:e.y+s.y}}get initialVal(){return this._initialVal?this._initialVal:{x:0,y:0}}get currentVal(){return this._currentVal||(this._currentVal=f(this.DS.Area.HTMLNode)),this._currentVal}}class T extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){super(),this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Settings:updated:selectables",(()=>{this.clear(),this.init()})),this.PS.subscribe("Settings:updated:selectableClass",(({settings:e})=>{this.forEach((t=>{t.classList.remove(e["selectableClass:pre"]),t.classList.add(e.selectableClass)}))}))}init=()=>g(this.Settings.selectables).forEach((e=>this.add(e)));add(e){if(!e||super.has(e))return this;const t={items:this.elements,item:e};return this.PS.publish("Selectable:added:pre",t),e.classList.add(this.Settings.selectableClass),e.addEventListener("click",this._onClick),this.Settings.usePointerEvents?e.addEventListener("pointerdown",this._onPointer,{passive:!1}):e.addEventListener("mousedown",this._onPointer),e.addEventListener("touchstart",this._onPointer,{passive:!1}),this.Settings.draggability&&!this.Settings.useTransform&&i({computedStyle:window.getComputedStyle(e),node:e}),this.PS.publish("Selectable:added",t),super.add(e)}delete(e){if(!e||!super.has(e))return!0;const t={items:this.elements,item:e};return this.PS.publish("Selectable:removed:pre",t),e.classList.remove(this.Settings.selectableClass),e.classList.remove(this.Settings.hoverClass),e.removeEventListener("click",this._onClick),this.Settings.usePointerEvents?e.removeEventListener("pointerdown",this._onPointer,{passive:!1}):e.removeEventListener("mousedown",this._onPointer),e.removeEventListener("touchstart",this._onPointer,{passive:!1}),this.PS.publish("Selectable:removed",t),super.delete(e)}clear=()=>this.forEach((e=>this.delete(e)));_onClick=e=>this.PS.publish(["Selectable:click:pre","Selectable:click"],{event:e});_onPointer=e=>this.PS.publish(["Selectable:pointer:pre","Selectable:pointer"],{event:e});addAll=e=>e.forEach((e=>this.add(e)));deleteAll=e=>e.forEach((e=>this.delete(e)));getElementRect=e=>this._rects?this._rects.get(e):e.getBoundingClientRect();get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((e=>this._rects?.set(e,e.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}class E extends Set{_rects;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){super(),this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s}add(e){if(!e||super.has(e))return this;const t={items:this.elements,item:e};return this.PS.publish("Selected:added:pre",t),super.add(e),e.classList.add(this.Settings.selectedClass),this.Settings.useLayers&&(e.style.zIndex=`${(parseInt(e.style.zIndex)||0)+1}`),this.PS.publish("Selected:added",t),this}delete(e){if(!e||!super.has(e))return!0;const t={items:this.elements,item:e};this.PS.publish("Selected:removed:pre",t);const s=super.delete(e);return e.classList.remove(this.Settings.selectedClass),this.Settings.useLayers&&(e.style.zIndex=""+((parseInt(e.style.zIndex)||0)-1)),this.PS.publish("Selected:removed",t),s}clear=()=>this.forEach((e=>this.delete(e)));toggle(e){return this.has(e)?this.delete(e):this.add(e),e}addAll=e=>e.forEach((e=>this.add(e)));deleteAll=e=>e.forEach((e=>this.delete(e)));get elements(){return Array.from(this.values())}get rects(){return this._rects||(this._rects=new Map,this.forEach((e=>this._rects?.set(e,e.getBoundingClientRect()))),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._rects=void 0),this.Settings.refreshMemoryRate)),this._rects}}var C=(e,t)=>{t.left&&(e.style.left=`${t.left}px`),t.top&&(e.style.top=`${t.top}px`),t.width&&(e.style.width=`${t.width}px`),t.height&&(e.style.height=`${t.height}px`)};class x{_rect;DS;PS;Settings;HTMLNode;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=this.Settings.selector,this.PS.subscribe("Settings:updated:selectorClass",(({settings:e})=>{this.HTMLNode.classList.remove(e["selectorClass:pre"]),this.HTMLNode.classList.add(e.selectorClass)})),this.PS.subscribe("Settings:updated:selector",this.attachSelector),this.PS.subscribe("Settings:updated:customStyles",this.attachSelector),this.attachSelector(),this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update),this.PS.subscribe("Interaction:end",this.stop)}attachSelector=()=>{this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.removeChild(this.HTMLNode),this.HTMLNode=this.Settings.selector||(e=>{const t=document.createElement("div");return t.style.position="absolute",e||(t.style.background="rgba(0, 175, 255, 0.2)",t.style.border="1px solid rgba(0, 175, 255, 0.8)",t.style.display="none",t.style.pointerEvents="none"),t})(this.Settings.customStyles),this.HTMLNode.classList.add(this.Settings.selectorClass),this.HTMLNode&&this.DS.SelectorArea?.HTMLNode&&this.DS.SelectorArea.HTMLNode.appendChild(this.HTMLNode)};start=({isDragging:e})=>{if(e)return;const{stores:{PointerStore:t}}=this.DS,s=t.initialValArea;C(this.HTMLNode,a(s,1)),this.HTMLNode.style.display="block",this._rect=void 0};stop=()=>{this.HTMLNode.style.width="0",this.HTMLNode.style.height="0",this.HTMLNode.style.display="none"};update=({isDragging:e})=>{if(e||this.DS.continue)return;const{stores:{ScrollStore:t,PointerStore:s}}=this.DS,i=(({scrollAmount:e,initialPointerPos:t,pointerPos:s})=>{const i={};return s.x>t.x-e.x?(i.left=t.x-e.x,i.width=s.x-t.x+e.x):(i.left=s.x,i.width=t.x-s.x-e.x),s.y>t.y-e.y?(i.top=t.y-e.y,i.height=s.y-t.y+e.y):(i.top=s.y,i.height=t.y-s.y-e.y),i})({scrollAmount:t.scrollAmount,initialPointerPos:s.initialValArea,pointerPos:s.currentValArea});C(this.HTMLNode,i),this._rect=void 0};get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}class A{_prevSelectedSet=new Set;_boundingRect;_timeout;DS;PS;Settings;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.PS.subscribe("Interaction:start",this.start),this.PS.subscribe("Interaction:update",this.update)}_storePrevious(e){const{stores:{KeyStore:t},SelectedSet:s}=this.DS;t.isMultiSelectKeyPressed(e)?this._prevSelectedSet=new Set(s):this._prevSelectedSet=new Set}start=({event:e,isDragging:t})=>{t||(this._storePrevious(e),this._handleInsideSelection(!0,e))};update=({isDragging:e})=>{e||this.DS.continue||this._handleInsideSelection()};_handleInsideSelection=(e,t)=>{const{SelectableSet:s,SelectorArea:i,Selector:r}=this.DS,n=this.DS.stores.KeyStore.isMultiSelectKeyPressed(t)&&this.Settings.multiSelectToggling,o=this.Settings.selectionThreshold,l=s.rects,a=r.rect,h=new Map,c=new Map;for(const[e,t]of l)i.isInside(e,t)&&(p(t,a,o)?h.set(e,t):c.set(e,t));if(this.DS.continue)return;const{select:d,unselect:S}=this.filterSelected({select:h,unselect:c,selectorRect:a});d.forEach(((t,s)=>(({element:e,force:t,multiSelectionToggle:s,SelectedSet:i,hoverClassName:r})=>{e.classList.contains(r)&&!t||(i.has(e)?s&&i.delete(e):i.add(e),e.classList.add(r))})({element:s,force:e,multiSelectionToggle:n,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass}))),S.forEach(((t,s)=>(({element:e,force:t,SelectedSet:s,PrevSelectedSet:i,hoverClassName:r})=>{if(!e.classList.contains(r)&&!t)return;const n=s.has(e),o=i.has(e);n&&!o?s.delete(e):!n&&o&&s.add(e),e.classList.remove(r)})({element:s,force:e,SelectedSet:this.DS.SelectedSet,hoverClassName:this.Settings.hoverClass,PrevSelectedSet:this._prevSelectedSet})))};get boundingRect(){return this._boundingRect||(this._boundingRect=(e=>{const t={top:Number.POSITIVE_INFINITY,left:Number.POSITIVE_INFINITY,bottom:Number.NEGATIVE_INFINITY,right:Number.NEGATIVE_INFINITY,width:Number.NEGATIVE_INFINITY,height:Number.NEGATIVE_INFINITY};return e.rects.forEach((e=>{t.top=Math.min(t.top,e.top||t.top),t.left=Math.min(t.left,e.left||t.left),t.bottom=Math.max(t.bottom,e.bottom||t.bottom),t.right=Math.max(t.right,e.right||t.right)})),t.height=t.bottom-t.top,t.width=t.right-t.left,t})(this.DS.SelectedSet),this._timeout&&clearTimeout(this._timeout),this._timeout=setTimeout((()=>this._boundingRect=void 0),this.Settings.refreshMemoryRate)),this._boundingRect}filterSelected=({select:e,unselect:t,selectorRect:s})=>({select:e,unselect:t})}class w{_scrollInterval;_rect;currentEdges=[];DS;PS;Settings;HTMLNode;constructor({DS:e,PS:t}){this.DS=e,this.PS=t,this.Settings=this.DS.stores.SettingsStore.s,this.HTMLNode=(()=>{const e=document.createElement("div");return e.style.position="fixed",e.style.overflow="hidden",e.style.pointerEvents="none",e.style.zIndex="999999999999999999",e})(),this.PS.subscribe("Settings:updated:selectorAreaClass",(({settings:e})=>{this.HTMLNode.classList.remove(e["selectorAreaClass:pre"]),this.HTMLNode.classList.add(e.selectorAreaClass)})),this.HTMLNode.classList.add(this.Settings.selectorAreaClass),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Area:modified",this.updatePos),this.PS.subscribe("Interaction:init",this.init),this.PS.subscribe("Interaction:start",(({isDraggingKeyboard:e})=>this.startAutoScroll({isDraggingKeyboard:e}))),this.PS.subscribe("Interaction:end",(()=>{this.updatePos(),this.stopAutoScroll()}))}init=()=>{this.applyElements("append"),this.updatePos()};applyElements=e=>{const t=document.body?"body":"documentElement",s=`${e}Child`;this.HTMLNode[s](this.DS.Selector.HTMLNode),document[t][s](this.HTMLNode)};updatePos=()=>{this._rect=void 0;const e=this.DS.Area.rect,t=this.DS.Area.computedBorder,{style:s}=this.HTMLNode,i=`${e.top+t.top}px`,r=`${e.left+t.left}px`,n=`${e.width}px`,o=`${e.height}px`;s.top!==i&&(s.top=i),s.left!==r&&(s.left=r),s.width!==n&&(s.width=n),s.height!==o&&(s.height=o)};stop=e=>{this.stopAutoScroll(),e&&this.applyElements("remove")};startAutoScroll=({isDraggingKeyboard:e})=>{e||(this.currentEdges=[],this._scrollInterval=setInterval((()=>this.handleAutoScroll()),16))};handleAutoScroll=()=>{if(this.DS.continue)return;const{stores:{PointerStore:e},Area:t}=this.DS;this.currentEdges=(({elementRect:e,containerRect:t,tolerance:s={x:0,y:0}})=>{const i=[];return e.top-s.yt.bottom&&i.push("bottom"),e.right+s.y>t.right&&i.push("right"),i})({elementRect:a(e.currentVal),containerRect:this.rect,tolerance:this.Settings.overflowTolerance}),this.currentEdges.length&&t.scroll(this.currentEdges,this.Settings.autoScrollSpeed)};stopAutoScroll=()=>{this.currentEdges=[],clearInterval(this._scrollInterval)};isInside=(e,t)=>!(!this.DS.Area.HTMLNode.contains(e)||!this.DS.stores.ScrollStore.canScroll)||p(this.rect,t||e.getBoundingClientRect());isClicked(e){const{stores:{PointerStore:t}}=this.DS,s=e?t.getPointerPosition(e):t.initialVal;return p({left:s.x,top:s.y,right:s.x,bottom:s.y},this.rect)}get rect(){return this._rect?this._rect:this._rect=this.HTMLNode.getBoundingClientRect()}}const N=(e,t)=>console.warn(`[DragSelect] TypeIssue: setting "${e}" is not of type "${t}".`),M=(e,t,s,i)=>{if(void 0===t)return s?{[e]:i}:{};if(null===t)return{[e]:null};let r=!0,n=!1;const o="string"==typeof i;o&&(r="string"==typeof t||t instanceof String),o&&!r&&(n=!0,N(e,"string"));const l=!Number.isNaN(i)&&"number"==typeof i;l&&(r=!Number.isNaN(t)&&"number"==typeof t),l&&!r&&(n=!0,N(e,"number"));const a="[object Object]"===Object.prototype.toString.call(i);a&&(r="[object Object]"===Object.prototype.toString.call(t)),a&&!r&&(n=!0,N(e,"object"));const h="boolean"==typeof i;h&&(r="boolean"==typeof t),h&&!r&&(n=!0,N(e,"boolean"));const c=Array.isArray(i);c&&(r=Array.isArray(t)),c&&!r&&(n=!0,N(e,"array"));const d=n||s;return"dragKeys"===e&&r?{[e]:Object.assign(i,t)}:"dragKeys"!==e||r?("dropZones"===e&&r&&Array.isArray(t)&&new Set(t.map((e=>e.id))).size!==t.length&&console.warn('[DragSelect] UniqueConstraintsIssue: setting "dropZones" contains duplicate ids.'),r?{[e]:t}:d?{[e]:i}:{}):d?{[e]:i}:{}};class V{_settings={};s={};PS;constructor({PS:e,settings:t}){this.PS=e,this.update({settings:t,init:!0})}update=({settings:e,init:t})=>{this.PS.publish("Settings:updated:pre",{settings:this._settings,"settings:init":Boolean(t),"settings:new":e}),this._update({settings:e,init:t})};_update=({settings:e={},init:t=!1})=>{const s=((e,t)=>({...M("area",e.area,t,document),...M("selectables",e.selectables,t,null),...M("autoScrollSpeed",e.autoScrollSpeed,t,5),...M("overflowTolerance",e.overflowTolerance,t,{x:25,y:25}),...M("zoom",e.zoom,t,1),...M("customStyles",e.customStyles,t,!1),...M("multiSelectMode",e.multiSelectMode,t,!1),...M("multiSelectToggling",e.multiSelectToggling,t,!0),...M("multiSelectKeys",e.multiSelectKeys,t,["Control","Shift","Meta"]),...M("selector",e.selector,t,null),...M("selectionThreshold",e.selectionThreshold,t,0),...M("draggability",e.draggability,t,!0),...M("immediateDrag",e.immediateDrag,t,!0),...M("keyboardDrag",e.keyboardDrag,t,!0),...M("dragKeys",e.dragKeys,t,{up:["ArrowUp"],down:["ArrowDown"],left:["ArrowLeft"],right:["ArrowRight"]}),...M("keyboardDragSpeed",e.keyboardDragSpeed,t,10),...M("useTransform",e.useTransform,t,!0),...M("refreshMemoryRate",e.refreshMemoryRate,t,80),...M("dropZones",e.dropZones,t,[]),...M("dropInsideThreshold",e.dropInsideThreshold,t,1),...M("dropTargetThreshold",e.dropTargetThreshold,t,0),...M("usePointerEvents",e.usePointerEvents,t,!1),...M("hoverClass",e.hoverClass,t,"ds-hover"),...M("selectableClass",e.selectableClass,t,"ds-selectable"),...M("selectedClass",e.selectedClass,t,"ds-selected"),...M("selectorClass",e.selectorClass,t,"ds-selector"),...M("selectorAreaClass",e.selectorAreaClass,t,"ds-selector-area"),...M("droppedTargetClass",e.droppedTargetClass,t,"ds-dropped-target"),...M("droppedInsideClass",e.droppedInsideClass,t,"ds-dropped-inside"),...M("droppableClass",e.droppableClass,t,"ds-droppable"),...M("dropZoneClass",e.dropZoneClass,t,"ds-dropzone"),...M("dropZoneReadyClass",e.dropZoneReadyClass,t,"ds-dropzone-ready"),...M("dropZoneTargetClass",e.dropZoneTargetClass,t,"ds-dropzone-target"),...M("dropZoneInsideClass",e.dropZoneInsideClass,t,"ds-dropzone-inside"),...M("useLayers",e.useLayers,t,!0)}))(e,t);for(const[i,r]of Object.entries(s))((s,i)=>{s in this._settings||Object.defineProperty(this.s,s,{get:()=>this._settings[s],set:e=>this.update({settings:{[s]:e}})}),this._settings[`${s}:pre`]=this._settings[s],this._settings[s]=i;const r={settings:this._settings,"settings:init":t,"settings:new":e};this.PS.publish("Settings:updated",r),this.PS.publish(`Settings:updated:${s}`,r)})(i,r)}}const K={elementselect:"DS:select",elementunselect:"DS:unselect",autoscroll:"DS:scroll",dragstart:"DS:start",dragmove:"DS:update",callback:"DS:end",preelementselect:"DS:select:pre",preelementunselect:"DS:unselect:pre",preautoscroll:"DS:scroll:pre",predragstart:"DS:start:pre",predragmove:"DS:update:pre",precallback:"DS:end:pre"},k=(e,t)=>{const s=t.DropZones.getTarget(e);return{...e,...s?{dropTarget:s.toObject()}:{}}},H=({sub_name:e,DS:t,PS:s,sub_pubs:i})=>{s.subscribe(e,(e=>i.forEach((s=>$({sub_pub:s,data:e,DS:t})))))},$=({sub_pub:e,data:t,DS:s})=>{const i=e.condition?e.condition(t,s):t;if(i){const r=e.extraData&&e.extraData(t,s)||{};s.publish(e.name,{items:s.SelectedSet.elements,isDragging:s.Interaction.isDragging,...i,...r})}};class R{continue=!1;PubSub;stores;Area;Selector;SelectorArea;SelectableSet;SelectedSet;Selection;Drag;DropZones;Interaction;stopped;constructor(e){this.stopped=!1,this.PubSub=new v({DS:this}),this.stores={},this.stores.SettingsStore=new V({settings:e,PS:this.PubSub}),this.stores.PointerStore=new _({DS:this,PS:this.PubSub}),this.stores.ScrollStore=new L({DS:this,PS:this.PubSub}),this.stores.KeyStore=new D({DS:this,PS:this.PubSub}),this.Area=new n({DS:this,PS:this.PubSub}),this.Selector=new x({DS:this,PS:this.PubSub}),this.SelectorArea=new w({DS:this,PS:this.PubSub}),this.SelectableSet=new T({DS:this,PS:this.PubSub}),this.SelectedSet=new E({DS:this,PS:this.PubSub}),this.Selection=new A({DS:this,PS:this.PubSub}),this.Drag=new u({DS:this,PS:this.PubSub}),this.DropZones=new b({DS:this,PS:this.PubSub}),this.Interaction=new y({DS:this,PS:this.PubSub}),(({PS:e,DS:t})=>{const s={"Selected:added":[{name:"preelementselect"},{name:"elementselect"},{name:"DS:select:pre"},{name:"DS:select"}],"Selected:removed":[{name:"preelementunselect"},{name:"elementunselect"},{name:"DS:unselect:pre"},{name:"DS:unselect"}],"Selectable:added":[{name:"DS:added:pre"},{name:"DS:added"}],"Selectable:removed":[{name:"DS:removed:pre"},{name:"DS:removed"}],"Area:scroll":[{name:"preautoscroll"},{name:"autoscroll"},{name:"DS:scroll:pre"},{name:"DS:scroll"}],"Interaction:start":[{name:"predragstart"},{name:"dragstart"},{name:"DS:start:pre"},{name:"DS:start"}],"Interaction:update":[{name:"predragmove",condition:e=>e.event?e:null},{name:"dragmove",condition:e=>e.event?e:null},{name:"DS:update:pre",condition:e=>e.event?e:null},{name:"DS:update",condition:e=>e.event?e:null}],"Interaction:end":[{name:"precallback",extraData:(e,t)=>k(e,t)},{name:"callback",extraData:(e,t)=>k(e,t)},{name:"DS:end:pre",extraData:(e,t)=>k(e,t)},{name:"DS:end",extraData:(e,t)=>k(e,t)}]};for(const[i,r]of Object.entries(s))H({sub_name:i,sub_pubs:r,DS:t,PS:e})})({DS:this,PS:this.PubSub}),this.PubSub.subscribe("Interaction:end",(()=>this.continue=!1)),this.PubSub.subscribe("DS:end",(({items:e})=>this.continue=!1)),this.start()}static isCollision;subscribe=(e,t)=>{K[e]&&console.warn(`[DragSelect]: The event name "${e}" is deprecated and was/will be removed in a future version. Please use the new event name "${K[e]}" instead.`),this.PubSub.subscribe(e,t)};unsubscribe=(e,t,s)=>this.PubSub.unsubscribe(e,t,s);publish=(e,t)=>this.PubSub.publish(e,t);start=()=>{this.stopped=!1,this.Interaction.init()};stop(e=!0,t=!0,s=!1){s&&this.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.Interaction.stop(),this.Area.stop(),this.Drag.stop(),this.Selector.stop(),this.SelectorArea.stop(e),this.stores.KeyStore.stop(),this.stores.PointerStore.stop(),this.stores.ScrollStore.stop(),e&&this.SelectableSet.clear(),t&&this.SelectedSet.clear(),this.stopped=!0}break=()=>this.continue=!0;setSettings=e=>this.stores.SettingsStore.update({settings:e});getSelection=()=>this.SelectedSet.elements;addSelection(e,t=!1,s=!1){const i=g(e);return this.SelectedSet.addAll(i),s||this.addSelectables(e,!1,!1),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}removeSelection(e,t=!1,s=!1){const i=g(e);return this.SelectedSet.deleteAll(i),s&&this.removeSelectables(e,!1,!1),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}toggleSelection(e,t=!1,s=!1){return g(e).forEach((i=>this.SelectedSet.has(i)?this.removeSelection(e,t,s):this.addSelection(e,t,s))),t&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}setSelection(e,t=!1,s=!1){return this.clearSelection(),this.addSelection(e,t,s),this.getSelection()}clearSelection(e=!1){return this.SelectedSet.clear(),e&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),this.getSelection()}addSelectables(e,t,s){const i=g(e);return this.SelectableSet.addAll(i),t&&this.SelectedSet.addAll(i),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getSelectables=()=>this.SelectableSet.elements;removeSelectables(e,t,s){const i=g(e);return this.SelectableSet.deleteAll(i),t&&this.removeSelection(e),s&&this.PubSub.publish("DS:end",{items:this.SelectedSet.elements,isDragging:this.Interaction.isDragging}),i}getInitialCursorPosition=()=>this.stores.PointerStore.initialVal;getCurrentCursorPosition=()=>this.stores.PointerStore.currentVal;getPreviousCursorPosition=()=>this.stores.PointerStore.lastVal;getInitialCursorPositionArea=()=>this.stores.PointerStore.initialValArea;getCurrentCursorPositionArea=()=>this.stores.PointerStore.currentValArea;getPreviousCursorPositionArea=()=>this.stores.PointerStore.lastValArea;isMultiSelect=e=>this.stores.KeyStore.isMultiSelectKeyPressed(e);isDragging=()=>this.Interaction.isDragging;getZoneByCoordinates=e=>this.DropZones.getTarget({coordinates:e})?.toObject();getItemsDroppedByZoneId=e=>this.DropZones.getItemsDroppedById(e);getItemsInsideByZoneId=(e,t)=>this.DropZones.getItemsInsideById(e,t)}return R.isCollision=p,R})); \ No newline at end of file diff --git a/index.html b/index.html index 2ec90095..2ceb60e5 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,13 @@ - +
-
DragSelect

DragSelect

Easy javascript Drag-Select & Drop functionality done right.

Getting Started
|
Pricing
Licensing | Github | NPM | Docs
Star
Sponsor
(CEO:Responsibilities)
File
Edit
View
Help
(CEO:Responsibilities)
Approve
Reject
0 object(s)
0MB
Get started | Licensing | Github | NPM | Docs
Star
Sponsor
- +
DragSelect

DragSelect

Easy javascript Drag-Select & Drop functionality done right.

Getting Started
|
Pricing
Licensing | Github | NPM | Docs
Star
Sponsor
(CEO:Responsibilities)
File
Edit
View
Help
(CEO:Responsibilities)
Approve
Reject
0 object(s)
0MB
Get started | Licensing | Github | NPM | Docs
Star
Sponsor
+ \ No newline at end of file diff --git a/licenses.html b/licenses.html index 3af798da..3f153159 100644 --- a/licenses.html +++ b/licenses.html @@ -9,13 +9,13 @@ - +
DragSelect

Pricing: Free

DragSelect is, and will forever be, a free and open-source tool. Free for any non-commercial project. However, this is a lot of work and hard work should be rewarded, so if you are using DragSelect for business and/or commercial sites, projects, and applications you’ll have to get the commercial license to keep your source proprietary and the project alive.

Commercial licenses

Startup

$29/lifetime

For personal use and small teams

  • Five team members
  • One product per company
  • Can't use in a product for sale*
  • Regular GitHub support
  • Lifetime free updates

Purchase Now

Enterprise

$299/lifetime

Extended Commercial License for large teams & organizations

  • Unlimited team members
  • Unlimited products per company
  • Can use in a product for sale*
  • Priority GitHub support
  • Lifetime free updates

Purchase Now

*If you want to include DragSelect as part of a product that is for sale, a software developer kit (SDK), web application builder or website builder, downloadable or installable products like Wordpress themes, HTML templates, or something that produces copies that each use DragSelect, you need to choose the Enterprise license.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3. Questions? Read the GPL FAQ. or this blog post. Basically, if your project is not commercial, no need to worry.

Student discount

If you are a student currently enrolled in a College or University, write me via thibault.beyer@gmail.com to get a free license.

Earning Distribution

All earnings from enterprise licenses are distributed on a yearly basis to all contributors of DragSelect according to their overall percentual contribution

Key Points

Please find the key points of the commercial license below. If you have any more questions, please contact at thibault.beyer@gmail.com

Team member

The Commercial license "Startup" is priced per team member. A team member is an individual person permitted to make modifications for your applications that uses DragSelect, whether such person is your employee or a consultant or contractor providing services to you. One startup license includes 5 team members: this means you buy one startup license per 5 team members. The enterprise license however has no limits: this means you only buy the enterprise license once no matter how big your company is.

Free updates

You are entitled to receive all updates up to the major version of DragSelect as well as later versions as permitted.

Usage in saleable products

You need an Enterprise license to use DragSelect in a product which end users can be charged for.

Number of products

With any license, DragSelect can be used as part of a single product.

Reselling

DragSelect cannot be used in a product offered for sale, where DragSelect contributes to the core value of the product being sold. If you like to build something based on DragSelect such as a pro WordPress plugin for DragSelect, please reach out to us at thibault.beyer@gmail.com. DragSelect may not be used for re-selling, sub-licensing, or sharing purposes, and cannot otherwise be redistributed on its own (even for free).

Unlimited time

The commercial License is not limited in time. Once you purchase a license, you can use if for lifetime under the terms of the particular license.

No exclusivity

The commercial License is not exclusive and other buyers may purchase DragSelect.

Support

Organization and team license holders will get faster response and priority for reported issues and questions

All official plugins included

Along with DragSelect, you get access to all DragSelect official plugins listed on the official website

Get started | Licensing | Github | NPM | Docs
Star
Sponsor
- + \ No newline at end of file diff --git a/search.html b/search.html index 06d232c2..38dfb335 100644 --- a/search.html +++ b/search.html @@ -9,7 +9,7 @@ - + @@ -17,7 +17,7 @@

Search the documentation

- + \ No newline at end of file