From e70705be5feff605c2e166e564810b47f4b5fe21 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Sun, 27 Jan 2019 08:39:49 -0500
Subject: [PATCH] Extracting bounding box code into its own function

---
 src/layout.js                | 19 +++++++++++++++++++
 src/rendering/Text/layout.js | 22 +++++-----------------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/layout.js b/src/layout.js
index 6b05543..ac57841 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -1,3 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
 import SVG from 'rendering/SVG/layout';
 import Text from 'rendering/Text/layout';
 
@@ -19,4 +22,20 @@ const layout = data => {
   });
 };
 
+const getBBox = content => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  ReactDOM.render(
+    <svg width="0" height="0" viewBox="0 0 0 0">
+      <g>{ content }</g>
+    </svg>, container);
+
+  const box = container.querySelector('svg > g').getBBox();
+  document.body.removeChild(container);
+
+  return box;
+};
+
 export default layout;
+export { getBBox };
diff --git a/src/rendering/Text/layout.js b/src/rendering/Text/layout.js
index cfe82e1..da1cdff 100644
--- a/src/rendering/Text/layout.js
+++ b/src/rendering/Text/layout.js
@@ -1,26 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
+import { getBBox } from 'layout';
 import Text from 'rendering/Text';
 
 const layoutText = data => {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
+  const {x, y, width, height } = getBBox(
+    <Text { ...data.props }>{ data.children }</Text>);
 
-  ReactDOM.render(
-    <svg width="0" height="0" viewBox="0 0 0 0">
-      <Text { ...data.props }>{ data.children }</Text>
-    </svg>,
-    container);
-
-  const box = container.querySelector('svg > text').getBBox();
-  document.body.removeChild(container);
-
-  data.box = {
-    width: box.width,
-    height: box.height
-  };
-  data.props.transform = `translate(${ -box.x } ${ -box.y })`;
+  data.box = { width, height };
+  data.props.transform = `translate(${ -x } ${ -y })`;
   return data;
 };