hide global scroll bars with css, make rect sorting actually work by changing to minus instead of comparator

Author: ChristianEdwardPadilla

src/components/CodePreview.tsx

@@ -0,0 +1,19 @@
+import React, { Component, Fragment } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { format } from 'prettier';
+import componentRender from '../utils/componentRender.util';
+
+class CodePreview extends Component {
+  render(): JSX.Element {
+    const { focusComponent, components } = this.props;
+    return (
+      <div>
+        {/* <p> */}
+        <pre>{format(componentRender(focusComponent, components))}</pre>
+        {/* </p> */}
+      </div>
+    );
+  }
+}
+
+export default CodePreview;

src/components/KonvaStage.tsx

@@ -196,7 +196,7 @@ class KonvaStage extends Component {
                   imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
                 />
               ))
-              .sort((rectA, rectB) => rectA.props.width * rectA.props.height < rectB.props.width * rectB.props.height) // shouldnt this be subtraction instead of < ? see MDN
+              .sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height) // shouldnt this be subtraction instead of < ? see MDN
             // reasoning for the sort:
             // Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
             // as long as the smallest components are rendered last they will always be accessible over the big boys

src/public/styles/style.css

@@ -4,6 +4,13 @@
   box-sizing: inherit;
 }
 
+* {
+  overflow: hidden;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 html {
   box-sizing: border-box;
   overflow: hidden;
@@ -14,6 +21,7 @@ body {
   padding: 0;
   font-family: 'Open sans', sans-serif;
   font-weight: 400;
+  overflow: hidden;
 }
 
 /*