@hankchen/canvas-editor-vue 0.5.0 → 0.6.1
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-CX1RdlFC.js → canvas-CptBzpwT.js} +7 -7
- package/dist/canvas.js +1 -1
- package/dist/index.js +12 -12
- package/dist/layer-panel/addMenu.d.ts +46 -14
- package/dist/layer-panel/index.d.ts +3 -2
- package/dist/{layer-panel-kOceTf8H.js → layer-panel-Cz-tmbJJ.js} +192 -192
- package/dist/layer-panel.js +1 -1
- package/dist/{property-panel-B32ZBQdf.js → property-panel-OBqd6D8W.js} +326 -322
- package/dist/property-panel.js +2 -2
- package/dist/shared/index.d.ts +10 -3
- package/dist/shared/shortcutsHelp.d.ts +4 -1
- package/dist/shared/useDataSourceSchema.d.ts +3 -1
- package/dist/shared/useDropdownMenu.d.ts +107 -2
- package/dist/shared/useExpressionDiagnostics.d.ts +11 -0
- package/dist/shared.js +7 -7
- package/dist/{status-bar-_PvEXyq8.js → status-bar-DCuK2R88.js} +67 -65
- package/dist/status-bar.js +1 -1
- package/dist/style.css +1 -1
- package/dist/{uploadFile-D1RY-ji0.js → uploadFile-DbB-KhII.js} +11 -7
- package/dist/useDataSourceSchema-CG9EGzwc.js +464 -0
- package/package.json +2 -2
- package/dist/useDataSourceSchema-CGbldbUj.js +0 -237
|
@@ -3,9 +3,9 @@ import { i as t, r as n, t as r } from "./layerPath-uy2ywyld.js";
|
|
|
3
3
|
import { o as i, s as a, u as o } from "./popupPosition-Ck5Gsvjy.js";
|
|
4
4
|
import { c as s, i as c, s as l, t as u } from "./useTransientFeedback-CTjmMmFF.js";
|
|
5
5
|
import { n as d, t as f } from "./usePathCompletion-Do17CQ6l.js";
|
|
6
|
-
import {
|
|
7
|
-
import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, nextTick as ee, normalizeClass as C, normalizeStyle as te, onScopeDispose as ne, openBlock as w, ref as T, renderList as re, shallowRef as E, toDisplayString as D, unref as O, vModelText as k, watch as ie, withCtx as A, withDirectives as j, withKeys as
|
|
8
|
-
var
|
|
6
|
+
import { r as p, t as m } from "./useDataSourceSchema-CG9EGzwc.js";
|
|
7
|
+
import { Fragment as h, computed as g, createBlock as _, createCommentVNode as v, createElementBlock as y, createElementVNode as b, createVNode as x, defineComponent as S, nextTick as ee, normalizeClass as C, normalizeStyle as te, onScopeDispose as ne, openBlock as w, ref as T, renderList as re, shallowRef as E, toDisplayString as D, unref as O, vModelText as k, watch as ie, withCtx as A, withDirectives as j, withKeys as M, withModifiers as N } from "vue";
|
|
8
|
+
var ae = e({
|
|
9
9
|
name: "eye-off",
|
|
10
10
|
size: 24,
|
|
11
11
|
node: [
|
|
@@ -26,7 +26,7 @@ var oe = e({
|
|
|
26
26
|
key: "1ooewy"
|
|
27
27
|
}]
|
|
28
28
|
]
|
|
29
|
-
}),
|
|
29
|
+
}), oe = e({
|
|
30
30
|
name: "eye",
|
|
31
31
|
size: 24,
|
|
32
32
|
node: [["path", {
|
|
@@ -38,7 +38,7 @@ var oe = e({
|
|
|
38
38
|
r: "3",
|
|
39
39
|
key: "1v7zrd"
|
|
40
40
|
}]]
|
|
41
|
-
}),
|
|
41
|
+
}), se = e({
|
|
42
42
|
name: "grip-vertical",
|
|
43
43
|
size: 24,
|
|
44
44
|
node: [
|
|
@@ -79,7 +79,7 @@ var oe = e({
|
|
|
79
79
|
key: "f4zoj3"
|
|
80
80
|
}]
|
|
81
81
|
]
|
|
82
|
-
}),
|
|
82
|
+
}), ce = e({
|
|
83
83
|
name: "lock-open",
|
|
84
84
|
size: 24,
|
|
85
85
|
node: [["rect", {
|
|
@@ -95,7 +95,7 @@ var oe = e({
|
|
|
95
95
|
key: "1mm8w8"
|
|
96
96
|
}]],
|
|
97
97
|
aliases: ["unlock"]
|
|
98
|
-
}),
|
|
98
|
+
}), le = e({
|
|
99
99
|
name: "lock",
|
|
100
100
|
size: 24,
|
|
101
101
|
node: [["rect", {
|
|
@@ -110,7 +110,7 @@ var oe = e({
|
|
|
110
110
|
d: "M7 11V7a5 5 0 0 1 10 0v4",
|
|
111
111
|
key: "fwvmzm"
|
|
112
112
|
}]]
|
|
113
|
-
}),
|
|
113
|
+
}), ue = e({
|
|
114
114
|
name: "pencil",
|
|
115
115
|
size: 24,
|
|
116
116
|
node: [["path", {
|
|
@@ -123,7 +123,7 @@ var oe = e({
|
|
|
123
123
|
});
|
|
124
124
|
//#endregion
|
|
125
125
|
//#region ../canvas-editor/src/editing/layerPanel.ts
|
|
126
|
-
function
|
|
126
|
+
function P(e) {
|
|
127
127
|
switch (e.type) {
|
|
128
128
|
case "TableLayer": return e.template === null ? [{
|
|
129
129
|
key: "rows",
|
|
@@ -149,7 +149,7 @@ function N(e) {
|
|
|
149
149
|
}];
|
|
150
150
|
}
|
|
151
151
|
}
|
|
152
|
-
function
|
|
152
|
+
function F(e) {
|
|
153
153
|
switch (e.type) {
|
|
154
154
|
case "TextLayer":
|
|
155
155
|
case "ImageLayer":
|
|
@@ -157,22 +157,22 @@ function P(e) {
|
|
|
157
157
|
default: return null;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
var
|
|
161
|
-
function
|
|
162
|
-
let t =
|
|
160
|
+
var I = "{{…}}";
|
|
161
|
+
function L(e) {
|
|
162
|
+
let t = F(e);
|
|
163
163
|
if (t === null) return "";
|
|
164
164
|
let n = o(t).parts.flatMap((e) => e.kind === "fragment" && e.expr !== "" ? [e.expr] : []);
|
|
165
|
-
return n.length === 0 ?
|
|
165
|
+
return n.length === 0 ? I : n.map((e) => `{{${e}}}`).join(" ");
|
|
166
166
|
}
|
|
167
|
-
function
|
|
167
|
+
function R(e, t, n, i) {
|
|
168
168
|
let a = [];
|
|
169
|
-
for (let { key: n, layers: r } of
|
|
169
|
+
for (let { key: n, layers: r } of P(e)) for (let e = 0; e < r.length; e += 1) {
|
|
170
170
|
let o = n === "rows" ? "row" : n === "cells" ? "cell" : n === "template" ? "templateRow" : "content", s = n === "content" ? [...t, "content"] : n === "template" ? [...t, "template"] : [
|
|
171
171
|
...t,
|
|
172
172
|
n,
|
|
173
173
|
e
|
|
174
174
|
];
|
|
175
|
-
a.push(
|
|
175
|
+
a.push(R(r[e], s, o, i));
|
|
176
176
|
}
|
|
177
177
|
return {
|
|
178
178
|
type: e.type,
|
|
@@ -181,17 +181,17 @@ function L(e, t, n, i) {
|
|
|
181
181
|
name: e.name,
|
|
182
182
|
visible: e.visible,
|
|
183
183
|
locked: r(t, i),
|
|
184
|
-
expressionPrefix:
|
|
184
|
+
expressionPrefix: L(e),
|
|
185
185
|
...e.type === "TableLayer" ? { templated: e.template !== null } : null,
|
|
186
186
|
children: a
|
|
187
187
|
};
|
|
188
188
|
}
|
|
189
|
-
function
|
|
189
|
+
function z(e, t = []) {
|
|
190
190
|
let n = [];
|
|
191
|
-
for (let r = e.layers.length - 1; r >= 0; --r) n.push(
|
|
191
|
+
for (let r = e.layers.length - 1; r >= 0; --r) n.push(R(e.layers[r], ["layers", r], "root", t));
|
|
192
192
|
return n;
|
|
193
193
|
}
|
|
194
|
-
var
|
|
194
|
+
var B = [
|
|
195
195
|
{
|
|
196
196
|
id: "heading",
|
|
197
197
|
fontSize: 40
|
|
@@ -204,7 +204,7 @@ var z = [
|
|
|
204
204
|
id: "body",
|
|
205
205
|
fontSize: 16
|
|
206
206
|
}
|
|
207
|
-
],
|
|
207
|
+
], V = [
|
|
208
208
|
{
|
|
209
209
|
id: "free",
|
|
210
210
|
ratio: null
|
|
@@ -244,7 +244,7 @@ var z = [
|
|
|
244
244
|
h: 16
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
|
-
],
|
|
247
|
+
], H = [
|
|
248
248
|
{
|
|
249
249
|
kind: "layer",
|
|
250
250
|
type: "TextLayer",
|
|
@@ -274,44 +274,42 @@ var z = [
|
|
|
274
274
|
label: "模板表",
|
|
275
275
|
title: "新增模板表(行模板 + 数据行展开)"
|
|
276
276
|
}
|
|
277
|
-
],
|
|
277
|
+
], U = {
|
|
278
278
|
heading: "标题",
|
|
279
279
|
subheading: "副标题",
|
|
280
280
|
body: "正文"
|
|
281
|
-
},
|
|
281
|
+
}, W = B.map(({ id: e, fontSize: t }) => ({
|
|
282
282
|
kind: "text-preset",
|
|
283
283
|
preset: e,
|
|
284
|
-
label:
|
|
285
|
-
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
"1:1": "1:1",
|
|
289
|
-
"4:3": "4:3",
|
|
290
|
-
"3:4": "3:4",
|
|
291
|
-
"16:9": "16:9",
|
|
292
|
-
"9:16": "9:16"
|
|
293
|
-
};
|
|
284
|
+
label: U[e],
|
|
285
|
+
shortcut: `${t}号`,
|
|
286
|
+
title: `画拉建${U[e]}文本层(字号 ${t},点击后在画布拖拽定落位与尺寸,Esc 取消)`
|
|
287
|
+
}));
|
|
294
288
|
function G(e) {
|
|
295
289
|
return e === null ? "任意宽高" : e.w === e.h ? "正方形" : e.w > e.h ? "横向" : "纵向";
|
|
296
290
|
}
|
|
297
|
-
var K =
|
|
291
|
+
var K = V.flatMap(({ id: e, ratio: t }) => e === "free" ? [] : [{
|
|
298
292
|
kind: "ratio-preset",
|
|
299
293
|
preset: e,
|
|
300
|
-
label:
|
|
301
|
-
|
|
302
|
-
})
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
294
|
+
label: e,
|
|
295
|
+
shortcut: G(t),
|
|
296
|
+
title: `画拉建 ${e} 图片层(${G(t)},画拉中按住 Shift 临时自由;点击后在画布拖拽定落位与尺寸,Esc 取消)`
|
|
297
|
+
}]), q = H.map((e) => e.kind === "layer" ? e.type === "TextLayer" ? {
|
|
298
|
+
...e,
|
|
299
|
+
children: W
|
|
300
|
+
} : e.type === "ImageLayer" ? {
|
|
301
|
+
...e,
|
|
302
|
+
children: K
|
|
303
|
+
} : e : e), J = H;
|
|
304
|
+
function de(e, t) {
|
|
305
|
+
return `画拉建${e}(${t}),${c}`;
|
|
310
306
|
}
|
|
311
|
-
|
|
307
|
+
//#endregion
|
|
308
|
+
//#region src/layer-panel/TemplateTableForm.vue?vue&type=script&setup=true&lang.ts
|
|
309
|
+
var Y = {
|
|
312
310
|
key: 0,
|
|
313
311
|
class: "px-2 pb-1 text-[11px] text-cn-danger"
|
|
314
|
-
},
|
|
312
|
+
}, X = { class: "flex gap-1 p-1" }, fe = /* @__PURE__ */ S({
|
|
315
313
|
__name: "TemplateTableForm",
|
|
316
314
|
props: { editor: {} },
|
|
317
315
|
emits: ["confirm", "cancel"],
|
|
@@ -352,8 +350,8 @@ var J = (e) => (t) => t.kind === "layer" && t.type === e, Y = q(q(V, U, J("TextL
|
|
|
352
350
|
onInput: t[1] ||= (e) => o.value = !1,
|
|
353
351
|
onKeydown: S
|
|
354
352
|
}, null, 34), [[k, a.value]]),
|
|
355
|
-
o.value ? (w(), y("p",
|
|
356
|
-
b("div",
|
|
353
|
+
o.value ? (w(), y("p", Y, "rowsPath 必填")) : v("", !0),
|
|
354
|
+
b("div", X, [b("button", {
|
|
357
355
|
type: "button",
|
|
358
356
|
"data-template-confirm": "",
|
|
359
357
|
class: "flex-1 rounded bg-cn-accent/20 px-2 py-1 text-[12px] text-cn-accent hover:bg-cn-accent/30",
|
|
@@ -375,30 +373,30 @@ var J = (e) => (t) => t.kind === "layer" && t.type === e, Y = q(q(V, U, J("TextL
|
|
|
375
373
|
});
|
|
376
374
|
//#endregion
|
|
377
375
|
//#region src/layer-panel/useLayerPanel.ts
|
|
378
|
-
function
|
|
376
|
+
function pe(e) {
|
|
379
377
|
let t = E(e.store.doc), n = E(e.store.ui.selection), r = E(e.store.ui.hovered), i = E(e.store.ui.renaming), a = E(e.store.ui.lockedPaths), o = e.subscribe((o) => {
|
|
380
378
|
o.scope === "doc" ? (t.value = e.store.doc, n.value = e.store.ui.selection, r.value = e.store.ui.hovered, i.value = e.store.ui.renaming, a.value = e.store.ui.lockedPaths) : o.branch === "selection" ? n.value = e.store.ui.selection : o.branch === "hovered" ? r.value = e.store.ui.hovered : o.branch === "renaming" ? i.value = e.store.ui.renaming : o.branch === "lockedPaths" && (a.value = e.store.ui.lockedPaths);
|
|
381
379
|
});
|
|
382
380
|
return ne(o, !0), {
|
|
383
|
-
outline: g(() => t.value ?
|
|
381
|
+
outline: g(() => t.value ? z(t.value, a.value) : []),
|
|
384
382
|
selection: g(() => n.value),
|
|
385
383
|
hovered: g(() => r.value),
|
|
386
384
|
renaming: g(() => i.value)
|
|
387
385
|
};
|
|
388
386
|
}
|
|
389
|
-
function
|
|
387
|
+
function me(e, t) {
|
|
390
388
|
return t > 0 && e < t / 2;
|
|
391
389
|
}
|
|
392
390
|
//#endregion
|
|
393
391
|
//#region src/layer-panel/LayerPanel.vue?vue&type=script&setup=true&lang.ts
|
|
394
|
-
var
|
|
392
|
+
var he = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rounded-xl border border-cn-line bg-cn-bg text-cn-fg shadow-[0_16px_40px_-12px_rgba(2,6,23,0.55)]" }, ge = { class: "sticky top-0 z-10 flex items-center justify-between border-b border-cn-line bg-cn-bg-elevated/95 px-3.5 py-2.5" }, _e = { class: "flex items-center gap-1" }, ve = [
|
|
395
393
|
"aria-expanded",
|
|
396
394
|
"onClick",
|
|
397
395
|
"onKeydown"
|
|
398
|
-
],
|
|
396
|
+
], ye = {
|
|
399
397
|
key: 0,
|
|
400
398
|
class: "mx-3.5 my-4 rounded-lg border border-dashed border-cn-line px-3 py-6 text-center text-[11px] leading-5 text-cn-muted"
|
|
401
|
-
},
|
|
399
|
+
}, be = [
|
|
402
400
|
"data-key",
|
|
403
401
|
"draggable",
|
|
404
402
|
"onClick",
|
|
@@ -406,61 +404,63 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
406
404
|
"onDragstart",
|
|
407
405
|
"onDragover",
|
|
408
406
|
"onDrop"
|
|
409
|
-
],
|
|
407
|
+
], xe = ["onDragstart"], Se = ["title"], Ce = ["onDblclick"], we = [
|
|
410
408
|
"title",
|
|
411
409
|
"aria-pressed",
|
|
412
410
|
"onClick"
|
|
413
|
-
],
|
|
411
|
+
], Te = [
|
|
414
412
|
"title",
|
|
415
413
|
"aria-pressed",
|
|
416
414
|
"onClick"
|
|
417
|
-
],
|
|
415
|
+
], Ee = ["onClick"], De = [
|
|
418
416
|
"disabled",
|
|
419
417
|
"title",
|
|
420
418
|
"onClick"
|
|
421
|
-
],
|
|
419
|
+
], Oe = ["onClick"], ke = ["onClick"], Ae = [
|
|
422
420
|
"disabled",
|
|
423
421
|
"title",
|
|
424
422
|
"onClick"
|
|
425
|
-
],
|
|
423
|
+
], je = /* @__PURE__ */ S({
|
|
426
424
|
__name: "LayerPanel",
|
|
427
425
|
props: { editor: {} },
|
|
428
426
|
setup(e) {
|
|
429
|
-
let r = e, i = `解锁图层(${s("toggleLayerLock", l())})`, o = `图层已锁定(${s("toggleLayerLock", l())} 解锁后可删除)`, d =
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
427
|
+
let r = e, i = `解锁图层(${s("toggleLayerLock", l())})`, o = `图层已锁定(${s("toggleLayerLock", l())} 解锁后可删除)`, d = pe(r.editor), f = T(!1), m = g(() => f.value ? [] : q.map((e) => {
|
|
428
|
+
if (e.kind === "template-table") return {
|
|
429
|
+
label: e.label,
|
|
430
|
+
title: e.title,
|
|
431
|
+
dataAttrs: { "data-add-layer": "template-table" },
|
|
432
|
+
keepsOpen: !0,
|
|
433
|
+
run: () => {
|
|
434
|
+
f.value = !0;
|
|
435
|
+
}
|
|
436
|
+
};
|
|
437
|
+
let t = { "data-add-layer": e.type }, n = () => {
|
|
434
438
|
r.editor.armLayerCreate(e.type), u().show(c);
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
keepsOpen: !0,
|
|
461
|
-
run: () => {
|
|
462
|
-
f.value = !0;
|
|
463
|
-
}
|
|
439
|
+
};
|
|
440
|
+
return e.children === void 0 ? {
|
|
441
|
+
label: e.label,
|
|
442
|
+
title: e.title,
|
|
443
|
+
dataAttrs: t,
|
|
444
|
+
run: n
|
|
445
|
+
} : {
|
|
446
|
+
kind: "submenu",
|
|
447
|
+
label: e.label,
|
|
448
|
+
title: e.title,
|
|
449
|
+
dataAttrs: t,
|
|
450
|
+
run: n,
|
|
451
|
+
children: e.children.map((t) => ({
|
|
452
|
+
label: t.label,
|
|
453
|
+
title: t.title,
|
|
454
|
+
shortcut: t.shortcut,
|
|
455
|
+
dataAttrs: {
|
|
456
|
+
"data-add-layer": e.type,
|
|
457
|
+
...t.kind === "text-preset" ? { "data-text-preset": t.preset } : { "data-ratio-preset": t.preset }
|
|
458
|
+
},
|
|
459
|
+
run: () => {
|
|
460
|
+
r.editor.armLayerCreate(e.type, t.preset), u().show(de(e.label, t.label));
|
|
461
|
+
}
|
|
462
|
+
}))
|
|
463
|
+
};
|
|
464
464
|
}));
|
|
465
465
|
function S(e, t) {
|
|
466
466
|
r.editor.armTemplateTableCreate(e), u().show(c), t();
|
|
@@ -471,7 +471,7 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
471
471
|
function E() {
|
|
472
472
|
f.value = !1;
|
|
473
473
|
}
|
|
474
|
-
function
|
|
474
|
+
function P(e, t) {
|
|
475
475
|
switch (e.role) {
|
|
476
476
|
case "root": return e.name === "" ? `${e.type} ${t}` : e.name;
|
|
477
477
|
case "row": return `行 ${Number(e.path[e.path.length - 1]) + 1}`;
|
|
@@ -480,7 +480,7 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
480
480
|
case "content": return e.type;
|
|
481
481
|
}
|
|
482
482
|
}
|
|
483
|
-
let
|
|
483
|
+
let F = g(() => {
|
|
484
484
|
let e = [], t = /* @__PURE__ */ new Map();
|
|
485
485
|
function r(i, a, o, s) {
|
|
486
486
|
let c = i.role === "row" ? i.path.slice(0, -2) : i.role === "templateRow" ? i.path.slice(0, -1) : s, l = 0;
|
|
@@ -488,7 +488,7 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
488
488
|
key: i.path.join("."),
|
|
489
489
|
node: i,
|
|
490
490
|
indentLevel: a,
|
|
491
|
-
label:
|
|
491
|
+
label: P(i, l),
|
|
492
492
|
indexInGroup: o,
|
|
493
493
|
tablePath: c,
|
|
494
494
|
inTemplate: n(i.path),
|
|
@@ -496,34 +496,34 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
496
496
|
}), i.children.forEach((e, t) => r(e, a + 1, t, c));
|
|
497
497
|
}
|
|
498
498
|
return d.outline.value.forEach((e, t) => r(e, 0, t, null)), e;
|
|
499
|
-
}),
|
|
500
|
-
function
|
|
499
|
+
}), I = g(() => F.value.length > 0);
|
|
500
|
+
function L(e) {
|
|
501
501
|
r.editor.setSelection(e.node.path);
|
|
502
502
|
}
|
|
503
|
-
function
|
|
503
|
+
function R(e) {
|
|
504
504
|
r.editor.setHovered(e === null ? null : e.node.path);
|
|
505
505
|
}
|
|
506
|
-
function
|
|
506
|
+
function z(e) {
|
|
507
507
|
r.editor.addTableRow(e.node.path);
|
|
508
508
|
}
|
|
509
|
-
function
|
|
509
|
+
function B(e) {
|
|
510
510
|
r.editor.addTableCell(e.node.path);
|
|
511
511
|
}
|
|
512
|
-
function
|
|
512
|
+
function V(e) {
|
|
513
513
|
r.editor.addTemplateCell(e.node.path.slice(0, -1));
|
|
514
514
|
}
|
|
515
|
-
function
|
|
515
|
+
function H(e) {
|
|
516
516
|
r.editor.deleteLayer(e.node.path);
|
|
517
517
|
}
|
|
518
|
-
function
|
|
518
|
+
function U(e) {
|
|
519
519
|
r.editor.toggleLayerVisibility(e.node.path);
|
|
520
520
|
}
|
|
521
|
-
function
|
|
521
|
+
function W(e) {
|
|
522
522
|
r.editor.toggleLayerLock(e.node.path);
|
|
523
523
|
}
|
|
524
|
-
let
|
|
525
|
-
function
|
|
526
|
-
let r =
|
|
524
|
+
let G = T(null), K = T(null);
|
|
525
|
+
function J(e) {
|
|
526
|
+
let r = G.value;
|
|
527
527
|
if (!r) return !1;
|
|
528
528
|
if (r.kind === "root") return e.node.role === "root";
|
|
529
529
|
if (r.kind === "row") return e.node.role === "row";
|
|
@@ -531,11 +531,11 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
531
531
|
let i = n(r.cellPath);
|
|
532
532
|
return i === e.inTemplate ? !i || t(r.cellPath.slice(0, -2), e.node.path.slice(0, -2)) : !1;
|
|
533
533
|
}
|
|
534
|
-
function
|
|
534
|
+
function Y(e) {
|
|
535
535
|
return e.node.role === "root";
|
|
536
536
|
}
|
|
537
|
-
function
|
|
538
|
-
e.draggable && (
|
|
537
|
+
function X(e, t) {
|
|
538
|
+
e.draggable && (G.value = e.node.role === "root" ? {
|
|
539
539
|
kind: "root",
|
|
540
540
|
from: e.indexInGroup
|
|
541
541
|
} : e.node.role === "row" ? {
|
|
@@ -549,46 +549,46 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
549
549
|
cellPath: e.node.path
|
|
550
550
|
}, t.dataTransfer?.setData("text/plain", e.key), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"));
|
|
551
551
|
}
|
|
552
|
-
function
|
|
553
|
-
|
|
552
|
+
function je(e, t) {
|
|
553
|
+
Y(e) || X(e, t);
|
|
554
554
|
}
|
|
555
|
-
function
|
|
556
|
-
if (!
|
|
555
|
+
function Me(e) {
|
|
556
|
+
if (!Y(e)) return e.draggable || void 0;
|
|
557
557
|
}
|
|
558
|
-
function
|
|
559
|
-
if (!
|
|
560
|
-
let n = t.currentTarget.getBoundingClientRect(), r =
|
|
561
|
-
t.preventDefault(),
|
|
558
|
+
function Ne(e, t) {
|
|
559
|
+
if (!J(e)) return;
|
|
560
|
+
let n = t.currentTarget.getBoundingClientRect(), r = me(t.clientY - n.top, n.height);
|
|
561
|
+
t.preventDefault(), K.value = {
|
|
562
562
|
key: e.key,
|
|
563
563
|
edge: r ? "before" : "after"
|
|
564
564
|
};
|
|
565
565
|
}
|
|
566
|
-
function
|
|
567
|
-
if (!
|
|
568
|
-
let n =
|
|
566
|
+
function Pe(e, t) {
|
|
567
|
+
if (!J(e)) return;
|
|
568
|
+
let n = K.value, i = G.value;
|
|
569
569
|
if (!i || !n || n.key !== e.key) return;
|
|
570
570
|
t.preventDefault();
|
|
571
571
|
let a = n.edge === "before" ? e.indexInGroup : e.indexInGroup + 1;
|
|
572
|
-
i.kind === "root" ? r.editor.moveRootLayer(i.from, a) : i.kind === "row" ? e.tablePath !== null && e.tablePath.join(".") === i.tablePath.join(".") ? r.editor.moveTableRow(i.tablePath, i.from, a) : r.editor.moveTableRowToTable(i.rowPath, e.tablePath, a) : r.editor.moveTableCellToRow(i.cellPath, e.node.path.slice(0, -2), a),
|
|
572
|
+
i.kind === "root" ? r.editor.moveRootLayer(i.from, a) : i.kind === "row" ? e.tablePath !== null && e.tablePath.join(".") === i.tablePath.join(".") ? r.editor.moveTableRow(i.tablePath, i.from, a) : r.editor.moveTableRowToTable(i.rowPath, e.tablePath, a) : r.editor.moveTableCellToRow(i.cellPath, e.node.path.slice(0, -2), a), G.value = null, K.value = null;
|
|
573
573
|
}
|
|
574
|
-
function
|
|
575
|
-
|
|
574
|
+
function Fe() {
|
|
575
|
+
G.value = null, K.value = null;
|
|
576
576
|
}
|
|
577
|
-
function
|
|
577
|
+
function Ie(e) {
|
|
578
578
|
return t(d.selection.value, e.node.path);
|
|
579
579
|
}
|
|
580
|
-
function
|
|
580
|
+
function Le(e) {
|
|
581
581
|
return t(d.hovered.value, e.node.path);
|
|
582
582
|
}
|
|
583
|
-
let Z = T(""), Q = null,
|
|
584
|
-
function Re(e) {
|
|
585
|
-
Le = e instanceof HTMLInputElement ? e : null;
|
|
586
|
-
}
|
|
583
|
+
let Z = T(""), Q = null, Re = null;
|
|
587
584
|
function ze(e) {
|
|
588
|
-
|
|
585
|
+
Re = e instanceof HTMLInputElement ? e : null;
|
|
589
586
|
}
|
|
590
587
|
function Be(e) {
|
|
591
|
-
|
|
588
|
+
return t(d.renaming.value, e.node.path);
|
|
589
|
+
}
|
|
590
|
+
function Ve(e) {
|
|
591
|
+
Y(e) && r.editor.beginRename(e.node.path);
|
|
592
592
|
}
|
|
593
593
|
function $() {
|
|
594
594
|
let e = Z.value.trim();
|
|
@@ -598,7 +598,7 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
598
598
|
}
|
|
599
599
|
r.editor.commitRename(e);
|
|
600
600
|
}
|
|
601
|
-
function
|
|
601
|
+
function He() {
|
|
602
602
|
r.editor.cancelRename();
|
|
603
603
|
}
|
|
604
604
|
return ie(d.renaming, async (e) => {
|
|
@@ -606,12 +606,12 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
606
606
|
Q = null;
|
|
607
607
|
return;
|
|
608
608
|
}
|
|
609
|
-
let n =
|
|
609
|
+
let n = F.value.find((n) => t(n.node.path, e));
|
|
610
610
|
Z.value = n?.label ?? "", Q = Z.value, await ee();
|
|
611
|
-
let r =
|
|
611
|
+
let r = Re;
|
|
612
612
|
r && (r.focus({ preventScroll: !0 }), r.select());
|
|
613
|
-
}), (e, t) => (w(), y("aside",
|
|
614
|
-
b("header",
|
|
613
|
+
}), (e, t) => (w(), y("aside", he, [
|
|
614
|
+
b("header", ge, [t[7] ||= b("span", { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, "图层", -1), b("div", _e, [x(p, {
|
|
615
615
|
label: "新增图层",
|
|
616
616
|
items: m.value,
|
|
617
617
|
onClosed: E
|
|
@@ -626,8 +626,8 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
626
626
|
class: "flex size-6 items-center justify-center rounded border border-cn-field-line bg-cn-field text-[13px] leading-none text-cn-fg/80 hover:border-cn-accent/40 hover:text-cn-accent",
|
|
627
627
|
onClick: t,
|
|
628
628
|
onKeydown: r
|
|
629
|
-
}, " + ", 40,
|
|
630
|
-
body: A(({ closeMenu: e }) => [f.value ? (w(), _(
|
|
629
|
+
}, " + ", 40, ve)]),
|
|
630
|
+
body: A(({ closeMenu: e }) => [f.value ? (w(), _(fe, {
|
|
631
631
|
key: 0,
|
|
632
632
|
editor: r.editor,
|
|
633
633
|
onConfirm: (t) => S(t, e),
|
|
@@ -639,103 +639,103 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
639
639
|
])) : v("", !0)]),
|
|
640
640
|
_: 1
|
|
641
641
|
}, 8, ["items"])])]),
|
|
642
|
-
|
|
642
|
+
I.value ? v("", !0) : (w(), y("p", ye, " 画布还没有图层,用上方按钮新增 ")),
|
|
643
643
|
b("ul", {
|
|
644
644
|
class: "cn-layers__tree flex flex-col gap-0.5 px-1.5 py-1",
|
|
645
|
-
onDragend:
|
|
646
|
-
}, [(w(!0), y(h, null, re(
|
|
645
|
+
onDragend: Fe
|
|
646
|
+
}, [(w(!0), y(h, null, re(F.value, (e) => (w(), y("li", {
|
|
647
647
|
key: e.key,
|
|
648
648
|
"data-key": e.key,
|
|
649
|
-
draggable:
|
|
649
|
+
draggable: Me(e),
|
|
650
650
|
class: C(["cn-layers__row group flex cursor-default select-none items-center gap-1 py-1 pr-1 text-[12px]", {
|
|
651
|
-
"cn-layers__row--selected":
|
|
652
|
-
"cn-layers__row--hovered":
|
|
653
|
-
"cn-layers__row--hidden":
|
|
651
|
+
"cn-layers__row--selected": Ie(e),
|
|
652
|
+
"cn-layers__row--hovered": Le(e) && !Ie(e),
|
|
653
|
+
"cn-layers__row--hidden": Y(e) && !e.node.visible,
|
|
654
654
|
"cn-layers__row--template": e.inTemplate,
|
|
655
|
-
"cursor-grab": e.draggable && !
|
|
656
|
-
"cn-layers__row--drop-before":
|
|
657
|
-
"cn-layers__row--drop-after":
|
|
655
|
+
"cursor-grab": e.draggable && !Y(e),
|
|
656
|
+
"cn-layers__row--drop-before": K.value?.key === e.key && K.value?.edge === "before",
|
|
657
|
+
"cn-layers__row--drop-after": K.value?.key === e.key && K.value?.edge === "after"
|
|
658
658
|
}]),
|
|
659
659
|
style: te({ paddingLeft: `${4 + e.indentLevel * 14}px` }),
|
|
660
|
-
onClick: (t) =>
|
|
661
|
-
onMouseenter: (t) =>
|
|
662
|
-
onMouseleave: t[6] ||= (e) =>
|
|
663
|
-
onDragstart: (t) =>
|
|
664
|
-
onDragover: (t) =>
|
|
665
|
-
onDrop: (t) =>
|
|
660
|
+
onClick: (t) => L(e),
|
|
661
|
+
onMouseenter: (t) => R(e),
|
|
662
|
+
onMouseleave: t[6] ||= (e) => R(null),
|
|
663
|
+
onDragstart: (t) => je(e, t),
|
|
664
|
+
onDragover: (t) => Ne(e, t),
|
|
665
|
+
onDrop: (t) => Pe(e, t)
|
|
666
666
|
}, [
|
|
667
|
-
|
|
667
|
+
Y(e) ? (w(), y("span", {
|
|
668
668
|
key: 0,
|
|
669
669
|
"data-drag-handle": "",
|
|
670
670
|
draggable: "true",
|
|
671
671
|
title: "拖动排序",
|
|
672
672
|
class: "cn-layers__handle shrink-0",
|
|
673
|
-
onDragstart: (t) =>
|
|
673
|
+
onDragstart: (t) => X(e, t)
|
|
674
674
|
}, [x(a, {
|
|
675
|
-
icon: O(
|
|
675
|
+
icon: O(se),
|
|
676
676
|
size: 12,
|
|
677
677
|
"stroke-width": 2.5
|
|
678
|
-
}, null, 8, ["icon"])], 40,
|
|
678
|
+
}, null, 8, ["icon"])], 40, xe)) : v("", !0),
|
|
679
679
|
e.node.expressionPrefix === "" ? v("", !0) : (w(), y("span", {
|
|
680
680
|
key: 1,
|
|
681
681
|
class: "cn-layers__prefix",
|
|
682
682
|
title: e.node.expressionPrefix
|
|
683
|
-
}, D(e.node.expressionPrefix), 9,
|
|
684
|
-
|
|
683
|
+
}, D(e.node.expressionPrefix), 9, Se)),
|
|
684
|
+
Be(e) ? j((w(), y("input", {
|
|
685
685
|
key: 2,
|
|
686
686
|
ref_for: !0,
|
|
687
|
-
ref:
|
|
687
|
+
ref: ze,
|
|
688
688
|
"onUpdate:modelValue": t[0] ||= (e) => Z.value = e,
|
|
689
689
|
"data-rename-input": "",
|
|
690
690
|
"aria-label": "图层重命名",
|
|
691
691
|
class: "cn-layers__rename-input min-w-0 flex-1",
|
|
692
|
-
onClick: t[1] ||=
|
|
693
|
-
onDblclick: t[2] ||=
|
|
694
|
-
onKeydown: [t[3] ||=
|
|
692
|
+
onClick: t[1] ||= N(() => {}, ["stop"]),
|
|
693
|
+
onDblclick: t[2] ||= N(() => {}, ["stop"]),
|
|
694
|
+
onKeydown: [t[3] ||= M(N((e) => $(), ["prevent"]), ["enter"]), t[4] ||= M(N((e) => He(), ["prevent"]), ["esc"])],
|
|
695
695
|
onBlur: t[5] ||= (e) => $()
|
|
696
696
|
}, null, 544)), [[k, Z.value]]) : (w(), y("span", {
|
|
697
697
|
key: 3,
|
|
698
698
|
class: "cn-layers__label min-w-0 flex-1 truncate font-mono text-[11px] leading-4",
|
|
699
|
-
onDblclick: (t) =>
|
|
700
|
-
}, D(e.label), 41,
|
|
701
|
-
|
|
699
|
+
onDblclick: (t) => Ve(e)
|
|
700
|
+
}, D(e.label), 41, Ce)),
|
|
701
|
+
Y(e) ? (w(), y("button", {
|
|
702
702
|
key: 4,
|
|
703
703
|
type: "button",
|
|
704
704
|
"data-visibility": "",
|
|
705
705
|
class: C(["cn-layers__eye size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.visible ? "hidden group-hover:flex" : "flex"]),
|
|
706
706
|
title: e.node.visible ? "隐藏图层(最终输出不含该层)" : "显示图层",
|
|
707
707
|
"aria-pressed": !e.node.visible,
|
|
708
|
-
onClick:
|
|
708
|
+
onClick: N((t) => U(e), ["stop"])
|
|
709
709
|
}, [x(a, {
|
|
710
|
-
icon: e.node.visible ? O(
|
|
710
|
+
icon: e.node.visible ? O(oe) : O(ae),
|
|
711
711
|
size: 11,
|
|
712
712
|
"stroke-width": 2
|
|
713
|
-
}, null, 8, ["icon"])], 10,
|
|
714
|
-
|
|
713
|
+
}, null, 8, ["icon"])], 10, we)) : v("", !0),
|
|
714
|
+
Y(e) ? (w(), y("button", {
|
|
715
715
|
key: 5,
|
|
716
716
|
type: "button",
|
|
717
717
|
"data-lock": "",
|
|
718
718
|
class: C(["cn-layers__lock size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent", e.node.locked ? "flex" : "hidden group-hover:flex"]),
|
|
719
719
|
title: e.node.locked ? i : "锁定图层(画布不可点选/拖动/删除,渲染照常)",
|
|
720
720
|
"aria-pressed": e.node.locked,
|
|
721
|
-
onClick:
|
|
721
|
+
onClick: N((t) => W(e), ["stop"])
|
|
722
722
|
}, [x(a, {
|
|
723
|
-
icon: e.node.locked ? O(
|
|
723
|
+
icon: e.node.locked ? O(le) : O(ce),
|
|
724
724
|
size: 11,
|
|
725
725
|
"stroke-width": 2
|
|
726
|
-
}, null, 8, ["icon"])], 10,
|
|
727
|
-
|
|
726
|
+
}, null, 8, ["icon"])], 10, Te)) : v("", !0),
|
|
727
|
+
Y(e) ? (w(), y("button", {
|
|
728
728
|
key: 6,
|
|
729
729
|
type: "button",
|
|
730
730
|
"data-rename": "",
|
|
731
731
|
class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
|
|
732
732
|
title: "重命名(双击名称或 F2)",
|
|
733
|
-
onClick:
|
|
733
|
+
onClick: N((t) => Ve(e), ["stop"])
|
|
734
734
|
}, [x(a, {
|
|
735
|
-
icon: O(
|
|
735
|
+
icon: O(ue),
|
|
736
736
|
size: 11,
|
|
737
737
|
"stroke-width": 2
|
|
738
|
-
}, null, 8, ["icon"])], 8,
|
|
738
|
+
}, null, 8, ["icon"])], 8, Ee)) : v("", !0),
|
|
739
739
|
e.node.role === "root" && e.node.type === "TableLayer" ? (w(), y("button", {
|
|
740
740
|
key: 7,
|
|
741
741
|
type: "button",
|
|
@@ -743,34 +743,34 @@ var ve = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
743
743
|
class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex disabled:cursor-not-allowed disabled:text-cn-muted/50 disabled:hover:bg-transparent",
|
|
744
744
|
disabled: e.node.templated === !0,
|
|
745
745
|
title: e.node.templated === !0 ? "模板态不可加行——行由数据展开" : "加行(缺省行 + 缺省格与文本,行宽=表宽)",
|
|
746
|
-
onClick:
|
|
747
|
-
}, " +行 ", 8,
|
|
746
|
+
onClick: N((t) => z(e), ["stop"])
|
|
747
|
+
}, " +行 ", 8, De)) : v("", !0),
|
|
748
748
|
e.node.role === "row" ? (w(), y("button", {
|
|
749
749
|
key: 8,
|
|
750
750
|
type: "button",
|
|
751
751
|
"data-add-cell": "",
|
|
752
752
|
class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
|
|
753
753
|
title: "加格(缺省格 + 文本内容,行高取最高格)",
|
|
754
|
-
onClick:
|
|
755
|
-
}, " +格 ", 8,
|
|
754
|
+
onClick: N((t) => B(e), ["stop"])
|
|
755
|
+
}, " +格 ", 8, Oe)) : v("", !0),
|
|
756
756
|
e.node.role === "templateRow" ? (w(), y("button", {
|
|
757
757
|
key: 9,
|
|
758
758
|
type: "button",
|
|
759
759
|
"data-add-template-cell": "",
|
|
760
760
|
class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-accent/15 hover:text-cn-accent group-hover:flex",
|
|
761
761
|
title: "加格(缺省格 + 文本内容,零高度耦合——行高由数据展开定稿)",
|
|
762
|
-
onClick:
|
|
763
|
-
}, " +格 ", 8,
|
|
762
|
+
onClick: N((t) => V(e), ["stop"])
|
|
763
|
+
}, " +格 ", 8, ke)) : v("", !0),
|
|
764
764
|
b("button", {
|
|
765
765
|
type: "button",
|
|
766
766
|
class: "cn-layers__delete hidden size-5 shrink-0 items-center justify-center rounded text-[10px] leading-none text-cn-muted hover:bg-cn-danger/15 hover:text-cn-danger group-hover:flex disabled:cursor-not-allowed disabled:text-cn-muted/50 disabled:hover:bg-transparent disabled:hover:text-cn-muted/50",
|
|
767
767
|
disabled: e.node.role === "templateRow" || e.node.locked,
|
|
768
768
|
title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ? o : "删除(含子层)",
|
|
769
|
-
onClick:
|
|
770
|
-
}, " ✕ ", 8,
|
|
771
|
-
], 46,
|
|
769
|
+
onClick: N((t) => H(e), ["stop"])
|
|
770
|
+
}, " ✕ ", 8, Ae)
|
|
771
|
+
], 46, be))), 128))], 32)
|
|
772
772
|
]));
|
|
773
773
|
}
|
|
774
774
|
});
|
|
775
775
|
//#endregion
|
|
776
|
-
export {
|
|
776
|
+
export { J as a, W as c, fe as i, q as l, me as n, H as o, pe as r, K as s, je as t };
|