Merge pull request #22 from diegovazquezny/fix-del

Added resources folder

Author: jinsoolim

app/electron/menu.js

@@ -26,7 +26,7 @@ var MenuBuilder = function(mainWindow, appName) {
         contextIsolation: true,
         enableRemoteModule: false,
         zoomFactor: 1.0,
-        devTools: false
+        // devTools: false
       }
     });
     tutorial.loadURL(`http://localhost:8080/#/tutorial`);

app/src/components/main/Canvas.tsx

@@ -8,6 +8,7 @@ import renderChildren from '../../helperFunctions/renderChildren';
 
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
+  console.log('state.comps', state.components);
 
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(

app/src/containers/RightContainer.tsx

@@ -215,9 +215,9 @@ const RightContainer = (): JSX.Element => {
   }
 
   const handleDeleteReusableComponent = () => {
-    isChildOfPage()
+    /*isChildOfPage()
       ? handleDialogError('component')
-      : dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
+      :*/ dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   };
 
   const isReusable = (configTarget): boolean => {

app/src/helperFunctions/renderChildren.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { ChildElement } from '../interfaces/Interfaces';
 import DirectChildComponent from '../components/main/DirectChildComponent';
 import DirectChildHTML from '../components/main/DirectChildHTML';
 import DirectChildHTMLNestable from '../components/main/DirectChildHTMLNestable';
 import RouteLink from '../components/main/RouteLink';
+import { StateContext } from '../context/context';
 
 // helper method to render all direct children of a component
 // direct children are clickable and draggable
 // direct children may also have their own indirect children (grandchildren, great-grandchildren, etc) which are not draggable and clickable
 // there are four types of direct children that can be rendered on the screen
 const renderChildren = (children: ChildElement[]) => {
+  const [state, dispatch] = useContext(StateContext);
   return children.map((child: ChildElement, i: number) => {
-    console.log('child', child);
-    const { type, typeId, style, childId, children, attributes } = child;
+    const { type, typeId, style, childId, children, attributes, name } = child;
+    if (name === '') child.name = state.components[typeId - 1 ].name; 
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
     if (type === 'Component') {
@@ -23,6 +25,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           style={style}
           key={'DirChild' + childId.toString()}
+          name={child.name}
         />
       );
     }
@@ -35,6 +38,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           style={style}
           key={'DirChild' + childId.toString()}
+          name={child.name}
         />
       );
     }
@@ -48,6 +52,7 @@ const renderChildren = (children: ChildElement[]) => {
           style={style}
           children={children}
           key={'DirChild' + childId.toString()}
+          name={child.name}
         />
       );
     }
@@ -62,6 +67,7 @@ const renderChildren = (children: ChildElement[]) => {
           style={style}
           children={children}
           key={'DirChild' + childId.toString()}
+          name={child.name}
         />
       );
     }

app/src/reducers/componentReducer.ts

@@ -89,7 +89,23 @@ const reducer = (state: State, action: Action) => {
   };
 
   const updateIds = (components: Component[]) => {
+    // component IDs should be array index + 1
     components.forEach((comp, i) => (comp.id = i + 1));
+    
+    // create KV pairs of component names and corresponding IDs 
+    const componentIds = {};
+    components.forEach(component => {
+      if (!component.isPage ) componentIds[component.name] = component.id;
+    });
+
+    // assign correct ID to components that are children inside of remaining pages
+    components.forEach(page => {
+      if (page.isPage) {
+        page.children.forEach(child => {
+          if (child.type === 'Component') child.typeId = componentIds[child.name]; 
+        });
+      }
+    });
   };
 
   const updateRoots = (components: Component[]) => {
@@ -110,6 +126,25 @@ const reducer = (state: State, action: Action) => {
     }
   }
 
