@coldtea/pr-lens-renderer 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/svg/architecture.d.ts +6 -6
- package/dist/svg/architecture.d.ts.map +1 -1
- package/dist/svg/architecture.js +56 -34
- package/dist/svg/architecture.js.map +1 -1
- package/dist/svg/dataflow.d.ts +1 -1
- package/dist/svg/dataflow.d.ts.map +1 -1
- package/dist/svg/dataflow.js +17 -11
- package/dist/svg/dataflow.js.map +1 -1
- package/dist/svg/document.d.ts.map +1 -1
- package/dist/svg/document.js +3 -50
- package/dist/svg/document.js.map +1 -1
- package/dist/svg/icons.d.ts +2 -1
- package/dist/svg/icons.d.ts.map +1 -1
- package/dist/svg/icons.js +31 -23
- package/dist/svg/icons.js.map +1 -1
- package/dist/svg/styles.d.ts +74 -0
- package/dist/svg/styles.d.ts.map +1 -0
- package/dist/svg/styles.js +109 -0
- package/dist/svg/styles.js.map +1 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +1 -1
- package/src/svg/architecture.ts +64 -36
- package/src/svg/dataflow.ts +32 -23
- package/src/svg/document.ts +4 -53
- package/src/svg/icons.ts +39 -28
- package/src/svg/styles.ts +122 -0
- package/src/version.ts +1 -1
package/dist/svg/icons.js
CHANGED
|
@@ -2,22 +2,13 @@ import { assertNever } from "@coldtea/pr-lens-schema";
|
|
|
2
2
|
import { coord } from "../geometry.js";
|
|
3
3
|
import { MONO_STACK } from "../text.js";
|
|
4
4
|
import { lines, tag, textNode, wrap } from "./primitives.js";
|
|
5
|
-
const
|
|
6
|
-
const glyphText = (cx, cy, content, style) => textNode({
|
|
5
|
+
const glyphText = (cx, cy, content, attributes) => textNode({
|
|
7
6
|
class: "glyph",
|
|
8
7
|
x: coord(cx),
|
|
9
8
|
y: coord(cy + 4.5),
|
|
10
9
|
"text-anchor": "middle",
|
|
11
|
-
|
|
10
|
+
...attributes,
|
|
12
11
|
}, content);
|
|
13
|
-
const box = (cx, cy, width, height, radius) => tag("rect", {
|
|
14
|
-
class: "glyph-stroke",
|
|
15
|
-
x: coord(cx - width / 2),
|
|
16
|
-
y: coord(cy - height / 2),
|
|
17
|
-
width: coord(width),
|
|
18
|
-
height: coord(height),
|
|
19
|
-
rx: radius === undefined ? undefined : coord(radius),
|
|
20
|
-
});
|
|
21
12
|
/**
|
|
22
13
|
* The chip glyph for a node's kind, centred on a point.
|
|
23
14
|
*
|
|
@@ -25,12 +16,22 @@ const box = (cx, cy, width, height, radius) => tag("rect", {
|
|
|
25
16
|
* is why the kind enum is coarse. Every kind draws something: a card with an
|
|
26
17
|
* empty chip reads as a rendering fault rather than as an unknown kind.
|
|
27
18
|
*/
|
|
28
|
-
const kindGlyph = (kind, cx, cy) => {
|
|
19
|
+
const kindGlyph = (kind, cx, cy, styles) => {
|
|
20
|
+
const stroked = (path) => tag("path", { class: "glyph-stroke", d: path, ...styles.glyphStroke });
|
|
21
|
+
const box = (cx, cy, width, height, radius) => tag("rect", {
|
|
22
|
+
class: "glyph-stroke",
|
|
23
|
+
x: coord(cx - width / 2),
|
|
24
|
+
y: coord(cy - height / 2),
|
|
25
|
+
width: coord(width),
|
|
26
|
+
height: coord(height),
|
|
27
|
+
rx: radius === undefined ? undefined : coord(radius),
|
|
28
|
+
...styles.glyphStroke,
|
|
29
|
+
});
|
|
29
30
|
switch (kind) {
|
|
30
31
|
case "service":
|
|
31
32
|
return lines([
|
|
32
33
|
box(cx, cy, 13, 13, 3),
|
|
33
|
-
tag("circle", { class: "glyph", cx: coord(cx), cy: coord(cy), r: 2 }),
|
|
34
|
+
tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx), cy: coord(cy), r: 2 }),
|
|
34
35
|
]);
|
|
35
36
|
case "app":
|
|
36
37
|
return lines([
|
|
@@ -38,17 +39,23 @@ const kindGlyph = (kind, cx, cy) => {
|
|
|
38
39
|
stroked(`M${coord(cx - 7)},${coord(cy - 2)} h14`),
|
|
39
40
|
]);
|
|
40
41
|
case "module":
|
|
41
|
-
return glyphText(cx, cy, "{ }",
|
|
42
|
+
return glyphText(cx, cy, "{ }", { ...styles.glyph, "font-size": 11, "font-family": MONO_STACK });
|
|
42
43
|
case "function":
|
|
43
|
-
return glyphText(cx, cy, "ƒ",
|
|
44
|
+
return glyphText(cx, cy, "ƒ", {
|
|
45
|
+
...styles.glyph,
|
|
46
|
+
"font-size": 14,
|
|
47
|
+
"font-style": "italic",
|
|
48
|
+
"font-family": "Georgia,serif",
|
|
49
|
+
});
|
|
44
50
|
case "route":
|
|
45
51
|
return tag("path", {
|
|
46
52
|
class: "glyph",
|
|
53
|
+
...styles.glyph,
|
|
47
54
|
d: `M${coord(cx - 7)},${coord(cy - 6)} L${coord(cx + 7)},${coord(cy)} L${coord(cx - 7)},${coord(cy + 6)} Z`,
|
|
48
55
|
});
|
|
49
56
|
case "job":
|
|
50
57
|
return lines([
|
|
51
|
-
tag("circle", { class: "glyph-stroke", cx: coord(cx), cy: coord(cy), r: 6.5 }),
|
|
58
|
+
tag("circle", { class: "glyph-stroke", ...styles.glyphStroke, cx: coord(cx), cy: coord(cy), r: 6.5 }),
|
|
52
59
|
stroked(`M${coord(cx)},${coord(cy - 3.5)} V${coord(cy)} H${coord(cx + 3)}`),
|
|
53
60
|
]);
|
|
54
61
|
case "queue":
|
|
@@ -59,12 +66,13 @@ const kindGlyph = (kind, cx, cy) => {
|
|
|
59
66
|
]);
|
|
60
67
|
case "datastore":
|
|
61
68
|
return lines([
|
|
62
|
-
tag("ellipse", { class: "glyph-stroke", cx: coord(cx), cy: coord(cy - 4.5), rx: 6.5, ry: 2.6 }),
|
|
69
|
+
tag("ellipse", { class: "glyph-stroke", ...styles.glyphStroke, cx: coord(cx), cy: coord(cy - 4.5), rx: 6.5, ry: 2.6 }),
|
|
63
70
|
stroked(`M${coord(cx - 6.5)},${coord(cy - 4.5)} v9 a6.5,2.6 0 0 0 13 0 v-9`),
|
|
64
71
|
]);
|
|
65
72
|
case "cache":
|
|
66
73
|
return tag("path", {
|
|
67
74
|
class: "glyph",
|
|
75
|
+
...styles.glyph,
|
|
68
76
|
d: `M${coord(cx + 1)},${coord(cy - 7)} L${coord(cx - 6)},${coord(cy + 1)} H${coord(cx - 1)} L${coord(cx - 1)},${coord(cy + 7)} L${coord(cx + 6)},${coord(cy - 1)} H${coord(cx + 1)} Z`,
|
|
69
77
|
});
|
|
70
78
|
case "external":
|
|
@@ -81,8 +89,8 @@ const kindGlyph = (kind, cx, cy) => {
|
|
|
81
89
|
return lines([
|
|
82
90
|
stroked(`M${coord(cx - 7)},${coord(cy - 4)} h14`),
|
|
83
91
|
stroked(`M${coord(cx - 7)},${coord(cy + 4)} h14`),
|
|
84
|
-
tag("circle", { class: "glyph", cx: coord(cx - 2), cy: coord(cy - 4), r: 2.2 }),
|
|
85
|
-
tag("circle", { class: "glyph", cx: coord(cx + 3), cy: coord(cy + 4), r: 2.2 }),
|
|
92
|
+
tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx - 2), cy: coord(cy - 4), r: 2.2 }),
|
|
93
|
+
tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx + 3), cy: coord(cy + 4), r: 2.2 }),
|
|
86
94
|
]);
|
|
87
95
|
case "test":
|
|
88
96
|
return stroked(`M${coord(cx - 6)},${coord(cy)} l4,4 l8,-8`);
|
|
@@ -94,13 +102,13 @@ const kindGlyph = (kind, cx, cy) => {
|
|
|
94
102
|
]);
|
|
95
103
|
case "other":
|
|
96
104
|
return lines([
|
|
97
|
-
tag("circle", { class: "glyph", cx: coord(cx - 5), cy: coord(cy), r: 1.8 }),
|
|
98
|
-
tag("circle", { class: "glyph", cx: coord(cx), cy: coord(cy), r: 1.8 }),
|
|
99
|
-
tag("circle", { class: "glyph", cx: coord(cx + 5), cy: coord(cy), r: 1.8 }),
|
|
105
|
+
tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx - 5), cy: coord(cy), r: 1.8 }),
|
|
106
|
+
tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx), cy: coord(cy), r: 1.8 }),
|
|
107
|
+
tag("circle", { class: "glyph", ...styles.glyph, cx: coord(cx + 5), cy: coord(cy), r: 1.8 }),
|
|
100
108
|
]);
|
|
101
109
|
default:
|
|
102
110
|
return assertNever(kind, "Unhandled node kind");
|
|
103
111
|
}
|
|
104
112
|
};
|
|
105
|
-
export const glyphGroup = (kind, cx, cy) => wrap("g", {}, kindGlyph(kind, cx, cy));
|
|
113
|
+
export const glyphGroup = (kind, cx, cy, styles) => wrap("g", {}, kindGlyph(kind, cx, cy, styles));
|
|
106
114
|
//# sourceMappingURL=icons.js.map
|
package/dist/svg/icons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/svg/icons.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/svg/icons.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import type { Delta, FlowMessage, GraphEdge } from "@coldtea/pr-lens-schema";
|
|
2
|
+
import type { Palette } from "../theme.js";
|
|
3
|
+
import type { Attributes } from "./primitives.js";
|
|
4
|
+
import { type Tone } from "./document.js";
|
|
5
|
+
export declare const stylesFor: (palette: Palette) => {
|
|
6
|
+
lane: {
|
|
7
|
+
fill: string;
|
|
8
|
+
};
|
|
9
|
+
laneLabel: {
|
|
10
|
+
"font-size": number;
|
|
11
|
+
"font-weight": number;
|
|
12
|
+
"letter-spacing": string;
|
|
13
|
+
fill: string;
|
|
14
|
+
};
|
|
15
|
+
title: {
|
|
16
|
+
"font-weight": number;
|
|
17
|
+
fill: string;
|
|
18
|
+
};
|
|
19
|
+
subtitle: {
|
|
20
|
+
"font-size": number;
|
|
21
|
+
fill: string;
|
|
22
|
+
"font-family": string;
|
|
23
|
+
};
|
|
24
|
+
chip: {
|
|
25
|
+
fill: string;
|
|
26
|
+
};
|
|
27
|
+
glyph: {
|
|
28
|
+
fill: string;
|
|
29
|
+
};
|
|
30
|
+
glyphStroke: {
|
|
31
|
+
stroke: string;
|
|
32
|
+
"stroke-width": number;
|
|
33
|
+
fill: string;
|
|
34
|
+
};
|
|
35
|
+
badgeText: {
|
|
36
|
+
"font-size": number;
|
|
37
|
+
"font-weight": number;
|
|
38
|
+
"letter-spacing": string;
|
|
39
|
+
};
|
|
40
|
+
glow: {
|
|
41
|
+
fill: string;
|
|
42
|
+
"stroke-width": number;
|
|
43
|
+
opacity: number;
|
|
44
|
+
};
|
|
45
|
+
pill: {
|
|
46
|
+
fill: string;
|
|
47
|
+
stroke: string;
|
|
48
|
+
"stroke-width": number;
|
|
49
|
+
};
|
|
50
|
+
pillText: {
|
|
51
|
+
"font-size": number;
|
|
52
|
+
"font-weight": number;
|
|
53
|
+
};
|
|
54
|
+
lifeline: {
|
|
55
|
+
stroke: string;
|
|
56
|
+
"stroke-width": number;
|
|
57
|
+
"stroke-dasharray": string;
|
|
58
|
+
};
|
|
59
|
+
activation: {
|
|
60
|
+
fill: string;
|
|
61
|
+
stroke: string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
export type SvgStyles = ReturnType<typeof stylesFor>;
|
|
65
|
+
export declare const cardAttributes: (delta: Delta, palette: Palette) => Attributes;
|
|
66
|
+
export declare const cardGroupAttributes: (delta: Delta, palette: Palette) => Attributes;
|
|
67
|
+
export declare const badgeColours: (tone: Tone, palette: Palette) => {
|
|
68
|
+
fill: string;
|
|
69
|
+
stroke: string;
|
|
70
|
+
text: string;
|
|
71
|
+
};
|
|
72
|
+
export declare const edgeAttributes: (edge: GraphEdge, palette: Palette) => Attributes;
|
|
73
|
+
export declare const messageAttributes: (message: FlowMessage, palette: Palette) => Attributes;
|
|
74
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/svg/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAE7E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAuB,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAG/D,eAAO,MAAM,SAAS,YAAa,OAAO;;QAChC,IAAI;;;QACC,WAAW;QAAM,aAAa;QAAO,gBAAgB;QAAW,IAAI;;;QACxE,aAAa;QAAO,IAAI;;;;;;;;QAEzB,IAAI;;;QACH,IAAI;;;QACE,MAAM;QAAiB,cAAc;QAAO,IAAI;;;QAClD,WAAW;QAAO,aAAa;QAAO,gBAAgB;;;QAC3D,IAAI;QAAU,cAAc;QAAK,OAAO;;;QACxC,IAAI;QAAgB,MAAM;QAAsB,cAAc;;;QAC1D,WAAW;QAAO,aAAa;;;QAC/B,MAAM;QAAoB,cAAc;QAAK,kBAAkB;;;QAC7D,IAAI;QAAqB,MAAM;;CAC7C,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAiBrD,eAAO,MAAM,cAAc,UAAW,KAAK,WAAW,OAAO,KAAG,UAI9D,CAAC;AAgBH,eAAO,MAAM,mBAAmB,UAAW,KAAK,WAAW,OAAO,KAAG,UAGnE,CAAC;AAEH,eAAO,MAAM,YAAY,SAAU,IAAI,WAAW,OAAO;;;;CAaxD,CAAC;AAUF,eAAO,MAAM,cAAc,SAAU,SAAS,WAAW,OAAO,KAAG,UAelE,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAAa,WAAW,WAAW,OAAO,KAAG,UAe1E,CAAC"}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { assertNever } from "@coldtea/pr-lens-schema";
|
|
2
|
+
import { MONO_STACK } from "../text.js";
|
|
3
|
+
import { toneColour, toneFor } from "./document.js";
|
|
4
|
+
// GitHub's attachment viewer can ignore CSS, so appearance lives on the elements.
|
|
5
|
+
export const stylesFor = (palette) => ({
|
|
6
|
+
lane: { fill: palette.lane },
|
|
7
|
+
laneLabel: { "font-size": 10, "font-weight": 700, "letter-spacing": ".12em", fill: palette.muted },
|
|
8
|
+
title: { "font-weight": 600, fill: palette.foreground },
|
|
9
|
+
subtitle: { "font-size": 9.5, fill: palette.muted, "font-family": MONO_STACK },
|
|
10
|
+
chip: { fill: palette.chip },
|
|
11
|
+
glyph: { fill: palette.muted },
|
|
12
|
+
glyphStroke: { stroke: palette.muted, "stroke-width": 1.4, fill: "none" },
|
|
13
|
+
badgeText: { "font-size": 8.5, "font-weight": 700, "letter-spacing": ".06em" },
|
|
14
|
+
glow: { fill: "none", "stroke-width": 7, opacity: 0.14 },
|
|
15
|
+
pill: { fill: palette.pill, stroke: palette.pillBorder, "stroke-width": 1 },
|
|
16
|
+
pillText: { "font-size": 9.5, "font-weight": 600 },
|
|
17
|
+
lifeline: { stroke: palette.lifeline, "stroke-width": 1, "stroke-dasharray": "3 4" },
|
|
18
|
+
activation: { fill: palette.addedFill, stroke: palette.addedBorder },
|
|
19
|
+
});
|
|
20
|
+
const cardStroke = (delta, palette) => {
|
|
21
|
+
switch (delta) {
|
|
22
|
+
case "added":
|
|
23
|
+
return { stroke: palette.added, "stroke-opacity": 0.55 };
|
|
24
|
+
case "modified":
|
|
25
|
+
return { stroke: palette.modified, "stroke-opacity": 0.5 };
|
|
26
|
+
case "removed":
|
|
27
|
+
return { stroke: palette.removed, "stroke-dasharray": "4 3", "stroke-opacity": 0.6 };
|
|
28
|
+
case "unchanged":
|
|
29
|
+
return { stroke: palette.cardBorder };
|
|
30
|
+
default:
|
|
31
|
+
return assertNever(delta);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
export const cardAttributes = (delta, palette) => ({
|
|
35
|
+
fill: palette.card,
|
|
36
|
+
"stroke-width": 1,
|
|
37
|
+
...cardStroke(delta, palette),
|
|
38
|
+
});
|
|
39
|
+
const cardOpacity = (delta) => {
|
|
40
|
+
switch (delta) {
|
|
41
|
+
case "removed":
|
|
42
|
+
return 0.55;
|
|
43
|
+
case "unchanged":
|
|
44
|
+
return 0.82;
|
|
45
|
+
case "added":
|
|
46
|
+
case "modified":
|
|
47
|
+
return undefined;
|
|
48
|
+
default:
|
|
49
|
+
return assertNever(delta);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
export const cardGroupAttributes = (delta, palette) => ({
|
|
53
|
+
filter: `drop-shadow(0 1px 2px ${palette.shadow})`,
|
|
54
|
+
opacity: cardOpacity(delta),
|
|
55
|
+
});
|
|
56
|
+
export const badgeColours = (tone, palette) => {
|
|
57
|
+
switch (tone) {
|
|
58
|
+
case "added":
|
|
59
|
+
return { fill: palette.addedFill, stroke: palette.addedBorder, text: palette.addedText };
|
|
60
|
+
case "modified":
|
|
61
|
+
return { fill: palette.modifiedFill, stroke: palette.modifiedBorder, text: palette.modifiedText };
|
|
62
|
+
case "removed":
|
|
63
|
+
return { fill: palette.removedFill, stroke: palette.removedBorder, text: palette.removedText };
|
|
64
|
+
case "neutral":
|
|
65
|
+
return { fill: palette.neutralFill, stroke: palette.cardBorder, text: palette.muted };
|
|
66
|
+
default:
|
|
67
|
+
return assertNever(tone);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const strokeAttributes = (delta, palette) => ({
|
|
71
|
+
fill: "none",
|
|
72
|
+
stroke: toneColour(palette, toneFor(delta)),
|
|
73
|
+
"stroke-width": 1.5,
|
|
74
|
+
"stroke-dasharray": delta === "removed" ? "5 4" : undefined,
|
|
75
|
+
opacity: delta === "removed" ? 0.7 : undefined,
|
|
76
|
+
});
|
|
77
|
+
export const edgeAttributes = (edge, palette) => {
|
|
78
|
+
const attributes = {
|
|
79
|
+
...strokeAttributes(edge.delta, palette),
|
|
80
|
+
...(edge.delta === "unchanged" ? { opacity: 0.82 } : {}),
|
|
81
|
+
};
|
|
82
|
+
switch (edge.emphasis) {
|
|
83
|
+
case "hero":
|
|
84
|
+
return { ...attributes, "stroke-width": 2.25 };
|
|
85
|
+
case "muted":
|
|
86
|
+
return { ...attributes, opacity: 0.45 };
|
|
87
|
+
case "normal":
|
|
88
|
+
return attributes;
|
|
89
|
+
default:
|
|
90
|
+
return assertNever(edge.emphasis);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
export const messageAttributes = (message, palette) => {
|
|
94
|
+
const attributes = {
|
|
95
|
+
...strokeAttributes(message.delta, palette),
|
|
96
|
+
"stroke-width": message.delta === "added" ? 2.25 : 1.5,
|
|
97
|
+
};
|
|
98
|
+
switch (message.kind) {
|
|
99
|
+
case "return":
|
|
100
|
+
return { ...attributes, "stroke-dasharray": "4 3", opacity: 0.8 };
|
|
101
|
+
case "sync":
|
|
102
|
+
case "async":
|
|
103
|
+
case "self":
|
|
104
|
+
return attributes;
|
|
105
|
+
default:
|
|
106
|
+
return assertNever(message.kind);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/svg/styles.ts"],"names":[],"mappings":"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"}
|
package/dist/version.d.ts
CHANGED
package/dist/version.js
CHANGED
package/package.json
CHANGED
package/src/svg/architecture.ts
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
|
-
import type { GraphEdge, GraphNode, LayoutHints } from "@coldtea/pr-lens-schema";
|
|
2
1
|
import { assertNever } from "@coldtea/pr-lens-schema";
|
|
2
|
+
import type { GraphEdge, GraphNode, LayoutHints } from "@coldtea/pr-lens-schema";
|
|
3
|
+
import { truncate } from "../text.js";
|
|
4
|
+
import { glyphGroup } from "./icons.js";
|
|
5
|
+
import type { Palette } from "../theme.js";
|
|
6
|
+
import { DIAGRAM_MARGIN } from "../design.js";
|
|
7
|
+
import { travellingPulses } from "./pulse.js";
|
|
8
|
+
import type { ScopedGraph } from "../scope.js";
|
|
9
|
+
import { canvasFor, union } from "../bounds.js";
|
|
10
|
+
import { coord, type Box } from "../geometry.js";
|
|
11
|
+
import { placeLabelPills } from "../layout/labels.js";
|
|
12
|
+
import { relieveCongestion } from "../layout/congestion.js";
|
|
13
|
+
import { lines, tag, textNode, wrap } from "./primitives.js";
|
|
14
|
+
import { curveBounds, type RoutedEdge } from "../layout/edges.js";
|
|
15
|
+
import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
|
|
16
|
+
import { markerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
|
|
17
|
+
import {
|
|
18
|
+
badgeColours,
|
|
19
|
+
cardAttributes,
|
|
20
|
+
cardGroupAttributes,
|
|
21
|
+
edgeAttributes,
|
|
22
|
+
stylesFor,
|
|
23
|
+
} from "./styles.js";
|
|
24
|
+
import {
|
|
25
|
+
badgeRow,
|
|
26
|
+
badgeWidth,
|
|
27
|
+
cardBadges,
|
|
28
|
+
cardTextWidth,
|
|
29
|
+
deltaBadgeText,
|
|
30
|
+
laneHeaderText,
|
|
31
|
+
type PlacedNode,
|
|
32
|
+
} from "../layout/architecture.js";
|
|
3
33
|
import {
|
|
4
34
|
BADGE_GAP,
|
|
5
35
|
BADGE_HEIGHT,
|
|
@@ -16,35 +46,13 @@ import {
|
|
|
16
46
|
LANE_RADIUS,
|
|
17
47
|
SUBTITLE_SIZE,
|
|
18
48
|
} from "../design.js";
|
|
19
|
-
import { atlasBoxes, emptyAtlas, type RenderAtlas } from "../atlas.js";
|
|
20
|
-
import { canvasFor, union } from "../bounds.js";
|
|
21
|
-
import { DIAGRAM_MARGIN } from "../design.js";
|
|
22
|
-
import { coord, type Box } from "../geometry.js";
|
|
23
|
-
import {
|
|
24
|
-
badgeRow,
|
|
25
|
-
badgeWidth,
|
|
26
|
-
cardBadges,
|
|
27
|
-
cardTextWidth,
|
|
28
|
-
deltaBadgeText,
|
|
29
|
-
laneHeaderText,
|
|
30
|
-
type PlacedNode,
|
|
31
|
-
} from "../layout/architecture.js";
|
|
32
|
-
import { relieveCongestion } from "../layout/congestion.js";
|
|
33
|
-
import { curveBounds, type RoutedEdge } from "../layout/edges.js";
|
|
34
|
-
import { placeLabelPills } from "../layout/labels.js";
|
|
35
|
-
import type { ScopedGraph } from "../scope.js";
|
|
36
|
-
import { truncate } from "../text.js";
|
|
37
|
-
import type { Palette } from "../theme.js";
|
|
38
|
-
import { markerFor, shifted, toneColour, toneFor, type Tone } from "./document.js";
|
|
39
|
-
import { glyphGroup } from "./icons.js";
|
|
40
|
-
import { lines, tag, textNode, wrap } from "./primitives.js";
|
|
41
|
-
import { travellingPulses } from "./pulse.js";
|
|
42
49
|
|
|
43
50
|
const badgeTone = (node: GraphNode, text: string): Tone =>
|
|
44
51
|
text === deltaBadgeText(node.delta) ? toneFor(node.delta) : "neutral";
|
|
45
52
|
|
|
46
53
|
/** The badge row, laid left to right across the strip the layout reserved. */
|
|
47
|
-
const paintBadges = (placed: PlacedNode): string => {
|
|
54
|
+
const paintBadges = (placed: PlacedNode, palette: Palette): string => {
|
|
55
|
+
const styles = stylesFor(palette);
|
|
48
56
|
const row = badgeRow(placed);
|
|
49
57
|
if (row === undefined) return "";
|
|
50
58
|
|
|
@@ -52,6 +60,7 @@ const paintBadges = (placed: PlacedNode): string => {
|
|
|
52
60
|
return lines(
|
|
53
61
|
row.badges.map((text) => {
|
|
54
62
|
const width = badgeWidth(text);
|
|
63
|
+
const colours = badgeColours(badgeTone(placed.node, text), palette);
|
|
55
64
|
const painted = wrap(
|
|
56
65
|
"g",
|
|
57
66
|
{ class: `bdg bdg-${badgeTone(placed.node, text)}` },
|
|
@@ -61,12 +70,17 @@ const paintBadges = (placed: PlacedNode): string => {
|
|
|
61
70
|
width: coord(width),
|
|
62
71
|
height: BADGE_HEIGHT,
|
|
63
72
|
rx: BADGE_RADIUS,
|
|
73
|
+
fill: colours.fill,
|
|
74
|
+
stroke: colours.stroke,
|
|
75
|
+
"stroke-width": 1,
|
|
64
76
|
}) +
|
|
65
77
|
textNode(
|
|
66
78
|
{
|
|
67
79
|
x: coord(x + width / 2),
|
|
68
80
|
y: coord(row.box.y + BADGE_HEIGHT / 2 + 3),
|
|
69
81
|
"text-anchor": "middle",
|
|
82
|
+
...styles.badgeText,
|
|
83
|
+
fill: colours.text,
|
|
70
84
|
},
|
|
71
85
|
text,
|
|
72
86
|
),
|
|
@@ -91,7 +105,8 @@ const cardOutlineClass = (node: GraphNode): string => {
|
|
|
91
105
|
}
|
|
92
106
|
};
|
|
93
107
|
|
|
94
|
-
export const paintCard = (placed: PlacedNode): string => {
|
|
108
|
+
export const paintCard = (placed: PlacedNode, palette: Palette): string => {
|
|
109
|
+
const styles = stylesFor(palette);
|
|
95
110
|
const { node, box, showIcon, titleSize } = placed;
|
|
96
111
|
const textX = box.x + CARD_PADDING_X + (showIcon ? ICON_CHIP_SIZE + ICON_CHIP_GAP : 0);
|
|
97
112
|
const textWidth = cardTextWidth(box.width, showIcon);
|
|
@@ -106,11 +121,13 @@ export const paintCard = (placed: PlacedNode): string => {
|
|
|
106
121
|
width: ICON_CHIP_SIZE,
|
|
107
122
|
height: ICON_CHIP_SIZE,
|
|
108
123
|
rx: ICON_CHIP_RADIUS,
|
|
124
|
+
...styles.chip,
|
|
109
125
|
}) +
|
|
110
126
|
glyphGroup(
|
|
111
127
|
node.kind,
|
|
112
128
|
box.x + CARD_PADDING_X + ICON_CHIP_SIZE / 2,
|
|
113
129
|
box.y + box.height / 2,
|
|
130
|
+
styles,
|
|
114
131
|
)
|
|
115
132
|
: "";
|
|
116
133
|
|
|
@@ -120,6 +137,8 @@ export const paintCard = (placed: PlacedNode): string => {
|
|
|
120
137
|
x: coord(textX),
|
|
121
138
|
y: coord(titleBaseline),
|
|
122
139
|
"font-size": titleSize,
|
|
140
|
+
...styles.title,
|
|
141
|
+
"text-decoration": node.delta === "removed" ? "line-through" : undefined,
|
|
123
142
|
},
|
|
124
143
|
truncate(node.label, "sans-bold", titleSize, textWidth),
|
|
125
144
|
);
|
|
@@ -128,7 +147,7 @@ export const paintCard = (placed: PlacedNode): string => {
|
|
|
128
147
|
node.subtitle === undefined
|
|
129
148
|
? ""
|
|
130
149
|
: textNode(
|
|
131
|
-
{ class: "nsub", x: coord(textX), y: coord(box.y + 45) },
|
|
150
|
+
{ class: "nsub", x: coord(textX), y: coord(box.y + 45), ...styles.subtitle },
|
|
132
151
|
truncate(node.subtitle, "mono", SUBTITLE_SIZE, textWidth),
|
|
133
152
|
);
|
|
134
153
|
|
|
@@ -137,7 +156,7 @@ export const paintCard = (placed: PlacedNode): string => {
|
|
|
137
156
|
|
|
138
157
|
return wrap(
|
|
139
158
|
"g",
|
|
140
|
-
{ class: groupClass },
|
|
159
|
+
{ class: groupClass, ...cardGroupAttributes(node.delta, palette) },
|
|
141
160
|
lines([
|
|
142
161
|
tag("rect", {
|
|
143
162
|
class: cardOutlineClass(node),
|
|
@@ -146,11 +165,12 @@ export const paintCard = (placed: PlacedNode): string => {
|
|
|
146
165
|
width: coord(box.width),
|
|
147
166
|
height: coord(box.height),
|
|
148
167
|
rx: CARD_RADIUS,
|
|
168
|
+
...cardAttributes(node.delta, palette),
|
|
149
169
|
}),
|
|
150
170
|
chip,
|
|
151
171
|
title,
|
|
152
172
|
subtitle,
|
|
153
|
-
paintBadges(placed),
|
|
173
|
+
paintBadges(placed, palette),
|
|
154
174
|
]),
|
|
155
175
|
);
|
|
156
176
|
};
|
|
@@ -181,6 +201,7 @@ const paintEdge = (
|
|
|
181
201
|
label: Box | undefined,
|
|
182
202
|
): { markup: string; pill: string } => {
|
|
183
203
|
const { edge, path } = routed;
|
|
204
|
+
const styles = stylesFor(palette);
|
|
184
205
|
const tone = toneFor(edge.delta);
|
|
185
206
|
const hero = edge.emphasis === "hero";
|
|
186
207
|
|
|
@@ -190,24 +211,25 @@ const paintEdge = (
|
|
|
190
211
|
if (edge.delta === "unchanged") classes.push("context");
|
|
191
212
|
|
|
192
213
|
const glow = hero
|
|
193
|
-
? tag("path", { class: "glow", stroke: toneColour(palette, tone), d: path })
|
|
214
|
+
? tag("path", { class: "glow", stroke: toneColour(palette, tone), d: path, ...styles.glow })
|
|
194
215
|
: "";
|
|
195
216
|
|
|
196
217
|
return {
|
|
197
218
|
markup: lines([
|
|
198
219
|
glow,
|
|
199
|
-
tag("path", { class: classes.join(" "), d: path, "marker-end": markerFor(tone) }),
|
|
220
|
+
tag("path", { class: classes.join(" "), d: path, "marker-end": markerFor(tone), ...edgeAttributes(edge, palette) }),
|
|
200
221
|
pulses(edge, path, palette),
|
|
201
222
|
]),
|
|
202
223
|
pill:
|
|
203
224
|
label === undefined || edge.label === undefined
|
|
204
225
|
? ""
|
|
205
|
-
: paintLabelPill(edge.label, label, tone),
|
|
226
|
+
: paintLabelPill(edge.label, label, tone, palette),
|
|
206
227
|
};
|
|
207
228
|
};
|
|
208
229
|
|
|
209
|
-
export const paintLabelPill = (text: string, box: Box, tone: Tone): string =>
|
|
210
|
-
|
|
230
|
+
export const paintLabelPill = (text: string, box: Box, tone: Tone, palette: Palette): string => {
|
|
231
|
+
const styles = stylesFor(palette);
|
|
232
|
+
return wrap(
|
|
211
233
|
"g",
|
|
212
234
|
{},
|
|
213
235
|
tag("rect", {
|
|
@@ -217,6 +239,7 @@ export const paintLabelPill = (text: string, box: Box, tone: Tone): string =>
|
|
|
217
239
|
width: coord(box.width),
|
|
218
240
|
height: coord(box.height),
|
|
219
241
|
rx: box.height / 2,
|
|
242
|
+
...styles.pill,
|
|
220
243
|
}) +
|
|
221
244
|
textNode(
|
|
222
245
|
{
|
|
@@ -224,10 +247,13 @@ export const paintLabelPill = (text: string, box: Box, tone: Tone): string =>
|
|
|
224
247
|
x: coord(box.x + box.width / 2),
|
|
225
248
|
y: coord(box.y + box.height / 2 + 3.5),
|
|
226
249
|
"text-anchor": "middle",
|
|
250
|
+
...styles.pillText,
|
|
251
|
+
fill: badgeColours(tone, palette).text,
|
|
227
252
|
},
|
|
228
253
|
text,
|
|
229
254
|
),
|
|
230
255
|
);
|
|
256
|
+
};
|
|
231
257
|
|
|
232
258
|
export type ArchitecturePainting = {
|
|
233
259
|
width: number;
|
|
@@ -242,6 +268,7 @@ export const paintArchitecture = (
|
|
|
242
268
|
palette: Palette,
|
|
243
269
|
): ArchitecturePainting => {
|
|
244
270
|
const { layout, routed } = relieveCongestion(graph, hints);
|
|
271
|
+
const styles = stylesFor(palette);
|
|
245
272
|
const pills = placeLabelPills(routed);
|
|
246
273
|
|
|
247
274
|
const drawn: Box[] = layout.nodes.flatMap((node) => {
|
|
@@ -267,9 +294,10 @@ export const paintArchitecture = (
|
|
|
267
294
|
width: coord(box.width),
|
|
268
295
|
height: coord(box.height),
|
|
269
296
|
rx: LANE_RADIUS,
|
|
297
|
+
...styles.lane,
|
|
270
298
|
}),
|
|
271
299
|
textNode(
|
|
272
|
-
{ class: "lanelabel", x: coord(box.x + LANE_PADDING_X), y: LANE_HEADER_BASELINE },
|
|
300
|
+
{ class: "lanelabel", x: coord(box.x + LANE_PADDING_X), y: LANE_HEADER_BASELINE, ...styles.laneLabel },
|
|
273
301
|
laneHeaderText(lane),
|
|
274
302
|
),
|
|
275
303
|
]),
|
|
@@ -288,7 +316,7 @@ export const paintArchitecture = (
|
|
|
288
316
|
const painted = lines([
|
|
289
317
|
wrap("g", {}, lines(lanes)),
|
|
290
318
|
wrap("g", {}, lines(edgeMarkup)),
|
|
291
|
-
wrap("g", {}, lines(layout.nodes.map(paintCard))),
|
|
319
|
+
wrap("g", {}, lines(layout.nodes.map((node) => paintCard(node, palette)))),
|
|
292
320
|
wrap("g", {}, lines(pillMarkup)),
|
|
293
321
|
]);
|
|
294
322
|
|