fluid-dnd
Version:
An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte
1,140 lines (1,139 loc) • 32.1 kB
JavaScript
var Ne = Object.defineProperty;
var $e = (t, e, n) => e in t ? Ne(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
var X = (t, e, n) => $e(t, typeof e != "symbol" ? e + "" : e, n);
const Y = "horizontal", q = "vertical", H = "draggable", Vt = "droppable", Mt = "handler-class", Lt = "dragging", Yt = "dragging-handler-class", Xt = "dropping", ce = "grabbing", Ge = "grab", Kn = "disable-transition", K = (t, e) => t.classList.contains(e), dt = (t, e, n = !1) => {
t.classList.toggle(e, n);
}, rt = (t, e) => {
t.classList.add(e);
}, Ut = (t, e) => {
t.classList.remove(e);
}, Ve = (t, e) => Et(e).every((n) => K(t, n)), at = (t) => `.${Et(t).join(".")}`, Ye = (t, e) => {
const n = Et(e);
t.classList.add(...n);
}, Et = (t) => ((t == null ? void 0 : t.split(" ")) ?? []).filter((e) => e), Xe = () => {
const { scrollX: t, scrollY: e } = window;
return { scrollX: t, scrollY: e };
}, qt = (t) => !t || t.trim().length == 0 || t == "normal" ? 0 : parseFloat(t), We = (t) => t ? parseInt(t) : -1, _e = (t) => {
const e = getComputedStyle(t), n = new DOMMatrixReadOnly(e.transform);
return {
x: n.m41,
y: n.m42
};
}, ie = (t, e) => t.x1 > e.x1 ? ie(e, t) : t.x2 < e.x1 ? 0 : t.x2 >= e.x2 ? t.x2 - t.x1 : t.x2 - e.x1, St = (t, e) => !He(t, e), He = (t, e) => {
const { intersectionX: n, intersectionY: s, rect1: o, rect2: r } = ae(t, e);
return s >= Math.min(o.height, r.height) / 2 && n >= Math.min(o.width, r.width) / 2;
}, qe = (t, e) => !ze(t, e), ze = (t, e) => {
const { intersectionX: n, intersectionY: s } = ae(t, e);
return s >= 0 && n >= 0;
}, ae = (t, e) => {
const n = w(t), s = w(e), o = Jt(n, s, q), r = Jt(n, s, Y);
return {
rect1: n,
rect2: s,
intersectionX: r,
intersectionY: o
};
}, Jt = (t, e, n) => {
const { before: s, distance: o } = F(n);
return ie(
{
x1: t[s],
x2: t[s] + t[o]
},
{
x1: e[s],
x2: e[s] + e[o]
}
);
}, Tt = (t, e) => t ? qt(getComputedStyle(t)[e]) : 0, Kt = (t) => {
const { scrollLeft: e, scrollTop: n } = t;
return { scrollLeft: e, scrollTop: n };
}, w = (t) => t.getBoundingClientRect(), z = (t, e) => {
const { distance: n } = F(t);
return [e[n], n];
}, Pt = (t, e) => {
const { axis: n } = F(t);
return e[n];
}, lt = (t, e) => {
const { borderBeforeWidth: n } = F(t);
return Tt(e, n);
}, Ot = (t, e) => {
const { beforeMargin: n } = F(t);
return Tt(e, n);
}, le = (t, e) => {
const { beforeMargin: n } = F(t);
return Tt(e, n);
}, Dt = (t, e) => {
const { afterMargin: n } = F(t);
return Tt(e, n);
}, j = (t, e) => {
const { before: n } = F(t);
return e[n];
}, vt = (t, e) => {
const { scrollElement: n } = F(t);
return [e[n], n];
}, ct = (t, e) => {
const { scroll: n } = F(t);
return e[n];
}, je = (t, e) => {
const { inner: n } = F(t);
return e[n];
}, zt = (t, e) => {
const { page: n } = F(t);
return e[n];
}, ue = (t, e) => {
const { offset: n } = F(t);
return e[n];
}, F = (t) => {
const e = t == Y;
return {
beforeMargin: e ? "marginLeft" : "marginTop",
afterMargin: e ? "marginRight" : "marginBottom",
borderBeforeWidth: e ? "borderLeftWidth" : "borderTopWidth",
before: e ? "left" : "top",
gap: e ? "columnGap" : "rowGap",
distance: e ? "width" : "height",
axis: e ? "x" : "y",
offset: e ? "offsetX" : "offsetY",
scroll: e ? "scrollX" : "scrollY",
scrollElement: e ? "scrollLeft" : "scrollTop",
page: e ? "pageX" : "pageY",
inner: e ? "innerWidth" : "innerHeight",
scrollDistance: e ? "scrollWidth" : "scrollHeight",
clientDistance: e ? "clientWidth" : "clientHeight",
paddingBefore: e ? "paddingLeft" : "paddingTop",
getRect: w
};
}, Nt = (t, e) => ke(t, e), Qn = (t) => [...t.children].filter((n) => K(n, H)), ke = (t, e) => {
const n = [...e.children].filter((o) => K(o, H) && !o.isEqualNode(t)).toReversed(), s = [...e.children].findLastIndex(
(o) => o.isEqualNode(t)
);
return [n, s, e];
}, Ze = (t) => {
let e = t.parentElement;
for (; e; ) {
const n = window.getComputedStyle(e);
if (n.translate !== "none" || n.willChange === "transform")
return e;
e = e.parentElement;
}
return null;
}, ge = (t, e) => {
const n = Ze(t);
return n ? j(e, w(n)) + lt(e, n) : 0;
}, P = (t, e) => t == null ? void 0 : t.isSameNode(e), Ue = (t) => t && getComputedStyle(t).transform !== "none", fe = "startDrag", wt = "drag", pe = "startDrop", st = "temp-child", he = "cubic-bezier(0.2, 0, 0, 1)", Bt = { height: 0, width: 0 }, mt = (t) => window.TouchEvent && t instanceof TouchEvent, Q = (t) => t instanceof HTMLElement, de = (t) => t instanceof MouseEvent, Je = ["onmouseup", "onmousedown", "onmousemove"], Ke = (t, e) => {
t.style.height = `${e.height}px`, t.style.width = `${e.width}px`;
}, it = (t, e = Bt) => {
!t || !Q(t) || (e.width == 0 && e.height == 0 ? t.style.transform = "" : t.style.transform = `translate(${e.width}px,${e.height}px)`);
}, Qe = (t, e, n, s) => {
t[e] = (o) => {
if (o.defaultPrevented)
return;
s && s(o);
const r = Wt(o);
n(r);
};
}, $t = (t, e, n, s) => {
n && (tn(e) ? t[e] = n : Qe(t, e, n, s));
}, tn = (t) => Je.includes(t), en = (t) => {
const { target: e } = t;
return {
clientX: 0,
clientY: 0,
pageX: 0,
pageY: 0,
screenX: 0,
screenY: 0,
target: e,
offsetX: 0,
offsetY: 0
};
}, nn = (t, e) => {
const n = (s, o) => on(e, window, o, s);
if (de(t)) {
const { offsetX: s, offsetY: o } = t;
return [s, o];
} else {
const s = t.target;
return [
n(s, Y),
n(s, q)
];
}
}, Wt = (t) => {
const e = sn(t);
if (!e)
return en(t);
const [n, s] = nn(t, e), { clientX: o, clientY: r, pageX: i, pageY: a, screenX: f, screenY: g, target: d } = e;
return {
clientX: o,
clientY: r,
pageX: i,
pageY: a,
screenX: f,
screenY: g,
target: d,
offsetX: n,
offsetY: s
};
}, sn = (t) => {
if (mt(t))
return t.touches[0] ?? t.changedTouches[0];
if (de(t))
return t;
}, on = (t, e, n, s) => {
const o = w(s);
return zt(n, t) - ct(n, e) - j(n, o) - lt(n, s);
}, Rt = (t, e, n = "ease-out", s = "transform") => {
Q(t) && (t.style.transitionDuration = `${e}ms`, t.style.transitionTimingFunction = `${n}`, t.style.transitionProperty = `${s}`);
}, me = (t, e, n) => {
!t || !Q(t) || (t[e] = () => {
n();
});
}, rn = (t) => {
var e = t.querySelector("style");
if (!e) {
var n = document.createElement("style");
return t.appendChild(n), n;
}
return e;
}, cn = (t, e) => {
const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [s] = e.match(n) || [];
for (const o of t.cssRules) {
const [r] = o.cssText.match(n) || [];
if (s === r)
return !0;
}
return !1;
}, an = (t, e) => {
e.forEach((n) => {
ln(t, n);
});
}, ln = (t, e) => {
var s;
var n = rn(t);
n.sheet && !cn(n.sheet, e) && ((s = n.sheet) == null || s.insertRule(e, n.sheet.cssRules.length));
}, Se = (t, e = {}) => {
for (const n of Object.keys(e)) {
const s = e[n];
s != null && un(t, `--${n}`, s);
}
}, un = (t, e, n) => t && t.style.setProperty(e, n), _t = (t) => {
Q(t) && (t.style.transition = "", t.style.transform = "");
}, gn = (t, e, n) => {
n != 0 && (e === "vertical" ? t.scrollBy(0, n) : t.scrollBy(n, 0));
}, fn = (t) => {
let e = 0.5;
const n = 0.03, s = (i, a, f, g) => {
const [d] = z(i, w(t)), h = w(a), x = j(i, f) - j(i, h) + Pt(i, g), [R] = z(i, h), b = R - d, C = x / b, v = d / b, A = 0.25, E = 0.2, M = 0.8;
let I = 0;
const W = qe(t, a);
!W && C < E && C > -v ? I = o(C < 0 ? 0 : C, E) : !W && C > M && C < 1 + v && (I = r(C, M));
const $ = A * d * I;
e = Math.sign($) * Math.min(Math.abs($), Math.abs(e) + n), gn(a, i, e);
}, o = (i, a) => Math.pow(i / a, 1 / 3) - 1, r = (i, a) => Math.pow(1 / (1 - a) * (i - a), 3);
return [s];
}, pn = (t, e) => {
let n = { offsetX: 0, offsetY: 0 }, s = { top: 0, left: 0 }, o = { x: 0, y: 0 };
const [r] = fn(t), i = (h) => {
t.style.transform = `translate( ${h.x}px, ${h.y}px)`;
}, a = (h) => {
t.style.top = `${h.top}px`, t.style.left = `${h.left}px`;
}, f = (h, x, R, b) => {
const C = (E) => {
const M = zt(E, R), I = ct(E, window), W = je(E, window), [$] = z(E, w(h)), k = lt(E, h), U = Ot(E, h), Z = M - ue(E, n), tt = ge(h, E);
if (Z >= I - $ / 2 && Z <= I + W) {
const u = De(E, x), p = Z - j(E, s) - k - U - I - tt - u;
return v(E), p;
}
return Pt(E, o);
}, v = (E) => {
h && K(h, Lt) && E === b && r(b, x, s, o);
}, A = (E) => {
const { axis: M } = F(E);
o[M] = C(E), i(g());
};
A(Y), A(q);
}, g = () => {
let h = o;
for (const x of e)
h = x(h, t);
return h;
};
return [f, (h, x) => {
const [R, b] = Sn(h, x, t);
s = R, a(s), n = b;
}];
}, At = (t, e, n) => j(t, w(e)) - j(t, w(n)) - lt(t, n), hn = (t, e) => {
let { offsetX: n, offsetY: s, target: o } = t, r = dn(o, e);
const i = o;
return i && r && !P(i, r) && (n += At(Y, i, r), s += At(q, i, r)), r && e != o && (n += At(Y, r, e), s += At(q, r, e)), { offsetX: n, offsetY: s };
}, dn = (t, e) => {
const n = t == null ? void 0 : t.closest(`.${Mt}`);
return n && P(e, n) ? t : n;
}, Qt = (t, e, n, s) => {
const o = ge(n, t), r = n.parentElement, i = De(t, r);
return zt(t, e) - ue(t, s) - Ot(t, n) - lt(t, n) - ct(t, window) - o - i;
}, De = (t, e) => e && mn(e) ? j(t, w(e)) : 0, mn = (t) => {
let e = t;
for (; e; ) {
if (Ue(e))
return !0;
e = e.parentElement;
}
return !1;
}, Sn = (t, e, n) => {
const s = hn(t, n);
return [
{
top: Qt(q, t, e, s),
left: Qt(Y, t, e, s)
},
s
];
}, _ = class _ {
static addConfig(e, n) {
const s = _.configs.filter(
(r) => !P(r.droppable, e)
), o = Kt(e);
s.push({
droppable: e,
config: n,
scroll: o
}), _.configs = s;
}
static updateScrolls(e, n) {
for (const s of _.configs) {
const { droppable: o } = s;
(n && Ve(o, n) || P(e, o)) && (s.scroll = Kt(o));
}
}
static getConfig(e) {
return _.configs.find(
({ droppable: s }) => P(e, s)
);
}
};
X(_, "configs", []), X(_, "removeObsoleteConfigs", () => {
const e = _.configs.filter(
({ droppable: n }) => document.contains(n)
);
_.configs = e;
});
let ot = _;
const Ht = (t) => t.length == 0 ? 0 : qt(t.replace("px", "")), Dn = (t, e) => {
const n = getComputedStyle(t)[e];
if (n.match("%")) {
const o = qt(n.replace("%", "")), { width: r } = w(t);
return r * (o / 100);
}
return Ht(n);
}, vn = (t, e) => {
if (!(t instanceof Element)) return [0, !1];
const n = Dn(t, e), s = getComputedStyle(t).display, o = n > 0 || s === "flex";
return [n, o];
}, En = (t) => {
const { top: e, left: n } = getComputedStyle(t);
return [Ht(e), Ht(n)];
}, jt = (t, e) => {
const { gap: n } = F(e);
return vn(t, n);
}, Tn = (t, e) => {
const [n, s] = jt(t, e);
return s ? n : 0;
}, ve = (t, e, n, s = () => !0) => {
const o = new MutationObserver((r) => {
if (r = r.filter(s), r.length > 0) {
const i = r[0];
t(o, i);
}
});
return o.observe(e, n), o;
}, te = (t) => Q(t) ? t.classList.contains(st) : !1;
function xt(t, e, n, s, o = t.previousElementSibling, r = t.nextElementSibling) {
let { height: i, width: a } = Cn(
n,
t,
o,
r
);
return St(t, s) && e == wt && (i = 0, a = 0), { height: i, width: a };
}
const Cn = (t, e, n, s) => {
const o = Dt(t, e), r = Ot(t, e), i = Ot(t, s), [a, f] = jt(e.parentElement, t), [g] = z(t, w(e));
if (f)
return ee(g, r, o, a, 0, t);
const [d, h, x] = yn(
n,
i,
o,
r,
t
);
return ee(g, h, d, 0, x, t);
}, yn = (t, e, n, s, o) => {
const r = Math.max(e, n);
let i = s, a = e;
if (t) {
const f = Dt(o, t);
i = Math.max(f, s), a = Math.max(a, f);
}
return [r, i, a];
}, ee = (t, e, n, s, o, r) => bn(r, t + e + n + s - o), bn = (t, e) => t == Y ? { width: e, height: 0 } : { width: 0, height: e }, An = "startDrag", Ee = "cubic-bezier(0.2, 0, 0, 1)", Te = 50, Ce = "width, min-width, height", xn = (t, e, n) => {
let s = xt(e, An, n, t);
const o = Tn(t, n), [, r] = z(n, s);
s[r] -= o;
const [i, a] = Mn(n, e);
return s[a] = i, s;
}, Mn = (t, e) => {
const n = t == Y ? q : Y;
return z(n, w(e));
}, ut = (t, e = Bt) => {
Ke(t, e), t.style.minWidth = `${e.width}px`;
}, On = (t, e, n) => (s) => {
e.contains(t) && (ut(t, n), s.disconnect());
}, ye = (t, e) => {
const { scrollDistance: n, clientDistance: s } = F(e);
return t[n] - t[s];
}, wn = (t, e, n) => {
const [s] = vt(t, n);
return s / ye(e, t);
}, Bn = (t, e, n, s) => {
if (!s)
return;
const { direction: o } = e, r = wn(o, t, n) > 0.99, [, i] = vt(o, t);
r && (t[i] = ye(t, o));
}, be = (t, e, n, s) => {
const { droppable: o, config: r, scroll: i } = n, { direction: a, animationDuration: f } = r;
if (Bn(o, r, i, e), o.querySelector(`.${st}`) || !t)
return;
var g = t.tagName == "LI" ? "DIV" : t.tagName, d = document.createElement(g);
rt(d, st), ut(d);
const h = xn(o, t, a);
return Rt(
d,
f,
Ee,
Ce
), [d, h, o];
}, ne = (t, e, n, s, o) => {
const r = be(
t,
n,
s
);
if (!r)
return;
const [i, a, f] = r;
P(e, f) && ut(i, a), ve(On(i, f, a), f, {
childList: !0,
subtree: !0
}), f.appendChild(i);
}, ts = (t, e, n) => {
const s = be(t, e, n);
if (!s)
return;
const [o, r, i] = s;
i.appendChild(o), Ln(o, r);
}, Ln = (t, e) => requestAnimationFrame(() => {
ut(t, e), requestAnimationFrame(() => {
Rt(t, 0, Ee, Ce);
});
}), Pn = (t, e, n, s, o = !0) => {
if (n) {
var r = document.querySelectorAll(
`${at(n)} > .${st}`
);
r.forEach((i) => {
const a = i.parentElement;
if (P(e, a) || !o && P(t, a))
return;
ut(i), setTimeout(() => {
var g;
(g = i.parentNode) == null || g.removeChild(i);
}, s + Te);
});
}
}, Gt = (t, e, n = !1) => {
var s = t.querySelectorAll(`.${st}`);
s.forEach((o) => {
const r = o;
n ? (ut(r), setTimeout(() => {
t.contains(r) && t.removeChild(r);
}, e + Te)) : t.removeChild(o);
});
}, Rn = (t, e) => {
const { config: n, droppable: s } = t, { onInsertEvent: o, onDragEnd: r } = n;
return {
...n,
onDragEnd: (f) => {
const { index: g, value: d } = f;
r({ index: g, value: e(d, s) });
},
onInsertEvent: (f, g) => o(f, e(g, s), !0)
};
};
class Fn {
constructor(e, n, s, o, r, i) {
X(this, "initial");
X(this, "current");
X(this, "parent");
X(this, "draggableElement");
X(this, "groupClass");
X(this, "dragEvent");
X(this, "changeDroppable");
X(this, "mapFrom");
this.parent = s, this.draggableElement = e, this.groupClass = n, this.dragEvent = o, this.mapFrom = i, this.initial = ot.getConfig(s), this.changeDroppable = r;
}
getDraggableAncestor(e, n, s) {
return document.elementsFromPoint(e, n).filter((o) => !P(s, o));
}
getElementBelow(e, n) {
return ((o) => {
const [r] = o.getDraggableAncestor(
n.clientX,
n.clientY,
e
);
return r;
})(this);
}
getCurrent(e, n) {
const s = this.getElementBelow(e, n);
return !this.groupClass || !s ? void 0 : s.closest(at(this.groupClass));
}
isOutsideOfAllDroppables(e) {
return (this.groupClass ? Array.from(document.querySelectorAll(at(this.groupClass))) : [this.parent]).every((s) => St(e, s));
}
isNotInsideAnotherDroppable(e, n) {
return !St(e, n) || this.isOutsideOfAllDroppables(e);
}
onScrollEvent() {
this.dragEvent();
}
setOnScroll(e) {
me(e, "onscroll", () => {
this.onScrollEvent();
});
}
getConfigFrom(e) {
const n = ot.getConfig(e);
if (n)
return P(this.parent, e) ? n : {
...n,
config: Rn(n, this.mapFrom)
};
}
droppableIfInsideCurrent(e, n) {
return e && !P(n, e) && n.contains(e);
}
getCurrentConfig(e) {
var o, r;
const n = this.draggableElement, s = this.getCurrent(n, e);
return this.current && this.isNotInsideAnotherDroppable(n, (o = this.current) == null ? void 0 : o.droppable) && !this.droppableIfInsideCurrent(s, (r = this.current) == null ? void 0 : r.droppable) ? this.current : s ? (Q(s) && !s.onscroll && this.setOnScroll(s), this.getConfigFrom(s)) : this.getConfigFrom(this.parent);
}
updateConfig(e) {
const n = this.current;
this.current = this.getCurrentConfig(e), this.changeDroppable(this.current, n);
}
isOutside(e) {
const n = this.draggableElement;
return !this.getCurrent(n, e);
}
}
const se = (t, e) => {
const { paddingBefore: n } = F(t), s = lt(t, e), o = Tt(e, n), r = Pt(t, w(e));
return s + o + r;
}, In = (t, e) => {
const [n, s] = En(e), o = se(q, t);
return [se(Y, t) - s, o - n];
};
function Nn(t, e, n, s, o, r, i, a, f) {
let g = 0, d = 0;
const h = !!(n < 0 && f);
if (n === s && !h)
return oe(
{ height: g, width: d },
t,
o,
i,
h
);
const [x, R, b, C] = Vn(
e,
n,
s,
f
);
if (h) {
const [p, m] = In(a, f);
g += m, d += p;
}
const [v, A] = jt(a, t), [E, M, I] = Xn(
x,
R == null ? void 0 : R.previousElementSibling,
C,
A,
h,
t
), [W, $, k] = Yn(
b,
v,
A,
t
), U = Gn(
$,
W,
k,
M,
E,
v
), [Z] = vt(t, a), tt = h ? Z : $n(a, r, t), u = (C ? U - I : I - U) - tt;
return t === q ? g += u : t === Y && (d += u), oe(
{ height: g, width: d },
t,
o,
i,
h
);
}
const $n = (t, e, n) => {
const [s] = vt(n, t), [o] = vt(n, e);
return s - o;
}, Gn = (t, e, n, s, o, r) => {
const i = Math.max(e, o);
return Math.max(n, s) + t + i + r;
}, Vn = (t, e, n, s) => {
const o = e < n, [r, i] = [e, n].toSorted((d, h) => d - h), a = t[e] ?? s, f = t[n];
let g = o ? t.slice(r + 1, i + 1) : t.slice(r, i);
return r < 0 && s && (g = t.slice(r + 1, i)), [a, f, g, o];
}, Yn = (t, e, n, s) => {
if (t.length == 0)
return [0, 0, 0];
const o = Dt(s, t[0]);
let r = 0, i = -o;
for (const [a, f] of t.entries()) {
const [g] = z(s, w(f)), d = le(s, f);
n && (r += d), n && a > 0 ? r += e : r = Math.max(r, d), i += r + g, r = Dt(s, f);
}
return [o, i, r];
}, oe = (t, e, n, s, o) => {
const r = ct(e, window), i = ct(e, n), a = o ? 0 : i - 2 * r + ct(e, s), [, f] = z(e, t);
return t[f] += a, t;
}, Xn = (t, e, n, s, o, r) => {
const i = n ? t.previousElementSibling : e;
return Wn(
i,
t,
s,
o,
r
);
}, Wn = (t, e, n, s, o) => {
if (n)
return [0, 0, 0];
const r = Dt(o, s ? null : t), i = le(o, e);
let a = Math.max(r, i);
return [r, i, a];
}, _n = (t, e, n) => {
const { handlerSelector: s, animationDuration: o } = t, r = (g) => {
n(), i(g, !1), _t(g), g.style.top = "", g.style.left = "", Se(g, {
fixedHeight: "",
fixedWidth: ""
});
}, i = (g, d) => {
dt(g, Lt, d), a(d, g), e.toggleGrabClass(!d);
}, a = (g, d) => {
const h = d.querySelector(s);
dt(document.body, ce, g), dt(h || d, Yt, g);
};
return [r, i, (g, d) => {
Rt(g, o, he), it(g, d);
}];
}, Hn = 50;
function qn(t, e, n, s, o, r) {
let i = e;
const { onRemoveAtEvent: a, animationDuration: f, draggingClass: g } = t, [d, h, x] = _n(t, o, r), R = (u, p, m, y) => {
const O = xt(u, p, y.direction, m);
C(u, p, O, m, y);
}, b = (u, p, m, y, O) => {
if (!m)
return;
const { droppable: T, scroll: B, config: L } = m, S = xt(u, p, L.direction, T);
E(
u,
p,
S,
y,
T,
B,
L,
O
);
}, C = (u, p, m, y, O) => {
const [T] = Nt(u, y), B = St(u, y), { direction: L, onDragOver: S } = O;
S({
element: u,
index: e,
targetIndex: i,
value: t.onGetValue(e),
droppable: y
}), T.length == 0 && A(m, 1, L, T);
for (const [G, N] of T.entries()) {
if (!K(N, H))
continue;
const J = v(L, u, N, m);
if (!B && J)
m = J;
else if (!B)
continue;
const gt = T.length - G;
A(m, gt, L, T), p === fe ? it(N, m) : p === wt && x(N, m);
}
}, v = (u, p, m, y) => {
const O = w(p), T = w(m), B = j(u, O), L = j(u, T), [S] = z(u, T), G = L + S / 2, N = Pt(u, _e(m)), J = G - N;
return B > J ? Bt : y;
}, A = (u, p, m, y) => {
const O = y.filter((B) => K(B, H)).length, [T] = z(m, u);
T == 0 ? i = Math.max(i, p) : i = Math.min(i, p - 1), i = Math.min(i, O);
}, E = (u, p, m, y, O, T, B, L) => {
const [S, G] = Nt(u, O), N = S.toReversed(), J = G === -1 ? N.length : G;
N.splice(J, 0, u);
const [gt, Ct, ft] = M(
u,
G,
N,
O
);
m = xt(
u,
p,
B.direction,
n,
gt,
Ct
);
const Ft = Xe(), yt = Nn(
B.direction,
N,
G,
ft,
Ft,
T,
y,
O,
u
);
S.length == 0 && I(void 0, m, u, yt);
for (const [It, pt] of S.toReversed().entries()) {
let bt = m;
ft - 1 >= It && (bt = Bt), p === pe && !K(pt, st) && I(pt, bt, u, yt);
}
W(ft, u, B, O, L);
}, M = (u, p, m, y) => {
const T = St(u, y) ? p : i, B = () => p < T ? [T, T + 1] : p > T ? [T - 1, T] : [T - 1, T + 1], [L, S] = B(), G = m[L] ?? null, N = m[S] ?? null;
return [G, N, T];
}, I = (u, p, m, y) => {
it(u, p), it(m, y);
}, W = (u, p, m, y, O) => {
const { onInsertEvent: T, onDragEnd: B } = m;
rt(p, Xt), U(p, n, y, () => {
if (Ut(p, Xt), O != null) {
const L = a(O, !0);
L != null && (T(u, L, !0), B({ value: L, index: u })), k(p), $();
}
});
}, $ = () => {
if (s) {
var u = document.querySelectorAll(
`${at(s)} > .${H}`
);
for (const p of u)
_t(p);
}
}, k = (u) => {
setTimeout(() => {
Ut(u, g);
}, Hn);
}, U = (u, p, m, y) => {
setTimeout(() => {
y && y(), Z(p, m), tt(m), d(u), et(u, p), et(u, m);
}, f);
}, Z = (u, p) => {
P(u, p) ? Gt(u, f) : (Gt(u, f, !0), Gt(p, f));
}, tt = (u) => {
if (!P(n, u)) {
var [p] = n.querySelectorAll(`.${st}`);
p && Q(p) && (p.style.height = "0px", p.style.width = "0px");
}
}, et = (u, p) => {
const [m] = Nt(u, p);
for (const y of [...m, u])
_t(y);
};
return [R, b, h];
}
const re = "onmousedown";
function zn(t, e, n, s, o) {
const {
handlerSelector: r,
isDraggable: i,
droppableGroup: a,
animationDuration: f,
draggingClass: g,
droppableClass: d,
onDragStart: h,
delayBeforeTouchMoveEvent: x,
coordinateTransform: R
} = n, b = Et(a).map((c) => `droppable-group-${c}`).join(" ");
let C = 0, v = {
scrollX: 0,
scrollY: 0
}, A = { pageX: 0, pageY: 0 }, E, M;
const [I, W] = pn(
t,
R
), $ = () => {
C = 0;
}, [k, U, Z] = qn(
n,
e,
s,
b,
o,
$
), tt = () => {
rt(t, H);
}, et = (c) => {
rt(c, Mt), o.addSubscriber(c);
}, u = () => {
if (i(t)) {
const c = t.querySelector(r);
et(c || t);
}
}, p = () => {
u(), tt();
}, m = (c) => {
const l = c == null ? void 0 : c.querySelector(`.${Mt}`), D = l == null ? void 0 : l.parentElement;
return l && D && K(D, Vt) && !P(s, D) ? null : l;
}, y = (c) => {
const l = m(c) ?? c;
l && i(c) && ($t(l, re, pt("mousemove", "mouseup")), $t(
l,
"ontouchstart",
pt("touchmove", "touchend"),
(D) => {
const V = D.touches[0];
M = {
x: V.clientX,
y: V.clientY
};
}
), O(l)), P(c, l) || $t(c, re, bt), rt(s, Vt);
}, O = (c) => {
const l = c.querySelectorAll("img");
Array.from(l).forEach((D) => {
D.onmousedown = () => !1;
});
}, T = () => {
if (A.pageX == 0 && A.pageY == 0 || !S.current)
return;
const { droppable: c, config: l } = S.current;
I(t, c, A, l.direction), k(t, wt, c, l);
}, B = (c) => {
const l = c.querySelectorAll(`.${H}`);
for (const D of l)
it(D);
}, L = (c, l) => {
l && C == 2 && !P(c == null ? void 0 : c.droppable, l.droppable) && (k(
t,
wt,
l.droppable,
l.config
), B(l.droppable));
}, S = new Fn(
t,
b,
s,
T,
L,
n.mapFrom
), G = (c) => {
if (!S.current)
return;
const l = b ? Array.from(document.querySelectorAll(at(b))) : [s];
for (const D of l)
D.classList.toggle(
d,
!c && P(D, S.current.droppable)
);
}, N = (c, l = !1) => {
S.updateConfig(c);
const D = S.isOutside(c);
G(D), C === 1 && !l ? Zt(c) : C === 2 && (J(D), Oe(c));
}, J = (c = !0) => {
if (!S.current)
return;
const { droppable: l } = S.current;
Pn(l, s, b, f, c), !c && ne(
t,
s,
C == 1,
S.current
);
}, gt = (c) => {
if (mt(c) && M && C == 1) {
const l = c.touches[0], D = Math.abs(l.clientX - M.x), V = Math.abs(l.clientY - M.y);
if (Math.abs(D) > 5 && Math.abs(V) > 5)
return clearTimeout(E), !1;
}
return !0;
}, Ct = (c) => {
clearTimeout(E);
const l = Wt(c);
if (mt(c) && c.cancelable && C == 2 && c.preventDefault(), mt(c) && !c.cancelable || !gt(c)) {
kt("touchmove", c);
return;
}
N(l, mt(c));
}, ft = (c, l) => {
c == "touchmove" ? E = setTimeout(() => {
l();
}, x) : l();
}, Ft = (c, l) => {
const { clientX: D, clientY: V } = c, nt = document.elementFromPoint(D, V), ht = nt == null ? void 0 : nt.closest(`.${H}`);
return ht && P(l, ht);
}, yt = (c) => {
const l = n.onGetValue(e);
return { index: e, element: c, value: l };
}, It = (c) => {
S.updateConfig(c), G(S.isOutside(c)), Zt(c);
}, pt = (c, l) => (D) => {
if (!Ft(D, t))
return;
ot.updateScrolls(s, b);
const { scrollX: V, scrollY: nt } = window;
if (v = { scrollX: V, scrollY: nt }, C === 0) {
C = 1;
const ht = yt(t);
ht && h(ht), ft(c, () => {
c == "touchmove" && It(D);
}), document.addEventListener(c, Ct, {
passive: !1
}), we(s), document.addEventListener(l, Ae(c), {
once: !0
});
}
}, bt = (c) => S.updateConfig(c), Ae = (c) => (l) => {
kt(c, l);
}, kt = (c, l) => {
G(!0);
const D = Wt(l);
Le(S.isOutside(D)), clearTimeout(E), document.removeEventListener(c, Ct), S.updateConfig(D);
const V = S.getCurrentConfig(D);
if (V) {
const { droppable: nt } = V;
xe(nt);
}
s.onscroll = null, $();
}, xe = (c) => {
if (c.onscroll = null, !b)
return;
const l = Array.from(
document.querySelectorAll(at(b))
);
for (const D of l)
Q(D) && (D.onscroll = null);
}, Zt = (c) => {
S.current && ne(
t,
s,
C == 1,
S.current
), Me(), S.current && k(
t,
fe,
S.current.droppable,
S.current.config
), Re(t), W(c, t);
}, Me = () => {
C = 2;
}, Oe = (c) => {
const { pageX: l, pageY: D } = c;
A = { pageX: l, pageY: D }, T();
}, we = (c) => me(c, "onscroll", Be), Be = () => T(), Le = (c) => {
if (C !== 2 && C !== 1) {
$();
return;
}
C = 3, Pe(t), t.classList.contains(Lt) && U(
t,
pe,
c ? S.initial : S.current,
v,
e
);
}, Pe = (c) => {
Rt(c, f, he), it(c);
}, Re = (c) => {
const { height: l, width: D } = w(c);
Se(c, {
fixedHeight: `${l}px`,
fixedWidth: `${D}px`
}), Z(c, !0), dt(c, g, !0), c.style.transition = "";
}, Fe = (c) => {
import("./remove-VRZGlztq.js").then((l) => {
const [D] = l.default(n, s, o, $);
S.initial && D(e, c, t, S.initial);
});
}, Ie = (c, l) => {
(c === e || c === n.onGetLegth() && e === c - 1) && import("./insert-C4OmG7nn.js").then((D) => {
const [V] = D.default(
n,
s,
o,
$
);
S.initial && V(
c,
t,
s,
l,
S.initial
);
});
};
return p(), y(t), [Fe, Ie];
}
const jn = (t, e) => {
t && Ye(e, t);
}, kn = () => {
an(document.body, [
`.${H}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,
`.${Mt}{pointer-events:auto!important;}`,
`.${Ge}{cursor:grab;}`,
".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",
".droppable{box-sizing:border-box!important;}",
`.${Lt}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,
`.${Yt}{pointer-events:none!important;}`,
`.${Xt}{pointer-events:none!important;}`,
`.${ce}{cursor:grabbing;}`,
".disable-transition{transition:none!important;}"
]);
};
function Zn(t, e, n, s = "index") {
const o = s;
let r = [], i = [];
const { droppableGroup: a } = t;
if (!n)
return [r, i];
const f = Et(a).map((g) => `droppable-group-${g}`).join(" ");
kn(), jn(f, n);
for (const g of n.children) {
const d = g.getAttribute(o), h = We(d), x = g;
if (x && h >= 0) {
const [R, b] = zn(
x,
h,
t,
n,
e
);
r.push(R), i.push(b);
}
}
return [r, i];
}
const Un = (t, e) => {
const n = (a, f) => t.removeAtEvent(a, f), s = (a, f, g) => t.insertEvent(a, f, g), o = () => t.getLength(), r = (a) => t.getValue(a), i = (a) => a;
return {
direction: (e == null ? void 0 : e.direction) ?? q,
handlerSelector: (e == null ? void 0 : e.handlerSelector) ?? H,
draggingClass: (e == null ? void 0 : e.draggingClass) ?? "dragging",
droppableClass: (e == null ? void 0 : e.droppableClass) ?? "droppable-hover",
isDraggable: (e == null ? void 0 : e.isDraggable) ?? (() => !0),
onDragStart: (e == null ? void 0 : e.onDragStart) ?? (() => {
}),
onDragEnd: (e == null ? void 0 : e.onDragEnd) ?? (() => {
}),
onDragOver: (e == null ? void 0 : e.onDragOver) ?? (() => {
}),
droppableGroup: e == null ? void 0 : e.droppableGroup,
onRemoveAtEvent: n,
onInsertEvent: s,
onGetLegth: o,
onGetValue: r,
animationDuration: (e == null ? void 0 : e.animationDuration) ?? 200,
removingClass: (e == null ? void 0 : e.removingClass) ?? "removing",
insertingFromClass: (e == null ? void 0 : e.insertingFromClass) ?? "from-inserting",
delayBeforeRemove: (e == null ? void 0 : e.delayBeforeRemove) ?? 200,
delayBeforeInsert: (e == null ? void 0 : e.delayBeforeInsert) ?? 200,
mapFrom: (e == null ? void 0 : e.mapFrom) ?? i,
delayBeforeTouchMoveEvent: (e == null ? void 0 : e.delayBeforeTouchMoveEvent) ?? 150,
coordinateTransform: (e == null ? void 0 : e.coordinateTransform) ?? [(a) => a]
};
};
function es(t, e, n, s = "index") {
let o = [], r = [], i;
const a = Un(t, n), f = (v) => {
for (const A of o)
A(v);
}, g = (v, A) => {
if (a.onGetLegth() === 0)
t.insertToListEmpty(a, v, A);
else
for (const M of r)
M(v, A);
}, d = (v) => {
const [A, E] = Zn(
a,
e,
v,
s
);
o = A, r = E;
}, h = (v) => {
const A = Array.from(v.addedNodes ?? []).values().filter((M) => !te(M)).toArray(), E = Array.from(v.removedNodes ?? []).values().filter((M) => !te(M)).toArray();
return A.length > 0 || E.length > 0;
}, x = (v) => {
i = ve(
() => {
d(v);
},
v,
{ childList: !0 },
h
);
}, R = (v) => {
rt(v, Vt);
}, b = (v) => {
ot.addConfig(v, a);
};
return [f, g, (v) => {
if (v)
return R(v), b(v), x(v), d(v), ot.removeObsoleteConfigs(), i;
}];
}
export {
H as D,
Ge as G,
rt as a,
ne as b,
xt as c,
he as d,
Gt as e,
_t as f,
Nt as g,
Qn as h,
K as i,
ts as j,
Kn as k,
te as l,
it as m,
es as n,
ve as o,
Ut as r,
Rt as s,
dt as t,
_n as u
};