@snowcone-app/canvas 0.17.2 → 0.18.0

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.
Files changed (65) hide show
  1. package/dist/{ImportManager-C_wBjWaV.js → CanvasRenderer-DUc-MOeR.js} +586 -806
  2. package/dist/CanvasRenderer-DUc-MOeR.js.map +1 -0
  3. package/dist/{CanvasStateV1-BG2hEc3-.js → CanvasStateV1-Bq48qhv5.js} +3 -3
  4. package/dist/{CanvasStateV1-BG2hEc3-.js.map → CanvasStateV1-Bq48qhv5.js.map} +1 -1
  5. package/dist/ContextualToolbars-CkLjHNPn.js +5833 -0
  6. package/dist/ContextualToolbars-CkLjHNPn.js.map +1 -0
  7. package/dist/EditorCanvasImpl-Bv4yagew.js +81 -0
  8. package/dist/EditorCanvasImpl-Bv4yagew.js.map +1 -0
  9. package/dist/EditorContext-5QpqAhjh.js +1184 -0
  10. package/dist/{EditorContext-CGkfmbgo.js.map → EditorContext-5QpqAhjh.js.map} +1 -1
  11. package/dist/{FontAnalyzer-CLv7_msL.js → FontAnalyzer-DIlqmyuf.js} +35 -35
  12. package/dist/FontAnalyzer-DIlqmyuf.js.map +1 -0
  13. package/dist/{ElementFactory-CuHSAPfg.js → ImportManager-D--7JnvW.js} +699 -476
  14. package/dist/ImportManager-D--7JnvW.js.map +1 -0
  15. package/dist/MenuButton-CeoEAtzP.js +7444 -0
  16. package/dist/MenuButton-CeoEAtzP.js.map +1 -0
  17. package/dist/SnowconeCanvas-C_O-aeaQ.js +1166 -0
  18. package/dist/SnowconeCanvas-C_O-aeaQ.js.map +1 -0
  19. package/dist/advanced.mjs +266 -264
  20. package/dist/advanced.mjs.map +1 -1
  21. package/dist/api/embed.d.ts +1 -1
  22. package/dist/components/ContextualToolbars.d.ts +8 -0
  23. package/dist/components/editor/EditorAdd.d.ts +11 -0
  24. package/dist/components/editor/EditorCanvasImpl.d.ts +6 -0
  25. package/dist/components/editor/EditorControls.d.ts +14 -0
  26. package/dist/components/editor/EditorHistory.d.ts +11 -0
  27. package/dist/components/editor/EditorLayers.d.ts +16 -0
  28. package/dist/components/editor/EditorMenu.d.ts +11 -0
  29. package/dist/components/editor/RootInternals.d.ts +7 -0
  30. package/dist/components/editor/index.d.ts +20 -0
  31. package/dist/components/embed/addElementTypes.d.ts +9 -0
  32. package/dist/contexts/EditorContext.d.ts +38 -0
  33. package/dist/core/preview-registry.d.ts +34 -0
  34. package/dist/{editorErrors-BY4Pdg7a.js → editorErrors-DXNfVXtD.js} +2 -2
  35. package/dist/{editorErrors-BY4Pdg7a.js.map → editorErrors-DXNfVXtD.js.map} +1 -1
  36. package/dist/embed-Cdbjay9i.js +961 -0
  37. package/dist/embed-Cdbjay9i.js.map +1 -0
  38. package/dist/embed.mjs +5 -5
  39. package/dist/index.mjs +7 -7
  40. package/dist/internals.mjs +12 -12
  41. package/dist/{template-fields-Z9x13sjM.js → template-fields-DgoBtajp.js} +266 -240
  42. package/dist/template-fields-DgoBtajp.js.map +1 -0
  43. package/dist/testing.mjs +3 -3
  44. package/dist/{usePieceGuideBundle-C1ipFnZd.js → usePieceGuideBundle-DVOISsB1.js} +2 -2
  45. package/dist/{usePieceGuideBundle-C1ipFnZd.js.map → usePieceGuideBundle-DVOISsB1.js.map} +1 -1
  46. package/dist/validation-0IscSfRb.js +9304 -0
  47. package/dist/validation-0IscSfRb.js.map +1 -0
  48. package/package.json +1 -1
  49. package/dist/EditorCanvasImpl-DgXvuWXX.js +0 -70
  50. package/dist/EditorCanvasImpl-DgXvuWXX.js.map +0 -1
  51. package/dist/EditorContext-CGkfmbgo.js +0 -1178
  52. package/dist/ElementFactory-CuHSAPfg.js.map +0 -1
  53. package/dist/FontAnalyzer-CLv7_msL.js.map +0 -1
  54. package/dist/ImportManager-C_wBjWaV.js.map +0 -1
  55. package/dist/SnowconeCanvas-wdckG-6O.js +0 -1179
  56. package/dist/SnowconeCanvas-wdckG-6O.js.map +0 -1
  57. package/dist/UnifiedFontService-Dsu5cwfT.js +0 -1478
  58. package/dist/UnifiedFontService-Dsu5cwfT.js.map +0 -1
  59. package/dist/embed-32ZVWfmj.js +0 -746
  60. package/dist/embed-32ZVWfmj.js.map +0 -1
  61. package/dist/iconify-D6eVIEy4.js +0 -1089
  62. package/dist/iconify-D6eVIEy4.js.map +0 -1
  63. package/dist/template-fields-Z9x13sjM.js.map +0 -1
  64. package/dist/validation-C795COGQ.js +0 -19959
  65. package/dist/validation-C795COGQ.js.map +0 -1
