@dfosco/tiny-canvas 3.10.0-beta.0 → 3.10.0

package/dist/tiny-canvas.js

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

package/package.json

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