@snowcone-app/canvas 0.1.9 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{CanvasStateV1-D5GzvmnY.cjs → CanvasStateV1-C4hC1MCe.cjs} +5 -5
- package/dist/{CanvasStateV1-D5GzvmnY.cjs.map → CanvasStateV1-C4hC1MCe.cjs.map} +1 -1
- package/dist/{CanvasStateV1-ejb4d_LM.js → CanvasStateV1-CJU_xYW5.js} +3 -3
- package/dist/{CanvasStateV1-ejb4d_LM.js.map → CanvasStateV1-CJU_xYW5.js.map} +1 -1
- package/dist/{HybridHistoryManager-BV6XV0nD.js → HybridHistoryManager-jBBnVim8.js} +54 -54
- package/dist/{HybridHistoryManager-BV6XV0nD.js.map → HybridHistoryManager-jBBnVim8.js.map} +1 -1
- package/dist/{ElementFactory-uJTXU-nP.js → ImportManager-Oqu2yB54.js} +916 -697
- package/dist/ImportManager-Oqu2yB54.js.map +1 -0
- package/dist/{ElementFactory-B7UOaJSD.cjs → ImportManager-W1eWhfyM.cjs} +5 -5
- package/dist/ImportManager-W1eWhfyM.cjs.map +1 -0
- package/dist/ThemeContext-BMNQKl1c.cjs +2 -0
- package/dist/{ThemeContext-4mJ_y0Me.cjs.map → ThemeContext-BMNQKl1c.cjs.map} +1 -1
- package/dist/ThemeContext-wj-wSO7J.js +1158 -0
- package/dist/{ThemeContext-H0Z-MqqR.js.map → ThemeContext-wj-wSO7J.js.map} +1 -1
- package/dist/advanced.js +5 -32
- package/dist/advanced.js.map +1 -1
- package/dist/advanced.mjs +593 -15081
- package/dist/advanced.mjs.map +1 -1
- package/dist/components/embed/KitLayout.d.ts +22 -0
- package/dist/components/embed/UndoRedoControls.d.ts +3 -0
- package/dist/compose-Dqh2f8tS.js +22222 -0
- package/dist/compose-Dqh2f8tS.js.map +1 -0
- package/dist/compose-HDJp4Z_d.cjs +60 -0
- package/dist/compose-HDJp4Z_d.cjs.map +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +589 -508
- package/dist/index.mjs.map +1 -1
- package/dist/internals.js +1 -1
- package/dist/internals.js.map +1 -1
- package/dist/internals.mjs +101 -102
- package/dist/internals.mjs.map +1 -1
- package/dist/style.css.d.ts +4 -0
- package/dist/testing.js +1 -1
- package/dist/testing.mjs +11 -11
- package/package.json +9 -5
- package/dist/ElementFactory-B7UOaJSD.cjs.map +0 -1
- package/dist/ElementFactory-uJTXU-nP.js.map +0 -1
- package/dist/ImportManager-BYwuK6n4.cjs +0 -2
- package/dist/ImportManager-BYwuK6n4.cjs.map +0 -1
- package/dist/ImportManager-CxiaRg1N.js +0 -222
- package/dist/ImportManager-CxiaRg1N.js.map +0 -1
- package/dist/ThemeContext-4mJ_y0Me.cjs +0 -2
- package/dist/ThemeContext-H0Z-MqqR.js +0 -1077
- package/dist/components/stories/utils/MockEditorProvider.d.ts +0 -32
- package/dist/components/stories/utils/QACanvasCard.d.ts +0 -41
- package/dist/components/stories/utils/VisualQACard.d.ts +0 -24
- package/dist/components/stories/utils/element-factories.d.ts +0 -188
- package/dist/components/stories/utils/spec-to-elements.d.ts +0 -74
- package/dist/components/stories/utils/themeDecorator.d.ts +0 -45
- package/dist/components/stories/utils/unified-test-cases.d.ts +0 -27
- package/dist/compose-Bo108juW.cjs +0 -33
- package/dist/compose-Bo108juW.cjs.map +0 -1
- package/dist/compose-DQ1FZS3O.js +0 -7690
- package/dist/compose-DQ1FZS3O.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { K as en, aq as bt, ar as mt, ax as ke, $ as yt, Z as xt, O as Te, Y as $t, N as pn, aL as vt, aM as _e, c as mn, aN as wt, aO as St, G as Ke, I as Un, P as Je, S as Ze, T as Ct, aH as kt, aG as Tt, ab as _t, aP as ee, aQ as Et, aR as At, aS as Pt, aT as It, aU as Qe, aI as nt, H as Xn, aJ as et, aV as oe, aW as Dt, am as Rt, aX as Ft, aY as Ee, aZ as Mt, a_ as Ot, a$ as Bt, aE as Lt, b0 as Nt, b1 as Ut, b2 as nn, ah as zt, al as Wt, ae as Ht, ac as Gt, aj as Vt, af as jt, a0 as Xt, A as Ae } from "./HybridHistoryManager-jBBnVim8.js";
|
|
2
2
|
const sn = {
|
|
3
3
|
// Canvas-specific
|
|
4
4
|
canvas: {
|
|
@@ -16,30 +16,30 @@ const sn = {
|
|
|
16
16
|
spacingLabelFontSize: 11,
|
|
17
17
|
spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
|
18
18
|
}
|
|
19
|
-
},
|
|
20
|
-
function
|
|
21
|
-
return
|
|
19
|
+
}, qt = 2, Bn = 6, Yt = 16, Kt = 5, Jt = 5, tt = 0.5;
|
|
20
|
+
function Pe(i) {
|
|
21
|
+
return qt / i;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
24
|
-
return
|
|
23
|
+
function er(i) {
|
|
24
|
+
return Bn / i;
|
|
25
25
|
}
|
|
26
|
-
function
|
|
27
|
-
return
|
|
26
|
+
function Zt(i) {
|
|
27
|
+
return Yt / i;
|
|
28
28
|
}
|
|
29
|
-
function
|
|
30
|
-
return [
|
|
29
|
+
function tr(i) {
|
|
30
|
+
return [Kt / i, Jt / i];
|
|
31
31
|
}
|
|
32
|
-
function
|
|
32
|
+
function Qt(i, n, e, t) {
|
|
33
33
|
i.save();
|
|
34
|
-
const a =
|
|
34
|
+
const a = tt / t;
|
|
35
35
|
i.translate(n, e), i.scale(a, a), i.strokeStyle = "#000", i.lineWidth = 1.5, i.lineCap = "round", i.lineJoin = "round", i.translate(-12, -12), i.beginPath(), i.moveTo(21, 12), i.arc(12, 12, 9, 0, -Math.PI / 2, !0), i.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), i.stroke(), i.beginPath(), i.moveTo(3, 3), i.lineTo(3, 8), i.lineTo(8, 8), i.stroke(), i.beginPath(), i.moveTo(3, 12), i.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), i.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), i.stroke(), i.beginPath(), i.moveTo(16, 16), i.lineTo(21, 16), i.lineTo(21, 21), i.stroke(), i.restore();
|
|
36
36
|
}
|
|
37
|
-
function
|
|
38
|
-
const s =
|
|
39
|
-
i.save(), i.fillStyle = "#fff", i.strokeStyle = a, i.lineWidth = r ?
|
|
37
|
+
function ar(i, n, e, t = 1, a = "#3b82f6", r = !1) {
|
|
38
|
+
const s = Zt(t);
|
|
39
|
+
i.save(), i.fillStyle = "#fff", i.strokeStyle = a, i.lineWidth = r ? Pe(t) * 1.25 : Pe(t), i.beginPath(), i.arc(n, e, s, 0, Math.PI * 2), i.fill(), i.stroke(), Qt(i, n, e, t), i.restore();
|
|
40
40
|
}
|
|
41
|
-
const
|
|
42
|
-
class
|
|
41
|
+
const Ie = Bn * 2;
|
|
42
|
+
class rr {
|
|
43
43
|
constructor() {
|
|
44
44
|
this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
|
|
45
45
|
}
|
|
@@ -56,8 +56,8 @@ class Qa {
|
|
|
56
56
|
y: a.y - o,
|
|
57
57
|
width: a.width + o * 2,
|
|
58
58
|
height: a.height + o * 2
|
|
59
|
-
}, c =
|
|
60
|
-
this.resizeHandles = c.filter((f) => !(!s.includes(f.anchor) || d && f.anchor.includes("middle"))), this.rotationHandle =
|
|
59
|
+
}, c = bt(l, n.rotation, r), d = Math.abs(n.rotation % 360) > 0.1;
|
|
60
|
+
this.resizeHandles = c.filter((f) => !(!s.includes(f.anchor) || d && f.anchor.includes("middle"))), this.rotationHandle = mt(
|
|
61
61
|
l,
|
|
62
62
|
n.rotation,
|
|
63
63
|
r,
|
|
@@ -86,10 +86,10 @@ class Qa {
|
|
|
86
86
|
if (e.anchor.includes("middle")) {
|
|
87
87
|
const c = e.anchor === "middle-top" || e.anchor === "middle-bottom";
|
|
88
88
|
n.translate(s, o), n.rotate(-this.elementRotation * Math.PI / 180), c && n.rotate(Math.PI / 2), n.translate(-s, -o);
|
|
89
|
-
const d =
|
|
89
|
+
const d = Ie * 0.6, f = Ie * 1.4, h = d / 2, u = s - d / 2, g = o - f / 2;
|
|
90
90
|
n.fillStyle = "#fff", n.strokeStyle = en(n.canvas), n.lineWidth = t || a ? 2.5 : 2, n.beginPath(), n.roundRect(u, g, d, f, h), n.fill(), n.stroke();
|
|
91
91
|
} else
|
|
92
|
-
n.fillStyle = "#fff", n.strokeStyle = en(n.canvas), n.lineWidth = t || a ? 2.5 : 2, n.beginPath(), n.arc(s, o,
|
|
92
|
+
n.fillStyle = "#fff", n.strokeStyle = en(n.canvas), n.lineWidth = t || a ? 2.5 : 2, n.beginPath(), n.arc(s, o, Bn, 0, Math.PI * 2), n.fill(), n.stroke();
|
|
93
93
|
n.restore();
|
|
94
94
|
}
|
|
95
95
|
/**
|
|
@@ -98,9 +98,9 @@ class Qa {
|
|
|
98
98
|
*/
|
|
99
99
|
renderRotationHandle(n, e, t = !1, a = 1) {
|
|
100
100
|
n.save();
|
|
101
|
-
const r = e.x * a, s = e.y * a, o =
|
|
101
|
+
const r = e.x * a, s = e.y * a, o = Bn * 2.67;
|
|
102
102
|
n.fillStyle = "#fff", n.strokeStyle = en(n.canvas), n.lineWidth = t ? 2.5 : 2, n.beginPath(), n.arc(r, s, o, 0, Math.PI * 2), n.fill(), n.stroke();
|
|
103
|
-
const l =
|
|
103
|
+
const l = tt;
|
|
104
104
|
n.translate(r, s), n.scale(l, l), n.strokeStyle = "#000", n.lineWidth = 1.5, n.lineCap = "round", n.lineJoin = "round", n.translate(-12, -12), n.beginPath(), n.moveTo(21, 12), n.arc(12, 12, 9, 0, -Math.PI / 2, !0), n.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), n.stroke(), n.beginPath(), n.moveTo(3, 3), n.lineTo(3, 8), n.lineTo(8, 8), n.stroke(), n.beginPath(), n.moveTo(3, 12), n.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), n.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), n.stroke(), n.beginPath(), n.moveTo(16, 16), n.lineTo(21, 16), n.lineTo(21, 21), n.stroke(), n.restore();
|
|
105
105
|
}
|
|
106
106
|
/**
|
|
@@ -116,9 +116,9 @@ class Qa {
|
|
|
116
116
|
* @param zoom - Current zoom level (radius scales inversely with zoom)
|
|
117
117
|
*/
|
|
118
118
|
hitTestResize(n, e, t = 1) {
|
|
119
|
-
const a =
|
|
119
|
+
const a = xt / t;
|
|
120
120
|
for (const r of this.resizeHandles)
|
|
121
|
-
if (
|
|
121
|
+
if (ke(n, e, r.x, r.y, a))
|
|
122
122
|
return r;
|
|
123
123
|
return null;
|
|
124
124
|
}
|
|
@@ -128,8 +128,8 @@ class Qa {
|
|
|
128
128
|
*/
|
|
129
129
|
hitTestRotation(n, e, t = 1) {
|
|
130
130
|
if (!this.rotationHandle) return !1;
|
|
131
|
-
const a = (
|
|
132
|
-
return
|
|
131
|
+
const a = (Bn * 2.67 + 2) / t;
|
|
132
|
+
return ke(n, e, this.rotationHandle.x, this.rotationHandle.y, a);
|
|
133
133
|
}
|
|
134
134
|
/**
|
|
135
135
|
* Get rotation handle position (for React-based rendering)
|
|
@@ -144,7 +144,7 @@ class Qa {
|
|
|
144
144
|
*/
|
|
145
145
|
getCursor(n, e) {
|
|
146
146
|
const t = n.anchor.includes("middle") ? "edge" : "corner";
|
|
147
|
-
return
|
|
147
|
+
return yt(
|
|
148
148
|
n.x,
|
|
149
149
|
n.y,
|
|
150
150
|
this.rotationAnchor.x,
|
|
@@ -155,7 +155,7 @@ class Qa {
|
|
|
155
155
|
);
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
|
-
class
|
|
158
|
+
class na {
|
|
159
159
|
/**
|
|
160
160
|
* Calculate new dimensions and position for a resize operation
|
|
161
161
|
*/
|
|
@@ -167,56 +167,56 @@ class Yt {
|
|
|
167
167
|
startData: r,
|
|
168
168
|
snapSystem: s
|
|
169
169
|
}) {
|
|
170
|
-
var I, A,
|
|
171
|
-
const l = new
|
|
170
|
+
var I, A, R, z, O;
|
|
171
|
+
const l = new Te(n).worldDeltaToLocal(t, a), c = l.dx, d = l.dy, f = r.visualWidth ?? r.width ?? 0, h = r.visualHeight ?? r.height ?? 0, u = r.width ?? 0, g = r.height ?? 0;
|
|
172
172
|
let m = f, p = h;
|
|
173
173
|
e.anchor.includes("right") ? m = f + c : e.anchor.includes("left") && (m = f - c), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? p = h + d : e.anchor.includes("top") && (p = h - d));
|
|
174
174
|
let y, b;
|
|
175
175
|
if (e.anchor === "middle-left" || e.anchor === "middle-right") {
|
|
176
|
-
const
|
|
177
|
-
y = u +
|
|
176
|
+
const P = m - f;
|
|
177
|
+
y = u + P, b = g;
|
|
178
178
|
} else if (e.anchor === "middle-top" || e.anchor === "middle-bottom") {
|
|
179
|
-
const
|
|
180
|
-
y = u, b = g +
|
|
179
|
+
const P = p - h;
|
|
180
|
+
y = u, b = g + P;
|
|
181
181
|
} else {
|
|
182
|
-
const
|
|
183
|
-
y = u *
|
|
182
|
+
const P = m / f, W = p / h;
|
|
183
|
+
y = u * P, b = g * W;
|
|
184
184
|
}
|
|
185
185
|
const $ = m, x = p;
|
|
186
186
|
let w = !1;
|
|
187
187
|
if (s && n.transformType === "image") {
|
|
188
|
-
const
|
|
189
|
-
if (
|
|
190
|
-
const q = (I = s.activeSnaps) == null ? void 0 : I.x,
|
|
191
|
-
if (!!q || !!
|
|
192
|
-
const
|
|
193
|
-
(
|
|
188
|
+
const P = e.anchor ?? "", W = P === "top-left" || P === "top-right" || P === "bottom-left" || P === "bottom-right", X = P.startsWith("crop-");
|
|
189
|
+
if (W && !X) {
|
|
190
|
+
const q = (I = s.activeSnaps) == null ? void 0 : I.x, Q = (A = s.activeSnaps) == null ? void 0 : A.y;
|
|
191
|
+
if (!!q || !!Q) {
|
|
192
|
+
const D = [q, Q].find(
|
|
193
|
+
(F) => typeof F == "object" && F !== null && "frozenWidth" in F
|
|
194
194
|
);
|
|
195
|
-
if (
|
|
196
|
-
const
|
|
197
|
-
let
|
|
198
|
-
|
|
199
|
-
const
|
|
200
|
-
m = f *
|
|
195
|
+
if (D) {
|
|
196
|
+
const F = n, B = r.transformData, M = D.frozenWidth ?? ((R = F.transformData) == null ? void 0 : R.width) ?? u, U = F.imageAspectRatio || (B != null && B.width && (B != null && B.height) ? B.width / B.height : null);
|
|
197
|
+
let V = D.frozenHeight;
|
|
198
|
+
V == null && (U && U !== 0 ? V = M / U : (z = F.transformData) != null && z.height ? V = F.transformData.height : V = g);
|
|
199
|
+
const dn = u !== 0 ? M / u : 1, $n = g !== 0 ? V / g : 1;
|
|
200
|
+
m = f * dn, p = h * $n, y = M, b = V, w = !0;
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
y = Math.max(50, y), b = Math.max(40, b);
|
|
206
206
|
const v = n.clone(), S = v.resize(e.anchor, y, b, r);
|
|
207
|
-
if (!e.anchor.includes("middle") && ((
|
|
208
|
-
const
|
|
207
|
+
if (!e.anchor.includes("middle") && ((O = v.stroke) != null && O.enabled) && r.strokeWidth !== void 0 && r.strokeWidth > 0) {
|
|
208
|
+
const P = r.width ?? 1, W = r.height ?? 1, X = Math.sqrt(y / P * (b / W)), q = Math.max(1, Math.round(r.strokeWidth * X * 10) / 10);
|
|
209
209
|
v.stroke = { ...v.stroke, width: q };
|
|
210
210
|
}
|
|
211
|
-
const k = w || S === !1, _ = e.anchor.includes("top") || e.anchor.includes("bottom"), C = "isCropping" in v && v.isCropping,
|
|
212
|
-
if (_ && !C && !
|
|
213
|
-
const
|
|
211
|
+
const k = w || S === !1, _ = e.anchor.includes("top") || e.anchor.includes("bottom"), C = "isCropping" in v && v.isCropping, E = "isGroup" in v && v.isGroup;
|
|
212
|
+
if (_ && !C && !E) {
|
|
213
|
+
const P = n.getRotationAnchor(), W = this._calculateFixedCornerOffset({
|
|
214
214
|
element: n,
|
|
215
215
|
updatedElement: v,
|
|
216
216
|
handle: e,
|
|
217
|
-
rotationAnchor:
|
|
217
|
+
rotationAnchor: P
|
|
218
218
|
});
|
|
219
|
-
v.x +=
|
|
219
|
+
v.x += W.x, v.y += W.y;
|
|
220
220
|
}
|
|
221
221
|
return {
|
|
222
222
|
element: v,
|
|
@@ -236,10 +236,10 @@ class Yt {
|
|
|
236
236
|
handle: t,
|
|
237
237
|
rotationAnchor: a
|
|
238
238
|
}) {
|
|
239
|
-
const r = new
|
|
239
|
+
const r = new Te(n), { cos: s, sin: o } = r.getRenderingCosSin(), l = n.getVisualBoundingBox(), c = e.getVisualBoundingBox(), d = a, f = e.getRotationAnchor(), h = this._getFixedLocalCoords(t.anchor, l.width, l.height), u = h.x, g = h.y, m = l.x - d.x, p = l.y - d.y, y = m + u, b = p + g, $ = y * s - b * o, x = y * o + b * s, w = d.x + $, v = d.y + x, S = this._getFixedLocalCoords(t.anchor, c.width, c.height), T = S.x, k = S.y, _ = c.x - f.x, C = c.y - f.y, E = _ + T, I = C + k, A = E * s - I * o, R = E * o + I * s, z = f.x + A, O = f.y + R;
|
|
240
240
|
return {
|
|
241
|
-
x: w -
|
|
242
|
-
y: v -
|
|
241
|
+
x: w - z,
|
|
242
|
+
y: v - O
|
|
243
243
|
};
|
|
244
244
|
}
|
|
245
245
|
/**
|
|
@@ -277,7 +277,7 @@ class Yt {
|
|
|
277
277
|
return a;
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
|
-
class
|
|
280
|
+
class ea {
|
|
281
281
|
constructor() {
|
|
282
282
|
this.hooks = {
|
|
283
283
|
beforeResize: [],
|
|
@@ -332,7 +332,7 @@ class Kt {
|
|
|
332
332
|
*/
|
|
333
333
|
executeResize(n) {
|
|
334
334
|
const e = this.runHooks("beforeResize", n);
|
|
335
|
-
let t =
|
|
335
|
+
let t = na.calculateResize({
|
|
336
336
|
...e,
|
|
337
337
|
snapSystem: n.snapSystem
|
|
338
338
|
});
|
|
@@ -347,8 +347,8 @@ class Kt {
|
|
|
347
347
|
return this.runHooks("afterPositionUpdate", t).position;
|
|
348
348
|
}
|
|
349
349
|
}
|
|
350
|
-
const
|
|
351
|
-
class
|
|
350
|
+
const sr = new ea();
|
|
351
|
+
class ir {
|
|
352
352
|
constructor(n = null) {
|
|
353
353
|
this.state = "IDLE", this.context = {
|
|
354
354
|
mode: null,
|
|
@@ -546,7 +546,7 @@ class er {
|
|
|
546
546
|
updateRotate(n, e, t, a) {
|
|
547
547
|
if (this.state !== "ROTATING")
|
|
548
548
|
throw new Error("Cannot update rotate: not in ROTATING state");
|
|
549
|
-
const r = this.context.startData, o = (
|
|
549
|
+
const r = this.context.startData, o = ($t(t, a, n, e) - r.startAngle) * 180 / Math.PI;
|
|
550
550
|
let l = r.currentRotation - o;
|
|
551
551
|
return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(l, this.context.element) : l;
|
|
552
552
|
}
|
|
@@ -662,7 +662,7 @@ class er {
|
|
|
662
662
|
return this.context.mode;
|
|
663
663
|
}
|
|
664
664
|
}
|
|
665
|
-
class
|
|
665
|
+
class Cn {
|
|
666
666
|
/**
|
|
667
667
|
* Resolve rotation anchor with clear precedence:
|
|
668
668
|
* 1. Transform's getRotationAnchor() if overridden
|
|
@@ -770,7 +770,7 @@ class Sn {
|
|
|
770
770
|
return Math.abs(a.x - t.x) > r || Math.abs(a.y - t.y) > r;
|
|
771
771
|
}
|
|
772
772
|
}
|
|
773
|
-
class
|
|
773
|
+
class De {
|
|
774
774
|
constructor(n) {
|
|
775
775
|
this.cellSize = n, this.cells = /* @__PURE__ */ new Map(), this.idIndex = /* @__PURE__ */ new Map();
|
|
776
776
|
}
|
|
@@ -871,27 +871,27 @@ function un(i) {
|
|
|
871
871
|
if (n && "width" in n && typeof n.width == "number")
|
|
872
872
|
return n.width;
|
|
873
873
|
}
|
|
874
|
-
function
|
|
874
|
+
function kn(i) {
|
|
875
875
|
const n = i.transformData;
|
|
876
876
|
if (n && "height" in n && typeof n.height == "number")
|
|
877
877
|
return n.height;
|
|
878
878
|
}
|
|
879
|
-
function
|
|
879
|
+
function Rn(i, n) {
|
|
880
880
|
const e = i.transformData;
|
|
881
881
|
return e && "width" in e ? (e.width = n, !0) : !1;
|
|
882
882
|
}
|
|
883
|
-
function
|
|
883
|
+
function Vn(i, n) {
|
|
884
884
|
const e = i.transformData;
|
|
885
885
|
return e && "height" in e ? (e.height = n, !0) : !1;
|
|
886
886
|
}
|
|
887
|
-
class
|
|
887
|
+
class or {
|
|
888
888
|
constructor(n = {}) {
|
|
889
889
|
this._extraSnapRects = [], this.snapThreshold = n.snapThreshold || sn.canvas.snapThreshold, this.enabled = n.enabled !== !1, this.showGuides = n.showGuides !== !1, this.guides = [], this.activeSnaps = {
|
|
890
890
|
x: null,
|
|
891
891
|
// { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
|
|
892
892
|
y: null
|
|
893
893
|
// { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
|
|
894
|
-
}, this.stickyThreshold = n.stickyThreshold || 15, this._spatialGrid = new
|
|
894
|
+
}, this.stickyThreshold = n.stickyThreshold || 15, this._spatialGrid = new De(Math.max(this.snapThreshold * 2, 16)), this._anchorMetadata = /* @__PURE__ */ new Map();
|
|
895
895
|
}
|
|
896
896
|
/**
|
|
897
897
|
* Enable or disable snapping
|
|
@@ -903,7 +903,7 @@ class tr {
|
|
|
903
903
|
* Set snap threshold in pixels
|
|
904
904
|
*/
|
|
905
905
|
setSnapThreshold(n) {
|
|
906
|
-
this.snapThreshold = n, this._spatialGrid = new
|
|
906
|
+
this.snapThreshold = n, this._spatialGrid = new De(Math.max(n * 2, 16));
|
|
907
907
|
}
|
|
908
908
|
/**
|
|
909
909
|
* Get current snap guides for rendering
|
|
@@ -942,7 +942,7 @@ class tr {
|
|
|
942
942
|
_populateSpatialGrid(n) {
|
|
943
943
|
this._spatialGrid.clear(), this._anchorMetadata.clear();
|
|
944
944
|
for (const e of n) {
|
|
945
|
-
const t =
|
|
945
|
+
const t = Cn.getSnapAnchors(e);
|
|
946
946
|
for (const [a, r] of Object.entries(t)) {
|
|
947
947
|
const s = `${e.id}:${a}`, o = {
|
|
948
948
|
x: r.x,
|
|
@@ -991,7 +991,7 @@ class tr {
|
|
|
991
991
|
return this.clearGuides(), n;
|
|
992
992
|
const a = e.clone();
|
|
993
993
|
a.x = n.x, a.y = n.y;
|
|
994
|
-
const r =
|
|
994
|
+
const r = Cn.getSnapAnchors(a), s = t.filter((b) => b.id !== e.id);
|
|
995
995
|
this._populateSpatialGrid(s);
|
|
996
996
|
let o = null, l = null, c = 1 / 0, d = 1 / 0;
|
|
997
997
|
const f = [], h = [], u = [];
|
|
@@ -1080,7 +1080,7 @@ class tr {
|
|
|
1080
1080
|
* Used for text elements where height is derived, not settable
|
|
1081
1081
|
*/
|
|
1082
1082
|
_isPositionBasedSnap(n, e) {
|
|
1083
|
-
return e === "x" ? !1 : e === "y" ? !(
|
|
1083
|
+
return e === "x" ? !1 : e === "y" ? !(kn(n) !== void 0 || n.height !== void 0 && typeof n.height == "number") : !1;
|
|
1084
1084
|
}
|
|
1085
1085
|
/**
|
|
1086
1086
|
* Determine which snap keys to use based on the resize handle
|
|
@@ -1191,7 +1191,7 @@ class tr {
|
|
|
1191
1191
|
for (const c of Object.values(t))
|
|
1192
1192
|
Math.abs(c.x - n.snapTo) < 5 && (o = Math.min(o, c.y), l = Math.max(l, c.y));
|
|
1193
1193
|
for (const c of a) {
|
|
1194
|
-
const d =
|
|
1194
|
+
const d = Cn.getSnapAnchors(c);
|
|
1195
1195
|
for (const f of Object.values(d))
|
|
1196
1196
|
Math.abs(f.x - n.snapTo) < 5 && (o = Math.min(o, f.y), l = Math.max(l, f.y));
|
|
1197
1197
|
}
|
|
@@ -1213,7 +1213,7 @@ class tr {
|
|
|
1213
1213
|
for (const c of Object.values(t))
|
|
1214
1214
|
Math.abs(c.y - n.snapTo) < 5 && (o = Math.min(o, c.x), l = Math.max(l, c.x));
|
|
1215
1215
|
for (const c of a) {
|
|
1216
|
-
const d =
|
|
1216
|
+
const d = Cn.getSnapAnchors(c);
|
|
1217
1217
|
for (const f of Object.values(d))
|
|
1218
1218
|
Math.abs(f.y - n.snapTo) < 5 && (o = Math.min(o, f.x), l = Math.max(l, f.x));
|
|
1219
1219
|
}
|
|
@@ -1260,7 +1260,7 @@ class tr {
|
|
|
1260
1260
|
* @returns {Object} { frozenWidth, frozenHeight } - Dimensions at snap point
|
|
1261
1261
|
*/
|
|
1262
1262
|
_calculateFrozenDimensionsAtSnap(n, e, t, a, r) {
|
|
1263
|
-
const s = un(n) ?? n.width ?? 0, o =
|
|
1263
|
+
const s = un(n) ?? n.width ?? 0, o = kn(n) ?? n.height ?? 0;
|
|
1264
1264
|
let l = s, c = o;
|
|
1265
1265
|
const d = n.transformType === "image", f = d ? n.imageAspectRatio || (s && o ? s / o : null) : null, h = a.toLowerCase();
|
|
1266
1266
|
return e === "x" ? h.includes("right") ? (l = s + t, d && f && (c = l / f)) : h.includes("left") && (l = s - t, d && f && (c = l / f)) : e === "y" && (h.includes("bottom") ? (c = o + t, d && f && (l = c * f)) : h.includes("top") && (c = o - t, d && f && (l = c * f))), { frozenWidth: l, frozenHeight: c };
|
|
@@ -1364,7 +1364,7 @@ class tr {
|
|
|
1364
1364
|
const a = n.getVisualBoundingBox(), r = n.transformType === "image";
|
|
1365
1365
|
if (!r) {
|
|
1366
1366
|
const s = un(n);
|
|
1367
|
-
s !== void 0 ?
|
|
1367
|
+
s !== void 0 ? Rn(n, s + e) : n.width !== void 0 && (n.width += e);
|
|
1368
1368
|
}
|
|
1369
1369
|
if (t.anchor === "middle-right") {
|
|
1370
1370
|
const s = pn.toRadiansInverse(n.rotation), o = Math.cos(s), l = Math.sin(s);
|
|
@@ -1381,7 +1381,7 @@ class tr {
|
|
|
1381
1381
|
const a = n.getVisualBoundingBox(), r = n.transformType === "image";
|
|
1382
1382
|
if (!r) {
|
|
1383
1383
|
const s = un(n);
|
|
1384
|
-
s !== void 0 ?
|
|
1384
|
+
s !== void 0 ? Rn(n, s - e) : n.width !== void 0 && (n.width -= e);
|
|
1385
1385
|
}
|
|
1386
1386
|
if (t.anchor === "middle-left") {
|
|
1387
1387
|
const s = pn.toRadiansInverse(n.rotation), o = Math.cos(s), l = Math.sin(s);
|
|
@@ -1397,8 +1397,8 @@ class tr {
|
|
|
1397
1397
|
_adjustElementForBottomResize(n, e, t) {
|
|
1398
1398
|
const a = n.getVisualBoundingBox(), r = n.transformType === "image";
|
|
1399
1399
|
if (!r) {
|
|
1400
|
-
const l =
|
|
1401
|
-
l !== void 0 ?
|
|
1400
|
+
const l = kn(n);
|
|
1401
|
+
l !== void 0 ? Vn(n, l + e) : n.height !== void 0 && (n.height += e);
|
|
1402
1402
|
}
|
|
1403
1403
|
const s = n.getVisualBoundingBox(), o = Math.abs(s.height - a.height) > 0.01;
|
|
1404
1404
|
if (t.anchor === "middle-bottom") {
|
|
@@ -1415,8 +1415,8 @@ class tr {
|
|
|
1415
1415
|
_adjustElementForTopResize(n, e, t) {
|
|
1416
1416
|
const a = n.getVisualBoundingBox(), r = n.transformType === "image";
|
|
1417
1417
|
if (!r) {
|
|
1418
|
-
const l =
|
|
1419
|
-
l !== void 0 ?
|
|
1418
|
+
const l = kn(n);
|
|
1419
|
+
l !== void 0 ? Vn(n, l - e) : n.height !== void 0 && (n.height -= e);
|
|
1420
1420
|
}
|
|
1421
1421
|
const s = n.getVisualBoundingBox(), o = Math.abs(s.height - a.height) > 0.01;
|
|
1422
1422
|
if (t.anchor === "middle-top") {
|
|
@@ -1448,12 +1448,12 @@ class tr {
|
|
|
1448
1448
|
if (o && l && n.isFrozen && n.unfrozenDimensions) {
|
|
1449
1449
|
const C = a.clone();
|
|
1450
1450
|
if (C.transformData) {
|
|
1451
|
-
const
|
|
1452
|
-
|
|
1451
|
+
const E = a.getVisualBoundingBox(), I = E.width, A = E.height, R = (t == null ? void 0 : t.width) ?? a.width ?? 0, z = (t == null ? void 0 : t.height) ?? a.height ?? 0, O = (t == null ? void 0 : t.visualWidth) ?? I, P = (t == null ? void 0 : t.visualHeight) ?? A, W = n.unfrozenDimensions.width / O, X = n.unfrozenDimensions.height / P;
|
|
1452
|
+
Rn(C, R * W), Vn(C, z * X);
|
|
1453
1453
|
}
|
|
1454
|
-
s =
|
|
1454
|
+
s = Cn.getSnapAnchors(C);
|
|
1455
1455
|
} else
|
|
1456
|
-
s =
|
|
1456
|
+
s = Cn.getSnapAnchors(a);
|
|
1457
1457
|
const c = e.filter((C) => C.id !== a.id);
|
|
1458
1458
|
if (c.length === 0)
|
|
1459
1459
|
return this.clearGuides(), n;
|
|
@@ -1466,33 +1466,33 @@ class tr {
|
|
|
1466
1466
|
if (o && w && (p !== 0 || y !== 0))
|
|
1467
1467
|
return n;
|
|
1468
1468
|
if (p !== 0 || y !== 0) {
|
|
1469
|
-
const C = a.clone(),
|
|
1470
|
-
if (!
|
|
1469
|
+
const C = a.clone(), E = this.activeSnaps.x || this.activeSnaps.y, I = (E == null ? void 0 : E.frozenFontSize) ?? a.fontSize ?? 0, A = (E == null ? void 0 : E.frozenWidth) ?? un(a) ?? a.width ?? 0, R = (E == null ? void 0 : E.frozenHeight) ?? kn(a) ?? a.height ?? 0, z = (E == null ? void 0 : E.frozenPosition) ?? { x: a.x, y: a.y }, O = C.isCropping && !String(r.anchor).startsWith("crop-");
|
|
1470
|
+
if (!O)
|
|
1471
1471
|
if (r && r.anchor) {
|
|
1472
1472
|
if (p !== 0) {
|
|
1473
|
-
const
|
|
1474
|
-
|
|
1473
|
+
const D = (v = this.activeSnaps.x) == null ? void 0 : v.anchorKey, F = D == null ? void 0 : D.toLowerCase();
|
|
1474
|
+
F && F.includes("right") ? this._adjustElementForRightResize(C, p, r) : F && F.includes("left") ? this._adjustElementForLeftResize(C, p, r) : C.x += p;
|
|
1475
1475
|
}
|
|
1476
1476
|
if (y !== 0) {
|
|
1477
|
-
const
|
|
1478
|
-
|
|
1477
|
+
const D = (S = this.activeSnaps.y) == null ? void 0 : S.anchorKey, F = D == null ? void 0 : D.toLowerCase();
|
|
1478
|
+
F && F.includes("bottom") ? this._adjustElementForBottomResize(C, y, r) : F && F.includes("top") ? this._adjustElementForTopResize(C, y, r) : C.y += y;
|
|
1479
1479
|
}
|
|
1480
1480
|
} else
|
|
1481
1481
|
C.x += p, C.y += y;
|
|
1482
1482
|
C.fontSize !== void 0 && (C.fontSize = I);
|
|
1483
|
-
const
|
|
1484
|
-
if (
|
|
1483
|
+
const P = C.transformType === "image", W = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
|
|
1484
|
+
if (P && W) {
|
|
1485
1485
|
if (un(C) !== void 0) {
|
|
1486
|
-
const
|
|
1487
|
-
let
|
|
1488
|
-
|
|
1489
|
-
const
|
|
1490
|
-
|
|
1486
|
+
const D = this.activeSnaps.x || this.activeSnaps.y;
|
|
1487
|
+
let F = A, B = R;
|
|
1488
|
+
D && (F = D.frozenWidth ?? F, B = D.frozenHeight ?? B);
|
|
1489
|
+
const M = un(a), U = kn(a), V = C.imageAspectRatio || (M && U ? M / U : null);
|
|
1490
|
+
V && V !== 0 && (B = F / V), Rn(C, F), Vn(C, B), D && (D.frozenWidth = F, D.frozenHeight = B);
|
|
1491
1491
|
}
|
|
1492
1492
|
} else
|
|
1493
|
-
(((T = this.activeSnaps.y) == null ? void 0 : T.isPositionBasedSnap) || !1) && (un(C) !== void 0 ?
|
|
1494
|
-
const
|
|
1495
|
-
return (p === 0 ||
|
|
1493
|
+
(((T = this.activeSnaps.y) == null ? void 0 : T.isPositionBasedSnap) || !1) && (un(C) !== void 0 ? Rn(C, A) : C.width !== void 0 && (C.width = A));
|
|
1494
|
+
const X = r && (r.anchor === "middle-left" || r.anchor === "middle-right"), q = r && (r.anchor === "middle-top" || r.anchor === "middle-bottom"), Q = ((k = this.activeSnaps.x) == null ? void 0 : k.isPositionBasedSnap) || !1, L = ((_ = this.activeSnaps.y) == null ? void 0 : _.isPositionBasedSnap) || !1;
|
|
1495
|
+
return (p === 0 || Q) && !X && !q && !O && (C.x = z.x), (y === 0 || L) && !q && !X && !O && (C.y = z.y), {
|
|
1496
1496
|
...n,
|
|
1497
1497
|
element: C,
|
|
1498
1498
|
snapAdjustment: { dx: p, dy: y },
|
|
@@ -1509,12 +1509,12 @@ class tr {
|
|
|
1509
1509
|
if (!this.enabled) return n;
|
|
1510
1510
|
const a = [0, 45, 90, 135, 180, 225, 270, 315, 360], r = 5;
|
|
1511
1511
|
for (const s of a)
|
|
1512
|
-
if (
|
|
1512
|
+
if (vt(n, s, r))
|
|
1513
1513
|
return s;
|
|
1514
1514
|
return n;
|
|
1515
1515
|
}
|
|
1516
1516
|
}
|
|
1517
|
-
class
|
|
1517
|
+
class lr {
|
|
1518
1518
|
constructor(n = {}) {
|
|
1519
1519
|
this.lastSnapTarget = null, this.detectionThreshold = n.detectionThreshold || 100, this.minDistance = n.minDistance || 10, this.enabled = n.enabled !== !1, this.showLabels = n.showLabels !== !1, this.indicators = [];
|
|
1520
1520
|
}
|
|
@@ -1549,7 +1549,7 @@ class ar {
|
|
|
1549
1549
|
snapToSpacing(n, e, t) {
|
|
1550
1550
|
if (!this.enabled || !t)
|
|
1551
1551
|
return n;
|
|
1552
|
-
const a =
|
|
1552
|
+
const a = _e, r = t.filter((p) => p.id !== e.id);
|
|
1553
1553
|
if (r.length === 0)
|
|
1554
1554
|
return n;
|
|
1555
1555
|
const s = e.clone();
|
|
@@ -1846,7 +1846,7 @@ class ar {
|
|
|
1846
1846
|
* Check if spacing would snap to a pattern
|
|
1847
1847
|
*/
|
|
1848
1848
|
checkIfWouldSnap(n, e, t, a) {
|
|
1849
|
-
const r =
|
|
1849
|
+
const r = _e;
|
|
1850
1850
|
if (t === "top" || t === "bottom") {
|
|
1851
1851
|
const s = a.filter((o) => {
|
|
1852
1852
|
const l = o.getVisualBoundingBox();
|
|
@@ -1946,7 +1946,7 @@ class ar {
|
|
|
1946
1946
|
}
|
|
1947
1947
|
}
|
|
1948
1948
|
}
|
|
1949
|
-
const
|
|
1949
|
+
const ta = mn("TextureManager"), Ln = class Ln {
|
|
1950
1950
|
/**
|
|
1951
1951
|
* Load a texture by ID or URL
|
|
1952
1952
|
*/
|
|
@@ -1960,7 +1960,7 @@ const Jt = yn("TextureManager"), Bn = class Bn {
|
|
|
1960
1960
|
s.crossOrigin = "anonymous", s.onload = () => {
|
|
1961
1961
|
this.cache.set(n, s), this.cache.set(e, s), this.loading.delete(n), this.loading.delete(e), a(s);
|
|
1962
1962
|
}, s.onerror = () => {
|
|
1963
|
-
|
|
1963
|
+
ta.error("Failed to load texture:", e), this.loading.delete(n), this.loading.delete(e), r(new Error(`Failed to load texture: ${e}`));
|
|
1964
1964
|
}, s.src = e;
|
|
1965
1965
|
});
|
|
1966
1966
|
return this.loading.set(n, t), e !== n && this.loading.set(e, t), t;
|
|
@@ -2026,7 +2026,7 @@ const Jt = yn("TextureManager"), Bn = class Bn {
|
|
|
2026
2026
|
return (e == null ? void 0 : e.presetColor) || "#ffffff";
|
|
2027
2027
|
}
|
|
2028
2028
|
};
|
|
2029
|
-
|
|
2029
|
+
Ln.cache = /* @__PURE__ */ new Map(), Ln.loading = /* @__PURE__ */ new Map(), Ln.TEXTURES = [
|
|
2030
2030
|
{
|
|
2031
2031
|
id: "glass-frame",
|
|
2032
2032
|
name: "Glass Frame",
|
|
@@ -2036,8 +2036,8 @@ Bn.cache = /* @__PURE__ */ new Map(), Bn.loading = /* @__PURE__ */ new Map(), Bn
|
|
|
2036
2036
|
// Light gray
|
|
2037
2037
|
}
|
|
2038
2038
|
];
|
|
2039
|
-
let
|
|
2040
|
-
const
|
|
2039
|
+
let cn = Ln;
|
|
2040
|
+
const le = mn("ArtboardRenderer"), aa = {
|
|
2041
2041
|
showLabel: !0,
|
|
2042
2042
|
showBorder: !0,
|
|
2043
2043
|
borderColor: "",
|
|
@@ -2055,9 +2055,9 @@ const ie = yn("ArtboardRenderer"), Zt = {
|
|
|
2055
2055
|
borderRadius: 0
|
|
2056
2056
|
// Default to no border radius (sharp corners)
|
|
2057
2057
|
};
|
|
2058
|
-
class
|
|
2058
|
+
class at {
|
|
2059
2059
|
constructor(n = {}) {
|
|
2060
|
-
this.options = { ...
|
|
2060
|
+
this.options = { ...aa, ...n };
|
|
2061
2061
|
}
|
|
2062
2062
|
/**
|
|
2063
2063
|
* Render an artboard
|
|
@@ -2079,10 +2079,10 @@ class Je {
|
|
|
2079
2079
|
* Renders preset color as base layer, then texture on top
|
|
2080
2080
|
*/
|
|
2081
2081
|
renderTextureBackground(n, e) {
|
|
2082
|
-
const t =
|
|
2082
|
+
const t = cn.getTexture(e.backgroundTexture), a = cn.getTexturePresetColor(e.backgroundTexture);
|
|
2083
2083
|
if (n.fillStyle = a, n.fillRect(e.x, e.y, e.width, e.height), !t || !t.complete) {
|
|
2084
|
-
|
|
2085
|
-
|
|
2084
|
+
cn.loadTexture(e.backgroundTexture).catch((r) => {
|
|
2085
|
+
le.error("Failed to load texture:", r);
|
|
2086
2086
|
});
|
|
2087
2087
|
return;
|
|
2088
2088
|
}
|
|
@@ -2103,7 +2103,7 @@ class Je {
|
|
|
2103
2103
|
* Render artboard border (respects clipShape and borderRadius option)
|
|
2104
2104
|
*/
|
|
2105
2105
|
renderBorder(n, e, t) {
|
|
2106
|
-
const { x: a, y: r, width: s, height: o, clipShape: l } = e, c = this.options.borderColor ||
|
|
2106
|
+
const { x: a, y: r, width: s, height: o, clipShape: l } = e, c = this.options.borderColor || wt(), d = this.options.selectedBorderColor || en();
|
|
2107
2107
|
if (n.strokeStyle = t ? d : c, n.lineWidth = t ? this.options.selectedBorderWidth : this.options.borderWidth, n.beginPath(), !l || l === "rectangle")
|
|
2108
2108
|
if (this.options.borderRadius > 0) {
|
|
2109
2109
|
const f = Math.min(this.options.borderRadius, Math.min(s, o) / 2);
|
|
@@ -2122,7 +2122,7 @@ class Je {
|
|
|
2122
2122
|
n.save(), n.translate(a, r), n.stroke(f), n.restore();
|
|
2123
2123
|
return;
|
|
2124
2124
|
} catch (f) {
|
|
2125
|
-
|
|
2125
|
+
le.warn("Invalid SVG path for border, falling back to rectangle:", f), n.rect(a, r, s, o);
|
|
2126
2126
|
}
|
|
2127
2127
|
n.stroke();
|
|
2128
2128
|
}
|
|
@@ -2132,7 +2132,7 @@ class Je {
|
|
|
2132
2132
|
renderLabel(n, e, t) {
|
|
2133
2133
|
const a = this.options.labelFontSize, r = this.options.labelPadding, s = `${e.name} (${Math.round(e.width)} × ${Math.round(e.height)})`, o = e.x, l = e.y - r;
|
|
2134
2134
|
n.font = `${a}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
|
|
2135
|
-
const c = this.options.selectedBorderColor || en(), d = this.options.labelColor ||
|
|
2135
|
+
const c = this.options.selectedBorderColor || en(), d = this.options.labelColor || St();
|
|
2136
2136
|
n.fillStyle = t ? c : d, n.textAlign = "left", n.textBaseline = "bottom", n.fillText(s, o, l);
|
|
2137
2137
|
}
|
|
2138
2138
|
/**
|
|
@@ -2176,7 +2176,7 @@ class Je {
|
|
|
2176
2176
|
n.translate(t, a), n.clip(l), n.translate(-t, -a);
|
|
2177
2177
|
return;
|
|
2178
2178
|
} catch (l) {
|
|
2179
|
-
|
|
2179
|
+
le.warn("Invalid SVG path, falling back to rectangle:", l), n.rect(t, a, r, s);
|
|
2180
2180
|
}
|
|
2181
2181
|
n.clip();
|
|
2182
2182
|
}
|
|
@@ -2235,7 +2235,7 @@ class Je {
|
|
|
2235
2235
|
* Use this when exporting to ensure preview background is never included
|
|
2236
2236
|
*/
|
|
2237
2237
|
static createForExport(n = {}) {
|
|
2238
|
-
return new
|
|
2238
|
+
return new at({
|
|
2239
2239
|
...n,
|
|
2240
2240
|
showPreviewBackground: !1
|
|
2241
2241
|
// CRITICAL: Never show preview in exports
|
|
@@ -2248,42 +2248,42 @@ class Je {
|
|
|
2248
2248
|
return !!(this.options.showPreviewBackground && n.previewBackgroundColor && n.previewBackgroundColor !== "transparent");
|
|
2249
2249
|
}
|
|
2250
2250
|
}
|
|
2251
|
-
function
|
|
2252
|
-
return i instanceof
|
|
2251
|
+
function cr(i) {
|
|
2252
|
+
return i instanceof Ct;
|
|
2253
2253
|
}
|
|
2254
|
-
function
|
|
2255
|
-
return i instanceof
|
|
2254
|
+
function ra(i) {
|
|
2255
|
+
return i instanceof Un;
|
|
2256
2256
|
}
|
|
2257
|
-
function
|
|
2258
|
-
return i instanceof
|
|
2257
|
+
function ce(i) {
|
|
2258
|
+
return i instanceof Ke;
|
|
2259
2259
|
}
|
|
2260
|
-
function
|
|
2261
|
-
return i instanceof
|
|
2260
|
+
function dr(i) {
|
|
2261
|
+
return i instanceof Ze;
|
|
2262
2262
|
}
|
|
2263
|
-
function
|
|
2264
|
-
return i instanceof
|
|
2263
|
+
function fr(i) {
|
|
2264
|
+
return i instanceof Je;
|
|
2265
2265
|
}
|
|
2266
|
-
function
|
|
2266
|
+
function we(i, n, e = {}) {
|
|
2267
2267
|
const t = e.mode || "both";
|
|
2268
2268
|
switch (i.save(), i.translate(n.x || 0, n.y || 0), i.rotate(-(n.rotation || 0) * Math.PI / 180), n.transformType) {
|
|
2269
2269
|
case "image":
|
|
2270
|
-
|
|
2270
|
+
ia(i, n, t, e);
|
|
2271
2271
|
break;
|
|
2272
2272
|
case "shape":
|
|
2273
|
-
|
|
2273
|
+
oa(i, n, t, e);
|
|
2274
2274
|
break;
|
|
2275
2275
|
case "group":
|
|
2276
2276
|
break;
|
|
2277
2277
|
default:
|
|
2278
|
-
|
|
2278
|
+
sa(i, n, t, e);
|
|
2279
2279
|
break;
|
|
2280
2280
|
}
|
|
2281
2281
|
i.restore();
|
|
2282
2282
|
}
|
|
2283
|
-
function
|
|
2283
|
+
function sa(i, n, e, t) {
|
|
2284
2284
|
var s;
|
|
2285
2285
|
const a = n, r = a.text || "";
|
|
2286
|
-
r && ((e === "stroke" || e === "both") && ((s = n.stroke) != null && s.enabled) && (i.save(),
|
|
2286
|
+
r && ((e === "stroke" || e === "both") && ((s = n.stroke) != null && s.enabled) && (i.save(), kt(i, n, { ...t.renderingContext, positionApplied: !0 }), i.restore()), (e === "fill" || e === "both") && (i.save(), Tt(i, {
|
|
2287
2287
|
text: r,
|
|
2288
2288
|
fontSize: a.fontSize || 24,
|
|
2289
2289
|
fontFamily: a.fontFamily || "Arial",
|
|
@@ -2293,12 +2293,12 @@ function na(i, n, e, t) {
|
|
|
2293
2293
|
color: a.color || "#000000"
|
|
2294
2294
|
}), i.restore()));
|
|
2295
2295
|
}
|
|
2296
|
-
function
|
|
2296
|
+
function ia(i, n, e, t) {
|
|
2297
2297
|
var r;
|
|
2298
2298
|
if (!n.transformData) return;
|
|
2299
2299
|
const a = n.transformData;
|
|
2300
2300
|
if (e === "fill" || e === "both")
|
|
2301
|
-
if (
|
|
2301
|
+
if (ua(i, n), t.loadedImage) {
|
|
2302
2302
|
i.save(), i.clip();
|
|
2303
2303
|
const s = a.flipHorizontal ? -1 : 1, o = a.flipVertical ? -1 : 1;
|
|
2304
2304
|
i.scale(s, o);
|
|
@@ -2306,34 +2306,34 @@ function ea(i, n, e, t) {
|
|
|
2306
2306
|
i.drawImage(t.loadedImage, -l / 2, -c / 2, l, c), i.restore();
|
|
2307
2307
|
} else
|
|
2308
2308
|
i.fillStyle = "#cccccc", i.fill();
|
|
2309
|
-
(e === "stroke" || e === "both") && ((r = n.stroke) != null && r.enabled) && (i.save(),
|
|
2309
|
+
(e === "stroke" || e === "both") && ((r = n.stroke) != null && r.enabled) && (i.save(), _t(i, n, t.renderingContext), i.restore());
|
|
2310
2310
|
}
|
|
2311
|
-
function
|
|
2311
|
+
function oa(i, n, e, t) {
|
|
2312
2312
|
var s, o;
|
|
2313
2313
|
if (!n.transformData) return;
|
|
2314
2314
|
const a = n.transformData, r = ((s = t.renderingContext) == null ? void 0 : s.isKnockout) === !0;
|
|
2315
|
-
i.beginPath(),
|
|
2315
|
+
i.beginPath(), rt(i, a), (e === "fill" || e === "both") && (i.fillStyle = r ? "#000000" : a.fillColor || "#3b82f6", i.globalAlpha = r ? 1 : a.fillOpacity ?? 1, i.fill()), (e === "stroke" || e === "both") && ((o = n.stroke) != null && o.enabled) && (i.save(), fa(i, n, t.renderingContext), i.restore());
|
|
2316
2316
|
}
|
|
2317
|
-
function
|
|
2317
|
+
function rt(i, n) {
|
|
2318
2318
|
const { shapeType: e } = n, t = n.width ?? 100, a = n.height ?? 100;
|
|
2319
2319
|
switch (e) {
|
|
2320
2320
|
case "rectangle":
|
|
2321
|
-
|
|
2321
|
+
Re(i, n, t, a);
|
|
2322
2322
|
break;
|
|
2323
2323
|
case "circle":
|
|
2324
|
-
|
|
2324
|
+
la(i, Math.min(t, a) / 2);
|
|
2325
2325
|
break;
|
|
2326
2326
|
case "ellipse":
|
|
2327
|
-
|
|
2327
|
+
ca(i, t / 2, a / 2);
|
|
2328
2328
|
break;
|
|
2329
2329
|
case "star":
|
|
2330
|
-
|
|
2330
|
+
da(i, n, Math.min(t, a) / 2);
|
|
2331
2331
|
break;
|
|
2332
2332
|
default:
|
|
2333
|
-
|
|
2333
|
+
Re(i, n, t, a);
|
|
2334
2334
|
}
|
|
2335
2335
|
}
|
|
2336
|
-
function
|
|
2336
|
+
function Re(i, n, e, t) {
|
|
2337
2337
|
const a = n.borderRadius || 0, r = -e / 2, s = -t / 2;
|
|
2338
2338
|
if (a > 0) {
|
|
2339
2339
|
const o = Math.min(a / 100 * Math.min(e, t), e / 2, t / 2);
|
|
@@ -2341,13 +2341,13 @@ function Ae(i, n, e, t) {
|
|
|
2341
2341
|
} else
|
|
2342
2342
|
i.rect(r, s, e, t);
|
|
2343
2343
|
}
|
|
2344
|
-
function
|
|
2344
|
+
function la(i, n) {
|
|
2345
2345
|
i.arc(0, 0, n, 0, Math.PI * 2);
|
|
2346
2346
|
}
|
|
2347
|
-
function
|
|
2347
|
+
function ca(i, n, e) {
|
|
2348
2348
|
i.ellipse(0, 0, n, e, 0, 0, Math.PI * 2);
|
|
2349
2349
|
}
|
|
2350
|
-
function
|
|
2350
|
+
function da(i, n, e) {
|
|
2351
2351
|
const t = Math.max(3, Math.min(20, n.points || 5)), a = Math.max(0.1, Math.min(0.9, n.innerRadius || 0.4)), r = e * a, s = Math.PI / t, o = -Math.PI / 2;
|
|
2352
2352
|
for (let l = 0; l < t * 2; l++) {
|
|
2353
2353
|
const c = o + s * l, d = l % 2 === 0 ? e : r, f = Math.cos(c) * d, h = Math.sin(c) * d;
|
|
@@ -2355,13 +2355,13 @@ function sa(i, n, e) {
|
|
|
2355
2355
|
}
|
|
2356
2356
|
i.closePath();
|
|
2357
2357
|
}
|
|
2358
|
-
function
|
|
2358
|
+
function fa(i, n, e) {
|
|
2359
2359
|
var a;
|
|
2360
2360
|
if (!((a = n.stroke) != null && a.enabled) || !n.transformData) return;
|
|
2361
2361
|
const t = (e == null ? void 0 : e.isKnockout) === !0;
|
|
2362
|
-
i.save(), t ? (i.strokeStyle = "#000000", i.lineWidth = n.stroke.width, i.lineCap = n.stroke.lineCap || "butt", i.lineJoin = n.stroke.lineJoin || "miter", i.globalAlpha = 1) : (i.strokeStyle = n.stroke.color, i.lineWidth = n.stroke.width, i.lineCap = n.stroke.lineCap || "butt", i.lineJoin = n.stroke.lineJoin || "miter", n.stroke.opacity !== void 0 && (i.globalAlpha = n.stroke.opacity)), n.stroke.miterLimit !== void 0 && (i.miterLimit = n.stroke.miterLimit), n.stroke.dashArray && n.stroke.dashArray.length > 0 && i.setLineDash(n.stroke.dashArray), !t && n.stroke.feather && n.stroke.feather > 0 && "filter" in i && (i.filter = `blur(${n.stroke.feather}px)`), i.beginPath(),
|
|
2362
|
+
i.save(), t ? (i.strokeStyle = "#000000", i.lineWidth = n.stroke.width, i.lineCap = n.stroke.lineCap || "butt", i.lineJoin = n.stroke.lineJoin || "miter", i.globalAlpha = 1) : (i.strokeStyle = n.stroke.color, i.lineWidth = n.stroke.width, i.lineCap = n.stroke.lineCap || "butt", i.lineJoin = n.stroke.lineJoin || "miter", n.stroke.opacity !== void 0 && (i.globalAlpha = n.stroke.opacity)), n.stroke.miterLimit !== void 0 && (i.miterLimit = n.stroke.miterLimit), n.stroke.dashArray && n.stroke.dashArray.length > 0 && i.setLineDash(n.stroke.dashArray), !t && n.stroke.feather && n.stroke.feather > 0 && "filter" in i && (i.filter = `blur(${n.stroke.feather}px)`), i.beginPath(), rt(i, n.transformData), i.stroke(), i.restore();
|
|
2363
2363
|
}
|
|
2364
|
-
function
|
|
2364
|
+
function ua(i, n) {
|
|
2365
2365
|
if (!n.transformData) return;
|
|
2366
2366
|
const { borderRadius: e } = n.transformData, t = n.transformData.width ?? 100, a = n.transformData.height ?? 100, r = -t / 2, s = -a / 2;
|
|
2367
2367
|
if (i.beginPath(), e && e > 0) {
|
|
@@ -2370,7 +2370,7 @@ function oa(i, n) {
|
|
|
2370
2370
|
} else
|
|
2371
2371
|
i.rect(r, s, t, a);
|
|
2372
2372
|
}
|
|
2373
|
-
function
|
|
2373
|
+
function qn(i, n, e, t, a, r, s = "destination-out") {
|
|
2374
2374
|
var $;
|
|
2375
2375
|
if (!n.knockoutParts) return;
|
|
2376
2376
|
if (!(n.knockoutParts.fill || n.knockoutParts.stroke)) {
|
|
@@ -2379,21 +2379,21 @@ function Xn(i, n, e, t, a, r, s = "destination-out") {
|
|
|
2379
2379
|
}
|
|
2380
2380
|
const l = i.getTransform();
|
|
2381
2381
|
i.save();
|
|
2382
|
-
const c = n.knockoutParts.scope || "group", d =
|
|
2382
|
+
const c = n.knockoutParts.scope || "group", d = ha(n, c, e);
|
|
2383
2383
|
if (d.length === 0 && c === "artboard") {
|
|
2384
|
-
|
|
2384
|
+
ga(i, n, t), i.restore();
|
|
2385
2385
|
return;
|
|
2386
2386
|
}
|
|
2387
2387
|
if (d.length === 0) {
|
|
2388
2388
|
t(i, n), i.restore();
|
|
2389
2389
|
return;
|
|
2390
2390
|
}
|
|
2391
|
-
const f = i.canvas, u = i.getTransform().a, g =
|
|
2391
|
+
const f = i.canvas, u = i.getTransform().a, g = ba(f.width, f.height), m = g.getContext("2d");
|
|
2392
2392
|
if (!m) return;
|
|
2393
2393
|
m.scale(u, u), a && r && (m.fillStyle = a, m.fillRect(r.x, r.y, r.width, r.height));
|
|
2394
2394
|
for (const x of d)
|
|
2395
2395
|
t(m, x);
|
|
2396
|
-
n.knockoutParts.fill && !n.knockoutParts.stroke && (($ = n.stroke) != null && $.enabled) && (m.save(),
|
|
2396
|
+
n.knockoutParts.fill && !n.knockoutParts.stroke && (($ = n.stroke) != null && $.enabled) && (m.save(), pe(m, n), m.restore()), m.save(), m.globalCompositeOperation = s, n.knockoutParts.fill && he(m, n), n.knockoutParts.stroke && pe(m, n), m.restore(), n.knockoutParts.fill || (m.save(), he(m, n), m.restore());
|
|
2397
2397
|
const p = f.width / u, y = f.height / u;
|
|
2398
2398
|
i.drawImage(g, 0, 0, p, y), i.restore();
|
|
2399
2399
|
const b = i.getTransform();
|
|
@@ -2406,59 +2406,59 @@ function Xn(i, n, e, t, a, r, s = "destination-out") {
|
|
|
2406
2406
|
l.f
|
|
2407
2407
|
);
|
|
2408
2408
|
}
|
|
2409
|
-
function
|
|
2410
|
-
|
|
2409
|
+
function ur(i, n, e, t, a, r) {
|
|
2410
|
+
qn(i, n, e, t, a, r, "destination-out");
|
|
2411
2411
|
}
|
|
2412
|
-
function
|
|
2413
|
-
return n === "artboard" ?
|
|
2412
|
+
function ha(i, n, e) {
|
|
2413
|
+
return n === "artboard" ? st(i, e) : pa(i, e);
|
|
2414
2414
|
}
|
|
2415
|
-
function
|
|
2415
|
+
function st(i, n) {
|
|
2416
2416
|
const e = n.findIndex((t) => t.id === i.id);
|
|
2417
2417
|
return e === -1 ? [] : n.slice(0, e);
|
|
2418
2418
|
}
|
|
2419
|
-
function
|
|
2420
|
-
const e =
|
|
2419
|
+
function pa(i, n) {
|
|
2420
|
+
const e = it(i, n);
|
|
2421
2421
|
if (!e)
|
|
2422
|
-
return
|
|
2422
|
+
return st(i, n);
|
|
2423
2423
|
if (e.transformType !== "group" || !e.children)
|
|
2424
2424
|
return [];
|
|
2425
2425
|
const t = e.children.findIndex((a) => a.id === i.id);
|
|
2426
2426
|
return t === -1 ? [] : e.children.slice(0, t);
|
|
2427
2427
|
}
|
|
2428
|
-
function
|
|
2428
|
+
function it(i, n) {
|
|
2429
2429
|
for (const e of n)
|
|
2430
2430
|
if (e.transformType === "group" && e.children) {
|
|
2431
2431
|
if (e.children.some((a) => a.id === i.id))
|
|
2432
2432
|
return e;
|
|
2433
|
-
const t =
|
|
2433
|
+
const t = it(i, e.children);
|
|
2434
2434
|
if (t)
|
|
2435
2435
|
return t;
|
|
2436
2436
|
}
|
|
2437
2437
|
return null;
|
|
2438
2438
|
}
|
|
2439
|
-
function
|
|
2440
|
-
|
|
2439
|
+
function he(i, n, e) {
|
|
2440
|
+
we(i, n, {
|
|
2441
2441
|
mode: "fill",
|
|
2442
2442
|
renderingContext: { isKnockout: !0 }
|
|
2443
2443
|
});
|
|
2444
2444
|
}
|
|
2445
|
-
function
|
|
2445
|
+
function pe(i, n) {
|
|
2446
2446
|
var e;
|
|
2447
|
-
(e = n.stroke) != null && e.enabled &&
|
|
2447
|
+
(e = n.stroke) != null && e.enabled && we(i, n, {
|
|
2448
2448
|
mode: "stroke",
|
|
2449
2449
|
renderingContext: { isKnockout: !0 }
|
|
2450
2450
|
});
|
|
2451
2451
|
}
|
|
2452
|
-
function
|
|
2452
|
+
function ga(i, n, e) {
|
|
2453
2453
|
var a;
|
|
2454
2454
|
const t = n.knockoutParts;
|
|
2455
2455
|
if (!t) {
|
|
2456
2456
|
e(i, n);
|
|
2457
2457
|
return;
|
|
2458
2458
|
}
|
|
2459
|
-
t.fill || (i.save(),
|
|
2459
|
+
t.fill || (i.save(), he(i, n), i.restore()), !t.stroke && ((a = n.stroke) != null && a.enabled) && (i.save(), pe(i, n), i.restore());
|
|
2460
2460
|
}
|
|
2461
|
-
function
|
|
2461
|
+
function ba(i, n) {
|
|
2462
2462
|
if (typeof OffscreenCanvas < "u")
|
|
2463
2463
|
return new OffscreenCanvas(i, n);
|
|
2464
2464
|
if (typeof document < "u") {
|
|
@@ -2467,7 +2467,7 @@ function fa(i, n) {
|
|
|
2467
2467
|
}
|
|
2468
2468
|
throw new Error("No canvas context available");
|
|
2469
2469
|
}
|
|
2470
|
-
function
|
|
2470
|
+
function Fe(i, n, e, t, a = 0) {
|
|
2471
2471
|
if (e <= 0 || t <= 0 || i <= 0 || n <= 0)
|
|
2472
2472
|
return { width: i + a, height: n + a };
|
|
2473
2473
|
const r = e / t, s = i / n;
|
|
@@ -2477,11 +2477,11 @@ function Pe(i, n, e, t, a = 0) {
|
|
|
2477
2477
|
height: l + a
|
|
2478
2478
|
};
|
|
2479
2479
|
}
|
|
2480
|
-
const
|
|
2481
|
-
function
|
|
2480
|
+
const Fn = 64, de = 512;
|
|
2481
|
+
function ma(i, n) {
|
|
2482
2482
|
i.beginPath(), i.arc(n / 2, n / 2, n * 0.45, 0, Math.PI * 2), i.fill();
|
|
2483
2483
|
}
|
|
2484
|
-
function
|
|
2484
|
+
function ya(i, n) {
|
|
2485
2485
|
const e = n / 2, t = n / 2, a = n * 0.45, r = a * 0.4, s = 5;
|
|
2486
2486
|
i.beginPath();
|
|
2487
2487
|
for (let o = 0; o < s * 2; o++) {
|
|
@@ -2490,15 +2490,15 @@ function ha(i, n) {
|
|
|
2490
2490
|
}
|
|
2491
2491
|
i.closePath(), i.fill();
|
|
2492
2492
|
}
|
|
2493
|
-
function
|
|
2493
|
+
function xa(i, n) {
|
|
2494
2494
|
const e = n / 2, t = n * 0.42;
|
|
2495
2495
|
i.beginPath(), i.moveTo(e, n * 0.82), i.bezierCurveTo(e - t * 1.1, n * 0.6, e - t * 1.3, n * 0.2, e, n * 0.35), i.bezierCurveTo(e + t * 1.3, n * 0.2, e + t * 1.1, n * 0.6, e, n * 0.82), i.closePath(), i.fill();
|
|
2496
2496
|
}
|
|
2497
|
-
function
|
|
2497
|
+
function $a(i, n) {
|
|
2498
2498
|
const e = n / 2, t = n / 2, a = n * 0.4, r = n * 0.48;
|
|
2499
2499
|
i.beginPath(), i.moveTo(e, t - r), i.lineTo(e + a, t), i.lineTo(e, t + r), i.lineTo(e - a, t), i.closePath(), i.fill();
|
|
2500
2500
|
}
|
|
2501
|
-
function
|
|
2501
|
+
function va(i, n) {
|
|
2502
2502
|
const e = n / 2, t = n / 2, a = n * 0.44;
|
|
2503
2503
|
i.beginPath();
|
|
2504
2504
|
for (let r = 0; r < 6; r++) {
|
|
@@ -2507,11 +2507,11 @@ function ba(i, n) {
|
|
|
2507
2507
|
}
|
|
2508
2508
|
i.closePath(), i.fill();
|
|
2509
2509
|
}
|
|
2510
|
-
function
|
|
2510
|
+
function wa(i, n) {
|
|
2511
2511
|
const e = n / 2, t = n * 0.4, a = n * 0.12;
|
|
2512
2512
|
i.beginPath(), i.moveTo(e, a), i.lineTo(e + t, n * 0.25), i.lineTo(e + t, n * 0.55), i.quadraticCurveTo(e + t * 0.3, n * 0.8, e, n * 0.9), i.quadraticCurveTo(e - t * 0.3, n * 0.8, e - t, n * 0.55), i.lineTo(e - t, n * 0.25), i.closePath(), i.fill();
|
|
2513
2513
|
}
|
|
2514
|
-
function
|
|
2514
|
+
function Sa(i, n) {
|
|
2515
2515
|
const e = n / 2, t = n / 2;
|
|
2516
2516
|
let a = 42;
|
|
2517
2517
|
const r = () => (a = (a * 16807 + 0) % 2147483647, a / 2147483647);
|
|
@@ -2521,7 +2521,7 @@ function ya(i, n) {
|
|
|
2521
2521
|
i.beginPath(), i.arc(e + Math.cos(o) * l, t + Math.sin(o) * l, c, 0, Math.PI * 2), i.fill();
|
|
2522
2522
|
}
|
|
2523
2523
|
}
|
|
2524
|
-
function
|
|
2524
|
+
function Ca(i, n) {
|
|
2525
2525
|
let e = 123;
|
|
2526
2526
|
const t = () => (e = (e * 16807 + 0) % 2147483647, e / 2147483647), a = n * 0.08, r = 40;
|
|
2527
2527
|
i.beginPath(), i.moveTo(a, a);
|
|
@@ -2543,7 +2543,7 @@ function xa(i, n) {
|
|
|
2543
2543
|
}
|
|
2544
2544
|
i.closePath(), i.fill();
|
|
2545
2545
|
}
|
|
2546
|
-
function
|
|
2546
|
+
function ka(i, n) {
|
|
2547
2547
|
let e = 77;
|
|
2548
2548
|
const t = () => (e = (e * 16807 + 0) % 2147483647, e / 2147483647), a = n * 0.25, r = n * 0.75, s = n * 0.1;
|
|
2549
2549
|
i.beginPath(), i.moveTo(s, a + t() * n * 0.05);
|
|
@@ -2557,101 +2557,101 @@ function $a(i, n) {
|
|
|
2557
2557
|
}
|
|
2558
2558
|
i.closePath(), i.fill();
|
|
2559
2559
|
}
|
|
2560
|
-
function
|
|
2560
|
+
function Ta(i, n) {
|
|
2561
2561
|
const e = n / 2, t = n * 0.55;
|
|
2562
2562
|
i.beginPath(), i.arc(e, t, n * 0.2, 0, Math.PI * 2), i.fill(), i.beginPath(), i.arc(e - n * 0.18, t + n * 0.02, n * 0.15, 0, Math.PI * 2), i.fill(), i.beginPath(), i.arc(e + n * 0.18, t + n * 0.02, n * 0.16, 0, Math.PI * 2), i.fill(), i.beginPath(), i.arc(e - n * 0.06, t - n * 0.14, n * 0.14, 0, Math.PI * 2), i.fill(), i.beginPath(), i.arc(e + n * 0.1, t - n * 0.12, n * 0.12, 0, Math.PI * 2), i.fill();
|
|
2563
2563
|
}
|
|
2564
|
-
const
|
|
2564
|
+
const _a = [
|
|
2565
2565
|
// Geometric
|
|
2566
|
-
{ id: "circle", name: "Circle", description: "Perfect circle", imageUrl: "builtin-mask:circle", thumbnailUrl: "", category: "geometric", draw:
|
|
2567
|
-
{ id: "star", name: "Star", description: "5-pointed star", imageUrl: "builtin-mask:star", thumbnailUrl: "", category: "geometric", draw:
|
|
2568
|
-
{ id: "heart", name: "Heart", description: "Heart shape", imageUrl: "builtin-mask:heart", thumbnailUrl: "", category: "geometric", draw:
|
|
2569
|
-
{ id: "diamond", name: "Diamond", description: "Diamond/rhombus", imageUrl: "builtin-mask:diamond", thumbnailUrl: "", category: "geometric", draw:
|
|
2570
|
-
{ id: "hexagon", name: "Hexagon", description: "Regular hexagon", imageUrl: "builtin-mask:hexagon", thumbnailUrl: "", category: "geometric", draw:
|
|
2571
|
-
{ id: "shield", name: "Shield", description: "Shield/crest shape", imageUrl: "builtin-mask:shield", thumbnailUrl: "", category: "geometric", draw:
|
|
2566
|
+
{ id: "circle", name: "Circle", description: "Perfect circle", imageUrl: "builtin-mask:circle", thumbnailUrl: "", category: "geometric", draw: ma },
|
|
2567
|
+
{ id: "star", name: "Star", description: "5-pointed star", imageUrl: "builtin-mask:star", thumbnailUrl: "", category: "geometric", draw: ya },
|
|
2568
|
+
{ id: "heart", name: "Heart", description: "Heart shape", imageUrl: "builtin-mask:heart", thumbnailUrl: "", category: "geometric", draw: xa },
|
|
2569
|
+
{ id: "diamond", name: "Diamond", description: "Diamond/rhombus", imageUrl: "builtin-mask:diamond", thumbnailUrl: "", category: "geometric", draw: $a },
|
|
2570
|
+
{ id: "hexagon", name: "Hexagon", description: "Regular hexagon", imageUrl: "builtin-mask:hexagon", thumbnailUrl: "", category: "geometric", draw: va },
|
|
2571
|
+
{ id: "shield", name: "Shield", description: "Shield/crest shape", imageUrl: "builtin-mask:shield", thumbnailUrl: "", category: "geometric", draw: wa },
|
|
2572
2572
|
// Organic
|
|
2573
|
-
{ id: "splatter", name: "Splatter", description: "Ink splatter", imageUrl: "builtin-mask:splatter", thumbnailUrl: "", category: "organic", draw:
|
|
2574
|
-
{ id: "torn-edge", name: "Torn Edge", description: "Rough torn paper edge", imageUrl: "builtin-mask:torn-edge", thumbnailUrl: "", category: "organic", draw:
|
|
2575
|
-
{ id: "paint-stroke", name: "Paint Stroke", description: "Horizontal brush stroke", imageUrl: "builtin-mask:paint-stroke", thumbnailUrl: "", category: "organic", draw:
|
|
2576
|
-
{ id: "cloud", name: "Cloud", description: "Soft cloud shape", imageUrl: "builtin-mask:cloud", thumbnailUrl: "", category: "organic", draw:
|
|
2573
|
+
{ id: "splatter", name: "Splatter", description: "Ink splatter", imageUrl: "builtin-mask:splatter", thumbnailUrl: "", category: "organic", draw: Sa },
|
|
2574
|
+
{ id: "torn-edge", name: "Torn Edge", description: "Rough torn paper edge", imageUrl: "builtin-mask:torn-edge", thumbnailUrl: "", category: "organic", draw: Ca },
|
|
2575
|
+
{ id: "paint-stroke", name: "Paint Stroke", description: "Horizontal brush stroke", imageUrl: "builtin-mask:paint-stroke", thumbnailUrl: "", category: "organic", draw: ka },
|
|
2576
|
+
{ id: "cloud", name: "Cloud", description: "Soft cloud shape", imageUrl: "builtin-mask:cloud", thumbnailUrl: "", category: "organic", draw: Ta }
|
|
2577
2577
|
];
|
|
2578
|
-
let
|
|
2579
|
-
function
|
|
2578
|
+
let Me = !1;
|
|
2579
|
+
function Oe(i, n) {
|
|
2580
2580
|
if (typeof document > "u") return null;
|
|
2581
2581
|
const e = document.createElement("canvas");
|
|
2582
2582
|
return e.width = i, e.height = n, e;
|
|
2583
2583
|
}
|
|
2584
|
-
function
|
|
2585
|
-
if (typeof document > "u" ||
|
|
2586
|
-
|
|
2587
|
-
const i =
|
|
2588
|
-
for (const n of
|
|
2589
|
-
const e =
|
|
2584
|
+
function Ea() {
|
|
2585
|
+
if (typeof document > "u" || Me) return;
|
|
2586
|
+
Me = !0;
|
|
2587
|
+
const i = ee.getInstance();
|
|
2588
|
+
for (const n of _a) {
|
|
2589
|
+
const e = Oe(de, de);
|
|
2590
2590
|
if (!e) continue;
|
|
2591
2591
|
const t = e.getContext("2d");
|
|
2592
2592
|
if (!t) continue;
|
|
2593
|
-
t.fillStyle = "white", n.draw(t,
|
|
2593
|
+
t.fillStyle = "white", n.draw(t, de);
|
|
2594
2594
|
const a = e.toDataURL("image/png"), r = i.acquire(n.imageUrl);
|
|
2595
2595
|
r.crossOrigin = "anonymous", r.src = a;
|
|
2596
|
-
const s =
|
|
2596
|
+
const s = Oe(Fn, Fn);
|
|
2597
2597
|
if (s) {
|
|
2598
2598
|
const o = s.getContext("2d");
|
|
2599
|
-
o && (o.fillStyle = "#1a1a2e", o.fillRect(0, 0,
|
|
2599
|
+
o && (o.fillStyle = "#1a1a2e", o.fillRect(0, 0, Fn, Fn), o.fillStyle = "white", n.draw(o, Fn), n.thumbnailUrl = s.toDataURL("image/png"));
|
|
2600
2600
|
}
|
|
2601
2601
|
}
|
|
2602
2602
|
}
|
|
2603
|
-
const
|
|
2604
|
-
function
|
|
2603
|
+
const Aa = mn("MaskRenderer"), ge = /* @__PURE__ */ new Map(), Pa = /* @__PURE__ */ new Map();
|
|
2604
|
+
function hr(i) {
|
|
2605
2605
|
const n = [];
|
|
2606
|
-
|
|
2606
|
+
ge.forEach((e, t) => {
|
|
2607
2607
|
t.startsWith(i) && n.push(t);
|
|
2608
|
-
}), n.forEach((e) =>
|
|
2608
|
+
}), n.forEach((e) => ge.delete(e));
|
|
2609
2609
|
}
|
|
2610
|
-
function
|
|
2611
|
-
|
|
2610
|
+
function pr() {
|
|
2611
|
+
ge.clear();
|
|
2612
2612
|
}
|
|
2613
|
-
function
|
|
2613
|
+
function An(i, n, e) {
|
|
2614
2614
|
if (!n.masks || n.masks.length === 0) {
|
|
2615
2615
|
e(i);
|
|
2616
2616
|
return;
|
|
2617
2617
|
}
|
|
2618
|
-
const t = i.canvas, a =
|
|
2618
|
+
const t = i.canvas, a = Yn(t.width, t.height), r = a.getContext("2d");
|
|
2619
2619
|
if (!r) {
|
|
2620
|
-
|
|
2620
|
+
Aa.error("[renderWithMasks] Failed to get offscreen context");
|
|
2621
2621
|
return;
|
|
2622
2622
|
}
|
|
2623
2623
|
const s = i.getTransform();
|
|
2624
2624
|
r.setTransform(s), e(r);
|
|
2625
2625
|
for (const o of n.masks)
|
|
2626
|
-
|
|
2626
|
+
Ia(r, o, n);
|
|
2627
2627
|
i.save(), i.setTransform(1, 0, 0, 1, 0, 0), i.drawImage(a, 0, 0), i.restore();
|
|
2628
2628
|
}
|
|
2629
|
-
function
|
|
2629
|
+
function Ia(i, n, e) {
|
|
2630
2630
|
switch (n.type) {
|
|
2631
2631
|
case "clip":
|
|
2632
|
-
|
|
2632
|
+
Da(i, n, e);
|
|
2633
2633
|
break;
|
|
2634
2634
|
case "alpha":
|
|
2635
|
-
|
|
2635
|
+
Ra(i, n, e);
|
|
2636
2636
|
break;
|
|
2637
2637
|
case "luma":
|
|
2638
|
-
|
|
2638
|
+
Fa(i, n, e);
|
|
2639
2639
|
break;
|
|
2640
2640
|
case "distress":
|
|
2641
|
-
|
|
2641
|
+
Ma(i, n, e);
|
|
2642
2642
|
break;
|
|
2643
2643
|
}
|
|
2644
2644
|
}
|
|
2645
|
-
function
|
|
2646
|
-
i.save(), i.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (i.globalAlpha = n.opacity),
|
|
2645
|
+
function Da(i, n, e) {
|
|
2646
|
+
i.save(), i.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (i.globalAlpha = n.opacity), te(i, n.maskElement, e), i.restore();
|
|
2647
2647
|
}
|
|
2648
|
-
function
|
|
2649
|
-
i.save(), i.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (i.globalAlpha = n.opacity),
|
|
2648
|
+
function Ra(i, n, e) {
|
|
2649
|
+
i.save(), i.globalCompositeOperation = n.inverted ? "destination-out" : "destination-in", n.opacity !== void 0 && (i.globalAlpha = n.opacity), te(i, n.maskElement, e), n.feather && n.feather > 0 && ot(i, n.feather), i.restore();
|
|
2650
2650
|
}
|
|
2651
|
-
function
|
|
2652
|
-
const t =
|
|
2651
|
+
function Fa(i, n, e) {
|
|
2652
|
+
const t = Yn(i.canvas.width, i.canvas.height), a = t.getContext("2d");
|
|
2653
2653
|
if (!a) return;
|
|
2654
|
-
|
|
2654
|
+
te(a, n.maskElement, e);
|
|
2655
2655
|
const r = a.getImageData(0, 0, t.width, t.height), s = r.data;
|
|
2656
2656
|
for (let o = 0; o < s.length; o += 4) {
|
|
2657
2657
|
const l = s[o], c = s[o + 1], d = s[o + 2], f = 0.299 * l + 0.587 * c + 0.114 * d;
|
|
@@ -2659,10 +2659,10 @@ function Aa(i, n, e) {
|
|
|
2659
2659
|
}
|
|
2660
2660
|
a.putImageData(r, 0, 0), i.save(), i.globalCompositeOperation = "destination-in", n.opacity !== void 0 && (i.globalAlpha = n.opacity), i.drawImage(t, 0, 0), i.restore();
|
|
2661
2661
|
}
|
|
2662
|
-
function
|
|
2663
|
-
i.save(), i.globalCompositeOperation = n.inverted ? "destination-in" : "destination-out", n.opacity !== void 0 && (i.globalAlpha = n.opacity),
|
|
2662
|
+
function Ma(i, n, e) {
|
|
2663
|
+
i.save(), i.globalCompositeOperation = n.inverted ? "destination-in" : "destination-out", n.opacity !== void 0 && (i.globalAlpha = n.opacity), te(i, n.maskElement, e), n.feather && n.feather > 0 && ot(i, n.feather), i.restore();
|
|
2664
2664
|
}
|
|
2665
|
-
function
|
|
2665
|
+
function te(i, n, e) {
|
|
2666
2666
|
const t = e.x || 0, a = e.y || 0, r = n.x || 0, s = n.y || 0, o = {
|
|
2667
2667
|
...n,
|
|
2668
2668
|
x: t + r,
|
|
@@ -2680,18 +2680,18 @@ function ne(i, n, e) {
|
|
|
2680
2680
|
const x = n;
|
|
2681
2681
|
if (x.imageUrl)
|
|
2682
2682
|
if (typeof document < "u") {
|
|
2683
|
-
x.imageUrl.startsWith("builtin-mask:") &&
|
|
2684
|
-
const w =
|
|
2683
|
+
x.imageUrl.startsWith("builtin-mask:") && Ea();
|
|
2684
|
+
const w = ee.getInstance(), v = w.acquire(x.imageUrl);
|
|
2685
2685
|
v.complete && v.naturalWidth > 0 && (g = v), w.release(x.imageUrl);
|
|
2686
2686
|
} else
|
|
2687
|
-
m =
|
|
2687
|
+
m = Pa.get(x.imageUrl);
|
|
2688
2688
|
}
|
|
2689
2689
|
const p = o.transformData, y = (u == null ? void 0 : u.width) || 0, b = (u == null ? void 0 : u.height) || 0, $ = y > 0 && b > 0 && f > 0 && h > 0 && Math.abs(y / b - f / h) > 1e-3;
|
|
2690
2690
|
if (m) {
|
|
2691
2691
|
i.save();
|
|
2692
2692
|
const x = (p == null ? void 0 : p.width) || m.width, w = (p == null ? void 0 : p.height) || m.height;
|
|
2693
2693
|
if (i.translate(o.x || 0, o.y || 0), i.rotate(-(o.rotation || 0) * Math.PI / 180), $) {
|
|
2694
|
-
const v =
|
|
2694
|
+
const v = Fe(
|
|
2695
2695
|
x,
|
|
2696
2696
|
w,
|
|
2697
2697
|
y,
|
|
@@ -2703,7 +2703,7 @@ function ne(i, n, e) {
|
|
|
2703
2703
|
i.drawImage(m, -x / 2, -w / 2, x, w);
|
|
2704
2704
|
i.restore();
|
|
2705
2705
|
} else if ($ && g) {
|
|
2706
|
-
const x = (p == null ? void 0 : p.width) || f, w = (p == null ? void 0 : p.height) || h, v =
|
|
2706
|
+
const x = (p == null ? void 0 : p.width) || f, w = (p == null ? void 0 : p.height) || h, v = Fe(
|
|
2707
2707
|
x,
|
|
2708
2708
|
w,
|
|
2709
2709
|
y,
|
|
@@ -2712,12 +2712,12 @@ function ne(i, n, e) {
|
|
|
2712
2712
|
);
|
|
2713
2713
|
i.save(), i.translate(o.x || 0, o.y || 0), i.rotate(-(o.rotation || 0) * Math.PI / 180), i.drawImage(g, -v.width / 2, -v.height / 2, v.width, v.height), i.restore();
|
|
2714
2714
|
} else
|
|
2715
|
-
|
|
2715
|
+
we(i, o, { mode: "both", loadedImage: g });
|
|
2716
2716
|
}
|
|
2717
|
-
function
|
|
2717
|
+
function ot(i, n) {
|
|
2718
2718
|
"filter" in i && (i.filter = `blur(${n}px)`);
|
|
2719
2719
|
}
|
|
2720
|
-
function
|
|
2720
|
+
function Yn(i, n) {
|
|
2721
2721
|
if (typeof OffscreenCanvas < "u")
|
|
2722
2722
|
return new OffscreenCanvas(i, n);
|
|
2723
2723
|
if (typeof document < "u") {
|
|
@@ -2726,9 +2726,9 @@ function qn(i, n) {
|
|
|
2726
2726
|
}
|
|
2727
2727
|
throw new Error("No canvas context available");
|
|
2728
2728
|
}
|
|
2729
|
-
function
|
|
2729
|
+
function lt(i, n, e, t) {
|
|
2730
2730
|
if (!n.enabled || !n.imageUrl || n.opacity <= 0) return;
|
|
2731
|
-
const a =
|
|
2731
|
+
const a = ee.getInstance(), r = a.acquire(n.imageUrl);
|
|
2732
2732
|
if (!r.complete || r.naturalWidth === 0) {
|
|
2733
2733
|
a.release(n.imageUrl);
|
|
2734
2734
|
return;
|
|
@@ -2738,7 +2738,7 @@ function tt(i, n, e, t) {
|
|
|
2738
2738
|
a.release(n.imageUrl);
|
|
2739
2739
|
return;
|
|
2740
2740
|
}
|
|
2741
|
-
const y =
|
|
2741
|
+
const y = Yn(m, p), b = y.getContext("2d");
|
|
2742
2742
|
if (!b) {
|
|
2743
2743
|
a.release(n.imageUrl);
|
|
2744
2744
|
return;
|
|
@@ -2756,7 +2756,7 @@ function tt(i, n, e, t) {
|
|
|
2756
2756
|
);
|
|
2757
2757
|
let $;
|
|
2758
2758
|
if (n.maskType === "luma" ? $ = "destination-in" : $ = n.inverted ? "destination-out" : "destination-in", n.maskType === "luma") {
|
|
2759
|
-
const x =
|
|
2759
|
+
const x = Yn(m, p), w = x.getContext("2d");
|
|
2760
2760
|
if (w) {
|
|
2761
2761
|
w.drawImage(r, 0, 0, m, p);
|
|
2762
2762
|
const v = w.getImageData(0, 0, m, p), S = v.data;
|
|
@@ -2770,7 +2770,7 @@ function tt(i, n, e, t) {
|
|
|
2770
2770
|
b.globalCompositeOperation = $, b.globalAlpha = n.opacity / 100, b.drawImage(r, 0, 0, m, p);
|
|
2771
2771
|
b.globalCompositeOperation = "source-over", b.globalAlpha = 1, i.save(), i.setTransform(1, 0, 0, 1, 0, 0), i.clearRect(f, h, u, g), t && (i.fillStyle = t, i.fillRect(f, h, u, g)), i.drawImage(y, f, h), i.restore(), a.release(n.imageUrl);
|
|
2772
2772
|
}
|
|
2773
|
-
class
|
|
2773
|
+
class Oa {
|
|
2774
2774
|
constructor(n = Math.random()) {
|
|
2775
2775
|
this.perm = [];
|
|
2776
2776
|
for (let t = 0; t < 256; t++)
|
|
@@ -2808,8 +2808,8 @@ class Ia {
|
|
|
2808
2808
|
);
|
|
2809
2809
|
}
|
|
2810
2810
|
}
|
|
2811
|
-
function
|
|
2812
|
-
const s =
|
|
2811
|
+
function fe(i, n, e, t = Date.now()) {
|
|
2812
|
+
const s = ae(i, n).getContext("2d").createImageData(i, n), o = s.data, l = new Oa(t), c = 0.02, d = 1 - e / 100;
|
|
2813
2813
|
for (let f = 0; f < n; f++)
|
|
2814
2814
|
for (let h = 0; h < i; h++) {
|
|
2815
2815
|
const u = (f * i + h) * 4;
|
|
@@ -2822,30 +2822,30 @@ function ce(i, n, e, t = Date.now()) {
|
|
|
2822
2822
|
}
|
|
2823
2823
|
return s;
|
|
2824
2824
|
}
|
|
2825
|
-
function
|
|
2826
|
-
const r =
|
|
2825
|
+
function Ba(i, n, e, t = Date.now()) {
|
|
2826
|
+
const r = ae(i, n).getContext("2d");
|
|
2827
2827
|
r.clearRect(0, 0, i, n), r.strokeStyle = "#000000", r.lineWidth = 1 + e / 50, r.lineCap = "round";
|
|
2828
|
-
const s =
|
|
2828
|
+
const s = Se(t), o = Math.floor(e / 100 * 30 + 5);
|
|
2829
2829
|
for (let l = 0; l < o; l++) {
|
|
2830
2830
|
const c = s() * i, d = s() * n;
|
|
2831
|
-
|
|
2831
|
+
be(r, c, d, s() * Math.PI * 2, 50 + s() * 100, s, 0);
|
|
2832
2832
|
}
|
|
2833
2833
|
return r.getImageData(0, 0, i, n);
|
|
2834
2834
|
}
|
|
2835
|
-
function
|
|
2835
|
+
function be(i, n, e, t, a, r, s) {
|
|
2836
2836
|
if (s > 3 || a < 10) return;
|
|
2837
2837
|
const o = n + Math.cos(t) * a, l = e + Math.sin(t) * a;
|
|
2838
2838
|
if (i.beginPath(), i.moveTo(n, e), i.lineTo(o, l), i.stroke(), r() > 0.5) {
|
|
2839
2839
|
const c = t + (r() - 0.5) * Math.PI / 2;
|
|
2840
|
-
|
|
2840
|
+
be(i, o, l, c, a * 0.6, r, s + 1);
|
|
2841
2841
|
}
|
|
2842
2842
|
if (r() > 0.7) {
|
|
2843
2843
|
const c = t - (r() - 0.5) * Math.PI / 2;
|
|
2844
|
-
|
|
2844
|
+
be(i, o, l, c, a * 0.6, r, s + 1);
|
|
2845
2845
|
}
|
|
2846
2846
|
}
|
|
2847
|
-
function
|
|
2848
|
-
const s =
|
|
2847
|
+
function jn(i, n, e, t = Date.now()) {
|
|
2848
|
+
const s = ae(i, n).getContext("2d").createImageData(i, n), o = s.data, l = Se(t), c = e / 100 * 0.5;
|
|
2849
2849
|
for (let d = 0; d < n; d++)
|
|
2850
2850
|
for (let f = 0; f < i; f++) {
|
|
2851
2851
|
const h = (d * i + f) * 4, g = l() < c ? 255 : 0;
|
|
@@ -2853,10 +2853,10 @@ function Vn(i, n, e, t = Date.now()) {
|
|
|
2853
2853
|
}
|
|
2854
2854
|
return s;
|
|
2855
2855
|
}
|
|
2856
|
-
function
|
|
2857
|
-
const r =
|
|
2856
|
+
function La(i, n, e, t = Date.now()) {
|
|
2857
|
+
const r = ae(i, n).getContext("2d");
|
|
2858
2858
|
r.fillStyle = "#000000";
|
|
2859
|
-
const s =
|
|
2859
|
+
const s = Se(t), o = 4 + e / 100 * 6, l = o * 2;
|
|
2860
2860
|
for (let c = 0; c < n; c += l)
|
|
2861
2861
|
for (let d = 0; d < i; d += l)
|
|
2862
2862
|
if (s() < e / 100) {
|
|
@@ -2865,7 +2865,7 @@ function Ra(i, n, e, t = Date.now()) {
|
|
|
2865
2865
|
}
|
|
2866
2866
|
return r.getImageData(0, 0, i, n);
|
|
2867
2867
|
}
|
|
2868
|
-
function
|
|
2868
|
+
function ae(i, n) {
|
|
2869
2869
|
if (typeof OffscreenCanvas < "u")
|
|
2870
2870
|
return new OffscreenCanvas(i, n);
|
|
2871
2871
|
if (typeof document < "u") {
|
|
@@ -2874,31 +2874,31 @@ function ee(i, n) {
|
|
|
2874
2874
|
}
|
|
2875
2875
|
throw new Error("No canvas context available");
|
|
2876
2876
|
}
|
|
2877
|
-
function
|
|
2877
|
+
function Se(i) {
|
|
2878
2878
|
let n = Math.sin(i++) * 1e4;
|
|
2879
2879
|
return () => (n = Math.sin(i++) * 1e4, n - Math.floor(n));
|
|
2880
2880
|
}
|
|
2881
|
-
const
|
|
2882
|
-
function
|
|
2881
|
+
const ln = 42, Tn = 512, _n = 64;
|
|
2882
|
+
function me(i) {
|
|
2883
2883
|
const n = i.data;
|
|
2884
2884
|
for (let e = 0; e < n.length; e += 4)
|
|
2885
2885
|
n[e] = 255, n[e + 1] = 255, n[e + 2] = 255;
|
|
2886
2886
|
return i;
|
|
2887
2887
|
}
|
|
2888
|
-
function
|
|
2888
|
+
function Na(i, n) {
|
|
2889
2889
|
const e = i.data, t = n.data;
|
|
2890
2890
|
for (let a = 0; a < e.length; a += 4)
|
|
2891
2891
|
e[a] = 255, e[a + 1] = 255, e[a + 2] = 255, e[a + 3] = Math.min(255, e[a + 3] + t[a + 3]);
|
|
2892
2892
|
return i;
|
|
2893
2893
|
}
|
|
2894
|
-
const
|
|
2894
|
+
const Ua = [
|
|
2895
2895
|
{
|
|
2896
2896
|
id: "grunge-heavy",
|
|
2897
2897
|
name: "Heavy Grunge",
|
|
2898
2898
|
textureUrl: "builtin:grunge-heavy",
|
|
2899
2899
|
thumbnailUrl: "",
|
|
2900
2900
|
description: "Dense random splatters",
|
|
2901
|
-
generate: (i, n) =>
|
|
2901
|
+
generate: (i, n) => jn(i, n, 80, ln)
|
|
2902
2902
|
},
|
|
2903
2903
|
{
|
|
2904
2904
|
id: "grunge-fine",
|
|
@@ -2906,7 +2906,7 @@ const Ma = [
|
|
|
2906
2906
|
textureUrl: "builtin:grunge-fine",
|
|
2907
2907
|
thumbnailUrl: "",
|
|
2908
2908
|
description: "Sparse fine grain",
|
|
2909
|
-
generate: (i, n) =>
|
|
2909
|
+
generate: (i, n) => jn(i, n, 25, ln + 1)
|
|
2910
2910
|
},
|
|
2911
2911
|
{
|
|
2912
2912
|
id: "concrete",
|
|
@@ -2914,7 +2914,7 @@ const Ma = [
|
|
|
2914
2914
|
textureUrl: "builtin:concrete",
|
|
2915
2915
|
thumbnailUrl: "",
|
|
2916
2916
|
description: "Rough surface via Perlin noise",
|
|
2917
|
-
generate: (i, n) =>
|
|
2917
|
+
generate: (i, n) => fe(i, n, 55, ln + 2)
|
|
2918
2918
|
},
|
|
2919
2919
|
{
|
|
2920
2920
|
id: "paper",
|
|
@@ -2922,7 +2922,7 @@ const Ma = [
|
|
|
2922
2922
|
textureUrl: "builtin:paper",
|
|
2923
2923
|
thumbnailUrl: "",
|
|
2924
2924
|
description: "Subtle aging",
|
|
2925
|
-
generate: (i, n) =>
|
|
2925
|
+
generate: (i, n) => fe(i, n, 20, ln + 3)
|
|
2926
2926
|
},
|
|
2927
2927
|
{
|
|
2928
2928
|
id: "rust",
|
|
@@ -2931,8 +2931,8 @@ const Ma = [
|
|
|
2931
2931
|
thumbnailUrl: "",
|
|
2932
2932
|
description: "Noise + splatter combined",
|
|
2933
2933
|
generate: (i, n) => {
|
|
2934
|
-
const e =
|
|
2935
|
-
return
|
|
2934
|
+
const e = fe(i, n, 45, ln + 4), t = jn(i, n, 35, ln + 5);
|
|
2935
|
+
return Na(me(e), me(t));
|
|
2936
2936
|
}
|
|
2937
2937
|
},
|
|
2938
2938
|
{
|
|
@@ -2941,7 +2941,7 @@ const Ma = [
|
|
|
2941
2941
|
textureUrl: "builtin:scratches",
|
|
2942
2942
|
thumbnailUrl: "",
|
|
2943
2943
|
description: "Branching crack lines",
|
|
2944
|
-
generate: (i, n) =>
|
|
2944
|
+
generate: (i, n) => Ba(i, n, 55, ln + 6)
|
|
2945
2945
|
},
|
|
2946
2946
|
{
|
|
2947
2947
|
id: "halftone",
|
|
@@ -2949,7 +2949,7 @@ const Ma = [
|
|
|
2949
2949
|
textureUrl: "builtin:halftone",
|
|
2950
2950
|
thumbnailUrl: "",
|
|
2951
2951
|
description: "Dot grid pattern",
|
|
2952
|
-
generate: (i, n) =>
|
|
2952
|
+
generate: (i, n) => La(i, n, 55, ln + 7)
|
|
2953
2953
|
},
|
|
2954
2954
|
{
|
|
2955
2955
|
id: "spray",
|
|
@@ -2957,62 +2957,62 @@ const Ma = [
|
|
|
2957
2957
|
textureUrl: "builtin:spray",
|
|
2958
2958
|
thumbnailUrl: "",
|
|
2959
2959
|
description: "Medium random splatter",
|
|
2960
|
-
generate: (i, n) =>
|
|
2960
|
+
generate: (i, n) => jn(i, n, 55, ln + 8)
|
|
2961
2961
|
}
|
|
2962
2962
|
];
|
|
2963
|
-
let
|
|
2964
|
-
function
|
|
2963
|
+
let Be = !1;
|
|
2964
|
+
function za(i, n) {
|
|
2965
2965
|
if (typeof OffscreenCanvas < "u")
|
|
2966
2966
|
return new OffscreenCanvas(i, n);
|
|
2967
2967
|
const e = document.createElement("canvas");
|
|
2968
2968
|
return e.width = i, e.height = n, e;
|
|
2969
2969
|
}
|
|
2970
|
-
function
|
|
2970
|
+
function Le(i, n) {
|
|
2971
2971
|
if (typeof document > "u") return null;
|
|
2972
2972
|
const e = document.createElement("canvas");
|
|
2973
2973
|
return e.width = i, e.height = n, e;
|
|
2974
2974
|
}
|
|
2975
|
-
function
|
|
2976
|
-
const n =
|
|
2975
|
+
function Wa(i) {
|
|
2976
|
+
const n = Le(i.width, i.height);
|
|
2977
2977
|
if (!n) return "";
|
|
2978
2978
|
const e = n.getContext("2d");
|
|
2979
2979
|
if (!e) return "";
|
|
2980
2980
|
e.putImageData(i, 0, 0);
|
|
2981
|
-
const t =
|
|
2981
|
+
const t = Le(_n, _n);
|
|
2982
2982
|
if (!t) return "";
|
|
2983
2983
|
const a = t.getContext("2d");
|
|
2984
2984
|
if (!a) return "";
|
|
2985
|
-
a.drawImage(n, 0, 0, i.width, i.height, 0, 0,
|
|
2986
|
-
const r = a.getImageData(0, 0,
|
|
2985
|
+
a.drawImage(n, 0, 0, i.width, i.height, 0, 0, _n, _n);
|
|
2986
|
+
const r = a.getImageData(0, 0, _n, _n), s = r.data;
|
|
2987
2987
|
for (let o = 0; o < s.length; o += 4) {
|
|
2988
2988
|
const l = s[o + 3], c = 255 - Math.round(l / 255 * 195);
|
|
2989
2989
|
s[o] = c, s[o + 1] = c, s[o + 2] = c, s[o + 3] = 255;
|
|
2990
2990
|
}
|
|
2991
2991
|
return a.putImageData(r, 0, 0), t.toDataURL("image/png");
|
|
2992
2992
|
}
|
|
2993
|
-
function
|
|
2994
|
-
if (!
|
|
2995
|
-
|
|
2996
|
-
for (const i of
|
|
2997
|
-
const n = i.generate(
|
|
2998
|
-
|
|
2999
|
-
const e =
|
|
3000
|
-
t && (t.putImageData(n, 0, 0),
|
|
2993
|
+
function Ha() {
|
|
2994
|
+
if (!Be) {
|
|
2995
|
+
Be = !0;
|
|
2996
|
+
for (const i of Ua) {
|
|
2997
|
+
const n = i.generate(Tn, Tn);
|
|
2998
|
+
me(n);
|
|
2999
|
+
const e = za(Tn, Tn), t = e.getContext("2d");
|
|
3000
|
+
t && (t.putImageData(n, 0, 0), Ga(i.textureUrl, e, Tn, Tn)), typeof document < "u" && (i.thumbnailUrl = Wa(n));
|
|
3001
3001
|
}
|
|
3002
3002
|
}
|
|
3003
3003
|
}
|
|
3004
|
-
const gn = /* @__PURE__ */ new Set(), bn = /* @__PURE__ */ new Map(),
|
|
3005
|
-
function
|
|
3004
|
+
const gn = /* @__PURE__ */ new Set(), bn = /* @__PURE__ */ new Map(), Kn = /* @__PURE__ */ new Map();
|
|
3005
|
+
function Ne(i, n) {
|
|
3006
3006
|
if (typeof OffscreenCanvas < "u")
|
|
3007
3007
|
return new OffscreenCanvas(i, n);
|
|
3008
3008
|
const e = document.createElement("canvas");
|
|
3009
3009
|
return e.width = i, e.height = n, e;
|
|
3010
3010
|
}
|
|
3011
|
-
function
|
|
3011
|
+
function Ue(i) {
|
|
3012
3012
|
return i.getContext("2d");
|
|
3013
3013
|
}
|
|
3014
|
-
function
|
|
3015
|
-
const { width: n, height: e } = i, t =
|
|
3014
|
+
function ze(i) {
|
|
3015
|
+
const { width: n, height: e } = i, t = Ne(n, e), a = Ue(t);
|
|
3016
3016
|
if (!a) throw new Error("Failed to get 2d context for temp canvas");
|
|
3017
3017
|
a.drawImage(i, 0, 0);
|
|
3018
3018
|
const r = a.getImageData(0, 0, n, e), s = r.data;
|
|
@@ -3020,67 +3020,67 @@ function Be(i) {
|
|
|
3020
3020
|
const d = s[c], f = s[c + 1], h = s[c + 2], g = 255 - (0.299 * d + 0.587 * f + 0.114 * h);
|
|
3021
3021
|
s[c] = 255, s[c + 1] = 255, s[c + 2] = 255, s[c + 3] = g;
|
|
3022
3022
|
}
|
|
3023
|
-
const o =
|
|
3023
|
+
const o = Ne(n, e), l = Ue(o);
|
|
3024
3024
|
if (!l) throw new Error("Failed to get 2d context for mask canvas");
|
|
3025
3025
|
return l.putImageData(r, 0, 0), { alphaMask: o, width: n, height: e };
|
|
3026
3026
|
}
|
|
3027
|
-
function
|
|
3027
|
+
function ct(i) {
|
|
3028
3028
|
const n = bn.get(i);
|
|
3029
3029
|
if (n) return n;
|
|
3030
3030
|
if (i.startsWith("builtin:")) {
|
|
3031
|
-
|
|
3031
|
+
Ha();
|
|
3032
3032
|
const e = bn.get(i);
|
|
3033
3033
|
return e || null;
|
|
3034
3034
|
}
|
|
3035
|
-
return gn.has(i) || (gn.add(i),
|
|
3035
|
+
return gn.has(i) || (gn.add(i), dt(i)), null;
|
|
3036
3036
|
}
|
|
3037
|
-
function
|
|
3037
|
+
function gr(i) {
|
|
3038
3038
|
return bn.has(i) ? Promise.resolve() : new Promise((n) => {
|
|
3039
3039
|
if (bn.has(i)) {
|
|
3040
3040
|
n();
|
|
3041
3041
|
return;
|
|
3042
3042
|
}
|
|
3043
|
-
const e =
|
|
3044
|
-
e.push(n),
|
|
3043
|
+
const e = Kn.get(i) || [];
|
|
3044
|
+
e.push(n), Kn.set(i, e), gn.has(i) || (gn.add(i), dt(i));
|
|
3045
3045
|
});
|
|
3046
3046
|
}
|
|
3047
|
-
function
|
|
3048
|
-
bn.has(i) || (bn.set(i, { alphaMask: n, width: e, height: t }),
|
|
3047
|
+
function Ga(i, n, e, t) {
|
|
3048
|
+
bn.has(i) || (bn.set(i, { alphaMask: n, width: e, height: t }), On(i));
|
|
3049
3049
|
}
|
|
3050
|
-
function
|
|
3051
|
-
const n =
|
|
3052
|
-
n && (n.forEach((e) => e()),
|
|
3050
|
+
function On(i) {
|
|
3051
|
+
const n = Kn.get(i);
|
|
3052
|
+
n && (n.forEach((e) => e()), Kn.delete(i));
|
|
3053
3053
|
}
|
|
3054
|
-
function
|
|
3054
|
+
function dt(i) {
|
|
3055
3055
|
if (typeof document < "u") {
|
|
3056
3056
|
const n = new Image();
|
|
3057
3057
|
n.crossOrigin = "anonymous", n.onload = () => {
|
|
3058
|
-
const e =
|
|
3059
|
-
bn.set(i, e), gn.delete(i),
|
|
3058
|
+
const e = ze(n);
|
|
3059
|
+
bn.set(i, e), gn.delete(i), On(i);
|
|
3060
3060
|
}, n.onerror = () => {
|
|
3061
|
-
gn.delete(i),
|
|
3061
|
+
gn.delete(i), On(i);
|
|
3062
3062
|
}, n.src = i;
|
|
3063
3063
|
} else
|
|
3064
3064
|
fetch(i).then((n) => n.blob()).then((n) => createImageBitmap(n)).then((n) => {
|
|
3065
|
-
const e =
|
|
3066
|
-
bn.set(i, e), gn.delete(i),
|
|
3065
|
+
const e = ze(n);
|
|
3066
|
+
bn.set(i, e), gn.delete(i), On(i);
|
|
3067
3067
|
}).catch(() => {
|
|
3068
|
-
gn.delete(i),
|
|
3068
|
+
gn.delete(i), On(i);
|
|
3069
3069
|
});
|
|
3070
3070
|
}
|
|
3071
|
-
function
|
|
3071
|
+
function ft(i, n) {
|
|
3072
3072
|
if (typeof OffscreenCanvas < "u")
|
|
3073
3073
|
return new OffscreenCanvas(i, n);
|
|
3074
3074
|
const e = document.createElement("canvas");
|
|
3075
3075
|
return e.width = i, e.height = n, e;
|
|
3076
3076
|
}
|
|
3077
|
-
function
|
|
3077
|
+
function ut(i, n, e, t) {
|
|
3078
3078
|
if (!n.enabled || !n.textureUrl || n.intensity <= 0) return;
|
|
3079
|
-
const a =
|
|
3079
|
+
const a = ct(n.textureUrl);
|
|
3080
3080
|
if (!a) return;
|
|
3081
3081
|
const { x: r, y: s, width: o, height: l } = e, c = i.getTransform(), d = c.a * r + c.e, f = c.d * s + c.f, h = c.a * o, u = c.d * l, g = Math.ceil(h), m = Math.ceil(u);
|
|
3082
3082
|
if (g <= 0 || m <= 0) return;
|
|
3083
|
-
const p =
|
|
3083
|
+
const p = ft(g, m), y = p.getContext("2d");
|
|
3084
3084
|
if (!y) return;
|
|
3085
3085
|
y.drawImage(
|
|
3086
3086
|
i.canvas,
|
|
@@ -3099,7 +3099,7 @@ function it(i, n, e, t) {
|
|
|
3099
3099
|
for (let k = 0; k < m; k++) {
|
|
3100
3100
|
const _ = Math.floor(k / m * v);
|
|
3101
3101
|
for (let C = 0; C < g; C++) {
|
|
3102
|
-
const
|
|
3102
|
+
const E = Math.floor(C / g * w), I = x[(_ * w + E) * 4 + 3] / 255, A = (k * g + C) * 4;
|
|
3103
3103
|
T[A + 3] = Math.round(T[A + 3] * (1 - I * $));
|
|
3104
3104
|
}
|
|
3105
3105
|
}
|
|
@@ -3108,9 +3108,9 @@ function it(i, n, e, t) {
|
|
|
3108
3108
|
y.globalCompositeOperation = "destination-out", y.globalAlpha = n.intensity / 100, y.drawImage(a.alphaMask, 0, 0, g, m), y.globalCompositeOperation = "source-over";
|
|
3109
3109
|
y.globalAlpha = 1, i.save(), i.setTransform(1, 0, 0, 1, 0, 0), i.clearRect(d, f, h, u), t && (i.fillStyle = t, i.fillRect(d, f, h, u)), i.drawImage(p, d, f), i.restore();
|
|
3110
3110
|
}
|
|
3111
|
-
function
|
|
3111
|
+
function Jn(i, n, e, t) {
|
|
3112
3112
|
if (!n.enabled || n.style !== "custom" || !n.textureUrl) return;
|
|
3113
|
-
const a =
|
|
3113
|
+
const a = ct(n.textureUrl);
|
|
3114
3114
|
if (!a) {
|
|
3115
3115
|
t(i);
|
|
3116
3116
|
return;
|
|
@@ -3125,7 +3125,7 @@ function Kn(i, n, e, t) {
|
|
|
3125
3125
|
t(i);
|
|
3126
3126
|
return;
|
|
3127
3127
|
}
|
|
3128
|
-
const x =
|
|
3128
|
+
const x = ft(b, $), w = x.getContext("2d");
|
|
3129
3129
|
if (!w) {
|
|
3130
3130
|
t(i);
|
|
3131
3131
|
return;
|
|
@@ -3141,11 +3141,11 @@ function Kn(i, n, e, t) {
|
|
|
3141
3141
|
const v = a.alphaMask.getContext("2d");
|
|
3142
3142
|
if (v) {
|
|
3143
3143
|
const S = v.getImageData(0, 0, a.width, a.height).data, T = a.width, k = a.height, _ = w.getImageData(0, 0, b, $), C = _.data;
|
|
3144
|
-
for (let
|
|
3145
|
-
const I = Math.floor(
|
|
3144
|
+
for (let E = 0; E < $; E++) {
|
|
3145
|
+
const I = Math.floor(E / $ * k);
|
|
3146
3146
|
for (let A = 0; A < b; A++) {
|
|
3147
|
-
const
|
|
3148
|
-
C[
|
|
3147
|
+
const R = Math.floor(A / b * T), z = S[(I * T + R) * 4 + 3] / 255, O = (E * b + A) * 4;
|
|
3148
|
+
C[O + 3] = Math.round(C[O + 3] * (1 - z * r));
|
|
3149
3149
|
}
|
|
3150
3150
|
}
|
|
3151
3151
|
w.putImageData(_, 0, 0);
|
|
@@ -3153,7 +3153,7 @@ function Kn(i, n, e, t) {
|
|
|
3153
3153
|
w.globalCompositeOperation = "destination-out", w.globalAlpha = r, w.drawImage(a.alphaMask, 0, 0, b, $), w.globalCompositeOperation = "source-over", w.globalAlpha = 1;
|
|
3154
3154
|
i.save(), i.setTransform(1, 0, 0, 1, 0, 0), i.drawImage(x, g, m), i.restore();
|
|
3155
3155
|
}
|
|
3156
|
-
class
|
|
3156
|
+
class En {
|
|
3157
3157
|
/**
|
|
3158
3158
|
* Render selection box layer
|
|
3159
3159
|
*/
|
|
@@ -3178,14 +3178,14 @@ class _n {
|
|
|
3178
3178
|
const s = e.getVisualBoundingBox(), o = Math.round(s.width), l = Math.round(s.height), c = `${o} × ${l}`, d = t.rotationHandle, f = d.x * r, h = d.y * r - 20;
|
|
3179
3179
|
n.save(), n.font = "10px system-ui, -apple-system, sans-serif";
|
|
3180
3180
|
const g = n.measureText(c).width + 12, m = 18;
|
|
3181
|
-
n.shadowColor =
|
|
3181
|
+
n.shadowColor = Et(n.canvas), n.shadowBlur = 4, n.shadowOffsetY = 1, n.fillStyle = At(n.canvas), n.beginPath(), n.roundRect(
|
|
3182
3182
|
f - g / 2,
|
|
3183
3183
|
h - m / 2,
|
|
3184
3184
|
g,
|
|
3185
3185
|
m,
|
|
3186
3186
|
3
|
|
3187
3187
|
// Smaller border radius
|
|
3188
|
-
), n.fill(), n.shadowColor = "transparent", n.shadowBlur = 0, n.shadowOffsetY = 0, n.fillStyle =
|
|
3188
|
+
), n.fill(), n.shadowColor = "transparent", n.shadowBlur = 0, n.shadowOffsetY = 0, n.fillStyle = Pt(n.canvas), n.textAlign = "center", n.textBaseline = "middle", n.fillText(c, f, h + 0.5), n.restore();
|
|
3189
3189
|
}
|
|
3190
3190
|
/**
|
|
3191
3191
|
* Render transform handles layer
|
|
@@ -3208,7 +3208,7 @@ class _n {
|
|
|
3208
3208
|
);
|
|
3209
3209
|
}
|
|
3210
3210
|
}
|
|
3211
|
-
class
|
|
3211
|
+
class ye {
|
|
3212
3212
|
/**
|
|
3213
3213
|
* Render hover highlights layer with fade-in animation
|
|
3214
3214
|
* Outlines the actual element shape instead of a rectangular border
|
|
@@ -3223,7 +3223,7 @@ class be {
|
|
|
3223
3223
|
const f = performance.now() - e.startTime;
|
|
3224
3224
|
d = Math.min(f / l, 1) * c;
|
|
3225
3225
|
}
|
|
3226
|
-
n.strokeStyle =
|
|
3226
|
+
n.strokeStyle = It(n.canvas), n.globalAlpha = d, n.lineWidth = 3, this.renderElementOutline(n, o, r, s), n.restore();
|
|
3227
3227
|
}
|
|
3228
3228
|
/**
|
|
3229
3229
|
* Render outline for a specific element type
|
|
@@ -3351,7 +3351,7 @@ class be {
|
|
|
3351
3351
|
*/
|
|
3352
3352
|
static renderHoverRingEffect(n, e, t) {
|
|
3353
3353
|
n.save(), n.translate(e.x * t, e.y * t), t !== 1 && n.scale(t, t);
|
|
3354
|
-
const a = e.fontSize, r = e.fontFamily, s = e.bold || !1, o = e.italic || !1, l = e.textAlign || "center", c =
|
|
3354
|
+
const a = e.fontSize, r = e.fontFamily, s = e.bold || !1, o = e.italic || !1, l = e.textAlign || "center", c = Qe(a, r, s, o), d = a * 1.2, f = 4 / t, h = 4 / t, u = document.createElement("canvas");
|
|
3355
3355
|
u.width = n.canvas.width, u.height = n.canvas.height;
|
|
3356
3356
|
const g = u.getContext("2d");
|
|
3357
3357
|
if (!g) {
|
|
@@ -3361,10 +3361,10 @@ class be {
|
|
|
3361
3361
|
g.setTransform(n.getTransform()), g.textBaseline = "alphabetic", g.lineJoin = "round";
|
|
3362
3362
|
const m = e.getRichText ? e.getRichText() : null;
|
|
3363
3363
|
if (m) {
|
|
3364
|
-
const p =
|
|
3364
|
+
const p = nt(m), y = [], b = [];
|
|
3365
3365
|
p.forEach((w) => {
|
|
3366
3366
|
if (e.transformType === "custom" && e.transformData) {
|
|
3367
|
-
const v = e.transformData.width -
|
|
3367
|
+
const v = e.transformData.width - Xn * 2, S = et(w, v, {
|
|
3368
3368
|
fontSize: a,
|
|
3369
3369
|
fontFamily: r,
|
|
3370
3370
|
bold: s,
|
|
@@ -3386,56 +3386,56 @@ class be {
|
|
|
3386
3386
|
y.length === 0 ? $ = 0 : y.length === 1 ? $ = c.height : $ = (y.length - 1) * d + c.height;
|
|
3387
3387
|
const x = -$ / 2;
|
|
3388
3388
|
y.forEach((w, v) => {
|
|
3389
|
-
var
|
|
3389
|
+
var z, O;
|
|
3390
3390
|
const S = b[v].isParagraphStart, T = b[v].isParagraphEnd;
|
|
3391
3391
|
let k = 0;
|
|
3392
|
-
const _ = w.map((
|
|
3392
|
+
const _ = w.map((P) => P.text).join(""), C = ((z = _.match(/^ +/)) == null ? void 0 : z[0].length) || 0, E = ((O = _.match(/ +$/)) == null ? void 0 : O[0].length) || 0;
|
|
3393
3393
|
let I = 0;
|
|
3394
|
-
w.forEach((
|
|
3395
|
-
const
|
|
3396
|
-
let
|
|
3397
|
-
const
|
|
3398
|
-
if (!S && C > 0 &&
|
|
3399
|
-
const
|
|
3400
|
-
|
|
3401
|
-
}
|
|
3402
|
-
if (!T &&
|
|
3403
|
-
const
|
|
3404
|
-
if (
|
|
3405
|
-
const
|
|
3406
|
-
|
|
3394
|
+
w.forEach((P) => {
|
|
3395
|
+
const W = P.style.fontSize !== void 0 ? P.style.fontSize : a, X = P.style.fontFamily !== void 0 ? P.style.fontFamily : r, q = P.style.bold !== void 0 ? P.style.bold : s, Q = P.style.italic !== void 0 ? P.style.italic : o;
|
|
3396
|
+
let L = P.text;
|
|
3397
|
+
const D = I, F = I + P.text.length;
|
|
3398
|
+
if (!S && C > 0 && D < C) {
|
|
3399
|
+
const B = Math.min(C - D, P.text.length);
|
|
3400
|
+
L = L.substring(B);
|
|
3401
|
+
}
|
|
3402
|
+
if (!T && E > 0) {
|
|
3403
|
+
const B = _.length - E;
|
|
3404
|
+
if (F > B) {
|
|
3405
|
+
const M = !S && D < C ? Math.min(C - D, P.text.length) : 0, U = Math.max(0, B - D - M);
|
|
3406
|
+
L = L.substring(0, U);
|
|
3407
3407
|
}
|
|
3408
3408
|
}
|
|
3409
|
-
|
|
3409
|
+
L.length > 0 && (n.save(), n.font = oe(W, X, q, Q), k += n.measureText(L).width, n.restore()), I += P.text.length;
|
|
3410
3410
|
});
|
|
3411
3411
|
let A = 0;
|
|
3412
3412
|
l === "center" ? A = -k / 2 : l === "right" && (A = -k);
|
|
3413
|
-
const
|
|
3414
|
-
I = 0, w.forEach((
|
|
3415
|
-
const
|
|
3416
|
-
|
|
3417
|
-
const q =
|
|
3418
|
-
let
|
|
3419
|
-
const
|
|
3420
|
-
if (!S && C > 0 &&
|
|
3421
|
-
const
|
|
3422
|
-
|
|
3423
|
-
}
|
|
3424
|
-
if (!T &&
|
|
3425
|
-
const
|
|
3426
|
-
if (
|
|
3427
|
-
const
|
|
3428
|
-
|
|
3413
|
+
const R = x + c.ascent + v * d;
|
|
3414
|
+
I = 0, w.forEach((P) => {
|
|
3415
|
+
const W = P.style.fontSize !== void 0 ? P.style.fontSize : a, X = P.style.fontFamily !== void 0 ? P.style.fontFamily : r;
|
|
3416
|
+
P.style.color !== void 0 ? P.style.color : e.color;
|
|
3417
|
+
const q = P.style.bold !== void 0 ? P.style.bold : s, Q = P.style.italic !== void 0 ? P.style.italic : o;
|
|
3418
|
+
let L = P.text;
|
|
3419
|
+
const D = I, F = I + P.text.length;
|
|
3420
|
+
if (!S && C > 0 && D < C) {
|
|
3421
|
+
const B = Math.min(C - D, P.text.length);
|
|
3422
|
+
L = L.substring(B);
|
|
3423
|
+
}
|
|
3424
|
+
if (!T && E > 0) {
|
|
3425
|
+
const B = _.length - E;
|
|
3426
|
+
if (F > B) {
|
|
3427
|
+
const M = !S && D < C ? Math.min(C - D, P.text.length) : 0, U = Math.max(0, B - D - M);
|
|
3428
|
+
L = L.substring(0, U);
|
|
3429
3429
|
}
|
|
3430
3430
|
}
|
|
3431
|
-
I +=
|
|
3431
|
+
I += P.text.length, L.length > 0 && (g.font = oe(W, X, q, Q), g.textAlign = "left", g.globalCompositeOperation = "source-over", g.strokeStyle = n.strokeStyle, g.globalAlpha = Math.min(n.globalAlpha * 1.6, 0.8), g.lineWidth = (h + f) * 2, g.strokeText(L, A, R), g.globalCompositeOperation = "destination-out", g.globalAlpha = 1, g.lineWidth = h * 2, g.strokeText(L, A, R), g.fillText(L, A, R), A += g.measureText(L).width);
|
|
3432
3432
|
});
|
|
3433
3433
|
});
|
|
3434
3434
|
} else {
|
|
3435
|
-
n.font =
|
|
3435
|
+
n.font = oe(a, r, s, o), g.font = n.font, g.textAlign = l;
|
|
3436
3436
|
let p, y;
|
|
3437
3437
|
if (e.transformType === "custom" && e.transformData) {
|
|
3438
|
-
const x = e.transformData.width -
|
|
3438
|
+
const x = e.transformData.width - Xn * 2, { lines: w } = Dt(
|
|
3439
3439
|
e.text,
|
|
3440
3440
|
x,
|
|
3441
3441
|
a,
|
|
@@ -3451,7 +3451,7 @@ class be {
|
|
|
3451
3451
|
`);
|
|
3452
3452
|
const x = e.text.includes(`
|
|
3453
3453
|
`);
|
|
3454
|
-
p =
|
|
3454
|
+
p = Rt(p, x);
|
|
3455
3455
|
}
|
|
3456
3456
|
p.length === 0 ? y = 0 : p.length === 1 ? y = c.height : y = (p.length - 1) * d + c.height;
|
|
3457
3457
|
const b = -y / 2, $ = e.text.includes(`
|
|
@@ -3542,7 +3542,7 @@ class be {
|
|
|
3542
3542
|
let o = -t.reduce((l, c) => l + c, 0) / 2;
|
|
3543
3543
|
return e.forEach((l, c) => {
|
|
3544
3544
|
const d = t[c], f = o + d / 2, h = f / (a.width / 2), u = a.amplitude * n.fontSize * Math.sin(a.frequency * Math.PI * h), g = a.amplitude * a.frequency * Math.PI * Math.cos(a.frequency * Math.PI * h);
|
|
3545
|
-
r.push({ x: f, y: u, angle: 0, skewY: g *
|
|
3545
|
+
r.push({ x: f, y: u, angle: 0, skewY: g * Ft }), o += d;
|
|
3546
3546
|
}), r;
|
|
3547
3547
|
}
|
|
3548
3548
|
/**
|
|
@@ -3590,7 +3590,7 @@ class be {
|
|
|
3590
3590
|
}), r;
|
|
3591
3591
|
}
|
|
3592
3592
|
}
|
|
3593
|
-
class
|
|
3593
|
+
class Mn {
|
|
3594
3594
|
/**
|
|
3595
3595
|
* Render snap guides layer
|
|
3596
3596
|
*/
|
|
@@ -3604,7 +3604,7 @@ class Fn {
|
|
|
3604
3604
|
*/
|
|
3605
3605
|
static renderSpacingIndicatorsLayer(n, e = []) {
|
|
3606
3606
|
e.length !== 0 && (n.save(), n.setLineDash([]), e.forEach((t) => {
|
|
3607
|
-
const a =
|
|
3607
|
+
const a = Ee(n.canvas);
|
|
3608
3608
|
if (n.strokeStyle = a, n.fillStyle = a, n.lineWidth = sn.canvas.spacingIndicatorWidth, n.beginPath(), t.type === "horizontal") {
|
|
3609
3609
|
const r = t.x1 ?? 0, s = t.x2 ?? 0, o = t.y ?? 0;
|
|
3610
3610
|
n.moveTo(r, o), n.lineTo(s, o), n.stroke();
|
|
@@ -3629,10 +3629,10 @@ class Fn {
|
|
|
3629
3629
|
const r = `${a}`;
|
|
3630
3630
|
n.font = `600 ${sn.canvas.spacingLabelFontSize}px ${sn.canvas.spacingLabelFontFamily}`;
|
|
3631
3631
|
const o = n.measureText(r).width, l = sn.canvas.spacingLabelFontSize, c = 4, d = o + c * 2, f = l + c * 2;
|
|
3632
|
-
n.fillStyle =
|
|
3632
|
+
n.fillStyle = Ee(n.canvas), n.beginPath(), n.roundRect(e - d / 2, t - f / 2, d, f, Mt), n.fill(), n.fillStyle = Ot, n.textAlign = "center", n.textBaseline = "middle", n.fillText(r, e, t);
|
|
3633
3633
|
}
|
|
3634
3634
|
}
|
|
3635
|
-
class
|
|
3635
|
+
class ue {
|
|
3636
3636
|
/**
|
|
3637
3637
|
* Render edit mode features: cursor and text selection highlight
|
|
3638
3638
|
* This renders on the main canvas at world coordinates (same as the element)
|
|
@@ -3646,29 +3646,31 @@ class de {
|
|
|
3646
3646
|
}
|
|
3647
3647
|
const p = r.fontSize || 24, y = r.fontFamily || "Arial", b = r.bold || !1, $ = r.italic || !1, x = r.underline || !1, w = r.strikethrough || !1, v = r.textAlign || "center";
|
|
3648
3648
|
n.save(), n.translate(r.x, r.y), n.rotate(-r.rotation * Math.PI / 180);
|
|
3649
|
-
const S =
|
|
3650
|
-
let _, C;
|
|
3649
|
+
const S = Qe(p, y, b, $), T = S.height, k = p * 1.2;
|
|
3650
|
+
let _, C, E;
|
|
3651
3651
|
if (d && r.transformType === "custom" && r.transformData.width) {
|
|
3652
|
-
const
|
|
3653
|
-
|
|
3654
|
-
|
|
3652
|
+
const L = r.transformData.width - Xn * 2;
|
|
3653
|
+
E = L;
|
|
3654
|
+
const D = nt(d);
|
|
3655
|
+
_ = [], C = [], D.forEach((F) => {
|
|
3656
|
+
const B = et(F, L, {
|
|
3655
3657
|
fontSize: r.fontSize,
|
|
3656
3658
|
fontFamily: r.fontFamily,
|
|
3657
3659
|
bold: r.bold,
|
|
3658
3660
|
italic: r.italic
|
|
3659
3661
|
});
|
|
3660
|
-
|
|
3661
|
-
_.push(
|
|
3662
|
-
isParagraphStart:
|
|
3663
|
-
isParagraphEnd:
|
|
3662
|
+
B.forEach((M, U) => {
|
|
3663
|
+
_.push(M), C.push({
|
|
3664
|
+
isParagraphStart: U === 0,
|
|
3665
|
+
isParagraphEnd: U === B.length - 1
|
|
3664
3666
|
});
|
|
3665
3667
|
});
|
|
3666
3668
|
});
|
|
3667
3669
|
} else
|
|
3668
3670
|
_ = c.split(`
|
|
3669
|
-
`).map((
|
|
3671
|
+
`).map((D) => [
|
|
3670
3672
|
{
|
|
3671
|
-
text:
|
|
3673
|
+
text: D,
|
|
3672
3674
|
style: { fontSize: p, fontFamily: y, bold: b, italic: $ }
|
|
3673
3675
|
}
|
|
3674
3676
|
]), C = _.map(() => ({
|
|
@@ -3676,115 +3678,115 @@ class de {
|
|
|
3676
3678
|
// Each line is its own paragraph
|
|
3677
3679
|
isParagraphEnd: !0
|
|
3678
3680
|
}));
|
|
3679
|
-
const
|
|
3680
|
-
let
|
|
3681
|
-
const
|
|
3682
|
-
let
|
|
3683
|
-
_.forEach((
|
|
3684
|
-
var
|
|
3685
|
-
const
|
|
3686
|
-
|
|
3687
|
-
Array.from(
|
|
3688
|
-
let
|
|
3689
|
-
if (d &&
|
|
3690
|
-
const
|
|
3691
|
-
|
|
3681
|
+
const I = _.length > 1 ? S.height + (_.length - 1) * k : S.height;
|
|
3682
|
+
let A = -I / 2, R = 0, z = A, O = T;
|
|
3683
|
+
const P = [];
|
|
3684
|
+
let W = 0;
|
|
3685
|
+
_.forEach((L, D) => {
|
|
3686
|
+
var U, V;
|
|
3687
|
+
const F = C[D].isParagraphStart, B = C[D].isParagraphEnd, M = [];
|
|
3688
|
+
L.forEach((dn) => {
|
|
3689
|
+
Array.from(dn.text).forEach((yn) => {
|
|
3690
|
+
let H = p, on = y, tn = b, J = $;
|
|
3691
|
+
if (d && W < c.length) {
|
|
3692
|
+
const Z = d.getStyleAt(W);
|
|
3693
|
+
H = Z.fontSize || p, on = Z.fontFamily || y, tn = Z.bold !== void 0 ? Z.bold : b, J = Z.italic !== void 0 ? Z.italic : $;
|
|
3692
3694
|
}
|
|
3693
3695
|
n.save();
|
|
3694
|
-
const an = tn ? "bold" : "normal",
|
|
3695
|
-
n.font = `${
|
|
3696
|
-
const
|
|
3697
|
-
n.restore(),
|
|
3696
|
+
const an = tn ? "bold" : "normal", N = J ? "italic" : "normal";
|
|
3697
|
+
n.font = `${N} ${an} ${H}px "${on}", Arial, sans-serif`;
|
|
3698
|
+
const Y = n.measureText(yn).width;
|
|
3699
|
+
n.restore(), M.push({ char: yn, width: Y, fontSize: H, index: W }), W++;
|
|
3698
3700
|
});
|
|
3699
3701
|
});
|
|
3700
3702
|
{
|
|
3701
|
-
const
|
|
3703
|
+
const dn = D === 0, $n = D === _.length - 1, yn = M.map((N) => N.char).join(""), H = ((U = yn.match(/^ +/)) == null ? void 0 : U[0].length) || 0, on = ((V = yn.match(/ +$/)) == null ? void 0 : V[0].length) || 0;
|
|
3702
3704
|
let tn = 0;
|
|
3703
|
-
for (let
|
|
3704
|
-
!
|
|
3705
|
-
let
|
|
3706
|
-
v === "center" ?
|
|
3707
|
-
let an =
|
|
3708
|
-
for (let
|
|
3709
|
-
const
|
|
3710
|
-
|
|
3705
|
+
for (let N = 0; N < M.length; N++)
|
|
3706
|
+
!dn && N < H || !$n && N >= M.length - on || (tn += M[N].width);
|
|
3707
|
+
let J;
|
|
3708
|
+
v === "center" ? J = -tn / 2 : v === "right" ? J = E !== void 0 ? E / 2 - tn : -tn : J = E !== void 0 ? -E / 2 : 0;
|
|
3709
|
+
let an = J;
|
|
3710
|
+
for (let N = 0; N < M.length; N++) {
|
|
3711
|
+
const Y = M[N];
|
|
3712
|
+
P[Y.index] = {
|
|
3711
3713
|
x: an,
|
|
3712
|
-
y:
|
|
3713
|
-
width:
|
|
3714
|
+
y: A,
|
|
3715
|
+
width: Y.width,
|
|
3714
3716
|
// All characters keep their width for cursor navigation
|
|
3715
|
-
height:
|
|
3716
|
-
}, an +=
|
|
3717
|
-
}
|
|
3718
|
-
if (
|
|
3719
|
-
const
|
|
3720
|
-
if (s >=
|
|
3721
|
-
if (s ===
|
|
3722
|
-
|
|
3717
|
+
height: Y.fontSize
|
|
3718
|
+
}, an += Y.width;
|
|
3719
|
+
}
|
|
3720
|
+
if (M.length > 0) {
|
|
3721
|
+
const N = M[0].index, Y = M[M.length - 1].index, xn = D < _.length - 1 && Y + 1 === W ? Y : Y + 1;
|
|
3722
|
+
if (s >= N && s <= xn)
|
|
3723
|
+
if (s === N)
|
|
3724
|
+
R = J, z = A, O = T;
|
|
3723
3725
|
else {
|
|
3724
|
-
let
|
|
3725
|
-
for (let rn = 0; rn <
|
|
3726
|
-
const fn =
|
|
3727
|
-
let
|
|
3728
|
-
if (
|
|
3729
|
-
const
|
|
3730
|
-
|
|
3726
|
+
let wn = 0;
|
|
3727
|
+
for (let rn = 0; rn < M.length && M[rn].index < s; rn++) {
|
|
3728
|
+
const fn = M[rn], Hn = fn.char === " ";
|
|
3729
|
+
let Sn = !0;
|
|
3730
|
+
if (Hn) {
|
|
3731
|
+
const Gn = rn < H, G = rn >= M.length - on, In = !F && H > 0, Dn = !B && on > 0;
|
|
3732
|
+
Sn = !(Gn && In || G && Dn);
|
|
3731
3733
|
}
|
|
3732
|
-
|
|
3734
|
+
Sn && (wn += fn.width);
|
|
3733
3735
|
}
|
|
3734
|
-
|
|
3736
|
+
R = J + wn, z = A, O = T;
|
|
3735
3737
|
}
|
|
3736
3738
|
}
|
|
3737
|
-
|
|
3739
|
+
D < _.length - 1 && (A += k);
|
|
3738
3740
|
}
|
|
3739
3741
|
});
|
|
3740
|
-
const
|
|
3741
|
-
let
|
|
3742
|
-
if (
|
|
3743
|
-
const
|
|
3744
|
-
n.save(), n.fillStyle =
|
|
3745
|
-
let
|
|
3746
|
-
if (_.forEach((
|
|
3747
|
-
var
|
|
3748
|
-
const
|
|
3749
|
-
if (
|
|
3750
|
-
Array.from(
|
|
3751
|
-
const
|
|
3742
|
+
const X = o !== l;
|
|
3743
|
+
let q = null, Q = null;
|
|
3744
|
+
if (X) {
|
|
3745
|
+
const L = Math.min(o, l), D = Math.max(o, l);
|
|
3746
|
+
n.save(), n.fillStyle = Bt(n.canvas);
|
|
3747
|
+
let F = 0, B = -I / 2;
|
|
3748
|
+
if (_.forEach((M, U) => {
|
|
3749
|
+
var on, tn;
|
|
3750
|
+
const V = C[U].isParagraphStart, dn = C[U].isParagraphEnd, $n = U === 0, yn = U === _.length - 1, H = [];
|
|
3751
|
+
if (M.forEach((J) => {
|
|
3752
|
+
Array.from(J.text).forEach((an) => {
|
|
3753
|
+
const N = J.style || {}, Y = N.fontSize !== void 0 ? N.fontSize : p, Z = N.fontFamily !== void 0 ? N.fontFamily : y, vn = N.bold !== void 0 ? N.bold : b, xn = N.italic !== void 0 ? N.italic : $;
|
|
3752
3754
|
n.save();
|
|
3753
|
-
const
|
|
3754
|
-
n.font = `${rn} ${
|
|
3755
|
+
const wn = vn ? "bold" : "normal", rn = xn ? "italic" : "normal";
|
|
3756
|
+
n.font = `${rn} ${wn} ${Y}px "${Z}", Arial, sans-serif`;
|
|
3755
3757
|
const fn = n.measureText(an).width;
|
|
3756
|
-
n.restore(),
|
|
3758
|
+
n.restore(), H.push({ char: an, index: F, width: fn, style: N }), F++;
|
|
3757
3759
|
});
|
|
3758
|
-
}),
|
|
3759
|
-
const
|
|
3760
|
-
if (
|
|
3760
|
+
}), H.length > 0) {
|
|
3761
|
+
const J = H[0].index, an = H[H.length - 1].index;
|
|
3762
|
+
if (D > J && L <= an) {
|
|
3761
3763
|
n.save();
|
|
3762
|
-
const
|
|
3763
|
-
let
|
|
3764
|
-
for (let G = 0; G <
|
|
3765
|
-
|
|
3766
|
-
let
|
|
3767
|
-
v === "center" ?
|
|
3768
|
-
const
|
|
3764
|
+
const N = H.map((G) => G.char).join(""), Y = ((on = N.match(/^ +/)) == null ? void 0 : on[0].length) || 0, Z = ((tn = N.match(/ +$/)) == null ? void 0 : tn[0].length) || 0;
|
|
3765
|
+
let vn = 0;
|
|
3766
|
+
for (let G = 0; G < H.length; G++)
|
|
3767
|
+
!$n && G < Y || !yn && G >= H.length - Z || (vn += H[G].width);
|
|
3768
|
+
let xn = 0;
|
|
3769
|
+
v === "center" ? xn = -vn / 2 : v === "right" && (xn = -vn);
|
|
3770
|
+
const wn = Math.max(L, J), rn = Math.min(D, an + 1);
|
|
3769
3771
|
let fn = 0;
|
|
3770
|
-
for (let G = 0; G <
|
|
3771
|
-
const
|
|
3772
|
-
!(
|
|
3772
|
+
for (let G = 0; G < H.length && H[G].index < wn; G++) {
|
|
3773
|
+
const In = H[G], Dn = G < Y, re = G >= H.length - Z, se = !V && Y > 0, ie = !dn && Z > 0;
|
|
3774
|
+
!(Dn && se || re && ie) && (fn += In.width);
|
|
3773
3775
|
}
|
|
3774
|
-
let
|
|
3775
|
-
for (let G = 0; G <
|
|
3776
|
-
const
|
|
3777
|
-
!(
|
|
3776
|
+
let Hn = 0;
|
|
3777
|
+
for (let G = 0; G < H.length && H[G].index < rn; G++) {
|
|
3778
|
+
const In = H[G], Dn = G < Y, re = G >= H.length - Z, se = !V && Y > 0, ie = !dn && Z > 0;
|
|
3779
|
+
!(Dn && se || re && ie) && (Hn += In.width);
|
|
3778
3780
|
}
|
|
3779
|
-
const
|
|
3780
|
-
n.fillRect(
|
|
3781
|
+
const Sn = xn + fn, Gn = Hn - fn;
|
|
3782
|
+
n.fillRect(Sn, B, Gn, T), q === null && (q = { x: Sn, y: B }), Q = { x: Sn + Gn, y: B + T }, n.restore();
|
|
3781
3783
|
}
|
|
3782
3784
|
}
|
|
3783
|
-
|
|
3785
|
+
U < _.length - 1 && (B += k);
|
|
3784
3786
|
}), n.restore(), d) {
|
|
3785
3787
|
n.save();
|
|
3786
|
-
const
|
|
3787
|
-
|
|
3788
|
+
const M = r.transformType === "custom" ? r.transformData : null, U = M != null && M.width ? M.width - Xn * 2 : void 0;
|
|
3789
|
+
Lt(n, d, {
|
|
3788
3790
|
fontSize: p,
|
|
3789
3791
|
fontFamily: y,
|
|
3790
3792
|
color: r.color || "#000000",
|
|
@@ -3793,29 +3795,29 @@ class de {
|
|
|
3793
3795
|
underline: x,
|
|
3794
3796
|
strikethrough: w,
|
|
3795
3797
|
textAlign: v
|
|
3796
|
-
},
|
|
3798
|
+
}, U), n.restore();
|
|
3797
3799
|
}
|
|
3798
3800
|
}
|
|
3799
|
-
if (
|
|
3800
|
-
const
|
|
3801
|
+
if (X && h && q && Q) {
|
|
3802
|
+
const L = q, D = Q, F = 6 / g, B = 2 / g;
|
|
3801
3803
|
n.save();
|
|
3802
|
-
const
|
|
3803
|
-
n.fillStyle =
|
|
3804
|
-
const
|
|
3805
|
-
n.beginPath(), n.moveTo(
|
|
3804
|
+
const M = en();
|
|
3805
|
+
n.fillStyle = M, n.strokeStyle = M, n.lineWidth = B, n.lineCap = "round";
|
|
3806
|
+
const U = { x: L.x, y: L.y - F }, V = { x: D.x, y: D.y + F };
|
|
3807
|
+
n.beginPath(), n.moveTo(L.x, L.y), n.lineTo(L.x, L.y + T), n.stroke(), n.beginPath(), n.arc(U.x, U.y, F, 0, Math.PI * 2), n.fill(), n.strokeStyle = "white", n.lineWidth = 2 / g, n.stroke(), n.strokeStyle = M, n.lineWidth = B, n.beginPath(), n.moveTo(D.x, D.y - T), n.lineTo(D.x, D.y), n.stroke(), n.beginPath(), n.arc(V.x, V.y, F, 0, Math.PI * 2), n.fill(), n.strokeStyle = "white", n.lineWidth = 2 / g, n.stroke(), n.restore(), u && (u.current = {
|
|
3806
3808
|
start: {
|
|
3807
|
-
center:
|
|
3808
|
-
textEdge:
|
|
3809
|
+
center: U,
|
|
3810
|
+
textEdge: L
|
|
3809
3811
|
// Original selection edge (top-left of selection on first line)
|
|
3810
3812
|
},
|
|
3811
3813
|
end: {
|
|
3812
|
-
center:
|
|
3813
|
-
textEdge:
|
|
3814
|
+
center: V,
|
|
3815
|
+
textEdge: D
|
|
3814
3816
|
// Original selection edge (bottom-right of selection on last line)
|
|
3815
3817
|
}
|
|
3816
3818
|
});
|
|
3817
3819
|
} else u && (u.current = { start: null, end: null });
|
|
3818
|
-
!
|
|
3820
|
+
!X && f > 0 && (n.save(), n.globalAlpha = f, n.strokeStyle = en(), n.lineWidth = 3 / g, n.lineCap = "round", n.beginPath(), n.moveTo(R, z), n.lineTo(R, z + O), n.stroke(), n.restore()), n.restore();
|
|
3819
3821
|
}
|
|
3820
3822
|
/**
|
|
3821
3823
|
* Render edit mode features for transformed text (circle, wave, arch, etc.)
|
|
@@ -3826,7 +3828,7 @@ class de {
|
|
|
3826
3828
|
n.save(), n.translate(e.x, e.y), n.rotate(-e.rotation * Math.PI / 180);
|
|
3827
3829
|
const f = c ? "bold" : "normal", h = d ? "italic" : "normal";
|
|
3828
3830
|
n.font = `${h} ${f} ${o}px ${l}`;
|
|
3829
|
-
const u = Array.from(e.text), g = u.map((p) => n.measureText(p).width), m =
|
|
3831
|
+
const u = Array.from(e.text), g = u.map((p) => n.measureText(p).width), m = ye.calculateCharPositions(e, u, g);
|
|
3830
3832
|
if (r >= 0 && r <= u.length && s > 0) {
|
|
3831
3833
|
let p;
|
|
3832
3834
|
if (r === 0)
|
|
@@ -3865,10 +3867,10 @@ class de {
|
|
|
3865
3867
|
* Shows both image resize handles and crop handles
|
|
3866
3868
|
*/
|
|
3867
3869
|
static renderCropBoxLayer(n, e, t, a = 1) {
|
|
3868
|
-
if (!(e instanceof
|
|
3870
|
+
if (!(e instanceof Un) || !e.isCropping) return;
|
|
3869
3871
|
const r = e, s = r.getCropBoxBounds();
|
|
3870
3872
|
if (!s) return;
|
|
3871
|
-
const o = 4 / a, l = 2 / a, c =
|
|
3873
|
+
const o = 4 / a, l = 2 / a, c = Nt / a, d = Ut / a, f = 1 / a;
|
|
3872
3874
|
n.save(), n.translate(e.x * a, e.y * a), n.rotate(pn.toRadians(e.rotation));
|
|
3873
3875
|
const h = r.transformData.flipHorizontal ? -1 : 1, u = r.transformData.flipVertical ? -1 : 1;
|
|
3874
3876
|
n.scale(h * a, u * a);
|
|
@@ -3907,30 +3909,30 @@ class de {
|
|
|
3907
3909
|
{ x: s.x + s.width, y: s.y + s.height / 2, orientation: "vertical" }
|
|
3908
3910
|
// right
|
|
3909
3911
|
].forEach((I) => {
|
|
3910
|
-
let A,
|
|
3911
|
-
I.orientation === "horizontal" ? (A = d,
|
|
3912
|
-
const
|
|
3913
|
-
n.fillStyle = "#fff", n.fillRect(
|
|
3912
|
+
let A, R;
|
|
3913
|
+
I.orientation === "horizontal" ? (A = d, R = o) : (A = o, R = d);
|
|
3914
|
+
const z = I.x - A / 2, O = I.y - R / 2;
|
|
3915
|
+
n.fillStyle = "#fff", n.fillRect(z, O, A, R), n.strokeStyle = "#bbb", n.lineWidth = f, n.strokeRect(z, O, A, R);
|
|
3914
3916
|
}), n.restore(), t && t.resizeHandles) {
|
|
3915
3917
|
const I = t.resizeHandles.filter(
|
|
3916
|
-
(
|
|
3917
|
-
), A = r.getCropBoxWorldCorners(),
|
|
3918
|
-
I.forEach((
|
|
3919
|
-
let
|
|
3918
|
+
(O) => O.anchor === "top-left" || O.anchor === "top-right" || O.anchor === "bottom-left" || O.anchor === "bottom-right"
|
|
3919
|
+
), A = r.getCropBoxWorldCorners(), R = 6, z = 20;
|
|
3920
|
+
I.forEach((O) => {
|
|
3921
|
+
let P = !1;
|
|
3920
3922
|
if (A)
|
|
3921
|
-
for (const
|
|
3922
|
-
const
|
|
3923
|
-
if (Math.sqrt(
|
|
3924
|
-
|
|
3923
|
+
for (const W of A) {
|
|
3924
|
+
const X = O.x - W.x, q = O.y - W.y;
|
|
3925
|
+
if (Math.sqrt(X * X + q * q) < z) {
|
|
3926
|
+
P = !0;
|
|
3925
3927
|
break;
|
|
3926
3928
|
}
|
|
3927
3929
|
}
|
|
3928
|
-
|
|
3930
|
+
P || (n.save(), n.globalAlpha = 1, n.beginPath(), n.arc(O.x * a, O.y * a, R, 0, 2 * Math.PI), n.fillStyle = "#fff", n.fill(), n.strokeStyle = en(n.canvas), n.lineWidth = 2, n.stroke(), n.restore());
|
|
3929
3931
|
});
|
|
3930
3932
|
}
|
|
3931
3933
|
}
|
|
3932
3934
|
}
|
|
3933
|
-
const
|
|
3935
|
+
const Va = mn("CanvasRenderer"), j = class j {
|
|
3934
3936
|
/**
|
|
3935
3937
|
* Get a pooled offscreen canvas for clipping content, only recreating
|
|
3936
3938
|
* when dimensions change. Eliminates per-frame canvas allocation.
|
|
@@ -3954,7 +3956,7 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
3954
3956
|
e.render(n, t, a);
|
|
3955
3957
|
} catch (r) {
|
|
3956
3958
|
const s = r instanceof Error ? r : new Error(String(r));
|
|
3957
|
-
|
|
3959
|
+
Va.error(`Failed to render element ${e.id}:`, s), j.onRenderError && j.onRenderError({
|
|
3958
3960
|
category: "render",
|
|
3959
3961
|
message: `Failed to render element: ${s.message}`,
|
|
3960
3962
|
originalError: s,
|
|
@@ -4028,7 +4030,7 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4028
4030
|
for (const v of x.pieces) {
|
|
4029
4031
|
const S = new Path2D(v.d), T = v.rotation ?? 0, k = new DOMMatrix();
|
|
4030
4032
|
if (k.translateSelf(t.x + v.x, t.y + v.y), T !== 0) {
|
|
4031
|
-
const _ = (v.baseWidth ?? 0) / 2, C = (v.baseHeight ?? 0) / 2,
|
|
4033
|
+
const _ = (v.baseWidth ?? 0) / 2, C = (v.baseHeight ?? 0) / 2, E = T === 90 || T === 270, I = E ? v.baseHeight ?? 0 : v.baseWidth ?? 0, A = E ? v.baseWidth ?? 0 : v.baseHeight ?? 0;
|
|
4032
4034
|
k.translateSelf(I / 2, A / 2), k.rotateSelf(T), k.translateSelf(-_, -C);
|
|
4033
4035
|
}
|
|
4034
4036
|
w.addPath(S, k);
|
|
@@ -4049,19 +4051,19 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4049
4051
|
*/
|
|
4050
4052
|
static renderElementsLayer(n, e, t, a, r, s, o, l = !0, c = !1, d = !1) {
|
|
4051
4053
|
const f = r != null && r.getMode() === "drag", h = r == null ? void 0 : r._activeChildContext;
|
|
4052
|
-
e !==
|
|
4053
|
-
const u =
|
|
4054
|
+
e !== j._cachedElementsRef && (j._cachedElementConfigs = e.map((y) => y.toJSON()), j._cachedElementMap = new Map(e.map((y) => [y.id, y])), j._cachedElementsRef = e);
|
|
4055
|
+
const u = j._cachedElementConfigs, g = j._cachedElementMap, m = j._knockoutRenderedIds;
|
|
4054
4056
|
m.clear(), e.forEach((y, b) => {
|
|
4055
4057
|
var $, x, w;
|
|
4056
4058
|
if (y.blendMode === "knockout" || y.blendMode === "clip") {
|
|
4057
4059
|
const v = u[b], S = y.blendMode === "knockout" ? "destination-out" : "destination-in", T = (($ = v.knockoutParts) == null ? void 0 : $.scope) || "group", k = u.findIndex((I) => I.id === v.id), _ = ((x = v.knockoutParts) == null ? void 0 : x.fill) || ((w = v.knockoutParts) == null ? void 0 : w.stroke), C = T === "artboard" && k !== -1 ? u.slice(0, k) : [];
|
|
4058
|
-
_ && (T === "artboard" || C.length > 0) && (C.forEach((I) => I.id && m.add(I.id)),
|
|
4060
|
+
_ && (T === "artboard" || C.length > 0) && (C.forEach((I) => I.id && m.add(I.id)), qn(
|
|
4059
4061
|
n,
|
|
4060
4062
|
v,
|
|
4061
4063
|
u,
|
|
4062
4064
|
(I, A) => {
|
|
4063
|
-
const
|
|
4064
|
-
|
|
4065
|
+
const R = A.id && g.get(A.id);
|
|
4066
|
+
R && this.renderElement(I, R, l);
|
|
4065
4067
|
},
|
|
4066
4068
|
s,
|
|
4067
4069
|
o,
|
|
@@ -4081,21 +4083,21 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4081
4083
|
) : e.forEach((y) => {
|
|
4082
4084
|
var T, k;
|
|
4083
4085
|
if (m.has(y.id) || y.visible === !1) return;
|
|
4084
|
-
const b = y.id === t, $ = (a == null ? void 0 : a.type) === "element" && ((T = a == null ? void 0 : a.data) == null ? void 0 : T.id) === y.id, x = f && h &&
|
|
4086
|
+
const b = y.id === t, $ = (a == null ? void 0 : a.type) === "element" && ((T = a == null ? void 0 : a.data) == null ? void 0 : T.id) === y.id, x = f && h && ce(y) && y.id === t, w = b && !x, v = u[e.indexOf(y)], S = ((k = v == null ? void 0 : v.distressEffect) == null ? void 0 : k.enabled) && v.distressEffect.style === "custom" && v.distressEffect.textureUrl;
|
|
4085
4087
|
if (v && v.masks && v.masks.length > 0)
|
|
4086
|
-
|
|
4087
|
-
const C = (
|
|
4088
|
-
l && (
|
|
4088
|
+
An(n, v, (_) => {
|
|
4089
|
+
const C = (E) => {
|
|
4090
|
+
l && (E.save(), E.globalAlpha = nn), this.safeRender(E, y, w, $), l && E.restore();
|
|
4089
4091
|
};
|
|
4090
4092
|
if (S) {
|
|
4091
|
-
const
|
|
4092
|
-
|
|
4093
|
+
const E = y.getVisualBoundingBox();
|
|
4094
|
+
Jn(_, v.distressEffect, E, C);
|
|
4093
4095
|
} else
|
|
4094
4096
|
C(_);
|
|
4095
4097
|
});
|
|
4096
4098
|
else if (S) {
|
|
4097
4099
|
const _ = y.getVisualBoundingBox();
|
|
4098
|
-
|
|
4100
|
+
Jn(n, v.distressEffect, _, (C) => {
|
|
4099
4101
|
l && (C.save(), C.globalAlpha = nn), this.safeRender(C, y, w, $), l && C.restore();
|
|
4100
4102
|
});
|
|
4101
4103
|
} else c && !d && o && w ? this.renderElementWithOverflowDimming(n, y, o, w, $, l) : c && o ? (n.save(), this.applyArtboardClipPath(n, o), l && (n.globalAlpha = nn), this.safeRender(n, y, w, $), n.restore()) : (l && (n.save(), n.globalAlpha = nn), this.safeRender(n, y, w, $), l && n.restore());
|
|
@@ -4129,8 +4131,8 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4129
4131
|
if (!b.mask)
|
|
4130
4132
|
b.content.forEach(($, x) => {
|
|
4131
4133
|
var _;
|
|
4132
|
-
const w = $.id === a, v = (r == null ? void 0 : r.type) === "element" && ((_ = r == null ? void 0 : r.data) == null ? void 0 : _.id) === $.id, S = s && o &&
|
|
4133
|
-
k && k.masks && k.masks.length > 0 ?
|
|
4134
|
+
const w = $.id === a, v = (r == null ? void 0 : r.type) === "element" && ((_ = r == null ? void 0 : r.data) == null ? void 0 : _.id) === $.id, S = s && o && ce($) && $.id === a, T = w && !S, k = b.contentConfigs[x];
|
|
4135
|
+
k && k.masks && k.masks.length > 0 ? An(n, k, (C) => {
|
|
4134
4136
|
c && (C.save(), C.globalAlpha = nn), $.render(C, T, v), c && C.restore();
|
|
4135
4137
|
}) : (c && (n.save(), n.globalAlpha = nn), $.render(n, T, v), c && n.restore());
|
|
4136
4138
|
});
|
|
@@ -4138,17 +4140,17 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4138
4140
|
const $ = this._getContentCanvas(f, h), x = $.getContext("2d");
|
|
4139
4141
|
if (!x) continue;
|
|
4140
4142
|
x.setTransform(1, 0, 0, 1, 0, 0), x.clearRect(0, 0, f, h), x.globalCompositeOperation = "source-over", x.setTransform(u), b.content.forEach((k, _) => {
|
|
4141
|
-
var
|
|
4142
|
-
const C = k.id === a,
|
|
4143
|
-
|
|
4144
|
-
c && (
|
|
4145
|
-
}) : (c && (x.save(), x.globalAlpha = nn), k.render(x, A,
|
|
4143
|
+
var z;
|
|
4144
|
+
const C = k.id === a, E = (r == null ? void 0 : r.type) === "element" && ((z = r == null ? void 0 : r.data) == null ? void 0 : z.id) === k.id, I = s && o && ce(k) && k.id === a, A = C && !I, R = b.contentConfigs[_];
|
|
4145
|
+
R && R.masks && R.masks.length > 0 ? An(x, R, (O) => {
|
|
4146
|
+
c && (O.save(), O.globalAlpha = nn), k.render(O, A, E), c && O.restore();
|
|
4147
|
+
}) : (c && (x.save(), x.globalAlpha = nn), k.render(x, A, E), c && x.restore());
|
|
4146
4148
|
});
|
|
4147
4149
|
const w = this._getMaskCanvas(f, h), v = w.getContext("2d");
|
|
4148
4150
|
if (!v) continue;
|
|
4149
4151
|
v.setTransform(1, 0, 0, 1, 0, 0), v.clearRect(0, 0, f, h), v.globalCompositeOperation = "source-over", v.setTransform(u);
|
|
4150
4152
|
const S = b.mask.id === a, T = (r == null ? void 0 : r.type) === "element" && ((y = r == null ? void 0 : r.data) == null ? void 0 : y.id) === b.mask.id;
|
|
4151
|
-
b.maskConfig && b.maskConfig.masks && b.maskConfig.masks.length > 0 ?
|
|
4153
|
+
b.maskConfig && b.maskConfig.masks && b.maskConfig.masks.length > 0 ? An(v, b.maskConfig, (k) => {
|
|
4152
4154
|
c && (k.save(), k.globalAlpha = nn), b.mask.render(k, S, T), c && k.restore();
|
|
4153
4155
|
}) : (c && (v.save(), v.globalAlpha = nn), b.mask.render(v, S, T), c && v.restore()), x.globalCompositeOperation = "destination-in", x.setTransform(1, 0, 0, 1, 0, 0), x.drawImage(w, 0, 0), n.save(), n.setTransform(1, 0, 0, 1, 0, 0), n.drawImage($, 0, 0), n.restore();
|
|
4154
4156
|
}
|
|
@@ -4161,42 +4163,42 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4161
4163
|
* @see InteractionFeedbackRenderer.renderSnapGuidesLayer
|
|
4162
4164
|
*/
|
|
4163
4165
|
static renderSnapGuidesLayer(n, e = []) {
|
|
4164
|
-
|
|
4166
|
+
Mn.renderSnapGuidesLayer(n, e);
|
|
4165
4167
|
}
|
|
4166
4168
|
/**
|
|
4167
4169
|
* Render spacing indicators layer
|
|
4168
4170
|
* @see InteractionFeedbackRenderer.renderSpacingIndicatorsLayer
|
|
4169
4171
|
*/
|
|
4170
4172
|
static renderSpacingIndicatorsLayer(n, e = []) {
|
|
4171
|
-
|
|
4173
|
+
Mn.renderSpacingIndicatorsLayer(n, e);
|
|
4172
4174
|
}
|
|
4173
4175
|
/**
|
|
4174
4176
|
* Render a distance label with background
|
|
4175
4177
|
* @see InteractionFeedbackRenderer.renderDistanceLabel
|
|
4176
4178
|
*/
|
|
4177
4179
|
static renderDistanceLabel(n, e, t, a) {
|
|
4178
|
-
|
|
4180
|
+
Mn.renderDistanceLabel(n, e, t, a);
|
|
4179
4181
|
}
|
|
4180
4182
|
/**
|
|
4181
4183
|
* Render selection box layer
|
|
4182
4184
|
* @see SelectionRenderer.renderSelectionLayer
|
|
4183
4185
|
*/
|
|
4184
4186
|
static renderSelectionLayer(n, e, t, a = 1) {
|
|
4185
|
-
|
|
4187
|
+
En.renderSelectionLayer(n, e, t, a);
|
|
4186
4188
|
}
|
|
4187
4189
|
/**
|
|
4188
4190
|
* Render position and size info below the selected element
|
|
4189
4191
|
* @see SelectionRenderer.renderPositionSizeInfo
|
|
4190
4192
|
*/
|
|
4191
4193
|
static renderPositionSizeInfo(n, e, t, a, r = 1) {
|
|
4192
|
-
|
|
4194
|
+
En.renderPositionSizeInfo(n, e, t, a, r);
|
|
4193
4195
|
}
|
|
4194
4196
|
/**
|
|
4195
4197
|
* Render transform handles layer
|
|
4196
4198
|
* @see SelectionRenderer.renderHandlesLayer
|
|
4197
4199
|
*/
|
|
4198
4200
|
static renderHandlesLayer(n, e, t, a, r, s, o, l = 1, c = !0) {
|
|
4199
|
-
|
|
4201
|
+
En.renderHandlesLayer(
|
|
4200
4202
|
n,
|
|
4201
4203
|
e,
|
|
4202
4204
|
t,
|
|
@@ -4213,14 +4215,14 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4213
4215
|
* @see HoverRenderer.renderHoverLayer
|
|
4214
4216
|
*/
|
|
4215
4217
|
static renderHoverLayer(n, e, t, a = !1, r = 1, s) {
|
|
4216
|
-
|
|
4218
|
+
ye.renderHoverLayer(n, e, t, a, r, s);
|
|
4217
4219
|
}
|
|
4218
4220
|
/**
|
|
4219
4221
|
* Render crop box layer (for images in crop mode)
|
|
4220
4222
|
* @see EditModeRenderer.renderCropBoxLayer
|
|
4221
4223
|
*/
|
|
4222
4224
|
static renderCropBoxLayer(n, e, t, a = 1) {
|
|
4223
|
-
|
|
4225
|
+
ue.renderCropBoxLayer(n, e, t, a);
|
|
4224
4226
|
}
|
|
4225
4227
|
// =========================================================================
|
|
4226
4228
|
// Main Render Orchestration
|
|
@@ -4268,7 +4270,7 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4268
4270
|
h,
|
|
4269
4271
|
m,
|
|
4270
4272
|
p
|
|
4271
|
-
), y != null && y.enabled && f &&
|
|
4273
|
+
), y != null && y.enabled && f && ut(n, y, f, d), b != null && b.enabled && f && lt(n, b, f, d), s && $ && a && ue.renderEditModeLayer(n, a, $, u), u !== 1) {
|
|
4272
4274
|
n.save();
|
|
4273
4275
|
const S = n.getTransform().a / u, T = g.x * u * S, k = g.y * u * S;
|
|
4274
4276
|
n.setTransform(S, 0, 0, S, T, k);
|
|
@@ -4292,7 +4294,7 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4292
4294
|
labelX: v.labelX * u,
|
|
4293
4295
|
labelY: v.labelY * u
|
|
4294
4296
|
}));
|
|
4295
|
-
|
|
4297
|
+
Mn.renderSnapGuidesLayer(n, x), Mn.renderSpacingIndicatorsLayer(n, w), u !== 1 && n.restore();
|
|
4296
4298
|
}
|
|
4297
4299
|
/**
|
|
4298
4300
|
* Single-selection interaction chrome: bbox, handles, position/size
|
|
@@ -4329,9 +4331,9 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4329
4331
|
const $ = n.getTransform().a / m, x = p.x * m * $, w = p.y * m * $;
|
|
4330
4332
|
n.setTransform($, 0, 0, $, x, w);
|
|
4331
4333
|
}
|
|
4332
|
-
if (e &&
|
|
4333
|
-
t &&
|
|
4334
|
-
else if (!c && a &&
|
|
4334
|
+
if (e && ra(e) && e.isCropping)
|
|
4335
|
+
t && ue.renderCropBoxLayer(n, e, t, m);
|
|
4336
|
+
else if (!c && a && En.renderSelectionLayer(n, e, a, m), t && a && En.renderPositionSizeInfo(n, e, t, a, m), !c && t && a && En.renderHandlesLayer(
|
|
4335
4337
|
n,
|
|
4336
4338
|
e,
|
|
4337
4339
|
t,
|
|
@@ -4347,19 +4349,19 @@ const Ua = yn("CanvasRenderer"), X = class X {
|
|
|
4347
4349
|
const b = u, $ = b.x * m, x = b.y * m, w = b.width * m, v = b.height * m, S = (b.borderRadius ?? 0) * m;
|
|
4348
4350
|
n.beginPath(), S > 0 ? n.roundRect($, x, w, v, S) : n.rect($, x, w, v), n.clip();
|
|
4349
4351
|
}
|
|
4350
|
-
|
|
4352
|
+
ye.renderHoverLayer(n, o, l, f, m, h), u && n.restore();
|
|
4351
4353
|
}
|
|
4352
4354
|
m !== 1 && n.restore();
|
|
4353
4355
|
}
|
|
4354
4356
|
};
|
|
4355
|
-
|
|
4356
|
-
let
|
|
4357
|
-
const
|
|
4358
|
-
function
|
|
4359
|
-
const e = n ?
|
|
4357
|
+
j._contentCanvas = null, j._contentCanvasSize = { width: 0, height: 0 }, j._maskCanvas = null, j._maskCanvasSize = { width: 0, height: 0 }, j._cachedElementsRef = null, j._cachedElementConfigs = null, j._cachedElementMap = null, j._knockoutRenderedIds = /* @__PURE__ */ new Set(), j.onRenderError = null;
|
|
4358
|
+
let We = j;
|
|
4359
|
+
const He = mn("element-serializer"), ht = 4e3, zn = /* @__PURE__ */ new Set();
|
|
4360
|
+
function ja(i, n) {
|
|
4361
|
+
const e = n ? Xa(n) : "no-src";
|
|
4360
4362
|
return `${i}:${e}`;
|
|
4361
4363
|
}
|
|
4362
|
-
function
|
|
4364
|
+
function Xa(i) {
|
|
4363
4365
|
let n = 0;
|
|
4364
4366
|
for (let e = 0; e < i.length; e++) {
|
|
4365
4367
|
const t = i.charCodeAt(e);
|
|
@@ -4367,20 +4369,20 @@ function Wa(i) {
|
|
|
4367
4369
|
}
|
|
4368
4370
|
return n.toString(36);
|
|
4369
4371
|
}
|
|
4370
|
-
function
|
|
4371
|
-
|
|
4372
|
+
function xe() {
|
|
4373
|
+
zn.clear();
|
|
4372
4374
|
}
|
|
4373
|
-
function
|
|
4374
|
-
for (const n of
|
|
4375
|
-
n.startsWith(`${i}:`) &&
|
|
4375
|
+
function pt(i) {
|
|
4376
|
+
for (const n of zn)
|
|
4377
|
+
n.startsWith(`${i}:`) && zn.delete(n);
|
|
4376
4378
|
}
|
|
4377
|
-
function
|
|
4378
|
-
|
|
4379
|
+
function qa(i) {
|
|
4380
|
+
zn.add(i);
|
|
4379
4381
|
}
|
|
4380
|
-
function
|
|
4381
|
-
return
|
|
4382
|
+
function Ya(i) {
|
|
4383
|
+
return zn.has(i);
|
|
4382
4384
|
}
|
|
4383
|
-
async function
|
|
4385
|
+
async function Ka(i, n = ht) {
|
|
4384
4386
|
const { naturalWidth: e, naturalHeight: t } = i;
|
|
4385
4387
|
if (e <= n && t <= n)
|
|
4386
4388
|
return createImageBitmap(i);
|
|
@@ -4391,20 +4393,20 @@ async function Va(i, n = ot) {
|
|
|
4391
4393
|
resizeQuality: "high"
|
|
4392
4394
|
});
|
|
4393
4395
|
}
|
|
4394
|
-
let
|
|
4395
|
-
function
|
|
4396
|
-
|
|
4396
|
+
let Zn = null, Qn = null;
|
|
4397
|
+
function Ja(i, n) {
|
|
4398
|
+
Zn = i, Qn = n;
|
|
4397
4399
|
}
|
|
4398
|
-
function
|
|
4399
|
-
|
|
4400
|
+
function Za() {
|
|
4401
|
+
Zn = null, Qn = null;
|
|
4400
4402
|
}
|
|
4401
|
-
function
|
|
4402
|
-
|
|
4403
|
+
function br() {
|
|
4404
|
+
xe(), Zn && Zn();
|
|
4403
4405
|
}
|
|
4404
|
-
function
|
|
4405
|
-
|
|
4406
|
+
function mr(i) {
|
|
4407
|
+
pt(i), Qn && Qn(i);
|
|
4406
4408
|
}
|
|
4407
|
-
function
|
|
4409
|
+
function $e(i, n) {
|
|
4408
4410
|
const e = i;
|
|
4409
4411
|
if (typeof e.fontFamily == "string" && n.add(e.fontFamily), e.richText && typeof e.richText == "object") {
|
|
4410
4412
|
const t = e.richText;
|
|
@@ -4419,14 +4421,14 @@ function ye(i, n) {
|
|
|
4419
4421
|
}
|
|
4420
4422
|
if (e.children && Array.isArray(e.children))
|
|
4421
4423
|
for (const t of e.children)
|
|
4422
|
-
|
|
4424
|
+
$e(t, n);
|
|
4423
4425
|
if (i.masks && Array.isArray(i.masks))
|
|
4424
4426
|
for (const t of i.masks)
|
|
4425
|
-
t.maskElement &&
|
|
4427
|
+
t.maskElement && $e(t.maskElement, n);
|
|
4426
4428
|
}
|
|
4427
|
-
function
|
|
4429
|
+
function Ge(i) {
|
|
4428
4430
|
if (typeof document > "u") return i;
|
|
4429
|
-
const n =
|
|
4431
|
+
const n = ee.getInstance();
|
|
4430
4432
|
return i.map((e) => {
|
|
4431
4433
|
if (!(e != null && e.maskElement) || e.maskElement.transformType !== "image") return e;
|
|
4432
4434
|
const t = e.maskElement.imageUrl;
|
|
@@ -4442,20 +4444,20 @@ function Ue(i) {
|
|
|
4442
4444
|
} : e;
|
|
4443
4445
|
});
|
|
4444
4446
|
}
|
|
4445
|
-
async function
|
|
4447
|
+
async function Ve(i, n, e = ht) {
|
|
4446
4448
|
const t = n.filter((l) => i.hasElementId(l.id)), a = [], r = [], s = /* @__PURE__ */ new Set();
|
|
4447
4449
|
for (const l of t) {
|
|
4448
4450
|
const c = l.toJSON();
|
|
4449
|
-
if (
|
|
4450
|
-
|
|
4451
|
+
if ($e(c, s), l instanceof Un && !l.imageElement) {
|
|
4452
|
+
He.warn(`[element-serializer] Skipping image ${l.id}: image not loaded (state: ${l.imageLoadState})`);
|
|
4451
4453
|
continue;
|
|
4452
4454
|
}
|
|
4453
|
-
if (l instanceof
|
|
4455
|
+
if (l instanceof Un && l.imageElement)
|
|
4454
4456
|
try {
|
|
4455
|
-
const d =
|
|
4456
|
-
if (!
|
|
4457
|
-
const $ = await
|
|
4458
|
-
r.push({ cacheKey: d, bitmap: $ }),
|
|
4457
|
+
const d = ja(l.id, l.imageUrl);
|
|
4458
|
+
if (!Ya(d)) {
|
|
4459
|
+
const $ = await Ka(l.imageElement, e);
|
|
4460
|
+
r.push({ cacheKey: d, bitmap: $ }), qa(d);
|
|
4459
4461
|
}
|
|
4460
4462
|
const h = l.transformData || {}, u = c.masks && c.masks.length > 0, g = u ? h.width : h.width * (h.cropWidth ?? 1), m = u ? h.height : h.height * (h.cropHeight ?? 1), p = {
|
|
4461
4463
|
id: l.id,
|
|
@@ -4474,9 +4476,9 @@ async function ze(i, n, e = ot) {
|
|
|
4474
4476
|
}
|
|
4475
4477
|
h.flipHorizontal && (p.flipHorizontal = h.flipHorizontal), h.flipVertical && (p.flipVertical = h.flipVertical), h.borderRadius && (p.borderRadius = h.borderRadius), l.opacity !== void 0 && (p.opacity = l.opacity);
|
|
4476
4478
|
const b = p;
|
|
4477
|
-
l.distressEffect && (b.distressEffect = { ...l.distressEffect }), c.masks && c.masks.length > 0 && (b.masks =
|
|
4479
|
+
l.distressEffect && (b.distressEffect = { ...l.distressEffect }), c.masks && c.masks.length > 0 && (b.masks = Ge(c.masks)), c.blendMode && (b.blendMode = c.blendMode), c.knockoutParts && (b.knockoutParts = c.knockoutParts), "getVisualBoundingBox" in l && typeof l.getVisualBoundingBox == "function" ? b._boundingBox = l.getVisualBoundingBox() : "getBoundingBox" in l && typeof l.getBoundingBox == "function" && (b._boundingBox = l.getBoundingBox()), a.push(b);
|
|
4478
4480
|
} catch (d) {
|
|
4479
|
-
|
|
4481
|
+
He.error(`[element-serializer] Failed to create ImageBitmap for ${c.id}:`, d);
|
|
4480
4482
|
}
|
|
4481
4483
|
else {
|
|
4482
4484
|
const d = {
|
|
@@ -4484,7 +4486,7 @@ async function ze(i, n, e = ot) {
|
|
|
4484
4486
|
type: c.transformType
|
|
4485
4487
|
// Map transformType to type for worker compatibility
|
|
4486
4488
|
};
|
|
4487
|
-
d.masks && Array.isArray(d.masks) && d.masks.length > 0 && (d.masks =
|
|
4489
|
+
d.masks && Array.isArray(d.masks) && d.masks.length > 0 && (d.masks = Ge(d.masks)), "getVisualBoundingBox" in l && typeof l.getVisualBoundingBox == "function" ? d._boundingBox = l.getVisualBoundingBox() : "getBoundingBox" in l && typeof l.getBoundingBox == "function" && (d._boundingBox = l.getBoundingBox()), a.push(d);
|
|
4488
4490
|
}
|
|
4489
4491
|
}
|
|
4490
4492
|
const o = Array.from(s);
|
|
@@ -4509,7 +4511,7 @@ async function ze(i, n, e = ot) {
|
|
|
4509
4511
|
newBitmaps: r
|
|
4510
4512
|
};
|
|
4511
4513
|
}
|
|
4512
|
-
const
|
|
4514
|
+
const Qa = `"use strict";
|
|
4513
4515
|
(() => {
|
|
4514
4516
|
var __create = Object.create;
|
|
4515
4517
|
var __defProp = Object.defineProperty;
|
|
@@ -28368,8 +28370,8 @@ const qa = `"use strict";
|
|
|
28368
28370
|
console.error("[Export Worker] Unhandled promise rejection:", event.reason);
|
|
28369
28371
|
};
|
|
28370
28372
|
})();
|
|
28371
|
-
`,
|
|
28372
|
-
class
|
|
28373
|
+
`, K = mn("WorkerExport");
|
|
28374
|
+
class Wn {
|
|
28373
28375
|
constructor() {
|
|
28374
28376
|
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;
|
|
28375
28377
|
}
|
|
@@ -28396,7 +28398,7 @@ class zn {
|
|
|
28396
28398
|
try {
|
|
28397
28399
|
e(n);
|
|
28398
28400
|
} catch (t) {
|
|
28399
|
-
|
|
28401
|
+
K.error("Error in progress listener:", t);
|
|
28400
28402
|
}
|
|
28401
28403
|
}
|
|
28402
28404
|
/**
|
|
@@ -28431,7 +28433,7 @@ class zn {
|
|
|
28431
28433
|
* Call this when exiting editor mode to free memory.
|
|
28432
28434
|
*/
|
|
28433
28435
|
clearWorkerBitmapCache() {
|
|
28434
|
-
if (
|
|
28436
|
+
if (xe(), this.worker && this.isReady) {
|
|
28435
28437
|
const n = {
|
|
28436
28438
|
type: "clear-all-bitmaps"
|
|
28437
28439
|
};
|
|
@@ -28443,7 +28445,7 @@ class zn {
|
|
|
28443
28445
|
* Call this when an element is removed or its image source changes.
|
|
28444
28446
|
*/
|
|
28445
28447
|
clearWorkerBitmap(n) {
|
|
28446
|
-
if (
|
|
28448
|
+
if (pt(n), this.worker && this.isReady) {
|
|
28447
28449
|
const e = {
|
|
28448
28450
|
type: "clear-bitmap",
|
|
28449
28451
|
elementId: n
|
|
@@ -28456,9 +28458,9 @@ class zn {
|
|
|
28456
28458
|
*/
|
|
28457
28459
|
static supportsWorkerExport() {
|
|
28458
28460
|
try {
|
|
28459
|
-
return typeof OffscreenCanvas > "u" ? (
|
|
28461
|
+
return typeof OffscreenCanvas > "u" ? (K.warn("OffscreenCanvas not supported"), !1) : typeof Worker > "u" ? (K.warn("Web Workers not supported"), !1) : new OffscreenCanvas(1, 1).getContext("2d") ? !0 : (K.warn("OffscreenCanvas 2D context not supported"), !1);
|
|
28460
28462
|
} catch (n) {
|
|
28461
|
-
return
|
|
28463
|
+
return K.warn("Feature detection failed:", n), !1;
|
|
28462
28464
|
}
|
|
28463
28465
|
}
|
|
28464
28466
|
/**
|
|
@@ -28467,34 +28469,34 @@ class zn {
|
|
|
28467
28469
|
async initialize() {
|
|
28468
28470
|
if (this.worker)
|
|
28469
28471
|
return this.readyPromise || Promise.resolve();
|
|
28470
|
-
if (!
|
|
28472
|
+
if (!Wn.supportsWorkerExport())
|
|
28471
28473
|
throw new Error("Browser does not support OffscreenCanvas or Web Workers");
|
|
28472
28474
|
return this.readyPromise = new Promise((n, e) => {
|
|
28473
28475
|
try {
|
|
28474
28476
|
let t;
|
|
28475
28477
|
try {
|
|
28476
|
-
const s = new Blob([
|
|
28478
|
+
const s = new Blob([Qa], { type: "application/javascript" });
|
|
28477
28479
|
t = URL.createObjectURL(s), this.workerBlobUrl = t;
|
|
28478
28480
|
} catch (s) {
|
|
28479
|
-
|
|
28481
|
+
K.error("Failed to create worker blob:", s), e(new Error(`Worker creation failed: ${s instanceof Error ? s.message : String(s)}`));
|
|
28480
28482
|
return;
|
|
28481
28483
|
}
|
|
28482
28484
|
this.worker = new Worker(t, { type: "classic" }), this.worker.onmessage = (s) => {
|
|
28483
28485
|
this.handleWorkerMessage(s.data);
|
|
28484
28486
|
}, this.worker.onerror = (s) => {
|
|
28485
|
-
|
|
28487
|
+
K.error("Worker error:", s), this.handleWorkerError(s);
|
|
28486
28488
|
};
|
|
28487
28489
|
const a = setTimeout(() => {
|
|
28488
28490
|
e(new Error("Worker initialization timeout"));
|
|
28489
28491
|
}, 15e3), r = (s) => {
|
|
28490
|
-
s.data.type === "ready" && (clearTimeout(a), this.isReady = !0,
|
|
28492
|
+
s.data.type === "ready" && (clearTimeout(a), this.isReady = !0, Ja(
|
|
28491
28493
|
() => this.clearWorkerBitmapCache(),
|
|
28492
28494
|
(o) => this.clearWorkerBitmap(o)
|
|
28493
28495
|
), n());
|
|
28494
28496
|
};
|
|
28495
28497
|
this.worker.addEventListener("message", r, { once: !0 });
|
|
28496
28498
|
} catch (t) {
|
|
28497
|
-
|
|
28499
|
+
K.error("Failed to create worker:", t), e(t);
|
|
28498
28500
|
}
|
|
28499
28501
|
}), this.readyPromise;
|
|
28500
28502
|
}
|
|
@@ -28503,8 +28505,8 @@ class zn {
|
|
|
28503
28505
|
*/
|
|
28504
28506
|
async restartWorker() {
|
|
28505
28507
|
const n = Date.now();
|
|
28506
|
-
if (n - this.lastCrashTime > this.CRASH_RESET_TIMEOUT && (this.workerCrashCount = 0), this.workerCrashCount++, this.lastCrashTime = n,
|
|
28507
|
-
throw
|
|
28508
|
+
if (n - this.lastCrashTime > this.CRASH_RESET_TIMEOUT && (this.workerCrashCount = 0), this.workerCrashCount++, this.lastCrashTime = n, K.warn(`Worker crashed (${this.workerCrashCount}/${this.MAX_CRASHES_BEFORE_FALLBACK})`), this.workerCrashCount >= this.MAX_CRASHES_BEFORE_FALLBACK)
|
|
28509
|
+
throw K.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.");
|
|
28508
28510
|
this.worker && (this.worker.terminate(), this.worker = null, this.isReady = !1, this.readyPromise = null, this.workerBlobUrl && (URL.revokeObjectURL(this.workerBlobUrl), this.workerBlobUrl = null));
|
|
28509
28511
|
const e = Math.min(1e3 * Math.pow(2, this.workerCrashCount - 1), 5e3);
|
|
28510
28512
|
await new Promise((t) => setTimeout(t, e)), await this.initialize();
|
|
@@ -28564,7 +28566,7 @@ class zn {
|
|
|
28564
28566
|
const { artboard: e, elements: t, config: a } = n;
|
|
28565
28567
|
if ((!this.worker || !this.isReady) && await this.initialize(), !this.worker)
|
|
28566
28568
|
throw new Error("Worker is not initialized");
|
|
28567
|
-
const r = `export-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: o, newBitmaps: l } = await
|
|
28569
|
+
const r = `export-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: o, newBitmaps: l } = await Ve(e, t);
|
|
28568
28570
|
l.length > 0 && this.registerBitmapsWithWorker(l);
|
|
28569
28571
|
const c = {
|
|
28570
28572
|
type: "export",
|
|
@@ -28621,7 +28623,7 @@ class zn {
|
|
|
28621
28623
|
const { artboard: e, elements: t, config: a } = n;
|
|
28622
28624
|
if ((!this.worker || !this.isReady) && await this.initialize(), !this.worker)
|
|
28623
28625
|
throw new Error("Worker is not initialized");
|
|
28624
|
-
const r = `export-blob-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: o, newBitmaps: l } = await
|
|
28626
|
+
const r = `export-blob-${++this.requestIdCounter}-${Date.now()}`, s = performance.now(), { data: o, newBitmaps: l } = await Ve(e, t);
|
|
28625
28627
|
l.length > 0 && this.registerBitmapsWithWorker(l);
|
|
28626
28628
|
const c = {
|
|
28627
28629
|
type: "export",
|
|
@@ -28679,7 +28681,7 @@ class zn {
|
|
|
28679
28681
|
case "ready":
|
|
28680
28682
|
break;
|
|
28681
28683
|
default:
|
|
28682
|
-
|
|
28684
|
+
K.warn("Unknown message type:", n);
|
|
28683
28685
|
}
|
|
28684
28686
|
}
|
|
28685
28687
|
/**
|
|
@@ -28687,14 +28689,14 @@ class zn {
|
|
|
28687
28689
|
*/
|
|
28688
28690
|
handleExportComplete(n) {
|
|
28689
28691
|
const e = this.pendingRequests.get(n.requestId);
|
|
28690
|
-
e && e.returnFormat === "dataUrl" ? (e.resolve(n), this.pendingRequests.delete(n.requestId)) : e ? (
|
|
28692
|
+
e && e.returnFormat === "dataUrl" ? (e.resolve(n), this.pendingRequests.delete(n.requestId)) : e ? (K.warn("Received dataUrl response for blob request:", n.requestId), e.reject(new Error("Received dataUrl response when expecting blob")), this.pendingRequests.delete(n.requestId)) : K.warn("Received response for unknown request:", n.requestId);
|
|
28691
28693
|
}
|
|
28692
28694
|
/**
|
|
28693
28695
|
* Handle successful blob export completion
|
|
28694
28696
|
*/
|
|
28695
28697
|
handleBlobExportComplete(n) {
|
|
28696
28698
|
const e = this.pendingRequests.get(n.requestId);
|
|
28697
|
-
e && e.returnFormat === "blob" ? (e.resolve(n), this.pendingRequests.delete(n.requestId)) : e ? (
|
|
28699
|
+
e && e.returnFormat === "blob" ? (e.resolve(n), this.pendingRequests.delete(n.requestId)) : e ? (K.warn("Received blob response for dataUrl request:", n.requestId), e.reject(new Error("Received blob response when expecting dataUrl")), this.pendingRequests.delete(n.requestId)) : K.warn("Received blob response for unknown request:", n.requestId);
|
|
28698
28700
|
}
|
|
28699
28701
|
/**
|
|
28700
28702
|
* Handle export error
|
|
@@ -28705,13 +28707,13 @@ class zn {
|
|
|
28705
28707
|
const t = new Error(n.error);
|
|
28706
28708
|
n.stack && (t.stack = n.stack), e.reject(t), this.pendingRequests.delete(n.requestId);
|
|
28707
28709
|
} else
|
|
28708
|
-
|
|
28710
|
+
K.warn("Received error for unknown request:", n.requestId);
|
|
28709
28711
|
}
|
|
28710
28712
|
/**
|
|
28711
28713
|
* Handle worker errors
|
|
28712
28714
|
*/
|
|
28713
28715
|
async handleWorkerError(n) {
|
|
28714
|
-
|
|
28716
|
+
K.error("Worker error:", n);
|
|
28715
28717
|
const e = Array.from(this.pendingRequests.values());
|
|
28716
28718
|
for (const [t, a] of this.pendingRequests.entries())
|
|
28717
28719
|
this.pendingRequests.delete(t);
|
|
@@ -28719,7 +28721,7 @@ class zn {
|
|
|
28719
28721
|
try {
|
|
28720
28722
|
await this.restartWorker();
|
|
28721
28723
|
} catch (t) {
|
|
28722
|
-
|
|
28724
|
+
K.error("Failed to restart worker:", t);
|
|
28723
28725
|
for (const a of e)
|
|
28724
28726
|
a.reject(new Error(`Worker crashed and could not be restarted: ${n.message}`));
|
|
28725
28727
|
for (; this.requestQueue.length > 0; )
|
|
@@ -28735,7 +28737,7 @@ class zn {
|
|
|
28735
28737
|
e.reject(new Error("Worker terminated")), this.pendingRequests.delete(n);
|
|
28736
28738
|
for (; this.requestQueue.length > 0; )
|
|
28737
28739
|
this.requestQueue.shift().reject(new Error("Worker terminated"));
|
|
28738
|
-
this.worker.terminate(), this.worker = null, this.isReady = !1, this.readyPromise = null,
|
|
28740
|
+
this.worker.terminate(), this.worker = null, this.isReady = !1, this.readyPromise = null, xe(), Za(), this.workerBlobUrl && (URL.revokeObjectURL(this.workerBlobUrl), this.workerBlobUrl = null);
|
|
28739
28741
|
}
|
|
28740
28742
|
}
|
|
28741
28743
|
/**
|
|
@@ -28750,31 +28752,31 @@ class zn {
|
|
|
28750
28752
|
};
|
|
28751
28753
|
}
|
|
28752
28754
|
}
|
|
28753
|
-
let
|
|
28754
|
-
function
|
|
28755
|
-
return
|
|
28755
|
+
let Pn = null;
|
|
28756
|
+
function yr() {
|
|
28757
|
+
return Pn || (Pn = new Wn()), Pn;
|
|
28756
28758
|
}
|
|
28757
|
-
function
|
|
28758
|
-
|
|
28759
|
+
function xr() {
|
|
28760
|
+
Pn && (Pn.terminate(), Pn = null);
|
|
28759
28761
|
}
|
|
28760
|
-
const hn =
|
|
28761
|
-
function
|
|
28762
|
+
const hn = mn("Export");
|
|
28763
|
+
function ve(i, n) {
|
|
28762
28764
|
var e;
|
|
28763
28765
|
if (!(!i || typeof i != "object")) {
|
|
28764
28766
|
if (typeof i.fontFamily == "string" && i.fontFamily.trim() && n.add(i.fontFamily), i.richText && Array.isArray(i.richText.spans))
|
|
28765
28767
|
for (const t of i.richText.spans)
|
|
28766
28768
|
(e = t == null ? void 0 : t.style) != null && e.fontFamily && typeof t.style.fontFamily == "string" && n.add(t.style.fontFamily);
|
|
28767
28769
|
if (Array.isArray(i.children))
|
|
28768
|
-
for (const t of i.children)
|
|
28770
|
+
for (const t of i.children) ve(t, n);
|
|
28769
28771
|
if (Array.isArray(i.masks))
|
|
28770
28772
|
for (const t of i.masks)
|
|
28771
|
-
t != null && t.maskElement &&
|
|
28773
|
+
t != null && t.maskElement && ve(t.maskElement, n);
|
|
28772
28774
|
}
|
|
28773
28775
|
}
|
|
28774
|
-
async function
|
|
28776
|
+
async function je(i) {
|
|
28775
28777
|
if (typeof document > "u" || !document.fonts) return;
|
|
28776
28778
|
const n = /* @__PURE__ */ new Set();
|
|
28777
|
-
for (const t of i)
|
|
28779
|
+
for (const t of i) ve(t, n);
|
|
28778
28780
|
if (n.size === 0) return;
|
|
28779
28781
|
const e = [];
|
|
28780
28782
|
for (const t of n)
|
|
@@ -28782,12 +28784,12 @@ async function We(i) {
|
|
|
28782
28784
|
}));
|
|
28783
28785
|
await Promise.all(e), document.fonts.ready && await document.fonts.ready;
|
|
28784
28786
|
}
|
|
28785
|
-
const
|
|
28787
|
+
const Nn = class Nn {
|
|
28786
28788
|
/**
|
|
28787
28789
|
* Check if worker export is supported in this browser
|
|
28788
28790
|
*/
|
|
28789
28791
|
static supportsWorkerExport() {
|
|
28790
|
-
return
|
|
28792
|
+
return Wn.supportsWorkerExport();
|
|
28791
28793
|
}
|
|
28792
28794
|
/**
|
|
28793
28795
|
* Get or initialize the worker manager
|
|
@@ -28795,7 +28797,7 @@ const Ln = class Ln {
|
|
|
28795
28797
|
static async getWorkerManager() {
|
|
28796
28798
|
return this.supportsWorkerExport() ? this.workerManager ? this.workerManager : this.workerInitPromise ? (await this.workerInitPromise, this.workerManager) : (this.workerInitPromise = (async () => {
|
|
28797
28799
|
try {
|
|
28798
|
-
this.workerManager = new
|
|
28800
|
+
this.workerManager = new Wn(), await this.workerManager.initialize();
|
|
28799
28801
|
} catch (n) {
|
|
28800
28802
|
hn.error("Failed to initialize worker:", n), this.workerManager = null;
|
|
28801
28803
|
}
|
|
@@ -28942,15 +28944,15 @@ const Ln = class Ln {
|
|
|
28942
28944
|
transparentBackground: l = !1,
|
|
28943
28945
|
backgroundColor: c = n.backgroundColor
|
|
28944
28946
|
} = a;
|
|
28945
|
-
await
|
|
28947
|
+
await je(e);
|
|
28946
28948
|
const d = document.createElement("canvas"), f = n.width * o, h = n.height * o;
|
|
28947
28949
|
d.width = f, d.height = h;
|
|
28948
28950
|
const u = d.getContext("2d");
|
|
28949
28951
|
if (u.scale(o, o), !l && n.exportBackground) {
|
|
28950
28952
|
if (u.save(), this.applyExportBackgroundClipPath(u, n), n.backgroundType === "texture" && n.backgroundTexture) {
|
|
28951
|
-
const x =
|
|
28953
|
+
const x = cn.getTexturePresetColor(n.backgroundTexture);
|
|
28952
28954
|
u.fillStyle = x, u.fillRect(0, 0, n.width, n.height);
|
|
28953
|
-
const w =
|
|
28955
|
+
const w = cn.getTexture(n.backgroundTexture);
|
|
28954
28956
|
w && w.complete && u.drawImage(w, 0, 0, n.width, n.height);
|
|
28955
28957
|
} else
|
|
28956
28958
|
u.fillStyle = c || n.backgroundColor, u.fillRect(0, 0, n.width, n.height);
|
|
@@ -28970,10 +28972,10 @@ const Ln = class Ln {
|
|
|
28970
28972
|
const S = b[w], T = x.blendMode === "knockout" ? "destination-out" : "destination-in", k = ((v = S.knockoutParts) == null ? void 0 : v.scope) || "group", _ = b.findIndex((C) => C.id === S.id);
|
|
28971
28973
|
if (_ !== -1 && k === "artboard")
|
|
28972
28974
|
for (let C = 0; C < _; C++) {
|
|
28973
|
-
const
|
|
28974
|
-
|
|
28975
|
+
const E = b[C].id;
|
|
28976
|
+
E && $.add(E);
|
|
28975
28977
|
}
|
|
28976
|
-
|
|
28978
|
+
qn(
|
|
28977
28979
|
u,
|
|
28978
28980
|
S,
|
|
28979
28981
|
b,
|
|
@@ -29010,15 +29012,15 @@ const Ln = class Ln {
|
|
|
29010
29012
|
transparentBackground: l = !1,
|
|
29011
29013
|
backgroundColor: c = n.backgroundColor
|
|
29012
29014
|
} = a;
|
|
29013
|
-
await
|
|
29015
|
+
await je(e);
|
|
29014
29016
|
const d = document.createElement("canvas"), f = n.width * o, h = n.height * o;
|
|
29015
29017
|
d.width = f, d.height = h;
|
|
29016
29018
|
const u = d.getContext("2d");
|
|
29017
29019
|
if (u.scale(o, o), !l && n.exportBackground) {
|
|
29018
29020
|
if (u.save(), this.applyExportBackgroundClipPath(u, n), n.backgroundType === "texture" && n.backgroundTexture) {
|
|
29019
|
-
const S =
|
|
29021
|
+
const S = cn.getTexturePresetColor(n.backgroundTexture);
|
|
29020
29022
|
u.fillStyle = S, u.fillRect(0, 0, n.width, n.height);
|
|
29021
|
-
const T =
|
|
29023
|
+
const T = cn.getTexture(n.backgroundTexture);
|
|
29022
29024
|
T && T.complete ? u.drawImage(T, 0, 0, n.width, n.height) : hn.warn("Texture not loaded for export:", n.backgroundTexture);
|
|
29023
29025
|
} else
|
|
29024
29026
|
u.fillStyle = c, u.fillRect(0, 0, n.width, n.height);
|
|
@@ -29035,13 +29037,13 @@ const Ln = class Ln {
|
|
|
29035
29037
|
m.forEach((S, T) => {
|
|
29036
29038
|
var k;
|
|
29037
29039
|
if (S.blendMode === "knockout" || S.blendMode === "clip") {
|
|
29038
|
-
const _ = b[T], C = S.blendMode === "knockout" ? "destination-out" : "destination-in",
|
|
29039
|
-
if (I !== -1 &&
|
|
29040
|
+
const _ = b[T], C = S.blendMode === "knockout" ? "destination-out" : "destination-in", E = ((k = _.knockoutParts) == null ? void 0 : k.scope) || "group", I = b.findIndex((A) => A.id === _.id);
|
|
29041
|
+
if (I !== -1 && E === "artboard")
|
|
29040
29042
|
for (let A = 0; A < I; A++) {
|
|
29041
|
-
const
|
|
29042
|
-
|
|
29043
|
+
const R = b[A].id;
|
|
29044
|
+
R && $.add(R);
|
|
29043
29045
|
}
|
|
29044
|
-
|
|
29046
|
+
qn(
|
|
29045
29047
|
u,
|
|
29046
29048
|
_,
|
|
29047
29049
|
b,
|
|
@@ -29054,28 +29056,28 @@ const Ln = class Ln {
|
|
|
29054
29056
|
}), m.forEach((S, T) => {
|
|
29055
29057
|
var k;
|
|
29056
29058
|
if (!$.has(S.id)) {
|
|
29057
|
-
const _ = b[T], C = ((k = _ == null ? void 0 : _.distressEffect) == null ? void 0 : k.enabled) && _.distressEffect.style === "custom" && _.distressEffect.textureUrl,
|
|
29059
|
+
const _ = b[T], C = ((k = _ == null ? void 0 : _.distressEffect) == null ? void 0 : k.enabled) && _.distressEffect.style === "custom" && _.distressEffect.textureUrl, E = (_ == null ? void 0 : _.masks) && _.masks.length > 0, I = (A) => {
|
|
29058
29060
|
S.render(A, !1);
|
|
29059
29061
|
};
|
|
29060
|
-
if (
|
|
29061
|
-
|
|
29062
|
-
const
|
|
29063
|
-
|
|
29062
|
+
if (E && C)
|
|
29063
|
+
An(u, _, (A) => {
|
|
29064
|
+
const R = S.getVisualBoundingBox();
|
|
29065
|
+
Jn(A, _.distressEffect, R, I);
|
|
29064
29066
|
});
|
|
29065
|
-
else if (
|
|
29066
|
-
|
|
29067
|
+
else if (E)
|
|
29068
|
+
An(u, _, I);
|
|
29067
29069
|
else if (C) {
|
|
29068
29070
|
const A = S.getVisualBoundingBox();
|
|
29069
|
-
|
|
29071
|
+
Jn(u, _.distressEffect, A, I);
|
|
29070
29072
|
} else
|
|
29071
29073
|
S.render(u, !1);
|
|
29072
29074
|
}
|
|
29073
|
-
}), (w = n.distressTexture) != null && w.enabled &&
|
|
29075
|
+
}), (w = n.distressTexture) != null && w.enabled && ut(u, n.distressTexture, {
|
|
29074
29076
|
x: n.x,
|
|
29075
29077
|
y: n.y,
|
|
29076
29078
|
width: n.width,
|
|
29077
29079
|
height: n.height
|
|
29078
|
-
}), (v = n.imageMask) != null && v.enabled &&
|
|
29080
|
+
}), (v = n.imageMask) != null && v.enabled && lt(u, n.imageMask, {
|
|
29079
29081
|
x: n.x,
|
|
29080
29082
|
y: n.y,
|
|
29081
29083
|
width: n.width,
|
|
@@ -29314,9 +29316,9 @@ const Ln = class Ln {
|
|
|
29314
29316
|
return "previewBackgroundColor" in e && delete e.previewBackgroundColor, e;
|
|
29315
29317
|
}
|
|
29316
29318
|
};
|
|
29317
|
-
|
|
29318
|
-
let
|
|
29319
|
-
class
|
|
29319
|
+
Nn.CURRENT_VERSION = "2.0.0", Nn.workerManager = null, Nn.workerInitPromise = null;
|
|
29320
|
+
let Xe = Nn;
|
|
29321
|
+
class ne {
|
|
29320
29322
|
/**
|
|
29321
29323
|
* Create an element instance from a JSON configuration
|
|
29322
29324
|
* TypeScript ensures all transform types are handled
|
|
@@ -29329,27 +29331,27 @@ class ct {
|
|
|
29329
29331
|
const { transformType: e } = n;
|
|
29330
29332
|
switch (e) {
|
|
29331
29333
|
case "custom":
|
|
29332
|
-
return new
|
|
29334
|
+
return new Xt(n);
|
|
29333
29335
|
case "distort":
|
|
29334
29336
|
throw new Error("DistortTransform is not yet implemented");
|
|
29335
29337
|
case "circle":
|
|
29336
|
-
return new
|
|
29338
|
+
return new jt(n);
|
|
29337
29339
|
case "lean":
|
|
29338
|
-
return new
|
|
29340
|
+
return new Vt(n);
|
|
29339
29341
|
case "arch":
|
|
29340
|
-
return new
|
|
29342
|
+
return new Gt(n);
|
|
29341
29343
|
case "ascend":
|
|
29342
|
-
return new
|
|
29344
|
+
return new Ht(n);
|
|
29343
29345
|
case "wave":
|
|
29344
|
-
return new
|
|
29346
|
+
return new Wt(n);
|
|
29345
29347
|
case "flag":
|
|
29346
|
-
return new
|
|
29348
|
+
return new zt(n);
|
|
29347
29349
|
case "image":
|
|
29348
|
-
return new
|
|
29350
|
+
return new Un(n);
|
|
29349
29351
|
case "group":
|
|
29350
29352
|
const t = (n.children || []).map(
|
|
29351
|
-
(s) =>
|
|
29352
|
-
), a = new
|
|
29353
|
+
(s) => ne.createFromJSON(s)
|
|
29354
|
+
), a = new Ke({
|
|
29353
29355
|
id: n.id,
|
|
29354
29356
|
x: n.x,
|
|
29355
29357
|
y: n.y,
|
|
@@ -29357,9 +29359,9 @@ class ct {
|
|
|
29357
29359
|
});
|
|
29358
29360
|
return t.forEach((s) => a.addChild(s)), a;
|
|
29359
29361
|
case "shape":
|
|
29360
|
-
return new
|
|
29362
|
+
return new Ze(n);
|
|
29361
29363
|
case "path":
|
|
29362
|
-
return new
|
|
29364
|
+
return new Je(n);
|
|
29363
29365
|
default:
|
|
29364
29366
|
const r = e;
|
|
29365
29367
|
throw new Error(`Unknown transform type: ${r}`);
|
|
@@ -29573,43 +29575,260 @@ class ct {
|
|
|
29573
29575
|
return this.createFromJSON(e);
|
|
29574
29576
|
}
|
|
29575
29577
|
}
|
|
29578
|
+
const qe = mn("ImportManager"), Ce = class Ce {
|
|
29579
|
+
/**
|
|
29580
|
+
* Import workspace from JSON file
|
|
29581
|
+
*/
|
|
29582
|
+
static async importFromJSON(n) {
|
|
29583
|
+
try {
|
|
29584
|
+
const e = await this.readFileAsText(n), t = JSON.parse(e);
|
|
29585
|
+
if (this.validateDocument(t), !this.SUPPORTED_VERSIONS.includes(t.metadata.version))
|
|
29586
|
+
throw new Error(
|
|
29587
|
+
`Unsupported version: ${t.metadata.version}. Supported versions: ${this.SUPPORTED_VERSIONS.join(", ")}`
|
|
29588
|
+
);
|
|
29589
|
+
if (t.metadata.version === "1.0.0")
|
|
29590
|
+
return this.migrateV1Document(t);
|
|
29591
|
+
const a = [], r = [];
|
|
29592
|
+
return t.artboards.forEach((s) => {
|
|
29593
|
+
const o = Ae.fromJSON({
|
|
29594
|
+
id: s.id,
|
|
29595
|
+
name: s.name,
|
|
29596
|
+
x: s.x,
|
|
29597
|
+
y: s.y,
|
|
29598
|
+
width: s.width,
|
|
29599
|
+
height: s.height,
|
|
29600
|
+
backgroundColor: s.backgroundColor,
|
|
29601
|
+
elementIds: s.elements.map((c) => c.id || "")
|
|
29602
|
+
}), l = s.elements.map((c) => {
|
|
29603
|
+
try {
|
|
29604
|
+
return ne.createFromJSON(c);
|
|
29605
|
+
} catch (d) {
|
|
29606
|
+
return qe.error("Failed to create element:", c, d), null;
|
|
29607
|
+
}
|
|
29608
|
+
}).filter((c) => c !== null);
|
|
29609
|
+
a.push(o), r.push(...l);
|
|
29610
|
+
}), await this.preloadAllImages(r), {
|
|
29611
|
+
success: !0,
|
|
29612
|
+
artboards: a,
|
|
29613
|
+
elements: r,
|
|
29614
|
+
activeArtboardId: t.activeArtboardId
|
|
29615
|
+
};
|
|
29616
|
+
} catch (e) {
|
|
29617
|
+
return {
|
|
29618
|
+
success: !1,
|
|
29619
|
+
error: e instanceof Error ? e.message : "Unknown error"
|
|
29620
|
+
};
|
|
29621
|
+
}
|
|
29622
|
+
}
|
|
29623
|
+
/**
|
|
29624
|
+
* Migrate v1 document (no artboards) to v2 (with artboards)
|
|
29625
|
+
*/
|
|
29626
|
+
static async migrateV1Document(n) {
|
|
29627
|
+
var e, t, a;
|
|
29628
|
+
try {
|
|
29629
|
+
const r = n.elements || [], s = new Ae({
|
|
29630
|
+
id: "artboard-migrated",
|
|
29631
|
+
name: "Artboard 1",
|
|
29632
|
+
x: 0,
|
|
29633
|
+
y: 0,
|
|
29634
|
+
width: ((e = n.canvas) == null ? void 0 : e.width) || 1920,
|
|
29635
|
+
height: ((t = n.canvas) == null ? void 0 : t.height) || 1080,
|
|
29636
|
+
backgroundColor: ((a = n.canvas) == null ? void 0 : a.backgroundColor) || "#ffffff"
|
|
29637
|
+
}), o = r.map((l) => {
|
|
29638
|
+
try {
|
|
29639
|
+
return ne.createFromJSON(l);
|
|
29640
|
+
} catch (c) {
|
|
29641
|
+
return qe.error("Failed to create element:", l, c), null;
|
|
29642
|
+
}
|
|
29643
|
+
}).filter((l) => l !== null);
|
|
29644
|
+
return o.forEach((l) => {
|
|
29645
|
+
s.addElementId(l.id);
|
|
29646
|
+
}), await this.preloadAllImages(o), {
|
|
29647
|
+
success: !0,
|
|
29648
|
+
artboards: [s],
|
|
29649
|
+
elements: o,
|
|
29650
|
+
activeArtboardId: s.id
|
|
29651
|
+
};
|
|
29652
|
+
} catch (r) {
|
|
29653
|
+
return {
|
|
29654
|
+
success: !1,
|
|
29655
|
+
error: r instanceof Error ? r.message : "Migration failed"
|
|
29656
|
+
};
|
|
29657
|
+
}
|
|
29658
|
+
}
|
|
29659
|
+
/**
|
|
29660
|
+
* Import image file
|
|
29661
|
+
*/
|
|
29662
|
+
static async importImage(n) {
|
|
29663
|
+
try {
|
|
29664
|
+
if (!n.type.startsWith("image/"))
|
|
29665
|
+
throw new Error("File is not an image");
|
|
29666
|
+
const e = 10 * 1024 * 1024;
|
|
29667
|
+
if (n.size > e)
|
|
29668
|
+
throw new Error("Image file is too large (max 10MB)");
|
|
29669
|
+
const t = await this.readFileAsDataURL(n), { width: a, height: r } = await this.getImageDimensions(t);
|
|
29670
|
+
return {
|
|
29671
|
+
success: !0,
|
|
29672
|
+
dataUrl: t,
|
|
29673
|
+
filename: n.name,
|
|
29674
|
+
width: a,
|
|
29675
|
+
height: r
|
|
29676
|
+
};
|
|
29677
|
+
} catch (e) {
|
|
29678
|
+
return {
|
|
29679
|
+
success: !1,
|
|
29680
|
+
error: e instanceof Error ? e.message : "Unknown error"
|
|
29681
|
+
};
|
|
29682
|
+
}
|
|
29683
|
+
}
|
|
29684
|
+
/**
|
|
29685
|
+
* Validate document structure
|
|
29686
|
+
*/
|
|
29687
|
+
static validateDocument(n) {
|
|
29688
|
+
if (!n || typeof n != "object")
|
|
29689
|
+
throw new Error("Invalid document");
|
|
29690
|
+
const e = n;
|
|
29691
|
+
if (!e.metadata)
|
|
29692
|
+
throw new Error("Missing metadata");
|
|
29693
|
+
if (!e.metadata.version)
|
|
29694
|
+
throw new Error("Missing version in metadata");
|
|
29695
|
+
if (!e.artboards && !e.elements)
|
|
29696
|
+
throw new Error("Missing artboards or elements array");
|
|
29697
|
+
if (e.artboards && !Array.isArray(e.artboards))
|
|
29698
|
+
throw new Error("Invalid artboards array");
|
|
29699
|
+
}
|
|
29700
|
+
/**
|
|
29701
|
+
* Read file as text
|
|
29702
|
+
*/
|
|
29703
|
+
static readFileAsText(n) {
|
|
29704
|
+
return new Promise((e, t) => {
|
|
29705
|
+
const a = new FileReader();
|
|
29706
|
+
a.onload = (r) => {
|
|
29707
|
+
var s;
|
|
29708
|
+
return e((s = r.target) == null ? void 0 : s.result);
|
|
29709
|
+
}, a.onerror = () => t(new Error("Failed to read file")), a.readAsText(n);
|
|
29710
|
+
});
|
|
29711
|
+
}
|
|
29712
|
+
/**
|
|
29713
|
+
* Read file as data URL
|
|
29714
|
+
*/
|
|
29715
|
+
static readFileAsDataURL(n) {
|
|
29716
|
+
return new Promise((e, t) => {
|
|
29717
|
+
const a = new FileReader();
|
|
29718
|
+
a.onload = (r) => {
|
|
29719
|
+
var s;
|
|
29720
|
+
return e((s = r.target) == null ? void 0 : s.result);
|
|
29721
|
+
}, a.onerror = () => t(new Error("Failed to read file")), a.readAsDataURL(n);
|
|
29722
|
+
});
|
|
29723
|
+
}
|
|
29724
|
+
/**
|
|
29725
|
+
* Get image dimensions from data URL
|
|
29726
|
+
*/
|
|
29727
|
+
static getImageDimensions(n) {
|
|
29728
|
+
return new Promise((e, t) => {
|
|
29729
|
+
const a = new Image();
|
|
29730
|
+
a.onload = () => {
|
|
29731
|
+
e({ width: a.width, height: a.height });
|
|
29732
|
+
}, a.onerror = () => t(new Error("Failed to load image")), a.src = n;
|
|
29733
|
+
});
|
|
29734
|
+
}
|
|
29735
|
+
/**
|
|
29736
|
+
* Validate imported data before applying to state
|
|
29737
|
+
*/
|
|
29738
|
+
static validateImportedData(n, e) {
|
|
29739
|
+
const t = [], a = /* @__PURE__ */ new Set();
|
|
29740
|
+
n.forEach((s) => {
|
|
29741
|
+
a.has(s.id) && t.push(`Duplicate artboard ID: ${s.id}`), a.add(s.id);
|
|
29742
|
+
});
|
|
29743
|
+
const r = /* @__PURE__ */ new Set();
|
|
29744
|
+
return e.forEach((s) => {
|
|
29745
|
+
r.has(s.id) && t.push(`Duplicate element ID: ${s.id}`), r.add(s.id);
|
|
29746
|
+
}), n.forEach((s) => {
|
|
29747
|
+
s.getElementIds().forEach((o) => {
|
|
29748
|
+
r.has(o) || t.push(`Artboard "${s.name}" references missing element: ${o}`);
|
|
29749
|
+
});
|
|
29750
|
+
}), {
|
|
29751
|
+
valid: t.length === 0,
|
|
29752
|
+
errors: t
|
|
29753
|
+
};
|
|
29754
|
+
}
|
|
29755
|
+
/**
|
|
29756
|
+
* Get import summary (for UI display before confirming)
|
|
29757
|
+
*/
|
|
29758
|
+
static getImportSummary(n, e) {
|
|
29759
|
+
const t = this.validateImportedData(n, e);
|
|
29760
|
+
return {
|
|
29761
|
+
artboardCount: n.length,
|
|
29762
|
+
elementCount: e.length,
|
|
29763
|
+
artboardNames: n.map((a) => a.name),
|
|
29764
|
+
warnings: t.errors
|
|
29765
|
+
};
|
|
29766
|
+
}
|
|
29767
|
+
/**
|
|
29768
|
+
* Preload all images in parallel for fast artboard switching
|
|
29769
|
+
* Recursively finds all ImageElements (including those in groups)
|
|
29770
|
+
*/
|
|
29771
|
+
static async preloadAllImages(n) {
|
|
29772
|
+
const e = [], t = (r) => {
|
|
29773
|
+
r.transformType === "image" ? e.push(r) : r.transformType === "group" && "children" in r && r.children.forEach((s) => t(s));
|
|
29774
|
+
};
|
|
29775
|
+
n.forEach(t);
|
|
29776
|
+
const a = e.map((r) => new Promise((s) => {
|
|
29777
|
+
if (r.imageLoaded)
|
|
29778
|
+
s();
|
|
29779
|
+
else if (r.imageElement) {
|
|
29780
|
+
const o = r.imageElement, l = () => {
|
|
29781
|
+
o.removeEventListener("load", l), o.removeEventListener("error", c), s();
|
|
29782
|
+
}, c = () => {
|
|
29783
|
+
o.removeEventListener("load", l), o.removeEventListener("error", c), s();
|
|
29784
|
+
};
|
|
29785
|
+
o.addEventListener("load", l), o.addEventListener("error", c);
|
|
29786
|
+
} else
|
|
29787
|
+
s();
|
|
29788
|
+
}));
|
|
29789
|
+
await Promise.all(a);
|
|
29790
|
+
}
|
|
29791
|
+
};
|
|
29792
|
+
Ce.SUPPORTED_VERSIONS = ["1.0.0", "2.0.0"];
|
|
29793
|
+
let Ye = Ce;
|
|
29576
29794
|
export {
|
|
29577
|
-
|
|
29578
|
-
|
|
29579
|
-
|
|
29580
|
-
|
|
29581
|
-
|
|
29582
|
-
|
|
29583
|
-
|
|
29584
|
-
|
|
29585
|
-
|
|
29586
|
-
|
|
29587
|
-
|
|
29588
|
-
|
|
29589
|
-
|
|
29590
|
-
|
|
29591
|
-
|
|
29592
|
-
|
|
29593
|
-
|
|
29594
|
-
|
|
29595
|
-
|
|
29596
|
-
|
|
29597
|
-
|
|
29598
|
-
|
|
29599
|
-
|
|
29600
|
-
|
|
29601
|
-
|
|
29602
|
-
|
|
29603
|
-
|
|
29604
|
-
|
|
29605
|
-
|
|
29606
|
-
|
|
29607
|
-
|
|
29608
|
-
|
|
29609
|
-
|
|
29610
|
-
|
|
29611
|
-
|
|
29612
|
-
|
|
29613
|
-
|
|
29795
|
+
at as A,
|
|
29796
|
+
xr as B,
|
|
29797
|
+
We as C,
|
|
29798
|
+
Ua as D,
|
|
29799
|
+
ne as E,
|
|
29800
|
+
pt as F,
|
|
29801
|
+
Ye as I,
|
|
29802
|
+
_a as M,
|
|
29803
|
+
ea as R,
|
|
29804
|
+
lr as S,
|
|
29805
|
+
rr as T,
|
|
29806
|
+
Wn as W,
|
|
29807
|
+
ra as a,
|
|
29808
|
+
fr as b,
|
|
29809
|
+
dr as c,
|
|
29810
|
+
cr as d,
|
|
29811
|
+
tr as e,
|
|
29812
|
+
er as f,
|
|
29813
|
+
Pe as g,
|
|
29814
|
+
sr as h,
|
|
29815
|
+
ce as i,
|
|
29816
|
+
or as j,
|
|
29817
|
+
ir as k,
|
|
29818
|
+
Ha as l,
|
|
29819
|
+
Xe as m,
|
|
29820
|
+
cn as n,
|
|
29821
|
+
Ea as o,
|
|
29822
|
+
gr as p,
|
|
29823
|
+
ht as q,
|
|
29824
|
+
ar as r,
|
|
29825
|
+
br as s,
|
|
29826
|
+
pr as t,
|
|
29827
|
+
xe as u,
|
|
29828
|
+
yr as v,
|
|
29829
|
+
hr as w,
|
|
29830
|
+
mr as x,
|
|
29831
|
+
ur as y,
|
|
29832
|
+
An as z
|
|
29614
29833
|
};
|
|
29615
|
-
//# sourceMappingURL=
|
|
29834
|
+
//# sourceMappingURL=ImportManager-Oqu2yB54.js.map
|