@@ -1,1178 +0,0 @@
1
- import { jsx as H } from "react/jsx-runtime";
2
- import { useContext as J, useSyncExternalStore as et, useCallback as a, createContext as q, useRef as fe, useState as b, useEffect as Ce, useMemo as M } from "react";
3
- import { y as Ue, N as tt, a9 as nt, aa as ot, G as Be, ab as rt, ac as it, ad as ct, ae as st, af as dt, c as _e, z as at, ag as lt, ah as ut, ai as mt, E as ft, L as He, I as At, g as pt, S as ht, aj as xt, ak as Ve } from "./FontAnalyzer-CLv7_msL.js";
4
- const ke = q(null), yt = () => () => {
5
- }, Ne = () => 0;
6
- function Zt() {
7
- const t = J(ke), e = et(
8
- t ? t.subscribe : yt,
9
- t ? t.getVersion : Ne,
10
- t ? t.getVersion : Ne
11
- );
12
- return a(
13
- (r) => !!(t && r && t.getBoundLayer(r)),
14
- // `version` is the reactivity key: a registry change must mint a new
15
- // callback so memoized consumers re-evaluate.
16
- [t, e]
17
- );
18
- }
19
- class Et extends Error {
20
- constructor(e, r, o = {}) {
21
- super(`[Editor] ${e}: ${r}`), this.name = "EditorError", this.code = e, this.data = { code: e, ...o };
22
- }
23
- }
24
- function $t(t) {
25
- return t instanceof Error && t.name === "EditorError" && "code" in t;
26
- }
27
- function Gt() {
28
- var t;
29
- return typeof Ue < "u" && ((t = Ue.env) == null ? void 0 : t.NODE_ENV) !== "production";
30
- }
31
- const me = _e("useCommandHistory");
32
- function St(t, e, r, o) {
33
- const i = fe(new tt(r)), n = J(ke), c = a(
34
- (s, u) => {
35
- const S = s == null ? void 0 : s.name;
36
- if (!n || !S) return;
37
- const h = n.getBoundLayer(S);
38
- if (h)
39
- throw new Et(
40
- "E_BOUND_LAYER_MUTATION",
41
- `cannot ${u} layer "${S}" — a mounted <${h.part} layer={design.layer("${S}")}> is bound to it. Unmount that field first, or keep the layer and set its text through the field / its binding instead.`,
42
- { layer: S, part: h.part, operation: u, docSlug: "embed-mode" }
43
- );
44
- },
45
- [n]
46
- ), [x, V] = b({
47
- canUndo: !1,
48
- canRedo: !1,
49
- // Per-artboard state for the active artboard
50
- canUndoActiveArtboard: !1,
51
- canRedoActiveArtboard: !1
52
- }), d = a(() => {
53
- const s = i.current, u = r.getActiveArtboardId();
54
- V({
55
- canUndo: s.canUndo(),
56
- canRedo: s.canRedo(),
57
- // Per-artboard state - only check active artboard's history
58
- canUndoActiveArtboard: u ? s.canUndoArtboard(u) : !1,
59
- canRedoActiveArtboard: u ? s.canRedoArtboard(u) : !1
60
- });
61
- }, [r]), N = a(
62
- (s, u) => {
63
- s && s.name !== u.name && c(s, "rename");
64
- const S = new nt(
65
- u.id,
66
- s || null,
67
- u,
68
- (w) => {
69
- e((B) => B.map((C) => C.id === w.id ? w : C));
70
- }
71
- ), h = r.getArtboardIdForElement(u.id);
72
- if (h)
73
- i.current.executeOnArtboard(h, S);
74
- else {
75
- const w = r.getActiveArtboardId();
76
- w && i.current.executeOnArtboard(w, S);
77
- }
78
- d();
79
- },
80
- [e, r, d, c]
81
- ), y = a(
82
- (s, u, S, h) => {
83
- const w = u || r.getActiveArtboardId();
84
- if (!w) {
85
- me.warn("No active artboard to add element to");
86
- return;
87
- }
88
- const B = new ot(
89
- s,
90
- (C) => {
91
- const D = C;
92
- e((v) => {
93
- if (h) {
94
- const U = v.findIndex((P) => P.id === h);
95
- if (U !== -1) {
96
- const P = [...v];
97
- return P.splice(U, 0, D), P;
98
- }
99
- }
100
- if (S) {
101
- const U = v.findIndex((P) => P.id === S);
102
- if (U !== -1) {
103
- const P = [...v];
104
- return P.splice(U + 1, 0, D), P;
105
- }
106
- for (let P = 0; P < v.length; P++) {
107
- const G = v[P];
108
- if (G instanceof Be && G.children) {
109
- const X = G.children.findIndex((ee) => ee.id === S);
110
- if (X !== -1) {
111
- const ee = G.clone();
112
- ee.children.splice(X + 1, 0, D);
113
- const le = [...v];
114
- return le[P] = ee, le;
115
- }
116
- }
117
- }
118
- }
119
- return [...v, D];
120
- }), r.addElementToArtboard(C.id, w);
121
- },
122
- (C) => {
123
- e((D) => D.filter((v) => v.id !== C)), r.removeElementFromArtboard(C);
124
- }
125
- );
126
- i.current.executeOnArtboard(w, B), d();
127
- },
128
- [e, r, d]
129
- ), _ = a(
130
- (s) => {
131
- c(s, "delete");
132
- const u = r.getArtboardIdForElement(s.id);
133
- if (!u) {
134
- me.warn("Element not found in any artboard");
135
- return;
136
- }
137
- const S = new rt(
138
- s,
139
- (h) => {
140
- e((w) => [...w, h]), r.addElementToArtboard(h.id, u);
141
- },
142
- (h) => {
143
- e((w) => w.filter((B) => B.id !== h)), r.removeElementFromArtboard(h);
144
- }
145
- );
146
- i.current.executeOnArtboard(u, S), d();
147
- },
148
- [e, r, d, c]
149
- ), O = a(
150
- (s) => {
151
- const u = new it(s, r);
152
- i.current.executeGlobal(u), d(), o == null || o();
153
- },
154
- [r, d, o]
155
- ), R = a(
156
- (s) => {
157
- const u = new ct(s, r);
158
- i.current.executeGlobal(u), d(), o == null || o();
159
- },
160
- [r, d, o]
161
- ), p = a(
162
- (s, u, S) => {
163
- const h = new st(s, u, S, r);
164
- i.current.executeGlobal(h), d(), o == null || o();
165
- },
166
- [r, d, o]
167
- ), m = a(
168
- (s) => {
169
- if (s.length === 0)
170
- return;
171
- const u = r.getActiveArtboardId();
172
- if (!u) {
173
- me.warn("No active artboard for batch execution");
174
- return;
175
- }
176
- const S = s.map((h) => new class extends Object {
177
- execute() {
178
- h.execute();
179
- }
180
- undo() {
181
- h.undo();
182
- }
183
- }());
184
- i.current.executeBatchOnArtboard(u, S), d();
185
- },
186
- [r, d]
187
- ), F = a(() => {
188
- i.current.undo() && (d(), o == null || o());
189
- }, [d, o]), f = a(() => {
190
- i.current.redo() && (d(), o == null || o());
191
- }, [d, o]), E = a(() => {
192
- const s = r.getActiveArtboardId();
193
- s && i.current.undoArtboard(s) && (d(), o == null || o());
194
- }, [r, d, o]), k = a(() => {
195
- const s = r.getActiveArtboardId();
196
- s && i.current.redoArtboard(s) && (d(), o == null || o());
197
- }, [r, d, o]), z = a(() => {
198
- i.current.clear(), d();
199
- }, [d]), L = a(
200
- (s) => {
201
- i.current.clearArtboardHistory(s), d();
202
- },
203
- [d]
204
- ), Q = fe(null);
205
- Ce(() => {
206
- const s = r.getActiveArtboardId();
207
- s !== Q.current && (Q.current = s, d());
208
- });
209
- const ne = a(
210
- (s, u, S) => {
211
- const h = t.map((C) => C.id), w = r.getArtboardIdForElement(s);
212
- if (!w) {
213
- me.warn("Element not found in any artboard");
214
- return;
215
- }
216
- const B = new dt(s, u, S, h, (C) => {
217
- e((D) => {
218
- const v = new Map(D.map((U) => [U.id, U]));
219
- return C.map((U) => v.get(U)).filter(Boolean);
220
- });
221
- });
222
- i.current.executeOnArtboard(w, B), d();
223
- },
224
- [t, e, r, d]
225
- );
226
- return {
227
- // Element operations
228
- executeElementUpdate: N,
229
- executeAddElement: y,
230
- executeRemoveElement: _,
231
- executeReorderElement: ne,
232
- // Batch operations
233
- executeCommandBatch: m,
234
- // Artboard operations
235
- executeCreateArtboard: O,
236
- executeDeleteArtboard: R,
237
- executeUpdateArtboard: p,
238
- // Undo/redo (smart - considers last operation and active artboard)
239
- undo: F,
240
- redo: f,
241
- // Undo/redo for active artboard only (element operations)
242
- undoActiveArtboard: E,
243
- redoActiveArtboard: k,
244
- clearHistory: z,
245
- clearArtboardHistory: L,
246
- // State (smart - considers last operation)
247
- canUndo: x.canUndo,
248
- canRedo: x.canRedo,
249
- // State for active artboard only
250
- canUndoActiveArtboard: x.canUndoActiveArtboard,
251
- canRedoActiveArtboard: x.canRedoActiveArtboard,
252
- historyManager: i.current
253
- };
254
- }
255
- function te(t) {
256
- return t && "fontSize" in t && "color" in t && "fontFamily" in t;
257
- }
258
- function bt(t, e) {
259
- const [r, o] = b(32), [i, n] = b("#333333"), [c, x] = b("Arial"), [V, d] = b("center");
260
- Ce(() => {
261
- if (t && te(t)) {
262
- const p = t.transformType === "circle" && "getEffectiveFontSize" in t ? Math.round(t.getEffectiveFontSize()) : Math.round(t.fontSize), m = t.color, F = t.fontFamily, f = t.textAlign;
263
- o((E) => E !== p ? p : E), n((E) => E !== m ? m : E), x((E) => E !== F ? F : E), d((E) => E !== f ? f : E);
264
- }
265
- }, [t]);
266
- const N = a(
267
- (p) => {
268
- if (!t || !te(t)) return;
269
- const m = Math.max(lt, Math.min(ut, r + p));
270
- o(m);
271
- const F = t.clone();
272
- F.transformType === "circle" && "setEffectiveFontSize" in F ? F.setEffectiveFontSize(m) : F.setFontSize(m), e(F);
273
- },
274
- [t, r, e]
275
- ), y = a(
276
- (p) => {
277
- if (!t || !te(t)) return;
278
- o(p);
279
- const m = t.clone();
280
- m.transformType === "circle" && "setEffectiveFontSize" in m ? m.setEffectiveFontSize(p) : m.setFontSize(p), e(m);
281
- },
282
- [t, e]
283
- ), _ = a(
284
- (p) => {
285
- if (!t || !te(t)) return;
286
- n(p);
287
- const m = t.clone();
288
- if (m.color = p, m.richText)
289
- for (const F of m.richText.spans)
290
- F.style.color = void 0;
291
- e(m);
292
- },
293
- [t, e]
294
- ), O = a(
295
- (p) => {
296
- if (!t || !te(t)) return;
297
- const m = t.fontFamily;
298
- m !== p && at.clearCache(m), x(p);
299
- const F = t.clone();
300
- F.fontFamily = p, e(F);
301
- },
302
- [t, e]
303
- ), R = a(
304
- (p) => {
305
- if (!t || !te(t)) return;
306
- d(p);
307
- const m = t.clone();
308
- m.textAlign = p, e(m);
309
- },
310
- [t, e]
311
- );
312
- return {
313
- // State
314
- fontSize: r,
315
- fontColor: i,
316
- fontFamily: c,
317
- textAlign: V,
318
- // State setters (for UI only)
319
- setFontSize: o,
320
- setFontColor: n,
321
- setFontFamily: x,
322
- setTextAlign: d,
323
- // Update functions (update element + UI)
324
- updateFontSize: N,
325
- setFontSizeValue: y,
326
- updateFontColor: _,
327
- updateFontFamily: O,
328
- updateTextAlign: R
329
- };
330
- }
331
- const We = "data-preserve-selection";
332
- function It(t) {
333
- if (!(t instanceof Element))
334
- return !1;
335
- let e = t;
336
- const r = [];
337
- for (; e; ) {
338
- const o = e.id ? `#${e.id}` : "", i = e.className ? `.${String(e.className).split(" ").slice(0, 2).join(".")}` : "";
339
- if (r.push(`${e.tagName.toLowerCase()}${o}${i}`), e.hasAttribute(We))
340
- return !0;
341
- const n = e.getAttribute("role");
342
- if (n === "dialog" || n === "alertdialog" || n === "menu" || n === "listbox")
343
- return !0;
344
- const c = e.getAttribute("data-slot");
345
- if (c && (c.includes("popover") || c.includes("dialog")) || e.hasAttribute("data-radix-popper-content-wrapper"))
346
- return !0;
347
- e = e.parentElement;
348
- }
349
- return !1;
350
- }
351
- const Xt = {
352
- [We]: ""
353
- };
354
- function wt(t) {
355
- const e = Ze(t);
356
- return e !== null && e < 0.5;
357
- }
358
- function Yt(t) {
359
- const e = Ze(t);
360
- return e !== null && e >= 0.5;
361
- }
362
- function Ze(t) {
363
- const e = t.trim();
364
- if (e.startsWith("#")) {
365
- const o = e.slice(1);
366
- let i, n, c;
367
- if (o.length === 3)
368
- i = parseInt(o[0] + o[0], 16), n = parseInt(o[1] + o[1], 16), c = parseInt(o[2] + o[2], 16);
369
- else if (o.length === 6)
370
- i = parseInt(o.slice(0, 2), 16), n = parseInt(o.slice(2, 4), 16), c = parseInt(o.slice(4, 6), 16);
371
- else return null;
372
- return Number.isNaN(i) || Number.isNaN(n) || Number.isNaN(c) ? null : De(i, n, c);
373
- }
374
- const r = e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
375
- return r ? De(Number(r[1]), Number(r[2]), Number(r[3])) : null;
376
- }
377
- function De(t, e, r) {
378
- const o = (i) => {
379
- const n = i / 255;
380
- return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
381
- };
382
- return 0.2126 * o(t) + 0.7152 * o(e) + 0.0722 * o(r);
383
- }
384
- const Tt = "#333333", gt = "#f4f4f5";
385
- function Ft(t) {
386
- return t && wt(t) ? gt : Tt;
387
- }
388
- const $e = q(null), Pt = 0.1, Rt = 4, Le = 0.25, Ct = ({
389
- children: t,
390
- artboardManager: e,
391
- canvasRef: r,
392
- viewPadding: o = 0.9
393
- }) => {
394
- const [i, n] = b(1), [c, x] = b({ x: 0, y: 0 }), [V, d] = b(!1), [N, y] = b(1), _ = a(() => {
395
- y(1), x({ x: 0, y: 0 });
396
- }, []), O = a(() => {
397
- n((f) => Math.min(f + Le, Rt));
398
- }, []), R = a(() => {
399
- n((f) => Math.max(f - Le, Pt));
400
- }, []), p = a(() => {
401
- const f = e.getActiveArtboard();
402
- if (!f || !r.current) return;
403
- let E = r.current.parentElement, k = 0, z = 0;
404
- for (; E && (k = E.clientWidth, z = E.clientHeight, !(k > 0 && z > 0)); )
405
- E = E.parentElement;
406
- if (!k || !z) return;
407
- const L = Math.min(
408
- k * o / f.width,
409
- z * o / f.height,
410
- 1
411
- // Never zoom in beyond 100%
412
- );
413
- n(L), x({ x: 0, y: 0 });
414
- }, [e, r, o]), m = a(() => {
415
- n(1), x({ x: 0, y: 0 });
416
- }, []), F = M(
417
- () => ({
418
- zoom: i,
419
- panOffset: c,
420
- isPanning: V,
421
- zoomIn: O,
422
- zoomOut: R,
423
- zoomToFit: p,
424
- resetView: m,
425
- setZoom: n,
426
- setPanOffset: x,
427
- setIsPanning: d,
428
- userZoom: N,
429
- setUserZoom: y,
430
- resetUserView: _
431
- }),
432
- [i, c, V, O, R, p, m, N, _]
433
- );
434
- return /* @__PURE__ */ H($e.Provider, { value: F, children: t });
435
- };
436
- function vt() {
437
- const t = J($e);
438
- if (!t)
439
- throw new Error("useViewportContext must be used within a ViewportProvider (or EditorProvider)");
440
- return t;
441
- }
442
- const Ge = q(null), zt = ({ children: t }) => {
443
- const [e, r] = b(null), [o, i] = b([]), [n, c] = b(null), [x, V] = b(null), [d, N] = b(!1), y = a((R) => {
444
- r(R);
445
- }, []), _ = a((R) => {
446
- c(R);
447
- }, []), O = M(
448
- () => ({
449
- selectedId: e,
450
- multiSelection: o,
451
- activeChildElement: n,
452
- hoveredElementId: x,
453
- hideHandles: d,
454
- setSelectedId: r,
455
- setMultiSelection: i,
456
- setHoveredElementId: V,
457
- setHideHandles: N,
458
- handleSelectionChange: y,
459
- handleActiveChildChange: _
460
- }),
461
- [
462
- e,
463
- o,
464
- n,
465
- x,
466
- d,
467
- y,
468
- _
469
- ]
470
- );
471
- return /* @__PURE__ */ H(Ge.Provider, { value: O, children: t });
472
- };
473
- function Ot() {
474
- const t = J(Ge);
475
- if (!t)
476
- throw new Error("useSelectionContext must be used within a SelectionProvider (or EditorProvider)");
477
- return t;
478
- }
479
- const Xe = q(null), Ut = ({ children: t, value: e }) => {
480
- const r = M(
481
- () => ({
482
- undo: e.undo,
483
- redo: e.redo,
484
- canUndo: e.canUndo,
485
- canRedo: e.canRedo,
486
- undoActiveArtboard: e.undoActiveArtboard,
487
- redoActiveArtboard: e.redoActiveArtboard,
488
- canUndoActiveArtboard: e.canUndoActiveArtboard,
489
- canRedoActiveArtboard: e.canRedoActiveArtboard
490
- }),
491
- [
492
- e.undo,
493
- e.redo,
494
- e.canUndo,
495
- e.canRedo,
496
- e.undoActiveArtboard,
497
- e.redoActiveArtboard,
498
- e.canUndoActiveArtboard,
499
- e.canRedoActiveArtboard
500
- ]
501
- );
502
- return /* @__PURE__ */ H(Xe.Provider, { value: r, children: t });
503
- };
504
- function jt() {
505
- const t = J(Xe);
506
- if (!t)
507
- throw new Error("useHistoryContext must be used within a HistoryProvider (or EditorProvider)");
508
- return t;
509
- }
510
- const Ye = q(null), Ht = ({ children: t }) => {
511
- const [e, r] = b(null), [o, i] = b(!1), [n, c] = b(0), [x, V] = b(!1), [d, N] = b(!1), y = M(
512
- () => ({
513
- expandedPanelType: e,
514
- setExpandedPanelType: r,
515
- isToolbarMenuOpen: o,
516
- setIsToolbarMenuOpen: i,
517
- textSelectionVersion: n,
518
- setTextSelectionVersion: c,
519
- isCanvasReady: x,
520
- setCanvasReady: V,
521
- isRotating: d,
522
- setIsRotating: N
523
- }),
524
- [e, o, n, x, d]
525
- );
526
- return /* @__PURE__ */ H(Ye.Provider, { value: y, children: t });
527
- };
528
- function Vt() {
529
- const t = J(Ye);
530
- if (!t)
531
- throw new Error("useToolStateContext must be used within a ToolStateProvider (or EditorProvider)");
532
- return t;
533
- }
534
- const je = q(null), Nt = ({ children: t, value: e }) => {
535
- const r = M(
536
- () => ({
537
- elements: e.elements,
538
- elementStore: e.elementStore,
539
- artboards: e.artboards,
540
- artboardManager: e.artboardManager,
541
- artboardVersion: e.artboardVersion,
542
- setElements: e.setElements,
543
- refreshArtboards: e.refreshArtboards,
544
- getElementById: e.getElementById,
545
- handleAddElement: e.handleAddElement,
546
- handleElementUpdate: e.handleElementUpdate,
547
- handleLoadWorkspace: e.handleLoadWorkspace,
548
- handleCopyElements: e.handleCopyElements,
549
- handlePasteElements: e.handlePasteElements,
550
- fontSize: e.fontSize,
551
- fontColor: e.fontColor,
552
- fontFamily: e.fontFamily,
553
- textAlign: e.textAlign,
554
- updateFontSize: e.updateFontSize,
555
- setFontSizeValue: e.setFontSizeValue,
556
- updateFontColor: e.updateFontColor,
557
- updateFontFamily: e.updateFontFamily,
558
- updateTextAlign: e.updateTextAlign,
559
- canvasRef: e.canvasRef,
560
- canvasEditorRef: e.canvasEditorRef
561
- }),
562
- [
563
- e.elements,
564
- e.elementStore,
565
- e.artboards,
566
- e.artboardManager,
567
- e.artboardVersion,
568
- e.setElements,
569
- e.refreshArtboards,
570
- e.getElementById,
571
- e.handleAddElement,
572
- e.handleElementUpdate,
573
- e.handleLoadWorkspace,
574
- e.handleCopyElements,
575
- e.handlePasteElements,
576
- e.fontSize,
577
- e.fontColor,
578
- e.fontFamily,
579
- e.textAlign,
580
- e.updateFontSize,
581
- e.setFontSizeValue,
582
- e.updateFontColor,
583
- e.updateFontFamily,
584
- e.updateTextAlign,
585
- e.canvasRef,
586
- e.canvasEditorRef
587
- ]
588
- );
589
- return /* @__PURE__ */ H(je.Provider, { value: r, children: t });
590
- };
591
- function Jt() {
592
- const t = J(je);
593
- if (!t)
594
- throw new Error("useElementsContext must be used within an ElementsProvider (or EditorProvider)");
595
- return t;
596
- }
597
- const Je = q(null), Dt = ({ children: t, value: e }) => {
598
- const r = M(
599
- () => ({
600
- executeElementUpdate: e.executeElementUpdate,
601
- executeAddElement: e.executeAddElement,
602
- executeRemoveElement: e.executeRemoveElement,
603
- executeReorderElement: e.executeReorderElement,
604
- executeCreateArtboard: e.executeCreateArtboard,
605
- executeDeleteArtboard: e.executeDeleteArtboard,
606
- executeUpdateArtboard: e.executeUpdateArtboard,
607
- executeCommandBatch: e.executeCommandBatch,
608
- undo: e.undo,
609
- redo: e.redo,
610
- canUndo: e.canUndo,
611
- canRedo: e.canRedo,
612
- undoActiveArtboard: e.undoActiveArtboard,
613
- redoActiveArtboard: e.redoActiveArtboard,
614
- canUndoActiveArtboard: e.canUndoActiveArtboard,
615
- canRedoActiveArtboard: e.canRedoActiveArtboard,
616
- historyManager: e.historyManager
617
- }),
618
- [
619
- e.executeElementUpdate,
620
- e.executeAddElement,
621
- e.executeRemoveElement,
622
- e.executeReorderElement,
623
- e.executeCreateArtboard,
624
- e.executeDeleteArtboard,
625
- e.executeUpdateArtboard,
626
- e.executeCommandBatch,
627
- e.undo,
628
- e.redo,
629
- e.canUndo,
630
- e.canRedo,
631
- e.undoActiveArtboard,
632
- e.redoActiveArtboard,
633
- e.canUndoActiveArtboard,
634
- e.canRedoActiveArtboard,
635
- e.historyManager
636
- ]
637
- );
638
- return /* @__PURE__ */ H(Je.Provider, { value: r, children: t });
639
- };
640
- function Kt() {
641
- const t = J(Je);
642
- if (!t)
643
- throw new Error("useCommandContext must be used within a CommandProvider (or EditorProvider)");
644
- return t;
645
- }
646
- const Lt = _e("EditorContext"), Ke = q(null), Bt = ({ children: t, artboardManager: e, canvasRef: r, canvasEditorRef: o }) => {
647
- const i = vt(), n = Ot(), c = Vt(), [x, V] = b(
648
- () => e.getAllArtboards()
649
- ), [d, N] = b(0), [y, _] = b(
650
- () => new He()
651
- ), O = M(() => y.toArray(), [y]), R = a((l) => {
652
- _((A) => {
653
- const T = A.toArray(), g = typeof l == "function" ? l(T) : l;
654
- return g === T ? A : He.fromArray(g);
655
- });
656
- }, []), p = a(
657
- (l) => y.get(l),
658
- [y]
659
- ), [m, F] = b([]), f = n.selectedId ? y.get(n.selectedId) : void 0, E = a(() => {
660
- V([...e.getAllArtboards()]), N((l) => l + 1);
661
- }, [e]), {
662
- historyManager: k,
663
- executeElementUpdate: z,
664
- executeAddElement: L,
665
- executeRemoveElement: Q,
666
- executeReorderElement: ne,
667
- executeCommandBatch: s,
668
- executeCreateArtboard: u,
669
- executeDeleteArtboard: S,
670
- executeUpdateArtboard: h,
671
- undo: w,
672
- redo: B,
673
- canUndo: C,
674
- canRedo: D,
675
- undoActiveArtboard: v,
676
- redoActiveArtboard: U,
677
- canUndoActiveArtboard: P,
678
- canRedoActiveArtboard: G
679
- } = St(
680
- O,
681
- R,
682
- e,
683
- E
684
- ), X = a(
685
- (l) => {
686
- const A = y.get(l.id);
687
- z(A, l);
688
- },
689
- [y, z]
690
- ), ee = a(
691
- (l) => {
692
- if (!f || !(f instanceof Be))
693
- return;
694
- const A = f.clone(), T = A.children.findIndex(
695
- (g) => g.id === l.id
696
- );
697
- T >= 0 && (A.children[T] = l, X(A));
698
- },
699
- [f, X]
700
- ), le = n.activeChildElement || f, Me = n.activeChildElement ? ee : X, {
701
- fontSize: Ae,
702
- fontColor: pe,
703
- fontFamily: he,
704
- textAlign: xe,
705
- updateFontSize: ye,
706
- setFontSizeValue: Ee,
707
- updateFontColor: Se,
708
- updateFontFamily: be,
709
- updateTextAlign: Ie
710
- } = bt(le, Me), we = a(
711
- async (l, A) => {
712
- var ve;
713
- const T = e.getActiveArtboardId();
714
- if (!T) {
715
- alert("Please create or select an artboard first");
716
- return;
717
- }
718
- const g = `element-${Date.now()}`, I = e.getActiveArtboard(), oe = I ? I.x + I.width / 2 : window.innerWidth / 2, re = I ? I.y + I.height / 2 : window.innerHeight / 2, W = ((ve = o.current) == null ? void 0 : ve.getZoom()) || i.zoom || 1;
719
- if (l === "image") {
720
- const ae = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", K = 200 / W, Y = A == null ? void 0 : A.src, $ = new At({
721
- id: g,
722
- x: oe,
723
- y: re,
724
- // Defer loading `src` until after the element is in the store so a
725
- // synchronously-cached image can't fire onLoadCallback too early.
726
- imageUrl: Y ? "" : ae,
727
- transformData: {
728
- type: "image",
729
- width: K,
730
- height: K,
731
- cropX: 0,
732
- cropY: 0,
733
- cropWidth: 1,
734
- cropHeight: 1,
735
- flipHorizontal: !1,
736
- flipVertical: !1,
737
- borderRadius: 0
738
- }
739
- });
740
- Y && ($.imageLoaded = !1, $.imageElement = null, $.isCropping = !1, $.imageUrl = Y, $.preserveDimensions = !1, $.onLoadCallback = (j) => {
741
- const ze = j.transformData.width, Oe = j.transformData.height, Re = Math.min(K / ze, K / Oe, 1);
742
- Re < 1 && (j.transformData.width = ze * Re, j.transformData.height = Oe * Re), j.transformData.cropX = 0, j.transformData.cropY = 0, j.transformData.cropWidth = 1, j.transformData.cropHeight = 1, z($, j);
743
- }), L($, T), n.setSelectedId($.id), Y && $.loadImage(Y);
744
- return;
745
- }
746
- let ie;
747
- const Z = {
748
- text: "custom",
749
- circle: "circle",
750
- wave: "wave",
751
- arch: "arch",
752
- shape: "shape"
753
- }[l] || "custom", se = pt(Z);
754
- if (!se || !se.Component)
755
- return;
756
- const de = e.getActiveArtboard(), Qe = de ? Math.min(de.width, de.height) * 0.1 : 80, Pe = de ? de.width * 0.5 : 300;
757
- if (l === "shape") {
758
- const ae = (A == null ? void 0 : A.shapeType) ?? "rectangle";
759
- let K = 200 / W, Y = 200 / W;
760
- ae === "ellipse" ? (K = 150 / W, Y = 250 / W) : ae === "line" && (K = 300 / W, Y = 8 / W), ie = new ht({
761
- id: g,
762
- x: oe,
763
- y: re,
764
- transformData: {
765
- type: "shape",
766
- shapeType: ae,
767
- width: K,
768
- height: Y,
769
- fillColor: "#3b82f6",
770
- fillOpacity: 1
771
- }
772
- });
773
- } else
774
- ie = new se.Component({
775
- id: g,
776
- text: "New Text",
777
- x: oe,
778
- y: re,
779
- fontSize: Qe,
780
- fontFamily: "Poppins",
781
- color: Ft(I == null ? void 0 : I.backgroundColor),
782
- transformData: Z === "arch" ? {
783
- type: "arch",
784
- width: Pe,
785
- archHeight: xt.archHeight
786
- } : Z === "wave" ? {
787
- type: "wave",
788
- width: Pe,
789
- amplitude: Ve.amplitude,
790
- frequency: Ve.frequency
791
- } : Z === "circle" ? {
792
- type: "circle",
793
- radius: Pe / 2
794
- } : void 0
795
- });
796
- e.addElementToArtboard(g, T), L(
797
- ie,
798
- T,
799
- n.selectedId || void 0
800
- ), n.setSelectedId(g);
801
- },
802
- [e, L, z, n, i.zoom, o]
803
- ), Te = a(() => {
804
- const l = [];
805
- if (n.multiSelection.length > 0) {
806
- const A = O.filter(
807
- (T) => n.multiSelection.includes(T.id)
808
- );
809
- l.push(...A);
810
- } else f && l.push(f);
811
- if (l.length > 0) {
812
- const A = l.map((T) => T.clone());
813
- F(A);
814
- }
815
- }, [f, n.multiSelection, O]), ge = a(() => {
816
- if (m.length === 0) return;
817
- const l = [], A = 30, T = 30;
818
- m.forEach((g) => {
819
- const I = y.get(g.id), oe = I ? I.x : g.x, re = I ? I.y : g.y, W = g.toJSON();
820
- delete W.id;
821
- const ie = g.constructor, ce = new ie(W);
822
- ce.x = oe + A, ce.y = re + T;
823
- let Z = null;
824
- if (I && (Z = e.getArtboardIdForElement(
825
- I.id
826
- )), Z || (Z = e.getActiveArtboardId()), !Z) {
827
- Lt.warn("[handlePasteElements] No artboard found for pasting");
828
- return;
829
- }
830
- const se = I ? I.id : void 0;
831
- L(ce, Z, se), l.push(ce.id);
832
- }), l.length === 1 ? n.handleSelectionChange(l[0]) : l.length > 1 && n.setMultiSelection(l);
833
- }, [
834
- m,
835
- y,
836
- e,
837
- L,
838
- n
839
- ]), ue = a(() => {
840
- if (c.expandedPanelType === "crop" && (f == null ? void 0 : f.transformType) === "image") {
841
- const l = f;
842
- if (l.isCropping) {
843
- const A = l.clone();
844
- A.exitCropMode(), z(l, A);
845
- }
846
- }
847
- c.setExpandedPanelType(null);
848
- }, [
849
- c.expandedPanelType,
850
- c.setExpandedPanelType,
851
- f,
852
- z
853
- ]);
854
- Ce(() => {
855
- const l = (A) => {
856
- const T = A.target;
857
- if (T.tagName === "CANVAS" || It(T))
858
- return;
859
- const I = document.activeElement;
860
- if (I != null && I.hasAttribute("data-preserve-selection")) {
861
- I.blur();
862
- return;
863
- }
864
- if (c.expandedPanelType !== null) {
865
- ue();
866
- return;
867
- }
868
- n.setSelectedId(null), n.setMultiSelection([]);
869
- };
870
- return document.addEventListener("pointerdown", l), () => document.removeEventListener("pointerdown", l);
871
- }, [c.expandedPanelType, ue, n]);
872
- const Fe = a(
873
- (l, A, T) => {
874
- e.clear(), l.forEach((g) => {
875
- e.createArtboard(g.toJSON());
876
- }), T && e.setActiveArtboard(T), V([...e.getAllArtboards()]), N((g) => g + 1), R(A), n.setSelectedId(null);
877
- },
878
- [e, n, R]
879
- ), qe = M(() => ({
880
- // From ViewportContext
881
- zoom: i.zoom,
882
- panOffset: i.panOffset,
883
- isPanning: i.isPanning,
884
- zoomIn: i.zoomIn,
885
- zoomOut: i.zoomOut,
886
- zoomToFit: i.zoomToFit,
887
- resetView: i.resetView,
888
- setZoom: i.setZoom,
889
- setPanOffset: i.setPanOffset,
890
- setIsPanning: i.setIsPanning,
891
- // From SelectionContext
892
- selectedId: n.selectedId,
893
- multiSelection: n.multiSelection,
894
- activeChildElement: n.activeChildElement,
895
- hoveredElementId: n.hoveredElementId,
896
- hideHandles: n.hideHandles,
897
- setSelectedId: n.setSelectedId,
898
- setMultiSelection: n.setMultiSelection,
899
- setHoveredElementId: n.setHoveredElementId,
900
- setHideHandles: n.setHideHandles,
901
- handleSelectionChange: n.handleSelectionChange,
902
- handleActiveChildChange: n.handleActiveChildChange,
903
- // From ToolStateContext
904
- expandedPanelType: c.expandedPanelType,
905
- setExpandedPanelType: c.setExpandedPanelType,
906
- isToolbarMenuOpen: c.isToolbarMenuOpen,
907
- setIsToolbarMenuOpen: c.setIsToolbarMenuOpen,
908
- textSelectionVersion: c.textSelectionVersion,
909
- setTextSelectionVersion: c.setTextSelectionVersion,
910
- isCanvasReady: c.isCanvasReady,
911
- setCanvasReady: c.setCanvasReady,
912
- isRotating: c.isRotating,
913
- setIsRotating: c.setIsRotating,
914
- // Cross-context handler
915
- clearExpandedPanel: ue,
916
- // Core state (element/artboard domain)
917
- artboardManager: e,
918
- artboards: x,
919
- elements: O,
920
- elementStore: y,
921
- getElementById: p,
922
- // Derived state (cross-context)
923
- selectedElement: f,
924
- // Refs
925
- canvasRef: r,
926
- canvasEditorRef: o,
927
- // Element setters
928
- setElements: R,
929
- // Artboard version counter
930
- artboardVersion: d,
931
- // Handlers
932
- refreshArtboards: E,
933
- handleElementUpdate: X,
934
- handleAddElement: we,
935
- handleLoadWorkspace: Fe,
936
- handleCopyElements: Te,
937
- handlePasteElements: ge,
938
- // Command history (undo/redo actions + execute functions)
939
- historyManager: k,
940
- executeElementUpdate: z,
941
- executeAddElement: L,
942
- executeRemoveElement: Q,
943
- executeReorderElement: ne,
944
- executeCommandBatch: s,
945
- executeCreateArtboard: u,
946
- executeDeleteArtboard: S,
947
- executeUpdateArtboard: h,
948
- undo: w,
949
- redo: B,
950
- canUndo: C,
951
- canRedo: D,
952
- undoActiveArtboard: v,
953
- redoActiveArtboard: U,
954
- canUndoActiveArtboard: P,
955
- canRedoActiveArtboard: G,
956
- // Element properties
957
- fontSize: Ae,
958
- fontColor: pe,
959
- fontFamily: he,
960
- textAlign: xe,
961
- updateFontSize: ye,
962
- setFontSizeValue: Ee,
963
- updateFontColor: Se,
964
- updateFontFamily: be,
965
- updateTextAlign: Ie
966
- }), [
967
- // Viewport
968
- i.zoom,
969
- i.panOffset,
970
- i.isPanning,
971
- i.zoomIn,
972
- i.zoomOut,
973
- i.zoomToFit,
974
- i.resetView,
975
- i.setZoom,
976
- i.setPanOffset,
977
- i.setIsPanning,
978
- // Selection
979
- n.selectedId,
980
- n.multiSelection,
981
- n.activeChildElement,
982
- n.hoveredElementId,
983
- n.hideHandles,
984
- n.setSelectedId,
985
- n.setMultiSelection,
986
- n.setHoveredElementId,
987
- n.setHideHandles,
988
- n.handleSelectionChange,
989
- n.handleActiveChildChange,
990
- // Tool state
991
- c.expandedPanelType,
992
- c.setExpandedPanelType,
993
- c.isToolbarMenuOpen,
994
- c.setIsToolbarMenuOpen,
995
- c.textSelectionVersion,
996
- c.setTextSelectionVersion,
997
- c.isCanvasReady,
998
- c.setCanvasReady,
999
- c.isRotating,
1000
- c.setIsRotating,
1001
- ue,
1002
- // Element/artboard domain
1003
- e,
1004
- x,
1005
- O,
1006
- y,
1007
- p,
1008
- f,
1009
- r,
1010
- o,
1011
- R,
1012
- d,
1013
- E,
1014
- X,
1015
- we,
1016
- Fe,
1017
- Te,
1018
- ge,
1019
- // Command history
1020
- k,
1021
- z,
1022
- L,
1023
- Q,
1024
- ne,
1025
- s,
1026
- u,
1027
- S,
1028
- h,
1029
- w,
1030
- B,
1031
- C,
1032
- D,
1033
- v,
1034
- U,
1035
- P,
1036
- G,
1037
- // Element properties
1038
- Ae,
1039
- pe,
1040
- he,
1041
- xe,
1042
- ye,
1043
- Ee,
1044
- Se,
1045
- be,
1046
- Ie
1047
- ]);
1048
- return /* @__PURE__ */ H(
1049
- Ut,
1050
- {
1051
- value: {
1052
- undo: w,
1053
- redo: B,
1054
- canUndo: C,
1055
- canRedo: D,
1056
- undoActiveArtboard: v,
1057
- redoActiveArtboard: U,
1058
- canUndoActiveArtboard: P,
1059
- canRedoActiveArtboard: G
1060
- },
1061
- children: /* @__PURE__ */ H(
1062
- Nt,
1063
- {
1064
- value: {
1065
- elements: O,
1066
- elementStore: y,
1067
- artboards: x,
1068
- artboardManager: e,
1069
- artboardVersion: d,
1070
- setElements: R,
1071
- refreshArtboards: E,
1072
- getElementById: p,
1073
- handleAddElement: we,
1074
- handleElementUpdate: X,
1075
- handleLoadWorkspace: Fe,
1076
- handleCopyElements: Te,
1077
- handlePasteElements: ge,
1078
- fontSize: Ae,
1079
- fontColor: pe,
1080
- fontFamily: he,
1081
- textAlign: xe,
1082
- updateFontSize: ye,
1083
- setFontSizeValue: Ee,
1084
- updateFontColor: Se,
1085
- updateFontFamily: be,
1086
- updateTextAlign: Ie,
1087
- canvasRef: r,
1088
- canvasEditorRef: o
1089
- },
1090
- children: /* @__PURE__ */ H(
1091
- Dt,
1092
- {
1093
- value: {
1094
- executeElementUpdate: z,
1095
- executeAddElement: L,
1096
- executeRemoveElement: Q,
1097
- executeReorderElement: ne,
1098
- executeCommandBatch: s,
1099
- executeCreateArtboard: u,
1100
- executeDeleteArtboard: S,
1101
- executeUpdateArtboard: h,
1102
- undo: w,
1103
- redo: B,
1104
- canUndo: C,
1105
- canRedo: D,
1106
- undoActiveArtboard: v,
1107
- redoActiveArtboard: U,
1108
- canUndoActiveArtboard: P,
1109
- canRedoActiveArtboard: G,
1110
- historyManager: k
1111
- },
1112
- children: /* @__PURE__ */ H(Ke.Provider, { value: qe, children: t })
1113
- }
1114
- )
1115
- }
1116
- )
1117
- }
1118
- );
1119
- }, Mt = ({
1120
- children: t,
1121
- initialArtboardConfig: e = {},
1122
- viewPadding: r = 0.9
1123
- }) => {
1124
- const [o] = b(() => {
1125
- const c = new ft(), x = {
1126
- name: e.name || "Artboard 1",
1127
- x: e.x ?? 0,
1128
- y: e.y ?? 0,
1129
- width: e.width ?? 1e3,
1130
- height: e.height ?? 1e3,
1131
- backgroundColor: e.backgroundColor || mt
1132
- };
1133
- return c.createArtboard(x), c;
1134
- }), i = fe(null), n = fe(null);
1135
- return /* @__PURE__ */ H(
1136
- Ct,
1137
- {
1138
- artboardManager: o,
1139
- canvasRef: i,
1140
- viewPadding: r,
1141
- children: /* @__PURE__ */ H(zt, { children: /* @__PURE__ */ H(Ht, { children: /* @__PURE__ */ H(
1142
- Bt,
1143
- {
1144
- artboardManager: o,
1145
- canvasRef: i,
1146
- canvasEditorRef: n,
1147
- children: t
1148
- }
1149
- ) }) })
1150
- }
1151
- );
1152
- }, qt = () => {
1153
- const t = J(Ke);
1154
- if (!t)
1155
- throw new Error("useEditor must be used within EditorProvider");
1156
- return t;
1157
- };
1158
- export {
1159
- ke as B,
1160
- Mt as E,
1161
- We as P,
1162
- vt as a,
1163
- Kt as b,
1164
- Jt as c,
1165
- jt as d,
1166
- Ot as e,
1167
- Vt as f,
1168
- Et as g,
1169
- $t as h,
1170
- Gt as i,
1171
- Zt as j,
1172
- wt as k,
1173
- Yt as l,
1174
- Xt as p,
1175
- It as s,
1176
- qt as u
1177
- };
1178
- //# sourceMappingURL=EditorContext-CGkfmbgo.js.map