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