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 { const {
x, x,
y, y,
@@ -96,34 +96,45 @@ export default function(props, container) {
let { children } = props; let { children } = props;
let content = null; let content = null;
let fontProps = extractFont(props);
if (props.parentFontProps) {
fontProps = Object.assign({}, props.parentFontProps, fontProps);
}
if (typeof children === 'string' || typeof children === 'number') { if (typeof children === 'string' || typeof children === 'number') {
const childrenString = children.toString(); const childrenString = children.toString();
if (container) { if (container) {
children = <TSpan>{childrenString}</TSpan>; children = <TSpan parentFontProps={fontProps}>{childrenString}</TSpan>;
} else { } else {
content = childrenString; content = childrenString;
children = null; 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 => { children = Children.map(children, child => {
if (typeof child === 'string' || typeof child === 'number') { if (typeof child === 'string' || typeof child === 'number') {
return <TSpan>{child.toString()}</TSpan>; return <TSpan parentFontProps={fontProps}>{child.toString()}</TSpan>;
} else { } 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 { return {
textAnchor: anchors[textAnchor] || 0, textAnchor: anchors[textAnchor] || 0,
font: extractFont(props), font: fontProps,
children, children,
content, content,
deltaX, deltaX,
deltaY, deltaY,
startOffset: (startOffset || 0).toString(), startOffset: (startOffset || 0).toString(),
positionX: _.isNil(x) ? null : x.toString(), positionX: _.isNil(x) ? null : x.toString(),
positionY: _.isNil(y) ? null : y.toString() positionY: posY
}; };
} }