@blueking/flow-canvas 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -109
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +16 -3
- package/dist/index.esm.js +1273 -1180
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { Graph as
|
|
3
|
-
import { register as
|
|
4
|
-
function
|
|
1
|
+
import { ref as O, computed as F, onScopeDispose as et, defineComponent as ge, onBeforeUnmount as ze, createElementBlock as S, openBlock as M, normalizeStyle as _e, createElementVNode as B, createVNode as tt, createCommentVNode as U, normalizeClass as ee, Transition as ot, withCtx as je, withModifiers as rt, createTextVNode as Ve, renderSlot as ke, onMounted as at, watch as fe, createBlock as De, Fragment as pe, renderList as Pe, toDisplayString as me, unref as lt, resolveDynamicComponent as dt, inject as ct } from "vue";
|
|
2
|
+
import { Graph as ut } from "@antv/x6";
|
|
3
|
+
import { register as ft } from "@antv/x6-vue-shape";
|
|
4
|
+
function Mo() {
|
|
5
5
|
return {
|
|
6
6
|
version: "1.0",
|
|
7
7
|
nodes: {},
|
|
8
8
|
edges: {}
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
|
-
class
|
|
11
|
+
class ne extends Error {
|
|
12
12
|
constructor(e) {
|
|
13
13
|
super(e), this.name = "CanvasConstraintError";
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
class
|
|
16
|
+
class pt extends Error {
|
|
17
17
|
constructor(e) {
|
|
18
18
|
super(e), this.name = "CanvasSchemaError";
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function Ae(s, e, t) {
|
|
22
22
|
if (e.length === 0) {
|
|
23
23
|
if (t === void 0) return;
|
|
24
24
|
if (typeof t != "object" || t === null || Array.isArray(t))
|
|
@@ -27,196 +27,196 @@ function Me(s, e, t) {
|
|
|
27
27
|
}
|
|
28
28
|
const o = s ? { ...s } : {};
|
|
29
29
|
let n = o;
|
|
30
|
-
for (let
|
|
31
|
-
const l = e[
|
|
30
|
+
for (let i = 0; i < e.length - 1; i++) {
|
|
31
|
+
const l = e[i], a = n[l];
|
|
32
32
|
a && typeof a == "object" && !Array.isArray(a) ? n[l] = { ...a } : n[l] = {}, n = n[l];
|
|
33
33
|
}
|
|
34
|
-
const
|
|
35
|
-
return t === void 0 ? delete n[
|
|
34
|
+
const r = e[e.length - 1];
|
|
35
|
+
return t === void 0 ? delete n[r] : n[r] = t, o;
|
|
36
36
|
}
|
|
37
|
-
function
|
|
37
|
+
function Ge(s, e) {
|
|
38
38
|
switch (e.type) {
|
|
39
39
|
case "node.add":
|
|
40
|
-
return
|
|
40
|
+
return gt(s, e.node);
|
|
41
41
|
case "node.move":
|
|
42
|
-
return
|
|
42
|
+
return ht(s, e.nodeId, e.position);
|
|
43
43
|
case "node.remove":
|
|
44
|
-
return
|
|
44
|
+
return vt(s, e.nodeId);
|
|
45
45
|
case "node.update":
|
|
46
|
-
return
|
|
46
|
+
return yt(s, e.nodeId, e.patch);
|
|
47
47
|
case "node.set-payload":
|
|
48
|
-
return
|
|
48
|
+
return mt(s, e.nodeId, e.path, e.value);
|
|
49
49
|
case "node.set-extensions":
|
|
50
|
-
return
|
|
50
|
+
return bt(s, e.nodeId, e.path, e.value);
|
|
51
51
|
case "edge.add":
|
|
52
|
-
return
|
|
52
|
+
return wt(s, e.edge);
|
|
53
53
|
case "edge.remove":
|
|
54
|
-
return
|
|
54
|
+
return xt(s, e.edgeId);
|
|
55
55
|
case "edge.reconnect":
|
|
56
|
-
return
|
|
56
|
+
return kt(s, e.edgeId, e.source, e.target);
|
|
57
57
|
case "edge.update":
|
|
58
|
-
return
|
|
58
|
+
return Ct(s, e.edgeId, e.patch);
|
|
59
59
|
case "edge.set-payload":
|
|
60
|
-
return
|
|
60
|
+
return Et(s, e.edgeId, e.path, e.value);
|
|
61
61
|
case "edge.label.update":
|
|
62
|
-
return
|
|
62
|
+
return It(s, e.edgeId, e.labelId, e.patch);
|
|
63
63
|
case "model.set-meta":
|
|
64
|
-
return
|
|
64
|
+
return Mt(s, e.path, e.value);
|
|
65
65
|
default:
|
|
66
|
-
throw new
|
|
66
|
+
throw new ne(`Unknown command type: ${e.type}`);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
|
-
function
|
|
69
|
+
function Ce(s, e) {
|
|
70
70
|
const t = s.nodes[e];
|
|
71
|
-
if (!t) throw new
|
|
71
|
+
if (!t) throw new ne(`Node "${e}" does not exist`);
|
|
72
72
|
return t;
|
|
73
73
|
}
|
|
74
|
-
function
|
|
74
|
+
function Ee(s, e) {
|
|
75
75
|
const t = s.edges[e];
|
|
76
|
-
if (!t) throw new
|
|
76
|
+
if (!t) throw new ne(`Edge "${e}" does not exist`);
|
|
77
77
|
return t;
|
|
78
78
|
}
|
|
79
|
-
function
|
|
79
|
+
function be(s, e, t) {
|
|
80
80
|
const o = s.nodes[e.nodeId];
|
|
81
81
|
if (!o)
|
|
82
|
-
throw new
|
|
83
|
-
if (e.portId && o.ports && !o.ports.some((
|
|
84
|
-
throw new
|
|
82
|
+
throw new ne(`${t} node "${e.nodeId}" does not exist`);
|
|
83
|
+
if (e.portId && o.ports && !o.ports.some((r) => r.id === e.portId))
|
|
84
|
+
throw new ne(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
|
|
85
85
|
}
|
|
86
|
-
function
|
|
86
|
+
function Te(s, e, t) {
|
|
87
87
|
return { ...s, nodes: { ...s.nodes, [e]: t } };
|
|
88
88
|
}
|
|
89
|
-
function
|
|
89
|
+
function Re(s, e, t) {
|
|
90
90
|
return { ...s, edges: { ...s.edges, [e]: t } };
|
|
91
91
|
}
|
|
92
|
-
function
|
|
92
|
+
function gt(s, e) {
|
|
93
93
|
if (s.nodes[e.id])
|
|
94
|
-
throw new
|
|
94
|
+
throw new ne(`Node id "${e.id}" already exists`);
|
|
95
95
|
return { ...s, nodes: { ...s.nodes, [e.id]: e } };
|
|
96
96
|
}
|
|
97
|
-
function
|
|
98
|
-
const o =
|
|
99
|
-
return
|
|
97
|
+
function ht(s, e, t) {
|
|
98
|
+
const o = Ce(s, e);
|
|
99
|
+
return Te(s, e, { ...o, position: t });
|
|
100
100
|
}
|
|
101
|
-
function
|
|
102
|
-
|
|
101
|
+
function vt(s, e) {
|
|
102
|
+
Ce(s, e);
|
|
103
103
|
const { [e]: t, ...o } = s.nodes, n = {};
|
|
104
|
-
for (const [
|
|
105
|
-
|
|
104
|
+
for (const [r, i] of Object.entries(s.edges))
|
|
105
|
+
i.source.nodeId !== e && i.target.nodeId !== e && (n[r] = i);
|
|
106
106
|
return { ...s, nodes: o, edges: n };
|
|
107
107
|
}
|
|
108
|
-
function
|
|
109
|
-
const o =
|
|
110
|
-
return
|
|
108
|
+
function yt(s, e, t) {
|
|
109
|
+
const o = Ce(s, e);
|
|
110
|
+
return Te(s, e, { ...o, ...t, id: o.id });
|
|
111
111
|
}
|
|
112
|
-
function
|
|
113
|
-
const n =
|
|
114
|
-
return
|
|
112
|
+
function mt(s, e, t, o) {
|
|
113
|
+
const n = Ce(s, e), r = Ae(n.payload, t, o);
|
|
114
|
+
return Te(s, e, { ...n, payload: r });
|
|
115
115
|
}
|
|
116
|
-
function
|
|
117
|
-
const n =
|
|
118
|
-
return
|
|
116
|
+
function bt(s, e, t, o) {
|
|
117
|
+
const n = Ce(s, e), r = Ae(n.extensions, t, o);
|
|
118
|
+
return Te(s, e, { ...n, extensions: r });
|
|
119
119
|
}
|
|
120
|
-
function
|
|
120
|
+
function wt(s, e) {
|
|
121
121
|
if (s.edges[e.id])
|
|
122
|
-
throw new
|
|
123
|
-
if (
|
|
122
|
+
throw new ne(`Edge id "${e.id}" already exists`);
|
|
123
|
+
if (be(s, e.source, "Source"), be(s, e.target, "Target"), e.labels) {
|
|
124
124
|
const t = /* @__PURE__ */ new Set();
|
|
125
125
|
for (const o of e.labels) {
|
|
126
126
|
if (t.has(o.id))
|
|
127
|
-
throw new
|
|
127
|
+
throw new ne(`Duplicate label id "${o.id}" in edge "${e.id}"`);
|
|
128
128
|
t.add(o.id);
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
return { ...s, edges: { ...s.edges, [e.id]: e } };
|
|
132
132
|
}
|
|
133
|
-
function
|
|
134
|
-
|
|
133
|
+
function xt(s, e) {
|
|
134
|
+
Ee(s, e);
|
|
135
135
|
const { [e]: t, ...o } = s.edges;
|
|
136
136
|
return { ...s, edges: o };
|
|
137
137
|
}
|
|
138
|
-
function
|
|
139
|
-
const n =
|
|
140
|
-
return
|
|
138
|
+
function kt(s, e, t, o) {
|
|
139
|
+
const n = Ee(s, e), r = t ?? n.source, i = o ?? n.target;
|
|
140
|
+
return be(s, r, "Source"), be(s, i, "Target"), Re(s, e, { ...n, source: r, target: i });
|
|
141
141
|
}
|
|
142
|
-
function
|
|
143
|
-
const o =
|
|
144
|
-
return t.source &&
|
|
142
|
+
function Ct(s, e, t) {
|
|
143
|
+
const o = Ee(s, e), n = { ...o, ...t, id: o.id };
|
|
144
|
+
return t.source && be(s, n.source, "Source"), t.target && be(s, n.target, "Target"), Re(s, e, n);
|
|
145
145
|
}
|
|
146
|
-
function
|
|
147
|
-
const n =
|
|
148
|
-
return
|
|
146
|
+
function Et(s, e, t, o) {
|
|
147
|
+
const n = Ee(s, e), r = Ae(n.payload, t, o);
|
|
148
|
+
return Re(s, e, { ...n, payload: r });
|
|
149
149
|
}
|
|
150
|
-
function
|
|
151
|
-
const n =
|
|
150
|
+
function It(s, e, t, o) {
|
|
151
|
+
const n = Ee(s, e);
|
|
152
152
|
if (!n.labels)
|
|
153
|
-
throw new
|
|
154
|
-
const
|
|
155
|
-
if (
|
|
156
|
-
throw new
|
|
157
|
-
const
|
|
158
|
-
return r
|
|
153
|
+
throw new ne(`Edge "${e}" has no labels`);
|
|
154
|
+
const r = n.labels.findIndex((l) => l.id === t);
|
|
155
|
+
if (r === -1)
|
|
156
|
+
throw new ne(`Label "${t}" not found in edge "${e}"`);
|
|
157
|
+
const i = [...n.labels];
|
|
158
|
+
return i[r] = { ...i[r], ...o, id: t }, Re(s, e, { ...n, labels: i });
|
|
159
159
|
}
|
|
160
|
-
function
|
|
161
|
-
const o =
|
|
160
|
+
function Mt(s, e, t) {
|
|
161
|
+
const o = Ae(s.meta, e, t);
|
|
162
162
|
return { ...s, meta: o };
|
|
163
163
|
}
|
|
164
|
-
function
|
|
165
|
-
const t = e?.maxHistorySize ?? 100, o =
|
|
164
|
+
function Nt(s, e) {
|
|
165
|
+
const t = e?.maxHistorySize ?? 100, o = O(s), n = [], r = [], i = O(!1), l = O(!1);
|
|
166
166
|
function a() {
|
|
167
|
-
|
|
167
|
+
i.value = n.length > 0, l.value = r.length > 0;
|
|
168
168
|
}
|
|
169
|
-
function
|
|
170
|
-
const
|
|
171
|
-
let
|
|
172
|
-
for (const
|
|
173
|
-
|
|
174
|
-
return n.push({ snapshot:
|
|
169
|
+
function g(w) {
|
|
170
|
+
const N = o.value;
|
|
171
|
+
let m = N;
|
|
172
|
+
for (const D of w.commands)
|
|
173
|
+
m = Ge(m, D);
|
|
174
|
+
return n.push({ snapshot: N, envelope: w }), n.length > t && n.shift(), r.length = 0, o.value = m, a(), m;
|
|
175
175
|
}
|
|
176
176
|
function d() {
|
|
177
|
-
const
|
|
178
|
-
return
|
|
177
|
+
const w = n.pop();
|
|
178
|
+
return w ? (r.push({ snapshot: o.value, envelope: w.envelope }), o.value = w.snapshot, a(), w.snapshot) : null;
|
|
179
|
+
}
|
|
180
|
+
function v() {
|
|
181
|
+
const w = r.pop();
|
|
182
|
+
if (!w) return null;
|
|
183
|
+
n.push({ snapshot: o.value, envelope: w.envelope });
|
|
184
|
+
let N = o.value;
|
|
185
|
+
for (const m of w.envelope.commands)
|
|
186
|
+
N = Ge(N, m);
|
|
187
|
+
return o.value = N, a(), N;
|
|
179
188
|
}
|
|
180
|
-
function
|
|
181
|
-
|
|
182
|
-
if (!k) return null;
|
|
183
|
-
n.push({ snapshot: o.value, envelope: k.envelope });
|
|
184
|
-
let w = o.value;
|
|
185
|
-
for (const x of k.envelope.commands)
|
|
186
|
-
w = Te(w, x);
|
|
187
|
-
return o.value = w, a(), w;
|
|
188
|
-
}
|
|
189
|
-
function m() {
|
|
190
|
-
n.length = 0, i.length = 0, a();
|
|
189
|
+
function f() {
|
|
190
|
+
n.length = 0, r.length = 0, a();
|
|
191
191
|
}
|
|
192
|
-
function
|
|
192
|
+
function p() {
|
|
193
193
|
return o.value;
|
|
194
194
|
}
|
|
195
|
-
function
|
|
196
|
-
o.value =
|
|
195
|
+
function E(w) {
|
|
196
|
+
o.value = w, f();
|
|
197
197
|
}
|
|
198
198
|
return {
|
|
199
199
|
currentFlowModel: o,
|
|
200
|
-
execute:
|
|
200
|
+
execute: g,
|
|
201
201
|
undo: d,
|
|
202
|
-
redo:
|
|
203
|
-
canUndo:
|
|
202
|
+
redo: v,
|
|
203
|
+
canUndo: i,
|
|
204
204
|
canRedo: l,
|
|
205
205
|
get undoStack() {
|
|
206
|
-
return n.map((
|
|
206
|
+
return n.map((w) => w.envelope);
|
|
207
207
|
},
|
|
208
208
|
get redoStack() {
|
|
209
|
-
return
|
|
209
|
+
return r.map((w) => w.envelope);
|
|
210
210
|
},
|
|
211
|
-
clear:
|
|
212
|
-
createSnapshot:
|
|
213
|
-
replaceFlowModel:
|
|
211
|
+
clear: f,
|
|
212
|
+
createSnapshot: p,
|
|
213
|
+
replaceFlowModel: E
|
|
214
214
|
};
|
|
215
215
|
}
|
|
216
|
-
function
|
|
216
|
+
function St(s) {
|
|
217
217
|
return s !== null && typeof s == "object" && s.rejected === !0;
|
|
218
218
|
}
|
|
219
|
-
class
|
|
219
|
+
class Dt {
|
|
220
220
|
plugins = [];
|
|
221
221
|
editorContext = null;
|
|
222
222
|
runtimeCtx = null;
|
|
@@ -251,11 +251,11 @@ class xt {
|
|
|
251
251
|
*/
|
|
252
252
|
createSafeRuntimeContext(e, t) {
|
|
253
253
|
const o = this, n = new Proxy(e.graph, {
|
|
254
|
-
get(
|
|
255
|
-
const a = Reflect.get(
|
|
256
|
-
return
|
|
254
|
+
get(r, i, l) {
|
|
255
|
+
const a = Reflect.get(r, i, l);
|
|
256
|
+
return i === "use" && typeof a == "function" ? function(...d) {
|
|
257
257
|
if (o.runtimeVersion === t)
|
|
258
|
-
return a.apply(
|
|
258
|
+
return a.apply(r, d);
|
|
259
259
|
} : a;
|
|
260
260
|
}
|
|
261
261
|
});
|
|
@@ -271,8 +271,8 @@ class xt {
|
|
|
271
271
|
let t = e;
|
|
272
272
|
for (const o of this.plugins) {
|
|
273
273
|
if (!o.transformCommand) continue;
|
|
274
|
-
const n = this.createPreview(t),
|
|
275
|
-
if (
|
|
274
|
+
const n = this.createPreview(t), r = o.transformCommand(t, n, this.editorContext);
|
|
275
|
+
if (r === null)
|
|
276
276
|
return {
|
|
277
277
|
rejected: !0,
|
|
278
278
|
error: {
|
|
@@ -281,16 +281,16 @@ class xt {
|
|
|
281
281
|
source: o.name
|
|
282
282
|
}
|
|
283
283
|
};
|
|
284
|
-
if (
|
|
284
|
+
if (St(r))
|
|
285
285
|
return {
|
|
286
286
|
rejected: !0,
|
|
287
287
|
error: {
|
|
288
|
-
code:
|
|
289
|
-
reason:
|
|
288
|
+
code: r.code ?? "plugin_rejected",
|
|
289
|
+
reason: r.reason,
|
|
290
290
|
source: o.name
|
|
291
291
|
}
|
|
292
292
|
};
|
|
293
|
-
t =
|
|
293
|
+
t = r;
|
|
294
294
|
}
|
|
295
295
|
return { envelope: t };
|
|
296
296
|
}
|
|
@@ -372,44 +372,50 @@ class xt {
|
|
|
372
372
|
return {
|
|
373
373
|
previewFlowModel(o) {
|
|
374
374
|
const n = o ?? e.commands;
|
|
375
|
-
let
|
|
376
|
-
for (const
|
|
377
|
-
|
|
378
|
-
return
|
|
375
|
+
let r = t.flowModel.value;
|
|
376
|
+
for (const i of n)
|
|
377
|
+
r = Ge(r, i);
|
|
378
|
+
return r;
|
|
379
379
|
}
|
|
380
380
|
};
|
|
381
381
|
}
|
|
382
382
|
}
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
383
|
+
let Pt = 0;
|
|
384
|
+
function W() {
|
|
385
|
+
const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
|
|
386
|
+
return `${s}-${e}-${++Pt}`;
|
|
387
|
+
}
|
|
388
|
+
const He = () => W();
|
|
389
|
+
function No(s) {
|
|
390
|
+
const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ?? He, r = { version: "1.0", ...s.initialFlowModel }, i = Nt(r, o), l = O(s.mode ?? "edit"), a = O(!1), g = O(null), d = O([]), v = {}, f = new Dt();
|
|
391
|
+
function p(m, D, z, X = "user:toolbar") {
|
|
392
|
+
const j = {
|
|
387
393
|
id: `history-${Date.now()}`,
|
|
388
|
-
source:
|
|
389
|
-
label:
|
|
394
|
+
source: X,
|
|
395
|
+
label: m,
|
|
390
396
|
timestamp: Date.now(),
|
|
391
397
|
commands: []
|
|
392
398
|
};
|
|
393
|
-
|
|
399
|
+
f.afterCommand(j, D, z), d.value = f.collectToolbarItems(), s.onCommandResult?.({
|
|
394
400
|
status: "applied",
|
|
395
|
-
envelope:
|
|
396
|
-
flowModel:
|
|
401
|
+
envelope: j,
|
|
402
|
+
flowModel: z
|
|
397
403
|
}), s.onFlowModelChange?.({
|
|
398
|
-
flowModel:
|
|
399
|
-
prevFlowModel:
|
|
400
|
-
envelope:
|
|
401
|
-
source:
|
|
404
|
+
flowModel: z,
|
|
405
|
+
prevFlowModel: D,
|
|
406
|
+
envelope: j,
|
|
407
|
+
source: X
|
|
402
408
|
});
|
|
403
409
|
}
|
|
404
|
-
const
|
|
410
|
+
const E = {
|
|
405
411
|
execute: i.execute,
|
|
406
412
|
undo() {
|
|
407
|
-
const
|
|
408
|
-
return
|
|
413
|
+
const m = i.currentFlowModel.value, D = i.undo();
|
|
414
|
+
return D && p("撤销", m, D), D;
|
|
409
415
|
},
|
|
410
416
|
redo() {
|
|
411
|
-
const
|
|
412
|
-
return
|
|
417
|
+
const m = i.currentFlowModel.value, D = i.redo();
|
|
418
|
+
return D && p("重做", m, D), D;
|
|
413
419
|
},
|
|
414
420
|
get canUndo() {
|
|
415
421
|
return i.canUndo;
|
|
@@ -425,89 +431,91 @@ function bo(s) {
|
|
|
425
431
|
},
|
|
426
432
|
clear: i.clear,
|
|
427
433
|
createSnapshot: i.createSnapshot,
|
|
428
|
-
replaceFlowModel(
|
|
429
|
-
const
|
|
430
|
-
i.replaceFlowModel(
|
|
434
|
+
replaceFlowModel(m) {
|
|
435
|
+
const D = i.currentFlowModel.value;
|
|
436
|
+
i.replaceFlowModel(m), p("替换 FlowModel", D, m, "system:replace");
|
|
431
437
|
}
|
|
432
|
-
},
|
|
433
|
-
flowModel:
|
|
434
|
-
history:
|
|
438
|
+
}, w = {
|
|
439
|
+
flowModel: F(() => i.currentFlowModel.value),
|
|
440
|
+
history: E,
|
|
435
441
|
schema: e,
|
|
436
|
-
mode:
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
442
|
+
mode: l,
|
|
443
|
+
idGenerator: n,
|
|
444
|
+
executeCommand: N,
|
|
445
|
+
replaceFlowModel(m) {
|
|
446
|
+
E.replaceFlowModel(m);
|
|
440
447
|
},
|
|
441
|
-
setMode(
|
|
442
|
-
|
|
448
|
+
setMode(m) {
|
|
449
|
+
l.value = m;
|
|
443
450
|
},
|
|
444
|
-
selectionMode:
|
|
445
|
-
setSelectionMode(
|
|
446
|
-
|
|
451
|
+
selectionMode: a,
|
|
452
|
+
setSelectionMode(m) {
|
|
453
|
+
a.value = m;
|
|
447
454
|
},
|
|
448
|
-
api:
|
|
449
|
-
toolbarItems:
|
|
450
|
-
extendedApi:
|
|
451
|
-
_pluginManager:
|
|
455
|
+
api: g,
|
|
456
|
+
toolbarItems: d,
|
|
457
|
+
extendedApi: v,
|
|
458
|
+
_pluginManager: f
|
|
452
459
|
};
|
|
453
|
-
|
|
454
|
-
flowModel:
|
|
455
|
-
history:
|
|
460
|
+
f.install(t, {
|
|
461
|
+
flowModel: w.flowModel,
|
|
462
|
+
history: E,
|
|
456
463
|
schema: e,
|
|
457
|
-
mode:
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
464
|
+
mode: l,
|
|
465
|
+
idGenerator: n,
|
|
466
|
+
executeCommand: N
|
|
467
|
+
}), d.value = f.collectToolbarItems(), et(() => {
|
|
468
|
+
f.dispose();
|
|
461
469
|
});
|
|
462
|
-
function
|
|
463
|
-
const
|
|
464
|
-
if ("rejected" in
|
|
465
|
-
const
|
|
470
|
+
function N(m) {
|
|
471
|
+
const D = f.transformCommand(m);
|
|
472
|
+
if ("rejected" in D) {
|
|
473
|
+
const j = {
|
|
466
474
|
status: "rejected",
|
|
467
|
-
envelope:
|
|
468
|
-
error:
|
|
475
|
+
envelope: m,
|
|
476
|
+
error: D.error
|
|
469
477
|
};
|
|
470
|
-
return s.onCommandResult?.(
|
|
478
|
+
return s.onCommandResult?.(j), j;
|
|
471
479
|
}
|
|
472
|
-
const
|
|
480
|
+
const z = D.envelope, X = i.currentFlowModel.value;
|
|
473
481
|
try {
|
|
474
|
-
const
|
|
482
|
+
const j = i.execute(z), oe = {
|
|
475
483
|
status: "applied",
|
|
476
|
-
envelope:
|
|
477
|
-
flowModel:
|
|
484
|
+
envelope: z,
|
|
485
|
+
flowModel: j
|
|
478
486
|
};
|
|
479
|
-
return
|
|
480
|
-
flowModel:
|
|
481
|
-
prevFlowModel:
|
|
482
|
-
envelope:
|
|
483
|
-
source:
|
|
484
|
-
}),
|
|
485
|
-
} catch (
|
|
486
|
-
if (
|
|
487
|
-
const
|
|
487
|
+
return f.afterCommand(z, X, j), d.value = f.collectToolbarItems(), s.onCommandResult?.(oe), s.onFlowModelChange?.({
|
|
488
|
+
flowModel: j,
|
|
489
|
+
prevFlowModel: X,
|
|
490
|
+
envelope: z,
|
|
491
|
+
source: z.source
|
|
492
|
+
}), oe;
|
|
493
|
+
} catch (j) {
|
|
494
|
+
if (j instanceof ne) {
|
|
495
|
+
const oe = {
|
|
488
496
|
status: "invalid",
|
|
489
|
-
envelope:
|
|
497
|
+
envelope: z,
|
|
490
498
|
error: {
|
|
491
499
|
code: "constraint_violated",
|
|
492
|
-
reason:
|
|
500
|
+
reason: j.message,
|
|
493
501
|
source: "engine"
|
|
494
502
|
}
|
|
495
503
|
};
|
|
496
|
-
return s.onCommandResult?.(
|
|
504
|
+
return s.onCommandResult?.(oe), oe;
|
|
497
505
|
}
|
|
498
|
-
throw
|
|
506
|
+
throw j;
|
|
499
507
|
}
|
|
500
508
|
}
|
|
501
|
-
return
|
|
509
|
+
return w;
|
|
502
510
|
}
|
|
503
|
-
const
|
|
504
|
-
function
|
|
505
|
-
return
|
|
511
|
+
const _t = ["top", "right", "bottom", "left"];
|
|
512
|
+
function nt() {
|
|
513
|
+
return _t.map((s) => ({ id: s, group: s }));
|
|
506
514
|
}
|
|
507
|
-
function
|
|
508
|
-
return e?.(s) ?? s.ports ??
|
|
515
|
+
function Fe(s, e) {
|
|
516
|
+
return e?.(s) ?? s.ports ?? nt();
|
|
509
517
|
}
|
|
510
|
-
class
|
|
518
|
+
class At {
|
|
511
519
|
graph;
|
|
512
520
|
schema;
|
|
513
521
|
shapeRegistry;
|
|
@@ -532,8 +540,8 @@ class Ct {
|
|
|
532
540
|
/** x6EdgeConfig 中 attrs.line 的基线值,清理时恢复而非删除 */
|
|
533
541
|
edgeDefaultAttrs = /* @__PURE__ */ new Map();
|
|
534
542
|
lastModel = null;
|
|
535
|
-
constructor(e, t, o, n,
|
|
536
|
-
this.graph = e, this.schema = t, this.shapeRegistry = o, this.resolveNodeDecoration = n, this.resolveEdgeDecoration =
|
|
543
|
+
constructor(e, t, o, n, r, i) {
|
|
544
|
+
this.graph = e, this.schema = t, this.shapeRegistry = o, this.resolveNodeDecoration = n, this.resolveEdgeDecoration = r, this.resolveCanvasContext = i;
|
|
537
545
|
}
|
|
538
546
|
syncFlowModel(e) {
|
|
539
547
|
if (!this.syncing) {
|
|
@@ -556,9 +564,9 @@ class Ct {
|
|
|
556
564
|
saveNodeDefaultAttrs(e, t) {
|
|
557
565
|
const n = t.x6CellConfig?.attrs?.body;
|
|
558
566
|
if (!n) return;
|
|
559
|
-
const
|
|
560
|
-
let
|
|
561
|
-
n.stroke !== void 0 && (
|
|
567
|
+
const r = {};
|
|
568
|
+
let i = !1;
|
|
569
|
+
n.stroke !== void 0 && (r.stroke = n.stroke, i = !0), n.strokeWidth !== void 0 && (r.strokeWidth = n.strokeWidth, i = !0), i && this.nodeDefaultAttrs.set(e, r);
|
|
562
570
|
}
|
|
563
571
|
/**
|
|
564
572
|
* 从 x6EdgeConfig.attrs.line 中提取基线描边,用于管理层清理时恢复。
|
|
@@ -566,9 +574,9 @@ class Ct {
|
|
|
566
574
|
saveEdgeDefaultAttrs(e, t) {
|
|
567
575
|
const n = t?.x6EdgeConfig?.attrs?.line;
|
|
568
576
|
if (!n) return;
|
|
569
|
-
const
|
|
570
|
-
let
|
|
571
|
-
n.stroke !== void 0 && (
|
|
577
|
+
const r = {};
|
|
578
|
+
let i = !1;
|
|
579
|
+
n.stroke !== void 0 && (r.stroke = n.stroke, i = !0), n.strokeWidth !== void 0 && (r.strokeWidth = n.strokeWidth, i = !0), n.strokeDasharray !== void 0 && (r.strokeDasharray = n.strokeDasharray, i = !0), i && this.edgeDefaultAttrs.set(e, r);
|
|
572
580
|
}
|
|
573
581
|
/** 恢复节点 attr 到基线值;无基线时移除。 */
|
|
574
582
|
restoreNodeAttr(e, t, o) {
|
|
@@ -582,8 +590,8 @@ class Ct {
|
|
|
582
590
|
}
|
|
583
591
|
/** 让正式边接管交互式预览边时,恢复 schema 定义的端点 marker。 */
|
|
584
592
|
syncEdgeMarker(e, t, o) {
|
|
585
|
-
const
|
|
586
|
-
e.removeAttrByPath(
|
|
593
|
+
const r = t?.x6EdgeConfig?.attrs?.line?.[o], i = `line/${o}`;
|
|
594
|
+
e.removeAttrByPath(i), r !== void 0 && e.setAttrByPath(i, r);
|
|
587
595
|
}
|
|
588
596
|
dispose() {
|
|
589
597
|
this.knownNodeIds.clear(), this.knownEdgeIds.clear();
|
|
@@ -591,21 +599,21 @@ class Ct {
|
|
|
591
599
|
resolveNodes(e) {
|
|
592
600
|
const t = /* @__PURE__ */ new Map();
|
|
593
601
|
for (const [o, n] of Object.entries(e.nodes)) {
|
|
594
|
-
const
|
|
595
|
-
if (!
|
|
596
|
-
throw new
|
|
602
|
+
const r = this.schema.nodeTypes[n.type];
|
|
603
|
+
if (!r)
|
|
604
|
+
throw new pt(
|
|
597
605
|
`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.`
|
|
598
606
|
);
|
|
599
|
-
const
|
|
600
|
-
t.set(o, { model: n, definition:
|
|
607
|
+
const i = this.shapeRegistry.registerNodeType(n.type, r.component), l = r.getSize(n), a = Fe(n, r.getPorts);
|
|
608
|
+
t.set(o, { model: n, definition: r, shapeName: i, size: l, ports: a });
|
|
601
609
|
}
|
|
602
610
|
return t;
|
|
603
611
|
}
|
|
604
612
|
resolveEdges(e) {
|
|
605
613
|
const t = /* @__PURE__ */ new Map();
|
|
606
614
|
for (const [o, n] of Object.entries(e.edges)) {
|
|
607
|
-
const
|
|
608
|
-
t.set(o, { model: n, definition:
|
|
615
|
+
const r = n.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[r];
|
|
616
|
+
t.set(o, { model: n, definition: i });
|
|
609
617
|
}
|
|
610
618
|
return t;
|
|
611
619
|
}
|
|
@@ -617,31 +625,36 @@ class Ct {
|
|
|
617
625
|
n && this.graph.removeCell(n), this.knownNodeIds.delete(o), this.defaultHighlightedNodeIds.delete(o), this.prevNodeDecorationClasses.delete(o), this.prevNodeDecorationColors.delete(o), this.nodeDefaultAttrs.delete(o);
|
|
618
626
|
}
|
|
619
627
|
for (const [o, n] of e) {
|
|
620
|
-
const
|
|
621
|
-
|
|
628
|
+
const r = this.graph.getCellById(o);
|
|
629
|
+
r ? this.updateExistingNode(r, n) : this.addNewNode(o, n);
|
|
622
630
|
}
|
|
623
631
|
}
|
|
624
632
|
updateExistingNode(e, t) {
|
|
625
|
-
const { model: o, size: n, ports:
|
|
626
|
-
(
|
|
627
|
-
|
|
628
|
-
|
|
633
|
+
const { model: o, size: n, ports: r, definition: i } = t;
|
|
634
|
+
if (e.getData()?.type !== o.type) {
|
|
635
|
+
this.graph.removeCell(e), this.addNewNode(e.id, t);
|
|
636
|
+
return;
|
|
637
|
+
}
|
|
638
|
+
const a = e.getPosition();
|
|
639
|
+
(a.x !== o.position.x || a.y !== o.position.y) && e.setPosition(o.position.x, o.position.y);
|
|
640
|
+
const g = e.getSize();
|
|
641
|
+
(g.width !== n.width || g.height !== n.height) && e.setSize(n.width, n.height, { silent: !0 }), this.syncNodePorts(e, r), e.setData({ ...o }), this.applyNodeBehavior(e, o, i), this.applyNodeHighlightAndDecoration(e, o);
|
|
629
642
|
}
|
|
630
643
|
syncNodePorts(e, t) {
|
|
631
|
-
const o = e.getPorts(), n = new Set(t.map((
|
|
632
|
-
for (const
|
|
633
|
-
|
|
634
|
-
for (const
|
|
635
|
-
|
|
644
|
+
const o = e.getPorts(), n = new Set(t.map((i) => i.id)), r = new Set(o.map((i) => i.id));
|
|
645
|
+
for (const i of o)
|
|
646
|
+
i.id && !n.has(i.id) && e.removePort(i.id);
|
|
647
|
+
for (const i of t)
|
|
648
|
+
r.has(i.id) || e.addPort({ id: i.id, group: i.group, ...i.x6PortConfig });
|
|
636
649
|
}
|
|
637
650
|
addNewNode(e, t) {
|
|
638
|
-
const { model: o, shapeName: n, size:
|
|
651
|
+
const { model: o, shapeName: n, size: r, ports: i, definition: l } = t, a = {
|
|
639
652
|
id: o.id,
|
|
640
653
|
shape: n,
|
|
641
654
|
x: o.position.x,
|
|
642
655
|
y: o.position.y,
|
|
643
|
-
width:
|
|
644
|
-
height:
|
|
656
|
+
width: r.width,
|
|
657
|
+
height: r.height,
|
|
645
658
|
data: { ...o },
|
|
646
659
|
ports: {
|
|
647
660
|
groups: {
|
|
@@ -670,13 +683,13 @@ class Ct {
|
|
|
670
683
|
}
|
|
671
684
|
}
|
|
672
685
|
},
|
|
673
|
-
items:
|
|
686
|
+
items: i.map((d) => ({ id: d.id, group: d.group, ...d.x6PortConfig }))
|
|
674
687
|
},
|
|
675
688
|
...l.x6CellConfig
|
|
676
689
|
};
|
|
677
690
|
this.graph.addNode(a), this.knownNodeIds.add(e), this.saveNodeDefaultAttrs(e, l);
|
|
678
|
-
const
|
|
679
|
-
|
|
691
|
+
const g = this.graph.getCellById(e);
|
|
692
|
+
g && (this.applyNodeBehavior(g, o, l), this.applyNodeHighlightAndDecoration(g, o));
|
|
680
693
|
}
|
|
681
694
|
/**
|
|
682
695
|
* 将 schema 定义的 getBehavior 映射到 X6 节点属性。
|
|
@@ -691,30 +704,30 @@ class Ct {
|
|
|
691
704
|
if (!o.getBehavior) return;
|
|
692
705
|
const n = this.resolveCanvasContext?.();
|
|
693
706
|
if (!n) return;
|
|
694
|
-
const
|
|
695
|
-
if (
|
|
696
|
-
const l =
|
|
707
|
+
const r = o.getBehavior(t, n);
|
|
708
|
+
if (r.draggable !== void 0 && e.setProp("draggable", r.draggable, { silent: !0 }), r.connectable !== void 0) {
|
|
709
|
+
const l = r.connectable;
|
|
697
710
|
for (const a of e.getPorts())
|
|
698
711
|
e.setPortProp(a.id, "attrs/circle/magnet", l, { silent: !0 });
|
|
699
712
|
}
|
|
700
|
-
if (
|
|
701
|
-
const l =
|
|
713
|
+
if (r.showPorts !== void 0) {
|
|
714
|
+
const l = r.showPorts;
|
|
702
715
|
for (const a of e.getPorts())
|
|
703
|
-
e.setPortProp(a.id, "attrs/circle/
|
|
716
|
+
e.setPortProp(a.id, "attrs/circle/visibility", l ? "visible" : "hidden", { silent: !0 });
|
|
704
717
|
}
|
|
705
|
-
const
|
|
706
|
-
|
|
718
|
+
const i = e.getData() ?? {};
|
|
719
|
+
r.deletable !== void 0 && i._deletable !== r.deletable && e.setData({ ...i, _deletable: r.deletable }, { silent: !0 }), r.selectable !== void 0 && i._selectable !== r.selectable && e.setData({ ...e.getData(), _selectable: r.selectable }, { silent: !0 });
|
|
707
720
|
}
|
|
708
721
|
syncEdges(e, t) {
|
|
709
722
|
const o = new Set(e.keys());
|
|
710
723
|
for (const n of this.knownEdgeIds)
|
|
711
724
|
if (!o.has(n)) {
|
|
712
|
-
const
|
|
713
|
-
|
|
725
|
+
const r = this.graph.getCellById(n);
|
|
726
|
+
r && this.graph.removeCell(r), this.knownEdgeIds.delete(n), this.defaultHighlightedEdgeIds.delete(n), this.prevEdgeDecorationClasses.delete(n), this.prevEdgeDecorationColors.delete(n), this.prevEdgeStyleIds.delete(n), this.edgeDefaultAttrs.delete(n);
|
|
714
727
|
}
|
|
715
|
-
for (const [n,
|
|
716
|
-
const
|
|
717
|
-
|
|
728
|
+
for (const [n, r] of e) {
|
|
729
|
+
const i = this.graph.getCellById(n), { model: l, definition: a } = r;
|
|
730
|
+
i ? (this.updateExistingEdge(i, l, a, t), this.knownEdgeIds.has(n) || (this.knownEdgeIds.add(n), this.saveEdgeDefaultAttrs(n, a))) : this.addNewEdge(n, l, a);
|
|
718
731
|
}
|
|
719
732
|
}
|
|
720
733
|
/**
|
|
@@ -723,8 +736,8 @@ class Ct {
|
|
|
723
736
|
* 需要用 (currentSource as any).cell 来比较。
|
|
724
737
|
*/
|
|
725
738
|
updateExistingEdge(e, t, o, n) {
|
|
726
|
-
const
|
|
727
|
-
if ((
|
|
739
|
+
const r = e.getSource(), i = e.getTarget();
|
|
740
|
+
if ((r.cell !== t.source.nodeId || r.port !== t.source.portId) && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), (i.cell !== t.target.nodeId || i.port !== t.target.portId) && e.setTarget({ cell: t.target.nodeId, port: t.target.portId }), o?.router) {
|
|
728
741
|
const l = typeof o.router == "string" ? { name: o.router } : o.router;
|
|
729
742
|
e.setRouter(l);
|
|
730
743
|
}
|
|
@@ -755,12 +768,12 @@ class Ct {
|
|
|
755
768
|
data: { ...t },
|
|
756
769
|
zIndex: -1
|
|
757
770
|
};
|
|
758
|
-
o?.router && (n.router = typeof o.router == "string" ? { name: o.router } : o.router), o?.connector && (n.connector = typeof o.connector == "string" ? { name: o.connector } : o.connector), o?.x6EdgeConfig && Object.assign(n, o.x6EdgeConfig), t.labels?.length && (n.labels = t.labels.map((
|
|
759
|
-
attrs: { label: { text:
|
|
760
|
-
position:
|
|
771
|
+
o?.router && (n.router = typeof o.router == "string" ? { name: o.router } : o.router), o?.connector && (n.connector = typeof o.connector == "string" ? { name: o.connector } : o.connector), o?.x6EdgeConfig && Object.assign(n, o.x6EdgeConfig), t.labels?.length && (n.labels = t.labels.map((i) => ({
|
|
772
|
+
attrs: { label: { text: i.text ?? "" } },
|
|
773
|
+
position: i.position != null ? { distance: i.position } : void 0
|
|
761
774
|
}))), this.graph.addEdge(n), this.knownEdgeIds.add(e), this.saveEdgeDefaultAttrs(e, o);
|
|
762
|
-
const
|
|
763
|
-
|
|
775
|
+
const r = this.graph.getCellById(e);
|
|
776
|
+
r && this.applyEdgeStyleAndDecoration(r, t, o);
|
|
764
777
|
}
|
|
765
778
|
/**
|
|
766
779
|
* 外部通知选区、高亮或 hover 变化时,重算所有边的视觉样式。
|
|
@@ -772,8 +785,8 @@ class Ct {
|
|
|
772
785
|
for (const [e, t] of Object.entries(this.lastModel.edges)) {
|
|
773
786
|
const o = this.graph.getCellById(e);
|
|
774
787
|
if (!o?.isEdge()) continue;
|
|
775
|
-
const n = t.type ?? this.schema.defaultEdgeType ?? "default",
|
|
776
|
-
this.applyEdgeStyleAndDecoration(o, t,
|
|
788
|
+
const n = t.type ?? this.schema.defaultEdgeType ?? "default", r = this.schema.edgeTypes?.[n];
|
|
789
|
+
this.applyEdgeStyleAndDecoration(o, t, r);
|
|
777
790
|
}
|
|
778
791
|
}
|
|
779
792
|
/**
|
|
@@ -798,10 +811,10 @@ class Ct {
|
|
|
798
811
|
* 只在"曾经设过 → 现在无值"时执行 removeAttrByPath,避免误删 X6 原始样式。
|
|
799
812
|
*/
|
|
800
813
|
applyNodeHighlightAndDecoration(e, t) {
|
|
801
|
-
const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t),
|
|
802
|
-
|
|
803
|
-
const
|
|
804
|
-
a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) :
|
|
814
|
+
const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), r = this.prevNodeDecorationClasses.get(e.id);
|
|
815
|
+
r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (this.graph.findViewByCell(e)?.container?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
|
|
816
|
+
const i = n?.borderColor, a = i ?? (o ? "#3a84ff" : void 0), g = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
|
|
817
|
+
a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : g && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), i ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !i ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
|
|
805
818
|
}
|
|
806
819
|
setHoveredEdge(e) {
|
|
807
820
|
this.hoveredEdgeId = e;
|
|
@@ -824,24 +837,19 @@ class Ct {
|
|
|
824
837
|
* 最终值 = decorationStroke ?? styleStroke ?? defaultHighlightStroke ?? (清除)。
|
|
825
838
|
*/
|
|
826
839
|
applyEdgeStyleAndDecoration(e, t, o) {
|
|
827
|
-
const n = this.highlightedEdgeIds.has(e.id),
|
|
828
|
-
|
|
829
|
-
let l, a,
|
|
840
|
+
const n = this.highlightedEdgeIds.has(e.id), r = this.resolveEdgeDecoration?.(t), i = this.prevEdgeDecorationClasses.get(e.id);
|
|
841
|
+
i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevEdgeDecorationClasses.delete(e.id)), r?.className && (this.graph.findViewByCell(e)?.container?.classList.add(r.className), this.prevEdgeDecorationClasses.set(e.id, r.className));
|
|
842
|
+
let l, a, g;
|
|
830
843
|
if (o?.style) {
|
|
831
|
-
const
|
|
832
|
-
l =
|
|
844
|
+
const E = this.graph.isSelected?.(e) ?? !1, w = this.hoveredEdgeId === e.id, N = o.style(t, { selected: E, highlighted: n, hovered: w });
|
|
845
|
+
l = N.stroke, a = N.strokeWidth, g = N.strokeDasharray;
|
|
833
846
|
}
|
|
834
|
-
const d = !o?.style && n ? "#3a84ff" : void 0,
|
|
835
|
-
|
|
847
|
+
const d = !o?.style && n ? "#3a84ff" : void 0, v = r?.strokeColor, f = v ?? l ?? d, p = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
|
|
848
|
+
f ? e.setAttrByPath("line/stroke", f) : p && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? e.setAttrByPath("line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), g ? e.setAttrByPath("line/strokeDasharray", g) : 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)), v ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), d ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
|
|
836
849
|
}
|
|
837
850
|
}
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
|
|
841
|
-
return `${s}-${e}-${++Et}`;
|
|
842
|
-
}
|
|
843
|
-
class It {
|
|
844
|
-
instanceId = $();
|
|
851
|
+
class Tt {
|
|
852
|
+
instanceId = W();
|
|
845
853
|
registeredShapes = /* @__PURE__ */ new Map();
|
|
846
854
|
getShapeName(e) {
|
|
847
855
|
let t = this.registeredShapes.get(e);
|
|
@@ -849,7 +857,7 @@ class It {
|
|
|
849
857
|
}
|
|
850
858
|
registerNodeType(e, t) {
|
|
851
859
|
const o = this.getShapeName(e);
|
|
852
|
-
return
|
|
860
|
+
return ft({
|
|
853
861
|
shape: o,
|
|
854
862
|
component: t,
|
|
855
863
|
width: 100,
|
|
@@ -860,14 +868,15 @@ class It {
|
|
|
860
868
|
this.registeredShapes.clear();
|
|
861
869
|
}
|
|
862
870
|
}
|
|
863
|
-
class
|
|
871
|
+
class Rt {
|
|
864
872
|
graph;
|
|
865
873
|
onUiEvent;
|
|
866
874
|
onCommand;
|
|
867
875
|
flowModelRef;
|
|
876
|
+
idGenerator;
|
|
868
877
|
disposers = [];
|
|
869
|
-
constructor(e, t, o, n) {
|
|
870
|
-
this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.bindEvents();
|
|
878
|
+
constructor(e, t, o, n, r) {
|
|
879
|
+
this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.idGenerator = r ?? He, this.bindEvents();
|
|
871
880
|
}
|
|
872
881
|
dispose() {
|
|
873
882
|
for (const e of this.disposers) e();
|
|
@@ -887,11 +896,11 @@ class Mt {
|
|
|
887
896
|
}), this.on("edge:click", ({ edge: e, e: t }) => {
|
|
888
897
|
const n = t.target?.closest?.(".x6-edge-label");
|
|
889
898
|
if (n) {
|
|
890
|
-
const
|
|
899
|
+
const i = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, g = i[Math.max(0, a)];
|
|
891
900
|
this.onUiEvent({
|
|
892
901
|
type: "edge.label.click",
|
|
893
902
|
edgeId: e.id,
|
|
894
|
-
labelId:
|
|
903
|
+
labelId: g?.id ?? `label-${a}`
|
|
895
904
|
});
|
|
896
905
|
return;
|
|
897
906
|
}
|
|
@@ -907,7 +916,7 @@ class Mt {
|
|
|
907
916
|
}), this.on("node:moved", ({ node: e }) => {
|
|
908
917
|
const t = e.getPosition();
|
|
909
918
|
this.onCommand({
|
|
910
|
-
id:
|
|
919
|
+
id: W(),
|
|
911
920
|
source: "user:drag",
|
|
912
921
|
label: "移动节点",
|
|
913
922
|
timestamp: Date.now(),
|
|
@@ -916,9 +925,9 @@ class Mt {
|
|
|
916
925
|
}), this.on("edge:connected", ({ edge: e, isNew: t }) => {
|
|
917
926
|
const o = e.getSourceCell(), n = e.getTargetCell();
|
|
918
927
|
if (!o || !n) return;
|
|
919
|
-
const
|
|
920
|
-
t && !l ? this.onCommand({
|
|
921
|
-
id:
|
|
928
|
+
const r = e.getSourcePortId(), i = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
|
|
929
|
+
t && !l ? (this.graph.removeCell(e), this.onCommand({
|
|
930
|
+
id: W(),
|
|
922
931
|
source: "user:drag",
|
|
923
932
|
label: "连线",
|
|
924
933
|
timestamp: Date.now(),
|
|
@@ -926,14 +935,14 @@ class Mt {
|
|
|
926
935
|
{
|
|
927
936
|
type: "edge.add",
|
|
928
937
|
edge: {
|
|
929
|
-
id:
|
|
930
|
-
source: { nodeId: o.id, portId:
|
|
931
|
-
target: { nodeId: n.id, portId:
|
|
938
|
+
id: this.idGenerator("edge"),
|
|
939
|
+
source: { nodeId: o.id, portId: r ?? void 0 },
|
|
940
|
+
target: { nodeId: n.id, portId: i ?? void 0 }
|
|
932
941
|
}
|
|
933
942
|
}
|
|
934
943
|
]
|
|
935
|
-
}) : this.onCommand({
|
|
936
|
-
id:
|
|
944
|
+
})) : this.onCommand({
|
|
945
|
+
id: W(),
|
|
937
946
|
source: "user:drag",
|
|
938
947
|
label: "重连",
|
|
939
948
|
timestamp: Date.now(),
|
|
@@ -941,32 +950,32 @@ class Mt {
|
|
|
941
950
|
{
|
|
942
951
|
type: "edge.reconnect",
|
|
943
952
|
edgeId: e.id,
|
|
944
|
-
source: { nodeId: o.id, portId:
|
|
945
|
-
target: { nodeId: n.id, portId:
|
|
953
|
+
source: { nodeId: o.id, portId: r ?? void 0 },
|
|
954
|
+
target: { nodeId: n.id, portId: i ?? void 0 }
|
|
946
955
|
}
|
|
947
956
|
]
|
|
948
957
|
});
|
|
949
958
|
}), this.on("edge:change:labels", ({ edge: e, current: t }) => {
|
|
950
959
|
const n = e.getData?.()?.labels ?? [];
|
|
951
960
|
if (!n.length || !t?.length) return;
|
|
952
|
-
const
|
|
953
|
-
for (let
|
|
954
|
-
const l = t[
|
|
961
|
+
const r = [];
|
|
962
|
+
for (let i = 0; i < Math.min(n.length, t.length); i++) {
|
|
963
|
+
const l = t[i], a = n[i];
|
|
955
964
|
if (!a?.id) continue;
|
|
956
|
-
const
|
|
957
|
-
|
|
965
|
+
const g = typeof l.position == "object" ? l.position?.distance : l.position;
|
|
966
|
+
g != null && r.push({
|
|
958
967
|
type: "edge.label.update",
|
|
959
968
|
edgeId: e.id,
|
|
960
969
|
labelId: a.id,
|
|
961
|
-
patch: { position:
|
|
970
|
+
patch: { position: g }
|
|
962
971
|
});
|
|
963
972
|
}
|
|
964
|
-
|
|
965
|
-
id:
|
|
973
|
+
r.length && this.onCommand({
|
|
974
|
+
id: W(),
|
|
966
975
|
source: "user:drag",
|
|
967
976
|
label: "拖动标签",
|
|
968
977
|
timestamp: Date.now(),
|
|
969
|
-
commands:
|
|
978
|
+
commands: r
|
|
970
979
|
});
|
|
971
980
|
});
|
|
972
981
|
}
|
|
@@ -974,120 +983,122 @@ class Mt {
|
|
|
974
983
|
this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
|
|
975
984
|
}
|
|
976
985
|
}
|
|
977
|
-
function
|
|
986
|
+
function $t(s) {
|
|
978
987
|
function e(t) {
|
|
979
988
|
const o = s.getCellById(t);
|
|
980
989
|
if (!o || !o.isNode()) return null;
|
|
981
|
-
const n = o,
|
|
990
|
+
const n = o, r = n.getPosition(), i = n.getSize(), l = { x: r.x, y: r.y, width: i.width, height: i.height }, a = s.localToGraph(l);
|
|
982
991
|
return new DOMRect(a.x, a.y, a.width, a.height);
|
|
983
992
|
}
|
|
984
993
|
return {
|
|
985
994
|
getNodeScreenRect: e
|
|
986
995
|
};
|
|
987
996
|
}
|
|
988
|
-
const
|
|
989
|
-
function
|
|
997
|
+
const Lt = 100;
|
|
998
|
+
function Bt({
|
|
990
999
|
graph: s,
|
|
991
1000
|
overlayManager: e,
|
|
992
1001
|
executeCommand: t,
|
|
993
1002
|
schema: o,
|
|
994
1003
|
flowModel: n,
|
|
1004
|
+
idGenerator: r,
|
|
995
1005
|
defaultInsertGap: i,
|
|
996
|
-
getContextMenuItems:
|
|
997
|
-
onHighlightChange:
|
|
998
|
-
resolveNodeShape:
|
|
1006
|
+
getContextMenuItems: l,
|
|
1007
|
+
onHighlightChange: a,
|
|
1008
|
+
resolveNodeShape: g
|
|
999
1009
|
}) {
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1010
|
+
const d = r ?? He;
|
|
1011
|
+
let v = [], f = [], p = null, E = !1, w = null, N = !1;
|
|
1012
|
+
async function m() {
|
|
1013
|
+
if (E) return p;
|
|
1014
|
+
E = !0;
|
|
1004
1015
|
try {
|
|
1005
|
-
const
|
|
1006
|
-
return
|
|
1016
|
+
const h = await import("@antv/x6-plugin-dnd"), b = h.Dnd ?? h.default;
|
|
1017
|
+
return b ? (p = new b({
|
|
1007
1018
|
target: s,
|
|
1008
1019
|
scaled: !0,
|
|
1009
1020
|
animation: !0,
|
|
1010
1021
|
getDragNode: (C) => C.clone(),
|
|
1011
1022
|
getDropNode: (C) => C.clone()
|
|
1012
|
-
}),
|
|
1023
|
+
}), p) : null;
|
|
1013
1024
|
} catch {
|
|
1014
1025
|
return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
|
|
1015
1026
|
}
|
|
1016
1027
|
}
|
|
1017
|
-
async function
|
|
1018
|
-
if (!
|
|
1019
|
-
|
|
1028
|
+
async function D() {
|
|
1029
|
+
if (!N) {
|
|
1030
|
+
N = !0;
|
|
1020
1031
|
try {
|
|
1021
|
-
const
|
|
1022
|
-
|
|
1032
|
+
const h = await import("@antv/x6-plugin-export"), b = h.Export ?? h.default;
|
|
1033
|
+
b && s.use(new b());
|
|
1023
1034
|
} catch {
|
|
1024
1035
|
console.warn("[flow-canvas] @antv/x6-plugin-export not available, add it to your dependencies");
|
|
1025
1036
|
}
|
|
1026
1037
|
}
|
|
1027
1038
|
}
|
|
1028
|
-
const
|
|
1029
|
-
const
|
|
1030
|
-
if (!
|
|
1031
|
-
|
|
1032
|
-
const C =
|
|
1033
|
-
s.removeNode(
|
|
1034
|
-
const { _dndSessionId:
|
|
1039
|
+
const z = ({ node: h }) => {
|
|
1040
|
+
const b = h.getData?.();
|
|
1041
|
+
if (!b?._dndSessionId || b._dndSessionId !== w) return;
|
|
1042
|
+
w = null;
|
|
1043
|
+
const C = h.getPosition();
|
|
1044
|
+
s.removeNode(h.id);
|
|
1045
|
+
const { _dndSessionId: L, ...R } = b, q = R.id || d("node");
|
|
1035
1046
|
t({
|
|
1036
|
-
id:
|
|
1047
|
+
id: W(),
|
|
1037
1048
|
source: "user:drag",
|
|
1038
1049
|
label: "拖入节点",
|
|
1039
1050
|
timestamp: Date.now(),
|
|
1040
1051
|
commands: [
|
|
1041
1052
|
{
|
|
1042
1053
|
type: "node.add",
|
|
1043
|
-
node: { ...
|
|
1054
|
+
node: { ...R, id: q, position: { x: C.x, y: C.y } }
|
|
1044
1055
|
}
|
|
1045
1056
|
]
|
|
1046
1057
|
});
|
|
1047
1058
|
};
|
|
1048
|
-
s.on("node:added",
|
|
1049
|
-
function
|
|
1050
|
-
const
|
|
1051
|
-
return
|
|
1059
|
+
s.on("node:added", z);
|
|
1060
|
+
function X(h) {
|
|
1061
|
+
const b = o.nodeTypes[h.type];
|
|
1062
|
+
return Fe(h, b?.getPorts);
|
|
1052
1063
|
}
|
|
1053
|
-
function
|
|
1054
|
-
switch (
|
|
1064
|
+
function j(h, b, C, L, R) {
|
|
1065
|
+
switch (h) {
|
|
1055
1066
|
case "left":
|
|
1056
1067
|
return {
|
|
1057
|
-
x:
|
|
1058
|
-
y:
|
|
1068
|
+
x: b.position.x - R - L.width,
|
|
1069
|
+
y: b.position.y + (C.height - L.height) / 2
|
|
1059
1070
|
};
|
|
1060
1071
|
case "top":
|
|
1061
1072
|
return {
|
|
1062
|
-
x:
|
|
1063
|
-
y:
|
|
1073
|
+
x: b.position.x + (C.width - L.width) / 2,
|
|
1074
|
+
y: b.position.y - R - L.height
|
|
1064
1075
|
};
|
|
1065
1076
|
case "bottom":
|
|
1066
1077
|
return {
|
|
1067
|
-
x:
|
|
1068
|
-
y:
|
|
1078
|
+
x: b.position.x + (C.width - L.width) / 2,
|
|
1079
|
+
y: b.position.y + C.height + R
|
|
1069
1080
|
};
|
|
1070
1081
|
default:
|
|
1071
1082
|
return {
|
|
1072
|
-
x:
|
|
1073
|
-
y:
|
|
1083
|
+
x: b.position.x + C.width + R,
|
|
1084
|
+
y: b.position.y + (C.height - L.height) / 2
|
|
1074
1085
|
};
|
|
1075
1086
|
}
|
|
1076
1087
|
}
|
|
1077
|
-
function
|
|
1078
|
-
switch (
|
|
1088
|
+
function oe(h, b, C) {
|
|
1089
|
+
switch (h) {
|
|
1079
1090
|
case "left":
|
|
1080
|
-
return { x: -(
|
|
1091
|
+
return { x: -(b.width + C), y: 0 };
|
|
1081
1092
|
case "top":
|
|
1082
|
-
return { x: 0, y: -(
|
|
1093
|
+
return { x: 0, y: -(b.height + C) };
|
|
1083
1094
|
case "bottom":
|
|
1084
|
-
return { x: 0, y:
|
|
1095
|
+
return { x: 0, y: b.height + C };
|
|
1085
1096
|
default:
|
|
1086
|
-
return { x:
|
|
1097
|
+
return { x: b.width + C, y: 0 };
|
|
1087
1098
|
}
|
|
1088
1099
|
}
|
|
1089
|
-
function
|
|
1090
|
-
switch (
|
|
1100
|
+
function G(h) {
|
|
1101
|
+
switch (h) {
|
|
1091
1102
|
case "left":
|
|
1092
1103
|
return "right";
|
|
1093
1104
|
case "top":
|
|
@@ -1105,8 +1116,8 @@ function Dt({
|
|
|
1105
1116
|
zoomOut() {
|
|
1106
1117
|
s.zoom(-0.1);
|
|
1107
1118
|
},
|
|
1108
|
-
zoomTo(
|
|
1109
|
-
s.zoomTo(
|
|
1119
|
+
zoomTo(h) {
|
|
1120
|
+
s.zoomTo(h);
|
|
1110
1121
|
},
|
|
1111
1122
|
zoomToFit() {
|
|
1112
1123
|
s.zoomToFit({ padding: 40, maxScale: 1.5 });
|
|
@@ -1120,221 +1131,233 @@ function Dt({
|
|
|
1120
1131
|
scrollToOrigin() {
|
|
1121
1132
|
s.translate(0, 0);
|
|
1122
1133
|
},
|
|
1123
|
-
scrollToNode(
|
|
1124
|
-
const
|
|
1125
|
-
|
|
1134
|
+
scrollToNode(h) {
|
|
1135
|
+
const b = s.getCellById(h);
|
|
1136
|
+
b && s.centerCell(b);
|
|
1126
1137
|
},
|
|
1127
1138
|
getSelection() {
|
|
1128
|
-
const
|
|
1139
|
+
const h = s.getSelectedCells?.() ?? [];
|
|
1129
1140
|
return {
|
|
1130
|
-
nodeIds:
|
|
1131
|
-
edgeIds:
|
|
1141
|
+
nodeIds: h.filter((b) => b.isNode()).map((b) => b.id),
|
|
1142
|
+
edgeIds: h.filter((b) => b.isEdge()).map((b) => b.id)
|
|
1132
1143
|
};
|
|
1133
1144
|
},
|
|
1134
|
-
selectNodes(
|
|
1135
|
-
const
|
|
1136
|
-
s.select?.(
|
|
1145
|
+
selectNodes(h) {
|
|
1146
|
+
const b = h.map((C) => s.getCellById(C)).filter(Boolean);
|
|
1147
|
+
s.select?.(b);
|
|
1137
1148
|
},
|
|
1138
|
-
selectEdges(
|
|
1139
|
-
const
|
|
1140
|
-
s.select?.(
|
|
1149
|
+
selectEdges(h) {
|
|
1150
|
+
const b = h.map((C) => s.getCellById(C)).filter(Boolean);
|
|
1151
|
+
s.select?.(b);
|
|
1141
1152
|
},
|
|
1142
1153
|
clearSelection() {
|
|
1143
|
-
const
|
|
1144
|
-
|
|
1154
|
+
const h = s.getSelectedCells?.();
|
|
1155
|
+
h?.length && s.unselect?.(h);
|
|
1145
1156
|
},
|
|
1146
|
-
registerDndSource(
|
|
1147
|
-
const C = async (
|
|
1148
|
-
const
|
|
1149
|
-
if (!
|
|
1150
|
-
const
|
|
1151
|
-
|
|
1152
|
-
const
|
|
1153
|
-
width:
|
|
1154
|
-
height:
|
|
1155
|
-
shape:
|
|
1156
|
-
data: { ...
|
|
1157
|
+
registerDndSource(h, b) {
|
|
1158
|
+
const C = async (L) => {
|
|
1159
|
+
const R = await m();
|
|
1160
|
+
if (!R) return;
|
|
1161
|
+
const q = W();
|
|
1162
|
+
w = q;
|
|
1163
|
+
const Y = b(), H = g?.(Y.type), Q = s.createNode({
|
|
1164
|
+
width: H?.width ?? 154,
|
|
1165
|
+
height: H?.height ?? 54,
|
|
1166
|
+
shape: H?.shapeName ?? "rect",
|
|
1167
|
+
data: { ...Y, _dndSessionId: q }
|
|
1157
1168
|
});
|
|
1158
|
-
|
|
1169
|
+
R.start(Q, L);
|
|
1159
1170
|
};
|
|
1160
|
-
return
|
|
1161
|
-
|
|
1171
|
+
return h.addEventListener("mousedown", C), () => {
|
|
1172
|
+
h.removeEventListener("mousedown", C);
|
|
1162
1173
|
};
|
|
1163
1174
|
},
|
|
1164
1175
|
/**
|
|
1165
1176
|
* 通过编程方式发起连线:直接命中真实 port 元素,
|
|
1166
1177
|
* 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
|
|
1167
1178
|
*/
|
|
1168
|
-
startConnection(
|
|
1169
|
-
const C = s.getCellById(
|
|
1179
|
+
startConnection(h, b) {
|
|
1180
|
+
const C = s.getCellById(h);
|
|
1170
1181
|
if (!C?.isNode()) return;
|
|
1171
|
-
const
|
|
1172
|
-
if (!
|
|
1173
|
-
const
|
|
1174
|
-
if (!
|
|
1175
|
-
const
|
|
1176
|
-
clientX:
|
|
1177
|
-
clientY:
|
|
1182
|
+
const L = C, R = s.findViewByCell(L);
|
|
1183
|
+
if (!R) return;
|
|
1184
|
+
const q = R.findPortElem(b, "circle") ?? R.findPortElem(b);
|
|
1185
|
+
if (!q) return;
|
|
1186
|
+
const H = (q.matches?.("[magnet]") ? q : q.querySelector?.("[magnet]")) ?? q, Q = H.getBoundingClientRect(), de = Q.left + Q.width / 2, re = Q.top + Q.height / 2, ce = new MouseEvent("mousedown", {
|
|
1187
|
+
clientX: de,
|
|
1188
|
+
clientY: re,
|
|
1178
1189
|
button: 0,
|
|
1179
1190
|
buttons: 1,
|
|
1180
1191
|
bubbles: !0,
|
|
1181
1192
|
cancelable: !0
|
|
1182
1193
|
});
|
|
1183
|
-
|
|
1194
|
+
H.dispatchEvent(ce);
|
|
1184
1195
|
},
|
|
1185
|
-
async exportAsImage(
|
|
1186
|
-
await
|
|
1187
|
-
const
|
|
1188
|
-
return typeof
|
|
1189
|
-
|
|
1190
|
-
(
|
|
1191
|
-
fetch(
|
|
1196
|
+
async exportAsImage(h) {
|
|
1197
|
+
await D();
|
|
1198
|
+
const b = s;
|
|
1199
|
+
return typeof b.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((C) => {
|
|
1200
|
+
b.toPNG(
|
|
1201
|
+
(L) => {
|
|
1202
|
+
fetch(L).then((R) => R.blob()).then(C).catch(() => C(new Blob()));
|
|
1192
1203
|
},
|
|
1193
1204
|
{
|
|
1194
|
-
backgroundColor:
|
|
1195
|
-
padding:
|
|
1196
|
-
quality:
|
|
1205
|
+
backgroundColor: h?.backgroundColor ?? "#ffffff",
|
|
1206
|
+
padding: h?.padding ?? 20,
|
|
1207
|
+
quality: h?.quality,
|
|
1197
1208
|
copyStyles: !0
|
|
1198
1209
|
}
|
|
1199
1210
|
);
|
|
1200
1211
|
});
|
|
1201
1212
|
},
|
|
1202
1213
|
async exportAsSVG() {
|
|
1203
|
-
await
|
|
1204
|
-
const
|
|
1205
|
-
return typeof
|
|
1206
|
-
|
|
1214
|
+
await D();
|
|
1215
|
+
const h = s;
|
|
1216
|
+
return typeof h.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((b) => {
|
|
1217
|
+
h.toSVG((C) => b(C));
|
|
1207
1218
|
});
|
|
1208
1219
|
},
|
|
1209
|
-
highlightNodes(
|
|
1210
|
-
|
|
1220
|
+
highlightNodes(h) {
|
|
1221
|
+
v = h, a?.(v, f);
|
|
1211
1222
|
},
|
|
1212
|
-
highlightEdges(
|
|
1213
|
-
|
|
1223
|
+
highlightEdges(h) {
|
|
1224
|
+
f = h, a?.(v, f);
|
|
1214
1225
|
},
|
|
1215
1226
|
clearHighlight() {
|
|
1216
|
-
|
|
1227
|
+
v = [], f = [], a?.([], []);
|
|
1217
1228
|
},
|
|
1218
1229
|
overlay: e,
|
|
1219
|
-
getContextMenuItems(
|
|
1220
|
-
return
|
|
1230
|
+
getContextMenuItems(h) {
|
|
1231
|
+
return l?.(h) ?? [];
|
|
1221
1232
|
},
|
|
1222
|
-
insertNodeToRight(
|
|
1223
|
-
const
|
|
1224
|
-
if (!
|
|
1233
|
+
insertNodeToRight(h, b, C) {
|
|
1234
|
+
const L = n.value, R = L.nodes[h];
|
|
1235
|
+
if (!R)
|
|
1225
1236
|
return {
|
|
1226
1237
|
status: "invalid",
|
|
1227
1238
|
envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
|
|
1228
|
-
error: { code: "constraint_violated", reason: `Source node "${
|
|
1239
|
+
error: { code: "constraint_violated", reason: `Source node "${h}" not found`, source: "api" }
|
|
1229
1240
|
};
|
|
1230
|
-
const
|
|
1241
|
+
const q = C?.gap ?? i ?? Lt, Y = C?.direction ?? "right", H = o.nodeTypes[R.type], Q = o.nodeTypes[b.type], de = H?.getSize(R) ?? { width: 154, height: 54 }, re = Q?.getSize({ ...b, position: { x: 0, y: 0 } }) ?? {
|
|
1231
1242
|
width: 154,
|
|
1232
1243
|
height: 54
|
|
1233
|
-
},
|
|
1234
|
-
for (const [
|
|
1235
|
-
if (
|
|
1236
|
-
const
|
|
1237
|
-
|
|
1244
|
+
}, ce = j(Y, R, de, re, q), ue = b.id || d("node"), Ie = { ...b, id: ue, position: ce }, se = [{ type: "node.add", node: Ie }], Me = oe(Y, re, q), ie = { x: ce.x, y: ce.y, width: re.width, height: re.height };
|
|
1245
|
+
for (const [ae, Z] of Object.entries(L.nodes)) {
|
|
1246
|
+
if (ae === h || ae === ue) continue;
|
|
1247
|
+
const ve = o.nodeTypes[Z.type]?.getSize(Z) ?? { width: 154, height: 54 }, te = ie.x < Z.position.x + ve.width && ie.x + ie.width > Z.position.x, ye = ie.y < Z.position.y + ve.height && ie.y + ie.height > Z.position.y;
|
|
1248
|
+
te && ye && se.push({
|
|
1238
1249
|
type: "node.move",
|
|
1239
|
-
nodeId:
|
|
1240
|
-
position: { x:
|
|
1250
|
+
nodeId: ae,
|
|
1251
|
+
position: { x: Z.position.x + Me.x, y: Z.position.y + Me.y }
|
|
1241
1252
|
});
|
|
1242
1253
|
}
|
|
1243
1254
|
if (C?.autoWireEdges) {
|
|
1244
|
-
const
|
|
1245
|
-
(
|
|
1246
|
-
) : Object.values(
|
|
1247
|
-
if (
|
|
1248
|
-
const
|
|
1249
|
-
|
|
1255
|
+
const ae = X(R), Z = X(Ie), we = Y, ve = G(Y), te = ae.find((K) => K.group === we), ye = Z.find((K) => K.group === ve), Ne = Z.find((K) => K.group === we), xe = te ? Object.values(L.edges).find(
|
|
1256
|
+
(K) => K.source.nodeId === h && K.source.portId === te.id
|
|
1257
|
+
) : Object.values(L.edges).find((K) => K.source.nodeId === h);
|
|
1258
|
+
if (xe) {
|
|
1259
|
+
const K = xe.target;
|
|
1260
|
+
se.push({ type: "edge.remove", edgeId: xe.id }), se.push({
|
|
1250
1261
|
type: "edge.add",
|
|
1251
1262
|
edge: {
|
|
1252
|
-
id:
|
|
1253
|
-
source: { nodeId:
|
|
1254
|
-
target: { nodeId:
|
|
1263
|
+
id: d("edge"),
|
|
1264
|
+
source: { nodeId: h, portId: te?.id },
|
|
1265
|
+
target: { nodeId: ue, portId: ye?.id }
|
|
1255
1266
|
}
|
|
1256
|
-
}),
|
|
1267
|
+
}), se.push({
|
|
1257
1268
|
type: "edge.add",
|
|
1258
1269
|
edge: {
|
|
1259
|
-
id:
|
|
1260
|
-
source: { nodeId:
|
|
1261
|
-
target:
|
|
1270
|
+
id: d("edge"),
|
|
1271
|
+
source: { nodeId: ue, portId: Ne?.id },
|
|
1272
|
+
target: K
|
|
1262
1273
|
}
|
|
1263
1274
|
});
|
|
1264
1275
|
} else
|
|
1265
|
-
|
|
1276
|
+
se.push({
|
|
1266
1277
|
type: "edge.add",
|
|
1267
1278
|
edge: {
|
|
1268
|
-
id:
|
|
1269
|
-
source: { nodeId:
|
|
1270
|
-
target: { nodeId:
|
|
1279
|
+
id: d("edge"),
|
|
1280
|
+
source: { nodeId: h, portId: te?.id },
|
|
1281
|
+
target: { nodeId: ue, portId: ye?.id }
|
|
1271
1282
|
}
|
|
1272
1283
|
});
|
|
1273
1284
|
}
|
|
1274
|
-
const
|
|
1275
|
-
id:
|
|
1285
|
+
const $e = {
|
|
1286
|
+
id: W(),
|
|
1276
1287
|
source: C?.source ?? "user:toolbar",
|
|
1277
1288
|
label: C?.label ?? "插入节点",
|
|
1278
1289
|
timestamp: Date.now(),
|
|
1279
|
-
commands:
|
|
1290
|
+
commands: se
|
|
1280
1291
|
};
|
|
1281
|
-
return t(
|
|
1292
|
+
return t($e);
|
|
1282
1293
|
},
|
|
1283
|
-
onGraphEvent(
|
|
1284
|
-
return s.on(
|
|
1294
|
+
onGraphEvent(h, b) {
|
|
1295
|
+
return s.on(h, b), () => s.off(h, b);
|
|
1285
1296
|
},
|
|
1286
1297
|
unsafeGetGraph() {
|
|
1287
1298
|
return s;
|
|
1288
1299
|
}
|
|
1289
1300
|
};
|
|
1290
1301
|
}
|
|
1291
|
-
function
|
|
1292
|
-
const s =
|
|
1302
|
+
function Ot() {
|
|
1303
|
+
const s = O(null), e = O(!1);
|
|
1293
1304
|
let t = null, o = !1;
|
|
1294
|
-
function n(
|
|
1295
|
-
t && (clearTimeout(t), t = null), s.value =
|
|
1305
|
+
function n(v) {
|
|
1306
|
+
t && (clearTimeout(t), t = null), s.value = v;
|
|
1296
1307
|
}
|
|
1297
|
-
function
|
|
1308
|
+
function r(v = 100) {
|
|
1298
1309
|
o || (t && clearTimeout(t), t = setTimeout(() => {
|
|
1299
1310
|
s.value = null, t = null;
|
|
1300
|
-
},
|
|
1311
|
+
}, v));
|
|
1301
1312
|
}
|
|
1302
|
-
function
|
|
1313
|
+
function i() {
|
|
1303
1314
|
o = !0, t && (clearTimeout(t), t = null);
|
|
1304
1315
|
}
|
|
1305
|
-
function l(
|
|
1306
|
-
o = !1,
|
|
1316
|
+
function l(v = 100) {
|
|
1317
|
+
o = !1, r(v);
|
|
1307
1318
|
}
|
|
1308
1319
|
function a() {
|
|
1309
1320
|
t && (clearTimeout(t), t = null);
|
|
1310
1321
|
}
|
|
1311
|
-
function
|
|
1322
|
+
function g() {
|
|
1323
|
+
a(), o = !1, s.value = null;
|
|
1324
|
+
}
|
|
1325
|
+
function d() {
|
|
1312
1326
|
t && clearTimeout(t);
|
|
1313
1327
|
}
|
|
1314
|
-
return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave:
|
|
1328
|
+
return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: r, enterOverlay: i, leaveOverlay: l, cancelLeave: a, reset: g, cleanup: d };
|
|
1315
1329
|
}
|
|
1316
|
-
const
|
|
1317
|
-
function
|
|
1330
|
+
const We = 10, Se = 12;
|
|
1331
|
+
function Qe(s, e) {
|
|
1318
1332
|
const t = s.getTotalLength();
|
|
1319
1333
|
if (t === 0) return { ...e, length: 0, totalLength: 0 };
|
|
1320
1334
|
let o = s.getPointAtLength(0), n = 1 / 0;
|
|
1321
|
-
const
|
|
1335
|
+
const r = 50, i = t / r;
|
|
1322
1336
|
let l = 0;
|
|
1323
|
-
for (let
|
|
1324
|
-
const
|
|
1325
|
-
|
|
1337
|
+
for (let v = 0; v <= r; v++) {
|
|
1338
|
+
const f = v * i, p = s.getPointAtLength(f), E = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
|
|
1339
|
+
E < n && (n = E, o = p, l = f);
|
|
1326
1340
|
}
|
|
1327
|
-
const a = Math.max(0, l -
|
|
1328
|
-
for (let
|
|
1329
|
-
const
|
|
1330
|
-
|
|
1341
|
+
const a = Math.max(0, l - i), g = Math.min(t, l + i), d = (g - a) / 20;
|
|
1342
|
+
for (let v = a; v <= g; v += d) {
|
|
1343
|
+
const f = s.getPointAtLength(v), p = (f.x - e.x) ** 2 + (f.y - e.y) ** 2;
|
|
1344
|
+
p < n && (n = p, o = f, l = v);
|
|
1331
1345
|
}
|
|
1332
1346
|
return { x: o.x, y: o.y, length: l, totalLength: t };
|
|
1333
1347
|
}
|
|
1334
|
-
function
|
|
1335
|
-
return s <
|
|
1348
|
+
function Xe(s, e) {
|
|
1349
|
+
return s < We || s > e - We;
|
|
1336
1350
|
}
|
|
1337
|
-
function
|
|
1351
|
+
function Ye(s, e, t) {
|
|
1352
|
+
const o = s.querySelectorAll(".x6-edge-label");
|
|
1353
|
+
for (const n of o) {
|
|
1354
|
+
const r = n.getBoundingClientRect();
|
|
1355
|
+
if (e >= r.left - Se && e <= r.right + Se && t >= r.top - Se && t <= r.bottom + Se)
|
|
1356
|
+
return !0;
|
|
1357
|
+
}
|
|
1358
|
+
return !1;
|
|
1359
|
+
}
|
|
1360
|
+
function Ke() {
|
|
1338
1361
|
const s = "http://www.w3.org/2000/svg", e = document.createElementNS(s, "g");
|
|
1339
1362
|
e.setAttribute("class", "flow-canvas-edge-delete-tool"), e.style.cursor = "pointer";
|
|
1340
1363
|
const t = document.createElementNS(s, "rect");
|
|
@@ -1342,67 +1365,79 @@ function He() {
|
|
|
1342
1365
|
const o = document.createElementNS(s, "text");
|
|
1343
1366
|
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;
|
|
1344
1367
|
}
|
|
1345
|
-
function
|
|
1368
|
+
function Gt(s) {
|
|
1346
1369
|
let e = null, t = null;
|
|
1347
1370
|
function o(l, a) {
|
|
1348
|
-
|
|
1349
|
-
const
|
|
1350
|
-
if (!
|
|
1351
|
-
const
|
|
1352
|
-
if (!
|
|
1353
|
-
const
|
|
1354
|
-
if (!
|
|
1355
|
-
const
|
|
1356
|
-
if (
|
|
1357
|
-
const
|
|
1358
|
-
|
|
1371
|
+
if (r(), t = l, a.target?.closest?.(".x6-edge-label")) return;
|
|
1372
|
+
const d = s.getCellById(l);
|
|
1373
|
+
if (!d?.isEdge()) return;
|
|
1374
|
+
const v = s.findViewByCell(d);
|
|
1375
|
+
if (!v) return;
|
|
1376
|
+
const f = v.container.querySelector("path");
|
|
1377
|
+
if (!f) return;
|
|
1378
|
+
const p = s.clientToLocal(a.clientX, a.clientY), E = Qe(f, p);
|
|
1379
|
+
if (Xe(E.length, E.totalLength) || Ye(v.container, a.clientX, a.clientY)) return;
|
|
1380
|
+
const w = Ke();
|
|
1381
|
+
w.setAttribute("transform", `translate(${E.x}, ${E.y})`), v.container.appendChild(w), e = w;
|
|
1359
1382
|
}
|
|
1360
1383
|
function n(l) {
|
|
1361
1384
|
if (!t) return;
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
const
|
|
1385
|
+
if (l.target?.closest?.(".x6-edge-label")) {
|
|
1386
|
+
e && e.setAttribute("display", "none");
|
|
1387
|
+
return;
|
|
1388
|
+
}
|
|
1389
|
+
const g = s.getCellById(t);
|
|
1390
|
+
if (!g?.isEdge()) return;
|
|
1391
|
+
const d = s.findViewByCell(g);
|
|
1367
1392
|
if (!d) return;
|
|
1368
|
-
const
|
|
1369
|
-
if (
|
|
1393
|
+
const v = d.container.querySelector("path");
|
|
1394
|
+
if (!v) return;
|
|
1395
|
+
const f = s.clientToLocal(l.clientX, l.clientY), p = Qe(v, f);
|
|
1396
|
+
if (Xe(p.length, p.totalLength) || Ye(d.container, l.clientX, l.clientY))
|
|
1370
1397
|
e && e.setAttribute("display", "none");
|
|
1371
1398
|
else if (e)
|
|
1372
|
-
e.removeAttribute("display"), e.setAttribute("transform", `translate(${
|
|
1399
|
+
e.removeAttribute("display"), e.setAttribute("transform", `translate(${p.x}, ${p.y})`);
|
|
1373
1400
|
else {
|
|
1374
|
-
const
|
|
1375
|
-
|
|
1401
|
+
const E = Ke();
|
|
1402
|
+
E.setAttribute("transform", `translate(${p.x}, ${p.y})`), d.container.appendChild(E), e = E;
|
|
1376
1403
|
}
|
|
1377
1404
|
}
|
|
1378
|
-
function
|
|
1405
|
+
function r() {
|
|
1379
1406
|
e && (e.remove(), e = null), t = null;
|
|
1380
1407
|
}
|
|
1381
|
-
function
|
|
1408
|
+
function i(l) {
|
|
1382
1409
|
l === t && (e = null, t = null);
|
|
1383
1410
|
}
|
|
1384
|
-
return { show: o, move: n, remove:
|
|
1411
|
+
return { show: o, move: n, remove: r, handleEdgeRemoved: i };
|
|
1385
1412
|
}
|
|
1386
|
-
function
|
|
1413
|
+
function zt(s) {
|
|
1387
1414
|
let e = null, t = 0;
|
|
1388
1415
|
function o(d) {
|
|
1389
|
-
const
|
|
1390
|
-
for (const
|
|
1391
|
-
for (const
|
|
1392
|
-
|
|
1416
|
+
const v = d ? "visible" : "hidden";
|
|
1417
|
+
for (const f of s.getNodes())
|
|
1418
|
+
for (const p of f.getPorts())
|
|
1419
|
+
f.setPortProp(p.id, "attrs/circle/visibility", v);
|
|
1393
1420
|
}
|
|
1394
1421
|
function n(d) {
|
|
1395
1422
|
if (!e)
|
|
1396
|
-
for (const
|
|
1397
|
-
d.setPortProp(
|
|
1398
|
-
}
|
|
1399
|
-
function i(d) {
|
|
1400
|
-
if (!e)
|
|
1401
|
-
for (const b of d.getPorts())
|
|
1402
|
-
d.setPortProp(b.id, "attrs/circle/visibility", "hidden");
|
|
1423
|
+
for (const v of d.getPorts())
|
|
1424
|
+
d.setPortProp(v.id, "attrs/circle/visibility", "visible");
|
|
1403
1425
|
}
|
|
1404
1426
|
function r(d) {
|
|
1405
|
-
|
|
1427
|
+
if (!e)
|
|
1428
|
+
for (const v of d.getPorts())
|
|
1429
|
+
d.setPortProp(v.id, "attrs/circle/visibility", "hidden");
|
|
1430
|
+
}
|
|
1431
|
+
function i(d, v) {
|
|
1432
|
+
if (!d.getTargetCell())
|
|
1433
|
+
if (e = d.id, v?.size)
|
|
1434
|
+
for (const f of s.getNodes()) {
|
|
1435
|
+
const p = v.has(f.id) ? "hidden" : "visible";
|
|
1436
|
+
for (const E of f.getPorts())
|
|
1437
|
+
f.setPortProp(E.id, "attrs/circle/visibility", p);
|
|
1438
|
+
}
|
|
1439
|
+
else
|
|
1440
|
+
o(!0);
|
|
1406
1441
|
}
|
|
1407
1442
|
function l() {
|
|
1408
1443
|
e = null, o(!1), t = Date.now() + 300;
|
|
@@ -1410,19 +1445,19 @@ function At(s) {
|
|
|
1410
1445
|
function a(d) {
|
|
1411
1446
|
d === e && (e = null, o(!1));
|
|
1412
1447
|
}
|
|
1413
|
-
function
|
|
1448
|
+
function g() {
|
|
1414
1449
|
return !e && Date.now() >= t;
|
|
1415
1450
|
}
|
|
1416
1451
|
return {
|
|
1417
1452
|
showNodePorts: n,
|
|
1418
|
-
hideNodePorts:
|
|
1419
|
-
handleEdgeAdded:
|
|
1453
|
+
hideNodePorts: r,
|
|
1454
|
+
handleEdgeAdded: i,
|
|
1420
1455
|
handleEdgeConnected: l,
|
|
1421
1456
|
handleEdgeRemoved: a,
|
|
1422
|
-
canShowEdgeTool:
|
|
1457
|
+
canShowEdgeTool: g
|
|
1423
1458
|
};
|
|
1424
1459
|
}
|
|
1425
|
-
const
|
|
1460
|
+
const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
|
|
1426
1461
|
__name: "node-actions-toolbar",
|
|
1427
1462
|
props: {
|
|
1428
1463
|
node: {},
|
|
@@ -1433,14 +1468,14 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1433
1468
|
},
|
|
1434
1469
|
emits: ["action"],
|
|
1435
1470
|
setup(s, { emit: e }) {
|
|
1436
|
-
const t = s, o =
|
|
1437
|
-
const
|
|
1471
|
+
const t = s, o = F(() => {
|
|
1472
|
+
const v = t.actionsOffset?.x ?? 0, f = t.actionsOffset?.y ?? 0, p = v !== 0 || f !== 0;
|
|
1438
1473
|
return {
|
|
1439
1474
|
left: `${t.position.x}px`,
|
|
1440
1475
|
top: `${t.position.y}px`,
|
|
1441
|
-
transform:
|
|
1476
|
+
transform: p ? `translate(${v}px, ${f}px)` : "translateX(-100%)"
|
|
1442
1477
|
};
|
|
1443
|
-
}), n = e,
|
|
1478
|
+
}), n = e, r = F(() => ({
|
|
1444
1479
|
debug: {
|
|
1445
1480
|
visible: t.config.showDebug && t.behavior.debuggable !== !1,
|
|
1446
1481
|
disabled: t.behavior.debugDisabled === !0
|
|
@@ -1461,9 +1496,9 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1461
1496
|
visible: t.config.showDisconnect && t.behavior.disconnectable !== !1,
|
|
1462
1497
|
disabled: t.behavior.disconnectDisabled === !0
|
|
1463
1498
|
}
|
|
1464
|
-
})),
|
|
1499
|
+
})), i = F(() => r.value.copy.visible || r.value.copyInsert.visible || r.value.disconnect.visible), l = O(!1);
|
|
1465
1500
|
let a = null;
|
|
1466
|
-
function
|
|
1501
|
+
function g() {
|
|
1467
1502
|
a && (clearTimeout(a), a = null), l.value = !0;
|
|
1468
1503
|
}
|
|
1469
1504
|
function d() {
|
|
@@ -1471,79 +1506,79 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1471
1506
|
l.value = !1, a = null;
|
|
1472
1507
|
}, 100);
|
|
1473
1508
|
}
|
|
1474
|
-
return
|
|
1509
|
+
return ze(() => {
|
|
1475
1510
|
a && clearTimeout(a);
|
|
1476
|
-
}), (
|
|
1511
|
+
}), (v, f) => (M(), S("div", {
|
|
1477
1512
|
class: "flow-canvas-node-actions",
|
|
1478
|
-
style:
|
|
1513
|
+
style: _e(o.value)
|
|
1479
1514
|
}, [
|
|
1480
|
-
|
|
1481
|
-
|
|
1515
|
+
B("div", jt, [
|
|
1516
|
+
r.value.debug.visible ? (M(), S("i", {
|
|
1482
1517
|
key: 0,
|
|
1483
|
-
class:
|
|
1484
|
-
onClick:
|
|
1485
|
-
}, null, 2)) :
|
|
1486
|
-
|
|
1518
|
+
class: ee(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": r.value.debug.disabled }]),
|
|
1519
|
+
onClick: f[0] || (f[0] = (p) => !r.value.debug.disabled && n("action", "debug", s.node.id))
|
|
1520
|
+
}, null, 2)) : U("", !0),
|
|
1521
|
+
r.value.delete.visible ? (M(), S("i", {
|
|
1487
1522
|
key: 1,
|
|
1488
|
-
class:
|
|
1489
|
-
onClick:
|
|
1490
|
-
}, null, 2)) :
|
|
1491
|
-
|
|
1523
|
+
class: ee(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": r.value.delete.disabled }]),
|
|
1524
|
+
onClick: f[1] || (f[1] = (p) => !r.value.delete.disabled && n("action", "delete", s.node.id))
|
|
1525
|
+
}, null, 2)) : U("", !0),
|
|
1526
|
+
i.value ? (M(), S("div", {
|
|
1492
1527
|
key: 2,
|
|
1493
1528
|
class: "flow-canvas-node-actions__more-wrapper",
|
|
1494
|
-
onMouseenter:
|
|
1529
|
+
onMouseenter: g,
|
|
1495
1530
|
onMouseleave: d
|
|
1496
|
-
}, [...
|
|
1497
|
-
|
|
1498
|
-
])], 32)) :
|
|
1531
|
+
}, [...f[5] || (f[5] = [
|
|
1532
|
+
B("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
|
|
1533
|
+
])], 32)) : U("", !0)
|
|
1499
1534
|
]),
|
|
1500
|
-
|
|
1501
|
-
default:
|
|
1502
|
-
l.value &&
|
|
1535
|
+
tt(ot, { name: "flow-canvas-fade" }, {
|
|
1536
|
+
default: je(() => [
|
|
1537
|
+
l.value && i.value ? (M(), S("div", {
|
|
1503
1538
|
key: 0,
|
|
1504
1539
|
class: "flow-canvas-node-actions__dropdown",
|
|
1505
|
-
onMouseenter:
|
|
1540
|
+
onMouseenter: g,
|
|
1506
1541
|
onMouseleave: d
|
|
1507
1542
|
}, [
|
|
1508
|
-
|
|
1543
|
+
r.value.copy.visible ? (M(), S("div", {
|
|
1509
1544
|
key: 0,
|
|
1510
|
-
class:
|
|
1511
|
-
onClick:
|
|
1512
|
-
}, [...
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
])], 2)) :
|
|
1516
|
-
|
|
1545
|
+
class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copy.disabled }]),
|
|
1546
|
+
onClick: f[2] || (f[2] = (p) => !r.value.copy.disabled && n("action", "copy", s.node.id))
|
|
1547
|
+
}, [...f[6] || (f[6] = [
|
|
1548
|
+
B("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
|
|
1549
|
+
B("span", null, "复制", -1)
|
|
1550
|
+
])], 2)) : U("", !0),
|
|
1551
|
+
r.value.copyInsert.visible ? (M(), S("div", {
|
|
1517
1552
|
key: 1,
|
|
1518
|
-
class:
|
|
1519
|
-
onClick:
|
|
1520
|
-
}, [...
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
])], 2)) :
|
|
1524
|
-
|
|
1553
|
+
class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copyInsert.disabled }]),
|
|
1554
|
+
onClick: f[3] || (f[3] = (p) => !r.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
|
|
1555
|
+
}, [...f[7] || (f[7] = [
|
|
1556
|
+
B("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
|
|
1557
|
+
B("span", null, "复制并插入", -1)
|
|
1558
|
+
])], 2)) : U("", !0),
|
|
1559
|
+
r.value.disconnect.visible ? (M(), S("div", {
|
|
1525
1560
|
key: 2,
|
|
1526
|
-
class:
|
|
1527
|
-
onClick:
|
|
1528
|
-
}, [...
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
])], 2)) :
|
|
1532
|
-
], 32)) :
|
|
1561
|
+
class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.disconnect.disabled }]),
|
|
1562
|
+
onClick: f[4] || (f[4] = (p) => !r.value.disconnect.disabled && n("action", "disconnect", s.node.id))
|
|
1563
|
+
}, [...f[8] || (f[8] = [
|
|
1564
|
+
B("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
|
|
1565
|
+
B("span", null, "断开连线", -1)
|
|
1566
|
+
])], 2)) : U("", !0)
|
|
1567
|
+
], 32)) : U("", !0)
|
|
1533
1568
|
]),
|
|
1534
1569
|
_: 1
|
|
1535
1570
|
})
|
|
1536
1571
|
], 4));
|
|
1537
1572
|
}
|
|
1538
|
-
}),
|
|
1573
|
+
}), he = (s, e) => {
|
|
1539
1574
|
const t = s.__vccOpts || s;
|
|
1540
1575
|
for (const [o, n] of e)
|
|
1541
1576
|
t[o] = n;
|
|
1542
1577
|
return t;
|
|
1543
|
-
},
|
|
1578
|
+
}, Ft = /* @__PURE__ */ he(Ht, [["__scopeId", "data-v-3b39dab5"]]), qt = {
|
|
1544
1579
|
key: 0,
|
|
1545
1580
|
class: "flow-canvas-quick-add__tooltip"
|
|
1546
|
-
},
|
|
1581
|
+
}, Ut = 5, Vt = /* @__PURE__ */ ge({
|
|
1547
1582
|
__name: "node-quick-add-popover",
|
|
1548
1583
|
props: {
|
|
1549
1584
|
node: {},
|
|
@@ -1552,147 +1587,148 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1552
1587
|
},
|
|
1553
1588
|
emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
|
|
1554
1589
|
setup(s, { expose: e, emit: t }) {
|
|
1555
|
-
const o = s, n = t,
|
|
1556
|
-
let
|
|
1557
|
-
function
|
|
1558
|
-
|
|
1559
|
-
}
|
|
1560
|
-
function g(p) {
|
|
1561
|
-
if (!f) return;
|
|
1562
|
-
const c = p.clientX - f.x, C = p.clientY - f.y;
|
|
1563
|
-
Math.sqrt(c * c + C * C) >= Lt && (d = !0, k(), n("start-drag", o.node.id));
|
|
1590
|
+
const o = s, n = t, r = O(), i = O(), l = O(!1), a = O(!1);
|
|
1591
|
+
let g = null, d = !1, v = null;
|
|
1592
|
+
function f(G) {
|
|
1593
|
+
G.preventDefault(), G.stopPropagation(), g = { x: G.clientX, y: G.clientY }, d = !1, document.addEventListener("mousemove", p), document.addEventListener("mouseup", E);
|
|
1564
1594
|
}
|
|
1565
|
-
function
|
|
1566
|
-
|
|
1595
|
+
function p(G) {
|
|
1596
|
+
if (!g) return;
|
|
1597
|
+
const T = G.clientX - g.x, h = G.clientY - g.y;
|
|
1598
|
+
Math.sqrt(T * T + h * h) >= Ut && (d = !0, w(), n("start-drag", o.node.id));
|
|
1567
1599
|
}
|
|
1568
|
-
function
|
|
1569
|
-
|
|
1600
|
+
function E() {
|
|
1601
|
+
w(), d || N(), g = null, d = !1;
|
|
1570
1602
|
}
|
|
1571
1603
|
function w() {
|
|
1572
|
-
|
|
1604
|
+
document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", E);
|
|
1573
1605
|
}
|
|
1574
|
-
function
|
|
1606
|
+
function N() {
|
|
1607
|
+
a.value ? D() : m();
|
|
1608
|
+
}
|
|
1609
|
+
function m() {
|
|
1575
1610
|
a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
|
|
1576
|
-
document.addEventListener("mousedown",
|
|
1611
|
+
document.addEventListener("mousedown", z);
|
|
1577
1612
|
});
|
|
1578
1613
|
}
|
|
1579
|
-
function
|
|
1580
|
-
a.value = !1, n("close"), document.removeEventListener("mousedown",
|
|
1614
|
+
function D() {
|
|
1615
|
+
a.value = !1, n("close"), document.removeEventListener("mousedown", z);
|
|
1581
1616
|
}
|
|
1582
|
-
function
|
|
1583
|
-
const
|
|
1584
|
-
|
|
1617
|
+
function z(G) {
|
|
1618
|
+
const T = G.target;
|
|
1619
|
+
r.value?.contains(T) || i.value?.contains(T) || D();
|
|
1585
1620
|
}
|
|
1586
|
-
function
|
|
1621
|
+
function X() {
|
|
1587
1622
|
a.value || n("mouseleave");
|
|
1588
1623
|
}
|
|
1589
|
-
function
|
|
1590
|
-
|
|
1624
|
+
function j() {
|
|
1625
|
+
v && (clearTimeout(v), v = null), n("mouseenter");
|
|
1591
1626
|
}
|
|
1592
|
-
function
|
|
1593
|
-
|
|
1594
|
-
|
|
1627
|
+
function oe() {
|
|
1628
|
+
v = setTimeout(() => {
|
|
1629
|
+
D(), n("mouseleave"), v = null;
|
|
1595
1630
|
}, 150);
|
|
1596
1631
|
}
|
|
1597
|
-
return
|
|
1598
|
-
|
|
1599
|
-
}), e({ closePopover:
|
|
1632
|
+
return ze(() => {
|
|
1633
|
+
w(), v && clearTimeout(v), document.removeEventListener("mousedown", z);
|
|
1634
|
+
}), e({ closePopover: D }), (G, T) => (M(), S("div", {
|
|
1600
1635
|
class: "flow-canvas-quick-add",
|
|
1601
|
-
style:
|
|
1602
|
-
onMouseenter:
|
|
1603
|
-
onMouseleave:
|
|
1604
|
-
onClick:
|
|
1636
|
+
style: _e({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
|
|
1637
|
+
onMouseenter: T[2] || (T[2] = (h) => n("mouseenter")),
|
|
1638
|
+
onMouseleave: X,
|
|
1639
|
+
onClick: T[3] || (T[3] = rt(() => {
|
|
1605
1640
|
}, ["stop"]))
|
|
1606
1641
|
}, [
|
|
1607
|
-
|
|
1642
|
+
B("div", {
|
|
1608
1643
|
ref_key: "btnRef",
|
|
1609
|
-
ref:
|
|
1610
|
-
class:
|
|
1611
|
-
onMouseenter:
|
|
1612
|
-
onMouseleave:
|
|
1613
|
-
onMousedown:
|
|
1614
|
-
}, [...
|
|
1615
|
-
|
|
1644
|
+
ref: r,
|
|
1645
|
+
class: ee(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
|
|
1646
|
+
onMouseenter: T[0] || (T[0] = (h) => l.value = !0),
|
|
1647
|
+
onMouseleave: T[1] || (T[1] = (h) => l.value = !1),
|
|
1648
|
+
onMousedown: f
|
|
1649
|
+
}, [...T[4] || (T[4] = [
|
|
1650
|
+
B("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
|
|
1616
1651
|
])], 34),
|
|
1617
|
-
l.value && !a.value ? (
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1652
|
+
l.value && !a.value ? (M(), S("div", qt, [...T[5] || (T[5] = [
|
|
1653
|
+
B("div", null, [
|
|
1654
|
+
B("b", null, "点击"),
|
|
1655
|
+
Ve(" 添加节点")
|
|
1621
1656
|
], -1),
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1657
|
+
B("div", null, [
|
|
1658
|
+
B("b", null, "拖拽"),
|
|
1659
|
+
Ve(" 连接节点")
|
|
1625
1660
|
], -1)
|
|
1626
|
-
])])) :
|
|
1627
|
-
|
|
1628
|
-
default:
|
|
1629
|
-
a.value ? (
|
|
1661
|
+
])])) : U("", !0),
|
|
1662
|
+
tt(ot, { name: "flow-canvas-fade" }, {
|
|
1663
|
+
default: je(() => [
|
|
1664
|
+
a.value ? (M(), S("div", {
|
|
1630
1665
|
key: 0,
|
|
1631
1666
|
ref_key: "popoverRef",
|
|
1632
|
-
ref:
|
|
1667
|
+
ref: i,
|
|
1633
1668
|
class: "flow-canvas-quick-add__popover",
|
|
1634
|
-
onMouseenter:
|
|
1635
|
-
onMouseleave:
|
|
1669
|
+
onMouseenter: j,
|
|
1670
|
+
onMouseleave: oe
|
|
1636
1671
|
}, [
|
|
1637
|
-
|
|
1638
|
-
|
|
1672
|
+
ke(G.$slots, "default", {}, () => [
|
|
1673
|
+
T[6] || (T[6] = B("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
|
|
1639
1674
|
], !0)
|
|
1640
|
-
], 544)) :
|
|
1675
|
+
], 544)) : U("", !0)
|
|
1641
1676
|
]),
|
|
1642
1677
|
_: 3
|
|
1643
1678
|
})
|
|
1644
1679
|
], 36));
|
|
1645
1680
|
}
|
|
1646
|
-
}),
|
|
1681
|
+
}), Wt = /* @__PURE__ */ he(Vt, [["__scopeId", "data-v-b98695cf"]]), Qt = { class: "flow-canvas-runtime-core__overlay" }, Xt = /* @__PURE__ */ ge({
|
|
1647
1682
|
__name: "canvas-runtime-core",
|
|
1648
1683
|
props: {
|
|
1649
1684
|
editor: {},
|
|
1650
1685
|
graphOptions: {},
|
|
1651
1686
|
nodeActions: {},
|
|
1652
|
-
quickAdd: {}
|
|
1687
|
+
quickAdd: {},
|
|
1688
|
+
getConnectionExcludedNodeIds: { type: Function }
|
|
1653
1689
|
},
|
|
1654
1690
|
emits: ["ui-event"],
|
|
1655
1691
|
setup(s, { emit: e }) {
|
|
1656
|
-
const t = s, o = e, n =
|
|
1657
|
-
let
|
|
1658
|
-
const d =
|
|
1659
|
-
let
|
|
1660
|
-
function
|
|
1661
|
-
return
|
|
1662
|
-
}
|
|
1663
|
-
function
|
|
1664
|
-
|
|
1665
|
-
|
|
1692
|
+
const t = s, o = e, n = O(), r = O();
|
|
1693
|
+
let i, l, a, g;
|
|
1694
|
+
const d = Ot(), { hoveredNodeId: v, isDraggingNode: f } = d, p = d.enterOverlay, E = () => d.leaveOverlay(), w = O(null), N = O(!1);
|
|
1695
|
+
let m = null;
|
|
1696
|
+
function D(y) {
|
|
1697
|
+
return N.value ? !0 : (X(), ie(y) ? (w.value = y, !0) : (w.value = null, !1));
|
|
1698
|
+
}
|
|
1699
|
+
function z() {
|
|
1700
|
+
m && clearTimeout(m), m = setTimeout(() => {
|
|
1701
|
+
w.value = null, m = null;
|
|
1666
1702
|
}, 150);
|
|
1667
1703
|
}
|
|
1668
|
-
function
|
|
1669
|
-
|
|
1704
|
+
function X() {
|
|
1705
|
+
m && (clearTimeout(m), m = null);
|
|
1670
1706
|
}
|
|
1671
|
-
function
|
|
1672
|
-
|
|
1707
|
+
function j() {
|
|
1708
|
+
X(), d.enterOverlay();
|
|
1673
1709
|
}
|
|
1674
|
-
function
|
|
1675
|
-
|
|
1710
|
+
function oe() {
|
|
1711
|
+
z(), d.leaveOverlay();
|
|
1676
1712
|
}
|
|
1677
|
-
let
|
|
1678
|
-
const
|
|
1713
|
+
let G = null, T = null, h = null, b = null, C = null;
|
|
1714
|
+
const L = O(0), R = F(
|
|
1679
1715
|
() => {
|
|
1680
|
-
if (
|
|
1681
|
-
const
|
|
1682
|
-
for (const [
|
|
1683
|
-
const
|
|
1684
|
-
if (!
|
|
1685
|
-
const
|
|
1686
|
-
|
|
1687
|
-
nodeId:
|
|
1688
|
-
x:
|
|
1689
|
-
y:
|
|
1690
|
-
badge:
|
|
1716
|
+
if (L.value, !t.editor.api.value) return [];
|
|
1717
|
+
const y = t.editor.flowModel.value, x = t.editor.api.value.overlay, c = [];
|
|
1718
|
+
for (const [I, P] of Object.entries(y.nodes)) {
|
|
1719
|
+
const _ = t.editor._pluginManager.collectNodeDecorations(P);
|
|
1720
|
+
if (!_?.badge) continue;
|
|
1721
|
+
const $ = x.getNodeScreenRect(I);
|
|
1722
|
+
$ && c.push({
|
|
1723
|
+
nodeId: I,
|
|
1724
|
+
x: $.x + $.width - 4,
|
|
1725
|
+
y: $.y - 8,
|
|
1726
|
+
badge: _.badge
|
|
1691
1727
|
});
|
|
1692
1728
|
}
|
|
1693
|
-
return
|
|
1729
|
+
return c;
|
|
1694
1730
|
}
|
|
1695
|
-
),
|
|
1731
|
+
), q = F(() => ({
|
|
1696
1732
|
showDebug: !1,
|
|
1697
1733
|
showDelete: !0,
|
|
1698
1734
|
showCopy: !0,
|
|
@@ -1700,229 +1736,235 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1700
1736
|
showDisconnect: !0,
|
|
1701
1737
|
insertGap: 100,
|
|
1702
1738
|
...t.nodeActions
|
|
1703
|
-
})),
|
|
1704
|
-
|
|
1705
|
-
const
|
|
1706
|
-
if (!
|
|
1707
|
-
const
|
|
1708
|
-
if (!
|
|
1709
|
-
const
|
|
1710
|
-
if (!
|
|
1711
|
-
const
|
|
1739
|
+
})), Y = F(() => {
|
|
1740
|
+
L.value;
|
|
1741
|
+
const y = v.value;
|
|
1742
|
+
if (!y || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
|
|
1743
|
+
const x = t.editor.flowModel.value, c = x.nodes[y];
|
|
1744
|
+
if (!c) return null;
|
|
1745
|
+
const I = t.editor.api.value.overlay.getNodeScreenRect(y);
|
|
1746
|
+
if (!I) return null;
|
|
1747
|
+
const _ = t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
|
|
1712
1748
|
api: t.editor.api.value,
|
|
1713
|
-
flowModel:
|
|
1749
|
+
flowModel: x,
|
|
1714
1750
|
history: t.editor.history,
|
|
1715
1751
|
mode: t.editor.mode.value
|
|
1716
1752
|
}) ?? {};
|
|
1717
|
-
return
|
|
1718
|
-
node:
|
|
1719
|
-
position: { x:
|
|
1720
|
-
behavior:
|
|
1753
|
+
return _.showActions === !1 ? null : {
|
|
1754
|
+
node: c,
|
|
1755
|
+
position: { x: I.x + I.width, y: I.y + I.height + 4 },
|
|
1756
|
+
behavior: _
|
|
1721
1757
|
};
|
|
1722
|
-
}),
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
if (
|
|
1731
|
-
const
|
|
1732
|
-
if (!
|
|
1733
|
-
const
|
|
1758
|
+
}), H = F(
|
|
1759
|
+
() => ({
|
|
1760
|
+
enabled: !0,
|
|
1761
|
+
tooltipText: "",
|
|
1762
|
+
portGroup: "right",
|
|
1763
|
+
...t.quickAdd
|
|
1764
|
+
})
|
|
1765
|
+
), Q = F(() => {
|
|
1766
|
+
if (L.value, !H.value.enabled) return null;
|
|
1767
|
+
const y = w.value;
|
|
1768
|
+
if (!y || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
|
|
1769
|
+
const x = t.editor.flowModel.value, c = x.nodes[y];
|
|
1770
|
+
if (!c) return null;
|
|
1771
|
+
const P = t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
|
|
1734
1772
|
api: t.editor.api.value,
|
|
1735
|
-
flowModel:
|
|
1773
|
+
flowModel: x,
|
|
1736
1774
|
history: t.editor.history,
|
|
1737
1775
|
mode: t.editor.mode.value
|
|
1738
1776
|
}) ?? {};
|
|
1739
|
-
if (
|
|
1740
|
-
const
|
|
1741
|
-
return
|
|
1742
|
-
node:
|
|
1743
|
-
portId:
|
|
1744
|
-
portGroup:
|
|
1745
|
-
portPosition:
|
|
1746
|
-
behavior:
|
|
1777
|
+
if (P.quickAddEnabled === !1) return null;
|
|
1778
|
+
const _ = te(c);
|
|
1779
|
+
return _ ? {
|
|
1780
|
+
node: c,
|
|
1781
|
+
portId: _.portId,
|
|
1782
|
+
portGroup: _.portGroup,
|
|
1783
|
+
portPosition: _.portPosition,
|
|
1784
|
+
behavior: P
|
|
1747
1785
|
} : null;
|
|
1748
|
-
}),
|
|
1749
|
-
function
|
|
1750
|
-
|
|
1751
|
-
|
|
1786
|
+
}), de = O();
|
|
1787
|
+
function re(y) {
|
|
1788
|
+
N.value = !0;
|
|
1789
|
+
const x = Q.value;
|
|
1790
|
+
x && o("ui-event", {
|
|
1752
1791
|
type: "node.quick-add",
|
|
1753
|
-
nodeId:
|
|
1754
|
-
position:
|
|
1792
|
+
nodeId: y,
|
|
1793
|
+
position: x.portPosition
|
|
1755
1794
|
});
|
|
1756
1795
|
}
|
|
1757
|
-
function
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1796
|
+
function ce() {
|
|
1797
|
+
N.value = !1;
|
|
1798
|
+
}
|
|
1799
|
+
function ue(y) {
|
|
1800
|
+
const x = t.editor.api.value;
|
|
1801
|
+
if (!x) return;
|
|
1802
|
+
const I = t.editor.flowModel.value.nodes[y];
|
|
1803
|
+
if (!I) return;
|
|
1804
|
+
const P = te(I);
|
|
1805
|
+
P && x.startConnection(y, P.portId);
|
|
1806
|
+
}
|
|
1807
|
+
function Ie(y, x) {
|
|
1808
|
+
const c = t.editor.api.value;
|
|
1809
|
+
if (!c) return;
|
|
1810
|
+
const I = x.id || t.editor.idGenerator("node"), P = { ...x, id: I }, _ = t.editor.flowModel.value.nodes[y];
|
|
1811
|
+
if (!_) return;
|
|
1812
|
+
c.insertNodeToRight(y, P, {
|
|
1771
1813
|
autoWireEdges: !0,
|
|
1772
|
-
direction:
|
|
1773
|
-
gap:
|
|
1814
|
+
direction: ye(_),
|
|
1815
|
+
gap: q.value.insertGap,
|
|
1774
1816
|
source: "user:quick-add",
|
|
1775
1817
|
label: "快捷插入节点"
|
|
1776
|
-
}).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId:
|
|
1818
|
+
}).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: y, newNodeId: I }), de.value?.closePopover();
|
|
1777
1819
|
}
|
|
1778
|
-
function
|
|
1820
|
+
function se(y) {
|
|
1779
1821
|
return {
|
|
1780
|
-
id:
|
|
1781
|
-
type:
|
|
1782
|
-
label:
|
|
1783
|
-
ports:
|
|
1784
|
-
payload:
|
|
1785
|
-
extensions:
|
|
1822
|
+
id: t.editor.idGenerator("node"),
|
|
1823
|
+
type: y.type,
|
|
1824
|
+
label: y.label,
|
|
1825
|
+
ports: y.ports ? JSON.parse(JSON.stringify(y.ports)) : void 0,
|
|
1826
|
+
payload: y.payload ? JSON.parse(JSON.stringify(y.payload)) : void 0,
|
|
1827
|
+
extensions: y.extensions ? JSON.parse(JSON.stringify(y.extensions)) : void 0
|
|
1786
1828
|
};
|
|
1787
1829
|
}
|
|
1788
|
-
function
|
|
1789
|
-
const
|
|
1790
|
-
switch (
|
|
1830
|
+
function Me(y, x) {
|
|
1831
|
+
const c = t.editor, I = c.api.value;
|
|
1832
|
+
switch (y) {
|
|
1791
1833
|
case "delete": {
|
|
1792
|
-
|
|
1793
|
-
id:
|
|
1834
|
+
c.executeCommand({
|
|
1835
|
+
id: W(),
|
|
1794
1836
|
source: "user:toolbar",
|
|
1795
1837
|
label: "删除节点",
|
|
1796
1838
|
timestamp: Date.now(),
|
|
1797
|
-
commands: [{ type: "node.remove", nodeId:
|
|
1798
|
-
}), o("ui-event", { type: "node.action.delete", nodeId:
|
|
1839
|
+
commands: [{ type: "node.remove", nodeId: x }]
|
|
1840
|
+
}), o("ui-event", { type: "node.action.delete", nodeId: x }), v.value = null;
|
|
1799
1841
|
break;
|
|
1800
1842
|
}
|
|
1801
1843
|
case "copy": {
|
|
1802
|
-
if (!
|
|
1803
|
-
const
|
|
1804
|
-
if (!
|
|
1805
|
-
const
|
|
1806
|
-
|
|
1844
|
+
if (!I) break;
|
|
1845
|
+
const P = c.flowModel.value.nodes[x];
|
|
1846
|
+
if (!P) break;
|
|
1847
|
+
const _ = se(P);
|
|
1848
|
+
I.insertNodeToRight(x, _, {
|
|
1807
1849
|
autoWireEdges: !1,
|
|
1808
|
-
gap:
|
|
1850
|
+
gap: q.value.insertGap,
|
|
1809
1851
|
label: "复制节点"
|
|
1810
|
-
}), o("ui-event", { type: "node.action.copy", sourceNodeId:
|
|
1852
|
+
}), o("ui-event", { type: "node.action.copy", sourceNodeId: x, newNodeId: _.id });
|
|
1811
1853
|
break;
|
|
1812
1854
|
}
|
|
1813
1855
|
case "copy-insert": {
|
|
1814
|
-
if (!
|
|
1815
|
-
const
|
|
1816
|
-
if (!
|
|
1817
|
-
const
|
|
1818
|
-
|
|
1856
|
+
if (!I) break;
|
|
1857
|
+
const P = c.flowModel.value.nodes[x];
|
|
1858
|
+
if (!P) break;
|
|
1859
|
+
const _ = se(P);
|
|
1860
|
+
I.insertNodeToRight(x, _, {
|
|
1819
1861
|
autoWireEdges: !0,
|
|
1820
|
-
gap:
|
|
1862
|
+
gap: q.value.insertGap,
|
|
1821
1863
|
label: "复制并插入节点"
|
|
1822
|
-
}), o("ui-event", { type: "node.action.copy-insert", sourceNodeId:
|
|
1864
|
+
}), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: x, newNodeId: _.id });
|
|
1823
1865
|
break;
|
|
1824
1866
|
}
|
|
1825
1867
|
case "disconnect": {
|
|
1826
|
-
const
|
|
1827
|
-
const
|
|
1828
|
-
return
|
|
1829
|
-
}).map(([
|
|
1830
|
-
if (
|
|
1831
|
-
|
|
1832
|
-
id:
|
|
1868
|
+
const P = c.flowModel.value, _ = Object.entries(P.edges).filter(([, $]) => {
|
|
1869
|
+
const J = $;
|
|
1870
|
+
return J.source.nodeId === x || J.target.nodeId === x;
|
|
1871
|
+
}).map(([$]) => $);
|
|
1872
|
+
if (_.length === 0) break;
|
|
1873
|
+
c.executeCommand({
|
|
1874
|
+
id: W(),
|
|
1833
1875
|
source: "user:toolbar",
|
|
1834
1876
|
label: "断开连线",
|
|
1835
1877
|
timestamp: Date.now(),
|
|
1836
|
-
commands:
|
|
1837
|
-
}), o("ui-event", { type: "node.action.disconnect", nodeId:
|
|
1878
|
+
commands: _.map(($) => ({ type: "edge.remove", edgeId: $ }))
|
|
1879
|
+
}), o("ui-event", { type: "node.action.disconnect", nodeId: x, edgeIds: _ });
|
|
1838
1880
|
break;
|
|
1839
1881
|
}
|
|
1840
1882
|
case "debug": {
|
|
1841
|
-
o("ui-event", { type: "node.action.debug", nodeId:
|
|
1883
|
+
o("ui-event", { type: "node.action.debug", nodeId: x });
|
|
1842
1884
|
break;
|
|
1843
1885
|
}
|
|
1844
1886
|
}
|
|
1845
1887
|
}
|
|
1846
|
-
function
|
|
1847
|
-
if (!
|
|
1848
|
-
const
|
|
1849
|
-
return !
|
|
1888
|
+
function ie(y) {
|
|
1889
|
+
if (!H.value.enabled || t.editor.mode.value !== "edit") return !1;
|
|
1890
|
+
const x = t.editor.flowModel.value, c = x.nodes[y];
|
|
1891
|
+
return !c || (t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
|
|
1850
1892
|
api: t.editor.api.value,
|
|
1851
|
-
flowModel:
|
|
1893
|
+
flowModel: x,
|
|
1852
1894
|
history: t.editor.history,
|
|
1853
1895
|
mode: t.editor.mode.value
|
|
1854
|
-
}) ?? {}).quickAddEnabled === !1 ? !1 : !!te(
|
|
1896
|
+
}) ?? {}).quickAddEnabled === !1 ? !1 : !!te(c);
|
|
1855
1897
|
}
|
|
1856
|
-
function
|
|
1857
|
-
const
|
|
1858
|
-
return
|
|
1898
|
+
function $e(y) {
|
|
1899
|
+
const x = t.editor.schema.nodeTypes[y.type];
|
|
1900
|
+
return Fe(y, x?.getPorts);
|
|
1859
1901
|
}
|
|
1860
|
-
function
|
|
1861
|
-
return
|
|
1902
|
+
function ae(y) {
|
|
1903
|
+
return y === "top" || y === "right" || y === "bottom" || y === "left";
|
|
1862
1904
|
}
|
|
1863
|
-
function
|
|
1864
|
-
const
|
|
1865
|
-
if (!
|
|
1866
|
-
const
|
|
1867
|
-
return
|
|
1905
|
+
function Z(y, x) {
|
|
1906
|
+
const c = H.value.getPort?.(y, x);
|
|
1907
|
+
if (!c) return null;
|
|
1908
|
+
const I = typeof c == "string" ? c : c.id;
|
|
1909
|
+
return x.find((P) => P.id === I) ?? null;
|
|
1868
1910
|
}
|
|
1869
|
-
function
|
|
1870
|
-
const
|
|
1871
|
-
if (!
|
|
1872
|
-
switch (
|
|
1911
|
+
function we(y, x) {
|
|
1912
|
+
const c = t.editor.api.value?.overlay.getNodeScreenRect(y);
|
|
1913
|
+
if (!c) return null;
|
|
1914
|
+
switch (x) {
|
|
1873
1915
|
case "top":
|
|
1874
|
-
return { x:
|
|
1916
|
+
return { x: c.x + c.width / 2, y: c.y };
|
|
1875
1917
|
case "bottom":
|
|
1876
|
-
return { x:
|
|
1918
|
+
return { x: c.x + c.width / 2, y: c.y + c.height };
|
|
1877
1919
|
case "left":
|
|
1878
|
-
return { x:
|
|
1920
|
+
return { x: c.x, y: c.y + c.height / 2 };
|
|
1879
1921
|
case "right":
|
|
1880
|
-
return { x:
|
|
1922
|
+
return { x: c.x + c.width, y: c.y + c.height / 2 };
|
|
1881
1923
|
default:
|
|
1882
1924
|
return null;
|
|
1883
1925
|
}
|
|
1884
1926
|
}
|
|
1885
|
-
function
|
|
1886
|
-
const
|
|
1887
|
-
if (
|
|
1888
|
-
const
|
|
1889
|
-
if (
|
|
1890
|
-
const
|
|
1927
|
+
function ve(y, x, c) {
|
|
1928
|
+
const I = i.getCellById(y);
|
|
1929
|
+
if (I?.isNode()) {
|
|
1930
|
+
const P = I, _ = i.findViewByCell(P), $ = _?.findPortElem(x, "circle") ?? _?.findPortElem(x);
|
|
1931
|
+
if ($) {
|
|
1932
|
+
const J = i.container.getBoundingClientRect(), le = $.getBoundingClientRect();
|
|
1891
1933
|
return {
|
|
1892
|
-
x:
|
|
1893
|
-
y:
|
|
1934
|
+
x: le.left - J.left + le.width / 2,
|
|
1935
|
+
y: le.top - J.top + le.height / 2
|
|
1894
1936
|
};
|
|
1895
1937
|
}
|
|
1896
1938
|
}
|
|
1897
|
-
return
|
|
1898
|
-
}
|
|
1899
|
-
function te(
|
|
1900
|
-
const
|
|
1901
|
-
if (!
|
|
1902
|
-
const
|
|
1903
|
-
return
|
|
1904
|
-
portId:
|
|
1905
|
-
portGroup:
|
|
1906
|
-
portPosition:
|
|
1939
|
+
return we(y, c);
|
|
1940
|
+
}
|
|
1941
|
+
function te(y) {
|
|
1942
|
+
const x = $e(y), c = Z(y, x) ?? x.find((P) => P.group === H.value.portGroup) ?? null;
|
|
1943
|
+
if (!c) return null;
|
|
1944
|
+
const I = ve(y.id, c.id, c.group);
|
|
1945
|
+
return I ? {
|
|
1946
|
+
portId: c.id,
|
|
1947
|
+
portGroup: c.group,
|
|
1948
|
+
portPosition: I
|
|
1907
1949
|
} : null;
|
|
1908
1950
|
}
|
|
1909
|
-
function
|
|
1910
|
-
const
|
|
1911
|
-
if (typeof
|
|
1912
|
-
const
|
|
1913
|
-
|
|
1914
|
-
|
|
1951
|
+
function ye(y) {
|
|
1952
|
+
const x = te(y), c = H.value.insertDirection;
|
|
1953
|
+
if (typeof c == "function") {
|
|
1954
|
+
const I = c(
|
|
1955
|
+
y,
|
|
1956
|
+
x ? { id: x.portId, group: x.portGroup } : null
|
|
1915
1957
|
);
|
|
1916
|
-
if (
|
|
1917
|
-
} else if (
|
|
1918
|
-
return
|
|
1919
|
-
return
|
|
1958
|
+
if (I) return I;
|
|
1959
|
+
} else if (c)
|
|
1960
|
+
return c;
|
|
1961
|
+
return x && ae(x.portGroup) ? x.portGroup : ae(H.value.portGroup) ? H.value.portGroup : "right";
|
|
1920
1962
|
}
|
|
1921
|
-
function
|
|
1963
|
+
function Ne(y) {
|
|
1922
1964
|
if (t.editor.mode.value !== "edit") return;
|
|
1923
|
-
t.editor._pluginManager.dispatchKeyboardShortcut(
|
|
1965
|
+
t.editor._pluginManager.dispatchKeyboardShortcut(y) && (y.preventDefault(), y.stopPropagation());
|
|
1924
1966
|
}
|
|
1925
|
-
function
|
|
1967
|
+
function xe() {
|
|
1926
1968
|
return {
|
|
1927
1969
|
refX: 0,
|
|
1928
1970
|
children: [
|
|
@@ -1943,8 +1985,8 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1943
1985
|
]
|
|
1944
1986
|
};
|
|
1945
1987
|
}
|
|
1946
|
-
function
|
|
1947
|
-
const
|
|
1988
|
+
function K(y) {
|
|
1989
|
+
const x = t.editor.schema.defaultEdgeType ?? "default", c = t.editor.schema.edgeTypes?.[x], I = {
|
|
1948
1990
|
zIndex: -1,
|
|
1949
1991
|
attrs: {
|
|
1950
1992
|
line: {
|
|
@@ -1954,37 +1996,41 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1954
1996
|
}
|
|
1955
1997
|
}
|
|
1956
1998
|
};
|
|
1957
|
-
|
|
1958
|
-
const
|
|
1959
|
-
return
|
|
1960
|
-
...
|
|
1999
|
+
c?.router && (I.router = typeof c.router == "string" ? { name: c.router } : c.router), c?.connector && (I.connector = typeof c.connector == "string" ? { name: c.connector } : c.connector), c?.x6EdgeConfig && Object.assign(I, c.x6EdgeConfig);
|
|
2000
|
+
const P = I.attrs ?? {}, _ = P.line ?? {};
|
|
2001
|
+
return I.attrs = {
|
|
2002
|
+
...P,
|
|
1961
2003
|
line: {
|
|
1962
|
-
...
|
|
1963
|
-
targetMarker:
|
|
2004
|
+
..._,
|
|
2005
|
+
targetMarker: xe()
|
|
1964
2006
|
}
|
|
1965
|
-
},
|
|
2007
|
+
}, y.createEdge(I);
|
|
1966
2008
|
}
|
|
1967
|
-
return
|
|
1968
|
-
if (!
|
|
1969
|
-
const
|
|
2009
|
+
return at(() => {
|
|
2010
|
+
if (!r.value) return;
|
|
2011
|
+
const y = /* @__PURE__ */ new Set(["model", "container"]), x = {};
|
|
1970
2012
|
if (t.graphOptions)
|
|
1971
|
-
for (const [
|
|
1972
|
-
if (
|
|
1973
|
-
console.warn(`[flow-canvas] graphOptions.${
|
|
2013
|
+
for (const [u, k] of Object.entries(t.graphOptions)) {
|
|
2014
|
+
if (y.has(u)) {
|
|
2015
|
+
console.warn(`[flow-canvas] graphOptions.${u} is managed by the engine and will be ignored`);
|
|
1974
2016
|
continue;
|
|
1975
2017
|
}
|
|
1976
|
-
|
|
2018
|
+
x[u] = k;
|
|
1977
2019
|
}
|
|
1978
|
-
|
|
1979
|
-
container:
|
|
2020
|
+
i = new ut({
|
|
2021
|
+
container: r.value,
|
|
1980
2022
|
autoResize: !0,
|
|
1981
2023
|
background: { color: "#edf2fc" },
|
|
1982
2024
|
grid: { visible: !0, size: 20, type: "dot" },
|
|
2025
|
+
highlighting: {
|
|
2026
|
+
// 连接吸附到 port 时不再叠加 X6 默认橙色高亮,由业务层自行控制端口视觉。
|
|
2027
|
+
magnetAdsorbed: { name: "className", args: { className: "flow-canvas-magnet-adsorbed" } }
|
|
2028
|
+
},
|
|
1983
2029
|
panning: { enabled: !0 },
|
|
1984
2030
|
mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
|
|
1985
2031
|
interacting: {
|
|
1986
|
-
nodeMovable(
|
|
1987
|
-
return
|
|
2032
|
+
nodeMovable(u) {
|
|
2033
|
+
return u.cell.getProp("draggable") !== !1;
|
|
1988
2034
|
}
|
|
1989
2035
|
},
|
|
1990
2036
|
connecting: {
|
|
@@ -1998,16 +2044,16 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
1998
2044
|
connectionPoint: "anchor",
|
|
1999
2045
|
snap: { radius: 30 },
|
|
2000
2046
|
createEdge() {
|
|
2001
|
-
return
|
|
2047
|
+
return K(this);
|
|
2002
2048
|
}
|
|
2003
2049
|
},
|
|
2004
|
-
...
|
|
2005
|
-
}), a = new
|
|
2006
|
-
|
|
2050
|
+
...x
|
|
2051
|
+
}), a = new Tt(), l = new At(
|
|
2052
|
+
i,
|
|
2007
2053
|
t.editor.schema,
|
|
2008
2054
|
a,
|
|
2009
|
-
(
|
|
2010
|
-
(
|
|
2055
|
+
(u) => t.editor._pluginManager.collectNodeDecorations(u),
|
|
2056
|
+
(u) => t.editor._pluginManager.collectEdgeDecorations(u),
|
|
2011
2057
|
() => t.editor.api.value ? {
|
|
2012
2058
|
api: t.editor.api.value,
|
|
2013
2059
|
flowModel: t.editor.flowModel.value,
|
|
@@ -2015,263 +2061,313 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
2015
2061
|
mode: t.editor.mode.value
|
|
2016
2062
|
} : null
|
|
2017
2063
|
);
|
|
2018
|
-
const
|
|
2019
|
-
graph:
|
|
2020
|
-
overlayManager:
|
|
2021
|
-
executeCommand: (
|
|
2064
|
+
const c = $t(i), I = Bt({
|
|
2065
|
+
graph: i,
|
|
2066
|
+
overlayManager: c,
|
|
2067
|
+
executeCommand: (u) => t.editor.executeCommand(u),
|
|
2022
2068
|
schema: t.editor.schema,
|
|
2023
2069
|
flowModel: t.editor.flowModel,
|
|
2070
|
+
idGenerator: t.editor.idGenerator,
|
|
2024
2071
|
defaultInsertGap: t.nodeActions?.insertGap,
|
|
2025
|
-
getContextMenuItems: (
|
|
2026
|
-
onHighlightChange: (
|
|
2027
|
-
l.setHighlightedNodes(
|
|
2072
|
+
getContextMenuItems: (u) => t.editor._pluginManager.collectContextMenuItems(u),
|
|
2073
|
+
onHighlightChange: (u, k) => {
|
|
2074
|
+
l.setHighlightedNodes(u), l.setHighlightedEdges(k), l.refreshNodeHighlights(), l.refreshEdgeStyles();
|
|
2028
2075
|
},
|
|
2029
|
-
resolveNodeShape: (
|
|
2030
|
-
const
|
|
2031
|
-
if (!
|
|
2032
|
-
const
|
|
2033
|
-
return { shapeName:
|
|
2076
|
+
resolveNodeShape: (u) => {
|
|
2077
|
+
const k = t.editor.schema.nodeTypes[u];
|
|
2078
|
+
if (!k) return null;
|
|
2079
|
+
const A = a.registerNodeType(u, k.component), V = k.getSize({ id: "", type: u, position: { x: 0, y: 0 } });
|
|
2080
|
+
return { shapeName: A, width: V.width, height: V.height };
|
|
2034
2081
|
}
|
|
2035
2082
|
});
|
|
2036
|
-
t.editor.api.value =
|
|
2037
|
-
const
|
|
2083
|
+
t.editor.api.value = I;
|
|
2084
|
+
const P = {
|
|
2038
2085
|
flowModel: t.editor.flowModel,
|
|
2039
2086
|
history: t.editor.history,
|
|
2040
2087
|
schema: t.editor.schema,
|
|
2041
2088
|
mode: t.editor.mode,
|
|
2089
|
+
idGenerator: t.editor.idGenerator,
|
|
2042
2090
|
executeCommand: t.editor.executeCommand,
|
|
2043
|
-
api:
|
|
2044
|
-
overlay:
|
|
2045
|
-
graph:
|
|
2091
|
+
api: I,
|
|
2092
|
+
overlay: c,
|
|
2093
|
+
graph: i
|
|
2046
2094
|
};
|
|
2047
|
-
t.editor._pluginManager.attachRuntime(
|
|
2048
|
-
const
|
|
2049
|
-
Object.assign(t.editor.extendedApi,
|
|
2050
|
-
|
|
2051
|
-
(
|
|
2052
|
-
(
|
|
2095
|
+
t.editor._pluginManager.attachRuntime(P);
|
|
2096
|
+
const _ = t.editor._pluginManager.collectExtendedApi();
|
|
2097
|
+
Object.assign(t.editor.extendedApi, _), g = new Rt(
|
|
2098
|
+
i,
|
|
2099
|
+
(u) => {
|
|
2100
|
+
(u.type === "node.click" || u.type === "node.dblclick" || u.type === "node.contextmenu") && d.enter(u.nodeId), t.editor._pluginManager.dispatchUiEvent(u), o("ui-event", u);
|
|
2053
2101
|
},
|
|
2054
|
-
(
|
|
2102
|
+
(u) => {
|
|
2055
2103
|
if (l.isSyncing) return;
|
|
2056
|
-
if (t.editor.executeCommand(
|
|
2057
|
-
for (const
|
|
2058
|
-
if (
|
|
2059
|
-
const
|
|
2060
|
-
|
|
2104
|
+
if (t.editor.executeCommand(u).status !== "applied") {
|
|
2105
|
+
for (const A of u.commands)
|
|
2106
|
+
if (A.type === "edge.add") {
|
|
2107
|
+
const V = i.getCellById(A.edge.id);
|
|
2108
|
+
V && i.removeCell(V);
|
|
2061
2109
|
}
|
|
2062
2110
|
}
|
|
2063
2111
|
},
|
|
2064
|
-
t.editor.flowModel
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2112
|
+
t.editor.flowModel,
|
|
2113
|
+
t.editor.idGenerator
|
|
2114
|
+
), G = Gt(i);
|
|
2115
|
+
const $ = zt(i), J = i, le = (u) => {
|
|
2116
|
+
const k = J.isRubberbandEnabled?.() ?? !1;
|
|
2117
|
+
k && J.disableRubberband?.(), u ? i.enablePanning() : i.disablePanning(), k && J.enableRubberband?.();
|
|
2118
|
+
}, Le = () => {
|
|
2119
|
+
L.value++;
|
|
2071
2120
|
};
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2121
|
+
i.on("translate", Le), i.on("scale", Le), i.on("resize", Le), i.on("node:move", ({ node: u }) => {
|
|
2122
|
+
f.value = !0;
|
|
2123
|
+
const k = t.editor.flowModel.value.nodes[u.id];
|
|
2124
|
+
k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
|
|
2125
|
+
api: t.editor.api.value,
|
|
2126
|
+
flowModel: t.editor.flowModel.value,
|
|
2127
|
+
history: t.editor.history,
|
|
2128
|
+
mode: t.editor.mode.value
|
|
2129
|
+
})?.bringToFrontOnDrag === !1 || u.toFront?.();
|
|
2130
|
+
}), i.on("node:moved", () => {
|
|
2131
|
+
f.value = !1;
|
|
2132
|
+
}), i.on("node:mouseenter", ({ node: u }) => {
|
|
2133
|
+
d.enter(u.id);
|
|
2134
|
+
const k = t.editor.flowModel.value.nodes[u.id];
|
|
2135
|
+
if (k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
|
|
2082
2136
|
api: t.editor.api.value,
|
|
2083
2137
|
flowModel: t.editor.flowModel.value,
|
|
2084
2138
|
history: t.editor.history,
|
|
2085
2139
|
mode: t.editor.mode.value
|
|
2086
|
-
})?.
|
|
2140
|
+
})?.showPorts === !1) {
|
|
2141
|
+
H.value.enabled && D(u.id);
|
|
2142
|
+
return;
|
|
2143
|
+
}
|
|
2144
|
+
H.value.enabled && D(u.id) || $.showNodePorts(u);
|
|
2145
|
+
}), i.on("node:mouseleave", ({ node: u }) => {
|
|
2146
|
+
const k = t.editor.flowModel.value.nodes[u.id];
|
|
2147
|
+
let A = 100;
|
|
2148
|
+
k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
|
|
2149
|
+
api: t.editor.api.value,
|
|
2150
|
+
flowModel: t.editor.flowModel.value,
|
|
2151
|
+
history: t.editor.history,
|
|
2152
|
+
mode: t.editor.mode.value
|
|
2153
|
+
})?.actionsOffset && (A = 300), d.leave(A), H.value.enabled ? w.value === u.id && !N.value ? z() : w.value !== u.id && $.hideNodePorts(u) : $.hideNodePorts(u);
|
|
2087
2154
|
});
|
|
2088
|
-
function
|
|
2089
|
-
const
|
|
2090
|
-
if (!
|
|
2091
|
-
const
|
|
2092
|
-
if (!
|
|
2093
|
-
const
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2155
|
+
function st(u) {
|
|
2156
|
+
const k = i.getCellById(u);
|
|
2157
|
+
if (!k?.isNode()) return;
|
|
2158
|
+
const A = k, V = t.editor.flowModel.value.nodes[u];
|
|
2159
|
+
if (!V) return;
|
|
2160
|
+
const Be = te(V);
|
|
2161
|
+
let qe = !0;
|
|
2162
|
+
t.editor.api.value && t.editor.schema.nodeTypes[V.type]?.getBehavior?.(V, {
|
|
2163
|
+
api: t.editor.api.value,
|
|
2164
|
+
flowModel: t.editor.flowModel.value,
|
|
2165
|
+
history: t.editor.history,
|
|
2166
|
+
mode: t.editor.mode.value
|
|
2167
|
+
})?.hidePortForQuickAdd === !1 && (qe = !1);
|
|
2168
|
+
const it = qe && !f.value && !!Be && ie(u);
|
|
2169
|
+
for (const Oe of A.getPorts()) {
|
|
2170
|
+
const Ue = it && Oe.id === Be?.portId ? "hidden" : "visible";
|
|
2171
|
+
A.setPortProp(Oe.id, "attrs/circle/visibility", Ue);
|
|
2097
2172
|
}
|
|
2098
2173
|
}
|
|
2099
|
-
|
|
2100
|
-
[
|
|
2101
|
-
([
|
|
2102
|
-
if (
|
|
2103
|
-
const
|
|
2104
|
-
|
|
2174
|
+
fe(
|
|
2175
|
+
[w, f],
|
|
2176
|
+
([u], [k]) => {
|
|
2177
|
+
if (k && k !== u) {
|
|
2178
|
+
const A = i.getCellById(k);
|
|
2179
|
+
A?.isNode() && $.hideNodePorts(A);
|
|
2105
2180
|
}
|
|
2106
|
-
|
|
2181
|
+
u && st(u);
|
|
2107
2182
|
},
|
|
2108
2183
|
{ flush: "sync" }
|
|
2109
|
-
),
|
|
2110
|
-
|
|
2111
|
-
}),
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2184
|
+
), fe(Q, (u) => {
|
|
2185
|
+
u || (N.value = !1);
|
|
2186
|
+
}), i.on("edge:added", ({ edge: u }) => {
|
|
2187
|
+
let k;
|
|
2188
|
+
if (t.getConnectionExcludedNodeIds && !u.getTargetCell()) {
|
|
2189
|
+
const A = u.getSourceCell();
|
|
2190
|
+
if (A) {
|
|
2191
|
+
const V = t.getConnectionExcludedNodeIds(A.id);
|
|
2192
|
+
k = V instanceof Set ? V : new Set(V);
|
|
2193
|
+
}
|
|
2194
|
+
}
|
|
2195
|
+
$.handleEdgeAdded(u, k);
|
|
2196
|
+
}), i.on("edge:connected", () => {
|
|
2197
|
+
$.handleEdgeConnected();
|
|
2198
|
+
}), i.on("edge:removed", ({ edge: u }) => {
|
|
2199
|
+
$.handleEdgeRemoved(u.id), G.handleEdgeRemoved(u.id);
|
|
2200
|
+
}), i.on("selection:changed", () => {
|
|
2201
|
+
const u = i.getSelectedCells?.() ?? [], k = {
|
|
2202
|
+
nodeIds: u.filter((A) => A.isNode()).map((A) => A.id),
|
|
2203
|
+
edgeIds: u.filter((A) => A.isEdge()).map((A) => A.id)
|
|
2119
2204
|
};
|
|
2120
|
-
t.editor._pluginManager.dispatchSelectionChange(
|
|
2205
|
+
t.editor._pluginManager.dispatchSelectionChange(k), o("ui-event", {
|
|
2121
2206
|
type: "selection.change",
|
|
2122
|
-
nodeIds:
|
|
2123
|
-
edgeIds:
|
|
2207
|
+
nodeIds: k.nodeIds,
|
|
2208
|
+
edgeIds: k.edgeIds
|
|
2124
2209
|
}), l.refreshEdgeStyles();
|
|
2125
|
-
}),
|
|
2126
|
-
l.setHoveredEdge(
|
|
2127
|
-
}),
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2210
|
+
}), i.on("edge:mouseenter", ({ edge: u, e: k }) => {
|
|
2211
|
+
l.setHoveredEdge(u.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && $.canShowEdgeTool() && G.show(u.id, k);
|
|
2212
|
+
}), T = (u) => G.move(u), i.container.addEventListener("mousemove", T), h = (u) => {
|
|
2213
|
+
if (!v.value && !w.value) return;
|
|
2214
|
+
const k = u.target;
|
|
2215
|
+
if (k?.closest?.(".x6-node") || k?.closest?.(".flow-canvas-node-actions") || k?.closest?.(".flow-canvas-quick-add")) {
|
|
2216
|
+
d.cancelLeave(), X();
|
|
2217
|
+
return;
|
|
2218
|
+
}
|
|
2219
|
+
d.leave(180), N.value || z();
|
|
2220
|
+
}, n.value?.addEventListener("mousemove", h), b = () => {
|
|
2221
|
+
d.reset(), N.value || (w.value = null);
|
|
2222
|
+
}, n.value?.addEventListener("mouseleave", b), i.on("edge:mouseleave", () => {
|
|
2223
|
+
l.setHoveredEdge(null), l.refreshEdgeStyles(), G.remove();
|
|
2224
|
+
}), i.on("edge:click", ({ edge: u, e: k }) => {
|
|
2225
|
+
k.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (G.remove(), t.editor.executeCommand({
|
|
2226
|
+
id: W(),
|
|
2132
2227
|
source: "user:toolbar",
|
|
2133
2228
|
label: "删除连线",
|
|
2134
2229
|
timestamp: Date.now(),
|
|
2135
|
-
commands: [{ type: "edge.remove", edgeId:
|
|
2230
|
+
commands: [{ type: "edge.remove", edgeId: u.id }]
|
|
2136
2231
|
}));
|
|
2137
|
-
}), n.value?.addEventListener("keydown",
|
|
2232
|
+
}), n.value?.addEventListener("keydown", Ne), l.syncFlowModel(t.editor.flowModel.value), fe(
|
|
2138
2233
|
() => t.editor.flowModel.value,
|
|
2139
|
-
(
|
|
2140
|
-
),
|
|
2234
|
+
(u) => l.syncFlowModel(u)
|
|
2235
|
+
), fe(
|
|
2141
2236
|
() => t.editor.selectionMode.value,
|
|
2142
|
-
(
|
|
2143
|
-
if (
|
|
2144
|
-
|
|
2145
|
-
const
|
|
2146
|
-
|
|
2237
|
+
(u) => {
|
|
2238
|
+
if (C?.(), C = null, u) {
|
|
2239
|
+
le(!1), J.enableRubberband?.();
|
|
2240
|
+
const k = () => {
|
|
2241
|
+
i.container.removeEventListener("mouseup", k), C = null, setTimeout(() => {
|
|
2147
2242
|
t.editor.selectionMode.value && t.editor.setSelectionMode(!1);
|
|
2148
2243
|
}, 50);
|
|
2149
2244
|
};
|
|
2150
|
-
|
|
2245
|
+
i.container.addEventListener("mouseup", k), C = () => i.container.removeEventListener("mouseup", k);
|
|
2151
2246
|
} else
|
|
2152
|
-
|
|
2247
|
+
J.disableRubberband?.(), le(!0);
|
|
2153
2248
|
}
|
|
2154
|
-
),
|
|
2249
|
+
), fe(
|
|
2155
2250
|
() => t.editor.mode.value,
|
|
2156
|
-
(
|
|
2157
|
-
const
|
|
2158
|
-
|
|
2251
|
+
(u) => {
|
|
2252
|
+
const k = u === "edit";
|
|
2253
|
+
le(!0), k ? J.enableSelection?.() : J.disableSelection?.();
|
|
2159
2254
|
}
|
|
2160
2255
|
);
|
|
2161
|
-
}),
|
|
2162
|
-
d.cleanup(),
|
|
2163
|
-
for (const
|
|
2164
|
-
delete t.editor.extendedApi[
|
|
2165
|
-
|
|
2166
|
-
}), (
|
|
2256
|
+
}), ze(() => {
|
|
2257
|
+
d.cleanup(), m && clearTimeout(m), G?.remove(), C?.(), T && i?.container?.removeEventListener("mousemove", T), h && n.value?.removeEventListener("mousemove", h), b && n.value?.removeEventListener("mouseleave", b), n.value?.removeEventListener("keydown", Ne), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
|
|
2258
|
+
for (const y of Object.keys(t.editor.extendedApi))
|
|
2259
|
+
delete t.editor.extendedApi[y];
|
|
2260
|
+
g?.dispose(), l?.dispose(), a?.dispose(), i?.dispose();
|
|
2261
|
+
}), (y, x) => (M(), S("div", {
|
|
2167
2262
|
ref_key: "rootRef",
|
|
2168
2263
|
ref: n,
|
|
2169
2264
|
class: "flow-canvas-runtime-core",
|
|
2170
2265
|
tabindex: "0"
|
|
2171
2266
|
}, [
|
|
2172
|
-
|
|
2267
|
+
B("div", {
|
|
2173
2268
|
ref_key: "containerRef",
|
|
2174
|
-
ref:
|
|
2269
|
+
ref: r,
|
|
2175
2270
|
class: "flow-canvas-runtime-core__graph"
|
|
2176
2271
|
}, null, 512),
|
|
2177
|
-
|
|
2178
|
-
(
|
|
2179
|
-
key: `badge-${
|
|
2272
|
+
B("div", Qt, [
|
|
2273
|
+
(M(!0), S(pe, null, Pe(R.value, (c) => (M(), S("div", {
|
|
2274
|
+
key: `badge-${c.nodeId}`,
|
|
2180
2275
|
class: "flow-canvas-runtime-core__badge",
|
|
2181
|
-
style:
|
|
2182
|
-
},
|
|
2183
|
-
|
|
2276
|
+
style: _e({ left: `${c.x}px`, top: `${c.y}px`, backgroundColor: c.badge.color })
|
|
2277
|
+
}, me(c.badge.text), 5))), 128)),
|
|
2278
|
+
Q.value ? (M(), De(Wt, {
|
|
2184
2279
|
key: 0,
|
|
2185
2280
|
ref_key: "quickAddPopoverRef",
|
|
2186
|
-
ref:
|
|
2187
|
-
node:
|
|
2188
|
-
"port-position":
|
|
2189
|
-
"tooltip-text":
|
|
2190
|
-
onOpen:
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2281
|
+
ref: de,
|
|
2282
|
+
node: Q.value.node,
|
|
2283
|
+
"port-position": Q.value.portPosition,
|
|
2284
|
+
"tooltip-text": H.value.tooltipText,
|
|
2285
|
+
onOpen: re,
|
|
2286
|
+
onClose: ce,
|
|
2287
|
+
onStartDrag: ue,
|
|
2288
|
+
onMouseenter: j,
|
|
2289
|
+
onMouseleave: oe
|
|
2194
2290
|
}, {
|
|
2195
|
-
default:
|
|
2196
|
-
|
|
2197
|
-
node:
|
|
2291
|
+
default: je(() => [
|
|
2292
|
+
ke(y.$slots, "quick-add-panel", {
|
|
2293
|
+
node: Q.value.node,
|
|
2198
2294
|
api: s.editor.api.value,
|
|
2199
|
-
insertNodeToRight: (
|
|
2200
|
-
closePopover: () =>
|
|
2295
|
+
insertNodeToRight: (c) => Ie(Q.value.node.id, c),
|
|
2296
|
+
closePopover: () => de.value?.closePopover()
|
|
2201
2297
|
}, void 0, !0)
|
|
2202
2298
|
]),
|
|
2203
2299
|
_: 3
|
|
2204
|
-
}, 8, ["node", "port-position", "tooltip-text"])) :
|
|
2205
|
-
|
|
2300
|
+
}, 8, ["node", "port-position", "tooltip-text"])) : U("", !0),
|
|
2301
|
+
Y.value ? (M(), De(Ft, {
|
|
2206
2302
|
key: 1,
|
|
2207
|
-
node:
|
|
2208
|
-
position:
|
|
2209
|
-
config:
|
|
2210
|
-
behavior:
|
|
2211
|
-
"actions-offset":
|
|
2212
|
-
onAction:
|
|
2213
|
-
onMouseenter:
|
|
2214
|
-
onMouseleave:
|
|
2215
|
-
}, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) :
|
|
2303
|
+
node: Y.value.node,
|
|
2304
|
+
position: Y.value.position,
|
|
2305
|
+
config: q.value,
|
|
2306
|
+
behavior: Y.value.behavior,
|
|
2307
|
+
"actions-offset": Y.value.behavior.actionsOffset,
|
|
2308
|
+
onAction: Me,
|
|
2309
|
+
onMouseenter: lt(p),
|
|
2310
|
+
onMouseleave: E
|
|
2311
|
+
}, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : U("", !0)
|
|
2216
2312
|
])
|
|
2217
2313
|
], 512));
|
|
2218
2314
|
}
|
|
2219
|
-
}),
|
|
2315
|
+
}), So = /* @__PURE__ */ he(Xt, [["__scopeId", "data-v-b37732f8"]]), Yt = { class: "flow-canvas-node-palette" }, Kt = ["data-node-type"], Zt = { class: "flow-canvas-node-palette__item-label" }, Jt = /* @__PURE__ */ ge({
|
|
2220
2316
|
__name: "canvas-node-palette",
|
|
2221
2317
|
props: {
|
|
2222
2318
|
editor: {},
|
|
2223
2319
|
items: {}
|
|
2224
2320
|
},
|
|
2225
2321
|
setup(s) {
|
|
2226
|
-
const e = s, t =
|
|
2322
|
+
const e = s, t = O(), o = F(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
|
|
2227
2323
|
type: n,
|
|
2228
2324
|
label: n.charAt(0).toUpperCase() + n.slice(1)
|
|
2229
2325
|
})));
|
|
2230
|
-
return
|
|
2326
|
+
return fe(
|
|
2231
2327
|
[() => e.editor.api.value, o, t],
|
|
2232
|
-
([n,
|
|
2233
|
-
if (!n || !
|
|
2234
|
-
const
|
|
2235
|
-
for (const d of
|
|
2236
|
-
const
|
|
2237
|
-
if (!
|
|
2238
|
-
const
|
|
2239
|
-
id:
|
|
2328
|
+
([n, r, i], l, a) => {
|
|
2329
|
+
if (!n || !i) return;
|
|
2330
|
+
const g = [];
|
|
2331
|
+
for (const d of r) {
|
|
2332
|
+
const v = i.querySelector(`[data-node-type="${d.type}"]`);
|
|
2333
|
+
if (!v) continue;
|
|
2334
|
+
const f = n.registerDndSource(v, () => ({
|
|
2335
|
+
id: W(),
|
|
2240
2336
|
type: d.type,
|
|
2241
2337
|
label: d.label,
|
|
2242
2338
|
position: { x: 0, y: 0 }
|
|
2243
2339
|
}));
|
|
2244
|
-
|
|
2340
|
+
g.push(f);
|
|
2245
2341
|
}
|
|
2246
2342
|
a(() => {
|
|
2247
|
-
for (const d of
|
|
2343
|
+
for (const d of g) d();
|
|
2248
2344
|
});
|
|
2249
2345
|
},
|
|
2250
2346
|
{ flush: "post" }
|
|
2251
|
-
), (n,
|
|
2252
|
-
|
|
2347
|
+
), (n, r) => (M(), S("div", Yt, [
|
|
2348
|
+
B("div", {
|
|
2253
2349
|
ref_key: "listRef",
|
|
2254
2350
|
ref: t,
|
|
2255
2351
|
class: "flow-canvas-node-palette__list"
|
|
2256
2352
|
}, [
|
|
2257
|
-
(
|
|
2258
|
-
key:
|
|
2353
|
+
(M(!0), S(pe, null, Pe(o.value, (i) => (M(), S("div", {
|
|
2354
|
+
key: i.type,
|
|
2259
2355
|
class: "flow-canvas-node-palette__item",
|
|
2260
|
-
"data-node-type":
|
|
2356
|
+
"data-node-type": i.type
|
|
2261
2357
|
}, [
|
|
2262
|
-
|
|
2358
|
+
i.icon ? (M(), S("i", {
|
|
2263
2359
|
key: 0,
|
|
2264
|
-
class:
|
|
2265
|
-
}, null, 2)) :
|
|
2266
|
-
|
|
2267
|
-
], 8,
|
|
2360
|
+
class: ee([i.icon, "flow-canvas-node-palette__item-icon"])
|
|
2361
|
+
}, null, 2)) : U("", !0),
|
|
2362
|
+
B("span", Zt, me(i.label), 1)
|
|
2363
|
+
], 8, Kt))), 128))
|
|
2268
2364
|
], 512)
|
|
2269
2365
|
]));
|
|
2270
2366
|
}
|
|
2271
|
-
}),
|
|
2367
|
+
}), eo = /* @__PURE__ */ he(Jt, [["__scopeId", "data-v-300314b7"]]), to = { class: "flow-canvas-layout" }, oo = { class: "flow-canvas-layout__main" }, no = { class: "flow-canvas-layout__content" }, so = {
|
|
2272
2368
|
key: 0,
|
|
2273
2369
|
class: "flow-canvas-layout__footer"
|
|
2274
|
-
},
|
|
2370
|
+
}, io = /* @__PURE__ */ ge({
|
|
2275
2371
|
__name: "canvas-layout",
|
|
2276
2372
|
props: {
|
|
2277
2373
|
sidebarCollapsed: { type: Boolean, default: !1 },
|
|
@@ -2283,36 +2379,33 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
|
|
|
2283
2379
|
},
|
|
2284
2380
|
emits: ["update:sidebarCollapsed"],
|
|
2285
2381
|
setup(s) {
|
|
2286
|
-
return (e, t) => (
|
|
2287
|
-
!s.hideSidebar && (e.$slots.sidebar || s.editor) ? (
|
|
2382
|
+
return (e, t) => (M(), S("div", to, [
|
|
2383
|
+
!s.hideSidebar && (e.$slots.sidebar || s.editor) ? (M(), S("aside", {
|
|
2288
2384
|
key: 0,
|
|
2289
|
-
class:
|
|
2290
|
-
style:
|
|
2385
|
+
class: ee(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
|
|
2386
|
+
style: _e({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
|
|
2291
2387
|
}, [
|
|
2292
|
-
|
|
2293
|
-
s.editor ? (
|
|
2388
|
+
ke(e.$slots, "sidebar", {}, () => [
|
|
2389
|
+
s.editor ? (M(), De(eo, {
|
|
2294
2390
|
key: 0,
|
|
2295
2391
|
editor: s.editor,
|
|
2296
2392
|
items: s.paletteItems
|
|
2297
|
-
}, null, 8, ["editor", "items"])) :
|
|
2393
|
+
}, null, 8, ["editor", "items"])) : U("", !0)
|
|
2298
2394
|
], !0)
|
|
2299
|
-
], 6)) :
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2395
|
+
], 6)) : U("", !0),
|
|
2396
|
+
B("div", oo, [
|
|
2397
|
+
B("div", no, [
|
|
2398
|
+
ke(e.$slots, "default", {}, void 0, !0)
|
|
2303
2399
|
]),
|
|
2304
|
-
!s.hideFooter && e.$slots.footer ? (
|
|
2305
|
-
|
|
2306
|
-
])) :
|
|
2400
|
+
!s.hideFooter && e.$slots.footer ? (M(), S("div", so, [
|
|
2401
|
+
ke(e.$slots, "footer", {}, void 0, !0)
|
|
2402
|
+
])) : U("", !0)
|
|
2307
2403
|
])
|
|
2308
2404
|
]));
|
|
2309
2405
|
}
|
|
2310
|
-
}),
|
|
2311
|
-
function
|
|
2312
|
-
const e = new Set(s?.include), t = /* @__PURE__ */ new Set([
|
|
2313
|
-
...Zt.filter((a) => !e.has(a)),
|
|
2314
|
-
...s?.exclude ?? []
|
|
2315
|
-
]), o = [
|
|
2406
|
+
}), Do = /* @__PURE__ */ he(io, [["__scopeId", "data-v-26f35b6b"]]), ro = ["undo", "redo"];
|
|
2407
|
+
function ao(s) {
|
|
2408
|
+
const e = new Set(s?.include), t = /* @__PURE__ */ new Set([...ro.filter((a) => !e.has(a)), ...s?.exclude ?? []]), o = [
|
|
2316
2409
|
{
|
|
2317
2410
|
id: "undo",
|
|
2318
2411
|
type: "undo",
|
|
@@ -2370,7 +2463,7 @@ function Jt(s) {
|
|
|
2370
2463
|
description: "导出为图片",
|
|
2371
2464
|
order: 24
|
|
2372
2465
|
}
|
|
2373
|
-
],
|
|
2466
|
+
], r = [
|
|
2374
2467
|
{
|
|
2375
2468
|
id: "zoom-out",
|
|
2376
2469
|
type: "zoom-out",
|
|
@@ -2388,7 +2481,7 @@ function Jt(s) {
|
|
|
2388
2481
|
description: "放大画布",
|
|
2389
2482
|
order: 32
|
|
2390
2483
|
}
|
|
2391
|
-
],
|
|
2484
|
+
], i = [
|
|
2392
2485
|
{
|
|
2393
2486
|
id: "reset",
|
|
2394
2487
|
type: "reset",
|
|
@@ -2400,15 +2493,15 @@ function Jt(s) {
|
|
|
2400
2493
|
];
|
|
2401
2494
|
return [...[...o, ...n].filter(
|
|
2402
2495
|
(a) => !t.has(a.type)
|
|
2403
|
-
), ...
|
|
2496
|
+
), ...r, ...i];
|
|
2404
2497
|
}
|
|
2405
|
-
const
|
|
2498
|
+
const lo = { class: "flow-canvas-toolbar" }, co = {
|
|
2406
2499
|
key: 0,
|
|
2407
2500
|
class: "flow-canvas-toolbar__separator"
|
|
2408
|
-
},
|
|
2501
|
+
}, uo = { class: "flow-canvas-toolbar__group" }, fo = {
|
|
2409
2502
|
key: 0,
|
|
2410
2503
|
class: "flow-canvas-toolbar__zoom-display"
|
|
2411
|
-
},
|
|
2504
|
+
}, po = ["data-description", "disabled", "onClick"], go = ["textContent"], ho = /* @__PURE__ */ ge({
|
|
2412
2505
|
__name: "canvas-toolbar",
|
|
2413
2506
|
props: {
|
|
2414
2507
|
items: {},
|
|
@@ -2416,42 +2509,42 @@ const eo = { class: "flow-canvas-toolbar" }, to = {
|
|
|
2416
2509
|
editor: {}
|
|
2417
2510
|
},
|
|
2418
2511
|
setup(s) {
|
|
2419
|
-
const e = s, t =
|
|
2512
|
+
const e = s, t = F(() => e.items ? e.items : ao({ exclude: e.exclude })), o = O(1);
|
|
2420
2513
|
let n = null;
|
|
2421
|
-
|
|
2514
|
+
fe(
|
|
2422
2515
|
() => e.editor.api.value,
|
|
2423
|
-
(
|
|
2424
|
-
n?.(), n = null,
|
|
2425
|
-
o.value =
|
|
2516
|
+
(p) => {
|
|
2517
|
+
n?.(), n = null, p && (o.value = p.getZoom(), n = p.onGraphEvent("scale", () => {
|
|
2518
|
+
o.value = p.getZoom();
|
|
2426
2519
|
}));
|
|
2427
2520
|
},
|
|
2428
2521
|
{ immediate: !0 }
|
|
2429
|
-
),
|
|
2522
|
+
), et(() => {
|
|
2430
2523
|
n?.();
|
|
2431
2524
|
});
|
|
2432
|
-
const
|
|
2525
|
+
const r = F(() => `${Math.round(o.value * 100)}%`), i = F(() => e.editor.api.value ? {
|
|
2433
2526
|
api: e.editor.api.value,
|
|
2434
2527
|
flowModel: e.editor.flowModel.value,
|
|
2435
2528
|
history: e.editor.history,
|
|
2436
2529
|
mode: e.editor.mode.value
|
|
2437
2530
|
} : null);
|
|
2438
|
-
function l(
|
|
2439
|
-
return
|
|
2531
|
+
function l(p) {
|
|
2532
|
+
return p.visible === !1 ? !1 : typeof p.visible == "function" ? i.value ? p.visible(i.value) : !1 : !0;
|
|
2440
2533
|
}
|
|
2441
|
-
function a(
|
|
2442
|
-
return
|
|
2534
|
+
function a(p) {
|
|
2535
|
+
return p.type === "select" ? e.editor.selectionMode.value : !1;
|
|
2443
2536
|
}
|
|
2444
|
-
function
|
|
2445
|
-
return !
|
|
2537
|
+
function g(p) {
|
|
2538
|
+
return !i.value || p.disabled === !0 ? !0 : typeof p.disabled == "function" ? p.disabled(i.value) : p.type === "undo" ? !e.editor.history.canUndo.value : p.type === "redo" ? !e.editor.history.canRedo.value : !1;
|
|
2446
2539
|
}
|
|
2447
|
-
function d(
|
|
2448
|
-
if (!
|
|
2449
|
-
if (
|
|
2450
|
-
|
|
2540
|
+
function d(p) {
|
|
2541
|
+
if (!i.value || g(p)) return;
|
|
2542
|
+
if (p.onClick) {
|
|
2543
|
+
p.onClick(i.value);
|
|
2451
2544
|
return;
|
|
2452
2545
|
}
|
|
2453
|
-
const { api:
|
|
2454
|
-
switch (
|
|
2546
|
+
const { api: E } = i.value;
|
|
2547
|
+
switch (p.type) {
|
|
2455
2548
|
case "undo":
|
|
2456
2549
|
e.editor.history.undo();
|
|
2457
2550
|
break;
|
|
@@ -2459,23 +2552,23 @@ const eo = { class: "flow-canvas-toolbar" }, to = {
|
|
|
2459
2552
|
e.editor.history.redo();
|
|
2460
2553
|
break;
|
|
2461
2554
|
case "zoom-in":
|
|
2462
|
-
|
|
2555
|
+
E.zoomIn(), o.value = E.getZoom();
|
|
2463
2556
|
break;
|
|
2464
2557
|
case "zoom-out":
|
|
2465
|
-
|
|
2558
|
+
E.zoomOut(), o.value = E.getZoom();
|
|
2466
2559
|
break;
|
|
2467
2560
|
case "fit":
|
|
2468
|
-
|
|
2561
|
+
E.zoomToFit();
|
|
2469
2562
|
break;
|
|
2470
2563
|
case "reset":
|
|
2471
|
-
|
|
2564
|
+
E.zoomTo(1), E.scrollToOrigin(), o.value = 1;
|
|
2472
2565
|
break;
|
|
2473
2566
|
case "export":
|
|
2474
|
-
|
|
2475
|
-
const
|
|
2476
|
-
|
|
2477
|
-
}).catch((
|
|
2478
|
-
console.warn("[flow-canvas] Export failed:",
|
|
2567
|
+
E.exportAsImage().then((w) => {
|
|
2568
|
+
const N = URL.createObjectURL(w), m = document.createElement("a");
|
|
2569
|
+
m.href = N, m.download = "canvas-export.png", m.click(), URL.revokeObjectURL(N);
|
|
2570
|
+
}).catch((w) => {
|
|
2571
|
+
console.warn("[flow-canvas] Export failed:", w);
|
|
2479
2572
|
});
|
|
2480
2573
|
break;
|
|
2481
2574
|
case "select":
|
|
@@ -2484,94 +2577,94 @@ const eo = { class: "flow-canvas-toolbar" }, to = {
|
|
|
2484
2577
|
case "search":
|
|
2485
2578
|
case "auto-layout":
|
|
2486
2579
|
case "minimap":
|
|
2487
|
-
console.warn(`[flow-canvas] "${
|
|
2580
|
+
console.warn(`[flow-canvas] "${p.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
|
|
2488
2581
|
break;
|
|
2489
2582
|
default:
|
|
2490
|
-
|
|
2583
|
+
p.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${p.type}". Provide an onClick handler.`);
|
|
2491
2584
|
break;
|
|
2492
2585
|
}
|
|
2493
2586
|
}
|
|
2494
|
-
const
|
|
2495
|
-
const
|
|
2496
|
-
for (const
|
|
2497
|
-
const
|
|
2498
|
-
|
|
2587
|
+
const v = F(() => t.value.filter(l)), f = F(() => {
|
|
2588
|
+
const p = /* @__PURE__ */ new Map(), E = [];
|
|
2589
|
+
for (const w of v.value) {
|
|
2590
|
+
const N = w.group ?? "default";
|
|
2591
|
+
p.has(N) || (p.set(N, []), E.push(N)), p.get(N).push(w);
|
|
2499
2592
|
}
|
|
2500
|
-
return
|
|
2593
|
+
return E.map((w) => ({ name: w, items: p.get(w) })).filter((w) => w.items.length > 0);
|
|
2501
2594
|
});
|
|
2502
|
-
return (
|
|
2503
|
-
(
|
|
2504
|
-
key:
|
|
2595
|
+
return (p, E) => (M(), S("div", lo, [
|
|
2596
|
+
(M(!0), S(pe, null, Pe(f.value, (w, N) => (M(), S(pe, {
|
|
2597
|
+
key: w.name
|
|
2505
2598
|
}, [
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
(
|
|
2509
|
-
key:
|
|
2599
|
+
N > 0 ? (M(), S("div", co)) : U("", !0),
|
|
2600
|
+
B("div", uo, [
|
|
2601
|
+
(M(!0), S(pe, null, Pe(w.items, (m) => (M(), S(pe, {
|
|
2602
|
+
key: m.id
|
|
2510
2603
|
}, [
|
|
2511
|
-
|
|
2604
|
+
m.type === "zoom-display" ? (M(), S("span", fo, me(r.value), 1)) : (M(), S("button", {
|
|
2512
2605
|
key: 1,
|
|
2513
|
-
class:
|
|
2514
|
-
"data-description":
|
|
2515
|
-
disabled:
|
|
2516
|
-
onClick: (
|
|
2606
|
+
class: ee(["flow-canvas-toolbar__btn", { "is-disabled": g(m), "is-active": a(m) }]),
|
|
2607
|
+
"data-description": m.description,
|
|
2608
|
+
disabled: g(m),
|
|
2609
|
+
onClick: (D) => d(m)
|
|
2517
2610
|
}, [
|
|
2518
|
-
|
|
2611
|
+
m.component ? (M(), De(dt(m.component), { key: 0 })) : m.icon ? (M(), S("i", {
|
|
2519
2612
|
key: 1,
|
|
2520
|
-
class:
|
|
2521
|
-
}, null, 2)) : (
|
|
2613
|
+
class: ee(m.icon)
|
|
2614
|
+
}, null, 2)) : (M(), S("span", {
|
|
2522
2615
|
key: 2,
|
|
2523
2616
|
class: "flow-canvas-toolbar__text",
|
|
2524
|
-
textContent:
|
|
2525
|
-
}, null, 8,
|
|
2526
|
-
], 10,
|
|
2617
|
+
textContent: me(m.text ?? m.description ?? m.id)
|
|
2618
|
+
}, null, 8, go))
|
|
2619
|
+
], 10, po))
|
|
2527
2620
|
], 64))), 128))
|
|
2528
2621
|
])
|
|
2529
2622
|
], 64))), 128))
|
|
2530
2623
|
]));
|
|
2531
2624
|
}
|
|
2532
|
-
}),
|
|
2625
|
+
}), Po = /* @__PURE__ */ he(ho, [["__scopeId", "data-v-51b5c98a"]]), vo = { class: "flow-canvas-default-node__ep-label" }, yo = {
|
|
2533
2626
|
key: 1,
|
|
2534
2627
|
class: "flow-canvas-default-node__diamond"
|
|
2535
|
-
},
|
|
2628
|
+
}, mo = {
|
|
2536
2629
|
key: 2,
|
|
2537
2630
|
class: "flow-canvas-default-node__task-label"
|
|
2538
|
-
},
|
|
2631
|
+
}, bo = /* @__PURE__ */ ge({
|
|
2539
2632
|
__name: "default-node",
|
|
2540
2633
|
setup(s) {
|
|
2541
|
-
const t =
|
|
2634
|
+
const t = ct("getNode")?.(), o = F(() => t?.getData?.() ?? null), n = F(() => o.value?.label || o.value?.type || ""), r = {
|
|
2542
2635
|
start: "canvas-kaishi",
|
|
2543
2636
|
end: "canvas-stop",
|
|
2544
2637
|
"parallel-gateway": "canvas-bingxingwangguan",
|
|
2545
2638
|
"branch-gateway": "canvas-fenzhiwangguan",
|
|
2546
2639
|
"converge-gateway": "canvas-huijuwangguan",
|
|
2547
2640
|
"conditional-parallel-gateway": "canvas-tiaojianbingxingwangguan"
|
|
2548
|
-
},
|
|
2641
|
+
}, i = /* @__PURE__ */ new Set(["start", "end"]), l = /* @__PURE__ */ new Set([
|
|
2549
2642
|
"parallel-gateway",
|
|
2550
2643
|
"branch-gateway",
|
|
2551
2644
|
"converge-gateway",
|
|
2552
2645
|
"conditional-parallel-gateway"
|
|
2553
|
-
]), a =
|
|
2646
|
+
]), a = F(() => {
|
|
2554
2647
|
const d = o.value?.type ?? "";
|
|
2555
|
-
return
|
|
2556
|
-
}),
|
|
2557
|
-
return (d,
|
|
2558
|
-
class:
|
|
2648
|
+
return i.has(d) ? "endpoint" : l.has(d) ? "gateway" : "task";
|
|
2649
|
+
}), g = F(() => r[o.value?.type ?? ""] ?? "");
|
|
2650
|
+
return (d, v) => (M(), S("div", {
|
|
2651
|
+
class: ee(["flow-canvas-default-node", `is-${a.value}`])
|
|
2559
2652
|
}, [
|
|
2560
|
-
a.value === "endpoint" ? (
|
|
2561
|
-
|
|
2653
|
+
a.value === "endpoint" ? (M(), S(pe, { key: 0 }, [
|
|
2654
|
+
g.value ? (M(), S("i", {
|
|
2562
2655
|
key: 0,
|
|
2563
|
-
class:
|
|
2564
|
-
}, null, 2)) :
|
|
2565
|
-
|
|
2566
|
-
], 64)) : a.value === "gateway" ? (
|
|
2567
|
-
|
|
2656
|
+
class: ee([["flow-canvas-icon", g.value], "flow-canvas-default-node__ep-icon"])
|
|
2657
|
+
}, null, 2)) : U("", !0),
|
|
2658
|
+
B("span", vo, me(n.value), 1)
|
|
2659
|
+
], 64)) : a.value === "gateway" ? (M(), S("div", yo, [
|
|
2660
|
+
g.value ? (M(), S("i", {
|
|
2568
2661
|
key: 0,
|
|
2569
|
-
class:
|
|
2570
|
-
}, null, 2)) :
|
|
2571
|
-
])) : (
|
|
2662
|
+
class: ee([["flow-canvas-icon", g.value], "flow-canvas-default-node__gw-icon"])
|
|
2663
|
+
}, null, 2)) : U("", !0)
|
|
2664
|
+
])) : (M(), S("span", mo, me(n.value), 1))
|
|
2572
2665
|
], 2));
|
|
2573
2666
|
}
|
|
2574
|
-
}),
|
|
2667
|
+
}), wo = /* @__PURE__ */ he(bo, [["__scopeId", "data-v-c88cdae7"]]), xo = {
|
|
2575
2668
|
start: { label: "开始", icon: "flow-canvas-icon canvas-kaishi", width: 88, height: 40 },
|
|
2576
2669
|
end: { label: "结束", icon: "flow-canvas-icon canvas-stop", width: 88, height: 40 },
|
|
2577
2670
|
empty: { label: "空节点", icon: "flow-canvas-icon canvas-jiedi", width: 240, height: 48 },
|
|
@@ -2584,11 +2677,11 @@ const eo = { class: "flow-canvas-toolbar" }, to = {
|
|
|
2584
2677
|
width: 64,
|
|
2585
2678
|
height: 64
|
|
2586
2679
|
}
|
|
2587
|
-
},
|
|
2680
|
+
}, Ze = (s, e) => ({
|
|
2588
2681
|
stroke: e.hovered ? "#3a84ff" : "#abb5cc",
|
|
2589
2682
|
strokeWidth: 2
|
|
2590
2683
|
});
|
|
2591
|
-
function
|
|
2684
|
+
function Je() {
|
|
2592
2685
|
return {
|
|
2593
2686
|
attrs: {
|
|
2594
2687
|
line: {
|
|
@@ -2599,67 +2692,67 @@ function qe() {
|
|
|
2599
2692
|
}
|
|
2600
2693
|
};
|
|
2601
2694
|
}
|
|
2602
|
-
function
|
|
2695
|
+
function ko() {
|
|
2603
2696
|
return {
|
|
2604
2697
|
manhattan: {
|
|
2605
2698
|
router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
|
|
2606
2699
|
connector: { name: "rounded", args: { radius: 8 } },
|
|
2607
|
-
style:
|
|
2608
|
-
x6EdgeConfig:
|
|
2700
|
+
style: Ze,
|
|
2701
|
+
x6EdgeConfig: Je()
|
|
2609
2702
|
},
|
|
2610
2703
|
bezier: {
|
|
2611
2704
|
connector: { name: "smooth" },
|
|
2612
|
-
style:
|
|
2613
|
-
x6EdgeConfig:
|
|
2705
|
+
style: Ze,
|
|
2706
|
+
x6EdgeConfig: Je()
|
|
2614
2707
|
}
|
|
2615
2708
|
};
|
|
2616
2709
|
}
|
|
2617
|
-
function
|
|
2618
|
-
const e = s?.nodeTypes ??
|
|
2619
|
-
for (const [
|
|
2620
|
-
const a = l.width ?? 150,
|
|
2621
|
-
t[
|
|
2622
|
-
component:
|
|
2623
|
-
getSize: () => ({ width: a, height:
|
|
2624
|
-
getPorts: () =>
|
|
2710
|
+
function _o(s) {
|
|
2711
|
+
const e = s?.nodeTypes ?? xo, t = {}, o = [];
|
|
2712
|
+
for (const [i, l] of Object.entries(e)) {
|
|
2713
|
+
const a = l.width ?? 150, g = l.height ?? 50;
|
|
2714
|
+
t[i] = {
|
|
2715
|
+
component: wo,
|
|
2716
|
+
getSize: () => ({ width: a, height: g }),
|
|
2717
|
+
getPorts: () => nt()
|
|
2625
2718
|
}, o.push({
|
|
2626
|
-
type:
|
|
2627
|
-
label: l.label ??
|
|
2719
|
+
type: i,
|
|
2720
|
+
label: l.label ?? i,
|
|
2628
2721
|
icon: l.icon
|
|
2629
2722
|
});
|
|
2630
2723
|
}
|
|
2631
2724
|
const n = {
|
|
2632
|
-
...
|
|
2725
|
+
...ko(),
|
|
2633
2726
|
...s?.edgeTypes
|
|
2634
|
-
},
|
|
2727
|
+
}, r = s?.defaultEdgeType ?? "manhattan";
|
|
2635
2728
|
return {
|
|
2636
|
-
schema: { nodeTypes: t, defaultEdgeType:
|
|
2729
|
+
schema: { nodeTypes: t, defaultEdgeType: r, edgeTypes: n },
|
|
2637
2730
|
paletteItems: o
|
|
2638
2731
|
};
|
|
2639
2732
|
}
|
|
2640
|
-
function
|
|
2733
|
+
function Ao(s) {
|
|
2641
2734
|
return {
|
|
2642
2735
|
name: "connection-validator",
|
|
2643
2736
|
priority: 10,
|
|
2644
2737
|
transformCommand(e, t, o) {
|
|
2645
2738
|
for (const n of e.commands) {
|
|
2646
2739
|
if (n.type !== "edge.add" && n.type !== "edge.reconnect") continue;
|
|
2647
|
-
const
|
|
2648
|
-
if (!
|
|
2649
|
-
const a =
|
|
2650
|
-
if (!a || !
|
|
2651
|
-
const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId,
|
|
2652
|
-
flowModel:
|
|
2740
|
+
const r = o.flowModel.value, i = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, l = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
|
|
2741
|
+
if (!i || !l) continue;
|
|
2742
|
+
const a = r.nodes[i], g = r.nodes[l];
|
|
2743
|
+
if (!a || !g) continue;
|
|
2744
|
+
const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, v = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, f = d ? a.ports?.find((m) => m.id === d) : void 0, p = v ? g.ports?.find((m) => m.id === v) : void 0, E = n.type === "edge.reconnect" ? n.edgeId : void 0, w = Object.values(r.edges).filter((m) => m.id !== E), N = s({
|
|
2745
|
+
flowModel: r,
|
|
2653
2746
|
sourceNode: a,
|
|
2654
|
-
targetNode:
|
|
2655
|
-
sourcePort:
|
|
2656
|
-
targetPort:
|
|
2657
|
-
existingEdges:
|
|
2747
|
+
targetNode: g,
|
|
2748
|
+
sourcePort: f,
|
|
2749
|
+
targetPort: p,
|
|
2750
|
+
existingEdges: w
|
|
2658
2751
|
});
|
|
2659
|
-
if (!
|
|
2752
|
+
if (!N.valid)
|
|
2660
2753
|
return {
|
|
2661
2754
|
rejected: !0,
|
|
2662
|
-
reason:
|
|
2755
|
+
reason: N.reason ?? "Connection validation failed",
|
|
2663
2756
|
code: "validation_failed"
|
|
2664
2757
|
};
|
|
2665
2758
|
}
|
|
@@ -2667,36 +2760,36 @@ function Eo(s) {
|
|
|
2667
2760
|
}
|
|
2668
2761
|
};
|
|
2669
2762
|
}
|
|
2670
|
-
function
|
|
2763
|
+
function To(s) {
|
|
2671
2764
|
const { rubberband: e = !0, multiple: t = !0, movable: o = !0 } = s ?? {};
|
|
2672
2765
|
return {
|
|
2673
2766
|
name: "selection",
|
|
2674
2767
|
priority: 90,
|
|
2675
2768
|
async attachRuntime(n) {
|
|
2676
|
-
const { Selection:
|
|
2769
|
+
const { Selection: r } = await import("@antv/x6-plugin-selection");
|
|
2677
2770
|
n.graph.use(
|
|
2678
|
-
new
|
|
2771
|
+
new r({
|
|
2679
2772
|
enabled: !0,
|
|
2680
2773
|
rubberband: e,
|
|
2681
2774
|
multiple: t,
|
|
2682
2775
|
movable: o,
|
|
2683
2776
|
showNodeSelectionBox: !0,
|
|
2684
|
-
filter: (
|
|
2777
|
+
filter: (i) => !(i.isNode() && (!n.graph.isRubberbandEnabled?.() || (i.getData?.() ?? {})._selectable === !1))
|
|
2685
2778
|
})
|
|
2686
2779
|
);
|
|
2687
2780
|
}
|
|
2688
2781
|
};
|
|
2689
2782
|
}
|
|
2690
|
-
function
|
|
2783
|
+
function Ro(s) {
|
|
2691
2784
|
const { tolerance: e = 10, color: t = "#3a84ff" } = s ?? {};
|
|
2692
2785
|
let o = null;
|
|
2693
2786
|
return {
|
|
2694
2787
|
name: "snapline",
|
|
2695
2788
|
priority: 90,
|
|
2696
2789
|
async attachRuntime(n) {
|
|
2697
|
-
const { Snapline:
|
|
2790
|
+
const { Snapline: r } = await import("@antv/x6-plugin-snapline");
|
|
2698
2791
|
n.graph.use(
|
|
2699
|
-
new
|
|
2792
|
+
new r({
|
|
2700
2793
|
enabled: !0,
|
|
2701
2794
|
tolerance: e,
|
|
2702
2795
|
className: "flow-canvas-snapline"
|
|
@@ -2708,7 +2801,7 @@ function Mo(s) {
|
|
|
2708
2801
|
}
|
|
2709
2802
|
};
|
|
2710
2803
|
}
|
|
2711
|
-
function
|
|
2804
|
+
function $o(s) {
|
|
2712
2805
|
let e = null;
|
|
2713
2806
|
return {
|
|
2714
2807
|
name: "minimap",
|
|
@@ -2746,7 +2839,7 @@ function No(s) {
|
|
|
2746
2839
|
}
|
|
2747
2840
|
};
|
|
2748
2841
|
}
|
|
2749
|
-
function
|
|
2842
|
+
function Lo() {
|
|
2750
2843
|
let s = null, e = 0;
|
|
2751
2844
|
return {
|
|
2752
2845
|
name: "clipboard",
|
|
@@ -2754,29 +2847,29 @@ function So() {
|
|
|
2754
2847
|
onKeyboardShortcut(t, o) {
|
|
2755
2848
|
const n = t.metaKey || t.ctrlKey;
|
|
2756
2849
|
if (n && t.key === "c") {
|
|
2757
|
-
const
|
|
2758
|
-
if (!
|
|
2759
|
-
const
|
|
2850
|
+
const r = o.graph.getSelectedCells?.() ?? [];
|
|
2851
|
+
if (!r.length) return !1;
|
|
2852
|
+
const i = o.flowModel.value, l = new Set(r.filter((d) => d.isNode()).map((d) => d.id)), a = [...l].map((d) => i.nodes[d]).filter(Boolean);
|
|
2760
2853
|
if (!a.length) return !1;
|
|
2761
|
-
const
|
|
2854
|
+
const g = Object.values(i.edges).filter(
|
|
2762
2855
|
(d) => l.has(d.source.nodeId) && l.has(d.target.nodeId)
|
|
2763
2856
|
);
|
|
2764
|
-
return s = { nodes: a, edges:
|
|
2857
|
+
return s = { nodes: a, edges: g }, e = 0, !0;
|
|
2765
2858
|
}
|
|
2766
2859
|
if (n && t.key === "v") {
|
|
2767
2860
|
if (!s?.nodes.length) return !1;
|
|
2768
2861
|
e++;
|
|
2769
|
-
const
|
|
2862
|
+
const r = e * 30, i = /* @__PURE__ */ new Map(), l = [];
|
|
2770
2863
|
for (const a of s.nodes) {
|
|
2771
|
-
const
|
|
2772
|
-
|
|
2864
|
+
const g = `${a.id}_cp${W().slice(0, 6)}`;
|
|
2865
|
+
i.set(a.id, g), l.push({
|
|
2773
2866
|
type: "node.add",
|
|
2774
2867
|
node: {
|
|
2775
2868
|
...a,
|
|
2776
|
-
id:
|
|
2869
|
+
id: g,
|
|
2777
2870
|
position: {
|
|
2778
|
-
x: a.position.x +
|
|
2779
|
-
y: a.position.y +
|
|
2871
|
+
x: a.position.x + r,
|
|
2872
|
+
y: a.position.y + r
|
|
2780
2873
|
},
|
|
2781
2874
|
payload: a.payload ? { ...a.payload } : {},
|
|
2782
2875
|
extensions: a.extensions ? { ...a.extensions } : void 0
|
|
@@ -2784,21 +2877,21 @@ function So() {
|
|
|
2784
2877
|
});
|
|
2785
2878
|
}
|
|
2786
2879
|
for (const a of s.edges) {
|
|
2787
|
-
const
|
|
2788
|
-
!
|
|
2880
|
+
const g = i.get(a.source.nodeId), d = i.get(a.target.nodeId);
|
|
2881
|
+
!g || !d || l.push({
|
|
2789
2882
|
type: "edge.add",
|
|
2790
2883
|
edge: {
|
|
2791
2884
|
...a,
|
|
2792
|
-
id: `${a.id}_cp${
|
|
2793
|
-
source: { ...a.source, nodeId:
|
|
2885
|
+
id: `${a.id}_cp${W().slice(0, 6)}`,
|
|
2886
|
+
source: { ...a.source, nodeId: g },
|
|
2794
2887
|
target: { ...a.target, nodeId: d },
|
|
2795
|
-
labels: a.labels?.map((
|
|
2888
|
+
labels: a.labels?.map((v) => ({ ...v, id: `${v.id}_cp${W().slice(0, 6)}` })),
|
|
2796
2889
|
payload: a.payload ? { ...a.payload } : {}
|
|
2797
2890
|
}
|
|
2798
2891
|
});
|
|
2799
2892
|
}
|
|
2800
2893
|
return l.length && o.executeCommand({
|
|
2801
|
-
id:
|
|
2894
|
+
id: W(),
|
|
2802
2895
|
source: "user:keyboard",
|
|
2803
2896
|
label: "粘贴",
|
|
2804
2897
|
timestamp: Date.now(),
|
|
@@ -2810,26 +2903,26 @@ function So() {
|
|
|
2810
2903
|
};
|
|
2811
2904
|
}
|
|
2812
2905
|
export {
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2906
|
+
ne as CanvasConstraintError,
|
|
2907
|
+
Do as CanvasLayout,
|
|
2908
|
+
eo as CanvasNodePalette,
|
|
2909
|
+
So as CanvasRuntime,
|
|
2910
|
+
pt as CanvasSchemaError,
|
|
2911
|
+
Po as CanvasToolbar,
|
|
2912
|
+
wo as DefaultNode,
|
|
2913
|
+
Ft as NodeActionsToolbar,
|
|
2914
|
+
Wt as NodeQuickAddPopover,
|
|
2915
|
+
Ge as applyCanvasCommand,
|
|
2916
|
+
Lo as clipboardPlugin,
|
|
2917
|
+
Ao as connectionValidatorPlugin,
|
|
2918
|
+
ko as createBuiltinEdgeTypes,
|
|
2919
|
+
Nt as createCanvasHistory,
|
|
2920
|
+
_o as createDefaultSchema,
|
|
2921
|
+
ao as createDefaultToolbarItems,
|
|
2922
|
+
Mo as createEmptyFlowModel,
|
|
2923
|
+
W as generateId,
|
|
2924
|
+
$o as minimapPlugin,
|
|
2925
|
+
To as selectionPlugin,
|
|
2926
|
+
Ro as snaplinePlugin,
|
|
2927
|
+
No as useCanvasEditor
|
|
2835
2928
|
};
|