tree getting close

Author: diegovazquezny

app/src/components/bottom/BottomTabs.tsx

@@ -1,13 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import { stateContext } from '../../context/context';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 // import Tree from 'react-d3-tree';
 import CodePreview from './CodePreview';
 import Box from '@material-ui/core/Box';
+import Tree from '../../tree/TreeChart';
 
 const BottomTabs = () => {
   // state that controls which tab the user is on
+  const [state, dispatch] = useContext(stateContext);
   const [tab, setTab] = useState(0);
   const classes = useStyles();
   treeWrapper: HTMLDivElement;
@@ -17,6 +20,9 @@ const BottomTabs = () => {
     setTab(value);
   };
 
+  const { HTMLTypes } = state;
+  const { components } = state; 
+
   return (
     <div className={classes.root}>
       <Box display="flex" justifyContent="space-between">
@@ -33,9 +39,15 @@ const BottomTabs = () => {
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Code Preview"
           />
+          <Tab
+            disableRipple
+            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+            label="Component Tree"
+          />
         </Tabs>
       </Box>
       {tab === 0 && <CodePreview />}
+      {tab === 1 && <Tree data={components} />}
     </div>
   );
 };

app/src/context/initialState.ts

@@ -11,7 +11,8 @@ export const initialState: State = {
       name: 'index',
       style: {},
       code: '<div>Drag in a component or HTML element into the canvas!</div>',
-      children: []
+      children: [],
+      isPage: true
     }
   ],
   projectType: 'Next.js',

app/src/interfaces/Interfaces.ts

