added html element file, logic when adding child. fixed delete comonent and small logic change for new child size.

Author: ShlomoPorges

src/components/HTMLComponentPanel.jsx

@@ -11,9 +11,11 @@ import LinkIcon from "@material-ui/icons/Link";
 import ListIcon from "@material-ui/icons/List";
 import ParagraphIcon from "@material-ui/icons/LocalParking";
 import theme from "../components/theme";
-
+import Typography from '@material-ui/core/Typography';
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
+// import {HTMLelements,getSize} from "../utils/htmlElements.util";
+
 
 class HTMLComponentPanel extends Component {
   state = {
@@ -34,23 +36,26 @@ class HTMLComponentPanel extends Component {
     const { addChild } = this.props;
     return (
       <Paper className={"htmlPanelz"}>
-        <TextField
+        <Typography variant="title" component="h3">
+         Add HTML elements
+         </Typography>
+        {/* <TextField
           id="title-input"
           label="Add HTML component"
           placeholder="Name of Component"
           margin="normal"
           autoFocus
           onChange={this.handleChange}
-          // value={HtmlComponentName}
-          // name="HtmlComponentName"
-          // className={classes.light}
-          // InputProps={{
-          //   className: classes.input
-          // }}
-          // InputLabelProps={{
-          //   className: classes.input
-          // }}
-        />
+          value={HtmlComponentName}
+          name="HtmlComponentName"
+          className={classes.light}
+          InputProps={{
+            className: classes.input
+          }}
+          InputLabelProps={{
+            className: classes.input
+          }}
+        /> */}
         <Grid container spacing={24} alignItems="baseline" align="stretch">
           <Grid item xs={4}>
             <IconButton

src/containers/MainContainer.jsx

@@ -13,6 +13,7 @@ import {
   changeFocusChild,
   changeComponentFocusChild,
   deleteChild,
+  deleteComponent,
   createApplication,
   changeImagePath,
 } from '../actions/components';

src/utils/componentReducer.util.js

@@ -1,6 +1,7 @@
 //import setSelectableParents from "./setSelectableParents.util";
 import getSelectable from "./getSelectable.util";
 import getColor from "./colors.util";
+import {HTMLelements,getSize} from "../utils/htmlElements.util";
 
 const initialComponentState = {
   id: null,
@@ -51,7 +52,7 @@ export const addComponent = (state, { title }) => {
       width: 600,
       height: 400
     },
-    draggable: true,
+    //draggable: true,
     color: componentColor,
     childType: "COMP"
   };
@@ -95,8 +96,7 @@ export const addComponent = (state, { title }) => {
 // get the focus component (aka the component were adding the child to)
 
 export const addChild = (state, { title, childType = "", HTMLInfo = {} }) => {
-  console.log(HTMLInfo);
-
+ 
   let strippedTitle = title;
 
   if (!childType) {
@@ -126,34 +126,30 @@ export const addChild = (state, { title, childType = "", HTMLInfo = {} }) => {
     console.log("inside if statement");
   }
 
-  // } else if (childType !== "COMP") {
-
-  //   console.log("inside else statement");
-  //   parentComponent = {
-  //     id: "888",
-  //     position: {
-  //       x: 25,
-  //       y: 25,
-  //       width: 600,
-  //       height: 400
-  //     },
-  //     color: "#000000"
-  //   };
-  // }
+  let htmlElemPosition; 
+  if(childType == 'HTML') {
+    htmlElemPosition = getSize(htmlElement)
+    // if above function doesnt reutn anything, it means html element is not in our database 
+    if (!htmlElemPosition.width) {
+      console.log(`Did not add html child: ${htmlElement} the GetSize function indicated that it isnt in our DB`)
+      return; 
+    }
+    console.log(`htmlElemPosition: ${JSON.stringify(htmlElemPosition)}`)
+  }
 
   const newPosition =
     childType === "COMP"
       ? {
-          x: parentComponent.position.x + view.nextChildId * 5, // new children are offset by 5px, x and y
-          y: parentComponent.position.y + view.nextChildId * 5,
-          width: parentComponent.position.width * 0.9, // new children have an initial position of their parentComponent (maybe don't need 90%)
+          x: view.position.x + view.nextChildId * 5, // new children are offset by 5px, x and y
+          y: view.position.y + view.nextChildId * 5,
+          width: parentComponent.position.width * 0.9, // new children have an initial position of their CLASS (maybe don't need 90%)
           height: parentComponent.position.height * 0.9
         }
       : {
-          x: 25 + view.nextChildId * 5,
-          y: 25 + view.nextChildId * 5,
-          width: 600 * 0.9,
-          height: 400 * 0.9
+          x: view.position.x + view.nextChildId * 5,
+          y: view.position.y + view.nextChildId * 5,
+          width: htmlElemPosition.width,
+          height: htmlElemPosition.height
         };
 
   const newChild = {
@@ -162,7 +158,7 @@ export const addChild = (state, { title, childType = "", HTMLInfo = {} }) => {
     childComponentId: childType == "COMP" ? parentComponent.id : null, // only relevant fot children of type COMPONENT
     componentName: strippedTitle,
     position: newPosition,
-    draggable: true,
+    // draggable: true,
     color: null, // parentComponent.color, // only relevant fot children of type COMPONENT
     htmlElement: htmlElement, // only relevant fot children of type HTML
     HTMLInfo: HTMLInfo

src/utils/htmlElements.util.js

@@ -0,0 +1,58 @@
+
+// our "database" of HTML elements that the user can chose from 
+const HTMLelements = {
+  Image: {
+    width: 300,
+    height: 300,
+    attributes:['ClassName','id','Text','Src']
+  } ,
+  Button: {
+    width: 75,
+    height: 28,
+    attribute:['ClassName','id','Text']
+  },
+  Form: {
+    width: 400,
+    height: 400,
+    attribute:['ClassName','id','Text']
+  },
+  Paragraph: {
+    width: 250,
+    height: 75,
+    attribute:['ClassName','id','Text']
+  },
+  List: {
+    width: 100,
+    height: 100,
+    attribute:['ClassName','id','Text']
+  },
+  Link: {
+    width: 50,
+    height: 50,
+    attribute:['ClassName','id','Text']
+  }
+}
+
+const attributes = {
+  "Classname" : {type: "freeText"} ,
+  "Id" : {type:"freeText"} ,
+  "TextJustify": {type: "select", values: "Left,Right,Center"}
+}
+
+
+function getSize(htmlElement){
+
+  const localHTMLelements = HTMLelements; 
+
+  if(!htmlElement in localHTMLelements) {
+    window.alert(`htmlElement error:  "${htmlElement} is not found in our database"`) ; 
+    return; 
+  }
+
+  return {
+    width:  HTMLelements[htmlElement].width || 300 ,
+    height: HTMLelements[htmlElement].height || 300 ,
+  } 
+}
+
+export  {HTMLelements,getSize} ;