snap-dnd 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/snap.core.js +4 -4
- package/dist/snap.esm.js +4 -4
- package/package.json +1 -1
package/dist/snap.core.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var p=class{constructor(){this._listeners=new Map}on(e,t){let n=this._listeners.get(e);return n||(n=new Set,this._listeners.set(e,n)),n.add(t),()=>{n.delete(t),n.size===0&&this._listeners.delete(e)}}once(e,t){let n=this.on(e,i=>{n(),t(i)});return n}emit(e,t){let n=this._listeners.get(e);if(n)for(let i of[...n])i(t)}off(e){e?this._listeners.delete(e):this._listeners.clear()}hasListeners(e){let t=this._listeners.get(e);return t!==void 0&&t.size>0}listenerCount(e){return this._listeners.get(e)?.size??0}destroy(){this._listeners.clear()}};var E=class o{constructor(){this._data=new Map}setData(e,t){this._data.set(e,t)}getData(e){return this._data.get(e)}hasType(e){return this._data.has(e)}get types(){return[...this._data.keys()]}clear(){this._data.clear()}clone(){let e=new o;for(let[t,n]of this._data)e.setData(t,n);return e}};var c=class extends p{constructor(){super(...arguments);this._session=null;this._idCounter=0}get session(){return this._session}isDragging(){return this._session!==null&&this._session.phase==="dragging"}getActiveElement(){return this._session?.element??null}getCurrentDropZone(){return this._session?.dropZone??null}startDrag(t,n,i){this._session&&this.cancelDrag();let s=new E;if(i)for(let[a,h]of Object.entries(i))s.setData(a,h);return this._session={id:`drag-${++this._idCounter}`,element:t,origin:{x:n.x,y:n.y},current:{x:n.x,y:n.y},delta:{x:0,y:0},data:s,dropZone:null,phase:"dragging"},this.emit("dragstart",this._session),this._session}updatePosition(t){!this._session||this._session.phase!=="dragging"||(this._session.current.x=t.x,this._session.current.y=t.y,this._session.delta.x=t.x-this._session.origin.x,this._session.delta.y=t.y-this._session.origin.y,this.emit("dragmove",this._session))}setDropTarget(t){if(!this._session)return;let n=this._session.dropZone;n!==t&&(n&&(this._session.dropZone=null,this.emit("dropzoneleave",this._session)),t&&(this._session.dropZone=t,this.emit("dropzoneenter",this._session)))}endDrag(){if(!this._session)return null;let t=this._session;return t.phase="dropping",t.dropZone&&this.emit("drop",t),this.emit("dragend",t),this._session=null,t}cancelDrag(){if(!this._session)return null;let t=this._session;return t.phase="cancelled",t.dropZone=null,this.emit("dragend",t),this._session=null,t}subscribe(t,n){return this.on(t,n)}reset(){this._session&&this.cancelDrag()}destroy(){this.reset(),super.destroy()}};var y=class{constructor(e){this._rafId=null;this._pending=null;this._process=()=>{if(this._rafId=null,this._pending!==null){let e=this._pending;this._pending=null,this._callback(e)}};this._callback=e}queue(e){this._pending=e,this._rafId===null&&(this._rafId=requestAnimationFrame(this._process))}cancel(){this._rafId!==null&&(cancelAnimationFrame(this._rafId),this._rafId=null),this._pending=null}flush(){this._pending!==null&&(this.cancel(),this._callback(this._pending),this._pending=null)}get isPending(){return this._rafId!==null}destroy(){this.cancel()}};var D=class{constructor(e,t,n=10,i=100){this._pool=[];this._factory=e,this._reset=t,this._maxSize=i;for(let s=0;s<n;s++)this._pool.push(e())}acquire(){return this._pool.pop()??this._factory()}release(e){this._pool.length<this._maxSize&&(this._reset(e),this._pool.push(e))}clear(){this._pool.length=0}get size(){return this._pool.length}},_=new D(()=>({x:0,y:0}),o=>{o.x=0,o.y=0}),j=new D(()=>({x:0,y:0,width:0,height:0}),o=>{o.x=0,o.y=0,o.width=0,o.height=0});function d(o,e){let t=_.acquire();return t.x=o,t.y=e,t}var x=class extends p{constructor(t){super();this._attached=!1;this._activePointerId=null;this._activeElement=null;this._startPosition=null;this._isDragging=!1;this._delayTimer=null;this._onPointerDown=t=>{if(!t.isPrimary||t.button!==0||this._activePointerId!==null)return;let n=this._findDraggable(t);if(!n||this._options.handleSelector&&!this._findHandle(t,n))return;t.preventDefault(),this._activePointerId=t.pointerId,this._activeElement=n,this._startPosition=d(t.clientX,t.clientY),this._isDragging=!1,t.target.setPointerCapture(t.pointerId);let i=this._getEventTarget();i.addEventListener("pointermove",this._onPointerMove,{passive:!0}),i.addEventListener("pointerup",this._onPointerUp),i.addEventListener("pointercancel",this._onPointerCancel);let s=this._options.delay??0;s>0?this._delayTimer=window.setTimeout(()=>{this._delayTimer=null,this._startDrag(t)},s):(this._options.distance??0)===0&&this._startDrag(t)};this._onPointerMove=t=>{t.pointerId===this._activePointerId&&this._moveThrottle.queue(t)};this._processMove=t=>{if(!this._startPosition||!this._activeElement)return;let n=d(t.clientX,t.clientY);if(!this._isDragging){let i=this._options.distance??0;if(i>0){let s=n.x-this._startPosition.x,a=n.y-this._startPosition.y;if(Math.sqrt(s*s+a*a)<i){_.release(n);return}this._clearDelayTimer(),this._startDrag(t)}}if(this._isDragging){let i=d(n.x-this._startPosition.x,n.y-this._startPosition.y);this.emit("pointermove",{position:n,delta:i,pointerId:t.pointerId,originalEvent:t})}else _.release(n)};this._onPointerUp=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.flush(),this._isDragging&&this.emit("pointerup",{position:d(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._onPointerCancel=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.cancel(),this._isDragging&&this.emit("pointercancel",{position:d(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._container=t.container,this._options=t,this._moveThrottle=new y(n=>this._processMove(n))}attach(){if(this._attached)return;this._getEventTarget().addEventListener("pointerdown",this._onPointerDown,{passive:!1}),this._attached=!0}detach(){if(!this._attached)return;this._getEventTarget().removeEventListener("pointerdown",this._onPointerDown),this._cleanup(),this._attached=!1}get isActive(){return this._activePointerId!==null}get isDragging(){return this._isDragging}_getEventTarget(){return this._container instanceof ShadowRoot?this._container.host:this._container}_startDrag(t){this._isDragging||!this._activeElement||!this._startPosition||(this._isDragging=!0,this.emit("pointerdown",{element:this._activeElement,position:{x:this._startPosition.x,y:this._startPosition.y},pointerId:t.pointerId,originalEvent:t}))}_findDraggable(t){let n=t.target,i=t.composedPath();for(let s of i)if(s instanceof HTMLElement){if(s.matches(this._options.draggableSelector))return s;if(s===this._container||s===this._container.host)break}return n.closest?.(this._options.draggableSelector)}_findHandle(t,n){if(!this._options.handleSelector)return n;let s=t.target.closest?.(this._options.handleSelector);return s&&n.contains(s)?s:null}_clearDelayTimer(){this._delayTimer!==null&&(clearTimeout(this._delayTimer),this._delayTimer=null)}_cleanup(){this._clearDelayTimer(),this._moveThrottle.cancel(),this._startPosition&&(_.release(this._startPosition),this._startPosition=null);let t=this._getEventTarget();t.removeEventListener("pointermove",this._onPointerMove),t.removeEventListener("pointerup",this._onPointerUp),t.removeEventListener("pointercancel",this._onPointerCancel),this._activePointerId=null,this._activeElement=null,this._isDragging=!1}destroy(){this.detach(),this._moveThrottle.destroy(),super.destroy()}};var L=class{constructor(){this._cache=new WeakMap;this._dirty=new WeakSet;this._invalidateAll=!1}get(e){if(this._invalidateAll||this._dirty.has(e))return this._update(e);let t=this._cache.get(e);return t||this._update(e)}invalidate(e){this._dirty.add(e)}invalidateAll(){this._invalidateAll=!0}update(e){return this._update(e)}remove(e){this._cache.delete(e)}clearDirty(){this._invalidateAll=!1}_update(e){let t=e.getBoundingClientRect();return this._cache.set(e,t),this._dirty.delete(e),t}},r=new L;function T(o,e,t){return o>=t.left&&o<=t.right&&e>=t.top&&e<=t.bottom}function H(o){return{x:o.left+o.width/2,y:o.top+o.height/2}}var P=class{constructor(e){this._enabled=!1;this._listenerUnsubscribers=[];this._ghost=null;this._ghostOffset={x:0,y:0};this._onPointerDown=e=>{let{element:t,position:n}=e,i=this._getItemData(t)??this._extractDataAttributes(t),s=this._state.startDrag(t,n,i),a={element:t,position:{x:n.x,y:n.y},data:s.data,cancel:()=>{this._state.cancelDrag()}};if(this._options.onDragStart?.(a)===!1){this._state.cancelDrag();return}this._createGhost(t,n),t.classList.add("snap-dragging"),this._options.ghostClass&&t.classList.add(this._options.ghostClass),r.invalidateAll()};this._onPointerMove=e=>{let t=this._state.session;if(!t)return;let{position:n}=e,i=this._getItemAxis(t.element)??this._options.axis??"both";i!=="both"&&(n=this._applyAxisConstraint(n,t.origin,i)),this._options.grid&&(n=this._applyGridSnap(n,this._options.grid)),this._state.updatePosition(n),this._updateGhost(n),this._updateDropZone(n),this._options.onDragMove?.({element:t.element,position:{x:t.current.x,y:t.current.y},delta:{x:t.delta.x,y:t.delta.y},dropZone:t.dropZone})};this._onPointerUp=e=>{if(!this._state.session)return;let n=this._state.endDrag();n&&(this._cleanup(n.element),n.dropZone&&this._options.onDrop?.({element:n.element,dropZone:n.dropZone,position:{x:n.current.x,y:n.current.y},data:n.data}),this._options.onDragEnd?.({element:n.element,position:{x:n.current.x,y:n.current.y},delta:{x:n.delta.x,y:n.delta.y},cancelled:!1}))};this._onPointerCancel=e=>{let t=this._state.session;if(!t)return;let n=t.element;this._state.cancelDrag(),this._cleanup(n),this._options.onDragEnd?.({element:n,position:e.position,delta:{x:0,y:0},cancelled:!0})};this._container=e.container,this._state=e.state,this._options=e.options,this._getDropZones=e.getDropZones,this._getItemData=e.getItemData,this._getItemAxis=e.getItemAxis,this._pointerSensor=new x({container:this._container,draggableSelector:this._options.draggableSelector??"[data-draggable]",handleSelector:this._options.handleSelector,delay:this._options.delay,distance:this._options.distance}),this._setupListeners()}enable(){this._enabled||(this._pointerSensor.attach(),this._enabled=!0)}disable(){this._enabled&&(this._pointerSensor.detach(),this._state.reset(),this._removeGhost(),this._enabled=!1)}get isEnabled(){return this._enabled}updateOptions(e){Object.assign(this._options,e)}_setupListeners(){this._listenerUnsubscribers.push(this._pointerSensor.on("pointerdown",this._onPointerDown),this._pointerSensor.on("pointermove",this._onPointerMove),this._pointerSensor.on("pointerup",this._onPointerUp),this._pointerSensor.on("pointercancel",this._onPointerCancel))}_applyAxisConstraint(e,t,n){return n==="x"?{x:e.x,y:t.y}:n==="y"?{x:t.x,y:e.y}:e}_applyGridSnap(e,t){return{x:Math.round(e.x/t.x)*t.x,y:Math.round(e.y/t.y)*t.y}}_updateDropZone(e){let t=this._getDropZones(),n=null;for(let s of t){let a=r.get(s);if(T(e.x,e.y,a)){n=s;break}}let i=this._state.session;i&&n!==i.dropZone&&(i.dropZone&&this._options.onDropZoneLeave?.({element:i.element,dropZone:i.dropZone}),this._state.setDropTarget(n),n&&this._options.onDropZoneEnter?.({element:i.element,dropZone:n,position:e}))}_createGhost(e,t){let n=e.getBoundingClientRect();this._ghostOffset={x:t.x-n.left,y:t.y-n.top},this._ghost=e.cloneNode(!0),this._ghost.style.cssText=`
|
|
1
|
+
var p=class{constructor(){this._listeners=new Map}on(e,t){let n=this._listeners.get(e);return n||(n=new Set,this._listeners.set(e,n)),n.add(t),()=>{n.delete(t),n.size===0&&this._listeners.delete(e)}}once(e,t){let n=this.on(e,i=>{n(),t(i)});return n}emit(e,t){let n=this._listeners.get(e);if(n)for(let i of[...n])i(t)}off(e){e?this._listeners.delete(e):this._listeners.clear()}hasListeners(e){let t=this._listeners.get(e);return t!==void 0&&t.size>0}listenerCount(e){return this._listeners.get(e)?.size??0}destroy(){this._listeners.clear()}};var E=class o{constructor(){this._data=new Map}setData(e,t){this._data.set(e,t)}getData(e){return this._data.get(e)}hasType(e){return this._data.has(e)}get types(){return[...this._data.keys()]}clear(){this._data.clear()}clone(){let e=new o;for(let[t,n]of this._data)e.setData(t,n);return e}};var c=class extends p{constructor(){super(...arguments);this._session=null;this._idCounter=0}get session(){return this._session}isDragging(){return this._session!==null&&this._session.phase==="dragging"}getActiveElement(){return this._session?.element??null}getCurrentDropZone(){return this._session?.dropZone??null}startDrag(t,n,i){this._session&&this.cancelDrag();let s=new E;if(i)for(let[a,h]of Object.entries(i))s.setData(a,h);return this._session={id:`drag-${++this._idCounter}`,element:t,origin:{x:n.x,y:n.y},current:{x:n.x,y:n.y},delta:{x:0,y:0},data:s,dropZone:null,phase:"dragging"},this.emit("dragstart",this._session),this._session}updatePosition(t){!this._session||this._session.phase!=="dragging"||(this._session.current.x=t.x,this._session.current.y=t.y,this._session.delta.x=t.x-this._session.origin.x,this._session.delta.y=t.y-this._session.origin.y,this.emit("dragmove",this._session))}setDropTarget(t){if(!this._session)return;let n=this._session.dropZone;n!==t&&(n&&(this._session.dropZone=null,this.emit("dropzoneleave",this._session)),t&&(this._session.dropZone=t,this.emit("dropzoneenter",this._session)))}endDrag(){if(!this._session)return null;let t=this._session;return t.phase="dropping",t.dropZone&&this.emit("drop",t),this.emit("dragend",t),this._session=null,t}cancelDrag(){if(!this._session)return null;let t=this._session;return t.phase="cancelled",t.dropZone=null,this.emit("dragend",t),this._session=null,t}subscribe(t,n){return this.on(t,n)}reset(){this._session&&this.cancelDrag()}destroy(){this.reset(),super.destroy()}};var y=class{constructor(e){this._rafId=null;this._pending=null;this._process=()=>{if(this._rafId=null,this._pending!==null){let e=this._pending;this._pending=null,this._callback(e)}};this._callback=e}queue(e){this._pending=e,this._rafId===null&&(this._rafId=requestAnimationFrame(this._process))}cancel(){this._rafId!==null&&(cancelAnimationFrame(this._rafId),this._rafId=null),this._pending=null}flush(){this._pending!==null&&(this.cancel(),this._callback(this._pending),this._pending=null)}get isPending(){return this._rafId!==null}destroy(){this.cancel()}};var D=class{constructor(e,t,n=10,i=100){this._pool=[];this._factory=e,this._reset=t,this._maxSize=i;for(let s=0;s<n;s++)this._pool.push(e())}acquire(){return this._pool.pop()??this._factory()}release(e){this._pool.length<this._maxSize&&(this._reset(e),this._pool.push(e))}clear(){this._pool.length=0}get size(){return this._pool.length}},_=new D(()=>({x:0,y:0}),o=>{o.x=0,o.y=0}),j=new D(()=>({x:0,y:0,width:0,height:0}),o=>{o.x=0,o.y=0,o.width=0,o.height=0});function d(o,e){let t=_.acquire();return t.x=o,t.y=e,t}var x=class extends p{constructor(t){super();this._attached=!1;this._activePointerId=null;this._activeElement=null;this._startPosition=null;this._isDragging=!1;this._delayTimer=null;this._onPointerDown=t=>{if(!t.isPrimary||t.button!==0||this._activePointerId!==null)return;let n=this._findDraggable(t);if(!n||this._options.handleSelector&&!this._findHandle(t,n))return;t.preventDefault(),this._activePointerId=t.pointerId,this._activeElement=n,this._startPosition=d(t.clientX,t.clientY),this._isDragging=!1,t.target.setPointerCapture(t.pointerId);let i=this._getEventTarget();i.addEventListener("pointermove",this._onPointerMove,{passive:!0}),i.addEventListener("pointerup",this._onPointerUp),i.addEventListener("pointercancel",this._onPointerCancel);let s=this._options.delay??0;s>0?this._delayTimer=window.setTimeout(()=>{this._delayTimer=null,this._startDrag(t)},s):(this._options.distance??0)===0&&this._startDrag(t)};this._onPointerMove=t=>{t.pointerId===this._activePointerId&&(this._options.throttle===!1?this._processMove(t):this._moveThrottle.queue(t))};this._processMove=t=>{if(!this._startPosition||!this._activeElement)return;let n=d(t.clientX,t.clientY);if(!this._isDragging){let i=this._options.distance??0;if(i>0){let s=n.x-this._startPosition.x,a=n.y-this._startPosition.y;if(Math.sqrt(s*s+a*a)<i){_.release(n);return}this._clearDelayTimer(),this._startDrag(t)}}if(this._isDragging){let i=d(n.x-this._startPosition.x,n.y-this._startPosition.y);this.emit("pointermove",{position:n,delta:i,pointerId:t.pointerId,originalEvent:t})}else _.release(n)};this._onPointerUp=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.flush(),this._isDragging&&this.emit("pointerup",{position:d(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._onPointerCancel=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.cancel(),this._isDragging&&this.emit("pointercancel",{position:d(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._container=t.container,this._options=t,this._moveThrottle=new y(n=>this._processMove(n))}attach(){if(this._attached)return;this._getEventTarget().addEventListener("pointerdown",this._onPointerDown,{passive:!1}),this._attached=!0}detach(){if(!this._attached)return;this._getEventTarget().removeEventListener("pointerdown",this._onPointerDown),this._cleanup(),this._attached=!1}get isActive(){return this._activePointerId!==null}get isDragging(){return this._isDragging}_getEventTarget(){return this._container instanceof ShadowRoot?this._container.host:this._container}_startDrag(t){this._isDragging||!this._activeElement||!this._startPosition||(this._isDragging=!0,this.emit("pointerdown",{element:this._activeElement,position:{x:this._startPosition.x,y:this._startPosition.y},pointerId:t.pointerId,originalEvent:t}))}_findDraggable(t){let n=t.target,i=t.composedPath();for(let s of i)if(s instanceof HTMLElement){if(s.matches(this._options.draggableSelector))return s;if(s===this._container||s===this._container.host)break}return n.closest?.(this._options.draggableSelector)}_findHandle(t,n){if(!this._options.handleSelector)return n;let s=t.target.closest?.(this._options.handleSelector);return s&&n.contains(s)?s:null}_clearDelayTimer(){this._delayTimer!==null&&(clearTimeout(this._delayTimer),this._delayTimer=null)}_cleanup(){this._clearDelayTimer(),this._moveThrottle.cancel(),this._startPosition&&(_.release(this._startPosition),this._startPosition=null);let t=this._getEventTarget();t.removeEventListener("pointermove",this._onPointerMove),t.removeEventListener("pointerup",this._onPointerUp),t.removeEventListener("pointercancel",this._onPointerCancel),this._activePointerId=null,this._activeElement=null,this._isDragging=!1}destroy(){this.detach(),this._moveThrottle.destroy(),super.destroy()}};var L=class{constructor(){this._cache=new WeakMap;this._dirty=new WeakSet;this._invalidateAll=!1}get(e){if(this._invalidateAll||this._dirty.has(e))return this._update(e);let t=this._cache.get(e);return t||this._update(e)}invalidate(e){this._dirty.add(e)}invalidateAll(){this._invalidateAll=!0}update(e){return this._update(e)}remove(e){this._cache.delete(e)}clearDirty(){this._invalidateAll=!1}_update(e){let t=e.getBoundingClientRect();return this._cache.set(e,t),this._dirty.delete(e),t}},r=new L;function T(o,e,t){return o>=t.left&&o<=t.right&&e>=t.top&&e<=t.bottom}function H(o){return{x:o.left+o.width/2,y:o.top+o.height/2}}var P=class{constructor(e){this._enabled=!1;this._listenerUnsubscribers=[];this._ghost=null;this._ghostOffset={x:0,y:0};this._onPointerDown=e=>{let{element:t,position:n}=e,i=this._getItemData(t)??this._extractDataAttributes(t),s=this._state.startDrag(t,n,i),a={element:t,position:{x:n.x,y:n.y},data:s.data,cancel:()=>{this._state.cancelDrag()}};if(this._options.onDragStart?.(a)===!1){this._state.cancelDrag();return}this._createGhost(t,n),t.classList.add("snap-dragging"),this._options.ghostClass&&t.classList.add(this._options.ghostClass),r.invalidateAll()};this._onPointerMove=e=>{let t=this._state.session;if(!t)return;let{position:n}=e,i=this._getItemAxis(t.element)??this._options.axis??"both";i!=="both"&&(n=this._applyAxisConstraint(n,t.origin,i)),this._options.grid&&(n=this._applyGridSnap(n,this._options.grid)),this._state.updatePosition(n),this._updateGhost(n),this._updateDropZone(n),this._options.onDragMove?.({element:t.element,position:{x:t.current.x,y:t.current.y},delta:{x:t.delta.x,y:t.delta.y},dropZone:t.dropZone})};this._onPointerUp=e=>{if(!this._state.session)return;let n=this._state.endDrag();n&&(this._cleanup(n.element),n.dropZone&&this._options.onDrop?.({element:n.element,dropZone:n.dropZone,position:{x:n.current.x,y:n.current.y},data:n.data}),this._options.onDragEnd?.({element:n.element,position:{x:n.current.x,y:n.current.y},delta:{x:n.delta.x,y:n.delta.y},cancelled:!1}))};this._onPointerCancel=e=>{let t=this._state.session;if(!t)return;let n=t.element;this._state.cancelDrag(),this._cleanup(n),this._options.onDragEnd?.({element:n,position:e.position,delta:{x:0,y:0},cancelled:!0})};this._container=e.container,this._state=e.state,this._options=e.options,this._getDropZones=e.getDropZones,this._getItemData=e.getItemData,this._getItemAxis=e.getItemAxis,this._pointerSensor=new x({container:this._container,draggableSelector:this._options.draggableSelector??"[data-draggable]",handleSelector:this._options.handleSelector,delay:this._options.delay,distance:this._options.distance,throttle:this._options.throttle}),this._setupListeners()}enable(){this._enabled||(this._pointerSensor.attach(),this._enabled=!0)}disable(){this._enabled&&(this._pointerSensor.detach(),this._state.reset(),this._removeGhost(),this._enabled=!1)}get isEnabled(){return this._enabled}updateOptions(e){Object.assign(this._options,e)}_setupListeners(){this._listenerUnsubscribers.push(this._pointerSensor.on("pointerdown",this._onPointerDown),this._pointerSensor.on("pointermove",this._onPointerMove),this._pointerSensor.on("pointerup",this._onPointerUp),this._pointerSensor.on("pointercancel",this._onPointerCancel))}_applyAxisConstraint(e,t,n){return n==="x"?{x:e.x,y:t.y}:n==="y"?{x:t.x,y:e.y}:e}_applyGridSnap(e,t){return{x:Math.round(e.x/t.x)*t.x,y:Math.round(e.y/t.y)*t.y}}_updateDropZone(e){let t=this._getDropZones(),n=null;for(let s of t){let a=r.get(s);if(T(e.x,e.y,a)){n=s;break}}let i=this._state.session;i&&n!==i.dropZone&&(i.dropZone&&this._options.onDropZoneLeave?.({element:i.element,dropZone:i.dropZone}),this._state.setDropTarget(n),n&&this._options.onDropZoneEnter?.({element:i.element,dropZone:n,position:e}))}_createGhost(e,t){let n=e.getBoundingClientRect();this._ghostOffset={x:t.x-n.left,y:t.y-n.top},this._ghost=e.cloneNode(!0),this._ghost.style.cssText=`
|
|
2
2
|
position: fixed;
|
|
3
|
-
left:
|
|
4
|
-
top:
|
|
3
|
+
left: 0;
|
|
4
|
+
top: 0;
|
|
5
5
|
width: ${n.width}px;
|
|
6
6
|
height: ${n.height}px;
|
|
7
7
|
margin: 0;
|
|
@@ -9,4 +9,4 @@ var p=class{constructor(){this._listeners=new Map}on(e,t){let n=this._listeners.
|
|
|
9
9
|
z-index: 9999;
|
|
10
10
|
opacity: 0.8;
|
|
11
11
|
will-change: transform;
|
|
12
|
-
`,this._ghost.classList.add("snap-ghost"),document.body.appendChild(this._ghost)}_updateGhost(e){if(!this._ghost)return;let t=e.x-this._ghostOffset.x,n=e.y-this._ghostOffset.y;this._ghost.style.transform=`translate(${t
|
|
12
|
+
`,this._ghost.classList.add("snap-ghost"),this._ghost.style.transform=`translate(${n.left}px, ${n.top}px)`,document.body.appendChild(this._ghost)}_updateGhost(e){if(!this._ghost)return;let t=e.x-this._ghostOffset.x,n=e.y-this._ghostOffset.y;this._ghost.style.transform=`translate(${t}px, ${n}px)`}_removeGhost(){this._ghost&&(this._ghost.remove(),this._ghost=null)}_cleanup(e){e.classList.remove("snap-dragging"),this._options.ghostClass&&e.classList.remove(this._options.ghostClass),this._removeGhost()}_extractDataAttributes(e){let t={};for(let i of e.attributes)if(i.name.startsWith("data-drag-")){let s=i.name.slice(10);t[s]=i.value}let n=e.dataset.draggable;return n&&n!==""&&(t.type=n),t}destroy(){this.disable();for(let e of this._listenerUnsubscribers)e();this._listenerUnsubscribers=[],this._pointerSensor.destroy()}};var S=class{constructor(e,t={}){this._isActive=!1;this._element=e,this._options=t}get element(){return this._element}get isActive(){return this._isActive}setOptions(e){Object.assign(this._options,e)}containsPoint(e,t){let n=r.get(this._element);return T(e,t,n)}accepts(e){let{accepts:t}=this._options;if(!t)return!0;if(typeof t=="function")return t(e);for(let i of t)if(e.hasType(i)||e.getData("type")===i)return!0;let n=this._element.dataset.accepts;if(n){let i=n.split(",").map(s=>s.trim());for(let s of i)if(e.hasType(s)||e.getData("type")===s)return!0}return!1}setActive(e){this._isActive!==e&&(this._isActive=e,e?this._element.classList.add("snap-drop-active"):this._element.classList.remove("snap-drop-active"))}getInsertionIndex(e,t,n,i){let s=Array.from(this._element.querySelectorAll(n)).filter(l=>l!==i);if(s.length===0)return 0;let a=r.get(s[0]),h=r.get(s[s.length-1]),v=Math.abs(h.top-a.top)>Math.abs(h.left-a.left);for(let l=0;l<s.length;l++){let g=r.get(s[l]),m=H(g);if(v){if(t<m.y)return l}else if(e<m.x)return l}return s.length}getClosestItem(e,t,n,i){let s=Array.from(this._element.querySelectorAll(n)).filter(f=>f!==i);if(s.length===0)return null;let a=null,h=1/0,v="after",l=r.get(s[0]),g=r.get(s[s.length-1]),m=Math.abs(g.top-l.top)>Math.abs(g.left-l.left);for(let f of s){let A=r.get(f),b=H(A),w=e-b.x,Z=t-b.y,I=Math.sqrt(w*w+Z*Z);I<h&&(h=I,a=f,v=m?t<b.y?"before":"after":e<b.x?"before":"after")}return a?{element:a,position:v}:null}updateBounds(){r.update(this._element)}destroy(){this.setActive(!1),r.remove(this._element)}},u=class{constructor(){this._zones=new Map}register(e,t){let n=this._zones.get(e);return n?(t&&n.setOptions(t),n):(n=new S(e,t),this._zones.set(e,n),n)}unregister(e){let t=this._zones.get(e);t&&(t.destroy(),this._zones.delete(e))}get(e){return this._zones.get(e)}getElements(){return[...this._zones.keys()]}getAll(){return[...this._zones.values()]}findAtPoint(e,t){for(let n of this._zones.values())if(n.containsPoint(e,t))return n;return null}clear(){for(let e of this._zones.values())e.destroy();this._zones.clear()}updateAllBounds(){r.invalidateAll()}destroy(){this.clear()}};var R={draggableSelector:"[data-draggable]",dropZoneSelector:"[data-droppable]",axis:"both",autoRefresh:!1},M=class{constructor(e,t={}){this._imperativeDraggables=new Map;this._imperativeDropZones=new Map;this._plugins=[];this._behaviors=[];this._stateUnsubscribers=[];this._observer=null;this._refreshScheduled=!1;this._destroyed=!1;this._scrollHandler=null;this._resizeHandler=null;this._container=e,this._options={...R,...t},this._state=new c,this._dropZoneManager=new u,this._engine=new P({container:this._container,state:this._state,options:this._options,getDropZones:()=>this._getDropZones(),getItemData:n=>this._getItemData(n),getItemAxis:n=>this._getItemAxis(n)}),this._setupStateListeners(),this._scanDeclarativeElements(),this._options.autoRefresh&&this._setupAutoRefresh(),this._setupScrollResize(),this.enable()}get options(){return this._options}enable(){this._engine.enable()}disable(){this._engine.disable()}destroy(){this._destroyed=!0,this.disable();for(let e of this._stateUnsubscribers)e();this._stateUnsubscribers=[];for(let e of this._plugins)e.destroy();this._plugins=[];for(let e of this._behaviors)e.destroy();this._behaviors=[],this._engine.destroy(),this._state.destroy(),this._dropZoneManager.destroy(),this._observer?.disconnect(),this._observer=null,this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null),this._imperativeDraggables.clear(),this._imperativeDropZones.clear()}refresh(){this._scanDeclarativeElements(),r.invalidateAll()}addDraggable(e,t){this._imperativeDraggables.set(e,t??{})}removeDraggable(e){this._imperativeDraggables.delete(e)}addDropZone(e,t){this._imperativeDropZones.set(e,t??{}),this._dropZoneManager.register(e,t)}removeDropZone(e){this._imperativeDropZones.delete(e),this._dropZoneManager.unregister(e)}isDragging(){return this._state.isDragging()}getActiveElement(){return this._state.getActiveElement()}use(e){return this._plugins.push(e),e.init(this),this}addBehavior(e){return this._behaviors.push(e),this}setOptions(e){Object.assign(this._options,e),this._engine.updateOptions(this._options)}_getDropZones(){let e=this._options.dropZoneSelector??"[data-droppable]",t=this._container instanceof ShadowRoot?this._container:this._container,n=Array.from(t.querySelectorAll(e)),i=[...this._imperativeDropZones.keys()];return[...new Set([...n,...i])]}_getItemData(e){return this._imperativeDraggables.get(e)?.data}_getItemAxis(e){let t=this._imperativeDraggables.get(e);if(t?.axis)return t.axis;let n=e.dataset.dragAxis;if(n==="x"||n==="y"||n==="both")return n}_scanDeclarativeElements(){let e=this._options.dropZoneSelector??"[data-droppable]",n=(this._container instanceof ShadowRoot?this._container:this._container).querySelectorAll(e);for(let i of n)this._imperativeDropZones.has(i)||this._dropZoneManager.register(i)}_setupStateListeners(){this._stateUnsubscribers.push(this._state.subscribe("dragstart",e=>{for(let t of this._behaviors)t.onDragStart?.(e)})),this._stateUnsubscribers.push(this._state.subscribe("dragmove",e=>{for(let t of this._behaviors)t.onDragMove?.(e)})),this._stateUnsubscribers.push(this._state.subscribe("dragend",e=>{for(let t of this._behaviors)t.onDragEnd?.(e)}))}_setupAutoRefresh(){this._observer=new MutationObserver(t=>{if(this._destroyed)return;let n=!1;for(let i of t)if(i.type==="childList"){n=!0;break}n&&!this._refreshScheduled&&(this._refreshScheduled=!0,requestAnimationFrame(()=>{this._destroyed||(this._refreshScheduled=!1,this.refresh())}))});let e=this._container instanceof ShadowRoot?this._container:this._container;this._observer.observe(e,{childList:!0,subtree:!0})}_setupScrollResize(){this._scrollHandler=()=>{this._state.isDragging()&&r.invalidateAll()},window.addEventListener("scroll",this._scrollHandler,!0),this._resizeHandler=()=>{r.invalidateAll()},window.addEventListener("resize",this._resizeHandler)}},O=M;export{c as DragState,S as DropZone,u as DropZoneManager,M as Snap,O as default};
|
package/dist/snap.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var _=class{constructor(){this._listeners=new Map}on(e,t){let n=this._listeners.get(e);return n||(n=new Set,this._listeners.set(e,n)),n.add(t),()=>{n.delete(t),n.size===0&&this._listeners.delete(e)}}once(e,t){let n=this.on(e,o=>{n(),t(o)});return n}emit(e,t){let n=this._listeners.get(e);if(n)for(let o of[...n])o(t)}off(e){e?this._listeners.delete(e):this._listeners.clear()}hasListeners(e){let t=this._listeners.get(e);return t!==void 0&&t.size>0}listenerCount(e){return this._listeners.get(e)?.size??0}destroy(){this._listeners.clear()}};var E=class r{constructor(){this._data=new Map}setData(e,t){this._data.set(e,t)}getData(e){return this._data.get(e)}hasType(e){return this._data.has(e)}get types(){return[...this._data.keys()]}clear(){this._data.clear()}clone(){let e=new r;for(let[t,n]of this._data)e.setData(t,n);return e}};var b=class extends _{constructor(){super(...arguments);this._session=null;this._idCounter=0}get session(){return this._session}isDragging(){return this._session!==null&&this._session.phase==="dragging"}getActiveElement(){return this._session?.element??null}getCurrentDropZone(){return this._session?.dropZone??null}startDrag(t,n,o){this._session&&this.cancelDrag();let i=new E;if(o)for(let[s,a]of Object.entries(o))i.setData(s,a);return this._session={id:`drag-${++this._idCounter}`,element:t,origin:{x:n.x,y:n.y},current:{x:n.x,y:n.y},delta:{x:0,y:0},data:i,dropZone:null,phase:"dragging"},this.emit("dragstart",this._session),this._session}updatePosition(t){!this._session||this._session.phase!=="dragging"||(this._session.current.x=t.x,this._session.current.y=t.y,this._session.delta.x=t.x-this._session.origin.x,this._session.delta.y=t.y-this._session.origin.y,this.emit("dragmove",this._session))}setDropTarget(t){if(!this._session)return;let n=this._session.dropZone;n!==t&&(n&&(this._session.dropZone=null,this.emit("dropzoneleave",this._session)),t&&(this._session.dropZone=t,this.emit("dropzoneenter",this._session)))}endDrag(){if(!this._session)return null;let t=this._session;return t.phase="dropping",t.dropZone&&this.emit("drop",t),this.emit("dragend",t),this._session=null,t}cancelDrag(){if(!this._session)return null;let t=this._session;return t.phase="cancelled",t.dropZone=null,this.emit("dragend",t),this._session=null,t}subscribe(t,n){return this.on(t,n)}reset(){this._session&&this.cancelDrag()}destroy(){this.reset(),super.destroy()}};var D=class{constructor(e){this._rafId=null;this._pending=null;this._process=()=>{if(this._rafId=null,this._pending!==null){let e=this._pending;this._pending=null,this._callback(e)}};this._callback=e}queue(e){this._pending=e,this._rafId===null&&(this._rafId=requestAnimationFrame(this._process))}cancel(){this._rafId!==null&&(cancelAnimationFrame(this._rafId),this._rafId=null),this._pending=null}flush(){this._pending!==null&&(this.cancel(),this._callback(this._pending),this._pending=null)}get isPending(){return this._rafId!==null}destroy(){this.cancel()}};function X(r){let e=null,t=null,n=(...o)=>{t=o,e===null&&(e=requestAnimationFrame(()=>{e=null,t!==null&&(r(...t),t=null)}))};return n.cancel=()=>{e!==null&&(cancelAnimationFrame(e),e=null),t=null},n.flush=()=>{e!==null&&(cancelAnimationFrame(e),e=null),t!==null&&(r(...t),t=null)},n}var x=class{constructor(e,t,n=10,o=100){this._pool=[];this._factory=e,this._reset=t,this._maxSize=o;for(let i=0;i<n;i++)this._pool.push(e())}acquire(){return this._pool.pop()??this._factory()}release(e){this._pool.length<this._maxSize&&(this._reset(e),this._pool.push(e))}clear(){this._pool.length=0}get size(){return this._pool.length}},g=new x(()=>({x:0,y:0}),r=>{r.x=0,r.y=0}),Y=new x(()=>({x:0,y:0,width:0,height:0}),r=>{r.x=0,r.y=0,r.width=0,r.height=0});function m(r,e){let t=g.acquire();return t.x=r,t.y=e,t}var y=class extends _{constructor(t){super();this._attached=!1;this._activePointerId=null;this._activeElement=null;this._startPosition=null;this._isDragging=!1;this._delayTimer=null;this._onPointerDown=t=>{if(!t.isPrimary||t.button!==0||this._activePointerId!==null)return;let n=this._findDraggable(t);if(!n||this._options.handleSelector&&!this._findHandle(t,n))return;t.preventDefault(),this._activePointerId=t.pointerId,this._activeElement=n,this._startPosition=m(t.clientX,t.clientY),this._isDragging=!1,t.target.setPointerCapture(t.pointerId);let o=this._getEventTarget();o.addEventListener("pointermove",this._onPointerMove,{passive:!0}),o.addEventListener("pointerup",this._onPointerUp),o.addEventListener("pointercancel",this._onPointerCancel);let i=this._options.delay??0;i>0?this._delayTimer=window.setTimeout(()=>{this._delayTimer=null,this._startDrag(t)},i):(this._options.distance??0)===0&&this._startDrag(t)};this._onPointerMove=t=>{t.pointerId===this._activePointerId&&this._moveThrottle.queue(t)};this._processMove=t=>{if(!this._startPosition||!this._activeElement)return;let n=m(t.clientX,t.clientY);if(!this._isDragging){let o=this._options.distance??0;if(o>0){let i=n.x-this._startPosition.x,s=n.y-this._startPosition.y;if(Math.sqrt(i*i+s*s)<o){g.release(n);return}this._clearDelayTimer(),this._startDrag(t)}}if(this._isDragging){let o=m(n.x-this._startPosition.x,n.y-this._startPosition.y);this.emit("pointermove",{position:n,delta:o,pointerId:t.pointerId,originalEvent:t})}else g.release(n)};this._onPointerUp=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.flush(),this._isDragging&&this.emit("pointerup",{position:m(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._onPointerCancel=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.cancel(),this._isDragging&&this.emit("pointercancel",{position:m(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._container=t.container,this._options=t,this._moveThrottle=new D(n=>this._processMove(n))}attach(){if(this._attached)return;this._getEventTarget().addEventListener("pointerdown",this._onPointerDown,{passive:!1}),this._attached=!0}detach(){if(!this._attached)return;this._getEventTarget().removeEventListener("pointerdown",this._onPointerDown),this._cleanup(),this._attached=!1}get isActive(){return this._activePointerId!==null}get isDragging(){return this._isDragging}_getEventTarget(){return this._container instanceof ShadowRoot?this._container.host:this._container}_startDrag(t){this._isDragging||!this._activeElement||!this._startPosition||(this._isDragging=!0,this.emit("pointerdown",{element:this._activeElement,position:{x:this._startPosition.x,y:this._startPosition.y},pointerId:t.pointerId,originalEvent:t}))}_findDraggable(t){let n=t.target,o=t.composedPath();for(let i of o)if(i instanceof HTMLElement){if(i.matches(this._options.draggableSelector))return i;if(i===this._container||i===this._container.host)break}return n.closest?.(this._options.draggableSelector)}_findHandle(t,n){if(!this._options.handleSelector)return n;let i=t.target.closest?.(this._options.handleSelector);return i&&n.contains(i)?i:null}_clearDelayTimer(){this._delayTimer!==null&&(clearTimeout(this._delayTimer),this._delayTimer=null)}_cleanup(){this._clearDelayTimer(),this._moveThrottle.cancel(),this._startPosition&&(g.release(this._startPosition),this._startPosition=null);let t=this._getEventTarget();t.removeEventListener("pointermove",this._onPointerMove),t.removeEventListener("pointerup",this._onPointerUp),t.removeEventListener("pointercancel",this._onPointerCancel),this._activePointerId=null,this._activeElement=null,this._isDragging=!1}destroy(){this.detach(),this._moveThrottle.destroy(),super.destroy()}};var P=class{constructor(){this._cache=new WeakMap;this._dirty=new WeakSet;this._invalidateAll=!1}get(e){if(this._invalidateAll||this._dirty.has(e))return this._update(e);let t=this._cache.get(e);return t||this._update(e)}invalidate(e){this._dirty.add(e)}invalidateAll(){this._invalidateAll=!0}update(e){return this._update(e)}remove(e){this._cache.delete(e)}clearDirty(){this._invalidateAll=!1}_update(e){let t=e.getBoundingClientRect();return this._cache.set(e,t),this._dirty.delete(e),t}},h=new P;function I(r,e,t){return r>=t.left&&r<=t.right&&e>=t.top&&e<=t.bottom}function v(r){return{x:r.left+r.width/2,y:r.top+r.height/2}}var S=class{constructor(e){this._enabled=!1;this._listenerUnsubscribers=[];this._ghost=null;this._ghostOffset={x:0,y:0};this._onPointerDown=e=>{let{element:t,position:n}=e,o=this._getItemData(t)??this._extractDataAttributes(t),i=this._state.startDrag(t,n,o),s={element:t,position:{x:n.x,y:n.y},data:i.data,cancel:()=>{this._state.cancelDrag()}};if(this._options.onDragStart?.(s)===!1){this._state.cancelDrag();return}this._createGhost(t,n),t.classList.add("snap-dragging"),this._options.ghostClass&&t.classList.add(this._options.ghostClass),h.invalidateAll()};this._onPointerMove=e=>{let t=this._state.session;if(!t)return;let{position:n}=e,o=this._getItemAxis(t.element)??this._options.axis??"both";o!=="both"&&(n=this._applyAxisConstraint(n,t.origin,o)),this._options.grid&&(n=this._applyGridSnap(n,this._options.grid)),this._state.updatePosition(n),this._updateGhost(n),this._updateDropZone(n),this._options.onDragMove?.({element:t.element,position:{x:t.current.x,y:t.current.y},delta:{x:t.delta.x,y:t.delta.y},dropZone:t.dropZone})};this._onPointerUp=e=>{if(!this._state.session)return;let n=this._state.endDrag();n&&(this._cleanup(n.element),n.dropZone&&this._options.onDrop?.({element:n.element,dropZone:n.dropZone,position:{x:n.current.x,y:n.current.y},data:n.data}),this._options.onDragEnd?.({element:n.element,position:{x:n.current.x,y:n.current.y},delta:{x:n.delta.x,y:n.delta.y},cancelled:!1}))};this._onPointerCancel=e=>{let t=this._state.session;if(!t)return;let n=t.element;this._state.cancelDrag(),this._cleanup(n),this._options.onDragEnd?.({element:n,position:e.position,delta:{x:0,y:0},cancelled:!0})};this._container=e.container,this._state=e.state,this._options=e.options,this._getDropZones=e.getDropZones,this._getItemData=e.getItemData,this._getItemAxis=e.getItemAxis,this._pointerSensor=new y({container:this._container,draggableSelector:this._options.draggableSelector??"[data-draggable]",handleSelector:this._options.handleSelector,delay:this._options.delay,distance:this._options.distance}),this._setupListeners()}enable(){this._enabled||(this._pointerSensor.attach(),this._enabled=!0)}disable(){this._enabled&&(this._pointerSensor.detach(),this._state.reset(),this._removeGhost(),this._enabled=!1)}get isEnabled(){return this._enabled}updateOptions(e){Object.assign(this._options,e)}_setupListeners(){this._listenerUnsubscribers.push(this._pointerSensor.on("pointerdown",this._onPointerDown),this._pointerSensor.on("pointermove",this._onPointerMove),this._pointerSensor.on("pointerup",this._onPointerUp),this._pointerSensor.on("pointercancel",this._onPointerCancel))}_applyAxisConstraint(e,t,n){return n==="x"?{x:e.x,y:t.y}:n==="y"?{x:t.x,y:e.y}:e}_applyGridSnap(e,t){return{x:Math.round(e.x/t.x)*t.x,y:Math.round(e.y/t.y)*t.y}}_updateDropZone(e){let t=this._getDropZones(),n=null;for(let i of t){let s=h.get(i);if(I(e.x,e.y,s)){n=i;break}}let o=this._state.session;o&&n!==o.dropZone&&(o.dropZone&&this._options.onDropZoneLeave?.({element:o.element,dropZone:o.dropZone}),this._state.setDropTarget(n),n&&this._options.onDropZoneEnter?.({element:o.element,dropZone:n,position:e}))}_createGhost(e,t){let n=e.getBoundingClientRect();this._ghostOffset={x:t.x-n.left,y:t.y-n.top},this._ghost=e.cloneNode(!0),this._ghost.style.cssText=`
|
|
1
|
+
var _=class{constructor(){this._listeners=new Map}on(e,t){let n=this._listeners.get(e);return n||(n=new Set,this._listeners.set(e,n)),n.add(t),()=>{n.delete(t),n.size===0&&this._listeners.delete(e)}}once(e,t){let n=this.on(e,o=>{n(),t(o)});return n}emit(e,t){let n=this._listeners.get(e);if(n)for(let o of[...n])o(t)}off(e){e?this._listeners.delete(e):this._listeners.clear()}hasListeners(e){let t=this._listeners.get(e);return t!==void 0&&t.size>0}listenerCount(e){return this._listeners.get(e)?.size??0}destroy(){this._listeners.clear()}};var E=class r{constructor(){this._data=new Map}setData(e,t){this._data.set(e,t)}getData(e){return this._data.get(e)}hasType(e){return this._data.has(e)}get types(){return[...this._data.keys()]}clear(){this._data.clear()}clone(){let e=new r;for(let[t,n]of this._data)e.setData(t,n);return e}};var b=class extends _{constructor(){super(...arguments);this._session=null;this._idCounter=0}get session(){return this._session}isDragging(){return this._session!==null&&this._session.phase==="dragging"}getActiveElement(){return this._session?.element??null}getCurrentDropZone(){return this._session?.dropZone??null}startDrag(t,n,o){this._session&&this.cancelDrag();let i=new E;if(o)for(let[s,a]of Object.entries(o))i.setData(s,a);return this._session={id:`drag-${++this._idCounter}`,element:t,origin:{x:n.x,y:n.y},current:{x:n.x,y:n.y},delta:{x:0,y:0},data:i,dropZone:null,phase:"dragging"},this.emit("dragstart",this._session),this._session}updatePosition(t){!this._session||this._session.phase!=="dragging"||(this._session.current.x=t.x,this._session.current.y=t.y,this._session.delta.x=t.x-this._session.origin.x,this._session.delta.y=t.y-this._session.origin.y,this.emit("dragmove",this._session))}setDropTarget(t){if(!this._session)return;let n=this._session.dropZone;n!==t&&(n&&(this._session.dropZone=null,this.emit("dropzoneleave",this._session)),t&&(this._session.dropZone=t,this.emit("dropzoneenter",this._session)))}endDrag(){if(!this._session)return null;let t=this._session;return t.phase="dropping",t.dropZone&&this.emit("drop",t),this.emit("dragend",t),this._session=null,t}cancelDrag(){if(!this._session)return null;let t=this._session;return t.phase="cancelled",t.dropZone=null,this.emit("dragend",t),this._session=null,t}subscribe(t,n){return this.on(t,n)}reset(){this._session&&this.cancelDrag()}destroy(){this.reset(),super.destroy()}};var D=class{constructor(e){this._rafId=null;this._pending=null;this._process=()=>{if(this._rafId=null,this._pending!==null){let e=this._pending;this._pending=null,this._callback(e)}};this._callback=e}queue(e){this._pending=e,this._rafId===null&&(this._rafId=requestAnimationFrame(this._process))}cancel(){this._rafId!==null&&(cancelAnimationFrame(this._rafId),this._rafId=null),this._pending=null}flush(){this._pending!==null&&(this.cancel(),this._callback(this._pending),this._pending=null)}get isPending(){return this._rafId!==null}destroy(){this.cancel()}};function X(r){let e=null,t=null,n=(...o)=>{t=o,e===null&&(e=requestAnimationFrame(()=>{e=null,t!==null&&(r(...t),t=null)}))};return n.cancel=()=>{e!==null&&(cancelAnimationFrame(e),e=null),t=null},n.flush=()=>{e!==null&&(cancelAnimationFrame(e),e=null),t!==null&&(r(...t),t=null)},n}var x=class{constructor(e,t,n=10,o=100){this._pool=[];this._factory=e,this._reset=t,this._maxSize=o;for(let i=0;i<n;i++)this._pool.push(e())}acquire(){return this._pool.pop()??this._factory()}release(e){this._pool.length<this._maxSize&&(this._reset(e),this._pool.push(e))}clear(){this._pool.length=0}get size(){return this._pool.length}},g=new x(()=>({x:0,y:0}),r=>{r.x=0,r.y=0}),Y=new x(()=>({x:0,y:0,width:0,height:0}),r=>{r.x=0,r.y=0,r.width=0,r.height=0});function m(r,e){let t=g.acquire();return t.x=r,t.y=e,t}var y=class extends _{constructor(t){super();this._attached=!1;this._activePointerId=null;this._activeElement=null;this._startPosition=null;this._isDragging=!1;this._delayTimer=null;this._onPointerDown=t=>{if(!t.isPrimary||t.button!==0||this._activePointerId!==null)return;let n=this._findDraggable(t);if(!n||this._options.handleSelector&&!this._findHandle(t,n))return;t.preventDefault(),this._activePointerId=t.pointerId,this._activeElement=n,this._startPosition=m(t.clientX,t.clientY),this._isDragging=!1,t.target.setPointerCapture(t.pointerId);let o=this._getEventTarget();o.addEventListener("pointermove",this._onPointerMove,{passive:!0}),o.addEventListener("pointerup",this._onPointerUp),o.addEventListener("pointercancel",this._onPointerCancel);let i=this._options.delay??0;i>0?this._delayTimer=window.setTimeout(()=>{this._delayTimer=null,this._startDrag(t)},i):(this._options.distance??0)===0&&this._startDrag(t)};this._onPointerMove=t=>{t.pointerId===this._activePointerId&&(this._options.throttle===!1?this._processMove(t):this._moveThrottle.queue(t))};this._processMove=t=>{if(!this._startPosition||!this._activeElement)return;let n=m(t.clientX,t.clientY);if(!this._isDragging){let o=this._options.distance??0;if(o>0){let i=n.x-this._startPosition.x,s=n.y-this._startPosition.y;if(Math.sqrt(i*i+s*s)<o){g.release(n);return}this._clearDelayTimer(),this._startDrag(t)}}if(this._isDragging){let o=m(n.x-this._startPosition.x,n.y-this._startPosition.y);this.emit("pointermove",{position:n,delta:o,pointerId:t.pointerId,originalEvent:t})}else g.release(n)};this._onPointerUp=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.flush(),this._isDragging&&this.emit("pointerup",{position:m(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._onPointerCancel=t=>{t.pointerId===this._activePointerId&&(this._moveThrottle.cancel(),this._isDragging&&this.emit("pointercancel",{position:m(t.clientX,t.clientY),pointerId:t.pointerId,originalEvent:t}),this._cleanup())};this._container=t.container,this._options=t,this._moveThrottle=new D(n=>this._processMove(n))}attach(){if(this._attached)return;this._getEventTarget().addEventListener("pointerdown",this._onPointerDown,{passive:!1}),this._attached=!0}detach(){if(!this._attached)return;this._getEventTarget().removeEventListener("pointerdown",this._onPointerDown),this._cleanup(),this._attached=!1}get isActive(){return this._activePointerId!==null}get isDragging(){return this._isDragging}_getEventTarget(){return this._container instanceof ShadowRoot?this._container.host:this._container}_startDrag(t){this._isDragging||!this._activeElement||!this._startPosition||(this._isDragging=!0,this.emit("pointerdown",{element:this._activeElement,position:{x:this._startPosition.x,y:this._startPosition.y},pointerId:t.pointerId,originalEvent:t}))}_findDraggable(t){let n=t.target,o=t.composedPath();for(let i of o)if(i instanceof HTMLElement){if(i.matches(this._options.draggableSelector))return i;if(i===this._container||i===this._container.host)break}return n.closest?.(this._options.draggableSelector)}_findHandle(t,n){if(!this._options.handleSelector)return n;let i=t.target.closest?.(this._options.handleSelector);return i&&n.contains(i)?i:null}_clearDelayTimer(){this._delayTimer!==null&&(clearTimeout(this._delayTimer),this._delayTimer=null)}_cleanup(){this._clearDelayTimer(),this._moveThrottle.cancel(),this._startPosition&&(g.release(this._startPosition),this._startPosition=null);let t=this._getEventTarget();t.removeEventListener("pointermove",this._onPointerMove),t.removeEventListener("pointerup",this._onPointerUp),t.removeEventListener("pointercancel",this._onPointerCancel),this._activePointerId=null,this._activeElement=null,this._isDragging=!1}destroy(){this.detach(),this._moveThrottle.destroy(),super.destroy()}};var P=class{constructor(){this._cache=new WeakMap;this._dirty=new WeakSet;this._invalidateAll=!1}get(e){if(this._invalidateAll||this._dirty.has(e))return this._update(e);let t=this._cache.get(e);return t||this._update(e)}invalidate(e){this._dirty.add(e)}invalidateAll(){this._invalidateAll=!0}update(e){return this._update(e)}remove(e){this._cache.delete(e)}clearDirty(){this._invalidateAll=!1}_update(e){let t=e.getBoundingClientRect();return this._cache.set(e,t),this._dirty.delete(e),t}},h=new P;function I(r,e,t){return r>=t.left&&r<=t.right&&e>=t.top&&e<=t.bottom}function v(r){return{x:r.left+r.width/2,y:r.top+r.height/2}}var S=class{constructor(e){this._enabled=!1;this._listenerUnsubscribers=[];this._ghost=null;this._ghostOffset={x:0,y:0};this._onPointerDown=e=>{let{element:t,position:n}=e,o=this._getItemData(t)??this._extractDataAttributes(t),i=this._state.startDrag(t,n,o),s={element:t,position:{x:n.x,y:n.y},data:i.data,cancel:()=>{this._state.cancelDrag()}};if(this._options.onDragStart?.(s)===!1){this._state.cancelDrag();return}this._createGhost(t,n),t.classList.add("snap-dragging"),this._options.ghostClass&&t.classList.add(this._options.ghostClass),h.invalidateAll()};this._onPointerMove=e=>{let t=this._state.session;if(!t)return;let{position:n}=e,o=this._getItemAxis(t.element)??this._options.axis??"both";o!=="both"&&(n=this._applyAxisConstraint(n,t.origin,o)),this._options.grid&&(n=this._applyGridSnap(n,this._options.grid)),this._state.updatePosition(n),this._updateGhost(n),this._updateDropZone(n),this._options.onDragMove?.({element:t.element,position:{x:t.current.x,y:t.current.y},delta:{x:t.delta.x,y:t.delta.y},dropZone:t.dropZone})};this._onPointerUp=e=>{if(!this._state.session)return;let n=this._state.endDrag();n&&(this._cleanup(n.element),n.dropZone&&this._options.onDrop?.({element:n.element,dropZone:n.dropZone,position:{x:n.current.x,y:n.current.y},data:n.data}),this._options.onDragEnd?.({element:n.element,position:{x:n.current.x,y:n.current.y},delta:{x:n.delta.x,y:n.delta.y},cancelled:!1}))};this._onPointerCancel=e=>{let t=this._state.session;if(!t)return;let n=t.element;this._state.cancelDrag(),this._cleanup(n),this._options.onDragEnd?.({element:n,position:e.position,delta:{x:0,y:0},cancelled:!0})};this._container=e.container,this._state=e.state,this._options=e.options,this._getDropZones=e.getDropZones,this._getItemData=e.getItemData,this._getItemAxis=e.getItemAxis,this._pointerSensor=new y({container:this._container,draggableSelector:this._options.draggableSelector??"[data-draggable]",handleSelector:this._options.handleSelector,delay:this._options.delay,distance:this._options.distance,throttle:this._options.throttle}),this._setupListeners()}enable(){this._enabled||(this._pointerSensor.attach(),this._enabled=!0)}disable(){this._enabled&&(this._pointerSensor.detach(),this._state.reset(),this._removeGhost(),this._enabled=!1)}get isEnabled(){return this._enabled}updateOptions(e){Object.assign(this._options,e)}_setupListeners(){this._listenerUnsubscribers.push(this._pointerSensor.on("pointerdown",this._onPointerDown),this._pointerSensor.on("pointermove",this._onPointerMove),this._pointerSensor.on("pointerup",this._onPointerUp),this._pointerSensor.on("pointercancel",this._onPointerCancel))}_applyAxisConstraint(e,t,n){return n==="x"?{x:e.x,y:t.y}:n==="y"?{x:t.x,y:e.y}:e}_applyGridSnap(e,t){return{x:Math.round(e.x/t.x)*t.x,y:Math.round(e.y/t.y)*t.y}}_updateDropZone(e){let t=this._getDropZones(),n=null;for(let i of t){let s=h.get(i);if(I(e.x,e.y,s)){n=i;break}}let o=this._state.session;o&&n!==o.dropZone&&(o.dropZone&&this._options.onDropZoneLeave?.({element:o.element,dropZone:o.dropZone}),this._state.setDropTarget(n),n&&this._options.onDropZoneEnter?.({element:o.element,dropZone:n,position:e}))}_createGhost(e,t){let n=e.getBoundingClientRect();this._ghostOffset={x:t.x-n.left,y:t.y-n.top},this._ghost=e.cloneNode(!0),this._ghost.style.cssText=`
|
|
2
2
|
position: fixed;
|
|
3
|
-
left:
|
|
4
|
-
top:
|
|
3
|
+
left: 0;
|
|
4
|
+
top: 0;
|
|
5
5
|
width: ${n.width}px;
|
|
6
6
|
height: ${n.height}px;
|
|
7
7
|
margin: 0;
|
|
@@ -9,7 +9,7 @@ var _=class{constructor(){this._listeners=new Map}on(e,t){let n=this._listeners.
|
|
|
9
9
|
z-index: 9999;
|
|
10
10
|
opacity: 0.8;
|
|
11
11
|
will-change: transform;
|
|
12
|
-
`,this._ghost.classList.add("snap-ghost"),document.body.appendChild(this._ghost)}_updateGhost(e){if(!this._ghost)return;let t=e.x-this._ghostOffset.x,n=e.y-this._ghostOffset.y;this._ghost.style.transform=`translate(${t
|
|
12
|
+
`,this._ghost.classList.add("snap-ghost"),this._ghost.style.transform=`translate(${n.left}px, ${n.top}px)`,document.body.appendChild(this._ghost)}_updateGhost(e){if(!this._ghost)return;let t=e.x-this._ghostOffset.x,n=e.y-this._ghostOffset.y;this._ghost.style.transform=`translate(${t}px, ${n}px)`}_removeGhost(){this._ghost&&(this._ghost.remove(),this._ghost=null)}_cleanup(e){e.classList.remove("snap-dragging"),this._options.ghostClass&&e.classList.remove(this._options.ghostClass),this._removeGhost()}_extractDataAttributes(e){let t={};for(let o of e.attributes)if(o.name.startsWith("data-drag-")){let i=o.name.slice(10);t[i]=o.value}let n=e.dataset.draggable;return n&&n!==""&&(t.type=n),t}destroy(){this.disable();for(let e of this._listenerUnsubscribers)e();this._listenerUnsubscribers=[],this._pointerSensor.destroy()}};var H=class{constructor(e,t={}){this._isActive=!1;this._element=e,this._options=t}get element(){return this._element}get isActive(){return this._isActive}setOptions(e){Object.assign(this._options,e)}containsPoint(e,t){let n=h.get(this._element);return I(e,t,n)}accepts(e){let{accepts:t}=this._options;if(!t)return!0;if(typeof t=="function")return t(e);for(let o of t)if(e.hasType(o)||e.getData("type")===o)return!0;let n=this._element.dataset.accepts;if(n){let o=n.split(",").map(i=>i.trim());for(let i of o)if(e.hasType(i)||e.getData("type")===i)return!0}return!1}setActive(e){this._isActive!==e&&(this._isActive=e,e?this._element.classList.add("snap-drop-active"):this._element.classList.remove("snap-drop-active"))}getInsertionIndex(e,t,n,o){let i=Array.from(this._element.querySelectorAll(n)).filter(l=>l!==o);if(i.length===0)return 0;let s=h.get(i[0]),a=h.get(i[i.length-1]),p=Math.abs(a.top-s.top)>Math.abs(a.left-s.left);for(let l=0;l<i.length;l++){let d=h.get(i[l]),c=v(d);if(p){if(t<c.y)return l}else if(e<c.x)return l}return i.length}getClosestItem(e,t,n,o){let i=Array.from(this._element.querySelectorAll(n)).filter(u=>u!==o);if(i.length===0)return null;let s=null,a=1/0,p="after",l=h.get(i[0]),d=h.get(i[i.length-1]),c=Math.abs(d.top-l.top)>Math.abs(d.left-l.left);for(let u of i){let f=h.get(u),L=v(f),z=e-L.x,B=t-L.y,q=Math.sqrt(z*z+B*B);q<a&&(a=q,s=u,p=c?t<L.y?"before":"after":e<L.x?"before":"after")}return s?{element:s,position:p}:null}updateBounds(){h.update(this._element)}destroy(){this.setActive(!1),h.remove(this._element)}},T=class{constructor(){this._zones=new Map}register(e,t){let n=this._zones.get(e);return n?(t&&n.setOptions(t),n):(n=new H(e,t),this._zones.set(e,n),n)}unregister(e){let t=this._zones.get(e);t&&(t.destroy(),this._zones.delete(e))}get(e){return this._zones.get(e)}getElements(){return[...this._zones.keys()]}getAll(){return[...this._zones.values()]}findAtPoint(e,t){for(let n of this._zones.values())if(n.containsPoint(e,t))return n;return null}clear(){for(let e of this._zones.values())e.destroy();this._zones.clear()}updateAllBounds(){h.invalidateAll()}destroy(){this.clear()}};var j={draggableSelector:"[data-draggable]",dropZoneSelector:"[data-droppable]",axis:"both",autoRefresh:!1},C=class{constructor(e,t={}){this._imperativeDraggables=new Map;this._imperativeDropZones=new Map;this._plugins=[];this._behaviors=[];this._stateUnsubscribers=[];this._observer=null;this._refreshScheduled=!1;this._destroyed=!1;this._scrollHandler=null;this._resizeHandler=null;this._container=e,this._options={...j,...t},this._state=new b,this._dropZoneManager=new T,this._engine=new S({container:this._container,state:this._state,options:this._options,getDropZones:()=>this._getDropZones(),getItemData:n=>this._getItemData(n),getItemAxis:n=>this._getItemAxis(n)}),this._setupStateListeners(),this._scanDeclarativeElements(),this._options.autoRefresh&&this._setupAutoRefresh(),this._setupScrollResize(),this.enable()}get options(){return this._options}enable(){this._engine.enable()}disable(){this._engine.disable()}destroy(){this._destroyed=!0,this.disable();for(let e of this._stateUnsubscribers)e();this._stateUnsubscribers=[];for(let e of this._plugins)e.destroy();this._plugins=[];for(let e of this._behaviors)e.destroy();this._behaviors=[],this._engine.destroy(),this._state.destroy(),this._dropZoneManager.destroy(),this._observer?.disconnect(),this._observer=null,this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null),this._imperativeDraggables.clear(),this._imperativeDropZones.clear()}refresh(){this._scanDeclarativeElements(),h.invalidateAll()}addDraggable(e,t){this._imperativeDraggables.set(e,t??{})}removeDraggable(e){this._imperativeDraggables.delete(e)}addDropZone(e,t){this._imperativeDropZones.set(e,t??{}),this._dropZoneManager.register(e,t)}removeDropZone(e){this._imperativeDropZones.delete(e),this._dropZoneManager.unregister(e)}isDragging(){return this._state.isDragging()}getActiveElement(){return this._state.getActiveElement()}use(e){return this._plugins.push(e),e.init(this),this}addBehavior(e){return this._behaviors.push(e),this}setOptions(e){Object.assign(this._options,e),this._engine.updateOptions(this._options)}_getDropZones(){let e=this._options.dropZoneSelector??"[data-droppable]",t=this._container instanceof ShadowRoot?this._container:this._container,n=Array.from(t.querySelectorAll(e)),o=[...this._imperativeDropZones.keys()];return[...new Set([...n,...o])]}_getItemData(e){return this._imperativeDraggables.get(e)?.data}_getItemAxis(e){let t=this._imperativeDraggables.get(e);if(t?.axis)return t.axis;let n=e.dataset.dragAxis;if(n==="x"||n==="y"||n==="both")return n}_scanDeclarativeElements(){let e=this._options.dropZoneSelector??"[data-droppable]",n=(this._container instanceof ShadowRoot?this._container:this._container).querySelectorAll(e);for(let o of n)this._imperativeDropZones.has(o)||this._dropZoneManager.register(o)}_setupStateListeners(){this._stateUnsubscribers.push(this._state.subscribe("dragstart",e=>{for(let t of this._behaviors)t.onDragStart?.(e)})),this._stateUnsubscribers.push(this._state.subscribe("dragmove",e=>{for(let t of this._behaviors)t.onDragMove?.(e)})),this._stateUnsubscribers.push(this._state.subscribe("dragend",e=>{for(let t of this._behaviors)t.onDragEnd?.(e)}))}_setupAutoRefresh(){this._observer=new MutationObserver(t=>{if(this._destroyed)return;let n=!1;for(let o of t)if(o.type==="childList"){n=!0;break}n&&!this._refreshScheduled&&(this._refreshScheduled=!0,requestAnimationFrame(()=>{this._destroyed||(this._refreshScheduled=!1,this.refresh())}))});let e=this._container instanceof ShadowRoot?this._container:this._container;this._observer.observe(e,{childList:!0,subtree:!0})}_setupScrollResize(){this._scrollHandler=()=>{this._state.isDragging()&&h.invalidateAll()},window.addEventListener("scroll",this._scrollHandler,!0),this._resizeHandler=()=>{h.invalidateAll()},window.addEventListener("resize",this._resizeHandler)}},G=C;var U={animation:150,ghostClass:"snap-sortable-ghost",placeholderClass:"snap-sortable-placeholder"},A=class{constructor(e={}){this.name="sortable";this._snap=null;this._placeholder=null;this._originalIndex=-1;this._currentIndex=-1;this._container=null;this._items=[];this._unsubscribers=[];this._options={...U,...e}}init(e){this._snap=e;let t=e.options.onDragStart,n=e.options.onDragMove,o=e.options.onDrop,i=e.options.onDragEnd;e.setOptions({onDragStart:s=>(this._onDragStart(s.element),t?.(s)),onDragMove:s=>{this._onDragMove(s.position.x,s.position.y),n?.(s)},onDrop:s=>{let a={...s,insertionIndex:this._currentIndex,sourceContainer:this._container??void 0};o?.(a)},onDragEnd:s=>{this._onDragEnd(),i?.(s)}})}destroy(){this._cleanup();for(let e of this._unsubscribers)e();this._unsubscribers=[],this._snap=null}_onDragStart(e){if(this._container=e.parentElement,!this._container)return;let t=this._snap?.options.draggableSelector??"[data-draggable]";this._items=Array.from(this._container.querySelectorAll(t)),this._originalIndex=this._items.indexOf(e),this._currentIndex=this._originalIndex,this._originalIndex!==-1&&(this._createPlaceholder(e),this._options.ghostClass&&e.classList.add(this._options.ghostClass))}_onDragMove(e,t){if(!this._placeholder||!this._container)return;let n=this._snap?.options.draggableSelector??"[data-draggable]",o=this._snap?.getActiveElement(),i=Array.from(this._container.querySelectorAll(n)).filter(d=>d!==o&&d!==this._placeholder);if(i.length===0){this._currentIndex=0;return}let s=h.get(i[0]),a=h.get(i[i.length-1]),p=Math.abs(a.top-s.top)>Math.abs(a.left-s.left),l=i.length;for(let d=0;d<i.length;d++){let c=h.get(i[d]),u=v(c);if(p){if(t<u.y){l=d;break}}else if(e<u.x){l=d;break}}l>this._originalIndex&&l++,l!==this._currentIndex&&(this._currentIndex=l,this._movePlaceholder(l))}_onDragEnd(){this._cleanup()}_createPlaceholder(e){let t=e.getBoundingClientRect();this._placeholder=document.createElement("div"),this._placeholder.className=this._options.placeholderClass??"",this._placeholder.style.cssText=`
|
|
13
13
|
width: ${t.width}px;
|
|
14
14
|
height: ${t.height}px;
|
|
15
15
|
margin: 0;
|