diff --git a/src/rendering/Box/index.js b/src/rendering/Box/index.js index b8e44d1..e443dcd 100644 --- a/src/rendering/Box/index.js +++ b/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({ label }) : { 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), - height: childBox.height + 2 * padding + labelBox.height + width, + 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, - height: childBox.height + 2 * padding, + width, + height, rectTransform: `translate(0 ${ labelBox.height })`, - contentTransform: `translate(${ padding } ${ padding + labelBox.height })` + contentTransform: `translate(${ content.x } ${ content.y })` }; return data; };