@snowcone-app/canvas 0.17.2 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ImportManager-C_wBjWaV.js → CanvasRenderer-DUc-MOeR.js} +586 -806
- package/dist/CanvasRenderer-DUc-MOeR.js.map +1 -0
- package/dist/{CanvasStateV1-BG2hEc3-.js → CanvasStateV1-Bq48qhv5.js} +3 -3
- package/dist/{CanvasStateV1-BG2hEc3-.js.map → CanvasStateV1-Bq48qhv5.js.map} +1 -1
- package/dist/ContextualToolbars-CkLjHNPn.js +5833 -0
- package/dist/ContextualToolbars-CkLjHNPn.js.map +1 -0
- package/dist/EditorCanvasImpl-Bv4yagew.js +81 -0
- package/dist/EditorCanvasImpl-Bv4yagew.js.map +1 -0
- package/dist/EditorContext-5QpqAhjh.js +1184 -0
- package/dist/{EditorContext-CGkfmbgo.js.map → EditorContext-5QpqAhjh.js.map} +1 -1
- package/dist/{FontAnalyzer-CLv7_msL.js → FontAnalyzer-DIlqmyuf.js} +35 -35
- package/dist/FontAnalyzer-DIlqmyuf.js.map +1 -0
- package/dist/{ElementFactory-CuHSAPfg.js → ImportManager-D--7JnvW.js} +699 -476
- package/dist/ImportManager-D--7JnvW.js.map +1 -0
- package/dist/MenuButton-CeoEAtzP.js +7444 -0
- package/dist/MenuButton-CeoEAtzP.js.map +1 -0
- package/dist/SnowconeCanvas-C_O-aeaQ.js +1166 -0
- package/dist/SnowconeCanvas-C_O-aeaQ.js.map +1 -0
- package/dist/advanced.mjs +266 -264
- package/dist/advanced.mjs.map +1 -1
- package/dist/api/embed.d.ts +1 -1
- package/dist/components/ContextualToolbars.d.ts +8 -0
- package/dist/components/editor/EditorAdd.d.ts +11 -0
- package/dist/components/editor/EditorCanvasImpl.d.ts +6 -0
- package/dist/components/editor/EditorControls.d.ts +14 -0
- package/dist/components/editor/EditorHistory.d.ts +11 -0
- package/dist/components/editor/EditorLayers.d.ts +16 -0
- package/dist/components/editor/EditorMenu.d.ts +11 -0
- package/dist/components/editor/RootInternals.d.ts +7 -0
- package/dist/components/editor/index.d.ts +20 -0
- package/dist/components/embed/addElementTypes.d.ts +9 -0
- package/dist/contexts/EditorContext.d.ts +38 -0
- package/dist/core/preview-registry.d.ts +34 -0
- package/dist/{editorErrors-BY4Pdg7a.js → editorErrors-DXNfVXtD.js} +2 -2
- package/dist/{editorErrors-BY4Pdg7a.js.map → editorErrors-DXNfVXtD.js.map} +1 -1
- package/dist/embed-Cdbjay9i.js +961 -0
- package/dist/embed-Cdbjay9i.js.map +1 -0
- package/dist/embed.mjs +5 -5
- package/dist/index.mjs +7 -7
- package/dist/internals.mjs +12 -12
- package/dist/{template-fields-Z9x13sjM.js → template-fields-DgoBtajp.js} +266 -240
- package/dist/template-fields-DgoBtajp.js.map +1 -0
- package/dist/testing.mjs +3 -3
- package/dist/{usePieceGuideBundle-C1ipFnZd.js → usePieceGuideBundle-DVOISsB1.js} +2 -2
- package/dist/{usePieceGuideBundle-C1ipFnZd.js.map → usePieceGuideBundle-DVOISsB1.js.map} +1 -1
- package/dist/validation-0IscSfRb.js +9304 -0
- package/dist/validation-0IscSfRb.js.map +1 -0
- package/package.json +1 -1
- package/dist/EditorCanvasImpl-DgXvuWXX.js +0 -70
- package/dist/EditorCanvasImpl-DgXvuWXX.js.map +0 -1
- package/dist/EditorContext-CGkfmbgo.js +0 -1178
- package/dist/ElementFactory-CuHSAPfg.js.map +0 -1
- package/dist/FontAnalyzer-CLv7_msL.js.map +0 -1
- package/dist/ImportManager-C_wBjWaV.js.map +0 -1
- package/dist/SnowconeCanvas-wdckG-6O.js +0 -1179
- package/dist/SnowconeCanvas-wdckG-6O.js.map +0 -1
- package/dist/UnifiedFontService-Dsu5cwfT.js +0 -1478
- package/dist/UnifiedFontService-Dsu5cwfT.js.map +0 -1
- package/dist/embed-32ZVWfmj.js +0 -746
- package/dist/embed-32ZVWfmj.js.map +0 -1
- package/dist/iconify-D6eVIEy4.js +0 -1089
- package/dist/iconify-D6eVIEy4.js.map +0 -1
- package/dist/template-fields-Z9x13sjM.js.map +0 -1
- package/dist/validation-C795COGQ.js +0 -19959
- package/dist/validation-C795COGQ.js.map +0 -1
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { T as
|
|
3
|
-
const
|
|
1
|
+
import { V as ee, X as ne, ap as tt, Y as zt, aC as se, aA as oe, at as Vt, az as ie, as as ht, aD as ae, aE as Ft, aF as re, aG as le, c as $t, G as he, I as jt, P as ce, S as de, T as fe, aH as ge, aI as ue, aJ as pe, aK as ye, a3 as qt, $ as Ut, a5 as ft, a0 as Zt, a1 as Ht, a4 as be, a7 as Se, aL as Ot, aM as me, aN as Te, aO as ve, aP as we, aQ as Ce, aR as Q } from "./FontAnalyzer-DIlqmyuf.js";
|
|
2
|
+
import { T as Bt, a as Me, t as xe, J as Re, y as kt, K as Gt, L as ke, M as Pe } from "./ImportManager-D--7JnvW.js";
|
|
3
|
+
const it = {
|
|
4
4
|
// Canvas-specific
|
|
5
5
|
canvas: {
|
|
6
|
-
get selectionColor() {
|
|
7
|
-
return tt();
|
|
8
|
-
},
|
|
9
6
|
snapThreshold: 8,
|
|
10
7
|
// pixels
|
|
11
8
|
snapGuideDash: [5, 5],
|
|
@@ -17,30 +14,30 @@ const ot = {
|
|
|
17
14
|
spacingLabelFontSize: 11,
|
|
18
15
|
spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
|
|
19
16
|
}
|
|
20
|
-
},
|
|
21
|
-
function
|
|
22
|
-
return
|
|
17
|
+
}, Ae = 2, Mt = 6, Ee = 16, Ie = 5, He = 5, Jt = 0.5;
|
|
18
|
+
function Yt(C) {
|
|
19
|
+
return Ae / C;
|
|
23
20
|
}
|
|
24
|
-
function
|
|
25
|
-
return
|
|
21
|
+
function Ge(C) {
|
|
22
|
+
return Mt / C;
|
|
26
23
|
}
|
|
27
|
-
function
|
|
28
|
-
return
|
|
24
|
+
function Be(C) {
|
|
25
|
+
return Ee / C;
|
|
29
26
|
}
|
|
30
|
-
function
|
|
31
|
-
return [
|
|
27
|
+
function Ye(C) {
|
|
28
|
+
return [Ie / C, He / C];
|
|
32
29
|
}
|
|
33
|
-
function
|
|
34
|
-
|
|
35
|
-
const n =
|
|
36
|
-
|
|
30
|
+
function Le(C, t, e, o) {
|
|
31
|
+
C.save();
|
|
32
|
+
const n = Jt / o;
|
|
33
|
+
C.translate(t, e), C.scale(n, n), C.strokeStyle = "#000", C.lineWidth = 1.5, C.lineCap = "round", C.lineJoin = "round", C.translate(-12, -12), C.beginPath(), C.moveTo(21, 12), C.arc(12, 12, 9, 0, -Math.PI / 2, !0), C.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), C.stroke(), C.beginPath(), C.moveTo(3, 3), C.lineTo(3, 8), C.lineTo(8, 8), C.stroke(), C.beginPath(), C.moveTo(3, 12), C.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), C.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), C.stroke(), C.beginPath(), C.moveTo(16, 16), C.lineTo(21, 16), C.lineTo(21, 21), C.stroke(), C.restore();
|
|
37
34
|
}
|
|
38
|
-
function
|
|
39
|
-
const i =
|
|
40
|
-
|
|
35
|
+
function Xe(C, t, e, o = 1, n = "#3b82f6", s = !1) {
|
|
36
|
+
const i = Be(o);
|
|
37
|
+
C.save(), C.fillStyle = "#fff", C.strokeStyle = n, C.lineWidth = s ? Yt(o) * 1.25 : Yt(o), C.beginPath(), C.arc(t, e, i, 0, Math.PI * 2), C.fill(), C.stroke(), Le(C, t, e, o), C.restore();
|
|
41
38
|
}
|
|
42
|
-
const
|
|
43
|
-
class
|
|
39
|
+
const Xt = Mt * 2;
|
|
40
|
+
class Ne {
|
|
44
41
|
constructor() {
|
|
45
42
|
this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
|
|
46
43
|
}
|
|
@@ -52,13 +49,13 @@ class qe {
|
|
|
52
49
|
update(t, e = 1) {
|
|
53
50
|
const n = "isCropping" in t && t.isCropping ? t.getBoundingBox() : t.getVisualBoundingBox(), s = t.getRotationAnchor(), i = t.getEnabledAnchors();
|
|
54
51
|
this.elementRotation = t.rotation, this.rotationAnchor = s;
|
|
55
|
-
const a =
|
|
52
|
+
const a = it.canvas.selectionPadding, r = {
|
|
56
53
|
x: n.x - a,
|
|
57
54
|
y: n.y - a,
|
|
58
55
|
width: n.width + a * 2,
|
|
59
56
|
height: n.height + a * 2
|
|
60
|
-
}, l =
|
|
61
|
-
this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle =
|
|
57
|
+
}, l = ee(r, t.rotation, s), h = Math.abs(t.rotation % 360) > 0.1;
|
|
58
|
+
this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle = ne(
|
|
62
59
|
r,
|
|
63
60
|
t.rotation,
|
|
64
61
|
s,
|
|
@@ -87,10 +84,10 @@ class qe {
|
|
|
87
84
|
if (e.anchor.includes("middle")) {
|
|
88
85
|
const l = e.anchor === "middle-top" || e.anchor === "middle-bottom";
|
|
89
86
|
t.translate(i, a), t.rotate(-this.elementRotation * Math.PI / 180), l && t.rotate(Math.PI / 2), t.translate(-i, -a);
|
|
90
|
-
const h =
|
|
87
|
+
const h = Xt * 0.6, c = Xt * 1.4, d = h / 2, u = i - h / 2, p = a - c / 2;
|
|
91
88
|
t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.roundRect(u, p, h, c, d), t.fill(), t.stroke();
|
|
92
89
|
} else
|
|
93
|
-
t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a,
|
|
90
|
+
t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Mt, 0, Math.PI * 2), t.fill(), t.stroke();
|
|
94
91
|
t.restore();
|
|
95
92
|
}
|
|
96
93
|
/**
|
|
@@ -99,9 +96,9 @@ class qe {
|
|
|
99
96
|
*/
|
|
100
97
|
renderRotationHandle(t, e, o = !1, n = 1) {
|
|
101
98
|
t.save();
|
|
102
|
-
const s = e.x * n, i = e.y * n, a =
|
|
99
|
+
const s = e.x * n, i = e.y * n, a = Mt * 2.67;
|
|
103
100
|
t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o ? 2.5 : 2, t.beginPath(), t.arc(s, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
|
|
104
|
-
const r =
|
|
101
|
+
const r = Jt;
|
|
105
102
|
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();
|
|
106
103
|
}
|
|
107
104
|
/**
|
|
@@ -117,9 +114,9 @@ class qe {
|
|
|
117
114
|
* @param zoom - Current zoom level (radius scales inversely with zoom)
|
|
118
115
|
*/
|
|
119
116
|
hitTestResize(t, e, o = 1) {
|
|
120
|
-
const n =
|
|
117
|
+
const n = oe / o;
|
|
121
118
|
for (const s of this.resizeHandles)
|
|
122
|
-
if (
|
|
119
|
+
if (zt(t, e, s.x, s.y, n))
|
|
123
120
|
return s;
|
|
124
121
|
return null;
|
|
125
122
|
}
|
|
@@ -129,8 +126,8 @@ class qe {
|
|
|
129
126
|
*/
|
|
130
127
|
hitTestRotation(t, e, o = 1) {
|
|
131
128
|
if (!this.rotationHandle) return !1;
|
|
132
|
-
const n = (
|
|
133
|
-
return
|
|
129
|
+
const n = (Mt * 2.67 + 2) / o;
|
|
130
|
+
return zt(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
|
|
134
131
|
}
|
|
135
132
|
/**
|
|
136
133
|
* Get rotation handle position (for React-based rendering)
|
|
@@ -145,7 +142,7 @@ class qe {
|
|
|
145
142
|
*/
|
|
146
143
|
getCursor(t, e) {
|
|
147
144
|
const o = t.anchor.includes("middle") ? "edge" : "corner";
|
|
148
|
-
return
|
|
145
|
+
return se(
|
|
149
146
|
t.x,
|
|
150
147
|
t.y,
|
|
151
148
|
this.rotationAnchor.x,
|
|
@@ -156,7 +153,7 @@ class qe {
|
|
|
156
153
|
);
|
|
157
154
|
}
|
|
158
155
|
}
|
|
159
|
-
class
|
|
156
|
+
class We {
|
|
160
157
|
/**
|
|
161
158
|
* Calculate new dimensions and position for a resize operation
|
|
162
159
|
*/
|
|
@@ -168,62 +165,62 @@ class Ve {
|
|
|
168
165
|
startData: s,
|
|
169
166
|
snapSystem: i
|
|
170
167
|
}) {
|
|
171
|
-
var
|
|
172
|
-
const r = new
|
|
168
|
+
var B, L, W, O, D;
|
|
169
|
+
const r = new Vt(t).worldDeltaToLocal(o, n), l = r.dx, h = r.dy, c = s.visualWidth ?? s.width ?? 0, d = s.visualHeight ?? s.height ?? 0, u = s.width ?? 0, p = s.height ?? 0;
|
|
173
170
|
let b = c, g = d;
|
|
174
171
|
e.anchor.includes("right") ? b = c + l : e.anchor.includes("left") && (b = c - l), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? g = d + h : e.anchor.includes("top") && (g = d - h));
|
|
175
172
|
let f, y;
|
|
176
173
|
if (e.anchor === "middle-left" || e.anchor === "middle-right") {
|
|
177
|
-
const
|
|
178
|
-
f = u +
|
|
174
|
+
const F = b - c;
|
|
175
|
+
f = u + F, y = p;
|
|
179
176
|
} else if (e.anchor === "middle-top" || e.anchor === "middle-bottom") {
|
|
180
|
-
const
|
|
181
|
-
f = u, y = p +
|
|
177
|
+
const F = g - d;
|
|
178
|
+
f = u, y = p + F;
|
|
182
179
|
} else {
|
|
183
|
-
const
|
|
184
|
-
f = u *
|
|
180
|
+
const F = b / c, E = g / d;
|
|
181
|
+
f = u * F, y = p * E;
|
|
185
182
|
}
|
|
186
|
-
const
|
|
187
|
-
let
|
|
183
|
+
const m = b, T = g;
|
|
184
|
+
let v = !1;
|
|
188
185
|
if (i && t.transformType === "image") {
|
|
189
|
-
const
|
|
190
|
-
if (
|
|
191
|
-
const j = (
|
|
192
|
-
if (!!j || !!
|
|
193
|
-
const
|
|
186
|
+
const F = e.anchor ?? "", E = F === "top-left" || F === "top-right" || F === "bottom-left" || F === "bottom-right", $ = F.startsWith("crop-");
|
|
187
|
+
if (E && !$) {
|
|
188
|
+
const j = (B = i.activeSnaps) == null ? void 0 : B.x, J = (L = i.activeSnaps) == null ? void 0 : L.y;
|
|
189
|
+
if (!!j || !!J) {
|
|
190
|
+
const k = [j, J].find(
|
|
194
191
|
(I) => typeof I == "object" && I !== null && "frozenWidth" in I
|
|
195
192
|
);
|
|
196
|
-
if (
|
|
197
|
-
const I = t, _ = s.transformData,
|
|
198
|
-
let
|
|
199
|
-
|
|
200
|
-
const at = u !== 0 ?
|
|
201
|
-
b = c * at, g = d * gt, f =
|
|
193
|
+
if (k) {
|
|
194
|
+
const I = t, _ = s.transformData, H = k.frozenWidth ?? ((W = I.transformData) == null ? void 0 : W.width) ?? u, V = I.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
|
|
195
|
+
let G = k.frozenHeight;
|
|
196
|
+
G == null && (V && V !== 0 ? G = H / V : (O = I.transformData) != null && O.height ? G = I.transformData.height : G = p);
|
|
197
|
+
const at = u !== 0 ? H / u : 1, gt = p !== 0 ? G / p : 1;
|
|
198
|
+
b = c * at, g = d * gt, f = H, y = G, v = !0;
|
|
202
199
|
}
|
|
203
200
|
}
|
|
204
201
|
}
|
|
205
202
|
}
|
|
206
203
|
f = Math.max(50, f), y = Math.max(40, y);
|
|
207
|
-
const
|
|
208
|
-
if (!e.anchor.includes("middle") && ((
|
|
209
|
-
const
|
|
210
|
-
|
|
204
|
+
const S = t.clone(), M = S.resize(e.anchor, f, y, s);
|
|
205
|
+
if (!e.anchor.includes("middle") && ((D = S.stroke) != null && D.enabled) && s.strokeWidth !== void 0 && s.strokeWidth > 0) {
|
|
206
|
+
const F = s.width ?? 1, E = s.height ?? 1, $ = Math.sqrt(f / F * (y / E)), j = Math.max(1, Math.round(s.strokeWidth * $ * 10) / 10);
|
|
207
|
+
S.stroke = { ...S.stroke, width: j };
|
|
211
208
|
}
|
|
212
|
-
const
|
|
213
|
-
if (
|
|
214
|
-
const
|
|
209
|
+
const x = v || M === !1, P = e.anchor.includes("top") || e.anchor.includes("bottom"), w = "isCropping" in S && S.isCropping, A = "isGroup" in S && S.isGroup;
|
|
210
|
+
if (P && !w && !A) {
|
|
211
|
+
const F = t.getRotationAnchor(), E = this._calculateFixedCornerOffset({
|
|
215
212
|
element: t,
|
|
216
|
-
updatedElement:
|
|
213
|
+
updatedElement: S,
|
|
217
214
|
handle: e,
|
|
218
|
-
rotationAnchor:
|
|
215
|
+
rotationAnchor: F
|
|
219
216
|
});
|
|
220
|
-
|
|
217
|
+
S.x += E.x, S.y += E.y;
|
|
221
218
|
}
|
|
222
219
|
return {
|
|
223
|
-
element:
|
|
224
|
-
isFrozen:
|
|
220
|
+
element: S,
|
|
221
|
+
isFrozen: x,
|
|
225
222
|
// For snap system to detect break-free: dimensions before freeze was applied
|
|
226
|
-
unfrozenDimensions:
|
|
223
|
+
unfrozenDimensions: v ? { width: m, height: T } : void 0
|
|
227
224
|
};
|
|
228
225
|
}
|
|
229
226
|
/**
|
|
@@ -237,10 +234,10 @@ class Ve {
|
|
|
237
234
|
handle: o,
|
|
238
235
|
rotationAnchor: n
|
|
239
236
|
}) {
|
|
240
|
-
const s = new
|
|
237
|
+
const s = new Vt(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), u = d.x, p = d.y, b = r.x - h.x, g = r.y - h.y, f = b + u, y = g + p, m = f * i - y * a, T = f * a + y * i, v = h.x + m, S = h.y + T, M = this._getFixedLocalCoords(o.anchor, l.width, l.height), R = M.x, x = M.y, P = l.x - c.x, w = l.y - c.y, A = P + R, B = w + x, L = A * i - B * a, W = A * a + B * i, O = c.x + L, D = c.y + W;
|
|
241
238
|
return {
|
|
242
|
-
x:
|
|
243
|
-
y:
|
|
239
|
+
x: v - O,
|
|
240
|
+
y: S - D
|
|
244
241
|
};
|
|
245
242
|
}
|
|
246
243
|
/**
|
|
@@ -278,7 +275,7 @@ class Ve {
|
|
|
278
275
|
return n;
|
|
279
276
|
}
|
|
280
277
|
}
|
|
281
|
-
class
|
|
278
|
+
class De {
|
|
282
279
|
constructor() {
|
|
283
280
|
this.hooks = {
|
|
284
281
|
beforeResize: [],
|
|
@@ -333,7 +330,7 @@ class Oe {
|
|
|
333
330
|
*/
|
|
334
331
|
executeResize(t) {
|
|
335
332
|
const e = this.runHooks("beforeResize", t);
|
|
336
|
-
let o =
|
|
333
|
+
let o = We.calculateResize({
|
|
337
334
|
...e,
|
|
338
335
|
snapSystem: t.snapSystem
|
|
339
336
|
});
|
|
@@ -348,8 +345,8 @@ class Oe {
|
|
|
348
345
|
return this.runHooks("afterPositionUpdate", o).position;
|
|
349
346
|
}
|
|
350
347
|
}
|
|
351
|
-
const
|
|
352
|
-
class
|
|
348
|
+
const Ke = new De();
|
|
349
|
+
class $e {
|
|
353
350
|
constructor(t = null) {
|
|
354
351
|
this.state = "IDLE", this.context = {
|
|
355
352
|
mode: null,
|
|
@@ -547,7 +544,7 @@ class Ze {
|
|
|
547
544
|
updateRotate(t, e, o, n) {
|
|
548
545
|
if (this.state !== "ROTATING")
|
|
549
546
|
throw new Error("Cannot update rotate: not in ROTATING state");
|
|
550
|
-
const s = this.context.startData, a = (
|
|
547
|
+
const s = this.context.startData, a = (ie(o, n, t, e) - s.startAngle) * 180 / Math.PI;
|
|
551
548
|
let r = s.currentRotation - a;
|
|
552
549
|
return r = (r % 360 + 360) % 360, r > 180 && (r -= 360), this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(r, this.context.element) : r;
|
|
553
550
|
}
|
|
@@ -771,7 +768,7 @@ class bt {
|
|
|
771
768
|
return Math.abs(n.x - o.x) > s || Math.abs(n.y - o.y) > s;
|
|
772
769
|
}
|
|
773
770
|
}
|
|
774
|
-
class
|
|
771
|
+
class Nt {
|
|
775
772
|
constructor(t) {
|
|
776
773
|
this.cellSize = t, this.cells = /* @__PURE__ */ new Map(), this.idIndex = /* @__PURE__ */ new Map();
|
|
777
774
|
}
|
|
@@ -867,32 +864,32 @@ class Ut {
|
|
|
867
864
|
return `${Math.floor(t / this.cellSize)},${Math.floor(e / this.cellSize)}`;
|
|
868
865
|
}
|
|
869
866
|
}
|
|
870
|
-
function lt(
|
|
871
|
-
const t =
|
|
867
|
+
function lt(C) {
|
|
868
|
+
const t = C.transformData;
|
|
872
869
|
if (t && "width" in t && typeof t.width == "number")
|
|
873
870
|
return t.width;
|
|
874
871
|
}
|
|
875
|
-
function
|
|
876
|
-
const t =
|
|
872
|
+
function St(C) {
|
|
873
|
+
const t = C.transformData;
|
|
877
874
|
if (t && "height" in t && typeof t.height == "number")
|
|
878
875
|
return t.height;
|
|
879
876
|
}
|
|
880
|
-
function
|
|
881
|
-
const e =
|
|
877
|
+
function wt(C, t) {
|
|
878
|
+
const e = C.transformData;
|
|
882
879
|
return e && "width" in e ? (e.width = t, !0) : !1;
|
|
883
880
|
}
|
|
884
|
-
function
|
|
885
|
-
const e =
|
|
881
|
+
function Pt(C, t) {
|
|
882
|
+
const e = C.transformData;
|
|
886
883
|
return e && "height" in e ? (e.height = t, !0) : !1;
|
|
887
884
|
}
|
|
888
|
-
class
|
|
885
|
+
class je {
|
|
889
886
|
constructor(t = {}) {
|
|
890
|
-
this._extraSnapRects = [], this.snapThreshold = t.snapThreshold ||
|
|
887
|
+
this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || it.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
|
|
891
888
|
x: null,
|
|
892
889
|
// { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
|
|
893
890
|
y: null
|
|
894
891
|
// { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
|
|
895
|
-
}, this.stickyThreshold = t.stickyThreshold || 15, this._spatialGrid = new
|
|
892
|
+
}, this.stickyThreshold = t.stickyThreshold || 15, this._spatialGrid = new Nt(Math.max(this.snapThreshold * 2, 16)), this._anchorMetadata = /* @__PURE__ */ new Map();
|
|
896
893
|
}
|
|
897
894
|
/**
|
|
898
895
|
* Enable or disable snapping
|
|
@@ -904,7 +901,7 @@ class Qe {
|
|
|
904
901
|
* Set snap threshold in pixels
|
|
905
902
|
*/
|
|
906
903
|
setSnapThreshold(t) {
|
|
907
|
-
this.snapThreshold = t, this._spatialGrid = new
|
|
904
|
+
this.snapThreshold = t, this._spatialGrid = new Nt(Math.max(t * 2, 16));
|
|
908
905
|
}
|
|
909
906
|
/**
|
|
910
907
|
* Get current snap guides for rendering
|
|
@@ -996,50 +993,50 @@ class Qe {
|
|
|
996
993
|
this._populateSpatialGrid(i);
|
|
997
994
|
let a = null, r = null, l = 1 / 0, h = 1 / 0;
|
|
998
995
|
const c = [], d = [], u = [];
|
|
999
|
-
for (const [y,
|
|
1000
|
-
const T = this._spatialGrid.queryNearAxis("x",
|
|
1001
|
-
for (const
|
|
1002
|
-
const
|
|
1003
|
-
if (!
|
|
1004
|
-
const
|
|
1005
|
-
if (
|
|
1006
|
-
const
|
|
1007
|
-
snapTo:
|
|
1008
|
-
offset:
|
|
996
|
+
for (const [y, m] of Object.entries(s)) {
|
|
997
|
+
const T = this._spatialGrid.queryNearAxis("x", m.x, this.snapThreshold);
|
|
998
|
+
for (const S of T) {
|
|
999
|
+
const M = this._anchorMetadata.get(S.id);
|
|
1000
|
+
if (!M) continue;
|
|
1001
|
+
const R = M.point, x = M.anchorKey, P = Math.abs(m.x - R.x);
|
|
1002
|
+
if (P < this.snapThreshold) {
|
|
1003
|
+
const w = {
|
|
1004
|
+
snapTo: R.x,
|
|
1005
|
+
offset: m.x - t.x,
|
|
1009
1006
|
// How far anchor is from element position
|
|
1010
|
-
distance:
|
|
1007
|
+
distance: P,
|
|
1011
1008
|
guide: {
|
|
1012
1009
|
type: "vertical",
|
|
1013
|
-
x:
|
|
1014
|
-
y1: Math.min(
|
|
1015
|
-
y2: Math.max(
|
|
1010
|
+
x: R.x,
|
|
1011
|
+
y1: Math.min(m.y, R.y) - 50,
|
|
1012
|
+
y2: Math.max(m.y, R.y) + 50,
|
|
1016
1013
|
movingKey: y,
|
|
1017
|
-
otherKey:
|
|
1014
|
+
otherKey: x
|
|
1018
1015
|
}
|
|
1019
1016
|
};
|
|
1020
|
-
c.push(
|
|
1017
|
+
c.push(w), P < l && (l = P, a = w);
|
|
1021
1018
|
}
|
|
1022
1019
|
}
|
|
1023
|
-
const
|
|
1024
|
-
for (const
|
|
1025
|
-
const
|
|
1026
|
-
if (!
|
|
1027
|
-
const
|
|
1028
|
-
if (
|
|
1029
|
-
const
|
|
1030
|
-
snapTo:
|
|
1031
|
-
offset:
|
|
1032
|
-
distance:
|
|
1020
|
+
const v = this._spatialGrid.queryNearAxis("y", m.y, this.snapThreshold);
|
|
1021
|
+
for (const S of v) {
|
|
1022
|
+
const M = this._anchorMetadata.get(S.id);
|
|
1023
|
+
if (!M) continue;
|
|
1024
|
+
const R = M.point, x = M.anchorKey, P = Math.abs(m.y - R.y);
|
|
1025
|
+
if (P < this.snapThreshold) {
|
|
1026
|
+
const w = {
|
|
1027
|
+
snapTo: R.y,
|
|
1028
|
+
offset: m.y - t.y,
|
|
1029
|
+
distance: P,
|
|
1033
1030
|
guide: {
|
|
1034
1031
|
type: "horizontal",
|
|
1035
|
-
y:
|
|
1036
|
-
x1: Math.min(
|
|
1037
|
-
x2: Math.max(
|
|
1032
|
+
y: R.y,
|
|
1033
|
+
x1: Math.min(m.x, R.x) - 50,
|
|
1034
|
+
x2: Math.max(m.x, R.x) + 50,
|
|
1038
1035
|
movingKey: y,
|
|
1039
|
-
otherKey:
|
|
1036
|
+
otherKey: x
|
|
1040
1037
|
}
|
|
1041
1038
|
};
|
|
1042
|
-
d.push(
|
|
1039
|
+
d.push(w), P < h && (h = P, r = w);
|
|
1043
1040
|
}
|
|
1044
1041
|
}
|
|
1045
1042
|
}
|
|
@@ -1047,12 +1044,12 @@ class Qe {
|
|
|
1047
1044
|
a && (p = a.snapTo - a.offset), r && (b = r.snapTo - r.offset);
|
|
1048
1045
|
const g = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
|
|
1049
1046
|
for (const y of c) {
|
|
1050
|
-
const
|
|
1051
|
-
(!
|
|
1047
|
+
const m = g.get(y.snapTo);
|
|
1048
|
+
(!m || y.distance < m.distance) && g.set(y.snapTo, y);
|
|
1052
1049
|
}
|
|
1053
1050
|
for (const y of d) {
|
|
1054
|
-
const
|
|
1055
|
-
(!
|
|
1051
|
+
const m = f.get(y.snapTo);
|
|
1052
|
+
(!m || y.distance < m.distance) && f.set(y.snapTo, y);
|
|
1056
1053
|
}
|
|
1057
1054
|
for (const y of g.values())
|
|
1058
1055
|
u.push(y.guide);
|
|
@@ -1081,7 +1078,7 @@ class Qe {
|
|
|
1081
1078
|
* Used for text elements where height is derived, not settable
|
|
1082
1079
|
*/
|
|
1083
1080
|
_isPositionBasedSnap(t, e) {
|
|
1084
|
-
return e === "x" ? !1 : e === "y" ? !(
|
|
1081
|
+
return e === "x" ? !1 : e === "y" ? !(St(t) !== void 0 || t.height !== void 0 && typeof t.height == "number") : !1;
|
|
1085
1082
|
}
|
|
1086
1083
|
/**
|
|
1087
1084
|
* Determine which snap keys to use based on the resize handle
|
|
@@ -1261,7 +1258,7 @@ class Qe {
|
|
|
1261
1258
|
* @returns {Object} { frozenWidth, frozenHeight } - Dimensions at snap point
|
|
1262
1259
|
*/
|
|
1263
1260
|
_calculateFrozenDimensionsAtSnap(t, e, o, n, s) {
|
|
1264
|
-
const i = lt(t) ?? t.width ?? 0, a =
|
|
1261
|
+
const i = lt(t) ?? t.width ?? 0, a = St(t) ?? t.height ?? 0;
|
|
1265
1262
|
let r = i, l = a;
|
|
1266
1263
|
const h = t.transformType === "image", c = h ? t.imageAspectRatio || (i && a ? i / a : null) : null, d = n.toLowerCase();
|
|
1267
1264
|
return e === "x" ? d.includes("right") ? (r = i + o, h && c && (l = r / c)) : d.includes("left") && (r = i - o, h && c && (l = r / c)) : e === "y" && (d.includes("bottom") ? (l = a + o, h && c && (r = l * c)) : d.includes("top") && (l = a - o, h && c && (r = l * c))), { frozenWidth: r, frozenHeight: l };
|
|
@@ -1300,11 +1297,11 @@ class Qe {
|
|
|
1300
1297
|
s,
|
|
1301
1298
|
i
|
|
1302
1299
|
), y = this._isPositionBasedSnap(n, t);
|
|
1303
|
-
let
|
|
1304
|
-
g ?
|
|
1300
|
+
let m;
|
|
1301
|
+
g ? m = b.frozenPosition : y ? m = {
|
|
1305
1302
|
x: t === "x" ? n.x + l : n.x,
|
|
1306
1303
|
y: t === "y" ? n.y + l : n.y
|
|
1307
|
-
} :
|
|
1304
|
+
} : m = { x: n.x, y: n.y };
|
|
1308
1305
|
const T = this._calculateFrozenDimensionsAtSnap(
|
|
1309
1306
|
n,
|
|
1310
1307
|
t,
|
|
@@ -1318,7 +1315,7 @@ class Qe {
|
|
|
1318
1315
|
frozenFontSize: f,
|
|
1319
1316
|
frozenWidth: T.frozenWidth,
|
|
1320
1317
|
frozenHeight: T.frozenHeight,
|
|
1321
|
-
frozenPosition:
|
|
1318
|
+
frozenPosition: m,
|
|
1322
1319
|
isPositionBasedSnap: y
|
|
1323
1320
|
};
|
|
1324
1321
|
}
|
|
@@ -1365,7 +1362,7 @@ class Qe {
|
|
|
1365
1362
|
const n = t.getVisualBoundingBox(), s = t.transformType === "image";
|
|
1366
1363
|
if (!s) {
|
|
1367
1364
|
const i = lt(t);
|
|
1368
|
-
i !== void 0 ?
|
|
1365
|
+
i !== void 0 ? wt(t, i + e) : t.width !== void 0 && (t.width += e);
|
|
1369
1366
|
}
|
|
1370
1367
|
if (o.anchor === "middle-right") {
|
|
1371
1368
|
const i = ht.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
|
|
@@ -1382,7 +1379,7 @@ class Qe {
|
|
|
1382
1379
|
const n = t.getVisualBoundingBox(), s = t.transformType === "image";
|
|
1383
1380
|
if (!s) {
|
|
1384
1381
|
const i = lt(t);
|
|
1385
|
-
i !== void 0 ?
|
|
1382
|
+
i !== void 0 ? wt(t, i - e) : t.width !== void 0 && (t.width -= e);
|
|
1386
1383
|
}
|
|
1387
1384
|
if (o.anchor === "middle-left") {
|
|
1388
1385
|
const i = ht.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
|
|
@@ -1398,8 +1395,8 @@ class Qe {
|
|
|
1398
1395
|
_adjustElementForBottomResize(t, e, o) {
|
|
1399
1396
|
const n = t.getVisualBoundingBox(), s = t.transformType === "image";
|
|
1400
1397
|
if (!s) {
|
|
1401
|
-
const r =
|
|
1402
|
-
r !== void 0 ?
|
|
1398
|
+
const r = St(t);
|
|
1399
|
+
r !== void 0 ? Pt(t, r + e) : t.height !== void 0 && (t.height += e);
|
|
1403
1400
|
}
|
|
1404
1401
|
const i = t.getVisualBoundingBox(), a = Math.abs(i.height - n.height) > 0.01;
|
|
1405
1402
|
if (o.anchor === "middle-bottom") {
|
|
@@ -1416,8 +1413,8 @@ class Qe {
|
|
|
1416
1413
|
_adjustElementForTopResize(t, e, o) {
|
|
1417
1414
|
const n = t.getVisualBoundingBox(), s = t.transformType === "image";
|
|
1418
1415
|
if (!s) {
|
|
1419
|
-
const r =
|
|
1420
|
-
r !== void 0 ?
|
|
1416
|
+
const r = St(t);
|
|
1417
|
+
r !== void 0 ? Pt(t, r - e) : t.height !== void 0 && (t.height -= e);
|
|
1421
1418
|
}
|
|
1422
1419
|
const i = t.getVisualBoundingBox(), a = Math.abs(i.height - n.height) > 0.01;
|
|
1423
1420
|
if (o.anchor === "middle-top") {
|
|
@@ -1440,62 +1437,62 @@ class Qe {
|
|
|
1440
1437
|
* @returns {object} Modified resize result with adjusted element
|
|
1441
1438
|
*/
|
|
1442
1439
|
snapDimensions(t, e, o = null) {
|
|
1443
|
-
var
|
|
1440
|
+
var S, M, R, x, P;
|
|
1444
1441
|
if (!this.enabled || !e)
|
|
1445
1442
|
return this.clearGuides(), t;
|
|
1446
1443
|
const { element: n } = t, s = t.handle;
|
|
1447
1444
|
let i;
|
|
1448
1445
|
const a = n.transformType === "image", r = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
|
|
1449
1446
|
if (a && r && t.isFrozen && t.unfrozenDimensions) {
|
|
1450
|
-
const
|
|
1451
|
-
if (
|
|
1452
|
-
const
|
|
1453
|
-
|
|
1447
|
+
const w = n.clone();
|
|
1448
|
+
if (w.transformData) {
|
|
1449
|
+
const A = n.getVisualBoundingBox(), B = A.width, L = A.height, W = (o == null ? void 0 : o.width) ?? n.width ?? 0, O = (o == null ? void 0 : o.height) ?? n.height ?? 0, D = (o == null ? void 0 : o.visualWidth) ?? B, F = (o == null ? void 0 : o.visualHeight) ?? L, E = t.unfrozenDimensions.width / D, $ = t.unfrozenDimensions.height / F;
|
|
1450
|
+
wt(w, W * E), Pt(w, O * $);
|
|
1454
1451
|
}
|
|
1455
|
-
i = bt.getSnapAnchors(
|
|
1452
|
+
i = bt.getSnapAnchors(w);
|
|
1456
1453
|
} else
|
|
1457
1454
|
i = bt.getSnapAnchors(n);
|
|
1458
|
-
const l = e.filter((
|
|
1455
|
+
const l = e.filter((w) => w.id !== n.id);
|
|
1459
1456
|
if (l.length === 0)
|
|
1460
1457
|
return this.clearGuides(), t;
|
|
1461
1458
|
this._populateSpatialGrid(l);
|
|
1462
1459
|
const h = this._getSnapKeysForHandle(s), c = this._getTargetSnapKeys(), d = this._findXSnaps(i, l, h, c), u = this._findYSnaps(i, l, h, c);
|
|
1463
1460
|
this._prioritizeSnaps(d, s, "x"), this._prioritizeSnaps(u, s, "y");
|
|
1464
|
-
const p = this._processStickySnap("x", i, d, n, s, o, l), b = this._processStickySnap("y", i, u, n, s, o, l), g = p.snapDelta, f = b.snapDelta, y = p.bestSnap,
|
|
1465
|
-
y && T.push(y.guide),
|
|
1466
|
-
const
|
|
1467
|
-
if (a &&
|
|
1461
|
+
const p = this._processStickySnap("x", i, d, n, s, o, l), b = this._processStickySnap("y", i, u, n, s, o, l), g = p.snapDelta, f = b.snapDelta, y = p.bestSnap, m = b.bestSnap, T = [];
|
|
1462
|
+
y && T.push(y.guide), m && T.push(m.guide), this.guides = T, T.length > 0;
|
|
1463
|
+
const v = s && (s.anchor === "top-left" || s.anchor === "top-right" || s.anchor === "bottom-left" || s.anchor === "bottom-right");
|
|
1464
|
+
if (a && v && (g !== 0 || f !== 0))
|
|
1468
1465
|
return t;
|
|
1469
1466
|
if (g !== 0 || f !== 0) {
|
|
1470
|
-
const
|
|
1471
|
-
if (!
|
|
1467
|
+
const w = n.clone(), A = this.activeSnaps.x || this.activeSnaps.y, B = (A == null ? void 0 : A.frozenFontSize) ?? n.fontSize ?? 0, L = (A == null ? void 0 : A.frozenWidth) ?? lt(n) ?? n.width ?? 0, W = (A == null ? void 0 : A.frozenHeight) ?? St(n) ?? n.height ?? 0, O = (A == null ? void 0 : A.frozenPosition) ?? { x: n.x, y: n.y }, D = w.isCropping && !String(s.anchor).startsWith("crop-");
|
|
1468
|
+
if (!D)
|
|
1472
1469
|
if (s && s.anchor) {
|
|
1473
1470
|
if (g !== 0) {
|
|
1474
|
-
const
|
|
1475
|
-
I && I.includes("right") ? this._adjustElementForRightResize(
|
|
1471
|
+
const k = (S = this.activeSnaps.x) == null ? void 0 : S.anchorKey, I = k == null ? void 0 : k.toLowerCase();
|
|
1472
|
+
I && I.includes("right") ? this._adjustElementForRightResize(w, g, s) : I && I.includes("left") ? this._adjustElementForLeftResize(w, g, s) : w.x += g;
|
|
1476
1473
|
}
|
|
1477
1474
|
if (f !== 0) {
|
|
1478
|
-
const
|
|
1479
|
-
I && I.includes("bottom") ? this._adjustElementForBottomResize(
|
|
1475
|
+
const k = (M = this.activeSnaps.y) == null ? void 0 : M.anchorKey, I = k == null ? void 0 : k.toLowerCase();
|
|
1476
|
+
I && I.includes("bottom") ? this._adjustElementForBottomResize(w, f, s) : I && I.includes("top") ? this._adjustElementForTopResize(w, f, s) : w.y += f;
|
|
1480
1477
|
}
|
|
1481
1478
|
} else
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
const
|
|
1485
|
-
if (
|
|
1486
|
-
if (lt(
|
|
1487
|
-
const
|
|
1488
|
-
let I = L, _ =
|
|
1489
|
-
|
|
1490
|
-
const
|
|
1491
|
-
|
|
1479
|
+
w.x += g, w.y += f;
|
|
1480
|
+
w.fontSize !== void 0 && (w.fontSize = B);
|
|
1481
|
+
const F = w.transformType === "image", E = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
|
|
1482
|
+
if (F && E) {
|
|
1483
|
+
if (lt(w) !== void 0) {
|
|
1484
|
+
const k = this.activeSnaps.x || this.activeSnaps.y;
|
|
1485
|
+
let I = L, _ = W;
|
|
1486
|
+
k && (I = k.frozenWidth ?? I, _ = k.frozenHeight ?? _);
|
|
1487
|
+
const H = lt(n), V = St(n), G = w.imageAspectRatio || (H && V ? H / V : null);
|
|
1488
|
+
G && G !== 0 && (_ = I / G), wt(w, I), Pt(w, _), k && (k.frozenWidth = I, k.frozenHeight = _);
|
|
1492
1489
|
}
|
|
1493
1490
|
} else
|
|
1494
|
-
(((
|
|
1495
|
-
const $ = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), j = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"),
|
|
1496
|
-
return (g === 0 ||
|
|
1491
|
+
(((R = this.activeSnaps.y) == null ? void 0 : R.isPositionBasedSnap) || !1) && (lt(w) !== void 0 ? wt(w, L) : w.width !== void 0 && (w.width = L));
|
|
1492
|
+
const $ = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), j = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"), J = ((x = this.activeSnaps.x) == null ? void 0 : x.isPositionBasedSnap) || !1, X = ((P = this.activeSnaps.y) == null ? void 0 : P.isPositionBasedSnap) || !1;
|
|
1493
|
+
return (g === 0 || J) && !$ && !j && !D && (w.x = O.x), (f === 0 || X) && !j && !$ && !D && (w.y = O.y), {
|
|
1497
1494
|
...t,
|
|
1498
|
-
element:
|
|
1495
|
+
element: w,
|
|
1499
1496
|
snapAdjustment: { dx: g, dy: f },
|
|
1500
1497
|
// Flag to indicate we're in sticky snap mode (used to freeze font size)
|
|
1501
1498
|
isInStickySnap: !0
|
|
@@ -1510,12 +1507,12 @@ class Qe {
|
|
|
1510
1507
|
if (!this.enabled) return t;
|
|
1511
1508
|
const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], s = 5;
|
|
1512
1509
|
for (const i of n)
|
|
1513
|
-
if (
|
|
1510
|
+
if (ae(t, i, s))
|
|
1514
1511
|
return i;
|
|
1515
1512
|
return t;
|
|
1516
1513
|
}
|
|
1517
1514
|
}
|
|
1518
|
-
class
|
|
1515
|
+
class qe {
|
|
1519
1516
|
constructor(t = {}) {
|
|
1520
1517
|
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 = [];
|
|
1521
1518
|
}
|
|
@@ -1550,7 +1547,7 @@ class tn {
|
|
|
1550
1547
|
snapToSpacing(t, e, o) {
|
|
1551
1548
|
if (!this.enabled || !o)
|
|
1552
1549
|
return t;
|
|
1553
|
-
const n =
|
|
1550
|
+
const n = Ft, s = o.filter((g) => g.id !== e.id);
|
|
1554
1551
|
if (s.length === 0)
|
|
1555
1552
|
return t;
|
|
1556
1553
|
const i = e.clone();
|
|
@@ -1562,44 +1559,44 @@ class tn {
|
|
|
1562
1559
|
return !(a.x + a.width < f.x || a.x > f.x + f.width);
|
|
1563
1560
|
});
|
|
1564
1561
|
if (p.sort((g, f) => {
|
|
1565
|
-
const y = g.getVisualBoundingBox(),
|
|
1566
|
-
return y.y -
|
|
1562
|
+
const y = g.getVisualBoundingBox(), m = f.getVisualBoundingBox();
|
|
1563
|
+
return y.y - m.y;
|
|
1567
1564
|
}), p.length >= 1) {
|
|
1568
1565
|
let g = null, f = null;
|
|
1569
1566
|
for (const T of p) {
|
|
1570
|
-
const
|
|
1571
|
-
|
|
1567
|
+
const v = T.getVisualBoundingBox();
|
|
1568
|
+
v.y + v.height <= a.y ? (!g || v.y > g.getVisualBoundingBox().y) && (g = T) : v.y >= a.y + a.height && (!f || v.y < f.getVisualBoundingBox().y) && (f = T);
|
|
1572
1569
|
}
|
|
1573
1570
|
const y = [];
|
|
1574
1571
|
for (let T = 0; T < p.length - 1; T++) {
|
|
1575
|
-
const
|
|
1576
|
-
y.push(
|
|
1572
|
+
const v = p[T].getVisualBoundingBox(), M = p[T + 1].getVisualBoundingBox().y - (v.y + v.height);
|
|
1573
|
+
y.push(M);
|
|
1577
1574
|
}
|
|
1578
|
-
let
|
|
1575
|
+
let m = null;
|
|
1579
1576
|
if (g) {
|
|
1580
|
-
const T = g.getVisualBoundingBox(),
|
|
1581
|
-
for (const
|
|
1582
|
-
if (Math.abs(
|
|
1583
|
-
|
|
1577
|
+
const T = g.getVisualBoundingBox(), v = a.y - (T.y + T.height);
|
|
1578
|
+
for (const S of y)
|
|
1579
|
+
if (Math.abs(v - S) <= n) {
|
|
1580
|
+
m = S;
|
|
1584
1581
|
break;
|
|
1585
1582
|
}
|
|
1586
1583
|
}
|
|
1587
|
-
if (!
|
|
1588
|
-
const
|
|
1589
|
-
for (const
|
|
1590
|
-
if (Math.abs(
|
|
1591
|
-
|
|
1584
|
+
if (!m && f) {
|
|
1585
|
+
const v = f.getVisualBoundingBox().y - (a.y + a.height);
|
|
1586
|
+
for (const S of y)
|
|
1587
|
+
if (Math.abs(v - S) <= n) {
|
|
1588
|
+
m = S;
|
|
1592
1589
|
break;
|
|
1593
1590
|
}
|
|
1594
1591
|
}
|
|
1595
|
-
if (
|
|
1592
|
+
if (m !== null && m > 0) {
|
|
1596
1593
|
if (g) {
|
|
1597
|
-
const T = g.getVisualBoundingBox(),
|
|
1598
|
-
Math.abs(
|
|
1594
|
+
const T = g.getVisualBoundingBox(), v = a.y - (T.y + T.height);
|
|
1595
|
+
Math.abs(v - m) <= n && (c = T.y + T.height + m - l, u = !0);
|
|
1599
1596
|
}
|
|
1600
1597
|
if (!u && f) {
|
|
1601
|
-
const T = f.getVisualBoundingBox(),
|
|
1602
|
-
Math.abs(
|
|
1598
|
+
const T = f.getVisualBoundingBox(), v = T.y - (a.y + a.height);
|
|
1599
|
+
Math.abs(v - m) <= n && (c = T.y - a.height - m - l, u = !0);
|
|
1603
1600
|
}
|
|
1604
1601
|
}
|
|
1605
1602
|
}
|
|
@@ -1608,44 +1605,44 @@ class tn {
|
|
|
1608
1605
|
return !(a.y + a.height < f.y || a.y > f.y + f.height);
|
|
1609
1606
|
});
|
|
1610
1607
|
if (b.sort((g, f) => {
|
|
1611
|
-
const y = g.getVisualBoundingBox(),
|
|
1612
|
-
return y.x -
|
|
1608
|
+
const y = g.getVisualBoundingBox(), m = f.getVisualBoundingBox();
|
|
1609
|
+
return y.x - m.x;
|
|
1613
1610
|
}), b.length >= 1) {
|
|
1614
1611
|
let g = null, f = null;
|
|
1615
1612
|
for (const T of b) {
|
|
1616
|
-
const
|
|
1617
|
-
|
|
1613
|
+
const v = T.getVisualBoundingBox();
|
|
1614
|
+
v.x + v.width <= a.x ? (!g || v.x > g.getVisualBoundingBox().x) && (g = T) : v.x >= a.x + a.width && (!f || v.x < f.getVisualBoundingBox().x) && (f = T);
|
|
1618
1615
|
}
|
|
1619
1616
|
const y = [];
|
|
1620
1617
|
for (let T = 0; T < b.length - 1; T++) {
|
|
1621
|
-
const
|
|
1622
|
-
y.push(
|
|
1618
|
+
const v = b[T].getVisualBoundingBox(), M = b[T + 1].getVisualBoundingBox().x - (v.x + v.width);
|
|
1619
|
+
y.push(M);
|
|
1623
1620
|
}
|
|
1624
|
-
let
|
|
1621
|
+
let m = null;
|
|
1625
1622
|
if (g) {
|
|
1626
|
-
const T = g.getVisualBoundingBox(),
|
|
1627
|
-
for (const
|
|
1628
|
-
if (Math.abs(
|
|
1629
|
-
|
|
1623
|
+
const T = g.getVisualBoundingBox(), v = a.x - (T.x + T.width);
|
|
1624
|
+
for (const S of y)
|
|
1625
|
+
if (Math.abs(v - S) <= n) {
|
|
1626
|
+
m = S;
|
|
1630
1627
|
break;
|
|
1631
1628
|
}
|
|
1632
1629
|
}
|
|
1633
|
-
if (!
|
|
1634
|
-
const
|
|
1635
|
-
for (const
|
|
1636
|
-
if (Math.abs(
|
|
1637
|
-
|
|
1630
|
+
if (!m && f) {
|
|
1631
|
+
const v = f.getVisualBoundingBox().x - (a.x + a.width);
|
|
1632
|
+
for (const S of y)
|
|
1633
|
+
if (Math.abs(v - S) <= n) {
|
|
1634
|
+
m = S;
|
|
1638
1635
|
break;
|
|
1639
1636
|
}
|
|
1640
1637
|
}
|
|
1641
|
-
if (
|
|
1638
|
+
if (m !== null && m > 0) {
|
|
1642
1639
|
if (g) {
|
|
1643
|
-
const T = g.getVisualBoundingBox(),
|
|
1644
|
-
Math.abs(
|
|
1640
|
+
const T = g.getVisualBoundingBox(), v = a.x - (T.x + T.width);
|
|
1641
|
+
Math.abs(v - m) <= n && (h = T.x + T.width + m - r, d = !0);
|
|
1645
1642
|
}
|
|
1646
1643
|
if (!d && f) {
|
|
1647
|
-
const T = f.getVisualBoundingBox(),
|
|
1648
|
-
Math.abs(
|
|
1644
|
+
const T = f.getVisualBoundingBox(), v = T.x - (a.x + a.width);
|
|
1645
|
+
Math.abs(v - m) <= n && (h = T.x - a.width - m - r, d = !0);
|
|
1649
1646
|
}
|
|
1650
1647
|
}
|
|
1651
1648
|
}
|
|
@@ -1737,16 +1734,16 @@ class tn {
|
|
|
1737
1734
|
labelY: g,
|
|
1738
1735
|
isAltHover: !0
|
|
1739
1736
|
}), a++);
|
|
1740
|
-
let
|
|
1741
|
-
const
|
|
1742
|
-
h.y >= n.y + n.height ? (
|
|
1737
|
+
let m = 0, T = !1, v = 0, S = 0, M = 0;
|
|
1738
|
+
const x = 30 * (r % 2 === 0 ? 1 : -1);
|
|
1739
|
+
h.y >= n.y + n.height ? (m = h.y - (n.y + n.height), m >= this.minDistance && (T = !0, v = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, S = n.y + n.height, M = h.y)) : n.y >= h.y + h.height && (m = n.y - (h.y + h.height), m >= this.minDistance && (T = !0, v = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, S = h.y + h.height, M = n.y)), T && (o.push({
|
|
1743
1740
|
type: "vertical",
|
|
1744
|
-
distance: Math.round(
|
|
1745
|
-
x:
|
|
1746
|
-
y1:
|
|
1747
|
-
y2:
|
|
1748
|
-
labelX:
|
|
1749
|
-
labelY: (
|
|
1741
|
+
distance: Math.round(m),
|
|
1742
|
+
x: v,
|
|
1743
|
+
y1: S,
|
|
1744
|
+
y2: M,
|
|
1745
|
+
labelX: v,
|
|
1746
|
+
labelY: (S + M) / 2,
|
|
1750
1747
|
isAltHover: !0
|
|
1751
1748
|
}), r++);
|
|
1752
1749
|
}
|
|
@@ -1771,15 +1768,15 @@ class tn {
|
|
|
1771
1768
|
for (let u = 0; u < d.length - 1; u++) {
|
|
1772
1769
|
const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.x - (g.x + g.width);
|
|
1773
1770
|
if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
|
|
1774
|
-
const
|
|
1771
|
+
const m = Math.max(g.y, f.y), T = Math.min(g.y + g.height, f.y + f.height), v = (m + T) / 2;
|
|
1775
1772
|
i.push({
|
|
1776
1773
|
type: "horizontal",
|
|
1777
1774
|
distance: Math.round(y),
|
|
1778
1775
|
x1: g.x + g.width,
|
|
1779
1776
|
x2: f.x,
|
|
1780
|
-
y:
|
|
1777
|
+
y: v,
|
|
1781
1778
|
labelX: (g.x + g.width + f.x) / 2,
|
|
1782
|
-
labelY:
|
|
1779
|
+
labelY: v
|
|
1783
1780
|
});
|
|
1784
1781
|
}
|
|
1785
1782
|
}
|
|
@@ -1787,15 +1784,15 @@ class tn {
|
|
|
1787
1784
|
for (let u = 0; u < d.length - 1; u++) {
|
|
1788
1785
|
const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.x - (g.x + g.width);
|
|
1789
1786
|
if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
|
|
1790
|
-
const
|
|
1787
|
+
const m = Math.max(g.y, f.y), T = Math.min(g.y + g.height, f.y + f.height), v = (m + T) / 2;
|
|
1791
1788
|
i.push({
|
|
1792
1789
|
type: "horizontal",
|
|
1793
1790
|
distance: Math.round(y),
|
|
1794
1791
|
x1: g.x + g.width,
|
|
1795
1792
|
x2: f.x,
|
|
1796
|
-
y:
|
|
1793
|
+
y: v,
|
|
1797
1794
|
labelX: (g.x + g.width + f.x) / 2,
|
|
1798
|
-
labelY:
|
|
1795
|
+
labelY: v
|
|
1799
1796
|
});
|
|
1800
1797
|
}
|
|
1801
1798
|
}
|
|
@@ -1812,14 +1809,14 @@ class tn {
|
|
|
1812
1809
|
for (let u = 0; u < d.length - 1; u++) {
|
|
1813
1810
|
const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.y - (g.y + g.height);
|
|
1814
1811
|
if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
|
|
1815
|
-
const
|
|
1812
|
+
const m = Math.max(g.x, f.x), T = Math.min(g.x + g.width, f.x + f.width), v = (m + T) / 2;
|
|
1816
1813
|
i.push({
|
|
1817
1814
|
type: "vertical",
|
|
1818
1815
|
distance: Math.round(y),
|
|
1819
|
-
x:
|
|
1816
|
+
x: v,
|
|
1820
1817
|
y1: g.y + g.height,
|
|
1821
1818
|
y2: f.y,
|
|
1822
|
-
labelX:
|
|
1819
|
+
labelX: v,
|
|
1823
1820
|
labelY: (g.y + g.height + f.y) / 2
|
|
1824
1821
|
});
|
|
1825
1822
|
}
|
|
@@ -1828,14 +1825,14 @@ class tn {
|
|
|
1828
1825
|
for (let u = 0; u < d.length - 1; u++) {
|
|
1829
1826
|
const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.y - (g.y + g.height);
|
|
1830
1827
|
if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
|
|
1831
|
-
const
|
|
1828
|
+
const m = Math.max(g.x, f.x), T = Math.min(g.x + g.width, f.x + f.width), v = (m + T) / 2;
|
|
1832
1829
|
i.push({
|
|
1833
1830
|
type: "vertical",
|
|
1834
1831
|
distance: Math.round(y),
|
|
1835
|
-
x:
|
|
1832
|
+
x: v,
|
|
1836
1833
|
y1: g.y + g.height,
|
|
1837
1834
|
y2: f.y,
|
|
1838
|
-
labelX:
|
|
1835
|
+
labelX: v,
|
|
1839
1836
|
labelY: (g.y + g.height + f.y) / 2
|
|
1840
1837
|
});
|
|
1841
1838
|
}
|
|
@@ -1847,7 +1844,7 @@ class tn {
|
|
|
1847
1844
|
* Check if spacing would snap to a pattern
|
|
1848
1845
|
*/
|
|
1849
1846
|
checkIfWouldSnap(t, e, o, n) {
|
|
1850
|
-
const s =
|
|
1847
|
+
const s = Ft;
|
|
1851
1848
|
if (o === "top" || o === "bottom") {
|
|
1852
1849
|
const i = n.filter((a) => {
|
|
1853
1850
|
const r = a.getVisualBoundingBox();
|
|
@@ -1947,7 +1944,7 @@ class tn {
|
|
|
1947
1944
|
}
|
|
1948
1945
|
}
|
|
1949
1946
|
}
|
|
1950
|
-
const Lt =
|
|
1947
|
+
const Lt = $t("ArtboardRenderer"), _e = {
|
|
1951
1948
|
showLabel: !0,
|
|
1952
1949
|
showBorder: !0,
|
|
1953
1950
|
borderColor: "",
|
|
@@ -1965,9 +1962,9 @@ const Lt = zt("ArtboardRenderer"), Ye = {
|
|
|
1965
1962
|
borderRadius: 0
|
|
1966
1963
|
// Default to no border radius (sharp corners)
|
|
1967
1964
|
};
|
|
1968
|
-
class
|
|
1965
|
+
class Qt {
|
|
1969
1966
|
constructor(t = {}) {
|
|
1970
|
-
this.options = { ...
|
|
1967
|
+
this.options = { ..._e, ...t };
|
|
1971
1968
|
}
|
|
1972
1969
|
/**
|
|
1973
1970
|
* Render an artboard
|
|
@@ -1989,9 +1986,9 @@ class oe {
|
|
|
1989
1986
|
* Renders preset color as base layer, then texture on top
|
|
1990
1987
|
*/
|
|
1991
1988
|
renderTextureBackground(t, e) {
|
|
1992
|
-
const o =
|
|
1989
|
+
const o = Bt.getTexture(e.backgroundTexture), n = Bt.getTexturePresetColor(e.backgroundTexture);
|
|
1993
1990
|
if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !o || !o.complete) {
|
|
1994
|
-
|
|
1991
|
+
Bt.loadTexture(e.backgroundTexture).catch((s) => {
|
|
1995
1992
|
Lt.error("Failed to load texture:", s);
|
|
1996
1993
|
});
|
|
1997
1994
|
return;
|
|
@@ -2013,7 +2010,7 @@ class oe {
|
|
|
2013
2010
|
* Render artboard border (respects clipShape and borderRadius option)
|
|
2014
2011
|
*/
|
|
2015
2012
|
renderBorder(t, e, o) {
|
|
2016
|
-
const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor ||
|
|
2013
|
+
const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || re(), h = this.options.selectedBorderColor || tt();
|
|
2017
2014
|
if (t.strokeStyle = o ? h : l, t.lineWidth = o ? this.options.selectedBorderWidth : this.options.borderWidth, t.beginPath(), !r || r === "rectangle")
|
|
2018
2015
|
if (this.options.borderRadius > 0) {
|
|
2019
2016
|
const c = Math.min(this.options.borderRadius, Math.min(i, a) / 2);
|
|
@@ -2042,7 +2039,7 @@ class oe {
|
|
|
2042
2039
|
renderLabel(t, e, o) {
|
|
2043
2040
|
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;
|
|
2044
2041
|
t.font = `${n}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
|
|
2045
|
-
const l = this.options.selectedBorderColor || tt(), h = this.options.labelColor ||
|
|
2042
|
+
const l = this.options.selectedBorderColor || tt(), h = this.options.labelColor || le();
|
|
2046
2043
|
t.fillStyle = o ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
|
|
2047
2044
|
}
|
|
2048
2045
|
/**
|
|
@@ -2145,7 +2142,7 @@ class oe {
|
|
|
2145
2142
|
* Use this when exporting to ensure preview background is never included
|
|
2146
2143
|
*/
|
|
2147
2144
|
static createForExport(t = {}) {
|
|
2148
|
-
return new
|
|
2145
|
+
return new Qt({
|
|
2149
2146
|
...t,
|
|
2150
2147
|
showPreviewBackground: !1
|
|
2151
2148
|
// CRITICAL: Never show preview in exports
|
|
@@ -2158,22 +2155,22 @@ class oe {
|
|
|
2158
2155
|
return !!(this.options.showPreviewBackground && t.previewBackgroundColor && t.previewBackgroundColor !== "transparent");
|
|
2159
2156
|
}
|
|
2160
2157
|
}
|
|
2161
|
-
function
|
|
2162
|
-
return
|
|
2158
|
+
function Ue(C) {
|
|
2159
|
+
return C instanceof fe;
|
|
2163
2160
|
}
|
|
2164
|
-
function
|
|
2165
|
-
return
|
|
2161
|
+
function ze(C) {
|
|
2162
|
+
return C instanceof jt;
|
|
2166
2163
|
}
|
|
2167
|
-
function
|
|
2168
|
-
return
|
|
2164
|
+
function Wt(C) {
|
|
2165
|
+
return C instanceof he;
|
|
2169
2166
|
}
|
|
2170
|
-
function
|
|
2171
|
-
return
|
|
2167
|
+
function Ze(C) {
|
|
2168
|
+
return C instanceof de;
|
|
2172
2169
|
}
|
|
2173
|
-
function
|
|
2174
|
-
return
|
|
2170
|
+
function Je(C) {
|
|
2171
|
+
return C instanceof ce;
|
|
2175
2172
|
}
|
|
2176
|
-
class
|
|
2173
|
+
class mt {
|
|
2177
2174
|
/**
|
|
2178
2175
|
* Render selection box layer
|
|
2179
2176
|
*/
|
|
@@ -2181,7 +2178,7 @@ class St {
|
|
|
2181
2178
|
if (!e || e.visible === !1 || o && o.getMode() === "drag" || "isGroup" in e && e.isGroup) return;
|
|
2182
2179
|
const i = e.getVisualBoundingBox(), a = e.getRotationAnchor();
|
|
2183
2180
|
t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth = 2, t.translate(a.x * n, a.y * n), t.rotate(ht.toRadians(e.rotation)), t.translate(-a.x * n, -a.y * n);
|
|
2184
|
-
const r =
|
|
2181
|
+
const r = it.canvas.selectionPadding;
|
|
2185
2182
|
t.strokeRect(
|
|
2186
2183
|
(i.x - r) * n,
|
|
2187
2184
|
(i.y - r) * n,
|
|
@@ -2198,14 +2195,14 @@ class St {
|
|
|
2198
2195
|
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;
|
|
2199
2196
|
t.save(), t.font = "10px system-ui, -apple-system, sans-serif";
|
|
2200
2197
|
const p = t.measureText(l).width + 12, b = 18;
|
|
2201
|
-
t.shadowColor =
|
|
2198
|
+
t.shadowColor = ge(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = ue(t.canvas), t.beginPath(), t.roundRect(
|
|
2202
2199
|
c - p / 2,
|
|
2203
2200
|
d - b / 2,
|
|
2204
2201
|
p,
|
|
2205
2202
|
b,
|
|
2206
2203
|
3
|
|
2207
2204
|
// Smaller border radius
|
|
2208
|
-
), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle =
|
|
2205
|
+
), 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();
|
|
2209
2206
|
}
|
|
2210
2207
|
/**
|
|
2211
2208
|
* Render transform handles layer
|
|
@@ -2243,7 +2240,7 @@ class _t {
|
|
|
2243
2240
|
const c = performance.now() - e.startTime;
|
|
2244
2241
|
h = Math.min(c / r, 1) * l;
|
|
2245
2242
|
}
|
|
2246
|
-
t.strokeStyle =
|
|
2243
|
+
t.strokeStyle = ye(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, s, i), t.restore();
|
|
2247
2244
|
}
|
|
2248
2245
|
/**
|
|
2249
2246
|
* Render outline for a specific element type
|
|
@@ -2287,13 +2284,13 @@ class _t {
|
|
|
2287
2284
|
{ x: -h, y: c }
|
|
2288
2285
|
// bottom-left
|
|
2289
2286
|
], u = d.map((b, g) => {
|
|
2290
|
-
const f = d[(g + 1) % 3], y = f.x - b.x,
|
|
2291
|
-
return { x:
|
|
2287
|
+
const f = d[(g + 1) % 3], y = f.x - b.x, m = f.y - b.y, T = Math.sqrt(y * y + m * m);
|
|
2288
|
+
return { x: m / T, y: -y / T };
|
|
2292
2289
|
}), p = d.map((b, g) => {
|
|
2293
|
-
const f = u[(g + 2) % 3], y = u[g],
|
|
2290
|
+
const f = u[(g + 2) % 3], y = u[g], m = f.x + y.x, T = f.y + y.y, v = Math.sqrt(m * m + T * T), S = (m * f.x + T * f.y) / v, M = l / S;
|
|
2294
2291
|
return {
|
|
2295
|
-
x: b.x +
|
|
2296
|
-
y: b.y + T /
|
|
2292
|
+
x: b.x + m / v * M,
|
|
2293
|
+
y: b.y + T / v * M
|
|
2297
2294
|
};
|
|
2298
2295
|
});
|
|
2299
2296
|
t.moveTo(p[0].x, p[0].y), t.lineTo(p[1].x, p[1].y), t.lineTo(p[2].x, p[2].y), t.closePath();
|
|
@@ -2371,7 +2368,7 @@ class _t {
|
|
|
2371
2368
|
*/
|
|
2372
2369
|
static renderHoverRingEffect(t, e, o) {
|
|
2373
2370
|
t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o);
|
|
2374
|
-
const n = e.fontSize, s = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l =
|
|
2371
|
+
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 * 1.2, c = 4 / o, d = 4 / o, u = document.createElement("canvas");
|
|
2375
2372
|
u.width = t.canvas.width, u.height = t.canvas.height;
|
|
2376
2373
|
const p = u.getContext("2d");
|
|
2377
2374
|
if (!p) {
|
|
@@ -2381,84 +2378,84 @@ class _t {
|
|
|
2381
2378
|
p.setTransform(t.getTransform()), p.textBaseline = "alphabetic", p.lineJoin = "round";
|
|
2382
2379
|
const b = e.getRichText ? e.getRichText() : null;
|
|
2383
2380
|
if (b) {
|
|
2384
|
-
const g =
|
|
2385
|
-
g.forEach((
|
|
2381
|
+
const g = Ut(b), f = [], y = [];
|
|
2382
|
+
g.forEach((v) => {
|
|
2386
2383
|
if (e.transformType === "custom" && e.transformData) {
|
|
2387
|
-
const
|
|
2384
|
+
const S = e.transformData.width - ft * 2, M = Zt(v, S, {
|
|
2388
2385
|
fontSize: n,
|
|
2389
2386
|
fontFamily: s,
|
|
2390
2387
|
bold: i,
|
|
2391
2388
|
italic: a
|
|
2392
2389
|
});
|
|
2393
|
-
|
|
2394
|
-
f.push(
|
|
2395
|
-
isParagraphStart:
|
|
2396
|
-
isParagraphEnd:
|
|
2390
|
+
M.forEach((R, x) => {
|
|
2391
|
+
f.push(R), y.push({
|
|
2392
|
+
isParagraphStart: x === 0,
|
|
2393
|
+
isParagraphEnd: x === M.length - 1
|
|
2397
2394
|
});
|
|
2398
2395
|
});
|
|
2399
2396
|
} else
|
|
2400
|
-
f.push(
|
|
2397
|
+
f.push(v), y.push({
|
|
2401
2398
|
isParagraphStart: !0,
|
|
2402
2399
|
isParagraphEnd: !0
|
|
2403
2400
|
});
|
|
2404
2401
|
});
|
|
2405
|
-
let
|
|
2406
|
-
f.length === 0 ?
|
|
2407
|
-
const T = -
|
|
2408
|
-
f.forEach((
|
|
2409
|
-
var
|
|
2410
|
-
const
|
|
2411
|
-
let
|
|
2412
|
-
const
|
|
2413
|
-
let
|
|
2414
|
-
|
|
2415
|
-
const $ =
|
|
2416
|
-
let
|
|
2417
|
-
const I =
|
|
2418
|
-
if (!
|
|
2419
|
-
const
|
|
2420
|
-
|
|
2402
|
+
let m;
|
|
2403
|
+
f.length === 0 ? m = 0 : f.length === 1 ? m = l.height : m = (f.length - 1) * h + l.height;
|
|
2404
|
+
const T = -m / 2;
|
|
2405
|
+
f.forEach((v, S) => {
|
|
2406
|
+
var D, F;
|
|
2407
|
+
const M = y[S].isParagraphStart, R = y[S].isParagraphEnd;
|
|
2408
|
+
let x = 0;
|
|
2409
|
+
const P = v.map((E) => E.text).join(""), w = ((D = P.match(/^ +/)) == null ? void 0 : D[0].length) || 0, A = ((F = P.match(/ +$/)) == null ? void 0 : F[0].length) || 0;
|
|
2410
|
+
let B = 0;
|
|
2411
|
+
v.forEach((E) => {
|
|
2412
|
+
const $ = E.style.fontSize !== void 0 ? E.style.fontSize : n, j = E.style.fontFamily !== void 0 ? E.style.fontFamily : s, J = E.style.bold !== void 0 ? E.style.bold : i, X = E.style.italic !== void 0 ? E.style.italic : a;
|
|
2413
|
+
let k = E.text;
|
|
2414
|
+
const I = B, _ = B + E.text.length;
|
|
2415
|
+
if (!M && w > 0 && I < w) {
|
|
2416
|
+
const H = Math.min(w - I, E.text.length);
|
|
2417
|
+
k = k.substring(H);
|
|
2421
2418
|
}
|
|
2422
|
-
if (!
|
|
2423
|
-
const
|
|
2424
|
-
if (_ >
|
|
2425
|
-
const
|
|
2426
|
-
|
|
2419
|
+
if (!R && A > 0) {
|
|
2420
|
+
const H = P.length - A;
|
|
2421
|
+
if (_ > H) {
|
|
2422
|
+
const V = !M && I < w ? Math.min(w - I, E.text.length) : 0, G = Math.max(0, H - I - V);
|
|
2423
|
+
k = k.substring(0, G);
|
|
2427
2424
|
}
|
|
2428
2425
|
}
|
|
2429
|
-
|
|
2426
|
+
k.length > 0 && (t.save(), t.font = Ht($, j, J, X), x += t.measureText(k).width, t.restore()), B += E.text.length;
|
|
2430
2427
|
});
|
|
2431
2428
|
const L = e.transformType === "custom" && e.transformData ? e.transformData.width - ft * 2 : void 0;
|
|
2432
|
-
let
|
|
2433
|
-
r === "center" ?
|
|
2434
|
-
const O = T + l.ascent +
|
|
2435
|
-
|
|
2436
|
-
const $ =
|
|
2437
|
-
|
|
2438
|
-
const
|
|
2439
|
-
let
|
|
2440
|
-
const I =
|
|
2441
|
-
if (!
|
|
2442
|
-
const
|
|
2443
|
-
|
|
2429
|
+
let W;
|
|
2430
|
+
r === "center" ? W = -x / 2 : r === "right" ? W = L !== void 0 ? L / 2 - x : -x : W = L !== void 0 ? -L / 2 : 0;
|
|
2431
|
+
const O = T + l.ascent + S * h;
|
|
2432
|
+
B = 0, v.forEach((E) => {
|
|
2433
|
+
const $ = E.style.fontSize !== void 0 ? E.style.fontSize : n, j = E.style.fontFamily !== void 0 ? E.style.fontFamily : s;
|
|
2434
|
+
E.style.color !== void 0 ? E.style.color : e.color;
|
|
2435
|
+
const J = E.style.bold !== void 0 ? E.style.bold : i, X = E.style.italic !== void 0 ? E.style.italic : a;
|
|
2436
|
+
let k = E.text;
|
|
2437
|
+
const I = B, _ = B + E.text.length;
|
|
2438
|
+
if (!M && w > 0 && I < w) {
|
|
2439
|
+
const H = Math.min(w - I, E.text.length);
|
|
2440
|
+
k = k.substring(H);
|
|
2444
2441
|
}
|
|
2445
|
-
if (!
|
|
2446
|
-
const
|
|
2447
|
-
if (_ >
|
|
2448
|
-
const
|
|
2449
|
-
|
|
2442
|
+
if (!R && A > 0) {
|
|
2443
|
+
const H = P.length - A;
|
|
2444
|
+
if (_ > H) {
|
|
2445
|
+
const V = !M && I < w ? Math.min(w - I, E.text.length) : 0, G = Math.max(0, H - I - V);
|
|
2446
|
+
k = k.substring(0, G);
|
|
2450
2447
|
}
|
|
2451
2448
|
}
|
|
2452
|
-
|
|
2449
|
+
B += E.text.length, k.length > 0 && (p.font = Ht($, j, J, X), p.textAlign = "left", p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.strokeText(k, W, O), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(k, W, O), p.fillText(k, W, O), W += p.measureText(k).width);
|
|
2453
2450
|
});
|
|
2454
2451
|
});
|
|
2455
2452
|
} else {
|
|
2456
|
-
t.font =
|
|
2453
|
+
t.font = Ht(n, s, i, a), p.font = t.font, p.textAlign = r;
|
|
2457
2454
|
let g, f;
|
|
2458
2455
|
if (e.transformType === "custom" && e.transformData) {
|
|
2459
|
-
const
|
|
2456
|
+
const M = e.transformData.width - ft * 2, { lines: R } = be(
|
|
2460
2457
|
e.text,
|
|
2461
|
-
|
|
2458
|
+
M,
|
|
2462
2459
|
n,
|
|
2463
2460
|
s,
|
|
2464
2461
|
i,
|
|
@@ -2466,22 +2463,22 @@ class _t {
|
|
|
2466
2463
|
void 0,
|
|
2467
2464
|
!0
|
|
2468
2465
|
);
|
|
2469
|
-
g =
|
|
2466
|
+
g = R;
|
|
2470
2467
|
} else {
|
|
2471
2468
|
g = e.text.split(`
|
|
2472
2469
|
`);
|
|
2473
|
-
const
|
|
2470
|
+
const M = e.text.includes(`
|
|
2474
2471
|
`);
|
|
2475
|
-
g =
|
|
2472
|
+
g = Me(g, M);
|
|
2476
2473
|
}
|
|
2477
2474
|
g.length === 0 ? f = 0 : g.length === 1 ? f = l.height : f = (g.length - 1) * h + l.height;
|
|
2478
|
-
const y = -f / 2,
|
|
2479
|
-
`), T = e.transformType === "custom" && e.transformData ? e.transformData.width : 0,
|
|
2480
|
-
let
|
|
2481
|
-
r === "center" ?
|
|
2482
|
-
const
|
|
2483
|
-
let
|
|
2484
|
-
|
|
2475
|
+
const y = -f / 2, m = e.text.includes(`
|
|
2476
|
+
`), T = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, v = -T / 2;
|
|
2477
|
+
let S = v + ft;
|
|
2478
|
+
r === "center" ? S = v + T / 2 : r === "right" && (S = v + T - ft), g.forEach((M, R) => {
|
|
2479
|
+
const x = y + l.ascent + R * h, P = m || R === 0, w = m || R === g.length - 1;
|
|
2480
|
+
let A = M;
|
|
2481
|
+
P || (A = A.replace(/^ +/, "")), w || (A = A.replace(/ +$/, "")), p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.lineJoin = "round", p.strokeText(A, S, x), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(A, S, x), p.fillText(A, S, x);
|
|
2485
2482
|
});
|
|
2486
2483
|
}
|
|
2487
2484
|
t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(u, 0, 0), t.restore();
|
|
@@ -2564,7 +2561,7 @@ class _t {
|
|
|
2564
2561
|
let a = -o.reduce((r, l) => r + l, 0) / 2;
|
|
2565
2562
|
return e.forEach((r, l) => {
|
|
2566
2563
|
const h = o[l], c = a + h / 2, d = c / (n.width / 2), u = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
|
|
2567
|
-
s.push({ x: c, y: u, angle: 0, skewY: p *
|
|
2564
|
+
s.push({ x: c, y: u, angle: 0, skewY: p * Se }), a += h;
|
|
2568
2565
|
}), s;
|
|
2569
2566
|
}
|
|
2570
2567
|
/**
|
|
@@ -2612,12 +2609,12 @@ class _t {
|
|
|
2612
2609
|
}), s;
|
|
2613
2610
|
}
|
|
2614
2611
|
}
|
|
2615
|
-
class
|
|
2612
|
+
class Ct {
|
|
2616
2613
|
/**
|
|
2617
2614
|
* Render snap guides layer
|
|
2618
2615
|
*/
|
|
2619
2616
|
static renderSnapGuidesLayer(t, e = []) {
|
|
2620
|
-
e.length !== 0 && (t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth =
|
|
2617
|
+
e.length !== 0 && (t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth = it.canvas.snapGuideWidth, t.setLineDash(it.canvas.snapGuideDash), e.forEach((o) => {
|
|
2621
2618
|
t.beginPath(), o.type === "vertical" ? (t.moveTo(o.x ?? 0, o.y1 ?? 0), t.lineTo(o.x ?? 0, o.y2 ?? 0)) : o.type === "horizontal" ? (t.moveTo(o.x1 ?? 0, o.y ?? 0), t.lineTo(o.x2 ?? 0, o.y ?? 0)) : (t.moveTo(o.x1 ?? 0, o.y1 ?? 0), t.lineTo(o.x2 ?? 0, o.y2 ?? 0)), t.stroke();
|
|
2622
2619
|
}), t.restore());
|
|
2623
2620
|
}
|
|
@@ -2626,8 +2623,8 @@ class xt {
|
|
|
2626
2623
|
*/
|
|
2627
2624
|
static renderSpacingIndicatorsLayer(t, e = []) {
|
|
2628
2625
|
e.length !== 0 && (t.save(), t.setLineDash([]), e.forEach((o) => {
|
|
2629
|
-
const n =
|
|
2630
|
-
if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth =
|
|
2626
|
+
const n = Ot(t.canvas);
|
|
2627
|
+
if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = it.canvas.spacingIndicatorWidth, t.beginPath(), o.type === "horizontal") {
|
|
2631
2628
|
const s = o.x1 ?? 0, i = o.x2 ?? 0, a = o.y ?? 0;
|
|
2632
2629
|
t.moveTo(s, a), t.lineTo(i, a), t.stroke();
|
|
2633
2630
|
const r = 6;
|
|
@@ -2649,12 +2646,12 @@ class xt {
|
|
|
2649
2646
|
*/
|
|
2650
2647
|
static renderDistanceLabel(t, e, o, n) {
|
|
2651
2648
|
const s = `${n}`;
|
|
2652
|
-
t.font = `600 ${
|
|
2653
|
-
const a = t.measureText(s).width, r =
|
|
2654
|
-
t.fillStyle =
|
|
2649
|
+
t.font = `600 ${it.canvas.spacingLabelFontSize}px ${it.canvas.spacingLabelFontFamily}`;
|
|
2650
|
+
const a = t.measureText(s).width, r = it.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
|
|
2651
|
+
t.fillStyle = Ot(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);
|
|
2655
2652
|
}
|
|
2656
2653
|
}
|
|
2657
|
-
class
|
|
2654
|
+
class Dt {
|
|
2658
2655
|
/**
|
|
2659
2656
|
* Render edit mode features: cursor and text selection highlight
|
|
2660
2657
|
* This renders on the main canvas at world coordinates (same as the element)
|
|
@@ -2666,180 +2663,180 @@ class Wt {
|
|
|
2666
2663
|
this.renderTransformEditModeLayer(t, s, o, p);
|
|
2667
2664
|
return;
|
|
2668
2665
|
}
|
|
2669
|
-
const g = s.fontSize || 24, f = s.fontFamily || "Arial", y = s.bold || !1,
|
|
2666
|
+
const g = s.fontSize || 24, f = s.fontFamily || "Arial", y = s.bold || !1, m = s.italic || !1, T = s.underline || !1, v = s.strikethrough || !1, S = s.textAlign || "center";
|
|
2670
2667
|
t.save(), t.translate(s.x, s.y), t.rotate(-s.rotation * Math.PI / 180);
|
|
2671
|
-
const
|
|
2672
|
-
let
|
|
2668
|
+
const M = qt(g, f, y, m), R = M.height, x = g * 1.2;
|
|
2669
|
+
let P, w, A;
|
|
2673
2670
|
if (h && s.transformType === "custom" && s.transformData.width) {
|
|
2674
2671
|
const X = s.transformData.width - ft * 2;
|
|
2675
|
-
|
|
2676
|
-
const
|
|
2677
|
-
|
|
2678
|
-
const _ =
|
|
2672
|
+
A = X;
|
|
2673
|
+
const k = Ut(h);
|
|
2674
|
+
P = [], w = [], k.forEach((I) => {
|
|
2675
|
+
const _ = Zt(I, X, {
|
|
2679
2676
|
fontSize: s.fontSize,
|
|
2680
2677
|
fontFamily: s.fontFamily,
|
|
2681
2678
|
bold: s.bold,
|
|
2682
2679
|
italic: s.italic
|
|
2683
2680
|
});
|
|
2684
|
-
_.forEach((
|
|
2685
|
-
|
|
2686
|
-
isParagraphStart:
|
|
2687
|
-
isParagraphEnd:
|
|
2681
|
+
_.forEach((H, V) => {
|
|
2682
|
+
P.push(H), w.push({
|
|
2683
|
+
isParagraphStart: V === 0,
|
|
2684
|
+
isParagraphEnd: V === _.length - 1
|
|
2688
2685
|
});
|
|
2689
2686
|
});
|
|
2690
2687
|
});
|
|
2691
2688
|
} else
|
|
2692
|
-
|
|
2693
|
-
`).map((
|
|
2689
|
+
P = l.split(`
|
|
2690
|
+
`).map((k) => [
|
|
2694
2691
|
{
|
|
2695
|
-
text:
|
|
2696
|
-
style: { fontSize: g, fontFamily: f, bold: y, italic:
|
|
2692
|
+
text: k,
|
|
2693
|
+
style: { fontSize: g, fontFamily: f, bold: y, italic: m }
|
|
2697
2694
|
}
|
|
2698
|
-
]),
|
|
2695
|
+
]), w = P.map(() => ({
|
|
2699
2696
|
isParagraphStart: !0,
|
|
2700
2697
|
// Each line is its own paragraph
|
|
2701
2698
|
isParagraphEnd: !0
|
|
2702
2699
|
}));
|
|
2703
|
-
const
|
|
2704
|
-
let L = -
|
|
2705
|
-
const
|
|
2706
|
-
let
|
|
2707
|
-
|
|
2708
|
-
var
|
|
2709
|
-
const I =
|
|
2700
|
+
const B = P.length > 1 ? M.height + (P.length - 1) * x : M.height;
|
|
2701
|
+
let L = -B / 2, W = 0, O = L, D = R;
|
|
2702
|
+
const F = [];
|
|
2703
|
+
let E = 0;
|
|
2704
|
+
P.forEach((X, k) => {
|
|
2705
|
+
var V, G;
|
|
2706
|
+
const I = w[k].isParagraphStart, _ = w[k].isParagraphEnd, H = [];
|
|
2710
2707
|
X.forEach((at) => {
|
|
2711
2708
|
Array.from(at.text).forEach((ct) => {
|
|
2712
|
-
let
|
|
2713
|
-
if (h &&
|
|
2714
|
-
const
|
|
2715
|
-
|
|
2709
|
+
let Y = g, ot = f, et = y, U = m;
|
|
2710
|
+
if (h && E < l.length) {
|
|
2711
|
+
const Z = h.getStyleAt(E);
|
|
2712
|
+
Y = Z.fontSize || g, ot = Z.fontFamily || f, et = Z.bold !== void 0 ? Z.bold : y, U = Z.italic !== void 0 ? Z.italic : m;
|
|
2716
2713
|
}
|
|
2717
2714
|
t.save();
|
|
2718
|
-
const nt = et ? "bold" : "normal", z =
|
|
2719
|
-
t.font = `${z} ${nt} ${
|
|
2720
|
-
const
|
|
2721
|
-
t.restore(),
|
|
2715
|
+
const nt = et ? "bold" : "normal", z = U ? "italic" : "normal";
|
|
2716
|
+
t.font = `${z} ${nt} ${Y}px "${ot}", Arial, sans-serif`;
|
|
2717
|
+
const q = t.measureText(ct).width;
|
|
2718
|
+
t.restore(), H.push({ char: ct, width: q, fontSize: Y, index: E }), E++;
|
|
2722
2719
|
});
|
|
2723
2720
|
});
|
|
2724
2721
|
{
|
|
2725
|
-
const at =
|
|
2722
|
+
const at = k === 0, gt = k === P.length - 1, ct = H.map((z) => z.char).join(""), Y = ((V = ct.match(/^ +/)) == null ? void 0 : V[0].length) || 0, ot = ((G = ct.match(/ +$/)) == null ? void 0 : G[0].length) || 0;
|
|
2726
2723
|
let et = 0;
|
|
2727
|
-
for (let z = 0; z <
|
|
2728
|
-
!at && z <
|
|
2729
|
-
let
|
|
2730
|
-
|
|
2731
|
-
let nt =
|
|
2732
|
-
for (let z = 0; z <
|
|
2733
|
-
const
|
|
2734
|
-
|
|
2724
|
+
for (let z = 0; z < H.length; z++)
|
|
2725
|
+
!at && z < Y || !gt && z >= H.length - ot || (et += H[z].width);
|
|
2726
|
+
let U;
|
|
2727
|
+
S === "center" ? U = -et / 2 : S === "right" ? U = A !== void 0 ? A / 2 - et : -et : U = A !== void 0 ? -A / 2 : 0;
|
|
2728
|
+
let nt = U;
|
|
2729
|
+
for (let z = 0; z < H.length; z++) {
|
|
2730
|
+
const q = H[z];
|
|
2731
|
+
F[q.index] = {
|
|
2735
2732
|
x: nt,
|
|
2736
2733
|
y: L,
|
|
2737
|
-
width:
|
|
2734
|
+
width: q.width,
|
|
2738
2735
|
// All characters keep their width for cursor navigation
|
|
2739
|
-
height:
|
|
2740
|
-
}, nt +=
|
|
2736
|
+
height: q.fontSize
|
|
2737
|
+
}, nt += q.width;
|
|
2741
2738
|
}
|
|
2742
|
-
if (
|
|
2743
|
-
const z =
|
|
2739
|
+
if (H.length > 0) {
|
|
2740
|
+
const z = H[0].index, q = H[H.length - 1].index, dt = k < P.length - 1 && q + 1 === E ? q : q + 1;
|
|
2744
2741
|
if (i >= z && i <= dt)
|
|
2745
2742
|
if (i === z)
|
|
2746
|
-
|
|
2743
|
+
W = U, O = L, D = R;
|
|
2747
2744
|
else {
|
|
2748
2745
|
let pt = 0;
|
|
2749
|
-
for (let st = 0; st <
|
|
2750
|
-
const rt =
|
|
2746
|
+
for (let st = 0; st < H.length && H[st].index < i; st++) {
|
|
2747
|
+
const rt = H[st], xt = rt.char === " ";
|
|
2751
2748
|
let yt = !0;
|
|
2752
|
-
if (
|
|
2753
|
-
const
|
|
2754
|
-
yt = !(
|
|
2749
|
+
if (xt) {
|
|
2750
|
+
const Rt = st < Y, N = st >= H.length - ot, Tt = !I && Y > 0, vt = !_ && ot > 0;
|
|
2751
|
+
yt = !(Rt && Tt || N && vt);
|
|
2755
2752
|
}
|
|
2756
2753
|
yt && (pt += rt.width);
|
|
2757
2754
|
}
|
|
2758
|
-
|
|
2755
|
+
W = U + pt, O = L, D = R;
|
|
2759
2756
|
}
|
|
2760
2757
|
}
|
|
2761
|
-
|
|
2758
|
+
k < P.length - 1 && (L += x);
|
|
2762
2759
|
}
|
|
2763
2760
|
});
|
|
2764
2761
|
const $ = a !== r;
|
|
2765
|
-
let j = null,
|
|
2762
|
+
let j = null, J = null;
|
|
2766
2763
|
if ($) {
|
|
2767
|
-
const X = Math.min(a, r),
|
|
2768
|
-
t.save(), t.fillStyle =
|
|
2769
|
-
let I = 0, _ = -
|
|
2770
|
-
if (
|
|
2771
|
-
var
|
|
2772
|
-
const
|
|
2773
|
-
if (
|
|
2774
|
-
Array.from(
|
|
2775
|
-
const z =
|
|
2764
|
+
const X = Math.min(a, r), k = Math.max(a, r);
|
|
2765
|
+
t.save(), t.fillStyle = ve(t.canvas);
|
|
2766
|
+
let I = 0, _ = -B / 2;
|
|
2767
|
+
if (P.forEach((H, V) => {
|
|
2768
|
+
var ot, et;
|
|
2769
|
+
const G = w[V].isParagraphStart, at = w[V].isParagraphEnd, gt = V === 0, ct = V === P.length - 1, Y = [];
|
|
2770
|
+
if (H.forEach((U) => {
|
|
2771
|
+
Array.from(U.text).forEach((nt) => {
|
|
2772
|
+
const z = U.style || {}, q = z.fontSize !== void 0 ? z.fontSize : g, Z = z.fontFamily !== void 0 ? z.fontFamily : f, ut = z.bold !== void 0 ? z.bold : y, dt = z.italic !== void 0 ? z.italic : m;
|
|
2776
2773
|
t.save();
|
|
2777
2774
|
const pt = ut ? "bold" : "normal", st = dt ? "italic" : "normal";
|
|
2778
|
-
t.font = `${st} ${pt} ${
|
|
2775
|
+
t.font = `${st} ${pt} ${q}px "${Z}", Arial, sans-serif`;
|
|
2779
2776
|
const rt = t.measureText(nt).width;
|
|
2780
|
-
t.restore(),
|
|
2777
|
+
t.restore(), Y.push({ char: nt, index: I, width: rt, style: z }), I++;
|
|
2781
2778
|
});
|
|
2782
|
-
}),
|
|
2783
|
-
const
|
|
2784
|
-
if (
|
|
2779
|
+
}), Y.length > 0) {
|
|
2780
|
+
const U = Y[0].index, nt = Y[Y.length - 1].index;
|
|
2781
|
+
if (k > U && X <= nt) {
|
|
2785
2782
|
t.save();
|
|
2786
|
-
const z =
|
|
2783
|
+
const z = Y.map((N) => N.char).join(""), q = ((ot = z.match(/^ +/)) == null ? void 0 : ot[0].length) || 0, Z = ((et = z.match(/ +$/)) == null ? void 0 : et[0].length) || 0;
|
|
2787
2784
|
let ut = 0;
|
|
2788
|
-
for (let N = 0; N <
|
|
2789
|
-
!gt && N <
|
|
2785
|
+
for (let N = 0; N < Y.length; N++)
|
|
2786
|
+
!gt && N < q || !ct && N >= Y.length - Z || (ut += Y[N].width);
|
|
2790
2787
|
let dt = 0;
|
|
2791
|
-
|
|
2792
|
-
const pt = Math.max(X,
|
|
2788
|
+
S === "center" ? dt = -ut / 2 : S === "right" && (dt = -ut);
|
|
2789
|
+
const pt = Math.max(X, U), st = Math.min(k, nt + 1);
|
|
2793
2790
|
let rt = 0;
|
|
2794
|
-
for (let N = 0; N <
|
|
2795
|
-
const Tt =
|
|
2796
|
-
!(
|
|
2791
|
+
for (let N = 0; N < Y.length && Y[N].index < pt; N++) {
|
|
2792
|
+
const Tt = Y[N], vt = N < q, At = N >= Y.length - Z, Et = !G && q > 0, It = !at && Z > 0;
|
|
2793
|
+
!(vt && Et || At && It) && (rt += Tt.width);
|
|
2797
2794
|
}
|
|
2798
|
-
let
|
|
2799
|
-
for (let N = 0; N <
|
|
2800
|
-
const Tt =
|
|
2801
|
-
!(
|
|
2795
|
+
let xt = 0;
|
|
2796
|
+
for (let N = 0; N < Y.length && Y[N].index < st; N++) {
|
|
2797
|
+
const Tt = Y[N], vt = N < q, At = N >= Y.length - Z, Et = !G && q > 0, It = !at && Z > 0;
|
|
2798
|
+
!(vt && Et || At && It) && (xt += Tt.width);
|
|
2802
2799
|
}
|
|
2803
|
-
const yt = dt + rt,
|
|
2804
|
-
t.fillRect(yt, _,
|
|
2800
|
+
const yt = dt + rt, Rt = xt - rt;
|
|
2801
|
+
t.fillRect(yt, _, Rt, R), j === null && (j = { x: yt, y: _ }), J = { x: yt + Rt, y: _ + R }, t.restore();
|
|
2805
2802
|
}
|
|
2806
2803
|
}
|
|
2807
|
-
|
|
2804
|
+
V < P.length - 1 && (_ += x);
|
|
2808
2805
|
}), t.restore(), h) {
|
|
2809
2806
|
t.save();
|
|
2810
|
-
const
|
|
2811
|
-
|
|
2807
|
+
const H = s.transformType === "custom" ? s.transformData : null, V = H != null && H.width ? H.width - ft * 2 : void 0;
|
|
2808
|
+
xe(t, h, {
|
|
2812
2809
|
fontSize: g,
|
|
2813
2810
|
fontFamily: f,
|
|
2814
2811
|
color: s.color || "#000000",
|
|
2815
2812
|
bold: y,
|
|
2816
|
-
italic:
|
|
2813
|
+
italic: m,
|
|
2817
2814
|
underline: T,
|
|
2818
|
-
strikethrough:
|
|
2819
|
-
textAlign:
|
|
2820
|
-
},
|
|
2815
|
+
strikethrough: v,
|
|
2816
|
+
textAlign: S
|
|
2817
|
+
}, V), t.restore();
|
|
2821
2818
|
}
|
|
2822
2819
|
}
|
|
2823
|
-
if ($ && d && j &&
|
|
2824
|
-
const X = j,
|
|
2820
|
+
if ($ && d && j && J) {
|
|
2821
|
+
const X = j, k = J, I = 6 / p, _ = 2 / p;
|
|
2825
2822
|
t.save();
|
|
2826
|
-
const
|
|
2827
|
-
t.fillStyle =
|
|
2828
|
-
const
|
|
2829
|
-
t.beginPath(), t.moveTo(X.x, X.y), t.lineTo(X.x, X.y +
|
|
2823
|
+
const H = tt(t.canvas);
|
|
2824
|
+
t.fillStyle = H, t.strokeStyle = H, t.lineWidth = _, t.lineCap = "round";
|
|
2825
|
+
const V = { x: X.x, y: X.y - I }, G = { x: k.x, y: k.y + I };
|
|
2826
|
+
t.beginPath(), t.moveTo(X.x, X.y), t.lineTo(X.x, X.y + R), t.stroke(), t.beginPath(), t.arc(V.x, V.y, I, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.strokeStyle = H, t.lineWidth = _, t.beginPath(), t.moveTo(k.x, k.y - R), t.lineTo(k.x, k.y), t.stroke(), t.beginPath(), t.arc(G.x, G.y, I, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.restore(), u && (u.current = {
|
|
2830
2827
|
start: {
|
|
2831
|
-
center:
|
|
2828
|
+
center: V,
|
|
2832
2829
|
textEdge: X
|
|
2833
2830
|
// Original selection edge (top-left of selection on first line)
|
|
2834
2831
|
},
|
|
2835
2832
|
end: {
|
|
2836
|
-
center:
|
|
2837
|
-
textEdge:
|
|
2833
|
+
center: G,
|
|
2834
|
+
textEdge: k
|
|
2838
2835
|
// Original selection edge (bottom-right of selection on last line)
|
|
2839
2836
|
}
|
|
2840
2837
|
});
|
|
2841
2838
|
} else u && (u.current = { start: null, end: null });
|
|
2842
|
-
!$ && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = tt(), t.lineWidth = 3 / p, t.lineCap = "round", t.beginPath(), t.moveTo(
|
|
2839
|
+
!$ && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = tt(t.canvas), t.lineWidth = 3 / p, t.lineCap = "round", t.beginPath(), t.moveTo(W, O), t.lineTo(W, O + D), t.stroke(), t.restore()), t.restore();
|
|
2843
2840
|
}
|
|
2844
2841
|
/**
|
|
2845
2842
|
* Render edit mode features for transformed text (circle, wave, arch, etc.)
|
|
@@ -2855,30 +2852,30 @@ class Wt {
|
|
|
2855
2852
|
let g;
|
|
2856
2853
|
if (s === 0)
|
|
2857
2854
|
if (b.length > 0) {
|
|
2858
|
-
const y = b[0],
|
|
2855
|
+
const y = b[0], m = p[0];
|
|
2859
2856
|
g = {
|
|
2860
|
-
x: y.x - Math.cos(y.angle) * (
|
|
2861
|
-
y: y.y - Math.sin(y.angle) * (
|
|
2857
|
+
x: y.x - Math.cos(y.angle) * (m / 2),
|
|
2858
|
+
y: y.y - Math.sin(y.angle) * (m / 2),
|
|
2862
2859
|
angle: y.angle
|
|
2863
2860
|
};
|
|
2864
2861
|
} else
|
|
2865
2862
|
g = { x: 0, y: 0, angle: 0 };
|
|
2866
2863
|
else if (s >= b.length) {
|
|
2867
|
-
const y = b[b.length - 1],
|
|
2864
|
+
const y = b[b.length - 1], m = p[p.length - 1];
|
|
2868
2865
|
g = {
|
|
2869
|
-
x: y.x + Math.cos(y.angle) * (
|
|
2870
|
-
y: y.y + Math.sin(y.angle) * (
|
|
2866
|
+
x: y.x + Math.cos(y.angle) * (m / 2),
|
|
2867
|
+
y: y.y + Math.sin(y.angle) * (m / 2),
|
|
2871
2868
|
angle: y.angle
|
|
2872
2869
|
};
|
|
2873
2870
|
} else {
|
|
2874
|
-
const y = b[s],
|
|
2871
|
+
const y = b[s], m = p[s];
|
|
2875
2872
|
g = {
|
|
2876
|
-
x: y.x - Math.cos(y.angle) * (
|
|
2877
|
-
y: y.y - Math.sin(y.angle) * (
|
|
2873
|
+
x: y.x - Math.cos(y.angle) * (m / 2),
|
|
2874
|
+
y: y.y - Math.sin(y.angle) * (m / 2),
|
|
2878
2875
|
angle: y.angle
|
|
2879
2876
|
};
|
|
2880
2877
|
}
|
|
2881
|
-
t.save(), t.translate(g.x, g.y), t.rotate(g.angle), t.globalAlpha = i, t.strokeStyle = tt(), t.lineWidth = 2 / n;
|
|
2878
|
+
t.save(), t.translate(g.x, g.y), t.rotate(g.angle), t.globalAlpha = i, t.strokeStyle = tt(t.canvas), t.lineWidth = 2 / n;
|
|
2882
2879
|
const f = a * 1.2;
|
|
2883
2880
|
t.beginPath(), t.moveTo(0, -f / 2), t.lineTo(0, f / 2), t.stroke(), t.restore();
|
|
2884
2881
|
}
|
|
@@ -2889,28 +2886,28 @@ class Wt {
|
|
|
2889
2886
|
* Shows both image resize handles and crop handles
|
|
2890
2887
|
*/
|
|
2891
2888
|
static renderCropBoxLayer(t, e, o, n = 1) {
|
|
2892
|
-
if (!(e instanceof
|
|
2889
|
+
if (!(e instanceof jt) || !e.isCropping) return;
|
|
2893
2890
|
const s = e, i = s.getCropBoxBounds();
|
|
2894
2891
|
if (!i) return;
|
|
2895
|
-
const a = 4 / n, r = 2 / n, l =
|
|
2892
|
+
const a = 4 / n, r = 2 / n, l = we / n, h = Ce / n, c = 1 / n;
|
|
2896
2893
|
t.save(), t.translate(e.x * n, e.y * n), t.rotate(ht.toRadians(e.rotation));
|
|
2897
2894
|
const d = s.transformData.flipHorizontal ? -1 : 1, u = s.transformData.flipVertical ? -1 : 1;
|
|
2898
2895
|
t.scale(d * n, u * n);
|
|
2899
|
-
const p = s.transformData.width * s.transformData.cropWidth, b = s.transformData.height * s.transformData.cropHeight, g = s.transformData.width / 2 - (s.transformData.cropX * s.transformData.width + p / 2), f = s.transformData.height / 2 - (s.transformData.cropY * s.transformData.height + b / 2), y = s.transformData.width / 2,
|
|
2896
|
+
const p = s.transformData.width * s.transformData.cropWidth, b = s.transformData.height * s.transformData.cropHeight, g = s.transformData.width / 2 - (s.transformData.cropX * s.transformData.width + p / 2), f = s.transformData.height / 2 - (s.transformData.cropY * s.transformData.height + b / 2), y = s.transformData.width / 2, m = s.transformData.height / 2, T = {
|
|
2900
2897
|
x: g - y,
|
|
2901
|
-
y: f -
|
|
2898
|
+
y: f - m,
|
|
2902
2899
|
width: s.transformData.width,
|
|
2903
2900
|
height: s.transformData.height
|
|
2904
2901
|
};
|
|
2905
2902
|
t.fillStyle = "rgba(0, 0, 0, 0.5)", i.y > T.y && t.fillRect(T.x, T.y, T.width, i.y - T.y);
|
|
2906
|
-
const
|
|
2907
|
-
|
|
2908
|
-
const
|
|
2909
|
-
|
|
2910
|
-
const
|
|
2911
|
-
t.beginPath(), t.moveTo(i.x +
|
|
2912
|
-
const
|
|
2913
|
-
if (t.beginPath(), t.moveTo(i.x, i.y +
|
|
2903
|
+
const v = i.y + i.height, S = T.y + T.height;
|
|
2904
|
+
v < S && t.fillRect(T.x, v, T.width, S - v), i.x > T.x && t.fillRect(T.x, i.y, i.x - T.x, i.height);
|
|
2905
|
+
const M = i.x + i.width, R = T.x + T.width;
|
|
2906
|
+
M < R && t.fillRect(M, i.y, R - M, i.height), t.strokeStyle = tt(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;
|
|
2907
|
+
const x = i.width / 3;
|
|
2908
|
+
t.beginPath(), t.moveTo(i.x + x, i.y), t.lineTo(i.x + x, i.y + i.height), t.moveTo(i.x + 2 * x, i.y), t.lineTo(i.x + 2 * x, i.y + i.height), t.stroke();
|
|
2909
|
+
const P = i.height / 3;
|
|
2910
|
+
if (t.beginPath(), t.moveTo(i.x, i.y + P), t.lineTo(i.x + i.width, i.y + P), t.moveTo(i.x, i.y + 2 * P), t.lineTo(i.x + i.width, i.y + 2 * P), t.stroke(), [
|
|
2914
2911
|
{ x: i.x, y: i.y },
|
|
2915
2912
|
// top-left
|
|
2916
2913
|
{ x: i.x + i.width, y: i.y },
|
|
@@ -2919,8 +2916,8 @@ class Wt {
|
|
|
2919
2916
|
// bottom-right
|
|
2920
2917
|
{ x: i.x, y: i.y + i.height }
|
|
2921
2918
|
// bottom-left
|
|
2922
|
-
].forEach((
|
|
2923
|
-
t.beginPath(), t.arc(
|
|
2919
|
+
].forEach((B) => {
|
|
2920
|
+
t.beginPath(), t.arc(B.x, B.y, l + 1 / n, 0, Math.PI * 2), t.fillStyle = "#bbb", t.fill(), t.beginPath(), t.arc(B.x, B.y, l, 0, Math.PI * 2), t.fillStyle = "#fff", t.fill();
|
|
2924
2921
|
}), [
|
|
2925
2922
|
{ x: i.x + i.width / 2, y: i.y, orientation: "horizontal" },
|
|
2926
2923
|
// top
|
|
@@ -2930,31 +2927,31 @@ class Wt {
|
|
|
2930
2927
|
// left
|
|
2931
2928
|
{ x: i.x + i.width, y: i.y + i.height / 2, orientation: "vertical" }
|
|
2932
2929
|
// right
|
|
2933
|
-
].forEach((
|
|
2934
|
-
let L,
|
|
2935
|
-
|
|
2936
|
-
const O =
|
|
2937
|
-
t.fillStyle = "#fff", t.fillRect(O,
|
|
2930
|
+
].forEach((B) => {
|
|
2931
|
+
let L, W;
|
|
2932
|
+
B.orientation === "horizontal" ? (L = h, W = a) : (L = a, W = h);
|
|
2933
|
+
const O = B.x - L / 2, D = B.y - W / 2;
|
|
2934
|
+
t.fillStyle = "#fff", t.fillRect(O, D, L, W), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(O, D, L, W);
|
|
2938
2935
|
}), t.restore(), o && o.resizeHandles) {
|
|
2939
|
-
const
|
|
2940
|
-
(
|
|
2941
|
-
), L = s.getCropBoxWorldCorners(),
|
|
2942
|
-
|
|
2943
|
-
let
|
|
2936
|
+
const B = o.resizeHandles.filter(
|
|
2937
|
+
(D) => D.anchor === "top-left" || D.anchor === "top-right" || D.anchor === "bottom-left" || D.anchor === "bottom-right"
|
|
2938
|
+
), L = s.getCropBoxWorldCorners(), W = 6, O = 20;
|
|
2939
|
+
B.forEach((D) => {
|
|
2940
|
+
let F = !1;
|
|
2944
2941
|
if (L)
|
|
2945
|
-
for (const
|
|
2946
|
-
const $ =
|
|
2942
|
+
for (const E of L) {
|
|
2943
|
+
const $ = D.x - E.x, j = D.y - E.y;
|
|
2947
2944
|
if (Math.sqrt($ * $ + j * j) < O) {
|
|
2948
|
-
|
|
2945
|
+
F = !0;
|
|
2949
2946
|
break;
|
|
2950
2947
|
}
|
|
2951
2948
|
}
|
|
2952
|
-
|
|
2949
|
+
F || (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 = tt(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
|
|
2953
2950
|
});
|
|
2954
2951
|
}
|
|
2955
2952
|
}
|
|
2956
2953
|
}
|
|
2957
|
-
const
|
|
2954
|
+
const Ve = $t("CanvasRenderer"), K = class K {
|
|
2958
2955
|
/**
|
|
2959
2956
|
* Get a pooled offscreen canvas for clipping content, only recreating
|
|
2960
2957
|
* when dimensions change. Eliminates per-frame canvas allocation.
|
|
@@ -2978,7 +2975,7 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
2978
2975
|
e.render(t, o, n);
|
|
2979
2976
|
} catch (s) {
|
|
2980
2977
|
const i = s instanceof Error ? s : new Error(String(s));
|
|
2981
|
-
|
|
2978
|
+
Ve.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
|
|
2982
2979
|
category: "render",
|
|
2983
2980
|
message: `Failed to render element: ${i.message}`,
|
|
2984
2981
|
originalError: i,
|
|
@@ -3045,21 +3042,21 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3045
3042
|
static renderElementWithOverflowDimming(t, e, o, n, s, i) {
|
|
3046
3043
|
const a = t.getTransform(), r = o.borderRadius || 0;
|
|
3047
3044
|
t.save(), t.globalAlpha = 0.3 * (i ? Q : 1), t.filter = "blur(4px)", t.beginPath();
|
|
3048
|
-
const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, u = new DOMPoint(0, 0).matrixTransform(h), p = new DOMPoint(c, d).matrixTransform(h), b = Math.max(p.x - u.x, p.y - u.y), g = u.x - b, f = u.y - b, y = p.x + b,
|
|
3045
|
+
const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, u = new DOMPoint(0, 0).matrixTransform(h), p = new DOMPoint(c, d).matrixTransform(h), b = Math.max(p.x - u.x, p.y - u.y), g = u.x - b, f = u.y - b, y = p.x + b, m = p.y + b, T = typeof o.clipShape == "object" && o.clipShape !== null && o.clipShape.type === "composite-path" ? o.clipShape : null;
|
|
3049
3046
|
if (T) {
|
|
3050
|
-
const
|
|
3051
|
-
|
|
3052
|
-
for (const
|
|
3053
|
-
const
|
|
3054
|
-
if (
|
|
3055
|
-
const
|
|
3056
|
-
|
|
3047
|
+
const v = new Path2D();
|
|
3048
|
+
v.rect(g, f, y - g, m - f);
|
|
3049
|
+
for (const S of T.pieces) {
|
|
3050
|
+
const M = new Path2D(S.d), R = S.rotation ?? 0, x = new DOMMatrix();
|
|
3051
|
+
if (x.translateSelf(o.x + S.x, o.y + S.y), R !== 0) {
|
|
3052
|
+
const P = (S.baseWidth ?? 0) / 2, w = (S.baseHeight ?? 0) / 2, A = R === 90 || R === 270, B = A ? S.baseHeight ?? 0 : S.baseWidth ?? 0, L = A ? S.baseWidth ?? 0 : S.baseHeight ?? 0;
|
|
3053
|
+
x.translateSelf(B / 2, L / 2), x.rotateSelf(R), x.translateSelf(-P, -w);
|
|
3057
3054
|
}
|
|
3058
|
-
|
|
3055
|
+
v.addPath(M, x);
|
|
3059
3056
|
}
|
|
3060
|
-
t.clip(
|
|
3057
|
+
t.clip(v, "evenodd");
|
|
3061
3058
|
} else
|
|
3062
|
-
t.rect(g, f, y - g,
|
|
3059
|
+
t.rect(g, f, y - g, m - f), r > 0 ? t.roundRect(o.x, o.y, o.width, o.height, r) : t.rect(o.x, o.y, o.width, o.height), t.clip("evenodd");
|
|
3063
3060
|
e.render(t, !1, !1), t.restore(), t.save(), this.applyArtboardClipPath(t, o), i && (t.globalAlpha = Q), e.render(t, n, s), t.restore(), t.setTransform(a);
|
|
3064
3061
|
}
|
|
3065
3062
|
/**
|
|
@@ -3076,20 +3073,20 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3076
3073
|
e !== K._cachedElementsRef && (K._cachedElementConfigs = e.map((f) => f.toJSON()), K._cachedElementMap = new Map(e.map((f) => [f.id, f])), K._cachedElementsRef = e);
|
|
3077
3074
|
const u = K._cachedElementConfigs, p = K._cachedElementMap, b = K._knockoutRenderedIds;
|
|
3078
3075
|
b.clear(), e.forEach((f, y) => {
|
|
3079
|
-
var
|
|
3076
|
+
var m, T, v;
|
|
3080
3077
|
if (f.blendMode === "knockout" || f.blendMode === "clip") {
|
|
3081
|
-
const
|
|
3082
|
-
|
|
3078
|
+
const S = u[y], M = f.blendMode === "knockout" ? "destination-out" : "destination-in", R = ((m = S.knockoutParts) == null ? void 0 : m.scope) || "group", x = u.findIndex((B) => B.id === S.id), P = ((T = S.knockoutParts) == null ? void 0 : T.fill) || ((v = S.knockoutParts) == null ? void 0 : v.stroke), w = R === "artboard" && x !== -1 ? u.slice(0, x) : [];
|
|
3079
|
+
P && (R === "artboard" || w.length > 0) && (w.forEach((B) => B.id && b.add(B.id)), Re(
|
|
3083
3080
|
t,
|
|
3084
|
-
|
|
3081
|
+
S,
|
|
3085
3082
|
u,
|
|
3086
|
-
(
|
|
3087
|
-
const
|
|
3088
|
-
|
|
3083
|
+
(B, L) => {
|
|
3084
|
+
const W = L.id && p.get(L.id);
|
|
3085
|
+
W && this.renderElement(B, W, r);
|
|
3089
3086
|
},
|
|
3090
3087
|
i,
|
|
3091
3088
|
a,
|
|
3092
|
-
|
|
3089
|
+
M
|
|
3093
3090
|
), b.add(f.id));
|
|
3094
3091
|
}
|
|
3095
3092
|
}), e.some((f) => !b.has(f.id) && f.isClipping) ? this._renderWithClipping(
|
|
@@ -3103,26 +3100,26 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3103
3100
|
u,
|
|
3104
3101
|
r
|
|
3105
3102
|
) : e.forEach((f) => {
|
|
3106
|
-
var
|
|
3103
|
+
var R, x;
|
|
3107
3104
|
if (b.has(f.id) || f.visible === !1) return;
|
|
3108
|
-
const y = f.id === o,
|
|
3109
|
-
if (
|
|
3110
|
-
|
|
3111
|
-
const
|
|
3112
|
-
r && (
|
|
3105
|
+
const y = f.id === o, m = (n == null ? void 0 : n.type) === "element" && ((R = n == null ? void 0 : n.data) == null ? void 0 : R.id) === f.id, T = c && d && Wt(f) && f.id === o, v = y && !T, S = u[e.indexOf(f)], M = ((x = S == null ? void 0 : S.distressEffect) == null ? void 0 : x.enabled) && S.distressEffect.style === "custom" && S.distressEffect.textureUrl;
|
|
3106
|
+
if (S && S.masks && S.masks.length > 0)
|
|
3107
|
+
kt(t, S, (P) => {
|
|
3108
|
+
const w = (A) => {
|
|
3109
|
+
r && (A.save(), A.globalAlpha = Q), this.safeRender(A, f, v, m), r && A.restore();
|
|
3113
3110
|
};
|
|
3114
|
-
if (
|
|
3115
|
-
const
|
|
3116
|
-
|
|
3111
|
+
if (M) {
|
|
3112
|
+
const A = f.getVisualBoundingBox();
|
|
3113
|
+
Gt(P, S.distressEffect, A, w);
|
|
3117
3114
|
} else
|
|
3118
|
-
|
|
3115
|
+
w(P);
|
|
3119
3116
|
});
|
|
3120
|
-
else if (
|
|
3121
|
-
const
|
|
3122
|
-
|
|
3123
|
-
r && (
|
|
3117
|
+
else if (M) {
|
|
3118
|
+
const P = f.getVisualBoundingBox();
|
|
3119
|
+
Gt(t, S.distressEffect, P, (w) => {
|
|
3120
|
+
r && (w.save(), w.globalAlpha = Q), this.safeRender(w, f, v, m), r && w.restore();
|
|
3124
3121
|
});
|
|
3125
|
-
} else l && !h && a &&
|
|
3122
|
+
} else l && !h && a && v ? this.renderElementWithOverflowDimming(t, f, a, v, m, r) : l && a ? (t.save(), this.applyArtboardClipPath(t, a), r && (t.globalAlpha = Q), this.safeRender(t, f, v, m), t.restore()) : (r && (t.save(), t.globalAlpha = Q), this.safeRender(t, f, v, m), r && t.restore());
|
|
3126
3123
|
});
|
|
3127
3124
|
}
|
|
3128
3125
|
/**
|
|
@@ -3134,16 +3131,16 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3134
3131
|
const h = t.canvas, c = h.width, d = h.height, u = t.getTransform(), p = [];
|
|
3135
3132
|
let b = [], g = [];
|
|
3136
3133
|
for (let y = 0; y < e.length; y++) {
|
|
3137
|
-
const
|
|
3138
|
-
o.has(
|
|
3134
|
+
const m = e[y], T = r[y];
|
|
3135
|
+
o.has(m.id) || m.visible !== !1 && (m.isClipping ? b.length > 0 ? (p.push({
|
|
3139
3136
|
content: b,
|
|
3140
|
-
mask:
|
|
3137
|
+
mask: m,
|
|
3141
3138
|
contentConfigs: g,
|
|
3142
3139
|
maskConfig: T
|
|
3143
3140
|
}), b = [], g = []) : p.push({
|
|
3144
|
-
content: [
|
|
3141
|
+
content: [m],
|
|
3145
3142
|
contentConfigs: [T]
|
|
3146
|
-
}) : (b.push(
|
|
3143
|
+
}) : (b.push(m), g.push(T)));
|
|
3147
3144
|
}
|
|
3148
3145
|
b.length > 0 && p.push({
|
|
3149
3146
|
content: b,
|
|
@@ -3151,30 +3148,30 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3151
3148
|
});
|
|
3152
3149
|
for (const y of p)
|
|
3153
3150
|
if (!y.mask)
|
|
3154
|
-
y.content.forEach((
|
|
3155
|
-
var
|
|
3156
|
-
const
|
|
3157
|
-
|
|
3158
|
-
l && (
|
|
3159
|
-
}) : (l && (t.save(), t.globalAlpha = Q),
|
|
3151
|
+
y.content.forEach((m, T) => {
|
|
3152
|
+
var P;
|
|
3153
|
+
const v = m.id === n, S = (s == null ? void 0 : s.type) === "element" && ((P = s == null ? void 0 : s.data) == null ? void 0 : P.id) === m.id, M = i && a && Wt(m) && m.id === n, R = v && !M, x = y.contentConfigs[T];
|
|
3154
|
+
x && x.masks && x.masks.length > 0 ? kt(t, x, (w) => {
|
|
3155
|
+
l && (w.save(), w.globalAlpha = Q), m.render(w, R, S), l && w.restore();
|
|
3156
|
+
}) : (l && (t.save(), t.globalAlpha = Q), m.render(t, R, S), l && t.restore());
|
|
3160
3157
|
});
|
|
3161
3158
|
else {
|
|
3162
|
-
const
|
|
3159
|
+
const m = this._getContentCanvas(c, d), T = m.getContext("2d");
|
|
3163
3160
|
if (!T) continue;
|
|
3164
|
-
T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(u), y.content.forEach((
|
|
3161
|
+
T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(u), y.content.forEach((x, P) => {
|
|
3165
3162
|
var O;
|
|
3166
|
-
const
|
|
3167
|
-
|
|
3168
|
-
l && (
|
|
3169
|
-
}) : (l && (T.save(), T.globalAlpha = Q),
|
|
3163
|
+
const w = x.id === n, A = (s == null ? void 0 : s.type) === "element" && ((O = s == null ? void 0 : s.data) == null ? void 0 : O.id) === x.id, B = i && a && Wt(x) && x.id === n, L = w && !B, W = y.contentConfigs[P];
|
|
3164
|
+
W && W.masks && W.masks.length > 0 ? kt(T, W, (D) => {
|
|
3165
|
+
l && (D.save(), D.globalAlpha = Q), x.render(D, L, A), l && D.restore();
|
|
3166
|
+
}) : (l && (T.save(), T.globalAlpha = Q), x.render(T, L, A), l && T.restore());
|
|
3170
3167
|
});
|
|
3171
|
-
const
|
|
3172
|
-
if (!
|
|
3173
|
-
|
|
3174
|
-
const
|
|
3175
|
-
y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ?
|
|
3176
|
-
l && (
|
|
3177
|
-
}) : (l && (
|
|
3168
|
+
const v = this._getMaskCanvas(c, d), S = v.getContext("2d");
|
|
3169
|
+
if (!S) continue;
|
|
3170
|
+
S.setTransform(1, 0, 0, 1, 0, 0), S.clearRect(0, 0, c, d), S.globalCompositeOperation = "source-over", S.setTransform(u);
|
|
3171
|
+
const M = y.mask.id === n, R = (s == null ? void 0 : s.type) === "element" && ((f = s == null ? void 0 : s.data) == null ? void 0 : f.id) === y.mask.id;
|
|
3172
|
+
y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? kt(S, y.maskConfig, (x) => {
|
|
3173
|
+
l && (x.save(), x.globalAlpha = Q), y.mask.render(x, M, R), l && x.restore();
|
|
3174
|
+
}) : (l && (S.save(), S.globalAlpha = Q), y.mask.render(S, M, R), l && S.restore()), T.globalCompositeOperation = "destination-in", T.setTransform(1, 0, 0, 1, 0, 0), T.drawImage(v, 0, 0), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(m, 0, 0), t.restore();
|
|
3178
3175
|
}
|
|
3179
3176
|
}
|
|
3180
3177
|
// =========================================================================
|
|
@@ -3185,42 +3182,42 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3185
3182
|
* @see InteractionFeedbackRenderer.renderSnapGuidesLayer
|
|
3186
3183
|
*/
|
|
3187
3184
|
static renderSnapGuidesLayer(t, e = []) {
|
|
3188
|
-
|
|
3185
|
+
Ct.renderSnapGuidesLayer(t, e);
|
|
3189
3186
|
}
|
|
3190
3187
|
/**
|
|
3191
3188
|
* Render spacing indicators layer
|
|
3192
3189
|
* @see InteractionFeedbackRenderer.renderSpacingIndicatorsLayer
|
|
3193
3190
|
*/
|
|
3194
3191
|
static renderSpacingIndicatorsLayer(t, e = []) {
|
|
3195
|
-
|
|
3192
|
+
Ct.renderSpacingIndicatorsLayer(t, e);
|
|
3196
3193
|
}
|
|
3197
3194
|
/**
|
|
3198
3195
|
* Render a distance label with background
|
|
3199
3196
|
* @see InteractionFeedbackRenderer.renderDistanceLabel
|
|
3200
3197
|
*/
|
|
3201
3198
|
static renderDistanceLabel(t, e, o, n) {
|
|
3202
|
-
|
|
3199
|
+
Ct.renderDistanceLabel(t, e, o, n);
|
|
3203
3200
|
}
|
|
3204
3201
|
/**
|
|
3205
3202
|
* Render selection box layer
|
|
3206
3203
|
* @see SelectionRenderer.renderSelectionLayer
|
|
3207
3204
|
*/
|
|
3208
3205
|
static renderSelectionLayer(t, e, o, n = 1) {
|
|
3209
|
-
|
|
3206
|
+
mt.renderSelectionLayer(t, e, o, n);
|
|
3210
3207
|
}
|
|
3211
3208
|
/**
|
|
3212
3209
|
* Render position and size info below the selected element
|
|
3213
3210
|
* @see SelectionRenderer.renderPositionSizeInfo
|
|
3214
3211
|
*/
|
|
3215
3212
|
static renderPositionSizeInfo(t, e, o, n, s = 1) {
|
|
3216
|
-
|
|
3213
|
+
mt.renderPositionSizeInfo(t, e, o, n, s);
|
|
3217
3214
|
}
|
|
3218
3215
|
/**
|
|
3219
3216
|
* Render transform handles layer
|
|
3220
3217
|
* @see SelectionRenderer.renderHandlesLayer
|
|
3221
3218
|
*/
|
|
3222
3219
|
static renderHandlesLayer(t, e, o, n, s, i, a, r = 1, l = !0) {
|
|
3223
|
-
|
|
3220
|
+
mt.renderHandlesLayer(
|
|
3224
3221
|
t,
|
|
3225
3222
|
e,
|
|
3226
3223
|
o,
|
|
@@ -3244,7 +3241,7 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3244
3241
|
* @see EditModeRenderer.renderCropBoxLayer
|
|
3245
3242
|
*/
|
|
3246
3243
|
static renderCropBoxLayer(t, e, o, n = 1) {
|
|
3247
|
-
|
|
3244
|
+
Dt.renderCropBoxLayer(t, e, o, n);
|
|
3248
3245
|
}
|
|
3249
3246
|
// =========================================================================
|
|
3250
3247
|
// Main Render Orchestration
|
|
@@ -3279,7 +3276,7 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3279
3276
|
suppressOverflowDim: g = !1,
|
|
3280
3277
|
distressTexture: f,
|
|
3281
3278
|
imageMask: y,
|
|
3282
|
-
editModeData:
|
|
3279
|
+
editModeData: m
|
|
3283
3280
|
}) {
|
|
3284
3281
|
if (this.renderElementsLayer(
|
|
3285
3282
|
t,
|
|
@@ -3292,31 +3289,31 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3292
3289
|
d,
|
|
3293
3290
|
b,
|
|
3294
3291
|
g
|
|
3295
|
-
), f != null && f.enabled && c &&
|
|
3292
|
+
), f != null && f.enabled && c && ke(t, f, c, h), y != null && y.enabled && c && Pe(t, y, c, h), i && m && n && Dt.renderEditModeLayer(t, n, m, u), u !== 1) {
|
|
3296
3293
|
t.save();
|
|
3297
|
-
const
|
|
3298
|
-
t.setTransform(
|
|
3294
|
+
const M = t.getTransform().a / u, R = p.x * u * M, x = p.y * u * M;
|
|
3295
|
+
t.setTransform(M, 0, 0, M, R, x);
|
|
3299
3296
|
}
|
|
3300
|
-
const T = r.map((
|
|
3301
|
-
...
|
|
3302
|
-
x:
|
|
3303
|
-
y:
|
|
3304
|
-
x1:
|
|
3305
|
-
y1:
|
|
3306
|
-
x2:
|
|
3307
|
-
y2:
|
|
3308
|
-
})),
|
|
3309
|
-
...
|
|
3310
|
-
x:
|
|
3311
|
-
y:
|
|
3312
|
-
x1:
|
|
3313
|
-
y1:
|
|
3314
|
-
x2:
|
|
3315
|
-
y2:
|
|
3316
|
-
labelX:
|
|
3317
|
-
labelY:
|
|
3297
|
+
const T = r.map((S) => ({
|
|
3298
|
+
...S,
|
|
3299
|
+
x: S.x !== void 0 ? S.x * u : void 0,
|
|
3300
|
+
y: S.y !== void 0 ? S.y * u : void 0,
|
|
3301
|
+
x1: S.x1 !== void 0 ? S.x1 * u : void 0,
|
|
3302
|
+
y1: S.y1 !== void 0 ? S.y1 * u : void 0,
|
|
3303
|
+
x2: S.x2 !== void 0 ? S.x2 * u : void 0,
|
|
3304
|
+
y2: S.y2 !== void 0 ? S.y2 * u : void 0
|
|
3305
|
+
})), v = l.map((S) => ({
|
|
3306
|
+
...S,
|
|
3307
|
+
x: S.x !== void 0 ? S.x * u : void 0,
|
|
3308
|
+
y: S.y !== void 0 ? S.y * u : void 0,
|
|
3309
|
+
x1: S.x1 !== void 0 ? S.x1 * u : void 0,
|
|
3310
|
+
y1: S.y1 !== void 0 ? S.y1 * u : void 0,
|
|
3311
|
+
x2: S.x2 !== void 0 ? S.x2 * u : void 0,
|
|
3312
|
+
y2: S.y2 !== void 0 ? S.y2 * u : void 0,
|
|
3313
|
+
labelX: S.labelX * u,
|
|
3314
|
+
labelY: S.labelY * u
|
|
3318
3315
|
}));
|
|
3319
|
-
|
|
3316
|
+
Ct.renderSnapGuidesLayer(t, T), Ct.renderSpacingIndicatorsLayer(t, v), u !== 1 && t.restore();
|
|
3320
3317
|
}
|
|
3321
3318
|
/**
|
|
3322
3319
|
* Single-selection interaction chrome: bbox, handles, position/size
|
|
@@ -3350,12 +3347,12 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3350
3347
|
}) {
|
|
3351
3348
|
if (b !== 1) {
|
|
3352
3349
|
t.save();
|
|
3353
|
-
const
|
|
3354
|
-
t.setTransform(
|
|
3350
|
+
const m = t.getTransform().a / b, T = g.x * b * m, v = g.y * b * m;
|
|
3351
|
+
t.setTransform(m, 0, 0, m, T, v);
|
|
3355
3352
|
}
|
|
3356
|
-
if (e &&
|
|
3357
|
-
o &&
|
|
3358
|
-
else if (!l && n &&
|
|
3353
|
+
if (e && ze(e) && e.isCropping)
|
|
3354
|
+
o && Dt.renderCropBoxLayer(t, e, o, b);
|
|
3355
|
+
else if (!l && n && mt.renderSelectionLayer(t, e, n, b), o && n && mt.renderPositionSizeInfo(t, e, o, n, b), !l && o && n && mt.renderHandlesLayer(
|
|
3359
3356
|
t,
|
|
3360
3357
|
e,
|
|
3361
3358
|
o,
|
|
@@ -3368,8 +3365,8 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3368
3365
|
), !h) {
|
|
3369
3366
|
if (u) {
|
|
3370
3367
|
t.save();
|
|
3371
|
-
const y = u,
|
|
3372
|
-
t.beginPath(),
|
|
3368
|
+
const y = u, m = y.x * b, T = y.y * b, v = y.width * b, S = y.height * b, M = (y.borderRadius ?? 0) * b;
|
|
3369
|
+
t.beginPath(), M > 0 ? t.roundRect(m, T, v, S, M) : t.rect(m, T, v, S), t.clip();
|
|
3373
3370
|
}
|
|
3374
3371
|
_t.renderHoverLayer(t, a, r, c, b, d), u && t.restore();
|
|
3375
3372
|
}
|
|
@@ -3377,241 +3374,24 @@ const Xe = zt("CanvasRenderer"), K = class K {
|
|
|
3377
3374
|
}
|
|
3378
3375
|
};
|
|
3379
3376
|
K._contentCanvas = null, K._contentCanvasSize = { width: 0, height: 0 }, K._maskCanvas = null, K._maskCanvasSize = { width: 0, height: 0 }, K._cachedElementsRef = null, K._cachedElementConfigs = null, K._cachedElementMap = null, K._knockoutRenderedIds = /* @__PURE__ */ new Set(), K.onRenderError = null;
|
|
3380
|
-
let
|
|
3381
|
-
const Jt = zt("ImportManager"), Ft = class Ft {
|
|
3382
|
-
/**
|
|
3383
|
-
* Import workspace from JSON file
|
|
3384
|
-
*/
|
|
3385
|
-
static async importFromJSON(t) {
|
|
3386
|
-
try {
|
|
3387
|
-
const e = await this.readFileAsText(t), o = JSON.parse(e);
|
|
3388
|
-
if (this.validateDocument(o), !this.SUPPORTED_VERSIONS.includes(o.metadata.version))
|
|
3389
|
-
throw new Error(
|
|
3390
|
-
`Unsupported version: ${o.metadata.version}. Supported versions: ${this.SUPPORTED_VERSIONS.join(", ")}`
|
|
3391
|
-
);
|
|
3392
|
-
if (o.metadata.version === "1.0.0")
|
|
3393
|
-
return this.migrateV1Document(o);
|
|
3394
|
-
const n = [], s = [];
|
|
3395
|
-
return o.artboards.forEach((i) => {
|
|
3396
|
-
const a = Xt.fromJSON({
|
|
3397
|
-
id: i.id,
|
|
3398
|
-
name: i.name,
|
|
3399
|
-
x: i.x,
|
|
3400
|
-
y: i.y,
|
|
3401
|
-
width: i.width,
|
|
3402
|
-
height: i.height,
|
|
3403
|
-
backgroundColor: i.backgroundColor,
|
|
3404
|
-
elementIds: i.elements.map((l) => l.id || "")
|
|
3405
|
-
}), r = i.elements.map((l) => {
|
|
3406
|
-
try {
|
|
3407
|
-
return Kt.createFromJSON(l);
|
|
3408
|
-
} catch (h) {
|
|
3409
|
-
return Jt.error("Failed to create element:", l, h), null;
|
|
3410
|
-
}
|
|
3411
|
-
}).filter((l) => l !== null);
|
|
3412
|
-
n.push(a), s.push(...r);
|
|
3413
|
-
}), await this.preloadAllImages(s), {
|
|
3414
|
-
success: !0,
|
|
3415
|
-
artboards: n,
|
|
3416
|
-
elements: s,
|
|
3417
|
-
activeArtboardId: o.activeArtboardId
|
|
3418
|
-
};
|
|
3419
|
-
} catch (e) {
|
|
3420
|
-
return {
|
|
3421
|
-
success: !1,
|
|
3422
|
-
error: e instanceof Error ? e.message : "Unknown error"
|
|
3423
|
-
};
|
|
3424
|
-
}
|
|
3425
|
-
}
|
|
3426
|
-
/**
|
|
3427
|
-
* Migrate v1 document (no artboards) to v2 (with artboards)
|
|
3428
|
-
*/
|
|
3429
|
-
static async migrateV1Document(t) {
|
|
3430
|
-
var e, o, n;
|
|
3431
|
-
try {
|
|
3432
|
-
const s = t.elements || [], i = new Xt({
|
|
3433
|
-
id: "artboard-migrated",
|
|
3434
|
-
name: "Artboard 1",
|
|
3435
|
-
x: 0,
|
|
3436
|
-
y: 0,
|
|
3437
|
-
width: ((e = t.canvas) == null ? void 0 : e.width) || 1920,
|
|
3438
|
-
height: ((o = t.canvas) == null ? void 0 : o.height) || 1080,
|
|
3439
|
-
backgroundColor: ((n = t.canvas) == null ? void 0 : n.backgroundColor) || "#ffffff"
|
|
3440
|
-
}), a = s.map((r) => {
|
|
3441
|
-
try {
|
|
3442
|
-
return Kt.createFromJSON(r);
|
|
3443
|
-
} catch (l) {
|
|
3444
|
-
return Jt.error("Failed to create element:", r, l), null;
|
|
3445
|
-
}
|
|
3446
|
-
}).filter((r) => r !== null);
|
|
3447
|
-
return a.forEach((r) => {
|
|
3448
|
-
i.addElementId(r.id);
|
|
3449
|
-
}), await this.preloadAllImages(a), {
|
|
3450
|
-
success: !0,
|
|
3451
|
-
artboards: [i],
|
|
3452
|
-
elements: a,
|
|
3453
|
-
activeArtboardId: i.id
|
|
3454
|
-
};
|
|
3455
|
-
} catch (s) {
|
|
3456
|
-
return {
|
|
3457
|
-
success: !1,
|
|
3458
|
-
error: s instanceof Error ? s.message : "Migration failed"
|
|
3459
|
-
};
|
|
3460
|
-
}
|
|
3461
|
-
}
|
|
3462
|
-
/**
|
|
3463
|
-
* Import image file
|
|
3464
|
-
*/
|
|
3465
|
-
static async importImage(t) {
|
|
3466
|
-
try {
|
|
3467
|
-
if (!t.type.startsWith("image/"))
|
|
3468
|
-
throw new Error("File is not an image");
|
|
3469
|
-
const e = 10 * 1024 * 1024;
|
|
3470
|
-
if (t.size > e)
|
|
3471
|
-
throw new Error("Image file is too large (max 10MB)");
|
|
3472
|
-
const o = await this.readFileAsDataURL(t), { width: n, height: s } = await this.getImageDimensions(o);
|
|
3473
|
-
return {
|
|
3474
|
-
success: !0,
|
|
3475
|
-
dataUrl: o,
|
|
3476
|
-
filename: t.name,
|
|
3477
|
-
width: n,
|
|
3478
|
-
height: s
|
|
3479
|
-
};
|
|
3480
|
-
} catch (e) {
|
|
3481
|
-
return {
|
|
3482
|
-
success: !1,
|
|
3483
|
-
error: e instanceof Error ? e.message : "Unknown error"
|
|
3484
|
-
};
|
|
3485
|
-
}
|
|
3486
|
-
}
|
|
3487
|
-
/**
|
|
3488
|
-
* Validate document structure
|
|
3489
|
-
*/
|
|
3490
|
-
static validateDocument(t) {
|
|
3491
|
-
if (!t || typeof t != "object")
|
|
3492
|
-
throw new Error("Invalid document");
|
|
3493
|
-
const e = t;
|
|
3494
|
-
if (!e.metadata)
|
|
3495
|
-
throw new Error("Missing metadata");
|
|
3496
|
-
if (!e.metadata.version)
|
|
3497
|
-
throw new Error("Missing version in metadata");
|
|
3498
|
-
if (!e.artboards && !e.elements)
|
|
3499
|
-
throw new Error("Missing artboards or elements array");
|
|
3500
|
-
if (e.artboards && !Array.isArray(e.artboards))
|
|
3501
|
-
throw new Error("Invalid artboards array");
|
|
3502
|
-
}
|
|
3503
|
-
/**
|
|
3504
|
-
* Read file as text
|
|
3505
|
-
*/
|
|
3506
|
-
static readFileAsText(t) {
|
|
3507
|
-
return new Promise((e, o) => {
|
|
3508
|
-
const n = new FileReader();
|
|
3509
|
-
n.onload = (s) => {
|
|
3510
|
-
var i;
|
|
3511
|
-
return e((i = s.target) == null ? void 0 : i.result);
|
|
3512
|
-
}, n.onerror = () => o(new Error("Failed to read file")), n.readAsText(t);
|
|
3513
|
-
});
|
|
3514
|
-
}
|
|
3515
|
-
/**
|
|
3516
|
-
* Read file as data URL
|
|
3517
|
-
*/
|
|
3518
|
-
static readFileAsDataURL(t) {
|
|
3519
|
-
return new Promise((e, o) => {
|
|
3520
|
-
const n = new FileReader();
|
|
3521
|
-
n.onload = (s) => {
|
|
3522
|
-
var i;
|
|
3523
|
-
return e((i = s.target) == null ? void 0 : i.result);
|
|
3524
|
-
}, n.onerror = () => o(new Error("Failed to read file")), n.readAsDataURL(t);
|
|
3525
|
-
});
|
|
3526
|
-
}
|
|
3527
|
-
/**
|
|
3528
|
-
* Get image dimensions from data URL
|
|
3529
|
-
*/
|
|
3530
|
-
static getImageDimensions(t) {
|
|
3531
|
-
return new Promise((e, o) => {
|
|
3532
|
-
const n = new Image();
|
|
3533
|
-
n.onload = () => {
|
|
3534
|
-
e({ width: n.width, height: n.height });
|
|
3535
|
-
}, n.onerror = () => o(new Error("Failed to load image")), n.src = t;
|
|
3536
|
-
});
|
|
3537
|
-
}
|
|
3538
|
-
/**
|
|
3539
|
-
* Validate imported data before applying to state
|
|
3540
|
-
*/
|
|
3541
|
-
static validateImportedData(t, e) {
|
|
3542
|
-
const o = [], n = /* @__PURE__ */ new Set();
|
|
3543
|
-
t.forEach((i) => {
|
|
3544
|
-
n.has(i.id) && o.push(`Duplicate artboard ID: ${i.id}`), n.add(i.id);
|
|
3545
|
-
});
|
|
3546
|
-
const s = /* @__PURE__ */ new Set();
|
|
3547
|
-
return e.forEach((i) => {
|
|
3548
|
-
s.has(i.id) && o.push(`Duplicate element ID: ${i.id}`), s.add(i.id);
|
|
3549
|
-
}), t.forEach((i) => {
|
|
3550
|
-
i.getElementIds().forEach((a) => {
|
|
3551
|
-
s.has(a) || o.push(`Artboard "${i.name}" references missing element: ${a}`);
|
|
3552
|
-
});
|
|
3553
|
-
}), {
|
|
3554
|
-
valid: o.length === 0,
|
|
3555
|
-
errors: o
|
|
3556
|
-
};
|
|
3557
|
-
}
|
|
3558
|
-
/**
|
|
3559
|
-
* Get import summary (for UI display before confirming)
|
|
3560
|
-
*/
|
|
3561
|
-
static getImportSummary(t, e) {
|
|
3562
|
-
const o = this.validateImportedData(t, e);
|
|
3563
|
-
return {
|
|
3564
|
-
artboardCount: t.length,
|
|
3565
|
-
elementCount: e.length,
|
|
3566
|
-
artboardNames: t.map((n) => n.name),
|
|
3567
|
-
warnings: o.errors
|
|
3568
|
-
};
|
|
3569
|
-
}
|
|
3570
|
-
/**
|
|
3571
|
-
* Preload all images in parallel for fast artboard switching
|
|
3572
|
-
* Recursively finds all ImageElements (including those in groups)
|
|
3573
|
-
*/
|
|
3574
|
-
static async preloadAllImages(t) {
|
|
3575
|
-
const e = [], o = (s) => {
|
|
3576
|
-
s.transformType === "image" ? e.push(s) : s.transformType === "group" && "children" in s && s.children.forEach((i) => o(i));
|
|
3577
|
-
};
|
|
3578
|
-
t.forEach(o);
|
|
3579
|
-
const n = e.map((s) => new Promise((i) => {
|
|
3580
|
-
if (s.imageLoaded)
|
|
3581
|
-
i();
|
|
3582
|
-
else if (s.imageElement) {
|
|
3583
|
-
const a = s.imageElement, r = () => {
|
|
3584
|
-
a.removeEventListener("load", r), a.removeEventListener("error", l), i();
|
|
3585
|
-
}, l = () => {
|
|
3586
|
-
a.removeEventListener("load", r), a.removeEventListener("error", l), i();
|
|
3587
|
-
};
|
|
3588
|
-
a.addEventListener("load", r), a.addEventListener("error", l);
|
|
3589
|
-
} else
|
|
3590
|
-
i();
|
|
3591
|
-
}));
|
|
3592
|
-
await Promise.all(n);
|
|
3593
|
-
}
|
|
3594
|
-
};
|
|
3595
|
-
Ft.SUPPORTED_VERSIONS = ["1.0.0", "2.0.0"];
|
|
3596
|
-
let Zt = Ft;
|
|
3377
|
+
let Kt = K;
|
|
3597
3378
|
export {
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
Ue as r
|
|
3379
|
+
je as A,
|
|
3380
|
+
Kt as C,
|
|
3381
|
+
$e as I,
|
|
3382
|
+
De as R,
|
|
3383
|
+
qe as S,
|
|
3384
|
+
Ne as T,
|
|
3385
|
+
ze as a,
|
|
3386
|
+
Je as b,
|
|
3387
|
+
Ze as c,
|
|
3388
|
+
Ue as d,
|
|
3389
|
+
Qt as e,
|
|
3390
|
+
Ye as f,
|
|
3391
|
+
Yt as g,
|
|
3392
|
+
Ge as h,
|
|
3393
|
+
Wt as i,
|
|
3394
|
+
Ke as j,
|
|
3395
|
+
Xe as r
|
|
3616
3396
|
};
|
|
3617
|
-
//# sourceMappingURL=
|
|
3397
|
+
//# sourceMappingURL=CanvasRenderer-DUc-MOeR.js.map
|