From 3920c716e4e287288bca1ab17e2f4a3272827b13 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
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 <>
     <rect { ...rectProps }></rect>
-    { label && <text style={ style.infoText }>{ label }</text> }
-    <g transform={ contentTransform}>
+    { label && <text { ...labelProps }>{ label }</text> }
+    <g transform={ contentTransform }>
       { children }
     </g>
   </>;
@@ -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 <text style={{ ...style.text, ...style[theme] }}>
+const Text = ({ quoted, theme, transform, children }) => {
+  const textProps = {
+    transform,
+    style: {
+      ...style.text,
+      ...style[theme]
+    }
+  };
+
+  return <text { ...textProps }>
     { quoted ? <>
       <tspan style={ style.quote }>&ldquo;</tspan>
       <tspan>{ children }</tspan>
@@ -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(
     <Text { ...data.props }>{ data.children }</Text>);
 
   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