@@ -15,6 +15,7 @@ export interface State {
 export interface ChildElement {
   type: string;
   typeId: number;
+  name: string;
   childId: number;
   //   update this interface later so that we enforce that each value of style object is a string
   style: object;
@@ -28,6 +29,7 @@ export interface Component {
   style: object;
   code: string;
   children: ChildElement[];
+  isPage: boolean;
 }
 
 export interface Action {

app/src/reducers/componentReducer.ts

@@ -7,6 +7,7 @@ import {
 import initialState from '../context/initialState';
 import generateCode from '../helperFunctions/generateCode';
 import cloneDeep from '../helperFunctions/cloneDeep';
+import HTMLTypes from '../context/HTMLTypes';
 
 const reducer = (state: State, action: Action) => {
   // if the project type is set as Next.js, next component code should be generated
@@ -93,7 +94,6 @@ const reducer = (state: State, action: Action) => {
     // TODO: output parent name and id to refocus canvas on parent
     let isChild: boolean = false;
     state.components.forEach(comp => {
-      console.log('comp =>', comp);
       comp.children.forEach(child => {
         if (child.type === 'Component' && child.typeId === id) {
           isChild = true;
@@ -109,6 +109,8 @@ const reducer = (state: State, action: Action) => {
     components.forEach((comp, i) => comp.id = i + 1);
   }
 
+  const deleteById = (id: number): Component[] => [...state.components].filter(comp => comp.id != id);
+
   switch (action.type) {
     // Add a new component type
     // add component to the component array and increment our counter for the componentId
@@ -126,7 +128,8 @@ const reducer = (state: State, action: Action) => {
         nextChildId: 1,
         style: {},
         code: '',
-        children: []
+        children: [],
+        isPage: action.payload.root
       };
       const components = [...state.components];
       components.push(newComponent);
@@ -169,9 +172,15 @@ const reducer = (state: State, action: Action) => {
           return state;
       }
 
+      let newName = HTMLTypes.reduce((name, el) => {
+        if (typeId === el.id) name = el.tag;
+        return name;
+      },'');
+
       const newChild: ChildElement = {
         type,
         typeId,
+        name: newName,
         childId: state.nextChildId,
         style: {},
         children: []
@@ -187,7 +196,6 @@ const reducer = (state: State, action: Action) => {
       }
       // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
 
-
       else {
         const directParent = findChild(parentComponent, childId);
         directParent.children.push(newChild);
@@ -294,15 +302,12 @@ const reducer = (state: State, action: Action) => {
         components,
         state.canvasFocus.componentId
       );
-      console.log('curr comp', component);
       // find the moved element's former parent
       // delete the element from it's former parent's children array
       const { directParent, childIndexValue } = findParent(
         component,
         state.canvasFocus.childId
       );
-      console.log('direct parent', directParent);
-      console.log('child index', childIndexValue);
       const child = { ...directParent.children[childIndexValue] };
       directParent.children.splice(childIndexValue, 1);
       component.code = generateCode(
@@ -318,15 +323,21 @@ const reducer = (state: State, action: Action) => {
 
     case 'DELETE PAGE': {
       const id: number = state.canvasFocus.componentId;
-      // console.log('id: ', id);
 
-      const components = [...state.components].filter(comp => comp.id != id);
-      // console.log('components: ', components);
+      // remove component and update ids
+      const components: Component[] = deleteById(id);
       updateIds(components);
-      // // console.log('all components', state.components);
 
+      // rebuild root components
+      const rootComponents: number[] = []; 
+      components.forEach(comp => {
+        if (comp.isPage) rootComponents.push(comp.id);
+      });
+      
+      //TODO: where should canvas focus after deleting comp?
       const canvasFocus = { componentId: 1, childId: null }
-      return {...state, components, canvasFocus}
+
+      return {...state, rootComponents, components, canvasFocus}
     }
     case 'DELETE REUSABLE COMPONENT' : {
       // TODO: bug when deleting element inside page
@@ -335,16 +346,17 @@ const reducer = (state: State, action: Action) => {
 
       const id: number = state.canvasFocus.componentId;
       // check if component is a child element of a page
+      // check if id is inside root components
       if(isChildOfPage(id)) {
         // TODO: include name of parent in alert
         // TODO: change canvas focus to parent
-        //dialog.showErrorBox('error','Reusable components inside of a page must be deleted from the page');
-        alert('Reusable components inside of a page must be deleted from the page');
+        // TODO: modal
+        console.log('Reusable components inside of a page must be deleted from the page');
         //const canvasFocus:Object = { componentId: id, childId: null };
         return  { ...state }
       }
       // filter out components that don't match id
-      const components: Component[] = [...state.components].filter(comp => comp.id != id);
+      const components: Component[] = deleteById(id);
 
       updateIds(components);
 

app/src/tree/TreeChart.tsx

@@ -0,0 +1,106 @@
+import React, { useRef, useEffect, useContext } from "react";
+import { select, hierarchy, tree, linkHorizontal } from "d3";
+import { stateContext } from '../context/context';
+import useResizeObserver from "./useResizeObserver";
+
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+function TreeChart({ data }) {
+  const [state, dispatch] = useContext(stateContext);
+  const svgRef = useRef();
+  const wrapperRef = useRef();
+  const dimensions = useResizeObserver(wrapperRef);
+
+  // we save data to see if it changed
+  const previouslyRenderedData = usePrevious(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();
+
+    // transform hierarchical data
+    const root = hierarchy(data[0]);
+    const treeLayout = tree().size([height, width]);
+
+    // Returns a new link generator with horizontal tangents. 
+    // To visualize links in a tree diagram rooted on the left edge of the display
+    const linkGenerator = linkHorizontal()
+      .x(link => link.y)
+      .y(link => link.x);
+
+    // insert our data into the tree layout
+    treeLayout(root);
+
+    // nodes
+    svg
+      .selectAll(".node") // grab all nodes
+      .data(root.descendants())
+      .join(enter => enter.append("circle").attr("opacity", 0))
+      .attr("class", "node")
+      /*
+        The cx, cy attributes are associated with the circle and ellipse elements and designate the centre of each shape. The coordinates are set from the top, left hand corner of the web page.
+        cx: The position of the centre of the element in the x axis measured from the left side of the screen.
+        cy: The position of the centre of the element in the y axis measured from the top of the screen.
+      */
+      .attr("cx", node => node.y)
+      .attr("cy", node => node.x)
+      .attr("r", 4)
+      .attr("opacity", 1);
+
+    // links
+    const enteringAndUpdatingLinks = svg
+      .selectAll(".link")
+      .data(root.links())
+      .join("path")
+      .attr("class", "link")
+      .attr("d", linkGenerator)
+      .attr("stroke-dasharray", function() {
+        const length = this.getTotalLength();
+        return `${length} ${length}`;
+      })
+      .attr("stroke", "black")
+      .attr("fill", "none")
+      .attr("opacity", 1);
+
+    if (data !== previouslyRenderedData) {
+      enteringAndUpdatingLinks
+        .attr("stroke-dashoffset", function() {
+          return this.getTotalLength();
+        })
+        .attr("stroke-dashoffset", 0);
+    }
+
+    // labels
+    svg
+      .selectAll(".label")
+      .data(root.descendants())
+      .join(enter => enter.append("text").attr("opacity", 0))
+      .attr("class", "label")
+      .attr("x", node => node.y)
+      .attr("y", node => node.x - 12)
+      .attr("text-anchor", "middle")
+      .attr("font-size", 24)
+      .text(node => node.data.name)
+      .attr("opacity", 1);
+  }, [data, dimensions, previouslyRenderedData]);
+
+  return (
+    <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
+      <svg ref={svgRef}></svg>
+    </div>
+  );
+}
+
+export default TreeChart;

app/src/tree/useResizeObserver.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+
+const useResizeObserver = ref => {
+  const [dimensions, setDimensions] = useState(null);
+  useEffect(() => {
+    const observeTarget = ref.current;
+    const resizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        setDimensions(entry.contentRect);
+      });
+    });
+    resizeObserver.observe(observeTarget);
+    return () => {
+      resizeObserver.unobserve(observeTarget);
+    };
+  }, [ref]);
+  return dimensions;
+};
+
+export default useResizeObserver;