Simplifying "pre-reflow" logic

src/components/SVG/Base.js

@@ -46,28 +46,20 @@ class Base extends React.PureComponent {
     };
   }
 
-  async doPreReflow() {
+  async reflowChildren() {
-    const components = this.preReflow();
-
     // No child components
-    if (components === undefined) {
+    if (this.children === undefined) {
       return true;
     }
 
-    // List of child components
+    const reflowed = await Promise.all(this.children.map(c => c.doReflow()));
-    if (components.map) {
-      const componentsReflowed = await Promise.all(components.map(c => c.doReflow()));
 
-      return componentsReflowed.reduce((memo, value) => memo || value, false);
+    return reflowed.reduce((memo, value) => memo || value, false);
-    }
-
-    // One child component
-    return components.doReflow();
   }
 
   async doReflow() {
     const oldBBox = this._currentBBox();
-    const shouldReflow = await this.doPreReflow();
+    const shouldReflow = await this.reflowChildren();
 
     if (shouldReflow) {
       this.reflow();
@@ -76,10 +68,6 @@ class Base extends React.PureComponent {
     return this._currentBBox() !== oldBBox;
   }
 
-  preReflow() {
-    // Implemented in subclass, return array of components to reflow before this
-  }
-
   reflow() {
     // Implemented in subclasses
   }

src/components/SVG/Box.js

@@ -11,13 +11,9 @@ class Box extends Base {
     radius: 3
   }
 
-  preReflow() {
-    return this.contained;
-  }
-
   reflow() {
     const { padding, useAnchors } = this.props;
-    const box = this.contained.getBBox();
+    const box = this.children[0].getBBox();
     const labelBox = this.label ? this.label.getBBox() : { width: 0, height: 0};
 
     this.setBBox({
@@ -37,7 +33,7 @@ class Box extends Base {
     });
   }
 
-  containedRef = contained => this.contained = contained
+  containedRef = contained => this.children = [contained]
 
   labelRef = label => this.label = label
 

src/components/SVG/HorizontalLayout.js

@@ -40,10 +40,6 @@ class HorizontalLayout extends Base {
     }, new Path()).toString();
   }
 
-  preReflow() {
-    return this.children;
-  }
-
   reflow() {
     const { spacing, withConnectors } = this.props;
 

src/components/SVG/Image.js

@@ -30,13 +30,9 @@ class Image extends Base {
     height: 0
   }
 
-  preReflow() {
-    return this.contained;
-  }
-
   reflow() {
     const { padding } = this.props;
-    const box = this.contained.getBBox();
+    const box = this.children[0].getBBox();
 
     return this.setStateAsync({
       width: Math.round(box.width + 2 * padding),
@@ -44,7 +40,7 @@ class Image extends Base {
     });
   }
 
-  containedRef = contained => this.contained = contained
+  containedRef = contained => this.children = [contained]
 
   svgRef = svg => this.svg = svg
 

src/components/SVG/Loop.js

@@ -68,13 +68,9 @@ class Loop extends Base {
     }
   }
 
-  preReflow() {
-    return this.contained;
-  }
-
   reflow() {
     const { skip, repeat, greedy } = this.props;
-    const box = this.contained.getBBox();
+    const box = this.children[0].getBBox();
     const labelBox = this.label ? this.label.getBBox() : { width: 0, height: 0 };
 
     let height = box.height + labelBox.height;
@@ -105,7 +101,7 @@ class Loop extends Base {
     });
   }
 
-  containedRef = contained => this.contained = contained
+  containedRef = contained => this.children = [contained]
 
   labelRef = label => this.label = label
 

src/components/SVG/VerticalLayout.js

@@ -78,10 +78,6 @@ class VerticalLayout extends Base {
     }
   }
 
-  preReflow() {
-    return this.children;
-  }
-
   reflow() {
     const { spacing, withConnectors } = this.props;