@snowcone-app/canvas 0.14.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.
- package/dist/CanvasStateV1-BQD8fCBU.js +3699 -0
- package/dist/CanvasStateV1-BQD8fCBU.js.map +1 -0
- package/dist/ThemeContext-D9AaUw9v.js +1200 -0
- package/dist/ThemeContext-D9AaUw9v.js.map +1 -0
- package/dist/advanced.mjs +4 -4
- package/dist/api/embed.d.ts +14 -0
- package/dist/components/embed-realtime/RealtimeCanvas.d.ts +24 -1
- package/dist/contexts/EditorContext.d.ts +1 -0
- package/dist/embed.mjs +173 -158
- package/dist/embed.mjs.map +1 -1
- package/dist/index.mjs +47 -51
- package/dist/index.mjs.map +1 -1
- package/dist/internals.mjs +1 -1
- package/dist/rendering/PieceGuideRenderer.d.ts +2 -16
- package/dist/{template-fields-Dw-KK9DX.js → template-fields-PcSPApl5.js} +87 -82
- package/dist/template-fields-PcSPApl5.js.map +1 -0
- package/dist/testing.mjs +1 -1
- package/dist/utils/inkLuminance.d.ts +38 -0
- package/dist/{validation-BahKiJWj.js → validation-BpEod0Rn.js} +5570 -5590
- package/dist/validation-BpEod0Rn.js.map +1 -0
- package/package.json +3 -3
- package/dist/CanvasStateV1-CKsfggNP.js +0 -456
- package/dist/CanvasStateV1-CKsfggNP.js.map +0 -1
- package/dist/ThemeContext-Cl1JPVLZ.js +0 -1158
- package/dist/ThemeContext-Cl1JPVLZ.js.map +0 -1
- package/dist/schemas-B4UXytQB.js +0 -3250
- package/dist/schemas-B4UXytQB.js.map +0 -1
- package/dist/template-fields-Dw-KK9DX.js.map +0 -1
- package/dist/validation-BahKiJWj.js.map +0 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { c as nt, y as K, z as Oe, I as Ht, T as Pt, C as Ye } from "./HybridHistoryManager-NL3zyEl4.js";
|
|
2
|
-
import { jsxs as Z, jsx as w, Fragment as
|
|
3
|
-
import { useCallback as P, useMemo as ot, useRef as M, useEffect as C, Component as Xe, useState as _, forwardRef as
|
|
4
|
-
import { u as
|
|
5
|
-
import { aq as
|
|
2
|
+
import { jsxs as Z, jsx as w, Fragment as ue } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback as P, useMemo as ot, useRef as M, useEffect as C, Component as Xe, useState as _, forwardRef as fe, useImperativeHandle as Ve } from "react";
|
|
4
|
+
import { u as Wt, T as te, E as je, c as dt, b as At } from "./ThemeContext-D9AaUw9v.js";
|
|
5
|
+
import { aq as ee, ar as re, ag as Ke, ah as ne, ad as Ge, W as qe, J as Je, K as Qe, Q as Ze, O as _e, p as tr, z as er, ab as rr, Y as oe, F as nr, q as or, G as ar, r as sr, v as ir, u as cr, g as lr, a2 as dr, V as ur, a as fr, w as hr, as as mr } from "./validation-BpEod0Rn.js";
|
|
6
6
|
import { C as Tt, E as gr } from "./ImportManager-eotl7r5d.js";
|
|
7
|
-
import {
|
|
8
|
-
const
|
|
7
|
+
import { a as pr, o as ct, b as $, n as br, l as Y, u as ae, c as yr } from "./CanvasStateV1-BQD8fCBU.js";
|
|
8
|
+
const se = nt("useCommands");
|
|
9
9
|
function xr() {
|
|
10
|
-
const e =
|
|
10
|
+
const e = Wt(), {
|
|
11
11
|
undo: t,
|
|
12
12
|
redo: r,
|
|
13
13
|
canUndo: o,
|
|
@@ -21,9 +21,9 @@ function xr() {
|
|
|
21
21
|
executeDeleteArtboard: I,
|
|
22
22
|
executeUpdateArtboard: R
|
|
23
23
|
} = e, k = P(() => {
|
|
24
|
-
|
|
24
|
+
se.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
|
|
25
25
|
}, []), T = P((p) => {
|
|
26
|
-
|
|
26
|
+
se.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
|
|
27
27
|
}, []);
|
|
28
28
|
return {
|
|
29
29
|
// Undo/Redo
|
|
@@ -50,9 +50,9 @@ const vr = () => {
|
|
|
50
50
|
const { undo: e, redo: t, canUndo: r, canRedo: o } = xr();
|
|
51
51
|
return /* @__PURE__ */ Z("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
|
|
52
52
|
/* @__PURE__ */ w(
|
|
53
|
-
|
|
53
|
+
ee,
|
|
54
54
|
{
|
|
55
|
-
icon:
|
|
55
|
+
icon: re.undo,
|
|
56
56
|
onClick: e,
|
|
57
57
|
disabled: !r,
|
|
58
58
|
tooltip: "Undo",
|
|
@@ -60,9 +60,9 @@ const vr = () => {
|
|
|
60
60
|
}
|
|
61
61
|
),
|
|
62
62
|
/* @__PURE__ */ w(
|
|
63
|
-
|
|
63
|
+
ee,
|
|
64
64
|
{
|
|
65
|
-
icon:
|
|
65
|
+
icon: re.redo,
|
|
66
66
|
onClick: t,
|
|
67
67
|
disabled: !o,
|
|
68
68
|
tooltip: "Redo",
|
|
@@ -71,9 +71,9 @@ const vr = () => {
|
|
|
71
71
|
)
|
|
72
72
|
] });
|
|
73
73
|
}, he = nt("KitLayout"), lt = "canvas", Dt = 320;
|
|
74
|
-
let
|
|
74
|
+
let ie = !1;
|
|
75
75
|
function wr() {
|
|
76
|
-
|
|
76
|
+
ie || (ie = !0, Ke({
|
|
77
77
|
LayersPanel: qe,
|
|
78
78
|
EffectsPanel: Je,
|
|
79
79
|
ExportPanel: Qe,
|
|
@@ -82,14 +82,14 @@ function wr() {
|
|
|
82
82
|
ArtboardTabs: tr,
|
|
83
83
|
ContextualToolbars: er,
|
|
84
84
|
ZoomControls: rr,
|
|
85
|
-
MenuButton:
|
|
85
|
+
MenuButton: oe,
|
|
86
86
|
CropPanel: nr
|
|
87
|
-
}),
|
|
88
|
-
component:
|
|
87
|
+
}), ne("add-element-menu", {
|
|
88
|
+
component: oe,
|
|
89
89
|
label: "Add Element",
|
|
90
90
|
icon: "gravity-ui:plus",
|
|
91
91
|
position: "topbar"
|
|
92
|
-
}),
|
|
92
|
+
}), ne("undo-redo-controls", {
|
|
93
93
|
component: vr,
|
|
94
94
|
label: "Undo / Redo",
|
|
95
95
|
icon: "lucide:undo-2",
|
|
@@ -97,7 +97,7 @@ function wr() {
|
|
|
97
97
|
}));
|
|
98
98
|
}
|
|
99
99
|
function wt({ ids: e }) {
|
|
100
|
-
return !e || e.length === 0 ? null : /* @__PURE__ */ w(
|
|
100
|
+
return !e || e.length === 0 ? null : /* @__PURE__ */ w(ue, { children: e.map((t) => {
|
|
101
101
|
var n;
|
|
102
102
|
if (t === lt) return null;
|
|
103
103
|
const r = Ge(t);
|
|
@@ -131,7 +131,7 @@ function Er({ kit: e, canvas: t }) {
|
|
|
131
131
|
for (const v of E) N(v.contentRect.width);
|
|
132
132
|
});
|
|
133
133
|
return S.observe(p), () => S.disconnect();
|
|
134
|
-
}, [d, e.name]), i ? /* @__PURE__ */ w(
|
|
134
|
+
}, [d, e.name]), i ? /* @__PURE__ */ w(ue, { children: t }) : /* @__PURE__ */ Z("div", { ref: c, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
|
|
135
135
|
o && /* @__PURE__ */ w(
|
|
136
136
|
"div",
|
|
137
137
|
{
|
|
@@ -576,7 +576,7 @@ function Nt(e, t, r, o) {
|
|
|
576
576
|
const i = Math.max(e, t), c = o / i;
|
|
577
577
|
return Math.min(c, r);
|
|
578
578
|
}
|
|
579
|
-
const ge =
|
|
579
|
+
const ge = fe((e, t) => {
|
|
580
580
|
const {
|
|
581
581
|
exportConfig: r,
|
|
582
582
|
imageConfig: o,
|
|
@@ -601,7 +601,7 @@ const ge = ue((e, t) => {
|
|
|
601
601
|
style: B,
|
|
602
602
|
enableShortcuts: X,
|
|
603
603
|
overlay: ut
|
|
604
|
-
} = e,
|
|
604
|
+
} = e, Lt = R, at = e.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), tt = e.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", kt = e.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, G = e.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, z = e.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, ft = e.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", ht = e.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, L = e.initialImage ?? (o == null ? void 0 : o.src), Ot = e.initialImageAlignment ?? (o == null ? void 0 : o.alignment) ?? "center", Yt = e.initialImageScale ?? (o == null ? void 0 : o.scale) ?? 1, Xt = e.initialImageScaleMode ?? (o == null ? void 0 : o.scaleMode) ?? "cover", xe = e.width ?? (n == null ? void 0 : n.width) ?? 1200, ve = e.height ?? (n == null ? void 0 : n.height) ?? 1200, we = e.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, Ee = e.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, Ae = e.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), ke = e.maxHeight ?? (n == null ? void 0 : n.maxHeight), Se = e.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, Re = e.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, Vt = e.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), jt = e.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), Ce = e.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), Kt = e.pieceGuides, Ie = e.pieceFocus, Fe = X ?? !0, st = ot(() => sr(a ?? "pro-studio"), [a]);
|
|
605
605
|
C(() => {
|
|
606
606
|
var l;
|
|
607
607
|
if (typeof K < "u" && ((l = K.env) == null ? void 0 : l.NODE_ENV) === "development" && st) {
|
|
@@ -621,13 +621,13 @@ const ge = ue((e, t) => {
|
|
|
621
621
|
const {
|
|
622
622
|
elements: q,
|
|
623
623
|
setElements: gt,
|
|
624
|
-
selectedId:
|
|
624
|
+
selectedId: Gt,
|
|
625
625
|
artboardManager: F,
|
|
626
626
|
refreshArtboards: Me,
|
|
627
627
|
historyManager: Te,
|
|
628
628
|
isCanvasReady: St,
|
|
629
629
|
setCanvasReady: pt
|
|
630
|
-
} =
|
|
630
|
+
} = Wt(), { createArtboard: De, selectArtboard: Ne, artboards: H } = cr(), { exportArtboard: et, exportAllArtboards: bt, exportArtboardAsBlob: rt, exportAllArtboardsAsBlobs: yt } = lr();
|
|
631
631
|
Ve(t, () => ({
|
|
632
632
|
exportArtboards: async (l = {}) => {
|
|
633
633
|
const u = l.format || tt, A = l.scale || G, f = l.all ?? !1;
|
|
@@ -672,13 +672,13 @@ const ge = ue((e, t) => {
|
|
|
672
672
|
return { [u.name]: f };
|
|
673
673
|
});
|
|
674
674
|
}, [N, et, rt, F, tt, G, z]);
|
|
675
|
-
const [
|
|
675
|
+
const [qt, xt] = _("idle"), [Jt, Rt] = _(null), Ct = M(void 0), It = M(!1), Qt = M(!1), [Be, $e] = _(!1), He = M(0), Pe = M(0), Ft = M(!1);
|
|
676
676
|
C(() => {
|
|
677
677
|
if (It.current) return;
|
|
678
678
|
It.current = !0;
|
|
679
679
|
const l = s || [{ name: "Design", width: xe, height: ve }], u = F.getAllArtboards();
|
|
680
680
|
if (u.length > 0) {
|
|
681
|
-
const A = l[0], f = u[0], m =
|
|
681
|
+
const A = l[0], f = u[0], m = Kt ? "transparent" : void 0, g = (h) => h.exportBackground ?? (!!h.backgroundColor && h.backgroundColor !== "transparent");
|
|
682
682
|
f.name = A.name, f.width = A.width, f.height = A.height, f.clipShape = A.clipShape, f.exportBackground = g(A), A.backgroundColor ? f.backgroundColor = A.backgroundColor : m && (f.backgroundColor = m);
|
|
683
683
|
for (let h = 1; h < l.length; h++)
|
|
684
684
|
De(l[h].width, l[h].height, {
|
|
@@ -691,8 +691,8 @@ const ge = ue((e, t) => {
|
|
|
691
691
|
}
|
|
692
692
|
Me();
|
|
693
693
|
}, []), C(() => {
|
|
694
|
-
if (!(!d || d.length === 0) && !
|
|
695
|
-
|
|
694
|
+
if (!(!d || d.length === 0) && !Qt.current && It.current) {
|
|
695
|
+
Qt.current = !0, $e(!0);
|
|
696
696
|
try {
|
|
697
697
|
const l = gr.createManyFromJSON(d), u = F.getAllArtboards();
|
|
698
698
|
if (u.length > 0) {
|
|
@@ -774,7 +774,7 @@ const ge = ue((e, t) => {
|
|
|
774
774
|
throw new Error("No artboards available");
|
|
775
775
|
const A = [];
|
|
776
776
|
for (const f of u) {
|
|
777
|
-
const m = s == null ? void 0 : s.find((y) => y.name === f.name), g = (m == null ? void 0 : m.scaleMode) ||
|
|
777
|
+
const m = s == null ? void 0 : s.find((y) => y.name === f.name), g = (m == null ? void 0 : m.scaleMode) || Xt, h = await Wr(
|
|
778
778
|
L,
|
|
779
779
|
{
|
|
780
780
|
artboard: {
|
|
@@ -783,8 +783,8 @@ const ge = ue((e, t) => {
|
|
|
783
783
|
x: f.x,
|
|
784
784
|
y: f.y
|
|
785
785
|
},
|
|
786
|
-
alignment: (m == null ? void 0 : m.fitAlign) ||
|
|
787
|
-
scale:
|
|
786
|
+
alignment: (m == null ? void 0 : m.fitAlign) || Ot,
|
|
787
|
+
scale: Yt,
|
|
788
788
|
scaleMode: g,
|
|
789
789
|
marginTop: m == null ? void 0 : m.fitMarginTop,
|
|
790
790
|
marginRight: m == null ? void 0 : m.fitMarginRight,
|
|
@@ -815,15 +815,15 @@ const ge = ue((e, t) => {
|
|
|
815
815
|
});
|
|
816
816
|
}
|
|
817
817
|
})();
|
|
818
|
-
}, [L,
|
|
818
|
+
}, [L, Ot, Yt, Xt]);
|
|
819
819
|
const vt = M(I);
|
|
820
820
|
vt.current = I, C(() => {
|
|
821
821
|
var l;
|
|
822
|
-
(l = vt.current) == null || l.call(vt,
|
|
823
|
-
}, [
|
|
824
|
-
const
|
|
825
|
-
|
|
826
|
-
const l =
|
|
822
|
+
(l = vt.current) == null || l.call(vt, Gt);
|
|
823
|
+
}, [Gt]);
|
|
824
|
+
const Zt = M(x);
|
|
825
|
+
Zt.current = x, C(() => {
|
|
826
|
+
const l = Zt.current;
|
|
827
827
|
if (!l) return;
|
|
828
828
|
const u = F.getActiveArtboard(), A = {
|
|
829
829
|
// Stamp each element with the NAME of the artboard it lives on (the
|
|
@@ -920,7 +920,7 @@ const ge = ue((e, t) => {
|
|
|
920
920
|
}
|
|
921
921
|
}, [k, p, kt, tt, G, z, ft, ht, et, bt, rt, yt, H, F, q, at, U]);
|
|
922
922
|
C(() => {
|
|
923
|
-
|
|
923
|
+
Lt !== void 0 && Lt > 0 && J.warn(
|
|
924
924
|
"autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
|
|
925
925
|
);
|
|
926
926
|
}, []), C(() => {
|
|
@@ -935,9 +935,9 @@ const ge = ue((e, t) => {
|
|
|
935
935
|
elements: q,
|
|
936
936
|
hasInitialElements: ze,
|
|
937
937
|
initialElementsLoaded: Be
|
|
938
|
-
}),
|
|
938
|
+
}), _t = M(!1);
|
|
939
939
|
C(() => {
|
|
940
|
-
Mt && !
|
|
940
|
+
Mt && !_t.current && (_t.current = !0, v == null || v());
|
|
941
941
|
}, [Mt, v]), Rr({
|
|
942
942
|
config: at ? {
|
|
943
943
|
enabled: at.enabled ?? !0,
|
|
@@ -972,7 +972,7 @@ const ge = ue((e, t) => {
|
|
|
972
972
|
recoverable: !1
|
|
973
973
|
});
|
|
974
974
|
}, [U]);
|
|
975
|
-
return
|
|
975
|
+
return qt === "loading" ? /* @__PURE__ */ w(
|
|
976
976
|
"div",
|
|
977
977
|
{
|
|
978
978
|
className: W,
|
|
@@ -985,7 +985,7 @@ const ge = ue((e, t) => {
|
|
|
985
985
|
},
|
|
986
986
|
children: /* @__PURE__ */ w(dr, { size: 48 })
|
|
987
987
|
}
|
|
988
|
-
) :
|
|
988
|
+
) : qt === "error" && Jt ? /* @__PURE__ */ w(
|
|
989
989
|
"div",
|
|
990
990
|
{
|
|
991
991
|
className: W,
|
|
@@ -1000,7 +1000,7 @@ const ge = ue((e, t) => {
|
|
|
1000
1000
|
},
|
|
1001
1001
|
children: /* @__PURE__ */ Z("div", { className: "sc:text-center", children: [
|
|
1002
1002
|
/* @__PURE__ */ w("div", { className: "sc:font-medium", children: "Failed to load image" }),
|
|
1003
|
-
/* @__PURE__ */ w("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children:
|
|
1003
|
+
/* @__PURE__ */ w("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children: Jt.message })
|
|
1004
1004
|
] })
|
|
1005
1005
|
}
|
|
1006
1006
|
) : /* @__PURE__ */ w(ur, { kit: st, children: /* @__PURE__ */ w("div", { className: `sc-root ${W || ""}`, style: { ...B, position: "relative" }, children: /* @__PURE__ */ Z(
|
|
@@ -1058,11 +1058,11 @@ const ge = ue((e, t) => {
|
|
|
1058
1058
|
showRotationHandle: Se,
|
|
1059
1059
|
enableShortcuts: Fe,
|
|
1060
1060
|
canvasCutouts: Ce,
|
|
1061
|
-
pieceGuides:
|
|
1061
|
+
pieceGuides: Kt,
|
|
1062
1062
|
pieceFocus: Ie
|
|
1063
1063
|
}
|
|
1064
1064
|
);
|
|
1065
|
-
return /* @__PURE__ */ w(Er, { kit: st, canvas:
|
|
1065
|
+
return /* @__PURE__ */ w(Er, { kit: st, canvas: Vt || jt ? /* @__PURE__ */ w("div", { className: Vt, style: jt, children: l }) : l });
|
|
1066
1066
|
})(),
|
|
1067
1067
|
ut
|
|
1068
1068
|
]
|
|
@@ -1070,13 +1070,17 @@ const ge = ue((e, t) => {
|
|
|
1070
1070
|
) }) });
|
|
1071
1071
|
});
|
|
1072
1072
|
ge.displayName = "SnowconeCanvasInner";
|
|
1073
|
-
const zr =
|
|
1073
|
+
const zr = fe((e, t) => {
|
|
1074
1074
|
var c;
|
|
1075
|
-
const { inheritTheme: r, externalProvider: o, services: n } = e, a = e.viewPadding ?? ((c = e.layoutConfig) == null ? void 0 : c.viewPadding), s = /* @__PURE__ */ w(ge, { ref: t, ...e }), i = o ? /* @__PURE__ */ w(
|
|
1075
|
+
const { inheritTheme: r, externalProvider: o, services: n } = e, a = e.viewPadding ?? ((c = e.layoutConfig) == null ? void 0 : c.viewPadding), s = /* @__PURE__ */ w(ge, { ref: t, ...e }), i = o ? /* @__PURE__ */ w(te, { defaultTheme: "light", passive: r, children: s }) : /* @__PURE__ */ w(te, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ w(je, { viewPadding: a, children: s }) });
|
|
1076
1076
|
return n ? /* @__PURE__ */ w(fr, { services: n, children: i }) : i;
|
|
1077
1077
|
});
|
|
1078
1078
|
zr.displayName = "SnowconeCanvas";
|
|
1079
|
-
|
|
1079
|
+
function pn() {
|
|
1080
|
+
const { selectedElement: e } = Wt();
|
|
1081
|
+
return e ?? null;
|
|
1082
|
+
}
|
|
1083
|
+
const Lr = 3e3, ce = {
|
|
1080
1084
|
text: "useTextBinding",
|
|
1081
1085
|
image: "useImageBinding",
|
|
1082
1086
|
font: "useFontBinding"
|
|
@@ -1089,19 +1093,19 @@ const Lr = 3e3, ie = {
|
|
|
1089
1093
|
image: "image",
|
|
1090
1094
|
font: "text"
|
|
1091
1095
|
}, Bt = /* @__PURE__ */ new Set();
|
|
1092
|
-
function
|
|
1096
|
+
function le(e) {
|
|
1093
1097
|
return e instanceof Pt ? "text" : e instanceof Ht ? "image" : "other";
|
|
1094
1098
|
}
|
|
1095
1099
|
function Xr(e, t, r) {
|
|
1096
|
-
const o = `[${
|
|
1100
|
+
const o = `[${ce[e]}]`, n = `the binding is dead (isConnected: false, ${Or[e]} is a no-op)`, a = Yr[e], s = r.getAllByName(t);
|
|
1097
1101
|
if (s.length > 0) {
|
|
1098
|
-
const d = [...new Set(s.map(
|
|
1102
|
+
const d = [...new Set(s.map(le))], x = a === "text" ? "image" : "text", I = d.length === 1 && d[0] === x ? ` Bind it with ${ce[x]}("${t}") instead.` : "";
|
|
1099
1103
|
return `${o} the layer named "${t}" is ${d.join("/")}, not ${a} — ${n}.${I}`;
|
|
1100
1104
|
}
|
|
1101
|
-
const i = r.getAll().filter((d) => d.name).map((d) => `"${d.name}" (${
|
|
1105
|
+
const i = r.getAll().filter((d) => d.name).map((d) => `"${d.name}" (${le(d)})`), c = i.length ? `Named layers on this canvas: ${i.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${a}(…, { name: '${t}' }) or the element's \`name\` property.`;
|
|
1102
1106
|
return `${o} no ${a} layer named "${t}" exists — ${n}. ${c}`;
|
|
1103
1107
|
}
|
|
1104
|
-
function
|
|
1108
|
+
function Ut(e, t, r, o) {
|
|
1105
1109
|
C(() => {
|
|
1106
1110
|
var s;
|
|
1107
1111
|
if (o || typeof K > "u" || ((s = K.env) == null ? void 0 : s.NODE_ENV) === "production") return;
|
|
@@ -1115,7 +1119,7 @@ function Wt(e, t, r, o) {
|
|
|
1115
1119
|
}
|
|
1116
1120
|
const Vr = () => {
|
|
1117
1121
|
}, jr = [];
|
|
1118
|
-
function
|
|
1122
|
+
function bn(e) {
|
|
1119
1123
|
const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((s) => s instanceof Pt), [t, e]), n = P(
|
|
1120
1124
|
(a) => {
|
|
1121
1125
|
for (const s of o) {
|
|
@@ -1125,7 +1129,7 @@ function pn(e) {
|
|
|
1125
1129
|
},
|
|
1126
1130
|
[o, r]
|
|
1127
1131
|
);
|
|
1128
|
-
return
|
|
1132
|
+
return Ut("text", e, t, o.length > 0), o.length === 0 ? { text: "", setText: Vr, element: null, elements: jr, isConnected: !1 } : {
|
|
1129
1133
|
text: o[0].getText(),
|
|
1130
1134
|
setText: n,
|
|
1131
1135
|
element: o[0],
|
|
@@ -1159,7 +1163,7 @@ function qr(e, t, r) {
|
|
|
1159
1163
|
};
|
|
1160
1164
|
}
|
|
1161
1165
|
}
|
|
1162
|
-
function
|
|
1166
|
+
function yn(e, t) {
|
|
1163
1167
|
const r = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: n } = dt(), { executeElementUpdate: a } = At(), s = ot(() => o.getAllByName(e).filter((k) => k instanceof Ht), [o, e]), i = M(/* @__PURE__ */ new Map());
|
|
1164
1168
|
for (const R of s)
|
|
1165
1169
|
if (!i.current.has(R.id)) {
|
|
@@ -1194,7 +1198,7 @@ function bn(e, t) {
|
|
|
1194
1198
|
[r]
|
|
1195
1199
|
// Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
|
|
1196
1200
|
);
|
|
1197
|
-
return
|
|
1201
|
+
return Ut("image", e, o, s.length > 0), s.length === 0 ? { imageUrl: "", setImageUrl: Kr, element: null, elements: Gr, isConnected: !1 } : {
|
|
1198
1202
|
imageUrl: s[0].imageUrl,
|
|
1199
1203
|
setImageUrl: I,
|
|
1200
1204
|
element: s[0],
|
|
@@ -1221,7 +1225,7 @@ function Qr(e, t, r) {
|
|
|
1221
1225
|
const o = e.clone(), n = e, a = o;
|
|
1222
1226
|
return j(n.color, t) && (typeof a.setColor == "function" ? a.setColor(r) : a.color = r), j((s = n.transformData) == null ? void 0 : s.fillColor, t) && (a.transformData = { ...a.transformData, fillColor: r }), j((i = n.transformData) == null ? void 0 : i.strokeColor, t) && (a.transformData = { ...a.transformData, strokeColor: r }), ((c = n.stroke) == null ? void 0 : c.enabled) === !0 && j(n.stroke.color, t) && (a.stroke = { ...a.stroke, color: r }), o;
|
|
1223
1227
|
}
|
|
1224
|
-
function
|
|
1228
|
+
function xn(e) {
|
|
1225
1229
|
const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), [o, n] = _(() => Et(e)), [a, s] = _(e);
|
|
1226
1230
|
e !== a && (s(e), n(Et(e)));
|
|
1227
1231
|
const i = ot(
|
|
@@ -1244,7 +1248,7 @@ function yn(e) {
|
|
|
1244
1248
|
}
|
|
1245
1249
|
const Zr = () => {
|
|
1246
1250
|
}, _r = [];
|
|
1247
|
-
function
|
|
1251
|
+
function vn(e) {
|
|
1248
1252
|
const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((s) => s instanceof Pt), [t, e]), n = P(
|
|
1249
1253
|
(a) => {
|
|
1250
1254
|
mr.loadGoogleFontByName(a);
|
|
@@ -1257,7 +1261,7 @@ function xn(e) {
|
|
|
1257
1261
|
},
|
|
1258
1262
|
[o, r]
|
|
1259
1263
|
);
|
|
1260
|
-
return
|
|
1264
|
+
return Ut("font", e, t, o.length > 0), o.length === 0 ? { fontFamily: "", setFontFamily: Zr, element: null, elements: _r, isConnected: !1 } : {
|
|
1261
1265
|
fontFamily: o[0].fontFamily,
|
|
1262
1266
|
setFontFamily: n,
|
|
1263
1267
|
element: o[0],
|
|
@@ -1265,7 +1269,7 @@ function xn(e) {
|
|
|
1265
1269
|
isConnected: !0
|
|
1266
1270
|
};
|
|
1267
1271
|
}
|
|
1268
|
-
function
|
|
1272
|
+
function wn(e) {
|
|
1269
1273
|
const { elementStore: t } = dt();
|
|
1270
1274
|
return e ? t.getByName(e) ?? null : null;
|
|
1271
1275
|
}
|
|
@@ -1336,7 +1340,7 @@ function nn(e) {
|
|
|
1336
1340
|
};
|
|
1337
1341
|
return !r && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (i.cropX = t.cropX, i.cropY = t.cropY, i.cropWidth = t.cropWidth, i.cropHeight = t.cropHeight, i.needsCropPixelConversion = !0), t.flipHorizontal && (i.flipHorizontal = t.flipHorizontal), t.flipVertical && (i.flipVertical = t.flipVertical), t.borderRadius && (i.borderRadius = t.borderRadius), e.opacity !== void 0 && (i.opacity = e.opacity), e.distressEffect && (i.distressEffect = e.distressEffect), ((d = e.masks) == null ? void 0 : d.length) > 0 && (i.masks = e.masks), e.blendMode && (i.blendMode = e.blendMode), e.knockoutParts && (i.knockoutParts = e.knockoutParts), e.stroke && (i.stroke = e.stroke), be(i);
|
|
1338
1342
|
}
|
|
1339
|
-
const
|
|
1343
|
+
const de = "center";
|
|
1340
1344
|
function on(e) {
|
|
1341
1345
|
return e === "top-left" || e === "left" || e === "bottom-left" ? "left" : e === "top-right" || e === "right" || e === "bottom-right" ? "right" : "center";
|
|
1342
1346
|
}
|
|
@@ -1370,7 +1374,7 @@ function sn(e, t, r) {
|
|
|
1370
1374
|
cropHeight: a
|
|
1371
1375
|
};
|
|
1372
1376
|
}
|
|
1373
|
-
class
|
|
1377
|
+
class zt {
|
|
1374
1378
|
constructor(t) {
|
|
1375
1379
|
if (this.els = [], this.idCounter = 0, !(t.width > 0) || !(t.height > 0))
|
|
1376
1380
|
throw new Error("design(): artboard width and height must be positive numbers");
|
|
@@ -1395,7 +1399,7 @@ class Ut {
|
|
|
1395
1399
|
const r = t.artboards.find((n) => n.name === t.activeArtboard) ?? t.artboards[0];
|
|
1396
1400
|
if (!r)
|
|
1397
1401
|
throw new Error("DesignBuilder.fromState(): state has no artboards");
|
|
1398
|
-
const o = new
|
|
1402
|
+
const o = new zt({
|
|
1399
1403
|
name: r.name,
|
|
1400
1404
|
width: r.width,
|
|
1401
1405
|
height: r.height,
|
|
@@ -1457,7 +1461,7 @@ class Ut {
|
|
|
1457
1461
|
}
|
|
1458
1462
|
/** An anchored image element (not full-bleed). */
|
|
1459
1463
|
image(t, r = {}) {
|
|
1460
|
-
const { width: o, height: n } = this.artboard, a = r.width ?? Math.round(o / 3), s = r.height ?? (r.aspectRatio ? Math.round(a / r.aspectRatio) : a), { x: i, y: c } = $t(r.anchor ??
|
|
1464
|
+
const { width: o, height: n } = this.artboard, a = r.width ?? Math.round(o / 3), s = r.height ?? (r.aspectRatio ? Math.round(a / r.aspectRatio) : a), { x: i, y: c } = $t(r.anchor ?? de, a, s, o, n, r.padding ?? 0), d = {
|
|
1461
1465
|
id: this.nextId("img"),
|
|
1462
1466
|
transformType: "image",
|
|
1463
1467
|
x: i,
|
|
@@ -1505,7 +1509,7 @@ class Ut {
|
|
|
1505
1509
|
}
|
|
1506
1510
|
/** An anchored vector shape. */
|
|
1507
1511
|
shape(t, r = {}) {
|
|
1508
|
-
const { width: o, height: n } = this.artboard, a = r.size ?? Math.round(o / 6), s = typeof a == "number" ? a : a.width, i = typeof a == "number" ? a : a.height, { x: c, y: d } = $t(r.anchor ??
|
|
1512
|
+
const { width: o, height: n } = this.artboard, a = r.size ?? Math.round(o / 6), s = typeof a == "number" ? a : a.width, i = typeof a == "number" ? a : a.height, { x: c, y: d } = $t(r.anchor ?? de, s, i, o, n, r.padding ?? 0), x = {
|
|
1509
1513
|
type: "shape",
|
|
1510
1514
|
shapeType: t,
|
|
1511
1515
|
width: s,
|
|
@@ -1555,8 +1559,8 @@ class Ut {
|
|
|
1555
1559
|
return en(this.toJSON());
|
|
1556
1560
|
}
|
|
1557
1561
|
}
|
|
1558
|
-
function
|
|
1559
|
-
return new
|
|
1562
|
+
function En(e) {
|
|
1563
|
+
return new zt(e);
|
|
1560
1564
|
}
|
|
1561
1565
|
const ye = "personalization", cn = pr("type", [
|
|
1562
1566
|
ct({
|
|
@@ -1572,7 +1576,7 @@ const ye = "personalization", cn = pr("type", [
|
|
|
1572
1576
|
name: $().min(1),
|
|
1573
1577
|
label: $(),
|
|
1574
1578
|
placeholder: $().optional(),
|
|
1575
|
-
fit:
|
|
1579
|
+
fit: ae([Y("cover"), Y("contain")]).optional(),
|
|
1576
1580
|
group: $().optional()
|
|
1577
1581
|
}),
|
|
1578
1582
|
ct({
|
|
@@ -1585,12 +1589,12 @@ const ye = "personalization", cn = pr("type", [
|
|
|
1585
1589
|
type: Y("select"),
|
|
1586
1590
|
name: $().min(1),
|
|
1587
1591
|
label: $(),
|
|
1588
|
-
property:
|
|
1592
|
+
property: ae([Y("text"), Y("imageUrl"), Y("fontFamily")]),
|
|
1589
1593
|
options: yr(ct({ label: $(), value: $() })).min(1),
|
|
1590
1594
|
group: $().optional()
|
|
1591
1595
|
})
|
|
1592
1596
|
]);
|
|
1593
|
-
function
|
|
1597
|
+
function An(e) {
|
|
1594
1598
|
if (!e || typeof e != "object") return [];
|
|
1595
1599
|
const t = e[ye];
|
|
1596
1600
|
if (!Array.isArray(t)) return [];
|
|
@@ -1602,26 +1606,27 @@ function En(e) {
|
|
|
1602
1606
|
}
|
|
1603
1607
|
return r;
|
|
1604
1608
|
}
|
|
1605
|
-
function
|
|
1609
|
+
function kn(e, t) {
|
|
1606
1610
|
return { ...e, [ye]: t };
|
|
1607
1611
|
}
|
|
1608
1612
|
export {
|
|
1609
1613
|
tn as C,
|
|
1610
|
-
|
|
1614
|
+
zt as D,
|
|
1611
1615
|
kr as E,
|
|
1612
1616
|
zr as S,
|
|
1613
1617
|
ye as T,
|
|
1614
|
-
|
|
1618
|
+
xn as a,
|
|
1615
1619
|
xr as b,
|
|
1616
1620
|
Mr as c,
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
+
En as d,
|
|
1622
|
+
wn as e,
|
|
1623
|
+
vn as f,
|
|
1624
|
+
yn as g,
|
|
1621
1625
|
pn as h,
|
|
1622
|
-
|
|
1626
|
+
bn as i,
|
|
1627
|
+
An as r,
|
|
1623
1628
|
en as s,
|
|
1624
1629
|
Rr as u,
|
|
1625
|
-
|
|
1630
|
+
kn as w
|
|
1626
1631
|
};
|
|
1627
|
-
//# sourceMappingURL=template-fields-
|
|
1632
|
+
//# sourceMappingURL=template-fields-PcSPApl5.js.map
|