Adding useAnchor prop to Box and calculating axis coords
This commit is contained in:
parent
cdb77255a7
commit
97509773af
@ -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),
|
||||
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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user