@eventcatalog/visualiser 5.0.0-beta.3 → 5.0.0-beta.5

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.
Files changed (13) hide show
  1. package/dist/elk-layout-BVUJjv6i.d.mts +47 -0
  2. package/dist/elk-layout-BVUJjv6i.d.ts +47 -0
  3. package/dist/index.d.mts +178 -9
  4. package/dist/index.d.ts +178 -9
  5. package/dist/index.js +5556 -5160
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +9136 -8758
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/layout.d.mts +2 -45
  10. package/dist/layout.d.ts +2 -45
  11. package/dist/styles-core.css +13 -24
  12. package/dist/styles.css +13 -24
  13. package/package.json +1 -1
package/dist/layout.d.mts CHANGED
@@ -1,49 +1,6 @@
1
+ export { E as EdgeRoute, L as LayoutGraph, a as LayoutSize, g as getNodeSize, l as layoutWithElk } from './elk-layout-BVUJjv6i.mjs';
1
2
  import { Node, Edge } from '@xyflow/react';
2
3
 
3
- type LayoutGraph = {
4
- nodes: Node[];
5
- edges: Edge[];
6
- };
7
- type LayoutSize = {
8
- width: number;
9
- height: number;
10
- };
11
- type EdgeRoute = {
12
- points: {
13
- x: number;
14
- y: number;
15
- }[];
16
- label?: {
17
- x: number;
18
- y: number;
19
- };
20
- /** Where the edge's source and target were laid out (top-left, in the flow) */
21
- source?: {
22
- x: number;
23
- y: number;
24
- };
25
- target?: {
26
- x: number;
27
- y: number;
28
- };
29
- };
30
- /** The size a node is laid out at: as rendered, or an estimate for its type */
31
- declare const getNodeSize: (node: Node) => LayoutSize;
32
- /**
33
- * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
34
- * have as their `parentId`) are laid out in one pass with their children.
35
- * Edges are routed at right angles around nodes, each edge with its own
36
- * connection point so edges don't run on top of each other, and labels are
37
- * placed on their edge. Each edge keeps its type and gets its route (and label
38
- * position) in `data.route`, which the visualiser's edges are drawn along.
39
- *
40
- * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
41
- * relative to their group. Groups are sized to fit their children.
42
- */
43
- declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
44
- sizeOf?: (node: Node) => LayoutSize;
45
- }) => Promise<LayoutGraph>;
46
-
47
4
  declare const isMessageNode: (node: Node) => boolean;
48
5
  /**
49
6
  * Label for an edge carrying messages (name -> collection), e.g.
@@ -71,4 +28,4 @@ declare const hideMessageNodes: (nodes: Node[], edges: Edge[]) => {
71
28
  edges: Edge[];
72
29
  };
73
30
 
74
- export { type EdgeRoute, type LayoutGraph, type LayoutSize, getMessagesLabel, getNodeSize, hideMessageNodes, hideNodes, isCarrier, isMessageNode, layoutWithElk };
31
+ export { getMessagesLabel, hideMessageNodes, hideNodes, isCarrier, isMessageNode };
package/dist/layout.d.ts CHANGED
@@ -1,49 +1,6 @@
1
+ export { E as EdgeRoute, L as LayoutGraph, a as LayoutSize, g as getNodeSize, l as layoutWithElk } from './elk-layout-BVUJjv6i.js';
1
2
  import { Node, Edge } from '@xyflow/react';
2
3
 
3
- type LayoutGraph = {
4
- nodes: Node[];
5
- edges: Edge[];
6
- };
7
- type LayoutSize = {
8
- width: number;
9
- height: number;
10
- };
11
- type EdgeRoute = {
12
- points: {
13
- x: number;
14
- y: number;
15
- }[];
16
- label?: {
17
- x: number;
18
- y: number;
19
- };
20
- /** Where the edge's source and target were laid out (top-left, in the flow) */
21
- source?: {
22
- x: number;
23
- y: number;
24
- };
25
- target?: {
26
- x: number;
27
- y: number;
28
- };
29
- };
30
- /** The size a node is laid out at: as rendered, or an estimate for its type */
31
- declare const getNodeSize: (node: Node) => LayoutSize;
32
- /**
33
- * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
34
- * have as their `parentId`) are laid out in one pass with their children.
35
- * Edges are routed at right angles around nodes, each edge with its own
36
- * connection point so edges don't run on top of each other, and labels are
37
- * placed on their edge. Each edge keeps its type and gets its route (and label
38
- * position) in `data.route`, which the visualiser's edges are drawn along.
39
- *
40
- * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
41
- * relative to their group. Groups are sized to fit their children.
42
- */
43
- declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
44
- sizeOf?: (node: Node) => LayoutSize;
45
- }) => Promise<LayoutGraph>;
46
-
47
4
  declare const isMessageNode: (node: Node) => boolean;
