Revert Tree.vue back to original state

Author: Shanon Lee

src/components/dashboard_items/Dashboard.vue

@@ -92,11 +92,13 @@ export default {
   watch: {
     // otherwise toggle dashboard to 'Project Tree' tab if no component is selected or the
     // user is in the process of creating a component
+
     componentNameInputValue: function() {
       if (this.componentNameInputValue !== "" && this.activeComponent === "") {
         this.tab = "tree";
       }
     },
+
     // // toggles dashboard to "Project Tree" tab if:
     // // no component is selected and either:
     // // elements are being added to component or name is being typed

src/components/dashboard_items/Tree.vue

@@ -6,7 +6,7 @@ Description:
 
 <template>
   <div class="container">
-    <!-- <tree
+    <tree
       :key="computedTree"
       :data="computedTree"
       node-text="name"
@@ -15,17 +15,8 @@ Description:
       :zoomable="true"
       :radius="4"
       :duration="10"
-    ></tree> -->
-    <tree
-      :key="testTree"
-      :data="testTree"
-      node-text="name"
-      layoutType="vertical"
-      type="tree"
-      :zoomable="true"
-      :radius="4"
-      :duration="10"
     ></tree>
+    <!-- <tree v-bind:data="tree" ></tree> -->
   </div>
 </template>
 
@@ -38,75 +29,69 @@ export default {
     tree
   },
   computed: {
-    // ...mapState(['componentMap', 'activeComponent']),
+    ...mapState(['componentMap', 'activeComponent']),
     // Returns project tree on re-render
     computedTree () {
-      return 1;
-      // return this.buildTree()
+      // console.log('buildtree', this.buildTree())
+      return this.buildTree()
     }
   },
   data () {
     return {
       tree: null,
       treeKey: 'key', 
-      testTree: {
-        name: 'father', 
-        children: [{
-          name: 'son1'
-        }]
-      }
     }
   },
-  // methods: {
-  //   // Called by transformToTree, formats componentMap
-  //   formatComponentMap (compMap) {
-  //     let result = []
-  //     Object.values(compMap).forEach((compData) => {
-  //       result.push({
-  //         name: compData.componentName,
-  //         children: compData.children
-  //       })
-  //     });
-  //     // ***** Infinite loop
-  //     // result = [{ name: 'App', children: [] }, { name: 'HomeView', children: [] }]
-  //     return result
-  //   },
-  //   // Called by buildTree, transforms componentMap
-  //   transformToTree (data) {
-  //     let result = {}
-  //     const nodes = {}
-  //     const formattedData = this.formatComponentMap(data)
-
-  //     formattedData.forEach((component) => {
-  //       if (!nodes[component.name]) {
-  //         nodes[component.name] = { name: component.name, children: [] }
-  //         result = nodes
-  //       }
-  //       component.children.forEach((child) => {
-  //         if (!nodes[child]) nodes[child] = { name: child, children: [] }
-  //         nodes[component.name].children.push(nodes[child])
-  //       })
-  //     })
-  //     return result
-  //   },
-  //   // Called by computedTree, calls transformToTree
-  //   buildTree () {
-  //     let build = this.transformToTree(this.componentMap);
-  //     return build['App']
-  //   }
-  // },
-  // watch: {
-  //   componentMap: {
-  //     deep: true,
-  //     handler () {
-  //       this.buildTree()
-  //     }
-  //   }
-  // }
+  methods: {
+    // Called by transformToTree, formats componentMap
+    formatComponentMap (compMap) {
+      let result = []
+      Object.values(compMap).forEach((compData) => {
+        result.push({
+          name: compData.componentName,
+          children: compData.children
+        })
+      })
+      
+      return result
+    },
+    // Called by buildTree, transforms componentMap
+    transformToTree (data) {
+      let result = {}
+      const nodes = {}
+      const formattedData = this.formatComponentMap(data)
+      formattedData.forEach((component) => {
+        if (!nodes[component.name]) {
+          nodes[component.name] = { name: component.name, children: [] }
+          result = nodes
+        }
+        component.children.forEach((child) => {
+          if (!nodes[child]) nodes[child] = { name: child, children: [] }
+          nodes[component.name].children.push(nodes[child])
+        })
+      })
+      // console.log(nodes)
+      // console.log(result)
+      return result
+    },
+    // Called by computedTree, calls transformToTree
+    buildTree () {
+      let build = this.transformToTree(this.componentMap)
+      return build['App']
+    }
+  },
+  watch: {
+    componentMap: {
+      deep: true,
+      handler () {
+        this.buildTree()
+      }
+    }
+  }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .container {
   height: 100%;
   width: 100%;
@@ -119,18 +104,22 @@ export default {
   font-weight: bold;
   fill: #FFF;
   transform: rotate(-90deg);
+  /* none of these classes work
+  color: white !important;
+  background: white;
+  margin: 1rem; */
 }
 
-
 /* changes the circle node color */
 .treeclass .nodetree circle {
-    fill: #A2D9FF;
+  fill: #A2D9FF;
 }
-
+  
 /* changes the stroke color */
 .treeclass .linktree {
   stroke: $secondary !important;
   stroke-opacity: .4;
   stroke-width: 8px;
 }
+
 </style>