Merge pull request #96 from ChristianEdwardPadilla/development

html attrs added to exported code

Author: ChristianEdwardPadilla

src/components/CodePreview.tsx

@@ -1,9 +1,9 @@
-import React, { Component, Fragment } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import { format } from "prettier";
-import componentRender from "../utils/componentRender.util.ts";
-import { ComponentInt, ComponentsInt } from "../utils/interfaces";
-import SortChildren from "./SortChildren.jsx";
+import React, { Component, Fragment } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { format } from 'prettier';
+import componentRender from '../utils/componentRender.util.ts';
+import { ComponentInt, ComponentsInt } from '../utils/interfaces';
+import SortChildren from './SortChildren.jsx';
 
 type Props = {
   focusComponent: ComponentInt;
@@ -17,25 +17,25 @@ class CodePreview extends Component<Props> {
 
     return (
       <Fragment>
-        <SortChildren />
+        {/* <SortChildren /> */}
         <div
           style={{
-            width: "500px",
-            height: "290px",
-            direction: "rtl",
-            paddingLeft: "20px",
-            color: "#D3D3D3",
+            width: '800px',
+            height: '290px',
+            direction: 'rtl',
+            paddingLeft: '20px',
+            color: '#D3D3D3',
             fontSize: 16,
-            overflow: "auto"
+            overflow: 'auto',
           }}
         >
-          <pre style={{ direction: "ltr" }}>
+          <pre style={{ direction: 'ltr' }}>
             {format(componentRender(focusComponent, components), {
               singleQuote: true,
-              trailingComma: "es5",
+              trailingComma: 'es5',
               bracketSpacing: true,
               jsxBracketSameLine: true,
-              parser: "typescript"
+              parser: 'typescript',
             })}
           </pre>
         </div>

src/components/HTMLComponentPanel.jsx

@@ -40,6 +40,7 @@ class HTMLComponentPanel extends Component {
           disableRipple
           classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
           label="Add HTML elements"
+          style={{ cursor: 'default' }}
         />
         <Grid container spacing={8} alignItems="baseline" align="stretch">
           <Grid item xs={4}>
@@ -71,6 +72,9 @@ class HTMLComponentPanel extends Component {
                   margin: 0,
                   padding: 0,
                 }}
+                onClick={() => {
+                  this.handleCreateHTMLChild('Image');
+                }}
               />
             </div>
           </Grid>
@@ -96,6 +100,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Form');
+              }}
             />
           </Grid>
           <Grid item xs={4}>
@@ -120,6 +127,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Button');
+              }}
             />
           </Grid>
           <Grid item xs={4}>
@@ -144,6 +154,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Link');
+              }}
             />
           </Grid>
           <Grid item xs={4}>
@@ -168,6 +181,9 @@ class HTMLComponentPanel extends Component {
                 color: 'white',
                 fontSize: '80%',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('List');
+              }}
             />
           </Grid>
           <Grid
@@ -203,6 +219,9 @@ class HTMLComponentPanel extends Component {
                 padding: '0px',
                 margin: '0px',
               }}
+              onClick={() => {
+                this.handleCreateHTMLChild('Paragraph');
+              }}
             />
           </Grid>
         </Grid>

src/components/HtmlAttr.jsx

@@ -19,14 +19,14 @@ const styles = theme => ({
   },
   cssLabel: {
     color: 'white',
-    '&$cssFocused': {
-      color: 'green',
-    },
+  },
+  cssFocused: {
+    color: 'green',
   },
   input: {
     color: '#fff',
     opacity: '0.7',
-    marginBottom: '10px',
+    marginBottom: '15px',
   },
 });
 