48
5
  /**
49
6
  * Label for an edge carrying messages (name -> collection), e.g.
@@ -71,4 +28,4 @@ declare const hideMessageNodes: (nodes: Node[], edges: Edge[]) => {
71
28
  edges: Edge[];
72
29
  };
73
30
 
74
- export { type EdgeRoute, type LayoutGraph, type LayoutSize, getMessagesLabel, getNodeSize, hideMessageNodes, hideNodes, isCarrier, isMessageNode, layoutWithElk };
31
+ export { getMessagesLabel, hideMessageNodes, hideNodes, isCarrier, isMessageNode };
package/dist/styles-core.css CHANGED
@@ -434,9 +434,6 @@
434
434
  .eventcatalog-visualizer .\!h-2 {
435
435
  height: calc(var(--spacing) * 2) !important;
436
436
  }
437
- .eventcatalog-visualizer .\!h-2\.5 {
438
- height: calc(var(--spacing) * 2.5) !important;
439
- }
440
437
  .eventcatalog-visualizer .\!h-3 {
441
438
  height: calc(var(--spacing) * 3) !important;
442
439
  }
@@ -479,8 +476,8 @@
479
476
  .eventcatalog-visualizer .h-10 {
480
477
  height: calc(var(--spacing) * 10);
481
478
  }
482
- .eventcatalog-visualizer .h-20 {
483
- height: calc(var(--spacing) * 20);
479
+ .eventcatalog-visualizer .h-24 {
480
+ height: calc(var(--spacing) * 24);
484
481
  }
485
482
  .eventcatalog-visualizer .h-\[1px\] {
486
483
  height: 1px;
@@ -515,9 +512,6 @@
515
512
  .eventcatalog-visualizer .min-h-\[5em\] {
516
513
  min-height: 5em;
517
514
  }
518
- .eventcatalog-visualizer .min-h-\[100px\] {
519
- min-height: 100px;
520
- }
521
515
  .eventcatalog-visualizer .min-h-\[120px\] {
522
516
  min-height: 120px;
523
517
  }
@@ -527,9 +521,6 @@
527
521
  .eventcatalog-visualizer .\!w-2 {
528
522
  width: calc(var(--spacing) * 2) !important;
529
523
  }
530
- .eventcatalog-visualizer .\!w-2\.5 {
531
- width: calc(var(--spacing) * 2.5) !important;
532
- }
533
524
  .eventcatalog-visualizer .\!w-3 {
534
525
  width: calc(var(--spacing) * 3) !important;
535
526
  }
@@ -608,9 +599,6 @@
608
599
  .eventcatalog-visualizer .w-px {
609
600
  width: 1px;
610
601
  }
611
- .eventcatalog-visualizer .max-w-40 {
612
- max-width: calc(var(--spacing) * 40);
613
- }
614
602
  .eventcatalog-visualizer .max-w-56 {
615
603
  max-width: calc(var(--spacing) * 56);
616
604
  }
@@ -966,9 +954,6 @@
966
954
  .eventcatalog-visualizer .\!border-\[rgb\(var\(--ec-page-border\)\)\] {
967
955
  border-color: rgb(var(--ec-page-border)) !important;
968
956
  }
969
- .eventcatalog-visualizer .\!border-blue-600 {
970
- border-color: var(--color-blue-600) !important;
971
- }
972
957
  .eventcatalog-visualizer .\!border-gray-500 {
973
958
  border-color: var(--color-gray-500) !important;
974
959
  }
@@ -1296,9 +1281,6 @@
1296
1281
  .eventcatalog-visualizer .\!bg-\[rgb\(var\(--ec-card-bg\)\)\] {
1297
1282
  background-color: rgb(var(--ec-card-bg)) !important;
1298
1283
  }
1299
- .eventcatalog-visualizer .\!bg-blue-500 {
1300
- background-color: var(--color-blue-500) !important;
1301
- }
1302
1284
  .eventcatalog-visualizer .\!bg-gray-400 {
1303
1285
  background-color: var(--color-gray-400) !important;
1304
1286
  }
@@ -2005,9 +1987,6 @@
2005
1987
  .eventcatalog-visualizer .pb-0\.5 {
2006
1988
  padding-bottom: calc(var(--spacing) * 0.5);
2007
1989
  }
2008
- .eventcatalog-visualizer .pb-1 {
2009
- padding-bottom: calc(var(--spacing) * 1);
2010
- }
2011
1990
  .eventcatalog-visualizer .pb-1\.5 {
2012
1991
  padding-bottom: calc(var(--spacing) * 1.5);
2013
1992
  }
@@ -3924,9 +3903,12 @@
3924
3903
  inset: -2px;
3925
3904
  border-radius: 50%;
3926
3905
  box-shadow: 0 0 0 2px rgba(var(--ec-glow), 0.5);
3927
- animation: ec-handle-glow 2s ease-in-out infinite;
3928
3906
  pointer-events: none;
3929
3907
  }
3908
+ .eventcatalog-visualizer .react-flow__node:hover .ec-handle-glow::after,
3909
+ .eventcatalog-visualizer .react-flow__node.selected .ec-handle-glow::after {
3910
+ animation: ec-handle-glow 2s ease-in-out infinite;
3911
+ }
3930
3912
  @keyframes ec-handle-glow {
3931
3913
  0%,
3932
3914
  100% {
@@ -4188,6 +4170,13 @@
4188
4170
  .eventcatalog-visualizer .ec-interaction-active .ec-animated-msg {
4189
4171
  visibility: hidden;
4190
4172
  }
4173
+ .eventcatalog-visualizer .react-flow__edge.animated .ec-animated-msg path {
4174
+ animation: none;
4175
+ stroke-dasharray: none;
4176
+ }
4177
+ .eventcatalog-visualizer .ec-interaction-active .react-flow__edge.animated path {
4178
+ animation-play-state: paused;
4179
+ }
4191
4180
  .eventcatalog-visualizer .react-flow__minimap {
4192
4181
  background-color: rgb(var(--ec-card-bg));
4193
4182
  border: 1px solid rgb(var(--ec-page-border));
package/dist/styles.css CHANGED
@@ -434,9 +434,6 @@
434
434
  .eventcatalog-visualizer .\!h-2 {
435
435
  height: calc(var(--spacing) * 2) !important;
436
436
  }
437
- .eventcatalog-visualizer .\!h-2\.5 {
438
- height: calc(var(--spacing) * 2.5) !important;
439
- }
440
437
  .eventcatalog-visualizer .\!h-3 {
441
438
  height: calc(var(--spacing) * 3) !important;
442
439
  }
@@ -479,8 +476,8 @@
479
476
  .eventcatalog-visualizer .h-10 {
480
477
  height: calc(var(--spacing) * 10);
481
478
  }
482
- .eventcatalog-visualizer .h-20 {
483
- height: calc(var(--spacing) * 20);
479
+ .eventcatalog-visualizer .h-24 {
480
+ height: calc(var(--spacing) * 24);
484
481
  }
485
482
  .eventcatalog-visualizer .h-\[1px\] {
486
483
  height: 1px;
@@ -515,9 +512,6 @@
515
512
  .eventcatalog-visualizer .min-h-\[5em\] {
516
513
  min-height: 5em;
517
514
  }
518
- .eventcatalog-visualizer .min-h-\[100px\] {
519
- min-height: 100px;
520
- }
521
515
  .eventcatalog-visualizer .min-h-\[120px\] {
522
516
  min-height: 120px;
523
517
  }
@@ -527,9 +521,6 @@
527
521
  .eventcatalog-visualizer .\!w-2 {
528
522
  width: calc(var(--spacing) * 2) !important;
529
523
  }
530
- .eventcatalog-visualizer .\!w-2\.5 {
531
- width: calc(var(--spacing) * 2.5) !important;
532
- }
533
524
  .eventcatalog-visualizer .\!w-3 {
534
525
  width: calc(var(--spacing) * 3) !important;
535
526
  }
@@ -608,9 +599,6 @@
608
599
  .eventcatalog-visualizer .w-px {
609
600
  width: 1px;
610
601
  }
611
- .eventcatalog-visualizer .max-w-40 {
612
- max-width: calc(var(--spacing) * 40);
613
- }
614
602
  .eventcatalog-visualizer .max-w-56 {
615
603
  max-width: calc(var(--spacing) * 56);
616
604
  }
@@ -966,9 +954,6 @@
966
954
  .eventcatalog-visualizer .\!border-\[rgb\(var\(--ec-page-border\)\)\] {
967
955
  border-color: rgb(var(--ec-page-border)) !important;
968
956
  }
969
- .eventcatalog-visualizer .\!border-blue-600 {
970
- border-color: var(--color-blue-600) !important;
971
- }
972
957
  .eventcatalog-visualizer .\!border-gray-500 {
973
958
  border-color: var(--color-gray-500) !important;
974
959
  }
@@ -1296,9 +1281,6 @@
1296
1281
  .eventcatalog-visualizer .\!bg-\[rgb\(var\(--ec-card-bg\)\)\] {
1297
1282
  background-color: rgb(var(--ec-card-bg)) !important;
1298
1283
  }
1299
- .eventcatalog-visualizer .\!bg-blue-500 {
1300
- background-color: var(--color-blue-500) !important;
1301
- }
1302
1284
  .eventcatalog-visualizer .\!bg-gray-400 {
1303
1285
  background-color: var(--color-gray-400) !important;
1304
1286
  }
@@ -2005,9 +1987,6 @@
2005
1987
  .eventcatalog-visualizer .pb-0\.5 {
2006
1988
  padding-bottom: calc(var(--spacing) * 0.5);
2007
1989
  }
2008
- .eventcatalog-visualizer .pb-1 {
2009
- padding-bottom: calc(var(--spacing) * 1);
2010
- }
2011
1990
  .eventcatalog-visualizer .pb-1\.5 {
2012
1991
  padding-bottom: calc(var(--spacing) * 1.5);
2013
1992
  }
@@ -3925,9 +3904,12 @@
3925
3904
  inset: -2px;
3926
3905
  border-radius: 50%;
3927
3906
  box-shadow: 0 0 0 2px rgba(var(--ec-glow), 0.5);
3928
- animation: ec-handle-glow 2s ease-in-out infinite;
3929
3907
  pointer-events: none;
3930
3908
  }
3909
+ .eventcatalog-visualizer .react-flow__node:hover .ec-handle-glow::after,
3910
+ .eventcatalog-visualizer .react-flow__node.selected .ec-handle-glow::after {
3911
+ animation: ec-handle-glow 2s ease-in-out infinite;
3912
+ }
3931
3913
  @keyframes ec-handle-glow {
3932
3914
  0%,
3933
3915
  100% {
@@ -4182,6 +4164,13 @@
4182
4164
  .eventcatalog-visualizer .ec-interaction-active .ec-animated-msg {
4183
4165
  visibility: hidden;
4184
4166
  }
4167
+ .eventcatalog-visualizer .react-flow__edge.animated .ec-animated-msg path {
4168
+ animation: none;
4169
+ stroke-dasharray: none;
4170
+ }
4171
+ .eventcatalog-visualizer .ec-interaction-active .react-flow__edge.animated path {
4172
+ animation-play-state: paused;
4173
+ }
4185
4174
  .eventcatalog-visualizer .react-flow__minimap {
4186
4175
  background-color: rgb(var(--ec-card-bg));
4187
4176
  border: 1px solid rgb(var(--ec-page-border));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eventcatalog/visualiser",
3
- "version": "5.0.0-beta.3",
3
+ "version": "5.0.0-beta.5",
4
4
  "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",