Fixing text positioning
IE & Edge don't support dominant-baseline
This commit is contained in:
parent
91ab1dbd05
commit
3920c716e4
@ -12,6 +12,7 @@ const Box = ({
|
|||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
rectTransform,
|
rectTransform,
|
||||||
|
labelTransform,
|
||||||
contentTransform,
|
contentTransform,
|
||||||
children
|
children
|
||||||
}) => {
|
}) => {
|
||||||
@ -23,10 +24,14 @@ const Box = ({
|
|||||||
ry: radius,
|
ry: radius,
|
||||||
transform: rectTransform
|
transform: rectTransform
|
||||||
};
|
};
|
||||||
|
const labelProps = {
|
||||||
|
transform: labelTransform,
|
||||||
|
style: style.infoText
|
||||||
|
};
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<rect { ...rectProps }></rect>
|
<rect { ...rectProps }></rect>
|
||||||
{ label && <text style={ style.infoText }>{ label }</text> }
|
{ label && <text { ...labelProps }>{ label }</text> }
|
||||||
<g transform={ contentTransform }>
|
<g transform={ contentTransform }>
|
||||||
{ children }
|
{ children }
|
||||||
</g>
|
</g>
|
||||||
@ -47,6 +52,7 @@ Box.propTypes = {
|
|||||||
width: PropTypes.number,
|
width: PropTypes.number,
|
||||||
height: PropTypes.number,
|
height: PropTypes.number,
|
||||||
rectTransform: PropTypes.string,
|
rectTransform: PropTypes.string,
|
||||||
|
labelTransform: PropTypes.string,
|
||||||
contentTransform: PropTypes.string,
|
contentTransform: PropTypes.string,
|
||||||
children: PropTypes.node
|
children: PropTypes.node
|
||||||
};
|
};
|
||||||
@ -86,6 +92,7 @@ const layout = data => {
|
|||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
rectTransform: `translate(0 ${ labelBox.height })`,
|
rectTransform: `translate(0 ${ labelBox.height })`,
|
||||||
|
labelTransform: `translate(0 ${ -labelBox.y })`,
|
||||||
contentTransform: `translate(${ content.x } ${ content.y })`
|
contentTransform: `translate(${ content.x } ${ content.y })`
|
||||||
};
|
};
|
||||||
return data;
|
return data;
|
||||||
|
@ -33,6 +33,5 @@ export const anchor = {
|
|||||||
};
|
};
|
||||||
export const infoText = {
|
export const infoText = {
|
||||||
fontSize: fontSizeSmall,
|
fontSize: fontSizeSmall,
|
||||||
fontFamily: fontFamily,
|
fontFamily
|
||||||
dominantBaseline: 'text-before-edge'
|
|
||||||
};
|
};
|
||||||
|
@ -5,8 +5,16 @@ import { getBBox } from 'layout';
|
|||||||
|
|
||||||
import * as style from './style';
|
import * as style from './style';
|
||||||
|
|
||||||
const Text = ({ quoted, theme, children }) => {
|
const Text = ({ quoted, theme, transform, children }) => {
|
||||||
return <text style={{ ...style.text, ...style[theme] }}>
|
const textProps = {
|
||||||
|
transform,
|
||||||
|
style: {
|
||||||
|
...style.text,
|
||||||
|
...style[theme]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return <text { ...textProps }>
|
||||||
{ quoted ? <>
|
{ quoted ? <>
|
||||||
<tspan style={ style.quote }>“</tspan>
|
<tspan style={ style.quote }>“</tspan>
|
||||||
<tspan>{ children }</tspan>
|
<tspan>{ children }</tspan>
|
||||||
@ -18,6 +26,7 @@ const Text = ({ quoted, theme, children }) => {
|
|||||||
Text.propTypes = {
|
Text.propTypes = {
|
||||||
quoted: PropTypes.bool,
|
quoted: PropTypes.bool,
|
||||||
theme: PropTypes.string,
|
theme: PropTypes.string,
|
||||||
|
transform: PropTypes.string,
|
||||||
children: PropTypes.oneOfType([
|
children: PropTypes.oneOfType([
|
||||||
PropTypes.arrayOf(PropTypes.node),
|
PropTypes.arrayOf(PropTypes.node),
|
||||||
PropTypes.node
|
PropTypes.node
|
||||||
@ -25,10 +34,14 @@ Text.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const layout = data => {
|
const layout = data => {
|
||||||
const { width, height } = getBBox(
|
const { width, height, y } = getBBox(
|
||||||
<Text { ...data.props }>{ data.children }</Text>);
|
<Text { ...data.props }>{ data.children }</Text>);
|
||||||
|
|
||||||
data.box = { width, height };
|
data.box = { width, height };
|
||||||
|
data.props = {
|
||||||
|
...data.props,
|
||||||
|
transform: `translate(0 ${ -y })`
|
||||||
|
};
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import { fontSize, fontFamily, white, grey } from 'rendering/style';
|
import { fontSize, fontFamily, white, grey } from 'rendering/style';
|
||||||
|
|
||||||
export const text = {
|
export const text = {
|
||||||
fontSize, fontFamily,
|
fontSize, fontFamily
|
||||||
dominantBaseline: 'text-before-edge'
|
|
||||||
};
|
};
|
||||||
export const anchor = {
|
export const anchor = {
|
||||||
fill: white
|
fill: white
|
||||||
|
Loading…
Reference in New Issue
Block a user