Merge pull request #4232 from adroitwhiz/develop

Wrap the stage canvas so that styles are not directly applied to it, fixing bounds calculations

.gitignore

@@ -4,6 +4,7 @@
 # NPM
 /node_modules
 npm-*
+/package-lock.json
 
 # Testing
 /.nyc_output

src/components/stage/stage.css

@@ -9,9 +9,9 @@
     */
     display: block;
 
-    /* Attach border radius directly to canvas to prevent needing overflow:hidden; */
     border-radius: $space;
     border: $stage-standard-border-width solid $ui-black-transparent;
+    overflow: hidden;
 
     /* @todo: This is for overriding the value being set somewhere. Where is it being set? */
     background-color: transparent;

src/components/stage/stage.jsx

@@ -48,18 +48,25 @@ const StageComponent = props => {
                 }}
                 onDoubleClick={onDoubleClick}
             >
-                <DOMElementRenderer
+                <Box
                     className={classNames(
                         styles.stage,
                         {[styles.stageOverlayContent]: isFullScreen}
                     )}
-                    domElement={canvas}
                     style={{
                         height: stageDimensions.height,
                         width: stageDimensions.width
                     }}
-                    {...boxProps}
-                />
+                >
+                    <DOMElementRenderer
+                        domElement={canvas}
+                        style={{
+                            height: stageDimensions.height,
+                            width: stageDimensions.width
+                        }}
+                        {...boxProps}
+                    />
+                </Box>
                 <Box className={styles.monitorWrapper}>
                     <MonitorList
                         draggable={useEditorDragStyle}

src/lib/screen-utils.js

@@ -69,6 +69,10 @@ const getStageDimensions = (stageSize, isFullScreen) => {
         stageDimensions.width = stageDimensions.scale * stageDimensions.widthDefault;
     }
 
+    // Round off dimensions to prevent resampling/blurriness
+    stageDimensions.height = Math.round(stageDimensions.height);
+    stageDimensions.width = Math.round(stageDimensions.width);
+
     return stageDimensions;
 };