@vue-dnd-kit/core 0.0.26-beta → 0.0.27-beta
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/composables/useDnDStore.d.ts +2324 -64
- package/dist/composables/useDragContainer.d.ts +554 -3
- package/dist/composables/useDraggable.d.ts +32 -1
- package/dist/managers/useElementManager.d.ts +2 -0
- package/dist/types/index.d.ts +3 -3
- package/dist/vue-dnd-kit-core.cjs.js +1 -1
- package/dist/vue-dnd-kit-core.es.js +253 -265
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");let j=!1,H;const M=()=>(j||(H=n.effectScope(!0).run(()=>({isDragging:n.computed(()=>H.draggingElements.value.length>0),activeContainer:{component:n.ref(null),ref:n.ref(null)},elements:n.ref([]),draggingElements:n.ref([]),selectedElements:n.ref([]),zones:n.ref([]),hovered:{zone:n.ref(null),element:n.ref(null)},pointerPosition:{current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}}})),j=!0),H),te=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:s,isDragging:c,activeContainer:d}=M();return n.onMounted(()=>{d.ref=t}),n.onBeforeUnmount(()=>{d.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:s,isDragging:c}},ne=["innerHTML"],re=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:s,isDragging:c,draggingElements:d}=te(),o=n.computed(()=>{var i,f,h,y;return{transform:`translate3d(${(((i=s.current.value)==null?void 0:i.x)??0)-(((f=s.offset.pixel.value)==null?void 0:f.x)??0)}px, ${(((h=s.current.value)==null?void 0:h.y)??0)-(((y=s.offset.pixel.value)==null?void 0:y.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(i,f)=>n.unref(c)?(n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:n.normalizeStyle(o.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(d),(h,y)=>{var l,g;return n.openBlock(),n.createElementBlock("div",{key:y,innerHTML:h.initialHTML,style:n.normalizeStyle({width:`${(l=h.initialRect)==null?void 0:l.width}px`,height:`${(g=h.initialRect)==null?void 0:g.height}px`})},null,12,ne)}),128))],4)):n.createCommentVNode("",!0)}}),oe=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=M(),s=n.computed(()=>e.component.value??re);return(c,d)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(s.value)))}}),le="data-dnd-draggable";function se(t){return n.getCurrentScope()?(n.onScopeDispose(t),!0):!1}const ie=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const ae=t=>t!=null,A=()=>{};function ue(t){return Array.isArray(t)?t:[t]}function ce(t,e,s){const c=n.watch(t,(...d)=>(n.nextTick(()=>c()),e(...d)),s);return c}const Q=ie?window:void 0;function V(t){var e;const s=n.toValue(t);return(e=s==null?void 0:s.$el)!=null?e:s}function de(){const t=n.shallowRef(!1),e=n.getCurrentInstance();return e&&n.onMounted(()=>{t.value=!0},e),t}function ve(t){const e=de();return n.computed(()=>(e.value,!!t()))}function fe(t,e,s={}){const{root:c,rootMargin:d="0px",threshold:o=0,window:i=Q,immediate:f=!0}=s,h=ve(()=>i&&"IntersectionObserver"in i),y=n.computed(()=>{const r=n.toValue(t);return ue(r).map(V).filter(ae)});let l=A;const g=n.shallowRef(f),P=h.value?n.watch(()=>[y.value,V(c),g.value],([r,v])=>{if(l(),!g.value||!r.length)return;const p=new IntersectionObserver(e,{root:V(v),rootMargin:d,threshold:o});r.forEach(m=>m&&p.observe(m)),l=()=>{p.disconnect(),l=A}},{immediate:f,flush:"post"}):A,E=()=>{l(),P(),g.value=!1};return se(E),{isSupported:h,isActive:g,pause(){l(),g.value=!1},resume(){g.value=!0},stop:E}}function ge(t,e={}){const{window:s=Q,scrollTarget:c,threshold:d=0,rootMargin:o,once:i=!1}=e,f=n.shallowRef(!1),{stop:h}=fe(t,y=>{let l=f.value,g=0;for(const P of y)P.time>=g&&(g=P.time,l=P.isIntersecting);f.value=l,i&&ce(f,()=>{h()})},{root:c,window:s,threshold:d,rootMargin:n.toValue(o)});return f}const me=t=>{const{elements:e,draggingElements:s,hovered:c,selectedElements:d,isDragging:o}=M(),i=n.ref(null),f=n.computed(()=>{var E;return((E=c.element.value)==null?void 0:E.node)===i.value}),h=ge(i),y=n.computed(()=>s.value.some(E=>E.node===i.value)),l=n.computed(()=>{if(!i.value||!o.value)return!1;const E=e.value.find(r=>r.node===i.value);return E!=null&&E.groups.length?!s.value.some(r=>r.groups.length?!r.groups.some(v=>E.groups.includes(v)):!1):!0});return{elementRef:i,registerElement:()=>{if(!i.value)throw new Error("ElementRef is not set");e.value.push({node:i.value,groups:(t==null?void 0:t.groups)??[],layer:(t==null?void 0:t.layer)??null,defaultLayer:(t==null?void 0:t.layer)??null,events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0,isVisible:h.value}),i.value.setAttribute(le,"true")},unregisterElement:()=>{const E=e.value.findIndex(v=>v.node===i.value);E!==-1&&e.value.splice(E,1);const r=d.value.findIndex(v=>v.node===i.value);r!==-1&&d.value.splice(r,1)},isDragging:y,isOvered:f,isAllowed:l}},he=()=>{let t="",e="",s="";const c=()=>{const i=document.body;t=i.style.userSelect,e=i.style.touchAction,s=i.style.overscrollBehavior,i.style.userSelect="none",i.style.touchAction="none",i.style.overscrollBehavior="none",window.addEventListener("contextmenu",o),window.addEventListener("selectstart",o),window.addEventListener("touchstart",o),window.addEventListener("touchmove",o)},d=()=>{const i=document.body;i.style.userSelect=t,i.style.touchAction=e,i.style.overscrollBehavior=s,window.removeEventListener("contextmenu",o),window.removeEventListener("selectstart",o),window.removeEventListener("touchstart",o),window.removeEventListener("touchmove",o)},o=i=>i.preventDefault();return{disableInteractions:c,enableInteractions:d}},J=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,k=t=>{if(!t)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const e=t.getBoundingClientRect();return{bottom:e.bottom,left:e.left,right:e.right,top:e.top,x:e.x,y:e.y,width:e.width,height:e.height}},b=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),pe=(t,e)=>{const s=k(t);return{pixel:{x:e.x-s.x,y:e.y-s.y},percent:{x:(e.x-s.x)/s.width*100,y:(e.y-s.y)/s.height*100}}},K=(t,e)=>{const s=e.x-t.x,c=e.y-t.y;return Math.sqrt(s*s+c*c)},I=(t,e)=>t?e.contains(t):!1,ye=t=>{const e=M();return{onPointerStart:o=>{e.pointerPosition.start.value={x:o.clientX,y:o.clientY},e.pointerPosition.current.value={x:o.clientX,y:o.clientY};const{pixel:i,percent:f}=pe(t.value,{x:o.clientX,y:o.clientY});e.pointerPosition.offset.pixel.value=i,e.pointerPosition.offset.percent.value=f},onPointerMove:o=>{e.pointerPosition.current.value={x:o.clientX,y:o.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},Ee=t=>{const e=M(),{onPointerStart:s,onPointerMove:c,onPointerEnd:d}=ye(t);let o=null;const i=r=>{var m,x;const v=e.selectedElements.value.some(w=>w.node===r);if(e.selectedElements.value.length&&v)return e.selectedElements.value.map(w=>{var C,z;return{...w,initialHTML:((C=w.node)==null?void 0:C.outerHTML)??"",initialRect:(z=w.node)==null?void 0:z.getBoundingClientRect()}});e.selectedElements.value=[];const p=e.elements.value.find(w=>w.node===r);return p?[{...p,initialHTML:((m=p.node)==null?void 0:m.outerHTML)??"",initialRect:(x=p.node)==null?void 0:x.getBoundingClientRect()}]:[]},f=(r,v)=>{const p=Math.max(0,Math.min(r.x+r.width,v.x+v.width)-Math.max(r.x,v.x)),m=Math.max(0,Math.min(r.y+r.height,v.y+v.height)-Math.max(r.y,v.y)),x=p*m,w=r.width*r.height,C=v.width*v.height;return(x/w*100+x/C*100)/2},h=()=>{var U,Z,$,X,Y,F,W,q,N,G;const r=k(e.activeContainer.ref.value),v=b(r),p=((U=e.pointerPosition.current.value)==null?void 0:U.x)??0,m=((Z=e.pointerPosition.current.value)==null?void 0:Z.y)??0,w=!(r&&p>=r.x&&p<=r.x+r.width&&m>=r.y&&m<=r.y+r.height),C=e.draggingElements.value.map(a=>a.node),z=e.elements.value.filter(a=>{if(!a.node||!a.isVisible||!a.node||C.some(D=>D&&I(a.node,D))||a.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(L=>a.groups.includes(L)):!1))return!1;const u=k(a.node);return u&&r&&J(u,r)}).map(a=>{const u=k(a.node),D=b(u),S=p>=u.x&&p<=u.x+u.width&&m>=u.y&&m<=u.y+u.height,L=f(u,r),R=K(v,D),B=e.elements.value.filter(_=>_!==a&&_.node&&a.node&&I(a.node,_.node)).length;return{element:a,isPointerInElement:S,overlapPercent:L,depth:B,centerDistance:R}}).sort((a,u)=>{if(!w){if(a.isPointerInElement&&u.isPointerInElement)return u.depth-a.depth;if(a.isPointerInElement!==u.isPointerInElement)return a.isPointerInElement?-1:1}return Math.abs(a.overlapPercent-u.overlapPercent)<=1?a.centerDistance-u.centerDistance:u.overlapPercent-a.overlapPercent}),ee=e.zones.value.filter(a=>{if(!a.node||C.some(D=>D&&I(a.node,D))||a.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(L=>a.groups.includes(L)):!1))return!1;const u=k(a.node);return u&&r&&J(u,r)}).map(a=>{const u=k(a.node),D=b(u),S=p>=u.x&&p<=u.x+u.width&&m>=u.y&&m<=u.y+u.height,L=f(u,r),R=K(v,D),B=e.zones.value.filter(_=>_!==a&&_.node&&a.node&&I(a.node,_.node)).length;return{zone:a,isPointerInElement:S,overlapPercent:L,depth:B,centerDistance:R}}).sort((a,u)=>{if(!w){if(a.isPointerInElement&&u.isPointerInElement)return u.depth-a.depth;if(a.isPointerInElement!==u.isPointerInElement)return a.isPointerInElement?-1:1}return Math.abs(a.overlapPercent-u.overlapPercent)<=1?a.centerDistance-u.centerDistance:u.overlapPercent-a.overlapPercent}),O=e.hovered.element.value,T=e.hovered.zone.value;e.hovered.element.value=(($=z[0])==null?void 0:$.element)??null,e.hovered.zone.value=((X=ee[0])==null?void 0:X.zone)??null,e.hovered.element.value!==O&&((Y=O==null?void 0:O.events)!=null&&Y.onLeave&&O.events.onLeave(e),(W=(F=e.hovered.element.value)==null?void 0:F.events)!=null&&W.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==T&&((q=T==null?void 0:T.events)!=null&&q.onLeave&&T.events.onLeave(e),(G=(N=e.hovered.zone.value)==null?void 0:N.events)!=null&&G.onHover&&e.hovered.zone.value.events.onHover(e)),o=requestAnimationFrame(h)},y=()=>{h()},l=()=>{o!==null&&(cancelAnimationFrame(o),o=null)};return{activate:r=>{e.draggingElements.value=i(t.value),s(r),y()},track:r=>{c(r)},deactivate:()=>{var r,v;d(),e.hovered.zone.value?(v=(r=e.hovered.zone.value.events).onDrop)==null||v.call(r,e):e.draggingElements.value.forEach(p=>{var m,x;return(x=(m=p.events).onEnd)==null?void 0:x.call(m,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,l()}}},we=t=>{const{elementRef:e,registerElement:s,unregisterElement:c,isDragging:d,isOvered:o,isAllowed:i}=me(t),{disableInteractions:f,enableInteractions:h}=he(),y=M(),{activate:l,track:g,deactivate:P}=Ee(e),E=m=>{t!=null&&t.container&&(y.activeContainer.component.value=n.markRaw(t.container)),f(),l(m),document.addEventListener("pointermove",r),document.addEventListener("pointerup",p),document.addEventListener("wheel",v)},r=m=>{g(m)},v=m=>{g(m)},p=()=>{y.activeContainer.component.value=null,h(),P(),document.removeEventListener("pointermove",r),document.removeEventListener("pointerup",p),document.removeEventListener("wheel",v)};return n.onMounted(s),n.onBeforeUnmount(c),{pointerPosition:y.pointerPosition,elementRef:e,isDragging:d,isOvered:o,isAllowed:i,handleDragStart:E}},Pe=t=>{const{zones:e,hovered:s,draggingElements:c,isDragging:d}=M(),o=n.ref(null),i=n.computed(()=>{var l;return((l=s.zone.value)==null?void 0:l.node)===o.value}),f=n.computed(()=>{if(!o.value||!d.value)return!1;const l=e.value.find(g=>g.node===o.value);return l!=null&&l.groups.length?!c.value.some(g=>g.groups.length?!g.groups.some(P=>l.groups.includes(P)):!1):!0});return{elementRef:o,registerZone:()=>{if(!o.value)throw new Error("elementRef is not set");e.value.push({node:o.value,groups:(t==null?void 0:t.groups)??[],events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0}),o.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!o.value)throw new Error("elementRef is not set");const l=e.value.findIndex(g=>g.node===o.value);l!==-1&&e.value.splice(l,1)},isOvered:i,isAllowed:f}},De=t=>{const{elementRef:e,registerZone:s,unregisterZone:c,isOvered:d,isAllowed:o}=Pe(t);return n.onMounted(s),n.onBeforeUnmount(c),{elementRef:e,isOvered:d,isAllowed:o}},xe=t=>{const{selectedElements:e,elements:s}=M(),c=n.computed(()=>s.value.find(l=>l.node===t.value)),d=n.computed(()=>e.value.some(l=>l.node===t.value)),o=n.computed(()=>t.value?e.value.some(l=>l.node&&I(l.node,t.value)):!1),i=n.computed(()=>t.value?e.value.some(l=>l.node&&I(t.value,l.node)):!1),f=()=>{c.value&&(e.value=e.value.filter(l=>l.node!==t.value))},h=()=>{c.value&&(o.value&&(e.value=e.value.filter(l=>l.node&&!I(l.node,t.value))),i.value&&(e.value=e.value.filter(l=>l.node&&!I(t.value,l.node))),e.value.push(c.value))};return{handleUnselect:f,handleSelect:h,handleToggleSelect:()=>{c.value&&(e.value.some(l=>l.node===t.value)?f():h())},isSelected:d,isParentOfSelected:o}};exports.DragOverlay=oe;exports.getBoundingBox=k;exports.useDnDStore=M;exports.useDraggable=we;exports.useDroppable=De;exports.useSelection=xe;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");function Q(t){return n.getCurrentScope()?(n.onScopeDispose(t),!0):!1}function ee(t){let e=!1,r;const c=n.effectScope(!0);return(...d)=>(e||(r=c.run(()=>t(...d)),e=!0),r)}const te=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const ne=t=>t!=null,H=()=>{};function re(t){return Array.isArray(t)?t:[t]}function oe(t,e,r){const c=n.watch(t,(...d)=>(n.nextTick(()=>c()),e(...d)),r);return c}const J=te?window:void 0;function A(t){var e;const r=n.toValue(t);return(e=r==null?void 0:r.$el)!=null?e:r}function le(){const t=n.shallowRef(!1),e=n.getCurrentInstance();return e&&n.onMounted(()=>{t.value=!0},e),t}function se(t){const e=le();return n.computed(()=>(e.value,!!t()))}function ie(t,e,r={}){const{root:c,rootMargin:d="0px",threshold:o=0,window:i=J,immediate:v=!0}=r,m=se(()=>i&&"IntersectionObserver"in i),y=n.computed(()=>{const l=n.toValue(t);return re(l).map(A).filter(ne)});let s=H;const g=n.shallowRef(v),P=m.value?n.watch(()=>[y.value,A(c),g.value],([l,f])=>{if(s(),!g.value||!l.length)return;const p=new IntersectionObserver(e,{root:A(f),rootMargin:d,threshold:o});l.forEach(h=>h&&p.observe(h)),s=()=>{p.disconnect(),s=H}},{immediate:v,flush:"post"}):H,E=()=>{s(),P(),g.value=!1};return Q(E),{isSupported:m,isActive:g,pause(){s(),g.value=!1},resume(){g.value=!0},stop:E}}function ae(t,e={}){const{window:r=J,scrollTarget:c,threshold:d=0,rootMargin:o,once:i=!1}=e,v=n.shallowRef(!1),{stop:m}=ie(t,y=>{let s=v.value,g=0;for(const P of y)P.time>=g&&(g=P.time,s=P.isIntersecting);v.value=s,i&&oe(v,()=>{m()})},{root:c,window:r,threshold:d,rootMargin:n.toValue(o)});return v}const M=ee(()=>{const t=n.ref([]),e=n.computed(()=>t.value.length>0),r={component:n.ref(null),ref:n.ref(null)},c=n.ref([]),d=n.ref([]),o=n.ref([]),i={zone:n.ref(null),element:n.ref(null)},v={current:n.ref(null),start:n.ref(null),offset:{percent:n.ref(null),pixel:n.ref(null)}};return{isDragging:e,activeContainer:r,elements:c,draggingElements:t,selectedElements:d,zones:o,hovered:i,pointerPosition:v}}),ue=()=>{const t=n.ref(null),{draggingElements:e,pointerPosition:r,isDragging:c,activeContainer:d}=M();return n.onMounted(()=>{d.ref=t}),n.onBeforeUnmount(()=>{d.ref.value=null}),{elementRef:t,draggingElements:e,pointerPosition:r,isDragging:c}},ce=["innerHTML"],de=n.defineComponent({__name:"DefaultOverlay",setup(t){const{elementRef:e,pointerPosition:r,isDragging:c,draggingElements:d}=ue(),o=n.computed(()=>{var i,v,m,y;return{transform:`translate3d(${(((i=r.current.value)==null?void 0:i.x)??0)-(((v=r.offset.pixel.value)==null?void 0:v.x)??0)}px, ${(((m=r.current.value)==null?void 0:m.y)??0)-(((y=r.offset.pixel.value)==null?void 0:y.y)??0)}px, 0)`,zIndex:1e3,position:"fixed",top:0,left:0,transition:"0.3s cubic-bezier(0.165, 0.84, 0.44, 1)"}});return(i,v)=>n.unref(c)?(n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"elementRef",ref:e,style:n.normalizeStyle(o.value)},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(n.unref(d),(m,y)=>{var s,g;return n.openBlock(),n.createElementBlock("div",{key:y,innerHTML:m.initialHTML,style:n.normalizeStyle({width:`${(s=m.initialRect)==null?void 0:s.width}px`,height:`${(g=m.initialRect)==null?void 0:g.height}px`})},null,12,ce)}),128))],4)):n.createCommentVNode("",!0)}}),ve=n.defineComponent({__name:"DragOverlay",setup(t){const{activeContainer:e}=M(),r=n.computed(()=>e.component.value??de);return(c,d)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(r.value)))}}),fe="data-dnd-draggable",ge=t=>{const{elements:e,draggingElements:r,hovered:c,selectedElements:d,isDragging:o}=M(),i=n.ref(null),v=n.computed(()=>{var E;return((E=c.element.value)==null?void 0:E.node)===i.value}),m=ae(i),y=n.computed(()=>r.value.some(E=>E.node===i.value)),s=n.computed(()=>{if(!i.value||!o.value)return!1;const E=e.value.find(l=>l.node===i.value);return E!=null&&E.groups.length?!r.value.some(l=>l.groups.length?!l.groups.some(f=>E.groups.includes(f)):!1):!0});return{elementRef:i,registerElement:()=>{if(!i.value)throw new Error("ElementRef is not set");e.value.push({node:i.value,groups:(t==null?void 0:t.groups)??[],layer:(t==null?void 0:t.layer)??null,defaultLayer:(t==null?void 0:t.layer)??null,events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0,isVisible:m.value}),i.value.setAttribute(fe,"true")},unregisterElement:()=>{const E=e.value.findIndex(f=>f.node===i.value);E!==-1&&e.value.splice(E,1);const l=d.value.findIndex(f=>f.node===i.value);l!==-1&&d.value.splice(l,1)},isDragging:y,isOvered:v,isAllowed:s,isVisible:m}},me=()=>{let t="",e="",r="";const c=()=>{const i=document.body;t=i.style.userSelect,e=i.style.touchAction,r=i.style.overscrollBehavior,i.style.userSelect="none",i.style.touchAction="none",i.style.overscrollBehavior="none",window.addEventListener("contextmenu",o),window.addEventListener("selectstart",o),window.addEventListener("touchstart",o),window.addEventListener("touchmove",o)},d=()=>{const i=document.body;i.style.userSelect=t,i.style.touchAction=e,i.style.overscrollBehavior=r,window.removeEventListener("contextmenu",o),window.removeEventListener("selectstart",o),window.removeEventListener("touchstart",o),window.removeEventListener("touchmove",o)},o=i=>i.preventDefault();return{disableInteractions:c,enableInteractions:d}},N=(t,e)=>t.x<e.x+e.width&&t.x+t.width>e.x&&t.y<e.y+e.height&&t.y+t.height>e.y,k=t=>{if(!t)return{x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0};const e=t.getBoundingClientRect();return{bottom:e.bottom,left:e.left,right:e.right,top:e.top,x:e.x,y:e.y,width:e.width,height:e.height}},b=t=>({x:t.x+t.width/2,y:t.y+t.height/2}),he=(t,e)=>{const r=k(t);return{pixel:{x:e.x-r.x,y:e.y-r.y},percent:{x:(e.x-r.x)/r.width*100,y:(e.y-r.y)/r.height*100}}},j=(t,e)=>{const r=e.x-t.x,c=e.y-t.y;return Math.sqrt(r*r+c*c)},I=(t,e)=>t?e.contains(t):!1,pe=t=>{const e=M();return{onPointerStart:o=>{e.pointerPosition.start.value={x:o.clientX,y:o.clientY},e.pointerPosition.current.value={x:o.clientX,y:o.clientY};const{pixel:i,percent:v}=he(t.value,{x:o.clientX,y:o.clientY});e.pointerPosition.offset.pixel.value=i,e.pointerPosition.offset.percent.value=v},onPointerMove:o=>{e.pointerPosition.current.value={x:o.clientX,y:o.clientY}},onPointerEnd:()=>{e.pointerPosition.current.value=null,e.pointerPosition.start.value=null,e.pointerPosition.offset.pixel.value=null,e.pointerPosition.offset.percent.value=null}}},ye=t=>{const e=M(),{onPointerStart:r,onPointerMove:c,onPointerEnd:d}=pe(t);let o=null;const i=l=>{var h,x;const f=e.selectedElements.value.some(w=>w.node===l);if(e.selectedElements.value.length&&f)return e.selectedElements.value.map(w=>{var C,z;return{...w,initialHTML:((C=w.node)==null?void 0:C.outerHTML)??"",initialRect:(z=w.node)==null?void 0:z.getBoundingClientRect()}});e.selectedElements.value=[];const p=e.elements.value.find(w=>w.node===l);return p?[{...p,initialHTML:((h=p.node)==null?void 0:h.outerHTML)??"",initialRect:(x=p.node)==null?void 0:x.getBoundingClientRect()}]:[]},v=(l,f)=>{const p=Math.max(0,Math.min(l.x+l.width,f.x+f.width)-Math.max(l.x,f.x)),h=Math.max(0,Math.min(l.y+l.height,f.y+f.height)-Math.max(l.y,f.y)),x=p*h,w=l.width*l.height,C=f.width*f.height;return(x/w*100+x/C*100)/2},m=()=>{var V,U,Z,$,X,Y,F,W,q,G;const l=k(e.activeContainer.ref.value),f=b(l),p=((V=e.pointerPosition.current.value)==null?void 0:V.x)??0,h=((U=e.pointerPosition.current.value)==null?void 0:U.y)??0,w=!(l&&p>=l.x&&p<=l.x+l.width&&h>=l.y&&h<=l.y+l.height),C=e.draggingElements.value.map(a=>a.node),z=e.elements.value.filter(a=>{if(!a.node||C.some(D=>D&&I(a.node,D))||a.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(L=>a.groups.includes(L)):!1))return!1;const u=k(a.node);return u&&l&&N(u,l)}).map(a=>{const u=k(a.node),D=b(u),S=p>=u.x&&p<=u.x+u.width&&h>=u.y&&h<=u.y+u.height,L=v(u,l),R=j(f,D),B=e.elements.value.filter(_=>_!==a&&_.node&&a.node&&I(a.node,_.node)).length;return{element:a,isPointerInElement:S,overlapPercent:L,depth:B,centerDistance:R}}).sort((a,u)=>{if(!w){if(a.isPointerInElement&&u.isPointerInElement)return u.depth-a.depth;if(a.isPointerInElement!==u.isPointerInElement)return a.isPointerInElement?-1:1}return Math.abs(a.overlapPercent-u.overlapPercent)<=1?a.centerDistance-u.centerDistance:u.overlapPercent-a.overlapPercent}),K=e.zones.value.filter(a=>{if(!a.node||C.some(D=>D&&I(a.node,D))||a.groups.length&&!!e.draggingElements.value.some(S=>S.groups.length?!S.groups.some(L=>a.groups.includes(L)):!1))return!1;const u=k(a.node);return u&&l&&N(u,l)}).map(a=>{const u=k(a.node),D=b(u),S=p>=u.x&&p<=u.x+u.width&&h>=u.y&&h<=u.y+u.height,L=v(u,l),R=j(f,D),B=e.zones.value.filter(_=>_!==a&&_.node&&a.node&&I(a.node,_.node)).length;return{zone:a,isPointerInElement:S,overlapPercent:L,depth:B,centerDistance:R}}).sort((a,u)=>{if(!w){if(a.isPointerInElement&&u.isPointerInElement)return u.depth-a.depth;if(a.isPointerInElement!==u.isPointerInElement)return a.isPointerInElement?-1:1}return Math.abs(a.overlapPercent-u.overlapPercent)<=1?a.centerDistance-u.centerDistance:u.overlapPercent-a.overlapPercent}),O=e.hovered.element.value,T=e.hovered.zone.value;e.hovered.element.value=((Z=z[0])==null?void 0:Z.element)??null,e.hovered.zone.value=(($=K[0])==null?void 0:$.zone)??null,e.hovered.element.value!==O&&((X=O==null?void 0:O.events)!=null&&X.onLeave&&O.events.onLeave(e),(F=(Y=e.hovered.element.value)==null?void 0:Y.events)!=null&&F.onHover&&e.hovered.element.value.events.onHover(e)),e.hovered.zone.value!==T&&((W=T==null?void 0:T.events)!=null&&W.onLeave&&T.events.onLeave(e),(G=(q=e.hovered.zone.value)==null?void 0:q.events)!=null&&G.onHover&&e.hovered.zone.value.events.onHover(e)),o=requestAnimationFrame(m)},y=()=>{m()},s=()=>{o!==null&&(cancelAnimationFrame(o),o=null)};return{activate:l=>{e.draggingElements.value=i(t.value),r(l),y()},track:l=>{c(l)},deactivate:()=>{var l,f;d(),e.hovered.zone.value?(f=(l=e.hovered.zone.value.events).onDrop)==null||f.call(l,e):e.draggingElements.value.forEach(p=>{var h,x;return(x=(h=p.events).onEnd)==null?void 0:x.call(h,e)}),e.draggingElements.value=[],e.selectedElements.value=[],e.hovered.zone.value=null,e.hovered.element.value=null,s()}}},Ee=t=>{const{elementRef:e,registerElement:r,unregisterElement:c,isDragging:d,isOvered:o,isAllowed:i}=ge(t),{disableInteractions:v,enableInteractions:m}=me(),y=M(),{activate:s,track:g,deactivate:P}=ye(e),E=h=>{t!=null&&t.container&&(y.activeContainer.component.value=n.markRaw(t.container)),v(),s(h),document.addEventListener("pointermove",l),document.addEventListener("pointerup",p),document.addEventListener("wheel",f)},l=h=>{g(h)},f=h=>{g(h)},p=()=>{y.activeContainer.component.value=null,m(),P(),document.removeEventListener("pointermove",l),document.removeEventListener("pointerup",p),document.removeEventListener("wheel",f)};return n.onMounted(r),n.onBeforeUnmount(c),{pointerPosition:y.pointerPosition,elementRef:e,isDragging:d,isOvered:o,isAllowed:i,handleDragStart:E}},we=t=>{const{zones:e,hovered:r,draggingElements:c,isDragging:d}=M(),o=n.ref(null),i=n.computed(()=>{var s;return((s=r.zone.value)==null?void 0:s.node)===o.value}),v=n.computed(()=>{if(!o.value||!d.value)return!1;const s=e.value.find(g=>g.node===o.value);return s!=null&&s.groups.length?!c.value.some(g=>g.groups.length?!g.groups.some(P=>s.groups.includes(P)):!1):!0});return{elementRef:o,registerZone:()=>{if(!o.value)throw new Error("elementRef is not set");e.value.push({node:o.value,groups:(t==null?void 0:t.groups)??[],events:(t==null?void 0:t.events)??{},data:(t==null?void 0:t.data)??void 0}),o.value.setAttribute("data-dnd-droppable","true")},unregisterZone:()=>{if(!o.value)throw new Error("elementRef is not set");const s=e.value.findIndex(g=>g.node===o.value);s!==-1&&e.value.splice(s,1)},isOvered:i,isAllowed:v}},Pe=t=>{const{elementRef:e,registerZone:r,unregisterZone:c,isOvered:d,isAllowed:o}=we(t);return n.onMounted(r),n.onBeforeUnmount(c),{elementRef:e,isOvered:d,isAllowed:o}},De=t=>{const{selectedElements:e,elements:r}=M(),c=n.computed(()=>r.value.find(s=>s.node===t.value)),d=n.computed(()=>e.value.some(s=>s.node===t.value)),o=n.computed(()=>t.value?e.value.some(s=>s.node&&I(s.node,t.value)):!1),i=n.computed(()=>t.value?e.value.some(s=>s.node&&I(t.value,s.node)):!1),v=()=>{c.value&&(e.value=e.value.filter(s=>s.node!==t.value))},m=()=>{c.value&&(o.value&&(e.value=e.value.filter(s=>s.node&&!I(s.node,t.value))),i.value&&(e.value=e.value.filter(s=>s.node&&!I(t.value,s.node))),e.value.push(c.value))};return{handleUnselect:v,handleSelect:m,handleToggleSelect:()=>{c.value&&(e.value.some(s=>s.node===t.value)?v():m())},isSelected:d,isParentOfSelected:o}};exports.DragOverlay=ve;exports.getBoundingBox=k;exports.useDnDStore=M;exports.useDraggable=Ee;exports.useDroppable=Pe;exports.useSelection=De;
|