From eb2658e451cc3ee3901ee11c73de5a0b3ffc568a Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 28 Jun 2018 11:06:34 -0400
Subject: [PATCH] Correctly apply react style object to the dom element
 renderer

---
 package.json                                   |  1 +
 src/components/stage-wrapper/stage-wrapper.jsx |  1 -
 src/components/stage/stage.jsx                 | 10 ++++++++--
 src/containers/dom-element-renderer.jsx        | 12 ++++++++++--
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ff5ec086d..fc08f97b6 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
     "style-loader": "^0.21.0",
     "svg-to-image": "1.1.3",
     "text-encoding": "0.6.4",
+    "to-style": "1.3.3",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "wav-encoder": "1.3.0",
     "web-audio-test-api": "^0.5.2",
diff --git a/src/components/stage-wrapper/stage-wrapper.jsx b/src/components/stage-wrapper/stage-wrapper.jsx
index eb0d129f8..795b32247 100644
--- a/src/components/stage-wrapper/stage-wrapper.jsx
+++ b/src/components/stage-wrapper/stage-wrapper.jsx
@@ -28,7 +28,6 @@ const StageWrapperComponent = function (props) {
                 {
                     isRendererSupported ?
                         <Stage
-                            shrink={0}
                             stageSize={stageSize}
                             vm={vm}
                         /> :
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 30885874d..d8c0d0774 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -37,6 +37,10 @@ const StageComponent = props => {
                     [styles.stageWrapperOverlay]: isFullScreen,
                     [styles.withColorPicker]: !isFullScreen && isColorPicking
                 })}
+                style={{
+                    minHeight: stageDimensions.height,
+                    minWidth: stageDimensions.width
+                }}
                 onDoubleClick={onDoubleClick}
             >
                 <DOMElementRenderer
@@ -45,8 +49,10 @@ const StageComponent = props => {
                         {[styles.stageOverlayContent]: isFullScreen}
                     )}
                     domElement={canvas}
-                    height={stageDimensions.height}
-                    width={stageDimensions.width}
+                    style={{
+                        height: stageDimensions.height,
+                        width: stageDimensions.width
+                    }}
                     {...boxProps}
                 />
                 <Box className={styles.monitorWrapper}>
diff --git a/src/containers/dom-element-renderer.jsx b/src/containers/dom-element-renderer.jsx
index 4636e2fb7..41f536f33 100644
--- a/src/containers/dom-element-renderer.jsx
+++ b/src/containers/dom-element-renderer.jsx
@@ -1,6 +1,7 @@
 import omit from 'lodash.omit';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Style from 'to-style';
 
 /*
  * DOMElementRenderer wraps a DOM element, allowing it to be
@@ -31,14 +32,21 @@ class DOMElementRenderer extends React.Component {
         // Look at me, I'm the React now!
         Object.assign(
             this.props.domElement,
-            omit(this.props, ['domElement', 'children'])
+            omit(this.props, ['domElement', 'children', 'style'])
         );
+
+        // Convert react style prop to dom element styling.
+        if (this.props.style) {
+            this.props.domElement.style = Style.string(this.props.style);
+        }
+
         return <div ref={this.setContainer} />;
     }
 }
 
 DOMElementRenderer.propTypes = {
-    domElement: PropTypes.instanceOf(Element).isRequired
+    domElement: PropTypes.instanceOf(Element).isRequired,
+    style: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
 
 export default DOMElementRenderer;