@snowcone-app/canvas 0.31.0 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ERROR_CONTRACT.md +11 -0
- package/STYLING_CONTRACT.md +3 -3
- package/dist/{CanvasRenderer-hpJ05JGO.js → CanvasRenderer-1j-twIbs.js} +443 -431
- package/dist/{CanvasRenderer-hpJ05JGO.js.map → CanvasRenderer-1j-twIbs.js.map} +1 -1
- package/dist/{CanvasStateV1-jLOibojY.js → CanvasStateV1-BmC1JfPv.js} +810 -802
- package/dist/{CanvasStateV1-jLOibojY.js.map → CanvasStateV1-BmC1JfPv.js.map} +1 -1
- package/dist/ContextualToolbars-BKU8IoAM.js +6474 -0
- package/dist/ContextualToolbars-BKU8IoAM.js.map +1 -0
- package/dist/{EditorCanvasImpl-P2GHPNA3.js → EditorCanvasImpl-4voOsj2k.js} +7 -7
- package/dist/{EditorCanvasImpl-P2GHPNA3.js.map → EditorCanvasImpl-4voOsj2k.js.map} +1 -1
- package/dist/{ExportManager-Bkzzyxgw.js → ExportManager-Ci81K6xA.js} +662 -518
- package/dist/ExportManager-Ci81K6xA.js.map +1 -0
- package/dist/{FontAnalyzer-BYhwxDhe.js → FontAnalyzer-BrKY6XYn.js} +1256 -1146
- package/dist/FontAnalyzer-BrKY6XYn.js.map +1 -0
- package/dist/{ImagePanel-CEr0_FYy.js → ImagePanel-ntJBepby.js} +6 -6
- package/dist/{ImagePanel-CEr0_FYy.js.map → ImagePanel-ntJBepby.js.map} +1 -1
- package/dist/{SnowconeCanvas-Fa0isFpO.js → SnowconeCanvas-CgQdiBXv.js} +10 -10
- package/dist/{SnowconeCanvas-Fa0isFpO.js.map → SnowconeCanvas-CgQdiBXv.js.map} +1 -1
- package/dist/advanced.mjs +14 -14
- package/dist/components/ImageToolbar.d.ts +8 -0
- package/dist/components/ShapeToolbar.d.ts +8 -0
- package/dist/components/TextToolbar.d.ts +5 -1
- package/dist/components/toolbars/EmbeddedToolbarLayout.d.ts +4 -0
- package/dist/components/toolbars/GroupElementToolbar.d.ts +8 -0
- package/dist/components/toolbars/SecondaryPanels.d.ts +24 -1
- package/dist/components/toolbars/index.d.ts +2 -2
- package/dist/core/BaseElement.d.ts +2 -1
- package/dist/core/shape-fill.d.ts +31 -0
- package/dist/{custom-icons-Co4rcW0S.js → custom-icons-DTWtkJ9N.js} +2 -2
- package/dist/{custom-icons-Co4rcW0S.js.map → custom-icons-DTWtkJ9N.js.map} +1 -1
- package/dist/{design-builder-CBG2hKc8.js → design-builder-BpbYUYtK.js} +55 -55
- package/dist/{design-builder-CBG2hKc8.js.map → design-builder-BpbYUYtK.js.map} +1 -1
- package/dist/{embed-D4TIzO7g.js → embed-C69x0jHc.js} +10 -10
- package/dist/{embed-D4TIzO7g.js.map → embed-C69x0jHc.js.map} +1 -1
- package/dist/embed.mjs +7 -7
- package/dist/errors/editorError.d.ts +7 -0
- package/dist/{guards-DgZuwVgu.js → guards-BhaQgJrE.js} +2 -2
- package/dist/{guards-DgZuwVgu.js.map → guards-BhaQgJrE.js.map} +1 -1
- package/dist/hooks/elementPatch.d.ts +8 -3
- package/dist/index.mjs +9 -9
- package/dist/internals.mjs +123 -123
- package/dist/internals.mjs.map +1 -1
- package/dist/rendering/LayerEffectsRenderer.d.ts +24 -0
- package/dist/rendering/renderer-types.d.ts +3 -1
- package/dist/state/CanvasStateV1.d.ts +17 -0
- package/dist/style.css +1 -1
- package/dist/{template-fields-CvFcr5zy.js → template-fields-D-2oLhCi.js} +5 -5
- package/dist/{template-fields-CvFcr5zy.js.map → template-fields-D-2oLhCi.js.map} +1 -1
- package/dist/testing.mjs +3 -3
- package/dist/types/index.d.ts +84 -1
- package/dist/types/public.d.ts +3 -2
- package/dist/{useCommands-bPXY9rCh.js → useCommands-DwnZHUg8.js} +435 -418
- package/dist/useCommands-DwnZHUg8.js.map +1 -0
- package/dist/{usePieceGuideBundle-Bj98nPk0.js → usePieceGuideBundle-CnSmYrmM.js} +2 -2
- package/dist/{usePieceGuideBundle-Bj98nPk0.js.map → usePieceGuideBundle-CnSmYrmM.js.map} +1 -1
- package/dist/utils/featureApplied.d.ts +4 -0
- package/dist/{validation-CsTlSvJJ.js → validation-DyUOjRGa.js} +11 -11
- package/dist/{validation-CsTlSvJJ.js.map → validation-DyUOjRGa.js.map} +1 -1
- package/dist/workers/export-worker.bundle.string.d.ts +1 -1
- package/example/package.json +1 -1
- package/package.json +1 -1
- package/dist/ContextualToolbars-DRbuUE7W.js +0 -6061
- package/dist/ContextualToolbars-DRbuUE7W.js.map +0 -1
- package/dist/ExportManager-Bkzzyxgw.js.map +0 -1
- package/dist/FontAnalyzer-BYhwxDhe.js.map +0 -1
- package/dist/useCommands-bPXY9rCh.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { T as Wt, b as
|
|
3
|
-
import { i as
|
|
1
|
+
import { a5 as ie, a6 as ae, aF as nt, a7 as Ot, aS as re, aQ as le, aJ as Yt, aP as he, aI as gt, aT as ce, aU as Gt, aV as de, aW as fe, c as Jt, aX as ge, aY as ue, aZ as pe, a_ as ye, ae as Qt, aa as te, ai as pt, ab as ee, ac as Lt, aj as Xt, ah as Pt, ak as Nt, af as be, al as Se, a$ as Kt, b0 as me, b1 as Te, b2 as we, I as ve, b3 as xe, b4 as Me, b5 as tt } from "./FontAnalyzer-BrKY6XYn.js";
|
|
2
|
+
import { T as Wt, b as Re, y as Ce, O as ke, P as Dt, F as At, Q as Pe, R as Ae, S as Ee, U as $t } from "./ExportManager-Ci81K6xA.js";
|
|
3
|
+
import { i as _t, a as He } from "./guards-BhaQgJrE.js";
|
|
4
4
|
const ct = {
|
|
5
5
|
// Canvas-specific
|
|
6
6
|
canvas: {
|
|
@@ -15,30 +15,30 @@ const ct = {
|
|
|
15
15
|
spacingLabelFontSize: 11,
|
|
16
16
|
spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
|
17
17
|
}
|
|
18
|
-
},
|
|
19
|
-
function
|
|
20
|
-
return
|
|
18
|
+
}, Ie = 2, Ct = 6, Be = 16, Le = 5, We = 5, ne = 0.5;
|
|
19
|
+
function jt(x) {
|
|
20
|
+
return Ie / x;
|
|
21
21
|
}
|
|
22
|
-
function
|
|
23
|
-
return
|
|
22
|
+
function Ue(x) {
|
|
23
|
+
return Ct / x;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
26
|
-
return
|
|
25
|
+
function De(x) {
|
|
26
|
+
return Be / x;
|
|
27
27
|
}
|
|
28
|
-
function
|
|
29
|
-
return [
|
|
28
|
+
function Ze(x) {
|
|
29
|
+
return [Le / x, We / x];
|
|
30
30
|
}
|
|
31
|
-
function
|
|
32
|
-
|
|
33
|
-
const n =
|
|
34
|
-
|
|
31
|
+
function _e(x, t, e, o) {
|
|
32
|
+
x.save();
|
|
33
|
+
const n = ne / o;
|
|
34
|
+
x.translate(t, e), x.scale(n, n), x.strokeStyle = "#000", x.lineWidth = 1.5, x.lineCap = "round", x.lineJoin = "round", x.translate(-12, -12), x.beginPath(), x.moveTo(21, 12), x.arc(12, 12, 9, 0, -Math.PI / 2, !0), x.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), x.stroke(), x.beginPath(), x.moveTo(3, 3), x.lineTo(3, 8), x.lineTo(8, 8), x.stroke(), x.beginPath(), x.moveTo(3, 12), x.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), x.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), x.stroke(), x.beginPath(), x.moveTo(16, 16), x.lineTo(21, 16), x.lineTo(21, 21), x.stroke(), x.restore();
|
|
35
35
|
}
|
|
36
|
-
function
|
|
37
|
-
const i =
|
|
38
|
-
|
|
36
|
+
function Je(x, t, e, o = 1, n = "#3b82f6", s = !1) {
|
|
37
|
+
const i = De(o);
|
|
38
|
+
x.save(), x.fillStyle = "#fff", x.strokeStyle = n, x.lineWidth = s ? jt(o) * 1.25 : jt(o), x.beginPath(), x.arc(t, e, i, 0, Math.PI * 2), x.fill(), x.stroke(), _e(x, t, e, o), x.restore();
|
|
39
39
|
}
|
|
40
|
-
const
|
|
41
|
-
class
|
|
40
|
+
const qt = Ct * 2;
|
|
41
|
+
class Qe {
|
|
42
42
|
constructor() {
|
|
43
43
|
this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
|
|
44
44
|
}
|
|
@@ -55,8 +55,8 @@ class Je {
|
|
|
55
55
|
y: n.y - a,
|
|
56
56
|
width: n.width + a * 2,
|
|
57
57
|
height: n.height + a * 2
|
|
58
|
-
}, l =
|
|
59
|
-
this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle =
|
|
58
|
+
}, l = ie(r, t.rotation, s), h = Math.abs(t.rotation % 360) > 0.1;
|
|
59
|
+
this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle = ae(
|
|
60
60
|
r,
|
|
61
61
|
t.rotation,
|
|
62
62
|
s,
|
|
@@ -85,10 +85,10 @@ class Je {
|
|
|
85
85
|
if (e.anchor.includes("middle")) {
|
|
86
86
|
const l = e.anchor === "middle-top" || e.anchor === "middle-bottom";
|
|
87
87
|
t.translate(i, a), t.rotate(-this.elementRotation * Math.PI / 180), l && t.rotate(Math.PI / 2), t.translate(-i, -a);
|
|
88
|
-
const h =
|
|
88
|
+
const h = qt * 0.6, c = qt * 1.4, d = h / 2, f = i - h / 2, b = a - c / 2;
|
|
89
89
|
t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.roundRect(f, b, h, c, d), t.fill(), t.stroke();
|
|
90
90
|
} else
|
|
91
|
-
t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a,
|
|
91
|
+
t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Ct, 0, Math.PI * 2), t.fill(), t.stroke();
|
|
92
92
|
t.restore();
|
|
93
93
|
}
|
|
94
94
|
/**
|
|
@@ -97,9 +97,9 @@ class Je {
|
|
|
97
97
|
*/
|
|
98
98
|
renderRotationHandle(t, e, o = !1, n = 1) {
|
|
99
99
|
t.save();
|
|
100
|
-
const s = e.x * n, i = e.y * n, a =
|
|
100
|
+
const s = e.x * n, i = e.y * n, a = Ct * 2.67;
|
|
101
101
|
t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o ? 2.5 : 2, t.beginPath(), t.arc(s, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
|
|
102
|
-
const r =
|
|
102
|
+
const r = ne;
|
|
103
103
|
t.translate(s, i), t.scale(r, r), t.strokeStyle = "#000", t.lineWidth = 1.5, t.lineCap = "round", t.lineJoin = "round", t.translate(-12, -12), t.beginPath(), t.moveTo(21, 12), t.arc(12, 12, 9, 0, -Math.PI / 2, !0), t.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), t.stroke(), t.beginPath(), t.moveTo(3, 3), t.lineTo(3, 8), t.lineTo(8, 8), t.stroke(), t.beginPath(), t.moveTo(3, 12), t.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), t.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), t.stroke(), t.beginPath(), t.moveTo(16, 16), t.lineTo(21, 16), t.lineTo(21, 21), t.stroke(), t.restore();
|
|
104
104
|
}
|
|
105
105
|
/**
|
|
@@ -115,9 +115,9 @@ class Je {
|
|
|
115
115
|
* @param zoom - Current zoom level (radius scales inversely with zoom)
|
|
116
116
|
*/
|
|
117
117
|
hitTestResize(t, e, o = 1) {
|
|
118
|
-
const n =
|
|
118
|
+
const n = le / o;
|
|
119
119
|
for (const s of this.resizeHandles)
|
|
120
|
-
if (
|
|
120
|
+
if (Ot(t, e, s.x, s.y, n))
|
|
121
121
|
return s;
|
|
122
122
|
return null;
|
|
123
123
|
}
|
|
@@ -127,8 +127,8 @@ class Je {
|
|
|
127
127
|
*/
|
|
128
128
|
hitTestRotation(t, e, o = 1) {
|
|
129
129
|
if (!this.rotationHandle) return !1;
|
|
130
|
-
const n = (
|
|
131
|
-
return
|
|
130
|
+
const n = (Ct * 2.67 + 2) / o;
|
|
131
|
+
return Ot(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
|
|
132
132
|
}
|
|
133
133
|
/**
|
|
134
134
|
* Get rotation handle position (for React-based rendering)
|
|
@@ -143,7 +143,7 @@ class Je {
|
|
|
143
143
|
*/
|
|
144
144
|
getCursor(t, e) {
|
|
145
145
|
const o = t.anchor.includes("middle") ? "edge" : "corner";
|
|
146
|
-
return
|
|
146
|
+
return re(
|
|
147
147
|
t.x,
|
|
148
148
|
t.y,
|
|
149
149
|
this.rotationAnchor.x,
|
|
@@ -154,19 +154,19 @@ class Je {
|
|
|
154
154
|
);
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
|
-
const
|
|
158
|
-
function
|
|
159
|
-
return Math.abs(
|
|
157
|
+
const ze = 15;
|
|
158
|
+
function Ve(x, t) {
|
|
159
|
+
return Math.abs(x) >= Math.abs(t) ? "x" : "y";
|
|
160
160
|
}
|
|
161
|
-
function
|
|
162
|
-
return e != null && e.shift ?
|
|
161
|
+
function Fe(x, t, e) {
|
|
162
|
+
return e != null && e.shift ? Ve(x, t) === "x" ? { dx: x, dy: 0, lockedAxis: "y" } : { dx: 0, dy: t, lockedAxis: "x" } : { dx: x, dy: t, lockedAxis: null };
|
|
163
163
|
}
|
|
164
|
-
function
|
|
165
|
-
let o = (Math.round(
|
|
164
|
+
function Oe(x, t = ze) {
|
|
165
|
+
let o = (Math.round(x / t) * t % 360 + 360) % 360;
|
|
166
166
|
return o > 180 && (o -= 360), o === 0 ? 0 : o;
|
|
167
167
|
}
|
|
168
|
-
function
|
|
169
|
-
anchor:
|
|
168
|
+
function Ye({
|
|
169
|
+
anchor: x,
|
|
170
170
|
startVisualWidth: t,
|
|
171
171
|
startVisualHeight: e,
|
|
172
172
|
newVisualWidth: o,
|
|
@@ -174,13 +174,13 @@ function Oe({
|
|
|
174
174
|
}) {
|
|
175
175
|
const s = t !== 0 ? t : 1, i = e !== 0 ? e : 1, a = o / s, r = n / i;
|
|
176
176
|
let l;
|
|
177
|
-
return
|
|
177
|
+
return x === "middle-left" || x === "middle-right" ? l = a : x === "middle-top" || x === "middle-bottom" ? l = r : l = Math.abs(a - 1) >= Math.abs(r - 1) ? a : r, {
|
|
178
178
|
scale: l,
|
|
179
179
|
newVisualWidth: t * l,
|
|
180
180
|
newVisualHeight: e * l
|
|
181
181
|
};
|
|
182
182
|
}
|
|
183
|
-
class
|
|
183
|
+
class Ge {
|
|
184
184
|
/**
|
|
185
185
|
* Calculate new dimensions and position for a resize operation
|
|
186
186
|
*/
|
|
@@ -193,14 +193,14 @@ class Ye {
|
|
|
193
193
|
snapSystem: i,
|
|
194
194
|
modifiers: a
|
|
195
195
|
}) {
|
|
196
|
-
var F,
|
|
197
|
-
const l = new
|
|
196
|
+
var F, D, N, j, H;
|
|
197
|
+
const l = new Yt(t).worldDeltaToLocal(o, n), h = l.dx, c = l.dy, d = s.visualWidth ?? s.width ?? 0, f = s.visualHeight ?? s.height ?? 0, b = s.width ?? 0, u = s.height ?? 0;
|
|
198
198
|
let p = d, g = f;
|
|
199
199
|
e.anchor.includes("right") ? p = d + h : e.anchor.includes("left") && (p = d - h), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? g = f + c : e.anchor.includes("top") && (g = f - c));
|
|
200
200
|
const y = (a == null ? void 0 : a.shift) === !0;
|
|
201
201
|
let S = null;
|
|
202
202
|
if (y) {
|
|
203
|
-
const z =
|
|
203
|
+
const z = Ye({
|
|
204
204
|
anchor: e.anchor,
|
|
205
205
|
startVisualWidth: d,
|
|
206
206
|
startVisualHeight: f,
|
|
@@ -219,50 +219,50 @@ class Ye {
|
|
|
219
219
|
const z = g - f;
|
|
220
220
|
m = b, w = u + z;
|
|
221
221
|
} else {
|
|
222
|
-
const z = p / d,
|
|
223
|
-
m = b * z, w = u *
|
|
222
|
+
const z = p / d, K = g / f;
|
|
223
|
+
m = b * z, w = u * K;
|
|
224
224
|
}
|
|
225
|
-
const T = p,
|
|
226
|
-
let
|
|
225
|
+
const T = p, R = g;
|
|
226
|
+
let C = !1;
|
|
227
227
|
if (i && t.transformType === "image") {
|
|
228
|
-
const z = e.anchor ?? "",
|
|
229
|
-
if (
|
|
230
|
-
const
|
|
231
|
-
if (!!
|
|
232
|
-
const G = [
|
|
233
|
-
(
|
|
228
|
+
const z = e.anchor ?? "", K = z === "top-left" || z === "top-right" || z === "bottom-left" || z === "bottom-right", Q = z.startsWith("crop-");
|
|
229
|
+
if (K && !Q) {
|
|
230
|
+
const L = (F = i.activeSnaps) == null ? void 0 : F.x, A = (D = i.activeSnaps) == null ? void 0 : D.y;
|
|
231
|
+
if (!!L || !!A) {
|
|
232
|
+
const G = [L, A].find(
|
|
233
|
+
(E) => typeof E == "object" && E !== null && "frozenWidth" in E
|
|
234
234
|
);
|
|
235
235
|
if (G) {
|
|
236
|
-
const
|
|
236
|
+
const E = t, _ = s.transformData, U = G.frozenWidth ?? ((N = E.transformData) == null ? void 0 : N.width) ?? b, ot = E.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
|
|
237
237
|
let et = G.frozenHeight;
|
|
238
|
-
et == null && (ot && ot !== 0 ? et =
|
|
239
|
-
const lt = b !== 0 ?
|
|
240
|
-
p = d * lt, g = f * Y, m =
|
|
238
|
+
et == null && (ot && ot !== 0 ? et = U / ot : (j = E.transformData) != null && j.height ? et = E.transformData.height : et = u);
|
|
239
|
+
const lt = b !== 0 ? U / b : 1, Y = u !== 0 ? et / u : 1;
|
|
240
|
+
p = d * lt, g = f * Y, m = U, w = et, C = !0;
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
245
|
m = Math.max(50, m), w = Math.max(40, w);
|
|
246
|
-
const
|
|
247
|
-
if (!e.anchor.includes("middle") && ((
|
|
248
|
-
const z = s.width ?? 1,
|
|
249
|
-
|
|
246
|
+
const M = t.clone(), I = M.resize(e.anchor, m, w, s);
|
|
247
|
+
if (!e.anchor.includes("middle") && ((H = M.stroke) != null && H.enabled) && s.strokeWidth !== void 0 && s.strokeWidth > 0) {
|
|
248
|
+
const z = s.width ?? 1, K = s.height ?? 1, Q = Math.sqrt(m / z * (w / K)), L = Math.max(1, Math.round(s.strokeWidth * Q * 10) / 10);
|
|
249
|
+
M.stroke = { ...M.stroke, width: L };
|
|
250
250
|
}
|
|
251
|
-
const
|
|
252
|
-
if (
|
|
253
|
-
const z = t.getRotationAnchor(),
|
|
251
|
+
const P = C || I === !1, k = e.anchor.includes("top") || e.anchor.includes("bottom"), B = "isCropping" in M && M.isCropping, W = "isGroup" in M && M.isGroup;
|
|
252
|
+
if (k && !B && !W) {
|
|
253
|
+
const z = t.getRotationAnchor(), K = this._calculateFixedCornerOffset({
|
|
254
254
|
element: t,
|
|
255
|
-
updatedElement:
|
|
255
|
+
updatedElement: M,
|
|
256
256
|
handle: e,
|
|
257
257
|
rotationAnchor: z
|
|
258
258
|
});
|
|
259
|
-
|
|
259
|
+
M.x += K.x, M.y += K.y;
|
|
260
260
|
}
|
|
261
261
|
return {
|
|
262
|
-
element:
|
|
263
|
-
isFrozen:
|
|
262
|
+
element: M,
|
|
263
|
+
isFrozen: P,
|
|
264
264
|
// For snap system to detect break-free: dimensions before freeze was applied
|
|
265
|
-
unfrozenDimensions:
|
|
265
|
+
unfrozenDimensions: C ? { width: T, height: R } : void 0
|
|
266
266
|
};
|
|
267
267
|
}
|
|
268
268
|
/**
|
|
@@ -276,10 +276,10 @@ class Ye {
|
|
|
276
276
|
handle: o,
|
|
277
277
|
rotationAnchor: n
|
|
278
278
|
}) {
|
|
279
|
-
const s = new
|
|
279
|
+
const s = new Yt(t), { cos: i, sin: a } = s.getRenderingCosSin(), r = t.getVisualBoundingBox(), l = e.getVisualBoundingBox(), h = n, c = e.getRotationAnchor(), d = this._getFixedLocalCoords(o.anchor, r.width, r.height), f = d.x, b = d.y, u = r.x - h.x, p = r.y - h.y, g = u + f, y = p + b, S = g * i - y * a, m = g * a + y * i, w = h.x + S, T = h.y + m, R = this._getFixedLocalCoords(o.anchor, l.width, l.height), C = R.x, M = R.y, I = l.x - c.x, v = l.y - c.y, P = I + C, k = v + M, B = P * i - k * a, W = P * a + k * i, F = c.x + B, D = c.y + W;
|
|
280
280
|
return {
|
|
281
281
|
x: w - F,
|
|
282
|
-
y: T -
|
|
282
|
+
y: T - D
|
|
283
283
|
};
|
|
284
284
|
}
|
|
285
285
|
/**
|
|
@@ -317,7 +317,7 @@ class Ye {
|
|
|
317
317
|
return n;
|
|
318
318
|
}
|
|
319
319
|
}
|
|
320
|
-
class
|
|
320
|
+
class Xe {
|
|
321
321
|
constructor() {
|
|
322
322
|
this.hooks = {
|
|
323
323
|
beforeResize: [],
|
|
@@ -372,7 +372,7 @@ class Ge {
|
|
|
372
372
|
*/
|
|
373
373
|
executeResize(t) {
|
|
374
374
|
const e = this.runHooks("beforeResize", t);
|
|
375
|
-
let o =
|
|
375
|
+
let o = Ge.calculateResize({
|
|
376
376
|
...e,
|
|
377
377
|
snapSystem: t.snapSystem,
|
|
378
378
|
modifiers: t.modifiers
|
|
@@ -388,8 +388,8 @@ class Ge {
|
|
|
388
388
|
return this.runHooks("afterPositionUpdate", o).position;
|
|
389
389
|
}
|
|
390
390
|
}
|
|
391
|
-
const
|
|
392
|
-
class
|
|
391
|
+
const tn = new Xe();
|
|
392
|
+
class en {
|
|
393
393
|
constructor(t = null) {
|
|
394
394
|
this.state = "IDLE", this.context = {
|
|
395
395
|
mode: null,
|
|
@@ -484,7 +484,7 @@ class tn {
|
|
|
484
484
|
updateDrag(t, e, o = null, n) {
|
|
485
485
|
if (this.state !== "DRAGGING")
|
|
486
486
|
throw new Error("Cannot update drag: not in DRAGGING state");
|
|
487
|
-
const s = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } =
|
|
487
|
+
const s = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } = Fe(s, i, n), h = this.context.startData;
|
|
488
488
|
let c = h.x + a, d = h.y + r;
|
|
489
489
|
if (this.snapHandler && this.snapHandler.snapPosition && this.context.element) {
|
|
490
490
|
const f = this.snapHandler.snapPosition({ x: c, y: d }, this.context.element, o);
|
|
@@ -600,9 +600,9 @@ class tn {
|
|
|
600
600
|
updateRotate(t, e, o, n, s) {
|
|
601
601
|
if (this.state !== "ROTATING")
|
|
602
602
|
throw new Error("Cannot update rotate: not in ROTATING state");
|
|
603
|
-
const i = this.context.startData, r = (
|
|
603
|
+
const i = this.context.startData, r = (he(o, n, t, e) - i.startAngle) * 180 / Math.PI;
|
|
604
604
|
let l = i.currentRotation - r;
|
|
605
|
-
return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), s != null && s.shift ?
|
|
605
|
+
return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), s != null && s.shift ? Oe(l) : this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(l, this.context.element) : l;
|
|
606
606
|
}
|
|
607
607
|
/**
|
|
608
608
|
* Get rotation context
|
|
@@ -824,7 +824,7 @@ class mt {
|
|
|
824
824
|
return Math.abs(n.x - o.x) > s || Math.abs(n.y - o.y) > s;
|
|
825
825
|
}
|
|
826
826
|
}
|
|
827
|
-
class
|
|
827
|
+
class Ut {
|
|
828
828
|
constructor(t) {
|
|
829
829
|
this.cellSize = t, this.cells = /* @__PURE__ */ new Map(), this.idIndex = /* @__PURE__ */ new Map();
|
|
830
830
|
}
|
|
@@ -920,32 +920,32 @@ class qt {
|
|
|
920
920
|
return `${Math.floor(t / this.cellSize)},${Math.floor(e / this.cellSize)}`;
|
|
921
921
|
}
|
|
922
922
|
}
|
|
923
|
-
function ft(
|
|
924
|
-
const t =
|
|
923
|
+
function ft(x) {
|
|
924
|
+
const t = x.transformData;
|
|
925
925
|
if (t && "width" in t && typeof t.width == "number")
|
|
926
926
|
return t.width;
|
|
927
927
|
}
|
|
928
|
-
function Tt(
|
|
929
|
-
const t =
|
|
928
|
+
function Tt(x) {
|
|
929
|
+
const t = x.transformData;
|
|
930
930
|
if (t && "height" in t && typeof t.height == "number")
|
|
931
931
|
return t.height;
|
|
932
932
|
}
|
|
933
|
-
function
|
|
934
|
-
const e =
|
|
933
|
+
function Mt(x, t) {
|
|
934
|
+
const e = x.transformData;
|
|
935
935
|
return e && "width" in e ? (e.width = t, !0) : !1;
|
|
936
936
|
}
|
|
937
|
-
function Et(
|
|
938
|
-
const e =
|
|
937
|
+
function Et(x, t) {
|
|
938
|
+
const e = x.transformData;
|
|
939
939
|
return e && "height" in e ? (e.height = t, !0) : !1;
|
|
940
940
|
}
|
|
941
|
-
class
|
|
941
|
+
class nn {
|
|
942
942
|
constructor(t = {}) {
|
|
943
943
|
this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || ct.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
|
|
944
944
|
x: null,
|
|
945
945
|
// { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
|
|
946
946
|
y: null
|
|
947
947
|
// { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
|
|
948
|
-
}, this.stickyThreshold = t.stickyThreshold || 15, this._spatialGrid = new
|
|
948
|
+
}, this.stickyThreshold = t.stickyThreshold || 15, this._spatialGrid = new Ut(Math.max(this.snapThreshold * 2, 16)), this._anchorMetadata = /* @__PURE__ */ new Map();
|
|
949
949
|
}
|
|
950
950
|
/**
|
|
951
951
|
* Enable or disable snapping
|
|
@@ -957,7 +957,7 @@ class en {
|
|
|
957
957
|
* Set snap threshold in pixels
|
|
958
958
|
*/
|
|
959
959
|
setSnapThreshold(t) {
|
|
960
|
-
this.snapThreshold = t, this._spatialGrid = new
|
|
960
|
+
this.snapThreshold = t, this._spatialGrid = new Ut(Math.max(t * 2, 16));
|
|
961
961
|
}
|
|
962
962
|
/**
|
|
963
963
|
* Get current snap guides for rendering
|
|
@@ -1052,47 +1052,47 @@ class en {
|
|
|
1052
1052
|
for (const [y, S] of Object.entries(s)) {
|
|
1053
1053
|
const m = this._spatialGrid.queryNearAxis("x", S.x, this.snapThreshold);
|
|
1054
1054
|
for (const T of m) {
|
|
1055
|
-
const
|
|
1056
|
-
if (!
|
|
1057
|
-
const
|
|
1058
|
-
if (
|
|
1059
|
-
const
|
|
1060
|
-
snapTo:
|
|
1055
|
+
const R = this._anchorMetadata.get(T.id);
|
|
1056
|
+
if (!R) continue;
|
|
1057
|
+
const C = R.point, M = R.anchorKey, I = Math.abs(S.x - C.x);
|
|
1058
|
+
if (I < this.snapThreshold) {
|
|
1059
|
+
const v = {
|
|
1060
|
+
snapTo: C.x,
|
|
1061
1061
|
offset: S.x - t.x,
|
|
1062
1062
|
// How far anchor is from element position
|
|
1063
|
-
distance:
|
|
1063
|
+
distance: I,
|
|
1064
1064
|
guide: {
|
|
1065
1065
|
type: "vertical",
|
|
1066
|
-
x:
|
|
1067
|
-
y1: Math.min(S.y,
|
|
1068
|
-
y2: Math.max(S.y,
|
|
1066
|
+
x: C.x,
|
|
1067
|
+
y1: Math.min(S.y, C.y) - 50,
|
|
1068
|
+
y2: Math.max(S.y, C.y) + 50,
|
|
1069
1069
|
movingKey: y,
|
|
1070
|
-
otherKey:
|
|
1070
|
+
otherKey: M
|
|
1071
1071
|
}
|
|
1072
1072
|
};
|
|
1073
|
-
c.push(
|
|
1073
|
+
c.push(v), I < l && (l = I, a = v);
|
|
1074
1074
|
}
|
|
1075
1075
|
}
|
|
1076
1076
|
const w = this._spatialGrid.queryNearAxis("y", S.y, this.snapThreshold);
|
|
1077
1077
|
for (const T of w) {
|
|
1078
|
-
const
|
|
1079
|
-
if (!
|
|
1080
|
-
const
|
|
1081
|
-
if (
|
|
1082
|
-
const
|
|
1083
|
-
snapTo:
|
|
1078
|
+
const R = this._anchorMetadata.get(T.id);
|
|
1079
|
+
if (!R) continue;
|
|
1080
|
+
const C = R.point, M = R.anchorKey, I = Math.abs(S.y - C.y);
|
|
1081
|
+
if (I < this.snapThreshold) {
|
|
1082
|
+
const v = {
|
|
1083
|
+
snapTo: C.y,
|
|
1084
1084
|
offset: S.y - t.y,
|
|
1085
|
-
distance:
|
|
1085
|
+
distance: I,
|
|
1086
1086
|
guide: {
|
|
1087
1087
|
type: "horizontal",
|
|
1088
|
-
y:
|
|
1089
|
-
x1: Math.min(S.x,
|
|
1090
|
-
x2: Math.max(S.x,
|
|
1088
|
+
y: C.y,
|
|
1089
|
+
x1: Math.min(S.x, C.x) - 50,
|
|
1090
|
+
x2: Math.max(S.x, C.x) + 50,
|
|
1091
1091
|
movingKey: y,
|
|
1092
|
-
otherKey:
|
|
1092
|
+
otherKey: M
|
|
1093
1093
|
}
|
|
1094
1094
|
};
|
|
1095
|
-
d.push(
|
|
1095
|
+
d.push(v), I < h && (h = I, r = v);
|
|
1096
1096
|
}
|
|
1097
1097
|
}
|
|
1098
1098
|
}
|
|
@@ -1418,7 +1418,7 @@ class en {
|
|
|
1418
1418
|
const n = t.getVisualBoundingBox(), s = t.transformType === "image";
|
|
1419
1419
|
if (!s) {
|
|
1420
1420
|
const i = ft(t);
|
|
1421
|
-
i !== void 0 ?
|
|
1421
|
+
i !== void 0 ? Mt(t, i + e) : t.width !== void 0 && (t.width += e);
|
|
1422
1422
|
}
|
|
1423
1423
|
if (o.anchor === "middle-right") {
|
|
1424
1424
|
const i = gt.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
|
|
@@ -1435,7 +1435,7 @@ class en {
|
|
|
1435
1435
|
const n = t.getVisualBoundingBox(), s = t.transformType === "image";
|
|
1436
1436
|
if (!s) {
|
|
1437
1437
|
const i = ft(t);
|
|
1438
|
-
i !== void 0 ?
|
|
1438
|
+
i !== void 0 ? Mt(t, i - e) : t.width !== void 0 && (t.width -= e);
|
|
1439
1439
|
}
|
|
1440
1440
|
if (o.anchor === "middle-left") {
|
|
1441
1441
|
const i = gt.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
|
|
@@ -1493,22 +1493,22 @@ class en {
|
|
|
1493
1493
|
* @returns {object} Modified resize result with adjusted element
|
|
1494
1494
|
*/
|
|
1495
1495
|
snapDimensions(t, e, o = null) {
|
|
1496
|
-
var T,
|
|
1496
|
+
var T, R, C, M, I;
|
|
1497
1497
|
if (!this.enabled || !e)
|
|
1498
1498
|
return this.clearGuides(), t;
|
|
1499
1499
|
const { element: n } = t, s = t.handle;
|
|
1500
1500
|
let i;
|
|
1501
1501
|
const a = n.transformType === "image", r = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
|
|
1502
1502
|
if (a && r && t.isFrozen && t.unfrozenDimensions) {
|
|
1503
|
-
const
|
|
1504
|
-
if (
|
|
1505
|
-
const
|
|
1506
|
-
|
|
1503
|
+
const v = n.clone();
|
|
1504
|
+
if (v.transformData) {
|
|
1505
|
+
const P = n.getVisualBoundingBox(), k = P.width, B = P.height, W = (o == null ? void 0 : o.width) ?? n.width ?? 0, F = (o == null ? void 0 : o.height) ?? n.height ?? 0, D = (o == null ? void 0 : o.visualWidth) ?? k, N = (o == null ? void 0 : o.visualHeight) ?? B, j = t.unfrozenDimensions.width / D, H = t.unfrozenDimensions.height / N;
|
|
1506
|
+
Mt(v, W * j), Et(v, F * H);
|
|
1507
1507
|
}
|
|
1508
|
-
i = mt.getSnapAnchors(
|
|
1508
|
+
i = mt.getSnapAnchors(v);
|
|
1509
1509
|
} else
|
|
1510
1510
|
i = mt.getSnapAnchors(n);
|
|
1511
|
-
const l = e.filter((
|
|
1511
|
+
const l = e.filter((v) => v.id !== n.id);
|
|
1512
1512
|
if (l.length === 0)
|
|
1513
1513
|
return this.clearGuides(), t;
|
|
1514
1514
|
this._populateSpatialGrid(l);
|
|
@@ -1520,35 +1520,35 @@ class en {
|
|
|
1520
1520
|
if (a && w && (p !== 0 || g !== 0))
|
|
1521
1521
|
return t;
|
|
1522
1522
|
if (p !== 0 || g !== 0) {
|
|
1523
|
-
const
|
|
1524
|
-
if (!
|
|
1523
|
+
const v = n.clone(), P = this.activeSnaps.x || this.activeSnaps.y, k = (P == null ? void 0 : P.frozenFontSize) ?? n.fontSize ?? 0, B = (P == null ? void 0 : P.frozenWidth) ?? ft(n) ?? n.width ?? 0, W = (P == null ? void 0 : P.frozenHeight) ?? Tt(n) ?? n.height ?? 0, F = (P == null ? void 0 : P.frozenPosition) ?? { x: n.x, y: n.y }, D = v.isCropping && !String(s.anchor).startsWith("crop-");
|
|
1524
|
+
if (!D)
|
|
1525
1525
|
if (s && s.anchor) {
|
|
1526
1526
|
if (p !== 0) {
|
|
1527
|
-
const
|
|
1528
|
-
|
|
1527
|
+
const L = (T = this.activeSnaps.x) == null ? void 0 : T.anchorKey, A = L == null ? void 0 : L.toLowerCase();
|
|
1528
|
+
A && A.includes("right") ? this._adjustElementForRightResize(v, p, s) : A && A.includes("left") ? this._adjustElementForLeftResize(v, p, s) : v.x += p;
|
|
1529
1529
|
}
|
|
1530
1530
|
if (g !== 0) {
|
|
1531
|
-
const
|
|
1532
|
-
|
|
1531
|
+
const L = (R = this.activeSnaps.y) == null ? void 0 : R.anchorKey, A = L == null ? void 0 : L.toLowerCase();
|
|
1532
|
+
A && A.includes("bottom") ? this._adjustElementForBottomResize(v, g, s) : A && A.includes("top") ? this._adjustElementForTopResize(v, g, s) : v.y += g;
|
|
1533
1533
|
}
|
|
1534
1534
|
} else
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
const
|
|
1538
|
-
if (
|
|
1539
|
-
if (ft(
|
|
1540
|
-
const
|
|
1541
|
-
let
|
|
1542
|
-
|
|
1543
|
-
const G = ft(n),
|
|
1544
|
-
_ && _ !== 0 && (O =
|
|
1535
|
+
v.x += p, v.y += g;
|
|
1536
|
+
v.fontSize !== void 0 && (v.fontSize = k);
|
|
1537
|
+
const N = v.transformType === "image", j = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
|
|
1538
|
+
if (N && j) {
|
|
1539
|
+
if (ft(v) !== void 0) {
|
|
1540
|
+
const L = this.activeSnaps.x || this.activeSnaps.y;
|
|
1541
|
+
let A = B, O = W;
|
|
1542
|
+
L && (A = L.frozenWidth ?? A, O = L.frozenHeight ?? O);
|
|
1543
|
+
const G = ft(n), E = Tt(n), _ = v.imageAspectRatio || (G && E ? G / E : null);
|
|
1544
|
+
_ && _ !== 0 && (O = A / _), Mt(v, A), Et(v, O), L && (L.frozenWidth = A, L.frozenHeight = O);
|
|
1545
1545
|
}
|
|
1546
1546
|
} else
|
|
1547
|
-
(((
|
|
1548
|
-
const
|
|
1549
|
-
return (p === 0 ||
|
|
1547
|
+
(((C = this.activeSnaps.y) == null ? void 0 : C.isPositionBasedSnap) || !1) && (ft(v) !== void 0 ? Mt(v, B) : v.width !== void 0 && (v.width = B));
|
|
1548
|
+
const H = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), z = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"), K = ((M = this.activeSnaps.x) == null ? void 0 : M.isPositionBasedSnap) || !1, Q = ((I = this.activeSnaps.y) == null ? void 0 : I.isPositionBasedSnap) || !1;
|
|
1549
|
+
return (p === 0 || K) && !H && !z && !D && (v.x = F.x), (g === 0 || Q) && !z && !H && !D && (v.y = F.y), {
|
|
1550
1550
|
...t,
|
|
1551
|
-
element:
|
|
1551
|
+
element: v,
|
|
1552
1552
|
snapAdjustment: { dx: p, dy: g },
|
|
1553
1553
|
// Flag to indicate we're in sticky snap mode (used to freeze font size)
|
|
1554
1554
|
isInStickySnap: !0
|
|
@@ -1563,12 +1563,12 @@ class en {
|
|
|
1563
1563
|
if (!this.enabled) return t;
|
|
1564
1564
|
const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], s = 5;
|
|
1565
1565
|
for (const i of n)
|
|
1566
|
-
if (
|
|
1566
|
+
if (ce(t, i, s))
|
|
1567
1567
|
return i;
|
|
1568
1568
|
return t;
|
|
1569
1569
|
}
|
|
1570
1570
|
}
|
|
1571
|
-
class
|
|
1571
|
+
class sn {
|
|
1572
1572
|
constructor(t = {}) {
|
|
1573
1573
|
this.lastSnapTarget = null, this.detectionThreshold = t.detectionThreshold || 100, this.minDistance = t.minDistance || 10, this.enabled = t.enabled !== !1, this.showLabels = t.showLabels !== !1, this.indicators = [];
|
|
1574
1574
|
}
|
|
@@ -1603,7 +1603,7 @@ class nn {
|
|
|
1603
1603
|
snapToSpacing(t, e, o) {
|
|
1604
1604
|
if (!this.enabled || !o)
|
|
1605
1605
|
return t;
|
|
1606
|
-
const n =
|
|
1606
|
+
const n = Gt, s = o.filter((p) => p.id !== e.id);
|
|
1607
1607
|
if (s.length === 0)
|
|
1608
1608
|
return t;
|
|
1609
1609
|
const i = e.clone();
|
|
@@ -1625,8 +1625,8 @@ class nn {
|
|
|
1625
1625
|
}
|
|
1626
1626
|
const y = [];
|
|
1627
1627
|
for (let m = 0; m < b.length - 1; m++) {
|
|
1628
|
-
const w = b[m].getVisualBoundingBox(),
|
|
1629
|
-
y.push(
|
|
1628
|
+
const w = b[m].getVisualBoundingBox(), R = b[m + 1].getVisualBoundingBox().y - (w.y + w.height);
|
|
1629
|
+
y.push(R);
|
|
1630
1630
|
}
|
|
1631
1631
|
let S = null;
|
|
1632
1632
|
if (p) {
|
|
@@ -1671,8 +1671,8 @@ class nn {
|
|
|
1671
1671
|
}
|
|
1672
1672
|
const y = [];
|
|
1673
1673
|
for (let m = 0; m < u.length - 1; m++) {
|
|
1674
|
-
const w = u[m].getVisualBoundingBox(),
|
|
1675
|
-
y.push(
|
|
1674
|
+
const w = u[m].getVisualBoundingBox(), R = u[m + 1].getVisualBoundingBox().x - (w.x + w.width);
|
|
1675
|
+
y.push(R);
|
|
1676
1676
|
}
|
|
1677
1677
|
let S = null;
|
|
1678
1678
|
if (p) {
|
|
@@ -1790,16 +1790,16 @@ class nn {
|
|
|
1790
1790
|
labelY: p,
|
|
1791
1791
|
isAltHover: !0
|
|
1792
1792
|
}), a++);
|
|
1793
|
-
let S = 0, m = !1, w = 0, T = 0,
|
|
1794
|
-
const
|
|
1795
|
-
h.y >= n.y + n.height ? (S = h.y - (n.y + n.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 +
|
|
1793
|
+
let S = 0, m = !1, w = 0, T = 0, R = 0;
|
|
1794
|
+
const M = 30 * (r % 2 === 0 ? 1 : -1);
|
|
1795
|
+
h.y >= n.y + n.height ? (S = h.y - (n.y + n.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + M, T = n.y + n.height, R = h.y)) : n.y >= h.y + h.height && (S = n.y - (h.y + h.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + M, T = h.y + h.height, R = n.y)), m && (o.push({
|
|
1796
1796
|
type: "vertical",
|
|
1797
1797
|
distance: Math.round(S),
|
|
1798
1798
|
x: w,
|
|
1799
1799
|
y1: T,
|
|
1800
|
-
y2:
|
|
1800
|
+
y2: R,
|
|
1801
1801
|
labelX: w,
|
|
1802
|
-
labelY: (T +
|
|
1802
|
+
labelY: (T + R) / 2,
|
|
1803
1803
|
isAltHover: !0
|
|
1804
1804
|
}), r++);
|
|
1805
1805
|
}
|
|
@@ -1900,7 +1900,7 @@ class nn {
|
|
|
1900
1900
|
* Check if spacing would snap to a pattern
|
|
1901
1901
|
*/
|
|
1902
1902
|
checkIfWouldSnap(t, e, o, n) {
|
|
1903
|
-
const s =
|
|
1903
|
+
const s = Gt;
|
|
1904
1904
|
if (o === "top" || o === "bottom") {
|
|
1905
1905
|
const i = n.filter((a) => {
|
|
1906
1906
|
const r = a.getVisualBoundingBox();
|
|
@@ -2000,7 +2000,7 @@ class nn {
|
|
|
2000
2000
|
}
|
|
2001
2001
|
}
|
|
2002
2002
|
}
|
|
2003
|
-
const
|
|
2003
|
+
const zt = Jt("ArtboardRenderer"), Ne = {
|
|
2004
2004
|
showLabel: !0,
|
|
2005
2005
|
showBorder: !0,
|
|
2006
2006
|
borderColor: "",
|
|
@@ -2018,9 +2018,9 @@ const _t = Zt("ArtboardRenderer"), Xe = {
|
|
|
2018
2018
|
borderRadius: 0
|
|
2019
2019
|
// Default to no border radius (sharp corners)
|
|
2020
2020
|
};
|
|
2021
|
-
class
|
|
2021
|
+
class se {
|
|
2022
2022
|
constructor(t = {}) {
|
|
2023
|
-
this.options = { ...
|
|
2023
|
+
this.options = { ...Ne, ...t };
|
|
2024
2024
|
}
|
|
2025
2025
|
/**
|
|
2026
2026
|
* Render an artboard
|
|
@@ -2045,7 +2045,7 @@ class ne {
|
|
|
2045
2045
|
const o = Wt.getTexture(e.backgroundTexture), n = Wt.getTexturePresetColor(e.backgroundTexture);
|
|
2046
2046
|
if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !o || !o.complete) {
|
|
2047
2047
|
Wt.loadTexture(e.backgroundTexture).catch((s) => {
|
|
2048
|
-
|
|
2048
|
+
zt.error("Failed to load texture:", s);
|
|
2049
2049
|
});
|
|
2050
2050
|
return;
|
|
2051
2051
|
}
|
|
@@ -2066,7 +2066,7 @@ class ne {
|
|
|
2066
2066
|
* Render artboard border (respects clipShape and borderRadius option)
|
|
2067
2067
|
*/
|
|
2068
2068
|
renderBorder(t, e, o) {
|
|
2069
|
-
const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor ||
|
|
2069
|
+
const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || de(), h = this.options.selectedBorderColor || nt();
|
|
2070
2070
|
if (t.strokeStyle = o ? h : l, t.lineWidth = o ? this.options.selectedBorderWidth : this.options.borderWidth, t.beginPath(), !r || r === "rectangle")
|
|
2071
2071
|
if (this.options.borderRadius > 0) {
|
|
2072
2072
|
const c = Math.min(this.options.borderRadius, Math.min(i, a) / 2);
|
|
@@ -2085,7 +2085,7 @@ class ne {
|
|
|
2085
2085
|
t.save(), t.translate(n, s), t.stroke(c), t.restore();
|
|
2086
2086
|
return;
|
|
2087
2087
|
} catch (c) {
|
|
2088
|
-
|
|
2088
|
+
zt.warn("Invalid SVG path for border, falling back to rectangle:", c), t.rect(n, s, i, a);
|
|
2089
2089
|
}
|
|
2090
2090
|
t.stroke();
|
|
2091
2091
|
}
|
|
@@ -2095,7 +2095,7 @@ class ne {
|
|
|
2095
2095
|
renderLabel(t, e, o) {
|
|
2096
2096
|
const n = this.options.labelFontSize, s = this.options.labelPadding, i = `${e.name} (${Math.round(e.width)} × ${Math.round(e.height)})`, a = e.x, r = e.y - s;
|
|
2097
2097
|
t.font = `${n}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
|
|
2098
|
-
const l = this.options.selectedBorderColor || nt(), h = this.options.labelColor ||
|
|
2098
|
+
const l = this.options.selectedBorderColor || nt(), h = this.options.labelColor || fe();
|
|
2099
2099
|
t.fillStyle = o ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
|
|
2100
2100
|
}
|
|
2101
2101
|
/**
|
|
@@ -2139,7 +2139,7 @@ class ne {
|
|
|
2139
2139
|
t.translate(o, n), t.clip(r), t.translate(-o, -n);
|
|
2140
2140
|
return;
|
|
2141
2141
|
} catch (r) {
|
|
2142
|
-
|
|
2142
|
+
zt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(o, n, s, i);
|
|
2143
2143
|
}
|
|
2144
2144
|
t.clip();
|
|
2145
2145
|
}
|
|
@@ -2198,7 +2198,7 @@ class ne {
|
|
|
2198
2198
|
* Use this when exporting to ensure preview background is never included
|
|
2199
2199
|
*/
|
|
2200
2200
|
static createForExport(t = {}) {
|
|
2201
|
-
return new
|
|
2201
|
+
return new se({
|
|
2202
2202
|
...t,
|
|
2203
2203
|
showPreviewBackground: !1
|
|
2204
2204
|
// CRITICAL: Never show preview in exports
|
|
@@ -2236,14 +2236,14 @@ class wt {
|
|
|
2236
2236
|
const i = e.getVisualBoundingBox(), a = Math.round(i.width), r = Math.round(i.height), l = `${a} × ${r}`, h = o.rotationHandle, c = h.x * s, d = h.y * s - 20;
|
|
2237
2237
|
t.save(), t.font = "10px system-ui, -apple-system, sans-serif";
|
|
2238
2238
|
const b = t.measureText(l).width + 12, u = 18;
|
|
2239
|
-
t.shadowColor =
|
|
2239
|
+
t.shadowColor = ge(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = ue(t.canvas), t.beginPath(), t.roundRect(
|
|
2240
2240
|
c - b / 2,
|
|
2241
2241
|
d - u / 2,
|
|
2242
2242
|
b,
|
|
2243
2243
|
u,
|
|
2244
2244
|
3
|
|
2245
2245
|
// Smaller border radius
|
|
2246
|
-
), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle =
|
|
2246
|
+
), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = pe(t.canvas), t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, c, d + 0.5), t.restore();
|
|
2247
2247
|
}
|
|
2248
2248
|
/**
|
|
2249
2249
|
* Render transform handles layer
|
|
@@ -2266,7 +2266,7 @@ class wt {
|
|
|
2266
2266
|
);
|
|
2267
2267
|
}
|
|
2268
2268
|
}
|
|
2269
|
-
class
|
|
2269
|
+
class Ft {
|
|
2270
2270
|
/**
|
|
2271
2271
|
* Render hover highlights layer with fade-in animation
|
|
2272
2272
|
* Outlines the actual element shape instead of a rectangular border
|
|
@@ -2281,7 +2281,7 @@ class Vt {
|
|
|
2281
2281
|
const c = performance.now() - e.startTime;
|
|
2282
2282
|
h = Math.min(c / r, 1) * l;
|
|
2283
2283
|
}
|
|
2284
|
-
t.strokeStyle =
|
|
2284
|
+
t.strokeStyle = ye(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, s, i), t.restore();
|
|
2285
2285
|
}
|
|
2286
2286
|
/**
|
|
2287
2287
|
* Render outline for a specific element type
|
|
@@ -2328,10 +2328,10 @@ class Vt {
|
|
|
2328
2328
|
const g = d[(p + 1) % 3], y = g.x - u.x, S = g.y - u.y, m = Math.sqrt(y * y + S * S);
|
|
2329
2329
|
return { x: S / m, y: -y / m };
|
|
2330
2330
|
}), b = d.map((u, p) => {
|
|
2331
|
-
const g = f[(p + 2) % 3], y = f[p], S = g.x + y.x, m = g.y + y.y, w = Math.sqrt(S * S + m * m), T = (S * g.x + m * g.y) / w,
|
|
2331
|
+
const g = f[(p + 2) % 3], y = f[p], S = g.x + y.x, m = g.y + y.y, w = Math.sqrt(S * S + m * m), T = (S * g.x + m * g.y) / w, R = l / T;
|
|
2332
2332
|
return {
|
|
2333
|
-
x: u.x + S / w *
|
|
2334
|
-
y: u.y + m / w *
|
|
2333
|
+
x: u.x + S / w * R,
|
|
2334
|
+
y: u.y + m / w * R
|
|
2335
2335
|
};
|
|
2336
2336
|
});
|
|
2337
2337
|
t.moveTo(b[0].x, b[0].y), t.lineTo(b[1].x, b[1].y), t.lineTo(b[2].x, b[2].y), t.closePath();
|
|
@@ -2409,7 +2409,7 @@ class Vt {
|
|
|
2409
2409
|
*/
|
|
2410
2410
|
static renderHoverRingEffect(t, e, o) {
|
|
2411
2411
|
t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o);
|
|
2412
|
-
const n = e.fontSize, s = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l =
|
|
2412
|
+
const n = e.fontSize, s = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l = Qt(n, s, i, a), h = n * (e.lineHeight ?? 1.2), c = e.letterSpacing ?? 0, d = 4 / o, f = 4 / o, b = document.createElement("canvas");
|
|
2413
2413
|
b.width = t.canvas.width, b.height = t.canvas.height;
|
|
2414
2414
|
const u = b.getContext("2d");
|
|
2415
2415
|
if (!u) {
|
|
@@ -2419,20 +2419,20 @@ class Vt {
|
|
|
2419
2419
|
u.setTransform(t.getTransform()), u.textBaseline = "alphabetic", u.lineJoin = "round";
|
|
2420
2420
|
const p = e.getRichText ? e.getRichText() : null;
|
|
2421
2421
|
if (p) {
|
|
2422
|
-
const g =
|
|
2422
|
+
const g = te(p), y = [], S = [];
|
|
2423
2423
|
g.forEach((T) => {
|
|
2424
2424
|
if (e.transformType === "custom" && e.transformData) {
|
|
2425
|
-
const
|
|
2425
|
+
const R = e.transformData.width - pt * 2, C = ee(T, R, {
|
|
2426
2426
|
fontSize: n,
|
|
2427
2427
|
fontFamily: s,
|
|
2428
2428
|
bold: i,
|
|
2429
2429
|
italic: a,
|
|
2430
2430
|
letterSpacing: e.letterSpacing
|
|
2431
2431
|
});
|
|
2432
|
-
|
|
2433
|
-
y.push(
|
|
2434
|
-
isParagraphStart:
|
|
2435
|
-
isParagraphEnd:
|
|
2432
|
+
C.forEach((M, I) => {
|
|
2433
|
+
y.push(M), S.push({
|
|
2434
|
+
isParagraphStart: I === 0,
|
|
2435
|
+
isParagraphEnd: I === C.length - 1
|
|
2436
2436
|
});
|
|
2437
2437
|
});
|
|
2438
2438
|
} else
|
|
@@ -2444,57 +2444,57 @@ class Vt {
|
|
|
2444
2444
|
let m;
|
|
2445
2445
|
y.length === 0 ? m = 0 : y.length === 1 ? m = l.height : m = (y.length - 1) * h + l.height;
|
|
2446
2446
|
const w = -m / 2;
|
|
2447
|
-
y.forEach((T,
|
|
2448
|
-
var
|
|
2449
|
-
const
|
|
2450
|
-
let
|
|
2451
|
-
const
|
|
2452
|
-
let
|
|
2453
|
-
T.forEach((
|
|
2454
|
-
const z =
|
|
2455
|
-
let
|
|
2456
|
-
const O =
|
|
2457
|
-
if (!
|
|
2458
|
-
const
|
|
2459
|
-
|
|
2447
|
+
y.forEach((T, R) => {
|
|
2448
|
+
var N, j;
|
|
2449
|
+
const C = S[R].isParagraphStart, M = S[R].isParagraphEnd;
|
|
2450
|
+
let I = 0;
|
|
2451
|
+
const v = T.map((H) => H.text).join(""), P = ((N = v.match(/^ +/)) == null ? void 0 : N[0].length) || 0, k = ((j = v.match(/ +$/)) == null ? void 0 : j[0].length) || 0;
|
|
2452
|
+
let B = 0;
|
|
2453
|
+
T.forEach((H) => {
|
|
2454
|
+
const z = H.style.fontSize !== void 0 ? H.style.fontSize : n, K = H.style.fontFamily !== void 0 ? H.style.fontFamily : s, Q = H.style.bold !== void 0 ? H.style.bold : i, L = H.style.italic !== void 0 ? H.style.italic : a;
|
|
2455
|
+
let A = H.text;
|
|
2456
|
+
const O = B, G = B + H.text.length;
|
|
2457
|
+
if (!C && P > 0 && O < P) {
|
|
2458
|
+
const E = Math.min(P - O, H.text.length);
|
|
2459
|
+
A = A.substring(E);
|
|
2460
2460
|
}
|
|
2461
|
-
if (!
|
|
2462
|
-
const
|
|
2463
|
-
if (G >
|
|
2464
|
-
const _ = !
|
|
2465
|
-
|
|
2461
|
+
if (!M && k > 0) {
|
|
2462
|
+
const E = v.length - k;
|
|
2463
|
+
if (G > E) {
|
|
2464
|
+
const _ = !C && O < P ? Math.min(P - O, H.text.length) : 0, U = Math.max(0, E - O - _);
|
|
2465
|
+
A = A.substring(0, U);
|
|
2466
2466
|
}
|
|
2467
2467
|
}
|
|
2468
|
-
if (
|
|
2469
|
-
const
|
|
2470
|
-
t.save(), t.font = Lt(z,
|
|
2468
|
+
if (A.length > 0) {
|
|
2469
|
+
const E = H.style.letterSpacing !== void 0 ? H.style.letterSpacing : c;
|
|
2470
|
+
t.save(), t.font = Lt(z, K, Q, L), I += Xt(t.measureText(A).width, A, E), t.restore();
|
|
2471
2471
|
}
|
|
2472
|
-
|
|
2472
|
+
B += H.text.length;
|
|
2473
2473
|
});
|
|
2474
|
-
const
|
|
2474
|
+
const W = e.transformType === "custom" && e.transformData ? e.transformData.width - pt * 2 : void 0;
|
|
2475
2475
|
let F;
|
|
2476
|
-
r === "center" ? F = -
|
|
2477
|
-
const
|
|
2478
|
-
|
|
2479
|
-
const z =
|
|
2480
|
-
|
|
2481
|
-
const Q =
|
|
2482
|
-
let
|
|
2483
|
-
const O =
|
|
2484
|
-
if (!
|
|
2485
|
-
const
|
|
2486
|
-
|
|
2476
|
+
r === "center" ? F = -I / 2 : r === "right" ? F = W !== void 0 ? W / 2 - I : -I : F = W !== void 0 ? -W / 2 : 0;
|
|
2477
|
+
const D = w + l.ascent + R * h;
|
|
2478
|
+
B = 0, T.forEach((H) => {
|
|
2479
|
+
const z = H.style.fontSize !== void 0 ? H.style.fontSize : n, K = H.style.fontFamily !== void 0 ? H.style.fontFamily : s;
|
|
2480
|
+
H.style.color !== void 0 ? H.style.color : e.color;
|
|
2481
|
+
const Q = H.style.bold !== void 0 ? H.style.bold : i, L = H.style.italic !== void 0 ? H.style.italic : a;
|
|
2482
|
+
let A = H.text;
|
|
2483
|
+
const O = B, G = B + H.text.length;
|
|
2484
|
+
if (!C && P > 0 && O < P) {
|
|
2485
|
+
const E = Math.min(P - O, H.text.length);
|
|
2486
|
+
A = A.substring(E);
|
|
2487
2487
|
}
|
|
2488
|
-
if (!
|
|
2489
|
-
const
|
|
2490
|
-
if (G >
|
|
2491
|
-
const _ = !
|
|
2492
|
-
|
|
2488
|
+
if (!M && k > 0) {
|
|
2489
|
+
const E = v.length - k;
|
|
2490
|
+
if (G > E) {
|
|
2491
|
+
const _ = !C && O < P ? Math.min(P - O, H.text.length) : 0, U = Math.max(0, E - O - _);
|
|
2492
|
+
A = A.substring(0, U);
|
|
2493
2493
|
}
|
|
2494
2494
|
}
|
|
2495
|
-
if (
|
|
2496
|
-
const
|
|
2497
|
-
u.font = Lt(z,
|
|
2495
|
+
if (B += H.text.length, A.length > 0) {
|
|
2496
|
+
const E = H.style.letterSpacing !== void 0 ? H.style.letterSpacing : c;
|
|
2497
|
+
u.font = Lt(z, K, Q, L), u.textAlign = "left", u.globalCompositeOperation = "source-over", u.strokeStyle = t.strokeStyle, u.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), u.lineWidth = (f + d) * 2, Pt(u, A, F, D, E), u.globalCompositeOperation = "destination-out", u.globalAlpha = 1, u.lineWidth = f * 2, Pt(u, A, F, D, E), Nt(u, A, F, D, E), F += Xt(u.measureText(A).width, A, E);
|
|
2498
2498
|
}
|
|
2499
2499
|
});
|
|
2500
2500
|
});
|
|
@@ -2502,9 +2502,9 @@ class Vt {
|
|
|
2502
2502
|
t.font = Lt(n, s, i, a), u.font = t.font, u.textAlign = r;
|
|
2503
2503
|
let g, y;
|
|
2504
2504
|
if (e.transformType === "custom" && e.transformData) {
|
|
2505
|
-
const
|
|
2505
|
+
const C = e.transformData.width - pt * 2, { lines: M } = be(
|
|
2506
2506
|
e.text,
|
|
2507
|
-
|
|
2507
|
+
C,
|
|
2508
2508
|
n,
|
|
2509
2509
|
s,
|
|
2510
2510
|
i,
|
|
@@ -2513,22 +2513,22 @@ class Vt {
|
|
|
2513
2513
|
!0,
|
|
2514
2514
|
{ letterSpacing: c, lineHeight: e.lineHeight }
|
|
2515
2515
|
);
|
|
2516
|
-
g =
|
|
2516
|
+
g = M;
|
|
2517
2517
|
} else {
|
|
2518
2518
|
g = e.text.split(`
|
|
2519
2519
|
`);
|
|
2520
|
-
const
|
|
2520
|
+
const C = e.text.includes(`
|
|
2521
2521
|
`);
|
|
2522
|
-
g =
|
|
2522
|
+
g = Re(g, C);
|
|
2523
2523
|
}
|
|
2524
2524
|
g.length === 0 ? y = 0 : g.length === 1 ? y = l.height : y = (g.length - 1) * h + l.height;
|
|
2525
2525
|
const S = -y / 2, m = e.text.includes(`
|
|
2526
2526
|
`), w = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, T = -w / 2;
|
|
2527
|
-
let
|
|
2528
|
-
r === "center" ?
|
|
2529
|
-
const
|
|
2530
|
-
let
|
|
2531
|
-
|
|
2527
|
+
let R = T + pt;
|
|
2528
|
+
r === "center" ? R = T + w / 2 : r === "right" && (R = T + w - pt), g.forEach((C, M) => {
|
|
2529
|
+
const I = S + l.ascent + M * h, v = m || M === 0, P = m || M === g.length - 1;
|
|
2530
|
+
let k = C;
|
|
2531
|
+
v || (k = k.replace(/^ +/, "")), P || (k = k.replace(/ +$/, "")), u.globalCompositeOperation = "source-over", u.strokeStyle = t.strokeStyle, u.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), u.lineWidth = (f + d) * 2, u.lineJoin = "round", Pt(u, k, R, I, c), u.globalCompositeOperation = "destination-out", u.globalAlpha = 1, u.lineWidth = f * 2, Pt(u, k, R, I, c), Nt(u, k, R, I, c);
|
|
2532
2532
|
});
|
|
2533
2533
|
}
|
|
2534
2534
|
t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(b, 0, 0), t.restore();
|
|
@@ -2611,7 +2611,7 @@ class Vt {
|
|
|
2611
2611
|
let a = -o.reduce((r, l) => r + l, 0) / 2;
|
|
2612
2612
|
return e.forEach((r, l) => {
|
|
2613
2613
|
const h = o[l], c = a + h / 2, d = c / (n.width / 2), f = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), b = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
|
|
2614
|
-
s.push({ x: c, y: f, angle: 0, skewY: b *
|
|
2614
|
+
s.push({ x: c, y: f, angle: 0, skewY: b * Se }), a += h;
|
|
2615
2615
|
}), s;
|
|
2616
2616
|
}
|
|
2617
2617
|
/**
|
|
@@ -2659,7 +2659,7 @@ class Vt {
|
|
|
2659
2659
|
}), s;
|
|
2660
2660
|
}
|
|
2661
2661
|
}
|
|
2662
|
-
class
|
|
2662
|
+
class Rt {
|
|
2663
2663
|
/**
|
|
2664
2664
|
* Render snap guides layer
|
|
2665
2665
|
*/
|
|
@@ -2673,7 +2673,7 @@ class Ct {
|
|
|
2673
2673
|
*/
|
|
2674
2674
|
static renderSpacingIndicatorsLayer(t, e = []) {
|
|
2675
2675
|
e.length !== 0 && (t.save(), t.setLineDash([]), e.forEach((o) => {
|
|
2676
|
-
const n =
|
|
2676
|
+
const n = Kt(t.canvas);
|
|
2677
2677
|
if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = ct.canvas.spacingIndicatorWidth, t.beginPath(), o.type === "horizontal") {
|
|
2678
2678
|
const s = o.x1 ?? 0, i = o.x2 ?? 0, a = o.y ?? 0;
|
|
2679
2679
|
t.moveTo(s, a), t.lineTo(i, a), t.stroke();
|
|
@@ -2698,10 +2698,10 @@ class Ct {
|
|
|
2698
2698
|
const s = `${n}`;
|
|
2699
2699
|
t.font = `600 ${ct.canvas.spacingLabelFontSize}px ${ct.canvas.spacingLabelFontFamily}`;
|
|
2700
2700
|
const a = t.measureText(s).width, r = ct.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
|
|
2701
|
-
t.fillStyle =
|
|
2701
|
+
t.fillStyle = Kt(t.canvas), t.beginPath(), t.roundRect(e - h / 2, o - c / 2, h, c, me), t.fill(), t.fillStyle = Te, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, e, o);
|
|
2702
2702
|
}
|
|
2703
2703
|
}
|
|
2704
|
-
class
|
|
2704
|
+
class Vt {
|
|
2705
2705
|
/**
|
|
2706
2706
|
* Render edit mode features: cursor and text selection highlight
|
|
2707
2707
|
* This renders on the main canvas at world coordinates (same as the element)
|
|
@@ -2713,149 +2713,149 @@ class zt {
|
|
|
2713
2713
|
this.renderTransformEditModeLayer(t, s, o, b);
|
|
2714
2714
|
return;
|
|
2715
2715
|
}
|
|
2716
|
-
const p = s.fontSize || 24, g = s.fontFamily || "Arial", y = s.bold || !1, S = s.italic || !1, m = s.underline || !1, w = s.strikethrough || !1, T = s.textAlign || "center",
|
|
2716
|
+
const p = s.fontSize || 24, g = s.fontFamily || "Arial", y = s.bold || !1, S = s.italic || !1, m = s.underline || !1, w = s.strikethrough || !1, T = s.textAlign || "center", R = s.letterSpacing ?? 0;
|
|
2717
2717
|
t.save(), t.translate(s.x, s.y), t.rotate(-s.rotation * Math.PI / 180);
|
|
2718
|
-
const
|
|
2719
|
-
let
|
|
2718
|
+
const C = Qt(p, g, y, S), M = C.height, I = p * (s.lineHeight ?? 1.2);
|
|
2719
|
+
let v, P, k;
|
|
2720
2720
|
if (h && s.transformType === "custom" && s.transformData.width) {
|
|
2721
|
-
const
|
|
2722
|
-
|
|
2723
|
-
const
|
|
2724
|
-
|
|
2725
|
-
const G =
|
|
2721
|
+
const L = s.transformData.width - pt * 2;
|
|
2722
|
+
k = L;
|
|
2723
|
+
const A = te(h);
|
|
2724
|
+
v = [], P = [], A.forEach((O) => {
|
|
2725
|
+
const G = ee(O, L, {
|
|
2726
2726
|
fontSize: s.fontSize,
|
|
2727
2727
|
fontFamily: s.fontFamily,
|
|
2728
2728
|
bold: s.bold,
|
|
2729
2729
|
italic: s.italic,
|
|
2730
2730
|
letterSpacing: s.letterSpacing
|
|
2731
2731
|
});
|
|
2732
|
-
G.forEach((
|
|
2733
|
-
|
|
2732
|
+
G.forEach((E, _) => {
|
|
2733
|
+
v.push(E), P.push({
|
|
2734
2734
|
isParagraphStart: _ === 0,
|
|
2735
2735
|
isParagraphEnd: _ === G.length - 1
|
|
2736
2736
|
});
|
|
2737
2737
|
});
|
|
2738
2738
|
});
|
|
2739
2739
|
} else
|
|
2740
|
-
|
|
2741
|
-
`).map((
|
|
2740
|
+
v = l.split(`
|
|
2741
|
+
`).map((A) => [
|
|
2742
2742
|
{
|
|
2743
|
-
text:
|
|
2743
|
+
text: A,
|
|
2744
2744
|
style: { fontSize: p, fontFamily: g, bold: y, italic: S }
|
|
2745
2745
|
}
|
|
2746
|
-
]),
|
|
2746
|
+
]), P = v.map(() => ({
|
|
2747
2747
|
isParagraphStart: !0,
|
|
2748
2748
|
// Each line is its own paragraph
|
|
2749
2749
|
isParagraphEnd: !0
|
|
2750
2750
|
}));
|
|
2751
|
-
const
|
|
2752
|
-
let
|
|
2753
|
-
const
|
|
2754
|
-
let
|
|
2755
|
-
|
|
2756
|
-
var _,
|
|
2757
|
-
const O = A
|
|
2758
|
-
|
|
2751
|
+
const B = v.length > 1 ? C.height + (v.length - 1) * I : C.height;
|
|
2752
|
+
let W = -B / 2, F = 0, D = W, N = M;
|
|
2753
|
+
const j = [];
|
|
2754
|
+
let H = 0;
|
|
2755
|
+
v.forEach((L, A) => {
|
|
2756
|
+
var _, U;
|
|
2757
|
+
const O = P[A].isParagraphStart, G = P[A].isParagraphEnd, E = [];
|
|
2758
|
+
L.forEach((ot) => {
|
|
2759
2759
|
Array.from(ot.text).forEach((lt) => {
|
|
2760
|
-
let Y = p, ht = g, it = y,
|
|
2761
|
-
if (h &&
|
|
2762
|
-
const
|
|
2763
|
-
Y =
|
|
2760
|
+
let Y = p, ht = g, it = y, Z = S, st = R;
|
|
2761
|
+
if (h && H < l.length) {
|
|
2762
|
+
const J = h.getStyleAt(H);
|
|
2763
|
+
Y = J.fontSize || p, ht = J.fontFamily || g, it = J.bold !== void 0 ? J.bold : y, Z = J.italic !== void 0 ? J.italic : S, st = J.letterSpacing !== void 0 ? J.letterSpacing : R;
|
|
2764
2764
|
}
|
|
2765
2765
|
t.save();
|
|
2766
|
-
const V = it ? "bold" : "normal",
|
|
2767
|
-
t.font = `${
|
|
2766
|
+
const V = it ? "bold" : "normal", q = Z ? "italic" : "normal";
|
|
2767
|
+
t.font = `${q} ${V} ${Y}px "${ht}", Arial, sans-serif`;
|
|
2768
2768
|
const at = t.measureText(lt).width + st;
|
|
2769
|
-
t.restore(),
|
|
2769
|
+
t.restore(), E.push({ char: lt, width: at, fontSize: Y, index: H }), H++;
|
|
2770
2770
|
});
|
|
2771
2771
|
});
|
|
2772
2772
|
{
|
|
2773
|
-
const ot =
|
|
2773
|
+
const ot = A === 0, et = A === v.length - 1, lt = E.map((V) => V.char).join(""), Y = ((_ = lt.match(/^ +/)) == null ? void 0 : _[0].length) || 0, ht = ((U = lt.match(/ +$/)) == null ? void 0 : U[0].length) || 0;
|
|
2774
2774
|
let it = 0;
|
|
2775
|
-
for (let V = 0; V <
|
|
2776
|
-
!ot && V < Y || !et && V >=
|
|
2777
|
-
let
|
|
2778
|
-
T === "center" ?
|
|
2779
|
-
let st =
|
|
2780
|
-
for (let V = 0; V <
|
|
2781
|
-
const
|
|
2782
|
-
|
|
2775
|
+
for (let V = 0; V < E.length; V++)
|
|
2776
|
+
!ot && V < Y || !et && V >= E.length - ht || (it += E[V].width);
|
|
2777
|
+
let Z;
|
|
2778
|
+
T === "center" ? Z = -it / 2 : T === "right" ? Z = k !== void 0 ? k / 2 - it : -it : Z = k !== void 0 ? -k / 2 : 0;
|
|
2779
|
+
let st = Z;
|
|
2780
|
+
for (let V = 0; V < E.length; V++) {
|
|
2781
|
+
const q = E[V];
|
|
2782
|
+
j[q.index] = {
|
|
2783
2783
|
x: st,
|
|
2784
|
-
y:
|
|
2785
|
-
width:
|
|
2784
|
+
y: W,
|
|
2785
|
+
width: q.width,
|
|
2786
2786
|
// All characters keep their width for cursor navigation
|
|
2787
|
-
height:
|
|
2788
|
-
}, st +=
|
|
2787
|
+
height: q.fontSize
|
|
2788
|
+
}, st += q.width;
|
|
2789
2789
|
}
|
|
2790
|
-
if (
|
|
2791
|
-
const V =
|
|
2790
|
+
if (E.length > 0) {
|
|
2791
|
+
const V = E[0].index, q = E[E.length - 1].index, ut = A < v.length - 1 && q + 1 === H ? q : q + 1;
|
|
2792
2792
|
if (i >= V && i <= ut)
|
|
2793
2793
|
if (i === V)
|
|
2794
|
-
F =
|
|
2794
|
+
F = Z, D = W, N = M;
|
|
2795
2795
|
else {
|
|
2796
2796
|
let yt = 0;
|
|
2797
|
-
for (let rt = 0; rt <
|
|
2798
|
-
const dt =
|
|
2797
|
+
for (let rt = 0; rt < E.length && E[rt].index < i; rt++) {
|
|
2798
|
+
const dt = E[rt], bt = dt.char === " ";
|
|
2799
2799
|
let St = !0;
|
|
2800
2800
|
if (bt) {
|
|
2801
|
-
const kt = rt < Y, X = rt >=
|
|
2802
|
-
St = !(kt && vt || X &&
|
|
2801
|
+
const kt = rt < Y, X = rt >= E.length - ht, vt = !O && Y > 0, xt = !G && ht > 0;
|
|
2802
|
+
St = !(kt && vt || X && xt);
|
|
2803
2803
|
}
|
|
2804
2804
|
St && (yt += dt.width);
|
|
2805
2805
|
}
|
|
2806
|
-
F =
|
|
2806
|
+
F = Z + yt, D = W, N = M;
|
|
2807
2807
|
}
|
|
2808
2808
|
}
|
|
2809
|
-
|
|
2809
|
+
A < v.length - 1 && (W += I);
|
|
2810
2810
|
}
|
|
2811
2811
|
});
|
|
2812
2812
|
const z = a !== r;
|
|
2813
|
-
let
|
|
2813
|
+
let K = null, Q = null;
|
|
2814
2814
|
if (z) {
|
|
2815
|
-
const
|
|
2816
|
-
t.save(), t.fillStyle =
|
|
2817
|
-
let O = 0, G = -
|
|
2818
|
-
if (
|
|
2815
|
+
const L = Math.min(a, r), A = Math.max(a, r);
|
|
2816
|
+
t.save(), t.fillStyle = we(t.canvas);
|
|
2817
|
+
let O = 0, G = -B / 2;
|
|
2818
|
+
if (v.forEach((E, _) => {
|
|
2819
2819
|
var ht, it;
|
|
2820
|
-
const
|
|
2821
|
-
if (
|
|
2822
|
-
Array.from(
|
|
2823
|
-
const V =
|
|
2820
|
+
const U = P[_].isParagraphStart, ot = P[_].isParagraphEnd, et = _ === 0, lt = _ === v.length - 1, Y = [];
|
|
2821
|
+
if (E.forEach((Z) => {
|
|
2822
|
+
Array.from(Z.text).forEach((st) => {
|
|
2823
|
+
const V = Z.style || {}, q = V.fontSize !== void 0 ? V.fontSize : p, at = V.fontFamily !== void 0 ? V.fontFamily : g, J = V.bold !== void 0 ? V.bold : y, ut = V.italic !== void 0 ? V.italic : S, yt = V.letterSpacing !== void 0 ? V.letterSpacing : R;
|
|
2824
2824
|
t.save();
|
|
2825
|
-
const rt =
|
|
2826
|
-
t.font = `${dt} ${rt} ${
|
|
2825
|
+
const rt = J ? "bold" : "normal", dt = ut ? "italic" : "normal";
|
|
2826
|
+
t.font = `${dt} ${rt} ${q}px "${at}", Arial, sans-serif`;
|
|
2827
2827
|
const bt = t.measureText(st).width + yt;
|
|
2828
2828
|
t.restore(), Y.push({ char: st, index: O, width: bt, style: V }), O++;
|
|
2829
2829
|
});
|
|
2830
2830
|
}), Y.length > 0) {
|
|
2831
|
-
const
|
|
2832
|
-
if (
|
|
2831
|
+
const Z = Y[0].index, st = Y[Y.length - 1].index;
|
|
2832
|
+
if (A > Z && L <= st) {
|
|
2833
2833
|
t.save();
|
|
2834
|
-
const V = Y.map((X) => X.char).join(""),
|
|
2835
|
-
let
|
|
2834
|
+
const V = Y.map((X) => X.char).join(""), q = ((ht = V.match(/^ +/)) == null ? void 0 : ht[0].length) || 0, at = ((it = V.match(/ +$/)) == null ? void 0 : it[0].length) || 0;
|
|
2835
|
+
let J = 0;
|
|
2836
2836
|
for (let X = 0; X < Y.length; X++)
|
|
2837
|
-
!et && X <
|
|
2837
|
+
!et && X < q || !lt && X >= Y.length - at || (J += Y[X].width);
|
|
2838
2838
|
let ut = 0;
|
|
2839
|
-
T === "center" ? ut = -
|
|
2840
|
-
const yt = Math.max(
|
|
2839
|
+
T === "center" ? ut = -J / 2 : T === "right" && (ut = -J);
|
|
2840
|
+
const yt = Math.max(L, Z), rt = Math.min(A, st + 1);
|
|
2841
2841
|
let dt = 0;
|
|
2842
2842
|
for (let X = 0; X < Y.length && Y[X].index < yt; X++) {
|
|
2843
|
-
const vt = Y[X],
|
|
2844
|
-
!(
|
|
2843
|
+
const vt = Y[X], xt = X < q, Ht = X >= Y.length - at, It = !U && q > 0, Bt = !ot && at > 0;
|
|
2844
|
+
!(xt && It || Ht && Bt) && (dt += vt.width);
|
|
2845
2845
|
}
|
|
2846
2846
|
let bt = 0;
|
|
2847
2847
|
for (let X = 0; X < Y.length && Y[X].index < rt; X++) {
|
|
2848
|
-
const vt = Y[X],
|
|
2849
|
-
!(
|
|
2848
|
+
const vt = Y[X], xt = X < q, Ht = X >= Y.length - at, It = !U && q > 0, Bt = !ot && at > 0;
|
|
2849
|
+
!(xt && It || Ht && Bt) && (bt += vt.width);
|
|
2850
2850
|
}
|
|
2851
2851
|
const St = ut + dt, kt = bt - dt;
|
|
2852
|
-
t.fillRect(St, G, kt,
|
|
2852
|
+
t.fillRect(St, G, kt, M), K === null && (K = { x: St, y: G }), Q = { x: St + kt, y: G + M }, t.restore();
|
|
2853
2853
|
}
|
|
2854
2854
|
}
|
|
2855
|
-
_ <
|
|
2855
|
+
_ < v.length - 1 && (G += I);
|
|
2856
2856
|
}), t.restore(), h) {
|
|
2857
2857
|
t.save();
|
|
2858
|
-
const
|
|
2858
|
+
const E = s.transformType === "custom" ? s.transformData : null, _ = E != null && E.width ? E.width - pt * 2 : void 0;
|
|
2859
2859
|
Ce(t, h, {
|
|
2860
2860
|
fontSize: p,
|
|
2861
2861
|
fontFamily: g,
|
|
@@ -2870,26 +2870,26 @@ class zt {
|
|
|
2870
2870
|
}, _), t.restore();
|
|
2871
2871
|
}
|
|
2872
2872
|
}
|
|
2873
|
-
if (z && d &&
|
|
2874
|
-
const
|
|
2873
|
+
if (z && d && K && Q) {
|
|
2874
|
+
const L = K, A = Q, O = 6 / b, G = 2 / b;
|
|
2875
2875
|
t.save();
|
|
2876
|
-
const
|
|
2877
|
-
t.fillStyle =
|
|
2878
|
-
const _ = { x:
|
|
2879
|
-
t.beginPath(), t.moveTo(
|
|
2876
|
+
const E = nt(t.canvas);
|
|
2877
|
+
t.fillStyle = E, t.strokeStyle = E, t.lineWidth = G, t.lineCap = "round";
|
|
2878
|
+
const _ = { x: L.x, y: L.y - O }, U = { x: A.x, y: A.y + O };
|
|
2879
|
+
t.beginPath(), t.moveTo(L.x, L.y), t.lineTo(L.x, L.y + M), t.stroke(), t.beginPath(), t.arc(_.x, _.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.strokeStyle = E, t.lineWidth = G, t.beginPath(), t.moveTo(A.x, A.y - M), t.lineTo(A.x, A.y), t.stroke(), t.beginPath(), t.arc(U.x, U.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.restore(), f && (f.current = {
|
|
2880
2880
|
start: {
|
|
2881
2881
|
center: _,
|
|
2882
|
-
textEdge:
|
|
2882
|
+
textEdge: L
|
|
2883
2883
|
// Original selection edge (top-left of selection on first line)
|
|
2884
2884
|
},
|
|
2885
2885
|
end: {
|
|
2886
|
-
center:
|
|
2887
|
-
textEdge:
|
|
2886
|
+
center: U,
|
|
2887
|
+
textEdge: A
|
|
2888
2888
|
// Original selection edge (bottom-right of selection on last line)
|
|
2889
2889
|
}
|
|
2890
2890
|
});
|
|
2891
2891
|
} else f && (f.current = { start: null, end: null });
|
|
2892
|
-
!z && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = nt(t.canvas), t.lineWidth = 3 / b, t.lineCap = "round", t.beginPath(), t.moveTo(F,
|
|
2892
|
+
!z && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = nt(t.canvas), t.lineWidth = 3 / b, t.lineCap = "round", t.beginPath(), t.moveTo(F, D), t.lineTo(F, D + N), t.stroke(), t.restore()), t.restore();
|
|
2893
2893
|
}
|
|
2894
2894
|
/**
|
|
2895
2895
|
* Render edit mode features for transformed text (circle, wave, arch, etc.)
|
|
@@ -2900,7 +2900,7 @@ class zt {
|
|
|
2900
2900
|
t.save(), t.translate(e.x, e.y), t.rotate(-e.rotation * Math.PI / 180);
|
|
2901
2901
|
const c = l ? "bold" : "normal", d = h ? "italic" : "normal";
|
|
2902
2902
|
t.font = `${d} ${c} ${a}px ${r}`;
|
|
2903
|
-
const f = Array.from(e.text), b = f.map((p) => t.measureText(p).width), u =
|
|
2903
|
+
const f = Array.from(e.text), b = f.map((p) => t.measureText(p).width), u = Ft.calculateCharPositions(e, f, b);
|
|
2904
2904
|
if (s >= 0 && s <= f.length && i > 0) {
|
|
2905
2905
|
let p;
|
|
2906
2906
|
if (s === 0)
|
|
@@ -2939,10 +2939,10 @@ class zt {
|
|
|
2939
2939
|
* Shows both image resize handles and crop handles
|
|
2940
2940
|
*/
|
|
2941
2941
|
static renderCropBoxLayer(t, e, o, n = 1) {
|
|
2942
|
-
if (!(e instanceof
|
|
2942
|
+
if (!(e instanceof ve) || !e.isCropping) return;
|
|
2943
2943
|
const s = e, i = s.getCropBoxBounds();
|
|
2944
2944
|
if (!i) return;
|
|
2945
|
-
const a = 4 / n, r = 2 / n, l =
|
|
2945
|
+
const a = 4 / n, r = 2 / n, l = xe / n, h = Me / n, c = 1 / n;
|
|
2946
2946
|
t.save(), t.translate(e.x * n, e.y * n), t.rotate(gt.toRadians(e.rotation));
|
|
2947
2947
|
const d = s.transformData.flipHorizontal ? -1 : 1, f = s.transformData.flipVertical ? -1 : 1;
|
|
2948
2948
|
t.scale(d * n, f * n);
|
|
@@ -2955,12 +2955,12 @@ class zt {
|
|
|
2955
2955
|
t.fillStyle = "rgba(0, 0, 0, 0.5)", i.y > m.y && t.fillRect(m.x, m.y, m.width, i.y - m.y);
|
|
2956
2956
|
const w = i.y + i.height, T = m.y + m.height;
|
|
2957
2957
|
w < T && t.fillRect(m.x, w, m.width, T - w), i.x > m.x && t.fillRect(m.x, i.y, i.x - m.x, i.height);
|
|
2958
|
-
const
|
|
2959
|
-
|
|
2960
|
-
const
|
|
2961
|
-
t.beginPath(), t.moveTo(i.x +
|
|
2962
|
-
const
|
|
2963
|
-
if (t.beginPath(), t.moveTo(i.x, i.y +
|
|
2958
|
+
const R = i.x + i.width, C = m.x + m.width;
|
|
2959
|
+
R < C && t.fillRect(R, i.y, C - R, i.height), t.strokeStyle = nt(t.canvas), t.lineWidth = r, t.strokeRect(i.x, i.y, i.width, i.height), t.strokeStyle = "rgba(255, 255, 255, 0.5)", t.lineWidth = c;
|
|
2960
|
+
const M = i.width / 3;
|
|
2961
|
+
t.beginPath(), t.moveTo(i.x + M, i.y), t.lineTo(i.x + M, i.y + i.height), t.moveTo(i.x + 2 * M, i.y), t.lineTo(i.x + 2 * M, i.y + i.height), t.stroke();
|
|
2962
|
+
const I = i.height / 3;
|
|
2963
|
+
if (t.beginPath(), t.moveTo(i.x, i.y + I), t.lineTo(i.x + i.width, i.y + I), t.moveTo(i.x, i.y + 2 * I), t.lineTo(i.x + i.width, i.y + 2 * I), t.stroke(), [
|
|
2964
2964
|
{ x: i.x, y: i.y },
|
|
2965
2965
|
// top-left
|
|
2966
2966
|
{ x: i.x + i.width, y: i.y },
|
|
@@ -2969,8 +2969,8 @@ class zt {
|
|
|
2969
2969
|
// bottom-right
|
|
2970
2970
|
{ x: i.x, y: i.y + i.height }
|
|
2971
2971
|
// bottom-left
|
|
2972
|
-
].forEach((
|
|
2973
|
-
t.beginPath(), t.arc(
|
|
2972
|
+
].forEach((k) => {
|
|
2973
|
+
t.beginPath(), t.arc(k.x, k.y, l + 1 / n, 0, Math.PI * 2), t.fillStyle = "#bbb", t.fill(), t.beginPath(), t.arc(k.x, k.y, l, 0, Math.PI * 2), t.fillStyle = "#fff", t.fill();
|
|
2974
2974
|
}), [
|
|
2975
2975
|
{ x: i.x + i.width / 2, y: i.y, orientation: "horizontal" },
|
|
2976
2976
|
// top
|
|
@@ -2980,32 +2980,32 @@ class zt {
|
|
|
2980
2980
|
// left
|
|
2981
2981
|
{ x: i.x + i.width, y: i.y + i.height / 2, orientation: "vertical" }
|
|
2982
2982
|
// right
|
|
2983
|
-
].forEach((
|
|
2984
|
-
let
|
|
2985
|
-
|
|
2986
|
-
const F =
|
|
2987
|
-
t.fillStyle = "#fff", t.fillRect(F,
|
|
2983
|
+
].forEach((k) => {
|
|
2984
|
+
let B, W;
|
|
2985
|
+
k.orientation === "horizontal" ? (B = h, W = a) : (B = a, W = h);
|
|
2986
|
+
const F = k.x - B / 2, D = k.y - W / 2;
|
|
2987
|
+
t.fillStyle = "#fff", t.fillRect(F, D, B, W), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(F, D, B, W);
|
|
2988
2988
|
}), t.restore(), o && o.resizeHandles) {
|
|
2989
|
-
const
|
|
2990
|
-
(
|
|
2991
|
-
),
|
|
2992
|
-
|
|
2993
|
-
let
|
|
2994
|
-
if (
|
|
2995
|
-
for (const
|
|
2996
|
-
const
|
|
2997
|
-
if (Math.sqrt(
|
|
2998
|
-
|
|
2989
|
+
const k = o.resizeHandles.filter(
|
|
2990
|
+
(D) => D.anchor === "top-left" || D.anchor === "top-right" || D.anchor === "bottom-left" || D.anchor === "bottom-right"
|
|
2991
|
+
), B = s.getCropBoxWorldCorners(), W = 6, F = 20;
|
|
2992
|
+
k.forEach((D) => {
|
|
2993
|
+
let N = !1;
|
|
2994
|
+
if (B)
|
|
2995
|
+
for (const j of B) {
|
|
2996
|
+
const H = D.x - j.x, z = D.y - j.y;
|
|
2997
|
+
if (Math.sqrt(H * H + z * z) < F) {
|
|
2998
|
+
N = !0;
|
|
2999
2999
|
break;
|
|
3000
3000
|
}
|
|
3001
3001
|
}
|
|
3002
|
-
|
|
3002
|
+
N || (t.save(), t.globalAlpha = 1, t.beginPath(), t.arc(D.x * n, D.y * n, W, 0, 2 * Math.PI), t.fillStyle = "#fff", t.fill(), t.strokeStyle = nt(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
|
|
3003
3003
|
});
|
|
3004
3004
|
}
|
|
3005
3005
|
}
|
|
3006
3006
|
}
|
|
3007
|
-
|
|
3008
|
-
const
|
|
3007
|
+
Ee();
|
|
3008
|
+
const Ke = Jt("CanvasRenderer"), $ = class $ {
|
|
3009
3009
|
/**
|
|
3010
3010
|
* Get a pooled offscreen canvas for clipping content, only recreating
|
|
3011
3011
|
* when dimensions change. Eliminates per-frame canvas allocation.
|
|
@@ -3029,7 +3029,7 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3029
3029
|
e.render(t, o, n);
|
|
3030
3030
|
} catch (s) {
|
|
3031
3031
|
const i = s instanceof Error ? s : new Error(String(s));
|
|
3032
|
-
|
|
3032
|
+
Ke.error(`Failed to render element ${e.id}:`, i), $.onRenderError && $.onRenderError({
|
|
3033
3033
|
category: "render",
|
|
3034
3034
|
message: `Failed to render element: ${i.message}`,
|
|
3035
3035
|
originalError: i,
|
|
@@ -3101,12 +3101,12 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3101
3101
|
const w = new Path2D();
|
|
3102
3102
|
w.rect(p, g, y - p, S - g);
|
|
3103
3103
|
for (const T of m.pieces) {
|
|
3104
|
-
const
|
|
3105
|
-
if (
|
|
3106
|
-
const
|
|
3107
|
-
|
|
3104
|
+
const R = new Path2D(T.d), C = T.rotation ?? 0, M = new DOMMatrix();
|
|
3105
|
+
if (M.translateSelf(o.x + T.x, o.y + T.y), C !== 0) {
|
|
3106
|
+
const I = (T.baseWidth ?? 0) / 2, v = (T.baseHeight ?? 0) / 2, P = C === 90 || C === 270, k = P ? T.baseHeight ?? 0 : T.baseWidth ?? 0, B = P ? T.baseWidth ?? 0 : T.baseHeight ?? 0;
|
|
3107
|
+
M.translateSelf(k / 2, B / 2), M.rotateSelf(C), M.translateSelf(-I, -v);
|
|
3108
3108
|
}
|
|
3109
|
-
w.addPath(
|
|
3109
|
+
w.addPath(R, M);
|
|
3110
3110
|
}
|
|
3111
3111
|
t.clip(w, "evenodd");
|
|
3112
3112
|
} else
|
|
@@ -3124,23 +3124,23 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3124
3124
|
*/
|
|
3125
3125
|
static renderElementsLayer(t, e, o, n, s, i, a, r = !0, l = !1, h = !1) {
|
|
3126
3126
|
const c = s != null && s.getMode() === "drag", d = s == null ? void 0 : s._activeChildContext;
|
|
3127
|
-
e !==
|
|
3128
|
-
const f =
|
|
3127
|
+
e !== $._cachedElementsRef && ($._cachedElementConfigs = e.map((g) => g.toJSON()), $._cachedElementMap = new Map(e.map((g) => [g.id, g])), $._cachedElementsRef = e);
|
|
3128
|
+
const f = $._cachedElementConfigs, b = $._cachedElementMap, u = $._knockoutRenderedIds;
|
|
3129
3129
|
u.clear(), e.forEach((g, y) => {
|
|
3130
3130
|
var S, m, w;
|
|
3131
3131
|
if (g.blendMode === "knockout" || g.blendMode === "clip") {
|
|
3132
|
-
const T = f[y],
|
|
3133
|
-
|
|
3132
|
+
const T = f[y], R = g.blendMode === "knockout" ? "destination-out" : "destination-in", C = ((S = T.knockoutParts) == null ? void 0 : S.scope) || "group", M = f.findIndex((k) => k.id === T.id), I = ((m = T.knockoutParts) == null ? void 0 : m.fill) || ((w = T.knockoutParts) == null ? void 0 : w.stroke), v = C === "artboard" && M !== -1 ? f.slice(0, M) : [];
|
|
3133
|
+
I && (C === "artboard" || v.length > 0) && (v.forEach((k) => k.id && u.add(k.id)), ke(
|
|
3134
3134
|
t,
|
|
3135
3135
|
T,
|
|
3136
3136
|
f,
|
|
3137
|
-
(
|
|
3138
|
-
const
|
|
3139
|
-
|
|
3137
|
+
(k, B) => {
|
|
3138
|
+
const W = B.id && b.get(B.id);
|
|
3139
|
+
W && this.renderElement(k, W, r);
|
|
3140
3140
|
},
|
|
3141
3141
|
i,
|
|
3142
3142
|
a,
|
|
3143
|
-
|
|
3143
|
+
R
|
|
3144
3144
|
), u.add(g.id));
|
|
3145
3145
|
}
|
|
3146
3146
|
}), e.some((g) => !u.has(g.id) && g.isClipping) ? this._renderWithClipping(
|
|
@@ -3154,26 +3154,32 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3154
3154
|
f,
|
|
3155
3155
|
r
|
|
3156
3156
|
) : e.forEach((g) => {
|
|
3157
|
-
var
|
|
3157
|
+
var M, I;
|
|
3158
3158
|
if (u.has(g.id) || g.visible === !1) return;
|
|
3159
|
-
const y = g.id === o, S = (n == null ? void 0 : n.type) === "element" && ((
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
|
|
3159
|
+
const y = g.id === o, S = (n == null ? void 0 : n.type) === "element" && ((M = n == null ? void 0 : n.data) == null ? void 0 : M.id) === g.id, m = c && d && _t(g) && g.id === o, w = y && !m, T = f[e.indexOf(g)], R = ((I = T == null ? void 0 : T.distressEffect) == null ? void 0 : I.enabled) && T.distressEffect.style === "custom" && T.distressEffect.textureUrl, C = (v) => {
|
|
3160
|
+
if (T && T.masks && T.masks.length > 0)
|
|
3161
|
+
At(v, T, (P) => {
|
|
3162
|
+
const k = (B) => {
|
|
3163
|
+
r && (B.save(), B.globalAlpha = tt), this.safeRender(B, g, w, S), r && B.restore();
|
|
3164
|
+
};
|
|
3165
|
+
if (R) {
|
|
3166
|
+
const B = g.getVisualBoundingBox();
|
|
3167
|
+
$t(P, T.distressEffect, B, k);
|
|
3168
|
+
} else
|
|
3169
|
+
k(P);
|
|
3170
|
+
});
|
|
3171
|
+
else if (R) {
|
|
3172
|
+
const P = g.getVisualBoundingBox();
|
|
3173
|
+
$t(v, T.distressEffect, P, (k) => {
|
|
3174
|
+
r && (k.save(), k.globalAlpha = tt), this.safeRender(k, g, w, S), r && k.restore();
|
|
3175
|
+
});
|
|
3176
|
+
} else l && !h && a && w ? this.renderElementWithOverflowDimming(v, g, a, w, S, r) : l && a ? (v.save(), this.applyArtboardClipPath(v, a), r && (v.globalAlpha = tt), this.safeRender(v, g, w, S), v.restore()) : (r && (v.save(), v.globalAlpha = tt), this.safeRender(v, g, w, S), r && v.restore());
|
|
3177
|
+
};
|
|
3178
|
+
Dt(
|
|
3179
|
+
t,
|
|
3180
|
+
T,
|
|
3181
|
+
(v) => C(v)
|
|
3182
|
+
);
|
|
3177
3183
|
});
|
|
3178
3184
|
}
|
|
3179
3185
|
/**
|
|
@@ -3203,29 +3209,35 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3203
3209
|
for (const y of b)
|
|
3204
3210
|
if (!y.mask)
|
|
3205
3211
|
y.content.forEach((S, m) => {
|
|
3206
|
-
var
|
|
3207
|
-
const w = S.id === n, T = (s == null ? void 0 : s.type) === "element" && ((
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3212
|
+
var I;
|
|
3213
|
+
const w = S.id === n, T = (s == null ? void 0 : s.type) === "element" && ((I = s == null ? void 0 : s.data) == null ? void 0 : I.id) === S.id, R = i && a && _t(S) && S.id === n, C = w && !R, M = y.contentConfigs[m];
|
|
3214
|
+
Dt(t, M, (v) => {
|
|
3215
|
+
const P = v;
|
|
3216
|
+
M && M.masks && M.masks.length > 0 ? At(P, M, (k) => {
|
|
3217
|
+
l && (k.save(), k.globalAlpha = tt), S.render(k, C, T), l && k.restore();
|
|
3218
|
+
}) : (l && (P.save(), P.globalAlpha = tt), S.render(P, C, T), l && P.restore());
|
|
3219
|
+
});
|
|
3211
3220
|
});
|
|
3212
3221
|
else {
|
|
3213
3222
|
const S = this._getContentCanvas(c, d), m = S.getContext("2d");
|
|
3214
3223
|
if (!m) continue;
|
|
3215
|
-
m.setTransform(1, 0, 0, 1, 0, 0), m.clearRect(0, 0, c, d), m.globalCompositeOperation = "source-over", m.setTransform(f), y.content.forEach((
|
|
3224
|
+
m.setTransform(1, 0, 0, 1, 0, 0), m.clearRect(0, 0, c, d), m.globalCompositeOperation = "source-over", m.setTransform(f), y.content.forEach((M, I) => {
|
|
3216
3225
|
var F;
|
|
3217
|
-
const
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3226
|
+
const v = M.id === n, P = (s == null ? void 0 : s.type) === "element" && ((F = s == null ? void 0 : s.data) == null ? void 0 : F.id) === M.id, k = i && a && _t(M) && M.id === n, B = v && !k, W = y.contentConfigs[I];
|
|
3227
|
+
Dt(m, W, (D) => {
|
|
3228
|
+
const N = D;
|
|
3229
|
+
W && W.masks && W.masks.length > 0 ? At(N, W, (j) => {
|
|
3230
|
+
l && (j.save(), j.globalAlpha = tt), M.render(j, B, P), l && j.restore();
|
|
3231
|
+
}) : (l && (N.save(), N.globalAlpha = tt), M.render(N, B, P), l && N.restore());
|
|
3232
|
+
});
|
|
3221
3233
|
});
|
|
3222
3234
|
const w = this._getMaskCanvas(c, d), T = w.getContext("2d");
|
|
3223
3235
|
if (!T) continue;
|
|
3224
3236
|
T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(f);
|
|
3225
|
-
const
|
|
3226
|
-
y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? At(T, y.maskConfig, (
|
|
3227
|
-
l && (
|
|
3228
|
-
}) : (l && (T.save(), T.globalAlpha = tt), y.mask.render(T,
|
|
3237
|
+
const R = y.mask.id === n, C = (s == null ? void 0 : s.type) === "element" && ((g = s == null ? void 0 : s.data) == null ? void 0 : g.id) === y.mask.id;
|
|
3238
|
+
y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? At(T, y.maskConfig, (M) => {
|
|
3239
|
+
l && (M.save(), M.globalAlpha = tt), y.mask.render(M, R, C), l && M.restore();
|
|
3240
|
+
}) : (l && (T.save(), T.globalAlpha = tt), y.mask.render(T, R, C), l && T.restore()), m.globalCompositeOperation = "destination-in", m.setTransform(1, 0, 0, 1, 0, 0), m.drawImage(w, 0, 0), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(S, 0, 0), t.restore();
|
|
3229
3241
|
}
|
|
3230
3242
|
}
|
|
3231
3243
|
// =========================================================================
|
|
@@ -3236,21 +3248,21 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3236
3248
|
* @see InteractionFeedbackRenderer.renderSnapGuidesLayer
|
|
3237
3249
|
*/
|
|
3238
3250
|
static renderSnapGuidesLayer(t, e = []) {
|
|
3239
|
-
|
|
3251
|
+
Rt.renderSnapGuidesLayer(t, e);
|
|
3240
3252
|
}
|
|
3241
3253
|
/**
|
|
3242
3254
|
* Render spacing indicators layer
|
|
3243
3255
|
* @see InteractionFeedbackRenderer.renderSpacingIndicatorsLayer
|
|
3244
3256
|
*/
|
|
3245
3257
|
static renderSpacingIndicatorsLayer(t, e = []) {
|
|
3246
|
-
|
|
3258
|
+
Rt.renderSpacingIndicatorsLayer(t, e);
|
|
3247
3259
|
}
|
|
3248
3260
|
/**
|
|
3249
3261
|
* Render a distance label with background
|
|
3250
3262
|
* @see InteractionFeedbackRenderer.renderDistanceLabel
|
|
3251
3263
|
*/
|
|
3252
3264
|
static renderDistanceLabel(t, e, o, n) {
|
|
3253
|
-
|
|
3265
|
+
Rt.renderDistanceLabel(t, e, o, n);
|
|
3254
3266
|
}
|
|
3255
3267
|
/**
|
|
3256
3268
|
* Render selection box layer
|
|
@@ -3288,14 +3300,14 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3288
3300
|
* @see HoverRenderer.renderHoverLayer
|
|
3289
3301
|
*/
|
|
3290
3302
|
static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
|
|
3291
|
-
|
|
3303
|
+
Ft.renderHoverLayer(t, e, o, n, s, i);
|
|
3292
3304
|
}
|
|
3293
3305
|
/**
|
|
3294
3306
|
* Render crop box layer (for images in crop mode)
|
|
3295
3307
|
* @see EditModeRenderer.renderCropBoxLayer
|
|
3296
3308
|
*/
|
|
3297
3309
|
static renderCropBoxLayer(t, e, o, n = 1) {
|
|
3298
|
-
|
|
3310
|
+
Vt.renderCropBoxLayer(t, e, o, n);
|
|
3299
3311
|
}
|
|
3300
3312
|
// =========================================================================
|
|
3301
3313
|
// Main Render Orchestration
|
|
@@ -3343,10 +3355,10 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3343
3355
|
d,
|
|
3344
3356
|
u,
|
|
3345
3357
|
p
|
|
3346
|
-
), g != null && g.enabled && c &&
|
|
3358
|
+
), g != null && g.enabled && c && Pe(t, g, c, h), y != null && y.enabled && c && Ae(t, y, c, h), i && S && n && Vt.renderEditModeLayer(t, n, S, f), f !== 1) {
|
|
3347
3359
|
t.save();
|
|
3348
|
-
const
|
|
3349
|
-
t.setTransform(
|
|
3360
|
+
const R = t.getTransform().a / f, C = b.x * f * R, M = b.y * f * R;
|
|
3361
|
+
t.setTransform(R, 0, 0, R, C, M);
|
|
3350
3362
|
}
|
|
3351
3363
|
const m = r.map((T) => ({
|
|
3352
3364
|
...T,
|
|
@@ -3367,7 +3379,7 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3367
3379
|
labelX: T.labelX * f,
|
|
3368
3380
|
labelY: T.labelY * f
|
|
3369
3381
|
}));
|
|
3370
|
-
|
|
3382
|
+
Rt.renderSnapGuidesLayer(t, m), Rt.renderSpacingIndicatorsLayer(t, w), f !== 1 && t.restore();
|
|
3371
3383
|
}
|
|
3372
3384
|
/**
|
|
3373
3385
|
* Single-selection interaction chrome: bbox, handles, position/size
|
|
@@ -3404,8 +3416,8 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3404
3416
|
const S = t.getTransform().a / u, m = p.x * u * S, w = p.y * u * S;
|
|
3405
3417
|
t.setTransform(S, 0, 0, S, m, w);
|
|
3406
3418
|
}
|
|
3407
|
-
if (e &&
|
|
3408
|
-
o &&
|
|
3419
|
+
if (e && He(e) && e.isCropping)
|
|
3420
|
+
o && Vt.renderCropBoxLayer(t, e, o, u);
|
|
3409
3421
|
else if (!l && n && wt.renderSelectionLayer(t, e, n, u), o && n && wt.renderPositionSizeInfo(t, e, o, n, u), !l && o && n && wt.renderHandlesLayer(
|
|
3410
3422
|
t,
|
|
3411
3423
|
e,
|
|
@@ -3419,29 +3431,29 @@ const Ne = Zt("CanvasRenderer"), K = class K {
|
|
|
3419
3431
|
), !h) {
|
|
3420
3432
|
if (f) {
|
|
3421
3433
|
t.save();
|
|
3422
|
-
const y = f, S = y.x * u, m = y.y * u, w = y.width * u, T = y.height * u,
|
|
3423
|
-
t.beginPath(),
|
|
3434
|
+
const y = f, S = y.x * u, m = y.y * u, w = y.width * u, T = y.height * u, R = (y.borderRadius ?? 0) * u;
|
|
3435
|
+
t.beginPath(), R > 0 ? t.roundRect(S, m, w, T, R) : t.rect(S, m, w, T), t.clip();
|
|
3424
3436
|
}
|
|
3425
|
-
|
|
3437
|
+
Ft.renderHoverLayer(t, a, r, c, u, d), f && t.restore();
|
|
3426
3438
|
}
|
|
3427
3439
|
u !== 1 && t.restore();
|
|
3428
3440
|
}
|
|
3429
3441
|
};
|
|
3430
|
-
|
|
3431
|
-
let
|
|
3442
|
+
$._contentCanvas = null, $._contentCanvasSize = { width: 0, height: 0 }, $._maskCanvas = null, $._maskCanvasSize = { width: 0, height: 0 }, $._cachedElementsRef = null, $._cachedElementConfigs = null, $._cachedElementMap = null, $._knockoutRenderedIds = /* @__PURE__ */ new Set(), $.onRenderError = null;
|
|
3443
|
+
let Zt = $;
|
|
3432
3444
|
export {
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3445
|
+
nn as A,
|
|
3446
|
+
Zt as C,
|
|
3447
|
+
en as I,
|
|
3448
|
+
Xe as R,
|
|
3449
|
+
sn as S,
|
|
3450
|
+
Qe as T,
|
|
3451
|
+
se as a,
|
|
3452
|
+
Ze as b,
|
|
3453
|
+
Ue as c,
|
|
3454
|
+
Fe as d,
|
|
3455
|
+
tn as e,
|
|
3456
|
+
jt as g,
|
|
3457
|
+
Je as r
|
|
3446
3458
|
};
|
|
3447
|
-
//# sourceMappingURL=CanvasRenderer-
|
|
3459
|
+
//# sourceMappingURL=CanvasRenderer-1j-twIbs.js.map
|