refinements on left panel, added right panel config options

Author: fredosauce

src/components/left/ComponentPanelItemNew.tsx

@@ -24,9 +24,8 @@ const ComponentPanelItem: React.FC<{
   name: string;
   id: number;
   root: boolean;
-  focusClick: any;
   isFocus: boolean
-}> = ({ name, id, root, focusClick, isFocus }) => {
+}> = ({ name, id, root, isFocus }) => {
   const classes = useStyles();
   const [state, dispatch] = useContext(stateContext);
   // useDrag hook allows components in left panel to be drag source

src/components/left/ComponentPanelNew.tsx

@@ -14,8 +14,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   inputField: {
-    marginRight: '15px',
-    // width: '245px'
+    
   },
   inputWrapper: {
     height: '110px',
@@ -28,7 +27,8 @@ const useStyles = makeStyles({
     width: '100%'
   },
   panelWrapperList: {
-    height: '675px',
+    maxHeight: '675px',
+    minHeight: '120px',
     overflowY: 'auto',
     marginLeft: '-15px'
   },
@@ -53,7 +53,7 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     paddingTop: '10px',
-    marginRight: '10px'
+    marginLeft: '10px'
   },
   button: {
     fontSize: '1rem'
@@ -62,14 +62,7 @@ const useStyles = makeStyles({
     color: '#01d46d',
     fontSize: '0.85rem'
   },
-  compPanelItem: {
-    color: 'red',
-    '&:hover': {
-      cursor: 'pointer',
-      backgroundColor: 'red'
-    }
-  },
-  
+
 });
 
 

src/components/left/HTMLPanelNew.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
-import { withStyles, Theme } from '@material-ui/core/styles';
-import ImageIcon from '@material-ui/icons/Image';
-import ParagraphIcon from '@material-ui/icons/LocalParking';
-import FormIcon from '@material-ui/icons/Description';
-import HeaderIcon from '@material-ui/icons/TextFormat';
-import ButtonIcon from '@material-ui/icons/EditAttributes';
-import LinkIcon from '@material-ui/icons/Link';
-import ListIcon from '@material-ui/icons/List';
 import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import HTMLTypes from '../../context/HTMLTypes';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  HTMLPanelItem: {
+    color: 'white',
+    // this is experimental for version: BLADERUNNER THEME
+    backgroundColor: 'transparent',
+    // minWidth: '340px',
+    minHeight: '60px',
+    marginBottom: '10px',
+    marginRight: '5px',
+    marginLeft: '5px',
+    border: '2px dotted rgba(255,255,255, 0.45)',
+    borderRadius: '8px',
+    cursor: 'grab',
+    '& > h3': {
+      display: 'inline-block',
+      paddingTop: '18px'
+    }
+  }
+})
 
 const HTMLPanel = (): JSX.Element => {
+  const classes = useStyles();
   const options = HTMLTypes.map(option => {
     const [{ isDragging }, drag] = useDrag({
       item: {
@@ -30,39 +43,32 @@ const HTMLPanel = (): JSX.Element => {
     return (
       <Grid
         item
-        ref={drag}
         xs={5}
         key={`html-${option.name}`}
-        style={{
-          color: 'white',
-          // this is experimental for version: BLADERUNNER THEME
-          backgroundColor: 'transparent',
-          // minWidth: '340px',
-          minHeight: '60px',
-          marginBottom: '15px',
-          border: '2px dotted rgba(255,255,255, 0.45)',
-          borderRadius: '8px'
-        }}
       >
-        <h3>
-          {option.name}
+        <div ref={drag} className={classes.HTMLPanelItem}>
+          <h3>
+            {option.name}
+            
+          </h3>
           <span
-            style={{
-              verticalAlign: '-webkit-baseline-middle',
-              marginLeft: '5px'
-            }}
-          >
-            {<option.icon />}
-          </span>
-        </h3>
+              style={{
+                verticalAlign: 'middle',
+                display: 'inline-block',
+                marginLeft: '5px'
+              }}
+            >
+              {<option.icon />}
+            </span>
+        </div>
       </Grid>
     );
   });
 
   return (
     <div>
       <h4> HTML Elements</h4>
-      <Grid container direction="row" justify="center" alignItems="center">
+      <Grid container spacing={1} direction="row" justify="center" alignItems="center">
         {options}
       </Grid>
     </div>

src/components/main/CanvasContainerNew.tsx

@@ -4,8 +4,8 @@ import Canvas from './CanvasNew';
 // The CanvasContainer sets the boundaries on the width/height of the canvas
 function CanvasContainer() {
   const canvasContainerStyle = {
-    width: '1000px',
     height: '100%',
+    width: '100%',
     backgroundColor: 'lightgrey',
     border: '2px Solid grey',
     overflowY: 'auto'

src/components/main/CanvasNew.tsx

@@ -94,9 +94,9 @@ function Canvas() {
 
   const defaultCanvasStyle = {
     width: '100%',
-    height: '100%',
+    minHeight: '100%',
     backgroundColor: isOver ? 'lightyellow' : 'white',
-    border: '2px Solid black',
+    border: '3px solid #01d46d',
     borderStyle: isOver ? 'dotted' : 'solid'
   };
 

src/containers/LeftContainerNew.tsx

@@ -6,17 +6,40 @@ import Button from '@material-ui/core/Button';
 import AddIcon from '@material-ui/icons/Add';
 import Fab from '@material-ui/core/Fab';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-
+import { makeStyles } from '@material-ui/core/styles';
 import ComponentPanel from '../components/left/ComponentPanelNew';
 import HTMLPanel from '../components/left/HTMLPanelNew';
+import GetAppIcon from '@material-ui/icons/GetApp';
+
+const useStyles = makeStyles({
+  btnGroup: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    position: 'absolute',
+    bottom: '65px',
+    left: '0px'
+  },
+  exportBtn: {
+    width: '55%',
+    backgroundColor: 'rgba(1,212,109,0.1)',
+    fontSize: '1em'
+  }
+})
 
 // Left-hand portion of the app, where component options are displayed
 const LeftContainer = (): JSX.Element => {
+  const classes = useStyles();
   return (
     <div className="column left" style={{ minWidth: '375px' }}>
       <Grid container direction="row" alignItems="center">
         <ComponentPanel />
         <HTMLPanel />
+        <div className={classes.btnGroup}>
+          <Button className={classes.exportBtn} variant="outlined" color="primary" endIcon={<GetAppIcon />}>
+            EXPORT PROJECT
+          </Button>
+        </div>
       </Grid>
     </div>
   );

src/containers/RightContainerNew.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import { makeStyles } from '@material-ui/core/styles';
 import { stateContext } from '../context/context';
+import HTMLTypes from '../context/HTMLTypes';
 import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles({
@@ -52,9 +53,19 @@ const useStyles = makeStyles({
   compName: {
     color: '#01d46d',
     fontSize: '1.25rem'
+  },
+  configHeader: {
+    height: '70px',
+    '& > h4': {
+      fontSize: '1.15rem',
+      letterSpacing: '0.5px',
+      marginBottom: '0',
+      marginTop: '10px'
+    }
   }
 });
 
+
 const RightContainer = ():JSX.Element  => {
   const classes = useStyles();
   const [state, dispatch] = useContext(stateContext);
@@ -68,7 +79,25 @@ const RightContainer = ():JSX.Element  => {
   const [compWidth, setCompWidth] = useState('');
   const [compHeight, setCompHeight] = useState('');
 
+  const resetFields = () => {
+    setDisplayMode('');
+    setFlexDir('');
+    setFlexJustify('');
+    setFlexAlign('');
+    setCompWidth('');
+    setCompHeight('');
+    setBGColor('');
+  }
+
+  //reset input fields if focus changes
+  useEffect(()=> {
+    // reset
+    console.log('canvas focus changed');
+    resetFields();
+  }, [state.canvasFocus.componentId, state.canvasFocus.childId]);
 
+
+  // handles all input field changes, with specific updates called based on input's name
   const handleChange = (e: React.ChangeEvent<{value: any}>) => {
     let inputVal = e.target.value;
     switch(e.target.name) {
@@ -96,13 +125,46 @@ const RightContainer = ():JSX.Element  => {
     }
   }
 
+  // returns the current component referenced in canvasFocus 
+  // along with its child instance, if it exists
   const getFocus = () => {
-    const focusTarget = state.components.find(comp => {
-      return comp.id === state.canvasFocus.componentId;
-    })
+    // find and store component's name based on canvasFocus.componentId
+    // note: deep clone here to make sure we don't end up altering state
+    let focusTarget = JSON.parse(JSON.stringify(state.components.find(comp => comp.id === state.canvasFocus.componentId )));
+    delete focusTarget.child;
+    
+    // checks if canvasFocus references a childId
+    const childInstanceId = state.canvasFocus.childId ? state.canvasFocus.childId : null;
+
+    // if so, breadth-first search through focusTarget's descendants to find matching child
+    if (childInstanceId) {
+      focusTarget.child = {};
+      focusTarget.child.id = childInstanceId;
+      let focusChild = {}; //child instance being referenced in canvasFocus
+      const searchArray = [...focusTarget.children];
+      while (searchArray.length > 0) {
+        const currentChild = searchArray.shift();
+        if (currentChild.childId === childInstanceId) focusChild = currentChild;
+        currentChild.children.forEach(child => searchArray.push(child));
+      }
+      // if type is Component, use child's typeId to search through state components and find matching component's name
+      if (focusChild.type === 'Component') {
+        focusTarget.child.type = 'component';
+        focusTarget.child.name = state.components.find(comp => comp.id === focusChild.typeId).name;
+      // if type is HTML Element, search through HTML types to find matching element's name
+      } else if (focusChild.type === 'HTML Element') {
+        focusTarget.child.type = 'HTML element';
+        focusTarget.child.name = HTMLTypes.find(elem => elem.id === focusChild.typeId).name;
+      }
+    }
+    console.log('right panel focus: ');
+    console.log(focusTarget);
+    
     return focusTarget;
   }
 
+  // dispatch to 'UPDATE CSS' called when save button is clicked,
+  // passing in style object constructed from all changed input values
   const handleSave = ():Object => {
     const styleObj = {};
     if (displayMode !== '') styleObj.display = displayMode;
@@ -113,16 +175,29 @@ const RightContainer = ():JSX.Element  => {
     if (compHeight !== '') styleObj.height = compHeight;
     if (BGColor !== '') styleObj.backgroundColor = BGColor;
     console.log(styleObj);
+    dispatch({
+      type: 'UPDATE CSS',
+      payload: { style: styleObj }
+    });
+    resetFields();
     return styleObj;
   }
 
+  // placeholder for handling deleting instance
   const handleDelete = () => {
     console.log('DELETING ...');
   }
 
+  const configTarget = getFocus();
+
   return (
     <div className="column right">
-      <h4>Configuration options for <span className={classes.compName}>{getFocus().name}</span></h4>
+      <div className={classes.configHeader}>
+        <h4>Configuration options in <span className={classes.compName}>{configTarget.name}</span></h4>
+        { configTarget.child &&
+          <h4>for instance <span className={classes.compName}>{configTarget.child.id}</span> of {configTarget.child.type} <span className={classes.compName}>{configTarget.child.name}</span ></h4>
+        }
+      </div>
       <div className={classes.configRow}>
         <div className={classes.configType}>
           <h3>Display:</h3>

src/public/styles/styleNew.css

@@ -50,11 +50,6 @@ h3 {
 }
 
 .right {
-  padding-top: 25px;
+  padding-top: 35px;
 }
 
-.right h4 {
-  font-size: 1.15rem;
-  margin-bottom: 30px;
-  letter-spacing: 0.5px;
-}