Adding promisified setState and simplfying reflow code for SVG stuff

src/components/SVG/Base.js

@@ -6,7 +6,13 @@ class Base extends React.PureComponent {
     return this.tempBBox ? this.tempBBox : (this.state || {}).bbox;
   }
 
-  setBBox(box, recalculate = {}) {
+  setStateAsync(state) {
+    return new Promise(resolve => {
+      this.setState(state, resolve);
+    });
+  }
+
+  async setBBox(box, recalculate = {}) {
     let bbox = this._currentBBox() || Map({ width: 0, height: 0});
 
     bbox = bbox.merge(box);
@@ -24,9 +30,8 @@ class Base extends React.PureComponent {
     }
 
     this.tempBBox = bbox; // Want to get the updated bbox while setState is pending
-    this.setState({ bbox }, () => {
+    await this.setStateAsync({ bbox });
     this.tempBBox = null;
-    });
   }
 
   getBBox() {

src/components/SVG/Box.js

@@ -16,7 +16,6 @@ class Box extends Base {
   }
 
   reflow() {
-    return new Promise(resolve => {
     const { padding, useAnchors } = this.props;
     const box = this.contained.getBBox();
     const labelBox = this.label ? this.label.getBBox() : { width: 0, height: 0};
@@ -29,13 +28,12 @@ class Box extends Base {
       axisX2: useAnchors ? box.axisX2 + padding : box.width + 2 * padding
     });
 
-      this.setState({
+    return this.setStateAsync({
       width: this.getBBox().width,
       height: box.height + 2 * padding,
       contentTransform: `translate(${ padding } ${ padding + labelBox.height })`,
       rectTransform: `translate(0 ${ labelBox.height })`,
       labelTransform: `translate(0 ${ labelBox.height })`
-      }, resolve);
     });
   }
 

src/components/SVG/HorizontalLayout.js

@@ -50,7 +50,6 @@ class HorizontalLayout extends Base {
       return;
     }
 
-    return new Promise(resolve => {
     const { spacing, withConnectors } = this.props;
 
     const childBoxes = this.children.map(child => child.getBBox());
@@ -67,10 +66,9 @@ class HorizontalLayout extends Base {
       offset += box.width + spacing;
     });
 
-      this.setState({
+    this.setStateAsync({
       childTransforms: this.updateChildTransforms(childBoxes),
       connectorPaths: withConnectors ? this.updateConnectorPaths(childBoxes) : ''
-      }, resolve);
     });
   }
 

src/components/SVG/Image.js

@@ -37,14 +37,12 @@ class Image extends Base {
   }
 
   reflow() {
-    return new Promise(resolve => {
     const { padding } = this.props;
     const box = this.contained.getBBox();
 
-      this.setState({
+    return this.setStateAsync({
       width: Math.round(box.width + 2 * padding),
       height: Math.round(box.height + 2 * padding)
-      }, resolve);
     });
   }
 

src/components/SVG/Loop.js

@@ -73,7 +73,6 @@ class Loop extends Base {
   }
 
   reflow() {
-    return new Promise(resolve => {
     const { skip, repeat, greedy } = this.props;
     const box = this.contained.getBBox();
     const labelBox = this.label ? this.label.getBBox() : { width: 0, height: 0 };
@@ -97,13 +96,12 @@ class Loop extends Base {
     box.offsetX = this.contentOffset.x;
     box.offsetY = this.contentOffset.y;
 
-      this.setState({
+    return this.setStateAsync({
       labelTransform: `translate(${ this.getBBox().width - labelBox.width - 10 } ${ this.getBBox().height + 2 })`,
       loopPaths: [
         skip && skipPath(box, greedy),
         repeat && repeatPath(box, greedy)
       ].filter(Boolean).join('')
-      }, resolve);
     });
   }
 

src/components/SVG/Pin.js

@@ -11,28 +11,21 @@ class Pin extends Base {
   }
 
   reflow() {
-    return new Promise(resolve => {
     const { radius } = this.props;
 
-      this.setBBox({
+    return this.setBBox({
       width: radius * 2,
       height: radius * 2
     });
-
-      this.setState({
-        transform: `translate(${ radius } ${ radius })`
-      }, resolve);
-    });
   }
 
   render() {
     const { radius } = this.props;
-    const { transform } = this.state || {};
 
     const circleProps = {
       r: radius,
       style: style.pin,
-      transform
+      transform: `translate(${ radius } ${ radius })`
     };
 
     return <circle { ...circleProps }></circle>;

src/components/SVG/Text.js

@@ -7,7 +7,6 @@ import style from './style';
 /** @extends React.PureComponent */
 class Text extends Base {
   reflow() {
-    return new Promise(resolve => {
     const box = this.text.getBBox();
 
     this.setBBox({
@@ -15,9 +14,8 @@ class Text extends Base {
       height: box.height
     });
 
-      this.setState({
+    return this.setStateAsync({
       transform: `translate(${-box.x} ${-box.y})`
-      }, resolve);
     });
   }
 

src/components/SVG/VerticalLayout.js

@@ -88,7 +88,6 @@ class VerticalLayout extends Base {
       return Promise.resolve();
     }
 
-    return new Promise(resolve => {
     const { spacing, withConnectors } = this.props;
 
     const childBoxes = this.children.map(child => child.getBBox());
@@ -105,14 +104,13 @@ class VerticalLayout extends Base {
       offset += spacing + box.height;
     });
 
-      this.setState({
+    return this.setStateAsync({
       childTransforms: this.updateChildTransforms(childBoxes),
       connectorPaths: withConnectors ? [
         ...childBoxes.map(box => this.makeCurve(box)),
         this.makeSide(childBoxes[0]),
         this.makeSide(childBoxes[childBoxes.length - 1])
       ].join('') : ''
-      }, resolve);
     });
   }