Smoothens mounting/unmounting transitions for nodes & links

Author: bkrem

src/Link/index.js

@@ -5,26 +5,25 @@ import './style.css';
 
 export default class Link extends React.PureComponent {
 
-  constructor(props) {
-    super(props);
-    this.expandPath = this.expandPath.bind(this);
+  componentDidMount() {
+    this.applyOpacity(1);
   }
 
-  componentDidMount() {
-    console.log('mounted:\n', `${this.props.linkData.source.name}-->${this.props.linkData.target.name}`);
-    select(this.link)
-    .transition()
-    .duration(500)
-    .attr('d', this.expandPath());
+  componentWillLeave(done) {
+    this.applyOpacity(0, done);
   }
 
-  componentWillLeave() {
-    const { linkData } = this.props;
-    console.log('Leaving:\n', `${linkData.source.name}-->${linkData.target.name}`);
-    select(this.link)
-    .transition()
-    .duration(500)
-    .attr('d', this.collapsePath());
+  applyOpacity(opacity, done = () => {}) {
+    const { enabled, duration } = this.props.transitions;
+    if (enabled) {
+      select(this.link)
+      .transition()
+      .duration(duration)
+      .style('opacity', opacity)
+      .each('end', done);
+    } else {
+      done();
+    }
   }
 
   diagonalPath(linkData, orientation) {
@@ -57,11 +56,13 @@ export default class Link extends React.PureComponent {
   }
 
   render() {
+    const { transitions } = this.props;
     return (
       <path
         ref={(l) => { this.link = l; }}
         className="linkBase"
-        d={this.collapsePath()}
+        style={transitions.enabled ? undefined : { opacity: 1 }}
+        d={this.expandPath()}
       />
     );
   }
@@ -77,4 +78,5 @@ Link.propTypes = {
     'diagonal',
     'elbow',
   ]).isRequired,
+  transitions: PropTypes.object.isRequired,
 };

src/Node/index.js

@@ -42,35 +42,38 @@ export default class Node extends React.Component {
     return transform;
   }
 
-  applyTransform(transform, done = () => {}) {
+  applyTransform(transform, opacity = 1, done = () => {}) {
     const { enabled, duration } = this.props.transitions;
     if (enabled) {
       select(this.node)
       .transition()
       .duration(duration)
       .attr('transform', transform)
+      .style('opacity', opacity)
       .each('end', done);
     } else {
       done();
     }
   }
 
+  handleClick() {
+    this.props.onClick(this.props.nodeData.id);
+  }
+
   componentWillLeave(done) {
     const { parent } = this.props.nodeData;
     const originX = parent ? parent.x : 0;
     const originY = parent ? parent.y : 0;
     const transform = this.setTransformOrientation(originX, originY);
 
-    this.applyTransform(transform, done);
-  }
-
-  handleClick() {
-    this.props.onClick(this.props.nodeData.id);
+    this.applyTransform(transform, 0, done);
+    // this.applyOpacity(0, done);
   }
 
   render() {
     const { nodeData, depthFactor, transitions } = this.props;
-    const transform = transitions.enabled ?
+
+    const transform = transitions.enabled && this.state.transform ?
       this.state.transform :
       this.setTransformOrientation(nodeData.x, nodeData.y);
 
@@ -82,6 +85,7 @@ export default class Node extends React.Component {
       <g
         id={nodeData.id}
         ref={(n) => { this.node = n; }}
+        style={transitions.enabled ? undefined : { opacity: 1 }}
         className={nodeData._children ? 'nodeBase' : 'leafNodeBase'}
         transform={transform}
         onClick={this.handleClick}

src/Tree/index.js

@@ -212,6 +212,7 @@ export default class Tree extends React.Component {
   render() {
     const { orientation, translate, pathFunc, depthFactor, transitions } = this.props;
     const { nodes, links } = this.generateTree();
+
     return (
       <div className="treeContainer">
         <svg width="100%" height="100%">
@@ -239,6 +240,7 @@ export default class Tree extends React.Component {
                 orientation={orientation}
                 pathFunc={pathFunc}
                 linkData={linkData}
+                transitions={transitions}
               />
             )}
           </TransitionGroup>