@dfosco/tiny-canvas 3.10.0 → 3.11.0-beta.1

package/dist/tiny-canvas.js

@@ -1,145 +1,145 @@
-import { jsx as nt } from "react/jsx-runtime";
-import xt, { useRef as F, useState as G, useEffect as rt, Children as Ct, useCallback as Tt } from "react";
+import { jsx as rt } from "react/jsx-runtime";
+import xt, { useRef as G, useState as J, useEffect as nt, Children as Ct, useCallback as It } from "react";
 var gt = { dragStart: !0 }, pt = { delay: 0, distance: 3 };
-function It(t, e = {}) {
-  let o, a, { bounds: s, axis: d = "both", gpuAcceleration: l = !0, legacyTranslate: f = !1, transform: v, applyUserSelectHack: x = !0, disabled: M = !1, ignoreMultitouch: N = !1, recomputeBounds: E = gt, grid: X, threshold: S = pt, position: b, cancel: D, handle: T, defaultClass: g = "neodrag", defaultClassDragging: i = "neodrag-dragging", defaultClassDragged: n = "neodrag-dragged", defaultPosition: w = { x: 0, y: 0 }, onDragStart: O, onDrag: I, onDragEnd: J } = e, Y = !1, R = !1, p = 0, C = !1, k = !1, $ = 0, _ = 0, B = 0, U = 0, ot = 0, at = 0, { x: z, y: V } = b ? { x: (b == null ? void 0 : b.x) ?? 0, y: (b == null ? void 0 : b.y) ?? 0 } : w;
+function Tt(t, e = {}) {
+  let r, a, { bounds: s, axis: d = "both", gpuAcceleration: i = !0, legacyTranslate: f = !1, transform: v, applyUserSelectHack: M = !0, disabled: A = !1, ignoreMultitouch: I = !1, recomputeBounds: D = gt, grid: R, threshold: b = pt, position: E, cancel: L, handle: X, defaultClass: c = "neodrag", defaultClassDragging: N = "neodrag-dragging", defaultClassDragged: O = "neodrag-dragged", defaultPosition: p = { x: 0, y: 0 }, onDragStart: o, onDrag: w, onDragEnd: H } = e, S = !1, T = !1, j = 0, $ = !1, g = !1, x = 0, Y = 0, B = 0, U = 0, ot = 0, at = 0, { x: z, y: V } = E ? { x: (E == null ? void 0 : E.x) ?? 0, y: (E == null ? void 0 : E.y) ?? 0 } : p;
   ut(z, V);
-  let P, H, j, st, it, vt = "", Nt = !!b;
-  E = { ...gt, ...E }, S = { ...pt, ...S ?? {} };
+  let P, k, F, st, it, vt = "", Nt = !!E;
+  D = { ...gt, ...D }, b = { ...pt, ...b ?? {} };
   let W = /* @__PURE__ */ new Set();
-  function bt(r) {
-    Y && !R && k && C && it && (R = !0, (function(c) {
-      lt("neodrag:start", O, c);
-    })(r), q.add(i), x && (vt = ct.userSelect, ct.userSelect = "none"));
+  function bt(n) {
+    S && !T && g && $ && it && (T = !0, (function(u) {
+      lt("neodrag:start", o, u);
+    })(n), _.add(N), M && (vt = ct.userSelect, ct.userSelect = "none"));
   }
-  const ct = document.body.style, q = t.classList;
-  function ut(r = $, c = _) {
+  const ct = document.body.style, _ = t.classList;
+  function ut(n = x, u = Y) {
     if (!v) {
       if (f) {
-        let h = `${+r}px, ${+c}px`;
-        return K(t, "transform", l ? `translate3d(${h}, 0)` : `translate(${h})`);
+        let y = `${+n}px, ${+u}px`;
+        return K(t, "transform", i ? `translate3d(${y}, 0)` : `translate(${y})`);
       }
-      return K(t, "translate", `${+r}px ${+c}px`);
+      return K(t, "translate", `${+n}px ${+u}px`);
     }
-    const m = v({ offsetX: r, offsetY: c, rootNode: t });
+    const m = v({ offsetX: n, offsetY: u, rootNode: t });
     mt(m) && K(t, "transform", m);
   }
-  function lt(r, c, m) {
-    const h = /* @__PURE__ */ (function(y) {
-      return { offsetX: $, offsetY: _, rootNode: t, currentNode: it, event: y };
+  function lt(n, u, m) {
+    const y = /* @__PURE__ */ (function(h) {
+      return { offsetX: x, offsetY: Y, rootNode: t, currentNode: it, event: h };
     })(m);
-    t.dispatchEvent(new CustomEvent(r, { detail: h })), c == null || c(h);
+    t.dispatchEvent(new CustomEvent(n, { detail: y })), u == null || u(y);
   }
   const Z = addEventListener, dt = new AbortController(), ft = { signal: dt.signal, capture: !1 };
   function Et() {
-    let r = t.offsetWidth / H.width;
-    return isNaN(r) && (r = 1), r;
+    let n = t.offsetWidth / k.width;
+    return isNaN(n) && (n = 1), n;
   }
-  return K(t, "touch-action", "none"), Z("pointerdown", ((r) => {
-    if (M || r.button === 2) return;
-    if (W.add(r.pointerId), N && W.size > 1) return r.preventDefault();
-    if (E.dragStart && (P = ht(s, t)), mt(T) && mt(D) && T === D) throw new Error("`handle` selector can't be same as `cancel` selector");
-    if (q.add(g), j = (function(u, A) {
-      if (!u) return [A];
-      if (yt(u)) return [u];
-      if (Array.isArray(u)) return u;
-      const L = A.querySelectorAll(u);
-      if (L === null) throw new Error("Selector passed for `handle` option should be child of the element on which the action is applied");
-      return Array.from(L.values());
-    })(T, t), st = (function(u, A) {
-      if (!u) return [];
-      if (yt(u)) return [u];
-      if (Array.isArray(u)) return u;
-      const L = A.querySelectorAll(u);
-      if (L === null) throw new Error("Selector passed for `cancel` option should be child of the element on which the action is applied");
-      return Array.from(L.values());
-    })(D, t), o = /(both|x)/.test(d), a = /(both|y)/.test(d), Dt(st, j)) throw new Error("Element being dragged can't be a child of the element on which `cancel` is applied");
-    const c = r.composedPath()[0];
-    if (!j.some(((u) => {
-      var A;
-      return u.contains(c) || ((A = u.shadowRoot) == null ? void 0 : A.contains(c));
-    })) || Dt(st, [c])) return;
-    it = j.length === 1 ? t : j.find(((u) => u.contains(c))), Y = !0, p = Date.now(), S.delay || (C = !0), H = t.getBoundingClientRect();
-    const { clientX: m, clientY: h } = r, y = Et();
-    o && (B = m - z / y), a && (U = h - V / y), P && (ot = m - H.left, at = h - H.top);
-  }), ft), Z("pointermove", ((r) => {
-    if (!Y || N && W.size > 1) return;
-    if (!R) {
-      if (C || Date.now() - p >= S.delay && (C = !0, bt(r)), !k) {
-        const y = r.clientX - B, u = r.clientY - U;
-        Math.sqrt(y ** 2 + u ** 2) >= S.distance && (k = !0, bt(r));
+  return K(t, "touch-action", "none"), Z("pointerdown", ((n) => {
+    if (A || n.button === 2) return;
+    if (W.add(n.pointerId), I && W.size > 1) return n.preventDefault();
+    if (D.dragStart && (P = yt(s, t)), mt(X) && mt(L) && X === L) throw new Error("`handle` selector can't be same as `cancel` selector");
+    if (_.add(c), F = (function(l, C) {
+      if (!l) return [C];
+      if (ht(l)) return [l];
+      if (Array.isArray(l)) return l;
+      const q = C.querySelectorAll(l);
+      if (q === null) throw new Error("Selector passed for `handle` option should be child of the element on which the action is applied");
+      return Array.from(q.values());
+    })(X, t), st = (function(l, C) {
+      if (!l) return [];
+      if (ht(l)) return [l];
+      if (Array.isArray(l)) return l;
+      const q = C.querySelectorAll(l);
+      if (q === null) throw new Error("Selector passed for `cancel` option should be child of the element on which the action is applied");
+      return Array.from(q.values());
+    })(L, t), r = /(both|x)/.test(d), a = /(both|y)/.test(d), Dt(st, F)) throw new Error("Element being dragged can't be a child of the element on which `cancel` is applied");
+    const u = n.composedPath()[0];
+    if (!F.some(((l) => {
+      var C;
+      return l.contains(u) || ((C = l.shadowRoot) == null ? void 0 : C.contains(u));
+    })) || Dt(st, [u])) return;
+    it = F.length === 1 ? t : F.find(((l) => l.contains(u))), S = !0, j = Date.now(), b.delay || ($ = !0), k = t.getBoundingClientRect();
+    const { clientX: m, clientY: y } = n, h = Et();
+    r && (B = m - z / h), a && (U = y - V / h), P && (ot = m - k.left, at = y - k.top);
+  }), ft), Z("pointermove", ((n) => {
+    if (!S || I && W.size > 1) return;
+    if (!T) {
+      if ($ || Date.now() - j >= b.delay && ($ = !0, bt(n)), !g) {
+        const h = n.clientX - B, l = n.clientY - U;
+        Math.sqrt(h ** 2 + l ** 2) >= b.distance && (g = !0, bt(n));
       }
-      if (!R) return;
+      if (!T) return;
     }
-    E.drag && (P = ht(s, t)), r.preventDefault(), H = t.getBoundingClientRect();
-    let c = r.clientX, m = r.clientY;
-    const h = Et();
+    D.drag && (P = yt(s, t)), n.preventDefault(), k = t.getBoundingClientRect();
+    let u = n.clientX, m = n.clientY;
+    const y = Et();
     if (P) {
-      const y = { left: P.left + ot, top: P.top + at, right: P.right + ot - H.width, bottom: P.bottom + at - H.height };
-      c = St(c, y.left, y.right), m = St(m, y.top, y.bottom);
+      const h = { left: P.left + ot, top: P.top + at, right: P.right + ot - k.width, bottom: P.bottom + at - k.height };
+      u = St(u, h.left, h.right), m = St(m, h.top, h.bottom);
     }
-    if (Array.isArray(X)) {
-      let [y, u] = X;
-      if (isNaN(+y) || y < 0) throw new Error("1st argument of `grid` must be a valid positive number");
-      if (isNaN(+u) || u < 0) throw new Error("2nd argument of `grid` must be a valid positive number");
-      let A = c - B, L = m - U;
-      [A, L] = Rt([y / h, u / h], A, L), c = B + A, m = U + L;
+    if (Array.isArray(R)) {
+      let [h, l] = R;
+      if (isNaN(+h) || h < 0) throw new Error("1st argument of `grid` must be a valid positive number");
+      if (isNaN(+l) || l < 0) throw new Error("2nd argument of `grid` must be a valid positive number");
+      let C = u - B, q = m - U;
+      [C, q] = Rt([h / y, l / y], C, q), u = B + C, m = U + q;
     }
-    o && ($ = Math.round((c - B) * h)), a && (_ = Math.round((m - U) * h)), z = $, V = _, lt("neodrag", I, r), ut();
-  }), ft), Z("pointerup", ((r) => {
-    W.delete(r.pointerId), Y && (R && (Z("click", ((c) => c.stopPropagation()), { once: !0, signal: dt.signal, capture: !0 }), E.dragEnd && (P = ht(s, t)), q.remove(i), q.add(n), x && (ct.userSelect = vt), lt("neodrag:end", J, r), o && (B = $), a && (U = _)), Y = !1, R = !1, C = !1, k = !1);
-  }), ft), { destroy: () => dt.abort(), update: (r) => {
-    var m, h;
-    d = r.axis || "both", M = r.disabled ?? !1, N = r.ignoreMultitouch ?? !1, T = r.handle, s = r.bounds, E = r.recomputeBounds ?? gt, D = r.cancel, x = r.applyUserSelectHack ?? !0, X = r.grid, l = r.gpuAcceleration ?? !0, f = r.legacyTranslate ?? !1, v = r.transform, S = { ...pt, ...r.threshold ?? {} };
-    const c = q.contains(n);
-    q.remove(g, n), g = r.defaultClass ?? "neodrag", i = r.defaultClassDragging ?? "neodrag-dragging", n = r.defaultClassDragged ?? "neodrag-dragged", q.add(g), c && q.add(n), Nt && (z = $ = ((m = r.position) == null ? void 0 : m.x) ?? $, V = _ = ((h = r.position) == null ? void 0 : h.y) ?? _, ut());
+    r && (x = Math.round((u - B) * y)), a && (Y = Math.round((m - U) * y)), z = x, V = Y, lt("neodrag", w, n), ut();
+  }), ft), Z("pointerup", ((n) => {
+    W.delete(n.pointerId), S && (T && (Z("click", ((u) => u.stopPropagation()), { once: !0, signal: dt.signal, capture: !0 }), D.dragEnd && (P = yt(s, t)), _.remove(N), _.add(O), M && (ct.userSelect = vt), lt("neodrag:end", H, n), r && (B = x), a && (U = Y)), S = !1, T = !1, $ = !1, g = !1);
+  }), ft), { destroy: () => dt.abort(), update: (n) => {
+    var m, y;
+    d = n.axis || "both", A = n.disabled ?? !1, I = n.ignoreMultitouch ?? !1, X = n.handle, s = n.bounds, D = n.recomputeBounds ?? gt, L = n.cancel, M = n.applyUserSelectHack ?? !0, R = n.grid, i = n.gpuAcceleration ?? !0, f = n.legacyTranslate ?? !1, v = n.transform, b = { ...pt, ...n.threshold ?? {} };
+    const u = _.contains(O);
+    _.remove(c, O), c = n.defaultClass ?? "neodrag", N = n.defaultClassDragging ?? "neodrag-dragging", O = n.defaultClassDragged ?? "neodrag-dragged", _.add(c), u && _.add(O), Nt && (z = x = ((m = n.position) == null ? void 0 : m.x) ?? x, V = Y = ((y = n.position) == null ? void 0 : y.y) ?? Y, ut());
   } };
 }
-var St = (t, e, o) => Math.min(Math.max(t, e), o), mt = (t) => typeof t == "string", Rt = ([t, e], o, a) => {
-  const s = (d, l) => l === 0 ? 0 : Math.ceil(d / l) * l;
-  return [s(o, t), s(a, e)];
-}, Dt = (t, e) => t.some(((o) => e.some(((a) => o.contains(a)))));
-function ht(t, e) {
+var St = (t, e, r) => Math.min(Math.max(t, e), r), mt = (t) => typeof t == "string", Rt = ([t, e], r, a) => {
+  const s = (d, i) => i === 0 ? 0 : Math.ceil(d / i) * i;
+  return [s(r, t), s(a, e)];
+}, Dt = (t, e) => t.some(((r) => e.some(((a) => r.contains(a)))));
+function yt(t, e) {
   if (t === void 0) return;
-  if (yt(t)) return t.getBoundingClientRect();
+  if (ht(t)) return t.getBoundingClientRect();
   if (typeof t == "object") {
-    const { top: a = 0, left: s = 0, right: d = 0, bottom: l = 0 } = t;
-    return { top: a, right: window.innerWidth - d, bottom: window.innerHeight - l, left: s };
+    const { top: a = 0, left: s = 0, right: d = 0, bottom: i = 0 } = t;
+    return { top: a, right: window.innerWidth - d, bottom: window.innerHeight - i, left: s };
   }
   if (t === "parent") return e.parentNode.getBoundingClientRect();
-  const o = document.querySelector(t);
-  if (o === null) throw new Error("The selector provided for bound doesn't exists in the document.");
-  return o.getBoundingClientRect();
+  const r = document.querySelector(t);
+  if (r === null) throw new Error("The selector provided for bound doesn't exists in the document.");
+  return r.getBoundingClientRect();
 }
-var K = (t, e, o) => t.style.setProperty(e, o), yt = (t) => t instanceof HTMLElement;
+var K = (t, e, r) => t.style.setProperty(e, r), ht = (t) => t instanceof HTMLElement;
 function tt(t) {
   return t == null || typeof t == "string" || t instanceof HTMLElement ? t : "current" in t ? t.current : Array.isArray(t) ? t.map(((e) => e instanceof HTMLElement ? e : e.current)) : void 0;
 }
-function Pt(t, e = {}) {
-  const o = F(), [a, s] = G(!1), [d, l] = G();
-  let { onDragStart: f, onDrag: v, onDragEnd: x, handle: M, cancel: N } = e, E = tt(M), X = tt(N);
-  function S(g, i) {
-    l(g), i == null || i(g);
+function Lt(t, e = {}) {
+  const r = G(), [a, s] = J(!1), [d, i] = J();
+  let { onDragStart: f, onDrag: v, onDragEnd: M, handle: A, cancel: I } = e, D = tt(A), R = tt(I);
+  function b(c, N) {
+    i(c), N == null || N(c);
   }
-  function b(g) {
-    s(!0), S(g, f);
+  function E(c) {
+    s(!0), b(c, f);
   }
-  function D(g) {
-    S(g, v);
+  function L(c) {
+    b(c, v);
   }
-  function T(g) {
-    s(!1), S(g, x);
+  function X(c) {
+    s(!1), b(c, M);
   }
-  return rt((() => {
+  return nt((() => {
     if (typeof window > "u") return;
-    const g = t.current;
-    if (!g) return;
-    ({ onDragStart: f, onDrag: v, onDragEnd: x } = e);
-    const { update: i, destroy: n } = It(g, { ...e, handle: E, cancel: X, onDragStart: b, onDrag: D, onDragEnd: T });
-    return o.current = i, n;
-  }), []), rt((() => {
-    var g;
-    (g = o.current) == null || g.call(o, { ...e, handle: tt(M), cancel: tt(N), onDragStart: b, onDrag: D, onDragEnd: T });
+    const c = t.current;
+    if (!c) return;
+    ({ onDragStart: f, onDrag: v, onDragEnd: M } = e);
+    const { update: N, destroy: O } = Tt(c, { ...e, handle: D, cancel: R, onDragStart: E, onDrag: L, onDragEnd: X });
+    return r.current = N, O;
+  }), []), nt((() => {
+    var c;
+    (c = r.current) == null || c.call(r, { ...e, handle: tt(A), cancel: tt(I), onDragStart: E, onDrag: L, onDragEnd: X });
   }), [e]), { isDragging: a, dragState: d };
 }
 const Q = "tiny-canvas-queue";
@@ -153,39 +153,39 @@ function Mt() {
     return localStorage.setItem(Q, JSON.stringify([])), [];
   }
 }
-const Lt = (t) => {
+const Xt = (t) => {
   if (!t) return null;
   let e = null;
-  const o = (a) => {
+  const r = (a) => {
     if (a.props && a.props.id) {
       e = a.props.id;
       return;
     }
-    a.props && a.props.children && xt.Children.forEach(a.props.children, o);
+    a.props && a.props.children && xt.Children.forEach(a.props.children, r);
   };
-  return o(t), e;
+  return r(t), e;
 };
-function Xt(t) {
+function Yt(t) {
   let e = 5381;
-  for (let o = 0; o < t.length; o++)
-    e = (e << 5) + e + t.charCodeAt(o) >>> 0;
+  for (let r = 0; r < t.length; r++)
+    e = (e << 5) + e + t.charCodeAt(r) >>> 0;
   return e.toString(16).padStart(8, "0");
 }
 function At(t) {
   var d;
   if (t == null || typeof t == "boolean") return "";
   if (typeof t == "string" || typeof t == "number") return "#text";
-  const e = t.type, o = typeof e == "function" ? e.displayName || e.name || "Anonymous" : typeof e == "string" ? e : "Fragment", a = (d = t.props) == null ? void 0 : d.children;
-  if (a == null) return o;
+  const e = t.type, r = typeof e == "function" ? e.displayName || e.name || "Anonymous" : typeof e == "string" ? e : "Fragment", a = (d = t.props) == null ? void 0 : d.children;
+  if (a == null) return r;
   const s = [];
-  return xt.Children.forEach(a, (l) => {
-    const f = At(l);
+  return xt.Children.forEach(a, (i) => {
+    const f = At(i);
     f && s.push(f);
-  }), s.length ? `${o}(${s.join(",")})` : o;
+  }), s.length ? `${r}(${s.join(",")})` : r;
 }
-const Yt = (t, e) => {
-  const o = At(t);
-  return `tc-${Xt(o)}-${e}`;
+const Pt = (t, e) => {
+  const r = At(t);
+  return `tc-${Yt(r)}-${e}`;
 }, Ft = (t) => {
   try {
     return Mt().reduce((a, s) => (a[s.id] = { id: s.id, x: s.x, y: s.y }, a), {})[t] || { x: 0, y: 0 };
@@ -198,16 +198,16 @@ const Yt = (t, e) => {
   } catch (t) {
     console.error("LocalStorage is not available:", t);
   }
-}, qt = (t, e, o) => {
+}, qt = (t, e, r) => {
   try {
-    const a = Mt(), s = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-"), d = { id: t, x: e, y: o, time: s }, l = a.findIndex((f) => f.id === t);
-    l >= 0 ? a[l] = d : a.push(d), localStorage.setItem(Q, JSON.stringify(a));
+    const a = Mt(), s = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-"), d = { id: t, x: e, y: r, time: s }, i = a.findIndex((f) => f.id === t);
+    i >= 0 ? a[i] = d : a.push(d), localStorage.setItem(Q, JSON.stringify(a));
   } catch (a) {
     console.error("Error saving drag position:", a);
   }
 }, Ot = 250, wt = 4, $t = 20, et = 1.5, _t = 150, Ht = 8;
-function kt({ children: t, dragId: e, initialPosition: o, onDragEnd: a, handle: s }) {
-  const d = F(null), l = o || { x: 0, y: 0 }, f = F(l), v = F(!1), [x, M] = G(!1), N = F({
+function kt({ children: t, dragId: e, initialPosition: r, onDragEnd: a, handle: s }) {
+  const d = G(null), i = r || { x: 0, y: 0 }, f = G(i), v = G(!1), [M, A] = J(!1), I = G({
     timer: null,
     startX: 0,
     startY: 0,
@@ -215,65 +215,67 @@ function kt({ children: t, dragId: e, initialPosition: o, onDragEnd: a, handle:
     distanceMet: !1,
     active: !1,
     lastEvent: null
-  }), [E, X] = G(l), [S, b] = G(
+  }), [D, R] = J(i), [b, E] = J(i);
+  r && (r.x !== b.x || r.y !== b.y) && (E(r), R(r));
+  const [L, X] = J(
     () => Math.random() < 0.5 ? -et : et
   );
-  rt(() => {
-    const i = d.current;
-    if (i && e && (l.x !== 0 || l.y !== 0)) {
-      i.classList.add("tc-on-translation");
-      const n = setTimeout(() => {
-        i.classList.remove("tc-on-translation");
+  nt(() => {
+    const p = d.current;
+    if (p && e && (i.x !== 0 || i.y !== 0)) {
+      p.classList.add("tc-on-translation");
+      const o = setTimeout(() => {
+        p.classList.remove("tc-on-translation");
       }, Ot * 4);
       return () => {
-        clearTimeout(n);
+        clearTimeout(o);
       };
     }
-  }, [e, l.x, l.y]), rt(() => {
-    const i = d.current;
-    if (!i || !s) return;
-    const n = N.current;
+  }, [e, i.x, i.y]), nt(() => {
+    const p = d.current;
+    if (!p || !s) return;
+    const o = I.current;
     let w = null;
-    function O(p) {
-      const C = i.querySelector(s);
-      return C && C.contains(p.target);
+    function H(g) {
+      const x = p.querySelector(s);
+      return x && x.contains(g.target);
     }
-    function I(p) {
-      if (p === w) {
+    function S(g) {
+      if (g === w) {
         w = null;
         return;
       }
-      O(p) && (p.stopImmediatePropagation(), n.active = !0, n.delayMet = !1, n.distanceMet = !1, n.startX = p.clientX, n.startY = p.clientY, n.target = p.target, n.pointerId = p.pointerId, n.button = p.button, n.pointerType = p.pointerType, clearTimeout(n.timer), n.timer = setTimeout(() => {
-        n.delayMet = !0, J();
+      H(g) && (g.stopImmediatePropagation(), o.active = !0, o.delayMet = !1, o.distanceMet = !1, o.startX = g.clientX, o.startY = g.clientY, o.target = g.target, o.pointerId = g.pointerId, o.button = g.button, o.pointerType = g.pointerType, clearTimeout(o.timer), o.timer = setTimeout(() => {
+        o.delayMet = !0, T();
       }, _t));
     }
-    function J() {
-      if (n.delayMet && n.distanceMet && n.active && n.target) {
-        const p = new PointerEvent("pointerdown", {
+    function T() {
+      if (o.delayMet && o.distanceMet && o.active && o.target) {
+        const g = new PointerEvent("pointerdown", {
           bubbles: !0,
           cancelable: !0,
-          pointerId: n.pointerId,
-          clientX: n.startX,
-          clientY: n.startY,
-          button: n.button,
-          pointerType: n.pointerType
+          pointerId: o.pointerId,
+          clientX: o.startX,
+          clientY: o.startY,
+          button: o.button,
+          pointerType: o.pointerType
         });
-        w = p, n.target.dispatchEvent(p), n.target = null;
+        w = g, o.target.dispatchEvent(g), o.target = null;
       }
     }
-    function Y(p) {
-      if (!n.active || n.distanceMet) return;
-      const C = p.clientX - n.startX, k = p.clientY - n.startY;
-      Math.hypot(C, k) >= Ht && (n.distanceMet = !0, J());
+    function j(g) {
+      if (!o.active || o.distanceMet) return;
+      const x = g.clientX - o.startX, Y = g.clientY - o.startY;
+      Math.hypot(x, Y) >= Ht && (o.distanceMet = !0, T());
     }
-    function R() {
-      clearTimeout(n.timer), n.active = !1, n.target = null;
+    function $() {
+      clearTimeout(o.timer), o.active = !1, o.target = null;
     }
-    return i.addEventListener("pointerdown", I, !0), document.addEventListener("pointermove", Y), document.addEventListener("pointerup", R), () => {
-      i.removeEventListener("pointerdown", I, !0), document.removeEventListener("pointermove", Y), document.removeEventListener("pointerup", R), clearTimeout(n.timer);
+    return p.addEventListener("pointerdown", S, !0), document.addEventListener("pointermove", j), document.addEventListener("pointerup", $), () => {
+      p.removeEventListener("pointerdown", S, !0), document.removeEventListener("pointermove", j), document.removeEventListener("pointerup", $), clearTimeout(o.timer);
     };
   }, [s]);
-  const { isDragging: D } = Pt(d, {
+  const { isDragging: c } = Lt(d, {
     axis: "both",
     bounds: "parent",
     defaultClass: "tc-drag",
@@ -281,32 +283,32 @@ function kt({ children: t, dragId: e, initialPosition: o, onDragEnd: a, handle:
     defaultClassDragged: "tc-off",
     applyUserSelectHack: !0,
     ...s ? { handle: s } : {},
-    position: { x: E.x, y: E.y },
+    position: { x: D.x, y: D.y },
     onDragStart: () => {
-      f.current = E, v.current = !1, M(!1);
+      f.current = D, v.current = !1, A(!1);
     },
-    onDrag: ({ offsetX: i, offsetY: n }) => {
-      const w = i - f.current.x, O = n - f.current.y, I = Math.hypot(w, O);
-      !v.current && I >= wt && (v.current = !0), !x && I >= $t && M(!0), X({ x: Math.max(0, i), y: Math.max(0, n) });
+    onDrag: ({ offsetX: p, offsetY: o }) => {
+      const w = p - f.current.x, H = o - f.current.y, S = Math.hypot(w, H);
+      !v.current && S >= wt && (v.current = !0), !M && S >= $t && A(!0), R({ x: Math.max(0, p), y: Math.max(0, o) });
     },
-    onDragEnd: (i) => {
-      const n = Math.max(0, i.offsetX), w = Math.max(0, i.offsetY);
-      X({ x: n, y: w }), b(Math.random() < 0.5 ? -et : et), M(!1);
-      const O = n - f.current.x, I = w - f.current.y;
-      (v.current || Math.hypot(O, I) >= wt) && (e && qt(e, n, w), a == null || a(e, { x: n, y: w }));
+    onDragEnd: (p) => {
+      const o = Math.max(0, p.offsetX), w = Math.max(0, p.offsetY);
+      R({ x: o, y: w }), X(Math.random() < 0.5 ? -et : et), A(!1);
+      const H = o - f.current.x, S = w - f.current.y;
+      (v.current || Math.hypot(H, S) >= wt) && (e && qt(e, o, w), a == null || a(e, { x: o, y: w }));
     }
-  }), T = D && x ? `${S}deg` : "0deg";
-  return /* @__PURE__ */ nt(
+  }), N = c && M ? `${L}deg` : "0deg";
+  return /* @__PURE__ */ rt(
     "article",
     {
       ref: d,
-      style: { cursor: s ? D ? "grabbing" : void 0 : D ? "grabbing" : "grab" },
-      children: /* @__PURE__ */ nt(
+      style: { cursor: s ? c ? "grabbing" : void 0 : c ? "grabbing" : "grab" },
+      children: /* @__PURE__ */ rt(
         "div",
         {
           className: "tc-draggable-inner",
           style: {
-            transform: D ? `rotate(${T})` : void 0,
+            transform: c ? `rotate(${N})` : void 0,
             transition: "transform ease-in-out 150ms"
           },
           children: t
@@ -317,8 +319,8 @@ function kt({ children: t, dragId: e, initialPosition: o, onDragEnd: a, handle:
 }
 function Bt(t) {
   var a, s;
-  const e = Number((a = t == null ? void 0 : t.props) == null ? void 0 : a["data-tc-x"]), o = Number((s = t == null ? void 0 : t.props) == null ? void 0 : s["data-tc-y"]);
-  return Number.isFinite(e) && Number.isFinite(o) ? { x: Math.max(0, e), y: Math.max(0, o) } : null;
+  const e = Number((a = t == null ? void 0 : t.props) == null ? void 0 : a["data-tc-x"]), r = Number((s = t == null ? void 0 : t.props) == null ? void 0 : s["data-tc-y"]);
+  return Number.isFinite(e) && Number.isFinite(r) ? { x: Math.max(0, e), y: Math.max(0, r) } : null;
 }
 function Ut(t) {
   var e;
@@ -327,27 +329,27 @@ function Ut(t) {
 function Qt({
   children: t,
   dotted: e = !1,
-  grid: o = !1,
+  grid: r = !1,
   gridSize: a,
   colorMode: s = "auto",
   onDragEnd: d
 }) {
-  return /* @__PURE__ */ nt(
+  return /* @__PURE__ */ rt(
     "main",
     {
       className: "tc-canvas",
-      "data-dotted": e || o || void 0,
+      "data-dotted": e || r || void 0,
       "data-color-mode": s !== "auto" ? s : void 0,
       children: Ct.map(t, (f, v) => {
-        const x = Lt(f) ?? Yt(f, v), M = Bt(f), N = Ut(f);
-        return /* @__PURE__ */ nt(
+        const M = Xt(f) ?? Pt(f, v), A = Bt(f), I = Ut(f);
+        return /* @__PURE__ */ rt(
           kt,
           {
             gridSize: a,
-            dragId: x,
-            initialPosition: M,
+            dragId: M,
+            initialPosition: A,
             onDragEnd: d,
-            handle: N,
+            handle: I,
             children: f
           },
           v
@@ -357,7 +359,7 @@ function Qt({
   );
 }
 function zt({ reload: t = !1 } = {}) {
-  return Tt(() => {
+  return It(() => {
     try {
       localStorage.removeItem("tiny-canvas-queue");
     } catch (e) {
@@ -369,8 +371,8 @@ function zt({ reload: t = !1 } = {}) {
 export {
   Qt as Canvas,
   kt as Draggable,
-  Lt as findDragId,
-  Yt as generateDragId,
+  Xt as findDragId,
+  Pt as generateDragId,
   Ft as getQueue,
   Gt as refreshStorage,
   qt as saveDrag,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/tiny-canvas",
-  "version": "3.10.0",
+  "version": "3.11.0-beta.1",
   "type": "module",
   "license": "MIT",
   "description": "A lightweight React canvas with draggable elements and persistent positions",