feat(edges): animated prop

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -9,11 +9,11 @@ const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.n
 
 export default EdgeComponent => memo((props) => {
   const { state, dispatch } = useContext(GraphContext);
-  const { data, onClick } = props;
+  const { data = {}, onClick } = props;
   const selected = state.selectedElements
     .filter(e => isEdge(e))
     .find(e => e.data.source === data.source && e.data.target === data.target);
-  const edgeClasses = cx('react-graph__edge', { selected });
+  const edgeClasses = cx('react-graph__edge', { selected, animated: data.animated });
 
   return (
     <g

src/EdgeRenderer/utils.js

@@ -1,18 +1,18 @@
-import DefaultEdge from './EdgeTypes/DefaultEdge';
+import StraightEdge from './EdgeTypes/StraightEdge';
 import BezierEdge from './EdgeTypes/BezierEdge';
 import wrapEdge from './EdgeTypes/wrapEdge';
 
 export function createEdgeTypes(edgeTypes) {
   const standardTypes = {
-    default: wrapEdge(edgeTypes.default || DefaultEdge),
-    bezier: wrapEdge(edgeTypes.bezier || BezierEdge)
+    default: wrapEdge(edgeTypes.default || BezierEdge),
+    straight: wrapEdge(edgeTypes.bezier || StraightEdge)
   };
 
   const specialTypes = Object
-    .keys(DefaultEdge)
+    .keys(edgeTypes)
     .filter(k => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
-      res[key] = wrapEdge(nodeTypes[key] || DefaultEdge);
+      res[key] = wrapEdge(edgeTypes[key] ||BezierEdge);
 
       return res;
     }, {});

src/index.js

@@ -10,7 +10,8 @@ import InputNode from './NodeRenderer/NodeTypes/InputNode';
 import OutputNode from './NodeRenderer/NodeTypes/OutputNode';
 import { createNodeTypes } from './NodeRenderer/utils';
 
-import DefaultEdge from './EdgeRenderer/EdgeTypes/DefaultEdge';
+import BezierEdge from './EdgeRenderer/EdgeTypes/BezierEdge';
+import StraightEdge from './EdgeRenderer/EdgeTypes/StraightEdge';
 import { createEdgeTypes } from './EdgeRenderer/utils';
 
 import './style.css';
@@ -65,7 +66,8 @@ ReactGraph.defaultProps = {
     output: OutputNode
   },
   edgeTypes: {
-    default: DefaultEdge
+    default: BezierEdge,
+    straight: StraightEdge
   }
 };
 

src/style.css

@@ -54,6 +54,15 @@
   &.selected {
     stroke: #ff5050;
   }
+
+  &.animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+@keyframes dashdraw {
+  from {stroke-dashoffset: 10}
 }
 
 .react-graph__nodes {