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