@vue-dnd-kit/utilities
Version:
Utilities for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces
2 lines (1 loc) • 3.59 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),R=require("@vue-dnd-kit/core"),O=(e,r={})=>{const{reset:u=!0,windowResize:i=!0,windowScroll:o=!0}=r,a=c.shallowRef({x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0}),l={resize:null,mutation:null},t=()=>{if(!e.value){u&&(a.value={x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0});return}a.value=R.getBoundingBox(e.value)},s=()=>{var f,h;(f=l.resize)==null||f.disconnect(),(h=l.mutation)==null||h.disconnect(),l.resize=null,l.mutation=null},v=()=>{e.value&&(s(),l.resize=new ResizeObserver(t),l.resize.observe(e.value),l.mutation=new MutationObserver(t),l.mutation.observe(e.value,{attributes:!0,attributeFilter:["style","class"],characterData:!1,childList:!1,subtree:!1}),t())},d=()=>{o&&window.addEventListener("scroll",t,{capture:!0,passive:!0}),i&&window.addEventListener("resize",t,{passive:!0})},n=()=>{o&&window.removeEventListener("scroll",t),i&&window.removeEventListener("resize",t)};return c.watch(()=>e.value,(f,h)=>{h!==f&&(!f&&u&&(a.value={x:0,y:0,width:0,height:0,bottom:0,left:0,right:0,top:0}),v())},{immediate:!0}),d(),c.onBeforeUnmount(()=>{s(),n()}),a},T=e=>{const u=Math.atan2(e.y,e.x)*(180/Math.PI);return u>=-45&&u<=45?"right":u>45&&u<135?"down":u>=135||u<=-135?"left":"up"},M=(e,r)=>{const u=c.computed(()=>{var l,t,s,v;return{x:(((l=r.value)==null?void 0:l.x)??0)-(((t=e.value)==null?void 0:t.x)??0),y:(((s=r.value)==null?void 0:s.y)??0)-(((v=e.value)==null?void 0:v.y)??0)}}),i=c.computed(()=>T(u.value)),o=c.computed(()=>{var s,v,d,n;const l=(((s=r.value)==null?void 0:s.x)??0)-(((v=e.value)==null?void 0:v.x)??0),t=(((d=r.value)==null?void 0:d.y)??0)-(((n=e.value)==null?void 0:n.y)??0);return Math.sqrt(l*l+t*t)}),a=c.computed(()=>{var s,v,d,n;const l=(((s=r.value)==null?void 0:s.x)??0)-(((v=e.value)==null?void 0:v.x)??0),t=(((d=r.value)==null?void 0:d.y)??0)-(((n=e.value)==null?void 0:n.y)??0);return Math.atan2(t,l)*(180/Math.PI)});return{delta:u,direction:i,distance:o,angle:a}},E=(e,r,u={})=>{const{threshold:i=50,speed:o=10,disabled:a=!1}=u,l=c.ref(!1);let t=null,s=null;const d=1e3/144;let n=null,f=0,h=0;const b=g=>{if(!e.value||!r.value||a){l.value=!1;return}s||(s=g);const x=g-s;if(x<d){t=requestAnimationFrame(b);return}const L=x/d,w=o*L;s=g;const y=e.value.scrollTop,z=e.value.scrollLeft;(!n||f!==y||h!==z)&&(n=e.value.getBoundingClientRect(),f=y,h=z);let m=!1;r.value.y-n.top<i&&(e.value.scrollTop=f-w,m=!0),n.bottom-r.value.y<i&&(e.value.scrollTop=f+w,m=!0),r.value.x-n.left<i&&(e.value.scrollLeft=h-w,m=!0),n.right-r.value.x<i&&(e.value.scrollLeft=h+w,m=!0),l.value=m,m&&(t=requestAnimationFrame(b))},S=()=>{t&&(cancelAnimationFrame(t),t=null),n=null,f=0,h=0,s=null,l.value=!1};return c.watch(r,g=>{g?(t&&cancelAnimationFrame(t),s=null,b(performance.now())):S()}),c.watch(()=>a,g=>{g&&S()}),{isScrolling:l}};function p(e,r,u={}){const{immediate:i=!0}=u;let o=null;const a=()=>{o&&(o.disconnect(),o=null)},l=()=>{if(e.value&&(a(),o=new ResizeObserver(([t])=>{t&&r(t)}),o.observe(e.value),i)){const t=e.value.getBoundingClientRect();r({contentRect:t,target:e.value,borderBoxSize:[],contentBoxSize:[],devicePixelContentBoxSize:[]})}};return c.watch(()=>e.value,t=>{t?l():a()},{immediate:!0}),c.onBeforeUnmount(a),a}function F(e,r={width:0,height:0}){const u=c.shallowRef(r.width),i=c.shallowRef(r.height);return p(e,o=>{u.value=o.contentRect.width,i.value=o.contentRect.height},{immediate:!0}),{width:u,height:i}}exports.useAutoScroll=E;exports.useBounding=O;exports.useElementSize=F;exports.useGeometry=M;exports.useSizeObserver=p;