feat: add animated edge type

Author: jonaslagoni

examples/simple-react/src/SimpleAsyncapi.tsx

@@ -230,7 +230,7 @@ function Asyncapi() {
   let node;
   if (document !== undefined) {
     node = (
-      <ApplicationView asyncapi={{ document }} edgeType={'default'} />
+      <ApplicationView asyncapi={{ document }} edgeType={'animated'} />
     );
   } else {
     node = <h1>Wait...</h1>;

library/src/types.ts

@@ -120,4 +120,6 @@ export type EdgeType =
   | 'step'
   | 'straight'
   | 'floating'
-  | 'default';
+  | 'default'
+  | 'simplebezier'
+  | 'animated';

library/src/visualiser/helpers/collect-nodes.ts

@@ -190,7 +190,9 @@ export function collectSystemNodes(
         for (const incomingApp of incomingConnections[uniqueChannel]) {
           const edge = {
             id: `${appId}-to-${incomingApp}`,
-            type: edgeType,
+            ...(edgeType !== 'animated'
+              ? { type: edgeType }
+              : { animated: true }),
             style: { stroke: 'orange', strokeWidth: 4 },
             source: appId,
             target: incomingApp,
@@ -358,7 +360,7 @@ export function createIncomingNode(
   };
   const connectionEdge: Edge = {
     id: `incoming-${appId}-${data.id}`,
-    type: edgeType,
+    ...(edgeType !== 'animated' ? { type: edgeType } : { animated: true }),
     style: { stroke: '#7ee3be', strokeWidth: 4 },
     target: appId,
     source: data.id,
@@ -395,7 +397,7 @@ export function createOutgoingNode(
   };
   const connectionEdge: Edge = {
     id: `outgoing-${appId}-${data.id}`,
-    type: edgeType,
+    ...(edgeType !== 'animated' ? { type: edgeType } : { animated: true }),
     style: { stroke: 'orange', strokeWidth: 4 },
     source: appId,
     target: data.id,