@vue-dnd-kit/utilities/dist/vue-dnd-kit-utilities.es.js

Utilities for Vue DnD Kit - a lightweight Vue 3 library for building performant and accessible drag and drop interfaces

import { shallowRef as S, watch as x, onBeforeUnmount as R, computed as w, ref as F } from "vue";
import { getBoundingBox as M } from "@vue-dnd-kit/core";
const q = (e, r = {}) => {
  const { reset: u = !0, windowResize: i = !0, windowScroll: n = !0 } = r, a = S({
    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 = M(e.value);
  }, s = () => {
    var v, d;
    (v = l.resize) == null || v.disconnect(), (d = l.mutation) == null || d.disconnect(), l.resize = null, l.mutation = null;
  }, c = () => {
    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());
  }, f = () => {
    n && window.addEventListener("scroll", t, {
      capture: !0,
      passive: !0
    }), i && window.addEventListener("resize", t, { passive: !0 });
  }, o = () => {
    n && window.removeEventListener("scroll", t), i && window.removeEventListener("resize", t);
  };
  return x(
    () => e.value,
    (v, d) => {
      d !== v && (!v && u && (a.value = {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        bottom: 0,
        left: 0,
        right: 0,
        top: 0
      }), c());
    },
    { immediate: !0 }
  ), f(), R(() => {
    s(), o();
  }), a;
}, O = (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";
}, C = (e, r) => {
  const u = w(() => {
    var l, t, s, c;
    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) - (((c = e.value) == null ? void 0 : c.y) ?? 0)
    };
  }), i = w(() => O(u.value)), n = w(() => {
    var s, c, f, o;
    const l = (((s = r.value) == null ? void 0 : s.x) ?? 0) - (((c = e.value) == null ? void 0 : c.x) ?? 0), t = (((f = r.value) == null ? void 0 : f.y) ?? 0) - (((o = e.value) == null ? void 0 : o.y) ?? 0);
    return Math.sqrt(l * l + t * t);
  }), a = w(() => {
    var s, c, f, o;
    const l = (((s = r.value) == null ? void 0 : s.x) ?? 0) - (((c = e.value) == null ? void 0 : c.x) ?? 0), t = (((f = r.value) == null ? void 0 : f.y) ?? 0) - (((o = e.value) == null ? void 0 : o.y) ?? 0);
    return Math.atan2(t, l) * (180 / Math.PI);
  });
  return {
    delta: u,
    direction: i,
    distance: n,
    angle: a
  };
}, I = (e, r, u = {}) => {
  const { threshold: i = 50, speed: n = 10, disabled: a = !1 } = u, l = F(!1);
  let t = null, s = null;
  const f = 1e3 / 144;
  let o = null, v = 0, d = 0;
  const b = (h) => {
    if (!e.value || !r.value || a) {
      l.value = !1;
      return;
    }
    s || (s = h);
    const z = h - s;
    if (z < f) {
      t = requestAnimationFrame(b);
      return;
    }
    const T = z / f, m = n * T;
    s = h;
    const p = e.value.scrollTop, L = e.value.scrollLeft;
    (!o || v !== p || d !== L) && (o = e.value.getBoundingClientRect(), v = p, d = L);
    let g = !1;
    r.value.y - o.top < i && (e.value.scrollTop = v - m, g = !0), o.bottom - r.value.y < i && (e.value.scrollTop = v + m, g = !0), r.value.x - o.left < i && (e.value.scrollLeft = d - m, g = !0), o.right - r.value.x < i && (e.value.scrollLeft = d + m, g = !0), l.value = g, g && (t = requestAnimationFrame(b));
  }, y = () => {
    t && (cancelAnimationFrame(t), t = null), o = null, v = 0, d = 0, s = null, l.value = !1;
  };
  return x(r, (h) => {
    h ? (t && cancelAnimationFrame(t), s = null, b(performance.now())) : y();
  }), x(
    () => a,
    (h) => {
      h && y();
    }
  ), {
    isScrolling: l
  };
};
function E(e, r, u = {}) {
  const { immediate: i = !0 } = u;
  let n = null;
  const a = () => {
    n && (n.disconnect(), n = null);
  }, l = () => {
    if (e.value && (a(), n = new ResizeObserver(([t]) => {
      t && r(t);
    }), n.observe(e.value), i)) {
      const t = e.value.getBoundingClientRect();
      r({
        contentRect: t,
        target: e.value,
        borderBoxSize: [],
        contentBoxSize: [],
        devicePixelContentBoxSize: []
      });
    }
  };
  return x(
    () => e.value,
    (t) => {
      t ? l() : a();
    },
    { immediate: !0 }
  ), R(a), a;
}
function D(e, r = { width: 0, height: 0 }) {
  const u = S(r.width), i = S(r.height);
  return E(
    e,
    (n) => {
      u.value = n.contentRect.width, i.value = n.contentRect.height;
    },
    { immediate: !0 }
  ), {
    width: u,
    height: i
  };
}
export {
  I as useAutoScroll,
  q as useBounding,
  D as useElementSize,
  C as useGeometry,
  E as useSizeObserver
};