From 3920c716e4e287288bca1ab17e2f4a3272827b13 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Thu, 31 Jan 2019 17:08:30 -0500 Subject: [PATCH] Fixing text positioning IE & Edge don't support dominant-baseline --- src/rendering/Box/index.js | 11 +++++++++-- src/rendering/Box/style.js | 3 +-- src/rendering/Text/index.js | 19 ++++++++++++++++--- src/rendering/Text/style.js | 3 +-- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/rendering/Box/index.js b/src/rendering/Box/index.js index e443dcd..e37be85 100644 --- a/src/rendering/Box/index.js +++ b/src/rendering/Box/index.js @@ -12,6 +12,7 @@ const Box = ({ width, height, rectTransform, + labelTransform, contentTransform, children }) => { @@ -23,11 +24,15 @@ const Box = ({ ry: radius, transform: rectTransform }; + const labelProps = { + transform: labelTransform, + style: style.infoText + }; return <> - { label && { label } } - + { label && { label } } + { children } ; @@ -47,6 +52,7 @@ Box.propTypes = { width: PropTypes.number, height: PropTypes.number, rectTransform: PropTypes.string, + labelTransform: PropTypes.string, contentTransform: PropTypes.string, children: PropTypes.node }; @@ -86,6 +92,7 @@ const layout = data => { width, height, rectTransform: `translate(0 ${ labelBox.height })`, + labelTransform: `translate(0 ${ -labelBox.y })`, contentTransform: `translate(${ content.x } ${ content.y })` }; return data; diff --git a/src/rendering/Box/style.js b/src/rendering/Box/style.js index 2562008..96c563f 100644 --- a/src/rendering/Box/style.js +++ b/src/rendering/Box/style.js @@ -33,6 +33,5 @@ export const anchor = { }; export const infoText = { fontSize: fontSizeSmall, - fontFamily: fontFamily, - dominantBaseline: 'text-before-edge' + fontFamily }; diff --git a/src/rendering/Text/index.js b/src/rendering/Text/index.js index dd44a41..5448d54 100644 --- a/src/rendering/Text/index.js +++ b/src/rendering/Text/index.js @@ -5,8 +5,16 @@ import { getBBox } from 'layout'; import * as style from './style'; -const Text = ({ quoted, theme, children }) => { - return +const Text = ({ quoted, theme, transform, children }) => { + const textProps = { + transform, + style: { + ...style.text, + ...style[theme] + } + }; + + return { quoted ? <> { children } @@ -18,6 +26,7 @@ const Text = ({ quoted, theme, children }) => { Text.propTypes = { quoted: PropTypes.bool, theme: PropTypes.string, + transform: PropTypes.string, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node @@ -25,10 +34,14 @@ Text.propTypes = { }; const layout = data => { - const { width, height } = getBBox( + const { width, height, y } = getBBox( { data.children }); data.box = { width, height }; + data.props = { + ...data.props, + transform: `translate(0 ${ -y })` + }; return data; }; diff --git a/src/rendering/Text/style.js b/src/rendering/Text/style.js index 4dfc18a..3c21a3e 100644 --- a/src/rendering/Text/style.js +++ b/src/rendering/Text/style.js @@ -1,8 +1,7 @@ import { fontSize, fontFamily, white, grey } from 'rendering/style'; export const text = { - fontSize, fontFamily, - dominantBaseline: 'text-before-edge' + fontSize, fontFamily }; export const anchor = { fill: white