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