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,
|
radius: PropTypes.number,
|
||||||
padding: PropTypes.number,
|
padding: PropTypes.number,
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
|
useAnchors: PropTypes.bool,
|
||||||
width: PropTypes.number,
|
width: PropTypes.number,
|
||||||
height: PropTypes.number,
|
height: PropTypes.number,
|
||||||
rectTransform: PropTypes.string,
|
rectTransform: PropTypes.string,
|
||||||
@ -51,7 +52,7 @@ Box.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const layout = data => {
|
const layout = data => {
|
||||||
const { label, padding } = {
|
const { label, padding, useAnchors } = {
|
||||||
...Box.defaultProps,
|
...Box.defaultProps,
|
||||||
...data.props
|
...data.props
|
||||||
};
|
};
|
||||||
@ -60,16 +61,32 @@ const layout = data => {
|
|||||||
getBBox(<text style={ style.infoText }>{ label }</text>) :
|
getBBox(<text style={ style.infoText }>{ label }</text>) :
|
||||||
{ width: 0, height: 0 };
|
{ 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 = {
|
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 = {
|
||||||
...data.props,
|
...data.props,
|
||||||
width: data.box.width,
|
width,
|
||||||
height: childBox.height + 2 * padding,
|
height,
|
||||||
rectTransform: `translate(0 ${ labelBox.height })`,
|
rectTransform: `translate(0 ${ labelBox.height })`,
|
||||||
contentTransform: `translate(${ padding } ${ padding + labelBox.height })`
|
contentTransform: `translate(${ content.x } ${ content.y })`
|
||||||
};
|
};
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user