@blueking/flow-canvas 0.0.5 → 0.0.7
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/index.cjs.js +1 -1
- package/dist/index.d.ts +11 -0
- package/dist/index.esm.js +998 -969
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { ref as q, computed as j, onScopeDispose as Je, defineComponent as
|
|
2
|
-
import { Graph as
|
|
3
|
-
import { register as
|
|
4
|
-
import { Selection as
|
|
5
|
-
import { MiniMap as
|
|
6
|
-
function
|
|
1
|
+
import { ref as q, computed as j, onScopeDispose as Je, defineComponent as ge, h as Re, watch as he, onBeforeUnmount as Me, createElementBlock as T, openBlock as D, normalizeStyle as be, createElementVNode as F, createVNode as et, createCommentVNode as Z, normalizeClass as se, Transition as tt, withCtx as $e, withModifiers as at, createTextVNode as Ge, renderSlot as Ie, onMounted as ot, createBlock as we, Fragment as pe, renderList as Ee, toDisplayString as ue, unref as le, reactive as lt, resolveDynamicComponent as dt, Teleport as ct, nextTick as Le, inject as ut, createApp as ft } from "vue";
|
|
2
|
+
import { Graph as gt } from "@antv/x6";
|
|
3
|
+
import { register as pt } from "@antv/x6-vue-shape";
|
|
4
|
+
import { Selection as ht } from "@antv/x6-plugin-selection";
|
|
5
|
+
import { MiniMap as vt } from "@antv/x6-plugin-minimap";
|
|
6
|
+
function pn() {
|
|
7
7
|
return {
|
|
8
8
|
version: "1.0",
|
|
9
9
|
nodes: {},
|
|
10
10
|
edges: {}
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
class
|
|
13
|
+
class fe extends Error {
|
|
14
14
|
constructor(e) {
|
|
15
15
|
super(e), this.name = "CanvasConstraintError";
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
class
|
|
18
|
+
class yt extends Error {
|
|
19
19
|
constructor(e) {
|
|
20
20
|
super(e), this.name = "CanvasSchemaError";
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function _e(s, e, t) {
|
|
24
24
|
if (e.length === 0) {
|
|
25
25
|
if (t === void 0) return;
|
|
26
26
|
if (typeof t != "object" || t === null || Array.isArray(t))
|
|
@@ -36,69 +36,69 @@ function Ne(s, e, t) {
|
|
|
36
36
|
const i = e[e.length - 1];
|
|
37
37
|
return t === void 0 ? delete n[i] : n[i] = t, o;
|
|
38
38
|
}
|
|
39
|
-
function
|
|
39
|
+
function nt(s, e) {
|
|
40
40
|
switch (e.type) {
|
|
41
41
|
case "node.add":
|
|
42
|
-
return
|
|
42
|
+
return mt(s, e.node);
|
|
43
43
|
case "node.move":
|
|
44
|
-
return
|
|
44
|
+
return bt(s, e.nodeId, e.position);
|
|
45
45
|
case "node.remove":
|
|
46
46
|
return wt(s, e.nodeId);
|
|
47
47
|
case "node.update":
|
|
48
|
-
return
|
|
48
|
+
return Et(s, e.nodeId, e.patch);
|
|
49
49
|
case "node.set-payload":
|
|
50
50
|
return xt(s, e.nodeId, e.path, e.value);
|
|
51
51
|
case "node.set-extensions":
|
|
52
|
-
return
|
|
52
|
+
return It(s, e.nodeId, e.path, e.value);
|
|
53
53
|
case "edge.add":
|
|
54
|
-
return
|
|
54
|
+
return Ct(s, e.edge);
|
|
55
55
|
case "edge.remove":
|
|
56
|
-
return
|
|
56
|
+
return kt(s, e.edgeId);
|
|
57
57
|
case "edge.reconnect":
|
|
58
|
-
return
|
|
58
|
+
return St(s, e.edgeId, e.source, e.target);
|
|
59
59
|
case "edge.update":
|
|
60
|
-
return
|
|
60
|
+
return Mt(s, e.edgeId, e.patch);
|
|
61
61
|
case "edge.set-payload":
|
|
62
|
-
return
|
|
62
|
+
return _t(s, e.edgeId, e.path, e.value);
|
|
63
63
|
case "edge.label.update":
|
|
64
64
|
return Nt(s, e.edgeId, e.labelId, e.patch);
|
|
65
65
|
case "model.set-meta":
|
|
66
|
-
return
|
|
66
|
+
return Dt(s, e.path, e.value);
|
|
67
67
|
default:
|
|
68
|
-
throw new
|
|
68
|
+
throw new fe(`Unknown command type: ${e.type}`);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
function Ce(s, e) {
|
|
72
72
|
const t = s.nodes[e];
|
|
73
|
-
if (!t) throw new
|
|
73
|
+
if (!t) throw new fe(`Node "${e}" does not exist`);
|
|
74
74
|
return t;
|
|
75
75
|
}
|
|
76
76
|
function ke(s, e) {
|
|
77
77
|
const t = s.edges[e];
|
|
78
|
-
if (!t) throw new
|
|
78
|
+
if (!t) throw new fe(`Edge "${e}" does not exist`);
|
|
79
79
|
return t;
|
|
80
80
|
}
|
|
81
81
|
function xe(s, e, t) {
|
|
82
82
|
const o = s.nodes[e.nodeId];
|
|
83
83
|
if (!o)
|
|
84
|
-
throw new
|
|
84
|
+
throw new fe(`${t} node "${e.nodeId}" does not exist`);
|
|
85
85
|
if (e.portId && o.ports && !o.ports.some((i) => i.id === e.portId))
|
|
86
|
-
throw new
|
|
86
|
+
throw new fe(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
|
|
87
87
|
}
|
|
88
|
-
function
|
|
88
|
+
function Ne(s, e, t) {
|
|
89
89
|
return { ...s, nodes: { ...s.nodes, [e]: t } };
|
|
90
90
|
}
|
|
91
91
|
function De(s, e, t) {
|
|
92
92
|
return { ...s, edges: { ...s.edges, [e]: t } };
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function mt(s, e) {
|
|
95
95
|
if (s.nodes[e.id])
|
|
96
|
-
throw new
|
|
96
|
+
throw new fe(`Node id "${e.id}" already exists`);
|
|
97
97
|
return { ...s, nodes: { ...s.nodes, [e.id]: e } };
|
|
98
98
|
}
|
|
99
|
-
function
|
|
99
|
+
function bt(s, e, t) {
|
|
100
100
|
const o = Ce(s, e);
|
|
101
|
-
return
|
|
101
|
+
return Ne(s, e, { ...o, position: t });
|
|
102
102
|
}
|
|
103
103
|
function wt(s, e) {
|
|
104
104
|
Ce(s, e);
|
|
@@ -107,118 +107,126 @@ function wt(s, e) {
|
|
|
107
107
|
r.source.nodeId !== e && r.target.nodeId !== e && (n[i] = r);
|
|
108
108
|
return { ...s, nodes: o, edges: n };
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function Et(s, e, t) {
|
|
111
111
|
const o = Ce(s, e);
|
|
112
|
-
return
|
|
112
|
+
return Ne(s, e, { ...o, ...t, id: o.id });
|
|
113
113
|
}
|
|
114
114
|
function xt(s, e, t, o) {
|
|
115
|
-
const n = Ce(s, e), i =
|
|
116
|
-
return
|
|
115
|
+
const n = Ce(s, e), i = _e(n.payload, t, o);
|
|
116
|
+
return Ne(s, e, { ...n, payload: i });
|
|
117
117
|
}
|
|
118
|
-
function
|
|
119
|
-
const n = Ce(s, e), i =
|
|
120
|
-
return
|
|
118
|
+
function It(s, e, t, o) {
|
|
119
|
+
const n = Ce(s, e), i = _e(n.extensions, t, o);
|
|
120
|
+
return Ne(s, e, { ...n, extensions: i });
|
|
121
121
|
}
|
|
122
|
-
function
|
|
122
|
+
function Ct(s, e) {
|
|
123
123
|
if (s.edges[e.id])
|
|
124
|
-
throw new
|
|
124
|
+
throw new fe(`Edge id "${e.id}" already exists`);
|
|
125
125
|
if (xe(s, e.source, "Source"), xe(s, e.target, "Target"), e.labels) {
|
|
126
126
|
const t = /* @__PURE__ */ new Set();
|
|
127
127
|
for (const o of e.labels) {
|
|
128
128
|
if (t.has(o.id))
|
|
129
|
-
throw new
|
|
129
|
+
throw new fe(`Duplicate label id "${o.id}" in edge "${e.id}"`);
|
|
130
130
|
t.add(o.id);
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
return { ...s, edges: { ...s.edges, [e.id]: e } };
|
|
134
134
|
}
|
|
135
|
-
function
|
|
135
|
+
function kt(s, e) {
|
|
136
136
|
ke(s, e);
|
|
137
137
|
const { [e]: t, ...o } = s.edges;
|
|
138
138
|
return { ...s, edges: o };
|
|
139
139
|
}
|
|
140
|
-
function
|
|
140
|
+
function St(s, e, t, o) {
|
|
141
141
|
const n = ke(s, e), i = t ?? n.source, r = o ?? n.target;
|
|
142
142
|
return xe(s, i, "Source"), xe(s, r, "Target"), De(s, e, { ...n, source: i, target: r });
|
|
143
143
|
}
|
|
144
|
-
function
|
|
144
|
+
function Mt(s, e, t) {
|
|
145
145
|
const o = ke(s, e), n = { ...o, ...t, id: o.id };
|
|
146
146
|
return t.source && xe(s, n.source, "Source"), t.target && xe(s, n.target, "Target"), De(s, e, n);
|
|
147
147
|
}
|
|
148
|
-
function
|
|
149
|
-
const n = ke(s, e), i =
|
|
148
|
+
function _t(s, e, t, o) {
|
|
149
|
+
const n = ke(s, e), i = _e(n.payload, t, o);
|
|
150
150
|
return De(s, e, { ...n, payload: i });
|
|
151
151
|
}
|
|
152
152
|
function Nt(s, e, t, o) {
|
|
153
153
|
const n = ke(s, e);
|
|
154
154
|
if (!n.labels)
|
|
155
|
-
throw new
|
|
155
|
+
throw new fe(`Edge "${e}" has no labels`);
|
|
156
156
|
const i = n.labels.findIndex((l) => l.id === t);
|
|
157
157
|
if (i === -1)
|
|
158
|
-
throw new
|
|
158
|
+
throw new fe(`Label "${t}" not found in edge "${e}"`);
|
|
159
159
|
const r = [...n.labels];
|
|
160
160
|
return r[i] = { ...r[i], ...o, id: t }, De(s, e, { ...n, labels: r });
|
|
161
161
|
}
|
|
162
|
-
function
|
|
163
|
-
const o =
|
|
162
|
+
function Dt(s, e, t) {
|
|
163
|
+
const o = _e(s.meta, e, t);
|
|
164
164
|
return { ...s, meta: o };
|
|
165
165
|
}
|
|
166
|
-
function
|
|
166
|
+
function At(s, e) {
|
|
167
167
|
const t = e?.maxHistorySize ?? 100, o = q(s), n = [], i = [], r = q(!1), l = q(!1);
|
|
168
168
|
function a() {
|
|
169
169
|
r.value = n.length > 0, l.value = i.length > 0;
|
|
170
170
|
}
|
|
171
|
-
function h(
|
|
172
|
-
const
|
|
173
|
-
let
|
|
174
|
-
for (const
|
|
175
|
-
|
|
176
|
-
|
|
171
|
+
function h(C) {
|
|
172
|
+
const M = o.value;
|
|
173
|
+
let R = M;
|
|
174
|
+
for (const A of C.commands)
|
|
175
|
+
R = nt(R, A);
|
|
176
|
+
if (!C.skipHistory) {
|
|
177
|
+
const A = e?.excludeCommandFromHistory, B = A ? C.commands.filter((V) => !A(V)) : C.commands;
|
|
178
|
+
if (B.length > 0) {
|
|
179
|
+
const V = B.length < C.commands.length ? { ...C, commands: B } : C;
|
|
180
|
+
n.push({ snapshot: M, envelope: V }), n.length > t && n.shift(), i.length = 0;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
return o.value = R, a(), R;
|
|
177
184
|
}
|
|
178
185
|
function u() {
|
|
179
|
-
const
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
if (!k) return null;
|
|
185
|
-
n.push({ snapshot: o.value, envelope: k.envelope });
|
|
186
|
-
let S = o.value;
|
|
187
|
-
for (const T of k.envelope.commands)
|
|
188
|
-
S = $e(S, T);
|
|
189
|
-
return o.value = S, a(), S;
|
|
186
|
+
const C = n.pop();
|
|
187
|
+
if (!C) return null;
|
|
188
|
+
i.push({ snapshot: o.value, envelope: C.envelope });
|
|
189
|
+
const M = e?.preserveMetaOnUndoRedo ? { ...C.snapshot, meta: o.value.meta } : C.snapshot;
|
|
190
|
+
return o.value = M, a(), M;
|
|
190
191
|
}
|
|
191
192
|
function p() {
|
|
193
|
+
const C = i.pop();
|
|
194
|
+
if (!C) return null;
|
|
195
|
+
n.push({ snapshot: o.value, envelope: C.envelope });
|
|
196
|
+
const M = e?.preserveMetaOnUndoRedo ? { ...C.snapshot, meta: o.value.meta } : C.snapshot;
|
|
197
|
+
return o.value = M, a(), M;
|
|
198
|
+
}
|
|
199
|
+
function g() {
|
|
192
200
|
n.length = 0, i.length = 0, a();
|
|
193
201
|
}
|
|
194
|
-
function
|
|
202
|
+
function E() {
|
|
195
203
|
return o.value;
|
|
196
204
|
}
|
|
197
|
-
function m(
|
|
198
|
-
o.value =
|
|
205
|
+
function m(C) {
|
|
206
|
+
o.value = C, g();
|
|
199
207
|
}
|
|
200
208
|
return {
|
|
201
209
|
currentFlowModel: o,
|
|
202
210
|
execute: h,
|
|
203
211
|
undo: u,
|
|
204
|
-
redo:
|
|
212
|
+
redo: p,
|
|
205
213
|
canUndo: r,
|
|
206
214
|
canRedo: l,
|
|
207
215
|
get undoStack() {
|
|
208
|
-
return n.map((
|
|
216
|
+
return n.map((C) => C.envelope);
|
|
209
217
|
},
|
|
210
218
|
get redoStack() {
|
|
211
|
-
return i.map((
|
|
219
|
+
return i.map((C) => C.envelope);
|
|
212
220
|
},
|
|
213
|
-
clear:
|
|
214
|
-
createSnapshot:
|
|
221
|
+
clear: g,
|
|
222
|
+
createSnapshot: E,
|
|
215
223
|
replaceFlowModel: m
|
|
216
224
|
};
|
|
217
225
|
}
|
|
218
|
-
function
|
|
226
|
+
function Pt(s) {
|
|
219
227
|
return s !== null && typeof s == "object" && s.rejected === !0;
|
|
220
228
|
}
|
|
221
|
-
class
|
|
229
|
+
class Tt {
|
|
222
230
|
plugins = [];
|
|
223
231
|
editorContext = null;
|
|
224
232
|
runtimeCtx = null;
|
|
@@ -283,7 +291,7 @@ class Pt {
|
|
|
283
291
|
source: o.name
|
|
284
292
|
}
|
|
285
293
|
};
|
|
286
|
-
if (
|
|
294
|
+
if (Pt(i))
|
|
287
295
|
return {
|
|
288
296
|
rejected: !0,
|
|
289
297
|
error: {
|
|
@@ -376,48 +384,48 @@ class Pt {
|
|
|
376
384
|
const n = o ?? e.commands;
|
|
377
385
|
let i = t.flowModel.value;
|
|
378
386
|
for (const r of n)
|
|
379
|
-
i =
|
|
387
|
+
i = nt(i, r);
|
|
380
388
|
return i;
|
|
381
389
|
}
|
|
382
390
|
};
|
|
383
391
|
}
|
|
384
392
|
}
|
|
385
|
-
let
|
|
393
|
+
let Rt = 0;
|
|
386
394
|
function te() {
|
|
387
395
|
const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
|
|
388
|
-
return `${s}-${e}-${++
|
|
396
|
+
return `${s}-${e}-${++Rt}`;
|
|
389
397
|
}
|
|
390
|
-
const
|
|
391
|
-
function
|
|
392
|
-
const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ??
|
|
393
|
-
function
|
|
398
|
+
const Be = () => te();
|
|
399
|
+
function hn(s) {
|
|
400
|
+
const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ?? Be, i = { version: "1.0", ...s.initialFlowModel }, r = At(i, o), l = q(s.mode ?? "edit"), a = q(!1), h = q(null), u = q([]), p = {}, g = new Tt();
|
|
401
|
+
function E(R, A, B, V = "user:toolbar") {
|
|
394
402
|
const O = {
|
|
395
403
|
id: `history-${Date.now()}`,
|
|
396
|
-
source:
|
|
397
|
-
label:
|
|
404
|
+
source: V,
|
|
405
|
+
label: R,
|
|
398
406
|
timestamp: Date.now(),
|
|
399
407
|
commands: []
|
|
400
408
|
};
|
|
401
|
-
|
|
409
|
+
g.afterCommand(O, A, B), u.value = g.collectToolbarItems(), s.onCommandResult?.({
|
|
402
410
|
status: "applied",
|
|
403
411
|
envelope: O,
|
|
404
|
-
flowModel:
|
|
412
|
+
flowModel: B
|
|
405
413
|
}), s.onFlowModelChange?.({
|
|
406
|
-
flowModel:
|
|
407
|
-
prevFlowModel:
|
|
414
|
+
flowModel: B,
|
|
415
|
+
prevFlowModel: A,
|
|
408
416
|
envelope: O,
|
|
409
|
-
source:
|
|
417
|
+
source: V
|
|
410
418
|
});
|
|
411
419
|
}
|
|
412
420
|
const m = {
|
|
413
421
|
execute: r.execute,
|
|
414
422
|
undo() {
|
|
415
|
-
const
|
|
416
|
-
return
|
|
423
|
+
const R = r.currentFlowModel.value, A = r.undo();
|
|
424
|
+
return A && E("撤销", R, A), A;
|
|
417
425
|
},
|
|
418
426
|
redo() {
|
|
419
|
-
const
|
|
420
|
-
return
|
|
427
|
+
const R = r.currentFlowModel.value, A = r.redo();
|
|
428
|
+
return A && E("重做", R, A), A;
|
|
421
429
|
},
|
|
422
430
|
get canUndo() {
|
|
423
431
|
return r.canUndo;
|
|
@@ -433,73 +441,73 @@ function gn(s) {
|
|
|
433
441
|
},
|
|
434
442
|
clear: r.clear,
|
|
435
443
|
createSnapshot: r.createSnapshot,
|
|
436
|
-
replaceFlowModel(
|
|
437
|
-
const
|
|
438
|
-
r.replaceFlowModel(
|
|
444
|
+
replaceFlowModel(R) {
|
|
445
|
+
const A = r.currentFlowModel.value;
|
|
446
|
+
r.replaceFlowModel(R), E("替换 FlowModel", A, R, "system:replace");
|
|
439
447
|
}
|
|
440
|
-
},
|
|
448
|
+
}, C = {
|
|
441
449
|
flowModel: j(() => r.currentFlowModel.value),
|
|
442
450
|
history: m,
|
|
443
451
|
schema: e,
|
|
444
452
|
mode: l,
|
|
445
453
|
idGenerator: n,
|
|
446
|
-
executeCommand:
|
|
447
|
-
replaceFlowModel(
|
|
448
|
-
m.replaceFlowModel(
|
|
454
|
+
executeCommand: M,
|
|
455
|
+
replaceFlowModel(R) {
|
|
456
|
+
m.replaceFlowModel(R);
|
|
449
457
|
},
|
|
450
|
-
setMode(
|
|
451
|
-
l.value =
|
|
458
|
+
setMode(R) {
|
|
459
|
+
l.value = R;
|
|
452
460
|
},
|
|
453
461
|
selectionMode: a,
|
|
454
|
-
setSelectionMode(
|
|
455
|
-
a.value =
|
|
462
|
+
setSelectionMode(R) {
|
|
463
|
+
a.value = R;
|
|
456
464
|
},
|
|
457
465
|
api: h,
|
|
458
466
|
toolbarItems: u,
|
|
459
|
-
extendedApi:
|
|
460
|
-
_pluginManager:
|
|
461
|
-
_emitUiEvent: (
|
|
462
|
-
|
|
467
|
+
extendedApi: p,
|
|
468
|
+
_pluginManager: g,
|
|
469
|
+
_emitUiEvent: (R) => {
|
|
470
|
+
g.dispatchUiEvent(R);
|
|
463
471
|
}
|
|
464
472
|
};
|
|
465
|
-
|
|
466
|
-
flowModel:
|
|
473
|
+
g.install(t, {
|
|
474
|
+
flowModel: C.flowModel,
|
|
467
475
|
history: m,
|
|
468
476
|
schema: e,
|
|
469
477
|
mode: l,
|
|
470
478
|
idGenerator: n,
|
|
471
|
-
executeCommand:
|
|
472
|
-
}), u.value =
|
|
473
|
-
|
|
479
|
+
executeCommand: M
|
|
480
|
+
}), u.value = g.collectToolbarItems(), Je(() => {
|
|
481
|
+
g.dispose();
|
|
474
482
|
});
|
|
475
|
-
function
|
|
476
|
-
const
|
|
477
|
-
if ("rejected" in
|
|
483
|
+
function M(R) {
|
|
484
|
+
const A = g.transformCommand(R);
|
|
485
|
+
if ("rejected" in A) {
|
|
478
486
|
const O = {
|
|
479
487
|
status: "rejected",
|
|
480
|
-
envelope:
|
|
481
|
-
error:
|
|
488
|
+
envelope: R,
|
|
489
|
+
error: A.error
|
|
482
490
|
};
|
|
483
491
|
return s.onCommandResult?.(O), O;
|
|
484
492
|
}
|
|
485
|
-
const
|
|
493
|
+
const B = A.envelope, V = r.currentFlowModel.value;
|
|
486
494
|
try {
|
|
487
|
-
const O = r.execute(
|
|
495
|
+
const O = r.execute(B), W = {
|
|
488
496
|
status: "applied",
|
|
489
|
-
envelope:
|
|
497
|
+
envelope: B,
|
|
490
498
|
flowModel: O
|
|
491
499
|
};
|
|
492
|
-
return
|
|
500
|
+
return g.afterCommand(B, V, O), u.value = g.collectToolbarItems(), s.onCommandResult?.(W), s.onFlowModelChange?.({
|
|
493
501
|
flowModel: O,
|
|
494
|
-
prevFlowModel:
|
|
495
|
-
envelope:
|
|
496
|
-
source:
|
|
502
|
+
prevFlowModel: V,
|
|
503
|
+
envelope: B,
|
|
504
|
+
source: B.source
|
|
497
505
|
}), W;
|
|
498
506
|
} catch (O) {
|
|
499
|
-
if (O instanceof
|
|
507
|
+
if (O instanceof fe) {
|
|
500
508
|
const W = {
|
|
501
509
|
status: "invalid",
|
|
502
|
-
envelope:
|
|
510
|
+
envelope: B,
|
|
503
511
|
error: {
|
|
504
512
|
code: "constraint_violated",
|
|
505
513
|
reason: O.message,
|
|
@@ -511,17 +519,17 @@ function gn(s) {
|
|
|
511
519
|
throw O;
|
|
512
520
|
}
|
|
513
521
|
}
|
|
514
|
-
return
|
|
522
|
+
return C;
|
|
515
523
|
}
|
|
516
|
-
const
|
|
517
|
-
function
|
|
518
|
-
return
|
|
524
|
+
const Lt = ["top", "right", "bottom", "left"];
|
|
525
|
+
function st() {
|
|
526
|
+
return Lt.map((s) => ({ id: s, group: s }));
|
|
519
527
|
}
|
|
520
|
-
function
|
|
521
|
-
return e?.(s) ?? s.ports ??
|
|
528
|
+
function He(s, e) {
|
|
529
|
+
return e?.(s) ?? s.ports ?? st();
|
|
522
530
|
}
|
|
523
|
-
const Te = -1,
|
|
524
|
-
class
|
|
531
|
+
const Te = -1, Ot = "flow-canvas-node-ring-target", qe = "flow-canvas-node-ring-target--decorated", Fe = "flow-canvas-node-ring-target--pulse", $t = "linear-gradient(135deg, #cadcfa 0%, #cee0ff 100%)";
|
|
532
|
+
class Bt {
|
|
525
533
|
graph;
|
|
526
534
|
schema;
|
|
527
535
|
shapeRegistry;
|
|
@@ -628,10 +636,10 @@ class $t {
|
|
|
628
636
|
for (const [o, n] of Object.entries(e.nodes)) {
|
|
629
637
|
const i = this.schema.nodeTypes[n.type];
|
|
630
638
|
if (!i)
|
|
631
|
-
throw new
|
|
639
|
+
throw new yt(
|
|
632
640
|
`Unknown node type "${n.type}" for node "${o}". Registered types: [${Object.keys(this.schema.nodeTypes).join(", ")}]. Register the type in CanvasSchema.nodeTypes before using it in a FlowModel.`
|
|
633
641
|
);
|
|
634
|
-
const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a =
|
|
642
|
+
const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a = He(n, i.getPorts);
|
|
635
643
|
t.set(o, { model: n, definition: i, shapeName: r, size: l, ports: a });
|
|
636
644
|
}
|
|
637
645
|
return t;
|
|
@@ -771,12 +779,12 @@ class $t {
|
|
|
771
779
|
const u = (e.getData()?.type ?? void 0) !== (t.type ?? void 0);
|
|
772
780
|
if (u) {
|
|
773
781
|
if (o?.router) {
|
|
774
|
-
const
|
|
775
|
-
e.setRouter(
|
|
782
|
+
const p = typeof o.router == "string" ? { name: o.router } : o.router;
|
|
783
|
+
e.setRouter(p);
|
|
776
784
|
}
|
|
777
785
|
if (o?.connector) {
|
|
778
|
-
const
|
|
779
|
-
e.setConnector(
|
|
786
|
+
const p = typeof o.connector == "string" ? { name: o.connector } : o.connector;
|
|
787
|
+
e.setConnector(p);
|
|
780
788
|
}
|
|
781
789
|
}
|
|
782
790
|
(u || l || a) && (this.syncEdgeMarker(e, o, "sourceMarker"), this.syncEdgeMarker(e, o, "targetMarker")), this.syncEdgeLabels(e, t), e.getZIndex() !== Te && e.setZIndex(Te), e.setData({ ...t }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, t, o);
|
|
@@ -860,11 +868,11 @@ class $t {
|
|
|
860
868
|
applyNodeHighlightAndDecoration(e, t) {
|
|
861
869
|
const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), i = this.graph.findViewByCell(e)?.container, r = this.getNodeRingTarget(i), l = this.prevNodeDecorationClasses.get(e.id);
|
|
862
870
|
l && (i?.classList.remove(l), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (i?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
|
|
863
|
-
const a = n?.borderColor, u = a ?? (o ? "#3a84ff" : void 0),
|
|
864
|
-
u ? (e.setAttrByPath("body/stroke", u), e.setAttrByPath("body/strokeWidth", 2)) :
|
|
871
|
+
const a = n?.borderColor, u = a ?? (o ? "#3a84ff" : void 0), p = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
|
|
872
|
+
u ? (e.setAttrByPath("body/stroke", u), e.setAttrByPath("body/strokeWidth", 2)) : p && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r && (r.classList.add(Ot), a ? (r.classList.add(qe), r.style.setProperty("--flow-canvas-node-decoration-ring-background", a), r.style.setProperty("--flow-canvas-node-decoration-ring-opacity", "0.95")) : (r.classList.remove(qe), r.style.removeProperty("--flow-canvas-node-decoration-ring-background"), r.style.removeProperty("--flow-canvas-node-decoration-ring-opacity")), o ? (r.classList.add(Fe), r.style.setProperty(
|
|
865
873
|
"--flow-canvas-node-pulse-ring-background",
|
|
866
|
-
a ??
|
|
867
|
-
), r.style.setProperty("--flow-canvas-node-pulse-ring-opacity", "0.95")) : (r.classList.remove(
|
|
874
|
+
a ?? $t
|
|
875
|
+
), r.style.setProperty("--flow-canvas-node-pulse-ring-opacity", "0.95")) : (r.classList.remove(Fe), r.style.removeProperty("--flow-canvas-node-pulse-ring-background"), r.style.removeProperty("--flow-canvas-node-pulse-ring-opacity"))), a ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !a ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
|
|
868
876
|
}
|
|
869
877
|
getHoveredEdgeId() {
|
|
870
878
|
return this.hoveredEdgeId;
|
|
@@ -895,14 +903,14 @@ class $t {
|
|
|
895
903
|
r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevEdgeDecorationClasses.delete(e.id)), i?.className && (this.graph.findViewByCell(e)?.container?.classList.add(i.className), this.prevEdgeDecorationClasses.set(e.id, i.className));
|
|
896
904
|
let l, a, h;
|
|
897
905
|
if (o?.style) {
|
|
898
|
-
const m = this.graph.isSelected?.(e) ?? !1,
|
|
899
|
-
l =
|
|
906
|
+
const m = this.graph.isSelected?.(e) ?? !1, C = this.hoveredEdgeId === e.id, M = o.style(t, { selected: m, highlighted: n, hovered: C });
|
|
907
|
+
l = M.stroke, a = M.strokeWidth, h = M.strokeDasharray;
|
|
900
908
|
}
|
|
901
|
-
const u = !o?.style && n ? "#3a84ff" : void 0,
|
|
902
|
-
|
|
909
|
+
const u = !o?.style && n ? "#3a84ff" : void 0, p = i?.strokeColor, g = p ?? l ?? u, E = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
|
|
910
|
+
g ? this.setEdgeAttrIfChanged(e, "line/stroke", g) : E && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? this.setEdgeAttrIfChanged(e, "line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), h ? this.setEdgeAttrIfChanged(e, "line/strokeDasharray", h) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), p ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), u ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
|
|
903
911
|
}
|
|
904
912
|
}
|
|
905
|
-
class
|
|
913
|
+
class Ht {
|
|
906
914
|
instanceId = te();
|
|
907
915
|
registeredShapes = /* @__PURE__ */ new Map();
|
|
908
916
|
wrappedComponents = /* @__PURE__ */ new Map();
|
|
@@ -913,12 +921,12 @@ class Bt {
|
|
|
913
921
|
registerNodeType(e, t) {
|
|
914
922
|
const o = this.getShapeName(e);
|
|
915
923
|
let n = this.wrappedComponents.get(e);
|
|
916
|
-
return n || (n =
|
|
924
|
+
return n || (n = ge({
|
|
917
925
|
name: `FlowCanvasNodeShape${e.replace(/(^|[-_])(\w)/g, (i, r, l) => l.toUpperCase())}`,
|
|
918
926
|
setup() {
|
|
919
927
|
return () => Re("div", { class: "flow-canvas-node-surface" }, [Re(t)]);
|
|
920
928
|
}
|
|
921
|
-
}), this.wrappedComponents.set(e, n)),
|
|
929
|
+
}), this.wrappedComponents.set(e, n)), pt({
|
|
922
930
|
shape: o,
|
|
923
931
|
component: n,
|
|
924
932
|
width: 100,
|
|
@@ -929,7 +937,7 @@ class Bt {
|
|
|
929
937
|
this.registeredShapes.clear(), this.wrappedComponents.clear();
|
|
930
938
|
}
|
|
931
939
|
}
|
|
932
|
-
class
|
|
940
|
+
class Gt {
|
|
933
941
|
graph;
|
|
934
942
|
onUiEvent;
|
|
935
943
|
onCommand;
|
|
@@ -937,7 +945,7 @@ class Ht {
|
|
|
937
945
|
idGenerator;
|
|
938
946
|
disposers = [];
|
|
939
947
|
constructor(e, t, o, n, i) {
|
|
940
|
-
this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.idGenerator = i ??
|
|
948
|
+
this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.idGenerator = i ?? Be, this.bindEvents();
|
|
941
949
|
}
|
|
942
950
|
dispose() {
|
|
943
951
|
for (const e of this.disposers) e();
|
|
@@ -1044,7 +1052,7 @@ class Ht {
|
|
|
1044
1052
|
this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
|
|
1045
1053
|
}
|
|
1046
1054
|
}
|
|
1047
|
-
function
|
|
1055
|
+
function qt(s) {
|
|
1048
1056
|
function e(t) {
|
|
1049
1057
|
const o = s.getCellById(t);
|
|
1050
1058
|
if (!o || !o.isNode()) return null;
|
|
@@ -1055,13 +1063,13 @@ function Gt(s) {
|
|
|
1055
1063
|
getNodeScreenRect: e
|
|
1056
1064
|
};
|
|
1057
1065
|
}
|
|
1058
|
-
function
|
|
1066
|
+
function it(s) {
|
|
1059
1067
|
return {
|
|
1060
1068
|
nodeIds: s.filter((e) => e.isNode()).map((e) => e.id),
|
|
1061
1069
|
edgeIds: s.filter((e) => e.isEdge()).map((e) => e.id)
|
|
1062
1070
|
};
|
|
1063
1071
|
}
|
|
1064
|
-
function
|
|
1072
|
+
function Ft(s, e) {
|
|
1065
1073
|
const t = [
|
|
1066
1074
|
...e.nodeIds.map((i) => s.getCellById(i)),
|
|
1067
1075
|
...e.edgeIds.map((i) => s.getCellById(i))
|
|
@@ -1072,7 +1080,7 @@ function qt(s, e) {
|
|
|
1072
1080
|
const n = s.localToGraph(o);
|
|
1073
1081
|
return new DOMRect(n.x, n.y, n.width, n.height);
|
|
1074
1082
|
}
|
|
1075
|
-
function
|
|
1083
|
+
function rt(s, e, t) {
|
|
1076
1084
|
const o = s.nodeIds.filter((r) => {
|
|
1077
1085
|
const l = e.nodes[r];
|
|
1078
1086
|
if (!l) return !1;
|
|
@@ -1084,14 +1092,14 @@ function it(s, e, t) {
|
|
|
1084
1092
|
});
|
|
1085
1093
|
return { nodeIds: o, edgeIds: i };
|
|
1086
1094
|
}
|
|
1087
|
-
function
|
|
1095
|
+
function Ut(s) {
|
|
1088
1096
|
return [
|
|
1089
1097
|
...s.edgeIds.map((e) => ({ type: "edge.remove", edgeId: e })),
|
|
1090
1098
|
...s.nodeIds.map((e) => ({ type: "node.remove", nodeId: e }))
|
|
1091
1099
|
];
|
|
1092
1100
|
}
|
|
1093
|
-
const
|
|
1094
|
-
function
|
|
1101
|
+
const zt = 100;
|
|
1102
|
+
function jt({
|
|
1095
1103
|
graph: s,
|
|
1096
1104
|
overlayManager: e,
|
|
1097
1105
|
executeCommand: t,
|
|
@@ -1104,11 +1112,11 @@ function zt({
|
|
|
1104
1112
|
onHighlightChange: h,
|
|
1105
1113
|
resolveNodeShape: u
|
|
1106
1114
|
}) {
|
|
1107
|
-
const
|
|
1108
|
-
let
|
|
1109
|
-
async function
|
|
1110
|
-
if (
|
|
1111
|
-
|
|
1115
|
+
const p = r ?? Be;
|
|
1116
|
+
let g = [], E = [], m = null, C = !1, M = null;
|
|
1117
|
+
async function R() {
|
|
1118
|
+
if (C) return m;
|
|
1119
|
+
C = !0;
|
|
1112
1120
|
try {
|
|
1113
1121
|
const f = await import("@antv/x6-plugin-dnd"), d = f.Dnd ?? f.default;
|
|
1114
1122
|
return d ? (m = new d({
|
|
@@ -1122,18 +1130,18 @@ function zt({
|
|
|
1122
1130
|
return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
|
|
1123
1131
|
}
|
|
1124
1132
|
}
|
|
1125
|
-
function
|
|
1133
|
+
function A() {
|
|
1126
1134
|
return new Promise((f) => {
|
|
1127
1135
|
requestAnimationFrame(() => requestAnimationFrame(() => f()));
|
|
1128
1136
|
});
|
|
1129
1137
|
}
|
|
1130
|
-
const
|
|
1138
|
+
const B = ({ node: f }) => {
|
|
1131
1139
|
const d = f.getData?.();
|
|
1132
|
-
if (!d?._dndSessionId || d._dndSessionId !==
|
|
1133
|
-
|
|
1140
|
+
if (!d?._dndSessionId || d._dndSessionId !== M) return;
|
|
1141
|
+
M = null;
|
|
1134
1142
|
const c = f.getPosition();
|
|
1135
1143
|
s.removeNode(f.id);
|
|
1136
|
-
const { _dndSessionId: v, ...
|
|
1144
|
+
const { _dndSessionId: v, ...w } = d, x = w.id || p("node");
|
|
1137
1145
|
t({
|
|
1138
1146
|
id: te(),
|
|
1139
1147
|
source: "user:drag",
|
|
@@ -1142,39 +1150,39 @@ function zt({
|
|
|
1142
1150
|
commands: [
|
|
1143
1151
|
{
|
|
1144
1152
|
type: "node.add",
|
|
1145
|
-
node: { ...
|
|
1153
|
+
node: { ...w, id: x, position: { x: c.x, y: c.y } }
|
|
1146
1154
|
}
|
|
1147
1155
|
]
|
|
1148
1156
|
});
|
|
1149
1157
|
};
|
|
1150
|
-
s.on("node:added",
|
|
1151
|
-
function
|
|
1158
|
+
s.on("node:added", B);
|
|
1159
|
+
function V(f) {
|
|
1152
1160
|
const d = o.nodeTypes[f.type];
|
|
1153
|
-
return
|
|
1161
|
+
return He(f, d?.getPorts);
|
|
1154
1162
|
}
|
|
1155
1163
|
function O(f) {
|
|
1156
|
-
return f ??
|
|
1164
|
+
return f ?? it(s.getSelectedCells?.() ?? []);
|
|
1157
1165
|
}
|
|
1158
|
-
function W(f, d, c, v,
|
|
1166
|
+
function W(f, d, c, v, w) {
|
|
1159
1167
|
switch (f) {
|
|
1160
1168
|
case "left":
|
|
1161
1169
|
return {
|
|
1162
|
-
x: d.position.x -
|
|
1170
|
+
x: d.position.x - w - v.width,
|
|
1163
1171
|
y: d.position.y + (c.height - v.height) / 2
|
|
1164
1172
|
};
|
|
1165
1173
|
case "top":
|
|
1166
1174
|
return {
|
|
1167
1175
|
x: d.position.x + (c.width - v.width) / 2,
|
|
1168
|
-
y: d.position.y -
|
|
1176
|
+
y: d.position.y - w - v.height
|
|
1169
1177
|
};
|
|
1170
1178
|
case "bottom":
|
|
1171
1179
|
return {
|
|
1172
1180
|
x: d.position.x + (c.width - v.width) / 2,
|
|
1173
|
-
y: d.position.y + c.height +
|
|
1181
|
+
y: d.position.y + c.height + w
|
|
1174
1182
|
};
|
|
1175
1183
|
default:
|
|
1176
1184
|
return {
|
|
1177
|
-
x: d.position.x + c.width +
|
|
1185
|
+
x: d.position.x + c.width + w,
|
|
1178
1186
|
y: d.position.y + (c.height - v.height) / 2
|
|
1179
1187
|
};
|
|
1180
1188
|
}
|
|
@@ -1191,7 +1199,7 @@ function zt({
|
|
|
1191
1199
|
return { x: d.width + c, y: 0 };
|
|
1192
1200
|
}
|
|
1193
1201
|
}
|
|
1194
|
-
function
|
|
1202
|
+
function _(f) {
|
|
1195
1203
|
switch (f) {
|
|
1196
1204
|
case "left":
|
|
1197
1205
|
return "right";
|
|
@@ -1233,7 +1241,7 @@ function zt({
|
|
|
1233
1241
|
return O();
|
|
1234
1242
|
},
|
|
1235
1243
|
getSelectionBounds(f) {
|
|
1236
|
-
return
|
|
1244
|
+
return Ft(s, O(f));
|
|
1237
1245
|
},
|
|
1238
1246
|
selectNodes(f) {
|
|
1239
1247
|
const d = f.map((c) => s.getCellById(c)).filter(Boolean);
|
|
@@ -1248,30 +1256,30 @@ function zt({
|
|
|
1248
1256
|
f?.length && s.unselect?.(f);
|
|
1249
1257
|
},
|
|
1250
1258
|
deleteSelection(f) {
|
|
1251
|
-
const d = O(f?.selection), c =
|
|
1259
|
+
const d = O(f?.selection), c = rt(d, n.value, i ?? (() => ({}))), v = Ut(c);
|
|
1252
1260
|
if (v.length === 0) return null;
|
|
1253
|
-
const
|
|
1261
|
+
const w = t({
|
|
1254
1262
|
id: te(),
|
|
1255
1263
|
source: f?.source ?? "user:toolbar",
|
|
1256
1264
|
label: f?.label ?? "删除选中",
|
|
1257
1265
|
timestamp: Date.now(),
|
|
1258
1266
|
commands: v
|
|
1259
1267
|
});
|
|
1260
|
-
return
|
|
1268
|
+
return w.status === "applied" && f?.clearSelectionAfterApply !== !1 && y.clearSelection(), w;
|
|
1261
1269
|
},
|
|
1262
1270
|
registerDndSource(f, d) {
|
|
1263
1271
|
const c = async (v) => {
|
|
1264
|
-
const
|
|
1265
|
-
if (!
|
|
1266
|
-
const
|
|
1267
|
-
|
|
1268
|
-
const
|
|
1269
|
-
width:
|
|
1270
|
-
height:
|
|
1271
|
-
shape:
|
|
1272
|
-
data: { ...
|
|
1272
|
+
const w = await R();
|
|
1273
|
+
if (!w) return;
|
|
1274
|
+
const x = te();
|
|
1275
|
+
M = x;
|
|
1276
|
+
const H = d(), K = u?.(H.type), k = s.createNode({
|
|
1277
|
+
width: K?.width ?? 154,
|
|
1278
|
+
height: K?.height ?? 54,
|
|
1279
|
+
shape: K?.shapeName ?? "rect",
|
|
1280
|
+
data: { ...H, _dndSessionId: x }
|
|
1273
1281
|
});
|
|
1274
|
-
|
|
1282
|
+
w.start(k, v);
|
|
1275
1283
|
};
|
|
1276
1284
|
return f.addEventListener("mousedown", c), () => {
|
|
1277
1285
|
f.removeEventListener("mousedown", c);
|
|
@@ -1284,34 +1292,34 @@ function zt({
|
|
|
1284
1292
|
startConnection(f, d) {
|
|
1285
1293
|
const c = s.getCellById(f);
|
|
1286
1294
|
if (!c?.isNode()) return;
|
|
1287
|
-
const v = c,
|
|
1288
|
-
if (!
|
|
1289
|
-
const
|
|
1290
|
-
if (!
|
|
1291
|
-
const
|
|
1295
|
+
const v = c, w = s.findViewByCell(v);
|
|
1296
|
+
if (!w) return;
|
|
1297
|
+
const x = w.findPortElem(d, "circle") ?? w.findPortElem(d);
|
|
1298
|
+
if (!x) return;
|
|
1299
|
+
const K = (x.matches?.("[magnet]") ? x : x.querySelector?.("[magnet]")) ?? x, k = K.getBoundingClientRect(), L = k.left + k.width / 2, b = k.top + k.height / 2, P = new MouseEvent("mousedown", {
|
|
1292
1300
|
clientX: L,
|
|
1293
|
-
clientY:
|
|
1301
|
+
clientY: b,
|
|
1294
1302
|
button: 0,
|
|
1295
1303
|
buttons: 1,
|
|
1296
1304
|
bubbles: !0,
|
|
1297
1305
|
cancelable: !0
|
|
1298
1306
|
});
|
|
1299
|
-
|
|
1307
|
+
K.dispatchEvent(P);
|
|
1300
1308
|
},
|
|
1301
1309
|
async exportAsImage(f) {
|
|
1302
|
-
const { domToBlob: d } = await import("modern-screenshot"), c = f?.padding ?? 20, v = f?.backgroundColor ?? s.options.background?.color ?? "#ffffff",
|
|
1303
|
-
if (
|
|
1310
|
+
const { domToBlob: d } = await import("modern-screenshot"), c = f?.padding ?? 20, v = f?.backgroundColor ?? s.options.background?.color ?? "#ffffff", w = s.zoom(), x = s.translate(), H = s.getContentBBox(), K = H.width / w, k = H.height / w;
|
|
1311
|
+
if (K === 0 || k === 0)
|
|
1304
1312
|
return new Blob();
|
|
1305
|
-
const L = (
|
|
1306
|
-
|
|
1307
|
-
const
|
|
1308
|
-
|
|
1309
|
-
const ee =
|
|
1310
|
-
ee && (ee.setAttribute("width", String(
|
|
1313
|
+
const L = (H.x - x.tx) / w, b = (H.y - x.ty) / w, P = Math.ceil(K + c * 2), G = Math.ceil(k + c * 2), Y = document.createElement("div");
|
|
1314
|
+
Y.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;";
|
|
1315
|
+
const X = s.container.cloneNode(!0);
|
|
1316
|
+
X.style.width = `${P}px`, X.style.height = `${G}px`, X.style.overflow = "visible";
|
|
1317
|
+
const ee = X.querySelector("svg");
|
|
1318
|
+
ee && (ee.setAttribute("width", String(P)), ee.setAttribute("height", String(G)), ee.style.width = `${P}px`, ee.style.height = `${G}px`), X.querySelector(".x6-graph-svg-viewport")?.setAttribute("transform", `matrix(1,0,0,1,${-L + c},${-b + c})`), Y.appendChild(X), document.body.appendChild(Y);
|
|
1311
1319
|
try {
|
|
1312
|
-
return await
|
|
1313
|
-
width:
|
|
1314
|
-
height:
|
|
1320
|
+
return await A(), await d(X, {
|
|
1321
|
+
width: P,
|
|
1322
|
+
height: G,
|
|
1315
1323
|
backgroundColor: v,
|
|
1316
1324
|
scale: f?.scale ?? window.devicePixelRatio,
|
|
1317
1325
|
filter: (oe) => {
|
|
@@ -1326,71 +1334,71 @@ function zt({
|
|
|
1326
1334
|
} catch (oe) {
|
|
1327
1335
|
return console.warn("[flow-canvas] Export failed:", oe), new Blob();
|
|
1328
1336
|
} finally {
|
|
1329
|
-
|
|
1337
|
+
Y.remove();
|
|
1330
1338
|
}
|
|
1331
1339
|
},
|
|
1332
1340
|
highlightNodes(f) {
|
|
1333
|
-
|
|
1341
|
+
g = f, h?.(g, E);
|
|
1334
1342
|
},
|
|
1335
1343
|
highlightEdges(f) {
|
|
1336
|
-
|
|
1344
|
+
E = f, h?.(g, E);
|
|
1337
1345
|
},
|
|
1338
1346
|
clearHighlight() {
|
|
1339
|
-
|
|
1347
|
+
g = [], E = [], h?.([], []);
|
|
1340
1348
|
},
|
|
1341
1349
|
overlay: e,
|
|
1342
1350
|
getContextMenuItems(f) {
|
|
1343
1351
|
return a?.(f) ?? [];
|
|
1344
1352
|
},
|
|
1345
1353
|
insertNodeToRight(f, d, c) {
|
|
1346
|
-
const v = n.value,
|
|
1347
|
-
if (!
|
|
1354
|
+
const v = n.value, w = v.nodes[f];
|
|
1355
|
+
if (!w)
|
|
1348
1356
|
return {
|
|
1349
1357
|
status: "invalid",
|
|
1350
1358
|
envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
|
|
1351
1359
|
error: { code: "constraint_violated", reason: `Source node "${f}" not found`, source: "api" }
|
|
1352
1360
|
};
|
|
1353
|
-
const
|
|
1361
|
+
const x = c?.gap ?? l ?? zt, H = c?.direction ?? "right", K = o.nodeTypes[w.type], k = o.nodeTypes[d.type], L = K?.getSize(w) ?? { width: 154, height: 54 }, b = k?.getSize({ ...d, position: { x: 0, y: 0 } }) ?? {
|
|
1354
1362
|
width: 154,
|
|
1355
1363
|
height: 54
|
|
1356
|
-
},
|
|
1364
|
+
}, P = W(H, w, L, b, x), G = d.id || p("node"), Y = { ...d, id: G, position: P }, X = [{ type: "node.add", node: Y }], ee = z(H, b, x), Q = { x: P.x, y: P.y, width: b.width, height: b.height };
|
|
1357
1365
|
for (const [ie, ne] of Object.entries(v.nodes)) {
|
|
1358
|
-
if (ie === f || ie ===
|
|
1359
|
-
const I = o.nodeTypes[ne.type]?.getSize(ne) ?? { width: 154, height: 54 },
|
|
1360
|
-
|
|
1366
|
+
if (ie === f || ie === G) continue;
|
|
1367
|
+
const I = o.nodeTypes[ne.type]?.getSize(ne) ?? { width: 154, height: 54 }, N = Q.x < ne.position.x + I.width && Q.x + Q.width > ne.position.x, U = Q.y < ne.position.y + I.height && Q.y + Q.height > ne.position.y;
|
|
1368
|
+
N && U && X.push({
|
|
1361
1369
|
type: "node.move",
|
|
1362
1370
|
nodeId: ie,
|
|
1363
1371
|
position: { x: ne.position.x + ee.x, y: ne.position.y + ee.y }
|
|
1364
1372
|
});
|
|
1365
1373
|
}
|
|
1366
1374
|
if (c?.autoWireEdges) {
|
|
1367
|
-
const ie =
|
|
1368
|
-
(J) => J.source.nodeId === f && J.source.portId ===
|
|
1375
|
+
const ie = V(w), ne = V(Y), S = H, I = _(H), N = ie.find((J) => J.group === S), U = ne.find((J) => J.group === I), ae = ne.find((J) => J.group === S), de = N ? Object.values(v.edges).find(
|
|
1376
|
+
(J) => J.source.nodeId === f && J.source.portId === N.id
|
|
1369
1377
|
) : Object.values(v.edges).find((J) => J.source.nodeId === f);
|
|
1370
1378
|
if (de) {
|
|
1371
1379
|
const J = de.target;
|
|
1372
|
-
|
|
1380
|
+
X.push({ type: "edge.remove", edgeId: de.id }), X.push({
|
|
1373
1381
|
type: "edge.add",
|
|
1374
1382
|
edge: {
|
|
1375
|
-
id:
|
|
1376
|
-
source: { nodeId: f, portId:
|
|
1377
|
-
target: { nodeId:
|
|
1383
|
+
id: p("edge"),
|
|
1384
|
+
source: { nodeId: f, portId: N?.id },
|
|
1385
|
+
target: { nodeId: G, portId: U?.id }
|
|
1378
1386
|
}
|
|
1379
|
-
}),
|
|
1387
|
+
}), X.push({
|
|
1380
1388
|
type: "edge.add",
|
|
1381
1389
|
edge: {
|
|
1382
|
-
id:
|
|
1383
|
-
source: { nodeId:
|
|
1390
|
+
id: p("edge"),
|
|
1391
|
+
source: { nodeId: G, portId: ae?.id },
|
|
1384
1392
|
target: J
|
|
1385
1393
|
}
|
|
1386
1394
|
});
|
|
1387
1395
|
} else
|
|
1388
|
-
|
|
1396
|
+
X.push({
|
|
1389
1397
|
type: "edge.add",
|
|
1390
1398
|
edge: {
|
|
1391
|
-
id:
|
|
1392
|
-
source: { nodeId: f, portId:
|
|
1393
|
-
target: { nodeId:
|
|
1399
|
+
id: p("edge"),
|
|
1400
|
+
source: { nodeId: f, portId: N?.id },
|
|
1401
|
+
target: { nodeId: G, portId: U?.id }
|
|
1394
1402
|
}
|
|
1395
1403
|
});
|
|
1396
1404
|
}
|
|
@@ -1399,7 +1407,7 @@ function zt({
|
|
|
1399
1407
|
source: c?.source ?? "user:toolbar",
|
|
1400
1408
|
label: c?.label ?? "插入节点",
|
|
1401
1409
|
timestamp: Date.now(),
|
|
1402
|
-
commands:
|
|
1410
|
+
commands: X
|
|
1403
1411
|
};
|
|
1404
1412
|
return t(oe);
|
|
1405
1413
|
},
|
|
@@ -1412,22 +1420,22 @@ function zt({
|
|
|
1412
1420
|
};
|
|
1413
1421
|
return y;
|
|
1414
1422
|
}
|
|
1415
|
-
function
|
|
1423
|
+
function Wt() {
|
|
1416
1424
|
const s = q(null), e = q(!1);
|
|
1417
1425
|
let t = null, o = !1;
|
|
1418
|
-
function n(
|
|
1419
|
-
t && (clearTimeout(t), t = null), s.value =
|
|
1426
|
+
function n(p) {
|
|
1427
|
+
t && (clearTimeout(t), t = null), s.value = p;
|
|
1420
1428
|
}
|
|
1421
|
-
function i(
|
|
1429
|
+
function i(p = 100) {
|
|
1422
1430
|
o || (t && clearTimeout(t), t = setTimeout(() => {
|
|
1423
1431
|
s.value = null, t = null;
|
|
1424
|
-
},
|
|
1432
|
+
}, p));
|
|
1425
1433
|
}
|
|
1426
1434
|
function r() {
|
|
1427
1435
|
o = !0, t && (clearTimeout(t), t = null);
|
|
1428
1436
|
}
|
|
1429
|
-
function l(
|
|
1430
|
-
o = !1, i(
|
|
1437
|
+
function l(p = 100) {
|
|
1438
|
+
o = !1, i(p);
|
|
1431
1439
|
}
|
|
1432
1440
|
function a() {
|
|
1433
1441
|
t && (clearTimeout(t), t = null);
|
|
@@ -1440,28 +1448,28 @@ function jt() {
|
|
|
1440
1448
|
}
|
|
1441
1449
|
return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, reset: h, cleanup: u };
|
|
1442
1450
|
}
|
|
1443
|
-
const
|
|
1444
|
-
function
|
|
1451
|
+
const Ue = 10, Se = 12;
|
|
1452
|
+
function ze(s, e) {
|
|
1445
1453
|
const t = s.getTotalLength();
|
|
1446
1454
|
if (t === 0) return { ...e, length: 0, totalLength: 0 };
|
|
1447
1455
|
let o = s.getPointAtLength(0), n = 1 / 0;
|
|
1448
1456
|
const i = 50, r = t / i;
|
|
1449
1457
|
let l = 0;
|
|
1450
|
-
for (let
|
|
1451
|
-
const
|
|
1452
|
-
m < n && (n = m, o =
|
|
1458
|
+
for (let p = 0; p <= i; p++) {
|
|
1459
|
+
const g = p * r, E = s.getPointAtLength(g), m = (E.x - e.x) ** 2 + (E.y - e.y) ** 2;
|
|
1460
|
+
m < n && (n = m, o = E, l = g);
|
|
1453
1461
|
}
|
|
1454
1462
|
const a = Math.max(0, l - r), h = Math.min(t, l + r), u = (h - a) / 20;
|
|
1455
|
-
for (let
|
|
1456
|
-
const
|
|
1457
|
-
|
|
1463
|
+
for (let p = a; p <= h; p += u) {
|
|
1464
|
+
const g = s.getPointAtLength(p), E = (g.x - e.x) ** 2 + (g.y - e.y) ** 2;
|
|
1465
|
+
E < n && (n = E, o = g, l = p);
|
|
1458
1466
|
}
|
|
1459
1467
|
return { x: o.x, y: o.y, length: l, totalLength: t };
|
|
1460
1468
|
}
|
|
1461
|
-
function
|
|
1462
|
-
return s <
|
|
1469
|
+
function je(s, e) {
|
|
1470
|
+
return s < Ue || s > e - Ue;
|
|
1463
1471
|
}
|
|
1464
|
-
function
|
|
1472
|
+
function We(s, e, t) {
|
|
1465
1473
|
const o = s.querySelectorAll(".x6-edge-label");
|
|
1466
1474
|
for (const n of o) {
|
|
1467
1475
|
const i = n.getBoundingClientRect();
|
|
@@ -1470,7 +1478,7 @@ function Ve(s, e, t) {
|
|
|
1470
1478
|
}
|
|
1471
1479
|
return !1;
|
|
1472
1480
|
}
|
|
1473
|
-
function
|
|
1481
|
+
function Ve() {
|
|
1474
1482
|
const s = "http://www.w3.org/2000/svg", e = document.createElementNS(s, "g");
|
|
1475
1483
|
e.setAttribute("class", "flow-canvas-edge-delete-tool"), e.style.cursor = "pointer";
|
|
1476
1484
|
const t = document.createElementNS(s, "rect");
|
|
@@ -1478,20 +1486,20 @@ function Xe() {
|
|
|
1478
1486
|
const o = document.createElementNS(s, "text");
|
|
1479
1487
|
return o.setAttribute("font-family", "flow-canvas"), o.setAttribute("font-size", "16"), o.setAttribute("fill", "#ffffff"), o.setAttribute("text-anchor", "middle"), o.setAttribute("dominant-baseline", "central"), o.textContent = "", e.appendChild(o), e;
|
|
1480
1488
|
}
|
|
1481
|
-
function
|
|
1489
|
+
function Vt(s) {
|
|
1482
1490
|
let e = null, t = null;
|
|
1483
1491
|
function o(l, a) {
|
|
1484
1492
|
if (i(), t = l, a.target?.closest?.(".x6-edge-label")) return;
|
|
1485
1493
|
const u = s.getCellById(l);
|
|
1486
1494
|
if (!u?.isEdge()) return;
|
|
1487
|
-
const
|
|
1488
|
-
if (!g) return;
|
|
1489
|
-
const p = g.container.querySelector("path");
|
|
1495
|
+
const p = s.findViewByCell(u);
|
|
1490
1496
|
if (!p) return;
|
|
1491
|
-
const
|
|
1492
|
-
if (
|
|
1493
|
-
const
|
|
1494
|
-
|
|
1497
|
+
const g = p.container.querySelector("path");
|
|
1498
|
+
if (!g) return;
|
|
1499
|
+
const E = s.clientToLocal(a.clientX, a.clientY), m = ze(g, E);
|
|
1500
|
+
if (je(m.length, m.totalLength) || We(p.container, a.clientX, a.clientY)) return;
|
|
1501
|
+
const C = Ve();
|
|
1502
|
+
C.setAttribute("transform", `translate(${m.x}, ${m.y})`), p.container.appendChild(C), e = C;
|
|
1495
1503
|
}
|
|
1496
1504
|
function n(l) {
|
|
1497
1505
|
if (!t) return;
|
|
@@ -1503,16 +1511,16 @@ function Wt(s) {
|
|
|
1503
1511
|
if (!h?.isEdge()) return;
|
|
1504
1512
|
const u = s.findViewByCell(h);
|
|
1505
1513
|
if (!u) return;
|
|
1506
|
-
const
|
|
1507
|
-
if (!
|
|
1508
|
-
const
|
|
1509
|
-
if (
|
|
1514
|
+
const p = u.container.querySelector("path");
|
|
1515
|
+
if (!p) return;
|
|
1516
|
+
const g = s.clientToLocal(l.clientX, l.clientY), E = ze(p, g);
|
|
1517
|
+
if (je(E.length, E.totalLength) || We(u.container, l.clientX, l.clientY))
|
|
1510
1518
|
e && e.setAttribute("display", "none");
|
|
1511
1519
|
else if (e)
|
|
1512
|
-
e.removeAttribute("display"), e.setAttribute("transform", `translate(${
|
|
1520
|
+
e.removeAttribute("display"), e.setAttribute("transform", `translate(${E.x}, ${E.y})`);
|
|
1513
1521
|
else {
|
|
1514
|
-
const m =
|
|
1515
|
-
m.setAttribute("transform", `translate(${
|
|
1522
|
+
const m = Ve();
|
|
1523
|
+
m.setAttribute("transform", `translate(${E.x}, ${E.y})`), u.container.appendChild(m), e = m;
|
|
1516
1524
|
}
|
|
1517
1525
|
}
|
|
1518
1526
|
function i() {
|
|
@@ -1523,31 +1531,31 @@ function Wt(s) {
|
|
|
1523
1531
|
}
|
|
1524
1532
|
return { show: o, move: n, remove: i, handleEdgeRemoved: r };
|
|
1525
1533
|
}
|
|
1526
|
-
function
|
|
1534
|
+
function Xt(s) {
|
|
1527
1535
|
let e = null, t = 0;
|
|
1528
1536
|
function o(u) {
|
|
1529
|
-
const
|
|
1530
|
-
for (const
|
|
1531
|
-
for (const
|
|
1532
|
-
|
|
1537
|
+
const p = u ? "visible" : "hidden";
|
|
1538
|
+
for (const g of s.getNodes())
|
|
1539
|
+
for (const E of g.getPorts())
|
|
1540
|
+
g.setPortProp(E.id, "attrs/circle/visibility", p);
|
|
1533
1541
|
}
|
|
1534
1542
|
function n(u) {
|
|
1535
1543
|
if (!e)
|
|
1536
|
-
for (const
|
|
1537
|
-
u.setPortProp(
|
|
1544
|
+
for (const p of u.getPorts())
|
|
1545
|
+
u.setPortProp(p.id, "attrs/circle/visibility", "visible");
|
|
1538
1546
|
}
|
|
1539
1547
|
function i(u) {
|
|
1540
1548
|
if (!e)
|
|
1541
|
-
for (const
|
|
1542
|
-
u.setPortProp(
|
|
1549
|
+
for (const p of u.getPorts())
|
|
1550
|
+
u.setPortProp(p.id, "attrs/circle/visibility", "hidden");
|
|
1543
1551
|
}
|
|
1544
|
-
function r(u,
|
|
1552
|
+
function r(u, p) {
|
|
1545
1553
|
if (!u.getTargetCell())
|
|
1546
|
-
if (e = u.id,
|
|
1547
|
-
for (const
|
|
1548
|
-
const
|
|
1549
|
-
for (const m of
|
|
1550
|
-
|
|
1554
|
+
if (e = u.id, p?.size)
|
|
1555
|
+
for (const g of s.getNodes()) {
|
|
1556
|
+
const E = p.has(g.id) ? "hidden" : "visible";
|
|
1557
|
+
for (const m of g.getPorts())
|
|
1558
|
+
g.setPortProp(m.id, "attrs/circle/visibility", E);
|
|
1551
1559
|
}
|
|
1552
1560
|
else
|
|
1553
1561
|
o(!0);
|
|
@@ -1570,13 +1578,13 @@ function Vt(s) {
|
|
|
1570
1578
|
canShowEdgeTool: h
|
|
1571
1579
|
};
|
|
1572
1580
|
}
|
|
1573
|
-
function
|
|
1581
|
+
function Xe(s) {
|
|
1574
1582
|
return s === "top" || s === "right" || s === "bottom" || s === "left";
|
|
1575
1583
|
}
|
|
1576
|
-
function
|
|
1584
|
+
function Kt(s) {
|
|
1577
1585
|
const { editor: e, nodeHover: t, isSelectionModeActive: o, viewportVersion: n, getNodeBehavior: i, getInsertGap: r } = s, { isDraggingNode: l } = s, a = q(null), h = q(!1);
|
|
1578
|
-
let u = null,
|
|
1579
|
-
const
|
|
1586
|
+
let u = null, p = null, g = null;
|
|
1587
|
+
const E = j(() => ({
|
|
1580
1588
|
enabled: !0,
|
|
1581
1589
|
portGroup: "right",
|
|
1582
1590
|
...s.quickAddProp.value
|
|
@@ -1584,183 +1592,183 @@ function Xt(s) {
|
|
|
1584
1592
|
function m() {
|
|
1585
1593
|
u && (clearTimeout(u), u = null);
|
|
1586
1594
|
}
|
|
1587
|
-
function
|
|
1595
|
+
function C() {
|
|
1588
1596
|
u && clearTimeout(u), u = setTimeout(() => {
|
|
1589
1597
|
a.value = null, u = null;
|
|
1590
1598
|
}, 150);
|
|
1591
1599
|
}
|
|
1592
|
-
function
|
|
1593
|
-
return h.value ? !0 : (m(), y(
|
|
1600
|
+
function M(k) {
|
|
1601
|
+
return h.value ? !0 : (m(), y(k) ? (a.value = k, !0) : (a.value = null, !1));
|
|
1594
1602
|
}
|
|
1595
|
-
function
|
|
1603
|
+
function R() {
|
|
1596
1604
|
m(), t.enterOverlay();
|
|
1597
1605
|
}
|
|
1598
|
-
function
|
|
1599
|
-
|
|
1606
|
+
function A() {
|
|
1607
|
+
C(), t.leaveOverlay();
|
|
1600
1608
|
}
|
|
1601
|
-
function
|
|
1602
|
-
const L = e.schema.nodeTypes[
|
|
1603
|
-
return
|
|
1609
|
+
function B(k) {
|
|
1610
|
+
const L = e.schema.nodeTypes[k.type];
|
|
1611
|
+
return He(k, L?.getPorts);
|
|
1604
1612
|
}
|
|
1605
|
-
function
|
|
1606
|
-
const
|
|
1607
|
-
if (!
|
|
1608
|
-
const
|
|
1609
|
-
return L.find((
|
|
1613
|
+
function V(k, L) {
|
|
1614
|
+
const b = E.value.getPort?.(k, L);
|
|
1615
|
+
if (!b) return null;
|
|
1616
|
+
const P = typeof b == "string" ? b : b.id;
|
|
1617
|
+
return L.find((G) => G.id === P) ?? null;
|
|
1610
1618
|
}
|
|
1611
|
-
function O(
|
|
1612
|
-
const
|
|
1613
|
-
if (!
|
|
1619
|
+
function O(k, L) {
|
|
1620
|
+
const b = e.api.value?.overlay.getNodeScreenRect(k);
|
|
1621
|
+
if (!b) return null;
|
|
1614
1622
|
switch (L) {
|
|
1615
1623
|
case "top":
|
|
1616
|
-
return { x:
|
|
1624
|
+
return { x: b.x + b.width / 2, y: b.y };
|
|
1617
1625
|
case "bottom":
|
|
1618
|
-
return { x:
|
|
1626
|
+
return { x: b.x + b.width / 2, y: b.y + b.height };
|
|
1619
1627
|
case "left":
|
|
1620
|
-
return { x:
|
|
1628
|
+
return { x: b.x, y: b.y + b.height / 2 };
|
|
1621
1629
|
case "right":
|
|
1622
|
-
return { x:
|
|
1630
|
+
return { x: b.x + b.width, y: b.y + b.height / 2 };
|
|
1623
1631
|
default:
|
|
1624
1632
|
return null;
|
|
1625
1633
|
}
|
|
1626
1634
|
}
|
|
1627
|
-
function W(
|
|
1628
|
-
if (!
|
|
1629
|
-
const
|
|
1630
|
-
if (
|
|
1631
|
-
const
|
|
1632
|
-
if (
|
|
1633
|
-
const ee =
|
|
1635
|
+
function W(k, L, b) {
|
|
1636
|
+
if (!p) return O(k, b);
|
|
1637
|
+
const P = p.getCellById(k);
|
|
1638
|
+
if (P?.isNode()) {
|
|
1639
|
+
const G = P, Y = p.findViewByCell(G), X = Y?.findPortElem(L, "circle") ?? Y?.findPortElem(L);
|
|
1640
|
+
if (X) {
|
|
1641
|
+
const ee = p.container.getBoundingClientRect(), Q = X.getBoundingClientRect();
|
|
1634
1642
|
return {
|
|
1635
1643
|
x: Q.left - ee.left + Q.width / 2,
|
|
1636
1644
|
y: Q.top - ee.top + Q.height / 2
|
|
1637
1645
|
};
|
|
1638
1646
|
}
|
|
1639
1647
|
}
|
|
1640
|
-
return O(
|
|
1648
|
+
return O(k, b);
|
|
1641
1649
|
}
|
|
1642
|
-
function z(
|
|
1643
|
-
const L =
|
|
1644
|
-
if (!
|
|
1645
|
-
const
|
|
1646
|
-
return
|
|
1650
|
+
function z(k) {
|
|
1651
|
+
const L = B(k), b = V(k, L) ?? L.find((G) => G.group === E.value.portGroup) ?? null;
|
|
1652
|
+
if (!b) return null;
|
|
1653
|
+
const P = W(k.id, b.id, b.group);
|
|
1654
|
+
return P ? { portId: b.id, portGroup: b.group, portPosition: P } : null;
|
|
1647
1655
|
}
|
|
1648
|
-
function
|
|
1649
|
-
const L = z(
|
|
1650
|
-
if (typeof
|
|
1651
|
-
const
|
|
1652
|
-
if (
|
|
1653
|
-
} else if (
|
|
1654
|
-
return
|
|
1655
|
-
return L &&
|
|
1656
|
+
function _(k) {
|
|
1657
|
+
const L = z(k), b = E.value.insertDirection;
|
|
1658
|
+
if (typeof b == "function") {
|
|
1659
|
+
const P = b(k, L ? { id: L.portId, group: L.portGroup } : null);
|
|
1660
|
+
if (P) return P;
|
|
1661
|
+
} else if (b)
|
|
1662
|
+
return b;
|
|
1663
|
+
return L && Xe(L.portGroup) ? L.portGroup : Xe(E.value.portGroup) ? E.value.portGroup : "right";
|
|
1656
1664
|
}
|
|
1657
|
-
function y(
|
|
1658
|
-
if (!
|
|
1659
|
-
const
|
|
1660
|
-
return !
|
|
1665
|
+
function y(k) {
|
|
1666
|
+
if (!E.value.enabled || e.mode.value !== "edit") return !1;
|
|
1667
|
+
const b = e.flowModel.value.nodes[k];
|
|
1668
|
+
return !b || i(b).quickAddEnabled === !1 ? !1 : !!z(b);
|
|
1661
1669
|
}
|
|
1662
1670
|
const f = j(() => {
|
|
1663
|
-
if (n.value, !
|
|
1664
|
-
const
|
|
1665
|
-
if (!
|
|
1671
|
+
if (n.value, !E.value.enabled) return null;
|
|
1672
|
+
const k = a.value;
|
|
1673
|
+
if (!k || l.value || !e.api.value || e.mode.value !== "edit" || o.value)
|
|
1666
1674
|
return null;
|
|
1667
|
-
const
|
|
1668
|
-
if (!
|
|
1669
|
-
const
|
|
1670
|
-
if (
|
|
1671
|
-
const
|
|
1672
|
-
return
|
|
1675
|
+
const b = e.flowModel.value.nodes[k];
|
|
1676
|
+
if (!b) return null;
|
|
1677
|
+
const P = i(b);
|
|
1678
|
+
if (P.quickAddEnabled === !1) return null;
|
|
1679
|
+
const G = z(b);
|
|
1680
|
+
return G ? { node: b, ...G, behavior: P } : null;
|
|
1673
1681
|
});
|
|
1674
|
-
function d(
|
|
1675
|
-
h.value = !0, f.value && e._emitUiEvent({ type: "node.quick-add", nodeId:
|
|
1682
|
+
function d(k) {
|
|
1683
|
+
h.value = !0, f.value && e._emitUiEvent({ type: "node.quick-add", nodeId: k, position: f.value.portPosition });
|
|
1676
1684
|
}
|
|
1677
1685
|
function c() {
|
|
1678
1686
|
h.value = !1;
|
|
1679
1687
|
}
|
|
1680
|
-
function v(
|
|
1688
|
+
function v(k) {
|
|
1681
1689
|
const L = e.api.value;
|
|
1682
1690
|
if (!L) return;
|
|
1683
|
-
const
|
|
1684
|
-
if (!
|
|
1685
|
-
const
|
|
1686
|
-
|
|
1687
|
-
}
|
|
1688
|
-
function
|
|
1689
|
-
const
|
|
1690
|
-
if (!
|
|
1691
|
-
const
|
|
1692
|
-
if (!
|
|
1693
|
-
|
|
1691
|
+
const b = e.flowModel.value.nodes[k];
|
|
1692
|
+
if (!b) return;
|
|
1693
|
+
const P = z(b);
|
|
1694
|
+
P && L.startConnection(k, P.portId);
|
|
1695
|
+
}
|
|
1696
|
+
function w(k, L) {
|
|
1697
|
+
const b = e.api.value;
|
|
1698
|
+
if (!b) return;
|
|
1699
|
+
const P = L.id || e.idGenerator("node"), G = { ...L, id: P }, Y = e.flowModel.value.nodes[k];
|
|
1700
|
+
if (!Y) return;
|
|
1701
|
+
b.insertNodeToRight(k, G, {
|
|
1694
1702
|
autoWireEdges: !0,
|
|
1695
|
-
direction:
|
|
1703
|
+
direction: _(Y),
|
|
1696
1704
|
gap: r(),
|
|
1697
1705
|
source: "user:quick-add",
|
|
1698
1706
|
label: "快捷插入节点"
|
|
1699
|
-
}).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId:
|
|
1707
|
+
}).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId: k, newNodeId: P }), s.closePopover();
|
|
1700
1708
|
}
|
|
1701
|
-
function
|
|
1702
|
-
if (!
|
|
1703
|
-
const L =
|
|
1709
|
+
function x(k) {
|
|
1710
|
+
if (!p) return;
|
|
1711
|
+
const L = p.getCellById(k);
|
|
1704
1712
|
if (!L?.isNode()) return;
|
|
1705
|
-
const
|
|
1706
|
-
if (!
|
|
1707
|
-
const
|
|
1708
|
-
let
|
|
1709
|
-
i(
|
|
1710
|
-
const ee =
|
|
1711
|
-
for (const Q of
|
|
1712
|
-
const oe = ee && Q.id ===
|
|
1713
|
-
|
|
1714
|
-
}
|
|
1715
|
-
}
|
|
1716
|
-
function
|
|
1717
|
-
|
|
1713
|
+
const b = L, P = e.flowModel.value.nodes[k];
|
|
1714
|
+
if (!P) return;
|
|
1715
|
+
const G = z(P);
|
|
1716
|
+
let Y = !0;
|
|
1717
|
+
i(P).hidePortForQuickAdd === !1 && (Y = !1);
|
|
1718
|
+
const ee = Y && !l.value && !!G && y(k);
|
|
1719
|
+
for (const Q of b.getPorts()) {
|
|
1720
|
+
const oe = ee && Q.id === G?.portId ? "hidden" : "visible";
|
|
1721
|
+
b.setPortProp(Q.id, "attrs/circle/visibility", oe);
|
|
1722
|
+
}
|
|
1723
|
+
}
|
|
1724
|
+
function H(k, L) {
|
|
1725
|
+
g?.(), p = k, g = he(
|
|
1718
1726
|
[a, l],
|
|
1719
|
-
([
|
|
1720
|
-
if (
|
|
1721
|
-
const
|
|
1722
|
-
|
|
1727
|
+
([b], [P]) => {
|
|
1728
|
+
if (P && P !== b) {
|
|
1729
|
+
const G = k.getCellById(P);
|
|
1730
|
+
G?.isNode() && L(G);
|
|
1723
1731
|
}
|
|
1724
|
-
|
|
1732
|
+
b && x(b);
|
|
1725
1733
|
},
|
|
1726
1734
|
{ flush: "sync" }
|
|
1727
1735
|
);
|
|
1728
1736
|
}
|
|
1729
|
-
|
|
1730
|
-
|
|
1737
|
+
he(f, (k) => {
|
|
1738
|
+
k || (h.value = !1);
|
|
1731
1739
|
});
|
|
1732
|
-
function
|
|
1733
|
-
u && clearTimeout(u),
|
|
1740
|
+
function K() {
|
|
1741
|
+
u && clearTimeout(u), g?.(), g = null, p = null;
|
|
1734
1742
|
}
|
|
1735
1743
|
return {
|
|
1736
1744
|
quickAddNodeId: a,
|
|
1737
1745
|
quickAddPopoverOpen: h,
|
|
1738
|
-
mergedConfig:
|
|
1746
|
+
mergedConfig: E,
|
|
1739
1747
|
data: f,
|
|
1740
|
-
enter:
|
|
1741
|
-
leave:
|
|
1748
|
+
enter: M,
|
|
1749
|
+
leave: C,
|
|
1742
1750
|
cancelLeave: m,
|
|
1743
|
-
handleOverlayEnter:
|
|
1744
|
-
handleOverlayLeave:
|
|
1751
|
+
handleOverlayEnter: R,
|
|
1752
|
+
handleOverlayLeave: A,
|
|
1745
1753
|
handleOpen: d,
|
|
1746
1754
|
handleClose: c,
|
|
1747
1755
|
handleStartDrag: v,
|
|
1748
|
-
handleInsert:
|
|
1756
|
+
handleInsert: w,
|
|
1749
1757
|
isActiveForNode: y,
|
|
1750
|
-
syncNodePorts:
|
|
1751
|
-
attachRuntime:
|
|
1752
|
-
cleanup:
|
|
1758
|
+
syncNodePorts: x,
|
|
1759
|
+
attachRuntime: H,
|
|
1760
|
+
cleanup: K
|
|
1753
1761
|
};
|
|
1754
1762
|
}
|
|
1755
|
-
const
|
|
1756
|
-
function
|
|
1763
|
+
const Zt = 15, Yt = 10;
|
|
1764
|
+
function Qt(s) {
|
|
1757
1765
|
const { editor: e } = s;
|
|
1758
1766
|
let t = null, o = null, n = null, i = null;
|
|
1759
1767
|
const r = [];
|
|
1760
1768
|
let l = null;
|
|
1761
1769
|
const a = j(() => ({
|
|
1762
1770
|
enabled: !1,
|
|
1763
|
-
bufferMargin:
|
|
1771
|
+
bufferMargin: Zt,
|
|
1764
1772
|
incomingPortGroup: "left",
|
|
1765
1773
|
outgoingPortGroup: "right",
|
|
1766
1774
|
...s.edgeDropProp.value
|
|
@@ -1780,16 +1788,16 @@ function Zt(s) {
|
|
|
1780
1788
|
const f = h(y);
|
|
1781
1789
|
f && (f.style.stroke = "#3a84ff", i = y);
|
|
1782
1790
|
}
|
|
1783
|
-
function
|
|
1791
|
+
function p() {
|
|
1784
1792
|
if (!i) return;
|
|
1785
1793
|
const y = h(i);
|
|
1786
1794
|
y && (y.style.stroke = ""), i = null;
|
|
1787
1795
|
}
|
|
1788
|
-
function
|
|
1796
|
+
function g(y, f, d) {
|
|
1789
1797
|
if (t) {
|
|
1790
1798
|
const c = t.getCellById(y);
|
|
1791
1799
|
if (c?.isNode()) {
|
|
1792
|
-
const v = c.getPorts().find((
|
|
1800
|
+
const v = c.getPorts().find((w) => w.group === d);
|
|
1793
1801
|
if (v?.id) return v.id;
|
|
1794
1802
|
}
|
|
1795
1803
|
}
|
|
@@ -1799,115 +1807,115 @@ function Zt(s) {
|
|
|
1799
1807
|
}
|
|
1800
1808
|
return d;
|
|
1801
1809
|
}
|
|
1802
|
-
function
|
|
1810
|
+
function E(y) {
|
|
1803
1811
|
const f = y.getTotalLength();
|
|
1804
1812
|
if (f === 0) return [];
|
|
1805
1813
|
const d = [];
|
|
1806
|
-
for (let v = 0; v <= f; v +=
|
|
1807
|
-
const
|
|
1808
|
-
d.push({ x:
|
|
1814
|
+
for (let v = 0; v <= f; v += Yt) {
|
|
1815
|
+
const w = y.getPointAtLength(v);
|
|
1816
|
+
d.push({ x: w.x, y: w.y });
|
|
1809
1817
|
}
|
|
1810
1818
|
const c = y.getPointAtLength(f);
|
|
1811
1819
|
return d.push({ x: c.x, y: c.y }), d;
|
|
1812
1820
|
}
|
|
1813
1821
|
function m(y, f, d) {
|
|
1814
1822
|
if (!t) return null;
|
|
1815
|
-
const c = a.value, v = c.bufferMargin,
|
|
1823
|
+
const c = a.value, v = c.bufferMargin, w = {
|
|
1816
1824
|
x: y.x + v,
|
|
1817
1825
|
y: y.y + v,
|
|
1818
1826
|
width: Math.max(0, y.width - v * 2),
|
|
1819
1827
|
height: Math.max(0, y.height - v * 2)
|
|
1820
1828
|
};
|
|
1821
|
-
if (
|
|
1822
|
-
const
|
|
1823
|
-
let
|
|
1824
|
-
const
|
|
1825
|
-
for (const
|
|
1826
|
-
const
|
|
1827
|
-
if (!
|
|
1828
|
-
const
|
|
1829
|
-
if (!
|
|
1830
|
-
const
|
|
1831
|
-
if (!
|
|
1832
|
-
const
|
|
1833
|
-
if (!
|
|
1829
|
+
if (w.width <= 0 || w.height <= 0) return null;
|
|
1830
|
+
const x = w.x + w.width, H = w.y + w.height;
|
|
1831
|
+
let K = null;
|
|
1832
|
+
const k = y.x + y.width / 2, L = y.y + y.height / 2;
|
|
1833
|
+
for (const b of t.getEdges()) {
|
|
1834
|
+
const P = f.edges[b.id];
|
|
1835
|
+
if (!P || d && (P.source.nodeId === d || P.target.nodeId === d) || c.isEdgeDropTarget && !c.isEdgeDropTarget(P, f)) continue;
|
|
1836
|
+
const G = t.findViewByCell(b);
|
|
1837
|
+
if (!G) continue;
|
|
1838
|
+
const Y = G.findOne?.("path");
|
|
1839
|
+
if (!Y || typeof Y.getTotalLength != "function") continue;
|
|
1840
|
+
const X = E(Y);
|
|
1841
|
+
if (!X.length) continue;
|
|
1834
1842
|
let ee = !1, Q = 1 / 0;
|
|
1835
|
-
for (const oe of
|
|
1836
|
-
if (oe.x >=
|
|
1837
|
-
const ie = oe.x -
|
|
1838
|
-
|
|
1843
|
+
for (const oe of X)
|
|
1844
|
+
if (oe.x >= w.x && oe.x <= x && oe.y >= w.y && oe.y <= H) {
|
|
1845
|
+
const ie = oe.x - k, ne = oe.y - L, S = ie * ie + ne * ne;
|
|
1846
|
+
S < Q && (Q = S), ee = !0;
|
|
1839
1847
|
}
|
|
1840
|
-
ee && (!
|
|
1848
|
+
ee && (!K || Q < K.distSq) && (K = { edgeId: b.id, edge: P, distSq: Q });
|
|
1841
1849
|
}
|
|
1842
|
-
return
|
|
1850
|
+
return K ? { edgeId: K.edgeId, edge: K.edge } : null;
|
|
1843
1851
|
}
|
|
1844
|
-
function
|
|
1852
|
+
function C(y, f) {
|
|
1845
1853
|
if (!a.value.enabled) return;
|
|
1846
1854
|
const c = e.flowModel.value, v = m(y, c, f);
|
|
1847
|
-
v ? o !== v.edgeId && (
|
|
1855
|
+
v ? o !== v.edgeId && (p(), o = v.edgeId, u(v.edgeId)) : o && (p(), o = null);
|
|
1848
1856
|
}
|
|
1849
|
-
let
|
|
1850
|
-
function
|
|
1857
|
+
let M = !0;
|
|
1858
|
+
function R({ node: y }) {
|
|
1851
1859
|
if (o = null, !a.value.enabled) return;
|
|
1852
1860
|
const f = e.flowModel.value, d = f.nodes[y.id];
|
|
1853
1861
|
if (!d) {
|
|
1854
|
-
|
|
1862
|
+
M = !1;
|
|
1855
1863
|
return;
|
|
1856
1864
|
}
|
|
1857
1865
|
const c = a.value;
|
|
1858
|
-
|
|
1866
|
+
M = !c.isNodeInsertable || c.isNodeInsertable(d, f);
|
|
1859
1867
|
}
|
|
1860
|
-
function
|
|
1861
|
-
!a.value.enabled || !
|
|
1868
|
+
function A({ node: y }) {
|
|
1869
|
+
!a.value.enabled || !M || n === null && (n = requestAnimationFrame(() => {
|
|
1862
1870
|
if (n = null, !t) return;
|
|
1863
1871
|
const f = y.getPosition(), d = y.getSize();
|
|
1864
|
-
|
|
1872
|
+
C({ x: f.x, y: f.y, width: d.width, height: d.height }, y.id);
|
|
1865
1873
|
}));
|
|
1866
1874
|
}
|
|
1867
|
-
function
|
|
1868
|
-
n !== null && (cancelAnimationFrame(n), n = null),
|
|
1875
|
+
function B() {
|
|
1876
|
+
n !== null && (cancelAnimationFrame(n), n = null), p(), M = !0;
|
|
1869
1877
|
}
|
|
1870
|
-
function
|
|
1878
|
+
function V() {
|
|
1871
1879
|
if (!t) return;
|
|
1872
1880
|
let y = !1;
|
|
1873
1881
|
l = () => {
|
|
1874
1882
|
if (!a.value.enabled) return;
|
|
1875
1883
|
const f = document.querySelector(".x6-widget-dnd");
|
|
1876
1884
|
if (!f) {
|
|
1877
|
-
y && (y = !1,
|
|
1885
|
+
y && (y = !1, p(), o = null);
|
|
1878
1886
|
return;
|
|
1879
1887
|
}
|
|
1880
1888
|
y = !0, n === null && (n = requestAnimationFrame(() => {
|
|
1881
1889
|
if (n = null, !t) return;
|
|
1882
|
-
const d = f.getBoundingClientRect(), c = t.clientToLocal(d.left, d.top), v = t.clientToLocal(d.right, d.bottom),
|
|
1890
|
+
const d = f.getBoundingClientRect(), c = t.clientToLocal(d.left, d.top), v = t.clientToLocal(d.right, d.bottom), w = {
|
|
1883
1891
|
x: c.x,
|
|
1884
1892
|
y: c.y,
|
|
1885
1893
|
width: v.x - c.x,
|
|
1886
1894
|
height: v.y - c.y
|
|
1887
1895
|
};
|
|
1888
|
-
|
|
1896
|
+
C(w);
|
|
1889
1897
|
}));
|
|
1890
1898
|
}, document.addEventListener("mousemove", l), r.push(() => {
|
|
1891
1899
|
l && (document.removeEventListener("mousemove", l), l = null);
|
|
1892
1900
|
});
|
|
1893
1901
|
}
|
|
1894
1902
|
function O() {
|
|
1895
|
-
|
|
1903
|
+
p(), o = null, n !== null && (cancelAnimationFrame(n), n = null);
|
|
1896
1904
|
}
|
|
1897
1905
|
function W(y) {
|
|
1898
1906
|
if (!o || y.source !== "user:drag") return y;
|
|
1899
1907
|
const f = o;
|
|
1900
|
-
o = null,
|
|
1908
|
+
o = null, p();
|
|
1901
1909
|
const d = e.flowModel.value, c = d.edges[f];
|
|
1902
1910
|
if (!c) return y;
|
|
1903
|
-
const v = y.commands.find((
|
|
1911
|
+
const v = y.commands.find((G) => G.type === "node.add" || G.type === "node.move");
|
|
1904
1912
|
if (!v) return y;
|
|
1905
|
-
const
|
|
1906
|
-
if (!
|
|
1907
|
-
const
|
|
1908
|
-
if (
|
|
1913
|
+
const w = v.type === "node.add" ? v.node.id : v.nodeId, x = v.type === "node.add" ? v.node : d.nodes[v.nodeId];
|
|
1914
|
+
if (!x) return y;
|
|
1915
|
+
const H = a.value;
|
|
1916
|
+
if (H.isNodeInsertable && !H.isNodeInsertable(x, d))
|
|
1909
1917
|
return y;
|
|
1910
|
-
const
|
|
1918
|
+
const K = g(w, x, H.incomingPortGroup), k = g(w, x, H.outgoingPortGroup), L = e.idGenerator("edge"), b = e.idGenerator("edge"), P = [
|
|
1911
1919
|
{ type: "edge.remove", edgeId: f },
|
|
1912
1920
|
{
|
|
1913
1921
|
type: "edge.add",
|
|
@@ -1915,15 +1923,15 @@ function Zt(s) {
|
|
|
1915
1923
|
id: L,
|
|
1916
1924
|
type: c.type,
|
|
1917
1925
|
source: { nodeId: c.source.nodeId, portId: c.source.portId },
|
|
1918
|
-
target: { nodeId:
|
|
1926
|
+
target: { nodeId: w, portId: K }
|
|
1919
1927
|
}
|
|
1920
1928
|
},
|
|
1921
1929
|
{
|
|
1922
1930
|
type: "edge.add",
|
|
1923
1931
|
edge: {
|
|
1924
|
-
id:
|
|
1932
|
+
id: b,
|
|
1925
1933
|
type: c.type,
|
|
1926
|
-
source: { nodeId:
|
|
1934
|
+
source: { nodeId: w, portId: k },
|
|
1927
1935
|
target: { nodeId: c.target.nodeId, portId: c.target.portId }
|
|
1928
1936
|
}
|
|
1929
1937
|
}
|
|
@@ -1931,7 +1939,7 @@ function Zt(s) {
|
|
|
1931
1939
|
return {
|
|
1932
1940
|
...y,
|
|
1933
1941
|
source: "user:edge-drop",
|
|
1934
|
-
commands: [...y.commands, ...
|
|
1942
|
+
commands: [...y.commands, ...P]
|
|
1935
1943
|
};
|
|
1936
1944
|
}
|
|
1937
1945
|
function z(y) {
|
|
@@ -1939,20 +1947,20 @@ function Zt(s) {
|
|
|
1939
1947
|
const f = (d, c) => {
|
|
1940
1948
|
y.on(d, c), r.push(() => y.off(d, c));
|
|
1941
1949
|
};
|
|
1942
|
-
f("node:move",
|
|
1950
|
+
f("node:move", R), f("node:change:position", A), f("node:moved", B), V();
|
|
1943
1951
|
}
|
|
1944
|
-
function
|
|
1952
|
+
function _() {
|
|
1945
1953
|
O();
|
|
1946
1954
|
for (const y of r) y();
|
|
1947
|
-
r.length = 0, t = null,
|
|
1955
|
+
r.length = 0, t = null, M = !0;
|
|
1948
1956
|
}
|
|
1949
1957
|
return {
|
|
1950
1958
|
attachRuntime: z,
|
|
1951
1959
|
tryExpandForEdgeDrop: W,
|
|
1952
|
-
cleanup:
|
|
1960
|
+
cleanup: _
|
|
1953
1961
|
};
|
|
1954
1962
|
}
|
|
1955
|
-
function
|
|
1963
|
+
function Jt(s) {
|
|
1956
1964
|
function e(n) {
|
|
1957
1965
|
return {
|
|
1958
1966
|
id: s.idGenerator("node"),
|
|
@@ -2000,8 +2008,8 @@ function Qt(s) {
|
|
|
2000
2008
|
}
|
|
2001
2009
|
case "disconnect": {
|
|
2002
2010
|
const a = s.flowModel.value, h = Object.entries(a.edges).filter(([, u]) => {
|
|
2003
|
-
const
|
|
2004
|
-
return
|
|
2011
|
+
const p = u;
|
|
2012
|
+
return p.source.nodeId === i || p.target.nodeId === i;
|
|
2005
2013
|
}).map(([u]) => u);
|
|
2006
2014
|
if (h.length === 0) break;
|
|
2007
2015
|
s.executeCommand({
|
|
@@ -2029,7 +2037,7 @@ function Qt(s) {
|
|
|
2029
2037
|
}
|
|
2030
2038
|
return { handleNodeAction: t, deleteSelection: o };
|
|
2031
2039
|
}
|
|
2032
|
-
function
|
|
2040
|
+
function eo() {
|
|
2033
2041
|
return {
|
|
2034
2042
|
refX: 0,
|
|
2035
2043
|
children: [
|
|
@@ -2050,7 +2058,7 @@ function Jt() {
|
|
|
2050
2058
|
]
|
|
2051
2059
|
};
|
|
2052
2060
|
}
|
|
2053
|
-
function
|
|
2061
|
+
function to(s, e) {
|
|
2054
2062
|
const t = e.defaultEdgeType ?? "default", o = e.edgeTypes?.[t], n = {
|
|
2055
2063
|
zIndex: -1,
|
|
2056
2064
|
attrs: {
|
|
@@ -2067,11 +2075,11 @@ function eo(s, e) {
|
|
|
2067
2075
|
...i,
|
|
2068
2076
|
line: {
|
|
2069
2077
|
...r,
|
|
2070
|
-
targetMarker:
|
|
2078
|
+
targetMarker: eo()
|
|
2071
2079
|
}
|
|
2072
2080
|
}, s.createEdge(n);
|
|
2073
2081
|
}
|
|
2074
|
-
const
|
|
2082
|
+
const oo = { class: "flow-canvas-node-actions__bar" }, no = /* @__PURE__ */ ge({
|
|
2075
2083
|
__name: "node-actions-toolbar",
|
|
2076
2084
|
props: {
|
|
2077
2085
|
node: {},
|
|
@@ -2083,11 +2091,11 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2083
2091
|
emits: ["action"],
|
|
2084
2092
|
setup(s, { emit: e }) {
|
|
2085
2093
|
const t = s, o = j(() => {
|
|
2086
|
-
const
|
|
2094
|
+
const p = t.actionsOffset?.x ?? 0, g = t.actionsOffset?.y ?? 0, E = p !== 0 || g !== 0;
|
|
2087
2095
|
return {
|
|
2088
2096
|
left: `${t.position.x}px`,
|
|
2089
2097
|
top: `${t.position.y}px`,
|
|
2090
|
-
transform:
|
|
2098
|
+
transform: E ? `translate(${p}px, ${g}px)` : "translateX(-100%)"
|
|
2091
2099
|
};
|
|
2092
2100
|
}), n = e, i = j(() => ({
|
|
2093
2101
|
debug: {
|
|
@@ -2122,77 +2130,77 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2122
2130
|
}
|
|
2123
2131
|
return Me(() => {
|
|
2124
2132
|
a && clearTimeout(a);
|
|
2125
|
-
}), (
|
|
2133
|
+
}), (p, g) => (D(), T("div", {
|
|
2126
2134
|
class: "flow-canvas-node-actions",
|
|
2127
|
-
style:
|
|
2135
|
+
style: be(o.value)
|
|
2128
2136
|
}, [
|
|
2129
|
-
|
|
2130
|
-
i.value.debug.visible ? (D(),
|
|
2137
|
+
F("div", oo, [
|
|
2138
|
+
i.value.debug.visible ? (D(), T("i", {
|
|
2131
2139
|
key: 0,
|
|
2132
2140
|
class: se(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
|
|
2133
|
-
onClick:
|
|
2134
|
-
}, null, 2)) :
|
|
2135
|
-
i.value.delete.visible ? (D(),
|
|
2141
|
+
onClick: g[0] || (g[0] = (E) => !i.value.debug.disabled && n("action", "debug", s.node.id))
|
|
2142
|
+
}, null, 2)) : Z("", !0),
|
|
2143
|
+
i.value.delete.visible ? (D(), T("i", {
|
|
2136
2144
|
key: 1,
|
|
2137
2145
|
class: se(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
|
|
2138
|
-
onClick:
|
|
2139
|
-
}, null, 2)) :
|
|
2140
|
-
r.value ? (D(),
|
|
2146
|
+
onClick: g[1] || (g[1] = (E) => !i.value.delete.disabled && n("action", "delete", s.node.id))
|
|
2147
|
+
}, null, 2)) : Z("", !0),
|
|
2148
|
+
r.value ? (D(), T("div", {
|
|
2141
2149
|
key: 2,
|
|
2142
2150
|
class: "flow-canvas-node-actions__more-wrapper",
|
|
2143
2151
|
onMouseenter: h,
|
|
2144
2152
|
onMouseleave: u
|
|
2145
|
-
}, [...
|
|
2146
|
-
|
|
2147
|
-
])], 32)) :
|
|
2153
|
+
}, [...g[5] || (g[5] = [
|
|
2154
|
+
F("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
|
|
2155
|
+
])], 32)) : Z("", !0)
|
|
2148
2156
|
]),
|
|
2149
2157
|
et(tt, { name: "flow-canvas-fade" }, {
|
|
2150
|
-
default:
|
|
2151
|
-
l.value && r.value ? (D(),
|
|
2158
|
+
default: $e(() => [
|
|
2159
|
+
l.value && r.value ? (D(), T("div", {
|
|
2152
2160
|
key: 0,
|
|
2153
2161
|
class: "flow-canvas-node-actions__dropdown",
|
|
2154
2162
|
onMouseenter: h,
|
|
2155
2163
|
onMouseleave: u
|
|
2156
2164
|
}, [
|
|
2157
|
-
i.value.copy.visible ? (D(),
|
|
2165
|
+
i.value.copy.visible ? (D(), T("div", {
|
|
2158
2166
|
key: 0,
|
|
2159
2167
|
class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
|
|
2160
|
-
onClick:
|
|
2161
|
-
}, [...
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
])], 2)) :
|
|
2165
|
-
i.value.copyInsert.visible ? (D(),
|
|
2168
|
+
onClick: g[2] || (g[2] = (E) => !i.value.copy.disabled && n("action", "copy", s.node.id))
|
|
2169
|
+
}, [...g[6] || (g[6] = [
|
|
2170
|
+
F("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
|
|
2171
|
+
F("span", null, "复制", -1)
|
|
2172
|
+
])], 2)) : Z("", !0),
|
|
2173
|
+
i.value.copyInsert.visible ? (D(), T("div", {
|
|
2166
2174
|
key: 1,
|
|
2167
2175
|
class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
|
|
2168
|
-
onClick:
|
|
2169
|
-
}, [...
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
])], 2)) :
|
|
2173
|
-
i.value.disconnect.visible ? (D(),
|
|
2176
|
+
onClick: g[3] || (g[3] = (E) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
|
|
2177
|
+
}, [...g[7] || (g[7] = [
|
|
2178
|
+
F("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
|
|
2179
|
+
F("span", null, "复制并插入", -1)
|
|
2180
|
+
])], 2)) : Z("", !0),
|
|
2181
|
+
i.value.disconnect.visible ? (D(), T("div", {
|
|
2174
2182
|
key: 2,
|
|
2175
2183
|
class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
|
|
2176
|
-
onClick:
|
|
2177
|
-
}, [...
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
])], 2)) :
|
|
2181
|
-
], 32)) :
|
|
2184
|
+
onClick: g[4] || (g[4] = (E) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
|
|
2185
|
+
}, [...g[8] || (g[8] = [
|
|
2186
|
+
F("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
|
|
2187
|
+
F("span", null, "断开连线", -1)
|
|
2188
|
+
])], 2)) : Z("", !0)
|
|
2189
|
+
], 32)) : Z("", !0)
|
|
2182
2190
|
]),
|
|
2183
2191
|
_: 1
|
|
2184
2192
|
})
|
|
2185
2193
|
], 4));
|
|
2186
2194
|
}
|
|
2187
|
-
}),
|
|
2195
|
+
}), ve = (s, e) => {
|
|
2188
2196
|
const t = s.__vccOpts || s;
|
|
2189
2197
|
for (const [o, n] of e)
|
|
2190
2198
|
t[o] = n;
|
|
2191
2199
|
return t;
|
|
2192
|
-
},
|
|
2200
|
+
}, so = /* @__PURE__ */ ve(no, [["__scopeId", "data-v-3b39dab5"]]), io = {
|
|
2193
2201
|
key: 0,
|
|
2194
2202
|
class: "flow-canvas-quick-add__tooltip"
|
|
2195
|
-
},
|
|
2203
|
+
}, ro = 5, ao = /* @__PURE__ */ ge({
|
|
2196
2204
|
__name: "node-quick-add-popover",
|
|
2197
2205
|
props: {
|
|
2198
2206
|
node: {},
|
|
@@ -2201,80 +2209,80 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2201
2209
|
emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
|
|
2202
2210
|
setup(s, { expose: e, emit: t }) {
|
|
2203
2211
|
const o = s, n = t, i = q(), r = q(), l = q(!1), a = q(!1);
|
|
2204
|
-
let h = null, u = !1,
|
|
2205
|
-
function
|
|
2206
|
-
z.preventDefault(), z.stopPropagation(), h = { x: z.clientX, y: z.clientY }, u = !1, document.addEventListener("mousemove",
|
|
2212
|
+
let h = null, u = !1, p = null;
|
|
2213
|
+
function g(z) {
|
|
2214
|
+
z.preventDefault(), z.stopPropagation(), h = { x: z.clientX, y: z.clientY }, u = !1, document.addEventListener("mousemove", E), document.addEventListener("mouseup", m);
|
|
2207
2215
|
}
|
|
2208
|
-
function
|
|
2216
|
+
function E(z) {
|
|
2209
2217
|
if (!h) return;
|
|
2210
|
-
const
|
|
2211
|
-
Math.sqrt(
|
|
2218
|
+
const _ = z.clientX - h.x, y = z.clientY - h.y;
|
|
2219
|
+
Math.sqrt(_ * _ + y * y) >= ro && (u = !0, C(), n("start-drag", o.node.id));
|
|
2212
2220
|
}
|
|
2213
2221
|
function m() {
|
|
2214
|
-
|
|
2222
|
+
C(), u || M(), h = null, u = !1;
|
|
2215
2223
|
}
|
|
2216
|
-
function
|
|
2217
|
-
document.removeEventListener("mousemove",
|
|
2224
|
+
function C() {
|
|
2225
|
+
document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", m);
|
|
2218
2226
|
}
|
|
2219
|
-
function
|
|
2220
|
-
a.value ?
|
|
2227
|
+
function M() {
|
|
2228
|
+
a.value ? A() : R();
|
|
2221
2229
|
}
|
|
2222
|
-
function
|
|
2230
|
+
function R() {
|
|
2223
2231
|
a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
|
|
2224
|
-
document.addEventListener("mousedown",
|
|
2232
|
+
document.addEventListener("mousedown", B);
|
|
2225
2233
|
});
|
|
2226
2234
|
}
|
|
2227
|
-
function
|
|
2228
|
-
a.value = !1, n("close"), document.removeEventListener("mousedown",
|
|
2235
|
+
function A() {
|
|
2236
|
+
a.value = !1, n("close"), document.removeEventListener("mousedown", B);
|
|
2229
2237
|
}
|
|
2230
|
-
function
|
|
2231
|
-
const
|
|
2232
|
-
i.value?.contains(
|
|
2238
|
+
function B(z) {
|
|
2239
|
+
const _ = z.target;
|
|
2240
|
+
i.value?.contains(_) || r.value?.contains(_) || A();
|
|
2233
2241
|
}
|
|
2234
|
-
function
|
|
2242
|
+
function V() {
|
|
2235
2243
|
a.value || n("mouseleave");
|
|
2236
2244
|
}
|
|
2237
2245
|
function O() {
|
|
2238
|
-
|
|
2246
|
+
p && (clearTimeout(p), p = null), n("mouseenter");
|
|
2239
2247
|
}
|
|
2240
2248
|
function W() {
|
|
2241
|
-
|
|
2242
|
-
|
|
2249
|
+
p = setTimeout(() => {
|
|
2250
|
+
A(), n("mouseleave"), p = null;
|
|
2243
2251
|
}, 150);
|
|
2244
2252
|
}
|
|
2245
2253
|
return Me(() => {
|
|
2246
|
-
|
|
2247
|
-
}), e({ closePopover:
|
|
2254
|
+
C(), p && clearTimeout(p), document.removeEventListener("mousedown", B);
|
|
2255
|
+
}), e({ closePopover: A }), (z, _) => (D(), T("div", {
|
|
2248
2256
|
class: "flow-canvas-quick-add",
|
|
2249
|
-
style:
|
|
2250
|
-
onMouseenter:
|
|
2251
|
-
onMouseleave:
|
|
2252
|
-
onClick:
|
|
2257
|
+
style: be({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
|
|
2258
|
+
onMouseenter: _[2] || (_[2] = (y) => n("mouseenter")),
|
|
2259
|
+
onMouseleave: V,
|
|
2260
|
+
onClick: _[3] || (_[3] = at(() => {
|
|
2253
2261
|
}, ["stop"]))
|
|
2254
2262
|
}, [
|
|
2255
|
-
|
|
2263
|
+
F("div", {
|
|
2256
2264
|
ref_key: "btnRef",
|
|
2257
2265
|
ref: i,
|
|
2258
2266
|
class: se(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
|
|
2259
|
-
onMouseenter:
|
|
2260
|
-
onMouseleave:
|
|
2261
|
-
onMousedown:
|
|
2262
|
-
}, [...
|
|
2263
|
-
|
|
2267
|
+
onMouseenter: _[0] || (_[0] = (y) => l.value = !0),
|
|
2268
|
+
onMouseleave: _[1] || (_[1] = (y) => l.value = !1),
|
|
2269
|
+
onMousedown: g
|
|
2270
|
+
}, [..._[4] || (_[4] = [
|
|
2271
|
+
F("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
|
|
2264
2272
|
])], 34),
|
|
2265
|
-
l.value && !a.value ? (D(),
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2273
|
+
l.value && !a.value ? (D(), T("div", io, [..._[5] || (_[5] = [
|
|
2274
|
+
F("div", null, [
|
|
2275
|
+
F("b", null, "点击"),
|
|
2276
|
+
Ge(" 添加节点")
|
|
2269
2277
|
], -1),
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2278
|
+
F("div", null, [
|
|
2279
|
+
F("b", null, "拖拽"),
|
|
2280
|
+
Ge(" 连接节点")
|
|
2273
2281
|
], -1)
|
|
2274
|
-
])])) :
|
|
2282
|
+
])])) : Z("", !0),
|
|
2275
2283
|
et(tt, { name: "flow-canvas-fade" }, {
|
|
2276
|
-
default:
|
|
2277
|
-
a.value ? (D(),
|
|
2284
|
+
default: $e(() => [
|
|
2285
|
+
a.value ? (D(), T("div", {
|
|
2278
2286
|
key: 0,
|
|
2279
2287
|
ref_key: "popoverRef",
|
|
2280
2288
|
ref: r,
|
|
@@ -2282,16 +2290,16 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2282
2290
|
onMouseenter: O,
|
|
2283
2291
|
onMouseleave: W
|
|
2284
2292
|
}, [
|
|
2285
|
-
|
|
2286
|
-
|
|
2293
|
+
Ie(z.$slots, "default", {}, () => [
|
|
2294
|
+
_[6] || (_[6] = F("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
|
|
2287
2295
|
], !0)
|
|
2288
|
-
], 544)) :
|
|
2296
|
+
], 544)) : Z("", !0)
|
|
2289
2297
|
]),
|
|
2290
2298
|
_: 3
|
|
2291
2299
|
})
|
|
2292
2300
|
], 36));
|
|
2293
2301
|
}
|
|
2294
|
-
}),
|
|
2302
|
+
}), lo = /* @__PURE__ */ ve(ao, [["__scopeId", "data-v-336cc3b4"]]), co = { class: "flow-canvas-selection-actions__bar" }, uo = /* @__PURE__ */ ge({
|
|
2295
2303
|
__name: "selection-actions-toolbar",
|
|
2296
2304
|
props: {
|
|
2297
2305
|
position: {},
|
|
@@ -2304,19 +2312,19 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2304
2312
|
top: `${t.position.y}px`,
|
|
2305
2313
|
transform: "translateX(-100%)"
|
|
2306
2314
|
}));
|
|
2307
|
-
return (i, r) => (D(),
|
|
2315
|
+
return (i, r) => (D(), T("div", {
|
|
2308
2316
|
class: "flow-canvas-selection-actions",
|
|
2309
|
-
style:
|
|
2317
|
+
style: be(n.value)
|
|
2310
2318
|
}, [
|
|
2311
|
-
|
|
2312
|
-
|
|
2319
|
+
F("div", co, [
|
|
2320
|
+
F("i", {
|
|
2313
2321
|
class: se(["flow-canvas-icon canvas-shanchu flow-canvas-selection-actions__icon", { "is-disabled": !s.canDelete }]),
|
|
2314
2322
|
onClick: r[0] || (r[0] = (l) => s.canDelete && o("action", "delete"))
|
|
2315
2323
|
}, null, 2)
|
|
2316
2324
|
])
|
|
2317
2325
|
], 4));
|
|
2318
2326
|
}
|
|
2319
|
-
}),
|
|
2327
|
+
}), fo = /* @__PURE__ */ ve(uo, [["__scopeId", "data-v-25eb8b79"]]), go = { class: "flow-canvas-runtime-core__overlay" }, po = /* @__PURE__ */ ge({
|
|
2320
2328
|
__name: "canvas-runtime-core",
|
|
2321
2329
|
props: {
|
|
2322
2330
|
editor: {},
|
|
@@ -2324,16 +2332,17 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2324
2332
|
nodeActions: {},
|
|
2325
2333
|
quickAdd: {},
|
|
2326
2334
|
edgeDrop: {},
|
|
2327
|
-
getConnectionExcludedNodeIds: { type: Function }
|
|
2335
|
+
getConnectionExcludedNodeIds: { type: Function },
|
|
2336
|
+
toolbarInclude: {}
|
|
2328
2337
|
},
|
|
2329
2338
|
emits: ["ui-event"],
|
|
2330
2339
|
setup(s, { emit: e }) {
|
|
2331
2340
|
const t = s, o = e, n = q(), i = q();
|
|
2332
|
-
let r, l, a, h, u = null,
|
|
2333
|
-
const m =
|
|
2334
|
-
function O(
|
|
2341
|
+
let r, l, a, h, u = null, p = null, g = null, E = null;
|
|
2342
|
+
const m = Wt(), { hoveredNodeId: C, isDraggingNode: M } = m, R = m.enterOverlay, A = () => m.leaveOverlay(), B = q(0), V = q({ nodeIds: [], edgeIds: [] });
|
|
2343
|
+
function O(S) {
|
|
2335
2344
|
const I = t.editor.api.value;
|
|
2336
|
-
return I ? t.editor.schema.nodeTypes[
|
|
2345
|
+
return I ? t.editor.schema.nodeTypes[S.type]?.getBehavior?.(S, {
|
|
2337
2346
|
api: I,
|
|
2338
2347
|
flowModel: t.editor.flowModel.value,
|
|
2339
2348
|
history: t.editor.history,
|
|
@@ -2348,176 +2357,187 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2348
2357
|
showDisconnect: !0,
|
|
2349
2358
|
insertGap: 100,
|
|
2350
2359
|
...t.nodeActions
|
|
2351
|
-
})),
|
|
2360
|
+
})), _ = j(
|
|
2352
2361
|
() => {
|
|
2353
|
-
if (
|
|
2354
|
-
const
|
|
2355
|
-
for (const [
|
|
2362
|
+
if (B.value, !t.editor.api.value) return [];
|
|
2363
|
+
const S = t.editor.flowModel.value, I = t.editor.api.value.overlay, N = [];
|
|
2364
|
+
for (const [U, ae] of Object.entries(S.nodes)) {
|
|
2356
2365
|
const de = t.editor._pluginManager.collectNodeDecorations(ae);
|
|
2357
2366
|
if (!de?.badge) continue;
|
|
2358
|
-
const J = I.getNodeScreenRect(
|
|
2359
|
-
J &&
|
|
2360
|
-
nodeId:
|
|
2367
|
+
const J = I.getNodeScreenRect(U);
|
|
2368
|
+
J && N.push({
|
|
2369
|
+
nodeId: U,
|
|
2361
2370
|
x: J.x + J.width - 4,
|
|
2362
2371
|
y: J.y - 8,
|
|
2363
2372
|
badge: de.badge
|
|
2364
2373
|
});
|
|
2365
2374
|
}
|
|
2366
|
-
return
|
|
2375
|
+
return N;
|
|
2367
2376
|
}
|
|
2368
2377
|
), y = j(() => {
|
|
2369
|
-
|
|
2370
|
-
const
|
|
2371
|
-
if (!
|
|
2378
|
+
B.value;
|
|
2379
|
+
const S = C.value;
|
|
2380
|
+
if (!S || M.value || !t.editor.api.value || t.editor.mode.value !== "edit" || W.value)
|
|
2372
2381
|
return null;
|
|
2373
|
-
const
|
|
2374
|
-
if (!
|
|
2375
|
-
const
|
|
2376
|
-
if (!
|
|
2377
|
-
const ae = O(
|
|
2382
|
+
const N = t.editor.flowModel.value.nodes[S];
|
|
2383
|
+
if (!N) return null;
|
|
2384
|
+
const U = t.editor.api.value.overlay.getNodeScreenRect(S);
|
|
2385
|
+
if (!U) return null;
|
|
2386
|
+
const ae = O(N);
|
|
2378
2387
|
return ae.showActions === !1 ? null : {
|
|
2379
|
-
node:
|
|
2380
|
-
position: { x:
|
|
2388
|
+
node: N,
|
|
2389
|
+
position: { x: U.x + U.width, y: U.y + U.height + 4 },
|
|
2381
2390
|
behavior: ae
|
|
2382
2391
|
};
|
|
2383
2392
|
}), f = j(() => {
|
|
2384
|
-
if (
|
|
2385
|
-
const
|
|
2386
|
-
if (
|
|
2387
|
-
const I = t.editor.api.value.getSelectionBounds(
|
|
2393
|
+
if (B.value, !t.editor.api.value || t.editor.mode.value !== "edit") return null;
|
|
2394
|
+
const S = V.value;
|
|
2395
|
+
if (S.nodeIds.length + S.edgeIds.length <= 1) return null;
|
|
2396
|
+
const I = t.editor.api.value.getSelectionBounds(S);
|
|
2388
2397
|
if (!I) return null;
|
|
2389
|
-
const
|
|
2398
|
+
const N = rt(S, t.editor.flowModel.value, O);
|
|
2390
2399
|
return {
|
|
2391
2400
|
position: { x: I.x + I.width, y: I.y + I.height + 4 },
|
|
2392
|
-
canDelete:
|
|
2401
|
+
canDelete: N.nodeIds.length > 0 || N.edgeIds.length > 0
|
|
2393
2402
|
};
|
|
2394
|
-
}), d = q(), c =
|
|
2403
|
+
}), d = q(), c = Kt({
|
|
2395
2404
|
editor: t.editor,
|
|
2396
2405
|
quickAddProp: j(() => t.quickAdd),
|
|
2397
|
-
isDraggingNode:
|
|
2406
|
+
isDraggingNode: M,
|
|
2398
2407
|
nodeHover: m,
|
|
2399
2408
|
isSelectionModeActive: W,
|
|
2400
|
-
viewportVersion:
|
|
2409
|
+
viewportVersion: B,
|
|
2401
2410
|
getNodeBehavior: O,
|
|
2402
2411
|
getInsertGap: () => z.value.insertGap,
|
|
2403
2412
|
closePopover: () => d.value?.closePopover()
|
|
2404
|
-
}), v = c.data,
|
|
2413
|
+
}), v = c.data, w = c.handleOpen, x = c.handleClose, H = c.handleStartDrag, K = c.handleOverlayEnter, k = c.handleOverlayLeave, L = c.handleInsert, b = Qt({
|
|
2405
2414
|
editor: t.editor,
|
|
2406
2415
|
edgeDropProp: j(() => t.edgeDrop)
|
|
2407
|
-
}),
|
|
2408
|
-
function
|
|
2409
|
-
|
|
2416
|
+
}), P = Jt(t.editor);
|
|
2417
|
+
function G(S, I) {
|
|
2418
|
+
P.handleNodeAction(S, I, z.value.insertGap) && (C.value = null);
|
|
2410
2419
|
}
|
|
2411
|
-
function
|
|
2412
|
-
|
|
2420
|
+
function Y(S) {
|
|
2421
|
+
S === "delete" && P.deleteSelection(V.value);
|
|
2413
2422
|
}
|
|
2414
|
-
function
|
|
2423
|
+
function X(S) {
|
|
2415
2424
|
if (t.editor.mode.value !== "edit") return;
|
|
2416
|
-
|
|
2425
|
+
if ((S.metaKey || S.ctrlKey) && (S.key === "z" || S.key === "Z")) {
|
|
2426
|
+
if (S.shiftKey) {
|
|
2427
|
+
if (!t.toolbarInclude?.includes("redo")) return;
|
|
2428
|
+
t.editor.history.redo();
|
|
2429
|
+
} else {
|
|
2430
|
+
if (!t.toolbarInclude?.includes("undo")) return;
|
|
2431
|
+
t.editor.history.undo();
|
|
2432
|
+
}
|
|
2433
|
+
S.preventDefault();
|
|
2434
|
+
return;
|
|
2435
|
+
}
|
|
2436
|
+
t.editor._pluginManager.dispatchKeyboardShortcut(S) && (S.preventDefault(), S.stopPropagation());
|
|
2417
2437
|
}
|
|
2418
|
-
function ee(
|
|
2419
|
-
const
|
|
2420
|
-
const de =
|
|
2421
|
-
de &&
|
|
2438
|
+
function ee(S, I) {
|
|
2439
|
+
const N = r, U = (ae) => {
|
|
2440
|
+
const de = N.isRubberbandEnabled?.() ?? !1;
|
|
2441
|
+
de && N.disableRubberband?.(), ae ? r.enablePanning() : r.disablePanning(), de && N.enableRubberband?.();
|
|
2422
2442
|
};
|
|
2423
|
-
|
|
2443
|
+
S && I ? (N.enableSelection?.(), m.reset(), c.quickAddNodeId.value = null, c.quickAddPopoverOpen.value = !1, u?.remove(), U(!1), N.enableRubberband?.()) : (N.disableRubberband?.(), U(!0), N.disableSelection?.(), N.cleanSelection?.());
|
|
2424
2444
|
}
|
|
2425
|
-
function Q(
|
|
2445
|
+
function Q(S) {
|
|
2426
2446
|
r.on("node:move", ({ node: I }) => {
|
|
2427
|
-
|
|
2428
|
-
const
|
|
2429
|
-
|
|
2447
|
+
M.value = !0;
|
|
2448
|
+
const N = t.editor.flowModel.value.nodes[I.id];
|
|
2449
|
+
N && O(N).bringToFrontOnDrag === !1 || I.toFront?.();
|
|
2430
2450
|
}), r.on("node:moved", () => {
|
|
2431
|
-
|
|
2451
|
+
M.value = !1;
|
|
2432
2452
|
}), r.on("node:mouseenter", ({ node: I }) => {
|
|
2433
2453
|
if (W.value) {
|
|
2434
|
-
|
|
2454
|
+
C.value = null, c.quickAddNodeId.value = null, S.hideNodePorts(I);
|
|
2435
2455
|
return;
|
|
2436
2456
|
}
|
|
2437
2457
|
m.enter(I.id);
|
|
2438
|
-
const
|
|
2439
|
-
if (
|
|
2458
|
+
const N = t.editor.flowModel.value.nodes[I.id];
|
|
2459
|
+
if (N && O(N).showPorts === !1) {
|
|
2440
2460
|
c.mergedConfig.value.enabled && c.enter(I.id);
|
|
2441
2461
|
return;
|
|
2442
2462
|
}
|
|
2443
|
-
c.mergedConfig.value.enabled && c.enter(I.id) ||
|
|
2463
|
+
c.mergedConfig.value.enabled && c.enter(I.id) || S.showNodePorts(I);
|
|
2444
2464
|
}), r.on("node:mouseleave", ({ node: I }) => {
|
|
2445
2465
|
if (W.value) {
|
|
2446
|
-
|
|
2466
|
+
S.hideNodePorts(I);
|
|
2447
2467
|
return;
|
|
2448
2468
|
}
|
|
2449
|
-
const
|
|
2450
|
-
let
|
|
2451
|
-
|
|
2469
|
+
const N = t.editor.flowModel.value.nodes[I.id];
|
|
2470
|
+
let U = 100;
|
|
2471
|
+
N && O(N).actionsOffset && (U = 300), m.leave(U), c.mergedConfig.value.enabled ? c.quickAddNodeId.value === I.id && !c.quickAddPopoverOpen.value ? c.leave() : c.quickAddNodeId.value !== I.id && S.hideNodePorts(I) : S.hideNodePorts(I);
|
|
2452
2472
|
});
|
|
2453
2473
|
}
|
|
2454
|
-
function oe(
|
|
2474
|
+
function oe(S) {
|
|
2455
2475
|
r.on("edge:added", ({ edge: I }) => {
|
|
2456
|
-
let
|
|
2476
|
+
let N;
|
|
2457
2477
|
if (t.getConnectionExcludedNodeIds && !I.getTargetCell()) {
|
|
2458
|
-
const
|
|
2459
|
-
if (
|
|
2460
|
-
const ae = t.getConnectionExcludedNodeIds(
|
|
2461
|
-
|
|
2478
|
+
const U = I.getSourceCell();
|
|
2479
|
+
if (U) {
|
|
2480
|
+
const ae = t.getConnectionExcludedNodeIds(U.id);
|
|
2481
|
+
N = ae instanceof Set ? ae : new Set(ae);
|
|
2462
2482
|
}
|
|
2463
2483
|
}
|
|
2464
|
-
|
|
2484
|
+
S.handleEdgeAdded(I, N);
|
|
2465
2485
|
}), r.on("edge:connected", () => {
|
|
2466
|
-
|
|
2486
|
+
S.handleEdgeConnected();
|
|
2467
2487
|
}), r.on("edge:removed", ({ edge: I }) => {
|
|
2468
|
-
|
|
2469
|
-
}), r.on("edge:mouseenter", ({ edge: I, e:
|
|
2470
|
-
const
|
|
2471
|
-
l.setHoveredEdge(I.id),
|
|
2488
|
+
S.handleEdgeRemoved(I.id), u.handleEdgeRemoved(I.id);
|
|
2489
|
+
}), r.on("edge:mouseenter", ({ edge: I, e: N }) => {
|
|
2490
|
+
const U = l.getHoveredEdgeId();
|
|
2491
|
+
l.setHoveredEdge(I.id), U && U !== I.id && l.refreshSingleEdgeStyle(U), l.refreshSingleEdgeStyle(I.id), t.editor.mode.value === "edit" && !W.value && S.canShowEdgeTool() && u.show(I.id, N);
|
|
2472
2492
|
}), r.on("edge:mouseleave", ({ edge: I }) => {
|
|
2473
2493
|
l.setHoveredEdge(null), l.refreshSingleEdgeStyle(I.id), u.remove();
|
|
2474
|
-
}), r.on("edge:click", ({ edge: I, e:
|
|
2475
|
-
|
|
2494
|
+
}), r.on("edge:click", ({ edge: I, e: N }) => {
|
|
2495
|
+
N.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (u.remove(), t.editor.executeCommand({
|
|
2476
2496
|
id: te(),
|
|
2477
2497
|
source: "user:toolbar",
|
|
2478
2498
|
label: "删除连线",
|
|
2479
2499
|
timestamp: Date.now(),
|
|
2480
2500
|
commands: [{ type: "edge.remove", edgeId: I.id }]
|
|
2481
2501
|
}));
|
|
2482
|
-
}),
|
|
2502
|
+
}), p = (I) => u.move(I), r.container.addEventListener("mousemove", p);
|
|
2483
2503
|
}
|
|
2484
2504
|
function ie() {
|
|
2485
|
-
|
|
2486
|
-
if (!
|
|
2487
|
-
const I =
|
|
2505
|
+
g = (S) => {
|
|
2506
|
+
if (!C.value && !c.quickAddNodeId.value) return;
|
|
2507
|
+
const I = S.target;
|
|
2488
2508
|
if (I?.closest?.(".x6-node") || I?.closest?.(".flow-canvas-node-actions") || I?.closest?.(".flow-canvas-quick-add")) {
|
|
2489
2509
|
m.cancelLeave(), c.cancelLeave();
|
|
2490
2510
|
return;
|
|
2491
2511
|
}
|
|
2492
2512
|
m.leave(180), c.quickAddPopoverOpen.value || c.leave();
|
|
2493
|
-
}, n.value?.addEventListener("mousemove",
|
|
2513
|
+
}, n.value?.addEventListener("mousemove", g), E = () => {
|
|
2494
2514
|
m.reset(), c.quickAddPopoverOpen.value || (c.quickAddNodeId.value = null);
|
|
2495
|
-
}, n.value?.addEventListener("mouseleave",
|
|
2515
|
+
}, n.value?.addEventListener("mouseleave", E), n.value?.addEventListener("keydown", X);
|
|
2496
2516
|
}
|
|
2497
2517
|
function ne() {
|
|
2498
|
-
|
|
2518
|
+
he(
|
|
2499
2519
|
() => t.editor.flowModel.value,
|
|
2500
|
-
(
|
|
2501
|
-
),
|
|
2520
|
+
(S) => l.syncFlowModel(S)
|
|
2521
|
+
), he(
|
|
2502
2522
|
[() => t.editor.mode.value, () => t.editor.selectionMode.value],
|
|
2503
|
-
([
|
|
2504
|
-
ee(
|
|
2523
|
+
([S, I]) => {
|
|
2524
|
+
ee(S === "edit", I);
|
|
2505
2525
|
},
|
|
2506
2526
|
{ immediate: !0 }
|
|
2507
2527
|
);
|
|
2508
2528
|
}
|
|
2509
2529
|
return ot(() => {
|
|
2510
2530
|
if (!i.value) return;
|
|
2511
|
-
const
|
|
2531
|
+
const S = /* @__PURE__ */ new Set(["model", "container"]), I = {};
|
|
2512
2532
|
if (t.graphOptions)
|
|
2513
2533
|
for (const [$, re] of Object.entries(t.graphOptions)) {
|
|
2514
|
-
if (
|
|
2534
|
+
if (S.has($)) {
|
|
2515
2535
|
console.warn(`[flow-canvas] graphOptions.${$} is managed by the engine and will be ignored`);
|
|
2516
2536
|
continue;
|
|
2517
2537
|
}
|
|
2518
2538
|
I[$] = re;
|
|
2519
2539
|
}
|
|
2520
|
-
r = new
|
|
2540
|
+
r = new gt({
|
|
2521
2541
|
container: i.value,
|
|
2522
2542
|
autoResize: !0,
|
|
2523
2543
|
background: { color: "#edf2fc" },
|
|
@@ -2543,11 +2563,11 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2543
2563
|
connectionPoint: "anchor",
|
|
2544
2564
|
snap: { radius: 30 },
|
|
2545
2565
|
createEdge() {
|
|
2546
|
-
return
|
|
2566
|
+
return to(this, t.editor.schema);
|
|
2547
2567
|
}
|
|
2548
2568
|
},
|
|
2549
2569
|
...I
|
|
2550
|
-
}), a = new
|
|
2570
|
+
}), a = new Ht(), l = new Bt(
|
|
2551
2571
|
r,
|
|
2552
2572
|
t.editor.schema,
|
|
2553
2573
|
a,
|
|
@@ -2560,10 +2580,10 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2560
2580
|
mode: t.editor.mode.value
|
|
2561
2581
|
} : null
|
|
2562
2582
|
);
|
|
2563
|
-
const
|
|
2583
|
+
const N = qt(r), U = jt({
|
|
2564
2584
|
graph: r,
|
|
2565
|
-
overlayManager:
|
|
2566
|
-
executeCommand: ($) => t.editor.executeCommand($),
|
|
2585
|
+
overlayManager: N,
|
|
2586
|
+
executeCommand: ($) => t.editor.executeCommand(b.tryExpandForEdgeDrop($)),
|
|
2567
2587
|
schema: t.editor.schema,
|
|
2568
2588
|
flowModel: t.editor.flowModel,
|
|
2569
2589
|
getNodeBehavior: O,
|
|
@@ -2574,20 +2594,20 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2574
2594
|
l.setHighlightedNodes($);
|
|
2575
2595
|
const ce = l.setHighlightedEdges(re);
|
|
2576
2596
|
l.refreshNodeHighlights();
|
|
2577
|
-
const
|
|
2578
|
-
for (const
|
|
2579
|
-
|
|
2580
|
-
for (const
|
|
2581
|
-
ce.has(
|
|
2597
|
+
const ye = new Set(re);
|
|
2598
|
+
for (const me of ce)
|
|
2599
|
+
ye.has(me) || l.refreshSingleEdgeStyle(me);
|
|
2600
|
+
for (const me of ye)
|
|
2601
|
+
ce.has(me) || l.refreshSingleEdgeStyle(me);
|
|
2582
2602
|
},
|
|
2583
2603
|
resolveNodeShape: ($) => {
|
|
2584
2604
|
const re = t.editor.schema.nodeTypes[$];
|
|
2585
2605
|
if (!re) return null;
|
|
2586
|
-
const ce = a.registerNodeType($, re.component),
|
|
2587
|
-
return { shapeName: ce, width:
|
|
2606
|
+
const ce = a.registerNodeType($, re.component), ye = re.getSize({ id: "", type: $, position: { x: 0, y: 0 } });
|
|
2607
|
+
return { shapeName: ce, width: ye.width, height: ye.height };
|
|
2588
2608
|
}
|
|
2589
2609
|
});
|
|
2590
|
-
t.editor.api.value =
|
|
2610
|
+
t.editor.api.value = U;
|
|
2591
2611
|
const ae = {
|
|
2592
2612
|
flowModel: t.editor.flowModel,
|
|
2593
2613
|
history: t.editor.history,
|
|
@@ -2596,39 +2616,39 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2596
2616
|
idGenerator: t.editor.idGenerator,
|
|
2597
2617
|
executeCommand: t.editor.executeCommand,
|
|
2598
2618
|
selectionMode: t.editor.selectionMode,
|
|
2599
|
-
api:
|
|
2600
|
-
overlay:
|
|
2619
|
+
api: U,
|
|
2620
|
+
overlay: N,
|
|
2601
2621
|
graph: r
|
|
2602
2622
|
};
|
|
2603
2623
|
t.editor._pluginManager.attachRuntime(ae);
|
|
2604
2624
|
const de = t.editor._pluginManager.collectExtendedApi();
|
|
2605
2625
|
Object.assign(t.editor.extendedApi, de), t.editor._emitUiEvent = ($) => {
|
|
2606
2626
|
t.editor._pluginManager.dispatchUiEvent($), o("ui-event", $);
|
|
2607
|
-
}, h = new
|
|
2627
|
+
}, h = new Gt(
|
|
2608
2628
|
r,
|
|
2609
2629
|
($) => {
|
|
2610
2630
|
($.type === "node.click" || $.type === "node.dblclick" || $.type === "node.contextmenu") && m.enter($.nodeId), t.editor._emitUiEvent($);
|
|
2611
2631
|
},
|
|
2612
2632
|
($) => {
|
|
2613
2633
|
if (l.isSyncing) return;
|
|
2614
|
-
const re =
|
|
2634
|
+
const re = b.tryExpandForEdgeDrop($);
|
|
2615
2635
|
if (t.editor.executeCommand(re).status !== "applied") {
|
|
2616
|
-
for (const
|
|
2617
|
-
if (
|
|
2618
|
-
const
|
|
2619
|
-
|
|
2636
|
+
for (const ye of re.commands)
|
|
2637
|
+
if (ye.type === "edge.add") {
|
|
2638
|
+
const me = r.getCellById(ye.edge.id);
|
|
2639
|
+
me && r.removeCell(me);
|
|
2620
2640
|
}
|
|
2621
2641
|
}
|
|
2622
2642
|
},
|
|
2623
2643
|
t.editor.flowModel,
|
|
2624
2644
|
t.editor.idGenerator
|
|
2625
|
-
), u =
|
|
2626
|
-
const J =
|
|
2627
|
-
c.attachRuntime(r, ($) => J.hideNodePorts($)),
|
|
2645
|
+
), u = Vt(r);
|
|
2646
|
+
const J = Xt(r);
|
|
2647
|
+
c.attachRuntime(r, ($) => J.hideNodePorts($)), b.attachRuntime(r), Q(J), oe(J);
|
|
2628
2648
|
let Ae = /* @__PURE__ */ new Set();
|
|
2629
2649
|
r.on("selection:changed", () => {
|
|
2630
|
-
const $ =
|
|
2631
|
-
|
|
2650
|
+
const $ = it(r.getSelectedCells?.() ?? []);
|
|
2651
|
+
V.value = $, t.editor._pluginManager.dispatchSelectionChange($), o("ui-event", {
|
|
2632
2652
|
type: "selection.change",
|
|
2633
2653
|
nodeIds: $.nodeIds,
|
|
2634
2654
|
edgeIds: $.edgeIds
|
|
@@ -2641,74 +2661,74 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2641
2661
|
Ae = re;
|
|
2642
2662
|
});
|
|
2643
2663
|
const Pe = () => {
|
|
2644
|
-
|
|
2664
|
+
B.value++;
|
|
2645
2665
|
};
|
|
2646
2666
|
r.on("translate", Pe), r.on("scale", Pe), r.on("resize", Pe), ie(), l.syncFlowModel(t.editor.flowModel.value), ne();
|
|
2647
2667
|
}), Me(() => {
|
|
2648
|
-
m.cleanup(), c.cleanup(),
|
|
2649
|
-
for (const
|
|
2650
|
-
delete t.editor.extendedApi[
|
|
2668
|
+
m.cleanup(), c.cleanup(), b.cleanup(), u?.remove(), p && r?.container?.removeEventListener("mousemove", p), g && n.value?.removeEventListener("mousemove", g), E && n.value?.removeEventListener("mouseleave", E), n.value?.removeEventListener("keydown", X), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
|
|
2669
|
+
for (const S of Object.keys(t.editor.extendedApi))
|
|
2670
|
+
delete t.editor.extendedApi[S];
|
|
2651
2671
|
h?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
|
|
2652
|
-
}), (
|
|
2672
|
+
}), (S, I) => (D(), T("div", {
|
|
2653
2673
|
ref_key: "rootRef",
|
|
2654
2674
|
ref: n,
|
|
2655
2675
|
class: se(["flow-canvas-runtime-core", { "flow-canvas-runtime-core--selection-mode": W.value }]),
|
|
2656
2676
|
tabindex: "0"
|
|
2657
2677
|
}, [
|
|
2658
|
-
|
|
2678
|
+
F("div", {
|
|
2659
2679
|
ref_key: "containerRef",
|
|
2660
2680
|
ref: i,
|
|
2661
2681
|
class: "flow-canvas-runtime-core__graph"
|
|
2662
2682
|
}, null, 512),
|
|
2663
|
-
|
|
2664
|
-
(D(!0),
|
|
2665
|
-
key: `badge-${
|
|
2683
|
+
F("div", go, [
|
|
2684
|
+
(D(!0), T(pe, null, Ee(_.value, (N) => (D(), T("div", {
|
|
2685
|
+
key: `badge-${N.nodeId}`,
|
|
2666
2686
|
class: "flow-canvas-runtime-core__badge",
|
|
2667
|
-
style:
|
|
2668
|
-
},
|
|
2669
|
-
le(v) ? (D(),
|
|
2687
|
+
style: be({ left: `${N.x}px`, top: `${N.y}px`, backgroundColor: N.badge.color })
|
|
2688
|
+
}, ue(N.badge.text), 5))), 128)),
|
|
2689
|
+
le(v) ? (D(), we(lo, {
|
|
2670
2690
|
key: 0,
|
|
2671
2691
|
ref_key: "quickAddPopoverRef",
|
|
2672
2692
|
ref: d,
|
|
2673
2693
|
node: le(v).node,
|
|
2674
2694
|
"port-position": le(v).portPosition,
|
|
2675
|
-
onOpen: le(
|
|
2676
|
-
onClose: le(
|
|
2677
|
-
onStartDrag: le(
|
|
2678
|
-
onMouseenter: le(
|
|
2679
|
-
onMouseleave: le(
|
|
2695
|
+
onOpen: le(w),
|
|
2696
|
+
onClose: le(x),
|
|
2697
|
+
onStartDrag: le(H),
|
|
2698
|
+
onMouseenter: le(K),
|
|
2699
|
+
onMouseleave: le(k)
|
|
2680
2700
|
}, {
|
|
2681
|
-
default:
|
|
2682
|
-
|
|
2701
|
+
default: $e(() => [
|
|
2702
|
+
Ie(S.$slots, "quick-add-panel", {
|
|
2683
2703
|
node: le(v).node,
|
|
2684
2704
|
api: s.editor.api.value,
|
|
2685
|
-
insertNodeToRight: (
|
|
2705
|
+
insertNodeToRight: (N) => le(L)(le(v).node.id, N),
|
|
2686
2706
|
closePopover: () => d.value?.closePopover()
|
|
2687
2707
|
}, void 0, !0)
|
|
2688
2708
|
]),
|
|
2689
2709
|
_: 3
|
|
2690
|
-
}, 8, ["node", "port-position", "onOpen", "onClose", "onStartDrag", "onMouseenter", "onMouseleave"])) :
|
|
2691
|
-
y.value ? (D(),
|
|
2710
|
+
}, 8, ["node", "port-position", "onOpen", "onClose", "onStartDrag", "onMouseenter", "onMouseleave"])) : Z("", !0),
|
|
2711
|
+
y.value ? (D(), we(so, {
|
|
2692
2712
|
key: 1,
|
|
2693
2713
|
node: y.value.node,
|
|
2694
2714
|
position: y.value.position,
|
|
2695
2715
|
config: z.value,
|
|
2696
2716
|
behavior: y.value.behavior,
|
|
2697
2717
|
"actions-offset": y.value.behavior.actionsOffset,
|
|
2698
|
-
onAction:
|
|
2699
|
-
onMouseenter: le(
|
|
2700
|
-
onMouseleave:
|
|
2701
|
-
}, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) :
|
|
2702
|
-
f.value ? (D(),
|
|
2718
|
+
onAction: G,
|
|
2719
|
+
onMouseenter: le(R),
|
|
2720
|
+
onMouseleave: A
|
|
2721
|
+
}, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : Z("", !0),
|
|
2722
|
+
f.value ? (D(), we(fo, {
|
|
2703
2723
|
key: 2,
|
|
2704
2724
|
position: f.value.position,
|
|
2705
2725
|
"can-delete": f.value.canDelete,
|
|
2706
|
-
onAction:
|
|
2707
|
-
}, null, 8, ["position", "can-delete"])) :
|
|
2726
|
+
onAction: Y
|
|
2727
|
+
}, null, 8, ["position", "can-delete"])) : Z("", !0)
|
|
2708
2728
|
])
|
|
2709
2729
|
], 2));
|
|
2710
2730
|
}
|
|
2711
|
-
}),
|
|
2731
|
+
}), vn = /* @__PURE__ */ ve(po, [["__scopeId", "data-v-cd58116b"]]), ho = { class: "flow-canvas-node-palette" }, vo = ["data-node-type"], yo = { class: "flow-canvas-node-palette__item-label" }, mo = /* @__PURE__ */ ge({
|
|
2712
2732
|
__name: "canvas-node-palette",
|
|
2713
2733
|
props: {
|
|
2714
2734
|
editor: {},
|
|
@@ -2719,51 +2739,51 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2719
2739
|
type: n,
|
|
2720
2740
|
label: n.charAt(0).toUpperCase() + n.slice(1)
|
|
2721
2741
|
})));
|
|
2722
|
-
return
|
|
2742
|
+
return he(
|
|
2723
2743
|
[() => e.editor.api.value, o, t],
|
|
2724
2744
|
([n, i, r], l, a) => {
|
|
2725
2745
|
if (!n || !r) return;
|
|
2726
2746
|
const h = [];
|
|
2727
2747
|
for (const u of i) {
|
|
2728
|
-
const
|
|
2729
|
-
if (!
|
|
2730
|
-
const
|
|
2748
|
+
const p = r.querySelector(`[data-node-type="${u.type}"]`);
|
|
2749
|
+
if (!p) continue;
|
|
2750
|
+
const g = n.registerDndSource(p, () => ({
|
|
2731
2751
|
id: te(),
|
|
2732
2752
|
type: u.type,
|
|
2733
2753
|
label: u.label,
|
|
2734
2754
|
position: { x: 0, y: 0 }
|
|
2735
2755
|
}));
|
|
2736
|
-
h.push(
|
|
2756
|
+
h.push(g);
|
|
2737
2757
|
}
|
|
2738
2758
|
a(() => {
|
|
2739
2759
|
for (const u of h) u();
|
|
2740
2760
|
});
|
|
2741
2761
|
},
|
|
2742
2762
|
{ flush: "post" }
|
|
2743
|
-
), (n, i) => (D(),
|
|
2744
|
-
|
|
2763
|
+
), (n, i) => (D(), T("div", ho, [
|
|
2764
|
+
F("div", {
|
|
2745
2765
|
ref_key: "listRef",
|
|
2746
2766
|
ref: t,
|
|
2747
2767
|
class: "flow-canvas-node-palette__list"
|
|
2748
2768
|
}, [
|
|
2749
|
-
(D(!0),
|
|
2769
|
+
(D(!0), T(pe, null, Ee(o.value, (r) => (D(), T("div", {
|
|
2750
2770
|
key: r.type,
|
|
2751
2771
|
class: "flow-canvas-node-palette__item",
|
|
2752
2772
|
"data-node-type": r.type
|
|
2753
2773
|
}, [
|
|
2754
|
-
r.icon ? (D(),
|
|
2774
|
+
r.icon ? (D(), T("i", {
|
|
2755
2775
|
key: 0,
|
|
2756
2776
|
class: se([r.icon, "flow-canvas-node-palette__item-icon"])
|
|
2757
|
-
}, null, 2)) :
|
|
2758
|
-
|
|
2759
|
-
], 8,
|
|
2777
|
+
}, null, 2)) : Z("", !0),
|
|
2778
|
+
F("span", yo, ue(r.label), 1)
|
|
2779
|
+
], 8, vo))), 128))
|
|
2760
2780
|
], 512)
|
|
2761
2781
|
]));
|
|
2762
2782
|
}
|
|
2763
|
-
}),
|
|
2783
|
+
}), bo = /* @__PURE__ */ ve(mo, [["__scopeId", "data-v-300314b7"]]), wo = { class: "flow-canvas-layout" }, Eo = { class: "flow-canvas-layout__main" }, xo = { class: "flow-canvas-layout__content" }, Io = {
|
|
2764
2784
|
key: 0,
|
|
2765
2785
|
class: "flow-canvas-layout__footer"
|
|
2766
|
-
},
|
|
2786
|
+
}, Co = /* @__PURE__ */ ge({
|
|
2767
2787
|
__name: "canvas-layout",
|
|
2768
2788
|
props: {
|
|
2769
2789
|
sidebarCollapsed: { type: Boolean, default: !1 },
|
|
@@ -2775,39 +2795,40 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
|
|
|
2775
2795
|
},
|
|
2776
2796
|
emits: ["update:sidebarCollapsed"],
|
|
2777
2797
|
setup(s) {
|
|
2778
|
-
return (e, t) => (D(),
|
|
2779
|
-
!s.hideSidebar && (e.$slots.sidebar || s.editor) ? (D(),
|
|
2798
|
+
return (e, t) => (D(), T("div", wo, [
|
|
2799
|
+
!s.hideSidebar && (e.$slots.sidebar || s.editor) ? (D(), T("aside", {
|
|
2780
2800
|
key: 0,
|
|
2781
2801
|
class: se(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
|
|
2782
|
-
style:
|
|
2802
|
+
style: be({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
|
|
2783
2803
|
}, [
|
|
2784
|
-
|
|
2785
|
-
s.editor ? (D(),
|
|
2804
|
+
Ie(e.$slots, "sidebar", {}, () => [
|
|
2805
|
+
s.editor ? (D(), we(bo, {
|
|
2786
2806
|
key: 0,
|
|
2787
2807
|
editor: s.editor,
|
|
2788
2808
|
items: s.paletteItems
|
|
2789
|
-
}, null, 8, ["editor", "items"])) :
|
|
2809
|
+
}, null, 8, ["editor", "items"])) : Z("", !0)
|
|
2790
2810
|
], !0)
|
|
2791
|
-
], 6)) :
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2811
|
+
], 6)) : Z("", !0),
|
|
2812
|
+
F("div", Eo, [
|
|
2813
|
+
F("div", xo, [
|
|
2814
|
+
Ie(e.$slots, "default", {}, void 0, !0)
|
|
2795
2815
|
]),
|
|
2796
|
-
!s.hideFooter && e.$slots.footer ? (D(),
|
|
2797
|
-
|
|
2798
|
-
])) :
|
|
2816
|
+
!s.hideFooter && e.$slots.footer ? (D(), T("div", Io, [
|
|
2817
|
+
Ie(e.$slots, "footer", {}, void 0, !0)
|
|
2818
|
+
])) : Z("", !0)
|
|
2799
2819
|
])
|
|
2800
2820
|
]));
|
|
2801
2821
|
}
|
|
2802
|
-
}),
|
|
2803
|
-
function
|
|
2804
|
-
const e = new Set(s?.include), t = new Set(
|
|
2822
|
+
}), yn = /* @__PURE__ */ ve(Co, [["__scopeId", "data-v-26f35b6b"]]), Ke = typeof navigator < "u" && /Mac|iPod|iPhone|iPad/.test(navigator.platform ?? navigator.userAgent), ko = ["undo", "redo"];
|
|
2823
|
+
function So(s) {
|
|
2824
|
+
const e = new Set(s?.include), t = new Set(ko.filter((a) => !e.has(a))), o = [
|
|
2805
2825
|
{
|
|
2806
2826
|
id: "undo",
|
|
2807
2827
|
type: "undo",
|
|
2808
2828
|
group: "history",
|
|
2809
2829
|
icon: "flow-canvas-icon canvas-undo",
|
|
2810
2830
|
description: "撤销",
|
|
2831
|
+
shortcut: Ke ? ["⌘", "Z"] : ["Ctrl", "Z"],
|
|
2811
2832
|
order: 10
|
|
2812
2833
|
},
|
|
2813
2834
|
{
|
|
@@ -2816,6 +2837,7 @@ function ko(s) {
|
|
|
2816
2837
|
group: "history",
|
|
2817
2838
|
icon: "flow-canvas-icon canvas-redo",
|
|
2818
2839
|
description: "重做",
|
|
2840
|
+
shortcut: Ke ? ["⇧", "⌘", "Z"] : ["Ctrl", "Shift", "Z"],
|
|
2819
2841
|
order: 11
|
|
2820
2842
|
}
|
|
2821
2843
|
], n = [
|
|
@@ -2824,7 +2846,7 @@ function ko(s) {
|
|
|
2824
2846
|
type: "select",
|
|
2825
2847
|
group: "tools",
|
|
2826
2848
|
icon: "flow-canvas-icon canvas-kuangxuan",
|
|
2827
|
-
description: "
|
|
2849
|
+
description: "框选模式",
|
|
2828
2850
|
order: 20
|
|
2829
2851
|
},
|
|
2830
2852
|
{
|
|
@@ -2840,7 +2862,7 @@ function ko(s) {
|
|
|
2840
2862
|
type: "export",
|
|
2841
2863
|
group: "tools",
|
|
2842
2864
|
icon: "flow-canvas-icon canvas-xiazai",
|
|
2843
|
-
description: "
|
|
2865
|
+
description: "下载",
|
|
2844
2866
|
order: 24
|
|
2845
2867
|
}
|
|
2846
2868
|
], i = [
|
|
@@ -2875,17 +2897,21 @@ function ko(s) {
|
|
|
2875
2897
|
(a) => !t.has(a.type)
|
|
2876
2898
|
), ...i, ...r];
|
|
2877
2899
|
}
|
|
2878
|
-
const
|
|
2900
|
+
const Mo = { class: "flow-canvas-toolbar" }, _o = {
|
|
2879
2901
|
key: 0,
|
|
2880
2902
|
class: "flow-canvas-toolbar__separator"
|
|
2881
|
-
}, No = { class: "flow-canvas-toolbar__group" },
|
|
2903
|
+
}, No = { class: "flow-canvas-toolbar__group" }, Do = {
|
|
2882
2904
|
key: 0,
|
|
2883
2905
|
class: "flow-canvas-toolbar__zoom-display"
|
|
2884
|
-
},
|
|
2906
|
+
}, Ao = ["data-toolbar-id", "data-toolbar-type", "disabled", "onClick", "onMouseenter"], Po = ["textContent"], To = {
|
|
2907
|
+
key: 0,
|
|
2908
|
+
class: "flow-canvas-toolbar-tooltip__kbd"
|
|
2909
|
+
}, Ro = /* @__PURE__ */ ge({
|
|
2885
2910
|
__name: "canvas-toolbar",
|
|
2886
2911
|
props: {
|
|
2887
2912
|
items: {},
|
|
2888
2913
|
exclude: {},
|
|
2914
|
+
include: {},
|
|
2889
2915
|
editor: {}
|
|
2890
2916
|
},
|
|
2891
2917
|
setup(s) {
|
|
@@ -2906,73 +2932,73 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
|
|
|
2906
2932
|
}
|
|
2907
2933
|
const i = s, r = j(() => {
|
|
2908
2934
|
if (i.items) return i.items;
|
|
2909
|
-
const d =
|
|
2910
|
-
for (const
|
|
2911
|
-
|
|
2912
|
-
for (const
|
|
2913
|
-
const
|
|
2914
|
-
|
|
2935
|
+
const d = So({ include: i.include }), c = i.editor.toolbarItems.value, v = new Set(i.exclude ?? []), w = /* @__PURE__ */ new Map();
|
|
2936
|
+
for (const x of d)
|
|
2937
|
+
w.set(x.id, x);
|
|
2938
|
+
for (const x of c) {
|
|
2939
|
+
const H = w.get(x.id);
|
|
2940
|
+
H ? w.set(x.id, { ...H, ...x, order: H.order, group: H.group }) : o(x) && w.set(x.id, x);
|
|
2915
2941
|
}
|
|
2916
|
-
return [...
|
|
2942
|
+
return [...w.values()].filter((x) => x.type === "custom" || !e.has(x.type) ? !0 : !v.has(x.type)).sort((x, H) => (x.order ?? 0) - (H.order ?? 0));
|
|
2917
2943
|
}), l = q(1), a = q(null), h = q(null), u = q(!1);
|
|
2918
|
-
let
|
|
2919
|
-
|
|
2944
|
+
let p = null;
|
|
2945
|
+
he(
|
|
2920
2946
|
() => i.editor.api.value,
|
|
2921
2947
|
(d) => {
|
|
2922
|
-
|
|
2948
|
+
p?.(), p = null, d && (l.value = d.getZoom(), p = d.onGraphEvent("scale", () => {
|
|
2923
2949
|
l.value = d.getZoom();
|
|
2924
2950
|
}));
|
|
2925
2951
|
},
|
|
2926
2952
|
{ immediate: !0 }
|
|
2927
2953
|
);
|
|
2928
|
-
const
|
|
2929
|
-
function
|
|
2954
|
+
const g = lt({ visible: !1, text: "", shortcut: [], x: 0, y: 0 });
|
|
2955
|
+
function E(d, c) {
|
|
2930
2956
|
if (!c.description) return;
|
|
2931
|
-
const
|
|
2932
|
-
|
|
2933
|
-
const
|
|
2934
|
-
|
|
2957
|
+
const w = d.currentTarget.getBoundingClientRect();
|
|
2958
|
+
g.text = c.description, g.shortcut = c.shortcut ?? [], g.visible = !0, Le(() => {
|
|
2959
|
+
const x = a.value?.offsetWidth ?? 0, H = a.value?.offsetHeight ?? 0;
|
|
2960
|
+
g.x = w.left + w.width / 2 - x / 2, g.y = w.top - H - 6;
|
|
2935
2961
|
});
|
|
2936
2962
|
}
|
|
2937
2963
|
function m() {
|
|
2938
|
-
|
|
2964
|
+
g.visible = !1, a.value = null;
|
|
2939
2965
|
}
|
|
2940
2966
|
Je(() => {
|
|
2941
|
-
|
|
2967
|
+
p?.();
|
|
2942
2968
|
});
|
|
2943
|
-
const
|
|
2969
|
+
const C = j(() => `${Math.round(l.value * 100)}%`), M = j(() => i.editor.api.value ? {
|
|
2944
2970
|
api: i.editor.api.value,
|
|
2945
2971
|
flowModel: i.editor.flowModel.value,
|
|
2946
2972
|
history: i.editor.history,
|
|
2947
2973
|
mode: i.editor.mode.value
|
|
2948
2974
|
} : null);
|
|
2949
|
-
function
|
|
2950
|
-
return d.visible === !1 ? !1 : typeof d.visible == "function" ?
|
|
2975
|
+
function R(d) {
|
|
2976
|
+
return d.visible === !1 ? !1 : typeof d.visible == "function" ? M.value ? d.visible(M.value) : !1 : !0;
|
|
2951
2977
|
}
|
|
2952
|
-
function
|
|
2953
|
-
return typeof d.active == "function" ?
|
|
2978
|
+
function A(d) {
|
|
2979
|
+
return typeof d.active == "function" ? M.value ? d.active(M.value) : !1 : d.active !== void 0 ? d.active : d.type === "select" ? i.editor.selectionMode.value : !1;
|
|
2954
2980
|
}
|
|
2955
|
-
const
|
|
2981
|
+
const B = j(() => {
|
|
2956
2982
|
const d = y.value.filter(
|
|
2957
|
-
(v) => n(v.type) &&
|
|
2983
|
+
(v) => n(v.type) && A(v)
|
|
2958
2984
|
);
|
|
2959
2985
|
if (d.length === 0) return null;
|
|
2960
2986
|
const c = h.value;
|
|
2961
2987
|
return c && d.some((v) => v.type === c) ? c : d[0]?.type ?? null;
|
|
2962
2988
|
});
|
|
2963
|
-
function
|
|
2964
|
-
return n(d.type) ?
|
|
2989
|
+
function V(d) {
|
|
2990
|
+
return n(d.type) ? B.value === d.type : A(d);
|
|
2965
2991
|
}
|
|
2966
2992
|
function O(d) {
|
|
2967
|
-
return !
|
|
2993
|
+
return !M.value || d.disabled === !0 ? !0 : typeof d.disabled == "function" ? d.disabled(M.value) : d.type === "undo" ? !i.editor.history.canUndo.value : d.type === "redo" ? !i.editor.history.canRedo.value : d.type === "export" ? u.value : !1;
|
|
2968
2994
|
}
|
|
2969
2995
|
function W(d) {
|
|
2970
|
-
if (!(!
|
|
2996
|
+
if (!(!M.value || !n(d.type) || !A(d))) {
|
|
2971
2997
|
if (d.type === "select") {
|
|
2972
2998
|
i.editor.setSelectionMode(!1);
|
|
2973
2999
|
return;
|
|
2974
3000
|
}
|
|
2975
|
-
d.onClick?.(
|
|
3001
|
+
d.onClick?.(M.value);
|
|
2976
3002
|
}
|
|
2977
3003
|
}
|
|
2978
3004
|
function z(d) {
|
|
@@ -2980,13 +3006,13 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
|
|
|
2980
3006
|
for (const c of y.value)
|
|
2981
3007
|
!n(c.type) || c.id === d.id || W(c);
|
|
2982
3008
|
}
|
|
2983
|
-
function
|
|
2984
|
-
if (!
|
|
3009
|
+
function _(d) {
|
|
3010
|
+
if (!M.value || O(d)) return;
|
|
2985
3011
|
if (n(d.type) && (h.value = d.type, z(d)), d.onClick) {
|
|
2986
|
-
d.onClick(
|
|
3012
|
+
d.onClick(M.value);
|
|
2987
3013
|
return;
|
|
2988
3014
|
}
|
|
2989
|
-
const { api: c } =
|
|
3015
|
+
const { api: c } = M.value;
|
|
2990
3016
|
switch (d.type) {
|
|
2991
3017
|
case "undo":
|
|
2992
3018
|
i.editor.history.undo();
|
|
@@ -3009,8 +3035,8 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
|
|
|
3009
3035
|
case "export":
|
|
3010
3036
|
if (u.value) break;
|
|
3011
3037
|
u.value = !0, c.exportAsImage().then((v) => {
|
|
3012
|
-
const
|
|
3013
|
-
|
|
3038
|
+
const w = URL.createObjectURL(v), x = document.createElement("a");
|
|
3039
|
+
x.href = w, x.download = "canvas-export.png", x.click(), URL.revokeObjectURL(w);
|
|
3014
3040
|
}).catch((v) => {
|
|
3015
3041
|
console.warn("[flow-canvas] Export failed:", v);
|
|
3016
3042
|
}).finally(() => {
|
|
@@ -3032,74 +3058,77 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
|
|
|
3032
3058
|
break;
|
|
3033
3059
|
}
|
|
3034
3060
|
}
|
|
3035
|
-
const y = j(() => r.value.filter(
|
|
3061
|
+
const y = j(() => r.value.filter(R)), f = j(() => {
|
|
3036
3062
|
const d = /* @__PURE__ */ new Map(), c = [];
|
|
3037
3063
|
for (const v of y.value) {
|
|
3038
|
-
const
|
|
3039
|
-
d.has(
|
|
3064
|
+
const w = v.group ?? "default";
|
|
3065
|
+
d.has(w) || (d.set(w, []), c.push(w)), d.get(w).push(v);
|
|
3040
3066
|
}
|
|
3041
3067
|
return c.map((v) => ({ name: v, items: d.get(v) })).filter((v) => v.items.length > 0);
|
|
3042
3068
|
});
|
|
3043
|
-
return (d, c) => (D(),
|
|
3044
|
-
(D(!0),
|
|
3069
|
+
return (d, c) => (D(), T("div", Mo, [
|
|
3070
|
+
(D(!0), T(pe, null, Ee(f.value, (v, w) => (D(), T(pe, {
|
|
3045
3071
|
key: v.name
|
|
3046
3072
|
}, [
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
(D(!0),
|
|
3050
|
-
key:
|
|
3073
|
+
w > 0 ? (D(), T("div", _o)) : Z("", !0),
|
|
3074
|
+
F("div", No, [
|
|
3075
|
+
(D(!0), T(pe, null, Ee(v.items, (x) => (D(), T(pe, {
|
|
3076
|
+
key: x.id
|
|
3051
3077
|
}, [
|
|
3052
|
-
|
|
3078
|
+
x.type === "zoom-display" ? (D(), T("span", Do, ue(C.value), 1)) : (D(), T("button", {
|
|
3053
3079
|
key: 1,
|
|
3054
3080
|
type: "button",
|
|
3055
3081
|
class: se(["flow-canvas-toolbar__btn", {
|
|
3056
|
-
"is-disabled": O(
|
|
3057
|
-
"is-active":
|
|
3058
|
-
"is-exporting":
|
|
3082
|
+
"is-disabled": O(x),
|
|
3083
|
+
"is-active": V(x),
|
|
3084
|
+
"is-exporting": x.type === "export" && u.value
|
|
3059
3085
|
}]),
|
|
3060
|
-
"data-toolbar-id":
|
|
3061
|
-
"data-toolbar-type":
|
|
3062
|
-
disabled: O(
|
|
3063
|
-
onClick: (
|
|
3064
|
-
onMouseenter: (
|
|
3086
|
+
"data-toolbar-id": x.id,
|
|
3087
|
+
"data-toolbar-type": x.type,
|
|
3088
|
+
disabled: O(x),
|
|
3089
|
+
onClick: (H) => _(x),
|
|
3090
|
+
onMouseenter: (H) => E(H, x),
|
|
3065
3091
|
onMouseleave: m
|
|
3066
3092
|
}, [
|
|
3067
|
-
|
|
3093
|
+
x.component ? (D(), we(dt(x.component), { key: 0 })) : x.icon ? (D(), T("i", {
|
|
3068
3094
|
key: 1,
|
|
3069
|
-
class: se(
|
|
3070
|
-
}, null, 2)) : (D(),
|
|
3095
|
+
class: se(x.icon)
|
|
3096
|
+
}, null, 2)) : (D(), T("span", {
|
|
3071
3097
|
key: 2,
|
|
3072
3098
|
class: "flow-canvas-toolbar__text",
|
|
3073
|
-
textContent:
|
|
3074
|
-
}, null, 8,
|
|
3075
|
-
], 42,
|
|
3099
|
+
textContent: ue(x.text ?? x.description ?? x.id)
|
|
3100
|
+
}, null, 8, Po))
|
|
3101
|
+
], 42, Ao))
|
|
3076
3102
|
], 64))), 128))
|
|
3077
3103
|
])
|
|
3078
3104
|
], 64))), 128)),
|
|
3079
|
-
(D(),
|
|
3080
|
-
|
|
3105
|
+
(D(), we(ct, { to: "body" }, [
|
|
3106
|
+
g.visible ? (D(), T("div", {
|
|
3081
3107
|
key: 0,
|
|
3082
3108
|
ref_key: "tooltipRef",
|
|
3083
3109
|
ref: a,
|
|
3084
3110
|
class: "flow-canvas-toolbar-tooltip",
|
|
3085
|
-
style:
|
|
3111
|
+
style: be({ left: `${g.x}px`, top: `${g.y}px` })
|
|
3086
3112
|
}, [
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3113
|
+
F("span", null, ue(g.text), 1),
|
|
3114
|
+
g.shortcut.length ? (D(), T("kbd", To, [
|
|
3115
|
+
(D(!0), T(pe, null, Ee(g.shortcut, (v, w) => (D(), T("span", { key: w }, ue(v), 1))), 128))
|
|
3116
|
+
])) : Z("", !0),
|
|
3117
|
+
c[0] || (c[0] = F("div", { class: "flow-canvas-toolbar-tooltip__arrow" }, null, -1))
|
|
3118
|
+
], 4)) : Z("", !0)
|
|
3090
3119
|
]))
|
|
3091
3120
|
]));
|
|
3092
3121
|
}
|
|
3093
|
-
}),
|
|
3122
|
+
}), mn = /* @__PURE__ */ ve(Ro, [["__scopeId", "data-v-904248f4"]]), Lo = { class: "flow-canvas-default-node__ep-label" }, Oo = {
|
|
3094
3123
|
key: 1,
|
|
3095
3124
|
class: "flow-canvas-default-node__diamond flow-canvas-highlight-target"
|
|
3096
|
-
},
|
|
3125
|
+
}, $o = {
|
|
3097
3126
|
key: 2,
|
|
3098
3127
|
class: "flow-canvas-default-node__task-label"
|
|
3099
|
-
},
|
|
3128
|
+
}, Bo = /* @__PURE__ */ ge({
|
|
3100
3129
|
__name: "default-node",
|
|
3101
3130
|
setup(s) {
|
|
3102
|
-
const t =
|
|
3131
|
+
const t = ut("getNode")?.(), o = j(() => t?.getData?.() ?? null), n = j(() => o.value?.label || o.value?.type || ""), i = {
|
|
3103
3132
|
start: "canvas-kaishi",
|
|
3104
3133
|
end: "canvas-stop",
|
|
3105
3134
|
"parallel-gateway": "canvas-bingxingwangguan",
|
|
@@ -3115,24 +3144,24 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
|
|
|
3115
3144
|
const u = o.value?.type ?? "";
|
|
3116
3145
|
return r.has(u) ? "endpoint" : l.has(u) ? "gateway" : "task";
|
|
3117
3146
|
}), h = j(() => i[o.value?.type ?? ""] ?? "");
|
|
3118
|
-
return (u,
|
|
3147
|
+
return (u, p) => (D(), T("div", {
|
|
3119
3148
|
class: se(["flow-canvas-default-node", [`is-${a.value}`, { "flow-canvas-highlight-target": a.value !== "gateway" }]])
|
|
3120
3149
|
}, [
|
|
3121
|
-
a.value === "endpoint" ? (D(),
|
|
3122
|
-
h.value ? (D(),
|
|
3150
|
+
a.value === "endpoint" ? (D(), T(pe, { key: 0 }, [
|
|
3151
|
+
h.value ? (D(), T("i", {
|
|
3123
3152
|
key: 0,
|
|
3124
3153
|
class: se([["flow-canvas-icon", h.value], "flow-canvas-default-node__ep-icon"])
|
|
3125
|
-
}, null, 2)) :
|
|
3126
|
-
|
|
3127
|
-
], 64)) : a.value === "gateway" ? (D(),
|
|
3128
|
-
h.value ? (D(),
|
|
3154
|
+
}, null, 2)) : Z("", !0),
|
|
3155
|
+
F("span", Lo, ue(n.value), 1)
|
|
3156
|
+
], 64)) : a.value === "gateway" ? (D(), T("div", Oo, [
|
|
3157
|
+
h.value ? (D(), T("i", {
|
|
3129
3158
|
key: 0,
|
|
3130
3159
|
class: se([["flow-canvas-icon", h.value], "flow-canvas-default-node__gw-icon"])
|
|
3131
|
-
}, null, 2)) :
|
|
3132
|
-
])) : (D(),
|
|
3160
|
+
}, null, 2)) : Z("", !0)
|
|
3161
|
+
])) : (D(), T("span", $o, ue(n.value), 1))
|
|
3133
3162
|
], 2));
|
|
3134
3163
|
}
|
|
3135
|
-
}),
|
|
3164
|
+
}), Ho = /* @__PURE__ */ ve(Bo, [["__scopeId", "data-v-f0e24a9f"]]), Go = {
|
|
3136
3165
|
start: { label: "开始", icon: "flow-canvas-icon canvas-kaishi", width: 88, height: 40 },
|
|
3137
3166
|
end: { label: "结束", icon: "flow-canvas-icon canvas-stop", width: 88, height: 40 },
|
|
3138
3167
|
empty: { label: "空节点", icon: "flow-canvas-icon canvas-jiedi", width: 240, height: 48 },
|
|
@@ -3145,11 +3174,11 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
|
|
|
3145
3174
|
width: 64,
|
|
3146
3175
|
height: 64
|
|
3147
3176
|
}
|
|
3148
|
-
},
|
|
3177
|
+
}, Ze = (s, e) => ({
|
|
3149
3178
|
stroke: e.hovered ? "#3a84ff" : "#abb5cc",
|
|
3150
3179
|
strokeWidth: 2
|
|
3151
3180
|
});
|
|
3152
|
-
function
|
|
3181
|
+
function Ye() {
|
|
3153
3182
|
return {
|
|
3154
3183
|
attrs: {
|
|
3155
3184
|
line: {
|
|
@@ -3160,29 +3189,29 @@ function Ze() {
|
|
|
3160
3189
|
}
|
|
3161
3190
|
};
|
|
3162
3191
|
}
|
|
3163
|
-
function
|
|
3192
|
+
function qo() {
|
|
3164
3193
|
return {
|
|
3165
3194
|
manhattan: {
|
|
3166
3195
|
router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
|
|
3167
3196
|
connector: { name: "rounded", args: { radius: 8 } },
|
|
3168
|
-
style:
|
|
3169
|
-
x6EdgeConfig:
|
|
3197
|
+
style: Ze,
|
|
3198
|
+
x6EdgeConfig: Ye()
|
|
3170
3199
|
},
|
|
3171
3200
|
bezier: {
|
|
3172
3201
|
connector: { name: "smooth" },
|
|
3173
|
-
style:
|
|
3174
|
-
x6EdgeConfig:
|
|
3202
|
+
style: Ze,
|
|
3203
|
+
x6EdgeConfig: Ye()
|
|
3175
3204
|
}
|
|
3176
3205
|
};
|
|
3177
3206
|
}
|
|
3178
|
-
function
|
|
3179
|
-
const e = s?.nodeTypes ??
|
|
3207
|
+
function bn(s) {
|
|
3208
|
+
const e = s?.nodeTypes ?? Go, t = {}, o = [];
|
|
3180
3209
|
for (const [r, l] of Object.entries(e)) {
|
|
3181
3210
|
const a = l.width ?? 150, h = l.height ?? 50;
|
|
3182
3211
|
t[r] = {
|
|
3183
|
-
component:
|
|
3212
|
+
component: Ho,
|
|
3184
3213
|
getSize: () => ({ width: a, height: h }),
|
|
3185
|
-
getPorts: () =>
|
|
3214
|
+
getPorts: () => st()
|
|
3186
3215
|
}, o.push({
|
|
3187
3216
|
type: r,
|
|
3188
3217
|
label: l.label ?? r,
|
|
@@ -3190,7 +3219,7 @@ function yn(s) {
|
|
|
3190
3219
|
});
|
|
3191
3220
|
}
|
|
3192
3221
|
const n = {
|
|
3193
|
-
...
|
|
3222
|
+
...qo(),
|
|
3194
3223
|
...s?.edgeTypes
|
|
3195
3224
|
}, i = s?.defaultEdgeType ?? "manhattan";
|
|
3196
3225
|
return {
|
|
@@ -3198,7 +3227,7 @@ function yn(s) {
|
|
|
3198
3227
|
paletteItems: o
|
|
3199
3228
|
};
|
|
3200
3229
|
}
|
|
3201
|
-
function
|
|
3230
|
+
function wn(s) {
|
|
3202
3231
|
return {
|
|
3203
3232
|
name: "connection-validator",
|
|
3204
3233
|
priority: 10,
|
|
@@ -3212,20 +3241,20 @@ function mn(s) {
|
|
|
3212
3241
|
if (!l || !a) continue;
|
|
3213
3242
|
const h = r.nodes[l], u = r.nodes[a];
|
|
3214
3243
|
if (!h || !u) continue;
|
|
3215
|
-
const
|
|
3216
|
-
(
|
|
3217
|
-
),
|
|
3244
|
+
const p = i.type === "edge.add" ? i.edge.source.portId : i.source?.portId, g = i.type === "edge.add" ? i.edge.target.portId : i.target?.portId, E = p ? h.ports?.find((A) => A.id === p) : void 0, m = g ? u.ports?.find((A) => A.id === g) : void 0, C = i.type === "edge.reconnect" ? i.edgeId : void 0, M = Object.values(r.edges).filter(
|
|
3245
|
+
(A) => A.id !== C && !n.has(A.id)
|
|
3246
|
+
), R = s({
|
|
3218
3247
|
flowModel: r,
|
|
3219
3248
|
sourceNode: h,
|
|
3220
3249
|
targetNode: u,
|
|
3221
|
-
sourcePort:
|
|
3250
|
+
sourcePort: E,
|
|
3222
3251
|
targetPort: m,
|
|
3223
|
-
existingEdges:
|
|
3252
|
+
existingEdges: M
|
|
3224
3253
|
});
|
|
3225
|
-
if (!
|
|
3254
|
+
if (!R.valid)
|
|
3226
3255
|
return {
|
|
3227
3256
|
rejected: !0,
|
|
3228
|
-
reason:
|
|
3257
|
+
reason: R.reason ?? "Connection validation failed",
|
|
3229
3258
|
code: "validation_failed"
|
|
3230
3259
|
};
|
|
3231
3260
|
}
|
|
@@ -3233,14 +3262,14 @@ function mn(s) {
|
|
|
3233
3262
|
}
|
|
3234
3263
|
};
|
|
3235
3264
|
}
|
|
3236
|
-
function
|
|
3265
|
+
function En(s) {
|
|
3237
3266
|
const { rubberband: e = !0, multiple: t = !0, movable: o = !0 } = s ?? {};
|
|
3238
3267
|
return {
|
|
3239
3268
|
name: "selection",
|
|
3240
3269
|
priority: 90,
|
|
3241
3270
|
attachRuntime(n) {
|
|
3242
3271
|
n.graph.use(
|
|
3243
|
-
new
|
|
3272
|
+
new ht({
|
|
3244
3273
|
enabled: !0,
|
|
3245
3274
|
rubberband: e,
|
|
3246
3275
|
multiple: t,
|
|
@@ -3253,7 +3282,7 @@ function wn(s) {
|
|
|
3253
3282
|
}
|
|
3254
3283
|
};
|
|
3255
3284
|
}
|
|
3256
|
-
function
|
|
3285
|
+
function xn(s) {
|
|
3257
3286
|
const { tolerance: e = 10, color: t = "#3a84ff" } = s ?? {};
|
|
3258
3287
|
let o = null;
|
|
3259
3288
|
return {
|
|
@@ -3274,13 +3303,13 @@ function bn(s) {
|
|
|
3274
3303
|
}
|
|
3275
3304
|
};
|
|
3276
3305
|
}
|
|
3277
|
-
const
|
|
3306
|
+
const Fo = { class: "flow-canvas-search-popover__input" }, Uo = ["value", "placeholder"], zo = ["onMouseenter", "onClick"], jo = { class: "flow-canvas-search-popover__item-label" }, Wo = {
|
|
3278
3307
|
key: 0,
|
|
3279
3308
|
class: "flow-canvas-search-popover__item-subtitle"
|
|
3280
|
-
},
|
|
3309
|
+
}, Vo = {
|
|
3281
3310
|
key: 1,
|
|
3282
3311
|
class: "flow-canvas-search-popover__empty"
|
|
3283
|
-
},
|
|
3312
|
+
}, Xo = /* @__PURE__ */ ge({
|
|
3284
3313
|
__name: "search-popover",
|
|
3285
3314
|
props: {
|
|
3286
3315
|
open: { type: Boolean },
|
|
@@ -3294,19 +3323,19 @@ const Go = { class: "flow-canvas-search-popover__input" }, qo = ["value", "place
|
|
|
3294
3323
|
emits: ["update:query", "select", "close"],
|
|
3295
3324
|
setup(s, { emit: e }) {
|
|
3296
3325
|
const t = s, o = e, n = q(null), i = q(null), r = q(-1);
|
|
3297
|
-
|
|
3326
|
+
he(
|
|
3298
3327
|
() => t.open,
|
|
3299
3328
|
(m) => {
|
|
3300
|
-
m && (r.value = -1,
|
|
3329
|
+
m && (r.value = -1, Le(() => {
|
|
3301
3330
|
n.value?.focus(), n.value?.select();
|
|
3302
3331
|
}));
|
|
3303
3332
|
}
|
|
3304
|
-
),
|
|
3333
|
+
), he(
|
|
3305
3334
|
() => t.query,
|
|
3306
3335
|
() => {
|
|
3307
3336
|
r.value = -1;
|
|
3308
3337
|
}
|
|
3309
|
-
),
|
|
3338
|
+
), he(
|
|
3310
3339
|
() => t.results.length,
|
|
3311
3340
|
(m) => {
|
|
3312
3341
|
if (!m) {
|
|
@@ -3326,15 +3355,15 @@ const Go = { class: "flow-canvas-search-popover__input" }, qo = ["value", "place
|
|
|
3326
3355
|
r.value = -1;
|
|
3327
3356
|
}
|
|
3328
3357
|
function u() {
|
|
3329
|
-
o("update:query", ""),
|
|
3358
|
+
o("update:query", ""), Le(() => {
|
|
3330
3359
|
n.value?.focus();
|
|
3331
3360
|
});
|
|
3332
3361
|
}
|
|
3333
|
-
function
|
|
3362
|
+
function p() {
|
|
3334
3363
|
const m = t.results[r.value] ?? t.results[0];
|
|
3335
3364
|
m && o("select", m.id);
|
|
3336
3365
|
}
|
|
3337
|
-
function
|
|
3366
|
+
function g(m) {
|
|
3338
3367
|
if (m.key === "Escape") {
|
|
3339
3368
|
m.preventDefault(), o("close");
|
|
3340
3369
|
return;
|
|
@@ -3349,81 +3378,81 @@ const Go = { class: "flow-canvas-search-popover__input" }, qo = ["value", "place
|
|
|
3349
3378
|
r.value = r.value > 0 ? r.value - 1 : t.results.length - 1;
|
|
3350
3379
|
return;
|
|
3351
3380
|
}
|
|
3352
|
-
m.key === "Enter" && (m.preventDefault(),
|
|
3381
|
+
m.key === "Enter" && (m.preventDefault(), p());
|
|
3353
3382
|
}
|
|
3354
|
-
function
|
|
3383
|
+
function E(m) {
|
|
3355
3384
|
if (!t.open) return;
|
|
3356
|
-
const
|
|
3357
|
-
|
|
3385
|
+
const C = m.target;
|
|
3386
|
+
C && i.value?.contains(C) || t.isAnchorTarget?.(m.target) || o("close");
|
|
3358
3387
|
}
|
|
3359
3388
|
return ot(() => {
|
|
3360
|
-
document.addEventListener("mousedown",
|
|
3389
|
+
document.addEventListener("mousedown", E);
|
|
3361
3390
|
}), Me(() => {
|
|
3362
|
-
document.removeEventListener("mousedown",
|
|
3363
|
-
}), (m,
|
|
3391
|
+
document.removeEventListener("mousedown", E);
|
|
3392
|
+
}), (m, C) => s.open ? (D(), T("div", {
|
|
3364
3393
|
key: 0,
|
|
3365
3394
|
ref_key: "panelRef",
|
|
3366
3395
|
ref: i,
|
|
3367
3396
|
class: "flow-canvas-search-popover",
|
|
3368
|
-
style:
|
|
3397
|
+
style: be({ left: `${s.position.x}px`, top: `${s.position.y}px`, width: `${s.position.width}px` })
|
|
3369
3398
|
}, [
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3399
|
+
F("div", Fo, [
|
|
3400
|
+
C[1] || (C[1] = F("i", { class: "flow-canvas-icon canvas-search" }, null, -1)),
|
|
3401
|
+
F("input", {
|
|
3373
3402
|
ref_key: "inputRef",
|
|
3374
3403
|
ref: n,
|
|
3375
3404
|
value: s.query,
|
|
3376
3405
|
placeholder: s.placeholder,
|
|
3377
3406
|
onInput: l,
|
|
3378
|
-
onKeydown:
|
|
3379
|
-
}, null, 40,
|
|
3380
|
-
s.query ? (D(),
|
|
3407
|
+
onKeydown: g
|
|
3408
|
+
}, null, 40, Uo),
|
|
3409
|
+
s.query ? (D(), T("button", {
|
|
3381
3410
|
key: 0,
|
|
3382
3411
|
type: "button",
|
|
3383
3412
|
class: "flow-canvas-search-popover__clear",
|
|
3384
3413
|
"aria-label": "清空搜索",
|
|
3385
3414
|
onClick: u
|
|
3386
|
-
}, [...
|
|
3387
|
-
|
|
3388
|
-
])])) :
|
|
3415
|
+
}, [...C[0] || (C[0] = [
|
|
3416
|
+
F("i", { class: "flow-canvas-icon canvas-close-circle-shape" }, null, -1)
|
|
3417
|
+
])])) : Z("", !0)
|
|
3389
3418
|
]),
|
|
3390
|
-
s.results.length ? (D(),
|
|
3419
|
+
s.results.length ? (D(), T("div", {
|
|
3391
3420
|
key: 0,
|
|
3392
3421
|
class: "flow-canvas-search-popover__list",
|
|
3393
3422
|
onMouseleave: h
|
|
3394
3423
|
}, [
|
|
3395
|
-
(D(!0),
|
|
3396
|
-
key:
|
|
3424
|
+
(D(!0), T(pe, null, Ee(s.results, (M, R) => (D(), T("button", {
|
|
3425
|
+
key: M.id,
|
|
3397
3426
|
type: "button",
|
|
3398
|
-
class: se(["flow-canvas-search-popover__item", { "is-active":
|
|
3399
|
-
onMouseenter: (
|
|
3400
|
-
onClick: (
|
|
3427
|
+
class: se(["flow-canvas-search-popover__item", { "is-active": R === r.value }]),
|
|
3428
|
+
onMouseenter: (A) => a(R),
|
|
3429
|
+
onClick: (A) => o("select", M.id)
|
|
3401
3430
|
}, [
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
], 42,
|
|
3405
|
-
], 32)) : (D(),
|
|
3406
|
-
], 4)) :
|
|
3407
|
-
}
|
|
3408
|
-
}),
|
|
3409
|
-
function
|
|
3431
|
+
F("span", jo, ue(M.label), 1),
|
|
3432
|
+
M.subtitle ? (D(), T("span", Wo, ue(M.subtitle), 1)) : Z("", !0)
|
|
3433
|
+
], 42, zo))), 128))
|
|
3434
|
+
], 32)) : (D(), T("div", Vo, ue(s.emptyText), 1))
|
|
3435
|
+
], 4)) : Z("", !0);
|
|
3436
|
+
}
|
|
3437
|
+
}), Ko = /* @__PURE__ */ ve(Xo, [["__scopeId", "data-v-c80f6b26"]]), Qe = 282, Zo = 4, Yo = 300, Qo = 360, Oe = 100, Jo = Qo * 4 - Oe;
|
|
3438
|
+
function en(s) {
|
|
3410
3439
|
return s !== null;
|
|
3411
3440
|
}
|
|
3412
|
-
function
|
|
3441
|
+
function tn(s) {
|
|
3413
3442
|
const e = /* @__PURE__ */ new Set();
|
|
3414
3443
|
return s.map((t) => t?.trim()).filter((t) => !!t).filter((t) => {
|
|
3415
3444
|
const o = t.toLowerCase();
|
|
3416
3445
|
return e.has(o) ? !1 : (e.add(o), !0);
|
|
3417
3446
|
});
|
|
3418
3447
|
}
|
|
3419
|
-
function
|
|
3448
|
+
function on(s, e) {
|
|
3420
3449
|
const t = Math.max(8, window.innerWidth - e - 8);
|
|
3421
3450
|
return Math.min(Math.max(8, s), t);
|
|
3422
3451
|
}
|
|
3423
|
-
function
|
|
3452
|
+
function nn(s, e) {
|
|
3424
3453
|
const t = e?.getNodeMeta?.(s);
|
|
3425
3454
|
if (t === null) return null;
|
|
3426
|
-
const o = t?.label?.trim() || s.label?.trim() || s.id, n = t?.subtitle?.trim() || void 0, i =
|
|
3455
|
+
const o = t?.label?.trim() || s.label?.trim() || s.id, n = t?.subtitle?.trim() || void 0, i = tn(t?.keywords ?? [s.label, n]);
|
|
3427
3456
|
return i.length ? {
|
|
3428
3457
|
id: s.id,
|
|
3429
3458
|
label: o,
|
|
@@ -3431,96 +3460,96 @@ function tn(s, e) {
|
|
|
3431
3460
|
keywords: i
|
|
3432
3461
|
} : null;
|
|
3433
3462
|
}
|
|
3434
|
-
function
|
|
3463
|
+
function In(s) {
|
|
3435
3464
|
let e = null, t = null, o = null, n = null, i = null, r = [];
|
|
3436
|
-
const l = q(!1), a = q(""), h = q({ x: 0, y: 0, width: Qe }), u = j(() => e ? Object.values(e.flowModel.value.nodes).map((
|
|
3437
|
-
const
|
|
3438
|
-
return
|
|
3465
|
+
const l = q(!1), a = q(""), h = q({ x: 0, y: 0, width: Qe }), u = j(() => e ? Object.values(e.flowModel.value.nodes).map((_) => nn(_, s)).filter(en) : []), p = j(() => {
|
|
3466
|
+
const _ = a.value.trim().toLowerCase(), y = Math.max(1, s?.maxResults ?? Yo);
|
|
3467
|
+
return _ ? u.value.filter((f) => f.keywords.some((d) => d.toLowerCase().includes(_))).slice(0, y) : u.value.slice(0, y);
|
|
3439
3468
|
});
|
|
3440
|
-
function
|
|
3469
|
+
function g() {
|
|
3441
3470
|
return o?.querySelector('.flow-canvas-toolbar__btn[data-toolbar-type="search"]');
|
|
3442
3471
|
}
|
|
3443
|
-
function
|
|
3444
|
-
return
|
|
3472
|
+
function E() {
|
|
3473
|
+
return g()?.closest(".flow-canvas-toolbar");
|
|
3445
3474
|
}
|
|
3446
3475
|
function m() {
|
|
3447
|
-
const
|
|
3476
|
+
const _ = E(), y = o?.getBoundingClientRect(), f = _?.getBoundingClientRect() ?? y;
|
|
3448
3477
|
if (!f) return;
|
|
3449
3478
|
const d = Math.max(Qe, Math.round(f.width));
|
|
3450
3479
|
h.value = {
|
|
3451
|
-
x:
|
|
3452
|
-
y: f.bottom +
|
|
3480
|
+
x: on(f.left, d),
|
|
3481
|
+
y: f.bottom + Zo,
|
|
3453
3482
|
width: d
|
|
3454
3483
|
};
|
|
3455
3484
|
}
|
|
3456
|
-
function
|
|
3457
|
-
r.forEach((
|
|
3485
|
+
function C() {
|
|
3486
|
+
r.forEach((_) => clearTimeout(_)), r = [], t?.api.clearHighlight();
|
|
3458
3487
|
}
|
|
3459
|
-
function
|
|
3460
|
-
|
|
3488
|
+
function M(_) {
|
|
3489
|
+
C();
|
|
3461
3490
|
const y = setTimeout(() => {
|
|
3462
|
-
t?.api.highlightNodes([
|
|
3463
|
-
},
|
|
3491
|
+
t?.api.highlightNodes([_]);
|
|
3492
|
+
}, Oe), f = setTimeout(() => {
|
|
3464
3493
|
t?.api.clearHighlight(), r = [];
|
|
3465
|
-
},
|
|
3494
|
+
}, Oe + Jo);
|
|
3466
3495
|
r.push(y, f);
|
|
3467
3496
|
}
|
|
3468
|
-
function
|
|
3469
|
-
t && (t.api.scrollToNode(
|
|
3497
|
+
function R(_) {
|
|
3498
|
+
t && (t.api.scrollToNode(_), M(_));
|
|
3470
3499
|
}
|
|
3471
|
-
function
|
|
3500
|
+
function A() {
|
|
3472
3501
|
t && (l.value = !0, m(), requestAnimationFrame(() => m()));
|
|
3473
3502
|
}
|
|
3474
|
-
function
|
|
3503
|
+
function B() {
|
|
3475
3504
|
l.value = !1, a.value = "";
|
|
3476
3505
|
}
|
|
3477
|
-
function
|
|
3506
|
+
function V() {
|
|
3478
3507
|
if (l.value) {
|
|
3479
|
-
|
|
3508
|
+
B();
|
|
3480
3509
|
return;
|
|
3481
3510
|
}
|
|
3482
|
-
|
|
3511
|
+
A();
|
|
3483
3512
|
}
|
|
3484
|
-
function O(
|
|
3485
|
-
const y =
|
|
3486
|
-
return !!(y &&
|
|
3513
|
+
function O(_) {
|
|
3514
|
+
const y = g();
|
|
3515
|
+
return !!(y && _ instanceof Node && y.contains(_));
|
|
3487
3516
|
}
|
|
3488
3517
|
function W() {
|
|
3489
3518
|
l.value && m();
|
|
3490
3519
|
}
|
|
3491
|
-
const z =
|
|
3520
|
+
const z = ge({
|
|
3492
3521
|
name: "FlowCanvasSearchHost",
|
|
3493
3522
|
setup() {
|
|
3494
|
-
return () => Re(
|
|
3523
|
+
return () => Re(Ko, {
|
|
3495
3524
|
open: l.value,
|
|
3496
3525
|
position: h.value,
|
|
3497
3526
|
query: a.value,
|
|
3498
|
-
results:
|
|
3527
|
+
results: p.value,
|
|
3499
3528
|
placeholder: s?.placeholder ?? "搜索节点名称",
|
|
3500
3529
|
emptyText: s?.emptyText ?? "暂无匹配节点",
|
|
3501
3530
|
isAnchorTarget: O,
|
|
3502
|
-
"onUpdate:query": (
|
|
3503
|
-
a.value =
|
|
3531
|
+
"onUpdate:query": (_) => {
|
|
3532
|
+
a.value = _;
|
|
3504
3533
|
},
|
|
3505
|
-
onSelect:
|
|
3506
|
-
onClose:
|
|
3534
|
+
onSelect: R,
|
|
3535
|
+
onClose: B
|
|
3507
3536
|
});
|
|
3508
3537
|
}
|
|
3509
3538
|
});
|
|
3510
3539
|
return {
|
|
3511
3540
|
name: "search",
|
|
3512
3541
|
priority: 90,
|
|
3513
|
-
install(
|
|
3514
|
-
e =
|
|
3542
|
+
install(_) {
|
|
3543
|
+
e = _;
|
|
3515
3544
|
},
|
|
3516
|
-
attachRuntime(
|
|
3517
|
-
t =
|
|
3545
|
+
attachRuntime(_) {
|
|
3546
|
+
t = _, o = _.graph.container.closest(".flow-canvas-layout__content") ?? _.graph.container.parentElement, n = document.createElement("div"), n.className = "flow-canvas-search-host", document.body.append(n), i = ft(z), i.mount(n), window.addEventListener("resize", W), window.addEventListener("scroll", W, !0);
|
|
3518
3547
|
},
|
|
3519
3548
|
detachRuntime() {
|
|
3520
|
-
|
|
3549
|
+
B(), C(), window.removeEventListener("resize", W), window.removeEventListener("scroll", W, !0), i?.unmount(), i = null, n?.remove(), n = null, o = null, t = null;
|
|
3521
3550
|
},
|
|
3522
3551
|
dispose() {
|
|
3523
|
-
|
|
3552
|
+
B(), C(), e = null;
|
|
3524
3553
|
},
|
|
3525
3554
|
provideToolbarItems() {
|
|
3526
3555
|
return [
|
|
@@ -3528,18 +3557,18 @@ function xn(s) {
|
|
|
3528
3557
|
id: "plugin:search",
|
|
3529
3558
|
type: "search",
|
|
3530
3559
|
icon: "flow-canvas-icon canvas-search",
|
|
3531
|
-
description: "
|
|
3560
|
+
description: "搜索",
|
|
3532
3561
|
group: "tools",
|
|
3533
3562
|
order: 22,
|
|
3534
3563
|
active: () => l.value,
|
|
3535
|
-
onClick:
|
|
3564
|
+
onClick: V
|
|
3536
3565
|
}
|
|
3537
3566
|
];
|
|
3538
3567
|
}
|
|
3539
3568
|
};
|
|
3540
3569
|
}
|
|
3541
|
-
const
|
|
3542
|
-
function
|
|
3570
|
+
const sn = 52, rn = 16, an = 40;
|
|
3571
|
+
function ln(s) {
|
|
3543
3572
|
const e = document.createElement("div");
|
|
3544
3573
|
e.className = "flow-canvas-minimap", s.floating !== !1 && e.classList.add("flow-canvas-minimap--floating");
|
|
3545
3574
|
const t = document.createElement("div");
|
|
@@ -3547,35 +3576,35 @@ function rn(s) {
|
|
|
3547
3576
|
width: `${s.width}px`,
|
|
3548
3577
|
height: `${s.height}px`
|
|
3549
3578
|
}), s.floating !== !1 && Object.assign(e.style, {
|
|
3550
|
-
top: `${
|
|
3551
|
-
left: `${
|
|
3579
|
+
top: `${sn}px`,
|
|
3580
|
+
left: `${rn}px`
|
|
3552
3581
|
});
|
|
3553
3582
|
let o = null, n = s.defaultOpen ?? !1, i = null;
|
|
3554
3583
|
function r() {
|
|
3555
|
-
!s.onClickOutside || i || (i = (
|
|
3556
|
-
const
|
|
3557
|
-
|
|
3584
|
+
!s.onClickOutside || i || (i = (g) => {
|
|
3585
|
+
const E = g.target;
|
|
3586
|
+
E && e.contains(E) || g.target?.closest('[data-toolbar-type="minimap"]') || s.onClickOutside();
|
|
3558
3587
|
}, document.addEventListener("mousedown", i));
|
|
3559
3588
|
}
|
|
3560
3589
|
function l() {
|
|
3561
3590
|
i && (document.removeEventListener("mousedown", i), i = null);
|
|
3562
3591
|
}
|
|
3563
3592
|
function a() {
|
|
3564
|
-
o || (o = new
|
|
3593
|
+
o || (o = new vt({
|
|
3565
3594
|
container: t,
|
|
3566
3595
|
width: s.width,
|
|
3567
3596
|
height: s.height,
|
|
3568
|
-
padding: s.contentPadding ??
|
|
3597
|
+
padding: s.contentPadding ?? an,
|
|
3569
3598
|
scalable: !1
|
|
3570
3599
|
}), s.sourceGraph.use(o));
|
|
3571
3600
|
}
|
|
3572
|
-
function h(
|
|
3573
|
-
n =
|
|
3601
|
+
function h(g) {
|
|
3602
|
+
n = g, e.style.display = n ? "" : "none", n ? (a(), r()) : l();
|
|
3574
3603
|
}
|
|
3575
3604
|
function u() {
|
|
3576
3605
|
h(n), s.mountTarget.appendChild(e);
|
|
3577
3606
|
}
|
|
3578
|
-
function
|
|
3607
|
+
function p() {
|
|
3579
3608
|
l(), o?.dispose(), o = null, e.remove();
|
|
3580
3609
|
}
|
|
3581
3610
|
return u(), {
|
|
@@ -3583,13 +3612,13 @@ function rn(s) {
|
|
|
3583
3612
|
isOpen: () => n,
|
|
3584
3613
|
setOpen: h,
|
|
3585
3614
|
toggle() {
|
|
3586
|
-
const
|
|
3587
|
-
return h(
|
|
3615
|
+
const g = !n;
|
|
3616
|
+
return h(g), g;
|
|
3588
3617
|
},
|
|
3589
|
-
destroy:
|
|
3618
|
+
destroy: p
|
|
3590
3619
|
};
|
|
3591
3620
|
}
|
|
3592
|
-
function
|
|
3621
|
+
function Cn(s) {
|
|
3593
3622
|
let e = null;
|
|
3594
3623
|
const t = q(!1);
|
|
3595
3624
|
function o(i) {
|
|
@@ -3603,7 +3632,7 @@ function En(s) {
|
|
|
3603
3632
|
priority: 90,
|
|
3604
3633
|
attachRuntime(i) {
|
|
3605
3634
|
const r = s?.width ?? 334, l = s?.height ?? 180, a = s?.container ?? i.graph.container.closest(".flow-canvas-layout__content") ?? i.graph.container.parentElement;
|
|
3606
|
-
a && (e =
|
|
3635
|
+
a && (e = ln({
|
|
3607
3636
|
sourceGraph: i.graph,
|
|
3608
3637
|
mountTarget: a,
|
|
3609
3638
|
width: r,
|
|
@@ -3622,7 +3651,7 @@ function En(s) {
|
|
|
3622
3651
|
id: "plugin:minimap",
|
|
3623
3652
|
type: "minimap",
|
|
3624
3653
|
icon: "flow-canvas-icon canvas-map",
|
|
3625
|
-
description: "
|
|
3654
|
+
description: "小地图",
|
|
3626
3655
|
group: "tools",
|
|
3627
3656
|
order: 23,
|
|
3628
3657
|
active: () => t.value,
|
|
@@ -3632,7 +3661,7 @@ function En(s) {
|
|
|
3632
3661
|
}
|
|
3633
3662
|
};
|
|
3634
3663
|
}
|
|
3635
|
-
function
|
|
3664
|
+
function kn() {
|
|
3636
3665
|
let s = null, e = 0;
|
|
3637
3666
|
return {
|
|
3638
3667
|
name: "clipboard",
|
|
@@ -3678,7 +3707,7 @@ function In() {
|
|
|
3678
3707
|
id: `${a.id}_cp${te().slice(0, 6)}`,
|
|
3679
3708
|
source: { ...a.source, nodeId: h },
|
|
3680
3709
|
target: { ...a.target, nodeId: u },
|
|
3681
|
-
labels: a.labels?.map((
|
|
3710
|
+
labels: a.labels?.map((p) => ({ ...p, id: `${p.id}_cp${te().slice(0, 6)}` })),
|
|
3682
3711
|
payload: a.payload ? { ...a.payload } : {}
|
|
3683
3712
|
}
|
|
3684
3713
|
});
|
|
@@ -3696,27 +3725,27 @@ function In() {
|
|
|
3696
3725
|
};
|
|
3697
3726
|
}
|
|
3698
3727
|
export {
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3728
|
+
fe as CanvasConstraintError,
|
|
3729
|
+
yn as CanvasLayout,
|
|
3730
|
+
bo as CanvasNodePalette,
|
|
3731
|
+
vn as CanvasRuntime,
|
|
3732
|
+
yt as CanvasSchemaError,
|
|
3733
|
+
mn as CanvasToolbar,
|
|
3734
|
+
Ho as DefaultNode,
|
|
3735
|
+
so as NodeActionsToolbar,
|
|
3736
|
+
lo as NodeQuickAddPopover,
|
|
3737
|
+
nt as applyCanvasCommand,
|
|
3738
|
+
kn as clipboardPlugin,
|
|
3739
|
+
wn as connectionValidatorPlugin,
|
|
3740
|
+
qo as createBuiltinEdgeTypes,
|
|
3741
|
+
At as createCanvasHistory,
|
|
3742
|
+
bn as createDefaultSchema,
|
|
3743
|
+
So as createDefaultToolbarItems,
|
|
3744
|
+
pn as createEmptyFlowModel,
|
|
3716
3745
|
te as generateId,
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3746
|
+
Cn as minimapPlugin,
|
|
3747
|
+
In as searchPlugin,
|
|
3748
|
+
En as selectionPlugin,
|
|
3749
|
+
xn as snaplinePlugin,
|
|
3750
|
+
hn as useCanvasEditor
|
|
3722
3751
|
};
|