@hankchen/canvas-editor-vue 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas-DP-pVLyA.js +1650 -0
- package/dist/canvas.js +1 -1
- package/dist/{completionAnchor-4lhR2kJz.js → completionAnchor-CDR5YZhu.js} +28 -28
- package/dist/{createLucideIcon-CMq8ZKo2.js → createLucideIcon-SCvtEGVf.js} +11 -11
- package/dist/{dist-DuXLYZZ9.js → dist-DGtNmLwo.js} +1 -1
- package/dist/index.js +12 -12
- package/dist/{layer-panel-ArP66_vZ.js → layer-panel-CXIkRodC.js} +240 -239
- package/dist/layer-panel.js +1 -1
- package/dist/layerPath-uy2ywyld.js +76 -0
- package/dist/{property-panel-jt_rsTVW.js → property-panel-CigAECN_.js} +652 -651
- package/dist/property-panel.js +1 -1
- package/dist/shared-BTyB4vbT.js +123 -0
- package/dist/shared.js +8 -8
- package/dist/{status-bar-BhhrVoBZ.js → status-bar-DO8akYAw.js} +50 -49
- package/dist/status-bar.js +1 -1
- package/dist/{uploadFile-CutE_xI-.js → uploadFile-BOfv8aLG.js} +106 -105
- package/dist/{useDataSourceSchema-C924m8fc.js → useDataSourceSchema-DStVoY8Z.js} +47 -47
- package/dist/{usePathCompletion-DkHoGla4.js → usePathCompletion-uJ5c_gQ0.js} +60 -59
- package/dist/{useShortcutsHelp-DTC3yRil.js → useShortcutsHelp-CsyarO2P.js} +1 -1
- package/dist/{useTransientFeedback-gS9Xa9GY.js → useTransientFeedback-Cnp6aNB7.js} +1 -1
- package/dist/{useViewport-BLe2ise1.js → useViewport-D9Ipevzs.js} +5 -5
- package/package.json +1 -1
- package/dist/canvas-CS4SmrIO.js +0 -1649
- package/dist/layerPath-BRZK9ka1.js +0 -2160
- package/dist/shared-D9zYUQaw.js +0 -123
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { t as
|
|
3
|
-
import { i
|
|
4
|
-
import { o as
|
|
5
|
-
import { n as
|
|
6
|
-
import { n as
|
|
7
|
-
|
|
1
|
+
import { t as e } from "./createLucideIcon-SCvtEGVf.js";
|
|
2
|
+
import { i as t, r as n, t as r } from "./layerPath-uy2ywyld.js";
|
|
3
|
+
import { i, o as a, r as o } from "./completionAnchor-CDR5YZhu.js";
|
|
4
|
+
import { o as s, r as c, s as l, t as ee } from "./useTransientFeedback-Cnp6aNB7.js";
|
|
5
|
+
import { n as te, t as ne } from "./usePathCompletion-uJ5c_gQ0.js";
|
|
6
|
+
import { n as re, t as ie } from "./useDataSourceSchema-DStVoY8Z.js";
|
|
7
|
+
import { Fragment as u, computed as d, createBlock as ae, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, nextTick as oe, normalizeClass as _, normalizeStyle as se, onScopeDispose as v, openBlock as y, ref as b, renderList as ce, shallowRef as x, toDisplayString as S, unref as C, vModelText as w, watch as le, withCtx as T, withDirectives as E, withKeys as D, withModifiers as O } from "vue";
|
|
8
|
+
var ue = e({
|
|
8
9
|
name: "eye-off",
|
|
9
10
|
size: 24,
|
|
10
11
|
node: [
|
|
@@ -25,7 +26,7 @@ var de = C({
|
|
|
25
26
|
key: "1ooewy"
|
|
26
27
|
}]
|
|
27
28
|
]
|
|
28
|
-
}),
|
|
29
|
+
}), de = e({
|
|
29
30
|
name: "eye",
|
|
30
31
|
size: 24,
|
|
31
32
|
node: [["path", {
|
|
@@ -37,7 +38,7 @@ var de = C({
|
|
|
37
38
|
r: "3",
|
|
38
39
|
key: "1v7zrd"
|
|
39
40
|
}]]
|
|
40
|
-
}),
|
|
41
|
+
}), fe = e({
|
|
41
42
|
name: "grip-vertical",
|
|
42
43
|
size: 24,
|
|
43
44
|
node: [
|
|
@@ -78,7 +79,7 @@ var de = C({
|
|
|
78
79
|
key: "f4zoj3"
|
|
79
80
|
}]
|
|
80
81
|
]
|
|
81
|
-
}),
|
|
82
|
+
}), pe = e({
|
|
82
83
|
name: "lock-open",
|
|
83
84
|
size: 24,
|
|
84
85
|
node: [["rect", {
|
|
@@ -94,7 +95,7 @@ var de = C({
|
|
|
94
95
|
key: "1mm8w8"
|
|
95
96
|
}]],
|
|
96
97
|
aliases: ["unlock"]
|
|
97
|
-
}),
|
|
98
|
+
}), me = e({
|
|
98
99
|
name: "lock",
|
|
99
100
|
size: 24,
|
|
100
101
|
node: [["rect", {
|
|
@@ -109,7 +110,7 @@ var de = C({
|
|
|
109
110
|
d: "M7 11V7a5 5 0 0 1 10 0v4",
|
|
110
111
|
key: "fwvmzm"
|
|
111
112
|
}]]
|
|
112
|
-
}),
|
|
113
|
+
}), he = e({
|
|
113
114
|
name: "pencil",
|
|
114
115
|
size: 24,
|
|
115
116
|
node: [["path", {
|
|
@@ -122,7 +123,7 @@ var de = C({
|
|
|
122
123
|
});
|
|
123
124
|
//#endregion
|
|
124
125
|
//#region ../canvas-editor/src/editing/layerPanel.ts
|
|
125
|
-
function
|
|
126
|
+
function k(e) {
|
|
126
127
|
switch (e.type) {
|
|
127
128
|
case "TableLayer": return e.template === null ? [{
|
|
128
129
|
key: "rows",
|
|
@@ -148,7 +149,7 @@ function O(e) {
|
|
|
148
149
|
}];
|
|
149
150
|
}
|
|
150
151
|
}
|
|
151
|
-
function
|
|
152
|
+
function A(e) {
|
|
152
153
|
switch (e.type) {
|
|
153
154
|
case "TextLayer":
|
|
154
155
|
case "ImageLayer":
|
|
@@ -156,22 +157,22 @@ function k(e) {
|
|
|
156
157
|
default: return null;
|
|
157
158
|
}
|
|
158
159
|
}
|
|
159
|
-
var
|
|
160
|
-
function
|
|
161
|
-
let t =
|
|
160
|
+
var j = "{{…}}";
|
|
161
|
+
function M(e) {
|
|
162
|
+
let t = A(e);
|
|
162
163
|
if (t === null) return "";
|
|
163
|
-
let n =
|
|
164
|
-
return n.length === 0 ?
|
|
164
|
+
let n = a(t).parts.flatMap((e) => e.kind === "fragment" && e.expr !== "" ? [e.expr] : []);
|
|
165
|
+
return n.length === 0 ? j : n.map((e) => `{{${e}}}`).join(" ");
|
|
165
166
|
}
|
|
166
|
-
function
|
|
167
|
-
let
|
|
168
|
-
for (let { key: n, layers:
|
|
167
|
+
function N(e, t, n, i) {
|
|
168
|
+
let a = [];
|
|
169
|
+
for (let { key: n, layers: r } of k(e)) for (let e = 0; e < r.length; e += 1) {
|
|
169
170
|
let o = n === "rows" ? "row" : n === "cells" ? "cell" : n === "template" ? "templateRow" : "content", s = n === "content" ? [...t, "content"] : n === "template" ? [...t, "template"] : [
|
|
170
171
|
...t,
|
|
171
172
|
n,
|
|
172
173
|
e
|
|
173
174
|
];
|
|
174
|
-
|
|
175
|
+
a.push(N(r[e], s, o, i));
|
|
175
176
|
}
|
|
176
177
|
return {
|
|
177
178
|
type: e.type,
|
|
@@ -179,20 +180,20 @@ function M(e, t, n, r) {
|
|
|
179
180
|
role: n,
|
|
180
181
|
name: e.name,
|
|
181
182
|
visible: e.visible,
|
|
182
|
-
locked:
|
|
183
|
-
expressionPrefix:
|
|
183
|
+
locked: r(t, i),
|
|
184
|
+
expressionPrefix: M(e),
|
|
184
185
|
...e.type === "TableLayer" ? { templated: e.template !== null } : null,
|
|
185
|
-
children:
|
|
186
|
+
children: a
|
|
186
187
|
};
|
|
187
188
|
}
|
|
188
|
-
function
|
|
189
|
+
function P(e, t = []) {
|
|
189
190
|
let n = [];
|
|
190
|
-
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(N(e.layers[r], ["layers", r], "root", t));
|
|
191
192
|
return n;
|
|
192
193
|
}
|
|
193
194
|
//#endregion
|
|
194
195
|
//#region src/layer-panel/addMenu.ts
|
|
195
|
-
var
|
|
196
|
+
var F = [
|
|
196
197
|
{
|
|
197
198
|
kind: "layer",
|
|
198
199
|
type: "TextLayer",
|
|
@@ -222,36 +223,36 @@ var P = [
|
|
|
222
223
|
label: "模板表",
|
|
223
224
|
title: "新增模板表(行模板 + 数据行展开)"
|
|
224
225
|
}
|
|
225
|
-
],
|
|
226
|
+
], I = F.filter((e) => e.kind === "layer");
|
|
226
227
|
//#endregion
|
|
227
228
|
//#region src/layer-panel/useLayerPanel.ts
|
|
228
|
-
function
|
|
229
|
-
let
|
|
230
|
-
|
|
229
|
+
function L(e) {
|
|
230
|
+
let t = x(e.store.doc), n = x(e.store.ui.selection), r = x(e.store.ui.hovered), i = x(e.store.ui.renaming), a = x(e.store.ui.lockedPaths), o = e.subscribe((o) => {
|
|
231
|
+
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);
|
|
231
232
|
});
|
|
232
|
-
return
|
|
233
|
-
outline:
|
|
234
|
-
selection:
|
|
235
|
-
hovered:
|
|
236
|
-
renaming:
|
|
233
|
+
return v(o, !0), {
|
|
234
|
+
outline: d(() => t.value ? P(t.value, a.value) : []),
|
|
235
|
+
selection: d(() => n.value),
|
|
236
|
+
hovered: d(() => r.value),
|
|
237
|
+
renaming: d(() => i.value)
|
|
237
238
|
};
|
|
238
239
|
}
|
|
239
|
-
function
|
|
240
|
+
function R(e, t) {
|
|
240
241
|
return t > 0 && e < t / 2;
|
|
241
242
|
}
|
|
242
243
|
//#endregion
|
|
243
244
|
//#region src/layer-panel/LayerPanel.vue?vue&type=script&setup=true&lang.ts
|
|
244
|
-
var
|
|
245
|
+
var ge = { 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)]" }, _e = { 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" }, ve = { class: "flex items-center gap-1" }, ye = [
|
|
245
246
|
"aria-expanded",
|
|
246
247
|
"onClick",
|
|
247
248
|
"onKeydown"
|
|
248
|
-
],
|
|
249
|
+
], be = ["onKeydown"], xe = {
|
|
249
250
|
key: 0,
|
|
250
251
|
class: "px-2 pb-1 text-[11px] text-cn-danger"
|
|
251
|
-
},
|
|
252
|
+
}, Se = { class: "flex gap-1 p-1" }, Ce = ["onClick"], we = ["onClick"], Te = {
|
|
252
253
|
key: 0,
|
|
253
254
|
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"
|
|
254
|
-
},
|
|
255
|
+
}, Ee = [
|
|
255
256
|
"data-key",
|
|
256
257
|
"draggable",
|
|
257
258
|
"onClick",
|
|
@@ -259,36 +260,36 @@ var _e = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
259
260
|
"onDragstart",
|
|
260
261
|
"onDragover",
|
|
261
262
|
"onDrop"
|
|
262
|
-
],
|
|
263
|
+
], De = ["onDragstart"], Oe = ["title"], ke = ["onDblclick"], Ae = [
|
|
263
264
|
"title",
|
|
264
265
|
"aria-pressed",
|
|
265
266
|
"onClick"
|
|
266
|
-
],
|
|
267
|
+
], je = [
|
|
267
268
|
"title",
|
|
268
269
|
"aria-pressed",
|
|
269
270
|
"onClick"
|
|
270
|
-
],
|
|
271
|
+
], Me = ["onClick"], Ne = [
|
|
271
272
|
"disabled",
|
|
272
273
|
"title",
|
|
273
274
|
"onClick"
|
|
274
|
-
],
|
|
275
|
+
], Pe = ["onClick"], Fe = ["onClick"], Ie = [
|
|
275
276
|
"disabled",
|
|
276
277
|
"title",
|
|
277
278
|
"onClick"
|
|
278
|
-
],
|
|
279
|
+
], z = /* @__PURE__ */ g({
|
|
279
280
|
__name: "LayerPanel",
|
|
280
281
|
props: { editor: {} },
|
|
281
282
|
setup(e) {
|
|
282
|
-
let
|
|
283
|
-
function
|
|
284
|
-
|
|
283
|
+
let r = e, a = `解锁图层(${l("toggleLayerLock", s())})`, g = `图层已锁定(${l("toggleLayerLock", s())} 解锁后可删除)`, v = L(r.editor), x = b(!1), k = b(""), A = b(!1);
|
|
284
|
+
function j() {
|
|
285
|
+
x.value = !1, k.value = "", A.value = !1;
|
|
285
286
|
}
|
|
286
|
-
let
|
|
287
|
+
let M = d(() => x.value ? [] : F.map((e) => e.kind === "layer" ? {
|
|
287
288
|
label: e.label,
|
|
288
289
|
title: e.title,
|
|
289
290
|
dataAttrs: { "data-add-layer": e.type },
|
|
290
291
|
run: () => {
|
|
291
|
-
|
|
292
|
+
r.editor.armLayerCreate(e.type), ee().show(c);
|
|
292
293
|
}
|
|
293
294
|
} : {
|
|
294
295
|
label: e.label,
|
|
@@ -296,38 +297,38 @@ var _e = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
296
297
|
dataAttrs: { "data-add-layer": "template-table" },
|
|
297
298
|
keepsOpen: !0,
|
|
298
299
|
run: () => {
|
|
299
|
-
|
|
300
|
+
x.value = !0;
|
|
300
301
|
}
|
|
301
302
|
}));
|
|
302
|
-
function
|
|
303
|
-
let t =
|
|
303
|
+
function N(e) {
|
|
304
|
+
let t = k.value.trim();
|
|
304
305
|
if (t === "") {
|
|
305
|
-
|
|
306
|
+
A.value = !0;
|
|
306
307
|
return;
|
|
307
308
|
}
|
|
308
|
-
|
|
309
|
+
r.editor.addTemplateTable(t), j(), e();
|
|
309
310
|
}
|
|
310
|
-
function
|
|
311
|
-
|
|
311
|
+
function P(e) {
|
|
312
|
+
j(), e();
|
|
312
313
|
}
|
|
313
|
-
function
|
|
314
|
-
|
|
314
|
+
function I() {
|
|
315
|
+
j();
|
|
315
316
|
}
|
|
316
|
-
let
|
|
317
|
-
target:
|
|
318
|
-
enabled: () =>
|
|
319
|
-
resolve: (e) =>
|
|
320
|
-
popupEl:
|
|
317
|
+
let z = ie(r.editor), Le = d(() => te(z.value)), B = b(null), V = b(null), { popup: H, accept: Re } = ne({
|
|
318
|
+
target: B,
|
|
319
|
+
enabled: () => x.value,
|
|
320
|
+
resolve: (e) => Le.value?.(e) ?? null,
|
|
321
|
+
popupEl: d(() => V.value?.rootEl ?? null)
|
|
321
322
|
});
|
|
322
|
-
function
|
|
323
|
+
function ze(e, t) {
|
|
323
324
|
if (e.key === "Enter") {
|
|
324
|
-
if (
|
|
325
|
-
e.preventDefault(),
|
|
325
|
+
if (H.open && H.items.length > 0) return;
|
|
326
|
+
e.preventDefault(), N(t);
|
|
326
327
|
return;
|
|
327
328
|
}
|
|
328
|
-
e.key === "Escape" &&
|
|
329
|
+
e.key === "Escape" && H.open && e.stopPropagation();
|
|
329
330
|
}
|
|
330
|
-
function
|
|
331
|
+
function Be(e, t) {
|
|
331
332
|
switch (e.role) {
|
|
332
333
|
case "root": return e.name === "" ? `${e.type} ${t}` : e.name;
|
|
333
334
|
case "row": return `行 ${Number(e.path[e.path.length - 1]) + 1}`;
|
|
@@ -336,62 +337,62 @@ var _e = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
336
337
|
case "content": return e.type;
|
|
337
338
|
}
|
|
338
339
|
}
|
|
339
|
-
let
|
|
340
|
+
let U = d(() => {
|
|
340
341
|
let e = [], t = /* @__PURE__ */ new Map();
|
|
341
|
-
function
|
|
342
|
-
let
|
|
343
|
-
|
|
344
|
-
key:
|
|
345
|
-
node:
|
|
346
|
-
indentLevel:
|
|
347
|
-
label:
|
|
348
|
-
indexInGroup:
|
|
349
|
-
tablePath:
|
|
350
|
-
inTemplate:
|
|
351
|
-
draggable:
|
|
352
|
-
}),
|
|
342
|
+
function r(i, a, o, s) {
|
|
343
|
+
let c = i.role === "row" ? i.path.slice(0, -2) : i.role === "templateRow" ? i.path.slice(0, -1) : s, l = 0;
|
|
344
|
+
i.role === "root" && (l = (t.get(i.type) ?? 0) + 1, t.set(i.type, l)), e.push({
|
|
345
|
+
key: i.path.join("."),
|
|
346
|
+
node: i,
|
|
347
|
+
indentLevel: a,
|
|
348
|
+
label: Be(i, l),
|
|
349
|
+
indexInGroup: o,
|
|
350
|
+
tablePath: c,
|
|
351
|
+
inTemplate: n(i.path),
|
|
352
|
+
draggable: i.role === "root" || i.role === "row" || i.role === "cell"
|
|
353
|
+
}), i.children.forEach((e, t) => r(e, a + 1, t, c));
|
|
353
354
|
}
|
|
354
|
-
return
|
|
355
|
-
}),
|
|
356
|
-
function
|
|
357
|
-
|
|
355
|
+
return v.outline.value.forEach((e, t) => r(e, 0, t, null)), e;
|
|
356
|
+
}), Ve = d(() => U.value.length > 0);
|
|
357
|
+
function He(e) {
|
|
358
|
+
r.editor.setSelection(e.node.path);
|
|
359
|
+
}
|
|
360
|
+
function W(e) {
|
|
361
|
+
r.editor.setHovered(e === null ? null : e.node.path);
|
|
358
362
|
}
|
|
359
|
-
function
|
|
360
|
-
|
|
363
|
+
function Ue(e) {
|
|
364
|
+
r.editor.addTableRow(e.node.path);
|
|
361
365
|
}
|
|
362
366
|
function We(e) {
|
|
363
|
-
|
|
367
|
+
r.editor.addTableCell(e.node.path);
|
|
364
368
|
}
|
|
365
369
|
function Ge(e) {
|
|
366
|
-
|
|
370
|
+
r.editor.addTemplateCell(e.node.path.slice(0, -1));
|
|
367
371
|
}
|
|
368
372
|
function Ke(e) {
|
|
369
|
-
|
|
373
|
+
r.editor.deleteLayer(e.node.path);
|
|
370
374
|
}
|
|
371
375
|
function qe(e) {
|
|
372
|
-
|
|
376
|
+
r.editor.toggleLayerVisibility(e.node.path);
|
|
373
377
|
}
|
|
374
378
|
function Je(e) {
|
|
375
|
-
|
|
379
|
+
r.editor.toggleLayerLock(e.node.path);
|
|
376
380
|
}
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
if (!t) return !1;
|
|
384
|
-
if (t.kind === "root") return e.node.role === "root";
|
|
385
|
-
if (t.kind === "row") return e.node.role === "row";
|
|
381
|
+
let G = b(null), K = b(null);
|
|
382
|
+
function q(e) {
|
|
383
|
+
let r = G.value;
|
|
384
|
+
if (!r) return !1;
|
|
385
|
+
if (r.kind === "root") return e.node.role === "root";
|
|
386
|
+
if (r.kind === "row") return e.node.role === "row";
|
|
386
387
|
if (e.node.role !== "cell") return !1;
|
|
387
|
-
let
|
|
388
|
-
return
|
|
388
|
+
let i = n(r.cellPath);
|
|
389
|
+
return i === e.inTemplate ? !i || t(r.cellPath.slice(0, -2), e.node.path.slice(0, -2)) : !1;
|
|
389
390
|
}
|
|
390
|
-
function
|
|
391
|
+
function J(e) {
|
|
391
392
|
return e.node.role === "root";
|
|
392
393
|
}
|
|
393
|
-
function
|
|
394
|
-
e.draggable && (
|
|
394
|
+
function Y(e, t) {
|
|
395
|
+
e.draggable && (G.value = e.node.role === "root" ? {
|
|
395
396
|
kind: "root",
|
|
396
397
|
from: e.indexInGroup
|
|
397
398
|
} : e.node.role === "row" ? {
|
|
@@ -405,74 +406,74 @@ var _e = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
405
406
|
cellPath: e.node.path
|
|
406
407
|
}, t.dataTransfer?.setData("text/plain", e.key), t.dataTransfer && (t.dataTransfer.effectAllowed = "move"));
|
|
407
408
|
}
|
|
408
|
-
function
|
|
409
|
-
|
|
409
|
+
function Ye(e, t) {
|
|
410
|
+
J(e) || Y(e, t);
|
|
410
411
|
}
|
|
411
|
-
function
|
|
412
|
-
if (!
|
|
412
|
+
function Xe(e) {
|
|
413
|
+
if (!J(e)) return e.draggable || void 0;
|
|
413
414
|
}
|
|
414
|
-
function
|
|
415
|
-
if (!
|
|
416
|
-
let n = t.currentTarget.getBoundingClientRect(), r =
|
|
417
|
-
t.preventDefault(),
|
|
415
|
+
function Ze(e, t) {
|
|
416
|
+
if (!q(e)) return;
|
|
417
|
+
let n = t.currentTarget.getBoundingClientRect(), r = R(t.clientY - n.top, n.height);
|
|
418
|
+
t.preventDefault(), K.value = {
|
|
418
419
|
key: e.key,
|
|
419
420
|
edge: r ? "before" : "after"
|
|
420
421
|
};
|
|
421
422
|
}
|
|
422
|
-
function
|
|
423
|
-
if (!
|
|
424
|
-
let n =
|
|
425
|
-
if (!
|
|
423
|
+
function Qe(e, t) {
|
|
424
|
+
if (!q(e)) return;
|
|
425
|
+
let n = K.value, i = G.value;
|
|
426
|
+
if (!i || !n || n.key !== e.key) return;
|
|
426
427
|
t.preventDefault();
|
|
427
|
-
let
|
|
428
|
-
|
|
428
|
+
let a = n.edge === "before" ? e.indexInGroup : e.indexInGroup + 1;
|
|
429
|
+
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;
|
|
429
430
|
}
|
|
430
|
-
function
|
|
431
|
-
|
|
431
|
+
function $e() {
|
|
432
|
+
G.value = null, K.value = null;
|
|
432
433
|
}
|
|
433
|
-
function
|
|
434
|
-
return
|
|
434
|
+
function X(e) {
|
|
435
|
+
return t(v.selection.value, e.node.path);
|
|
435
436
|
}
|
|
437
|
+
function et(e) {
|
|
438
|
+
return t(v.hovered.value, e.node.path);
|
|
439
|
+
}
|
|
440
|
+
let Z = b(""), Q = null, $ = null;
|
|
436
441
|
function tt(e) {
|
|
437
|
-
|
|
442
|
+
$ = e instanceof HTMLInputElement ? e : null;
|
|
438
443
|
}
|
|
439
|
-
let X = S(""), Z = null, Q = null;
|
|
440
444
|
function nt(e) {
|
|
441
|
-
|
|
445
|
+
return t(v.renaming.value, e.node.path);
|
|
442
446
|
}
|
|
443
447
|
function rt(e) {
|
|
444
|
-
|
|
445
|
-
}
|
|
446
|
-
function $(e) {
|
|
447
|
-
q(e) && a.editor.beginRename(e.node.path);
|
|
448
|
+
J(e) && r.editor.beginRename(e.node.path);
|
|
448
449
|
}
|
|
449
450
|
function it() {
|
|
450
|
-
let e =
|
|
451
|
-
if (
|
|
452
|
-
|
|
451
|
+
let e = Z.value.trim();
|
|
452
|
+
if (Q !== null && e === Q.trim()) {
|
|
453
|
+
r.editor.cancelRename();
|
|
453
454
|
return;
|
|
454
455
|
}
|
|
455
|
-
|
|
456
|
+
r.editor.commitRename(e);
|
|
456
457
|
}
|
|
457
458
|
function at() {
|
|
458
|
-
|
|
459
|
+
r.editor.cancelRename();
|
|
459
460
|
}
|
|
460
|
-
return
|
|
461
|
+
return le(v.renaming, async (e) => {
|
|
461
462
|
if (e === null) {
|
|
462
|
-
|
|
463
|
+
Q = null;
|
|
463
464
|
return;
|
|
464
465
|
}
|
|
465
|
-
let
|
|
466
|
-
|
|
467
|
-
let
|
|
468
|
-
|
|
469
|
-
}), (e,
|
|
470
|
-
|
|
466
|
+
let n = U.value.find((n) => t(n.node.path, e));
|
|
467
|
+
Z.value = n?.label ?? "", Q = Z.value, await oe();
|
|
468
|
+
let r = $;
|
|
469
|
+
r && (r.focus({ preventScroll: !0 }), r.select());
|
|
470
|
+
}), (e, t) => (y(), p("aside", ge, [
|
|
471
|
+
m("header", _e, [t[9] ||= m("span", { class: "text-[12px] font-medium tracking-wide text-cn-fg/90" }, "图层", -1), m("div", ve, [h(re, {
|
|
471
472
|
label: "新增图层",
|
|
472
|
-
items:
|
|
473
|
-
onClosed:
|
|
473
|
+
items: M.value,
|
|
474
|
+
onClosed: I
|
|
474
475
|
}, {
|
|
475
|
-
trigger:
|
|
476
|
+
trigger: T(({ open: e, toggle: t, triggerRef: n, onKeydown: r }) => [m("button", {
|
|
476
477
|
ref: n,
|
|
477
478
|
type: "button",
|
|
478
479
|
"data-add-menu": "",
|
|
@@ -482,171 +483,171 @@ var _e = { class: "cn-props flex w-[232px] shrink-0 flex-col overflow-y-auto rou
|
|
|
482
483
|
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",
|
|
483
484
|
onClick: t,
|
|
484
485
|
onKeydown: r
|
|
485
|
-
}, " + ", 40,
|
|
486
|
-
body:
|
|
487
|
-
|
|
488
|
-
|
|
486
|
+
}, " + ", 40, ye)]),
|
|
487
|
+
body: T(({ closeMenu: e }) => [x.value ? (y(), p(u, { key: 0 }, [
|
|
488
|
+
t[8] ||= m("p", { class: "px-2 pt-1 text-[11px] leading-4 text-cn-muted" }, "模板行按数据行路径展开成表", -1),
|
|
489
|
+
E(m("input", {
|
|
489
490
|
ref_key: "rowsPathInputEl",
|
|
490
|
-
ref:
|
|
491
|
-
"onUpdate:modelValue":
|
|
491
|
+
ref: B,
|
|
492
|
+
"onUpdate:modelValue": t[0] ||= (e) => k.value = e,
|
|
492
493
|
"data-template-rows-path": "",
|
|
493
494
|
type: "text",
|
|
494
495
|
placeholder: "如 order.items",
|
|
495
|
-
class:
|
|
496
|
-
onKeydown: (t) =>
|
|
497
|
-
}, null, 42,
|
|
498
|
-
|
|
499
|
-
|
|
496
|
+
class: _(["mx-1 my-1 w-[calc(100%-8px)] rounded border bg-cn-field px-2 py-1 text-[12px] text-cn-fg outline-none focus:border-cn-accent/60", A.value ? "border-cn-danger" : "border-cn-field-line"]),
|
|
497
|
+
onKeydown: (t) => ze(t, e)
|
|
498
|
+
}, null, 42, be), [[w, k.value]]),
|
|
499
|
+
A.value ? (y(), p("p", xe, "rowsPath 必填")) : f("", !0),
|
|
500
|
+
m("div", Se, [m("button", {
|
|
500
501
|
type: "button",
|
|
501
502
|
"data-template-confirm": "",
|
|
502
503
|
class: "flex-1 rounded bg-cn-accent/20 px-2 py-1 text-[12px] text-cn-accent hover:bg-cn-accent/30",
|
|
503
|
-
onClick: (t) =>
|
|
504
|
-
}, " 创建 ", 8,
|
|
504
|
+
onClick: (t) => N(e)
|
|
505
|
+
}, " 创建 ", 8, Ce), m("button", {
|
|
505
506
|
type: "button",
|
|
506
507
|
class: "flex-1 rounded px-2 py-1 text-[12px] text-cn-muted hover:text-cn-fg",
|
|
507
|
-
onClick: (t) =>
|
|
508
|
-
}, " 取消 ", 8,
|
|
508
|
+
onClick: (t) => P(e)
|
|
509
|
+
}, " 取消 ", 8, we)])
|
|
509
510
|
], 64)) : f("", !0)]),
|
|
510
511
|
_: 1
|
|
511
|
-
}, 8, ["items"]),
|
|
512
|
+
}, 8, ["items"]), x.value ? (y(), ae(o, {
|
|
512
513
|
key: 0,
|
|
513
514
|
ref_key: "pathPopupRef",
|
|
514
|
-
ref:
|
|
515
|
-
state:
|
|
516
|
-
onSelect:
|
|
515
|
+
ref: V,
|
|
516
|
+
state: C(H),
|
|
517
|
+
onSelect: C(Re)
|
|
517
518
|
}, null, 8, ["state", "onSelect"])) : f("", !0)])]),
|
|
518
|
-
|
|
519
|
-
|
|
519
|
+
Ve.value ? f("", !0) : (y(), p("p", Te, " 画布还没有图层,用上方按钮新增 ")),
|
|
520
|
+
m("ul", {
|
|
520
521
|
class: "cn-layers__tree flex flex-col gap-0.5 px-1.5 py-1",
|
|
521
|
-
onDragend:
|
|
522
|
-
}, [(
|
|
522
|
+
onDragend: $e
|
|
523
|
+
}, [(y(!0), p(u, null, ce(U.value, (e) => (y(), p("li", {
|
|
523
524
|
key: e.key,
|
|
524
525
|
"data-key": e.key,
|
|
525
|
-
draggable:
|
|
526
|
-
class:
|
|
527
|
-
"cn-layers__row--selected":
|
|
528
|
-
"cn-layers__row--hovered":
|
|
529
|
-
"cn-layers__row--hidden":
|
|
526
|
+
draggable: Xe(e),
|
|
527
|
+
class: _(["cn-layers__row group flex cursor-default select-none items-center gap-1 py-1 pr-1 text-[12px]", {
|
|
528
|
+
"cn-layers__row--selected": X(e),
|
|
529
|
+
"cn-layers__row--hovered": et(e) && !X(e),
|
|
530
|
+
"cn-layers__row--hidden": J(e) && !e.node.visible,
|
|
530
531
|
"cn-layers__row--template": e.inTemplate,
|
|
531
|
-
"cursor-grab": e.draggable && !
|
|
532
|
-
"cn-layers__row--drop-before":
|
|
533
|
-
"cn-layers__row--drop-after":
|
|
532
|
+
"cursor-grab": e.draggable && !J(e),
|
|
533
|
+
"cn-layers__row--drop-before": K.value?.key === e.key && K.value?.edge === "before",
|
|
534
|
+
"cn-layers__row--drop-after": K.value?.key === e.key && K.value?.edge === "after"
|
|
534
535
|
}]),
|
|
535
|
-
style:
|
|
536
|
-
onClick: (t) =>
|
|
537
|
-
onMouseenter: (t) =>
|
|
538
|
-
onMouseleave:
|
|
539
|
-
onDragstart: (t) =>
|
|
540
|
-
onDragover: (t) =>
|
|
541
|
-
onDrop: (t) =>
|
|
536
|
+
style: se({ paddingLeft: `${4 + e.indentLevel * 14}px` }),
|
|
537
|
+
onClick: (t) => He(e),
|
|
538
|
+
onMouseenter: (t) => W(e),
|
|
539
|
+
onMouseleave: t[7] ||= (e) => W(null),
|
|
540
|
+
onDragstart: (t) => Ye(e, t),
|
|
541
|
+
onDragover: (t) => Ze(e, t),
|
|
542
|
+
onDrop: (t) => Qe(e, t)
|
|
542
543
|
}, [
|
|
543
|
-
|
|
544
|
+
J(e) ? (y(), p("span", {
|
|
544
545
|
key: 0,
|
|
545
546
|
"data-drag-handle": "",
|
|
546
547
|
draggable: "true",
|
|
547
548
|
title: "拖动排序",
|
|
548
549
|
class: "cn-layers__handle shrink-0",
|
|
549
|
-
onDragstart: (t) =>
|
|
550
|
-
}, [
|
|
551
|
-
icon:
|
|
550
|
+
onDragstart: (t) => Y(e, t)
|
|
551
|
+
}, [h(i, {
|
|
552
|
+
icon: C(fe),
|
|
552
553
|
size: 12,
|
|
553
554
|
"stroke-width": 2.5
|
|
554
|
-
}, null, 8, ["icon"])], 40,
|
|
555
|
-
e.node.expressionPrefix === "" ? f("", !0) : (
|
|
555
|
+
}, null, 8, ["icon"])], 40, De)) : f("", !0),
|
|
556
|
+
e.node.expressionPrefix === "" ? f("", !0) : (y(), p("span", {
|
|
556
557
|
key: 1,
|
|
557
558
|
class: "cn-layers__prefix",
|
|
558
559
|
title: e.node.expressionPrefix
|
|
559
|
-
},
|
|
560
|
-
|
|
560
|
+
}, S(e.node.expressionPrefix), 9, Oe)),
|
|
561
|
+
nt(e) ? E((y(), p("input", {
|
|
561
562
|
key: 2,
|
|
562
563
|
ref_for: !0,
|
|
563
|
-
ref:
|
|
564
|
-
"onUpdate:modelValue":
|
|
564
|
+
ref: tt,
|
|
565
|
+
"onUpdate:modelValue": t[1] ||= (e) => Z.value = e,
|
|
565
566
|
"data-rename-input": "",
|
|
566
567
|
"aria-label": "图层重命名",
|
|
567
568
|
class: "cn-layers__rename-input min-w-0 flex-1",
|
|
568
|
-
onClick:
|
|
569
|
-
onDblclick:
|
|
570
|
-
onKeydown: [
|
|
571
|
-
onBlur:
|
|
572
|
-
}, null, 544)), [[
|
|
569
|
+
onClick: t[2] ||= O(() => {}, ["stop"]),
|
|
570
|
+
onDblclick: t[3] ||= O(() => {}, ["stop"]),
|
|
571
|
+
onKeydown: [t[4] ||= D(O((e) => it(), ["prevent"]), ["enter"]), t[5] ||= D(O((e) => at(), ["prevent"]), ["esc"])],
|
|
572
|
+
onBlur: t[6] ||= (e) => it()
|
|
573
|
+
}, null, 544)), [[w, Z.value]]) : (y(), p("span", {
|
|
573
574
|
key: 3,
|
|
574
575
|
class: "cn-layers__label min-w-0 flex-1 truncate font-mono text-[11px] leading-4",
|
|
575
|
-
onDblclick: (t) =>
|
|
576
|
-
},
|
|
577
|
-
|
|
576
|
+
onDblclick: (t) => rt(e)
|
|
577
|
+
}, S(e.label), 41, ke)),
|
|
578
|
+
J(e) ? (y(), p("button", {
|
|
578
579
|
key: 4,
|
|
579
580
|
type: "button",
|
|
580
581
|
"data-visibility": "",
|
|
581
|
-
class:
|
|
582
|
+
class: _(["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"]),
|
|
582
583
|
title: e.node.visible ? "隐藏图层(最终输出不含该层)" : "显示图层",
|
|
583
584
|
"aria-pressed": !e.node.visible,
|
|
584
|
-
onClick:
|
|
585
|
-
}, [
|
|
586
|
-
icon: e.node.visible ?
|
|
585
|
+
onClick: O((t) => qe(e), ["stop"])
|
|
586
|
+
}, [h(i, {
|
|
587
|
+
icon: e.node.visible ? C(de) : C(ue),
|
|
587
588
|
size: 11,
|
|
588
589
|
"stroke-width": 2
|
|
589
|
-
}, null, 8, ["icon"])], 10,
|
|
590
|
-
|
|
590
|
+
}, null, 8, ["icon"])], 10, Ae)) : f("", !0),
|
|
591
|
+
J(e) ? (y(), p("button", {
|
|
591
592
|
key: 5,
|
|
592
593
|
type: "button",
|
|
593
594
|
"data-lock": "",
|
|
594
|
-
class:
|
|
595
|
-
title: e.node.locked ?
|
|
595
|
+
class: _(["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"]),
|
|
596
|
+
title: e.node.locked ? a : "锁定图层(画布不可点选/拖动/删除,渲染照常)",
|
|
596
597
|
"aria-pressed": e.node.locked,
|
|
597
|
-
onClick:
|
|
598
|
-
}, [
|
|
599
|
-
icon: e.node.locked ?
|
|
598
|
+
onClick: O((t) => Je(e), ["stop"])
|
|
599
|
+
}, [h(i, {
|
|
600
|
+
icon: e.node.locked ? C(me) : C(pe),
|
|
600
601
|
size: 11,
|
|
601
602
|
"stroke-width": 2
|
|
602
|
-
}, null, 8, ["icon"])], 10,
|
|
603
|
-
|
|
603
|
+
}, null, 8, ["icon"])], 10, je)) : f("", !0),
|
|
604
|
+
J(e) ? (y(), p("button", {
|
|
604
605
|
key: 6,
|
|
605
606
|
type: "button",
|
|
606
607
|
"data-rename": "",
|
|
607
608
|
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",
|
|
608
609
|
title: "重命名(双击名称或 F2)",
|
|
609
|
-
onClick:
|
|
610
|
-
}, [
|
|
611
|
-
icon:
|
|
610
|
+
onClick: O((t) => rt(e), ["stop"])
|
|
611
|
+
}, [h(i, {
|
|
612
|
+
icon: C(he),
|
|
612
613
|
size: 11,
|
|
613
614
|
"stroke-width": 2
|
|
614
|
-
}, null, 8, ["icon"])], 8,
|
|
615
|
-
e.node.role === "root" && e.node.type === "TableLayer" ? (
|
|
615
|
+
}, null, 8, ["icon"])], 8, Me)) : f("", !0),
|
|
616
|
+
e.node.role === "root" && e.node.type === "TableLayer" ? (y(), p("button", {
|
|
616
617
|
key: 7,
|
|
617
618
|
type: "button",
|
|
618
619
|
"data-add-row": "",
|
|
619
620
|
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",
|
|
620
621
|
disabled: e.node.templated === !0,
|
|
621
622
|
title: e.node.templated === !0 ? "模板态不可加行——行由数据展开" : "加行(缺省行 + 缺省格与文本,行宽=表宽)",
|
|
622
|
-
onClick:
|
|
623
|
-
}, " +行 ", 8,
|
|
624
|
-
e.node.role === "row" ? (
|
|
623
|
+
onClick: O((t) => Ue(e), ["stop"])
|
|
624
|
+
}, " +行 ", 8, Ne)) : f("", !0),
|
|
625
|
+
e.node.role === "row" ? (y(), p("button", {
|
|
625
626
|
key: 8,
|
|
626
627
|
type: "button",
|
|
627
628
|
"data-add-cell": "",
|
|
628
629
|
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",
|
|
629
630
|
title: "加格(缺省格 + 文本内容,行高取最高格)",
|
|
630
|
-
onClick:
|
|
631
|
-
}, " +格 ", 8,
|
|
632
|
-
e.node.role === "templateRow" ? (
|
|
631
|
+
onClick: O((t) => We(e), ["stop"])
|
|
632
|
+
}, " +格 ", 8, Pe)) : f("", !0),
|
|
633
|
+
e.node.role === "templateRow" ? (y(), p("button", {
|
|
633
634
|
key: 9,
|
|
634
635
|
type: "button",
|
|
635
636
|
"data-add-template-cell": "",
|
|
636
637
|
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",
|
|
637
638
|
title: "加格(缺省格 + 文本内容,零高度耦合——行高由数据展开定稿)",
|
|
638
|
-
onClick:
|
|
639
|
-
}, " +格 ", 8,
|
|
640
|
-
|
|
639
|
+
onClick: O((t) => Ge(e), ["stop"])
|
|
640
|
+
}, " +格 ", 8, Fe)) : f("", !0),
|
|
641
|
+
m("button", {
|
|
641
642
|
type: "button",
|
|
642
643
|
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",
|
|
643
644
|
disabled: e.node.role === "templateRow" || e.node.locked,
|
|
644
|
-
title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ?
|
|
645
|
-
onClick:
|
|
646
|
-
}, " ✕ ", 8,
|
|
647
|
-
], 46,
|
|
645
|
+
title: e.node.role === "templateRow" ? "行模板由表持有——转换回普通表请用 V2 转换入口" : e.node.locked ? g : "删除(含子层)",
|
|
646
|
+
onClick: O((t) => Ke(e), ["stop"])
|
|
647
|
+
}, " ✕ ", 8, Ie)
|
|
648
|
+
], 46, Ee))), 128))], 32)
|
|
648
649
|
]));
|
|
649
650
|
}
|
|
650
651
|
});
|
|
651
652
|
//#endregion
|
|
652
|
-
export {
|
|
653
|
+
export { F as a, I as i, R as n, L as r, z as t };
|