@miragon/team-topologies-renderer 0.12.0 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -2
- package/dist/TtBaseViewer.d.ts +7 -1
- package/dist/TtBaseViewer.d.ts.map +1 -1
- package/dist/collaborative/CollaborativeTeamTopologies.d.ts +5 -1
- package/dist/collaborative/CollaborativeTeamTopologies.d.ts.map +1 -1
- package/dist/draw/label-layout.d.ts +7 -0
- package/dist/draw/label-layout.d.ts.map +1 -1
- package/dist/index.js +376 -343
- package/dist/index.js.map +1 -1
- package/dist/io/TtViewport.d.ts +19 -2
- package/dist/io/TtViewport.d.ts.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -7,55 +7,55 @@ import { append as x, attr as S, create as C } from "tiny-svg";
|
|
|
7
7
|
import ie from "diagram-js/lib/features/selection";
|
|
8
8
|
import ae from "diagram-js/lib/navigation/zoomscroll";
|
|
9
9
|
import oe from "diagram-js/lib/navigation/movecanvas";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import { MODELER_API_VERSION as
|
|
10
|
+
import w from "diagram-js/lib/features/lasso-tool";
|
|
11
|
+
import se from "diagram-js/lib/features/modeling";
|
|
12
|
+
import ce from "diagram-js/lib/features/move";
|
|
13
|
+
import le from "diagram-js/lib/features/outline";
|
|
14
|
+
import ue from "diagram-js/lib/features/resize";
|
|
15
|
+
import de from "diagram-js/lib/layout/BaseLayouter";
|
|
16
|
+
import fe from "diagram-js/lib/features/rules";
|
|
17
|
+
import pe from "diagram-js/lib/features/rules/RuleProvider";
|
|
18
|
+
import me from "diagram-js/lib/command/CommandInterceptor";
|
|
19
|
+
import he from "diagram-js/lib/features/palette";
|
|
20
|
+
import ge from "diagram-js/lib/features/create";
|
|
21
|
+
import _e from "diagram-js/lib/features/connect";
|
|
22
|
+
import ve from "diagram-js/lib/features/connection-preview";
|
|
23
|
+
import ye from "diagram-js/lib/features/context-pad";
|
|
24
|
+
import be from "diagram-js/lib/features/copy-paste";
|
|
25
|
+
import xe from "diagram-js/lib/features/copy-paste/CopyPaste.js";
|
|
26
|
+
import { MODELER_API_VERSION as Se } from "@miragon/modeler-api";
|
|
27
27
|
//#region src/model/di-types.ts
|
|
28
|
-
var
|
|
28
|
+
var Ce = /* @__PURE__ */ new Set([
|
|
29
29
|
"team",
|
|
30
30
|
"interaction",
|
|
31
31
|
"flow",
|
|
32
32
|
"annotation"
|
|
33
33
|
]);
|
|
34
|
-
function w(e) {
|
|
35
|
-
return typeof e == "object" && e ? e.ttKind : void 0;
|
|
36
|
-
}
|
|
37
34
|
function T(e) {
|
|
38
|
-
|
|
39
|
-
return t !== void 0 && we.has(t);
|
|
35
|
+
return typeof e == "object" && e ? e.ttKind : void 0;
|
|
40
36
|
}
|
|
41
37
|
function E(e) {
|
|
42
|
-
|
|
38
|
+
let t = T(e);
|
|
39
|
+
return t !== void 0 && Ce.has(t);
|
|
43
40
|
}
|
|
44
41
|
function D(e) {
|
|
45
|
-
return
|
|
42
|
+
return T(e) === "team";
|
|
46
43
|
}
|
|
47
44
|
function O(e) {
|
|
48
|
-
return
|
|
45
|
+
return T(e) === "interaction";
|
|
49
46
|
}
|
|
50
47
|
function k(e) {
|
|
51
|
-
return
|
|
48
|
+
return T(e) === "flow";
|
|
52
49
|
}
|
|
53
50
|
function A(e) {
|
|
54
|
-
return
|
|
51
|
+
return T(e) === "annotation";
|
|
52
|
+
}
|
|
53
|
+
function j(e) {
|
|
54
|
+
return T(e) === "association";
|
|
55
55
|
}
|
|
56
56
|
//#endregion
|
|
57
57
|
//#region src/theme/palette.ts
|
|
58
|
-
var
|
|
58
|
+
var M = {
|
|
59
59
|
blau: "#335DE5",
|
|
60
60
|
blauLink: "#2B50D4",
|
|
61
61
|
blauHell: "#6B8AFF",
|
|
@@ -79,31 +79,31 @@ var j = {
|
|
|
79
79
|
dangerHell: "#FB6D73",
|
|
80
80
|
infoHell: "#6B8AFF",
|
|
81
81
|
gradientBrand: "linear-gradient(120deg, #335DE5 30%, #00E676)"
|
|
82
|
-
},
|
|
83
|
-
"--cd-blau":
|
|
84
|
-
"--cd-gruen":
|
|
85
|
-
"--cd-grau":
|
|
86
|
-
"--cd-schwarz":
|
|
87
|
-
"--cd-weiss":
|
|
88
|
-
"--cd-blau-link":
|
|
89
|
-
"--cd-blau-hell":
|
|
90
|
-
"--cd-linie":
|
|
91
|
-
"--cd-kontur":
|
|
92
|
-
"--cd-text-leise":
|
|
93
|
-
"--cd-success":
|
|
94
|
-
"--cd-success-soft":
|
|
95
|
-
"--cd-warning":
|
|
96
|
-
"--cd-warning-soft":
|
|
97
|
-
"--cd-danger":
|
|
98
|
-
"--cd-danger-soft":
|
|
99
|
-
"--cd-info":
|
|
100
|
-
"--cd-info-soft":
|
|
101
|
-
"--cd-success-hell":
|
|
102
|
-
"--cd-warning-hell":
|
|
103
|
-
"--cd-danger-hell":
|
|
104
|
-
"--cd-info-hell":
|
|
105
|
-
"--cd-gradient-brand":
|
|
106
|
-
},
|
|
82
|
+
}, we = {
|
|
83
|
+
"--cd-blau": M.blau,
|
|
84
|
+
"--cd-gruen": M.gruen,
|
|
85
|
+
"--cd-grau": M.grau,
|
|
86
|
+
"--cd-schwarz": M.schwarz,
|
|
87
|
+
"--cd-weiss": M.weiss,
|
|
88
|
+
"--cd-blau-link": M.blauLink,
|
|
89
|
+
"--cd-blau-hell": M.blauHell,
|
|
90
|
+
"--cd-linie": M.linie,
|
|
91
|
+
"--cd-kontur": M.kontur,
|
|
92
|
+
"--cd-text-leise": M.textLeise,
|
|
93
|
+
"--cd-success": M.success,
|
|
94
|
+
"--cd-success-soft": M.successSoft,
|
|
95
|
+
"--cd-warning": M.warning,
|
|
96
|
+
"--cd-warning-soft": M.warningSoft,
|
|
97
|
+
"--cd-danger": M.danger,
|
|
98
|
+
"--cd-danger-soft": M.dangerSoft,
|
|
99
|
+
"--cd-info": M.info,
|
|
100
|
+
"--cd-info-soft": M.infoSoft,
|
|
101
|
+
"--cd-success-hell": M.successHell,
|
|
102
|
+
"--cd-warning-hell": M.warningHell,
|
|
103
|
+
"--cd-danger-hell": M.dangerHell,
|
|
104
|
+
"--cd-info-hell": M.infoHell,
|
|
105
|
+
"--cd-gradient-brand": M.gradientBrand
|
|
106
|
+
}, N = 40, P = "http://www.w3.org/2000/svg", Te = [
|
|
107
107
|
".djs-outline",
|
|
108
108
|
".djs-resizer",
|
|
109
109
|
".djs-selection-outline",
|
|
@@ -111,40 +111,40 @@ var j = {
|
|
|
111
111
|
".djs-dragger",
|
|
112
112
|
".djs-bendpoint",
|
|
113
113
|
".djs-segment-dragger"
|
|
114
|
-
].join(", "),
|
|
114
|
+
].join(", "), Ee = ["selected", "hover"], De = [
|
|
115
115
|
"class",
|
|
116
116
|
"tabindex",
|
|
117
117
|
"role",
|
|
118
118
|
"aria-roledescription",
|
|
119
119
|
"aria-label"
|
|
120
120
|
];
|
|
121
|
-
function
|
|
121
|
+
function Oe(e, t) {
|
|
122
122
|
let n = e.getContainer().querySelector(":scope > svg");
|
|
123
123
|
if (!n) throw Error("No SVG found in the canvas container.");
|
|
124
124
|
let r = Infinity, i = Infinity, a = -Infinity, o = -Infinity;
|
|
125
125
|
for (let e of t.getAll()) {
|
|
126
|
-
if (!
|
|
126
|
+
if (!E(e)) continue;
|
|
127
127
|
let t = e;
|
|
128
128
|
r = Math.min(r, t.x), i = Math.min(i, t.y), a = Math.max(a, t.x + t.width), o = Math.max(o, t.y + t.height);
|
|
129
129
|
}
|
|
130
130
|
Number.isFinite(r) || (r = 0, i = 0, a = 100, o = 100);
|
|
131
|
-
let s = r -
|
|
132
|
-
for (let e of
|
|
133
|
-
for (let e of d.querySelectorAll(
|
|
134
|
-
for (let e of d.querySelectorAll(
|
|
135
|
-
d.setAttribute("xmlns",
|
|
131
|
+
let s = r - N, c = i - N, l = a - r + 80, u = o - i + 80, d = n.cloneNode(!0);
|
|
132
|
+
for (let e of De) d.removeAttribute(e);
|
|
133
|
+
for (let e of d.querySelectorAll(Te)) e.remove();
|
|
134
|
+
for (let e of d.querySelectorAll(Ee.map((e) => `.${e}`).join())) e.classList.remove(...Ee);
|
|
135
|
+
d.setAttribute("xmlns", P), d.setAttribute("viewBox", `${s} ${c} ${l} ${u}`), d.setAttribute("width", String(Math.round(l))), d.setAttribute("height", String(Math.round(u)));
|
|
136
136
|
let f = d.querySelector(".viewport");
|
|
137
137
|
f && f.removeAttribute("transform");
|
|
138
|
-
let p = d.ownerDocument.createElementNS(
|
|
139
|
-
return p.setAttribute("class", "tt-export-paper"), p.setAttribute("x", String(s)), p.setAttribute("y", String(c)), p.setAttribute("width", String(l)), p.setAttribute("height", String(u)), p.setAttribute("fill",
|
|
138
|
+
let p = d.ownerDocument.createElementNS(P, "rect");
|
|
139
|
+
return p.setAttribute("class", "tt-export-paper"), p.setAttribute("x", String(s)), p.setAttribute("y", String(c)), p.setAttribute("width", String(l)), p.setAttribute("height", String(u)), p.setAttribute("fill", M.weiss), d.insertBefore(p, d.firstChild), { svg: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" + new XMLSerializer().serializeToString(d) };
|
|
140
140
|
}
|
|
141
141
|
//#endregion
|
|
142
142
|
//#region src/io/types.ts
|
|
143
|
-
var
|
|
144
|
-
function
|
|
143
|
+
var F = a, I = "tt-canvas-keyboard-focus";
|
|
144
|
+
function ke(e) {
|
|
145
145
|
return typeof e == "number" ? `${e}px` : e;
|
|
146
146
|
}
|
|
147
|
-
var
|
|
147
|
+
var Ae = class {
|
|
148
148
|
_diagram;
|
|
149
149
|
_container;
|
|
150
150
|
_options;
|
|
@@ -153,7 +153,7 @@ var Me = class {
|
|
|
153
153
|
}
|
|
154
154
|
_createContainer(e) {
|
|
155
155
|
let t = e.container ?? document.createElement("div");
|
|
156
|
-
return t.classList.add("tt-djs-container"), t.style.width =
|
|
156
|
+
return t.classList.add("tt-djs-container"), t.style.width = ke(e.width ?? "100%"), t.style.height = ke(e.height ?? (e.container ? "100%" : "600px")), t;
|
|
157
157
|
}
|
|
158
158
|
_ensureDiagram() {
|
|
159
159
|
if (!this._diagram) {
|
|
@@ -177,9 +177,9 @@ var Me = class {
|
|
|
177
177
|
let r = t.ownerDocument, i = !1, a = (e) => {
|
|
178
178
|
i = e.key === "Tab";
|
|
179
179
|
}, o = () => {
|
|
180
|
-
i = !1, n.classList.remove(
|
|
180
|
+
i = !1, n.classList.remove(I);
|
|
181
181
|
};
|
|
182
|
-
r.addEventListener("keydown", a, !0), r.addEventListener("pointerdown", o, !0), n.addEventListener("focusin", () => n.classList.toggle(
|
|
182
|
+
r.addEventListener("keydown", a, !0), r.addEventListener("pointerdown", o, !0), n.addEventListener("focusin", () => n.classList.toggle(I, i)), n.addEventListener("focusout", () => n.classList.remove(I)), e.get("eventBus").on("diagram.destroy", () => {
|
|
183
183
|
r.removeEventListener("keydown", a, !0), r.removeEventListener("pointerdown", o, !0);
|
|
184
184
|
});
|
|
185
185
|
}
|
|
@@ -207,6 +207,15 @@ var Me = class {
|
|
|
207
207
|
let e = this._ensureDiagram().get("ttViewport", !1);
|
|
208
208
|
e ? e.fit() : this.get("canvas").zoom("fit-viewport");
|
|
209
209
|
}
|
|
210
|
+
contentBounds() {
|
|
211
|
+
let e = this._diagram?.get("ttViewport", !1)?.contentBounds();
|
|
212
|
+
return e && {
|
|
213
|
+
x: e.minX,
|
|
214
|
+
y: e.minY,
|
|
215
|
+
width: e.maxX - e.minX,
|
|
216
|
+
height: e.maxY - e.minY
|
|
217
|
+
};
|
|
218
|
+
}
|
|
210
219
|
exportDocument() {
|
|
211
220
|
return this.get("ttExporter").export();
|
|
212
221
|
}
|
|
@@ -217,7 +226,7 @@ var Me = class {
|
|
|
217
226
|
} catch {
|
|
218
227
|
return;
|
|
219
228
|
}
|
|
220
|
-
if (!n || n.id !==
|
|
229
|
+
if (!n || n.id !== F) return;
|
|
221
230
|
let r = n.businessObject ?? { title: "Untitled team topology" };
|
|
222
231
|
n.businessObject = {
|
|
223
232
|
...r,
|
|
@@ -232,7 +241,7 @@ var Me = class {
|
|
|
232
241
|
}
|
|
233
242
|
}
|
|
234
243
|
saveSVG() {
|
|
235
|
-
return
|
|
244
|
+
return Oe(this.get("canvas"), this.get("elementRegistry"));
|
|
236
245
|
}
|
|
237
246
|
attachTo(e) {
|
|
238
247
|
e.appendChild(this._container), this.get("canvas").resized();
|
|
@@ -249,7 +258,7 @@ var Me = class {
|
|
|
249
258
|
get container() {
|
|
250
259
|
return this._container;
|
|
251
260
|
}
|
|
252
|
-
},
|
|
261
|
+
}, je = class {
|
|
253
262
|
elementFactory;
|
|
254
263
|
static $inject = ["elementFactory"];
|
|
255
264
|
constructor(e) {
|
|
@@ -368,18 +377,18 @@ var Me = class {
|
|
|
368
377
|
ttKind: "association"
|
|
369
378
|
});
|
|
370
379
|
}
|
|
371
|
-
},
|
|
380
|
+
}, Me = { ttElementFactory: ["type", je] }, Ne = 1500, L = M.schwarz, Pe = M.textLeise, Fe = M.kontur, R = {
|
|
372
381
|
family: "'Geist Variable', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
|
|
373
382
|
label: 13.5,
|
|
374
383
|
small: 11,
|
|
375
384
|
annotation: 12
|
|
376
|
-
},
|
|
385
|
+
}, Ie = 10, z = {
|
|
377
386
|
left: 10,
|
|
378
387
|
right: 6,
|
|
379
388
|
top: 6,
|
|
380
389
|
bottom: 6
|
|
381
|
-
},
|
|
382
|
-
function
|
|
390
|
+
}, B = 1.2, Le = .58, Re = 4.5;
|
|
391
|
+
function V(e) {
|
|
383
392
|
if (typeof e != "string") return;
|
|
384
393
|
let t = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
|
|
385
394
|
if (!t) return;
|
|
@@ -390,7 +399,7 @@ function z(e) {
|
|
|
390
399
|
r(4)
|
|
391
400
|
];
|
|
392
401
|
}
|
|
393
|
-
function
|
|
402
|
+
function ze(e, t, n) {
|
|
394
403
|
let r = (r) => Math.round(e[r] * n + t[r] * (1 - n));
|
|
395
404
|
return [
|
|
396
405
|
r(0),
|
|
@@ -398,74 +407,74 @@ function Be(e, t, n) {
|
|
|
398
407
|
r(2)
|
|
399
408
|
];
|
|
400
409
|
}
|
|
401
|
-
function
|
|
410
|
+
function Be([e, t, n]) {
|
|
402
411
|
let r = (e) => {
|
|
403
412
|
let t = e / 255;
|
|
404
413
|
return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
|
|
405
414
|
};
|
|
406
415
|
return .2126 * r(e) + .7152 * r(t) + .0722 * r(n);
|
|
407
416
|
}
|
|
408
|
-
function
|
|
409
|
-
let [n, r] = [
|
|
417
|
+
function Ve(e, t) {
|
|
418
|
+
let [n, r] = [Be(e), Be(t)].sort((e, t) => t - e);
|
|
410
419
|
return (n + .05) / (r + .05);
|
|
411
420
|
}
|
|
412
|
-
function
|
|
413
|
-
let n =
|
|
414
|
-
if (!n || !r || !i) return
|
|
415
|
-
let a =
|
|
416
|
-
return o >=
|
|
421
|
+
function He(e, t = 1) {
|
|
422
|
+
let n = V(e), r = V(L), i = V(M.weiss);
|
|
423
|
+
if (!n || !r || !i) return L;
|
|
424
|
+
let a = ze(n, i, t), o = Ve(r, a);
|
|
425
|
+
return o >= Re ? L : Ve(i, a) > o ? M.weiss : L;
|
|
417
426
|
}
|
|
418
|
-
function
|
|
419
|
-
if (
|
|
427
|
+
function Ue(e) {
|
|
428
|
+
if (O(e)) {
|
|
420
429
|
let t = d[e.mode] ?? d.collaboration;
|
|
421
|
-
return
|
|
430
|
+
return He(e.fill ?? t.fill, t.opacity);
|
|
422
431
|
}
|
|
423
432
|
let t = p[e.teamType] ?? p["stream-aligned"];
|
|
424
|
-
return
|
|
433
|
+
return He(e.fill ?? t.fill);
|
|
425
434
|
}
|
|
426
|
-
function
|
|
435
|
+
function We(e, t) {
|
|
427
436
|
return Math.min(e * .16, t * 1.1);
|
|
428
437
|
}
|
|
429
438
|
function H(e) {
|
|
430
439
|
let t = Math.max(e.width, 1), n = Math.max(e.height, 1);
|
|
431
|
-
return
|
|
440
|
+
return A(e) ? {
|
|
432
441
|
box: {
|
|
433
|
-
x:
|
|
434
|
-
y:
|
|
435
|
-
width: Math.max(t -
|
|
436
|
-
height: Math.max(n -
|
|
442
|
+
x: z.left,
|
|
443
|
+
y: z.top,
|
|
444
|
+
width: Math.max(t - z.left - z.right, 1),
|
|
445
|
+
height: Math.max(n - z.top - z.bottom, 1)
|
|
437
446
|
},
|
|
438
447
|
align: "left-top",
|
|
439
|
-
fontSize:
|
|
448
|
+
fontSize: R.annotation,
|
|
440
449
|
fontWeight: "400",
|
|
441
|
-
fill:
|
|
442
|
-
} :
|
|
450
|
+
fill: L
|
|
451
|
+
} : k(e) ? {
|
|
443
452
|
box: {
|
|
444
|
-
x:
|
|
453
|
+
x: Ie,
|
|
445
454
|
y: 0,
|
|
446
|
-
width: t -
|
|
455
|
+
width: t - We(t, n) - 20,
|
|
447
456
|
height: n
|
|
448
457
|
},
|
|
449
458
|
align: "center",
|
|
450
|
-
fontSize:
|
|
459
|
+
fontSize: R.small,
|
|
451
460
|
fontWeight: "600",
|
|
452
461
|
letterSpacing: "0.06em",
|
|
453
|
-
fill:
|
|
462
|
+
fill: Pe
|
|
454
463
|
} : {
|
|
455
464
|
box: {
|
|
456
|
-
x:
|
|
465
|
+
x: Ie,
|
|
457
466
|
y: 0,
|
|
458
467
|
width: t - 20,
|
|
459
468
|
height: n
|
|
460
469
|
},
|
|
461
470
|
align: "center",
|
|
462
|
-
fontSize:
|
|
471
|
+
fontSize: O(e) ? R.small : R.label,
|
|
463
472
|
fontWeight: "600",
|
|
464
|
-
fill:
|
|
473
|
+
fill: Ue(e)
|
|
465
474
|
};
|
|
466
475
|
}
|
|
467
|
-
function
|
|
468
|
-
let r = Math.max(4, Math.floor(t / (n *
|
|
476
|
+
function Ge(e, t, n) {
|
|
477
|
+
let r = Math.max(4, Math.floor(t / (n * Le))), i = e.split(/\r?\n/), a = [];
|
|
469
478
|
for (let e of i) {
|
|
470
479
|
let t = e.split(/\s+/).filter(Boolean), n = "";
|
|
471
480
|
for (let e of t) {
|
|
@@ -478,33 +487,49 @@ function We(e, t, n) {
|
|
|
478
487
|
for (; a.length > 0 && a[0] === "";) a.shift();
|
|
479
488
|
return a;
|
|
480
489
|
}
|
|
490
|
+
function Ke(e) {
|
|
491
|
+
let t = H(e), { box: n, fontSize: r } = t, i = Ge(e.ttLabel ?? "", n.width, r);
|
|
492
|
+
if (i.length === 0) return;
|
|
493
|
+
let a = Math.max(...i.map((e) => e.length)) * r * Le, o = i.length * r * B;
|
|
494
|
+
return t.align === "left-top" ? {
|
|
495
|
+
x: n.x,
|
|
496
|
+
y: n.y,
|
|
497
|
+
width: a,
|
|
498
|
+
height: o
|
|
499
|
+
} : {
|
|
500
|
+
x: n.x + (n.width - a) / 2,
|
|
501
|
+
y: n.y + (n.height - o) / 2,
|
|
502
|
+
width: a,
|
|
503
|
+
height: o
|
|
504
|
+
};
|
|
505
|
+
}
|
|
481
506
|
//#endregion
|
|
482
507
|
//#region src/draw/TeamTopologiesRenderer.ts
|
|
483
|
-
var
|
|
508
|
+
var qe = class extends re {
|
|
484
509
|
static $inject = ["eventBus"];
|
|
485
510
|
constructor(e) {
|
|
486
|
-
super(e,
|
|
511
|
+
super(e, Ne);
|
|
487
512
|
}
|
|
488
513
|
canRender(e) {
|
|
489
|
-
return
|
|
514
|
+
return E(e) || j(e);
|
|
490
515
|
}
|
|
491
516
|
drawShape(e, t) {
|
|
492
|
-
if (
|
|
493
|
-
if (
|
|
494
|
-
if (
|
|
495
|
-
if (
|
|
517
|
+
if (D(t)) return this.drawTeam(e, t);
|
|
518
|
+
if (O(t)) return this.drawInteraction(e, t);
|
|
519
|
+
if (k(t)) return this.drawFlow(e, t);
|
|
520
|
+
if (A(t)) return this.drawAnnotation(e, t);
|
|
496
521
|
let n = S(C("rect"), {
|
|
497
522
|
width: t.width,
|
|
498
523
|
height: t.height,
|
|
499
|
-
fill:
|
|
524
|
+
fill: M.linie
|
|
500
525
|
});
|
|
501
526
|
return x(e, n), n;
|
|
502
527
|
}
|
|
503
528
|
drawConnection(e, t) {
|
|
504
529
|
let n = S(C("path"), {
|
|
505
|
-
d:
|
|
530
|
+
d: Ye(t.waypoints),
|
|
506
531
|
fill: "none",
|
|
507
|
-
stroke:
|
|
532
|
+
stroke: Fe,
|
|
508
533
|
"stroke-width": 1.5,
|
|
509
534
|
"stroke-dasharray": "4 4",
|
|
510
535
|
"stroke-linecap": "round"
|
|
@@ -516,7 +541,7 @@ var Ge = class extends re {
|
|
|
516
541
|
return `M${t},${n}l${r},0l0,${i}l${-r},0z`;
|
|
517
542
|
}
|
|
518
543
|
getConnectionPath(e) {
|
|
519
|
-
return
|
|
544
|
+
return Ye(e.waypoints);
|
|
520
545
|
}
|
|
521
546
|
drawTeam(e, t) {
|
|
522
547
|
let n = p[t.teamType] ?? p["stream-aligned"], r = Math.max(t.width, 1), i = Math.max(t.height, 1), a = n.strokeWidth, o = h(n.strokeStyle, a), s = this.teamOutline(n.shape, r, i, a, {
|
|
@@ -533,7 +558,7 @@ var Ge = class extends re {
|
|
|
533
558
|
if (e === "octagon") {
|
|
534
559
|
let e = Math.min(o, s) * .29;
|
|
535
560
|
return S(C("polygon"), {
|
|
536
|
-
points:
|
|
561
|
+
points: Je(a, o, s, e),
|
|
537
562
|
...i
|
|
538
563
|
});
|
|
539
564
|
}
|
|
@@ -580,7 +605,7 @@ var Ge = class extends re {
|
|
|
580
605
|
return x(e, o), this.appendLabel(e, t.ttLabel ?? "", H(t)), o;
|
|
581
606
|
}
|
|
582
607
|
drawFlow(e, t) {
|
|
583
|
-
let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = l.strokeWidth, a = i / 2, o =
|
|
608
|
+
let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = l.strokeWidth, a = i / 2, o = We(n, r), s = r * .5, c = (r - s) / 2, u = c + s, d = [
|
|
584
609
|
[a, c],
|
|
585
610
|
[n - o, c],
|
|
586
611
|
[n - o, a],
|
|
@@ -602,20 +627,20 @@ var Ge = class extends re {
|
|
|
602
627
|
let n = Math.max(t.width, 1), r = Math.max(t.height, 1), i = 1.5, a = i / 2, o = Math.min(14, n / 2), s = S(C("path"), {
|
|
603
628
|
d: `M${o},${a} L${a},${a} L${a},${r - a} L${o},${r - a}`,
|
|
604
629
|
fill: "none",
|
|
605
|
-
stroke:
|
|
630
|
+
stroke: Fe,
|
|
606
631
|
"stroke-width": i,
|
|
607
632
|
"stroke-linejoin": "round"
|
|
608
633
|
});
|
|
609
634
|
return x(e, s), this.appendLabel(e, t.ttLabel ?? "", H(t)), s;
|
|
610
635
|
}
|
|
611
636
|
appendLabel(e, t, n) {
|
|
612
|
-
let { box: r, fontSize: i } = n, a =
|
|
637
|
+
let { box: r, fontSize: i } = n, a = Ge(t, r.width, i), o = i * B, s = n.align === "center", c = s ? r.x + r.width / 2 : r.x, l = s ? r.y + r.height / 2 - (a.length - 1) * o / 2 : r.y + o / 2;
|
|
613
638
|
a.forEach((t, r) => {
|
|
614
639
|
if (!t) return;
|
|
615
640
|
let a = S(C("text"), {
|
|
616
641
|
x: c,
|
|
617
642
|
y: l + r * o,
|
|
618
|
-
"font-family":
|
|
643
|
+
"font-family": R.family,
|
|
619
644
|
"font-size": i,
|
|
620
645
|
fill: n.fill,
|
|
621
646
|
"text-anchor": s ? "middle" : "start",
|
|
@@ -627,7 +652,7 @@ var Ge = class extends re {
|
|
|
627
652
|
});
|
|
628
653
|
}
|
|
629
654
|
};
|
|
630
|
-
function
|
|
655
|
+
function Je(e, t, n, r) {
|
|
631
656
|
return [
|
|
632
657
|
[e + r, e],
|
|
633
658
|
[e + t - r, e],
|
|
@@ -639,16 +664,16 @@ function Ke(e, t, n, r) {
|
|
|
639
664
|
[e, e + r]
|
|
640
665
|
].map((e) => e.join(",")).join(" ");
|
|
641
666
|
}
|
|
642
|
-
function
|
|
667
|
+
function Ye(e) {
|
|
643
668
|
return e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join(" ");
|
|
644
669
|
}
|
|
645
670
|
//#endregion
|
|
646
671
|
//#region src/draw/index.ts
|
|
647
|
-
var
|
|
672
|
+
var Xe = {
|
|
648
673
|
__init__: ["ttRenderer"],
|
|
649
|
-
ttRenderer: ["type",
|
|
674
|
+
ttRenderer: ["type", qe],
|
|
650
675
|
connectionDocking: ["type", ne]
|
|
651
|
-
},
|
|
676
|
+
}, Ze = class {
|
|
652
677
|
canvas;
|
|
653
678
|
elementFactory;
|
|
654
679
|
factory;
|
|
@@ -676,7 +701,7 @@ var Je = {
|
|
|
676
701
|
n = void 0;
|
|
677
702
|
}
|
|
678
703
|
let r;
|
|
679
|
-
n && n.id ===
|
|
704
|
+
n && n.id === F ? r = n : (r = this.elementFactory.createRoot({ id: F }), this.canvas.setRootElement(r));
|
|
680
705
|
let i = _(e, o);
|
|
681
706
|
r.businessObject = {
|
|
682
707
|
title: e.title,
|
|
@@ -689,7 +714,7 @@ var Je = {
|
|
|
689
714
|
for (let n of e.annotations) {
|
|
690
715
|
if (!n.attachedTo) continue;
|
|
691
716
|
let e = this.elementRegistry.get(n.id), i = this.elementRegistry.get(n.attachedTo);
|
|
692
|
-
if (!
|
|
717
|
+
if (!E(i) || A(i)) {
|
|
693
718
|
t.push({
|
|
694
719
|
message: `Annotation "${n.id}" is attached to unknown element "${n.attachedTo}"; its connector was dropped.`,
|
|
695
720
|
elementId: n.id
|
|
@@ -708,7 +733,7 @@ var Je = {
|
|
|
708
733
|
this.canvas.removeShape(e.id);
|
|
709
734
|
} catch {}
|
|
710
735
|
}
|
|
711
|
-
},
|
|
736
|
+
}, Qe = class {
|
|
712
737
|
elementRegistry;
|
|
713
738
|
canvas;
|
|
714
739
|
static $inject = ["elementRegistry", "canvas"];
|
|
@@ -724,7 +749,7 @@ var Je = {
|
|
|
724
749
|
}
|
|
725
750
|
let t = [], n = [], i = [], a = [];
|
|
726
751
|
for (let e of this.elementRegistry.getAll()) {
|
|
727
|
-
if (e.id ===
|
|
752
|
+
if (e.id === F) continue;
|
|
728
753
|
let o = e, s = {
|
|
729
754
|
x: o.x,
|
|
730
755
|
y: o.y
|
|
@@ -732,7 +757,7 @@ var Je = {
|
|
|
732
757
|
width: o.width,
|
|
733
758
|
height: o.height
|
|
734
759
|
};
|
|
735
|
-
if (
|
|
760
|
+
if (D(e)) t.push(y({
|
|
736
761
|
id: e.id,
|
|
737
762
|
type: e.teamType,
|
|
738
763
|
label: e.ttLabel ?? "",
|
|
@@ -742,7 +767,7 @@ var Je = {
|
|
|
742
767
|
...e.fill ? { fill: e.fill } : {},
|
|
743
768
|
...e.stroke ? { stroke: e.stroke } : {}
|
|
744
769
|
}, e.ttForeign, f));
|
|
745
|
-
else if (
|
|
770
|
+
else if (O(e)) n.push(y({
|
|
746
771
|
id: e.id,
|
|
747
772
|
mode: e.mode,
|
|
748
773
|
position: s,
|
|
@@ -751,14 +776,14 @@ var Je = {
|
|
|
751
776
|
...e.fill ? { fill: e.fill } : {},
|
|
752
777
|
...e.stroke ? { stroke: e.stroke } : {}
|
|
753
778
|
}, e.ttForeign, u));
|
|
754
|
-
else if (
|
|
779
|
+
else if (k(e)) i.push(y({
|
|
755
780
|
id: e.id,
|
|
756
781
|
position: s,
|
|
757
782
|
size: l,
|
|
758
783
|
...e.ttLabel ? { label: e.ttLabel } : {}
|
|
759
784
|
}, e.ttForeign, c));
|
|
760
|
-
else if (
|
|
761
|
-
let t =
|
|
785
|
+
else if (A(e)) {
|
|
786
|
+
let t = $e(e);
|
|
762
787
|
a.push(y({
|
|
763
788
|
id: e.id,
|
|
764
789
|
text: e.ttLabel ?? "",
|
|
@@ -778,13 +803,13 @@ var Je = {
|
|
|
778
803
|
}, e?.foreign, o);
|
|
779
804
|
}
|
|
780
805
|
};
|
|
781
|
-
function
|
|
782
|
-
let t = [...e.outgoing, ...e.incoming].find(
|
|
806
|
+
function $e(e) {
|
|
807
|
+
let t = [...e.outgoing, ...e.incoming].find(j);
|
|
783
808
|
if (t) return (t.source === e ? t.target : t.source)?.id;
|
|
784
809
|
}
|
|
785
810
|
//#endregion
|
|
786
811
|
//#region src/io/TtViewport.ts
|
|
787
|
-
var
|
|
812
|
+
var et = 760, tt = 88, nt = 120, U = 56, rt = 24, it = 1, at = class {
|
|
788
813
|
canvas;
|
|
789
814
|
elementRegistry;
|
|
790
815
|
static $inject = ["canvas", "elementRegistry"];
|
|
@@ -799,7 +824,7 @@ var Qe = 760, $e = 88, et = 120, U = 56, tt = 24, nt = 1, rt = class {
|
|
|
799
824
|
this.canvas.zoom("fit-viewport");
|
|
800
825
|
return;
|
|
801
826
|
}
|
|
802
|
-
let i = n <=
|
|
827
|
+
let i = n <= et, a = i ? nt : tt, o = i ? rt : U, s = Math.max(e.maxX - e.minX, 1), c = Math.max(e.maxY - e.minY, 1), l = Math.min((n - 2 * o) / s, (r - a - U) / c, it);
|
|
803
828
|
l > 0 ? this.canvas.viewbox({
|
|
804
829
|
x: e.minX + s / 2 - n / 2 / l,
|
|
805
830
|
y: this.viewboxTop(e, c, l, r, a, i),
|
|
@@ -813,10 +838,15 @@ var Qe = 760, $e = 88, et = 120, U = 56, tt = 24, nt = 1, rt = class {
|
|
|
813
838
|
return e.minY - (i + s / 2) / n;
|
|
814
839
|
}
|
|
815
840
|
contentBounds() {
|
|
816
|
-
let e = Infinity, t = Infinity, n = -Infinity, r = -Infinity
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
841
|
+
let e = Infinity, t = Infinity, n = -Infinity, r = -Infinity, i = (i, a, o, s) => {
|
|
842
|
+
e = Math.min(e, i), t = Math.min(t, a), n = Math.max(n, i + o), r = Math.max(r, a + s);
|
|
843
|
+
};
|
|
844
|
+
for (let e of this.elementRegistry.getAll()) {
|
|
845
|
+
let t = e;
|
|
846
|
+
if (typeof t.x != "number" || typeof t.y != "number" || typeof t.width != "number" || typeof t.height != "number") continue;
|
|
847
|
+
i(t.x, t.y, t.width, t.height);
|
|
848
|
+
let n = E(e) ? Ke(e) : void 0;
|
|
849
|
+
n && i(t.x + n.x, t.y + n.y, n.width, n.height);
|
|
820
850
|
}
|
|
821
851
|
return Number.isFinite(e) ? {
|
|
822
852
|
minX: e,
|
|
@@ -829,10 +859,10 @@ var Qe = 760, $e = 88, et = 120, U = 56, tt = 24, nt = 1, rt = class {
|
|
|
829
859
|
latin: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD",
|
|
830
860
|
latinExt: "U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF"
|
|
831
861
|
};
|
|
832
|
-
function
|
|
862
|
+
function ot(e) {
|
|
833
863
|
return Object.keys(G).map((t) => `@font-face{font-family:'Geist Variable';font-style:normal;font-weight:100 900;font-display:block;src:url(${e[t].replace(/^data:[^;,]*/, "data:font/woff2")}) format('woff2');unicode-range:${G[t]};}`).join("");
|
|
834
864
|
}
|
|
835
|
-
function
|
|
865
|
+
function st(e, t) {
|
|
836
866
|
let n = new DOMParser().parseFromString(e, "image/svg+xml"), r = n.documentElement;
|
|
837
867
|
if (r.namespaceURI !== W || n.querySelector("parsererror")) return e;
|
|
838
868
|
let i = n.createElementNS(W, "defs"), a = n.createElementNS(W, "style");
|
|
@@ -840,19 +870,19 @@ function at(e, t) {
|
|
|
840
870
|
}
|
|
841
871
|
//#endregion
|
|
842
872
|
//#region src/io/index.ts
|
|
843
|
-
var
|
|
844
|
-
ttImporter: ["type",
|
|
845
|
-
ttExporter: ["type",
|
|
846
|
-
ttViewport: ["type",
|
|
847
|
-
},
|
|
873
|
+
var ct = {
|
|
874
|
+
ttImporter: ["type", Ze],
|
|
875
|
+
ttExporter: ["type", Qe],
|
|
876
|
+
ttViewport: ["type", at]
|
|
877
|
+
}, lt = class extends Ae {
|
|
848
878
|
_getModules() {
|
|
849
879
|
return [
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
880
|
+
Me,
|
|
881
|
+
Xe,
|
|
882
|
+
ct
|
|
853
883
|
];
|
|
854
884
|
}
|
|
855
|
-
}, K = class extends
|
|
885
|
+
}, K = class extends lt {
|
|
856
886
|
_getModules() {
|
|
857
887
|
return [
|
|
858
888
|
...super._getModules(),
|
|
@@ -864,21 +894,21 @@ var ot = {
|
|
|
864
894
|
};
|
|
865
895
|
//#endregion
|
|
866
896
|
//#region src/modeling/cmd/UpdatePropertiesHandler.ts
|
|
867
|
-
function
|
|
897
|
+
function ut(e, t, n) {
|
|
868
898
|
n === void 0 ? delete e[t] : e[t] = n;
|
|
869
899
|
}
|
|
870
|
-
var
|
|
900
|
+
var dt = class {
|
|
871
901
|
execute(e) {
|
|
872
902
|
let { element: t, properties: n } = e, r = t, i = {};
|
|
873
|
-
for (let e of Object.keys(n)) i[e] = r[e],
|
|
903
|
+
for (let e of Object.keys(n)) i[e] = r[e], ut(r, e, n[e]);
|
|
874
904
|
return e.oldProperties = i, [t];
|
|
875
905
|
}
|
|
876
906
|
revert(e) {
|
|
877
907
|
let { element: t, oldProperties: n } = e, r = t;
|
|
878
|
-
if (n) for (let e of Object.keys(n))
|
|
908
|
+
if (n) for (let e of Object.keys(n)) ut(r, e, n[e]);
|
|
879
909
|
return [t];
|
|
880
910
|
}
|
|
881
|
-
}, q = "Untitled team topology",
|
|
911
|
+
}, q = "Untitled team topology", ft = class {
|
|
882
912
|
canvas;
|
|
883
913
|
static $inject = ["canvas"];
|
|
884
914
|
constructor(e) {
|
|
@@ -898,7 +928,7 @@ var lt = class {
|
|
|
898
928
|
title: e.oldTitle ?? q
|
|
899
929
|
}, [t];
|
|
900
930
|
}
|
|
901
|
-
},
|
|
931
|
+
}, pt = "element.updateProperties", mt = "tt.title.update", ht = 40, gt = class {
|
|
902
932
|
commandStack;
|
|
903
933
|
modeling;
|
|
904
934
|
factory;
|
|
@@ -910,13 +940,13 @@ var lt = class {
|
|
|
910
940
|
"canvas"
|
|
911
941
|
];
|
|
912
942
|
constructor(e, t, n, r) {
|
|
913
|
-
this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(
|
|
943
|
+
this.commandStack = e, this.modeling = t, this.factory = n, this.canvas = r, e.registerHandler(pt, dt), e.registerHandler(mt, ft);
|
|
914
944
|
}
|
|
915
945
|
setTitle(e) {
|
|
916
|
-
this.commandStack.execute(
|
|
946
|
+
this.commandStack.execute(mt, { title: e });
|
|
917
947
|
}
|
|
918
948
|
updateProperties(e, t) {
|
|
919
|
-
this.commandStack.execute(
|
|
949
|
+
this.commandStack.execute(pt, {
|
|
920
950
|
element: e,
|
|
921
951
|
properties: t
|
|
922
952
|
});
|
|
@@ -941,8 +971,8 @@ var lt = class {
|
|
|
941
971
|
}
|
|
942
972
|
appendAnnotation(e) {
|
|
943
973
|
let t = this.factory.createNewAnnotation(), n = {
|
|
944
|
-
x: e.x + e.width +
|
|
945
|
-
y: e.y -
|
|
974
|
+
x: e.x + e.width + ht + t.width / 2,
|
|
975
|
+
y: e.y - ht / 4
|
|
946
976
|
};
|
|
947
977
|
return this.modeling.appendShape(e, t, n, this.canvas.getRootElement(), {
|
|
948
978
|
connection: this.factory.createNewAssociation(),
|
|
@@ -950,45 +980,45 @@ var lt = class {
|
|
|
950
980
|
});
|
|
951
981
|
}
|
|
952
982
|
detachAnnotation(e) {
|
|
953
|
-
let t = [...e.incoming, ...e.outgoing].filter(
|
|
983
|
+
let t = [...e.incoming, ...e.outgoing].filter(j);
|
|
954
984
|
t.length > 0 && this.modeling.removeElements(t);
|
|
955
985
|
}
|
|
956
|
-
},
|
|
986
|
+
}, _t = class extends de {
|
|
957
987
|
layoutConnection(e, t = {}) {
|
|
958
988
|
let n = t.source ?? e.source, r = t.target ?? e.target;
|
|
959
989
|
return !n || !r ? super.layoutConnection(e, t) : [b(n), b(r)];
|
|
960
990
|
}
|
|
961
|
-
},
|
|
962
|
-
__depends__: [
|
|
991
|
+
}, vt = {
|
|
992
|
+
__depends__: [se],
|
|
963
993
|
__init__: ["ttModeling"],
|
|
964
|
-
ttModeling: ["type",
|
|
965
|
-
layouter: ["type",
|
|
994
|
+
ttModeling: ["type", gt],
|
|
995
|
+
layouter: ["type", _t]
|
|
966
996
|
};
|
|
967
997
|
//#endregion
|
|
968
998
|
//#region src/rules/TtRules.ts
|
|
969
|
-
function
|
|
970
|
-
return
|
|
999
|
+
function yt(e) {
|
|
1000
|
+
return E(e) && !A(e);
|
|
971
1001
|
}
|
|
972
|
-
var
|
|
1002
|
+
var bt = class extends pe {
|
|
973
1003
|
static $inject = ["eventBus"];
|
|
974
1004
|
constructor(e) {
|
|
975
1005
|
super(e);
|
|
976
1006
|
}
|
|
977
1007
|
init() {
|
|
978
|
-
this.addRule(["shape.move", "elements.move"], (e) => e.target && e.target.parent ? null : !0), this.addRule("shape.create", () => !0), this.addRule("shape.resize", () => !0), this.addRule("element.copy", () => !0), this.addRule("connection.create", ({ source: e, target: t }) =>
|
|
1008
|
+
this.addRule(["shape.move", "elements.move"], (e) => e.target && e.target.parent ? null : !0), this.addRule("shape.create", () => !0), this.addRule("shape.resize", () => !0), this.addRule("element.copy", () => !0), this.addRule("connection.create", ({ source: e, target: t }) => A(e) && yt(t) || A(t) && yt(e) ? { ttKind: "association" } : !1);
|
|
979
1009
|
}
|
|
980
|
-
},
|
|
981
|
-
__depends__: [
|
|
1010
|
+
}, xt = {
|
|
1011
|
+
__depends__: [fe],
|
|
982
1012
|
__init__: ["ttRules"],
|
|
983
|
-
ttRules: ["type",
|
|
984
|
-
},
|
|
1013
|
+
ttRules: ["type", bt]
|
|
1014
|
+
}, St = class extends me {
|
|
985
1015
|
static $inject = ["eventBus", "canvas"];
|
|
986
1016
|
constructor(e, t) {
|
|
987
1017
|
super(e), this.preExecute(["shape.create", "elements.create"], (e) => {
|
|
988
1018
|
e.parent = t.getRootElement();
|
|
989
1019
|
}, !0);
|
|
990
1020
|
}
|
|
991
|
-
},
|
|
1021
|
+
}, Ct = class extends me {
|
|
992
1022
|
static $inject = [
|
|
993
1023
|
"eventBus",
|
|
994
1024
|
"connectionDocking",
|
|
@@ -996,33 +1026,33 @@ var vt = class extends me {
|
|
|
996
1026
|
];
|
|
997
1027
|
constructor(e, t, n) {
|
|
998
1028
|
super(e), this.executed(["connection.layout", "connection.create"], (e) => {
|
|
999
|
-
!e.cropped &&
|
|
1029
|
+
!e.cropped && j(e.connection) && (e.connection.waypoints = t.getCroppedWaypoints(e.connection), e.cropped = !0);
|
|
1000
1030
|
}, !0), this.reverted("connection.layout", (e) => {
|
|
1001
1031
|
delete e.cropped;
|
|
1002
1032
|
}, !0), this.postExecuted("connection.create", (e) => {
|
|
1003
1033
|
let t = e.connection;
|
|
1004
|
-
if (!
|
|
1005
|
-
let r =
|
|
1006
|
-
if (!
|
|
1007
|
-
let i = [...r.incoming, ...r.outgoing].filter((e) => e !== t &&
|
|
1034
|
+
if (!j(t)) return;
|
|
1035
|
+
let r = A(t.source) ? t.source : t.target;
|
|
1036
|
+
if (!A(r)) return;
|
|
1037
|
+
let i = [...r.incoming, ...r.outgoing].filter((e) => e !== t && j(e));
|
|
1008
1038
|
i.length > 0 && n.removeElements(i);
|
|
1009
1039
|
}, !0);
|
|
1010
1040
|
}
|
|
1011
|
-
},
|
|
1041
|
+
}, wt = {
|
|
1012
1042
|
__init__: ["ttFlatModelBehavior", "ttAssociationBehavior"],
|
|
1013
|
-
ttFlatModelBehavior: ["type",
|
|
1014
|
-
ttAssociationBehavior: ["type",
|
|
1015
|
-
},
|
|
1043
|
+
ttFlatModelBehavior: ["type", St],
|
|
1044
|
+
ttAssociationBehavior: ["type", Ct]
|
|
1045
|
+
}, Tt = [["path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }], ["path", { d: "m15 5 4 4" }]], Et = [
|
|
1016
1046
|
["path", { d: "M10 11v6" }],
|
|
1017
1047
|
["path", { d: "M14 11v6" }],
|
|
1018
1048
|
["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }],
|
|
1019
1049
|
["path", { d: "M3 6h18" }],
|
|
1020
1050
|
["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]
|
|
1021
|
-
],
|
|
1051
|
+
], Dt = [["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }], ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" }]], Ot = [
|
|
1022
1052
|
["path", { d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }],
|
|
1023
1053
|
["path", { d: "M12 8v6" }],
|
|
1024
1054
|
["path", { d: "M9 11h6" }]
|
|
1025
|
-
],
|
|
1055
|
+
], kt = [
|
|
1026
1056
|
["path", { d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" }],
|
|
1027
1057
|
["path", { d: "M5 3a2 2 0 0 0-2 2" }],
|
|
1028
1058
|
["path", { d: "M19 3a2 2 0 0 1 2 2" }],
|
|
@@ -1033,20 +1063,20 @@ var vt = class extends me {
|
|
|
1033
1063
|
["path", { d: "M3 9v1" }],
|
|
1034
1064
|
["path", { d: "M21 9v2" }],
|
|
1035
1065
|
["path", { d: "M3 14v1" }]
|
|
1036
|
-
],
|
|
1066
|
+
], At = [
|
|
1037
1067
|
["path", { d: "M4 5h16" }],
|
|
1038
1068
|
["path", { d: "M4 12h16" }],
|
|
1039
1069
|
["path", { d: "M4 19h16" }]
|
|
1040
|
-
],
|
|
1070
|
+
], jt = [["path", { d: "M5 12h14" }]], Mt = [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]], Nt = [
|
|
1041
1071
|
["path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }],
|
|
1042
1072
|
["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }],
|
|
1043
1073
|
["path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }],
|
|
1044
1074
|
["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" }]
|
|
1045
|
-
],
|
|
1075
|
+
], Pt = [
|
|
1046
1076
|
["path", { d: "M12 15V3" }],
|
|
1047
1077
|
["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
|
|
1048
1078
|
["path", { d: "m7 10 5 5 5-5" }]
|
|
1049
|
-
],
|
|
1079
|
+
], Ft = [["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]], It = 2.5, Lt = 16, Rt = [
|
|
1050
1080
|
"path",
|
|
1051
1081
|
"circle",
|
|
1052
1082
|
"ellipse",
|
|
@@ -1054,7 +1084,7 @@ var vt = class extends me {
|
|
|
1054
1084
|
"polyline",
|
|
1055
1085
|
"polygon",
|
|
1056
1086
|
"rect"
|
|
1057
|
-
],
|
|
1087
|
+
], zt = [
|
|
1058
1088
|
"d",
|
|
1059
1089
|
"cx",
|
|
1060
1090
|
"cy",
|
|
@@ -1071,33 +1101,33 @@ var vt = class extends me {
|
|
|
1071
1101
|
"height",
|
|
1072
1102
|
"points"
|
|
1073
1103
|
];
|
|
1074
|
-
function
|
|
1104
|
+
function Bt(e) {
|
|
1075
1105
|
return e.replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
|
|
1076
1106
|
}
|
|
1077
|
-
function
|
|
1107
|
+
function Vt(e, t) {
|
|
1078
1108
|
let n = Number(e);
|
|
1079
1109
|
return Number.isFinite(n) && n > 0 ? n : t;
|
|
1080
1110
|
}
|
|
1081
1111
|
function J(e, t = {}) {
|
|
1082
|
-
let n =
|
|
1083
|
-
return `<svg${t.className ? ` class="${
|
|
1084
|
-
let n =
|
|
1112
|
+
let n = Vt(t.size, Lt), r = Vt(t.strokeWidth, It);
|
|
1113
|
+
return `<svg${t.className ? ` class="${Bt(t.className)}"` : ""} xmlns="http://www.w3.org/2000/svg" width="${n}" height="${n}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${r}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${e.map(([e, t]) => {
|
|
1114
|
+
let n = Rt.find((t) => t === e);
|
|
1085
1115
|
return n ? `<${n} ${Object.entries(t).flatMap(([e, t]) => {
|
|
1086
|
-
let n =
|
|
1087
|
-
return n ? [`${n}="${
|
|
1116
|
+
let n = zt.find((t) => t === e);
|
|
1117
|
+
return n ? [`${n}="${Bt(String(t))}"`] : [];
|
|
1088
1118
|
}).join(" ")}/>` : "";
|
|
1089
1119
|
}).join("")}</svg>`;
|
|
1090
1120
|
}
|
|
1091
1121
|
//#endregion
|
|
1092
1122
|
//#region src/draw/palette-icons.ts
|
|
1093
|
-
var
|
|
1123
|
+
var Ht = {
|
|
1094
1124
|
size: 20,
|
|
1095
1125
|
strokeWidth: 2
|
|
1096
1126
|
};
|
|
1097
1127
|
function Y(e) {
|
|
1098
1128
|
return `<svg class="tt-palette-svg" width="24" height="24" viewBox="0 0 26 26" aria-hidden="true">${e}</svg>`;
|
|
1099
1129
|
}
|
|
1100
|
-
function
|
|
1130
|
+
function Ut(e) {
|
|
1101
1131
|
let t = p[e], n = h(t.strokeStyle, 1.5), r = `fill="${t.fill}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
|
|
1102
1132
|
switch (t.shape) {
|
|
1103
1133
|
case "octagon": return Y(`<polygon points="8,3 18,3 23,8 23,18 18,23 8,23 3,18 3,8" ${r}/>`);
|
|
@@ -1106,20 +1136,20 @@ function Vt(e) {
|
|
|
1106
1136
|
default: return Y(`<rect x="3" y="8" width="20" height="10" rx="5" ${r}/>`);
|
|
1107
1137
|
}
|
|
1108
1138
|
}
|
|
1109
|
-
function
|
|
1139
|
+
function Wt() {
|
|
1110
1140
|
let e = h(l.strokeStyle, 1.5);
|
|
1111
1141
|
return Y(`<g fill="none" stroke="${l.stroke}" stroke-width="1.5" stroke-linejoin="round"` + (e ? ` stroke-dasharray="${e}"` : "") + "><polygon points=\"3,9 16,9 16,5 23,13 16,21 16,17 3,17\"/></g>");
|
|
1112
1142
|
}
|
|
1113
|
-
function
|
|
1143
|
+
function Gt() {
|
|
1114
1144
|
return Y("<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M10 4H5v18h5\"/><path d=\"M13 9h9M13 13h9M13 17h6\"/></g>");
|
|
1115
1145
|
}
|
|
1116
|
-
function
|
|
1117
|
-
return J(
|
|
1118
|
-
...
|
|
1146
|
+
function Kt() {
|
|
1147
|
+
return J(kt, {
|
|
1148
|
+
...Ht,
|
|
1119
1149
|
className: "tt-palette-svg"
|
|
1120
1150
|
});
|
|
1121
1151
|
}
|
|
1122
|
-
function
|
|
1152
|
+
function qt(e) {
|
|
1123
1153
|
let t = d[e], n = h(t.strokeStyle, 1.5), r = `fill="${t.fill}" fill-opacity="${t.opacity}" stroke="${t.stroke}" stroke-width="1.5"` + (n ? ` stroke-dasharray="${n}"` : "");
|
|
1124
1154
|
switch (t.shape) {
|
|
1125
1155
|
case "circle": return Y(`<circle cx="13" cy="13" r="9" ${r}/>`);
|
|
@@ -1129,27 +1159,27 @@ function Gt(e) {
|
|
|
1129
1159
|
}
|
|
1130
1160
|
//#endregion
|
|
1131
1161
|
//#region src/palette/TtPaletteProvider.ts
|
|
1132
|
-
var
|
|
1133
|
-
function
|
|
1162
|
+
var Jt = "tools", Yt = "tt-1-teams", Xt = "tt-2-modes", Zt = "tt-3-guides", Qt = 24;
|
|
1163
|
+
function $t(e, t = !0) {
|
|
1134
1164
|
return `<div class="entry tt-palette-entry" draggable="${t}">${e}</div>`;
|
|
1135
1165
|
}
|
|
1136
|
-
function
|
|
1166
|
+
function en(e) {
|
|
1137
1167
|
return e.type === "click" && e.detail === 0;
|
|
1138
1168
|
}
|
|
1139
|
-
function
|
|
1169
|
+
function tn(e) {
|
|
1140
1170
|
return {
|
|
1141
1171
|
x: e.x + e.width / 2,
|
|
1142
1172
|
y: e.y + e.height / 2
|
|
1143
1173
|
};
|
|
1144
1174
|
}
|
|
1145
|
-
function
|
|
1175
|
+
function nn(e, t) {
|
|
1146
1176
|
let { x: n, y: r, scale: i, outer: a } = e.viewbox(), o = a.width - t.left - t.right, s = a.height - t.top - t.bottom;
|
|
1147
1177
|
if (i > 0 && o > 0 && s > 0) return {
|
|
1148
1178
|
x: n + (t.left + o / 2) / i,
|
|
1149
1179
|
y: r + (t.top + s / 2) / i
|
|
1150
1180
|
};
|
|
1151
1181
|
}
|
|
1152
|
-
var
|
|
1182
|
+
var rn = class {
|
|
1153
1183
|
config;
|
|
1154
1184
|
create;
|
|
1155
1185
|
factory;
|
|
@@ -1178,23 +1208,23 @@ var tn = class {
|
|
|
1178
1208
|
getPaletteEntries() {
|
|
1179
1209
|
let e = {};
|
|
1180
1210
|
e["lasso-tool"] = {
|
|
1181
|
-
group:
|
|
1211
|
+
group: Jt,
|
|
1182
1212
|
title: "Select several elements",
|
|
1183
|
-
html:
|
|
1213
|
+
html: $t(Kt(), !1),
|
|
1184
1214
|
action: { click: (e) => this.lassoTool.activateSelection(e) }
|
|
1185
1215
|
};
|
|
1186
|
-
for (let t of n) e[`team.${t.type}`] = this.createEntry(
|
|
1187
|
-
for (let n of t) e[`mode.${n.mode}`] = this.createEntry(
|
|
1188
|
-
return e.flow = this.createEntry(
|
|
1216
|
+
for (let t of n) e[`team.${t.type}`] = this.createEntry(Yt, `${t.label} team`, Ut(t.type), () => this.factory.createNewTeam(t.type, t.label));
|
|
1217
|
+
for (let n of t) e[`mode.${n.mode}`] = this.createEntry(Xt, `${n.label} interaction`, qt(n.mode), () => this.factory.createNewInteraction(n.mode));
|
|
1218
|
+
return e.flow = this.createEntry(Zt, l.label, Wt(), () => this.factory.createNewFlow()), e.annotation = this.createEntry(Zt, i.label, Gt(), () => this.factory.createNewAnnotation()), e;
|
|
1189
1219
|
}
|
|
1190
1220
|
createEntry(e, t, n, r) {
|
|
1191
1221
|
let i = (e) => {
|
|
1192
|
-
|
|
1222
|
+
en(e) ? this.placeInFreeRect(r()) : this.create.start(e, r());
|
|
1193
1223
|
};
|
|
1194
1224
|
return {
|
|
1195
1225
|
group: e,
|
|
1196
1226
|
title: t,
|
|
1197
|
-
html:
|
|
1227
|
+
html: $t(n),
|
|
1198
1228
|
action: {
|
|
1199
1229
|
dragstart: i,
|
|
1200
1230
|
click: i
|
|
@@ -1208,31 +1238,31 @@ var tn = class {
|
|
|
1208
1238
|
}, n = {
|
|
1209
1239
|
x: Math.round(t.x),
|
|
1210
1240
|
y: Math.round(t.y)
|
|
1211
|
-
}, r = () => this.elementRegistry.filter(
|
|
1212
|
-
let t =
|
|
1241
|
+
}, r = () => this.elementRegistry.filter(E).some((e) => {
|
|
1242
|
+
let t = tn(e);
|
|
1213
1243
|
return Math.abs(t.x - n.x) < 1 && Math.abs(t.y - n.y) < 1;
|
|
1214
1244
|
});
|
|
1215
|
-
for (; r();) n.x +=
|
|
1245
|
+
for (; r();) n.x += Qt, n.y += Qt;
|
|
1216
1246
|
return n;
|
|
1217
1247
|
}
|
|
1218
1248
|
freeAreaCentre() {
|
|
1219
1249
|
let e = this.config?.freeArea;
|
|
1220
|
-
return e?.center ? e.center() : e?.insets ?
|
|
1250
|
+
return e?.center ? e.center() : e?.insets ? nn(this.canvas, e.insets()) : this.config?.freeRectCenter?.();
|
|
1221
1251
|
}
|
|
1222
1252
|
placeInFreeRect(e) {
|
|
1223
1253
|
if (this.readOnly?.isReadOnly()) return;
|
|
1224
1254
|
let t = this.modeling.createShape(e, this.freePlace(), this.canvas.getRootElement());
|
|
1225
|
-
this.selection.select(t), this.canvas.focus(),
|
|
1255
|
+
this.selection.select(t), this.canvas.focus(), E(t) && this.labelEditing?.activate(t);
|
|
1226
1256
|
}
|
|
1227
|
-
},
|
|
1257
|
+
}, an = {
|
|
1228
1258
|
__depends__: [
|
|
1259
|
+
he,
|
|
1229
1260
|
ge,
|
|
1230
|
-
|
|
1231
|
-
se
|
|
1261
|
+
w
|
|
1232
1262
|
],
|
|
1233
1263
|
__init__: ["ttPaletteProvider"],
|
|
1234
|
-
ttPaletteProvider: ["type",
|
|
1235
|
-
}, X = "tt.readOnly.changed",
|
|
1264
|
+
ttPaletteProvider: ["type", rn]
|
|
1265
|
+
}, X = "tt.readOnly.changed", on = 5e3, sn = [
|
|
1236
1266
|
"elements.move",
|
|
1237
1267
|
"shape.move",
|
|
1238
1268
|
"shape.resize",
|
|
@@ -1244,7 +1274,7 @@ var tn = class {
|
|
|
1244
1274
|
"connection.reconnect",
|
|
1245
1275
|
"connection.updateWaypoints",
|
|
1246
1276
|
"elements.delete"
|
|
1247
|
-
],
|
|
1277
|
+
], cn = class extends pe {
|
|
1248
1278
|
bus;
|
|
1249
1279
|
static $inject = ["eventBus"];
|
|
1250
1280
|
readOnly = !1;
|
|
@@ -1252,7 +1282,7 @@ var tn = class {
|
|
|
1252
1282
|
super(e), this.bus = e;
|
|
1253
1283
|
}
|
|
1254
1284
|
init() {
|
|
1255
|
-
this.addRule(
|
|
1285
|
+
this.addRule(sn, on, () => !this.readOnly && void 0);
|
|
1256
1286
|
}
|
|
1257
1287
|
isReadOnly() {
|
|
1258
1288
|
return this.readOnly;
|
|
@@ -1260,18 +1290,18 @@ var tn = class {
|
|
|
1260
1290
|
setReadOnly(e) {
|
|
1261
1291
|
this.readOnly !== e && (this.readOnly = e, this.bus.fire(X, { readOnly: e }));
|
|
1262
1292
|
}
|
|
1263
|
-
},
|
|
1264
|
-
__depends__: [
|
|
1293
|
+
}, ln = {
|
|
1294
|
+
__depends__: [fe],
|
|
1265
1295
|
__init__: ["ttReadOnly"],
|
|
1266
|
-
ttReadOnly: ["type",
|
|
1267
|
-
},
|
|
1296
|
+
ttReadOnly: ["type", cn]
|
|
1297
|
+
}, un = ".djs-context-pad .entry[data-action]";
|
|
1268
1298
|
function Z(e, t, n = !0) {
|
|
1269
1299
|
return `<div class="entry tt-cp-entry" role="button" tabindex="${n ? 0 : -1}" aria-label="${t}">${J(e)}</div>`;
|
|
1270
1300
|
}
|
|
1271
|
-
function
|
|
1272
|
-
return
|
|
1301
|
+
function dn(e) {
|
|
1302
|
+
return A(e) ? "Edit text" : O(e) || k(e) ? "Edit label" : "Rename";
|
|
1273
1303
|
}
|
|
1274
|
-
var
|
|
1304
|
+
var fn = class {
|
|
1275
1305
|
contextPad;
|
|
1276
1306
|
modeling;
|
|
1277
1307
|
ttModeling;
|
|
@@ -1298,16 +1328,16 @@ var un = class {
|
|
|
1298
1328
|
}
|
|
1299
1329
|
getContextPadEntries(e) {
|
|
1300
1330
|
if (this.readOnly?.isReadOnly()) return {};
|
|
1301
|
-
if (
|
|
1302
|
-
if (!
|
|
1303
|
-
if (
|
|
1331
|
+
if (j(e)) return { delete: this.deleteEntry([e], "Delete connector") };
|
|
1332
|
+
if (!E(e)) return {};
|
|
1333
|
+
if (A(e)) {
|
|
1304
1334
|
let t = (t) => this.connect.start(t, e);
|
|
1305
1335
|
return {
|
|
1306
1336
|
"edit-label": this.editEntry(e),
|
|
1307
1337
|
connect: {
|
|
1308
1338
|
group: "edit",
|
|
1309
1339
|
title: "Attach to element",
|
|
1310
|
-
html: Z(
|
|
1340
|
+
html: Z(Dt, "Attach to element", !1),
|
|
1311
1341
|
action: {
|
|
1312
1342
|
click: t,
|
|
1313
1343
|
dragstart: t
|
|
@@ -1325,7 +1355,7 @@ var un = class {
|
|
|
1325
1355
|
"append-annotation": {
|
|
1326
1356
|
group: "edit",
|
|
1327
1357
|
title: "Add annotation",
|
|
1328
|
-
html: Z(
|
|
1358
|
+
html: Z(Ot, "Add annotation"),
|
|
1329
1359
|
action: {
|
|
1330
1360
|
click: t,
|
|
1331
1361
|
keyboard: t
|
|
@@ -1339,15 +1369,15 @@ var un = class {
|
|
|
1339
1369
|
}
|
|
1340
1370
|
onEntryKeyDown(e) {
|
|
1341
1371
|
if (e.key !== "Enter" && e.key !== " " || e.repeat) return;
|
|
1342
|
-
let t = (e.target?.closest?.(
|
|
1372
|
+
let t = (e.target?.closest?.(un))?.getAttribute("data-action");
|
|
1343
1373
|
t && (e.preventDefault(), e.stopPropagation(), this.contextPad.triggerEntry(t, "keyboard", e));
|
|
1344
1374
|
}
|
|
1345
1375
|
editEntry(e) {
|
|
1346
|
-
let t =
|
|
1376
|
+
let t = dn(e), n = () => this.labelEditing.activate(e);
|
|
1347
1377
|
return {
|
|
1348
1378
|
group: "edit",
|
|
1349
1379
|
title: t,
|
|
1350
|
-
html: Z(
|
|
1380
|
+
html: Z(Tt, t),
|
|
1351
1381
|
action: {
|
|
1352
1382
|
click: n,
|
|
1353
1383
|
keyboard: n
|
|
@@ -1358,7 +1388,7 @@ var un = class {
|
|
|
1358
1388
|
return {
|
|
1359
1389
|
group: "edit",
|
|
1360
1390
|
title: t,
|
|
1361
|
-
html: Z(
|
|
1391
|
+
html: Z(Et, t),
|
|
1362
1392
|
action: {
|
|
1363
1393
|
click: () => this.modeling.removeElements([...e]),
|
|
1364
1394
|
keyboard: () => {
|
|
@@ -1367,19 +1397,19 @@ var un = class {
|
|
|
1367
1397
|
}
|
|
1368
1398
|
};
|
|
1369
1399
|
}
|
|
1370
|
-
},
|
|
1400
|
+
}, pn = {
|
|
1371
1401
|
__depends__: [
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1402
|
+
ye,
|
|
1403
|
+
_e,
|
|
1404
|
+
ve
|
|
1375
1405
|
],
|
|
1376
1406
|
__init__: ["ttContextPadProvider"],
|
|
1377
|
-
ttContextPadProvider: ["type",
|
|
1378
|
-
},
|
|
1379
|
-
function
|
|
1380
|
-
return
|
|
1407
|
+
ttContextPadProvider: ["type", fn]
|
|
1408
|
+
}, mn = "tt-label-editing", hn = 96;
|
|
1409
|
+
function gn(e) {
|
|
1410
|
+
return A(e) ? "Annotation text" : O(e) ? "Interaction label" : k(e) ? "Flow label" : "Team name";
|
|
1381
1411
|
}
|
|
1382
|
-
var
|
|
1412
|
+
var _n = class {
|
|
1383
1413
|
canvas;
|
|
1384
1414
|
modeling;
|
|
1385
1415
|
elementRegistry;
|
|
@@ -1396,7 +1426,7 @@ var hn = class {
|
|
|
1396
1426
|
readOnly;
|
|
1397
1427
|
constructor(e, t, n, r, i) {
|
|
1398
1428
|
this.canvas = t, this.modeling = n, this.elementRegistry = r, this.readOnly = i.get("ttReadOnly", !1), e.on("element.dblclick", (e) => {
|
|
1399
|
-
|
|
1429
|
+
E(e.element) && this.activate(e.element);
|
|
1400
1430
|
}), e.on(["element.mousedown", "drag.init"], () => this.active?.commit()), e.on("canvas.viewbox.changed", () => this.active?.place()), e.on("import.render.start", () => this.cancel()), e.on(X, (e) => {
|
|
1401
1431
|
e.readOnly && this.cancel();
|
|
1402
1432
|
}), e.on("diagram.destroy", () => {
|
|
@@ -1411,7 +1441,7 @@ var hn = class {
|
|
|
1411
1441
|
let e = this.suspended;
|
|
1412
1442
|
if (this.suspended = null, !e || this.active) return;
|
|
1413
1443
|
let t = this.elementRegistry.get(e.elementId);
|
|
1414
|
-
|
|
1444
|
+
E(t) && this.activate(t, e);
|
|
1415
1445
|
}, 0));
|
|
1416
1446
|
}
|
|
1417
1447
|
openEdit() {
|
|
@@ -1424,12 +1454,12 @@ var hn = class {
|
|
|
1424
1454
|
}
|
|
1425
1455
|
activate(e, t) {
|
|
1426
1456
|
if (this.active?.commit(), this.readOnly?.isReadOnly()) return;
|
|
1427
|
-
let n = H(e), r = n.align === "center", i = r ? Math.max(n.box.width,
|
|
1428
|
-
o.className = "tt-label-editor", o.value = t ? t.value : e.ttLabel ?? "", o.rows = 1, o.setAttribute("aria-label",
|
|
1429
|
-
fontFamily:
|
|
1457
|
+
let n = H(e), r = n.align === "center", i = r ? Math.max(n.box.width, hn) : n.box.width, a = e.x + n.box.x + (n.box.width - i) / 2, o = document.createElement("textarea");
|
|
1458
|
+
o.className = "tt-label-editor", o.value = t ? t.value : e.ttLabel ?? "", o.rows = 1, o.setAttribute("aria-label", gn(e)), Object.assign(o.style, {
|
|
1459
|
+
fontFamily: R.family,
|
|
1430
1460
|
fontWeight: n.fontWeight,
|
|
1431
1461
|
letterSpacing: n.letterSpacing ?? "normal",
|
|
1432
|
-
lineHeight: String(
|
|
1462
|
+
lineHeight: String(B),
|
|
1433
1463
|
color: n.fill,
|
|
1434
1464
|
textAlign: r ? "center" : "left"
|
|
1435
1465
|
});
|
|
@@ -1445,9 +1475,9 @@ var hn = class {
|
|
|
1445
1475
|
fontSize: `${n.fontSize * t}px`
|
|
1446
1476
|
}), l();
|
|
1447
1477
|
};
|
|
1448
|
-
this.canvas.getContainer().appendChild(o), this.canvas.addMarker(e,
|
|
1478
|
+
this.canvas.getContainer().appendChild(o), this.canvas.addMarker(e, mn), u(), o.focus(), t ? o.setSelectionRange(t.selectionStart, t.selectionEnd) : o.select();
|
|
1449
1479
|
let d = !1, f = () => {
|
|
1450
|
-
d || (d = !0, o.removeEventListener("keydown", m), o.removeEventListener("input", l), o.removeEventListener("blur", h), o.remove(), this.elementRegistry.get(e.id) === e && this.canvas.removeMarker(e,
|
|
1480
|
+
d || (d = !0, o.removeEventListener("keydown", m), o.removeEventListener("input", l), o.removeEventListener("blur", h), o.remove(), this.elementRegistry.get(e.id) === e && this.canvas.removeMarker(e, mn), this.active = null, this.canvas.restoreFocus());
|
|
1451
1481
|
}, p = () => {
|
|
1452
1482
|
if (d) return;
|
|
1453
1483
|
let t = o.value.trim(), n = t !== (e.ttLabel ?? "");
|
|
@@ -1472,10 +1502,10 @@ var hn = class {
|
|
|
1472
1502
|
cancel() {
|
|
1473
1503
|
this.active?.cleanup();
|
|
1474
1504
|
}
|
|
1475
|
-
},
|
|
1505
|
+
}, vn = {
|
|
1476
1506
|
__init__: ["ttLabelEditing"],
|
|
1477
|
-
ttLabelEditing: ["type",
|
|
1478
|
-
},
|
|
1507
|
+
ttLabelEditing: ["type", _n]
|
|
1508
|
+
}, yn = 1, bn = 10, xn = {
|
|
1479
1509
|
ArrowLeft: {
|
|
1480
1510
|
x: -1,
|
|
1481
1511
|
y: 0
|
|
@@ -1492,24 +1522,24 @@ var hn = class {
|
|
|
1492
1522
|
x: 0,
|
|
1493
1523
|
y: 1
|
|
1494
1524
|
}
|
|
1495
|
-
},
|
|
1496
|
-
function
|
|
1525
|
+
}, Sn = "[aria-modal=\"true\"], dialog[open]";
|
|
1526
|
+
function Cn(e) {
|
|
1497
1527
|
let t = e;
|
|
1498
1528
|
return t ? t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable : !1;
|
|
1499
1529
|
}
|
|
1500
|
-
function
|
|
1530
|
+
function wn(e) {
|
|
1501
1531
|
return typeof e?.nodeType == "number";
|
|
1502
1532
|
}
|
|
1503
|
-
function
|
|
1533
|
+
function Tn(e, t) {
|
|
1504
1534
|
if (t.closest("[inert]")) return !1;
|
|
1505
|
-
if (!
|
|
1535
|
+
if (!wn(e) || e.nodeType === Node.DOCUMENT_NODE) return !0;
|
|
1506
1536
|
let n = e.ownerDocument;
|
|
1507
1537
|
return e === n?.body || e === n?.documentElement || t.contains(e);
|
|
1508
1538
|
}
|
|
1509
|
-
function
|
|
1539
|
+
function En(e) {
|
|
1510
1540
|
return !("waypoints" in e);
|
|
1511
1541
|
}
|
|
1512
|
-
var
|
|
1542
|
+
var Dn = class {
|
|
1513
1543
|
static $inject = [
|
|
1514
1544
|
"config.ttKeyboard",
|
|
1515
1545
|
"eventBus",
|
|
@@ -1543,30 +1573,30 @@ var Q = class {
|
|
|
1543
1573
|
let t = a.get();
|
|
1544
1574
|
t.length && (e.preventDefault(), o.removeElements([...t]));
|
|
1545
1575
|
} else if (t && n === "v" && !e.shiftKey) e.preventDefault(), s.paste();
|
|
1546
|
-
else if (!t && Object.hasOwn(
|
|
1547
|
-
let t = a.get().filter(
|
|
1576
|
+
else if (!t && Object.hasOwn(xn, e.key)) {
|
|
1577
|
+
let t = a.get().filter(En);
|
|
1548
1578
|
if (!t.length || !c.allowed("elements.move", { shapes: t })) return;
|
|
1549
1579
|
e.preventDefault();
|
|
1550
|
-
let n =
|
|
1580
|
+
let n = xn[e.key], r = e.shiftKey ? bn : yn;
|
|
1551
1581
|
o.moveElements(t, {
|
|
1552
1582
|
x: n.x * r,
|
|
1553
1583
|
y: n.y * r
|
|
1554
1584
|
});
|
|
1555
1585
|
}
|
|
1556
1586
|
}, _ = (e) => {
|
|
1557
|
-
if (e.defaultPrevented || e.altKey || e.isComposing ||
|
|
1587
|
+
if (e.defaultPrevented || e.altKey || e.isComposing || Cn(e.target) || !Tn(e.target, u) || d.querySelector(Sn)) return;
|
|
1558
1588
|
let t = e.ctrlKey || e.metaKey, n = e.key.toLowerCase();
|
|
1559
1589
|
h(e, t, n) || m?.isReadOnly() || g(e, t, n);
|
|
1560
1590
|
};
|
|
1561
1591
|
d.addEventListener("keydown", _), t.on("diagram.destroy", () => d.removeEventListener("keydown", _));
|
|
1562
1592
|
}
|
|
1563
|
-
},
|
|
1593
|
+
}, Q = {
|
|
1564
1594
|
__init__: ["ttKeyboard"],
|
|
1565
|
-
ttKeyboard: ["type",
|
|
1595
|
+
ttKeyboard: ["type", Dn]
|
|
1566
1596
|
};
|
|
1567
1597
|
//#endregion
|
|
1568
1598
|
//#region src/copy-paste/TtCopyPaste.ts
|
|
1569
|
-
function
|
|
1599
|
+
function On(e) {
|
|
1570
1600
|
switch (e) {
|
|
1571
1601
|
case "team": return "team";
|
|
1572
1602
|
case "interaction": return "int";
|
|
@@ -1576,7 +1606,7 @@ function En(e) {
|
|
|
1576
1606
|
default: return;
|
|
1577
1607
|
}
|
|
1578
1608
|
}
|
|
1579
|
-
var
|
|
1609
|
+
var kn = class extends xe {
|
|
1580
1610
|
elementFactory;
|
|
1581
1611
|
static $inject = [
|
|
1582
1612
|
"canvas",
|
|
@@ -1592,20 +1622,20 @@ var Dn = class extends Se {
|
|
|
1592
1622
|
super(e, t, n, r, i, a, o, s), this.elementFactory = r;
|
|
1593
1623
|
}
|
|
1594
1624
|
createConnection(e) {
|
|
1595
|
-
let t =
|
|
1625
|
+
let t = On(e.ttKind);
|
|
1596
1626
|
return t ? this.elementFactory.createConnection({
|
|
1597
1627
|
...e,
|
|
1598
1628
|
id: v(t)
|
|
1599
1629
|
}) : super.createConnection(e);
|
|
1600
1630
|
}
|
|
1601
1631
|
createShape(e) {
|
|
1602
|
-
let t =
|
|
1632
|
+
let t = On(e.ttKind);
|
|
1603
1633
|
return t ? this.elementFactory.createShape({
|
|
1604
1634
|
...e,
|
|
1605
1635
|
id: v(t)
|
|
1606
1636
|
}) : super.createShape(e);
|
|
1607
1637
|
}
|
|
1608
|
-
},
|
|
1638
|
+
}, An = [
|
|
1609
1639
|
"ttKind",
|
|
1610
1640
|
"teamType",
|
|
1611
1641
|
"mode",
|
|
@@ -1614,31 +1644,31 @@ var Dn = class extends Se {
|
|
|
1614
1644
|
"fill",
|
|
1615
1645
|
"stroke",
|
|
1616
1646
|
"ttForeign"
|
|
1617
|
-
],
|
|
1618
|
-
__depends__: [
|
|
1647
|
+
], jn = {
|
|
1648
|
+
__depends__: [be],
|
|
1619
1649
|
__init__: ["ttCopyPasteProps"],
|
|
1620
|
-
copyPaste: ["type",
|
|
1650
|
+
copyPaste: ["type", kn],
|
|
1621
1651
|
ttCopyPasteProps: ["type", class {
|
|
1622
1652
|
static $inject = ["eventBus"];
|
|
1623
1653
|
constructor(e) {
|
|
1624
1654
|
e.on("copyPaste.copyElement", (e) => {
|
|
1625
1655
|
let { descriptor: t, element: n } = e;
|
|
1626
|
-
if (!
|
|
1656
|
+
if (!E(n) && !j(n)) return;
|
|
1627
1657
|
let r = n;
|
|
1628
|
-
for (let e of
|
|
1658
|
+
for (let e of An) r[e] !== void 0 && (t[e] = structuredClone(r[e]));
|
|
1629
1659
|
});
|
|
1630
1660
|
}
|
|
1631
1661
|
}]
|
|
1632
1662
|
};
|
|
1633
1663
|
//#endregion
|
|
1634
1664
|
//#region src/zorder/TtZOrder.ts
|
|
1635
|
-
function
|
|
1636
|
-
return
|
|
1665
|
+
function Mn(e) {
|
|
1666
|
+
return k(e) ? 0 : D(e) ? e.teamType === "enabling" ? 3 : e.teamType === "complicated-subsystem" ? 2 : 1 : O(e) ? 4 : A(e) ? 5 : j(e) ? 6 : 1;
|
|
1637
1667
|
}
|
|
1638
|
-
function
|
|
1639
|
-
return
|
|
1668
|
+
function Nn(e) {
|
|
1669
|
+
return E(e) || j(e);
|
|
1640
1670
|
}
|
|
1641
|
-
var
|
|
1671
|
+
var Pn = class {
|
|
1642
1672
|
canvas;
|
|
1643
1673
|
elementRegistry;
|
|
1644
1674
|
static $inject = [
|
|
@@ -1657,34 +1687,34 @@ var Mn = class {
|
|
|
1657
1687
|
});
|
|
1658
1688
|
}
|
|
1659
1689
|
reorder() {
|
|
1660
|
-
let e = this.elementRegistry.getAll().filter(
|
|
1690
|
+
let e = this.elementRegistry.getAll().filter(Nn).sort((e, t) => Mn(e) - Mn(t));
|
|
1661
1691
|
for (let t of e) {
|
|
1662
1692
|
let e = this.canvas.getGraphics(t)?.parentNode, n = e?.parentNode;
|
|
1663
1693
|
e && n && n.appendChild(e);
|
|
1664
1694
|
}
|
|
1665
1695
|
}
|
|
1666
|
-
},
|
|
1696
|
+
}, Fn = {
|
|
1667
1697
|
__init__: ["ttZOrder"],
|
|
1668
|
-
ttZOrder: ["type",
|
|
1669
|
-
},
|
|
1698
|
+
ttZOrder: ["type", Pn]
|
|
1699
|
+
}, In = class extends K {
|
|
1670
1700
|
_getModules() {
|
|
1671
1701
|
return [
|
|
1672
1702
|
...super._getModules(),
|
|
1673
|
-
ce,
|
|
1674
1703
|
se,
|
|
1704
|
+
w,
|
|
1705
|
+
ce,
|
|
1675
1706
|
le,
|
|
1676
1707
|
ue,
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
Nn
|
|
1708
|
+
ln,
|
|
1709
|
+
vt,
|
|
1710
|
+
xt,
|
|
1711
|
+
wt,
|
|
1712
|
+
an,
|
|
1713
|
+
pn,
|
|
1714
|
+
vn,
|
|
1715
|
+
Q,
|
|
1716
|
+
jn,
|
|
1717
|
+
Fn
|
|
1688
1718
|
];
|
|
1689
1719
|
}
|
|
1690
1720
|
undo() {
|
|
@@ -1699,34 +1729,34 @@ var Mn = class {
|
|
|
1699
1729
|
canRedo() {
|
|
1700
1730
|
return this.get("commandStack").canRedo();
|
|
1701
1731
|
}
|
|
1702
|
-
},
|
|
1703
|
-
function
|
|
1704
|
-
return
|
|
1705
|
-
...
|
|
1732
|
+
}, Ln = "team-topologies";
|
|
1733
|
+
function Rn(e = {}) {
|
|
1734
|
+
return Hn(new In({
|
|
1735
|
+
...Bn(e),
|
|
1706
1736
|
undoRedoKeys: e.undoRedoKeys ?? !0,
|
|
1707
1737
|
freeArea: e.freeArea,
|
|
1708
1738
|
freeRectCenter: e.freeRectCenter
|
|
1709
1739
|
}), !0, e.fitOnImport ?? !0);
|
|
1710
1740
|
}
|
|
1711
|
-
function
|
|
1712
|
-
return
|
|
1741
|
+
function zn(e = {}) {
|
|
1742
|
+
return Hn(new K(Bn(e)), !1, e.fitOnImport ?? !0);
|
|
1713
1743
|
}
|
|
1714
|
-
function
|
|
1744
|
+
function Bn(e) {
|
|
1715
1745
|
return {
|
|
1716
1746
|
width: "100%",
|
|
1717
1747
|
height: "100%",
|
|
1718
1748
|
additionalModules: e.additionalModules ?? []
|
|
1719
1749
|
};
|
|
1720
1750
|
}
|
|
1721
|
-
function
|
|
1751
|
+
function Vn(e) {
|
|
1722
1752
|
let t = ee(e.trim() === "" ? {} : JSON.parse(e));
|
|
1723
1753
|
if (!t.ok) throw Error(t.error);
|
|
1724
1754
|
return t.document;
|
|
1725
1755
|
}
|
|
1726
|
-
function
|
|
1756
|
+
function Hn(e, t, n) {
|
|
1727
1757
|
let r = e.get("eventBus"), i = e.get("canvas"), a = e.get("elementRegistry"), o = e.get("selection"), s = /* @__PURE__ */ new Set(), c = 0, l = !1, u = "", d = {
|
|
1728
|
-
notation:
|
|
1729
|
-
apiVersion:
|
|
1758
|
+
notation: Ln,
|
|
1759
|
+
apiVersion: Se,
|
|
1730
1760
|
editable: t
|
|
1731
1761
|
};
|
|
1732
1762
|
t && r.on("commandStack.changed", () => {
|
|
@@ -1736,21 +1766,21 @@ function Bn(e, t, n) {
|
|
|
1736
1766
|
return {
|
|
1737
1767
|
meta: d,
|
|
1738
1768
|
elements: {
|
|
1739
|
-
list: () => l ? [] : a.getAll().filter(
|
|
1769
|
+
list: () => l ? [] : a.getAll().filter(E).map(Wn),
|
|
1740
1770
|
reveal(e) {
|
|
1741
1771
|
if (l) return !1;
|
|
1742
1772
|
let t = a.get(e);
|
|
1743
|
-
return
|
|
1773
|
+
return E(t) ? (o.select(t), i.scrollToElement(t), !0) : !1;
|
|
1744
1774
|
},
|
|
1745
|
-
selection: () => l ? [] :
|
|
1775
|
+
selection: () => l ? [] : Un(o.get()),
|
|
1746
1776
|
onSelection(e) {
|
|
1747
|
-
let t = (t) => e(
|
|
1777
|
+
let t = (t) => e(Un(t.newSelection ?? []));
|
|
1748
1778
|
return r.on("selection.changed", t), () => r.off("selection.changed", t);
|
|
1749
1779
|
},
|
|
1750
1780
|
bounds(e) {
|
|
1751
1781
|
if (l) return;
|
|
1752
1782
|
let t = a.get(e);
|
|
1753
|
-
if (!
|
|
1783
|
+
if (!E(t)) return;
|
|
1754
1784
|
let { x: n, y: r, width: i, height: o } = t;
|
|
1755
1785
|
return {
|
|
1756
1786
|
x: n,
|
|
@@ -1766,7 +1796,7 @@ function Bn(e, t, n) {
|
|
|
1766
1796
|
},
|
|
1767
1797
|
async importText(t) {
|
|
1768
1798
|
if (l) throw Error("The modeler was destroyed.");
|
|
1769
|
-
let r =
|
|
1799
|
+
let r = Vn(t);
|
|
1770
1800
|
c += 1;
|
|
1771
1801
|
try {
|
|
1772
1802
|
let { warnings: t } = e.importDocument(r, { fit: n });
|
|
@@ -1789,19 +1819,22 @@ function Bn(e, t, n) {
|
|
|
1789
1819
|
width: n,
|
|
1790
1820
|
height: r
|
|
1791
1821
|
};
|
|
1792
|
-
return
|
|
1822
|
+
return Gn(a) ? a : void 0;
|
|
1793
1823
|
} catch {
|
|
1794
1824
|
return;
|
|
1795
1825
|
}
|
|
1796
1826
|
},
|
|
1797
1827
|
setViewState(e) {
|
|
1798
|
-
!l &&
|
|
1828
|
+
!l && Gn(e) && i.viewbox({
|
|
1799
1829
|
x: e.x,
|
|
1800
1830
|
y: e.y,
|
|
1801
1831
|
width: e.width,
|
|
1802
1832
|
height: e.height
|
|
1803
1833
|
});
|
|
1804
1834
|
},
|
|
1835
|
+
contentBounds() {
|
|
1836
|
+
return e.contentBounds();
|
|
1837
|
+
},
|
|
1805
1838
|
destroy() {
|
|
1806
1839
|
if (!l) {
|
|
1807
1840
|
try {
|
|
@@ -1814,17 +1847,17 @@ function Bn(e, t, n) {
|
|
|
1814
1847
|
}
|
|
1815
1848
|
};
|
|
1816
1849
|
}
|
|
1817
|
-
function
|
|
1818
|
-
return e.filter(
|
|
1850
|
+
function Un(e) {
|
|
1851
|
+
return e.filter(E).map((e) => e.id);
|
|
1819
1852
|
}
|
|
1820
|
-
function
|
|
1853
|
+
function Wn(e) {
|
|
1821
1854
|
let t = e.ttLabel;
|
|
1822
1855
|
return t ? {
|
|
1823
1856
|
id: e.id,
|
|
1824
1857
|
name: t
|
|
1825
1858
|
} : { id: e.id };
|
|
1826
1859
|
}
|
|
1827
|
-
function
|
|
1860
|
+
function Gn(e) {
|
|
1828
1861
|
if (typeof e != "object" || !e) return !1;
|
|
1829
1862
|
let { x: t, y: n, width: r, height: i } = e;
|
|
1830
1863
|
return $(t) && $(n) && $(r) && $(i) && r > 0 && i > 0;
|
|
@@ -1833,6 +1866,6 @@ function $(e) {
|
|
|
1833
1866
|
return typeof e == "number" && Number.isFinite(e);
|
|
1834
1867
|
}
|
|
1835
1868
|
//#endregion
|
|
1836
|
-
export {
|
|
1869
|
+
export { we as CD_TOKENS, G as GEIST_UNICODE_RANGES, Pt as ICON_DOWNLOAD, Dt as ICON_LINK, Nt as ICON_MAXIMIZE, At as ICON_MENU, Ot as ICON_MESSAGE_SQUARE_PLUS, jt as ICON_MINUS, Tt as ICON_PENCIL, Mt as ICON_PLUS, kt as ICON_SQUARE_DASHED_MOUSE_POINTER, Et as ICON_TRASH, Ft as ICON_X, M as MIRAGON, In as Modeler, K as NavigatedViewer, X as READ_ONLY_CHANGED_EVENT, F as ROOT_ID, Ln as TEAM_TOPOLOGIES_NOTATION, qe as TeamTopologiesRenderer, Ct as TtAssociationBehavior, Ae as TtBaseViewer, fn as TtContextPadProvider, je as TtElementFactory, Qe as TtExporter, St as TtFlatModelBehavior, Ze as TtImporter, Dn as TtKeyboard, _n as TtLabelEditing, _t as TtLayouter, gt as TtModeling, rn as TtPaletteProvider, cn as TtReadOnly, bt as TtRules, at as TtViewport, Pn as TtZOrder, lt as Viewer, Gt as annotationIconSvg, Rn as createCollaborativeModeler, zn as createCollaborativeViewer, st as embedSvgStyles, Wt as flowIconSvg, ot as geistFontFaceCss, J as iconMarkup, qt as interactionIconSvg, ct as ioModule, A as isTtAnnotation, j as isTtAssociation, E as isTtElement, k as isTtFlow, O as isTtInteraction, D as isTtTeam, Vn as parseDocumentText, Oe as saveSVG, Ut as teamIconSvg, wt as ttBehaviorsModule, pn as ttContextPadModule, Xe as ttDrawModule, Q as ttKeyboardModule, vn as ttLabelEditingModule, Me as ttModelModule, vt as ttModelingModule, an as ttPaletteModule, ln as ttReadOnlyModule, xt as ttRulesModule, Fn as ttZOrderModule };
|
|
1837
1870
|
|
|
1838
1871
|
//# sourceMappingURL=index.js.map
|