+  const deleteComponentFromPages = (components, name) => {
+    const searchNestedComps = (childComponents) => {
+      console.log(childComponents);
+      if (childComponents.length === 0) return;
+      childComponents.forEach((comp, i) => {
+        if (comp.isPage){
+          comp.children.forEach((child, i, arr) => {
+            if (child.name === name) {
+              arr.splice(i, 1);
+            }
+          })
+        } 
+        searchNestedComps(childComponents.children)
+      });
+    }
+    components.forEach(comp => searchNestedComps(comp.children));
+    console.log(components);
+  }
+
   switch (action.type) {
     case 'ADD COMPONENT': {
       if (
@@ -119,7 +154,7 @@ const reducer = (state: State, action: Action) => {
         return state;
 
       const components = [...state.components];
-      
+      console.log('adding =>', action.payload.componentName);
       const newComponent = {
         id: state.components.length + 1,
         name: action.payload.componentName,
@@ -129,7 +164,7 @@ const reducer = (state: State, action: Action) => {
         children: [],
         isPage: action.payload.root
       };
-
+      console.log('new comp =>', newComponent);
       components.push(newComponent);
 
       const rootComponents = [...state.rootComponents];
@@ -200,7 +235,7 @@ const reducer = (state: State, action: Action) => {
       }
       const newChild: ChildElement = {
         type,
-        typeId: components.length + 1,
+        typeId,
         name: newName,
         childId: state.nextChildId,
         style: {},
@@ -353,8 +388,14 @@ const reducer = (state: State, action: Action) => {
     }
     case 'DELETE REUSABLE COMPONENT' : {
       const id: number = state.canvasFocus.componentId;
+      const name: string = state.components[id - 1].name;
+      console.log(name);
       const components: Component[] = deleteById(id);
       updateIds(components);
+
+      // check if reusable comp is inside a page
+      deleteComponentFromPages(components, name);
+
       const canvasFocus = { componentId: 1, childId: null };
 
       const rootComponents = updateRoots(components);

app/src/tree/TreeChart.tsx

@@ -29,15 +29,15 @@ function TreeChart({ data }) {
   // will be called initially and on every data change
   useEffect(() => {
     const svg = select(svgRef.current);
-
     // use dimensions from useResizeObserver,
     // but use getBoundingClientRect on initial render
     // (dimensions are null for the first render)
     const { width, height } =
-      dimensions || wrapperRef.current.getBoundingClientRect();
+    dimensions || wrapperRef.current.getBoundingClientRect();
     // transform hierarchical data
     const root = hierarchy(data[canvasId - 1]);
     const treeLayout = tree().size([height, width - 125]);
+    //console.log(root);
 
     // Returns a new link generator with horizontal display.
     // To visualize links in a tree diagram rooted on the left edge of the display

app/src/tutorial/ComponentTree.tsx

@@ -5,23 +5,80 @@ import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
+import tree1 from '../../../resources/tree_tutorial_images/tree1.png';
+import tree2 from '../../../resources/tree_tutorial_images/tree2.png';
+import tree3 from '../../../resources/tree_tutorial_images/tree3.png';
+import tree4 from '../../../resources/tree_tutorial_images/tree4.png';
+import tree5 from '../../../resources/tree_tutorial_images/tree5.png';
+import pages from '../../../resources/tree_tutorial_images/pages.png';
+import re_comps from '../../../resources/tree_tutorial_images/re_comps.png';
 // import Grid from '@material-ui/core/Grid';
 
 // import ComponentPanel from '../components/left/ComponentPanel';
 // import HTMLPanel from '../components/left/HTMLPanel';
 
 // Left-hand portion of the app, where component options are displayed
-const useStyles = makeStyles({});
+
 const ComponentTree: React.FC<RouteComponentProps> = () => {
+  const body = document.querySelector('body');
+  body.style.overflowY = 'auto';
+  const useStyles = makeStyles({
+    title: {
+      color: '#14151f',
+      fontSize: 54
+    },
+    text: {
+      color: '#2e2f3e',
+      fontSize: 24
+    },
+    wrapper: {
+      margin: '30px 30px 30px 30px',
+      width: 'auto'
+    },
+    img: {
+      borderRadius: '3px',
+      // alignSelf: 'center'
+    },
+    imgWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // border: '1px solid black',
+      width: 'auto'
+    }
+  });
+  const classes = useStyles();
   return (
-    <div>
-      ComponentTree
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>React Component Tree</h1>
+      <h2></h2>
+      <p className={classes.text}>The tree provides the developer with a visual representation of the component hierarchy. The tree updates in real time as the developer adds or deletes components.</p>
+      <div className={classes.imgWrapper}>
+        <img className={classes.img} src={tree1}></img>
+      </div>
+      <p className={classes.text}>Each tree begins with a root node. The current page that is selected represents the root node.</p>
+      <div className={classes.imgWrapper}>
+        {/* <img className={classes.img} src={pages}></img> */}
+        <img className={classes.img} src={tree2}></img>
+      </div>
+      <p className={classes.text}>Reusable components are shown attached to the current page along with their subtrees of components and HTML elements.</p>
+      <div className={classes.imgWrapper}>
+        {/* <img className={classes.img} src={re_comps}></img> */}
+        <img className={classes.img} src={tree3}></img>
+      </div>  
+      <p className={classes.text}>HTML elements are shown by their tag name.</p>
+      <div className={classes.imgWrapper}>
+        <img className={classes.img} src={tree4}></img>
+      </div>
+      <p className={classes.text}>You can also view the tree for each reusable component.</p>
+      <div className={classes.imgWrapper}>
+        <img className={classes.img} src={tree5}></img>
+      </div>
       <Link to={`/tutorial`}>
         <button>Tutorial</button>
       </Link>
     </div>
   );
 };
 
-export default withRouter(ComponentTree);
-
+export default withRouter(ComponentTree);

resources/tree_tutorial_images/pages.png

@@ -79,7 +79,7 @@ module.exports = {
       // url loader converts file into base 64 encoded string that can be passed inline into the file rather than be imported from a seperate file
       // you can set limits for the file size at which this inline encoding happens, but there is no limit set currently
       {
-        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
+        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/i,
         use: 'url-loader'
       }
     ]