massive cleanup incl comments, graveyard funcs, console.logs

Author: keliphan

.gitignore

@@ -11,7 +11,6 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/test
 /coverage
 package-lock.json
 

HomeView.png

@@ -86,15 +86,15 @@ module.exports = function (ctx) {
       // analyze: true,
       // extractCSS: false,
       extendWebpack (cfg) {
-        //cfg.module.rules.push({
+        // cfg.module.rules.push({
         //   enforce: 'pre',
         //   test: /\.(js|vue)$/,
         //   loader: 'eslint-loader',
         //   exclude: /node_modules/,
         //   options: {
         //     formatter: require('eslint').CLIEngine.getFormatter('stylish')
         //   }
-        //})
+        // })
       }
     },
 
@@ -158,7 +158,7 @@ module.exports = function (ctx) {
     },
 
     electron: {
-      bundler:'builder',
+      bundler: 'builder',
       // bundler: 'builder', // or 'packager'
 
       extendWebpack (cfg) {
@@ -182,11 +182,11 @@ module.exports = function (ctx) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-         appId: 'com.electron.OverVue',
-         win:{
-           target:'nsis'
-         },
+        appId: 'com.electron.OverVue',
+        win: {
+          target: 'nsis'
+        }
       }
     }
   }
-}
+}

Route2.png

@@ -1,18 +1,18 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow } from 'electron'
 
 /**
  * Set `__statics` path to static files in production;
  * The reason we are setting it here is that the path needs to be evaluated at runtime
  */
 if (process.env.PROD) {
-  global.__statics = require("path")
-    .join(__dirname, "statics")
-    .replace(/\\/g, "\\\\");
+  global.__statics = require('path')
+    .join(__dirname, 'statics')
+    .replace(/\\/g, '\\\\')
 }
 
-let mainWindow;
+let mainWindow
 
-function createWindow() {
+function createWindow () {
   /**
    * Initial window options
    */
@@ -24,25 +24,25 @@ function createWindow() {
       nodeIntegration: true,
       webSecurity: false
     }
-  });
+  })
 
-  mainWindow.loadURL(process.env.APP_URL);
+  mainWindow.loadURL(process.env.APP_URL)
 
-  mainWindow.on("closed", () => {
-    mainWindow = null;
-  });
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
 }
 
-app.on("ready", createWindow);
+app.on('ready', createWindow)
 
-app.on("window-all-closed", () => {
-  if (process.platform !== "darwin") {
-    app.quit();
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
   }
-});
+})
 
-app.on("activate", () => {
+app.on('activate', () => {
   if (mainWindow === null) {
-    createWindow();
+    createWindow()
   }
-});
+})

Route3.png

@@ -5,33 +5,28 @@
 </template>
 
 <script>
-import { SET_ACTIVE_COMPONENT } from './store/types'
 const deepEqual = require('lodash.isequal')
 const cloneDeep = require('lodash.clonedeep')
 const throttle = require('lodash.throttle')
 import { defaultState } from './store/state/index.js'
 
