feat(edges): animated prop

xyflow · Jul 25, 2019 · 064f7d9 · 064f7d9
1 parent d094f5f
commit 064f7d9
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 25 deletions.
diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
@@ -33004,32 +33004,32 @@
     return _objectSpread2({}, standardTypes, {}, specialTypes);
   }
 
-  var DefaultEdge = (function (props) {
+  var BezierEdge = (function (props) {
     var targetNode = props.targetNode,
         sourceNode = props.sourceNode;
     var style = props.data ? props.data.style : {};
     var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
     var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
     var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
     var targetY = targetNode.__rg.position.y;
+    var yOffset = Math.abs(targetY - sourceY) / 2;
+    var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
     return React__default.createElement("path", _extends({}, style, {
-      d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
+      d: dAttr
     }));
   });
 
-  var BezierEdge = (function (props) {
+  var StraightEdge = (function (props) {
     var targetNode = props.targetNode,
         sourceNode = props.sourceNode;
     var style = props.data ? props.data.style : {};
     var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
     var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
     var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
     var targetY = targetNode.__rg.position.y;
-    var yOffset = Math.abs(targetY - sourceY) / 2;
-    var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
-    var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
     return React__default.createElement("path", _extends({}, style, {
-      d: dAttr
+      d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
     }));
   });
 
@@ -33043,15 +33043,17 @@
           state = _useContext.state,
           dispatch = _useContext.dispatch;
 
-      var data = props.data,
+      var _props$data = props.data,
+          data = _props$data === void 0 ? {} : _props$data,
           _onClick = props.onClick;
       var selected = state.selectedElements.filter(function (e) {
         return isEdge(e);
       }).find(function (e) {
         return e.data.source === data.source && e.data.target === data.target;
       });
       var edgeClasses = classnames('react-graph__edge', {
-        selected: selected
+        selected: selected,
+        animated: data.animated
       });
       return React__default.createElement("g", {
         className: edgeClasses,
@@ -33074,13 +33076,13 @@
 
   function createEdgeTypes(edgeTypes) {
     var standardTypes = {
-      "default": wrapEdge(edgeTypes["default"] || DefaultEdge),
-      bezier: wrapEdge(edgeTypes.bezier || BezierEdge)
+      "default": wrapEdge(edgeTypes["default"] || BezierEdge),
+      straight: wrapEdge(edgeTypes.bezier || StraightEdge)
     };
-    var specialTypes = Object.keys(DefaultEdge).filter(function (k) {
+    var specialTypes = Object.keys(edgeTypes).filter(function (k) {
       return !['default', 'bezier'].includes(k);
     }).reduce(function (res, key) {
-      res[key] = wrapEdge(nodeTypes[key] || DefaultEdge);
+      res[key] = wrapEdge(edgeTypes[key] || BezierEdge);
       return res;
     }, {});
     return _objectSpread2({}, standardTypes, {}, specialTypes);
@@ -33113,7 +33115,7 @@
     }
   }
 
-  var css = ".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #333;\n  stroke-width: 2;\n  pointer-events: all;\n}\n\n.react-graph__edge.selected {\n    stroke: #ff5050;\n  }\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n.react-graph__node.selected > * {\n    box-shadow: 0 0 0 2px #000;\n  }\n\n.react-graph__handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  transform: translate(-50%, -50%);\n  background: #222;\n  left: 50%;\n  border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n    position: absolute;\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\n    pointer-events: all;\n  }";
+  var css = ".react-graph {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.react-graph__renderer {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.react-graph__zoompane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n\n.react-graph__selectionpane {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n\n.react-graph__selection {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: rgba(0, 89, 220, 0.08);\n  border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.react-graph__edge {\n  fill: none;\n  stroke: #333;\n  stroke-width: 2;\n  pointer-events: all;\n}\n\n.react-graph__edge.selected {\n    stroke: #ff5050;\n  }\n\n.react-graph__edge.animated {\n    stroke-dasharray: 5;\n    -webkit-animation: dashdraw 0.5s linear infinite;\n            animation: dashdraw 0.5s linear infinite;\n  }\n\n@-webkit-keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n  from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n\n.react-graph__node {\n  position: absolute;\n  color: #222;\n  font-family: sans-serif;\n  font-size: 12px;\n  text-align: center;\n  cursor: -webkit-grab;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n  }\n\n.react-graph__node.selected > * {\n    box-shadow: 0 0 0 2px #000;\n  }\n\n.react-graph__handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  transform: translate(-50%, -50%);\n  background: #222;\n  left: 50%;\n  border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n  z-index: 3;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  transform-origin: left top;\n  pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n    position: absolute;\n    background: rgba(0, 89, 220, 0.08);\n    border: 1px dotted rgba(0, 89, 220, 0.8);\n    pointer-events: all;\n  }";
   styleInject(css);
 
   var ReactGraph =
@@ -33183,7 +33185,8 @@
       output: OutputNode
     },
     edgeTypes: {
-      "default": DefaultEdge
+      "default": BezierEdge,
+      straight: StraightEdge
     }
   };
 

diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js
@@ -41,7 +41,7 @@ class App extends PureComponent {
         { data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
         { data: { id: '5', label: 'Another node', type: 'default' }, position: { x: 400, y: 300 } },
         { data: { id: '6', label: 'no option selected', type: 'special', onChange }, position: { x: 400, y: 400 } },
-        { data: { source: '1', target: '2', type: 'bezier', style: { stroke: 'orange' } } },
+        { data: { source: '1', target: '2', type: 'bezier', animated: true, style: { stroke: 'orange' } } },
         { data: { source: '2', target: '3' } },
         { data: { source: '3', target: '4' } },
         { data: { source: '3', target: '5' } },

diff --git a/src/EdgeRenderer/EdgeTypes/DefaultEdge.js → src/EdgeRenderer/EdgeTypes/StraightEdge.js b/src/EdgeRenderer/EdgeTypes/DefaultEdge.js → src/EdgeRenderer/EdgeTypes/StraightEdge.js
diff --git a/src/EdgeRenderer/EdgeTypes/wrapEdge.js b/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

diff --git a/src/EdgeRenderer/utils.js b/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;
     }, {});

diff --git a/src/index.js b/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
   }
 };
 

diff --git a/src/style.css b/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 {