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

package/dist/layout.d.mts

@@ -1,49 +1,6 @@
+export { E as EdgeRoute, L as LayoutGraph, a as LayoutSize, g as getNodeSize, l as layoutWithElk } from './elk-layout-BVUJjv6i.mjs';
 import { Node, Edge } from '@xyflow/react';
 
-type LayoutGraph = {
-    nodes: Node[];
-    edges: Edge[];
-};
-type LayoutSize = {
-    width: number;
-    height: number;
-};
-type EdgeRoute = {
-    points: {
-        x: number;
-        y: number;
-    }[];
-    label?: {
-        x: number;
-        y: number;
-    };
-    /** Where the edge's source and target were laid out (top-left, in the flow) */
-    source?: {
-        x: number;
-        y: number;
-    };
-    target?: {
-        x: number;
-        y: number;
-    };
-};
-/** The size a node is laid out at: as rendered, or an estimate for its type */
-declare const getNodeSize: (node: Node) => LayoutSize;
-/**
- * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
- * have as their `parentId`) are laid out in one pass with their children.
- * Edges are routed at right angles around nodes, each edge with its own
- * connection point so edges don't run on top of each other, and labels are
- * placed on their edge. Each edge keeps its type and gets its route (and label
- * position) in `data.route`, which the visualiser's edges are drawn along.
- *
- * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
- * relative to their group. Groups are sized to fit their children.
- */
-declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
-    sizeOf?: (node: Node) => LayoutSize;
-}) => Promise<LayoutGraph>;
-
 declare const isMessageNode: (node: Node) => boolean;
 /**
  * Label for an edge carrying messages (name -> collection), e.g.
@@ -71,4 +28,4 @@ declare const hideMessageNodes: (nodes: Node[], edges: Edge[]) => {
     edges: Edge[];
 };
 
-export { type EdgeRoute, type LayoutGraph, type LayoutSize, getMessagesLabel, getNodeSize, hideMessageNodes, hideNodes, isCarrier, isMessageNode, layoutWithElk };
+export { getMessagesLabel, hideMessageNodes, hideNodes, isCarrier, isMessageNode };

package/dist/layout.d.ts

@@ -1,49 +1,6 @@
+export { E as EdgeRoute, L as LayoutGraph, a as LayoutSize, g as getNodeSize, l as layoutWithElk } from './elk-layout-BVUJjv6i.js';
 import { Node, Edge } from '@xyflow/react';
 
-type LayoutGraph = {
-    nodes: Node[];
-    edges: Edge[];
-};
-type LayoutSize = {
-    width: number;
-    height: number;
-};
-type EdgeRoute = {
-    points: {
-        x: number;
-        y: number;
-    }[];
-    label?: {
-        x: number;
-        y: number;
-    };
-    /** Where the edge's source and target were laid out (top-left, in the flow) */
-    source?: {
-        x: number;
-        y: number;
-    };
-    target?: {
-        x: number;
-        y: number;
-    };
-};
-/** The size a node is laid out at: as rendered, or an estimate for its type */
-declare const getNodeSize: (node: Node) => LayoutSize;
-/**
- * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
- * have as their `parentId`) are laid out in one pass with their children.
- * Edges are routed at right angles around nodes, each edge with its own
- * connection point so edges don't run on top of each other, and labels are
- * placed on their edge. Each edge keeps its type and gets its route (and label
- * position) in `data.route`, which the visualiser's edges are drawn along.
- *
- * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
- * relative to their group. Groups are sized to fit their children.
- */
-declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
-    sizeOf?: (node: Node) => LayoutSize;
-}) => Promise<LayoutGraph>;
-
 declare const isMessageNode: (node: Node) => boolean;
 /**
  * Label for an edge carrying messages (name -> collection), e.g.
@@ -71,4 +28,4 @@ declare const hideMessageNodes: (nodes: Node[], edges: Edge[]) => {
     edges: Edge[];
 };
 
-export { type EdgeRoute, type LayoutGraph, type LayoutSize, getMessagesLabel, getNodeSize, hideMessageNodes, hideNodes, isCarrier, isMessageNode, layoutWithElk };
+export { getMessagesLabel, hideMessageNodes, hideNodes, isCarrier, isMessageNode };

package/dist/styles-core.css

@@ -3903,9 +3903,12 @@
   inset: -2px;
   border-radius: 50%;
   box-shadow: 0 0 0 2px rgba(var(--ec-glow), 0.5);
-  animation: ec-handle-glow 2s ease-in-out infinite;
   pointer-events: none;
 }
+.eventcatalog-visualizer .react-flow__node:hover .ec-handle-glow::after,
+.eventcatalog-visualizer .react-flow__node.selected .ec-handle-glow::after {
+  animation: ec-handle-glow 2s ease-in-out infinite;
+}
 @keyframes ec-handle-glow {
   0%,
   100% {
@@ -4167,6 +4170,13 @@
 .eventcatalog-visualizer .ec-interaction-active .ec-animated-msg {
   visibility: hidden;
 }
+.eventcatalog-visualizer .react-flow__edge.animated .ec-animated-msg path {
+  animation: none;
+  stroke-dasharray: none;
+}
+.eventcatalog-visualizer .ec-interaction-active .react-flow__edge.animated path {
+  animation-play-state: paused;
+}
 .eventcatalog-visualizer .react-flow__minimap {
   background-color: rgb(var(--ec-card-bg));
   border: 1px solid rgb(var(--ec-page-border));

package/dist/styles.css

@@ -3904,9 +3904,12 @@
   inset: -2px;
   border-radius: 50%;
   box-shadow: 0 0 0 2px rgba(var(--ec-glow), 0.5);
-  animation: ec-handle-glow 2s ease-in-out infinite;
   pointer-events: none;
 }
+.eventcatalog-visualizer .react-flow__node:hover .ec-handle-glow::after,
+.eventcatalog-visualizer .react-flow__node.selected .ec-handle-glow::after {
+  animation: ec-handle-glow 2s ease-in-out infinite;
+}
 @keyframes ec-handle-glow {
   0%,
   100% {
@@ -4161,6 +4164,13 @@
 .eventcatalog-visualizer .ec-interaction-active .ec-animated-msg {
   visibility: hidden;
 }
+.eventcatalog-visualizer .react-flow__edge.animated .ec-animated-msg path {
+  animation: none;
+  stroke-dasharray: none;
+}
+.eventcatalog-visualizer .ec-interaction-active .react-flow__edge.animated path {
+  animation-play-state: paused;
+}
 .eventcatalog-visualizer .react-flow__minimap {
   background-color: rgb(var(--ec-card-bg));
   border: 1px solid rgb(var(--ec-page-border));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.5",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",