-
-//use this to make sure these actions don't count as things you "undo"
+// use this to make sure these actions don't count as things you "undo"
 const ignoredActions = new Set([
-  "setActiveComponent",
-  "setActiveLayer",
-  "upOneLayer",
-  "setActiveHTML"
-  ])
-
+  'setActiveComponent',
+  'setActiveLayer',
+  'upOneLayer',
+  'setActiveHTML'
+])
 
 let redoMixin = {
   data () {
     return {
-      // banana:[],
       doneAction: [],
       undoneAction: [],
       isTimetraveling: false,
       initialState: {}
     }
   },
-
   created () {
     this.$store.subscribeAction((action, state) => {
       // console.log("We are saving this action!", action)
@@ -45,7 +40,7 @@ let redoMixin = {
       // console.log("Are these equal to each other?", action == this.undoneAction[this.undoneAction.length-1])
       if (!this.isTimetraveling) {
         if (this.undoneAction[this.undoneAction.length - 1]) {
-          if (action.type == this.undoneAction[this.undoneAction.length - 1].type &&
+          if (action.type === this.undoneAction[this.undoneAction.length - 1].type &&
             deepEqual(action.payload, this.undoneAction[this.undoneAction.length - 1].payload)) {
             this.undoneAction.pop()
           } else {
@@ -54,13 +49,11 @@ let redoMixin = {
         }
       }
     })
-    //  this.blankState = cloneDeep(this.$store)
   },
 
   mounted () {
-
-    const throttledUndo = throttle(this.undo,300)
-    const throttledRedo = throttle(this.redo,300)
+    const throttledUndo = throttle(this.undo, 300)
+    const throttledRedo = throttle(this.redo, 300)
 
     window.addEventListener('keydown', event => {
       if (event.ctrlKey && event.key === 'z') {
@@ -75,62 +68,39 @@ let redoMixin = {
       }
     })
 
-    // commented code for hotkeys for debuging///////////////////////
-    // window.addEventListener('keydown', event => {
-    //   if (event.ctrlKey && event.key === 'a') {
-    //     event.preventDefault()
-    //     if (this.$store.state.activeHTML !== '') {
-    //       this.$store.dispatch('setActiveLayer', {id:this.$store.state.activeHTML, text:"banana"})
-    //     }
-    //   }
-    // });
-    // window.addEventListener('keydown', event => {
-    //   if (event.ctrlKey && event.key === 'd') {
-    //     event.preventDefault()
-    //     if (this.$store.state.activeLayer.id !== '') {
-    //       this.$store.dispatch('upOneLayer', this.$store.state.activeLayer.id)
-    //     }
-    //   }
-    // });
-    //////////////////////////////////////////////////////////////////////
-
-    // console.log("do we want this? or this.$store.state?", this.$store.state)
     this.initialState = defaultState(this.$store.state)
   },
 
   methods: {
     undo: function () {
-      // do {
-      // console.log("How far back?")
-      if(this.doneAction.length ===0){
+      if (this.doneAction.length === 0) {
         return
       }
 
       this.isTimetraveling = true
 
       let undone = this.doneAction.pop()
 
-      // assuming we have have something to undo, we check if we are undoing an action that has no feedback
-      // like say changing active elements or active components or going up and down a layer since these can be obscured from immediate feedback
-      // will just feel bad to undo (Imagine someone just clicking around out of boredom and then deciding to undo
-      // will force them to have to undo the 30 highlights they just did instead of the last "Real" action)
-      // if this happens we keep popping the doneAction queue and building up the redo queue.
+      /* assuming we have have something to undo, we check if we are undoing an action that has no feedback
+        e.g.: changing active elements or active components or going up and down a layer since these can be obscured from immediate feedback.
+        these will feel bad to undo (imagine someone clicking around out of boredom and then deciding to undo
+        this will force them to have to undo the 30 highlights they just did instead of the last "Real" action)
+        if this happens we keep popping the doneAction queue and building up the redo queue. */
       if (undone !== undefined) {
         this.undoneAction.push(undone)
         if (ignoredActions.has(undone.type)) {
-          // console.log('We did something useless!')
+          // console.log('We undid an ignored action!')
           while (this.doneAction[this.doneAction.length - 1] &&
-          ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)){
+          ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)) {
             this.undoneAction.push(this.doneAction.pop())
           }
-           // if we get here, that means we have undone all "useless" actions 
-          // so we have to do one more final pop and push, have to make sure it isn't null though
+          /* if we get here, that means we have undone all "useless" actions
+          so we have to do one more final pop and push, have to make sure it isn't null though */
           let finalPop = this.doneAction.pop()
-          if(finalPop !== undefined){
+          if (finalPop !== undefined) {
             this.undoneAction.push(finalPop)
           }
         }
-         
       }
 
       let payload = {
@@ -139,8 +109,7 @@ let redoMixin = {
       }
       this.$store.commit('EMPTY_STATE', payload)
       this.doneAction.forEach(action => {
-        //console.log('In the loop', this.$store)
-        // this.$store.commit(`${mutation.type}`, mutation.payload);
+        // console.log('in the undo loop', this.$store)
         this.$store.dispatch(action.type, cloneDeep(action.payload))
         this.doneAction.pop()
       })
@@ -150,14 +119,14 @@ let redoMixin = {
     redo: function () {
       let action = this.undoneAction.pop()
 
-      //we have to set timeTraveling to true to preserve the undoneAction array while we make changes
+      // we have to set timeTraveling to true to preserve the undoneAction array while we make changes
       this.isTimetraveling = true
       if (action) {
         this.$store.dispatch(action.type, cloneDeep(action.payload))
       }
       this.isTimetraveling = false
       if (action && ignoredActions.has(action.type)) {
-        //console.log('WE GOTTA DO MORE')
+        // console.log('in the redo loop')
         this.redo()
       }
     }

quasar.conf.js

@@ -1,6 +1,11 @@
+<!--
+Description:
+  Dynamically renders Code Snippet in Footer
+  Functionality includes: Displays children components and (nested) HTML elements in order of selection.
+  -->
+
 <template>
   <div class="codesnippet-container">
-    <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
     <div class="top-p" v-if="activeComponent === ''">Select a component</div>
     <div v-else>{{ `${activeComponent}.vue` }}</div>
     <prism-editor
@@ -42,26 +47,22 @@ export default {
         window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5
       this.height = minHeight
     },
-    // calls createTemplate and createBoiler to generate snippet
+    // Calls createTemplate and createBoiler to generate snippet
     createCodeSnippet (componentName, children) {
       let result = `${this.createTemplate(
         componentName,
         children
       )}${this.createBoiler(componentName, children)}`
       return result
     },
+    // Creates beginner boilerplate
     createTemplate (componentName, children) {
       let output = ``
       output += ` <div>\n`
-      // children.forEach(name => {
-      //   output += `    <${name}>\n    </${name}>\n`;
-      // });
       let templateTagStr = this.writeTemplateTag(componentName)
       return `<template>\n ${output}${templateTagStr}  </div>\n</template>`
     },
-
-    // We need a helper function to recursively iterate through the given html element's children and their children's children.
-
+    // Creates <template> boilerplate
     writeTemplateTag (componentName) {
       // console.log('writeTemplateTag invoked!')
       // create reference object
@@ -79,6 +80,7 @@ export default {
         navbar: ['<nav>', '</nav>']
       }
 
+      // Helper function that recursively iterates through the given html element's children and their children's children.
       function writeNested (childrenArray, indent) {
         if (!childrenArray.length) {
           return ''
@@ -106,7 +108,7 @@ export default {
         return nestedString
       }
 
-      // loop to iterate through compName arr
+      // Iterates through active component's HTML elements list and adds to code snippet
       let htmlArr = this.componentMap[componentName].htmlList
       let outputStr = ``
       for (let el of htmlArr) {
@@ -130,6 +132,7 @@ export default {
       // console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
     },
+    // Creates boiler text for <script> and <style>
     createBoiler (componentName, children) {
       let str = ''
       children.forEach(name => {
@@ -151,7 +154,7 @@ export default {
       this.getWindowHeight()
     })
   },
-  // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
+  // Updates code snippet
   updated () {
     // console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
     // console.log('component map: ', this.componentMap);
@@ -168,6 +171,7 @@ export default {
     window.removeEventListener('resize', this.getWindowHeight)
   },
   watch: {
+    // If HTML elements or components are added, rerenders Code Snippet
     componentMap: {
       deep: true,
       handler () {
@@ -179,9 +183,6 @@ export default {
           )}`
         }
       }
-    },
-    activeComponent: function () {
-      // console.log('watching active component');
     }
   }
 }