@snowcone-app/canvas 0.31.0 → 0.32.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/ERROR_CONTRACT.md +11 -0
- package/STYLING_CONTRACT.md +3 -3
- package/dist/{CanvasRenderer-hpJ05JGO.js → CanvasRenderer-1j-twIbs.js} +443 -431
- package/dist/{CanvasRenderer-hpJ05JGO.js.map → CanvasRenderer-1j-twIbs.js.map} +1 -1
- package/dist/{CanvasStateV1-jLOibojY.js → CanvasStateV1-BmC1JfPv.js} +810 -802
- package/dist/{CanvasStateV1-jLOibojY.js.map → CanvasStateV1-BmC1JfPv.js.map} +1 -1
- package/dist/ContextualToolbars-BKU8IoAM.js +6474 -0
- package/dist/ContextualToolbars-BKU8IoAM.js.map +1 -0
- package/dist/{EditorCanvasImpl-P2GHPNA3.js → EditorCanvasImpl-4voOsj2k.js} +7 -7
- package/dist/{EditorCanvasImpl-P2GHPNA3.js.map → EditorCanvasImpl-4voOsj2k.js.map} +1 -1
- package/dist/{ExportManager-Bkzzyxgw.js → ExportManager-Ci81K6xA.js} +662 -518
- package/dist/ExportManager-Ci81K6xA.js.map +1 -0
- package/dist/{FontAnalyzer-BYhwxDhe.js → FontAnalyzer-BrKY6XYn.js} +1256 -1146
- package/dist/FontAnalyzer-BrKY6XYn.js.map +1 -0
- package/dist/{ImagePanel-CEr0_FYy.js → ImagePanel-ntJBepby.js} +6 -6
- package/dist/{ImagePanel-CEr0_FYy.js.map → ImagePanel-ntJBepby.js.map} +1 -1
- package/dist/{SnowconeCanvas-Fa0isFpO.js → SnowconeCanvas-CgQdiBXv.js} +10 -10
- package/dist/{SnowconeCanvas-Fa0isFpO.js.map → SnowconeCanvas-CgQdiBXv.js.map} +1 -1
- package/dist/advanced.mjs +14 -14
- package/dist/components/ImageToolbar.d.ts +8 -0
- package/dist/components/ShapeToolbar.d.ts +8 -0
- package/dist/components/TextToolbar.d.ts +5 -1
- package/dist/components/toolbars/EmbeddedToolbarLayout.d.ts +4 -0
- package/dist/components/toolbars/GroupElementToolbar.d.ts +8 -0
- package/dist/components/toolbars/SecondaryPanels.d.ts +24 -1
- package/dist/components/toolbars/index.d.ts +2 -2
- package/dist/core/BaseElement.d.ts +2 -1
- package/dist/core/shape-fill.d.ts +31 -0
- package/dist/{custom-icons-Co4rcW0S.js → custom-icons-DTWtkJ9N.js} +2 -2
- package/dist/{custom-icons-Co4rcW0S.js.map → custom-icons-DTWtkJ9N.js.map} +1 -1
- package/dist/{design-builder-CBG2hKc8.js → design-builder-BpbYUYtK.js} +55 -55
- package/dist/{design-builder-CBG2hKc8.js.map → design-builder-BpbYUYtK.js.map} +1 -1
- package/dist/{embed-D4TIzO7g.js → embed-C69x0jHc.js} +10 -10
- package/dist/{embed-D4TIzO7g.js.map → embed-C69x0jHc.js.map} +1 -1
- package/dist/embed.mjs +7 -7
- package/dist/errors/editorError.d.ts +7 -0
- package/dist/{guards-DgZuwVgu.js → guards-BhaQgJrE.js} +2 -2
- package/dist/{guards-DgZuwVgu.js.map → guards-BhaQgJrE.js.map} +1 -1
- package/dist/hooks/elementPatch.d.ts +8 -3
- package/dist/index.mjs +9 -9
- package/dist/internals.mjs +123 -123
- package/dist/internals.mjs.map +1 -1
- package/dist/rendering/LayerEffectsRenderer.d.ts +24 -0
- package/dist/rendering/renderer-types.d.ts +3 -1
- package/dist/state/CanvasStateV1.d.ts +17 -0
- package/dist/style.css +1 -1
- package/dist/{template-fields-CvFcr5zy.js → template-fields-D-2oLhCi.js} +5 -5
- package/dist/{template-fields-CvFcr5zy.js.map → template-fields-D-2oLhCi.js.map} +1 -1
- package/dist/testing.mjs +3 -3
- package/dist/types/index.d.ts +84 -1
- package/dist/types/public.d.ts +3 -2
- package/dist/{useCommands-bPXY9rCh.js → useCommands-DwnZHUg8.js} +435 -418
- package/dist/useCommands-DwnZHUg8.js.map +1 -0
- package/dist/{usePieceGuideBundle-Bj98nPk0.js → usePieceGuideBundle-CnSmYrmM.js} +2 -2
- package/dist/{usePieceGuideBundle-Bj98nPk0.js.map → usePieceGuideBundle-CnSmYrmM.js.map} +1 -1
- package/dist/utils/featureApplied.d.ts +4 -0
- package/dist/{validation-CsTlSvJJ.js → validation-DyUOjRGa.js} +11 -11
- package/dist/{validation-CsTlSvJJ.js.map → validation-DyUOjRGa.js.map} +1 -1
- package/dist/workers/export-worker.bundle.string.d.ts +1 -1
- package/example/package.json +1 -1
- package/package.json +1 -1
- package/dist/ContextualToolbars-DRbuUE7W.js +0 -6061
- package/dist/ContextualToolbars-DRbuUE7W.js.map +0 -1
- package/dist/ExportManager-Bkzzyxgw.js.map +0 -1
- package/dist/FontAnalyzer-BYhwxDhe.js.map +0 -1
- package/dist/useCommands-bPXY9rCh.js.map +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { c as U, G as
|
|
2
|
-
let
|
|
3
|
-
function
|
|
4
|
-
|
|
1
|
+
import { c as U, G as ve, ac as He, ad as Ve, ae as je, af as we, ag as Gn, ah as qe, ai as Q, aa as Xe, ab as Ye, aj as on, ak as Hn, C as Jn, R as Ke, al as Je, am as q, an as Ze, Q as Qe, ao as wn, ap as Se, P as nt, S as et, I as An, $ as tt, a3 as at, X as rt, V as st, a1 as it, Y as ot, Z as ct, A as Zn, M as lt, E as Ce } from "./FontAnalyzer-BrKY6XYn.js";
|
|
2
|
+
let ke = null;
|
|
3
|
+
function dt(e) {
|
|
4
|
+
ke = e;
|
|
5
5
|
}
|
|
6
|
-
function
|
|
7
|
-
return
|
|
6
|
+
function Ua() {
|
|
7
|
+
return ke;
|
|
8
8
|
}
|
|
9
|
-
const
|
|
9
|
+
const ft = U("TextureManager"), ln = class ln {
|
|
10
10
|
/**
|
|
11
11
|
* Load a texture by ID or URL
|
|
12
12
|
*/
|
|
@@ -20,7 +20,7 @@ const ct = U("TextureManager"), ln = class ln {
|
|
|
20
20
|
s.crossOrigin = "anonymous", s.onload = () => {
|
|
21
21
|
this.cache.set(n, s), this.cache.set(t, s), this.loading.delete(n), this.loading.delete(t), r(s);
|
|
22
22
|
}, s.onerror = () => {
|
|
23
|
-
|
|
23
|
+
ft.error("Failed to load texture:", t), this.loading.delete(n), this.loading.delete(t), o(new Error(`Failed to load texture: ${t}`));
|
|
24
24
|
}, s.src = t;
|
|
25
25
|
});
|
|
26
26
|
return this.loading.set(n, a), t !== n && this.loading.set(t, a), a;
|
|
@@ -97,28 +97,28 @@ ln.cache = /* @__PURE__ */ new Map(), ln.loading = /* @__PURE__ */ new Map(), ln
|
|
|
97
97
|
}
|
|
98
98
|
];
|
|
99
99
|
let Z = ln;
|
|
100
|
-
const
|
|
100
|
+
const ut = U("ElementPreviewRenderer"), pt = {
|
|
101
101
|
width: 40,
|
|
102
102
|
height: 40,
|
|
103
103
|
padding: 4,
|
|
104
104
|
backgroundColor: "transparent"
|
|
105
105
|
};
|
|
106
|
-
function
|
|
106
|
+
function ht(e, n = {}) {
|
|
107
107
|
jn();
|
|
108
|
-
const t = { ...
|
|
108
|
+
const t = { ...pt, ...n }, a = document.createElement("canvas");
|
|
109
109
|
a.width = t.width, a.height = t.height;
|
|
110
110
|
const r = a.getContext("2d");
|
|
111
111
|
if (!r)
|
|
112
112
|
return "";
|
|
113
113
|
t.backgroundColor !== "transparent" && (r.fillStyle = t.backgroundColor, r.fillRect(0, 0, t.width, t.height)), r.save();
|
|
114
114
|
try {
|
|
115
|
-
e instanceof
|
|
115
|
+
e instanceof ve ? gt(r, e, t) : bt(r, e, t);
|
|
116
116
|
} catch (o) {
|
|
117
|
-
|
|
117
|
+
ut.warn("Failed to generate preview:", o);
|
|
118
118
|
}
|
|
119
119
|
return r.restore(), a.toDataURL("image/png");
|
|
120
120
|
}
|
|
121
|
-
function
|
|
121
|
+
function bt(e, n, t) {
|
|
122
122
|
var f;
|
|
123
123
|
const a = ((f = n.getBoundingBox) == null ? void 0 : f.call(n)) || { x: 0, y: 0, width: 100, height: 100 }, r = a.width, o = a.height;
|
|
124
124
|
if (r === 0 || o === 0) {
|
|
@@ -138,7 +138,7 @@ function Qn(e, n, t) {
|
|
|
138
138
|
const a = n.transformType || "Element";
|
|
139
139
|
e.fillText(a, t.width / 2, t.height / 2);
|
|
140
140
|
}
|
|
141
|
-
function
|
|
141
|
+
function gt(e, n, t) {
|
|
142
142
|
const a = t.width - t.padding * 2, r = t.height - t.padding * 2, o = t.padding, s = t.padding;
|
|
143
143
|
e.fillStyle = "#888888", e.strokeStyle = "#666666", e.lineWidth = 1;
|
|
144
144
|
const c = r * 0.7, i = s + r * 0.3, l = a * 0.4, d = r * 0.2;
|
|
@@ -148,21 +148,21 @@ function pt(e, n, t) {
|
|
|
148
148
|
i + c / 2
|
|
149
149
|
));
|
|
150
150
|
}
|
|
151
|
-
function
|
|
151
|
+
function Wa(e, n, t) {
|
|
152
152
|
var l;
|
|
153
153
|
e.translate(n.x || 0, n.y || 0), e.rotate(-(n.rotation || 0) * Math.PI / 180);
|
|
154
154
|
const a = n, r = a.fontSize || 24, o = a.fontFamily || "Arial", s = a.bold || !1, c = a.italic || !1;
|
|
155
|
-
e.font =
|
|
155
|
+
e.font = He(r, o, s, c);
|
|
156
156
|
const i = a.text || "";
|
|
157
157
|
if (n.transformType === "custom") {
|
|
158
|
-
const u = ((l = n.transformData) == null ? void 0 : l.width) || 200, p =
|
|
158
|
+
const u = ((l = n.transformData) == null ? void 0 : l.width) || 200, p = Ve(i, r, o, s, c), f = Math.min(p, u), $ = r * 1.2;
|
|
159
159
|
e.rect(-f / 2, -$ / 2, f, $);
|
|
160
160
|
} else {
|
|
161
161
|
const d = e.measureText(i).width;
|
|
162
162
|
e.beginPath(), e.moveTo(-d / 2, 0), e.lineTo(d / 2, 0), e.moveTo(-d / 2, -r), e.lineTo(d / 2, -r), e.moveTo(-d / 2, r * 0.2), e.lineTo(d / 2, r * 0.2);
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
|
-
function
|
|
165
|
+
function mt(e, n) {
|
|
166
166
|
if (!n.transformData) return;
|
|
167
167
|
const { borderRadius: t = 0 } = n.transformData, a = n.transformData.width ?? 100, r = n.transformData.height ?? 100;
|
|
168
168
|
if (e.translate(n.x || 0, n.y || 0), e.rotate(-(n.rotation || 0) * Math.PI / 180), e.beginPath(), t > 0) {
|
|
@@ -171,22 +171,22 @@ function ht(e, n) {
|
|
|
171
171
|
} else
|
|
172
172
|
e.rect(-a / 2, -r / 2, a, r);
|
|
173
173
|
}
|
|
174
|
-
function
|
|
174
|
+
function za(e, n, t, a) {
|
|
175
175
|
e.beginPath(), e.arc(n, t, a, 0, Math.PI * 2), e.closePath();
|
|
176
176
|
}
|
|
177
|
-
function
|
|
177
|
+
function Ga(e, n, t, a, r) {
|
|
178
178
|
e.beginPath(), e.rect(n, t, a, r), e.closePath();
|
|
179
179
|
}
|
|
180
|
-
function
|
|
180
|
+
function Te(e, n) {
|
|
181
181
|
e.strokeStyle = n.color, e.lineWidth = n.width, e.lineCap = n.lineCap || "butt", e.lineJoin = n.lineJoin || "miter", n.miterLimit !== void 0 && (e.miterLimit = n.miterLimit), n.dashArray && n.dashArray.length > 0 ? e.setLineDash(n.dashArray) : e.setLineDash([]), n.opacity !== void 0 && (e.globalAlpha = n.opacity);
|
|
182
182
|
}
|
|
183
|
-
function
|
|
183
|
+
function yt(e, n) {
|
|
184
184
|
if (typeof OffscreenCanvas < "u")
|
|
185
185
|
return new OffscreenCanvas(e, n);
|
|
186
186
|
const t = document.createElement("canvas");
|
|
187
187
|
return t.width = e, t.height = n, t;
|
|
188
188
|
}
|
|
189
|
-
function
|
|
189
|
+
function _e(e, n, t) {
|
|
190
190
|
var i;
|
|
191
191
|
if (!((i = n.stroke) != null && i.enabled)) return;
|
|
192
192
|
const a = n;
|
|
@@ -194,39 +194,39 @@ function ke(e, n, t) {
|
|
|
194
194
|
const o = (t == null ? void 0 : t.isKnockout) === !0, s = n.stroke.opacity ?? 1;
|
|
195
195
|
if (!o && s < 1)
|
|
196
196
|
try {
|
|
197
|
-
|
|
197
|
+
$t(e, n, a, t, s);
|
|
198
198
|
} catch {
|
|
199
199
|
cn(e, n, a, t, !1);
|
|
200
200
|
}
|
|
201
201
|
else
|
|
202
202
|
cn(e, n, a, t, o);
|
|
203
203
|
}
|
|
204
|
-
function
|
|
204
|
+
function $t(e, n, t, a, r) {
|
|
205
205
|
var k, _;
|
|
206
|
-
const o = t.text || "", s = t.fontSize || 24, c = n.stroke.width, i = n.stroke.feather || 0, l = n.transformType === "custom" && ((k = n.transformData) == null ? void 0 : k.width), d = l ? ((_ = n.transformData) == null ? void 0 : _.width) ?? 200 : 0, u = l ? d + c * 2 + i * 2 + 40 : s * o.length * 0.7 + c * 2 + i * 2 + 40, p = s * 3 + c * 2 + i * 2 + 40, f = e.getTransform(), $ = Math.max(Math.abs(f.a), Math.abs(f.d), 1), h = Math.ceil(u * $ / 2) * 2,
|
|
207
|
-
if (h <= 0 ||
|
|
206
|
+
const o = t.text || "", s = t.fontSize || 24, c = n.stroke.width, i = n.stroke.feather || 0, l = n.transformType === "custom" && ((k = n.transformData) == null ? void 0 : k.width), d = l ? ((_ = n.transformData) == null ? void 0 : _.width) ?? 200 : 0, u = l ? d + c * 2 + i * 2 + 40 : s * o.length * 0.7 + c * 2 + i * 2 + 40, p = s * 3 + c * 2 + i * 2 + 40, f = e.getTransform(), $ = Math.max(Math.abs(f.a), Math.abs(f.d), 1), h = Math.ceil(u * $ / 2) * 2, g = Math.ceil(p * $ / 2) * 2;
|
|
207
|
+
if (h <= 0 || g <= 0) {
|
|
208
208
|
cn(e, n, t, a, !1);
|
|
209
209
|
return;
|
|
210
210
|
}
|
|
211
|
-
const v =
|
|
211
|
+
const v = yt(h, g), y = v.getContext("2d");
|
|
212
212
|
if (!y) {
|
|
213
213
|
cn(e, n, t, a, !1);
|
|
214
214
|
return;
|
|
215
215
|
}
|
|
216
|
-
const x = n.x || 0, m = n.y || 0,
|
|
216
|
+
const x = n.x || 0, m = n.y || 0, b = f.a * x + f.c * m + f.e, C = f.b * x + f.d * m + f.f;
|
|
217
217
|
y.setTransform(
|
|
218
218
|
f.a,
|
|
219
219
|
f.b,
|
|
220
220
|
f.c,
|
|
221
221
|
f.d,
|
|
222
|
-
h / 2 -
|
|
223
|
-
|
|
222
|
+
h / 2 - b + f.e,
|
|
223
|
+
g / 2 - C + f.f
|
|
224
224
|
);
|
|
225
225
|
const T = n.stroke.opacity;
|
|
226
226
|
n.stroke.opacity = 1, cn(y, n, t, a, !1), n.stroke.opacity = T, e.save(), e.resetTransform(), e.globalAlpha = r, e.drawImage(
|
|
227
227
|
v,
|
|
228
|
-
Math.round(
|
|
229
|
-
Math.round(C -
|
|
228
|
+
Math.round(b - h / 2),
|
|
229
|
+
Math.round(C - g / 2)
|
|
230
230
|
), e.restore();
|
|
231
231
|
}
|
|
232
232
|
function cn(e, n, t, a, r) {
|
|
@@ -235,11 +235,11 @@ function cn(e, n, t, a, r) {
|
|
|
235
235
|
e.save(), a != null && a.positionApplied || (e.translate(n.x || 0, n.y || 0), e.rotate(-(n.rotation || 0) * Math.PI / 180));
|
|
236
236
|
const s = t.fontSize || 24, c = t.fontFamily || "Arial", i = t.bold || !1, l = t.italic || !1, d = t.textAlign || "center";
|
|
237
237
|
e.font = `${l ? "italic " : ""}${i ? "bold " : ""}${s}px ${c}`, e.textAlign = d, e.textBaseline = "alphabetic", r ? (e.strokeStyle = "#000000", e.globalAlpha = 1) : (e.strokeStyle = n.stroke.color, n.stroke.opacity !== void 0 && (e.globalAlpha = n.stroke.opacity)), e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "round", e.lineJoin = n.stroke.lineJoin || "round", n.stroke.miterLimit !== void 0 && (e.miterLimit = n.stroke.miterLimit), !r && n.stroke.feather && n.stroke.feather > 0 && "filter" in e && (e.filter = `blur(${n.stroke.feather}px)`);
|
|
238
|
-
const u =
|
|
238
|
+
const u = je(s, c, i, l);
|
|
239
239
|
if (n.transformType === "custom" && ((f = n.transformData) == null ? void 0 : f.width)) {
|
|
240
|
-
const $ = n.transformData, h = ($ == null ? void 0 : $.width) ?? 200,
|
|
240
|
+
const $ = n.transformData, h = ($ == null ? void 0 : $.width) ?? 200, g = h - Q * 2, v = t.letterSpacing ?? 0, { lines: y, height: x } = we(
|
|
241
241
|
o,
|
|
242
|
-
|
|
242
|
+
g,
|
|
243
243
|
s,
|
|
244
244
|
c,
|
|
245
245
|
i,
|
|
@@ -249,7 +249,7 @@ function cn(e, n, t, a, r) {
|
|
|
249
249
|
!0,
|
|
250
250
|
// strict: wrap exactly at maxWidth
|
|
251
251
|
{ letterSpacing: v, lineHeight: t.lineHeight }
|
|
252
|
-
), m = -h / 2,
|
|
252
|
+
), m = -h / 2, b = -x / 2, C = s * (t.lineHeight ?? Gn);
|
|
253
253
|
y.forEach((T, k) => {
|
|
254
254
|
const _ = k === 0, w = k === y.length - 1;
|
|
255
255
|
let A = T;
|
|
@@ -263,78 +263,78 @@ function cn(e, n, t, a, r) {
|
|
|
263
263
|
}
|
|
264
264
|
let E = m + Q;
|
|
265
265
|
d === "center" ? E = m + h / 2 : d === "right" && (E = m + h - Q);
|
|
266
|
-
const S =
|
|
267
|
-
|
|
266
|
+
const S = b + u.ascent + k * C;
|
|
267
|
+
qe(e, A, E, S, v);
|
|
268
268
|
});
|
|
269
269
|
} else {
|
|
270
|
-
const
|
|
271
|
-
e.strokeText(o, 0,
|
|
270
|
+
const g = -u.height / 2 + u.ascent;
|
|
271
|
+
e.strokeText(o, 0, g);
|
|
272
272
|
}
|
|
273
273
|
e.restore();
|
|
274
274
|
}
|
|
275
|
-
function
|
|
275
|
+
function xt(e, n, t) {
|
|
276
276
|
var r;
|
|
277
277
|
if (!((r = n.stroke) != null && r.enabled) || !n.transformData) return;
|
|
278
278
|
const a = (t == null ? void 0 : t.isKnockout) === !0;
|
|
279
|
-
e.save(), a ? (e.strokeStyle = "#000000", e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "butt", e.lineJoin = n.stroke.lineJoin || "miter", e.globalAlpha = 1, n.stroke.miterLimit !== void 0 && (e.miterLimit = n.stroke.miterLimit)) :
|
|
279
|
+
e.save(), a ? (e.strokeStyle = "#000000", e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "butt", e.lineJoin = n.stroke.lineJoin || "miter", e.globalAlpha = 1, n.stroke.miterLimit !== void 0 && (e.miterLimit = n.stroke.miterLimit)) : Te(e, n.stroke), !a && n.stroke.feather && n.stroke.feather > 0 && "filter" in e && (e.filter = `blur(${n.stroke.feather}px)`), mt(e, n), e.stroke(), e.restore();
|
|
280
280
|
}
|
|
281
|
-
function
|
|
282
|
-
n.enabled && (e.save(),
|
|
281
|
+
function Ha(e, n, t) {
|
|
282
|
+
n.enabled && (e.save(), Te(e, n), n.feather && n.feather > 0 && "filter" in e && (e.filter = `blur(${n.feather}px)`), e.beginPath(), t(), e.stroke(), e.restore());
|
|
283
283
|
}
|
|
284
284
|
const ne = U("GlyphRenderer");
|
|
285
|
-
function
|
|
285
|
+
function vt(e, n, t, a, r, o, s, c = {}) {
|
|
286
286
|
try {
|
|
287
287
|
const i = [];
|
|
288
|
-
Object.entries(s).forEach(([
|
|
289
|
-
v && i.push(
|
|
288
|
+
Object.entries(s).forEach(([g, v]) => {
|
|
289
|
+
v && i.push(g);
|
|
290
290
|
});
|
|
291
291
|
const l = [];
|
|
292
|
-
n.GSUB && n.GSUB.featureList && n.GSUB.featureList.forEach((
|
|
293
|
-
l.push(
|
|
292
|
+
n.GSUB && n.GSUB.featureList && n.GSUB.featureList.forEach((g) => {
|
|
293
|
+
l.push(g.tag);
|
|
294
294
|
});
|
|
295
295
|
const d = {};
|
|
296
|
-
d.ccmp = !0, d.locl = !0, d.kern = !0, i.forEach((
|
|
297
|
-
d[
|
|
296
|
+
d.ccmp = !0, d.locl = !0, d.kern = !0, i.forEach((g) => {
|
|
297
|
+
d[g] = !0;
|
|
298
298
|
}), d.calt && (d.liga = !0, d.init = !0, d.fina = !0);
|
|
299
299
|
const u = n.layout(t, d, "latn"), p = o / n.unitsPerEm;
|
|
300
300
|
let f = 0;
|
|
301
|
-
u.glyphs.forEach((
|
|
302
|
-
f +=
|
|
301
|
+
u.glyphs.forEach((g) => {
|
|
302
|
+
f += g.advanceWidth * p;
|
|
303
303
|
});
|
|
304
304
|
let $ = a;
|
|
305
305
|
c.align === "center" ? $ = a - f / 2 : c.align === "right" && ($ = a - f), e.save(), e.fillStyle = c.color || "#000000";
|
|
306
306
|
let h = $;
|
|
307
|
-
u.glyphs.forEach((
|
|
307
|
+
u.glyphs.forEach((g, v) => {
|
|
308
308
|
const y = u.positions[v];
|
|
309
309
|
let x = null;
|
|
310
310
|
try {
|
|
311
|
-
if (
|
|
312
|
-
x =
|
|
313
|
-
else if (
|
|
314
|
-
const m =
|
|
311
|
+
if (g.path && typeof g.path.toPath == "function")
|
|
312
|
+
x = g.path.toPath();
|
|
313
|
+
else if (g.path && typeof g.path.toSVG == "function") {
|
|
314
|
+
const m = g.path.toSVG();
|
|
315
315
|
if (m && /^[MmLlHhVvCcSsQqTtAaZz]/.test(m))
|
|
316
316
|
x = m;
|
|
317
317
|
else {
|
|
318
|
-
const
|
|
319
|
-
x =
|
|
318
|
+
const b = m == null ? void 0 : m.match(/\bd=["']([^"']+)["']/);
|
|
319
|
+
x = b ? b[1] : null;
|
|
320
320
|
}
|
|
321
321
|
}
|
|
322
322
|
} catch (m) {
|
|
323
|
-
ne.warn("Error getting path for glyph:",
|
|
323
|
+
ne.warn("Error getting path for glyph:", g.name, m);
|
|
324
324
|
}
|
|
325
325
|
if (x) {
|
|
326
326
|
const m = new Path2D(x);
|
|
327
327
|
e.save(), e.translate(h + y.xOffset * p, r + y.yOffset * p), e.scale(p, -p), e.fill(m), e.restore();
|
|
328
328
|
}
|
|
329
|
-
h +=
|
|
329
|
+
h += g.advanceWidth * p;
|
|
330
330
|
}), e.restore();
|
|
331
331
|
} catch (i) {
|
|
332
332
|
ne.error("Error rendering with fontkit:", i), e.fillStyle = c.color || "#000000", e.textAlign = c.align || "left", e.fillText(t, a, r);
|
|
333
333
|
}
|
|
334
334
|
}
|
|
335
|
-
function
|
|
336
|
-
const l = ((
|
|
337
|
-
for (const v of
|
|
335
|
+
function wt(e, n, t, a, r, o, s, c = {}) {
|
|
336
|
+
const l = ((g) => {
|
|
337
|
+
for (const v of g) {
|
|
338
338
|
const y = v.codePointAt(0);
|
|
339
339
|
if (y && y >= 983040 && y <= 1048573) return !0;
|
|
340
340
|
}
|
|
@@ -345,19 +345,19 @@ function $t(e, n, t, a, r, o, s, c = {}) {
|
|
|
345
345
|
return;
|
|
346
346
|
}
|
|
347
347
|
const d = /* @__PURE__ */ new Map();
|
|
348
|
-
s && s.forEach((
|
|
349
|
-
d.set(
|
|
348
|
+
s && s.forEach((g) => {
|
|
349
|
+
d.set(g.charIndex, g.glyphIndex);
|
|
350
350
|
});
|
|
351
351
|
const u = o / n.unitsPerEm, p = Array.from(t);
|
|
352
352
|
let f = 0;
|
|
353
|
-
p.forEach((
|
|
354
|
-
const y =
|
|
353
|
+
p.forEach((g, v) => {
|
|
354
|
+
const y = g.codePointAt(0) || 0;
|
|
355
355
|
let x;
|
|
356
356
|
if (y >= 983040 && y <= 1048573)
|
|
357
357
|
x = y - 983040;
|
|
358
358
|
else if (x = d.get(v), x === void 0) {
|
|
359
|
-
const
|
|
360
|
-
x =
|
|
359
|
+
const b = n.glyphForCodePoint(y);
|
|
360
|
+
x = b ? b.id : 0;
|
|
361
361
|
}
|
|
362
362
|
const m = n.getGlyph(x);
|
|
363
363
|
m && (f += m.advanceWidth * u);
|
|
@@ -365,36 +365,36 @@ function $t(e, n, t, a, r, o, s, c = {}) {
|
|
|
365
365
|
let $ = a;
|
|
366
366
|
c.align === "center" ? $ = a - f / 2 : c.align === "right" && ($ = a - f), e.save(), e.fillStyle = c.color || "#000000";
|
|
367
367
|
let h = $;
|
|
368
|
-
p.forEach((
|
|
369
|
-
const y =
|
|
368
|
+
p.forEach((g, v) => {
|
|
369
|
+
const y = g.codePointAt(0) || 0;
|
|
370
370
|
let x;
|
|
371
371
|
if (y >= 983040 && y <= 1048573)
|
|
372
372
|
x = y - 983040;
|
|
373
373
|
else if (x = d.get(v), x === void 0) {
|
|
374
|
-
const
|
|
375
|
-
x =
|
|
374
|
+
const b = n.glyphForCodePoint(y);
|
|
375
|
+
x = b ? b.id : 0;
|
|
376
376
|
}
|
|
377
377
|
const m = n.getGlyph(x);
|
|
378
378
|
if (m) {
|
|
379
|
-
const
|
|
380
|
-
if (
|
|
381
|
-
const C = new Path2D(
|
|
379
|
+
const b = m.path.toSVG();
|
|
380
|
+
if (b) {
|
|
381
|
+
const C = new Path2D(b);
|
|
382
382
|
e.save(), e.translate(h, r), e.scale(u, -u), e.fill(C), e.restore();
|
|
383
383
|
}
|
|
384
384
|
h += m.advanceWidth * u;
|
|
385
385
|
}
|
|
386
386
|
}), e.restore();
|
|
387
387
|
}
|
|
388
|
-
function
|
|
388
|
+
function St(e, n, t, a, r) {
|
|
389
389
|
e.fillStyle = t.color;
|
|
390
|
-
const o = t.textAlign || "center", s = (h) => h.letterSpacing !== void 0 ? h.letterSpacing : t.letterSpacing ?? 0, c =
|
|
390
|
+
const o = t.textAlign || "center", s = (h) => h.letterSpacing !== void 0 ? h.letterSpacing : t.letterSpacing ?? 0, c = Xe(n);
|
|
391
391
|
let i, l;
|
|
392
392
|
a !== void 0 && a > 0 && !r ? (i = [], l = [], c.forEach((h) => {
|
|
393
|
-
const
|
|
394
|
-
|
|
393
|
+
const g = Ye(h, a, t);
|
|
394
|
+
g.forEach((v, y) => {
|
|
395
395
|
i.push(v), l.push({
|
|
396
396
|
isParagraphStart: y === 0,
|
|
397
|
-
isParagraphEnd: y ===
|
|
397
|
+
isParagraphEnd: y === g.length - 1
|
|
398
398
|
});
|
|
399
399
|
});
|
|
400
400
|
})) : (i = c, l = c.map(() => ({
|
|
@@ -402,15 +402,15 @@ function xt(e, n, t, a, r) {
|
|
|
402
402
|
isParagraphEnd: !0
|
|
403
403
|
})));
|
|
404
404
|
const d = [];
|
|
405
|
-
i.forEach((h,
|
|
405
|
+
i.forEach((h, g) => {
|
|
406
406
|
const v = [];
|
|
407
407
|
let y = 0, x = 0;
|
|
408
|
-
const m = l[
|
|
408
|
+
const m = l[g].isParagraphStart, b = l[g].isParagraphEnd;
|
|
409
409
|
h.forEach((S) => {
|
|
410
410
|
const P = S.style.fontSize !== void 0 ? S.style.fontSize : t.fontSize, I = S.style.fontFamily !== void 0 ? S.style.fontFamily : t.fontFamily, F = S.style.bold !== void 0 ? S.style.bold : t.bold || !1, D = S.style.italic !== void 0 ? S.style.italic : t.italic || !1;
|
|
411
411
|
e.font = B(P, I, F, D);
|
|
412
|
-
const
|
|
413
|
-
v.push(
|
|
412
|
+
const M = on(e.measureText(S.text).width, S.text, s(S.style));
|
|
413
|
+
v.push(M);
|
|
414
414
|
const L = fn(P, I, F, D);
|
|
415
415
|
y = Math.max(y, L.height), x = Math.max(x, L.ascent);
|
|
416
416
|
});
|
|
@@ -418,22 +418,22 @@ function xt(e, n, t, a, r) {
|
|
|
418
418
|
let A = 0, E = 0;
|
|
419
419
|
h.forEach((S) => {
|
|
420
420
|
const P = S.style.fontSize !== void 0 ? S.style.fontSize : t.fontSize, I = S.style.fontFamily !== void 0 ? S.style.fontFamily : t.fontFamily, F = S.style.bold !== void 0 ? S.style.bold : t.bold || !1, D = S.style.italic !== void 0 ? S.style.italic : t.italic || !1;
|
|
421
|
-
let
|
|
421
|
+
let M = S.text;
|
|
422
422
|
const L = E, kn = E + S.text.length;
|
|
423
423
|
if (!m && _ > 0 && L < _) {
|
|
424
424
|
const R = Math.min(_ - L, S.text.length);
|
|
425
|
-
|
|
425
|
+
M = M.substring(R);
|
|
426
426
|
}
|
|
427
|
-
if (!
|
|
427
|
+
if (!b && w > 0) {
|
|
428
428
|
const R = C.length - w;
|
|
429
429
|
if (kn > R) {
|
|
430
430
|
const H = !m && _ > 0 && L < _ ? Math.min(_ - L, S.text.length) : 0, Tn = Math.max(0, R - L - H);
|
|
431
|
-
|
|
431
|
+
M = M.substring(0, Tn);
|
|
432
432
|
}
|
|
433
433
|
}
|
|
434
|
-
E += S.text.length,
|
|
435
|
-
e.measureText(
|
|
436
|
-
|
|
434
|
+
E += S.text.length, M.length > 0 && (e.save(), e.font = B(P, I, F, D), A += on(
|
|
435
|
+
e.measureText(M).width,
|
|
436
|
+
M,
|
|
437
437
|
s(S.style)
|
|
438
438
|
), e.restore());
|
|
439
439
|
}), d.push({
|
|
@@ -445,21 +445,21 @@ function xt(e, n, t, a, r) {
|
|
|
445
445
|
spanWidths: v,
|
|
446
446
|
isParagraphStart: m,
|
|
447
447
|
// Store metadata with line
|
|
448
|
-
isParagraphEnd:
|
|
448
|
+
isParagraphEnd: b
|
|
449
449
|
});
|
|
450
450
|
});
|
|
451
451
|
const u = fn(t.fontSize, t.fontFamily, t.bold, t.italic), p = t.fontSize * (t.lineHeight ?? Gn);
|
|
452
452
|
let f;
|
|
453
453
|
d.length === 0 ? f = 0 : d.length === 1 ? f = u.height : f = (d.length - 1) * p + u.height;
|
|
454
454
|
const $ = -f / 2;
|
|
455
|
-
d.forEach((h,
|
|
455
|
+
d.forEach((h, g) => {
|
|
456
456
|
const { spans: v, width: y, isParagraphStart: x, isParagraphEnd: m } = h;
|
|
457
|
-
let
|
|
458
|
-
o === "center" ?
|
|
459
|
-
const C = $ + u.ascent +
|
|
457
|
+
let b;
|
|
458
|
+
o === "center" ? b = -y / 2 : o === "right" ? b = a !== void 0 ? a / 2 - y : -y : b = a !== void 0 ? -a / 2 : 0;
|
|
459
|
+
const C = $ + u.ascent + g * p, T = v.map((S) => S.text).join(""), k = T.match(/^ +/), _ = T.match(/ +$/), w = k ? k[0].length : 0, A = _ ? _[0].length : 0;
|
|
460
460
|
let E = 0;
|
|
461
461
|
v.forEach((S) => {
|
|
462
|
-
const P = S.style.fontSize !== void 0 ? S.style.fontSize : t.fontSize, I = S.style.fontFamily !== void 0 ? S.style.fontFamily : t.fontFamily, F = S.style.color !== void 0 ? S.style.color : t.color, D = S.style.bold !== void 0 ? S.style.bold : t.bold || !1,
|
|
462
|
+
const P = S.style.fontSize !== void 0 ? S.style.fontSize : t.fontSize, I = S.style.fontFamily !== void 0 ? S.style.fontFamily : t.fontFamily, F = S.style.color !== void 0 ? S.style.color : t.color, D = S.style.bold !== void 0 ? S.style.bold : t.bold || !1, M = S.style.italic !== void 0 ? S.style.italic : t.italic || !1, L = S.style.underline !== void 0 ? S.style.underline : t.underline || !1, kn = S.style.strikethrough !== void 0 ? S.style.strikethrough : t.strikethrough || !1;
|
|
463
463
|
let R = S.text, H = E, Tn = E + S.text.length;
|
|
464
464
|
if (!x && w > 0 && H < w) {
|
|
465
465
|
const V = Math.min(w - H, S.text.length);
|
|
@@ -474,17 +474,17 @@ function xt(e, n, t, a, r) {
|
|
|
474
474
|
}
|
|
475
475
|
if (E += S.text.length, R.length > 0) {
|
|
476
476
|
const V = s(S.style);
|
|
477
|
-
e.font = B(P, I, D,
|
|
477
|
+
e.font = B(P, I, D, M), e.fillStyle = F, e.textBaseline = "alphabetic", e.textAlign = "left", Hn(e, R, b, C, V);
|
|
478
478
|
const an = on(e.measureText(R).width, R, V);
|
|
479
479
|
if (L) {
|
|
480
480
|
const j = C + P * 0.1;
|
|
481
|
-
e.beginPath(), e.moveTo(
|
|
481
|
+
e.beginPath(), e.moveTo(b, j), e.lineTo(b + an, j), e.lineWidth = Math.max(1, P * 0.05), e.strokeStyle = F, e.stroke();
|
|
482
482
|
}
|
|
483
483
|
if (kn) {
|
|
484
484
|
const j = C - P * 0.25;
|
|
485
|
-
e.beginPath(), e.moveTo(
|
|
485
|
+
e.beginPath(), e.moveTo(b, j), e.lineTo(b + an, j), e.lineWidth = Math.max(1, P * 0.05), e.strokeStyle = F, e.stroke();
|
|
486
486
|
}
|
|
487
|
-
|
|
487
|
+
b += an;
|
|
488
488
|
}
|
|
489
489
|
});
|
|
490
490
|
});
|
|
@@ -515,7 +515,7 @@ function fn(e, n, t = !1, a = !1) {
|
|
|
515
515
|
const s = r.measureText("ÁÉÍgjpqy"), c = s.actualBoundingBoxAscent || e * 0.8, i = s.actualBoundingBoxDescent || e * 0.2, l = c + i;
|
|
516
516
|
return { ascent: c, descent: i, height: l };
|
|
517
517
|
}
|
|
518
|
-
function
|
|
518
|
+
function Va(e, n) {
|
|
519
519
|
const t = e.map((r, o) => ({
|
|
520
520
|
isParagraphStart: !n && o === 0,
|
|
521
521
|
isParagraphEnd: !n && o === e.length - 1
|
|
@@ -528,13 +528,13 @@ function Na(e, n) {
|
|
|
528
528
|
return s || (i = i.replace(/^ +/, "")), c || (i = i.replace(/ +$/, "")), i;
|
|
529
529
|
}).filter((r) => r.length > 0);
|
|
530
530
|
}
|
|
531
|
-
function
|
|
531
|
+
function Ct(e, n) {
|
|
532
532
|
const t = n.fontSize, a = n.fontFamily, r = n.bold || !1, o = n.italic || !1, s = n.textAlign || "center", c = n.text;
|
|
533
533
|
e.font = B(t, a, r, o), e.textAlign = s, e.textBaseline = "alphabetic", e.fillStyle = n.color;
|
|
534
534
|
const i = fn(t, a, r, o), u = -i.height / 2 + i.ascent;
|
|
535
535
|
Hn(e, c, 0, u, n.letterSpacing);
|
|
536
536
|
}
|
|
537
|
-
function
|
|
537
|
+
function kt(e, n, t, a, r = !1, o = !1, s) {
|
|
538
538
|
const c = Vn();
|
|
539
539
|
if (c.font = B(t, a, r, o), e.trim().length === 0)
|
|
540
540
|
return [e];
|
|
@@ -543,7 +543,7 @@ function wt(e, n, t, a, r = !1, o = !1, s) {
|
|
|
543
543
|
const k = e.split(`
|
|
544
544
|
`), _ = [];
|
|
545
545
|
for (let w = 0; w < k.length; w++) {
|
|
546
|
-
const A = k[w], E =
|
|
546
|
+
const A = k[w], E = kt(A, n, t, a, r, o);
|
|
547
547
|
_.push(...E);
|
|
548
548
|
}
|
|
549
549
|
return _;
|
|
@@ -559,29 +559,29 @@ function wt(e, n, t, a, r = !1, o = !1, s) {
|
|
|
559
559
|
}
|
|
560
560
|
return k;
|
|
561
561
|
}
|
|
562
|
-
const $ = f.join(" "), h = d + $ + u,
|
|
563
|
-
if (
|
|
562
|
+
const $ = f.join(" "), h = d + $ + u, g = c.measureText(h).width, v = n < 200, x = Math.max(20, n * (v ? 0.08 : 0.05));
|
|
563
|
+
if (g <= n + x)
|
|
564
564
|
return [h];
|
|
565
565
|
const m = [];
|
|
566
|
-
let
|
|
566
|
+
let b = f[0];
|
|
567
567
|
const T = Math.max(15, n * (v ? 0.05 : 0.03));
|
|
568
568
|
for (let k = 1; k < f.length; k++) {
|
|
569
|
-
const _ = f[k], w =
|
|
570
|
-
c.measureText(w).width > n + T ? (m.push(
|
|
569
|
+
const _ = f[k], w = b + " " + _;
|
|
570
|
+
c.measureText(w).width > n + T ? (m.push(b), b = _) : b = w;
|
|
571
571
|
}
|
|
572
|
-
return m.push(
|
|
572
|
+
return m.push(b), m.length > 0 && (m[0] = d + m[0], m[m.length - 1] = m[m.length - 1] + u), m;
|
|
573
573
|
}
|
|
574
|
-
function
|
|
574
|
+
function ja(e, n, t, a, r, o, s = "left", c = 0, i = 0, l = 1.2, d = !1, u = !1, p = !1, f = !1, $, h) {
|
|
575
575
|
e.font = B(r, o, d, u), e.textBaseline = "alphabetic", e.textAlign = s;
|
|
576
|
-
const
|
|
576
|
+
const g = (w) => {
|
|
577
577
|
for (const A of w) {
|
|
578
578
|
const E = A.codePointAt(0);
|
|
579
579
|
if (E && E >= 983040 && E <= 1048573)
|
|
580
580
|
return !0;
|
|
581
581
|
}
|
|
582
582
|
return !1;
|
|
583
|
-
}, v = $ && Object.values($).some((w) => w), y = h && h.length > 0, x = n.join(" "), m =
|
|
584
|
-
|
|
583
|
+
}, v = $ && Object.values($).some((w) => w), y = h && h.length > 0, x = n.join(" "), m = g(x), b = v || y || m, C = b ? Jn.getFontSync(o, d ? 700 : 400) : null;
|
|
584
|
+
b && !C && (Pn.warn(
|
|
585
585
|
`[renderMultilineText] Font ${o} not loaded for fontkit rendering. Text may not render correctly. Has PUA: ${m}, Text: "${x}"`
|
|
586
586
|
), Jn.loadFont(o, d ? 700 : 400).catch((w) => {
|
|
587
587
|
Pn.error("[renderMultilineText] Error loading font:", w);
|
|
@@ -599,40 +599,40 @@ function Ua(e, n, t, a, r, o, s = "left", c = 0, i = 0, l = 1.2, d = !1, u = !1,
|
|
|
599
599
|
charIndex: F.charIndex - _
|
|
600
600
|
// Adjust to line-relative index
|
|
601
601
|
})) : [];
|
|
602
|
-
if (C && (v || I.length > 0 || m) ? I.length > 0 ||
|
|
602
|
+
if (C && (v || I.length > 0 || m) ? I.length > 0 || g(w) ? wt(e, C, w, E, S, r, I, {
|
|
603
603
|
color: e.fillStyle,
|
|
604
604
|
align: s === "start" || s === "end" ? "left" : s
|
|
605
|
-
}) : $ &&
|
|
605
|
+
}) : $ && vt(e, C, w, E, S, r, $, {
|
|
606
606
|
color: e.fillStyle,
|
|
607
607
|
align: s === "start" || s === "end" ? "left" : s
|
|
608
608
|
}) : e.fillText(w, E, S), _ += P + 1, p) {
|
|
609
609
|
const F = ee(w, r, o, d, u);
|
|
610
610
|
let D = E;
|
|
611
611
|
s === "center" ? D = E - F / 2 : s === "right" && (D = E - F);
|
|
612
|
-
const
|
|
613
|
-
e.beginPath(), e.moveTo(D,
|
|
612
|
+
const M = S + r * 0.1;
|
|
613
|
+
e.beginPath(), e.moveTo(D, M), e.lineTo(D + F, M), e.lineWidth = Math.max(1, r * 0.05), e.strokeStyle = e.fillStyle, e.stroke();
|
|
614
614
|
}
|
|
615
615
|
if (f) {
|
|
616
616
|
const F = ee(w, r, o, d, u);
|
|
617
617
|
let D = E;
|
|
618
618
|
s === "center" ? D = E - F / 2 : s === "right" && (D = E - F);
|
|
619
|
-
const
|
|
620
|
-
e.beginPath(), e.moveTo(D,
|
|
619
|
+
const M = S - r * 0.25;
|
|
620
|
+
e.beginPath(), e.moveTo(D, M), e.lineTo(D + F, M), e.lineWidth = Math.max(1, r * 0.05), e.strokeStyle = e.fillStyle, e.stroke();
|
|
621
621
|
}
|
|
622
622
|
});
|
|
623
623
|
}
|
|
624
624
|
function In(e, n) {
|
|
625
|
-
|
|
625
|
+
Tt(e, n);
|
|
626
626
|
}
|
|
627
|
-
function
|
|
627
|
+
function Tt(e, n) {
|
|
628
628
|
var r;
|
|
629
|
-
(r = n.stroke) != null && r.enabled &&
|
|
629
|
+
(r = n.stroke) != null && r.enabled && _e(e, n), e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180);
|
|
630
630
|
const t = n.transformData, a = ((t == null ? void 0 : t.width) ?? 100) - Q * 2;
|
|
631
631
|
if (n.richText) {
|
|
632
|
-
const o =
|
|
632
|
+
const o = Ke.fromJSON(n.richText);
|
|
633
633
|
e.save(), e.translate(0, 0);
|
|
634
634
|
const s = n._lockedLineCount;
|
|
635
|
-
|
|
635
|
+
St(
|
|
636
636
|
e,
|
|
637
637
|
o,
|
|
638
638
|
{
|
|
@@ -652,7 +652,7 @@ function St(e, n) {
|
|
|
652
652
|
), e.restore();
|
|
653
653
|
} else if (n.text) {
|
|
654
654
|
e.fillStyle = n.color;
|
|
655
|
-
const o = n._lockedLineCount, s = n.letterSpacing ?? 0, { lines: c, height: i } =
|
|
655
|
+
const o = n._lockedLineCount, s = n.letterSpacing ?? 0, { lines: c, height: i } = we(
|
|
656
656
|
n.text,
|
|
657
657
|
a,
|
|
658
658
|
n.fontSize,
|
|
@@ -670,48 +670,48 @@ function St(e, n) {
|
|
|
670
670
|
n.italic
|
|
671
671
|
), d = -((t == null ? void 0 : t.width) ?? 100) / 2, u = -i / 2, p = n.fontSize * (n.lineHeight ?? Gn);
|
|
672
672
|
e.font = `${n.italic ? "italic " : ""}${n.bold ? "bold " : ""}${n.fontSize}px ${n.fontFamily}`, e.textBaseline = "alphabetic", e.textAlign = n.textAlign, c.forEach((f, $) => {
|
|
673
|
-
const h = $ === 0,
|
|
673
|
+
const h = $ === 0, g = $ === c.length - 1;
|
|
674
674
|
let v = f;
|
|
675
675
|
if (!h) {
|
|
676
|
-
const m = f.match(/^ +/),
|
|
677
|
-
|
|
676
|
+
const m = f.match(/^ +/), b = m ? m[0].length : 0;
|
|
677
|
+
b > 0 && (v = v.substring(b));
|
|
678
678
|
}
|
|
679
|
-
if (!
|
|
680
|
-
const m = v.match(/ +$/),
|
|
681
|
-
|
|
679
|
+
if (!g) {
|
|
680
|
+
const m = v.match(/ +$/), b = m ? m[0].length : 0;
|
|
681
|
+
b > 0 && (v = v.substring(0, v.length - b));
|
|
682
682
|
}
|
|
683
683
|
let y = d + Q;
|
|
684
684
|
n.textAlign === "center" ? y = d + ((t == null ? void 0 : t.width) ?? 100) / 2 : n.textAlign === "right" && (y = d + ((t == null ? void 0 : t.width) ?? 100) - Q);
|
|
685
685
|
const x = u + l.ascent + $ * p;
|
|
686
686
|
if (Hn(e, v, y, x, s), v.length > 0) {
|
|
687
687
|
const m = on(e.measureText(v).width, v, s);
|
|
688
|
-
let
|
|
689
|
-
if (n.textAlign === "center" ?
|
|
688
|
+
let b = y;
|
|
689
|
+
if (n.textAlign === "center" ? b -= m / 2 : n.textAlign === "right" && (b -= m), n.underline) {
|
|
690
690
|
const C = x + n.fontSize * 0.1;
|
|
691
|
-
e.fillRect(
|
|
691
|
+
e.fillRect(b, C, m, Math.max(1, n.fontSize * 0.05));
|
|
692
692
|
}
|
|
693
693
|
if (n.strikethrough) {
|
|
694
694
|
const C = x - l.ascent * 0.4;
|
|
695
|
-
e.fillRect(
|
|
695
|
+
e.fillRect(b, C, m, Math.max(1, n.fontSize * 0.05));
|
|
696
696
|
}
|
|
697
697
|
}
|
|
698
698
|
});
|
|
699
699
|
}
|
|
700
700
|
e.restore();
|
|
701
701
|
}
|
|
702
|
-
function
|
|
702
|
+
function qa(e, n) {
|
|
703
703
|
var s;
|
|
704
704
|
const t = n.opacity ?? 1, a = !!((s = n.stroke) != null && s.enabled), r = n.type === "custom";
|
|
705
705
|
if (t < 1 && a && r) {
|
|
706
|
-
|
|
706
|
+
_t(e, n, t);
|
|
707
707
|
return;
|
|
708
708
|
}
|
|
709
709
|
const o = e.globalAlpha;
|
|
710
710
|
t !== 1 && (e.globalAlpha = t), Fn(e, n), e.globalAlpha = o;
|
|
711
711
|
}
|
|
712
|
-
function
|
|
713
|
-
var
|
|
714
|
-
const a = n.transformData, r = n.fontSize || 24, o = ((
|
|
712
|
+
function _t(e, n, t) {
|
|
713
|
+
var g;
|
|
714
|
+
const a = n.transformData, r = n.fontSize || 24, o = ((g = n.stroke) == null ? void 0 : g.width) || 0, s = ((a == null ? void 0 : a.width) ?? r * n.text.length * 0.7) + o * 2 + 40, c = r * 3 + o * 2 + 40, i = e.getTransform(), l = Math.max(Math.abs(i.a), Math.abs(i.d), 1), d = Math.ceil(s * l), u = Math.ceil(c * l);
|
|
715
715
|
let p;
|
|
716
716
|
typeof OffscreenCanvas < "u" ? p = new OffscreenCanvas(d, u) : (p = document.createElement("canvas"), p.width = d, p.height = u);
|
|
717
717
|
const f = p.getContext("2d");
|
|
@@ -736,28 +736,28 @@ function Fn(e, n) {
|
|
|
736
736
|
In(e, n);
|
|
737
737
|
break;
|
|
738
738
|
case "circle":
|
|
739
|
-
|
|
739
|
+
Ee(e, n);
|
|
740
740
|
break;
|
|
741
741
|
case "wave":
|
|
742
|
-
|
|
742
|
+
Ae(e, n);
|
|
743
743
|
break;
|
|
744
744
|
case "arch":
|
|
745
|
-
|
|
745
|
+
Pe(e, n);
|
|
746
746
|
break;
|
|
747
747
|
case "ascend":
|
|
748
|
-
|
|
748
|
+
Ie(e, n);
|
|
749
749
|
break;
|
|
750
750
|
case "lean":
|
|
751
|
-
|
|
751
|
+
Fe(e, n);
|
|
752
752
|
break;
|
|
753
753
|
case "flag":
|
|
754
|
-
|
|
754
|
+
De(e, n);
|
|
755
755
|
break;
|
|
756
756
|
default:
|
|
757
757
|
Pn.warn(`[canvas-renderer] Unsupported transform type: ${n.type}`), In(e, n);
|
|
758
758
|
}
|
|
759
759
|
}
|
|
760
|
-
function
|
|
760
|
+
function Et(e, n) {
|
|
761
761
|
if (typeof OffscreenCanvas < "u")
|
|
762
762
|
return new OffscreenCanvas(e, n);
|
|
763
763
|
const t = document.createElement("canvas");
|
|
@@ -777,24 +777,24 @@ function tn(e, n, t) {
|
|
|
777
777
|
t(e, n);
|
|
778
778
|
return;
|
|
779
779
|
}
|
|
780
|
-
const l = n.fontSize || 24, d = a.width || 0, u = n.transformData, p = l * n.text.length * 0.7, f = u.width ?? (u.radius ? u.radius * 2 : 0), $ = Math.max(f, p), h = (a.feather || 0) * 2,
|
|
780
|
+
const l = n.fontSize || 24, d = a.width || 0, u = n.transformData, p = l * n.text.length * 0.7, f = u.width ?? (u.radius ? u.radius * 2 : 0), $ = Math.max(f, p), h = (a.feather || 0) * 2, g = d * 4 + h + l + 40, v = $ + g, y = u.archHeight ? Math.abs(u.archHeight) * l * 2 : 0, x = u.radius ? u.radius : 0, m = l * 3 + g + y + x, b = e.getTransform(), C = Math.max(Math.abs(b.a), Math.abs(b.d), 1), T = Math.ceil(v * C / 2) * 2, k = Math.ceil(m * C / 2) * 2;
|
|
781
781
|
if (T <= 0 || k <= 0) {
|
|
782
782
|
t(e, n);
|
|
783
783
|
return;
|
|
784
784
|
}
|
|
785
|
-
const _ =
|
|
785
|
+
const _ = Et(T, k), w = _.getContext("2d");
|
|
786
786
|
if (!w) {
|
|
787
787
|
t(e, n);
|
|
788
788
|
return;
|
|
789
789
|
}
|
|
790
|
-
const A = n.x || 0, E = n.y || 0, S =
|
|
790
|
+
const A = n.x || 0, E = n.y || 0, S = b.a * A + b.c * E + b.e, P = b.b * A + b.d * E + b.f, I = Math.round(S - T / 2), F = Math.round(P - k / 2);
|
|
791
791
|
if (w.setTransform(
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
T / 2 - S +
|
|
797
|
-
k / 2 - P +
|
|
792
|
+
b.a,
|
|
793
|
+
b.b,
|
|
794
|
+
b.c,
|
|
795
|
+
b.d,
|
|
796
|
+
T / 2 - S + b.e,
|
|
797
|
+
k / 2 - P + b.f
|
|
798
798
|
), c) {
|
|
799
799
|
w.globalAlpha = 1;
|
|
800
800
|
const L = a.opacity;
|
|
@@ -803,17 +803,17 @@ function tn(e, n, t) {
|
|
|
803
803
|
}
|
|
804
804
|
const D = a.opacity;
|
|
805
805
|
a.opacity = 1, t(w, n), a.opacity = D;
|
|
806
|
-
const
|
|
807
|
-
a.enabled = !1, t(e, n), a.enabled =
|
|
806
|
+
const M = a.enabled;
|
|
807
|
+
a.enabled = !1, t(e, n), a.enabled = M, e.save(), e.resetTransform(), e.globalAlpha = r, e.drawImage(
|
|
808
808
|
_,
|
|
809
809
|
I,
|
|
810
810
|
F
|
|
811
811
|
), e.restore();
|
|
812
812
|
}
|
|
813
|
-
function
|
|
814
|
-
tn(e, n,
|
|
813
|
+
function Ee(e, n) {
|
|
814
|
+
tn(e, n, At);
|
|
815
815
|
}
|
|
816
|
-
function
|
|
816
|
+
function At(e, n) {
|
|
817
817
|
const t = n.transformData;
|
|
818
818
|
e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180), e.scale(t.scale, t.scale);
|
|
819
819
|
const a = n.bold ? "bold" : "normal", r = n.italic ? "italic" : "normal";
|
|
@@ -834,23 +834,23 @@ function Tt(e, n) {
|
|
|
834
834
|
}
|
|
835
835
|
e.restore();
|
|
836
836
|
}
|
|
837
|
-
function
|
|
838
|
-
tn(e, n,
|
|
837
|
+
function Ae(e, n) {
|
|
838
|
+
tn(e, n, Pt);
|
|
839
839
|
}
|
|
840
|
-
function
|
|
840
|
+
function Pt(e, n) {
|
|
841
841
|
const t = n.transformData;
|
|
842
842
|
e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180), e.font = B(n.fontSize, n.fontFamily, n.bold, n.italic), e.fillStyle = n.color, e.textAlign = "center", e.textBaseline = "middle";
|
|
843
843
|
const a = n.text.split("");
|
|
844
844
|
let o = -a.reduce((s, c) => s + e.measureText(c).width, 0) / 2;
|
|
845
845
|
a.forEach((s) => {
|
|
846
846
|
const c = e.measureText(s).width, i = o + c / 2, l = i / (t.width / 2), d = t.amplitude * n.fontSize * Math.sin(t.frequency * Math.PI * l), u = t.amplitude * t.frequency * Math.PI * Math.cos(t.frequency * Math.PI * l);
|
|
847
|
-
e.save(), e.translate(i, d), e.transform(1, u *
|
|
847
|
+
e.save(), e.translate(i, d), e.transform(1, u * Je, 0, 1, 0, 0), en(e, s, n.stroke), e.fillText(s, 0, 0), e.restore(), o += c;
|
|
848
848
|
}), e.restore();
|
|
849
849
|
}
|
|
850
|
-
function
|
|
851
|
-
tn(e, n,
|
|
850
|
+
function Pe(e, n) {
|
|
851
|
+
tn(e, n, It);
|
|
852
852
|
}
|
|
853
|
-
function
|
|
853
|
+
function It(e, n) {
|
|
854
854
|
const t = n.transformData;
|
|
855
855
|
e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180), e.font = B(n.fontSize, n.fontFamily, n.bold, n.italic), e.fillStyle = n.color, e.textAlign = "center", e.textBaseline = "middle";
|
|
856
856
|
const a = n.text.split(""), r = a.reduce((c, i) => c + e.measureText(i).width, 0), o = t.width / 2;
|
|
@@ -860,10 +860,10 @@ function Et(e, n) {
|
|
|
860
860
|
e.save(), e.translate(l, u), e.transform(1, p * 0.3, 0, 1, 0, 0), en(e, c, n.stroke), e.fillText(c, 0, 0), e.restore(), s += i;
|
|
861
861
|
}), e.restore();
|
|
862
862
|
}
|
|
863
|
-
function
|
|
864
|
-
tn(e, n,
|
|
863
|
+
function Ie(e, n) {
|
|
864
|
+
tn(e, n, Ft);
|
|
865
865
|
}
|
|
866
|
-
function
|
|
866
|
+
function Ft(e, n) {
|
|
867
867
|
const t = n.transformData;
|
|
868
868
|
e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180), e.font = B(n.fontSize, n.fontFamily, n.bold, n.italic), e.fillStyle = n.color, e.textAlign = "center", e.textBaseline = "middle";
|
|
869
869
|
const a = n.text.split(""), r = a.reduce((c, i) => c + e.measureText(i).width, 0), o = t.ascendAngle * Math.PI / 180;
|
|
@@ -873,20 +873,20 @@ function At(e, n) {
|
|
|
873
873
|
e.save(), e.translate(l, d), e.transform(1, u * 1, 0, 1, 0, 0), en(e, c, n.stroke), e.fillText(c, 0, 0), e.restore(), s += i;
|
|
874
874
|
}), e.restore();
|
|
875
875
|
}
|
|
876
|
-
function
|
|
877
|
-
tn(e, n,
|
|
876
|
+
function Fe(e, n) {
|
|
877
|
+
tn(e, n, Dt);
|
|
878
878
|
}
|
|
879
|
-
function
|
|
879
|
+
function Dt(e, n) {
|
|
880
880
|
var r;
|
|
881
881
|
const t = n.transformData;
|
|
882
882
|
e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180);
|
|
883
883
|
const a = -t.leanAmount * Math.PI / 4;
|
|
884
884
|
e.transform(1, 0, Math.tan(a), 1, 0, 0), e.font = B(n.fontSize, n.fontFamily, n.bold, n.italic), e.fillStyle = n.color, e.textAlign = "center", e.textBaseline = "middle", (r = n.stroke) != null && r.enabled && (e.save(), e.strokeStyle = n.stroke.color, e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "round", e.lineJoin = n.stroke.lineJoin || "round", n.stroke.opacity !== void 0 && (e.globalAlpha = n.stroke.opacity), e.strokeText(n.text, 0, 0), e.restore()), e.fillText(n.text, 0, 0), e.restore();
|
|
885
885
|
}
|
|
886
|
-
function
|
|
887
|
-
tn(e, n,
|
|
886
|
+
function De(e, n) {
|
|
887
|
+
tn(e, n, Mt);
|
|
888
888
|
}
|
|
889
|
-
function
|
|
889
|
+
function Mt(e, n) {
|
|
890
890
|
const t = n.transformData;
|
|
891
891
|
e.save(), e.translate(n.x, n.y), e.rotate(-n.rotation * Math.PI / 180), e.font = B(n.fontSize, n.fontFamily, n.bold, n.italic), e.fillStyle = n.color, e.textAlign = "center", e.textBaseline = "middle";
|
|
892
892
|
const a = n.text.split("");
|
|
@@ -899,7 +899,7 @@ function It(e, n) {
|
|
|
899
899
|
function Y(e) {
|
|
900
900
|
return (n, t) => e(n, t);
|
|
901
901
|
}
|
|
902
|
-
function
|
|
902
|
+
function Ot(e, n) {
|
|
903
903
|
e.save();
|
|
904
904
|
const t = e.canvas, a = t.width, r = t.height, o = e.getTransform(), s = [];
|
|
905
905
|
let c = [];
|
|
@@ -931,11 +931,11 @@ function Ft(e, n) {
|
|
|
931
931
|
}
|
|
932
932
|
var te = !1;
|
|
933
933
|
function jn() {
|
|
934
|
-
te || (te = !0, q("arch", Y(
|
|
934
|
+
te || (te = !0, q("arch", Y(Pe)), q("ascend", Y(Ie)), q("circle", Y(Ee)), q("flag", Y(De)), q("lean", Y(Fe)), q("wave", Y(Ae)), q(
|
|
935
935
|
"custom",
|
|
936
936
|
(e, n) => In(e, n)
|
|
937
|
-
),
|
|
938
|
-
(e, n) =>
|
|
937
|
+
), Ze(Ot), dt(
|
|
938
|
+
(e, n) => ht(e, n)
|
|
939
939
|
), globalThis.__scElementPaintersInstalled = !0);
|
|
940
940
|
}
|
|
941
941
|
jn();
|
|
@@ -943,23 +943,23 @@ function qn(e, n, t = {}) {
|
|
|
943
943
|
const a = t.mode || "both";
|
|
944
944
|
switch (e.save(), e.translate(n.x || 0, n.y || 0), e.rotate(-(n.rotation || 0) * Math.PI / 180), n.transformType) {
|
|
945
945
|
case "image":
|
|
946
|
-
|
|
946
|
+
Bt(e, n, a, t);
|
|
947
947
|
break;
|
|
948
948
|
case "shape":
|
|
949
|
-
|
|
949
|
+
Lt(e, n, a, t);
|
|
950
950
|
break;
|
|
951
951
|
case "group":
|
|
952
952
|
break;
|
|
953
953
|
default:
|
|
954
|
-
|
|
954
|
+
Rt(e, n, a, t);
|
|
955
955
|
break;
|
|
956
956
|
}
|
|
957
957
|
e.restore();
|
|
958
958
|
}
|
|
959
|
-
function
|
|
959
|
+
function Rt(e, n, t, a) {
|
|
960
960
|
var s;
|
|
961
961
|
const r = n, o = r.text || "";
|
|
962
|
-
o && ((t === "stroke" || t === "both") && ((s = n.stroke) != null && s.enabled) && (e.save(),
|
|
962
|
+
o && ((t === "stroke" || t === "both") && ((s = n.stroke) != null && s.enabled) && (e.save(), _e(e, n, { ...a.renderingContext, positionApplied: !0 }), e.restore()), (t === "fill" || t === "both") && (e.save(), Ct(e, {
|
|
963
963
|
text: o,
|
|
964
964
|
fontSize: r.fontSize || 24,
|
|
965
965
|
fontFamily: r.fontFamily || "Arial",
|
|
@@ -970,12 +970,12 @@ function Dt(e, n, t, a) {
|
|
|
970
970
|
letterSpacing: r.letterSpacing
|
|
971
971
|
}), e.restore()));
|
|
972
972
|
}
|
|
973
|
-
function
|
|
973
|
+
function Bt(e, n, t, a) {
|
|
974
974
|
var o;
|
|
975
975
|
if (!n.transformData) return;
|
|
976
976
|
const r = n.transformData;
|
|
977
977
|
if (t === "fill" || t === "both")
|
|
978
|
-
if (
|
|
978
|
+
if (Gt(e, n), a.loadedImage) {
|
|
979
979
|
e.save(), e.clip();
|
|
980
980
|
const s = r.flipHorizontal ? -1 : 1, c = r.flipVertical ? -1 : 1;
|
|
981
981
|
e.scale(s, c);
|
|
@@ -983,28 +983,28 @@ function Ot(e, n, t, a) {
|
|
|
983
983
|
e.drawImage(a.loadedImage, -i / 2, -l / 2, i, l), e.restore();
|
|
984
984
|
} else
|
|
985
985
|
e.fillStyle = "#cccccc", e.fill();
|
|
986
|
-
(t === "stroke" || t === "both") && ((o = n.stroke) != null && o.enabled) && (e.save(),
|
|
986
|
+
(t === "stroke" || t === "both") && ((o = n.stroke) != null && o.enabled) && (e.save(), xt(e, n, a.renderingContext), e.restore());
|
|
987
987
|
}
|
|
988
|
-
function
|
|
988
|
+
function Lt(e, n, t, a) {
|
|
989
989
|
var s, c;
|
|
990
990
|
if (!n.transformData) return;
|
|
991
991
|
const r = n.transformData, o = ((s = a.renderingContext) == null ? void 0 : s.isKnockout) === !0;
|
|
992
|
-
e.beginPath(),
|
|
992
|
+
e.beginPath(), Me(e, r), (t === "fill" || t === "both") && (e.fillStyle = o ? "#000000" : Qe(e, r), e.globalAlpha = o ? 1 : r.fillOpacity ?? 1, e.fill()), (t === "stroke" || t === "both") && ((c = n.stroke) != null && c.enabled) && (e.save(), zt(e, n, a.renderingContext), e.restore());
|
|
993
993
|
}
|
|
994
|
-
function
|
|
994
|
+
function Me(e, n) {
|
|
995
995
|
const { shapeType: t } = n, a = n.width ?? 100, r = n.height ?? 100;
|
|
996
996
|
switch (t) {
|
|
997
997
|
case "rectangle":
|
|
998
998
|
ae(e, n, a, r);
|
|
999
999
|
break;
|
|
1000
1000
|
case "circle":
|
|
1001
|
-
|
|
1001
|
+
Nt(e, Math.min(a, r) / 2);
|
|
1002
1002
|
break;
|
|
1003
1003
|
case "ellipse":
|
|
1004
|
-
|
|
1004
|
+
Ut(e, a / 2, r / 2);
|
|
1005
1005
|
break;
|
|
1006
1006
|
case "star":
|
|
1007
|
-
|
|
1007
|
+
Wt(e, n, Math.min(a, r) / 2);
|
|
1008
1008
|
break;
|
|
1009
1009
|
default:
|
|
1010
1010
|
ae(e, n, a, r);
|
|
@@ -1018,13 +1018,13 @@ function ae(e, n, t, a) {
|
|
|
1018
1018
|
} else
|
|
1019
1019
|
e.rect(o, s, t, a);
|
|
1020
1020
|
}
|
|
1021
|
-
function
|
|
1021
|
+
function Nt(e, n) {
|
|
1022
1022
|
e.arc(0, 0, n, 0, Math.PI * 2);
|
|
1023
1023
|
}
|
|
1024
|
-
function
|
|
1024
|
+
function Ut(e, n, t) {
|
|
1025
1025
|
e.ellipse(0, 0, n, t, 0, 0, Math.PI * 2);
|
|
1026
1026
|
}
|
|
1027
|
-
function
|
|
1027
|
+
function Wt(e, n, t) {
|
|
1028
1028
|
const a = Math.max(3, Math.min(20, n.points || 5)), r = Math.max(0.1, Math.min(0.9, n.innerRadius || 0.4)), o = t * r, s = Math.PI / a, c = -Math.PI / 2;
|
|
1029
1029
|
for (let i = 0; i < a * 2; i++) {
|
|
1030
1030
|
const l = c + s * i, d = i % 2 === 0 ? t : o, u = Math.cos(l) * d, p = Math.sin(l) * d;
|
|
@@ -1032,13 +1032,13 @@ function Lt(e, n, t) {
|
|
|
1032
1032
|
}
|
|
1033
1033
|
e.closePath();
|
|
1034
1034
|
}
|
|
1035
|
-
function
|
|
1035
|
+
function zt(e, n, t) {
|
|
1036
1036
|
var r;
|
|
1037
1037
|
if (!((r = n.stroke) != null && r.enabled) || !n.transformData) return;
|
|
1038
1038
|
const a = (t == null ? void 0 : t.isKnockout) === !0;
|
|
1039
|
-
e.save(), a ? (e.strokeStyle = "#000000", e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "butt", e.lineJoin = n.stroke.lineJoin || "miter", e.globalAlpha = 1) : (e.strokeStyle = n.stroke.color, e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "butt", e.lineJoin = n.stroke.lineJoin || "miter", n.stroke.opacity !== void 0 && (e.globalAlpha = n.stroke.opacity)), n.stroke.miterLimit !== void 0 && (e.miterLimit = n.stroke.miterLimit), n.stroke.dashArray && n.stroke.dashArray.length > 0 && e.setLineDash(n.stroke.dashArray), !a && n.stroke.feather && n.stroke.feather > 0 && "filter" in e && (e.filter = `blur(${n.stroke.feather}px)`), e.beginPath(),
|
|
1039
|
+
e.save(), a ? (e.strokeStyle = "#000000", e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "butt", e.lineJoin = n.stroke.lineJoin || "miter", e.globalAlpha = 1) : (e.strokeStyle = n.stroke.color, e.lineWidth = n.stroke.width, e.lineCap = n.stroke.lineCap || "butt", e.lineJoin = n.stroke.lineJoin || "miter", n.stroke.opacity !== void 0 && (e.globalAlpha = n.stroke.opacity)), n.stroke.miterLimit !== void 0 && (e.miterLimit = n.stroke.miterLimit), n.stroke.dashArray && n.stroke.dashArray.length > 0 && e.setLineDash(n.stroke.dashArray), !a && n.stroke.feather && n.stroke.feather > 0 && "filter" in e && (e.filter = `blur(${n.stroke.feather}px)`), e.beginPath(), Me(e, n.transformData), e.stroke(), e.restore();
|
|
1040
1040
|
}
|
|
1041
|
-
function
|
|
1041
|
+
function Gt(e, n) {
|
|
1042
1042
|
if (!n.transformData) return;
|
|
1043
1043
|
const { borderRadius: t } = n.transformData, a = n.transformData.width ?? 100, r = n.transformData.height ?? 100, o = -a / 2, s = -r / 2;
|
|
1044
1044
|
if (e.beginPath(), t && t > 0) {
|
|
@@ -1056,23 +1056,23 @@ function Dn(e, n, t, a, r, o, s = "destination-out") {
|
|
|
1056
1056
|
}
|
|
1057
1057
|
const i = e.getTransform();
|
|
1058
1058
|
e.save();
|
|
1059
|
-
const l = n.knockoutParts.scope || "group", d =
|
|
1059
|
+
const l = n.knockoutParts.scope || "group", d = Ht(n, l, t);
|
|
1060
1060
|
if (d.length === 0 && l === "artboard") {
|
|
1061
|
-
|
|
1061
|
+
jt(e, n, a), e.restore();
|
|
1062
1062
|
return;
|
|
1063
1063
|
}
|
|
1064
1064
|
if (d.length === 0) {
|
|
1065
1065
|
a(e, n), e.restore();
|
|
1066
1066
|
return;
|
|
1067
1067
|
}
|
|
1068
|
-
const u = e.canvas, f = e.getTransform().a, $ =
|
|
1068
|
+
const u = e.canvas, f = e.getTransform().a, $ = qt(u.width, u.height), h = $.getContext("2d");
|
|
1069
1069
|
if (!h) return;
|
|
1070
1070
|
h.scale(f, f), r && o && (h.fillStyle = r, h.fillRect(o.x, o.y, o.width, o.height));
|
|
1071
1071
|
for (const m of d)
|
|
1072
1072
|
a(h, m);
|
|
1073
|
-
n.knockoutParts.fill && !n.knockoutParts.stroke && ((x = n.stroke) != null && x.enabled) && (h.save(),
|
|
1074
|
-
const
|
|
1075
|
-
e.drawImage($, 0, 0,
|
|
1073
|
+
n.knockoutParts.fill && !n.knockoutParts.stroke && ((x = n.stroke) != null && x.enabled) && (h.save(), On(h, n), h.restore()), h.save(), h.globalCompositeOperation = s, n.knockoutParts.fill && Mn(h, n), n.knockoutParts.stroke && On(h, n), h.restore(), n.knockoutParts.fill || (h.save(), Mn(h, n), h.restore());
|
|
1074
|
+
const g = u.width / f, v = u.height / f;
|
|
1075
|
+
e.drawImage($, 0, 0, g, v), e.restore();
|
|
1076
1076
|
const y = e.getTransform();
|
|
1077
1077
|
(Math.abs(y.a - i.a) > 1e-3 || Math.abs(y.d - i.d) > 1e-3 || Math.abs(y.e - i.e) > 1e-3 || Math.abs(y.f - i.f) > 1e-3) && e.setTransform(
|
|
1078
1078
|
i.a,
|
|
@@ -1083,59 +1083,59 @@ function Dn(e, n, t, a, r, o, s = "destination-out") {
|
|
|
1083
1083
|
i.f
|
|
1084
1084
|
);
|
|
1085
1085
|
}
|
|
1086
|
-
function
|
|
1086
|
+
function Xa(e, n, t, a, r, o) {
|
|
1087
1087
|
Dn(e, n, t, a, r, o, "destination-out");
|
|
1088
1088
|
}
|
|
1089
|
-
function
|
|
1090
|
-
return n === "artboard" ?
|
|
1089
|
+
function Ht(e, n, t) {
|
|
1090
|
+
return n === "artboard" ? Oe(e, t) : Vt(e, t);
|
|
1091
1091
|
}
|
|
1092
|
-
function
|
|
1092
|
+
function Oe(e, n) {
|
|
1093
1093
|
const t = n.findIndex((a) => a.id === e.id);
|
|
1094
1094
|
return t === -1 ? [] : n.slice(0, t);
|
|
1095
1095
|
}
|
|
1096
|
-
function
|
|
1097
|
-
const t =
|
|
1096
|
+
function Vt(e, n) {
|
|
1097
|
+
const t = Re(e, n);
|
|
1098
1098
|
if (!t)
|
|
1099
|
-
return
|
|
1099
|
+
return Oe(e, n);
|
|
1100
1100
|
if (t.transformType !== "group" || !t.children)
|
|
1101
1101
|
return [];
|
|
1102
1102
|
const a = t.children.findIndex((r) => r.id === e.id);
|
|
1103
1103
|
return a === -1 ? [] : t.children.slice(0, a);
|
|
1104
1104
|
}
|
|
1105
|
-
function
|
|
1105
|
+
function Re(e, n) {
|
|
1106
1106
|
for (const t of n)
|
|
1107
1107
|
if (t.transformType === "group" && t.children) {
|
|
1108
1108
|
if (t.children.some((r) => r.id === e.id))
|
|
1109
1109
|
return t;
|
|
1110
|
-
const a =
|
|
1110
|
+
const a = Re(e, t.children);
|
|
1111
1111
|
if (a)
|
|
1112
1112
|
return a;
|
|
1113
1113
|
}
|
|
1114
1114
|
return null;
|
|
1115
1115
|
}
|
|
1116
|
-
function
|
|
1116
|
+
function Mn(e, n, t) {
|
|
1117
1117
|
qn(e, n, {
|
|
1118
1118
|
mode: "fill",
|
|
1119
1119
|
renderingContext: { isKnockout: !0 }
|
|
1120
1120
|
});
|
|
1121
1121
|
}
|
|
1122
|
-
function
|
|
1122
|
+
function On(e, n) {
|
|
1123
1123
|
var t;
|
|
1124
1124
|
(t = n.stroke) != null && t.enabled && qn(e, n, {
|
|
1125
1125
|
mode: "stroke",
|
|
1126
1126
|
renderingContext: { isKnockout: !0 }
|
|
1127
1127
|
});
|
|
1128
1128
|
}
|
|
1129
|
-
function
|
|
1129
|
+
function jt(e, n, t) {
|
|
1130
1130
|
var r;
|
|
1131
1131
|
const a = n.knockoutParts;
|
|
1132
1132
|
if (!a) {
|
|
1133
1133
|
t(e, n);
|
|
1134
1134
|
return;
|
|
1135
1135
|
}
|
|
1136
|
-
a.fill || (e.save(),
|
|
1136
|
+
a.fill || (e.save(), Mn(e, n), e.restore()), !a.stroke && ((r = n.stroke) != null && r.enabled) && (e.save(), On(e, n), e.restore());
|
|
1137
1137
|
}
|
|
1138
|
-
function
|
|
1138
|
+
function qt(e, n) {
|
|
1139
1139
|
if (typeof OffscreenCanvas < "u")
|
|
1140
1140
|
return new OffscreenCanvas(e, n);
|
|
1141
1141
|
if (typeof document < "u") {
|
|
@@ -1155,10 +1155,10 @@ function re(e, n, t, a, r = 0) {
|
|
|
1155
1155
|
};
|
|
1156
1156
|
}
|
|
1157
1157
|
const rn = 64, _n = 512;
|
|
1158
|
-
function
|
|
1158
|
+
function Xt(e, n) {
|
|
1159
1159
|
e.beginPath(), e.arc(n / 2, n / 2, n * 0.45, 0, Math.PI * 2), e.fill();
|
|
1160
1160
|
}
|
|
1161
|
-
function
|
|
1161
|
+
function Yt(e, n) {
|
|
1162
1162
|
const t = n / 2, a = n / 2, r = n * 0.45, o = r * 0.4, s = 5;
|
|
1163
1163
|
e.beginPath();
|
|
1164
1164
|
for (let c = 0; c < s * 2; c++) {
|
|
@@ -1167,15 +1167,15 @@ function jt(e, n) {
|
|
|
1167
1167
|
}
|
|
1168
1168
|
e.closePath(), e.fill();
|
|
1169
1169
|
}
|
|
1170
|
-
function
|
|
1170
|
+
function Kt(e, n) {
|
|
1171
1171
|
const t = n / 2, a = n * 0.42;
|
|
1172
1172
|
e.beginPath(), e.moveTo(t, n * 0.82), e.bezierCurveTo(t - a * 1.1, n * 0.6, t - a * 1.3, n * 0.2, t, n * 0.35), e.bezierCurveTo(t + a * 1.3, n * 0.2, t + a * 1.1, n * 0.6, t, n * 0.82), e.closePath(), e.fill();
|
|
1173
1173
|
}
|
|
1174
|
-
function
|
|
1174
|
+
function Jt(e, n) {
|
|
1175
1175
|
const t = n / 2, a = n / 2, r = n * 0.4, o = n * 0.48;
|
|
1176
1176
|
e.beginPath(), e.moveTo(t, a - o), e.lineTo(t + r, a), e.lineTo(t, a + o), e.lineTo(t - r, a), e.closePath(), e.fill();
|
|
1177
1177
|
}
|
|
1178
|
-
function
|
|
1178
|
+
function Zt(e, n) {
|
|
1179
1179
|
const t = n / 2, a = n / 2, r = n * 0.44;
|
|
1180
1180
|
e.beginPath();
|
|
1181
1181
|
for (let o = 0; o < 6; o++) {
|
|
@@ -1184,11 +1184,11 @@ function Yt(e, n) {
|
|
|
1184
1184
|
}
|
|
1185
1185
|
e.closePath(), e.fill();
|
|
1186
1186
|
}
|
|
1187
|
-
function
|
|
1187
|
+
function Qt(e, n) {
|
|
1188
1188
|
const t = n / 2, a = n * 0.4, r = n * 0.12;
|
|
1189
1189
|
e.beginPath(), e.moveTo(t, r), e.lineTo(t + a, n * 0.25), e.lineTo(t + a, n * 0.55), e.quadraticCurveTo(t + a * 0.3, n * 0.8, t, n * 0.9), e.quadraticCurveTo(t - a * 0.3, n * 0.8, t - a, n * 0.55), e.lineTo(t - a, n * 0.25), e.closePath(), e.fill();
|
|
1190
1190
|
}
|
|
1191
|
-
function
|
|
1191
|
+
function na(e, n) {
|
|
1192
1192
|
const t = n / 2, a = n / 2;
|
|
1193
1193
|
let r = 42;
|
|
1194
1194
|
const o = () => (r = (r * 16807 + 0) % 2147483647, r / 2147483647);
|
|
@@ -1198,7 +1198,7 @@ function Jt(e, n) {
|
|
|
1198
1198
|
e.beginPath(), e.arc(t + Math.cos(c) * i, a + Math.sin(c) * i, l, 0, Math.PI * 2), e.fill();
|
|
1199
1199
|
}
|
|
1200
1200
|
}
|
|
1201
|
-
function
|
|
1201
|
+
function ea(e, n) {
|
|
1202
1202
|
let t = 123;
|
|
1203
1203
|
const a = () => (t = (t * 16807 + 0) % 2147483647, t / 2147483647), r = n * 0.08, o = 40;
|
|
1204
1204
|
e.beginPath(), e.moveTo(r, r);
|
|
@@ -1220,7 +1220,7 @@ function Zt(e, n) {
|
|
|
1220
1220
|
}
|
|
1221
1221
|
e.closePath(), e.fill();
|
|
1222
1222
|
}
|
|
1223
|
-
function
|
|
1223
|
+
function ta(e, n) {
|
|
1224
1224
|
let t = 77;
|
|
1225
1225
|
const a = () => (t = (t * 16807 + 0) % 2147483647, t / 2147483647), r = n * 0.25, o = n * 0.75, s = n * 0.1;
|
|
1226
1226
|
e.beginPath(), e.moveTo(s, r + a() * n * 0.05);
|
|
@@ -1234,23 +1234,23 @@ function Qt(e, n) {
|
|
|
1234
1234
|
}
|
|
1235
1235
|
e.closePath(), e.fill();
|
|
1236
1236
|
}
|
|
1237
|
-
function
|
|
1237
|
+
function aa(e, n) {
|
|
1238
1238
|
const t = n / 2, a = n * 0.55;
|
|
1239
1239
|
e.beginPath(), e.arc(t, a, n * 0.2, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(t - n * 0.18, a + n * 0.02, n * 0.15, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(t + n * 0.18, a + n * 0.02, n * 0.16, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(t - n * 0.06, a - n * 0.14, n * 0.14, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(t + n * 0.1, a - n * 0.12, n * 0.12, 0, Math.PI * 2), e.fill();
|
|
1240
1240
|
}
|
|
1241
|
-
const
|
|
1241
|
+
const ra = [
|
|
1242
1242
|
// Geometric
|
|
1243
|
-
{ id: "circle", name: "Circle", description: "Perfect circle", imageUrl: "builtin-mask:circle", thumbnailUrl: "", category: "geometric", draw:
|
|
1244
|
-
{ id: "star", name: "Star", description: "5-pointed star", imageUrl: "builtin-mask:star", thumbnailUrl: "", category: "geometric", draw:
|
|
1245
|
-
{ id: "heart", name: "Heart", description: "Heart shape", imageUrl: "builtin-mask:heart", thumbnailUrl: "", category: "geometric", draw:
|
|
1246
|
-
{ id: "diamond", name: "Diamond", description: "Diamond/rhombus", imageUrl: "builtin-mask:diamond", thumbnailUrl: "", category: "geometric", draw:
|
|
1247
|
-
{ id: "hexagon", name: "Hexagon", description: "Regular hexagon", imageUrl: "builtin-mask:hexagon", thumbnailUrl: "", category: "geometric", draw:
|
|
1248
|
-
{ id: "shield", name: "Shield", description: "Shield/crest shape", imageUrl: "builtin-mask:shield", thumbnailUrl: "", category: "geometric", draw:
|
|
1243
|
+
{ id: "circle", name: "Circle", description: "Perfect circle", imageUrl: "builtin-mask:circle", thumbnailUrl: "", category: "geometric", draw: Xt },
|
|
1244
|
+
{ id: "star", name: "Star", description: "5-pointed star", imageUrl: "builtin-mask:star", thumbnailUrl: "", category: "geometric", draw: Yt },
|
|
1245
|
+
{ id: "heart", name: "Heart", description: "Heart shape", imageUrl: "builtin-mask:heart", thumbnailUrl: "", category: "geometric", draw: Kt },
|
|
1246
|
+
{ id: "diamond", name: "Diamond", description: "Diamond/rhombus", imageUrl: "builtin-mask:diamond", thumbnailUrl: "", category: "geometric", draw: Jt },
|
|
1247
|
+
{ id: "hexagon", name: "Hexagon", description: "Regular hexagon", imageUrl: "builtin-mask:hexagon", thumbnailUrl: "", category: "geometric", draw: Zt },
|
|
1248
|
+
{ id: "shield", name: "Shield", description: "Shield/crest shape", imageUrl: "builtin-mask:shield", thumbnailUrl: "", category: "geometric", draw: Qt },
|
|
1249
1249
|
// Organic
|
|
1250
|
-
{ id: "splatter", name: "Splatter", description: "Ink splatter", imageUrl: "builtin-mask:splatter", thumbnailUrl: "", category: "organic", draw:
|
|
1251
|
-
{ id: "torn-edge", name: "Torn Edge", description: "Rough torn paper edge", imageUrl: "builtin-mask:torn-edge", thumbnailUrl: "", category: "organic", draw:
|
|
1252
|
-
{ id: "paint-stroke", name: "Paint Stroke", description: "Horizontal brush stroke", imageUrl: "builtin-mask:paint-stroke", thumbnailUrl: "", category: "organic", draw:
|
|
1253
|
-
{ id: "cloud", name: "Cloud", description: "Soft cloud shape", imageUrl: "builtin-mask:cloud", thumbnailUrl: "", category: "organic", draw:
|
|
1250
|
+
{ id: "splatter", name: "Splatter", description: "Ink splatter", imageUrl: "builtin-mask:splatter", thumbnailUrl: "", category: "organic", draw: na },
|
|
1251
|
+
{ id: "torn-edge", name: "Torn Edge", description: "Rough torn paper edge", imageUrl: "builtin-mask:torn-edge", thumbnailUrl: "", category: "organic", draw: ea },
|
|
1252
|
+
{ id: "paint-stroke", name: "Paint Stroke", description: "Horizontal brush stroke", imageUrl: "builtin-mask:paint-stroke", thumbnailUrl: "", category: "organic", draw: ta },
|
|
1253
|
+
{ id: "cloud", name: "Cloud", description: "Soft cloud shape", imageUrl: "builtin-mask:cloud", thumbnailUrl: "", category: "organic", draw: aa }
|
|
1254
1254
|
];
|
|
1255
1255
|
let se = !1;
|
|
1256
1256
|
function ie(e, n) {
|
|
@@ -1258,11 +1258,11 @@ function ie(e, n) {
|
|
|
1258
1258
|
const t = document.createElement("canvas");
|
|
1259
1259
|
return t.width = e, t.height = n, t;
|
|
1260
1260
|
}
|
|
1261
|
-
function
|
|
1261
|
+
function sa() {
|
|
1262
1262
|
if (typeof document > "u" || se) return;
|
|
1263
1263
|
se = !0;
|
|
1264
1264
|
const e = wn.getInstance();
|
|
1265
|
-
for (const n of
|
|
1265
|
+
for (const n of ra) {
|
|
1266
1266
|
const t = ie(_n, _n);
|
|
1267
1267
|
if (!t) continue;
|
|
1268
1268
|
const a = t.getContext("2d");
|
|
@@ -1277,14 +1277,14 @@ function ta() {
|
|
|
1277
1277
|
}
|
|
1278
1278
|
}
|
|
1279
1279
|
}
|
|
1280
|
-
const
|
|
1281
|
-
function
|
|
1280
|
+
const ia = U("MaskRenderer"), Rn = /* @__PURE__ */ new Map(), oa = /* @__PURE__ */ new Map();
|
|
1281
|
+
function Ya(e) {
|
|
1282
1282
|
const n = [];
|
|
1283
1283
|
Rn.forEach((t, a) => {
|
|
1284
1284
|
a.startsWith(e) && n.push(a);
|
|
1285
1285
|
}), n.forEach((t) => Rn.delete(t));
|
|
1286
1286
|
}
|
|
1287
|
-
function
|
|
1287
|
+
function Ka() {
|
|
1288
1288
|
Rn.clear();
|
|
1289
1289
|
}
|
|
1290
1290
|
function oe(e, n, t) {
|
|
@@ -1294,38 +1294,38 @@ function oe(e, n, t) {
|
|
|
1294
1294
|
}
|
|
1295
1295
|
const a = e.canvas, r = gn(a.width, a.height), o = r.getContext("2d");
|
|
1296
1296
|
if (!o) {
|
|
1297
|
-
|
|
1297
|
+
ia.error("[renderWithMasks] Failed to get offscreen context");
|
|
1298
1298
|
return;
|
|
1299
1299
|
}
|
|
1300
1300
|
const s = e.getTransform();
|
|
1301
1301
|
o.setTransform(s), t(o);
|
|
1302
1302
|
for (const c of n.masks)
|
|
1303
|
-
|
|
1303
|
+
ca(o, c, n);
|
|
1304
1304
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0), e.drawImage(r, 0, 0), e.restore();
|
|
1305
1305
|
}
|
|
1306
|
-
function
|
|
1306
|
+
function ca(e, n, t) {
|
|
1307
1307
|
switch (n.type) {
|
|
1308
1308
|
case "clip":
|
|
1309
|
-
|
|
1309
|
+
la(e, n, t);
|
|
1310
1310
|
break;
|
|
1311
1311
|
case "alpha":
|
|
1312
|
-
|
|
1312
|
+
da(e, n, t);
|
|
1313
1313
|
break;
|
|
1314
1314
|
case "luma":
|
|
1315
|
-
|
|
1315
|
+
fa(e, n, t);
|
|
1316
1316
|
break;
|
|
1317
1317
|
case "distress":
|
|
1318
|
-
|
|
1318
|
+
ua(e, n, t);
|
|
1319
1319
|
break;
|
|
1320
1320
|
}
|
|
1321
1321
|
}
|
|
1322
|
-
function
|
|
1322
|
+
function la(e, n, t) {
|
|
1323
1323
|
e.save(), e.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (e.globalAlpha = n.opacity), Sn(e, n.maskElement, t), e.restore();
|
|
1324
1324
|
}
|
|
1325
|
-
function
|
|
1326
|
-
e.save(), e.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (e.globalAlpha = n.opacity), Sn(e, n.maskElement, t), n.feather && n.feather > 0 &&
|
|
1325
|
+
function da(e, n, t) {
|
|
1326
|
+
e.save(), e.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (e.globalAlpha = n.opacity), Sn(e, n.maskElement, t), n.feather && n.feather > 0 && Be(e, n.feather), e.restore();
|
|
1327
1327
|
}
|
|
1328
|
-
function
|
|
1328
|
+
function fa(e, n, t) {
|
|
1329
1329
|
const a = gn(e.canvas.width, e.canvas.height), r = a.getContext("2d");
|
|
1330
1330
|
if (!r) return;
|
|
1331
1331
|
Sn(r, n.maskElement, t);
|
|
@@ -1336,8 +1336,8 @@ function ca(e, n, t) {
|
|
|
1336
1336
|
}
|
|
1337
1337
|
r.putImageData(o, 0, 0), e.save(), e.globalCompositeOperation = "destination-in", n.opacity !== void 0 && (e.globalAlpha = n.opacity), e.drawImage(a, 0, 0), e.restore();
|
|
1338
1338
|
}
|
|
1339
|
-
function
|
|
1340
|
-
e.save(), e.globalCompositeOperation = n.inverted ? "destination-in" : "destination-out", n.opacity !== void 0 && (e.globalAlpha = n.opacity), Sn(e, n.maskElement, t), n.feather && n.feather > 0 &&
|
|
1339
|
+
function ua(e, n, t) {
|
|
1340
|
+
e.save(), e.globalCompositeOperation = n.inverted ? "destination-in" : "destination-out", n.opacity !== void 0 && (e.globalAlpha = n.opacity), Sn(e, n.maskElement, t), n.feather && n.feather > 0 && Be(e, n.feather), e.restore();
|
|
1341
1341
|
}
|
|
1342
1342
|
function Sn(e, n, t) {
|
|
1343
1343
|
const a = t.x || 0, r = t.y || 0, o = n.x || 0, s = n.y || 0, c = {
|
|
@@ -1357,32 +1357,32 @@ function Sn(e, n, t) {
|
|
|
1357
1357
|
const m = n;
|
|
1358
1358
|
if (m.imageUrl)
|
|
1359
1359
|
if (typeof document < "u") {
|
|
1360
|
-
m.imageUrl.startsWith("builtin-mask:") &&
|
|
1361
|
-
const
|
|
1362
|
-
C.complete && C.naturalWidth > 0 && ($ = C),
|
|
1360
|
+
m.imageUrl.startsWith("builtin-mask:") && sa();
|
|
1361
|
+
const b = wn.getInstance(), C = b.acquire(m.imageUrl);
|
|
1362
|
+
C.complete && C.naturalWidth > 0 && ($ = C), b.release(m.imageUrl);
|
|
1363
1363
|
} else
|
|
1364
|
-
h =
|
|
1364
|
+
h = oa.get(m.imageUrl);
|
|
1365
1365
|
}
|
|
1366
|
-
const
|
|
1366
|
+
const g = c.transformData, v = (f == null ? void 0 : f.width) || 0, y = (f == null ? void 0 : f.height) || 0, x = v > 0 && y > 0 && u > 0 && p > 0 && Math.abs(v / y - u / p) > 1e-3;
|
|
1367
1367
|
if (h) {
|
|
1368
1368
|
e.save();
|
|
1369
|
-
const m = (
|
|
1369
|
+
const m = (g == null ? void 0 : g.width) || h.width, b = (g == null ? void 0 : g.height) || h.height;
|
|
1370
1370
|
if (e.translate(c.x || 0, c.y || 0), e.rotate(-(c.rotation || 0) * Math.PI / 180), x) {
|
|
1371
1371
|
const C = re(
|
|
1372
1372
|
m,
|
|
1373
|
-
|
|
1373
|
+
b,
|
|
1374
1374
|
v,
|
|
1375
1375
|
y,
|
|
1376
1376
|
0
|
|
1377
1377
|
);
|
|
1378
1378
|
e.drawImage(h, -C.width / 2, -C.height / 2, C.width, C.height);
|
|
1379
1379
|
} else
|
|
1380
|
-
e.drawImage(h, -m / 2, -
|
|
1380
|
+
e.drawImage(h, -m / 2, -b / 2, m, b);
|
|
1381
1381
|
e.restore();
|
|
1382
1382
|
} else if (x && $) {
|
|
1383
|
-
const m = (
|
|
1383
|
+
const m = (g == null ? void 0 : g.width) || u, b = (g == null ? void 0 : g.height) || p, C = re(
|
|
1384
1384
|
m,
|
|
1385
|
-
|
|
1385
|
+
b,
|
|
1386
1386
|
v,
|
|
1387
1387
|
y,
|
|
1388
1388
|
0
|
|
@@ -1391,7 +1391,7 @@ function Sn(e, n, t) {
|
|
|
1391
1391
|
} else
|
|
1392
1392
|
qn(e, c, { mode: "both", loadedImage: $ });
|
|
1393
1393
|
}
|
|
1394
|
-
function
|
|
1394
|
+
function Be(e, n) {
|
|
1395
1395
|
"filter" in e && (e.filter = `blur(${n}px)`);
|
|
1396
1396
|
}
|
|
1397
1397
|
function gn(e, n) {
|
|
@@ -1403,19 +1403,19 @@ function gn(e, n) {
|
|
|
1403
1403
|
}
|
|
1404
1404
|
throw new Error("No canvas context available");
|
|
1405
1405
|
}
|
|
1406
|
-
function
|
|
1406
|
+
function pa(e, n, t, a) {
|
|
1407
1407
|
if (!n.enabled || !n.imageUrl || n.opacity <= 0) return;
|
|
1408
1408
|
const r = wn.getInstance(), o = r.acquire(n.imageUrl);
|
|
1409
1409
|
if (!o.complete || o.naturalWidth === 0) {
|
|
1410
1410
|
r.release(n.imageUrl);
|
|
1411
1411
|
return;
|
|
1412
1412
|
}
|
|
1413
|
-
const { x: s, y: c, width: i, height: l } = t, d = e.getTransform(), u = d.a * s + d.e, p = d.d * c + d.f, f = d.a * i, $ = d.d * l, h = Math.ceil(f),
|
|
1414
|
-
if (h <= 0 ||
|
|
1413
|
+
const { x: s, y: c, width: i, height: l } = t, d = e.getTransform(), u = d.a * s + d.e, p = d.d * c + d.f, f = d.a * i, $ = d.d * l, h = Math.ceil(f), g = Math.ceil($);
|
|
1414
|
+
if (h <= 0 || g <= 0) {
|
|
1415
1415
|
r.release(n.imageUrl);
|
|
1416
1416
|
return;
|
|
1417
1417
|
}
|
|
1418
|
-
const v = gn(h,
|
|
1418
|
+
const v = gn(h, g), y = v.getContext("2d");
|
|
1419
1419
|
if (!y) {
|
|
1420
1420
|
r.release(n.imageUrl);
|
|
1421
1421
|
return;
|
|
@@ -1429,25 +1429,58 @@ function da(e, n, t, a) {
|
|
|
1429
1429
|
0,
|
|
1430
1430
|
0,
|
|
1431
1431
|
h,
|
|
1432
|
-
|
|
1432
|
+
g
|
|
1433
1433
|
);
|
|
1434
1434
|
let x;
|
|
1435
1435
|
if (n.maskType === "luma" ? x = "destination-in" : x = n.inverted ? "destination-out" : "destination-in", n.maskType === "luma") {
|
|
1436
|
-
const m = gn(h,
|
|
1437
|
-
if (
|
|
1438
|
-
|
|
1439
|
-
const C =
|
|
1436
|
+
const m = gn(h, g), b = m.getContext("2d");
|
|
1437
|
+
if (b) {
|
|
1438
|
+
b.drawImage(o, 0, 0, h, g);
|
|
1439
|
+
const C = b.getImageData(0, 0, h, g), T = C.data;
|
|
1440
1440
|
for (let k = 0; k < T.length; k += 4) {
|
|
1441
1441
|
const _ = 0.299 * T[k] + 0.587 * T[k + 1] + 0.114 * T[k + 2];
|
|
1442
1442
|
T[k + 3] = n.inverted ? 255 - _ : _;
|
|
1443
1443
|
}
|
|
1444
|
-
|
|
1444
|
+
b.putImageData(C, 0, 0), y.globalCompositeOperation = "destination-in", y.globalAlpha = n.opacity / 100, y.drawImage(m, 0, 0);
|
|
1445
1445
|
}
|
|
1446
1446
|
} else
|
|
1447
|
-
y.globalCompositeOperation = x, y.globalAlpha = n.opacity / 100, y.drawImage(o, 0, 0, h,
|
|
1447
|
+
y.globalCompositeOperation = x, y.globalAlpha = n.opacity / 100, y.drawImage(o, 0, 0, h, g);
|
|
1448
1448
|
y.globalCompositeOperation = "source-over", y.globalAlpha = 1, e.save(), e.setTransform(1, 0, 0, 1, 0, 0), e.clearRect(u, p, f, $), a && (e.fillStyle = a, e.fillRect(u, p, f, $)), e.drawImage(v, u, p), e.restore(), r.release(n.imageUrl);
|
|
1449
1449
|
}
|
|
1450
|
-
|
|
1450
|
+
function ha(e) {
|
|
1451
|
+
var n;
|
|
1452
|
+
return e ? ((n = e.shadow) == null ? void 0 : n.enabled) === !0 || Se(e.blendMode) : !1;
|
|
1453
|
+
}
|
|
1454
|
+
function ce(e, n, t) {
|
|
1455
|
+
var l;
|
|
1456
|
+
if (!ha(n)) {
|
|
1457
|
+
t(e);
|
|
1458
|
+
return;
|
|
1459
|
+
}
|
|
1460
|
+
const a = (l = n.shadow) != null && l.enabled ? n.shadow : void 0, r = Se(n.blendMode) ? n.blendMode : void 0, o = e.canvas, s = e.getTransform(), c = ga(o.width, o.height), i = c.getContext("2d");
|
|
1461
|
+
if (!i)
|
|
1462
|
+
throw new Error(
|
|
1463
|
+
"[canvas] renderWithLayerEffects: could not acquire a 2D context for the layer-effects raster"
|
|
1464
|
+
);
|
|
1465
|
+
if (i.setTransform(s), t(i), e.save(), e.setTransform(1, 0, 0, 1, 0, 0), r && (e.globalCompositeOperation = r), a) {
|
|
1466
|
+
const d = Math.hypot(s.a, s.b) || 1, u = o.width + 1;
|
|
1467
|
+
e.save(), e.globalAlpha = e.globalAlpha * ba(a.opacity ?? 1), e.shadowColor = a.color, e.shadowBlur = a.blur * d, e.shadowOffsetX = a.offsetX * d + u, e.shadowOffsetY = a.offsetY * d, e.drawImage(c, -u, 0), e.restore();
|
|
1468
|
+
}
|
|
1469
|
+
e.drawImage(c, 0, 0), e.restore();
|
|
1470
|
+
}
|
|
1471
|
+
function ba(e) {
|
|
1472
|
+
return Math.min(1, Math.max(0, e));
|
|
1473
|
+
}
|
|
1474
|
+
function ga(e, n) {
|
|
1475
|
+
if (typeof OffscreenCanvas < "u")
|
|
1476
|
+
return new OffscreenCanvas(e, n);
|
|
1477
|
+
if (typeof document < "u") {
|
|
1478
|
+
const t = document.createElement("canvas");
|
|
1479
|
+
return t.width = e, t.height = n, t;
|
|
1480
|
+
}
|
|
1481
|
+
throw new Error("No canvas context available");
|
|
1482
|
+
}
|
|
1483
|
+
class ma {
|
|
1451
1484
|
constructor(n = Math.random()) {
|
|
1452
1485
|
this.perm = [];
|
|
1453
1486
|
for (let a = 0; a < 256; a++)
|
|
@@ -1486,20 +1519,20 @@ class fa {
|
|
|
1486
1519
|
}
|
|
1487
1520
|
}
|
|
1488
1521
|
function En(e, n, t, a = Date.now()) {
|
|
1489
|
-
const s = Cn(e, n).getContext("2d").createImageData(e, n), c = s.data, i = new
|
|
1522
|
+
const s = Cn(e, n).getContext("2d").createImageData(e, n), c = s.data, i = new ma(a), l = 0.02, d = 1 - t / 100;
|
|
1490
1523
|
for (let u = 0; u < n; u++)
|
|
1491
1524
|
for (let p = 0; p < e; p++) {
|
|
1492
1525
|
const f = (u * e + p) * 4;
|
|
1493
1526
|
let $ = 0;
|
|
1494
1527
|
$ += i.noise(p * l, u * l) * 0.5, $ += i.noise(p * l * 2, u * l * 2) * 0.25, $ += i.noise(p * l * 4, u * l * 4) * 0.125, $ = ($ + 1) / 2;
|
|
1495
|
-
const h = Math.min(p / e, (e - p) / e) * 2,
|
|
1528
|
+
const h = Math.min(p / e, (e - p) / e) * 2, g = Math.min(u / n, (n - u) / n) * 2, v = Math.min(h, g);
|
|
1496
1529
|
$ *= 0.7 + v * 0.3;
|
|
1497
1530
|
const y = $ > d ? 255 : 0;
|
|
1498
1531
|
c[f] = 255, c[f + 1] = 255, c[f + 2] = 255, c[f + 3] = y;
|
|
1499
1532
|
}
|
|
1500
1533
|
return s;
|
|
1501
1534
|
}
|
|
1502
|
-
function
|
|
1535
|
+
function ya(e, n, t, a = Date.now()) {
|
|
1503
1536
|
const o = Cn(e, n).getContext("2d");
|
|
1504
1537
|
o.clearRect(0, 0, e, n), o.strokeStyle = "#000000", o.lineWidth = 1 + t / 50, o.lineCap = "round";
|
|
1505
1538
|
const s = Xn(a), c = Math.floor(t / 100 * 30 + 5);
|
|
@@ -1530,7 +1563,7 @@ function bn(e, n, t, a = Date.now()) {
|
|
|
1530
1563
|
}
|
|
1531
1564
|
return s;
|
|
1532
1565
|
}
|
|
1533
|
-
function
|
|
1566
|
+
function $a(e, n, t, a = Date.now()) {
|
|
1534
1567
|
const o = Cn(e, n).getContext("2d");
|
|
1535
1568
|
o.fillStyle = "#000000";
|
|
1536
1569
|
const s = Xn(a), c = 4 + t / 100 * 6, i = c * 2;
|
|
@@ -1562,13 +1595,13 @@ function Ln(e) {
|
|
|
1562
1595
|
n[t] = 255, n[t + 1] = 255, n[t + 2] = 255;
|
|
1563
1596
|
return e;
|
|
1564
1597
|
}
|
|
1565
|
-
function
|
|
1598
|
+
function xa(e, n) {
|
|
1566
1599
|
const t = e.data, a = n.data;
|
|
1567
1600
|
for (let r = 0; r < t.length; r += 4)
|
|
1568
1601
|
t[r] = 255, t[r + 1] = 255, t[r + 2] = 255, t[r + 3] = Math.min(255, t[r + 3] + a[r + 3]);
|
|
1569
1602
|
return e;
|
|
1570
1603
|
}
|
|
1571
|
-
const
|
|
1604
|
+
const va = [
|
|
1572
1605
|
{
|
|
1573
1606
|
id: "grunge-heavy",
|
|
1574
1607
|
name: "Heavy Grunge",
|
|
@@ -1609,7 +1642,7 @@ const ba = [
|
|
|
1609
1642
|
description: "Noise + splatter combined",
|
|
1610
1643
|
generate: (e, n) => {
|
|
1611
1644
|
const t = En(e, n, 45, N + 4), a = bn(e, n, 35, N + 5);
|
|
1612
|
-
return
|
|
1645
|
+
return xa(Ln(t), Ln(a));
|
|
1613
1646
|
}
|
|
1614
1647
|
},
|
|
1615
1648
|
{
|
|
@@ -1618,7 +1651,7 @@ const ba = [
|
|
|
1618
1651
|
textureUrl: "builtin:scratches",
|
|
1619
1652
|
thumbnailUrl: "",
|
|
1620
1653
|
description: "Branching crack lines",
|
|
1621
|
-
generate: (e, n) =>
|
|
1654
|
+
generate: (e, n) => ya(e, n, 55, N + 6)
|
|
1622
1655
|
},
|
|
1623
1656
|
{
|
|
1624
1657
|
id: "halftone",
|
|
@@ -1626,7 +1659,7 @@ const ba = [
|
|
|
1626
1659
|
textureUrl: "builtin:halftone",
|
|
1627
1660
|
thumbnailUrl: "",
|
|
1628
1661
|
description: "Dot grid pattern",
|
|
1629
|
-
generate: (e, n) =>
|
|
1662
|
+
generate: (e, n) => $a(e, n, 55, N + 7)
|
|
1630
1663
|
},
|
|
1631
1664
|
{
|
|
1632
1665
|
id: "spray",
|
|
@@ -1637,25 +1670,25 @@ const ba = [
|
|
|
1637
1670
|
generate: (e, n) => bn(e, n, 55, N + 8)
|
|
1638
1671
|
}
|
|
1639
1672
|
];
|
|
1640
|
-
let
|
|
1641
|
-
function
|
|
1673
|
+
let le = !1;
|
|
1674
|
+
function wa(e, n) {
|
|
1642
1675
|
if (typeof OffscreenCanvas < "u")
|
|
1643
1676
|
return new OffscreenCanvas(e, n);
|
|
1644
1677
|
const t = document.createElement("canvas");
|
|
1645
1678
|
return t.width = e, t.height = n, t;
|
|
1646
1679
|
}
|
|
1647
|
-
function
|
|
1680
|
+
function de(e, n) {
|
|
1648
1681
|
if (typeof document > "u") return null;
|
|
1649
1682
|
const t = document.createElement("canvas");
|
|
1650
1683
|
return t.width = e, t.height = n, t;
|
|
1651
1684
|
}
|
|
1652
|
-
function
|
|
1653
|
-
const n =
|
|
1685
|
+
function Sa(e) {
|
|
1686
|
+
const n = de(e.width, e.height);
|
|
1654
1687
|
if (!n) return "";
|
|
1655
1688
|
const t = n.getContext("2d");
|
|
1656
1689
|
if (!t) return "";
|
|
1657
1690
|
t.putImageData(e, 0, 0);
|
|
1658
|
-
const a =
|
|
1691
|
+
const a = de(J, J);
|
|
1659
1692
|
if (!a) return "";
|
|
1660
1693
|
const r = a.getContext("2d");
|
|
1661
1694
|
if (!r) return "";
|
|
@@ -1667,29 +1700,29 @@ function ma(e) {
|
|
|
1667
1700
|
}
|
|
1668
1701
|
return r.putImageData(o, 0, 0), a.toDataURL("image/png");
|
|
1669
1702
|
}
|
|
1670
|
-
function
|
|
1671
|
-
if (!
|
|
1672
|
-
|
|
1673
|
-
for (const e of
|
|
1703
|
+
function Ca() {
|
|
1704
|
+
if (!le) {
|
|
1705
|
+
le = !0;
|
|
1706
|
+
for (const e of va) {
|
|
1674
1707
|
const n = e.generate(K, K);
|
|
1675
1708
|
Ln(n);
|
|
1676
|
-
const t =
|
|
1677
|
-
a && (a.putImageData(n, 0, 0),
|
|
1709
|
+
const t = wa(K, K), a = t.getContext("2d");
|
|
1710
|
+
a && (a.putImageData(n, 0, 0), ka(e.textureUrl, t, K, K)), typeof document < "u" && (e.thumbnailUrl = Sa(n));
|
|
1678
1711
|
}
|
|
1679
1712
|
}
|
|
1680
1713
|
}
|
|
1681
1714
|
const z = /* @__PURE__ */ new Set(), G = /* @__PURE__ */ new Map(), mn = /* @__PURE__ */ new Map();
|
|
1682
|
-
function
|
|
1715
|
+
function fe(e, n) {
|
|
1683
1716
|
if (typeof OffscreenCanvas < "u")
|
|
1684
1717
|
return new OffscreenCanvas(e, n);
|
|
1685
1718
|
const t = document.createElement("canvas");
|
|
1686
1719
|
return t.width = e, t.height = n, t;
|
|
1687
1720
|
}
|
|
1688
|
-
function
|
|
1721
|
+
function ue(e) {
|
|
1689
1722
|
return e.getContext("2d");
|
|
1690
1723
|
}
|
|
1691
|
-
function
|
|
1692
|
-
const { width: n, height: t } = e, a =
|
|
1724
|
+
function pe(e) {
|
|
1725
|
+
const { width: n, height: t } = e, a = fe(n, t), r = ue(a);
|
|
1693
1726
|
if (!r) throw new Error("Failed to get 2d context for temp canvas");
|
|
1694
1727
|
r.drawImage(e, 0, 0);
|
|
1695
1728
|
const o = r.getImageData(0, 0, n, t), s = o.data;
|
|
@@ -1697,67 +1730,67 @@ function ue(e) {
|
|
|
1697
1730
|
const d = s[l], u = s[l + 1], p = s[l + 2], $ = 255 - (0.299 * d + 0.587 * u + 0.114 * p);
|
|
1698
1731
|
s[l] = 255, s[l + 1] = 255, s[l + 2] = 255, s[l + 3] = $;
|
|
1699
1732
|
}
|
|
1700
|
-
const c =
|
|
1733
|
+
const c = fe(n, t), i = ue(c);
|
|
1701
1734
|
if (!i) throw new Error("Failed to get 2d context for mask canvas");
|
|
1702
1735
|
return i.putImageData(o, 0, 0), { alphaMask: c, width: n, height: t };
|
|
1703
1736
|
}
|
|
1704
|
-
function
|
|
1737
|
+
function Le(e) {
|
|
1705
1738
|
const n = G.get(e);
|
|
1706
1739
|
if (n) return n;
|
|
1707
1740
|
if (e.startsWith("builtin:")) {
|
|
1708
|
-
|
|
1741
|
+
Ca();
|
|
1709
1742
|
const t = G.get(e);
|
|
1710
1743
|
return t || null;
|
|
1711
1744
|
}
|
|
1712
|
-
return z.has(e) || (z.add(e),
|
|
1745
|
+
return z.has(e) || (z.add(e), Ne(e)), null;
|
|
1713
1746
|
}
|
|
1714
|
-
function
|
|
1747
|
+
function Ja(e) {
|
|
1715
1748
|
return G.has(e) ? Promise.resolve() : new Promise((n) => {
|
|
1716
1749
|
if (G.has(e)) {
|
|
1717
1750
|
n();
|
|
1718
1751
|
return;
|
|
1719
1752
|
}
|
|
1720
1753
|
const t = mn.get(e) || [];
|
|
1721
|
-
t.push(n), mn.set(e, t), z.has(e) || (z.add(e),
|
|
1754
|
+
t.push(n), mn.set(e, t), z.has(e) || (z.add(e), Ne(e));
|
|
1722
1755
|
});
|
|
1723
1756
|
}
|
|
1724
|
-
function
|
|
1757
|
+
function ka(e, n, t, a) {
|
|
1725
1758
|
G.has(e) || (G.set(e, { alphaMask: n, width: t, height: a }), sn(e));
|
|
1726
1759
|
}
|
|
1727
1760
|
function sn(e) {
|
|
1728
1761
|
const n = mn.get(e);
|
|
1729
1762
|
n && (n.forEach((t) => t()), mn.delete(e));
|
|
1730
1763
|
}
|
|
1731
|
-
function
|
|
1764
|
+
function Ne(e) {
|
|
1732
1765
|
if (typeof document < "u") {
|
|
1733
1766
|
const n = new Image();
|
|
1734
1767
|
n.crossOrigin = "anonymous", n.onload = () => {
|
|
1735
|
-
const t =
|
|
1768
|
+
const t = pe(n);
|
|
1736
1769
|
G.set(e, t), z.delete(e), sn(e);
|
|
1737
1770
|
}, n.onerror = () => {
|
|
1738
1771
|
z.delete(e), sn(e);
|
|
1739
1772
|
}, n.src = e;
|
|
1740
1773
|
} else
|
|
1741
1774
|
fetch(e).then((n) => n.blob()).then((n) => createImageBitmap(n)).then((n) => {
|
|
1742
|
-
const t =
|
|
1775
|
+
const t = pe(n);
|
|
1743
1776
|
G.set(e, t), z.delete(e), sn(e);
|
|
1744
1777
|
}).catch(() => {
|
|
1745
1778
|
z.delete(e), sn(e);
|
|
1746
1779
|
});
|
|
1747
1780
|
}
|
|
1748
|
-
function
|
|
1781
|
+
function Ue(e, n) {
|
|
1749
1782
|
if (typeof OffscreenCanvas < "u")
|
|
1750
1783
|
return new OffscreenCanvas(e, n);
|
|
1751
1784
|
const t = document.createElement("canvas");
|
|
1752
1785
|
return t.width = e, t.height = n, t;
|
|
1753
1786
|
}
|
|
1754
|
-
function
|
|
1787
|
+
function Ta(e, n, t, a) {
|
|
1755
1788
|
if (!n.enabled || !n.textureUrl || n.intensity <= 0) return;
|
|
1756
|
-
const r =
|
|
1789
|
+
const r = Le(n.textureUrl);
|
|
1757
1790
|
if (!r) return;
|
|
1758
1791
|
const { x: o, y: s, width: c, height: i } = t, l = e.getTransform(), d = l.a * o + l.e, u = l.d * s + l.f, p = l.a * c, f = l.d * i, $ = Math.ceil(p), h = Math.ceil(f);
|
|
1759
1792
|
if ($ <= 0 || h <= 0) return;
|
|
1760
|
-
const
|
|
1793
|
+
const g = Ue($, h), v = g.getContext("2d");
|
|
1761
1794
|
if (!v) return;
|
|
1762
1795
|
v.drawImage(
|
|
1763
1796
|
e.canvas,
|
|
@@ -1772,22 +1805,22 @@ function xa(e, n, t, a) {
|
|
|
1772
1805
|
);
|
|
1773
1806
|
const y = r.alphaMask.getContext("2d");
|
|
1774
1807
|
if (y) {
|
|
1775
|
-
const x = n.intensity / 100, m = y.getImageData(0, 0, r.width, r.height).data,
|
|
1808
|
+
const x = n.intensity / 100, m = y.getImageData(0, 0, r.width, r.height).data, b = r.width, C = r.height, T = v.getImageData(0, 0, $, h), k = T.data;
|
|
1776
1809
|
for (let _ = 0; _ < h; _++) {
|
|
1777
1810
|
const w = Math.floor(_ / h * C);
|
|
1778
1811
|
for (let A = 0; A < $; A++) {
|
|
1779
|
-
const E = Math.floor(A / $ *
|
|
1812
|
+
const E = Math.floor(A / $ * b), S = m[(w * b + E) * 4 + 3] / 255, P = (_ * $ + A) * 4;
|
|
1780
1813
|
k[P + 3] = Math.round(k[P + 3] * (1 - S * x));
|
|
1781
1814
|
}
|
|
1782
1815
|
}
|
|
1783
1816
|
v.putImageData(T, 0, 0);
|
|
1784
1817
|
} else
|
|
1785
1818
|
v.globalCompositeOperation = "destination-out", v.globalAlpha = n.intensity / 100, v.drawImage(r.alphaMask, 0, 0, $, h), v.globalCompositeOperation = "source-over";
|
|
1786
|
-
v.globalAlpha = 1, e.save(), e.setTransform(1, 0, 0, 1, 0, 0), e.clearRect(d, u, p, f), a && (e.fillStyle = a, e.fillRect(d, u, p, f)), e.drawImage(
|
|
1819
|
+
v.globalAlpha = 1, e.save(), e.setTransform(1, 0, 0, 1, 0, 0), e.clearRect(d, u, p, f), a && (e.fillStyle = a, e.fillRect(d, u, p, f)), e.drawImage(g, d, u), e.restore();
|
|
1787
1820
|
}
|
|
1788
|
-
function
|
|
1821
|
+
function he(e, n, t, a) {
|
|
1789
1822
|
if (!n.enabled || n.style !== "custom" || !n.textureUrl) return;
|
|
1790
|
-
const r =
|
|
1823
|
+
const r = Le(n.textureUrl);
|
|
1791
1824
|
if (!r) {
|
|
1792
1825
|
a(e);
|
|
1793
1826
|
return;
|
|
@@ -1797,27 +1830,27 @@ function pe(e, n, t, a) {
|
|
|
1797
1830
|
y: t.y - p,
|
|
1798
1831
|
width: t.width + u * 2,
|
|
1799
1832
|
height: t.height + p * 2
|
|
1800
|
-
}, $ = s.a * f.x + s.e, h = s.d * f.y + s.f,
|
|
1833
|
+
}, $ = s.a * f.x + s.e, h = s.d * f.y + s.f, g = s.a * f.width, v = s.d * f.height, y = Math.ceil(g), x = Math.ceil(v);
|
|
1801
1834
|
if (y <= 0 || x <= 0) {
|
|
1802
1835
|
a(e);
|
|
1803
1836
|
return;
|
|
1804
1837
|
}
|
|
1805
|
-
const m =
|
|
1806
|
-
if (!
|
|
1838
|
+
const m = Ue(y, x), b = m.getContext("2d");
|
|
1839
|
+
if (!b) {
|
|
1807
1840
|
a(e);
|
|
1808
1841
|
return;
|
|
1809
1842
|
}
|
|
1810
|
-
|
|
1843
|
+
b.setTransform(
|
|
1811
1844
|
s.a,
|
|
1812
1845
|
s.b,
|
|
1813
1846
|
s.c,
|
|
1814
1847
|
s.d,
|
|
1815
1848
|
s.e - $,
|
|
1816
1849
|
s.f - h
|
|
1817
|
-
), a(
|
|
1850
|
+
), a(b), b.setTransform(1, 0, 0, 1, 0, 0);
|
|
1818
1851
|
const C = r.alphaMask.getContext("2d");
|
|
1819
1852
|
if (C) {
|
|
1820
|
-
const T = C.getImageData(0, 0, r.width, r.height).data, k = r.width, _ = r.height, w =
|
|
1853
|
+
const T = C.getImageData(0, 0, r.width, r.height).data, k = r.width, _ = r.height, w = b.getImageData(0, 0, y, x), A = w.data;
|
|
1821
1854
|
for (let E = 0; E < x; E++) {
|
|
1822
1855
|
const S = Math.floor(E / x * _);
|
|
1823
1856
|
for (let P = 0; P < y; P++) {
|
|
@@ -1825,9 +1858,9 @@ function pe(e, n, t, a) {
|
|
|
1825
1858
|
A[D + 3] = Math.round(A[D + 3] * (1 - F * o));
|
|
1826
1859
|
}
|
|
1827
1860
|
}
|
|
1828
|
-
|
|
1861
|
+
b.putImageData(w, 0, 0);
|
|
1829
1862
|
} else
|
|
1830
|
-
|
|
1863
|
+
b.globalCompositeOperation = "destination-out", b.globalAlpha = o, b.drawImage(r.alphaMask, 0, 0, y, x), b.globalCompositeOperation = "source-over", b.globalAlpha = 1;
|
|
1831
1864
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0), e.drawImage(m, $, h), e.restore();
|
|
1832
1865
|
}
|
|
1833
1866
|
class yn {
|
|
@@ -1843,33 +1876,33 @@ class yn {
|
|
|
1843
1876
|
const { transformType: t } = n;
|
|
1844
1877
|
switch (t) {
|
|
1845
1878
|
case "custom":
|
|
1846
|
-
return new
|
|
1879
|
+
return new ct(n);
|
|
1847
1880
|
case "distort":
|
|
1848
1881
|
throw new Error("DistortTransform is not yet implemented");
|
|
1849
1882
|
case "circle":
|
|
1850
|
-
return new
|
|
1883
|
+
return new ot(n);
|
|
1851
1884
|
case "lean":
|
|
1852
|
-
return new
|
|
1885
|
+
return new it(n);
|
|
1853
1886
|
case "arch":
|
|
1854
|
-
return new
|
|
1887
|
+
return new st(n);
|
|
1855
1888
|
case "ascend":
|
|
1856
|
-
return new
|
|
1889
|
+
return new rt(n);
|
|
1857
1890
|
case "wave":
|
|
1858
|
-
return new
|
|
1891
|
+
return new at(n);
|
|
1859
1892
|
case "flag":
|
|
1860
|
-
return new
|
|
1893
|
+
return new tt(n);
|
|
1861
1894
|
case "image":
|
|
1862
1895
|
return new An(n);
|
|
1863
1896
|
case "group": {
|
|
1864
1897
|
const r = (n.children || []).map(
|
|
1865
1898
|
(i) => yn.createFromJSON(i)
|
|
1866
|
-
), { children: o, ...s } = n, c = new
|
|
1899
|
+
), { children: o, ...s } = n, c = new ve(s);
|
|
1867
1900
|
return r.forEach((i) => c.addChild(i)), c;
|
|
1868
1901
|
}
|
|
1869
1902
|
case "shape":
|
|
1870
|
-
return new
|
|
1903
|
+
return new et(n);
|
|
1871
1904
|
case "path":
|
|
1872
|
-
return new
|
|
1905
|
+
return new nt(n);
|
|
1873
1906
|
default:
|
|
1874
1907
|
const a = t;
|
|
1875
1908
|
throw new Error(`Unknown transform type: ${a}`);
|
|
@@ -2083,7 +2116,7 @@ class yn {
|
|
|
2083
2116
|
return this.createFromJSON(t);
|
|
2084
2117
|
}
|
|
2085
2118
|
}
|
|
2086
|
-
const
|
|
2119
|
+
const be = U("ImportManager"), Kn = class Kn {
|
|
2087
2120
|
/**
|
|
2088
2121
|
* Import workspace from JSON file
|
|
2089
2122
|
*/
|
|
@@ -2111,7 +2144,7 @@ const he = U("ImportManager"), Kn = class Kn {
|
|
|
2111
2144
|
try {
|
|
2112
2145
|
return yn.createFromJSON(l);
|
|
2113
2146
|
} catch (d) {
|
|
2114
|
-
return
|
|
2147
|
+
return be.error("Failed to create element:", l, d), null;
|
|
2115
2148
|
}
|
|
2116
2149
|
}).filter((l) => l !== null);
|
|
2117
2150
|
r.push(c), o.push(...i);
|
|
@@ -2146,7 +2179,7 @@ const he = U("ImportManager"), Kn = class Kn {
|
|
|
2146
2179
|
try {
|
|
2147
2180
|
return yn.createFromJSON(i);
|
|
2148
2181
|
} catch (l) {
|
|
2149
|
-
return
|
|
2182
|
+
return be.error("Failed to create element:", i, l), null;
|
|
2150
2183
|
}
|
|
2151
2184
|
}).filter((i) => i !== null);
|
|
2152
2185
|
return c.forEach((i) => {
|
|
@@ -2298,13 +2331,13 @@ const he = U("ImportManager"), Kn = class Kn {
|
|
|
2298
2331
|
}
|
|
2299
2332
|
};
|
|
2300
2333
|
Kn.SUPPORTED_VERSIONS = ["1.0.0", "2.0.0"];
|
|
2301
|
-
let
|
|
2302
|
-
const
|
|
2303
|
-
function
|
|
2304
|
-
const t = n ?
|
|
2334
|
+
let ge = Kn;
|
|
2335
|
+
const me = U("element-serializer"), We = 4e3, un = /* @__PURE__ */ new Set();
|
|
2336
|
+
function _a(e, n) {
|
|
2337
|
+
const t = n ? Ea(n) : "no-src";
|
|
2305
2338
|
return `${e}:${t}`;
|
|
2306
2339
|
}
|
|
2307
|
-
function
|
|
2340
|
+
function Ea(e) {
|
|
2308
2341
|
let n = 0;
|
|
2309
2342
|
for (let t = 0; t < e.length; t++) {
|
|
2310
2343
|
const a = e.charCodeAt(t);
|
|
@@ -2315,17 +2348,17 @@ function wa(e) {
|
|
|
2315
2348
|
function Nn() {
|
|
2316
2349
|
un.clear();
|
|
2317
2350
|
}
|
|
2318
|
-
function
|
|
2351
|
+
function ze(e) {
|
|
2319
2352
|
for (const n of un)
|
|
2320
2353
|
n.startsWith(`${e}:`) && un.delete(n);
|
|
2321
2354
|
}
|
|
2322
|
-
function
|
|
2355
|
+
function Aa(e) {
|
|
2323
2356
|
un.add(e);
|
|
2324
2357
|
}
|
|
2325
|
-
function
|
|
2358
|
+
function Pa(e) {
|
|
2326
2359
|
return un.has(e);
|
|
2327
2360
|
}
|
|
2328
|
-
async function
|
|
2361
|
+
async function Ia(e, n = We) {
|
|
2329
2362
|
const { naturalWidth: t, naturalHeight: a } = e;
|
|
2330
2363
|
if (t <= n && a <= n)
|
|
2331
2364
|
return createImageBitmap(e);
|
|
@@ -2337,17 +2370,17 @@ async function ka(e, n = Ne) {
|
|
|
2337
2370
|
});
|
|
2338
2371
|
}
|
|
2339
2372
|
let $n = null, xn = null;
|
|
2340
|
-
function
|
|
2373
|
+
function Fa(e, n) {
|
|
2341
2374
|
$n = e, xn = n;
|
|
2342
2375
|
}
|
|
2343
|
-
function
|
|
2376
|
+
function Da() {
|
|
2344
2377
|
$n = null, xn = null;
|
|
2345
2378
|
}
|
|
2346
|
-
function
|
|
2379
|
+
function Za() {
|
|
2347
2380
|
Nn(), $n && $n();
|
|
2348
2381
|
}
|
|
2349
|
-
function
|
|
2350
|
-
|
|
2382
|
+
function Qa(e) {
|
|
2383
|
+
ze(e), xn && xn(e);
|
|
2351
2384
|
}
|
|
2352
2385
|
function Un(e, n) {
|
|
2353
2386
|
const t = e;
|
|
@@ -2369,7 +2402,7 @@ function Un(e, n) {
|
|
|
2369
2402
|
for (const a of e.masks)
|
|
2370
2403
|
a.maskElement && Un(a.maskElement, n);
|
|
2371
2404
|
}
|
|
2372
|
-
function
|
|
2405
|
+
function ye(e) {
|
|
2373
2406
|
if (typeof document > "u") return e;
|
|
2374
2407
|
const n = wn.getInstance();
|
|
2375
2408
|
return e.map((t) => {
|
|
@@ -2387,22 +2420,22 @@ function me(e) {
|
|
|
2387
2420
|
} : t;
|
|
2388
2421
|
});
|
|
2389
2422
|
}
|
|
2390
|
-
async function
|
|
2423
|
+
async function $e(e, n, t = We) {
|
|
2391
2424
|
const a = n.filter((i) => e.hasElementId(i.id)), r = [], o = [], s = /* @__PURE__ */ new Set();
|
|
2392
2425
|
for (const i of a) {
|
|
2393
2426
|
const l = i.toJSON();
|
|
2394
2427
|
if (Un(l, s), i instanceof An && !i.imageElement) {
|
|
2395
|
-
|
|
2428
|
+
me.warn(`[element-serializer] Skipping image ${i.id}: image not loaded (state: ${i.imageLoadState})`);
|
|
2396
2429
|
continue;
|
|
2397
2430
|
}
|
|
2398
2431
|
if (i instanceof An && i.imageElement)
|
|
2399
2432
|
try {
|
|
2400
|
-
const d =
|
|
2401
|
-
if (!
|
|
2402
|
-
const x = await
|
|
2403
|
-
o.push({ cacheKey: d, bitmap: x }),
|
|
2433
|
+
const d = _a(i.id, i.imageUrl);
|
|
2434
|
+
if (!Pa(d)) {
|
|
2435
|
+
const x = await Ia(i.imageElement, t);
|
|
2436
|
+
o.push({ cacheKey: d, bitmap: x }), Aa(d);
|
|
2404
2437
|
}
|
|
2405
|
-
const p = i.transformData || {}, f = l.masks && l.masks.length > 0, $ = f ? p.width : p.width * (p.cropWidth ?? 1), h = f ? p.height : p.height * (p.cropHeight ?? 1),
|
|
2438
|
+
const p = i.transformData || {}, f = l.masks && l.masks.length > 0, $ = f ? p.width : p.width * (p.cropWidth ?? 1), h = f ? p.height : p.height * (p.cropHeight ?? 1), g = {
|
|
2406
2439
|
id: i.id,
|
|
2407
2440
|
type: "image",
|
|
2408
2441
|
x: i.x,
|
|
@@ -2414,14 +2447,14 @@ async function ye(e, n, t = Ne) {
|
|
|
2414
2447
|
};
|
|
2415
2448
|
if (!f && (p.cropX !== 0 || p.cropY !== 0 || p.cropWidth !== 1 || p.cropHeight !== 1)) {
|
|
2416
2449
|
const x = i.imageElement.naturalWidth, m = i.imageElement.naturalHeight;
|
|
2417
|
-
let
|
|
2418
|
-
(x > t || m > t) && (
|
|
2450
|
+
let b = 1;
|
|
2451
|
+
(x > t || m > t) && (b = t / Math.max(x, m)), g.cropX = p.cropX * x * b, g.cropY = p.cropY * m * b, g.cropWidth = p.cropWidth * x * b, g.cropHeight = p.cropHeight * m * b;
|
|
2419
2452
|
}
|
|
2420
|
-
p.flipHorizontal && (
|
|
2421
|
-
const y =
|
|
2422
|
-
i.distressEffect && (y.distressEffect = { ...i.distressEffect }), l.masks && l.masks.length > 0 && (y.masks =
|
|
2453
|
+
p.flipHorizontal && (g.flipHorizontal = p.flipHorizontal), p.flipVertical && (g.flipVertical = p.flipVertical), p.borderRadius && (g.borderRadius = p.borderRadius), lt(p.adjustments) || (g.adjustments = { ...p.adjustments }), i.opacity !== void 0 && (g.opacity = i.opacity);
|
|
2454
|
+
const y = g;
|
|
2455
|
+
i.distressEffect && (y.distressEffect = { ...i.distressEffect }), l.masks && l.masks.length > 0 && (y.masks = ye(l.masks)), l.blendMode && (y.blendMode = l.blendMode), l.knockoutParts && (y.knockoutParts = l.knockoutParts), l.shadow && (y.shadow = { ...l.shadow }), "getVisualBoundingBox" in i && typeof i.getVisualBoundingBox == "function" ? y._boundingBox = i.getVisualBoundingBox() : "getBoundingBox" in i && typeof i.getBoundingBox == "function" && (y._boundingBox = i.getBoundingBox()), r.push(y);
|
|
2423
2456
|
} catch (d) {
|
|
2424
|
-
|
|
2457
|
+
me.error(`[element-serializer] Failed to create ImageBitmap for ${l.id}:`, d);
|
|
2425
2458
|
}
|
|
2426
2459
|
else {
|
|
2427
2460
|
const d = {
|
|
@@ -2429,7 +2462,7 @@ async function ye(e, n, t = Ne) {
|
|
|
2429
2462
|
type: l.transformType
|
|
2430
2463
|
// Map transformType to type for worker compatibility
|
|
2431
2464
|
};
|
|
2432
|
-
d.masks && Array.isArray(d.masks) && d.masks.length > 0 && (d.masks =
|
|
2465
|
+
d.masks && Array.isArray(d.masks) && d.masks.length > 0 && (d.masks = ye(d.masks)), "getVisualBoundingBox" in i && typeof i.getVisualBoundingBox == "function" ? d._boundingBox = i.getVisualBoundingBox() : "getBoundingBox" in i && typeof i.getBoundingBox == "function" && (d._boundingBox = i.getBoundingBox()), r.push(d);
|
|
2433
2466
|
}
|
|
2434
2467
|
}
|
|
2435
2468
|
const c = Array.from(s);
|
|
@@ -2454,7 +2487,7 @@ async function ye(e, n, t = Ne) {
|
|
|
2454
2487
|
newBitmaps: o
|
|
2455
2488
|
};
|
|
2456
2489
|
}
|
|
2457
|
-
const
|
|
2490
|
+
const Ma = `"use strict";
|
|
2458
2491
|
(() => {
|
|
2459
2492
|
var __create = Object.create;
|
|
2460
2493
|
var __defProp = Object.defineProperty;
|
|
@@ -21642,6 +21675,13 @@ const Ea = `"use strict";
|
|
|
21642
21675
|
var WAVE_SKEW_FACTOR = 0.3;
|
|
21643
21676
|
|
|
21644
21677
|
// src/types/index.ts
|
|
21678
|
+
var STANDARD_BLEND_MODES = [
|
|
21679
|
+
"multiply",
|
|
21680
|
+
"screen",
|
|
21681
|
+
"overlay",
|
|
21682
|
+
"darken",
|
|
21683
|
+
"lighten"
|
|
21684
|
+
];
|
|
21645
21685
|
var RichText = class _RichText {
|
|
21646
21686
|
constructor(spans = []) {
|
|
21647
21687
|
this.spans = spans.length > 0 ? spans.map((s) => ({ ...s, style: { ...s.style } })) : [{ text: "", style: {} }];
|
|
@@ -21889,6 +21929,9 @@ const Ea = `"use strict";
|
|
|
21889
21929
|
return new _RichText(json.spans);
|
|
21890
21930
|
}
|
|
21891
21931
|
};
|
|
21932
|
+
function isStandardBlendMode(mode) {
|
|
21933
|
+
return STANDARD_BLEND_MODES.includes(mode);
|
|
21934
|
+
}
|
|
21892
21935
|
|
|
21893
21936
|
// src/rendering/transform-renderer.ts
|
|
21894
21937
|
function createOffscreenCanvas(width, height) {
|
|
@@ -24277,6 +24320,44 @@ const Ea = `"use strict";
|
|
|
24277
24320
|
}
|
|
24278
24321
|
}
|
|
24279
24322
|
|
|
24323
|
+
// src/errors/editorError.ts
|
|
24324
|
+
var EditorError = class extends Error {
|
|
24325
|
+
constructor(code, message, data = {}) {
|
|
24326
|
+
super(\`[Editor] \${code}: \${message}\`);
|
|
24327
|
+
this.name = "EditorError";
|
|
24328
|
+
this.code = code;
|
|
24329
|
+
this.data = { code, ...data };
|
|
24330
|
+
}
|
|
24331
|
+
};
|
|
24332
|
+
|
|
24333
|
+
// src/core/shape-fill.ts
|
|
24334
|
+
var DEFAULT_SHAPE_FILL_COLOR = "#3b82f6";
|
|
24335
|
+
function addStops(gradient, stops) {
|
|
24336
|
+
for (const stop of stops) {
|
|
24337
|
+
gradient.addColorStop(Math.min(1, Math.max(0, stop.offset)), stop.color);
|
|
24338
|
+
}
|
|
24339
|
+
return gradient;
|
|
24340
|
+
}
|
|
24341
|
+
function createShapeFillStyle(ctx, transformData) {
|
|
24342
|
+
const { fill } = transformData;
|
|
24343
|
+
if (!fill) return transformData.fillColor || DEFAULT_SHAPE_FILL_COLOR;
|
|
24344
|
+
if (fill.type === "solid") return fill.color;
|
|
24345
|
+
const width = transformData.width ?? 100;
|
|
24346
|
+
const height = transformData.height ?? 100;
|
|
24347
|
+
if (fill.type === "linear") {
|
|
24348
|
+
const theta = fill.angle * Math.PI / 180;
|
|
24349
|
+
const dx = Math.sin(theta);
|
|
24350
|
+
const dy = -Math.cos(theta);
|
|
24351
|
+
const halfLength = (Math.abs(width * dx) + Math.abs(height * dy)) / 2;
|
|
24352
|
+
return addStops(
|
|
24353
|
+
ctx.createLinearGradient(-dx * halfLength, -dy * halfLength, dx * halfLength, dy * halfLength),
|
|
24354
|
+
fill.stops
|
|
24355
|
+
);
|
|
24356
|
+
}
|
|
24357
|
+
const radius = Math.sqrt(width * width + height * height) / 2;
|
|
24358
|
+
return addStops(ctx.createRadialGradient(0, 0, 0, 0, 0, radius), fill.stops);
|
|
24359
|
+
}
|
|
24360
|
+
|
|
24280
24361
|
// src/rendering/shape-renderer.ts
|
|
24281
24362
|
function createTempCanvas(width, height) {
|
|
24282
24363
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
@@ -24334,7 +24415,7 @@ const Ea = `"use strict";
|
|
|
24334
24415
|
ctx.rotate(-elementData.rotation * Math.PI / 180);
|
|
24335
24416
|
}
|
|
24336
24417
|
ctx.globalAlpha = elementOpacity * fillOpacity;
|
|
24337
|
-
ctx.fillStyle = transformData
|
|
24418
|
+
ctx.fillStyle = createShapeFillStyle(ctx, transformData);
|
|
24338
24419
|
ctx.beginPath();
|
|
24339
24420
|
traceShapePath(ctx, transformData);
|
|
24340
24421
|
ctx.fill();
|
|
@@ -24513,7 +24594,7 @@ const Ea = `"use strict";
|
|
|
24513
24594
|
ctx.beginPath();
|
|
24514
24595
|
renderShapePath(ctx, transformData);
|
|
24515
24596
|
if (mode === "fill" || mode === "both") {
|
|
24516
|
-
ctx.fillStyle = isKnockoutRender ? "#000000" : transformData
|
|
24597
|
+
ctx.fillStyle = isKnockoutRender ? "#000000" : createShapeFillStyle(ctx, transformData);
|
|
24517
24598
|
ctx.globalAlpha = isKnockoutRender ? 1 : transformData.fillOpacity ?? 1;
|
|
24518
24599
|
ctx.fill();
|
|
24519
24600
|
}
|
|
@@ -24782,6 +24863,64 @@ const Ea = `"use strict";
|
|
|
24782
24863
|
throw new Error("No canvas context available");
|
|
24783
24864
|
}
|
|
24784
24865
|
|
|
24866
|
+
// src/rendering/LayerEffectsRenderer.ts
|
|
24867
|
+
function hasLayerEffects(config) {
|
|
24868
|
+
if (!config) return false;
|
|
24869
|
+
return config.shadow?.enabled === true || isStandardBlendMode(config.blendMode);
|
|
24870
|
+
}
|
|
24871
|
+
function renderWithLayerEffects(ctx, config, paint) {
|
|
24872
|
+
if (!hasLayerEffects(config)) {
|
|
24873
|
+
paint(ctx);
|
|
24874
|
+
return;
|
|
24875
|
+
}
|
|
24876
|
+
const shadow = config.shadow?.enabled ? config.shadow : void 0;
|
|
24877
|
+
const blend = isStandardBlendMode(config.blendMode) ? config.blendMode : void 0;
|
|
24878
|
+
const canvas = ctx.canvas;
|
|
24879
|
+
const transform = ctx.getTransform();
|
|
24880
|
+
const offscreen = createOffscreenCanvas4(canvas.width, canvas.height);
|
|
24881
|
+
const offCtx = offscreen.getContext("2d");
|
|
24882
|
+
if (!offCtx) {
|
|
24883
|
+
throw new Error(
|
|
24884
|
+
"[canvas] renderWithLayerEffects: could not acquire a 2D context for the layer-effects raster"
|
|
24885
|
+
);
|
|
24886
|
+
}
|
|
24887
|
+
offCtx.setTransform(transform);
|
|
24888
|
+
paint(offCtx);
|
|
24889
|
+
ctx.save();
|
|
24890
|
+
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
24891
|
+
if (blend) {
|
|
24892
|
+
ctx.globalCompositeOperation = blend;
|
|
24893
|
+
}
|
|
24894
|
+
if (shadow) {
|
|
24895
|
+
const scale = Math.hypot(transform.a, transform.b) || 1;
|
|
24896
|
+
const lift = canvas.width + 1;
|
|
24897
|
+
ctx.save();
|
|
24898
|
+
ctx.globalAlpha = ctx.globalAlpha * clamp01(shadow.opacity ?? 1);
|
|
24899
|
+
ctx.shadowColor = shadow.color;
|
|
24900
|
+
ctx.shadowBlur = shadow.blur * scale;
|
|
24901
|
+
ctx.shadowOffsetX = shadow.offsetX * scale + lift;
|
|
24902
|
+
ctx.shadowOffsetY = shadow.offsetY * scale;
|
|
24903
|
+
ctx.drawImage(offscreen, -lift, 0);
|
|
24904
|
+
ctx.restore();
|
|
24905
|
+
}
|
|
24906
|
+
ctx.drawImage(offscreen, 0, 0);
|
|
24907
|
+
ctx.restore();
|
|
24908
|
+
}
|
|
24909
|
+
function clamp01(value) {
|
|
24910
|
+
return Math.min(1, Math.max(0, value));
|
|
24911
|
+
}
|
|
24912
|
+
function createOffscreenCanvas4(width, height) {
|
|
24913
|
+
if (typeof OffscreenCanvas !== "undefined") {
|
|
24914
|
+
return new OffscreenCanvas(width, height);
|
|
24915
|
+
} else if (typeof document !== "undefined") {
|
|
24916
|
+
const canvas = document.createElement("canvas");
|
|
24917
|
+
canvas.width = width;
|
|
24918
|
+
canvas.height = height;
|
|
24919
|
+
return canvas;
|
|
24920
|
+
}
|
|
24921
|
+
throw new Error("No canvas context available");
|
|
24922
|
+
}
|
|
24923
|
+
|
|
24785
24924
|
// src/effects/DistressGenerator.ts
|
|
24786
24925
|
var SimplexNoise = class {
|
|
24787
24926
|
constructor(seed = Math.random()) {
|
|
@@ -25218,7 +25357,7 @@ const Ea = `"use strict";
|
|
|
25218
25357
|
}
|
|
25219
25358
|
|
|
25220
25359
|
// src/rendering/DistressTextureRenderer.ts
|
|
25221
|
-
function
|
|
25360
|
+
function createOffscreenCanvas5(width, height) {
|
|
25222
25361
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
25223
25362
|
return new OffscreenCanvas(width, height);
|
|
25224
25363
|
}
|
|
@@ -25240,7 +25379,7 @@ const Ea = `"use strict";
|
|
|
25240
25379
|
const offWidth = Math.ceil(pixelWidth);
|
|
25241
25380
|
const offHeight = Math.ceil(pixelHeight);
|
|
25242
25381
|
if (offWidth <= 0 || offHeight <= 0) return;
|
|
25243
|
-
const offCanvas =
|
|
25382
|
+
const offCanvas = createOffscreenCanvas5(offWidth, offHeight);
|
|
25244
25383
|
const offCtx = offCanvas.getContext("2d");
|
|
25245
25384
|
if (!offCtx) return;
|
|
25246
25385
|
offCtx.drawImage(
|
|
@@ -25320,7 +25459,7 @@ const Ea = `"use strict";
|
|
|
25320
25459
|
renderFn(ctx);
|
|
25321
25460
|
return;
|
|
25322
25461
|
}
|
|
25323
|
-
const offCanvas =
|
|
25462
|
+
const offCanvas = createOffscreenCanvas5(offWidth, offHeight);
|
|
25324
25463
|
const offCtx = offCanvas.getContext("2d");
|
|
25325
25464
|
if (!offCtx) {
|
|
25326
25465
|
renderFn(ctx);
|
|
@@ -25729,7 +25868,7 @@ const Ea = `"use strict";
|
|
|
25729
25868
|
return;
|
|
25730
25869
|
}
|
|
25731
25870
|
const canvas = ctx.canvas;
|
|
25732
|
-
const offscreen =
|
|
25871
|
+
const offscreen = createOffscreenCanvas6(canvas.width, canvas.height);
|
|
25733
25872
|
const offCtx = offscreen.getContext("2d");
|
|
25734
25873
|
if (!offCtx) {
|
|
25735
25874
|
logger4.error("[renderWithMasks] Failed to get offscreen context");
|
|
@@ -25784,7 +25923,7 @@ const Ea = `"use strict";
|
|
|
25784
25923
|
ctx.restore();
|
|
25785
25924
|
}
|
|
25786
25925
|
function applyLumaMask(ctx, mask, parentElement) {
|
|
25787
|
-
const maskCanvas =
|
|
25926
|
+
const maskCanvas = createOffscreenCanvas6(ctx.canvas.width, ctx.canvas.height);
|
|
25788
25927
|
const maskCtx = maskCanvas.getContext("2d");
|
|
25789
25928
|
if (!maskCtx) return;
|
|
25790
25929
|
renderMaskElement(maskCtx, mask.maskElement, parentElement);
|
|
@@ -25910,7 +26049,7 @@ const Ea = `"use strict";
|
|
|
25910
26049
|
ctx.filter = \`blur(\${featherRadius}px)\`;
|
|
25911
26050
|
}
|
|
25912
26051
|
}
|
|
25913
|
-
function
|
|
26052
|
+
function createOffscreenCanvas6(width, height) {
|
|
25914
26053
|
if (typeof OffscreenCanvas !== "undefined") {
|
|
25915
26054
|
return new OffscreenCanvas(width, height);
|
|
25916
26055
|
} else if (typeof document !== "undefined") {
|
|
@@ -25979,16 +26118,6 @@ const Ea = `"use strict";
|
|
|
25979
26118
|
}
|
|
25980
26119
|
}
|
|
25981
26120
|
|
|
25982
|
-
// src/errors/editorError.ts
|
|
25983
|
-
var EditorError = class extends Error {
|
|
25984
|
-
constructor(code, message, data = {}) {
|
|
25985
|
-
super(\`[Editor] \${code}: \${message}\`);
|
|
25986
|
-
this.name = "EditorError";
|
|
25987
|
-
this.code = code;
|
|
25988
|
-
this.data = { code, ...data };
|
|
25989
|
-
}
|
|
25990
|
-
};
|
|
25991
|
-
|
|
25992
26121
|
// src/utils/custom-fonts.ts
|
|
25993
26122
|
function familyKey(family) {
|
|
25994
26123
|
return family.trim().toLowerCase();
|
|
@@ -26394,6 +26523,16 @@ const Ea = `"use strict";
|
|
|
26394
26523
|
}
|
|
26395
26524
|
}
|
|
26396
26525
|
function renderSingleElementWithEffects(ctx, element, artboardX, artboardY) {
|
|
26526
|
+
renderWithLayerEffects(ctx, element, (layerCtx) => {
|
|
26527
|
+
renderSingleElementWithMasksAndDistress(
|
|
26528
|
+
layerCtx,
|
|
26529
|
+
element,
|
|
26530
|
+
artboardX,
|
|
26531
|
+
artboardY
|
|
26532
|
+
);
|
|
26533
|
+
});
|
|
26534
|
+
}
|
|
26535
|
+
function renderSingleElementWithMasksAndDistress(ctx, element, artboardX, artboardY) {
|
|
26397
26536
|
const hasDistress = element.distressEffect?.enabled && element.distressEffect.style === "custom" && element.distressEffect.textureUrl;
|
|
26398
26537
|
const hasMasks = element.masks && element.masks.length > 0;
|
|
26399
26538
|
if (!hasDistress && !hasMasks) {
|
|
@@ -26669,7 +26808,7 @@ const Ea = `"use strict";
|
|
|
26669
26808
|
};
|
|
26670
26809
|
})();
|
|
26671
26810
|
`;
|
|
26672
|
-
async function
|
|
26811
|
+
async function Oa(e, n, t = fetch) {
|
|
26673
26812
|
try {
|
|
26674
26813
|
const a = await t(n.fontFileUrl, { mode: "cors" });
|
|
26675
26814
|
if (!a.ok) return null;
|
|
@@ -26685,7 +26824,7 @@ function X(e) {
|
|
|
26685
26824
|
function Yn(e) {
|
|
26686
26825
|
return `${X(e.family)}|${e.weight ?? 400}|${e.style ?? "normal"}`;
|
|
26687
26826
|
}
|
|
26688
|
-
class
|
|
26827
|
+
class Ra {
|
|
26689
26828
|
constructor() {
|
|
26690
26829
|
this.fonts = /* @__PURE__ */ new Map(), this.listeners = /* @__PURE__ */ new Set(), this.snapshot = [], this.list = () => this.snapshot, this.subscribe = (n) => (this.listeners.add(n), () => {
|
|
26691
26830
|
this.listeners.delete(n);
|
|
@@ -26731,13 +26870,13 @@ class Pa {
|
|
|
26731
26870
|
for (const n of this.listeners) n();
|
|
26732
26871
|
}
|
|
26733
26872
|
}
|
|
26734
|
-
const Wn = new
|
|
26735
|
-
function
|
|
26873
|
+
const Wn = new Ra();
|
|
26874
|
+
function Ba(e) {
|
|
26736
26875
|
Wn.register(e);
|
|
26737
26876
|
}
|
|
26738
|
-
const
|
|
26739
|
-
async function
|
|
26740
|
-
const t = await
|
|
26877
|
+
const Ge = /* @__PURE__ */ new Set();
|
|
26878
|
+
async function La(e, n = {}) {
|
|
26879
|
+
const t = await Oa(
|
|
26741
26880
|
e.family,
|
|
26742
26881
|
{
|
|
26743
26882
|
fontFileUrl: e.url,
|
|
@@ -26749,7 +26888,7 @@ async function Fa(e, n = {}) {
|
|
|
26749
26888
|
n.fetchImpl ?? fetch
|
|
26750
26889
|
);
|
|
26751
26890
|
if (!t)
|
|
26752
|
-
throw new
|
|
26891
|
+
throw new Ce(
|
|
26753
26892
|
"E_FONT_LOAD_FAILED",
|
|
26754
26893
|
`Custom font "${e.family}" failed to load from ${e.url}. The URL must serve the font binary over a plain cross-origin GET (CORS). Verify the URL is reachable and sends Access-Control-Allow-Origin, then re-register the font. Custom fonts never fall back silently — the design would render with the wrong typeface.`,
|
|
26755
26894
|
{
|
|
@@ -26760,18 +26899,18 @@ async function Fa(e, n = {}) {
|
|
|
26760
26899
|
}
|
|
26761
26900
|
);
|
|
26762
26901
|
const a = n.fonts ?? (typeof document < "u" ? document.fonts : void 0);
|
|
26763
|
-
return a == null || a.add(t),
|
|
26902
|
+
return a == null || a.add(t), Ge.add(Yn(e)), t;
|
|
26764
26903
|
}
|
|
26765
|
-
async function
|
|
26766
|
-
|
|
26904
|
+
async function nr(e, n = {}) {
|
|
26905
|
+
Ba(e);
|
|
26767
26906
|
const { onLoadError: t, ...a } = n;
|
|
26768
26907
|
await Promise.all(
|
|
26769
26908
|
e.map(async (r) => {
|
|
26770
|
-
if (!
|
|
26909
|
+
if (!Ge.has(Yn(r)))
|
|
26771
26910
|
try {
|
|
26772
|
-
await
|
|
26911
|
+
await La(r, a);
|
|
26773
26912
|
} catch (o) {
|
|
26774
|
-
if (t && o instanceof
|
|
26913
|
+
if (t && o instanceof Ce) {
|
|
26775
26914
|
t(o, r);
|
|
26776
26915
|
return;
|
|
26777
26916
|
}
|
|
@@ -26780,7 +26919,7 @@ async function Xa(e, n = {}) {
|
|
|
26780
26919
|
})
|
|
26781
26920
|
);
|
|
26782
26921
|
}
|
|
26783
|
-
const
|
|
26922
|
+
const O = U("WorkerExport");
|
|
26784
26923
|
class pn {
|
|
26785
26924
|
constructor() {
|
|
26786
26925
|
this.worker = null, this.workerBlobUrl = null, this.pendingRequests = /* @__PURE__ */ new Map(), this.requestQueue = [], this.blobRequestQueue = [], this.isProcessingQueue = !1, this.isReady = !1, this.readyPromise = null, this.requestIdCounter = 0, this.workerCrashCount = 0, this.MAX_CRASHES_BEFORE_FALLBACK = 3, this.lastCrashTime = 0, this.CRASH_RESET_TIMEOUT = 6e4, this.progressListeners = /* @__PURE__ */ new Set(), this.idleTimeout = null, this.IDLE_TIMEOUT_MS = 3e4;
|
|
@@ -26808,7 +26947,7 @@ class pn {
|
|
|
26808
26947
|
try {
|
|
26809
26948
|
t(n);
|
|
26810
26949
|
} catch (a) {
|
|
26811
|
-
|
|
26950
|
+
O.error("Error in progress listener:", a);
|
|
26812
26951
|
}
|
|
26813
26952
|
}
|
|
26814
26953
|
/**
|
|
@@ -26855,7 +26994,7 @@ class pn {
|
|
|
26855
26994
|
* Call this when an element is removed or its image source changes.
|
|
26856
26995
|
*/
|
|
26857
26996
|
clearWorkerBitmap(n) {
|
|
26858
|
-
if (
|
|
26997
|
+
if (ze(n), this.worker && this.isReady) {
|
|
26859
26998
|
const t = {
|
|
26860
26999
|
type: "clear-bitmap",
|
|
26861
27000
|
elementId: n
|
|
@@ -26868,9 +27007,9 @@ class pn {
|
|
|
26868
27007
|
*/
|
|
26869
27008
|
static supportsWorkerExport() {
|
|
26870
27009
|
try {
|
|
26871
|
-
return typeof OffscreenCanvas > "u" ? (
|
|
27010
|
+
return typeof OffscreenCanvas > "u" ? (O.warn("OffscreenCanvas not supported"), !1) : typeof Worker > "u" ? (O.warn("Web Workers not supported"), !1) : new OffscreenCanvas(1, 1).getContext("2d") ? !0 : (O.warn("OffscreenCanvas 2D context not supported"), !1);
|
|
26872
27011
|
} catch (n) {
|
|
26873
|
-
return
|
|
27012
|
+
return O.warn("Feature detection failed:", n), !1;
|
|
26874
27013
|
}
|
|
26875
27014
|
}
|
|
26876
27015
|
/**
|
|
@@ -26885,28 +27024,28 @@ class pn {
|
|
|
26885
27024
|
try {
|
|
26886
27025
|
let a;
|
|
26887
27026
|
try {
|
|
26888
|
-
const s = new Blob([
|
|
27027
|
+
const s = new Blob([Ma], { type: "application/javascript" });
|
|
26889
27028
|
a = URL.createObjectURL(s), this.workerBlobUrl = a;
|
|
26890
27029
|
} catch (s) {
|
|
26891
|
-
|
|
27030
|
+
O.error("Failed to create worker blob:", s), t(new Error(`Worker creation failed: ${s instanceof Error ? s.message : String(s)}`));
|
|
26892
27031
|
return;
|
|
26893
27032
|
}
|
|
26894
27033
|
this.worker = new Worker(a, { type: "classic" }), this.worker.onmessage = (s) => {
|
|
26895
27034
|
this.handleWorkerMessage(s.data);
|
|
26896
27035
|
}, this.worker.onerror = (s) => {
|
|
26897
|
-
|
|
27036
|
+
O.error("Worker error:", s), this.handleWorkerError(s);
|
|
26898
27037
|
};
|
|
26899
27038
|
const r = setTimeout(() => {
|
|
26900
27039
|
t(new Error("Worker initialization timeout"));
|
|
26901
27040
|
}, 15e3), o = (s) => {
|
|
26902
|
-
s.data.type === "ready" && (clearTimeout(r), this.isReady = !0,
|
|
27041
|
+
s.data.type === "ready" && (clearTimeout(r), this.isReady = !0, Fa(
|
|
26903
27042
|
() => this.clearWorkerBitmapCache(),
|
|
26904
27043
|
(c) => this.clearWorkerBitmap(c)
|
|
26905
27044
|
), n());
|
|
26906
27045
|
};
|
|
26907
27046
|
this.worker.addEventListener("message", o, { once: !0 });
|
|
26908
27047
|
} catch (a) {
|
|
26909
|
-
|
|
27048
|
+
O.error("Failed to create worker:", a), t(a);
|
|
26910
27049
|
}
|
|
26911
27050
|
}), this.readyPromise;
|
|
26912
27051
|
}
|
|
@@ -26915,8 +27054,8 @@ class pn {
|
|
|
26915
27054
|
*/
|
|
26916
27055
|
async restartWorker() {
|
|
26917
27056
|
const n = Date.now();
|
|
26918
|
-
if (n - this.lastCrashTime > this.CRASH_RESET_TIMEOUT && (this.workerCrashCount = 0), this.workerCrashCount++, this.lastCrashTime = n,
|
|
26919
|
-
throw
|
|
27057
|
+
if (n - this.lastCrashTime > this.CRASH_RESET_TIMEOUT && (this.workerCrashCount = 0), this.workerCrashCount++, this.lastCrashTime = n, O.warn(`Worker crashed (${this.workerCrashCount}/${this.MAX_CRASHES_BEFORE_FALLBACK})`), this.workerCrashCount >= this.MAX_CRASHES_BEFORE_FALLBACK)
|
|
27058
|
+
throw O.error("Worker crashed too many times, giving up"), new Error("Worker has crashed too many times. Please refresh the page or use main thread export.");
|
|
26920
27059
|
this.worker && (this.worker.terminate(), this.worker = null, this.isReady = !1, this.readyPromise = null, this.workerBlobUrl && (URL.revokeObjectURL(this.workerBlobUrl), this.workerBlobUrl = null));
|
|
26921
27060
|
const t = Math.min(1e3 * Math.pow(2, this.workerCrashCount - 1), 5e3);
|
|
26922
27061
|
await new Promise((a) => setTimeout(a, t)), await this.initialize();
|
|
@@ -26976,7 +27115,7 @@ class pn {
|
|
|
26976
27115
|
const { artboard: t, elements: a, config: r } = n;
|
|
26977
27116
|
if ((!this.worker || !this.isReady) && await this.initialize(), !this.worker)
|
|
26978
27117
|
throw new Error("Worker is not initialized");
|
|
26979
|
-
const o = `export-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: c, newBitmaps: i } = await
|
|
27118
|
+
const o = `export-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: c, newBitmaps: i } = await $e(t, a);
|
|
26980
27119
|
i.length > 0 && this.registerBitmapsWithWorker(i);
|
|
26981
27120
|
const l = {
|
|
26982
27121
|
type: "export",
|
|
@@ -27037,7 +27176,7 @@ class pn {
|
|
|
27037
27176
|
const { artboard: t, elements: a, config: r } = n;
|
|
27038
27177
|
if ((!this.worker || !this.isReady) && await this.initialize(), !this.worker)
|
|
27039
27178
|
throw new Error("Worker is not initialized");
|
|
27040
|
-
const o = `export-blob-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: c, newBitmaps: i } = await
|
|
27179
|
+
const o = `export-blob-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: c, newBitmaps: i } = await $e(t, a);
|
|
27041
27180
|
i.length > 0 && this.registerBitmapsWithWorker(i);
|
|
27042
27181
|
const l = {
|
|
27043
27182
|
type: "export",
|
|
@@ -27051,15 +27190,15 @@ class pn {
|
|
|
27051
27190
|
format: r.format || "png",
|
|
27052
27191
|
quality: r.quality || 0.95,
|
|
27053
27192
|
returnFormat: "blob"
|
|
27054
|
-
}, d = new Promise((h,
|
|
27193
|
+
}, d = new Promise((h, g) => {
|
|
27055
27194
|
this.pendingRequests.set(o, {
|
|
27056
27195
|
requestId: o,
|
|
27057
27196
|
resolve: h,
|
|
27058
|
-
reject:
|
|
27197
|
+
reject: g,
|
|
27059
27198
|
startTime: s,
|
|
27060
27199
|
returnFormat: "blob"
|
|
27061
27200
|
}), setTimeout(() => {
|
|
27062
|
-
this.pendingRequests.has(o) && (this.pendingRequests.delete(o),
|
|
27201
|
+
this.pendingRequests.has(o) && (this.pendingRequests.delete(o), g(new Error("Export request timeout")));
|
|
27063
27202
|
}, 3e4);
|
|
27064
27203
|
});
|
|
27065
27204
|
this.worker.postMessage(l);
|
|
@@ -27097,7 +27236,7 @@ class pn {
|
|
|
27097
27236
|
case "ready":
|
|
27098
27237
|
break;
|
|
27099
27238
|
default:
|
|
27100
|
-
|
|
27239
|
+
O.warn("Unknown message type:", n);
|
|
27101
27240
|
}
|
|
27102
27241
|
}
|
|
27103
27242
|
/**
|
|
@@ -27105,14 +27244,14 @@ class pn {
|
|
|
27105
27244
|
*/
|
|
27106
27245
|
handleExportComplete(n) {
|
|
27107
27246
|
const t = this.pendingRequests.get(n.requestId);
|
|
27108
|
-
t && t.returnFormat === "dataUrl" ? (t.resolve(n), this.pendingRequests.delete(n.requestId)) : t ? (
|
|
27247
|
+
t && t.returnFormat === "dataUrl" ? (t.resolve(n), this.pendingRequests.delete(n.requestId)) : t ? (O.warn("Received dataUrl response for blob request:", n.requestId), t.reject(new Error("Received dataUrl response when expecting blob")), this.pendingRequests.delete(n.requestId)) : O.warn("Received response for unknown request:", n.requestId);
|
|
27109
27248
|
}
|
|
27110
27249
|
/**
|
|
27111
27250
|
* Handle successful blob export completion
|
|
27112
27251
|
*/
|
|
27113
27252
|
handleBlobExportComplete(n) {
|
|
27114
27253
|
const t = this.pendingRequests.get(n.requestId);
|
|
27115
|
-
t && t.returnFormat === "blob" ? (t.resolve(n), this.pendingRequests.delete(n.requestId)) : t ? (
|
|
27254
|
+
t && t.returnFormat === "blob" ? (t.resolve(n), this.pendingRequests.delete(n.requestId)) : t ? (O.warn("Received blob response for dataUrl request:", n.requestId), t.reject(new Error("Received blob response when expecting dataUrl")), this.pendingRequests.delete(n.requestId)) : O.warn("Received blob response for unknown request:", n.requestId);
|
|
27116
27255
|
}
|
|
27117
27256
|
/**
|
|
27118
27257
|
* Handle export error
|
|
@@ -27123,13 +27262,13 @@ class pn {
|
|
|
27123
27262
|
const a = new Error(n.error);
|
|
27124
27263
|
n.stack && (a.stack = n.stack), t.reject(a), this.pendingRequests.delete(n.requestId);
|
|
27125
27264
|
} else
|
|
27126
|
-
|
|
27265
|
+
O.warn("Received error for unknown request:", n.requestId);
|
|
27127
27266
|
}
|
|
27128
27267
|
/**
|
|
27129
27268
|
* Handle worker errors
|
|
27130
27269
|
*/
|
|
27131
27270
|
async handleWorkerError(n) {
|
|
27132
|
-
|
|
27271
|
+
O.error("Worker error:", n);
|
|
27133
27272
|
const t = Array.from(this.pendingRequests.values());
|
|
27134
27273
|
for (const [a, r] of this.pendingRequests.entries())
|
|
27135
27274
|
this.pendingRequests.delete(a);
|
|
@@ -27137,7 +27276,7 @@ class pn {
|
|
|
27137
27276
|
try {
|
|
27138
27277
|
await this.restartWorker();
|
|
27139
27278
|
} catch (a) {
|
|
27140
|
-
|
|
27279
|
+
O.error("Failed to restart worker:", a);
|
|
27141
27280
|
for (const r of t)
|
|
27142
27281
|
r.reject(new Error(`Worker crashed and could not be restarted: ${n.message}`));
|
|
27143
27282
|
for (; this.requestQueue.length > 0; )
|
|
@@ -27153,7 +27292,7 @@ class pn {
|
|
|
27153
27292
|
t.reject(new Error("Worker terminated")), this.pendingRequests.delete(n);
|
|
27154
27293
|
for (; this.requestQueue.length > 0; )
|
|
27155
27294
|
this.requestQueue.shift().reject(new Error("Worker terminated"));
|
|
27156
|
-
this.worker.terminate(), this.worker = null, this.isReady = !1, this.readyPromise = null, Nn(),
|
|
27295
|
+
this.worker.terminate(), this.worker = null, this.isReady = !1, this.readyPromise = null, Nn(), Da(), this.workerBlobUrl && (URL.revokeObjectURL(this.workerBlobUrl), this.workerBlobUrl = null);
|
|
27157
27296
|
}
|
|
27158
27297
|
}
|
|
27159
27298
|
/**
|
|
@@ -27169,10 +27308,10 @@ class pn {
|
|
|
27169
27308
|
}
|
|
27170
27309
|
}
|
|
27171
27310
|
let nn = null;
|
|
27172
|
-
function
|
|
27311
|
+
function er() {
|
|
27173
27312
|
return nn || (nn = new pn()), nn;
|
|
27174
27313
|
}
|
|
27175
|
-
function
|
|
27314
|
+
function tr() {
|
|
27176
27315
|
nn && (nn.terminate(), nn = null);
|
|
27177
27316
|
}
|
|
27178
27317
|
jn();
|
|
@@ -27190,7 +27329,7 @@ function zn(e, n) {
|
|
|
27190
27329
|
a != null && a.maskElement && zn(a.maskElement, n);
|
|
27191
27330
|
}
|
|
27192
27331
|
}
|
|
27193
|
-
async function
|
|
27332
|
+
async function xe(e) {
|
|
27194
27333
|
if (typeof document > "u" || !document.fonts) return;
|
|
27195
27334
|
const n = /* @__PURE__ */ new Set();
|
|
27196
27335
|
for (const a of e) zn(a, n);
|
|
@@ -27361,7 +27500,7 @@ const dn = class dn {
|
|
|
27361
27500
|
transparentBackground: i = !1,
|
|
27362
27501
|
backgroundColor: l = n.backgroundColor
|
|
27363
27502
|
} = r;
|
|
27364
|
-
await
|
|
27503
|
+
await xe(t);
|
|
27365
27504
|
const d = document.createElement("canvas"), u = n.width * c, p = n.height * c;
|
|
27366
27505
|
d.width = u, d.height = p;
|
|
27367
27506
|
const f = d.getContext("2d");
|
|
@@ -27369,24 +27508,24 @@ const dn = class dn {
|
|
|
27369
27508
|
if (f.save(), this.applyExportBackgroundClipPath(f, n), n.backgroundType === "texture" && n.backgroundTexture) {
|
|
27370
27509
|
const m = Z.getTexturePresetColor(n.backgroundTexture);
|
|
27371
27510
|
f.fillStyle = m, f.fillRect(0, 0, n.width, n.height);
|
|
27372
|
-
const
|
|
27373
|
-
|
|
27511
|
+
const b = Z.getTexture(n.backgroundTexture);
|
|
27512
|
+
b && b.complete && f.drawImage(b, 0, 0, n.width, n.height);
|
|
27374
27513
|
} else
|
|
27375
27514
|
f.fillStyle = l || n.backgroundColor, f.fillRect(0, 0, n.width, n.height);
|
|
27376
27515
|
f.restore();
|
|
27377
27516
|
}
|
|
27378
27517
|
f.save(), f.translate(-n.x, -n.y), this.applyExportClipPath(f, n);
|
|
27379
|
-
const $ = new Set(n.getElementIds()), h = t.filter((m) => $.has(m.id)),
|
|
27380
|
-
h.forEach((m) =>
|
|
27381
|
-
const v = (m,
|
|
27382
|
-
if (!
|
|
27383
|
-
const C =
|
|
27518
|
+
const $ = new Set(n.getElementIds()), h = t.filter((m) => $.has(m.id)), g = /* @__PURE__ */ new Map();
|
|
27519
|
+
h.forEach((m) => g.set(m.id, m));
|
|
27520
|
+
const v = (m, b) => {
|
|
27521
|
+
if (!b.id) return;
|
|
27522
|
+
const C = g.get(b.id);
|
|
27384
27523
|
C && C.render(m, !1);
|
|
27385
27524
|
}, y = h.map((m) => m.toJSON()), x = /* @__PURE__ */ new Set();
|
|
27386
|
-
return h.forEach((m,
|
|
27525
|
+
return h.forEach((m, b) => {
|
|
27387
27526
|
var C;
|
|
27388
27527
|
if (m.blendMode === "knockout" || m.blendMode === "clip") {
|
|
27389
|
-
const T = y[
|
|
27528
|
+
const T = y[b], k = m.blendMode === "knockout" ? "destination-out" : "destination-in", _ = ((C = T.knockoutParts) == null ? void 0 : C.scope) || "group", w = y.findIndex((A) => A.id === T.id);
|
|
27390
27529
|
if (w !== -1 && _ === "artboard")
|
|
27391
27530
|
for (let A = 0; A < w; A++) {
|
|
27392
27531
|
const E = y[A].id;
|
|
@@ -27402,12 +27541,14 @@ const dn = class dn {
|
|
|
27402
27541
|
k
|
|
27403
27542
|
), x.add(m.id);
|
|
27404
27543
|
}
|
|
27405
|
-
}), h.forEach((m) => {
|
|
27406
|
-
x.has(m.id) ||
|
|
27407
|
-
|
|
27544
|
+
}), h.forEach((m, b) => {
|
|
27545
|
+
x.has(m.id) || ce(f, y[b], (C) => {
|
|
27546
|
+
m.render(C, !1);
|
|
27547
|
+
});
|
|
27548
|
+
}), f.restore(), new Promise((m, b) => {
|
|
27408
27549
|
d.toBlob(
|
|
27409
27550
|
(C) => {
|
|
27410
|
-
C ? m(C) :
|
|
27551
|
+
C ? m(C) : b(new Error("Failed to create blob from canvas"));
|
|
27411
27552
|
},
|
|
27412
27553
|
o === "jpg" || o === "jpeg" ? "image/jpeg" : o === "webp" ? "image/webp" : "image/png",
|
|
27413
27554
|
s
|
|
@@ -27421,7 +27562,7 @@ const dn = class dn {
|
|
|
27421
27562
|
* worker), so font readiness matters here even when no fallback occurred.
|
|
27422
27563
|
*/
|
|
27423
27564
|
static async mainThreadExportToDataURL(n, t, a, r = {}) {
|
|
27424
|
-
var
|
|
27565
|
+
var b, C;
|
|
27425
27566
|
const {
|
|
27426
27567
|
format: o = "png",
|
|
27427
27568
|
quality: s = 0.95,
|
|
@@ -27429,7 +27570,7 @@ const dn = class dn {
|
|
|
27429
27570
|
transparentBackground: i = !1,
|
|
27430
27571
|
backgroundColor: l = n.backgroundColor
|
|
27431
27572
|
} = r;
|
|
27432
|
-
await
|
|
27573
|
+
await xe(t);
|
|
27433
27574
|
const d = document.createElement("canvas"), u = n.width * c, p = n.height * c;
|
|
27434
27575
|
d.width = u, d.height = p;
|
|
27435
27576
|
const f = d.getContext("2d");
|
|
@@ -27444,11 +27585,11 @@ const dn = class dn {
|
|
|
27444
27585
|
f.restore();
|
|
27445
27586
|
}
|
|
27446
27587
|
f.save(), f.translate(-n.x, -n.y), this.applyExportClipPath(f, n);
|
|
27447
|
-
const $ = new Set(n.getElementIds()), h = t.filter((T) => $.has(T.id)),
|
|
27448
|
-
h.forEach((T) =>
|
|
27588
|
+
const $ = new Set(n.getElementIds()), h = t.filter((T) => $.has(T.id)), g = /* @__PURE__ */ new Map();
|
|
27589
|
+
h.forEach((T) => g.set(T.id, T));
|
|
27449
27590
|
const v = (T, k) => {
|
|
27450
27591
|
if (!k.id) return;
|
|
27451
|
-
const _ =
|
|
27592
|
+
const _ = g.get(k.id);
|
|
27452
27593
|
_ ? _.render(T, !1) : W.warn("Element not found in map:", k.id);
|
|
27453
27594
|
}, y = h.map((T) => T.toJSON()), x = /* @__PURE__ */ new Set();
|
|
27454
27595
|
h.forEach((T, k) => {
|
|
@@ -27476,25 +27617,27 @@ const dn = class dn {
|
|
|
27476
27617
|
const w = y[k], A = ((_ = w == null ? void 0 : w.distressEffect) == null ? void 0 : _.enabled) && w.distressEffect.style === "custom" && w.distressEffect.textureUrl, E = (w == null ? void 0 : w.masks) && w.masks.length > 0, S = (P) => {
|
|
27477
27618
|
T.render(P, !1);
|
|
27478
27619
|
};
|
|
27479
|
-
|
|
27480
|
-
|
|
27620
|
+
ce(f, w, (P) => {
|
|
27621
|
+
if (E && A)
|
|
27622
|
+
oe(P, w, (I) => {
|
|
27623
|
+
const F = T.getVisualBoundingBox();
|
|
27624
|
+
he(I, w.distressEffect, F, S);
|
|
27625
|
+
});
|
|
27626
|
+
else if (E)
|
|
27627
|
+
oe(P, w, S);
|
|
27628
|
+
else if (A) {
|
|
27481
27629
|
const I = T.getVisualBoundingBox();
|
|
27482
|
-
|
|
27483
|
-
}
|
|
27484
|
-
|
|
27485
|
-
|
|
27486
|
-
else if (A) {
|
|
27487
|
-
const P = T.getVisualBoundingBox();
|
|
27488
|
-
pe(f, w.distressEffect, P, S);
|
|
27489
|
-
} else
|
|
27490
|
-
T.render(f, !1);
|
|
27630
|
+
he(P, w.distressEffect, I, S);
|
|
27631
|
+
} else
|
|
27632
|
+
T.render(P, !1);
|
|
27633
|
+
});
|
|
27491
27634
|
}
|
|
27492
|
-
}), (
|
|
27635
|
+
}), (b = n.distressTexture) != null && b.enabled && Ta(f, n.distressTexture, {
|
|
27493
27636
|
x: n.x,
|
|
27494
27637
|
y: n.y,
|
|
27495
27638
|
width: n.width,
|
|
27496
27639
|
height: n.height
|
|
27497
|
-
}), (C = n.imageMask) != null && C.enabled &&
|
|
27640
|
+
}), (C = n.imageMask) != null && C.enabled && pa(f, n.imageMask, {
|
|
27498
27641
|
x: n.x,
|
|
27499
27642
|
y: n.y,
|
|
27500
27643
|
width: n.width,
|
|
@@ -27606,7 +27749,7 @@ const dn = class dn {
|
|
|
27606
27749
|
try {
|
|
27607
27750
|
const l = performance.now(), d = await this.getWorkerManager();
|
|
27608
27751
|
if (d) {
|
|
27609
|
-
const u = new Set(n.getElementIds()), p = t.filter((
|
|
27752
|
+
const u = new Set(n.getElementIds()), p = t.filter((g) => u.has(g.id)), f = await d.exportArtboardToDataURL(n, p, {
|
|
27610
27753
|
scale: r.scale || 1,
|
|
27611
27754
|
format: (r.format === "jpg" ? "jpeg" : r.format) || "png",
|
|
27612
27755
|
quality: r.quality || 0.95
|
|
@@ -27652,7 +27795,7 @@ const dn = class dn {
|
|
|
27652
27795
|
const x = performance.now() - y;
|
|
27653
27796
|
i.push(x), c || (l += x), await new Promise((m) => setTimeout(m, Math.max(0, s - x)));
|
|
27654
27797
|
}
|
|
27655
|
-
const u = i.length, p = i.reduce((y, x) => y + x, 0) / u, f = Math.min(...i), $ = Math.max(...i), h = u / o * 1e3,
|
|
27798
|
+
const u = i.length, p = i.reduce((y, x) => y + x, 0) / u, f = Math.min(...i), $ = Math.max(...i), h = u / o * 1e3, g = l / o * 100, v = g > 20 ? `Main thread blocked ${g.toFixed(1)}% of the time - STRONGLY recommend worker export` : g > 10 ? `Main thread blocked ${g.toFixed(1)}% of the time - consider worker export` : `Main thread blocked ${g.toFixed(1)}% of the time - performance is acceptable`;
|
|
27656
27799
|
return {
|
|
27657
27800
|
totalExports: u,
|
|
27658
27801
|
duration: o,
|
|
@@ -27735,62 +27878,63 @@ const dn = class dn {
|
|
|
27735
27878
|
};
|
|
27736
27879
|
dn.CURRENT_VERSION = "2.0.0", dn.workerManager = null, dn.workerInitPromise = null;
|
|
27737
27880
|
let vn = dn;
|
|
27738
|
-
const
|
|
27881
|
+
const ar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
27739
27882
|
__proto__: null,
|
|
27740
27883
|
ExportManager: vn,
|
|
27741
27884
|
default: vn
|
|
27742
27885
|
}, Symbol.toStringTag, { value: "Module" }));
|
|
27743
27886
|
export {
|
|
27744
|
-
|
|
27745
|
-
|
|
27746
|
-
|
|
27747
|
-
|
|
27887
|
+
Ct as A,
|
|
27888
|
+
_e as B,
|
|
27889
|
+
Xa as C,
|
|
27890
|
+
We as D,
|
|
27748
27891
|
vn as E,
|
|
27749
27892
|
oe as F,
|
|
27750
|
-
|
|
27751
|
-
|
|
27752
|
-
|
|
27753
|
-
|
|
27893
|
+
tr as G,
|
|
27894
|
+
ze as H,
|
|
27895
|
+
ge as I,
|
|
27896
|
+
kt as J,
|
|
27754
27897
|
yn as K,
|
|
27755
|
-
|
|
27756
|
-
|
|
27757
|
-
|
|
27898
|
+
Ca as L,
|
|
27899
|
+
va as M,
|
|
27900
|
+
Ja as N,
|
|
27758
27901
|
Dn as O,
|
|
27759
|
-
|
|
27760
|
-
|
|
27761
|
-
|
|
27902
|
+
ce as P,
|
|
27903
|
+
Ta as Q,
|
|
27904
|
+
pa as R,
|
|
27762
27905
|
jn as S,
|
|
27763
27906
|
Z as T,
|
|
27764
|
-
|
|
27765
|
-
|
|
27907
|
+
he as U,
|
|
27908
|
+
sa as V,
|
|
27766
27909
|
pn as W,
|
|
27767
|
-
|
|
27768
|
-
|
|
27769
|
-
|
|
27770
|
-
|
|
27910
|
+
ra as X,
|
|
27911
|
+
ht as Y,
|
|
27912
|
+
ar as Z,
|
|
27913
|
+
xt as a,
|
|
27914
|
+
Va as b,
|
|
27771
27915
|
Wn as c,
|
|
27772
|
-
|
|
27773
|
-
|
|
27916
|
+
Te as d,
|
|
27917
|
+
nr as e,
|
|
27774
27918
|
B as f,
|
|
27775
|
-
|
|
27776
|
-
|
|
27777
|
-
|
|
27919
|
+
Ua as g,
|
|
27920
|
+
Za as h,
|
|
27921
|
+
Ka as i,
|
|
27778
27922
|
Nn as j,
|
|
27779
|
-
|
|
27780
|
-
|
|
27781
|
-
|
|
27782
|
-
|
|
27783
|
-
|
|
27923
|
+
za as k,
|
|
27924
|
+
La as l,
|
|
27925
|
+
mt as m,
|
|
27926
|
+
Ga as n,
|
|
27927
|
+
Wa as o,
|
|
27784
27928
|
fn as p,
|
|
27785
|
-
|
|
27786
|
-
|
|
27787
|
-
|
|
27929
|
+
er as q,
|
|
27930
|
+
Ba as r,
|
|
27931
|
+
Ya as s,
|
|
27788
27932
|
ee as t,
|
|
27789
|
-
|
|
27933
|
+
Qa as u,
|
|
27790
27934
|
In as v,
|
|
27791
|
-
|
|
27792
|
-
|
|
27793
|
-
|
|
27794
|
-
|
|
27935
|
+
ja as w,
|
|
27936
|
+
Ha as x,
|
|
27937
|
+
St as y,
|
|
27938
|
+
qa as z
|
|
27795
27939
|
};
|
|
27796
|
-
//# sourceMappingURL=ExportManager-
|
|
27940
|
+
//# sourceMappingURL=ExportManager-Ci81K6xA.js.map
|