@hankchen/canvas-editor-vue 0.1.1 → 0.1.2

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.
@@ -1,1649 +0,0 @@
1
- import { B as e, C as t, D as n, E as r, F as i, G as a, H as o, L as s, M as c, T as l, U as u, W as d, _ as f, b as p, c as m, d as h, g, h as _, i as v, k as y, l as b, m as x, n as S, o as C, p as w, s as T, u as E, w as D, y as O, z as k } from "./layerPath-BRZK9ka1.js";
2
- import { t as A } from "./createLucideIcon-CMq8ZKo2.js";
3
- import { c as j, d as M, f as N, l as P, o as F, p as I, s as L, u as R } from "./dist-DuXLYZZ9.js";
4
- import { i as z, r as B } from "./completionAnchor-4lhR2kJz.js";
5
- import { l as V, n as H, o as U, s as W, t as G } from "./useTransientFeedback-gS9Xa9GY.js";
6
- import { i as K, n as q, r as J, t as Y } from "./uploadFile-CutE_xI-.js";
7
- import { n as X, t as Z } from "./useViewport-BLe2ise1.js";
8
- var Q = A({
9
- name: "arrow-down-left",
10
- size: 24,
11
- node: [["path", {
12
- d: "M17 7 7 17",
13
- key: "15tmo1"
14
- }], ["path", {
15
- d: "M17 17H7V7",
16
- key: "1org7z"
17
- }]]
18
- }), ee = A({
19
- name: "arrow-down-right",
20
- size: 24,
21
- node: [["path", {
22
- d: "m7 7 10 10",
23
- key: "1fmybs"
24
- }], ["path", {
25
- d: "M17 7v10H7",
26
- key: "6fjiku"
27
- }]]
28
- }), te = A({
29
- name: "arrow-up-left",
30
- size: 24,
31
- node: [["path", {
32
- d: "M7 17V7h10",
33
- key: "11bw93"
34
- }], ["path", {
35
- d: "M17 17 7 7",
36
- key: "2786uv"
37
- }]]
38
- }), ne = A({
39
- name: "arrow-up-right",
40
- size: 24,
41
- node: [["path", {
42
- d: "M7 7h10v10",
43
- key: "1tivn9"
44
- }], ["path", {
45
- d: "M7 17 17 7",
46
- key: "1vkiza"
47
- }]]
48
- }), re = A({
49
- name: "chevron-up",
50
- size: 24,
51
- node: [["path", {
52
- d: "m18 15-6-6-6 6",
53
- key: "153udz"
54
- }]]
55
- });
56
- //#endregion
57
- //#region ../canvas-editor/src/spatial/camera.ts
58
- function ie(e, t) {
59
- if (!(t > 0)) return e;
60
- let n = e.zoom * t;
61
- return {
62
- x: Math.round(e.x * n) / n,
63
- y: Math.round(e.y * n) / n,
64
- zoom: e.zoom
65
- };
66
- }
67
- function ae(e) {
68
- return 6 / e;
69
- }
70
- function oe(e, t, n) {
71
- let r = [];
72
- for (let i = 0; i < e.layers.length; i += 1) {
73
- if (t !== null && i === t) continue;
74
- let a = e.layers[i];
75
- a.visible !== !1 && r.push(F(a, 0, 0, e.width, e.height, n));
76
- }
77
- return r;
78
- }
79
- function se(e, t, n, r) {
80
- let i = [];
81
- for (let e of n) i.push({
82
- orientation: "vertical",
83
- position: e.x,
84
- source: "layer"
85
- }, {
86
- orientation: "vertical",
87
- position: e.x + e.width / 2,
88
- source: "layer"
89
- }, {
90
- orientation: "vertical",
91
- position: e.x + e.width,
92
- source: "layer"
93
- }, {
94
- orientation: "horizontal",
95
- position: e.y,
96
- source: "layer"
97
- }, {
98
- orientation: "horizontal",
99
- position: e.y + e.height / 2,
100
- source: "layer"
101
- }, {
102
- orientation: "horizontal",
103
- position: e.y + e.height,
104
- source: "layer"
105
- });
106
- i.push({
107
- orientation: "vertical",
108
- position: e / 2,
109
- source: "canvas-center"
110
- }, {
111
- orientation: "horizontal",
112
- position: t / 2,
113
- source: "canvas-center"
114
- });
115
- for (let e of r) i.push({
116
- orientation: e.orientation,
117
- position: e.position,
118
- source: "guide"
119
- });
120
- return i;
121
- }
122
- function ce(e, t, n, r) {
123
- let i = null;
124
- for (let a of t) if (a.orientation === n) for (let t of e) {
125
- let e = a.position - t, n = Math.abs(e);
126
- n > r || (i === null || n < Math.abs(i.delta)) && (i = {
127
- delta: e,
128
- axis: a
129
- });
130
- }
131
- return i;
132
- }
133
- function le(e, t, n) {
134
- let r = ce(e.vertical, t, "vertical", n), i = ce(e.horizontal, t, "horizontal", n);
135
- return {
136
- dx: r ? r.delta : 0,
137
- dy: i ? i.delta : 0,
138
- axes: [...r ? [r.axis] : [], ...i ? [i.axis] : []]
139
- };
140
- }
141
- function ue(e, t, n) {
142
- return le({
143
- vertical: [
144
- e.x,
145
- e.x + e.width / 2,
146
- e.x + e.width
147
- ],
148
- horizontal: [
149
- e.y,
150
- e.y + e.height / 2,
151
- e.y + e.height
152
- ]
153
- }, t, n);
154
- }
155
- //#endregion
156
- //#region ../canvas-editor/src/spatial/resize.ts
157
- function de(e, t) {
158
- let n = e.x + e.width, r = e.y + e.height;
159
- switch (t) {
160
- case "nw": return {
161
- x: e.x,
162
- y: e.y
163
- };
164
- case "n": return {
165
- x: e.x + e.width / 2,
166
- y: e.y
167
- };
168
- case "ne": return {
169
- x: n,
170
- y: e.y
171
- };
172
- case "e": return {
173
- x: n,
174
- y: e.y + e.height / 2
175
- };
176
- case "se": return {
177
- x: n,
178
- y: r
179
- };
180
- case "s": return {
181
- x: e.x + e.width / 2,
182
- y: r
183
- };
184
- case "sw": return {
185
- x: e.x,
186
- y: r
187
- };
188
- case "w": return {
189
- x: e.x,
190
- y: e.y + e.height / 2
191
- };
192
- }
193
- }
194
- //#endregion
195
- //#region ../canvas-editor/src/spatial/wheel.ts
196
- function fe(e) {
197
- return e.ctrlKey || e.metaKey ? "zoom" : e.shiftKey ? "pan-x" : "pan";
198
- }
199
- //#endregion
200
- //#region ../canvas-browser-renderer/src/fonts.ts
201
- function pe(e) {
202
- return e === "" || /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(e.trim());
203
- }
204
- function me(e) {
205
- return pe(e) ? "sans-serif" : `${he(e)}, sans-serif`;
206
- }
207
- function he(e) {
208
- let t = 2166136261;
209
- for (let n = 0; n < e.length; n++) t ^= e.charCodeAt(n), t = Math.imul(t, 16777619);
210
- return `canvas-font-${(t >>> 0).toString(36)}`;
211
- }
212
- //#endregion
213
- //#region src/canvas/AlignFloatBar.vue?vue&type=script&setup=true&lang.ts
214
- var ge = ["aria-disabled"], _e = {
215
- key: 0,
216
- class: "cn-align-float__divider",
217
- "aria-hidden": "true"
218
- }, ve = { class: "cn-align-float__group" }, ye = [
219
- "disabled",
220
- "title",
221
- "aria-label",
222
- "onClick"
223
- ], be = /*#__PURE__*/ V(/* @__PURE__ */ p({
224
- __name: "AlignFloatBar",
225
- props: { editor: {} },
226
- setup(e) {
227
- let r = e, i = X(r.editor), a = w(() => i.value !== null), o = (e) => `贴${e}角(边距 40px)`, s = [
228
- { keys: [{
229
- mode: "h-center",
230
- icon: N,
231
- title: "水平居中"
232
- }, {
233
- mode: "v-center",
234
- icon: I,
235
- title: "垂直居中"
236
- }] },
237
- { keys: [
238
- {
239
- mode: "left",
240
- icon: j,
241
- title: "贴左"
242
- },
243
- {
244
- mode: "right",
245
- icon: R,
246
- title: "贴右"
247
- },
248
- {
249
- mode: "top",
250
- icon: P,
251
- title: "贴顶"
252
- },
253
- {
254
- mode: "bottom",
255
- icon: M,
256
- title: "贴底"
257
- }
258
- ] },
259
- { keys: [
260
- {
261
- mode: "corner-tl",
262
- icon: te,
263
- title: o("左上")
264
- },
265
- {
266
- mode: "corner-tr",
267
- icon: ne,
268
- title: o("右上")
269
- },
270
- {
271
- mode: "corner-bl",
272
- icon: Q,
273
- title: o("左下")
274
- },
275
- {
276
- mode: "corner-br",
277
- icon: ee,
278
- title: o("右下")
279
- }
280
- ] }
281
- ];
282
- function c(e) {
283
- return { [`data-align-${e}`]: "" };
284
- }
285
- function l(e) {
286
- let t = i.value;
287
- t && (e.startsWith("corner-") ? r.editor.alignToCanvas(t, e, { margin: 40 }) : r.editor.alignToCanvas(t, e));
288
- }
289
- return (e, r) => (n(), f("div", {
290
- class: u(["cn-align-float", { "cn-align-float--disabled": !a.value }]),
291
- role: "toolbar",
292
- "aria-label": "对齐画布",
293
- "data-align-float": "",
294
- "aria-disabled": a.value ? void 0 : "true"
295
- }, [(n(), f(h, null, y(s, (e, r) => (n(), f(h, { key: r }, [r > 0 ? (n(), f("span", _e)) : g("", !0), x("span", ve, [(n(!0), f(h, null, y(e.keys, (e) => (n(), f("button", t({
296
- key: e.mode,
297
- type: "button",
298
- class: "cn-align-float__key",
299
- disabled: !a.value,
300
- title: e.title,
301
- "aria-label": e.title
302
- }, { ref_for: !0 }, c(e.mode), { onClick: (t) => l(e.mode) }), [O(z, { icon: e.icon }, null, 8, ["icon"])], 16, ye))), 128))])], 64))), 64))], 10, ge));
303
- }
304
- }), [["__scopeId", "data-v-9a761d37"]]), xe = {
305
- key: 0,
306
- class: "cn-context-menu__form"
307
- }, Se = { class: "cn-context-menu__hint" }, Ce = ["onKeydown"], we = {
308
- key: 0,
309
- class: "cn-context-menu__hint cn-context-menu__hint--error"
310
- }, Te = [
311
- "disabled",
312
- "title",
313
- "onClick"
314
- ], Ee = /*#__PURE__*/ V(/* @__PURE__ */ p({
315
- __name: "ContextMenu",
316
- props: { editor: {} },
317
- setup(e, { expose: t }) {
318
- let r = e, o = k(null), s = k(!1), c = k({
319
- x: 0,
320
- y: 0
321
- }), l = U(), p = `先 ${W("copyStyle", l)} 复制样式`, m = `图层已锁定(${W("toggleLayerLock", l)} 解锁后可删除)`, _ = X(r.editor), v = w(() => _.value !== null && S(_.value)), O = w(() => _.value !== null && r.editor.canCopySelection), A = w(() => (s.value, _.value !== null && r.editor.canCopyStyle)), j = w(() => (s.value, _.value !== null && r.editor.canPasteStyle)), M = w(() => {
322
- let e = _.value, t = r.editor.store.doc;
323
- return !e || !t || !S(e) ? !0 : C(t, e)?.visible ?? !0;
324
- }), N = w(() => {
325
- let e = _.value, t = r.editor.store.doc;
326
- return !e || !t ? null : C(t, e);
327
- });
328
- function P() {
329
- let e = _.value;
330
- return !e || typeof e[1] != "number" ? null : ["layers", e[1]];
331
- }
332
- let F = w(() => N.value?.type === "TableLayer" && N.value.template !== null), I = w(() => _.value?.[_.value.length - 1] === "template"), L = w(() => _.value !== null && r.editor.isLocked(_.value)), R = w(() => {
333
- let e = N.value;
334
- if (!e || e.type !== "TableLayer" || e.template !== null) return !1;
335
- let t = e.rows[e.rows.length - 1];
336
- return t !== void 0 && t.cells.length > 0;
337
- }), z = w(() => {
338
- let e = N.value;
339
- return !e || e.type !== "TableLayer" ? "" : `模板取自末行,其余 ${Math.max(e.rows.length - 1, 0)} 行将移除(可撤销)`;
340
- }), B = k(!1), V = k(""), H = k(!1);
341
- function G() {
342
- B.value = !0, V.value = "", H.value = !1;
343
- }
344
- function K() {
345
- let e = P(), t = V.value.trim();
346
- if (!e || t === "") {
347
- H.value = !0;
348
- return;
349
- }
350
- r.editor.convertTableToTemplate(e, t), Y();
351
- }
352
- let q = w(() => [
353
- {
354
- key: "visibility",
355
- label: M.value ? "隐藏" : "显示",
356
- enabled: v.value,
357
- title: v.value ? void 0 : "显示/隐藏仅作用于根图层",
358
- run: () => {
359
- let e = _.value;
360
- e && r.editor.toggleLayerVisibility(e);
361
- }
362
- },
363
- {
364
- key: "duplicate",
365
- label: "创建副本",
366
- enabled: O.value,
367
- title: O.value ? void 0 : "行/格/行模板是容器内结构,不可复制",
368
- run: () => r.editor.duplicateSelection()
369
- },
370
- {
371
- key: "copy-style",
372
- label: "复制样式",
373
- enabled: A.value,
374
- title: !A.value && I.value ? "行模板替身无样式可复制" : void 0,
375
- run: () => {
376
- let e = _.value;
377
- e && r.editor.copyStyle(e);
378
- }
379
- },
380
- {
381
- key: "paste-style",
382
- label: "粘贴样式",
383
- enabled: j.value,
384
- title: j.value ? void 0 : p,
385
- run: () => {
386
- let e = _.value;
387
- e && r.editor.pasteStyle(e);
388
- }
389
- },
390
- {
391
- key: "forward",
392
- label: "前移一层",
393
- enabled: v.value,
394
- title: v.value ? void 0 : "前移/后移仅对根图层生效",
395
- run: () => r.editor.bringForward()
396
- },
397
- {
398
- key: "backward",
399
- label: "后移一层",
400
- enabled: v.value,
401
- title: v.value ? void 0 : "前移/后移仅对根图层生效",
402
- run: () => r.editor.sendBackward()
403
- },
404
- {
405
- key: "front",
406
- label: "置顶",
407
- enabled: v.value,
408
- title: v.value ? void 0 : "置顶/置底仅对根图层生效",
409
- run: () => r.editor.bringToFront()
410
- },
411
- {
412
- key: "back",
413
- label: "置底",
414
- enabled: v.value,
415
- title: v.value ? void 0 : "置顶/置底仅对根图层生效",
416
- run: () => r.editor.sendToBack()
417
- },
418
- ...F.value ? [{
419
- key: "to-rows",
420
- label: "转回普通表",
421
- enabled: !0,
422
- title: "行模板实例化为单行,恢复普通表格编辑",
423
- run: () => {
424
- let e = P();
425
- e && r.editor.convertTableToRows(e);
426
- }
427
- }] : N.value?.type === "TableLayer" ? [{
428
- key: "to-template",
429
- label: "转为模板表…",
430
- enabled: R.value,
431
- title: R.value ? z.value : N.value.rows.length === 0 ? "空表无可转换行" : "末行为空——先为末行加格",
432
- keepsOpen: !0,
433
- run: () => G()
434
- }] : [],
435
- {
436
- key: "delete",
437
- label: "删除",
438
- enabled: _.value !== null && !I.value && !L.value,
439
- title: I.value ? "行模板由表持有——转换回普通表请用 V2 转换入口" : L.value ? m : void 0,
440
- run: () => {
441
- let e = _.value;
442
- e && r.editor.deleteLayer(e);
443
- }
444
- }
445
- ]);
446
- async function J(e, t) {
447
- c.value = {
448
- x: e,
449
- y: t
450
- }, s.value = !0, await D();
451
- let n = o.value, r = n?.parentElement;
452
- if (!n || !r) return;
453
- let i = n.getBoundingClientRect(), a = r.clientWidth - i.width - 2, l = r.clientHeight - i.height - 2;
454
- c.value = {
455
- x: Math.max(2, Math.min(c.value.x, a)),
456
- y: Math.max(2, Math.min(c.value.y, l))
457
- };
458
- }
459
- function Y() {
460
- s.value = !1, B.value = !1, V.value = "", H.value = !1;
461
- }
462
- function Z(e) {
463
- e.run(), e.keepsOpen !== !0 && Y();
464
- }
465
- return t({
466
- openAt: J,
467
- close: Y
468
- }), (e, t) => s.value ? (n(), f("div", {
469
- key: 0,
470
- ref_key: "rootRef",
471
- ref: o,
472
- class: "cn-context-menu",
473
- role: "menu",
474
- "aria-label": "图层操作菜单",
475
- style: d({
476
- left: `${c.value.x}px`,
477
- top: `${c.value.y}px`
478
- }),
479
- onPointerdown: t[1] ||= E(() => {}, ["stop"]),
480
- onContextmenu: t[2] ||= E(() => {}, ["prevent"])
481
- }, [B.value ? (n(), f("div", xe, [
482
- x("p", Se, a(z.value), 1),
483
- i(x("input", {
484
- "onUpdate:modelValue": t[0] ||= (e) => V.value = e,
485
- "data-convert-rows-path": "",
486
- type: "text",
487
- placeholder: "数据行路径,如 order.items",
488
- class: u(["cn-context-menu__input", { "cn-context-menu__input--invalid": H.value }]),
489
- onKeydown: b(E(K, ["prevent"]), ["enter"])
490
- }, null, 42, Ce), [[T, V.value]]),
491
- H.value ? (n(), f("p", we, " rowsPath 必填 ")) : g("", !0),
492
- x("div", { class: "cn-context-menu__form-actions" }, [x("button", {
493
- type: "button",
494
- class: "cn-context-menu__item cn-context-menu__item--confirm",
495
- onClick: K
496
- }, " 确认转换 "), x("button", {
497
- type: "button",
498
- class: "cn-context-menu__item",
499
- onClick: Y
500
- }, "取消")])
501
- ])) : (n(!0), f(h, { key: 1 }, y(q.value, (e) => (n(), f("button", {
502
- key: e.key,
503
- type: "button",
504
- role: "menuitem",
505
- class: u(["cn-context-menu__item", [`cn-context-menu__item--${e.key}`]]),
506
- disabled: !e.enabled,
507
- title: e.title,
508
- onClick: (t) => Z(e)
509
- }, a(e.label), 11, Te))), 128))], 36)) : g("", !0);
510
- }
511
- }), [["__scopeId", "data-v-e554ef38"]]);
512
- //#endregion
513
- //#region src/canvas/useFindSession.ts
514
- function De(t) {
515
- let n = e(t.store.ui.find.open), r = e(t.store.ui.find.query), i = e(t.store.ui.find.replacement), a = e(t.listFindMatches()), o = e(t.findCursor), c = () => {
516
- let e = t.store.ui.find;
517
- n.value = e.open, r.value = e.query, i.value = e.replacement, a.value = t.listFindMatches(), o.value = t.findCursor;
518
- }, l = t.subscribe((e) => {
519
- (e.scope === "doc" || e.scope === "ui" && e.branch === "find") && c();
520
- });
521
- return s(l, !0), {
522
- open: n,
523
- query: r,
524
- replacement: i,
525
- matches: a,
526
- cursor: o
527
- };
528
- }
529
- //#endregion
530
- //#region src/canvas/FindBar.vue?vue&type=script&setup=true&lang.ts
531
- var Oe = ["value"], ke = ["value"], Ae = {
532
- class: "cn-find-bar__count",
533
- "data-find-count": ""
534
- }, je = {
535
- key: 0,
536
- class: "cn-find-bar__note",
537
- "data-find-note": ""
538
- }, Me = ["disabled"], Ne = ["disabled"], Pe = ["disabled"], Fe = ["disabled"], Ie = /*#__PURE__*/ V(/* @__PURE__ */ p({
539
- __name: "FindBar",
540
- props: { editor: {} },
541
- setup(e, { expose: t }) {
542
- let r = e, { open: i, query: s, replacement: u, matches: d, cursor: p } = De(r.editor), m = k(null), h = k(null), _ = w(() => {
543
- let e = d.value.length;
544
- return e === 0 ? s.value === "" ? "" : "无结果" : `第 ${p.value + 1}/${e} 处`;
545
- }), v = w(() => d.value.length > 0), y = w(() => v.value && p.value > 0), b = w(() => v.value && p.value < d.value.length - 1);
546
- function S(e) {
547
- let t = d.value[e];
548
- if (!t) return;
549
- r.editor.setSelection(t.path);
550
- let n = r.editor.layerBoxAt(t.path);
551
- n && r.editor.panToBox(n);
552
- }
553
- function C(e) {
554
- let t = d.value.length;
555
- if (t === 0) return;
556
- let n = Math.min(Math.max(p.value + e, 0), t - 1);
557
- r.editor.setFindCursor(n), S(n);
558
- }
559
- function T() {
560
- r.editor.replaceOne() && S(p.value);
561
- }
562
- function D() {
563
- let e = r.editor.replaceAll();
564
- e !== 0 && (h.value = `已替换 ${e} 处`, S(p.value));
565
- }
566
- function A() {
567
- r.editor.closeFind(), h.value = null;
568
- }
569
- function j(e) {
570
- if (!(e.isComposing || e.keyCode === 229)) {
571
- if (e.key === "Escape") {
572
- e.preventDefault(), A();
573
- return;
574
- }
575
- e.key === "Enter" && (e.preventDefault(), C(e.shiftKey ? -1 : 1));
576
- }
577
- }
578
- function M(e) {
579
- r.editor.setFindQuery(e.target.value);
580
- }
581
- function N(e) {
582
- r.editor.setFindReplacement(e.target.value);
583
- }
584
- c(i, (e) => {
585
- e && m.value?.focus({ preventScroll: !0 });
586
- }, {
587
- immediate: !0,
588
- flush: "post"
589
- });
590
- function P(e) {
591
- i.value && (e.key.toLowerCase() !== "f" || !(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey || H(e.target) || m.value?.focus({ preventScroll: !0 }));
592
- }
593
- return window.addEventListener("keydown", P), l(() => window.removeEventListener("keydown", P)), c(s, () => {
594
- h.value = null;
595
- }), t({ close: A }), (e, t) => o(i) ? (n(), f("div", {
596
- key: 0,
597
- class: "cn-find-bar",
598
- "data-find-bar": "",
599
- role: "search",
600
- "aria-label": "查找替换",
601
- onPointerdown: t[2] ||= E(() => {}, ["stop"])
602
- }, [
603
- x("input", {
604
- ref_key: "queryInput",
605
- ref: m,
606
- class: "cn-find-bar__input",
607
- "data-find-query": "",
608
- type: "text",
609
- value: o(s),
610
- placeholder: "查找",
611
- "aria-label": "查找",
612
- spellcheck: "false",
613
- autocomplete: "off",
614
- onInput: M,
615
- onKeydown: j
616
- }, null, 40, Oe),
617
- x("input", {
618
- class: "cn-find-bar__input",
619
- "data-find-replace": "",
620
- type: "text",
621
- value: o(u),
622
- placeholder: "替换",
623
- "aria-label": "替换",
624
- spellcheck: "false",
625
- autocomplete: "off",
626
- onInput: N,
627
- onKeydown: j
628
- }, null, 40, ke),
629
- x("span", Ae, a(_.value), 1),
630
- h.value ? (n(), f("span", je, a(h.value), 1)) : g("", !0),
631
- x("button", {
632
- type: "button",
633
- class: "cn-find-bar__key",
634
- "data-find-prev": "",
635
- disabled: !y.value,
636
- title: "上一处(Shift+Enter)",
637
- "aria-label": "上一处",
638
- onClick: t[0] ||= (e) => C(-1)
639
- }, [O(z, { icon: o(re) }, null, 8, ["icon"])], 8, Me),
640
- x("button", {
641
- type: "button",
642
- class: "cn-find-bar__key",
643
- "data-find-next": "",
644
- disabled: !b.value,
645
- title: "下一处(Enter)",
646
- "aria-label": "下一处",
647
- onClick: t[1] ||= (e) => C(1)
648
- }, [O(z, { icon: o(L) }, null, 8, ["icon"])], 8, Ne),
649
- x("button", {
650
- type: "button",
651
- class: "cn-find-bar__action",
652
- "data-find-replace-one": "",
653
- disabled: !v.value,
654
- title: "替换当前处",
655
- onClick: T
656
- }, " 替换 ", 8, Pe),
657
- x("button", {
658
- type: "button",
659
- class: "cn-find-bar__action",
660
- "data-find-replace-all": "",
661
- disabled: !v.value,
662
- title: "全部替换",
663
- onClick: D
664
- }, " 全部替换 ", 8, Fe)
665
- ], 32)) : g("", !0);
666
- }
667
- }), [["__scopeId", "data-v-e9f0e575"]]), Le = {
668
- nw: "nwse-resize",
669
- se: "nwse-resize",
670
- ne: "nesw-resize",
671
- sw: "nesw-resize",
672
- n: "ns-resize",
673
- s: "ns-resize",
674
- e: "ew-resize",
675
- w: "ew-resize"
676
- }, Re = [
677
- "aria-pressed",
678
- "data-pill-static",
679
- "data-pill-expression",
680
- "onClick"
681
- ], ze = /*#__PURE__*/ V(/* @__PURE__ */ p({
682
- __name: "ContentTypePill",
683
- props: { mode: {} },
684
- emits: ["change"],
685
- setup(e, { expose: t, emit: r }) {
686
- let i = e, o = r, s = k(null);
687
- t({ rootEl: s });
688
- let c = [{
689
- value: "static",
690
- label: "静态"
691
- }, {
692
- value: "expression",
693
- label: "表达式"
694
- }];
695
- function l(e) {
696
- e !== i.mode && o("change", e);
697
- }
698
- return (t, r) => (n(), f("div", {
699
- ref_key: "rootRef",
700
- ref: s,
701
- class: "cn-content-pill",
702
- role: "group",
703
- "aria-label": "内容类型",
704
- "data-content-pill": "",
705
- onPointerdown: r[0] ||= E(() => {}, ["prevent"])
706
- }, [(n(), f(h, null, y(c, (t) => x("button", {
707
- key: t.value,
708
- type: "button",
709
- class: u(["cn-content-pill__item", { "cn-content-pill__item--active": t.value === e.mode }]),
710
- "aria-pressed": t.value === e.mode,
711
- "data-pill-static": t.value === "static" || void 0,
712
- "data-pill-expression": t.value === "expression" || void 0,
713
- onClick: (e) => l(t.value)
714
- }, a(t.label), 11, Re)), 64))], 544));
715
- }
716
- }), [["__scopeId", "data-v-d99d2c13"]]);
717
- //#endregion
718
- //#region src/canvas/useDpr.ts
719
- function $(e) {
720
- let t = null, n = () => {
721
- t?.removeEventListener("change", n), e(window.devicePixelRatio || 1), t = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`), t.addEventListener("change", n);
722
- };
723
- return n(), () => t?.removeEventListener("change", n);
724
- }
725
- function Be() {
726
- let t = e(window.devicePixelRatio || 1), n = $((e) => {
727
- t.value = e;
728
- });
729
- return s(n, !0), t;
730
- }
731
- //#endregion
732
- //#region src/canvas/useTextEditing.ts
733
- var Ve = /* @__PURE__ */ new Map();
734
- function He(e, t) {
735
- let n = `${e}|${t}`, r = Ve.get(n);
736
- if (r !== void 0) return r;
737
- let i = t * 1.2;
738
- try {
739
- let n = document.createElement("canvas").getContext("2d");
740
- if (n) {
741
- n.font = `${t}px ${me(e)}`;
742
- let r = n.measureText("字"), a = (r.fontBoundingBoxAscent ?? r.actualBoundingBoxAscent) + (r.fontBoundingBoxDescent ?? r.actualBoundingBoxDescent);
743
- a > 0 && (i = a);
744
- }
745
- } catch {}
746
- return Ve.set(n, i), i;
747
- }
748
- function Ue(t, n) {
749
- let r = e(t.store.ui.editing), i = t.subscribe((e) => {
750
- (e.scope === "doc" || e.scope === "ui" && e.branch === "editing") && (r.value = t.store.ui.editing);
751
- });
752
- s(i, !0);
753
- let a = w(() => r.value?.path ?? null), o = Be(), c = Z(t), l = w(() => {
754
- let e = r.value;
755
- return e ? t.textEditLayout(e.path) : null;
756
- }), u = w(() => ie(c.value, o.value));
757
- function d(e, t) {
758
- let { x: n, y: r, zoom: i } = u.value;
759
- return {
760
- left: (e - n) * i,
761
- top: (t - r) * i,
762
- zoom: i
763
- };
764
- }
765
- let f = w(() => {
766
- let e = l.value;
767
- if (!e) return null;
768
- let { left: t, top: n, zoom: r } = d(e.box.x, e.box.y);
769
- return {
770
- transform: `translate(${t}px, ${n}px) scale(${r})`,
771
- transformOrigin: "0 0",
772
- width: `${e.box.width}px`,
773
- height: `${e.box.height}px`,
774
- color: e.fontColor,
775
- fontFamily: me(e.font),
776
- fontSize: `${e.fontSize}px`,
777
- lineHeight: `${e.lineHeightPx}px`,
778
- ...m(e),
779
- textAlign: e.horizontalAlign,
780
- whiteSpace: e.autowrap ? "pre-wrap" : "pre"
781
- };
782
- }), p = w(() => {
783
- let e = l.value;
784
- if (!e) return null;
785
- let { left: t, top: n, zoom: r } = d(e.box.x + e.box.width / 2, e.box.y);
786
- return {
787
- transform: `translate(${t}px, ${n}px) scale(${r}) translate(-50%, -100%)`,
788
- transformOrigin: "0 0"
789
- };
790
- });
791
- function m(e) {
792
- let t = e.padding.top + e.verticalAnchorY, n = e.lineHeightPx, r = He(e.font, e.fontSize), i;
793
- return i = e.verticalAlign === "center" ? t - n / 2 : e.verticalAlign === "bottom" ? t - (n + r) / 2 : t - (n - r) / 2, {
794
- paddingTop: `${Math.max(0, i)}px`,
795
- paddingRight: `${e.padding.right}px`,
796
- paddingBottom: `${e.padding.bottom}px`,
797
- paddingLeft: `${e.padding.left}px`
798
- };
799
- }
800
- let h = (e, n) => {
801
- let r = t.hitTest(e, n);
802
- return r !== null && t.beginTextEdit(r);
803
- }, g = (e) => t.beginTextEdit(e), _ = (e) => {
804
- let n = t.store.ui.editing;
805
- n && n.expression !== e && t.store.setEditing({
806
- path: n.path,
807
- expression: e
808
- });
809
- }, v = null, y = !1, b = !1, x = () => {
810
- t.commitTextEdit(n.getTextarea()?.value ?? "");
811
- }, S = () => {
812
- v !== null && clearTimeout(v), v = null;
813
- }, C = () => {
814
- if (S(), T.value) {
815
- b = !0;
816
- return;
817
- }
818
- x();
819
- }, T = e(!1), E = (e) => {
820
- T.value = e, !e && b && (b = !1, a.value !== null && x());
821
- }, D = () => {
822
- if (a.value !== null) {
823
- if (S(), y) {
824
- y = !1;
825
- return;
826
- }
827
- v = setTimeout(() => {
828
- v = null;
829
- let e = n.getTextarea();
830
- if (e === null || document.activeElement !== e) {
831
- if (T.value) {
832
- b = !0;
833
- return;
834
- }
835
- x();
836
- }
837
- }, 0);
838
- }
839
- }, O = (e) => {
840
- if (!(e instanceof Node)) return !1;
841
- let t = n.getPill?.() ?? null;
842
- if (t !== null && t.contains(e)) return !0;
843
- let r = n.getTextarea();
844
- return r !== null && r.contains(e);
845
- }, k = (e) => {
846
- if (a.value === null || O(e.target)) return;
847
- let t = n.getHost();
848
- t !== null && t.contains(e.target) || (y = !0);
849
- }, A = () => {
850
- y = !1;
851
- };
852
- return window.addEventListener("pointerdown", k, !0), window.addEventListener("pointerup", A, !0), s(() => {
853
- window.removeEventListener("pointerdown", k, !0), window.removeEventListener("pointerup", A, !0), S();
854
- }, !0), {
855
- editing: a,
856
- layout: l,
857
- style: f,
858
- pillStyle: p,
859
- scale: w(() => u.value.zoom),
860
- composing: w(() => T.value),
861
- setComposing: E,
862
- beginAt: h,
863
- beginTextEdit: g,
864
- commitNow: C,
865
- setExpressionMode: _,
866
- armBlurCommit: D,
867
- ownsEventTarget: O
868
- };
869
- }
870
- //#endregion
871
- //#region src/canvas/TextEditingOverlay.vue?vue&type=script&setup=true&lang.ts
872
- var We = ["wrap"], Ge = /*#__PURE__*/ V(/* @__PURE__ */ p({
873
- __name: "TextEditingOverlay",
874
- props: { editor: {} },
875
- setup(e, { expose: t }) {
876
- let r = e, i = k(null), a = k(null), s = k(null), l = k(null), u = Ue(r.editor, {
877
- getTextarea: () => a.value,
878
- getHost: () => i.value?.parentElement ?? null,
879
- getPill: () => s.value?.rootEl ?? null
880
- }), { editing: p, style: m, composing: h, pillStyle: v } = u, y = u.layout, b = w(() => y.value?.expressionMode === !0), { popup: x, accept: S } = q({
881
- target: a,
882
- enabled: b,
883
- resolve: (e) => {
884
- let t = r.editor.store.ui.dataSourceSchema, n = p.value;
885
- if (t === null || n === null) return null;
886
- let i = J(t, K(t, r.editor.store.doc, n));
887
- return i === null ? null : i(e);
888
- },
889
- popupEl: () => l.value?.rootEl ?? null,
890
- scale: u.scale
891
- });
892
- c(p, async (e) => {
893
- if (!e) return;
894
- await D();
895
- let t = a.value, n = u.layout.value;
896
- t && n && (t.value = n.text, t.focus({ preventScroll: !0 }), t.select());
897
- }), c(m, async (e, t) => {
898
- if (!t || !e) return;
899
- let n = a.value;
900
- if (!n || h.value) return;
901
- let r = n.selectionStart, i = n.selectionEnd;
902
- await D(), a.value === n && (n.selectionStart !== r || n.selectionEnd !== i) && n.setSelectionRange(r, i);
903
- }, { flush: "post" });
904
- let C = (e) => {
905
- e.isComposing || e.keyCode === 229 || (e.key === "Escape" || e.key === "Enter" && (e.ctrlKey || e.metaKey)) && (e.key === "Escape" && x.open || (e.preventDefault(), u.commitNow()));
906
- }, T = () => u.armBlurCommit();
907
- return t({
908
- beginAt: u.beginAt,
909
- beginTextEdit: u.beginTextEdit,
910
- commitEditing: () => u.commitNow(),
911
- isEditing: () => p.value !== null,
912
- ownsEventTarget: (e) => u.ownsEventTarget(e)
913
- }), (e, t) => (n(), f("div", {
914
- ref_key: "rootRef",
915
- ref: i,
916
- class: "cn-text-overlay"
917
- }, [
918
- o(p) && o(m) ? (n(), f("textarea", {
919
- key: o(p).join(""),
920
- ref_key: "textareaRef",
921
- ref: a,
922
- class: "cn-text-overlay__textarea",
923
- style: d(o(m)),
924
- wrap: o(m).whiteSpace === "pre" ? "off" : "soft",
925
- spellcheck: "false",
926
- autocomplete: "off",
927
- onKeydown: C,
928
- onBlur: T,
929
- onCompositionstart: t[0] ||= (e) => o(u).setComposing(!0),
930
- onCompositionend: t[1] ||= (e) => o(u).setComposing(!1)
931
- }, null, 44, We)) : g("", !0),
932
- o(p) && o(v) ? (n(), _(ze, {
933
- key: 1,
934
- ref_key: "pillRef",
935
- ref: s,
936
- style: d(o(v)),
937
- mode: b.value ? "expression" : "static",
938
- onChange: t[2] ||= (e) => o(u).setExpressionMode(e === "expression")
939
- }, null, 8, ["style", "mode"])) : g("", !0),
940
- O(B, {
941
- ref_key: "popupRef",
942
- ref: l,
943
- state: o(x),
944
- onSelect: o(S)
945
- }, null, 8, ["state", "onSelect"])
946
- ], 512));
947
- }
948
- }), [["__scopeId", "data-v-bc9281f8"]]), Ke = {
949
- key: 0,
950
- class: "cn-surface__drop-hint",
951
- "data-drop-hint": ""
952
- }, qe = 16, Je = /*#__PURE__*/ V(/* @__PURE__ */ p({
953
- __name: "CanvasSurface",
954
- props: { editor: {} },
955
- emits: ["ready"],
956
- setup(e, { emit: t }) {
957
- let i = e, a = t, o = k(null), s = k(null), c = k(null), p = k(null), m = k(null), h = k(null), _ = k(!1), v = k(!1), y = k(null), b = k(null), S = k(i.editor.store.ui.armedCreate), C = k(!1), T = w(() => v.value ? "cn-surface--panning" : _.value ? "cn-surface--pannable" : ""), E = w(() => {
958
- if (v.value) return;
959
- if (S.value !== null || C.value) return _.value ? void 0 : { cursor: "crosshair" };
960
- let e = b.value ?? y.value;
961
- return e === null ? void 0 : { cursor: Le[e] };
962
- }), D = k(!1), A = G();
963
- function j(e) {
964
- return new Promise((t, n) => {
965
- let r = URL.createObjectURL(e), i = new Image();
966
- i.onload = () => {
967
- URL.revokeObjectURL(r), t({
968
- width: i.naturalWidth,
969
- height: i.naturalHeight
970
- });
971
- }, i.onerror = () => {
972
- URL.revokeObjectURL(r), n(/* @__PURE__ */ Error(`无法解码图片:${e.name}`));
973
- }, i.src = r;
974
- });
975
- }
976
- let M = [];
977
- return r(() => {
978
- let e = o.value, t = s.value, n = c.value;
979
- if (!e || !t || !n) return;
980
- let r = i.editor, l = () => {
981
- let i = window.devicePixelRatio, a = Math.max(1, Math.round(e.clientWidth * i)), o = Math.max(1, Math.round(e.clientHeight * i));
982
- for (let e of [t, n]) e.width !== a && (e.width = a), e.height !== o && (e.height = o);
983
- r.flushPendingFrames();
984
- }, u = () => {
985
- r.setSurfaceSize(e.clientWidth, e.clientHeight), l();
986
- };
987
- r.setDevicePixelRatio(window.devicePixelRatio), u();
988
- let d = r.subscribe((e) => {
989
- (e.scope === "doc" || e.scope === "ui" && e.branch === "armedCreate") && (S.value = r.store.ui.armedCreate);
990
- });
991
- M.push(d);
992
- let f = new ResizeObserver(u);
993
- f.observe(e), M.push(() => f.disconnect());
994
- let g = $(() => {
995
- r.setDevicePixelRatio(window.devicePixelRatio), l();
996
- });
997
- M.push(g);
998
- let x = (t) => {
999
- let n = e.getBoundingClientRect();
1000
- return {
1001
- x: t.clientX - n.left,
1002
- y: t.clientY - n.top
1003
- };
1004
- }, w = (e) => e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 100 : 1, T = (e) => {
1005
- e.preventDefault();
1006
- let t = w(e), n = x(e), i = fe(e);
1007
- i === "zoom" ? r.zoomByWheel(n.x, n.y, e.deltaY * t) : i === "pan-x" ? r.panBy(-(e.deltaY || e.deltaX) * t, 0) : r.panBy(-e.deltaX * t, -e.deltaY * t);
1008
- };
1009
- e.addEventListener("wheel", T, { passive: !1 }), M.push(() => e.removeEventListener("wheel", T));
1010
- let E = null, O = {
1011
- x: 0,
1012
- y: 0
1013
- }, k = (e) => {
1014
- let t = x(e);
1015
- return r.toScenePoint(t.x, t.y);
1016
- }, N = (t) => {
1017
- if (m.value?.close(), E !== null) return;
1018
- if (t.button === 1 || t.button === 0 && _.value) {
1019
- t.preventDefault(), E = {
1020
- id: t.pointerId,
1021
- mode: "pan"
1022
- }, O = {
1023
- x: t.clientX,
1024
- y: t.clientY
1025
- }, v.value = !0, e.setPointerCapture(t.pointerId);
1026
- return;
1027
- }
1028
- if (t.button !== 0) return;
1029
- if (p.value?.isEditing()) {
1030
- if (p.value.ownsEventTarget(t.target)) return;
1031
- p.value.commitEditing();
1032
- }
1033
- t.preventDefault();
1034
- let n = k(t);
1035
- if (r.beginLayerCreate(n.x, n.y)) {
1036
- E = {
1037
- id: t.pointerId,
1038
- mode: "create"
1039
- }, C.value = !0, y.value = null, e.setPointerCapture(t.pointerId);
1040
- return;
1041
- }
1042
- let i = r.resizeHandleAt(n.x, n.y);
1043
- if (i !== null && r.beginResize(r.store.ui.selection, i, n.x, n.y)) {
1044
- E = {
1045
- id: t.pointerId,
1046
- mode: "resize"
1047
- }, b.value = i, y.value = null, e.setPointerCapture(t.pointerId);
1048
- return;
1049
- }
1050
- let a = k(t), o = r.selectAt(a.x, a.y);
1051
- if (o && r.beginDrag(o, a.x, a.y, { copy: t.altKey && r.canCopyLayerAt(o) })) {
1052
- E = {
1053
- id: t.pointerId,
1054
- mode: "drag"
1055
- }, e.setPointerCapture(t.pointerId);
1056
- return;
1057
- }
1058
- o === null && (E = {
1059
- id: t.pointerId,
1060
- mode: "pan"
1061
- }, O = {
1062
- x: t.clientX,
1063
- y: t.clientY
1064
- }, v.value = !0, e.setPointerCapture(t.pointerId));
1065
- }, P = (e) => {
1066
- if (E !== null) {
1067
- if (e.pointerId !== E.id) return;
1068
- if (E.mode === "pan") r.panBy(e.clientX - O.x, e.clientY - O.y), O = {
1069
- x: e.clientX,
1070
- y: e.clientY
1071
- };
1072
- else if (E.mode === "resize") {
1073
- let t = k(e);
1074
- r.resizeTo(t.x, t.y);
1075
- } else if (E.mode === "create") {
1076
- let t = k(e);
1077
- r.createTo(t.x, t.y);
1078
- } else {
1079
- let t = k(e);
1080
- r.dragTo(t.x, t.y);
1081
- }
1082
- return;
1083
- }
1084
- let t = k(e), n = r.resizeHandleAt(t.x, t.y);
1085
- if (y.value = n, n !== null) {
1086
- r.setHovered(null);
1087
- return;
1088
- }
1089
- r.hoverAt(t.x, t.y);
1090
- }, F = (t) => {
1091
- if (E !== null && t.pointerId === E.id) {
1092
- if (E.mode === "drag") r.endDrag();
1093
- else if (E.mode === "resize") r.endResize(), b.value = null;
1094
- else if (E.mode === "create") {
1095
- C.value = !1;
1096
- let e = r.endCreate();
1097
- e !== null && p.value?.beginTextEdit(e);
1098
- } else v.value = !1;
1099
- E = null, e.hasPointerCapture(t.pointerId) && e.releasePointerCapture(t.pointerId);
1100
- }
1101
- }, I = (e) => {
1102
- e.button === 1 && e.preventDefault();
1103
- }, L = (e) => {
1104
- let t = x(e), n = r.toScenePoint(t.x, t.y);
1105
- p.value?.beginAt(n.x, n.y);
1106
- }, R = (e) => {
1107
- if (p.value?.isEditing()) {
1108
- if (p.value.ownsEventTarget(e.target)) return;
1109
- p.value.commitEditing();
1110
- }
1111
- e.preventDefault();
1112
- let t = x(e), n = r.toScenePoint(t.x, t.y);
1113
- if (r.selectAt(n.x, n.y) === null) {
1114
- m.value?.close();
1115
- return;
1116
- }
1117
- m.value?.openAt(t.x, t.y);
1118
- }, z = () => {
1119
- E === null && (r.setHovered(null), y.value = null);
1120
- };
1121
- e.addEventListener("pointerdown", N), e.addEventListener("pointermove", P), e.addEventListener("pointerup", F), e.addEventListener("pointercancel", F), e.addEventListener("pointerleave", z), e.addEventListener("mousedown", I), e.addEventListener("dblclick", L), M.push(() => {
1122
- e.removeEventListener("pointerdown", N), e.removeEventListener("pointermove", P), e.removeEventListener("pointerup", F), e.removeEventListener("pointercancel", F), e.removeEventListener("pointerleave", z), e.removeEventListener("mousedown", I), e.removeEventListener("dblclick", L);
1123
- });
1124
- let B = H, V = (e) => {
1125
- e.code !== "Space" || e.repeat || B(e.target) || (e.preventDefault(), _.value = !0);
1126
- }, U = (e) => {
1127
- e.code === "Space" && (_.value = !1);
1128
- }, W = (e) => {
1129
- if (!(e.key !== "Escape" || H(e.target))) {
1130
- if (r.store.ui.armedCreate !== null || r.store.ui.create !== null) {
1131
- r.cancelCreate();
1132
- return;
1133
- }
1134
- m.value?.close(), h.value?.close(), r.escapeSelection();
1135
- }
1136
- };
1137
- window.addEventListener("keydown", V), window.addEventListener("keyup", U), window.addEventListener("keydown", W), M.push(() => {
1138
- window.removeEventListener("keydown", V), window.removeEventListener("keyup", U), window.removeEventListener("keydown", W);
1139
- }), e.addEventListener("contextmenu", R), M.push(() => e.removeEventListener("contextmenu", R));
1140
- let G = (e) => {
1141
- let t = e.dataTransfer?.items;
1142
- if (!t) return !1;
1143
- for (let e = 0; e < t.length; e += 1) {
1144
- let n = t[e];
1145
- if (n !== void 0 && n.kind === "file" && n.type.startsWith("image/")) return !0;
1146
- }
1147
- return !1;
1148
- }, K = (e) => {
1149
- G(e) && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"), D.value = !0);
1150
- }, q = (t) => {
1151
- t.relatedTarget !== null && e.contains(t.relatedTarget) || (D.value = !1);
1152
- }, J = (e) => {
1153
- e.preventDefault(), D.value = !1;
1154
- let t = [], n = e.dataTransfer?.files;
1155
- for (let e = 0; n !== void 0 && e < n.length; e += 1) {
1156
- let r = n[e];
1157
- r !== void 0 && r.type.startsWith("image/") && t.push(r);
1158
- }
1159
- if (t.length !== 0) {
1160
- if (!r.canUpload) {
1161
- A.show("上传不可用:未接入上传实现,图片未添加");
1162
- return;
1163
- }
1164
- p.value?.isEditing() && p.value.commitEditing(), X(t, x(e));
1165
- }
1166
- }, X = async (e, t) => {
1167
- let n = r.toScenePoint(t.x, t.y);
1168
- for (let t = 0; t < e.length; t += 1) {
1169
- let i = e[t];
1170
- if (i) try {
1171
- let e = await j(i);
1172
- await r.uploadImageAsLayer(await Y(i), {
1173
- at: {
1174
- x: n.x + t * qe,
1175
- y: n.y + t * qe
1176
- },
1177
- size: e
1178
- });
1179
- } catch (e) {
1180
- A.show(`上传失败:${e instanceof Error ? e.message : String(e)}`);
1181
- return;
1182
- }
1183
- }
1184
- };
1185
- e.addEventListener("dragover", K), e.addEventListener("dragleave", q), e.addEventListener("drop", J), M.push(() => {
1186
- e.removeEventListener("dragover", K), e.removeEventListener("dragleave", q), e.removeEventListener("drop", J);
1187
- });
1188
- let Z = () => r.invalidate("both"), Q = (e) => e.preventDefault();
1189
- t.addEventListener("contextlost", Q), t.addEventListener("contextrestored", Z), n.addEventListener("contextlost", Q), n.addEventListener("contextrestored", Z), M.push(() => {
1190
- t.removeEventListener("contextlost", Q), t.removeEventListener("contextrestored", Z), n.removeEventListener("contextlost", Q), n.removeEventListener("contextrestored", Z);
1191
- }), a("ready", {
1192
- contentCanvas: t,
1193
- overlayCanvas: n
1194
- });
1195
- }), l(() => {
1196
- M.forEach((e) => e()), M.length = 0, i.editor.detachSurfaces();
1197
- }), (t, r) => (n(), f("div", {
1198
- ref_key: "hostRef",
1199
- ref: o,
1200
- class: u(["cn-surface", T.value]),
1201
- style: d(E.value)
1202
- }, [
1203
- x("canvas", {
1204
- ref_key: "contentRef",
1205
- ref: s,
1206
- class: "cn-surface__canvas"
1207
- }, null, 512),
1208
- x("canvas", {
1209
- ref_key: "overlayRef",
1210
- ref: c,
1211
- class: "cn-surface__canvas cn-surface__canvas--overlay"
1212
- }, null, 512),
1213
- O(Ge, {
1214
- ref_key: "textEditRef",
1215
- ref: p,
1216
- editor: e.editor
1217
- }, null, 8, ["editor"]),
1218
- O(Ee, {
1219
- ref_key: "contextMenuRef",
1220
- ref: m,
1221
- editor: e.editor
1222
- }, null, 8, ["editor"]),
1223
- O(Ie, {
1224
- ref_key: "findBarRef",
1225
- ref: h,
1226
- editor: e.editor
1227
- }, null, 8, ["editor"]),
1228
- D.value ? (n(), f("div", Ke, [...r[0] ||= [x("span", { class: "cn-surface__drop-hint-text" }, "松开以上传图片", -1)]])) : g("", !0)
1229
- ], 6));
1230
- }
1231
- }), [["__scopeId", "data-v-6e21095e"]]);
1232
- //#endregion
1233
- //#region src/canvas/guideSnap.ts
1234
- function Ye(e, t, n) {
1235
- let r = e.store.doc;
1236
- if (!r) return n;
1237
- let i = ue({
1238
- x: n,
1239
- y: n,
1240
- width: 0,
1241
- height: 0
1242
- }, se(r.width, r.height, oe(r, -1, e.textPolicies), e.listGuides()), ae(e.store.ui.viewport.zoom));
1243
- return t === "vertical" ? n + i.dx : n + i.dy;
1244
- }
1245
- //#endregion
1246
- //#region src/canvas/GuidesOverlay.vue?vue&type=script&setup=true&lang.ts
1247
- var Xe = [
1248
- "data-snap-orientation",
1249
- "data-snap-position",
1250
- "data-snap-source"
1251
- ], Ze = [
1252
- "data-guide-line",
1253
- "data-guide-orientation",
1254
- "data-guide-position",
1255
- "data-guide-dragging",
1256
- "onPointerdown"
1257
- ], Qe = ["data-guide-orientation", "data-guide-position"], $e = /*#__PURE__*/ V(/* @__PURE__ */ p({
1258
- __name: "GuidesOverlay",
1259
- props: { editor: {} },
1260
- setup(t, { expose: r }) {
1261
- let i = t, a = Z(i.editor), o = e(i.editor.store.doc), c = e(i.editor.listGuides()), l = e(i.editor.listSnapAxes()), p = i.editor.subscribe((e) => {
1262
- if (e.scope === "doc") {
1263
- o.value = i.editor.store.doc, c.value = i.editor.listGuides(), l.value = i.editor.listSnapAxes();
1264
- return;
1265
- }
1266
- e.branch === "guides" ? c.value = i.editor.listGuides() : e.branch === "snapAxes" && (l.value = i.editor.listSnapAxes());
1267
- });
1268
- s(p, !0);
1269
- function m(e, t) {
1270
- let n = o.value, r = a.value;
1271
- return n ? e === "vertical" ? {
1272
- left: `${(t - r.x) * r.zoom}px`,
1273
- top: "0px",
1274
- height: "100%"
1275
- } : {
1276
- top: `${(t - r.y) * r.zoom}px`,
1277
- left: "0px",
1278
- width: "100%"
1279
- } : { display: "none" };
1280
- }
1281
- function _(e) {
1282
- return String(Math.round(e * 100) / 100);
1283
- }
1284
- let v = k(null);
1285
- function b(e) {
1286
- return {
1287
- orientation: e.orientation,
1288
- position: Ye(i.editor, e.orientation, e.position)
1289
- };
1290
- }
1291
- function x(e) {
1292
- v.value = b(e);
1293
- }
1294
- function S(e) {
1295
- v.value !== null && v.value.orientation === e.orientation && (v.value = b(e));
1296
- }
1297
- function C(e) {
1298
- if (v.value === null) return;
1299
- v.value = null;
1300
- let { orientation: t, position: n } = b(e);
1301
- i.editor.listGuides().some((e) => e.orientation === t && Math.abs(e.position - n) < 1e-6) || i.editor.addGuide({
1302
- orientation: t,
1303
- position: n
1304
- });
1305
- }
1306
- function T() {
1307
- v.value = null;
1308
- }
1309
- r({
1310
- beginGuideDrag: x,
1311
- moveGuideDrag: S,
1312
- endGuideDrag: C,
1313
- cancelGuideDrag: T
1314
- });
1315
- let E = k(null), D = w(() => c.value.map((e) => {
1316
- let t = E.value;
1317
- return t !== null && t.id === e.id ? {
1318
- id: e.id,
1319
- orientation: e.orientation,
1320
- position: t.current,
1321
- dragging: !0,
1322
- overRuler: t.overRuler
1323
- } : {
1324
- id: e.id,
1325
- orientation: e.orientation,
1326
- position: e.position,
1327
- dragging: !1,
1328
- overRuler: !1
1329
- };
1330
- })), O = k(null);
1331
- function A(e, t) {
1332
- let n = O.value?.getBoundingClientRect(), r = a.value, i = n?.left ?? 0, o = n?.top ?? 0;
1333
- return t === "vertical" ? r.x + (e.clientX - i) / r.zoom : r.y + (e.clientY - o) / r.zoom;
1334
- }
1335
- function j(e, t) {
1336
- let n = document.elementFromPoint(e, t);
1337
- return n !== null && n.closest("[data-ruler-top], [data-ruler-left]") !== null;
1338
- }
1339
- function M(e) {
1340
- try {
1341
- e.currentTarget.setPointerCapture(e.pointerId);
1342
- } catch {}
1343
- }
1344
- function N(e) {
1345
- try {
1346
- e.currentTarget.releasePointerCapture(e.pointerId);
1347
- } catch {}
1348
- }
1349
- function P(e, t) {
1350
- e.button === 0 && E.value === null && (e.preventDefault(), E.value = {
1351
- id: t.id,
1352
- orientation: t.orientation,
1353
- pointerId: e.pointerId,
1354
- current: t.position,
1355
- overRuler: !1
1356
- }, M(e));
1357
- }
1358
- function F(e) {
1359
- let t = E.value;
1360
- t !== null && e.pointerId === t.pointerId && (E.value = {
1361
- ...t,
1362
- current: A(e, t.orientation),
1363
- overRuler: j(e.clientX, e.clientY)
1364
- });
1365
- }
1366
- function I(e) {
1367
- let t = E.value;
1368
- t !== null && e.pointerId === t.pointerId && (E.value = null, N(e), j(e.clientX, e.clientY) && i.editor.removeGuide(t.id));
1369
- }
1370
- function L(e) {
1371
- let t = E.value;
1372
- t !== null && e.pointerId === t.pointerId && (E.value = null, N(e));
1373
- }
1374
- return (e, t) => (n(), f("div", {
1375
- ref_key: "rootRef",
1376
- ref: O,
1377
- class: "cn-guides",
1378
- "data-guide-overlay": ""
1379
- }, [
1380
- (n(!0), f(h, null, y(l.value, (e, t) => (n(), f("div", {
1381
- key: `${e.orientation}-${e.position}-${t}`,
1382
- class: u(["cn-guides__snap", `cn-guides__snap--${e.orientation}`]),
1383
- "data-snap-line": "",
1384
- "data-snap-orientation": e.orientation,
1385
- "data-snap-position": _(e.position),
1386
- "data-snap-source": e.source,
1387
- style: d(m(e.orientation, e.position))
1388
- }, null, 14, Xe))), 128)),
1389
- (n(!0), f(h, null, y(D.value, (e) => (n(), f("div", {
1390
- key: e.id,
1391
- class: u(["cn-guides__guide", [`cn-guides__guide--${e.orientation}`, {
1392
- "cn-guides__guide--grabbed": e.dragging,
1393
- "cn-guides__guide--will-delete": e.overRuler
1394
- }]]),
1395
- "data-guide-line": e.id,
1396
- "data-guide-orientation": e.orientation,
1397
- "data-guide-position": _(e.position),
1398
- "data-guide-dragging": e.dragging ? "" : void 0,
1399
- style: d(m(e.orientation, e.position)),
1400
- onPointerdown: (t) => P(t, e),
1401
- onPointermove: F,
1402
- onPointerup: I,
1403
- onPointercancel: L
1404
- }, null, 46, Ze))), 128)),
1405
- v.value ? (n(), f("div", {
1406
- key: 0,
1407
- class: u(["cn-guides__guide cn-guides__guide--preview", `cn-guides__guide--${v.value.orientation}`]),
1408
- "data-guide-preview": "",
1409
- "data-guide-orientation": v.value.orientation,
1410
- "data-guide-position": _(v.value.position),
1411
- style: d(m(v.value.orientation, v.value.position))
1412
- }, null, 14, Qe)) : g("", !0)
1413
- ], 512));
1414
- }
1415
- }), [["__scopeId", "data-v-51fd929c"]]), et = {
1416
- class: "cn-ruler",
1417
- "data-ruler": ""
1418
- }, tt = {
1419
- key: 0,
1420
- class: "cn-ruler__label"
1421
- }, nt = {
1422
- key: 0,
1423
- class: "cn-ruler__label"
1424
- }, rt = 10, it = 5, at = /*#__PURE__*/ V(/* @__PURE__ */ p({
1425
- __name: "Ruler",
1426
- props: { editor: {} },
1427
- emits: [
1428
- "guide-drag-start",
1429
- "guide-drag-move",
1430
- "guide-drag-end",
1431
- "guide-drag-cancel"
1432
- ],
1433
- setup(t, { emit: o }) {
1434
- let c = t, p = o, _ = Z(c.editor), v = e(c.editor.store.ui.rulersVisible), b = c.editor.subscribe((e) => {
1435
- e.scope === "ui" && e.branch === "rulersVisible" && (v.value = c.editor.store.ui.rulersVisible);
1436
- });
1437
- s(b, !0);
1438
- let S = [
1439
- 1,
1440
- 2,
1441
- 5,
1442
- 10,
1443
- 20,
1444
- 50,
1445
- 100,
1446
- 200,
1447
- 500,
1448
- 1e3,
1449
- 2e3,
1450
- 5e3,
1451
- 1e4
1452
- ];
1453
- function C(e, t, n) {
1454
- if (!(t > 0) || !(n > 0) || !Number.isFinite(e)) return [];
1455
- let r = S[S.length - 1];
1456
- for (let e of S) if (e * n >= rt) {
1457
- r = e;
1458
- break;
1459
- }
1460
- let i = r * it, a = Math.floor(e / r) * r, o = [];
1461
- for (let s = 0;; s++) {
1462
- let c = a + s * r, l = (c - e) * n;
1463
- if (l > t) break;
1464
- if (l >= 0) {
1465
- let e = c / i, t = Math.abs(e - Math.round(e)) < 1e-6;
1466
- o.push({
1467
- scene: c,
1468
- position: l,
1469
- label: t ? String(Math.round(c)) : null
1470
- });
1471
- }
1472
- }
1473
- return o;
1474
- }
1475
- let T = k(null), E = k(null), D = k(0), O = k(0), A = () => {
1476
- D.value = T.value?.clientWidth ?? 0, O.value = E.value?.clientHeight ?? 0;
1477
- }, j = null;
1478
- r(() => {
1479
- A(), j = new ResizeObserver(() => A()), T.value && j.observe(T.value), E.value && j.observe(E.value);
1480
- }), l(() => j?.disconnect());
1481
- let M = w(() => C(_.value.x, D.value, _.value.zoom)), N = w(() => C(_.value.y, O.value, _.value.zoom)), P = k(null);
1482
- function F(e, t, n) {
1483
- let r = e.getBoundingClientRect(), i = _.value;
1484
- return {
1485
- orientation: t,
1486
- position: t === "vertical" ? i.x + (n.clientX - r.left) / i.zoom : i.y + (n.clientY - r.top) / i.zoom
1487
- };
1488
- }
1489
- function I(e, t) {
1490
- let n = e.currentTarget;
1491
- if (n instanceof HTMLElement && e.button === 0 && P.value === null) {
1492
- e.preventDefault(), P.value = {
1493
- pointerId: e.pointerId,
1494
- orientation: t
1495
- };
1496
- try {
1497
- n.setPointerCapture(e.pointerId);
1498
- } catch {}
1499
- p("guide-drag-start", F(n, t, e));
1500
- }
1501
- }
1502
- function L(e) {
1503
- let t = e.currentTarget, n = P.value;
1504
- t instanceof HTMLElement && n !== null && e.pointerId === n.pointerId && p("guide-drag-move", F(t, n.orientation, e));
1505
- }
1506
- function R(e, t) {
1507
- let n = e.currentTarget, r = P.value;
1508
- if (!(n instanceof HTMLElement) || r === null || e.pointerId !== r.pointerId) return;
1509
- P.value = null;
1510
- try {
1511
- n.releasePointerCapture(e.pointerId);
1512
- } catch {}
1513
- let i = F(n, r.orientation, e);
1514
- p(t === "guide-drag-end" ? "guide-drag-end" : "guide-drag-cancel", i);
1515
- }
1516
- return (e, t) => i((n(), f("div", et, [
1517
- x("div", {
1518
- ref_key: "topRef",
1519
- ref: T,
1520
- class: "cn-ruler__bar cn-ruler__bar--top",
1521
- "data-ruler-top": "",
1522
- role: "img",
1523
- "aria-label": "水平标尺",
1524
- title: "水平标尺(拖出垂直参考线)",
1525
- onPointerdown: t[0] ||= (e) => I(e, "vertical"),
1526
- onPointermove: t[1] ||= (e) => L(e),
1527
- onPointerup: t[2] ||= (e) => R(e, "guide-drag-end"),
1528
- onPointercancel: t[3] ||= (e) => R(e, "guide-drag-cancel")
1529
- }, [(n(!0), f(h, null, y(M.value, (e) => (n(), f("span", {
1530
- key: e.scene,
1531
- class: u(["cn-ruler__tick", { "cn-ruler__tick--major": e.label !== null }]),
1532
- style: d({ left: `${e.position}px` })
1533
- }, [e.label === null ? g("", !0) : (n(), f("span", tt, a(e.label), 1))], 6))), 128))], 544),
1534
- x("div", {
1535
- ref_key: "leftRef",
1536
- ref: E,
1537
- class: "cn-ruler__bar cn-ruler__bar--left",
1538
- "data-ruler-left": "",
1539
- role: "img",
1540
- "aria-label": "垂直标尺",
1541
- title: "垂直标尺(拖出水平参考线)",
1542
- onPointerdown: t[4] ||= (e) => I(e, "horizontal"),
1543
- onPointermove: t[5] ||= (e) => L(e),
1544
- onPointerup: t[6] ||= (e) => R(e, "guide-drag-end"),
1545
- onPointercancel: t[7] ||= (e) => R(e, "guide-drag-cancel")
1546
- }, [(n(!0), f(h, null, y(N.value, (e) => (n(), f("span", {
1547
- key: e.scene,
1548
- class: u(["cn-ruler__tick", { "cn-ruler__tick--major": e.label !== null }]),
1549
- style: d({ top: `${e.position}px` })
1550
- }, [e.label === null ? g("", !0) : (n(), f("span", nt, a(e.label), 1))], 6))), 128))], 544),
1551
- t[8] ||= x("div", {
1552
- class: "cn-ruler__corner",
1553
- "data-ruler-corner": "",
1554
- "aria-hidden": "true"
1555
- }, null, -1)
1556
- ], 512)), [[m, v.value]]);
1557
- }
1558
- }), [["__scopeId", "data-v-5bd7248c"]]), ot = "#2563eb", st = "rgba(37, 99, 235, 0.08)", ct = [4, 3], lt = 1, ut = "rgba(11, 18, 32, 0.9)", dt = "#ffffff", ft = 11, pt = 6, mt = 3, ht = 3, gt = 6;
1559
- function _t(e, t, n) {
1560
- let r = t.store.ui.create;
1561
- if (!r) return;
1562
- let { x: i, y: a, width: o, height: s } = r.rect;
1563
- if (o === 0 && s === 0) return;
1564
- let c = n.viewport.zoom;
1565
- e.fillStyle = st, e.fillRect(i, a, o, s), e.strokeStyle = ot, e.lineWidth = lt / c, e.setLineDash(ct.map((e) => e / c)), e.strokeRect(i, a, o, s), e.setLineDash([]);
1566
- let l = ft / c, u = pt / c, d = mt / c;
1567
- e.font = `${l}px system-ui, sans-serif`;
1568
- let f = `${Math.round(o)} × ${Math.round(s)}`, p = e.measureText(f).width + u * 2, m = l + d * 2, h = i + o + gt / c, g = a + s + gt / c;
1569
- e.fillStyle = ut, e.beginPath(), e.roundRect(h, g, p, m, ht / c), e.fill(), e.fillStyle = dt, e.textBaseline = "middle", e.fillText(f, h + u, g + m / 2);
1570
- }
1571
- //#endregion
1572
- //#region src/canvas/findHighlight.ts
1573
- var vt = {
1574
- matchColor: "#f59e0b",
1575
- currentColor: "#38bdf8",
1576
- currentFill: "rgba(56, 189, 248, 0.12)",
1577
- lineWidth: 2
1578
- };
1579
- function yt(e, t, n, r) {
1580
- if (!n.doc || !t.store.ui.find.open) return;
1581
- let i = {
1582
- ...vt,
1583
- ...r
1584
- }, a = t.listFindMatches();
1585
- if (a.length === 0) return;
1586
- let o = t.findCursor;
1587
- for (let r = 0; r < a.length; r += 1) {
1588
- let s = t.layerBoxAt(a[r].path);
1589
- if (!s) continue;
1590
- let c = r === o;
1591
- c && i.currentFill && (e.fillStyle = i.currentFill, e.fillRect(s.x, s.y, s.width, s.height)), e.strokeStyle = c ? i.currentColor : i.matchColor, e.lineWidth = (c ? i.lineWidth * 1.5 : i.lineWidth) / n.viewport.zoom, e.strokeRect(s.x, s.y, s.width, s.height);
1592
- }
1593
- }
1594
- //#endregion
1595
- //#region src/canvas/gizmo.ts
1596
- var bt = {
1597
- selectionColor: "#2563eb",
1598
- hoverColor: "rgba(37, 99, 235, 0.55)",
1599
- selectionWidth: 2,
1600
- handleSize: 8,
1601
- handleFill: "#ffffff"
1602
- };
1603
- function xt(e, t) {
1604
- return C(e, t)?.visible === !1;
1605
- }
1606
- function St(e, t, n, r) {
1607
- let i = {
1608
- ...bt,
1609
- ...r
1610
- }, { selection: a, hovered: o } = t.store.ui, s = n.doc;
1611
- if (s) {
1612
- if (o && !v(o, a) && !xt(s, o) && !t.isLocked(o)) {
1613
- let r = t.layerBoxAt(o);
1614
- r && (e.strokeStyle = i.hoverColor, e.lineWidth = i.selectionWidth / 2 / n.viewport.zoom, e.strokeRect(r.x, r.y, r.width, r.height));
1615
- }
1616
- if (a && !xt(s, a)) {
1617
- let r = t.layerBoxAt(a);
1618
- r && (e.strokeStyle = i.selectionColor, e.lineWidth = i.selectionWidth / n.viewport.zoom, e.strokeRect(r.x, r.y, r.width, r.height), Ct(e, t, a, r, n.viewport.zoom, i));
1619
- }
1620
- }
1621
- }
1622
- function Ct(e, t, n, r, i, a) {
1623
- let o = t.resizeHandlesAt(n);
1624
- if (o.length === 0) return;
1625
- let s = a.handleSize / i, c = s / 2;
1626
- e.fillStyle = a.handleFill, e.strokeStyle = a.selectionColor, e.lineWidth = a.selectionWidth / i;
1627
- for (let t of o) {
1628
- let n = de(r, t);
1629
- e.fillRect(n.x - c, n.y - c, s, s), e.strokeRect(n.x - c, n.y - c, s, s);
1630
- }
1631
- }
1632
- function wt(e, t, n) {
1633
- return (r) => {
1634
- if (!t) return;
1635
- t.setTransform(1, 0, 0, 1, 0, 0), t.clearRect(0, 0, t.canvas.width, t.canvas.height);
1636
- let i = r.dpr * r.viewport.zoom;
1637
- t.setTransform(i, 0, 0, i, -r.viewport.x * i, -r.viewport.y * i), St(t, e, r, n);
1638
- };
1639
- }
1640
- //#endregion
1641
- //#region src/canvas/scheduler.ts
1642
- function Tt() {
1643
- return (e) => {
1644
- let t = window.requestAnimationFrame(() => e());
1645
- return () => window.cancelAnimationFrame(t);
1646
- };
1647
- }
1648
- //#endregion
1649
- export { be as _, _t as a, Je as c, Be as d, $ as f, Ee as g, De as h, yt as i, Ge as l, Ie as m, wt as n, at as o, ze as p, St as r, $e as s, Tt as t, Ue as u };