@vue-dnd-kit/core 2.0.0-alpha5 → 2.0.0-alpha6
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/vue-dnd-kit-core.cjs.js +1 -1
- package/dist/vue-dnd-kit-core.es.js +144 -142
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-default-overlay{transform:translate3d(var(--position-x),var(--position-y),0)}.dnd-kit-overlay-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),E={SELECT_AREA:"data-dnd-kit-select-area",DRAGGABLE:"data-dnd-kit-draggable",DROPPABLE:"data-dnd-kit-droppable",CONSTRAINT_AREA:"data-dnd-kit-constraint-area"},k={SELECT_AREA:`[${E.SELECT_AREA}]`,DRAGGABLE:`[${E.DRAGGABLE}]`,CONSTRAINT_AREA:`[${E.CONSTRAINT_AREA}]`},$="VueDnDKitProvider",X=(e,t,n,s)=>{const i=new Set;return t.forEach(a=>{const o=e.get(a),l=s?s(a):o?.disabled;if(!o||l)return;const c=o.modifier?.keys,u=o.modifier?.method;if(!c||!u||c.length===0){i.add(a);return}c[u](f=>n.value.has(f))&&i.add(a)}),i};let ee="",ce="",ue="";const z=e=>e.value?e.value instanceof HTMLElement?e.value:e.value.$el:null,C=(e,t)=>e!==t&&e.contains(t),ge=(e,t)=>!(e.right<t.left||e.left>t.right||e.bottom<t.top||e.top>t.bottom),H=()=>{const e=document.body;ee=e.style.userSelect,e.style.userSelect="none",window.addEventListener("contextmenu",h),window.addEventListener("selectstart",h),window.addEventListener("touchstart",h),window.addEventListener("touchmove",h)},G=()=>{const e=document.body;e.style.userSelect=ee,e.style.touchAction=ce,e.style.overscrollBehavior=ue,window.removeEventListener("contextmenu",h),window.removeEventListener("selectstart",h),window.removeEventListener("touchstart",h),window.removeEventListener("touchmove",h)},h=e=>e.preventDefault(),M=(e,t)=>{if(t.entities.draggableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.draggableMap)if(i.disabled&&C(s,e))return!0;return!1},w=(e,t)=>{if(t.entities.droppableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.droppableMap)if(i.disabled&&C(s,e))return!0;return!1},F=e=>{const t=new IntersectionObserver(n=>{n.forEach(s=>{const i=s.target;e[s.isIntersecting?"add":"delete"](i)})});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},fe=e=>{const t=new ResizeObserver(n=>{const s=n[0];if(!s)return;const{width:i,height:a}=s.contentRect;e.value={width:i,height:a}});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},de=e=>{const t=r.ref(null),n=fe(t),s=r.watch(e,a=>{n.disconnect(),a&&n.observe(a)},{immediate:!0});return{overlaySize:t,overlaySizeObserver:{disconnect:()=>{s(),n.disconnect()}}}};function N(e,t=0,n=0){return{start:{x:e.clientX,y:e.clientY},current:{x:e.clientX,y:e.clientY},offset:{x:t,y:n}}}function te(e,t){const n=t.getBoundingClientRect(),s=n.width>0?(e.clientX-n.left)/n.width:.5,i=n.height>0?(e.clientY-n.top)/n.height:.5;return{x:s,y:i}}function ne(e,t){return{...t,initialHTML:e.innerHTML,initialRect:e.getBoundingClientRect(),initialOuterHTML:e.outerHTML}}function ye(e,t,n){e.forEach(s=>{const i=t.get(s);n.set(s,ne(s,i))}),e.clear()}function me(e,t,n){n.clear();const s=t.get(e);n.set(e,ne(e,s))}function O(e){e.entities.initiatingDraggable&&(e.state.value="dragging",be(e.entities.initiatingDraggable,e.entities.selectedSet,e.entities.draggableMap,e.entities.draggingMap))}function be(e,t,n,s){t.has(e)?ye(t,n,s):(t.clear(),me(e,n,s))}function se(e,t,n,s){if(s||!n)return!0;const i=e.closest(n);return i?t.contains(i):!1}function he(e,t){if(!e||!t)return 1;const n=Math.abs(e.current.x-e.start.x),s=Math.abs(e.current.y-e.start.y);if(typeof t=="number"){const u=Math.sqrt(n*n+s*s);return Math.min(u/t,1)}const{x:i=0,y:a=0,condition:o="any"}=t;if(i===0&&a===0)return 1;const l=i>0?Math.min(n/i,1):1,c=a>0?Math.min(s/a,1):1;return o==="both"?Math.min(l,c):Math.max(l,c)}function ie(e,t,n){if(!n)return!0;const s=n.distance!=null,i=n.delay!=null;return!s&&!i?!0:s&&!i?e>=1:!s&&i?t>=1:(n.condition??"both")==="both"?e>=1&&t>=1:e>=1||t>=1}function De(e){if(e.state.value!=="activating"||!e.entities.initiatingDraggable)return!1;const t=e.entities.draggableMap.get(e.entities.initiatingDraggable);return ie(e.distanceProgress.value,e.delay.progress,t?.activation)?(O(e),!0):!1}function pe(e,t){let n=null;const s=()=>{if(e.state.value!=="activating"||!e.entities.initiatingDraggable){n=null;return}const i=e.entities.draggableMap.get(e.entities.initiatingDraggable),a=i?.activation?.delay;if(!a){n=null;return}e.delay.progress=Math.min((Date.now()-e.delay.startTime)/(a*1e3),1),ie(e.distanceProgress.value,e.delay.progress,i?.activation)?(t(),n=null):n=requestAnimationFrame(s)};return n=requestAnimationFrame(s),{cancel:()=>{n!==null&&(cancelAnimationFrame(n),n=null)}}}function ve(e,t){const n=e.closest(k.CONSTRAINT_AREA);return!n||!t.has(n)?null:{element:n,entity:t.get(n)}}function Ee(e,t,n,s){return n==="x"?{x:e,y:s.top}:n==="y"?{x:s.left,y:t}:{x:e,y:t}}function Me(e,t,n,s,i){let a=e,o=t;return n!=="y"&&(a=Math.max(s.left,Math.min(s.right-i.width,e))),n!=="x"&&(o=Math.max(s.top,Math.min(s.bottom-i.height,t))),{x:a,y:o}}function Se(e,t,n,s,i){if(!e||!t)return{x:0,y:0};const a=t.getBoundingClientRect(),o=a.width||i?.width||0,l=a.height||i?.height||0;let c=e.current.x-o*e.offset.x,u=e.current.y-l*e.offset.y;if(!n)return{x:c,y:u};const d=ve(n,s);if(!d)return{x:c,y:u};const{element:f,entity:y}=d,g=f.getBoundingClientRect(),m=n.getBoundingClientRect(),b=Ee(c,u,y.axis||"both",m);return y.restrictToArea?Me(b.x,b.y,y.axis||"both",g,a):b}const x={forDrag:["Enter","Space"],forCancel:["Escape"],forDrop:["Enter","Space"],forMove:["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","KeyW","KeyA","KeyS","KeyD"],forMoveFaster:["ShiftLeft","ShiftRight"]};function Ae(e){const t=r.shallowRef(),n=r.ref(),i={keys:{pressedKeys:r.ref(new Set),forDrag:[...x.forDrag],forCancel:[...x.forCancel],forDrop:[...x.forDrop],forMove:[...x.forMove],forMoveFaster:[...x.forMoveFaster]},step:8,moveFaster:4},a=r.reactive({draggableMap:new Map,droppableMap:new Map,selectableAreaMap:new Map,constraintsAreaMap:new Map,initiatingDraggable:void 0,selectingArea:void 0,draggingMap:new Map,selectedSet:new Set,modifiersSelectableAreaSet:r.computed(()=>X(a.selectableAreaMap,a.visibleSelectableAreaSet,i.keys.pressedKeys)),modifiersDraggableSet:r.computed(()=>X(a.draggableMap,a.visibleDraggableSet,i.keys.pressedKeys,P=>M(P,{entities:a}))),visibleDraggableSet:new Set,visibleDroppableSet:new Set,visibleSelectableAreaSet:new Set}),o=r.reactive({x:window.scrollX,y:window.scrollY}),l=r.reactive({progress:0,startTime:0}),c=r.computed(()=>{if(!n.value||!a.initiatingDraggable)return 0;const P=a.draggableMap.get(a.initiatingDraggable)?.activation?.distance;return P?he(n.value,P):1}),u=F(a.visibleDraggableSet),d=F(a.visibleDroppableSet),f=F(a.visibleSelectableAreaSet),{overlaySize:y,overlaySizeObserver:g}=de(e),m=r.ref(),b=r.reactive({draggable:new Map,droppable:new Map}),v={throttle:r.shallowRef(0)},L=r.computed(()=>{o.y,o.x;const B=a.initiatingDraggable;return Se(n.value,e.value,B||null,a.constraintsAreaMap,y.value)});return{state:t,pointer:n,entities:a,keyboard:i,scrollPosition:o,delay:l,distanceProgress:c,hovered:b,collision:v,overlay:{size:y,style:L,render:m,ref:e},lib:{draggableObserver:u,droppableObserver:d,selectableAreaObserver:f,overlaySizeObserver:g}}}const T=e=>{e.pointer.value=void 0,e.state.value=void 0,e.entities.selectingArea=void 0,e.entities.initiatingDraggable=void 0,e.delay.progress=0,e.delay.startTime=0,e.entities.draggingMap.clear(),e.hovered.draggable.clear(),e.hovered.droppable.clear()},we=e=>{const t=e.entities.initiatingDraggable;if(!t)return;const s=e.entities.draggableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<2)return;const[a,o,l]=i;return{index:Number(a),items:Array.isArray(o)?o:[],dropData:l}},xe=(e,t)=>{const s=e.entities.droppableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<1)return;const[a,o]=i;return{items:Array.isArray(a)?a:[],userData:o}},S=e=>e.keys().next().value,ke=e=>e.target.closest(k.DRAGGABLE),p=(e,t)=>{const n={payload:we(e),provider:e};return t&&(n.dropZonePayload=xe(e,t)),n},I=(e,t,n)=>{const s=ke(t);if(!s||!e.entities.draggingMap.has(s))return;const i=p(e);e.entities.draggingMap.get(s)?.events?.[n]?.(i)},A=(e,t,n)=>{if(!t||M(t,e))return;const s=p(e);e.entities.draggableMap.get(t)?.events?.[n]?.(s)},D=(e,t)=>{const n=p(e);e.entities.draggableMap.forEach((s,i)=>{M(i,e)||s.events?.[t]?.(n)})},Ce=(e,t,n)=>{if(t!==n){if(t&&!w(t,e)){const s=p(e,t);e.entities.droppableMap.get(t)?.events?.onLeave?.(s)}if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onEnter?.(s)}}},Le=(e,t,n)=>{if(t!==n){const s=p(e);t&&!M(t,e)&&e.entities.draggableMap.get(t)?.events?.onLeave?.(s),n&&!M(n,e)&&e.entities.draggableMap.get(n)?.events?.onHover?.(s)}},Be=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},ae=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},Pe=(e,t)=>!e.length||!t.length?!0:e.some(n=>t.includes(n)),Re=(e,t,n)=>{if(!n)return{};const s=n.getBoundingClientRect(),i=Math.max(s.left,Math.min(e.x,t.x)),a=Math.max(s.top,Math.min(e.y,t.y)),o=Math.min(s.right,Math.max(e.x,t.x)),l=Math.min(s.bottom,Math.max(e.y,t.y)),c=Math.max(0,o-i),u=Math.max(0,l-a);return{left:`${i}px`,top:`${a}px`,width:`${c}px`,height:`${u}px`,position:"fixed",pointerEvents:"none",border:"1px solid #3b82f6",backgroundColor:"#3b82f61a"}},Oe=e=>{if(!e.pointer.value||!e.entities.selectingArea)return;const{selectingArea:t}=e.entities,n=Te(e.pointer.value.start,e.pointer.value.current),s=e.entities.selectableAreaMap.get(t)?.groups??[];e.entities.visibleDraggableSet.forEach(i=>{if(!t.contains(i))return;if(M(i,e)){e.entities.selectedSet.delete(i);return}const o=e.entities.draggableMap.get(i)?.groups??[];if(!Pe(s,o)){e.entities.selectedSet.delete(i);return}ge(n,i.getBoundingClientRect())?e.entities.selectedSet.add(i):e.entities.selectedSet.delete(i)})},Te=(e,t)=>{const n=Math.min(e.x,t.x),s=Math.min(e.y,t.y),i=Math.max(e.x,t.x),a=Math.max(e.y,t.y),o=i-n,l=a-s;return new DOMRect(n,s,o,l)},ze=(e,t,n=5)=>{const s=n/2;return{left:e-s,top:t-s,width:n,height:n}},_e=e=>{const t=e.pointer.value?.current,n=t?.x??0,s=t?.y??0;return ze(n,s,5)},R=(e,t,n)=>{const s=e.left+e.width/2,i=e.top+e.height/2;if(n){const d=n.top??0,f=n.right??0,y=n.bottom??0,g=n.left??0,m=t.left+g,b=t.right-f,v=t.top+d,L=t.bottom-y;if(m<b&&v<L&&s>=m&&s<=b&&i>=v&&i<=L)return{top:!1,right:!1,bottom:!1,left:!1,center:!0}}const a=i-t.top,o=t.bottom-i,l=s-t.left,c=t.right-s,u=Math.min(a,o,l,c);return{top:a===u,bottom:o===u,left:l===u,right:c===u}},Fe=(e,t)=>e.find(n=>n!==t&&C(t,n)),U=(e,t,n)=>{const s=S(t.droppable),i=S(t.draggable);t.draggable.clear(),t.droppable.clear();const a=_e(e),o=n.zones[0],l=n.elements[0];if(o&&l&&o===l&&e.entities.droppableMap.has(o)&&o){const f=o.getBoundingClientRect(),y=e.entities.draggableMap.get(o)?.placementMargins,g=R(a,f,y);if(g.center){t.droppable.set(o,g);const m=Fe(n.elements,o);if(m){const b=m.getBoundingClientRect();t.draggable.set(m,R(a,b,void 0))}}else t.draggable.set(l,g),t.droppable.set(o,g)}else{if(o){const f=o.getBoundingClientRect();t.droppable.set(o,R(a,f))}if(l){const f=l.getBoundingClientRect(),y=e.entities.draggableMap.get(l)?.placementMargins;t.draggable.set(l,R(a,f,y))}}const u=S(t.droppable),d=S(t.draggable);Ce(e,s,u),Le(e,i,d)},Ie=(e,t)=>e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y,Z=e=>{if(!e)return{x:0,y:0,width:0,height:0,top:0,left:0,right:0,bottom:0};const t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height,top:t.top,left:t.left,right:t.right,bottom:t.bottom}},q=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),Ke=(e,t)=>Math.hypot(t.x-e.x,t.y-e.y),He=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),s=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),i=n*s,a=e.width*e.height,o=t.width*t.height;return a===0||o===0?0:(i/a*100+i/o*100)/2},Ge=(e,t,n)=>t>=e.x&&t<=e.x+e.width&&n>=e.y&&n<=e.y+e.height,V=()=>!0,j=()=>0,Ne=()=>{const e={filterElements:V,filterZones:V,sortElements:j,sortZones:j},t=(s,i,a,o,l,c,u)=>{const d=new Set(o),f={containerBox:i,pointer:a},y=[...o].filter(g=>l(g,s)).map(g=>{const m=Z(g);if(!u(m,f))return null;let b=0;for(const v of d)v!==g&&C(v,g)&&b++;return{node:g,box:m,meta:{isPointerInElement:Ge(m,a.x,a.y),overlapPercent:He(m,i),depth:b,centerDistance:Ke(q(i),q(m))}}}).filter(g=>g!==null);return y.sort((g,m)=>c(g,m,f)),y.map(g=>g.node)},n={container(s){return e.container=s,n},containerBox(s){return e.containerBox=s,n},elements(s){return e.elements=s,n},zones(s){return e.zones=s,n},filterElements(s){return e.filterElements=s,n},filterZones(s){return e.filterZones=s,n},collision(s){return e.collision=s,n},sortElements(s){return e.sortElements=s,n},sortZones(s){return e.sortZones=s,n},build(){const s=e;if(!s.container||!s.elements||!s.zones||!s.collision)throw new Error("sensor: container, elements, zones, collision are required");return i=>{const a=s.container(i);if(!a)return{elements:[],zones:[]};const o=s.containerBox?s.containerBox(i):Z(a),l=i.pointer.value?.current??{x:0,y:0};return{elements:t(i,o,l,s.elements(i),s.filterElements,s.sortElements,s.collision),zones:t(i,o,l,s.zones(i),s.filterZones,s.sortZones,s.collision)}}}};return n},Ue=()=>Ne(),Ye=e=>e.overlay.ref?.value??null,$e=e=>{const t=e.overlay.style?.value??{x:0,y:0},n=e.overlay.size?.value??null,{x:s,y:i}=t,a=n?.width??0,o=n?.height??0;return{x:s,y:i,width:a,height:o,top:i,left:s,right:s+a,bottom:i+o}},Xe=e=>e.entities.visibleDraggableSet,Ze=e=>e.entities.visibleDroppableSet,qe=(e,t)=>!t.entities.draggingMap.has(e),Ve=(e,t)=>![...t.entities.draggingMap.keys()].some(n=>C(n,e)),je=(e,t)=>t.entities.draggableMap.has(e)?!M(e,t):t.entities.droppableMap.has(e)?!w(e,t):!0,W=(e,t)=>qe(e,t)&&Ve(e,t)&&je(e,t),We=(e,t)=>Ie(e,t.containerBox),J=(e,t,n)=>{if(n.pointer.x>=n.containerBox.x&&n.pointer.x<=n.containerBox.x+n.containerBox.width&&n.pointer.y>=n.containerBox.y&&n.pointer.y<=n.containerBox.y+n.containerBox.height){if(e.meta.isPointerInElement&&t.meta.isPointerInElement)return t.meta.depth-e.meta.depth;if(e.meta.isPointerInElement!==t.meta.isPointerInElement)return e.meta.isPointerInElement?-1:1}return Math.abs(e.meta.overlapPercent-t.meta.overlapPercent)<=1?e.meta.centerDistance-t.meta.centerDistance:t.meta.overlapPercent-e.meta.overlapPercent},Y=Ue().container(Ye).containerBox($e).elements(Xe).zones(Ze).filterElements(W).filterZones(W).collision(We).sortElements(J).sortZones(J).build();function Q(e){const n=(e.collision?.run??Y)(e);U(e,e.hovered,n)}function Je(e,t){const n=e.collision?.throttle?.value??0;if(n<=0){Q(e);return}const s=Date.now();s-t.value>=n&&(t.value=s,Q(e))}async function oe(e){const t=e.hovered.droppable.keys().next().value;if(!t||w(t,e))return!0;const n=e.entities.droppableMap.get(t),s=p(e,t),i=n?.events?.onDrop?.(s);if(i!=null&&typeof i.then=="function")try{return await i,!0}catch{const o=e.entities.initiatingDraggable;return A(e,o,"onSelfDragCancel"),D(e,"onDragCancel"),ae(e,e.hovered),!1}return!0}function re(e){const t=e.entities.initiatingDraggable;A(e,t,"onSelfDragEnd"),D(e,"onDragEnd"),Be(e,e.hovered)}function Qe(e){const t=e.entities.selectingArea;if(!t)return;const n=e.entities.selectableAreaMap.get(t),s=[...e.entities.selectedSet];n?.events?.onSelected?.(s)}const et=e=>{const t={current:null},n={value:0},s=async()=>{G(),t.current?.cancel(),t.current=null;const l=e.state.value;if(l==="dragging"){if(!await oe(e)){T(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i);return}re(e)}else l==="selecting"&&Qe(e);T(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i)},i=l=>{if(e.pointer.value){if(e.pointer.value.current={x:l.clientX,y:l.clientY},De(e)){I(e,l,"onSelfDragStart"),D(e,"onDragStart");return}if(e.state.value==="dragging"){Je(e,n);const c=e.entities.initiatingDraggable;A(e,c,"onSelfDragMove"),D(e,"onDragMove")}e.state.value==="selecting"&&Oe(e)}};return{pointerDown:l=>{document.addEventListener("pointerup",s),document.addEventListener("pointermove",i);const c=l.target,u=c.closest(k.SELECT_AREA),d=c.closest(k.DRAGGABLE);if(e.entities.modifiersSelectableAreaSet.size>0&&e.entities.modifiersSelectableAreaSet.has(u)){H(),e.pointer.value=N(l),e.state.value="selecting",e.entities.selectingArea=u;return}if(e.entities.modifiersDraggableSet.size>0&&e.entities.modifiersDraggableSet.has(d)){const f=e.entities.draggableMap.get(d);if(!se(c,d,f?.dragHandle))return;H(),e.entities.initiatingDraggable=d;const y=te(l,d);e.pointer.value=N(l,y.x,y.y),f?.activation?.distance||f?.activation?.delay?(e.state.value="activating",f?.activation?.delay&&(e.delay.startTime=Date.now(),t.current=pe(e,()=>{O(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart")}))):(O(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart"))}},pointerUp:s,pointerMove:i,cleanup:()=>{t.current?.cancel(),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i),e.lib.draggableObserver.disconnect(),e.lib.droppableObserver.disconnect(),e.lib.selectableAreaObserver.disconnect(),e.lib.overlaySizeObserver.disconnect()}}},tt={ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1},ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},KeyW:{dx:0,dy:-1},KeyA:{dx:-1,dy:0},KeyS:{dx:0,dy:1},KeyD:{dx:1,dy:0}},nt=e=>t=>{const{keys:n}=e.keyboard;if(n.pressedKeys.value.add(t.code),e.state.value==="dragging"){if(n.forCancel.includes(t.code)){t.preventDefault(),G(),A(e,e.entities.initiatingDraggable,"onSelfDragCancel"),D(e,"onDragCancel"),ae(e,e.hovered),T(e);return}if(n.forDrop.includes(t.code)){t.preventDefault(),(async()=>(await oe(e)&&re(e),G(),T(e)))();return}const i=tt[t.code];if(i&&n.forMove.includes(t.code)&&e.pointer.value){t.preventDefault();const a=n.forMoveFaster.some(u=>n.pressedKeys.value.has(u)),o=e.keyboard.step*(a?e.keyboard.moveFaster:1);e.pointer.value.current={x:e.pointer.value.current.x+i.dx*o,y:e.pointer.value.current.y+i.dy*o};const c=(e.collision?.run??Y)(e);U(e,e.hovered,c),A(e,e.entities.initiatingDraggable,"onSelfDragMove"),D(e,"onDragMove");return}return}if(n.forDrag.includes(t.code)){const i=document.activeElement;if(!i)return;const a=i.closest(k.DRAGGABLE);if(!a||e.entities.modifiersDraggableSet.size===0||!e.entities.modifiersDraggableSet.has(a))return;const o=e.entities.draggableMap.get(a);if(!se(i,a,o?.dragHandle,!0))return;t.preventDefault(),H();const l=a.getBoundingClientRect(),c=l.left+l.width/2,u=l.top+l.height/2,d={clientX:c,clientY:u};e.entities.initiatingDraggable=a;const f=te(d,a);e.pointer.value=N(d,f.x,f.y),O(e);const g=(e.collision?.run??Y)(e);U(e,e.hovered,g),A(e,a,"onSelfDragStart"),D(e,"onDragStart")}},st=e=>t=>{e.keyboard.keys.pressedKeys.value.delete(t.code)},it=e=>()=>{e.keyboard.keys.pressedKeys.value.clear()},K={keyDown:nt,keyUp:st,clear:it},at=e=>()=>{e.state.value&&(e.scrollPosition.x=window.scrollX,e.scrollPosition.y=window.scrollY)},ot=e=>{const t=et(e),n=K.keyDown(e),s=K.keyUp(e),i=K.clear(e),a=at(e);r.onMounted(()=>{document.addEventListener("pointerdown",t.pointerDown),document.addEventListener("keydown",n),document.addEventListener("keyup",s),document.addEventListener("blur",i),document.addEventListener("scroll",a,!0)}),r.onBeforeUnmount(()=>{document.removeEventListener("pointerdown",t.pointerDown),document.removeEventListener("pointerup",t.pointerUp),document.removeEventListener("pointermove",t.pointerMove),document.removeEventListener("keydown",n),document.removeEventListener("keyup",s),document.removeEventListener("blur",i),document.removeEventListener("scroll",a,!0),t.cleanup()})},_=()=>{const e=r.inject($);if(!e)throw Error("DnD provider not found");return e},le=()=>{const e=_();return{overlay:e.overlay,delay:e.delay,distanceProgress:e.distanceProgress,entities:e.entities,pointer:e.pointer,state:e.state,scrollPosition:e.scrollPosition,keyboard:e.keyboard,hovered:e.hovered,collision:e.collision}},rt=r.defineComponent({__name:"DefaultOverlay",setup(e){const{entities:t,state:n,overlay:s}=le();return(i,a)=>r.unref(n)==="dragging"?(r.openBlock(),r.createElementBlock("div",{key:0,class:"dnd-kit-default-overlay",style:r.normalizeStyle({"--position-x":r.unref(s).style.value.x+"px","--position-y":r.unref(s).style.value.y+"px"})},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(t).draggingMap,([o,l])=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.unref(t).draggableMap.get(o)?.render?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(t).draggableMap.get(o)?.render),{key:0,class:"test"})):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(o.tagName),{key:1,innerHTML:l.initialOuterHTML,class:"test",style:r.normalizeStyle({width:l.initialRect.width+"px",height:l.initialRect.height+"px"})},null,8,["innerHTML","style"]))],64))),256))],4)):r.createCommentVNode("",!0)}}),lt=r.defineComponent({__name:"DnDProvider",setup(e){const t=r.useTemplateRef("overlayRef"),n=Ae(t);ot(n);const s=r.computed(()=>n.overlay.render.value??rt);return r.provide($,n),(i,a)=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.renderSlot(i.$slots,"default"),r.createElementVNode("div",{ref_key:"overlayRef",ref:t,class:"dnd-kit-overlay-container"},[r.renderSlot(i.$slots,"overlay",{overlay:s.value},()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(s.value)))])],512)],64))}});function ct(e,t,n){const s=_();let i,a,o;return typeof t=="function"?(i={},a=t):(i=t??{},a=n),r.onMounted(()=>{o=z(e),o&&(o.addEventListener("dragstart",h),o.addEventListener("drag",h),o.addEventListener("dragend",h),o.setAttribute(E.DRAGGABLE,""),s.lib.draggableObserver.observe(o),s.entities.draggableMap.set(o,{render:i.render,disabled:i.disabled??!1,groups:i.groups??[],modifier:i.modifier,events:i.events,payload:a,dragHandle:i.dragHandle,activation:i.activation,placementMargins:i.placementMargins}))}),r.onBeforeUnmount(()=>{o&&(s.lib.draggableObserver.unobserve(o),s.entities.visibleDraggableSet.delete(o),s.entities.draggableMap.delete(o),s.entities.modifiersDraggableSet.delete(o))}),{}}const ut=(e,t)=>{const n=_(),s=r.computed(()=>e.value===n.entities.selectingArea);let i=null;r.onMounted(()=>{i=z(e),i&&(i.setAttribute(E.SELECT_AREA,""),n.lib.selectableAreaObserver.observe(i),n.entities.selectableAreaMap.set(i,{modifier:t?.modifier??{keys:["ControlLeft"],method:"every"},events:t?.events,disabled:t?.disabled??!1,groups:t?.groups??[]}))}),r.onBeforeUnmount(()=>{i&&(n.lib.selectableAreaObserver.unobserve(i),n.entities.visibleSelectableAreaSet.delete(i),n.entities.modifiersSelectableAreaSet.delete(i),n.entities.selectableAreaMap.delete(i))});const a=r.computed(()=>{n.scrollPosition.x,n.scrollPosition.y;const o=n.pointer.value;return!o||n.state.value!=="selecting"||!i?{}:Re(o.start,o.current,i)});return{isSelecting:s,style:a}};function gt(e,t){const n=r.inject($);if(!n)throw Error("DnD provider not found");let s=null;return r.onMounted(()=>{s=z(e),s&&(s.setAttribute(E.CONSTRAINT_AREA,""),n.entities.constraintsAreaMap.set(s,{axis:t?.axis||"both",restrictToArea:t?.restrictToArea||!1}))}),r.onBeforeUnmount(()=>{s&&n.entities.constraintsAreaMap.delete(s)}),{}}function ft(e,t,n){const s=_();let i=null,a,o;typeof t=="function"?(a={},o=t):(a=t??{},o=n),r.onMounted(()=>{i=z(e),i&&(i.setAttribute(E.DROPPABLE,""),s.lib.droppableObserver.observe(i),s.entities.droppableMap.set(i,{disabled:a.disabled??!1,groups:a.groups??[],events:a.events,payload:o}))}),r.onBeforeUnmount(()=>{i&&(s.lib.droppableObserver.unobserve(i),s.entities.visibleDroppableSet.delete(i),s.entities.droppableMap.delete(i))})}exports.DnDProvider=lt;exports.makeConstraintArea=gt;exports.makeDraggable=ct;exports.makeDroppable=ft;exports.makeSelectionArea=ut;exports.useDnDProvider=le;
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),E={SELECT_AREA:"data-dnd-kit-select-area",DRAGGABLE:"data-dnd-kit-draggable",DROPPABLE:"data-dnd-kit-droppable",CONSTRAINT_AREA:"data-dnd-kit-constraint-area"},k={SELECT_AREA:`[${E.SELECT_AREA}]`,DRAGGABLE:`[${E.DRAGGABLE}]`,CONSTRAINT_AREA:`[${E.CONSTRAINT_AREA}]`},$="VueDnDKitProvider",X=(e,t,n,s)=>{const i=new Set;return t.forEach(a=>{const o=e.get(a),l=s?s(a):o?.disabled;if(!o||l)return;const c=o.modifier?.keys,u=o.modifier?.method;if(!c||!u||c.length===0){i.add(a);return}c[u](f=>n.value.has(f))&&i.add(a)}),i};let ee="",ce="",ue="";const z=e=>e.value?e.value instanceof HTMLElement?e.value:e.value.$el:null,C=(e,t)=>e!==t&&e.contains(t),ge=(e,t)=>!(e.right<t.left||e.left>t.right||e.bottom<t.top||e.top>t.bottom),H=()=>{const e=document.body;ee=e.style.userSelect,e.style.userSelect="none",window.addEventListener("contextmenu",h),window.addEventListener("selectstart",h),window.addEventListener("touchstart",h),window.addEventListener("touchmove",h)},G=()=>{const e=document.body;e.style.userSelect=ee,e.style.touchAction=ce,e.style.overscrollBehavior=ue,window.removeEventListener("contextmenu",h),window.removeEventListener("selectstart",h),window.removeEventListener("touchstart",h),window.removeEventListener("touchmove",h)},h=e=>e.preventDefault(),M=(e,t)=>{if(t.entities.draggableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.draggableMap)if(i.disabled&&C(s,e))return!0;return!1},w=(e,t)=>{if(t.entities.droppableMap.get(e)?.disabled)return!0;for(const[s,i]of t.entities.droppableMap)if(i.disabled&&C(s,e))return!0;return!1},F=e=>{const t=new IntersectionObserver(n=>{n.forEach(s=>{const i=s.target;e[s.isIntersecting?"add":"delete"](i)})});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},fe=e=>{const t=new ResizeObserver(n=>{const s=n[0];if(!s)return;const{width:i,height:a}=s.contentRect;e.value={width:i,height:a}});return{observe:n=>t.observe(n),unobserve:n=>t.unobserve(n),disconnect:()=>t.disconnect()}},de=e=>{const t=r.ref(null),n=fe(t),s=r.watch(e,a=>{n.disconnect(),a&&n.observe(a)},{immediate:!0});return{overlaySize:t,overlaySizeObserver:{disconnect:()=>{s(),n.disconnect()}}}};function N(e,t=0,n=0){return{start:{x:e.clientX,y:e.clientY},current:{x:e.clientX,y:e.clientY},offset:{x:t,y:n}}}function te(e,t){const n=t.getBoundingClientRect(),s=n.width>0?(e.clientX-n.left)/n.width:.5,i=n.height>0?(e.clientY-n.top)/n.height:.5;return{x:s,y:i}}function ne(e,t){return{...t,initialHTML:e.innerHTML,initialRect:e.getBoundingClientRect(),initialOuterHTML:e.outerHTML}}function ye(e,t,n){e.forEach(s=>{const i=t.get(s);n.set(s,ne(s,i))}),e.clear()}function me(e,t,n){n.clear();const s=t.get(e);n.set(e,ne(e,s))}function T(e){e.entities.initiatingDraggable&&(e.state.value="dragging",be(e.entities.initiatingDraggable,e.entities.selectedSet,e.entities.draggableMap,e.entities.draggingMap))}function be(e,t,n,s){t.has(e)?ye(t,n,s):(t.clear(),me(e,n,s))}function se(e,t,n,s){if(s||!n)return!0;const i=e.closest(n);return i?t.contains(i):!1}function he(e,t){if(!e||!t)return 1;const n=Math.abs(e.current.x-e.start.x),s=Math.abs(e.current.y-e.start.y);if(typeof t=="number"){const u=Math.sqrt(n*n+s*s);return Math.min(u/t,1)}const{x:i=0,y:a=0,condition:o="any"}=t;if(i===0&&a===0)return 1;const l=i>0?Math.min(n/i,1):1,c=a>0?Math.min(s/a,1):1;return o==="both"?Math.min(l,c):Math.max(l,c)}function ie(e,t,n){if(!n)return!0;const s=n.distance!=null,i=n.delay!=null;return!s&&!i?!0:s&&!i?e>=1:!s&&i?t>=1:(n.condition??"both")==="both"?e>=1&&t>=1:e>=1||t>=1}function De(e){if(e.state.value!=="activating"||!e.entities.initiatingDraggable)return!1;const t=e.entities.draggableMap.get(e.entities.initiatingDraggable);return ie(e.distanceProgress.value,e.delay.progress,t?.activation)?(T(e),!0):!1}function pe(e,t){let n=null;const s=()=>{if(e.state.value!=="activating"||!e.entities.initiatingDraggable){n=null;return}const i=e.entities.draggableMap.get(e.entities.initiatingDraggable),a=i?.activation?.delay;if(!a){n=null;return}e.delay.progress=Math.min((Date.now()-e.delay.startTime)/(a*1e3),1),ie(e.distanceProgress.value,e.delay.progress,i?.activation)?(t(),n=null):n=requestAnimationFrame(s)};return n=requestAnimationFrame(s),{cancel:()=>{n!==null&&(cancelAnimationFrame(n),n=null)}}}function ve(e,t){const n=e.closest(k.CONSTRAINT_AREA);return!n||!t.has(n)?null:{element:n,entity:t.get(n)}}function Ee(e,t,n,s){return n==="x"?{x:e,y:s.top}:n==="y"?{x:s.left,y:t}:{x:e,y:t}}function Me(e,t,n,s,i){let a=e,o=t;return n!=="y"&&(a=Math.max(s.left,Math.min(s.right-i.width,e))),n!=="x"&&(o=Math.max(s.top,Math.min(s.bottom-i.height,t))),{x:a,y:o}}function Se(e,t,n,s,i){if(!e||!t)return{x:0,y:0};const a=t.getBoundingClientRect(),o=a.width||i?.width||0,l=a.height||i?.height||0;let c=e.current.x-o*e.offset.x,u=e.current.y-l*e.offset.y;if(!n)return{x:c,y:u};const d=ve(n,s);if(!d)return{x:c,y:u};const{element:f,entity:y}=d,g=f.getBoundingClientRect(),m=n.getBoundingClientRect(),b=Ee(c,u,y.axis||"both",m);return y.restrictToArea?Me(b.x,b.y,y.axis||"both",g,a):b}const x={forDrag:["Enter","Space"],forCancel:["Escape"],forDrop:["Enter","Space"],forMove:["ArrowUp","ArrowDown","ArrowLeft","ArrowRight","KeyW","KeyA","KeyS","KeyD"],forMoveFaster:["ShiftLeft","ShiftRight"]};function Ae(e){const t=r.shallowRef(),n=r.ref(),i={keys:{pressedKeys:r.ref(new Set),forDrag:[...x.forDrag],forCancel:[...x.forCancel],forDrop:[...x.forDrop],forMove:[...x.forMove],forMoveFaster:[...x.forMoveFaster]},step:8,moveFaster:4},a=r.reactive({draggableMap:new Map,droppableMap:new Map,selectableAreaMap:new Map,constraintsAreaMap:new Map,initiatingDraggable:void 0,selectingArea:void 0,draggingMap:new Map,selectedSet:new Set,modifiersSelectableAreaSet:r.computed(()=>X(a.selectableAreaMap,a.visibleSelectableAreaSet,i.keys.pressedKeys)),modifiersDraggableSet:r.computed(()=>X(a.draggableMap,a.visibleDraggableSet,i.keys.pressedKeys,P=>M(P,{entities:a}))),visibleDraggableSet:new Set,visibleDroppableSet:new Set,visibleSelectableAreaSet:new Set}),o=r.reactive({x:window.scrollX,y:window.scrollY}),l=r.reactive({progress:0,startTime:0}),c=r.computed(()=>{if(!n.value||!a.initiatingDraggable)return 0;const P=a.draggableMap.get(a.initiatingDraggable)?.activation?.distance;return P?he(n.value,P):1}),u=F(a.visibleDraggableSet),d=F(a.visibleDroppableSet),f=F(a.visibleSelectableAreaSet),{overlaySize:y,overlaySizeObserver:g}=de(e),m=r.ref(),b=r.reactive({draggable:new Map,droppable:new Map}),v={throttle:r.shallowRef(0)},L=r.computed(()=>{o.y,o.x;const B=a.initiatingDraggable;return Se(n.value,e.value,B||null,a.constraintsAreaMap,y.value)});return{state:t,pointer:n,entities:a,keyboard:i,scrollPosition:o,delay:l,distanceProgress:c,hovered:b,collision:v,overlay:{size:y,style:L,render:m,ref:e},lib:{draggableObserver:u,droppableObserver:d,selectableAreaObserver:f,overlaySizeObserver:g}}}const O=e=>{e.pointer.value=void 0,e.state.value=void 0,e.entities.selectingArea=void 0,e.entities.initiatingDraggable=void 0,e.delay.progress=0,e.delay.startTime=0,e.entities.draggingMap.clear(),e.hovered.draggable.clear(),e.hovered.droppable.clear()},we=e=>{const t=e.entities.initiatingDraggable;if(!t)return;const s=e.entities.draggableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<2)return;const[a,o,l]=i;return{index:Number(a),items:Array.isArray(o)?o:[],dropData:l}},xe=(e,t)=>{const s=e.entities.droppableMap.get(t)?.payload;if(!s)return;const i=s();if(!Array.isArray(i)||i.length<1)return;const[a,o]=i;return{items:Array.isArray(a)?a:[],userData:o}},S=e=>e.keys().next().value,ke=e=>e.target.closest(k.DRAGGABLE),p=(e,t)=>{const n={payload:we(e),provider:e};return t&&(n.dropZonePayload=xe(e,t)),n},I=(e,t,n)=>{const s=ke(t);if(!s||!e.entities.draggingMap.has(s))return;const i=p(e);e.entities.draggingMap.get(s)?.events?.[n]?.(i)},A=(e,t,n)=>{if(!t||M(t,e))return;const s=p(e);e.entities.draggableMap.get(t)?.events?.[n]?.(s)},D=(e,t)=>{const n=p(e);e.entities.draggableMap.forEach((s,i)=>{M(i,e)||s.events?.[t]?.(n)})},Ce=(e,t,n)=>{if(t!==n){if(t&&!w(t,e)){const s=p(e,t);e.entities.droppableMap.get(t)?.events?.onLeave?.(s)}if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onEnter?.(s)}}},Le=(e,t,n)=>{if(t!==n){const s=p(e);t&&!M(t,e)&&e.entities.draggableMap.get(t)?.events?.onLeave?.(s),n&&!M(n,e)&&e.entities.draggableMap.get(n)?.events?.onHover?.(s)}},Be=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},ae=(e,t)=>{const n=S(t.droppable);if(n&&!w(n,e)){const s=p(e,n);e.entities.droppableMap.get(n)?.events?.onLeave?.(s)}},Pe=(e,t)=>!e.length||!t.length?!0:e.some(n=>t.includes(n)),Re=(e,t,n)=>{if(!n)return{};const s=n.getBoundingClientRect(),i=Math.max(s.left,Math.min(e.x,t.x)),a=Math.max(s.top,Math.min(e.y,t.y)),o=Math.min(s.right,Math.max(e.x,t.x)),l=Math.min(s.bottom,Math.max(e.y,t.y)),c=Math.max(0,o-i),u=Math.max(0,l-a);return{left:`${i}px`,top:`${a}px`,width:`${c}px`,height:`${u}px`,position:"fixed",pointerEvents:"none",border:"1px solid #3b82f6",backgroundColor:"#3b82f61a"}},Te=e=>{if(!e.pointer.value||!e.entities.selectingArea)return;const{selectingArea:t}=e.entities,n=Oe(e.pointer.value.start,e.pointer.value.current),s=e.entities.selectableAreaMap.get(t)?.groups??[];e.entities.visibleDraggableSet.forEach(i=>{if(!t.contains(i))return;if(M(i,e)){e.entities.selectedSet.delete(i);return}const o=e.entities.draggableMap.get(i)?.groups??[];if(!Pe(s,o)){e.entities.selectedSet.delete(i);return}ge(n,i.getBoundingClientRect())?e.entities.selectedSet.add(i):e.entities.selectedSet.delete(i)})},Oe=(e,t)=>{const n=Math.min(e.x,t.x),s=Math.min(e.y,t.y),i=Math.max(e.x,t.x),a=Math.max(e.y,t.y),o=i-n,l=a-s;return new DOMRect(n,s,o,l)},ze=(e,t,n=5)=>{const s=n/2;return{left:e-s,top:t-s,width:n,height:n}},_e=e=>{const t=e.pointer.value?.current,n=t?.x??0,s=t?.y??0;return ze(n,s,5)},R=(e,t,n)=>{const s=e.left+e.width/2,i=e.top+e.height/2;if(n){const d=n.top??0,f=n.right??0,y=n.bottom??0,g=n.left??0,m=t.left+g,b=t.right-f,v=t.top+d,L=t.bottom-y;if(m<b&&v<L&&s>=m&&s<=b&&i>=v&&i<=L)return{top:!1,right:!1,bottom:!1,left:!1,center:!0}}const a=i-t.top,o=t.bottom-i,l=s-t.left,c=t.right-s,u=Math.min(a,o,l,c);return{top:a===u,bottom:o===u,left:l===u,right:c===u}},Fe=(e,t)=>e.find(n=>n!==t&&C(t,n)),U=(e,t,n)=>{const s=S(t.droppable),i=S(t.draggable);t.draggable.clear(),t.droppable.clear();const a=_e(e),o=n.zones[0],l=n.elements[0];if(o&&l&&o===l&&e.entities.droppableMap.has(o)&&o){const f=o.getBoundingClientRect(),y=e.entities.draggableMap.get(o)?.placementMargins,g=R(a,f,y);if(g.center){t.droppable.set(o,g);const m=Fe(n.elements,o);if(m){const b=m.getBoundingClientRect();t.draggable.set(m,R(a,b,void 0))}}else t.draggable.set(l,g),t.droppable.set(o,g)}else{if(o){const f=o.getBoundingClientRect();t.droppable.set(o,R(a,f))}if(l){const f=l.getBoundingClientRect(),y=e.entities.draggableMap.get(l)?.placementMargins;t.draggable.set(l,R(a,f,y))}}const u=S(t.droppable),d=S(t.draggable);Ce(e,s,u),Le(e,i,d)},Ie=(e,t)=>e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y,Z=e=>{if(!e)return{x:0,y:0,width:0,height:0,top:0,left:0,right:0,bottom:0};const t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height,top:t.top,left:t.left,right:t.right,bottom:t.bottom}},q=e=>({x:e.x+e.width/2,y:e.y+e.height/2}),Ke=(e,t)=>Math.hypot(t.x-e.x,t.y-e.y),He=(e,t)=>{const n=Math.max(0,Math.min(e.x+e.width,t.x+t.width)-Math.max(e.x,t.x)),s=Math.max(0,Math.min(e.y+e.height,t.y+t.height)-Math.max(e.y,t.y)),i=n*s,a=e.width*e.height,o=t.width*t.height;return a===0||o===0?0:(i/a*100+i/o*100)/2},Ge=(e,t,n)=>t>=e.x&&t<=e.x+e.width&&n>=e.y&&n<=e.y+e.height,V=()=>!0,j=()=>0,Ne=()=>{const e={filterElements:V,filterZones:V,sortElements:j,sortZones:j},t=(s,i,a,o,l,c,u)=>{const d=new Set(o),f={containerBox:i,pointer:a},y=[...o].filter(g=>l(g,s)).map(g=>{const m=Z(g);if(!u(m,f))return null;let b=0;for(const v of d)v!==g&&C(v,g)&&b++;return{node:g,box:m,meta:{isPointerInElement:Ge(m,a.x,a.y),overlapPercent:He(m,i),depth:b,centerDistance:Ke(q(i),q(m))}}}).filter(g=>g!==null);return y.sort((g,m)=>c(g,m,f)),y.map(g=>g.node)},n={container(s){return e.container=s,n},containerBox(s){return e.containerBox=s,n},elements(s){return e.elements=s,n},zones(s){return e.zones=s,n},filterElements(s){return e.filterElements=s,n},filterZones(s){return e.filterZones=s,n},collision(s){return e.collision=s,n},sortElements(s){return e.sortElements=s,n},sortZones(s){return e.sortZones=s,n},build(){const s=e;if(!s.container||!s.elements||!s.zones||!s.collision)throw new Error("sensor: container, elements, zones, collision are required");return i=>{const a=s.container(i);if(!a)return{elements:[],zones:[]};const o=s.containerBox?s.containerBox(i):Z(a),l=i.pointer.value?.current??{x:0,y:0};return{elements:t(i,o,l,s.elements(i),s.filterElements,s.sortElements,s.collision),zones:t(i,o,l,s.zones(i),s.filterZones,s.sortZones,s.collision)}}}};return n},Ue=()=>Ne(),Ye=e=>e.overlay.ref?.value??null,$e=e=>{const t=e.overlay.style?.value??{x:0,y:0},n=e.overlay.size?.value??null,{x:s,y:i}=t,a=n?.width??0,o=n?.height??0;return{x:s,y:i,width:a,height:o,top:i,left:s,right:s+a,bottom:i+o}},Xe=e=>e.entities.visibleDraggableSet,Ze=e=>e.entities.visibleDroppableSet,qe=(e,t)=>!t.entities.draggingMap.has(e),Ve=(e,t)=>![...t.entities.draggingMap.keys()].some(n=>C(n,e)),je=(e,t)=>t.entities.draggableMap.has(e)?!M(e,t):t.entities.droppableMap.has(e)?!w(e,t):!0,W=(e,t)=>qe(e,t)&&Ve(e,t)&&je(e,t),We=(e,t)=>Ie(e,t.containerBox),J=(e,t,n)=>{if(n.pointer.x>=n.containerBox.x&&n.pointer.x<=n.containerBox.x+n.containerBox.width&&n.pointer.y>=n.containerBox.y&&n.pointer.y<=n.containerBox.y+n.containerBox.height){if(e.meta.isPointerInElement&&t.meta.isPointerInElement)return t.meta.depth-e.meta.depth;if(e.meta.isPointerInElement!==t.meta.isPointerInElement)return e.meta.isPointerInElement?-1:1}return Math.abs(e.meta.overlapPercent-t.meta.overlapPercent)<=1?e.meta.centerDistance-t.meta.centerDistance:t.meta.overlapPercent-e.meta.overlapPercent},Y=Ue().container(Ye).containerBox($e).elements(Xe).zones(Ze).filterElements(W).filterZones(W).collision(We).sortElements(J).sortZones(J).build();function Q(e){const n=(e.collision?.run??Y)(e);U(e,e.hovered,n)}function Je(e,t){const n=e.collision?.throttle?.value??0;if(n<=0){Q(e);return}const s=Date.now();s-t.value>=n&&(t.value=s,Q(e))}async function oe(e){const t=e.hovered.droppable.keys().next().value;if(!t||w(t,e))return!0;const n=e.entities.droppableMap.get(t),s=p(e,t),i=n?.events?.onDrop?.(s);if(i!=null&&typeof i.then=="function")try{return await i,!0}catch{const o=e.entities.initiatingDraggable;return A(e,o,"onSelfDragCancel"),D(e,"onDragCancel"),ae(e,e.hovered),!1}return!0}function re(e){const t=e.entities.initiatingDraggable;A(e,t,"onSelfDragEnd"),D(e,"onDragEnd"),Be(e,e.hovered)}function Qe(e){const t=e.entities.selectingArea;if(!t)return;const n=e.entities.selectableAreaMap.get(t),s=[...e.entities.selectedSet];n?.events?.onSelected?.(s)}const et=e=>{const t={current:null},n={value:0},s=async()=>{G(),t.current?.cancel(),t.current=null;const l=e.state.value;if(l==="dragging"){if(!await oe(e)){O(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i);return}re(e)}else l==="selecting"&&Qe(e);O(e),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i)},i=l=>{if(e.pointer.value){if(e.pointer.value.current={x:l.clientX,y:l.clientY},De(e)){I(e,l,"onSelfDragStart"),D(e,"onDragStart");return}if(e.state.value==="dragging"){Je(e,n);const c=e.entities.initiatingDraggable;A(e,c,"onSelfDragMove"),D(e,"onDragMove")}e.state.value==="selecting"&&Te(e)}};return{pointerDown:l=>{document.addEventListener("pointerup",s),document.addEventListener("pointermove",i);const c=l.target,u=c.closest(k.SELECT_AREA),d=c.closest(k.DRAGGABLE);if(e.entities.modifiersSelectableAreaSet.size>0&&e.entities.modifiersSelectableAreaSet.has(u)){H(),e.pointer.value=N(l),e.state.value="selecting",e.entities.selectingArea=u;return}if(e.entities.modifiersDraggableSet.size>0&&e.entities.modifiersDraggableSet.has(d)){const f=e.entities.draggableMap.get(d);if(!se(c,d,f?.dragHandle))return;H(),e.entities.initiatingDraggable=d;const y=te(l,d);e.pointer.value=N(l,y.x,y.y),f?.activation?.distance||f?.activation?.delay?(e.state.value="activating",f?.activation?.delay&&(e.delay.startTime=Date.now(),t.current=pe(e,()=>{T(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart")}))):(T(e),I(e,l,"onSelfDragStart"),D(e,"onDragStart"))}},pointerUp:s,pointerMove:i,cleanup:()=>{t.current?.cancel(),document.removeEventListener("pointerup",s),document.removeEventListener("pointermove",i),e.lib.draggableObserver.disconnect(),e.lib.droppableObserver.disconnect(),e.lib.selectableAreaObserver.disconnect(),e.lib.overlaySizeObserver.disconnect()}}},tt={ArrowUp:{dx:0,dy:-1},ArrowDown:{dx:0,dy:1},ArrowLeft:{dx:-1,dy:0},ArrowRight:{dx:1,dy:0},KeyW:{dx:0,dy:-1},KeyA:{dx:-1,dy:0},KeyS:{dx:0,dy:1},KeyD:{dx:1,dy:0}},nt=e=>t=>{const{keys:n}=e.keyboard;if(n.pressedKeys.value.add(t.code),e.state.value==="dragging"){if(n.forCancel.includes(t.code)){t.preventDefault(),G(),A(e,e.entities.initiatingDraggable,"onSelfDragCancel"),D(e,"onDragCancel"),ae(e,e.hovered),O(e);return}if(n.forDrop.includes(t.code)){t.preventDefault(),(async()=>(await oe(e)&&re(e),G(),O(e)))();return}const i=tt[t.code];if(i&&n.forMove.includes(t.code)&&e.pointer.value){t.preventDefault();const a=n.forMoveFaster.some(u=>n.pressedKeys.value.has(u)),o=e.keyboard.step*(a?e.keyboard.moveFaster:1);e.pointer.value.current={x:e.pointer.value.current.x+i.dx*o,y:e.pointer.value.current.y+i.dy*o};const c=(e.collision?.run??Y)(e);U(e,e.hovered,c),A(e,e.entities.initiatingDraggable,"onSelfDragMove"),D(e,"onDragMove");return}return}if(n.forDrag.includes(t.code)){const i=document.activeElement;if(!i)return;const a=i.closest(k.DRAGGABLE);if(!a||e.entities.modifiersDraggableSet.size===0||!e.entities.modifiersDraggableSet.has(a))return;const o=e.entities.draggableMap.get(a);if(!se(i,a,o?.dragHandle,!0))return;t.preventDefault(),H();const l=a.getBoundingClientRect(),c=l.left+l.width/2,u=l.top+l.height/2,d={clientX:c,clientY:u};e.entities.initiatingDraggable=a;const f=te(d,a);e.pointer.value=N(d,f.x,f.y),T(e);const g=(e.collision?.run??Y)(e);U(e,e.hovered,g),A(e,a,"onSelfDragStart"),D(e,"onDragStart")}},st=e=>t=>{e.keyboard.keys.pressedKeys.value.delete(t.code)},it=e=>()=>{e.keyboard.keys.pressedKeys.value.clear()},K={keyDown:nt,keyUp:st,clear:it},at=e=>()=>{e.state.value&&(e.scrollPosition.x=window.scrollX,e.scrollPosition.y=window.scrollY)},ot=e=>{const t=et(e),n=K.keyDown(e),s=K.keyUp(e),i=K.clear(e),a=at(e);r.onMounted(()=>{document.addEventListener("pointerdown",t.pointerDown),document.addEventListener("keydown",n),document.addEventListener("keyup",s),document.addEventListener("blur",i),document.addEventListener("scroll",a,!0)}),r.onBeforeUnmount(()=>{document.removeEventListener("pointerdown",t.pointerDown),document.removeEventListener("pointerup",t.pointerUp),document.removeEventListener("pointermove",t.pointerMove),document.removeEventListener("keydown",n),document.removeEventListener("keyup",s),document.removeEventListener("blur",i),document.removeEventListener("scroll",a,!0),t.cleanup()})},_=()=>{const e=r.inject($);if(!e)throw Error("DnD provider not found");return e},le=()=>{const e=_();return{overlay:e.overlay,delay:e.delay,distanceProgress:e.distanceProgress,entities:e.entities,pointer:e.pointer,state:e.state,scrollPosition:e.scrollPosition,keyboard:e.keyboard,hovered:e.hovered,collision:e.collision}},rt=r.defineComponent({__name:"DefaultOverlay",setup(e){const{entities:t,state:n,overlay:s}=le();return(i,a)=>r.unref(n)==="dragging"?(r.openBlock(),r.createElementBlock("div",{key:0,class:"dnd-kit-default-overlay",style:r.normalizeStyle({"--position-x":r.unref(s).style.value.x+"px","--position-y":r.unref(s).style.value.y+"px"})},[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(t).draggingMap,([o,l])=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.unref(t).draggableMap.get(o)?.render?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(t).draggableMap.get(o)?.render),{key:0,class:"test"})):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(o.tagName),{key:1,innerHTML:l.initialOuterHTML,class:"test",style:r.normalizeStyle({width:l.initialRect.width+"px",height:l.initialRect.height+"px"})},null,8,["innerHTML","style"]))],64))),256))],4)):r.createCommentVNode("",!0)}}),lt=r.defineComponent({__name:"DnDProvider",setup(e){const t=r.useTemplateRef("overlayRef"),n=Ae(t);ot(n);const s=r.computed(()=>n.overlay.render.value??rt);return r.provide($,n),(i,a)=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[r.renderSlot(i.$slots,"default"),(r.openBlock(),r.createBlock(r.Teleport,{to:"body"},[r.createElementVNode("div",{ref_key:"overlayRef",ref:t,class:"dnd-kit-overlay-container"},[r.renderSlot(i.$slots,"overlay",{overlay:s.value},()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(s.value)))])],512)]))],64))}});function ct(e,t,n){const s=_();let i,a,o;return typeof t=="function"?(i={},a=t):(i=t??{},a=n),r.onMounted(()=>{o=z(e),o&&(o.addEventListener("dragstart",h),o.addEventListener("drag",h),o.addEventListener("dragend",h),o.setAttribute(E.DRAGGABLE,""),s.lib.draggableObserver.observe(o),s.entities.draggableMap.set(o,{render:i.render,disabled:i.disabled??!1,groups:i.groups??[],modifier:i.modifier,events:i.events,payload:a,dragHandle:i.dragHandle,activation:i.activation,placementMargins:i.placementMargins}))}),r.onBeforeUnmount(()=>{o&&(s.lib.draggableObserver.unobserve(o),s.entities.visibleDraggableSet.delete(o),s.entities.draggableMap.delete(o),s.entities.modifiersDraggableSet.delete(o))}),{}}const ut=(e,t)=>{const n=_(),s=r.computed(()=>e.value===n.entities.selectingArea);let i=null;r.onMounted(()=>{i=z(e),i&&(i.setAttribute(E.SELECT_AREA,""),n.lib.selectableAreaObserver.observe(i),n.entities.selectableAreaMap.set(i,{modifier:t?.modifier??{keys:["ControlLeft"],method:"every"},events:t?.events,disabled:t?.disabled??!1,groups:t?.groups??[]}))}),r.onBeforeUnmount(()=>{i&&(n.lib.selectableAreaObserver.unobserve(i),n.entities.visibleSelectableAreaSet.delete(i),n.entities.modifiersSelectableAreaSet.delete(i),n.entities.selectableAreaMap.delete(i))});const a=r.computed(()=>{n.scrollPosition.x,n.scrollPosition.y;const o=n.pointer.value;return!o||n.state.value!=="selecting"||!i?{}:Re(o.start,o.current,i)});return{isSelecting:s,style:a}};function gt(e,t){const n=r.inject($);if(!n)throw Error("DnD provider not found");let s=null;return r.onMounted(()=>{s=z(e),s&&(s.setAttribute(E.CONSTRAINT_AREA,""),n.entities.constraintsAreaMap.set(s,{axis:t?.axis||"both",restrictToArea:t?.restrictToArea||!1}))}),r.onBeforeUnmount(()=>{s&&n.entities.constraintsAreaMap.delete(s)}),{}}function ft(e,t,n){const s=_();let i=null,a,o;typeof t=="function"?(a={},o=t):(a=t??{},o=n),r.onMounted(()=>{i=z(e),i&&(i.setAttribute(E.DROPPABLE,""),s.lib.droppableObserver.observe(i),s.entities.droppableMap.set(i,{disabled:a.disabled??!1,groups:a.groups??[],events:a.events,payload:o}))}),r.onBeforeUnmount(()=>{i&&(s.lib.droppableObserver.unobserve(i),s.entities.visibleDroppableSet.delete(i),s.entities.droppableMap.delete(i))})}exports.DnDProvider=lt;exports.makeConstraintArea=gt;exports.makeDraggable=ct;exports.makeDroppable=ft;exports.makeSelectionArea=ut;exports.useDnDProvider=le;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dnd-kit-default-overlay{transform:translate3d(var(--position-x),var(--position-y),0)}.dnd-kit-overlay-container{position:fixed;top:0;left:0;pointer-events:none;cursor:grabbing}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
import { ref as I, watch as Se, shallowRef as ne, reactive as _, computed as E, onMounted as R, onBeforeUnmount as P, inject as de, defineComponent as ye, unref as A, openBlock as
|
|
2
|
+
import { ref as I, watch as Se, shallowRef as ne, reactive as _, computed as E, onMounted as R, onBeforeUnmount as P, inject as de, defineComponent as ye, unref as A, openBlock as p, createElementBlock as K, normalizeStyle as se, Fragment as V, renderList as Ae, createBlock as H, resolveDynamicComponent as q, createCommentVNode as we, useTemplateRef as xe, provide as Le, renderSlot as ie, Teleport as Ce, createElementVNode as ke } from "vue";
|
|
3
3
|
const M = {
|
|
4
4
|
SELECT_AREA: "data-dnd-kit-select-area",
|
|
5
5
|
DRAGGABLE: "data-dnd-kit-draggable",
|
|
@@ -22,13 +22,13 @@ const M = {
|
|
|
22
22
|
l[c]((u) => n.value.has(u)) && i.add(a);
|
|
23
23
|
}), i;
|
|
24
24
|
};
|
|
25
|
-
let be = "",
|
|
26
|
-
const
|
|
25
|
+
let be = "", Re = "", Pe = "";
|
|
26
|
+
const U = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$el : null, B = (e, t) => e !== t && e.contains(t), Be = (e, t) => !(e.right < t.left || e.left > t.right || e.bottom < t.top || e.top > t.bottom), W = () => {
|
|
27
27
|
const e = document.body;
|
|
28
28
|
be = e.style.userSelect, e.style.userSelect = "none", window.addEventListener("contextmenu", m), window.addEventListener("selectstart", m), window.addEventListener("touchstart", m), window.addEventListener("touchmove", m);
|
|
29
29
|
}, j = () => {
|
|
30
30
|
const e = document.body;
|
|
31
|
-
e.style.userSelect = be, e.style.touchAction =
|
|
31
|
+
e.style.userSelect = be, e.style.touchAction = Re, e.style.overscrollBehavior = Pe, window.removeEventListener("contextmenu", m), window.removeEventListener("selectstart", m), window.removeEventListener("touchstart", m), window.removeEventListener("touchmove", m);
|
|
32
32
|
}, m = (e) => e.preventDefault(), S = (e, t) => {
|
|
33
33
|
if (t.entities.draggableMap.get(e)?.disabled) return !0;
|
|
34
34
|
for (const [s, i] of t.entities.draggableMap)
|
|
@@ -39,7 +39,7 @@ const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$e
|
|
|
39
39
|
for (const [s, i] of t.entities.droppableMap)
|
|
40
40
|
if (i.disabled && B(s, e)) return !0;
|
|
41
41
|
return !1;
|
|
42
|
-
},
|
|
42
|
+
}, $ = (e) => {
|
|
43
43
|
const t = new IntersectionObserver((n) => {
|
|
44
44
|
n.forEach((s) => {
|
|
45
45
|
const i = s.target;
|
|
@@ -51,7 +51,7 @@ const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$e
|
|
|
51
51
|
unobserve: (n) => t.unobserve(n),
|
|
52
52
|
disconnect: () => t.disconnect()
|
|
53
53
|
};
|
|
54
|
-
},
|
|
54
|
+
}, Te = (e) => {
|
|
55
55
|
const t = new ResizeObserver((n) => {
|
|
56
56
|
const s = n[0];
|
|
57
57
|
if (!s) return;
|
|
@@ -64,7 +64,7 @@ const N = (e) => e.value ? e.value instanceof HTMLElement ? e.value : e.value.$e
|
|
|
64
64
|
disconnect: () => t.disconnect()
|
|
65
65
|
};
|
|
66
66
|
}, Oe = (e) => {
|
|
67
|
-
const t = I(null), n =
|
|
67
|
+
const t = I(null), n = Te(t), s = Se(
|
|
68
68
|
e,
|
|
69
69
|
(a) => {
|
|
70
70
|
n.disconnect(), a && n.observe(a);
|
|
@@ -96,34 +96,34 @@ function he(e, t) {
|
|
|
96
96
|
initialOuterHTML: e.outerHTML
|
|
97
97
|
};
|
|
98
98
|
}
|
|
99
|
-
function
|
|
99
|
+
function ze(e, t, n) {
|
|
100
100
|
e.forEach((s) => {
|
|
101
101
|
const i = t.get(s);
|
|
102
102
|
n.set(s, he(s, i));
|
|
103
103
|
}), e.clear();
|
|
104
104
|
}
|
|
105
|
-
function
|
|
105
|
+
function _e(e, t, n) {
|
|
106
106
|
n.clear();
|
|
107
107
|
const s = t.get(e);
|
|
108
108
|
n.set(e, he(e, s));
|
|
109
109
|
}
|
|
110
|
-
function
|
|
111
|
-
e.entities.initiatingDraggable && (e.state.value = "dragging",
|
|
110
|
+
function G(e) {
|
|
111
|
+
e.entities.initiatingDraggable && (e.state.value = "dragging", Fe(
|
|
112
112
|
e.entities.initiatingDraggable,
|
|
113
113
|
e.entities.selectedSet,
|
|
114
114
|
e.entities.draggableMap,
|
|
115
115
|
e.entities.draggingMap
|
|
116
116
|
));
|
|
117
117
|
}
|
|
118
|
-
function
|
|
119
|
-
t.has(e) ?
|
|
118
|
+
function Fe(e, t, n, s) {
|
|
119
|
+
t.has(e) ? ze(t, n, s) : (t.clear(), _e(e, n, s));
|
|
120
120
|
}
|
|
121
121
|
function De(e, t, n, s) {
|
|
122
122
|
if (s || !n) return !0;
|
|
123
123
|
const i = e.closest(n);
|
|
124
124
|
return i ? t.contains(i) : !1;
|
|
125
125
|
}
|
|
126
|
-
function
|
|
126
|
+
function Ie(e, t) {
|
|
127
127
|
if (!e || !t) return 1;
|
|
128
128
|
const n = Math.abs(e.current.x - e.start.x), s = Math.abs(e.current.y - e.start.y);
|
|
129
129
|
if (typeof t == "number") {
|
|
@@ -144,7 +144,7 @@ function pe(e, t, n) {
|
|
|
144
144
|
const s = n.distance != null, i = n.delay != null;
|
|
145
145
|
return !s && !i ? !0 : s && !i ? e >= 1 : !s && i ? t >= 1 : (n.condition ?? "both") === "both" ? e >= 1 && t >= 1 : e >= 1 || t >= 1;
|
|
146
146
|
}
|
|
147
|
-
function
|
|
147
|
+
function Ke(e) {
|
|
148
148
|
if (e.state.value !== "activating" || !e.entities.initiatingDraggable)
|
|
149
149
|
return !1;
|
|
150
150
|
const t = e.entities.draggableMap.get(
|
|
@@ -154,9 +154,9 @@ function Ie(e) {
|
|
|
154
154
|
e.distanceProgress.value,
|
|
155
155
|
e.delay.progress,
|
|
156
156
|
t?.activation
|
|
157
|
-
) ? (
|
|
157
|
+
) ? (G(e), !0) : !1;
|
|
158
158
|
}
|
|
159
|
-
function
|
|
159
|
+
function He(e, t) {
|
|
160
160
|
let n = null;
|
|
161
161
|
const s = () => {
|
|
162
162
|
if (e.state.value !== "activating" || !e.entities.initiatingDraggable) {
|
|
@@ -185,7 +185,7 @@ function Ke(e, t) {
|
|
|
185
185
|
}
|
|
186
186
|
};
|
|
187
187
|
}
|
|
188
|
-
function
|
|
188
|
+
function Ge(e, t) {
|
|
189
189
|
const n = e.closest(
|
|
190
190
|
k.CONSTRAINT_AREA
|
|
191
191
|
);
|
|
@@ -194,10 +194,10 @@ function He(e, t) {
|
|
|
194
194
|
entity: t.get(n)
|
|
195
195
|
};
|
|
196
196
|
}
|
|
197
|
-
function
|
|
197
|
+
function Ne(e, t, n, s) {
|
|
198
198
|
return n === "x" ? { x: e, y: s.top } : n === "y" ? { x: s.left, y: t } : { x: e, y: t };
|
|
199
199
|
}
|
|
200
|
-
function
|
|
200
|
+
function Ue(e, t, n, s, i) {
|
|
201
201
|
let a = e, o = t;
|
|
202
202
|
return n !== "y" && (a = Math.max(
|
|
203
203
|
s.left,
|
|
@@ -207,23 +207,23 @@ function Ne(e, t, n, s, i) {
|
|
|
207
207
|
Math.min(s.bottom - i.height, t)
|
|
208
208
|
)), { x: a, y: o };
|
|
209
209
|
}
|
|
210
|
-
function
|
|
210
|
+
function Ye(e, t, n, s, i) {
|
|
211
211
|
if (!e || !t)
|
|
212
212
|
return { x: 0, y: 0 };
|
|
213
213
|
const a = t.getBoundingClientRect(), o = a.width || i?.width || 0, r = a.height || i?.height || 0;
|
|
214
214
|
let l = e.current.x - o * e.offset.x, c = e.current.y - r * e.offset.y;
|
|
215
215
|
if (!n)
|
|
216
216
|
return { x: l, y: c };
|
|
217
|
-
const f =
|
|
217
|
+
const f = Ge(n, s);
|
|
218
218
|
if (!f)
|
|
219
219
|
return { x: l, y: c };
|
|
220
|
-
const { element: u, entity: d } = f, g = u.getBoundingClientRect(), y = n.getBoundingClientRect(), b =
|
|
220
|
+
const { element: u, entity: d } = f, g = u.getBoundingClientRect(), y = n.getBoundingClientRect(), b = Ne(
|
|
221
221
|
l,
|
|
222
222
|
c,
|
|
223
223
|
d.axis || "both",
|
|
224
224
|
y
|
|
225
225
|
);
|
|
226
|
-
return d.restrictToArea ?
|
|
226
|
+
return d.restrictToArea ? Ue(
|
|
227
227
|
b.x,
|
|
228
228
|
b.y,
|
|
229
229
|
d.axis || "both",
|
|
@@ -247,7 +247,7 @@ const C = {
|
|
|
247
247
|
],
|
|
248
248
|
forMoveFaster: ["ShiftLeft", "ShiftRight"]
|
|
249
249
|
};
|
|
250
|
-
function
|
|
250
|
+
function $e(e) {
|
|
251
251
|
const t = ne(), n = I(), i = {
|
|
252
252
|
keys: {
|
|
253
253
|
pressedKeys: I(/* @__PURE__ */ new Set()),
|
|
@@ -291,25 +291,25 @@ function Ye(e) {
|
|
|
291
291
|
}), l = E(() => {
|
|
292
292
|
if (!n.value || !a.initiatingDraggable) return 0;
|
|
293
293
|
const z = a.draggableMap.get(a.initiatingDraggable)?.activation?.distance;
|
|
294
|
-
return z ?
|
|
295
|
-
}), c =
|
|
294
|
+
return z ? Ie(n.value, z) : 1;
|
|
295
|
+
}), c = $(
|
|
296
296
|
a.visibleDraggableSet
|
|
297
|
-
), f =
|
|
297
|
+
), f = $(
|
|
298
298
|
a.visibleDroppableSet
|
|
299
|
-
), u =
|
|
299
|
+
), u = $(
|
|
300
300
|
a.visibleSelectableAreaSet
|
|
301
301
|
), { overlaySize: d, overlaySizeObserver: g } = Oe(e), y = I(), b = _({
|
|
302
302
|
draggable: /* @__PURE__ */ new Map(),
|
|
303
303
|
droppable: /* @__PURE__ */ new Map()
|
|
304
|
-
}),
|
|
304
|
+
}), v = {
|
|
305
305
|
throttle: ne(0)
|
|
306
|
-
},
|
|
306
|
+
}, T = E(() => {
|
|
307
307
|
o.y, o.x;
|
|
308
|
-
const
|
|
309
|
-
return
|
|
308
|
+
const O = a.initiatingDraggable;
|
|
309
|
+
return Ye(
|
|
310
310
|
n.value,
|
|
311
311
|
e.value,
|
|
312
|
-
|
|
312
|
+
O || null,
|
|
313
313
|
a.constraintsAreaMap,
|
|
314
314
|
d.value
|
|
315
315
|
);
|
|
@@ -323,10 +323,10 @@ function Ye(e) {
|
|
|
323
323
|
delay: r,
|
|
324
324
|
distanceProgress: l,
|
|
325
325
|
hovered: b,
|
|
326
|
-
collision:
|
|
326
|
+
collision: v,
|
|
327
327
|
overlay: {
|
|
328
328
|
size: d,
|
|
329
|
-
style:
|
|
329
|
+
style: T,
|
|
330
330
|
render: y,
|
|
331
331
|
ref: e
|
|
332
332
|
},
|
|
@@ -338,9 +338,9 @@ function Ye(e) {
|
|
|
338
338
|
}
|
|
339
339
|
};
|
|
340
340
|
}
|
|
341
|
-
const
|
|
341
|
+
const N = (e) => {
|
|
342
342
|
e.pointer.value = void 0, e.state.value = void 0, e.entities.selectingArea = void 0, e.entities.initiatingDraggable = void 0, e.delay.progress = 0, e.delay.startTime = 0, e.entities.draggingMap.clear(), e.hovered.draggable.clear(), e.hovered.droppable.clear();
|
|
343
|
-
},
|
|
343
|
+
}, Xe = (e) => {
|
|
344
344
|
const t = e.entities.initiatingDraggable;
|
|
345
345
|
if (!t) return;
|
|
346
346
|
const s = e.entities.draggableMap.get(t)?.payload;
|
|
@@ -353,7 +353,7 @@ const G = (e) => {
|
|
|
353
353
|
items: Array.isArray(o) ? o : [],
|
|
354
354
|
dropData: r
|
|
355
355
|
};
|
|
356
|
-
},
|
|
356
|
+
}, Ze = (e, t) => {
|
|
357
357
|
const s = e.entities.droppableMap.get(t)?.payload;
|
|
358
358
|
if (!s) return;
|
|
359
359
|
const i = s();
|
|
@@ -363,14 +363,14 @@ const G = (e) => {
|
|
|
363
363
|
items: Array.isArray(a) ? a : [],
|
|
364
364
|
userData: o
|
|
365
365
|
};
|
|
366
|
-
}, w = (e) => e.keys().next().value,
|
|
366
|
+
}, w = (e) => e.keys().next().value, Ve = (e) => e.target.closest(k.DRAGGABLE), D = (e, t) => {
|
|
367
367
|
const n = {
|
|
368
|
-
payload:
|
|
368
|
+
payload: Xe(e),
|
|
369
369
|
provider: e
|
|
370
370
|
};
|
|
371
|
-
return t && (n.dropZonePayload =
|
|
372
|
-
},
|
|
373
|
-
const s =
|
|
371
|
+
return t && (n.dropZonePayload = Ze(e, t)), n;
|
|
372
|
+
}, X = (e, t, n) => {
|
|
373
|
+
const s = Ve(t);
|
|
374
374
|
if (!s || !e.entities.draggingMap.has(s)) return;
|
|
375
375
|
const i = D(e);
|
|
376
376
|
e.entities.draggingMap.get(s)?.events?.[n]?.(i);
|
|
@@ -383,7 +383,7 @@ const G = (e) => {
|
|
|
383
383
|
e.entities.draggableMap.forEach((s, i) => {
|
|
384
384
|
S(i, e) || s.events?.[t]?.(n);
|
|
385
385
|
});
|
|
386
|
-
},
|
|
386
|
+
}, qe = (e, t, n) => {
|
|
387
387
|
if (t !== n) {
|
|
388
388
|
if (t && !L(t, e)) {
|
|
389
389
|
const s = D(e, t);
|
|
@@ -394,12 +394,12 @@ const G = (e) => {
|
|
|
394
394
|
e.entities.droppableMap.get(n)?.events?.onEnter?.(s);
|
|
395
395
|
}
|
|
396
396
|
}
|
|
397
|
-
},
|
|
397
|
+
}, We = (e, t, n) => {
|
|
398
398
|
if (t !== n) {
|
|
399
399
|
const s = D(e);
|
|
400
400
|
t && !S(t, e) && e.entities.draggableMap.get(t)?.events?.onLeave?.(s), n && !S(n, e) && e.entities.draggableMap.get(n)?.events?.onHover?.(s);
|
|
401
401
|
}
|
|
402
|
-
},
|
|
402
|
+
}, je = (e, t) => {
|
|
403
403
|
const n = w(t.droppable);
|
|
404
404
|
if (n && !L(n, e)) {
|
|
405
405
|
const s = D(e, n);
|
|
@@ -411,7 +411,7 @@ const G = (e) => {
|
|
|
411
411
|
const s = D(e, n);
|
|
412
412
|
e.entities.droppableMap.get(n)?.events?.onLeave?.(s);
|
|
413
413
|
}
|
|
414
|
-
},
|
|
414
|
+
}, Je = (e, t) => !e.length || !t.length ? !0 : e.some((n) => t.includes(n)), Qe = (e, t, n) => {
|
|
415
415
|
if (!n) return {};
|
|
416
416
|
const s = n.getBoundingClientRect(), i = Math.max(s.left, Math.min(e.x, t.x)), a = Math.max(s.top, Math.min(e.y, t.y)), o = Math.min(s.right, Math.max(e.x, t.x)), r = Math.min(s.bottom, Math.max(e.y, t.y)), l = Math.max(0, o - i), c = Math.max(0, r - a);
|
|
417
417
|
return {
|
|
@@ -424,9 +424,9 @@ const G = (e) => {
|
|
|
424
424
|
border: "1px solid #3b82f6",
|
|
425
425
|
backgroundColor: "#3b82f61a"
|
|
426
426
|
};
|
|
427
|
-
},
|
|
427
|
+
}, et = (e) => {
|
|
428
428
|
if (!e.pointer.value || !e.entities.selectingArea) return;
|
|
429
|
-
const { selectingArea: t } = e.entities, n =
|
|
429
|
+
const { selectingArea: t } = e.entities, n = tt(
|
|
430
430
|
e.pointer.value.start,
|
|
431
431
|
e.pointer.value.current
|
|
432
432
|
), s = e.entities.selectableAreaMap.get(t)?.groups ?? [];
|
|
@@ -437,16 +437,16 @@ const G = (e) => {
|
|
|
437
437
|
return;
|
|
438
438
|
}
|
|
439
439
|
const o = e.entities.draggableMap.get(i)?.groups ?? [];
|
|
440
|
-
if (!
|
|
440
|
+
if (!Je(s, o)) {
|
|
441
441
|
e.entities.selectedSet.delete(i);
|
|
442
442
|
return;
|
|
443
443
|
}
|
|
444
|
-
|
|
444
|
+
Be(n, i.getBoundingClientRect()) ? e.entities.selectedSet.add(i) : e.entities.selectedSet.delete(i);
|
|
445
445
|
});
|
|
446
|
-
},
|
|
446
|
+
}, tt = (e, t) => {
|
|
447
447
|
const n = Math.min(e.x, t.x), s = Math.min(e.y, t.y), i = Math.max(e.x, t.x), a = Math.max(e.y, t.y), o = i - n, r = a - s;
|
|
448
448
|
return new DOMRect(n, s, o, r);
|
|
449
|
-
},
|
|
449
|
+
}, nt = (e, t, n = 5) => {
|
|
450
450
|
const s = n / 2;
|
|
451
451
|
return {
|
|
452
452
|
left: e - s,
|
|
@@ -454,14 +454,14 @@ const G = (e) => {
|
|
|
454
454
|
width: n,
|
|
455
455
|
height: n
|
|
456
456
|
};
|
|
457
|
-
},
|
|
457
|
+
}, st = (e) => {
|
|
458
458
|
const t = e.pointer.value?.current, n = t?.x ?? 0, s = t?.y ?? 0;
|
|
459
|
-
return
|
|
459
|
+
return nt(n, s, 5);
|
|
460
460
|
}, F = (e, t, n) => {
|
|
461
461
|
const s = e.left + e.width / 2, i = e.top + e.height / 2;
|
|
462
462
|
if (n) {
|
|
463
|
-
const f = n.top ?? 0, u = n.right ?? 0, d = n.bottom ?? 0, g = n.left ?? 0, y = t.left + g, b = t.right - u,
|
|
464
|
-
if (y < b &&
|
|
463
|
+
const f = n.top ?? 0, u = n.right ?? 0, d = n.bottom ?? 0, g = n.left ?? 0, y = t.left + g, b = t.right - u, v = t.top + f, T = t.bottom - d;
|
|
464
|
+
if (y < b && v < T && s >= y && s <= b && i >= v && i <= T)
|
|
465
465
|
return { top: !1, right: !1, bottom: !1, left: !1, center: !0 };
|
|
466
466
|
}
|
|
467
467
|
const a = i - t.top, o = t.bottom - i, r = s - t.left, l = t.right - s, c = Math.min(a, o, r, l);
|
|
@@ -471,15 +471,15 @@ const G = (e) => {
|
|
|
471
471
|
left: r === c,
|
|
472
472
|
right: l === c
|
|
473
473
|
};
|
|
474
|
-
},
|
|
474
|
+
}, it = (e, t) => e.find((n) => n !== t && B(t, n)), Q = (e, t, n) => {
|
|
475
475
|
const s = w(t.droppable), i = w(t.draggable);
|
|
476
476
|
t.draggable.clear(), t.droppable.clear();
|
|
477
|
-
const a =
|
|
477
|
+
const a = st(e), o = n.zones[0], r = n.elements[0];
|
|
478
478
|
if (o && r && o === r && e.entities.droppableMap.has(o) && o) {
|
|
479
479
|
const u = o.getBoundingClientRect(), d = e.entities.draggableMap.get(o)?.placementMargins, g = F(a, u, d);
|
|
480
480
|
if (g.center) {
|
|
481
481
|
t.droppable.set(o, g);
|
|
482
|
-
const y =
|
|
482
|
+
const y = it(n.elements, o);
|
|
483
483
|
if (y) {
|
|
484
484
|
const b = y.getBoundingClientRect();
|
|
485
485
|
t.draggable.set(
|
|
@@ -503,8 +503,8 @@ const G = (e) => {
|
|
|
503
503
|
}
|
|
504
504
|
}
|
|
505
505
|
const c = w(t.droppable), f = w(t.draggable);
|
|
506
|
-
|
|
507
|
-
},
|
|
506
|
+
qe(e, s, c), We(e, i, f);
|
|
507
|
+
}, at = (e, t) => e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y, oe = (e) => {
|
|
508
508
|
if (!e)
|
|
509
509
|
return { x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0 };
|
|
510
510
|
const t = e.getBoundingClientRect();
|
|
@@ -521,7 +521,7 @@ const G = (e) => {
|
|
|
521
521
|
}, re = (e) => ({
|
|
522
522
|
x: e.x + e.width / 2,
|
|
523
523
|
y: e.y + e.height / 2
|
|
524
|
-
}),
|
|
524
|
+
}), ot = (e, t) => Math.hypot(t.x - e.x, t.y - e.y), rt = (e, t) => {
|
|
525
525
|
const n = Math.max(
|
|
526
526
|
0,
|
|
527
527
|
Math.min(e.x + e.width, t.x + t.width) - Math.max(e.x, t.x)
|
|
@@ -530,7 +530,7 @@ const G = (e) => {
|
|
|
530
530
|
Math.min(e.y + e.height, t.y + t.height) - Math.max(e.y, t.y)
|
|
531
531
|
), i = n * s, a = e.width * e.height, o = t.width * t.height;
|
|
532
532
|
return a === 0 || o === 0 ? 0 : (i / a * 100 + i / o * 100) / 2;
|
|
533
|
-
},
|
|
533
|
+
}, lt = (e, t, n) => t >= e.x && t <= e.x + e.width && n >= e.y && n <= e.y + e.height, le = () => !0, ce = () => 0, ct = () => {
|
|
534
534
|
const e = {
|
|
535
535
|
filterElements: le,
|
|
536
536
|
filterZones: le,
|
|
@@ -541,16 +541,16 @@ const G = (e) => {
|
|
|
541
541
|
const y = oe(g);
|
|
542
542
|
if (!c(y, u)) return null;
|
|
543
543
|
let b = 0;
|
|
544
|
-
for (const
|
|
545
|
-
|
|
544
|
+
for (const v of f)
|
|
545
|
+
v !== g && B(v, g) && b++;
|
|
546
546
|
return {
|
|
547
547
|
node: g,
|
|
548
548
|
box: y,
|
|
549
549
|
meta: {
|
|
550
|
-
isPointerInElement:
|
|
551
|
-
overlapPercent:
|
|
550
|
+
isPointerInElement: lt(y, a.x, a.y),
|
|
551
|
+
overlapPercent: rt(y, i),
|
|
552
552
|
depth: b,
|
|
553
|
-
centerDistance:
|
|
553
|
+
centerDistance: ot(re(i), re(y))
|
|
554
554
|
}
|
|
555
555
|
};
|
|
556
556
|
}).filter((g) => g !== null);
|
|
@@ -615,7 +615,7 @@ const G = (e) => {
|
|
|
615
615
|
}
|
|
616
616
|
};
|
|
617
617
|
return n;
|
|
618
|
-
},
|
|
618
|
+
}, gt = () => ct(), ut = (e) => e.overlay.ref?.value ?? null, ft = (e) => {
|
|
619
619
|
const t = e.overlay.style?.value ?? { x: 0, y: 0 }, n = e.overlay.size?.value ?? null, { x: s, y: i } = t, a = n?.width ?? 0, o = n?.height ?? 0;
|
|
620
620
|
return {
|
|
621
621
|
x: s,
|
|
@@ -627,9 +627,9 @@ const G = (e) => {
|
|
|
627
627
|
right: s + a,
|
|
628
628
|
bottom: i + o
|
|
629
629
|
};
|
|
630
|
-
},
|
|
630
|
+
}, dt = (e) => e.entities.visibleDraggableSet, yt = (e) => e.entities.visibleDroppableSet, bt = (e, t) => !t.entities.draggingMap.has(e), mt = (e, t) => ![...t.entities.draggingMap.keys()].some(
|
|
631
631
|
(n) => B(n, e)
|
|
632
|
-
),
|
|
632
|
+
), ht = (e, t) => t.entities.draggableMap.has(e) ? !S(e, t) : t.entities.droppableMap.has(e) ? !L(e, t) : !0, ge = (e, t) => bt(e, t) && mt(e, t) && ht(e, t), Dt = (e, t) => at(e, t.containerBox), ue = (e, t, n) => {
|
|
633
633
|
if (n.pointer.x >= n.containerBox.x && n.pointer.x <= n.containerBox.x + n.containerBox.width && n.pointer.y >= n.containerBox.y && n.pointer.y <= n.containerBox.y + n.containerBox.height) {
|
|
634
634
|
if (e.meta.isPointerInElement && t.meta.isPointerInElement)
|
|
635
635
|
return t.meta.depth - e.meta.depth;
|
|
@@ -637,12 +637,12 @@ const G = (e) => {
|
|
|
637
637
|
return e.meta.isPointerInElement ? -1 : 1;
|
|
638
638
|
}
|
|
639
639
|
return Math.abs(e.meta.overlapPercent - t.meta.overlapPercent) <= 1 ? e.meta.centerDistance - t.meta.centerDistance : t.meta.overlapPercent - e.meta.overlapPercent;
|
|
640
|
-
}, ee =
|
|
640
|
+
}, ee = gt().container(ut).containerBox(ft).elements(dt).zones(yt).filterElements(ge).filterZones(ge).collision(Dt).sortElements(ue).sortZones(ue).build();
|
|
641
641
|
function fe(e) {
|
|
642
642
|
const n = (e.collision?.run ?? ee)(e);
|
|
643
643
|
Q(e, e.hovered, n);
|
|
644
644
|
}
|
|
645
|
-
function
|
|
645
|
+
function pt(e, t) {
|
|
646
646
|
const n = e.collision?.throttle?.value ?? 0;
|
|
647
647
|
if (n <= 0) {
|
|
648
648
|
fe(e);
|
|
@@ -666,15 +666,15 @@ async function Ee(e) {
|
|
|
666
666
|
}
|
|
667
667
|
function Me(e) {
|
|
668
668
|
const t = e.entities.initiatingDraggable;
|
|
669
|
-
x(e, t, "onSelfDragEnd"), h(e, "onDragEnd"),
|
|
669
|
+
x(e, t, "onSelfDragEnd"), h(e, "onDragEnd"), je(e, e.hovered);
|
|
670
670
|
}
|
|
671
|
-
function
|
|
671
|
+
function vt(e) {
|
|
672
672
|
const t = e.entities.selectingArea;
|
|
673
673
|
if (!t) return;
|
|
674
674
|
const n = e.entities.selectableAreaMap.get(t), s = [...e.entities.selectedSet];
|
|
675
675
|
n?.events?.onSelected?.(s);
|
|
676
676
|
}
|
|
677
|
-
const
|
|
677
|
+
const Et = (e) => {
|
|
678
678
|
const t = {
|
|
679
679
|
current: null
|
|
680
680
|
}, n = { value: 0 }, s = async () => {
|
|
@@ -682,24 +682,24 @@ const vt = (e) => {
|
|
|
682
682
|
const r = e.state.value;
|
|
683
683
|
if (r === "dragging") {
|
|
684
684
|
if (!await Ee(e)) {
|
|
685
|
-
|
|
685
|
+
N(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
|
|
686
686
|
return;
|
|
687
687
|
}
|
|
688
688
|
Me(e);
|
|
689
|
-
} else r === "selecting" &&
|
|
690
|
-
|
|
689
|
+
} else r === "selecting" && vt(e);
|
|
690
|
+
N(e), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i);
|
|
691
691
|
}, i = (r) => {
|
|
692
692
|
if (e.pointer.value) {
|
|
693
|
-
if (e.pointer.value.current = { x: r.clientX, y: r.clientY },
|
|
694
|
-
|
|
693
|
+
if (e.pointer.value.current = { x: r.clientX, y: r.clientY }, Ke(e)) {
|
|
694
|
+
X(e, r, "onSelfDragStart"), h(e, "onDragStart");
|
|
695
695
|
return;
|
|
696
696
|
}
|
|
697
697
|
if (e.state.value === "dragging") {
|
|
698
|
-
|
|
698
|
+
pt(e, n);
|
|
699
699
|
const l = e.entities.initiatingDraggable;
|
|
700
700
|
x(e, l, "onSelfDragMove"), h(e, "onDragMove");
|
|
701
701
|
}
|
|
702
|
-
e.state.value === "selecting" &&
|
|
702
|
+
e.state.value === "selecting" && et(e);
|
|
703
703
|
}
|
|
704
704
|
};
|
|
705
705
|
return { pointerDown: (r) => {
|
|
@@ -719,14 +719,14 @@ const vt = (e) => {
|
|
|
719
719
|
return;
|
|
720
720
|
W(), e.entities.initiatingDraggable = f;
|
|
721
721
|
const d = me(r, f);
|
|
722
|
-
e.pointer.value = J(r, d.x, d.y), u?.activation?.distance || u?.activation?.delay ? (e.state.value = "activating", u?.activation?.delay && (e.delay.startTime = Date.now(), t.current =
|
|
723
|
-
|
|
724
|
-
}))) : (
|
|
722
|
+
e.pointer.value = J(r, d.x, d.y), u?.activation?.distance || u?.activation?.delay ? (e.state.value = "activating", u?.activation?.delay && (e.delay.startTime = Date.now(), t.current = He(e, () => {
|
|
723
|
+
G(e), X(e, r, "onSelfDragStart"), h(e, "onDragStart");
|
|
724
|
+
}))) : (G(e), X(e, r, "onSelfDragStart"), h(e, "onDragStart"));
|
|
725
725
|
}
|
|
726
726
|
}, pointerUp: s, pointerMove: i, cleanup: () => {
|
|
727
727
|
t.current?.cancel(), document.removeEventListener("pointerup", s), document.removeEventListener("pointermove", i), e.lib.draggableObserver.disconnect(), e.lib.droppableObserver.disconnect(), e.lib.selectableAreaObserver.disconnect(), e.lib.overlaySizeObserver.disconnect();
|
|
728
728
|
} };
|
|
729
|
-
},
|
|
729
|
+
}, Mt = {
|
|
730
730
|
ArrowUp: { dx: 0, dy: -1 },
|
|
731
731
|
ArrowDown: { dx: 0, dy: 1 },
|
|
732
732
|
ArrowLeft: { dx: -1, dy: 0 },
|
|
@@ -735,18 +735,18 @@ const vt = (e) => {
|
|
|
735
735
|
KeyA: { dx: -1, dy: 0 },
|
|
736
736
|
KeyS: { dx: 0, dy: 1 },
|
|
737
737
|
KeyD: { dx: 1, dy: 0 }
|
|
738
|
-
},
|
|
738
|
+
}, St = (e) => (t) => {
|
|
739
739
|
const { keys: n } = e.keyboard;
|
|
740
740
|
if (n.pressedKeys.value.add(t.code), e.state.value === "dragging") {
|
|
741
741
|
if (n.forCancel.includes(t.code)) {
|
|
742
|
-
t.preventDefault(), j(), x(e, e.entities.initiatingDraggable, "onSelfDragCancel"), h(e, "onDragCancel"), ve(e, e.hovered),
|
|
742
|
+
t.preventDefault(), j(), x(e, e.entities.initiatingDraggable, "onSelfDragCancel"), h(e, "onDragCancel"), ve(e, e.hovered), N(e);
|
|
743
743
|
return;
|
|
744
744
|
}
|
|
745
745
|
if (n.forDrop.includes(t.code)) {
|
|
746
|
-
t.preventDefault(), (async () => (await Ee(e) && Me(e), j(),
|
|
746
|
+
t.preventDefault(), (async () => (await Ee(e) && Me(e), j(), N(e)))();
|
|
747
747
|
return;
|
|
748
748
|
}
|
|
749
|
-
const i =
|
|
749
|
+
const i = Mt[t.code];
|
|
750
750
|
if (i && n.forMove.includes(t.code) && e.pointer.value) {
|
|
751
751
|
t.preventDefault();
|
|
752
752
|
const a = n.forMoveFaster.some((c) => n.pressedKeys.value.has(c)), o = e.keyboard.step * (a ? e.keyboard.moveFaster : 1);
|
|
@@ -775,33 +775,33 @@ const vt = (e) => {
|
|
|
775
775
|
};
|
|
776
776
|
e.entities.initiatingDraggable = a;
|
|
777
777
|
const u = me(f, a);
|
|
778
|
-
e.pointer.value = J(f, u.x, u.y),
|
|
778
|
+
e.pointer.value = J(f, u.x, u.y), G(e);
|
|
779
779
|
const g = (e.collision?.run ?? ee)(e);
|
|
780
780
|
Q(e, e.hovered, g), x(e, a, "onSelfDragStart"), h(e, "onDragStart");
|
|
781
781
|
}
|
|
782
|
-
},
|
|
782
|
+
}, At = (e) => (t) => {
|
|
783
783
|
e.keyboard.keys.pressedKeys.value.delete(t.code);
|
|
784
|
-
}, At = (e) => () => {
|
|
785
|
-
e.keyboard.keys.pressedKeys.value.clear();
|
|
786
|
-
}, X = {
|
|
787
|
-
keyDown: Mt,
|
|
788
|
-
keyUp: St,
|
|
789
|
-
clear: At
|
|
790
784
|
}, wt = (e) => () => {
|
|
785
|
+
e.keyboard.keys.pressedKeys.value.clear();
|
|
786
|
+
}, Z = {
|
|
787
|
+
keyDown: St,
|
|
788
|
+
keyUp: At,
|
|
789
|
+
clear: wt
|
|
790
|
+
}, xt = (e) => () => {
|
|
791
791
|
e.state.value && (e.scrollPosition.x = window.scrollX, e.scrollPosition.y = window.scrollY);
|
|
792
|
-
},
|
|
793
|
-
const t =
|
|
792
|
+
}, Lt = (e) => {
|
|
793
|
+
const t = Et(e), n = Z.keyDown(e), s = Z.keyUp(e), i = Z.clear(e), a = xt(e);
|
|
794
794
|
R(() => {
|
|
795
795
|
document.addEventListener("pointerdown", t.pointerDown), document.addEventListener("keydown", n), document.addEventListener("keyup", s), document.addEventListener("blur", i), document.addEventListener("scroll", a, !0);
|
|
796
796
|
}), P(() => {
|
|
797
797
|
document.removeEventListener("pointerdown", t.pointerDown), document.removeEventListener("pointerup", t.pointerUp), document.removeEventListener("pointermove", t.pointerMove), document.removeEventListener("keydown", n), document.removeEventListener("keyup", s), document.removeEventListener("blur", i), document.removeEventListener("scroll", a, !0), t.cleanup();
|
|
798
798
|
});
|
|
799
|
-
},
|
|
799
|
+
}, Y = () => {
|
|
800
800
|
const e = de(te);
|
|
801
801
|
if (!e) throw Error("DnD provider not found");
|
|
802
802
|
return e;
|
|
803
|
-
},
|
|
804
|
-
const e =
|
|
803
|
+
}, Ct = () => {
|
|
804
|
+
const e = Y();
|
|
805
805
|
return {
|
|
806
806
|
overlay: e.overlay,
|
|
807
807
|
delay: e.delay,
|
|
@@ -814,11 +814,11 @@ const vt = (e) => {
|
|
|
814
814
|
hovered: e.hovered,
|
|
815
815
|
collision: e.collision
|
|
816
816
|
};
|
|
817
|
-
},
|
|
817
|
+
}, kt = /* @__PURE__ */ ye({
|
|
818
818
|
__name: "DefaultOverlay",
|
|
819
819
|
setup(e) {
|
|
820
|
-
const { entities: t, state: n, overlay: s } =
|
|
821
|
-
return (i, a) => A(n) === "dragging" ? (
|
|
820
|
+
const { entities: t, state: n, overlay: s } = Ct();
|
|
821
|
+
return (i, a) => A(n) === "dragging" ? (p(), K("div", {
|
|
822
822
|
key: 0,
|
|
823
823
|
class: "dnd-kit-default-overlay",
|
|
824
824
|
style: se({
|
|
@@ -826,11 +826,11 @@ const vt = (e) => {
|
|
|
826
826
|
"--position-y": A(s).style.value.y + "px"
|
|
827
827
|
})
|
|
828
828
|
}, [
|
|
829
|
-
(
|
|
830
|
-
A(t).draggableMap.get(o)?.render ? (
|
|
829
|
+
(p(!0), K(V, null, Ae(A(t).draggingMap, ([o, r]) => (p(), K(V, null, [
|
|
830
|
+
A(t).draggableMap.get(o)?.render ? (p(), H(q(A(t).draggableMap.get(o)?.render), {
|
|
831
831
|
key: 0,
|
|
832
832
|
class: "test"
|
|
833
|
-
})) : (
|
|
833
|
+
})) : (p(), H(q(o.tagName), {
|
|
834
834
|
key: 1,
|
|
835
835
|
innerHTML: r.initialOuterHTML,
|
|
836
836
|
class: "test",
|
|
@@ -842,33 +842,35 @@ const vt = (e) => {
|
|
|
842
842
|
], 64))), 256))
|
|
843
843
|
], 4)) : we("", !0);
|
|
844
844
|
}
|
|
845
|
-
}),
|
|
845
|
+
}), Pt = /* @__PURE__ */ ye({
|
|
846
846
|
__name: "DnDProvider",
|
|
847
847
|
setup(e) {
|
|
848
|
-
const t = xe("overlayRef"), n =
|
|
849
|
-
|
|
848
|
+
const t = xe("overlayRef"), n = $e(t);
|
|
849
|
+
Lt(n);
|
|
850
850
|
const s = E(
|
|
851
|
-
() => n.overlay.render.value ??
|
|
851
|
+
() => n.overlay.render.value ?? kt
|
|
852
852
|
);
|
|
853
|
-
return Le(te, n), (i, a) => (
|
|
853
|
+
return Le(te, n), (i, a) => (p(), K(V, null, [
|
|
854
854
|
ie(i.$slots, "default"),
|
|
855
|
-
Ce
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
(
|
|
862
|
-
|
|
863
|
-
|
|
855
|
+
(p(), H(Ce, { to: "body" }, [
|
|
856
|
+
ke("div", {
|
|
857
|
+
ref_key: "overlayRef",
|
|
858
|
+
ref: t,
|
|
859
|
+
class: "dnd-kit-overlay-container"
|
|
860
|
+
}, [
|
|
861
|
+
ie(i.$slots, "overlay", { overlay: s.value }, () => [
|
|
862
|
+
(p(), H(q(s.value)))
|
|
863
|
+
])
|
|
864
|
+
], 512)
|
|
865
|
+
]))
|
|
864
866
|
], 64));
|
|
865
867
|
}
|
|
866
868
|
});
|
|
867
|
-
function
|
|
868
|
-
const s =
|
|
869
|
+
function Bt(e, t, n) {
|
|
870
|
+
const s = Y();
|
|
869
871
|
let i, a, o;
|
|
870
872
|
return typeof t == "function" ? (i = {}, a = t) : (i = t ?? {}, a = n), R(() => {
|
|
871
|
-
o =
|
|
873
|
+
o = U(e), o && (o.addEventListener("dragstart", m), o.addEventListener("drag", m), o.addEventListener("dragend", m), o.setAttribute(M.DRAGGABLE, ""), s.lib.draggableObserver.observe(o), s.entities.draggableMap.set(o, {
|
|
872
874
|
render: i.render,
|
|
873
875
|
disabled: i.disabled ?? !1,
|
|
874
876
|
groups: i.groups ?? [],
|
|
@@ -883,11 +885,11 @@ function Pt(e, t, n) {
|
|
|
883
885
|
o && (s.lib.draggableObserver.unobserve(o), s.entities.visibleDraggableSet.delete(o), s.entities.draggableMap.delete(o), s.entities.modifiersDraggableSet.delete(o));
|
|
884
886
|
}), {};
|
|
885
887
|
}
|
|
886
|
-
const
|
|
887
|
-
const n =
|
|
888
|
+
const Tt = (e, t) => {
|
|
889
|
+
const n = Y(), s = E(() => e.value === n.entities.selectingArea);
|
|
888
890
|
let i = null;
|
|
889
891
|
R(() => {
|
|
890
|
-
i =
|
|
892
|
+
i = U(e), i && (i.setAttribute(M.SELECT_AREA, ""), n.lib.selectableAreaObserver.observe(i), n.entities.selectableAreaMap.set(i, {
|
|
891
893
|
modifier: t?.modifier ?? {
|
|
892
894
|
keys: ["ControlLeft"],
|
|
893
895
|
method: "every"
|
|
@@ -902,7 +904,7 @@ const Bt = (e, t) => {
|
|
|
902
904
|
const a = E(() => {
|
|
903
905
|
n.scrollPosition.x, n.scrollPosition.y;
|
|
904
906
|
const o = n.pointer.value;
|
|
905
|
-
return !o || n.state.value !== "selecting" || !i ? {} :
|
|
907
|
+
return !o || n.state.value !== "selecting" || !i ? {} : Qe(o.start, o.current, i);
|
|
906
908
|
});
|
|
907
909
|
return {
|
|
908
910
|
isSelecting: s,
|
|
@@ -914,7 +916,7 @@ function Ot(e, t) {
|
|
|
914
916
|
if (!n) throw Error("DnD provider not found");
|
|
915
917
|
let s = null;
|
|
916
918
|
return R(() => {
|
|
917
|
-
s =
|
|
919
|
+
s = U(e), s && (s.setAttribute(M.CONSTRAINT_AREA, ""), n.entities.constraintsAreaMap.set(s, {
|
|
918
920
|
axis: t?.axis || "both",
|
|
919
921
|
restrictToArea: t?.restrictToArea || !1
|
|
920
922
|
}));
|
|
@@ -922,11 +924,11 @@ function Ot(e, t) {
|
|
|
922
924
|
s && n.entities.constraintsAreaMap.delete(s);
|
|
923
925
|
}), {};
|
|
924
926
|
}
|
|
925
|
-
function
|
|
926
|
-
const s =
|
|
927
|
+
function zt(e, t, n) {
|
|
928
|
+
const s = Y();
|
|
927
929
|
let i = null, a, o;
|
|
928
930
|
typeof t == "function" ? (a = {}, o = t) : (a = t ?? {}, o = n), R(() => {
|
|
929
|
-
i =
|
|
931
|
+
i = U(e), i && (i.setAttribute(M.DROPPABLE, ""), s.lib.droppableObserver.observe(i), s.entities.droppableMap.set(i, {
|
|
930
932
|
disabled: a.disabled ?? !1,
|
|
931
933
|
groups: a.groups ?? [],
|
|
932
934
|
events: a.events,
|
|
@@ -937,10 +939,10 @@ function Tt(e, t, n) {
|
|
|
937
939
|
});
|
|
938
940
|
}
|
|
939
941
|
export {
|
|
940
|
-
|
|
942
|
+
Pt as DnDProvider,
|
|
941
943
|
Ot as makeConstraintArea,
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
944
|
+
Bt as makeDraggable,
|
|
945
|
+
zt as makeDroppable,
|
|
946
|
+
Tt as makeSelectionArea,
|
|
947
|
+
Ct as useDnDProvider
|
|
946
948
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-dnd-kit/core",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-alpha6",
|
|
4
4
|
"description": "Core functionality for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces",
|
|
5
5
|
"author": "ZiZIGY",
|
|
6
6
|
"license": "MIT",
|