Adding useAnchor prop to Box and calculating axis coords

src/rendering/Box/index.js

@@ -43,6 +43,7 @@ Box.propTypes = {
   radius: PropTypes.number,
   padding: PropTypes.number,
   label: PropTypes.string,
+  useAnchors: PropTypes.bool,
   width: PropTypes.number,
   height: PropTypes.number,
   rectTransform: PropTypes.string,
@@ -51,7 +52,7 @@ Box.propTypes = {
 };
 
 const layout = data => {
-  const { label, padding } = {
+  const { label, padding, useAnchors } = {
     ...Box.defaultProps,
     ...data.props
   };
@@ -60,16 +61,32 @@ const layout = data => {
     getBBox(<text style={ style.infoText }>{ label }</text>) :
     { width: 0, height: 0 };
 
+  const width = Math.max(childBox.width + 2 * padding, labelBox.width);
+  const height = childBox.height + 2 * padding;
+  const content = {
+    x: (width - childBox.width) / 2,
+    y: padding + labelBox.height
+  };
+
   data.box = {
-    width: Math.max(childBox.width + 2 * padding, labelBox.width),
+    width,
-    height: childBox.height + 2 * padding + labelBox.height
+    height: height + labelBox.height,
+    axisY: useAnchors
+      ? childBox.axisY + content.y
+      : height / 2 + labelBox.height,
+    axisX1: useAnchors
+      ? childBox.axisX1 + content.x
+      : 0,
+    axisX2: useAnchors
+      ? childBox.axisX2 + content.x
+      : width
   };
   data.props = {
     ...data.props,
-    width: data.box.width,
+    width,
-    height: childBox.height + 2 * padding,
+    height,
     rectTransform: `translate(0 ${ labelBox.height })`,
-    contentTransform: `translate(${ padding } ${ padding + labelBox.height })`
+    contentTransform: `translate(${ content.x } ${ content.y })`
   };
   return data;
 };