Reflow graph on subscribed prop change (#42)

Author: bkrem

src/Node/index.js

@@ -30,19 +30,21 @@ export default class Node extends React.Component {
   }
 
   componentWillUpdate(nextProps) {
-    const shouldTransform = this.shouldNodeTransform(this.props, nextProps);
-    if (shouldTransform) {
-      const transform = this.setTransformOrientation(
-        nextProps.nodeData.x,
-        nextProps.nodeData.y,
-        nextProps.orientation,
-      );
-      this.applyTransform(transform, nextProps.transitionDuration);
-    }
+    const transform = this.setTransformOrientation(
+      nextProps.nodeData.x,
+      nextProps.nodeData.y,
+      nextProps.orientation,
+    );
+    this.applyTransform(transform, nextProps.transitionDuration);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.shouldNodeTransform(this.props, nextProps);
   }
 
   shouldNodeTransform(ownProps, nextProps) {
     return (
+      nextProps.subscriptions !== ownProps.subscriptions ||
       nextProps.nodeData.x !== ownProps.nodeData.x ||
       nextProps.nodeData.y !== ownProps.nodeData.y ||
       nextProps.orientation !== ownProps.orientation
@@ -161,6 +163,7 @@ Node.propTypes = {
   name: PropTypes.string.isRequired,
   attributes: PropTypes.object,
   textLayout: PropTypes.object.isRequired,
+  subscriptions: PropTypes.object.isRequired, // eslint-disable-line react/no-unused-prop-types
   circleRadius: PropTypes.number,
   styles: PropTypes.object,
 };

src/Node/tests/index.test.js

@@ -37,6 +37,7 @@ describe('<Node />', () => {
       x: 10,
       y: -10,
     },
+    subscriptions: {},
     styles: {},
   };
 
@@ -212,6 +213,16 @@ describe('<Node />', () => {
     ).toBe(true);
   });
 
+  it('updates its position if any subscribed top-level props change', () => {
+    const subscriptions = { x: 12, y: 10, initialDepth: undefined };
+    const renderedComponent = mount(<Node {...mockProps} subscriptions={subscriptions} />);
+    const nextProps = { ...mockProps, subscriptions: { ...subscriptions, initialDepth: 1 } };
+
+    expect(
+      renderedComponent.instance().shouldNodeTransform(renderedComponent.props(), nextProps),
+    ).toBe(true);
+  });
+
   it('allows passing SVG shape elements + shapeProps to be used as the node element', () => {
     const fixture = { shape: 'ellipse', shapeProps: { rx: 20, ry: 10 } };
     const props = { ...mockProps, nodeSvgShape: fixture };

src/Tree/index.js

@@ -250,10 +250,16 @@ export default class Tree extends React.Component {
       transitionDuration,
       zoomable,
       textLayout,
+      nodeSize,
+      depthFactor,
+      initialDepth,
+      separation,
       circleRadius,
       styles,
     } = this.props;
 
+    const subscriptions = { ...nodeSize, ...separation, depthFactor, initialDepth };
+
     return (
       <div className={`rd3t-tree-container ${zoomable ? 'rd3t-grabbable' : undefined}`}>
         <svg className="rd3t-svg" width="100%" height="100%">
@@ -285,6 +291,7 @@ export default class Tree extends React.Component {
                 onClick={this.handleNodeToggle}
                 textLayout={textLayout}
                 circleRadius={circleRadius}
+                subscriptions={subscriptions}
                 styles={styles.nodes}
               />
             ))}