@eventcatalog/visualiser 5.1.2 → 5.2.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/dist/{chunk-RHE5IMXC.mjs → chunk-QQUJTD6O.mjs} +1856 -1326
- package/dist/chunk-QQUJTD6O.mjs.map +1 -0
- package/dist/index.d.mts +5 -14
- package/dist/index.d.ts +5 -14
- package/dist/index.js +1701 -1417
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -3
- package/dist/node-card.css +262 -0
- package/dist/studio.css +8 -36
- package/dist/studio.d.mts +263 -127
- package/dist/studio.mjs +1016 -1192
- package/dist/studio.mjs.map +1 -1
- package/dist/styles-core.css +283 -9
- package/dist/styles.css +283 -9
- package/package.json +2 -2
- package/dist/chunk-RHE5IMXC.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -32,7 +32,6 @@ import {
|
|
|
32
32
|
FlowEdge_default,
|
|
33
33
|
FlowExpandedNode_default,
|
|
34
34
|
Flow_default,
|
|
35
|
-
FocusModeModal_default,
|
|
36
35
|
GroupNode_default,
|
|
37
36
|
LabelledDefaultEdge,
|
|
38
37
|
LabelledSmoothStepEdge,
|
|
@@ -80,7 +79,7 @@ import {
|
|
|
80
79
|
nodeConfigs,
|
|
81
80
|
normalizeOwners,
|
|
82
81
|
pauseEdgeAnimations
|
|
83
|
-
} from "./chunk-
|
|
82
|
+
} from "./chunk-QQUJTD6O.mjs";
|
|
84
83
|
import {
|
|
85
84
|
ACTOR,
|
|
86
85
|
AGENT,
|
|
@@ -146,7 +145,6 @@ export {
|
|
|
146
145
|
FlowEdge_default as FlowEdge,
|
|
147
146
|
FlowExpandedNode_default as FlowExpandedNode,
|
|
148
147
|
Flow_default as FlowNode,
|
|
149
|
-
FocusModeModal_default as FocusModeModal,
|
|
150
148
|
GroupNode_default as GroupNode,
|
|
151
149
|
LabelledDefaultEdge,
|
|
152
150
|
LabelledSmoothStepEdge,
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
/* A node's card (NodeCard): on a diagram when a node is clicked, and in Studio to see and edit a node. One file for
|
|
2
|
+
both, imported by styles.css, styles-core.css and studio.css */
|
|
3
|
+
/* Icon buttons, as EventCatalog's (Studio's Dialog.tsx and CanvasHeader.tsx) */
|
|
4
|
+
.ec-icon-button {
|
|
5
|
+
display: inline-flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
width: 26px;
|
|
9
|
+
height: 26px;
|
|
10
|
+
flex-shrink: 0;
|
|
11
|
+
border: 0;
|
|
12
|
+
border-radius: 6px;
|
|
13
|
+
background: transparent;
|
|
14
|
+
color: rgb(var(--ec-page-text-muted));
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
}
|
|
17
|
+
.ec-icon-button:hover:not(:disabled) {
|
|
18
|
+
color: rgb(var(--ec-page-text));
|
|
19
|
+
background: rgb(var(--ec-page-border) / 0.4);
|
|
20
|
+
}
|
|
21
|
+
.ec-icon-button:disabled {
|
|
22
|
+
opacity: 0.35;
|
|
23
|
+
cursor: default;
|
|
24
|
+
}
|
|
25
|
+
.ec-icon-button svg {
|
|
26
|
+
width: 15px;
|
|
27
|
+
height: 15px;
|
|
28
|
+
}
|
|
29
|
+
/* A node's page: a small docs page (the catalog's resource header, badges, toolbar and Sends / Receives lists) */
|
|
30
|
+
.ec-doc-card {
|
|
31
|
+
position: absolute;
|
|
32
|
+
z-index: 30;
|
|
33
|
+
max-height: calc(100% - 110px);
|
|
34
|
+
overflow-y: auto;
|
|
35
|
+
border: 1px solid rgb(var(--ec-page-border));
|
|
36
|
+
border-radius: 12px;
|
|
37
|
+
background: rgb(var(--ec-card-bg));
|
|
38
|
+
color: rgb(var(--ec-page-text));
|
|
39
|
+
box-shadow:
|
|
40
|
+
0 24px 48px rgb(0 0 0 / 0.16),
|
|
41
|
+
0 2px 6px rgb(0 0 0 / 0.06);
|
|
42
|
+
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
43
|
+
}
|
|
44
|
+
/* The card's arrow, to the node it's about: a square turned on its corner, over the card's edge */
|
|
45
|
+
.ec-doc-card-arrow {
|
|
46
|
+
position: absolute;
|
|
47
|
+
z-index: 31;
|
|
48
|
+
width: 14px;
|
|
49
|
+
height: 14px;
|
|
50
|
+
background: rgb(var(--ec-card-bg));
|
|
51
|
+
transform: rotate(45deg);
|
|
52
|
+
border: 1px solid rgb(var(--ec-page-border));
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
}
|
|
55
|
+
.ec-doc-card-arrow.is-right {
|
|
56
|
+
border-top-color: transparent;
|
|
57
|
+
border-right-color: transparent;
|
|
58
|
+
}
|
|
59
|
+
.ec-doc-card-arrow.is-left {
|
|
60
|
+
border-bottom-color: transparent;
|
|
61
|
+
border-left-color: transparent;
|
|
62
|
+
}
|
|
63
|
+
/* Nothing under the header: no line under it either */
|
|
64
|
+
.ec-doc-card-header:last-child {
|
|
65
|
+
border-bottom: 0;
|
|
66
|
+
}
|
|
67
|
+
.ec-doc-card-header {
|
|
68
|
+
padding: 14px 16px 12px;
|
|
69
|
+
border-bottom: 1px solid rgb(var(--ec-page-border));
|
|
70
|
+
}
|
|
71
|
+
.ec-doc-card-kicker {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 8px;
|
|
75
|
+
min-width: 0;
|
|
76
|
+
}
|
|
77
|
+
.ec-doc-card-breadcrumb {
|
|
78
|
+
min-width: 0;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
text-overflow: ellipsis;
|
|
81
|
+
white-space: nowrap;
|
|
82
|
+
color: rgb(var(--ec-page-text-muted));
|
|
83
|
+
font-size: 12px;
|
|
84
|
+
}
|
|
85
|
+
.ec-doc-card-close {
|
|
86
|
+
margin-left: auto;
|
|
87
|
+
margin-right: -6px;
|
|
88
|
+
}
|
|
89
|
+
.ec-doc-card-title {
|
|
90
|
+
margin: 10px 0 0;
|
|
91
|
+
font-size: 20px;
|
|
92
|
+
font-weight: 700;
|
|
93
|
+
line-height: 1.25;
|
|
94
|
+
letter-spacing: -0.01em;
|
|
95
|
+
}
|
|
96
|
+
.ec-doc-card-version {
|
|
97
|
+
margin-left: 8px;
|
|
98
|
+
font-size: 12px;
|
|
99
|
+
font-weight: 500;
|
|
100
|
+
color: rgb(var(--ec-page-text-muted));
|
|
101
|
+
letter-spacing: 0;
|
|
102
|
+
}
|
|
103
|
+
.ec-doc-card-summary {
|
|
104
|
+
margin: 8px 0 0;
|
|
105
|
+
font-size: 13px;
|
|
106
|
+
font-weight: 300;
|
|
107
|
+
line-height: 1.55;
|
|
108
|
+
color: rgb(var(--ec-page-text-muted));
|
|
109
|
+
}
|
|
110
|
+
.ec-doc-card-header:has(+ .ec-doc-card-body:empty) {
|
|
111
|
+
border-bottom: 0;
|
|
112
|
+
}
|
|
113
|
+
/* The card's links (its diagram, its docs): quiet buttons, the same size, that lift a little on hover */
|
|
114
|
+
.ec-doc-card-actions {
|
|
115
|
+
display: flex;
|
|
116
|
+
flex-wrap: wrap;
|
|
117
|
+
gap: 6px;
|
|
118
|
+
margin-top: 12px;
|
|
119
|
+
}
|
|
120
|
+
.ec-doc-card-action {
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
gap: 6px;
|
|
124
|
+
height: 28px;
|
|
125
|
+
padding: 0 10px;
|
|
126
|
+
border: 1px solid rgb(var(--ec-page-border));
|
|
127
|
+
border-radius: 7px;
|
|
128
|
+
background: rgb(var(--ec-card-bg));
|
|
129
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
|
|
130
|
+
color: rgb(var(--ec-page-text));
|
|
131
|
+
font-size: 12px;
|
|
132
|
+
font-weight: 500;
|
|
133
|
+
line-height: 1;
|
|
134
|
+
text-decoration: none;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
transition:
|
|
137
|
+
background-color 150ms,
|
|
138
|
+
border-color 150ms,
|
|
139
|
+
box-shadow 150ms,
|
|
140
|
+
transform 150ms;
|
|
141
|
+
}
|
|
142
|
+
.ec-doc-card-action svg {
|
|
143
|
+
width: 14px;
|
|
144
|
+
height: 14px;
|
|
145
|
+
flex: none;
|
|
146
|
+
color: rgb(var(--ec-icon-color, var(--ec-page-text-muted)));
|
|
147
|
+
transition: transform 150ms;
|
|
148
|
+
}
|
|
149
|
+
.ec-doc-card-action.is-primary svg {
|
|
150
|
+
color: rgb(var(--ec-accent));
|
|
151
|
+
}
|
|
152
|
+
.ec-doc-card-action:hover {
|
|
153
|
+
border-color: color-mix(in srgb, rgb(var(--ec-accent)) 45%, transparent);
|
|
154
|
+
background: rgb(var(--ec-page-border) / 0.25);
|
|
155
|
+
box-shadow: 0 3px 10px rgb(0 0 0 / 0.08);
|
|
156
|
+
transform: translateY(-1px);
|
|
157
|
+
}
|
|
158
|
+
.ec-doc-card-action:active {
|
|
159
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
|
|
160
|
+
transform: none;
|
|
161
|
+
}
|
|
162
|
+
.ec-doc-card-action:hover .ec-doc-card-action-arrow {
|
|
163
|
+
transform: translateX(2px);
|
|
164
|
+
}
|
|
165
|
+
.ec-doc-card-action:focus-visible,
|
|
166
|
+
.ec-doc-card-item:focus-visible {
|
|
167
|
+
outline: 2px solid rgb(var(--ec-accent));
|
|
168
|
+
outline-offset: 1px;
|
|
169
|
+
}
|
|
170
|
+
/* What it's connected to: a row each, with the resource's icon in its colour, that highlights on hover and shows a
|
|
171
|
+
chevron (go to it) */
|
|
172
|
+
.ec-doc-card-item {
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
gap: 8px;
|
|
176
|
+
width: 100%;
|
|
177
|
+
padding: 4px 6px 4px 4px;
|
|
178
|
+
border: 1px solid transparent;
|
|
179
|
+
border-radius: 8px;
|
|
180
|
+
background: transparent;
|
|
181
|
+
color: rgb(var(--ec-page-text));
|
|
182
|
+
font: inherit;
|
|
183
|
+
font-size: 13px;
|
|
184
|
+
text-align: left;
|
|
185
|
+
cursor: pointer;
|
|
186
|
+
transition:
|
|
187
|
+
background-color 120ms,
|
|
188
|
+
border-color 120ms;
|
|
189
|
+
}
|
|
190
|
+
.ec-doc-card-item:hover {
|
|
191
|
+
border-color: rgb(var(--ec-page-border));
|
|
192
|
+
background: rgb(var(--ec-page-border) / 0.3);
|
|
193
|
+
}
|
|
194
|
+
.ec-doc-card-item:active {
|
|
195
|
+
background: rgb(var(--ec-page-border) / 0.5);
|
|
196
|
+
}
|
|
197
|
+
.ec-doc-card-item-icon {
|
|
198
|
+
display: inline-flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
width: 24px;
|
|
202
|
+
height: 24px;
|
|
203
|
+
flex: none;
|
|
204
|
+
border-radius: 6px;
|
|
205
|
+
/* A tint of the resource's colour, set on the element as its text colour */
|
|
206
|
+
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
207
|
+
}
|
|
208
|
+
.ec-doc-card-item-icon svg {
|
|
209
|
+
width: 14px;
|
|
210
|
+
height: 14px;
|
|
211
|
+
}
|
|
212
|
+
.ec-doc-card-item-chevron {
|
|
213
|
+
width: 14px;
|
|
214
|
+
height: 14px;
|
|
215
|
+
flex: none;
|
|
216
|
+
margin-left: -2px;
|
|
217
|
+
color: rgb(var(--ec-page-text-muted));
|
|
218
|
+
opacity: 0;
|
|
219
|
+
transform: translateX(-3px);
|
|
220
|
+
transition:
|
|
221
|
+
opacity 120ms,
|
|
222
|
+
transform 120ms;
|
|
223
|
+
}
|
|
224
|
+
.ec-doc-card-item:hover .ec-doc-card-item-chevron,
|
|
225
|
+
.ec-doc-card-item:focus-visible .ec-doc-card-item-chevron {
|
|
226
|
+
opacity: 1;
|
|
227
|
+
transform: none;
|
|
228
|
+
}
|
|
229
|
+
/* A card whose header stays in view while what's under it scrolls (the diagram's card: a node can have dozens of
|
|
230
|
+
connections) */
|
|
231
|
+
.ec-doc-card:has(> .ec-doc-card-scroll) {
|
|
232
|
+
display: flex;
|
|
233
|
+
flex-direction: column;
|
|
234
|
+
overflow: hidden;
|
|
235
|
+
}
|
|
236
|
+
.ec-doc-card:has(> .ec-doc-card-scroll) > .ec-doc-card-header {
|
|
237
|
+
flex: none;
|
|
238
|
+
}
|
|
239
|
+
.ec-doc-card-scroll {
|
|
240
|
+
min-height: 0;
|
|
241
|
+
overflow-y: auto;
|
|
242
|
+
overscroll-behavior: contain;
|
|
243
|
+
}
|
|
244
|
+
/* A summary cut to three lines (the whole of it is on hover, and on its page) */
|
|
245
|
+
.ec-doc-card-summary.is-clamped {
|
|
246
|
+
display: -webkit-box;
|
|
247
|
+
-webkit-box-orient: vertical;
|
|
248
|
+
-webkit-line-clamp: 3;
|
|
249
|
+
overflow: hidden;
|
|
250
|
+
}
|
|
251
|
+
.ec-doc-card-more {
|
|
252
|
+
margin-top: 1px;
|
|
253
|
+
color: rgb(var(--ec-page-text-muted));
|
|
254
|
+
font-size: 12px;
|
|
255
|
+
font-weight: 500;
|
|
256
|
+
}
|
|
257
|
+
.ec-doc-card-more .ec-doc-card-item-icon {
|
|
258
|
+
background: transparent;
|
|
259
|
+
}
|
|
260
|
+
.ec-doc-card-more:hover {
|
|
261
|
+
color: rgb(var(--ec-page-text));
|
|
262
|
+
}
|
package/dist/studio.css
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/* The node card (.ec-doc-card, .ec-icon-button), shared with the visualiser's diagrams */
|
|
2
|
+
@import "./node-card.css";
|
|
3
|
+
|
|
1
4
|
/*
|
|
2
5
|
* The visualiser hides node handles (it is read only), here they are the connection points,
|
|
3
6
|
* so show them on hover, on selection and while connecting.
|
|
@@ -236,12 +239,12 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
|
|
|
236
239
|
}
|
|
237
240
|
|
|
238
241
|
/* A sticky note: about square like a post-it, taller if more is written on it (dark text: the paper is light in
|
|
239
|
-
every theme) */
|
|
242
|
+
every theme). Written from its top left, in proportion with the cards around it. */
|
|
240
243
|
.studio-note {
|
|
241
244
|
position: relative;
|
|
242
245
|
display: flex;
|
|
243
246
|
flex-direction: column;
|
|
244
|
-
justify-content:
|
|
247
|
+
justify-content: flex-start;
|
|
245
248
|
min-height: 176px;
|
|
246
249
|
height: 100%;
|
|
247
250
|
padding: 20px 18px 30px;
|
|
@@ -256,9 +259,9 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
|
|
|
256
259
|
margin: 0;
|
|
257
260
|
/* Handwritten, as Excalidraw's notes are (Excalifont, bundled in view.css) */
|
|
258
261
|
font-family: 'Excalifont', 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
259
|
-
font-size:
|
|
260
|
-
line-height: 1.
|
|
261
|
-
text-align:
|
|
262
|
+
font-size: 16px;
|
|
263
|
+
line-height: 1.35;
|
|
264
|
+
text-align: left;
|
|
262
265
|
color: inherit;
|
|
263
266
|
white-space: pre-wrap;
|
|
264
267
|
overflow-wrap: anywhere;
|
|
@@ -452,36 +455,6 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
|
|
|
452
455
|
* A node's card (NodeCard.tsx), next to it on the canvas: its header, and the form that edits it, its fields saved as
|
|
453
456
|
* they're typed.
|
|
454
457
|
*/
|
|
455
|
-
/* Icon buttons, as EventCatalog's (Studio's Dialog.tsx and CanvasHeader.tsx) */
|
|
456
|
-
.ec-icon-button {
|
|
457
|
-
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border: 0;
|
|
458
|
-
border-radius: 6px; background: transparent; color: rgb(var(--ec-page-text-muted)); cursor: pointer;
|
|
459
|
-
}
|
|
460
|
-
.ec-icon-button:hover:not(:disabled) { color: rgb(var(--ec-page-text)); background: rgb(var(--ec-page-border) / 0.4); }
|
|
461
|
-
.ec-icon-button:disabled { opacity: 0.35; cursor: default; }
|
|
462
|
-
.ec-icon-button svg { width: 15px; height: 15px; }
|
|
463
|
-
/* A node's page: a small docs page (the catalog's resource header, badges, toolbar and Sends / Receives lists) */
|
|
464
|
-
.ec-doc-card {
|
|
465
|
-
position: absolute; z-index: 30; max-height: calc(100% - 110px); overflow-y: auto; border: 1px solid rgb(var(--ec-page-border));
|
|
466
|
-
border-radius: 12px; background: rgb(var(--ec-card-bg)); color: rgb(var(--ec-page-text)); box-shadow: 0 24px 48px rgb(0 0 0 / 0.16), 0 2px 6px rgb(0 0 0 / 0.06);
|
|
467
|
-
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
468
|
-
}
|
|
469
|
-
/* The card's arrow, to the node it's about: a square turned on its corner, over the card's edge */
|
|
470
|
-
.ec-doc-card-arrow {
|
|
471
|
-
position: absolute; z-index: 31; width: 14px; height: 14px; background: rgb(var(--ec-card-bg)); transform: rotate(45deg);
|
|
472
|
-
border: 1px solid rgb(var(--ec-page-border)); pointer-events: none;
|
|
473
|
-
}
|
|
474
|
-
.ec-doc-card-arrow.is-right { border-top-color: transparent; border-right-color: transparent; }
|
|
475
|
-
.ec-doc-card-arrow.is-left { border-bottom-color: transparent; border-left-color: transparent; }
|
|
476
|
-
/* Nothing under the header: no line under it either */
|
|
477
|
-
.ec-doc-card-header:last-child { border-bottom: 0; }
|
|
478
|
-
.ec-doc-card-header { padding: 14px 16px 12px; border-bottom: 1px solid rgb(var(--ec-page-border)); }
|
|
479
|
-
.ec-doc-card-kicker { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
480
|
-
.ec-doc-card-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--ec-page-text-muted)); font-size: 12px; }
|
|
481
|
-
.ec-doc-card-close { margin-left: auto; margin-right: -6px; }
|
|
482
|
-
.ec-doc-card-title { margin: 10px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
|
|
483
|
-
.ec-doc-card-version { margin-left: 8px; font-size: 12px; font-weight: 500; color: rgb(var(--ec-page-text-muted)); letter-spacing: 0; }
|
|
484
|
-
.ec-doc-card-summary { margin: 8px 0 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: rgb(var(--ec-page-text-muted)); }
|
|
485
458
|
/* Editing it: a small form, its fields plainly fields (a border, a focus ring), saved as they're typed */
|
|
486
459
|
.ec-edit-form { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 14px; }
|
|
487
460
|
.ec-field { display: flex; flex: 1 1 100%; flex-direction: column; gap: 5px; min-width: 0; }
|
|
@@ -506,4 +479,3 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
|
|
|
506
479
|
}
|
|
507
480
|
.ec-edit-status.is-saved { color: #16a34a; opacity: 1; }
|
|
508
481
|
.ec-edit-status svg { width: 12px; height: 12px; }
|
|
509
|
-
.ec-doc-card-header:has(+ .ec-doc-card-body:empty) { border-bottom: 0; }
|