Adjusting font baseline to avoid needing to transform it
This commit is contained in:
parent
9d7da52ee3
commit
3fcf31bc48
@ -12,7 +12,6 @@ const Box = ({
|
||||
width,
|
||||
height,
|
||||
rectTransform,
|
||||
labelTransform,
|
||||
contentTransform,
|
||||
children
|
||||
}) => {
|
||||
@ -24,14 +23,10 @@ const Box = ({
|
||||
ry: radius,
|
||||
transform: rectTransform
|
||||
};
|
||||
const textProps = {
|
||||
transform: labelTransform,
|
||||
style: style.infoText
|
||||
};
|
||||
|
||||
return <>
|
||||
<rect { ...rectProps }></rect>
|
||||
{ label && <text { ...textProps }>{ label }</text> }
|
||||
{ label && <text style={ style.infoText }>{ label }</text> }
|
||||
<g transform={ contentTransform}>
|
||||
{ children }
|
||||
</g>
|
||||
@ -51,7 +46,6 @@ Box.propTypes = {
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
rectTransform: PropTypes.string,
|
||||
labelTransform: PropTypes.string,
|
||||
contentTransform: PropTypes.string,
|
||||
children: PropTypes.node
|
||||
};
|
||||
@ -75,7 +69,6 @@ const layout = data => {
|
||||
width: data.box.width,
|
||||
height: childBox.height + 2 * padding,
|
||||
rectTransform: `translate(0 ${ labelBox.height })`,
|
||||
labelTransform: `translate(0 ${ labelBox.height })`,
|
||||
contentTransform: `translate(${ padding } ${ padding + labelBox.height })`
|
||||
};
|
||||
return data;
|
||||
|
@ -34,5 +34,5 @@ export const anchor = {
|
||||
export const infoText = {
|
||||
fontSize: fontSizeSmall,
|
||||
fontFamily: fontFamily,
|
||||
dominantBaseline: 'text-after-edge'
|
||||
dominantBaseline: 'text-before-edge'
|
||||
};
|
||||
|
@ -5,13 +5,8 @@ import { getBBox } from 'layout';
|
||||
|
||||
import * as style from './style';
|
||||
|
||||
const Text = ({ transform, quoted, theme, children }) => {
|
||||
const textProps = {
|
||||
style: { ...style.text, ...style[theme] },
|
||||
transform
|
||||
};
|
||||
|
||||
return <text { ...textProps }>
|
||||
const Text = ({ quoted, theme, children }) => {
|
||||
return <text style={{ ...style.text, ...style[theme] }}>
|
||||
{ quoted ? <>
|
||||
<tspan style={ style.quote }>“</tspan>
|
||||
<tspan>{ children }</tspan>
|
||||
@ -23,7 +18,6 @@ const Text = ({ transform, quoted, theme, children }) => {
|
||||
Text.propTypes = {
|
||||
quoted: PropTypes.bool,
|
||||
theme: PropTypes.string,
|
||||
transform: PropTypes.string,
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.arrayOf(PropTypes.node),
|
||||
PropTypes.node
|
||||
@ -31,11 +25,10 @@ Text.propTypes = {
|
||||
};
|
||||
|
||||
const layout = data => {
|
||||
const {x, y, width, height } = getBBox(
|
||||
const { width, height } = getBBox(
|
||||
<Text { ...data.props }>{ data.children }</Text>);
|
||||
|
||||
data.box = { width, height };
|
||||
data.props.transform = `translate(${ -x } ${ -y })`;
|
||||
return data;
|
||||
};
|
||||
|
||||
|
@ -1,7 +1,8 @@
|
||||
import { fontSize, fontFamily, white, grey } from 'rendering/style';
|
||||
|
||||
export const text = {
|
||||
fontSize, fontFamily
|
||||
fontSize, fontFamily,
|
||||
dominantBaseline: 'text-before-edge'
|
||||
};
|
||||
export const anchor = {
|
||||
fill: white
|
||||
|
Loading…
Reference in New Issue
Block a user