@@ -66,12 +66,13 @@ class HtmlAttr extends Component {
 
     const HtmlForm = HTMLelements[focusChildType].attributes.map((attr, i) => (
       <Grid container spacing={0} key={i} style={{ marginTop: '10px', marginRight: '20px' }}>
-        <Grid item xs={1.5}>
+        <Grid item xs={2}>
           <TextField
             InputLabelProps={{
               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;
     }
@@ -205,14 +207,20 @@ class KonvaStage extends Component {
                   handleTransform={handleTransform}
                   draggable={true}
                   blockSnapSize={this.state.blockSnapSize}
-                  imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
+                  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

@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const LeftColExpansionPanel = props => {
   const {
@@ -46,9 +47,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.25)' }}
         >
           <Grid item xs={12} style={{ color: "red" }}>
             <List style={{ color: "red" }}>
@@ -78,33 +77,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"
@@ -125,7 +97,7 @@ const LeftColExpansionPanel = props => {
                 }}
               >
                 <DeleteIcon style={{ color: '#D3D3D3' }} />
-                Delete
+                Delete Component
               </Button>
               {/* <IconButton
                 style={{ display: "inline-block" }}
@@ -147,14 +119,16 @@ const LeftColExpansionPanel = props => {
         {id === 1 || isFocused() || !selectableChildren.includes(id) ? (
           <div />
         ) : (
-          <IconButton
-            aria-label="Add"
-            onClick={() => {
-              addChild({ title, childType: "COMP" });
-            }}
-          >
-            <AddIcon style={{ color, float: "right" }} />
-          </IconButton>
+          <Tooltip title="add as child" aria-label="add as child" placement="left">
+            <IconButton
+              aria-label="Add"
+              onClick={() => {
+                addChild({ title, childType: 'COMP' });
+              }}
+            >
+              <AddIcon style={{ color, float: 'right' }} />
+            </IconButton>
+          </Tooltip>
         )}
       </Grid>
     </div>

src/components/MainContainerHeader.jsx

@@ -46,7 +46,7 @@ const styles = () => ({
   },
 });
 
-const MainContainerHeader = (props) => {
+const MainContainerHeader = props => {
   const {
     classes,
     image,
@@ -63,12 +63,7 @@ const MainContainerHeader = (props) => {
       <div className="main-header-buttons">
         <Tooltip title="remove image">
           <div>
-            <Button
-              disabled={!image}
-              color="default"
-              className={classes.button}
-              onClick={showImageDeleteModal}
-            >
+            <Button disabled={!image} color="default" className={classes.button} onClick={showImageDeleteModal}>
               <DeleteOutlineIcon className={classes.light} />
             </Button>
           </div>
@@ -79,25 +74,21 @@ const MainContainerHeader = (props) => {
               <ImageSearchIcon className={classes.light} />
             </Button>
           </div>
-        </Tooltip>
-        <Tooltip title={'export'}>
-          <div>
-            <Button
-              color="primary"
-              variant="text"
-              // variant="outlined"
-              className={classes.clearButton}
-              disabled={totalComponents < 1}
-              onClick={showGenerateAppModal}
-            >
-              <GetAppIcon
-                className={classes.light}
-                style={{ paddingLeft: '5px', paddingRight: '5px' }}
-              />
-              Export Project
-            </Button>
-          </div>
-        </Tooltip>
+        </Tooltip>{' '}
+        */}
+        <div>
+          <Button
+            color="primary"
+            variant="text"
+            // variant="outlined"
+            className={classes.clearButton}
+            disabled={totalComponents < 1}
+            onClick={showGenerateAppModal}
+          >
+            <GetAppIcon className={classes.light} style={{ paddingLeft: '5px', paddingRight: '5px' }} />
+            Export Project
+          </Button>
+        </div>
       </div>
     </div>
   );

src/components/Props.jsx

@@ -23,7 +23,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   chip: {
-    margin: theme.spacing.unit,
+    // margin: theme.spacing.unit,
     color: '#eee',
     backgroundColor: '#333333',
   },
@@ -176,10 +176,10 @@ class Props extends Component {
       <div className={'htmlattr'}>
         {' '}
         {Object.keys(focusComponent).length < 1 ? (
-          <div style={{ marginTop: '20px', marginLeft: '20px' }}>Click a component to view its props.</div>
+          <div style={{ marginTop: '20px', width: '90%' }}>Click a component to view its props.</div>
         ) : (
           <Fragment>
-            <div className="props-container">
+            <div className="props-container" style={{ marginTop: '20px', width: '90%', height: '80%' }}>
               <Grid container spacing={8}>
                 <Grid item xs={4}>
                   <form className="props-input" onSubmit={this.handleAddProp}>