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';
+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} align="center">
           <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

@@ -1,103 +1,91 @@
-import React, { Component, Fragment } from "react";
-import { connect } from "react-redux";
-import { withStyles } from "@material-ui/core/styles";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import IconButton from "@material-ui/core/IconButton";
-import Typography from "@material-ui/core/Typography";
-import SaveIcon from "@material-ui/icons/Save";
-import Paper from "@material-ui/core/Paper";
-import Fab from "@material-ui/core/Fab";
-import { updateHtmlAttr } from "../actions/components.ts";
-import { HTMLelements, getSize } from "../utils/htmlElements.util.ts";
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import SaveIcon from '@material-ui/icons/Save';
+import Paper from '@material-ui/core/Paper';
+import Fab from '@material-ui/core/Fab';
+import { updateHtmlAttr } from '../actions/components.ts';
+import { HTMLelements, getSize } from '../utils/htmlElements.util.ts';
 
 const styles = theme => ({
   root: {
-    display: "flex",
-    justifyContent: "center",
-    flexWrap: "wrap"
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
   },
   cssLabel: {
-    color: "white",
-    "&$cssFocused": {
-      color: "green"
-    }
+    color: 'white',
+  },
+  cssFocused: {
+    color: 'green',
   },
   input: {
-    color: "#fff",
-    opacity: "0.7",
-    marginBottom: "10px"
-  }
+    color: '#fff',
+    opacity: '0.7',
+    marginBottom: '15px',
+  },
 });
 
 const mapDispatchToProps = dispatch => ({
-  updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value }))
+  updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value })),
 });
 
 const mapStateToProps = store => ({
   focusComponent: store.workspace.focusComponent,
-  focusChild: store.workspace.focusChild
+  focusChild: store.workspace.focusChild,
 });
 
 class HtmlAttr extends Component {
-  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce(
-    (acc, attr) => {
-      acc[attr] = "";
-      return acc;
-    },
-    {}
-  );
+  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
+    acc[attr] = '';
+    return acc;
+  }, {});
 
-  handleSave = attr => {
+  handleSave = (attr) => {
     console.log(attr, this.state[attr]);
     this.props.updateHtmlAttr({ attr, value: this.state[attr] });
     this.setState({
-      [attr]: ""
+      [attr]: '',
     });
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      [event.target.id]: event.target.value.trim()
+      [event.target.id]: event.target.value.trim(),
     });
   };
 
   render() {
     const {
-      focusComponent,
-      classes,
-      deleteProp,
-      addProp,
-      focusChild,
-      updateHtmlAttr
+      focusComponent, classes, deleteProp, addProp, focusChild, updateHtmlAttr,
     } = this.props;
 
     const focusChildType = focusChild.htmlElement;
 
     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 container spacing={0} key={i} style={{ marginTop: '10px', marginRight: '20px' }}>
+        <Grid item xs={2}>
           <TextField
             InputLabelProps={{
               classes: {
                 root: classes.cssLabel,
-                focused: classes.cssFocused
-              }
+                focused: classes.cssFocused,
+                input: classes.input,
+              },
             }}
             InputProps={{
               classes: {
                 root: classes.cssOutlinedInput,
                 focused: classes.cssFocused,
                 notchedOutline: classes.notchedOutline,
-                input: classes.input
-              }
+                input: classes.input,
+              },
             }}
-            style={{ background: "#424242", height: "70%" }}
+            style={{ background: '#424242', height: '70%' }}
             label={attr}
             variant="outlined"
             id={attr}
@@ -112,9 +100,9 @@ class HtmlAttr extends Component {
             color="default"
             aria-label="Save"
             style={{
-              marginLeft: "10px",
-              marginTop: "5px",
-              marginBottom: "10px"
+              marginLeft: '10px',
+              marginTop: '5px',
+              marginBottom: '10px',
             }}
             onClick={() => this.handleSave(attr)}
           >
@@ -123,22 +111,20 @@ class HtmlAttr extends Component {
           </Fab>
         </Grid>
         <Grid item xs={4}>
-          <Paper className={classes.root} style={{ height: "70%" }}>
-            <p style={{ color: "black" }}>
-              {focusChild.HTMLInfo[attr]
-                ? focusChild.HTMLInfo[attr]
-                : " no attribute assigned"}
+          <Paper className={classes.root} style={{ height: '70%' }}>
+            <p style={{ color: 'black' }}>
+              {focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : ' no attribute assigned'}
             </p>
           </Paper>
         </Grid>
       </Grid>
     ));
 
-    return <div className={"htmlattr"}>{HtmlForm}</div>;
+    return <div className={'htmlattr'}>{HtmlForm}</div>;
   }
 }
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(withStyles(styles)(HtmlAttr));

src/components/KonvaStage.jsx

@@ -12,8 +12,8 @@ class KonvaStage extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      stageWidth: 1000,
-      stageHeight: 1000,
+      stageWidth: 1500,
+      stageHeight: 1500,
       blockSnapSize: 10,
       grid: [],
       gridStroke: 1,
@@ -49,13 +49,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);
   }
 
@@ -70,16 +70,16 @@ class KonvaStage extends Component {
 
   handleKeyDown = (e) => {
     // 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) {
-      console.log(e);
       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;
     }
@@ -217,17 +217,23 @@ class KonvaStage extends Component {
                   draggable={true}
                   blockSnapSize={this.state.blockSnapSize}
                   imageSource={
-                    child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null
+                    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
             }