Final canvas changes (V1)

src/actions/components.js

@@ -25,23 +25,21 @@ import {
   DELETE_PROP,
   ADD_PROP,
   DELETE_ALL_DATA,
-  CHANGE_IMAGE_PATH
-} from "../actionTypes/index";
+  CHANGE_IMAGE_PATH,
+} from '../actionTypes/index';
 
-import { loadState } from "../localStorage";
+import { loadState } from '../localStorage';
 
 import createFiles from '../utils/createFiles.util';
-import createApplicationUtil from '../utils/createApplication.util'
-
-export const loadInitData = () => dispatch => {
-  loadState().then(data =>
-    dispatch({
-      type: LOAD_INIT_DATA,
-      payload: {
-        data: data ? data.workspace : {}
-      }
-    })
-  );
+import createApplicationUtil from '../utils/createApplication.util';
+
+export const loadInitData = () => (dispatch) => {
+  loadState().then(data => dispatch({
+    type: LOAD_INIT_DATA,
+    payload: {
+      data: data ? data.workspace : {},
+    },
+  }));
 };
 
 // export const updateChildren = ({ parentIds, childIndex, childId }) => ({
@@ -62,47 +60,39 @@ export const loadInitData = () => dispatch => {
 //   },
 // });
 
-export const addComponent = ({ title }) => dispatch => {
+export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
-export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
+export const addChild = ({ title, childType, HTMLInfo }) => (dispatch) => {
   dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
 };
 
-export const deleteChild = ({}) => dispatch => {
+export const deleteChild = ({}) => (dispatch) => {
   // with no payload, it will delete focusd child
   dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-export const deleteComponent = ({
-  componentId,
-  stateComponents
-}) => dispatch => {
-  console.log(
-    "Hello from component.js delete component.componentId= ",
-    componentId
-  );
+export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
+  console.log('Hello from component.js delete component.componentId= ', componentId);
 
   // find all places where the "to be delted" is a child and do what u gotta do
-  stateComponents.forEach(parent => {
-    parent.childrenArray
-      .filter(child => child.childComponentId == componentId)
-      .forEach(child => {
-        // console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
-        dispatch({
-          type: DELETE_CHILD,
-          payload: {
-            parentId: parent.id,
-            childId: child.childId,
-            calledFromDeleteComponent: true
-          }
-        });
+  stateComponents.forEach((parent) => {
+    parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
+      // console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
+      dispatch({
+        type: DELETE_CHILD,
+        payload: {
+          parentId: parent.id,
+          childId: child.childId,
+          calledFromDeleteComponent: true,
+        },
       });
+    });
   });
 
   // change focus to APp
-  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
   // after taking care of the children delete the component
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
@@ -138,22 +128,19 @@ export const deleteComponent = ({
 //   dispatch({ type: SET_SELECTABLE_PARENTS });
 // };
 
-export const changeFocusComponent = ({ title }) => dispatch => {
+export const changeFocusComponent = ({ title }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ title, childId }) => dispatch => {
+export const changeFocusChild = ({ title, childId }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
 };
 
-export const changeComponentFocusChild = ({
-  componentId,
-  childId
-}) => dispatch => {
+export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId }
+    payload: { componentId, childId },
   });
 };
 
@@ -175,27 +162,29 @@ export const exportFiles = ({ components, path }) => (dispatch) => {
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false
+  payload: false,
 });
 
-export const handleTransform = (
-  componentId,
-  childId,
-  { x, y, width, height }
-) => ({
+export const handleTransform = (componentId, childId, {
+  x, y, width, height,
+}) => ({
   type: HANDLE_TRANSFORM,
   payload: {
     componentId,
     childId,
     x,
     y,
     width,
-    height
-  }
+    height,
+  },
 });
 
 export const createApplication = ({
-  path, components = [], genOption, appName = 'proto_app', repoUrl,
+  path,
+  components = [],
+  genOption,
+  appName = 'proto_app',
+  repoUrl,
 }) => (dispatch) => {
   if (genOption === 0) {
     dispatch(exportFiles({ path, components }));
@@ -204,7 +193,10 @@ export const createApplication = ({
       type: CREATE_APPLICATION,
     });
     createApplicationUtil({
-      path, appName, genOption, repoUrl,
+      path,
+      appName,
+      genOption,
+      repoUrl,
     })
       .then(() => {
         dispatch({
@@ -221,18 +213,18 @@ export const createApplication = ({
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component }
+  payload: { component },
 });
 
 // export const deleteAllData = () => ({
 //   type: DELETE_ALL_DATA,
 // });
 
-export const deleteProp = propId => dispatch => {
+export const deleteProp = propId => (dispatch) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
 export const addProp = prop => ({
   type: ADD_PROP,
-  payload: { ...prop }
+  payload: { ...prop },
 });

src/components/DataTable.jsx

@@ -9,8 +9,6 @@ import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
 
-
-
 const styles = theme => ({
   root: {
     width: '100%',
@@ -22,62 +20,46 @@ const styles = theme => ({
   },
 });
 
-
-/****************************
- * cannot have a row header or a key in the data  called "key" 
- * ,ust have unique id 
+/** **************************
+ * cannot have a row header or a key in the data  called "key"
+ * ,ust have unique id
  * ****************************** */
 
 function dataTable(props) {
-  const { classes , rowData, rowHeader , deletePropHandler } = props;
-
-  // console.log(classes)
-  // console.log(`rowHeader`)
-  // console.log(rowHeader)
-  //  console.log(`rowData`)
-  //  console.log(rowData)
+  const {
+    classes, rowData, rowHeader, deletePropHandler,
+  } = props;
+
+  const renderHeader = rowHeader.map((col, idx) => (
+    <TableCell key={`head_+${idx}`}>{col}</TableCell>
+  ));
 
-   const renderHeader = rowHeader.map( (col,idx) =>  {
-    return <TableCell key={`head_+${idx}`}>{col}</TableCell>
-   })
+  function renderRowCells(row) {
+    if (!row) return;
+    // for some reason we must put each value in a div.
+    return rowHeader.map((header, idx) => (
+      <TableCell key={`td_${idx}`}>
+        <div>{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div>
+      </TableCell>
+    ));
+  }
 
-  function renderRowCells  (row) {
-    if(!row) return; 
-    // for some reason we must put each value in a div. 
-    return (
-      rowHeader.map( (header,idx) => 
-        <TableCell key={'td_'+ idx}>
-          <div>
-            { typeof row[header] == 'string' ? row[header] : row[header].toString()  }
-          </div>
-          </TableCell>
-        )
-    )
- }
-
-  const renderRows = 
-  rowData.map((row) => 
-        <TableRow key={`row-${row.id}`}>
-        {renderRowCells(row)}    
-         <TableCell>  
-          <Button onClick={ ()=>deletePropHandler(row.id) } >
-          Delete
-          </Button> 
-        </TableCell> 
-        </TableRow> 
- )
+  const renderRows = rowData.map(row => (
+    <TableRow key={`row-${row.id}`}>
+      {renderRowCells(row)}
+      <TableCell>
+        <Button onClick={() => deletePropHandler(row.id)}>Delete</Button>
+      </TableCell>
+    </TableRow>
+  ));
 
   return (
     <Paper className={classes.root}>
       <Table className={classes.table}>
         <TableHead>
-          <TableRow>
-           {renderHeader}
-          </TableRow>
+          <TableRow>{renderHeader}</TableRow>
         </TableHead>
-        <TableBody>
-          {renderRows}
-        </TableBody>
+        <TableBody>{renderRows}</TableBody>
       </Table>
     </Paper>
   );
@@ -87,4 +69,4 @@ function dataTable(props) {
 //   classes: PropTypes.object.isRequired,
 // };
 
-export default withStyles(styles)(dataTable);
+export default withStyles(styles)(dataTable);

src/components/GrandchildRectangle.jsx

@@ -19,6 +19,7 @@ class GrandchildRectangle extends Component {
       scaleY,
       childId,
       componentId,
+      childType,
       childComponentName,
       childComponentId,
       width,
@@ -45,45 +46,46 @@ class GrandchildRectangle extends Component {
           y={0}
           childId={childId}
           componentId={componentId}
+          childType={childType}
           scaleX={1}
           scaleY={1}
           width={width}
           height={height}
-          stroke={this.getComponentColor(childComponentId)}
+          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
           // fill={color}
           // opacity={0.8}
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
-        {components
-          .find(comp => comp.title === childComponentName)
-          .childrenArray.filter(child => child.childId !== '-1')
-          .map((grandchild, i) => (
-            <GrandchildRectangle
-              key={i}
-              components={components}
-              componentId={componentId}
-              childComponentName={grandchild.componentName}
-              childComponentId={grandchild.childComponentId}
-              focusChild={focusChild}
-              childId={childId}
-              // x={grandchild.position.x * (width / window.innerWidth)}
-              // y={grandchild.position.y * (height / window.innerHeight)}
-              // width={grandchild.position.width * (width / window.innerWidth)}
-              // height={grandchild.position.height * (height / window.innerHeight)}
-              width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
-              height={grandchild.position.height * (height / this.getPseudoChild().position.height)}
-              x={
-                (grandchild.position.x - this.getPseudoChild().position.x)
-                * (width / this.getPseudoChild().position.width)
-              }
-              y={
-                (grandchild.position.y - this.getPseudoChild().position.y)
-                * (height / this.getPseudoChild().position.height)
-              }
-            />
-          ))}
+        {childType === 'COMP'
+          && components
+            .find(comp => comp.title === childComponentName)
+            .childrenArray.filter(child => child.childId !== '-1')
+            .map((grandchild, i) => (
+              <GrandchildRectangle
+                key={i}
+                components={components}
+                componentId={componentId}
+                childType={grandchild.childType}
+                childComponentName={grandchild.componentName}
+                childComponentId={grandchild.childComponentId}
+                focusChild={focusChild}
+                childId={childId}
+                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
+                height={
+                  grandchild.position.height * (height / this.getPseudoChild().position.height)
+                }
+                x={
+                  (grandchild.position.x - this.getPseudoChild().position.x)
+                  * (width / this.getPseudoChild().position.width)
+                }
+                y={
+                  (grandchild.position.y - this.getPseudoChild().position.y)
+                  * (height / this.getPseudoChild().position.height)
+                }
+              />
+            ))}
       </Group>
     );
   }