pseudochild is always rendered first now, regardless of size

Author: ChristianEdwardPadilla

src/components/CodePreview.tsx

@@ -25,7 +25,7 @@ class CodePreview extends Component<Props> {
             direction: 'rtl',
             paddingLeft: '20px',
             color: '#D3D3D3',
-            fontSize: 16,
+            fontSize: 15,
             overflow: 'auto',
           }}
         >

src/components/HtmlAttr.jsx

@@ -26,7 +26,7 @@ const styles = theme => ({
   input: {
     color: '#fff',
     opacity: '0.7',
-    marginBottom: '10px',
+    marginBottom: '15px',
   },
 });
 
@@ -72,6 +72,7 @@ class HtmlAttr extends Component {
               classes: {
                 root: classes.cssLabel,
                 focused: classes.cssFocused,
+                input: classes.input,
               },
             }}
             InputProps={{

src/components/KonvaStage.tsx

@@ -10,8 +10,8 @@ class KonvaStage extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      stageWidth: 1000,
-      stageHeight: 1000,
+      stageWidth: 1500,
+      stageHeight: 1500,
       blockSnapSize: 10,
       grid: [],
       gridStroke: 1,
@@ -47,13 +47,13 @@ class KonvaStage extends Component {
     // here we should add listener for "container" resize
     // take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
     // for simplicity I will just listen window resize
-    window.addEventListener('resize', this.checkSize);
+    // window.addEventListener('resize', this.checkSize);
     this.container.addEventListener('keydown', this.handleKeyDown);
     this.createGrid();
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.checkSize);
+    // window.removeEventListener('resize', this.checkSize);
     this.container.removeEventListener('keydown', this.handleKeyDown);
   }
 
@@ -67,15 +67,17 @@ class KonvaStage extends Component {
   };
 
   handleKeyDown = e => {
-    if (e.keyCode === 46 || e.keyCode === 8) {
+    // backspace and delete keys are keyCode 8 and 46, respectively
+    // this function is only used for deleting children atm, could be used for other things
+    if (e.keyCode === 8 || e.keyCode === 46) {
       this.props.deleteChild({});
     }
   };
 
   handleStageMouseDown = e => {
-    // // clicked on stage - clear selection
+    // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
-      // add functionality for allowing no focusChild
+      // TODO add functionality for allowing no focusChild
       console.log('user clicked on canvas:');
       return;
     }
@@ -208,11 +210,17 @@ class KonvaStage extends Component {
                   imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
                 />
               ))
-              .sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height)
+              .sort((rectA, rectB) => {
+                if (rectB.props.childId === -1) {
+                  return 1;
+                }
+                return rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height;
+              })
             // 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
             // to guarantee they are rendered last, sort the array in reverse order by size
+            // only exception is the pseudochild, which should always be rendered first for UX, regardless of size
             // THIS COULD BE A BIG PERFORMANCE PROBLEM (PROBABLY WILL BE!)
             // TRY TO REFACTOR TO ONLY CHANGE ORDER OF RENDERING IF A BOX IS RESIZED
             }

src/components/LeftColExpansionPanel.jsx

@@ -46,9 +46,7 @@ const LeftColExpansionPanel = props => {
       <Grid item xs={9}>
         <div
           className={classes.root}
-          style={
-            !isFocused() ? {} : { boxShadow: "0 10px 10px rgba(0,0,0,0.22)" }
-          }
+          style={!isFocused() ? {} : { boxShadow: '0 10px 10px rgba(0,0,0,0.45)' }}
         >
           <Grid item xs={12} style={{ color: "red" }}>
             <List style={{ color: "red" }}>
@@ -78,33 +76,6 @@ const LeftColExpansionPanel = props => {
             <div />
           ) : (
             <Fragment>
-              {/* <span>
-                {directParents ? (
-                  <p
-                    style={{
-                      padding: '0px',
-                      marginTop: '0px',
-                      marginLeft: '15px',
-                      color: '#D3D3D3',
-                      fontSize: '12px',
-                    }}
-                  >
-                    Used in: {directParents}
-                  </p>
-                ) : (
-                  <p
-                    style={{
-                      padding: '0px',
-                      marginTop: '0px',
-                      marginLeft: '15px',
-                      color: '#D3D3D3',
-                      fontSize: '12px',
-                    }}
-                  >
-                    Not used
-                  </p>
-                )}
-              </span> */}
               <Button
                 variant="text"
                 size="small"

src/containers/LeftContainer.tsx

@@ -16,6 +16,10 @@ import LeftColExpansionPanel from '../components/LeftColExpansionPanel';
 import HTMLComponentPanel from '../components/HTMLComponentPanel';
 import * as actions from '../actions/components';
 import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces';
+import createModal from '../utils/createModal.util';
+import cloneDeep from '../utils/cloneDeep.ts';
+
+const IPC = require('electron').ipcRenderer;
 
 type Props = {
   components: ComponentsInt;
@@ -101,7 +105,7 @@ class LeftContainer extends Component<Props> {
     } = this.props;
     const { componentName, modal } = this.state;
 
-    const componentsExpansionPanel = components
+    const componentsExpansionPanel = cloneDeep(components)
       .sort((b: ComponentInt, a: ComponentInt) => b.id - a.id) // sort by id value of comp
       .map((component, i) => (
         <LeftColExpansionPanel
@@ -130,7 +134,6 @@ class LeftContainer extends Component<Props> {
               onChange={this.handleChange}
               onKeyPress={ev => {
                 if (ev.key === 'Enter') {
-                  // Do code here
                   this.handleAddComponent();
                   ev.preventDefault();
                 }

src/public/styles/style.css

@@ -77,7 +77,7 @@ LEFT COLUMN
   display: flex;
   flex-direction: column;
   position: relative;
-  /* overflow-x: hidden; */
+  overflow-x: hidden;
 }
 
 .component-input {
@@ -89,7 +89,8 @@ LEFT COLUMN
   display: flex;
   /* max-height: 80%; */
   height: 60%;
-  /* overflow-y: hidden; */
+  overflow-y: scroll;
+  overflow-x: hidden;
   padding: 1%;
 }