Fix text position on Y-axis, we should take fontSize in mind to layout the Text/TSpan shapes, SVG coord tes case https://www.w3.org/TR/SVG/images/coords/OrigCoordSys.svg

This commit is contained in:
fxwan
2017-04-27 11:02:49 +08:00
committed by Mikael Sand
parent 1e6f36053a
commit 6b95d1a33c

View File

@@ -80,7 +80,7 @@ function parseDelta(delta) {
}
}
export default function(props, container) {
export default function(props, container, ref) {
const {
x,
y,
@@ -96,34 +96,45 @@ export default function(props, container) {
let { children } = props;
let content = null;
let fontProps = extractFont(props);
if (props.parentFontProps) {
fontProps = Object.assign({}, props.parentFontProps, fontProps);
}
if (typeof children === 'string' || typeof children === 'number') {
const childrenString = children.toString();
if (container) {
children = <TSpan>{childrenString}</TSpan>;
children = <TSpan parentFontProps={fontProps}>{childrenString}</TSpan>;
} else {
content = childrenString;
children = null;
}
} else if (Children.count(children) > 1 || Array.isArray(children)) {
} else if (Children.count(children) >= 1 || Array.isArray(children)) {
children = Children.map(children, child => {
if (typeof child === 'string' || typeof child === 'number') {
return <TSpan>{child.toString()}</TSpan>;
return <TSpan parentFontProps={fontProps}>{child.toString()}</TSpan>;
} else {
return child;
//return child;
return React.cloneElement(child, {
parentFontProps: fontProps
});
}
});
}
let posY = null;
if (!_.isNil(y) && fontProps.fontSize) {
posY = (parseFloat(y || 0) - parseFloat(fontProps.fontSize || 0)).toString();
}
return {
textAnchor: anchors[textAnchor] || 0,
font: extractFont(props),
font: fontProps,
children,
content,
deltaX,
deltaY,
startOffset: (startOffset || 0).toString(),
positionX: _.isNil(x) ? null : x.toString(),
positionY: _.isNil(y) ? null : y.toString()
positionY: posY
};
}