Animate edges

client/app/scripts/charts/edge.js

@@ -1,5 +1,7 @@
+const _ = require('lodash');
 const d3 = require('d3');
 const React = require('react');
+const Spring = require('react-motion').Spring;
 
 const AppActions = require('../actions/app-actions');
 
@@ -8,19 +10,81 @@ const line = d3.svg.line()
   .x(function(d) { return d.x; })
   .y(function(d) { return d.y; });
 
+const animConfig = [80, 20]; // stiffness, bounce
+
+const flattenPoints = function(points) {
+  const flattened = {};
+  points.forEach(function(point, i) {
+    flattened['x' + i] = {val: point.x, config: animConfig};
+    flattened['y' + i] = {val: point.y, config: animConfig};
+  });
+  return flattened;
+};
+
+const extractPoints = function(points) {
+  const extracted = [];
+  _.each(points, function(value, key) {
+    const axis = key[0];
+    const index = key.slice(1);
+    if (!extracted[index]) {
+      extracted[index] = {};
+    }
+    extracted[index][axis] = value.val;
+  });
+  return extracted;
+};
+
 const Edge = React.createClass({
 
+  getInitialState: function() {
+    return {
+      points: []
+    };
+  },
+
+  componentWillMount: function() {
+    this.ensureSameLength(this.props.points);
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.ensureSameLength(nextProps.points);
+  },
+
   render: function() {
     const className = this.props.highlighted ? 'edge highlighted' : 'edge';
+    const points = flattenPoints(this.props.points);
+    const props = this.props;
+    const handleMouseEnter = this.handleMouseEnter;
+    const handleMouseLeave = this.handleMouseLeave;
 
     return (
-      <g className={className} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} id={this.props.id}>
-        <path d={line(this.props.points)} className="shadow" />
-        <path d={line(this.props.points)} className="link" />
-      </g>
+      <Spring endValue={points}>
+        {function(interpolated) {
+          const path = line(extractPoints(interpolated));
+          return (
+            <g className={className} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} id={props.id}>
+              <path d={path} className="shadow" />
+              <path d={path} className="link" />
+            </g>
+          );
+        }}
+      </Spring>
     );
   },
 
+  ensureSameLength: function(points) {
+    // Spring needs constant list length, hoping that dagre will insert never more than 10
+    const length = 10;
+    let missing = length - points.length;
+
+    while (missing) {
+      points.unshift(points[0]);
+      missing = length - points.length;
+    }
+
+    return points;
+  },
+
   handleMouseEnter: function(ev) {
     AppActions.enterEdge(ev.currentTarget.id);
   },

client/app/scripts/charts/node.js

@@ -1,46 +1,16 @@
 const React = require('react');
-const tweenState = require('react-tween-state');
+const Spring = require('react-motion').Spring;
 
 const AppActions = require('../actions/app-actions');
 const NodeColorMixin = require('../mixins/node-color-mixin');
 
 const Node = React.createClass({
   mixins: [
-    NodeColorMixin,
-    tweenState.Mixin
+    NodeColorMixin
   ],
 
-  getInitialState: function() {
-    return {
-      x: 0,
-      y: 0
-    };
-  },
-
-  componentWillMount: function() {
-    // initial node position when rendered the first time
-    this.setState({
-      x: this.props.dx,
-      y: this.props.dy
-    });
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    // animate node transition to next position
-    this.tweenState('x', {
-      easing: tweenState.easingTypes.easeInOutQuad,
-      duration: 500,
-      endValue: nextProps.dx
-    });
-    this.tweenState('y', {
-      easing: tweenState.easingTypes.easeInOutQuad,
-      duration: 500,
-      endValue: nextProps.dy
-    });
-  },
-
   render: function() {
-    const transform = 'translate(' + this.getTweeningValue('x') + ',' + this.getTweeningValue('y') + ')';
+    const props = this.props;
     const scale = this.props.scale;
     const textOffsetX = 0;
     const textOffsetY = scale(0.5) + 18;
@@ -50,6 +20,8 @@ const Node = React.createClass({
     const onMouseEnter = this.handleMouseEnter;
     const onMouseLeave = this.handleMouseLeave;
     const classNames = ['node'];
+    const ellipsis = this.ellipsis;
+    const animConfig = [80, 20]; // stiffness, bounce
 
     if (this.props.highlighted) {
       classNames.push('highlighted');
@@ -60,19 +32,26 @@ const Node = React.createClass({
     }
 
     return (
-      <g className={classNames.join(' ')} transform={transform} id={this.props.id}
-        onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        {this.props.highlighted && <circle r={scale(0.7)} className="highlighted"></circle>}
-        <circle r={scale(0.5)} className="border" stroke={color}></circle>
-        <circle r={scale(0.45)} className="shadow"></circle>
-        <circle r={Math.max(2, scale(0.125))} className="node"></circle>
-        <text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>
-          {this.ellipsis(this.props.label, 14)}
-        </text>
-        <text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>
-          {this.ellipsis(this.props.subLabel, 12)}
-        </text>
-      </g>
+      <Spring endValue={{x: {val: this.props.dx, config: animConfig}, y: {val: this.props.dy, config: animConfig}}}>
+        {function(interpolated) {
+          const transform = 'translate(' + interpolated.x.val + ',' + interpolated.y.val + ')';
+          return (
+            <g className={classNames.join(' ')} transform={transform} id={props.id}
+              onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+              {props.highlighted && <circle r={scale(0.7)} className="highlighted"></circle>}
+              <circle r={scale(0.5)} className="border" stroke={color}></circle>
+              <circle r={scale(0.45)} className="shadow"></circle>
+              <circle r={Math.max(2, scale(0.125))} className="node"></circle>
+              <text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>
+                {ellipsis(props.label, 14)}
+              </text>
+              <text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>
+                {ellipsis(props.subLabel, 12)}
+              </text>
+            </g>
+          );
+        }}
+      </Spring>
     );
   },
 

client/package.json

@@ -20,6 +20,7 @@
     "object-assign": "^2.0.0",
     "page": "^1.6.3",
     "react": "^0.13.3",
+    "react-motion": "^0.2.7",
     "react-tap-event-plugin": "^0.1.7",
     "react-tween-state": "0.0.5",
     "reqwest": "~1.1.5",