@dfosco/tiny-canvas 1.2.0 → 3.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tiny-canvas.js +132 -130
- package/package.json +6 -1
package/dist/tiny-canvas.js
CHANGED
|
@@ -1,156 +1,156 @@
|
|
|
1
1
|
import { jsx as Z } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import xt, { useRef as W, useState as H, useEffect as dt, Children as Ct, useCallback as Rt } from "react";
|
|
3
3
|
var it = { dragStart: !0 }, ct = { delay: 0, distance: 3 };
|
|
4
4
|
function It(t, e = {}) {
|
|
5
|
-
let n, o, { bounds: a, axis:
|
|
5
|
+
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;
|
|
6
6
|
nt(U, J);
|
|
7
|
-
let
|
|
8
|
-
|
|
7
|
+
let M, P, B, tt, et, ht = "", Mt = !!S;
|
|
8
|
+
N = { ...it, ...N }, m = { ...ct, ...m ?? {} };
|
|
9
9
|
let j = /* @__PURE__ */ new Set();
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
ot("neodrag:start",
|
|
13
|
-
})(r), R.add(b),
|
|
10
|
+
function yt(r) {
|
|
11
|
+
X && !$ && _ && k && et && ($ = !0, (function(c) {
|
|
12
|
+
ot("neodrag:start", Et, c);
|
|
13
|
+
})(r), R.add(b), x && (ht = rt.userSelect, rt.userSelect = "none"));
|
|
14
14
|
}
|
|
15
15
|
const rt = document.body.style, R = t.classList;
|
|
16
16
|
function nt(r = T, c = O) {
|
|
17
17
|
if (!v) {
|
|
18
18
|
if (d) {
|
|
19
|
-
let
|
|
20
|
-
return Q(t, "transform",
|
|
19
|
+
let h = `${+r}px, ${+c}px`;
|
|
20
|
+
return Q(t, "transform", u ? `translate3d(${h}, 0)` : `translate(${h})`);
|
|
21
21
|
}
|
|
22
22
|
return Q(t, "translate", `${+r}px ${+c}px`);
|
|
23
23
|
}
|
|
24
|
-
const
|
|
25
|
-
lt(
|
|
24
|
+
const p = v({ offsetX: r, offsetY: c, rootNode: t });
|
|
25
|
+
lt(p) && Q(t, "transform", p);
|
|
26
26
|
}
|
|
27
|
-
function ot(r, c,
|
|
28
|
-
const
|
|
29
|
-
return { offsetX: T, offsetY: O, rootNode: t, currentNode: et, event:
|
|
30
|
-
})(
|
|
31
|
-
t.dispatchEvent(new CustomEvent(r, { detail:
|
|
27
|
+
function ot(r, c, p) {
|
|
28
|
+
const h = /* @__PURE__ */ (function(y) {
|
|
29
|
+
return { offsetX: T, offsetY: O, rootNode: t, currentNode: et, event: y };
|
|
30
|
+
})(p);
|
|
31
|
+
t.dispatchEvent(new CustomEvent(r, { detail: h })), c == null || c(h);
|
|
32
32
|
}
|
|
33
33
|
const F = addEventListener, at = new AbortController(), st = { signal: at.signal, capture: !1 };
|
|
34
|
-
function
|
|
34
|
+
function mt() {
|
|
35
35
|
let r = t.offsetWidth / P.width;
|
|
36
36
|
return isNaN(r) && (r = 1), r;
|
|
37
37
|
}
|
|
38
38
|
return Q(t, "touch-action", "none"), F("pointerdown", ((r) => {
|
|
39
|
-
if (
|
|
40
|
-
if (j.add(r.pointerId),
|
|
41
|
-
if (
|
|
42
|
-
if (R.add(
|
|
39
|
+
if (w || r.button === 2) return;
|
|
40
|
+
if (j.add(r.pointerId), A && j.size > 1) return r.preventDefault();
|
|
41
|
+
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");
|
|
42
|
+
if (R.add(s), B = (function(l, E) {
|
|
43
43
|
if (!l) return [E];
|
|
44
|
-
if (
|
|
44
|
+
if (ft(l)) return [l];
|
|
45
45
|
if (Array.isArray(l)) return l;
|
|
46
|
-
const
|
|
47
|
-
if (
|
|
48
|
-
return Array.from(
|
|
49
|
-
})(
|
|
46
|
+
const C = E.querySelectorAll(l);
|
|
47
|
+
if (C === null) throw new Error("Selector passed for `handle` option should be child of the element on which the action is applied");
|
|
48
|
+
return Array.from(C.values());
|
|
49
|
+
})(g, t), tt = (function(l, E) {
|
|
50
50
|
if (!l) return [];
|
|
51
|
-
if (
|
|
51
|
+
if (ft(l)) return [l];
|
|
52
52
|
if (Array.isArray(l)) return l;
|
|
53
|
-
const
|
|
54
|
-
if (
|
|
55
|
-
return Array.from(
|
|
56
|
-
})(
|
|
53
|
+
const C = E.querySelectorAll(l);
|
|
54
|
+
if (C === null) throw new Error("Selector passed for `cancel` option should be child of the element on which the action is applied");
|
|
55
|
+
return Array.from(C.values());
|
|
56
|
+
})(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");
|
|
57
57
|
const c = r.composedPath()[0];
|
|
58
|
-
if (!
|
|
58
|
+
if (!B.some(((l) => {
|
|
59
59
|
var E;
|
|
60
60
|
return l.contains(c) || ((E = l.shadowRoot) == null ? void 0 : E.contains(c));
|
|
61
61
|
})) || St(tt, [c])) return;
|
|
62
|
-
et =
|
|
63
|
-
const { clientX:
|
|
64
|
-
n && (q =
|
|
62
|
+
et = B.length === 1 ? t : B.find(((l) => l.contains(c))), X = !0, pt = Date.now(), m.delay || (k = !0), P = t.getBoundingClientRect();
|
|
63
|
+
const { clientX: p, clientY: h } = r, y = mt();
|
|
64
|
+
n && (q = p - U / y), o && (L = h - J / y), M && (G = p - P.left, K = h - P.top);
|
|
65
65
|
}), st), F("pointermove", ((r) => {
|
|
66
|
-
if (!
|
|
66
|
+
if (!X || A && j.size > 1) return;
|
|
67
67
|
if (!$) {
|
|
68
|
-
if (
|
|
69
|
-
const
|
|
70
|
-
Math.sqrt(
|
|
68
|
+
if (k || Date.now() - pt >= m.delay && (k = !0, yt(r)), !_) {
|
|
69
|
+
const y = r.clientX - q, l = r.clientY - L;
|
|
70
|
+
Math.sqrt(y ** 2 + l ** 2) >= m.distance && (_ = !0, yt(r));
|
|
71
71
|
}
|
|
72
72
|
if (!$) return;
|
|
73
73
|
}
|
|
74
|
-
|
|
75
|
-
let c = r.clientX,
|
|
76
|
-
const
|
|
77
|
-
if (
|
|
78
|
-
const
|
|
79
|
-
c =
|
|
74
|
+
N.drag && (M = ut(a, t)), r.preventDefault(), P = t.getBoundingClientRect();
|
|
75
|
+
let c = r.clientX, p = r.clientY;
|
|
76
|
+
const h = mt();
|
|
77
|
+
if (M) {
|
|
78
|
+
const y = { left: M.left + G, top: M.top + K, right: M.right + G - P.width, bottom: M.bottom + K - P.height };
|
|
79
|
+
c = bt(c, y.left, y.right), p = bt(p, y.top, y.bottom);
|
|
80
80
|
}
|
|
81
81
|
if (Array.isArray(I)) {
|
|
82
|
-
let [
|
|
83
|
-
if (isNaN(+
|
|
82
|
+
let [y, l] = I;
|
|
83
|
+
if (isNaN(+y) || y < 0) throw new Error("1st argument of `grid` must be a valid positive number");
|
|
84
84
|
if (isNaN(+l) || l < 0) throw new Error("2nd argument of `grid` must be a valid positive number");
|
|
85
|
-
let E = c - q,
|
|
86
|
-
[E,
|
|
85
|
+
let E = c - q, C = p - L;
|
|
86
|
+
[E, C] = Tt([y / h, l / h], E, C), c = q + E, p = L + C;
|
|
87
87
|
}
|
|
88
|
-
n && (T = Math.round((c - q) *
|
|
88
|
+
n && (T = Math.round((c - q) * h)), o && (O = Math.round((p - L) * h)), U = T, J = O, ot("neodrag", Nt, r), nt();
|
|
89
89
|
}), st), F("pointerup", ((r) => {
|
|
90
|
-
j.delete(r.pointerId),
|
|
90
|
+
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);
|
|
91
91
|
}), st), { destroy: () => at.abort(), update: (r) => {
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
const c = R.contains(
|
|
95
|
-
R.remove(
|
|
92
|
+
var p, h;
|
|
93
|
+
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 ?? {} };
|
|
94
|
+
const c = R.contains(D);
|
|
95
|
+
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());
|
|
96
96
|
} };
|
|
97
97
|
}
|
|
98
|
-
var
|
|
99
|
-
const a = (
|
|
98
|
+
var bt = (t, e, n) => Math.min(Math.max(t, e), n), lt = (t) => typeof t == "string", Tt = ([t, e], n, o) => {
|
|
99
|
+
const a = (i, u) => u === 0 ? 0 : Math.ceil(i / u) * u;
|
|
100
100
|
return [a(n, t), a(o, e)];
|
|
101
101
|
}, St = (t, e) => t.some(((n) => e.some(((o) => n.contains(o)))));
|
|
102
102
|
function ut(t, e) {
|
|
103
103
|
if (t === void 0) return;
|
|
104
|
-
if (
|
|
104
|
+
if (ft(t)) return t.getBoundingClientRect();
|
|
105
105
|
if (typeof t == "object") {
|
|
106
|
-
const { top: o = 0, left: a = 0, right:
|
|
107
|
-
return { top: o, right: window.innerWidth -
|
|
106
|
+
const { top: o = 0, left: a = 0, right: i = 0, bottom: u = 0 } = t;
|
|
107
|
+
return { top: o, right: window.innerWidth - i, bottom: window.innerHeight - u, left: a };
|
|
108
108
|
}
|
|
109
109
|
if (t === "parent") return e.parentNode.getBoundingClientRect();
|
|
110
110
|
const n = document.querySelector(t);
|
|
111
111
|
if (n === null) throw new Error("The selector provided for bound doesn't exists in the document.");
|
|
112
112
|
return n.getBoundingClientRect();
|
|
113
113
|
}
|
|
114
|
-
var Q = (t, e, n) => t.style.setProperty(e, n),
|
|
114
|
+
var Q = (t, e, n) => t.style.setProperty(e, n), ft = (t) => t instanceof HTMLElement;
|
|
115
115
|
function z(t) {
|
|
116
116
|
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;
|
|
117
117
|
}
|
|
118
118
|
function Ot(t, e = {}) {
|
|
119
|
-
const n = W(), [o, a] =
|
|
120
|
-
let { onDragStart: d, onDrag: v, onDragEnd:
|
|
121
|
-
function
|
|
122
|
-
|
|
119
|
+
const n = W(), [o, a] = H(!1), [i, u] = H();
|
|
120
|
+
let { onDragStart: d, onDrag: v, onDragEnd: x, handle: w, cancel: A } = e, N = z(w), I = z(A);
|
|
121
|
+
function m(s, b) {
|
|
122
|
+
u(s), b == null || b(s);
|
|
123
123
|
}
|
|
124
|
-
function S(
|
|
125
|
-
a(!0),
|
|
124
|
+
function S(s) {
|
|
125
|
+
a(!0), m(s, d);
|
|
126
126
|
}
|
|
127
|
-
function
|
|
128
|
-
|
|
127
|
+
function f(s) {
|
|
128
|
+
m(s, v);
|
|
129
129
|
}
|
|
130
|
-
function
|
|
131
|
-
a(!1),
|
|
130
|
+
function g(s) {
|
|
131
|
+
a(!1), m(s, x);
|
|
132
132
|
}
|
|
133
|
-
return
|
|
133
|
+
return dt((() => {
|
|
134
134
|
if (typeof window > "u") return;
|
|
135
|
-
const
|
|
136
|
-
if (!
|
|
137
|
-
({ onDragStart: d, onDrag: v, onDragEnd:
|
|
138
|
-
const { update: b, destroy:
|
|
139
|
-
return n.current = b,
|
|
140
|
-
}), []),
|
|
141
|
-
var
|
|
142
|
-
(
|
|
143
|
-
}), [e]), { isDragging: o, dragState:
|
|
135
|
+
const s = t.current;
|
|
136
|
+
if (!s) return;
|
|
137
|
+
({ onDragStart: d, onDrag: v, onDragEnd: x } = e);
|
|
138
|
+
const { update: b, destroy: D } = It(s, { ...e, handle: N, cancel: I, onDragStart: S, onDrag: f, onDragEnd: g });
|
|
139
|
+
return n.current = b, D;
|
|
140
|
+
}), []), dt((() => {
|
|
141
|
+
var s;
|
|
142
|
+
(s = n.current) == null || s.call(n, { ...e, handle: z(w), cancel: z(A), onDragStart: S, onDrag: f, onDragEnd: g });
|
|
143
|
+
}), [e]), { isDragging: o, dragState: i };
|
|
144
144
|
}
|
|
145
|
-
const
|
|
145
|
+
const Y = "tiny-canvas-queue";
|
|
146
146
|
function wt() {
|
|
147
|
-
const t = localStorage.getItem(
|
|
147
|
+
const t = localStorage.getItem(Y);
|
|
148
148
|
if (!t) return [];
|
|
149
149
|
try {
|
|
150
150
|
const e = JSON.parse(t);
|
|
151
151
|
return Array.isArray(e) ? e : [];
|
|
152
152
|
} catch {
|
|
153
|
-
return localStorage.setItem(
|
|
153
|
+
return localStorage.setItem(Y, JSON.stringify([])), [];
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
156
|
const Pt = (t) => {
|
|
@@ -161,7 +161,7 @@ const Pt = (t) => {
|
|
|
161
161
|
e = o.props.id;
|
|
162
162
|
return;
|
|
163
163
|
}
|
|
164
|
-
o.props && o.props.children &&
|
|
164
|
+
o.props && o.props.children && xt.Children.forEach(o.props.children, n);
|
|
165
165
|
};
|
|
166
166
|
return n(t), e;
|
|
167
167
|
};
|
|
@@ -172,14 +172,14 @@ function $t(t) {
|
|
|
172
172
|
return e.toString(16).padStart(8, "0");
|
|
173
173
|
}
|
|
174
174
|
function Dt(t) {
|
|
175
|
-
var
|
|
175
|
+
var i;
|
|
176
176
|
if (t == null || typeof t == "boolean") return "";
|
|
177
177
|
if (typeof t == "string" || typeof t == "number") return "#text";
|
|
178
|
-
const e = t.type, n = typeof e == "function" ? e.displayName || e.name || "Anonymous" : typeof e == "string" ? e : "Fragment", o = (
|
|
178
|
+
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;
|
|
179
179
|
if (o == null) return n;
|
|
180
180
|
const a = [];
|
|
181
|
-
return
|
|
182
|
-
const d = Dt(
|
|
181
|
+
return xt.Children.forEach(o, (u) => {
|
|
182
|
+
const d = Dt(u);
|
|
183
183
|
d && a.push(d);
|
|
184
184
|
}), a.length ? `${n}(${a.join(",")})` : n;
|
|
185
185
|
}
|
|
@@ -194,66 +194,68 @@ const qt = (t, e) => {
|
|
|
194
194
|
}
|
|
195
195
|
}, Jt = () => {
|
|
196
196
|
try {
|
|
197
|
-
localStorage.getItem(
|
|
197
|
+
localStorage.getItem(Y) || localStorage.setItem(Y, JSON.stringify([]));
|
|
198
198
|
} catch (t) {
|
|
199
199
|
console.error("LocalStorage is not available:", t);
|
|
200
200
|
}
|
|
201
|
-
},
|
|
201
|
+
}, Lt = (t, e, n) => {
|
|
202
202
|
try {
|
|
203
|
-
const o = wt(), a = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-"),
|
|
204
|
-
|
|
203
|
+
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);
|
|
204
|
+
u >= 0 ? o[u] = i : o.push(i), localStorage.setItem(Y, JSON.stringify(o));
|
|
205
205
|
} catch (o) {
|
|
206
206
|
console.error("Error saving drag position:", o);
|
|
207
207
|
}
|
|
208
|
-
},
|
|
209
|
-
function
|
|
210
|
-
const a = W(null),
|
|
208
|
+
}, Xt = 250, vt = 4, kt = 10, V = 1.5;
|
|
209
|
+
function Bt({ children: t, dragId: e, initialPosition: n, onDragEnd: o }) {
|
|
210
|
+
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(
|
|
211
211
|
() => Math.random() < 0.5 ? -V : V
|
|
212
212
|
);
|
|
213
|
-
|
|
214
|
-
const
|
|
215
|
-
if (
|
|
216
|
-
|
|
217
|
-
const
|
|
218
|
-
|
|
219
|
-
},
|
|
213
|
+
dt(() => {
|
|
214
|
+
const f = a.current;
|
|
215
|
+
if (f && e && (i.x !== 0 || i.y !== 0)) {
|
|
216
|
+
f.classList.add("tc-on-translation");
|
|
217
|
+
const g = setTimeout(() => {
|
|
218
|
+
f.classList.remove("tc-on-translation");
|
|
219
|
+
}, Xt * 4);
|
|
220
220
|
return () => {
|
|
221
|
-
clearTimeout(
|
|
221
|
+
clearTimeout(g);
|
|
222
222
|
};
|
|
223
223
|
}
|
|
224
|
-
}, [e,
|
|
225
|
-
const { isDragging:
|
|
224
|
+
}, [e, i.x, i.y]);
|
|
225
|
+
const { isDragging: m } = Ot(a, {
|
|
226
226
|
axis: "both",
|
|
227
|
+
bounds: "parent",
|
|
227
228
|
threshold: { delay: 50, distance: 30 },
|
|
228
229
|
defaultClass: "tc-drag",
|
|
229
230
|
defaultClassDragging: "tc-on",
|
|
230
231
|
defaultClassDragged: "tc-off",
|
|
231
232
|
applyUserSelectHack: !0,
|
|
232
|
-
position: { x:
|
|
233
|
+
position: { x: w.x, y: w.y },
|
|
233
234
|
onDragStart: () => {
|
|
234
|
-
|
|
235
|
+
u.current = w, d.current = !1, x(!1);
|
|
235
236
|
},
|
|
236
|
-
onDrag: ({ offsetX:
|
|
237
|
-
const
|
|
238
|
-
!d.current && Math.hypot(
|
|
237
|
+
onDrag: ({ offsetX: f, offsetY: g }) => {
|
|
238
|
+
const s = f - u.current.x, b = g - u.current.y, D = Math.hypot(s, b);
|
|
239
|
+
!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) });
|
|
239
240
|
},
|
|
240
|
-
onDragEnd: (
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
241
|
+
onDragEnd: (f) => {
|
|
242
|
+
const g = Math.max(0, f.offsetX), s = Math.max(0, f.offsetY);
|
|
243
|
+
A({ x: g, y: s }), I(Math.random() < 0.5 ? -V : V), x(!1);
|
|
244
|
+
const b = g - u.current.x, D = s - u.current.y;
|
|
245
|
+
(d.current || Math.hypot(b, D) >= vt) && (e && Lt(e, g, s), o == null || o(e, { x: g, y: s }));
|
|
244
246
|
}
|
|
245
|
-
}), S =
|
|
247
|
+
}), S = m && v ? `${N}deg` : "0deg";
|
|
246
248
|
return /* @__PURE__ */ Z(
|
|
247
249
|
"article",
|
|
248
250
|
{
|
|
249
251
|
ref: a,
|
|
250
|
-
style: { cursor:
|
|
252
|
+
style: { cursor: m ? "grabbing" : "grab" },
|
|
251
253
|
children: /* @__PURE__ */ Z(
|
|
252
254
|
"div",
|
|
253
255
|
{
|
|
254
256
|
className: "tc-draggable-inner",
|
|
255
257
|
style: {
|
|
256
|
-
transform:
|
|
258
|
+
transform: m ? `rotate(${S})` : void 0,
|
|
257
259
|
transition: "transform ease-in-out 150ms"
|
|
258
260
|
},
|
|
259
261
|
children: t
|
|
@@ -262,10 +264,10 @@ function kt({ children: t, dragId: e, initialPosition: n, onDragEnd: o }) {
|
|
|
262
264
|
}
|
|
263
265
|
);
|
|
264
266
|
}
|
|
265
|
-
function
|
|
267
|
+
function Ht(t) {
|
|
266
268
|
var o, a;
|
|
267
269
|
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"]);
|
|
268
|
-
return Number.isFinite(e) && Number.isFinite(n) ? { x: e, y: n } : null;
|
|
270
|
+
return Number.isFinite(e) && Number.isFinite(n) ? { x: Math.max(0, e), y: Math.max(0, n) } : null;
|
|
269
271
|
}
|
|
270
272
|
function jt({
|
|
271
273
|
children: t,
|
|
@@ -273,7 +275,7 @@ function jt({
|
|
|
273
275
|
grid: n = !1,
|
|
274
276
|
gridSize: o,
|
|
275
277
|
colorMode: a = "auto",
|
|
276
|
-
onDragEnd:
|
|
278
|
+
onDragEnd: i
|
|
277
279
|
}) {
|
|
278
280
|
return /* @__PURE__ */ Z(
|
|
279
281
|
"main",
|
|
@@ -281,15 +283,15 @@ function jt({
|
|
|
281
283
|
className: "tc-canvas",
|
|
282
284
|
"data-dotted": e || n || void 0,
|
|
283
285
|
"data-color-mode": a !== "auto" ? a : void 0,
|
|
284
|
-
children:
|
|
285
|
-
const
|
|
286
|
+
children: Ct.map(t, (d, v) => {
|
|
287
|
+
const x = Pt(d) ?? qt(d, v), w = Ht(d);
|
|
286
288
|
return /* @__PURE__ */ Z(
|
|
287
|
-
|
|
289
|
+
Bt,
|
|
288
290
|
{
|
|
289
291
|
gridSize: o,
|
|
290
|
-
dragId:
|
|
291
|
-
initialPosition:
|
|
292
|
-
onDragEnd:
|
|
292
|
+
dragId: x,
|
|
293
|
+
initialPosition: w,
|
|
294
|
+
onDragEnd: i,
|
|
293
295
|
children: d
|
|
294
296
|
},
|
|
295
297
|
v
|
|
@@ -310,11 +312,11 @@ function Ft({ reload: t = !1 } = {}) {
|
|
|
310
312
|
}
|
|
311
313
|
export {
|
|
312
314
|
jt as Canvas,
|
|
313
|
-
|
|
315
|
+
Bt as Draggable,
|
|
314
316
|
Pt as findDragId,
|
|
315
317
|
qt as generateDragId,
|
|
316
318
|
Ut as getQueue,
|
|
317
319
|
Jt as refreshStorage,
|
|
318
|
-
|
|
320
|
+
Lt as saveDrag,
|
|
319
321
|
Ft as useResetCanvas
|
|
320
322
|
};
|
package/package.json
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dfosco/tiny-canvas",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.9.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "A lightweight React canvas with draggable elements and persistent positions",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/dfosco/storyboard.git",
|
|
10
|
+
"directory": "packages/tiny-canvas"
|
|
11
|
+
},
|
|
7
12
|
"main": "./dist/tiny-canvas.js",
|
|
8
13
|
"module": "./dist/tiny-canvas.js",
|
|
9
14
|
"types": "./src/index.d.ts",
|