committing full edit functionality for component name, state, actions, and props

Author: Schillaci767

package-lock.json

@@ -39,6 +39,7 @@
     "vue-drag-resize": "^1.3.2",
     "vue-draggable-nested-tree": "^2.2.17",
     "vue-draggable-resizable": "^2.0.0-rc2",
+    "vue-js-toggle-button": "^1.3.3",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
     "vue-prism-editor": "^0.2.1",
@@ -50,6 +51,7 @@
     "@quasar/app": "^1.0.0",
     "@quasar/quasar-app-extension-testing": "^1.0.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "^1.0.0",
+    "@vue/devtools": "^5.3.4",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",

package.json

@@ -40,8 +40,14 @@ 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 &&
-            deepEqual(action.payload, this.undoneAction[this.undoneAction.length - 1].payload)) {
+          if (
+            action.type ===
+              this.undoneAction[this.undoneAction.length - 1].type &&
+            deepEqual(
+              action.payload,
+              this.undoneAction[this.undoneAction.length - 1].payload
+            )
+          ) {
             this.undoneAction.pop()
           } else {
             this.undoneAction = []
@@ -50,19 +56,21 @@ let redoMixin = {
       }
     })
   },
-
+  // undo + redo function calling
+  // metaKey accounts for Command Key on Mac
   mounted () {
     const throttledUndo = throttle(this.undo, 300)
     const throttledRedo = throttle(this.redo, 300)
-
+    // undo function calling
     window.addEventListener('keydown', event => {
-      if (event.ctrlKey && event.key === 'z') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'z') {
         event.preventDefault()
         throttledUndo()
       }
     })
+    // redo function calling
     window.addEventListener('keydown', event => {
-      if (event.ctrlKey && event.key === 'y') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'y') {
         event.preventDefault()
         throttledRedo()
       }
@@ -90,8 +98,10 @@ let redoMixin = {
         this.undoneAction.push(undone)
         if (ignoredActions.has(undone.type)) {
           // console.log('We undid an ignored action!')
-          while (this.doneAction[this.doneAction.length - 1] &&
-          ignoredActions.has(this.doneAction[this.doneAction.length - 1].type)) {
+          while (
+            this.doneAction[this.doneAction.length - 1] &&
+            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
@@ -130,7 +140,6 @@ let redoMixin = {
         this.redo()
       }
     }
-
   }
 }
 
@@ -140,5 +149,4 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style></style>

src/App.vue

@@ -33,14 +33,17 @@ Description:
       <div class="component-title">
         <p>{{ componentData.componentName }}</p>
       </div>
-      <!-- <p> Elements in Component: </p>
-      <p
-        v-for="htmlElement in componentMap[componentData.componentName]
-          .htmlList"
-        :key="htmlElement"
-      >
-        {{ htmlElement.text }}
-      </p> -->
+      <!-- <div class="component-html-info"> -->
+        <!-- <p>Elements in Component:</p> -->
+        <!-- <p
+          class="component-html-info"
+          v-for="htmlElement in componentMap[componentData.componentName]
+            .htmlList"
+          :key="htmlElement"
+        >
+           {{  htmlElement.text  }}
+        </p> -->
+      <!-- </div> -->
       <q-menu context-menu>
         <q-list color="black" class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
@@ -339,7 +342,7 @@ export default {
     },
 
     // deactivated is emitted before activated
-    onDeactivated (componentData) {
+    onDeactivated () {
       if (this.activeComponent !== '') {
         this.activeComponentData.isActive = false
       }
@@ -379,7 +382,11 @@ export default {
   },
   watch: {
     activeComponent: function () {
-      this.onActivated(this.activeComponentObj)
+      if (this.activeComponent) {
+        this.onActivated(this.activeComponentObj)
+      } else {
+        this.onDeactivated()
+      }
     }
   }
 }
@@ -397,6 +404,19 @@ export default {
   line-height: 1.2;
   z-index: -1;
 }
+
+.component-html-info {
+    display: flex;
+    font-size: 14px;
+    /* flex-basis: auto; */
+    flex-direction: column;
+    /* flex-wrap: wrap; */
+    /* justify-content: center; */
+    /* flex-flow: column wrap; */
+    /* align-content: stretch; */
+    /* align-items: flex-start; */
+    font-weight: 800;
+  }
 .component-children {
   position: relative;
   top: 0rem;