Fix bug: do not mutate vuex store outside of mutation handler. Modified CreateComponent activeComponentData computed property to include deepclone of activeComponentObj

Author: Shanon Lee

src/components/ComponentDisplay.vue

@@ -92,13 +92,12 @@ Description:
 </template>
 
 <script>
-
 import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable";
+const cloneDeep = require('lodash.clonedeep')
 // import "vue-draggable-resizable/dist/VueDraggableResizable.css";
 // import Vue3DraggableResizable from "vue3-draggable-resizable";
 // import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
-
 export default {
   name: "ComponentDisplay",
   components: {
@@ -113,7 +112,7 @@ export default {
       mockImg: false,
       initialPosition: { x: 0, y: 0 },
       initialSize: { w: 0, h: 0 },
-      htmlElements: []
+      htmlElements: [], 
     };
   },
   mounted() {
@@ -125,7 +124,6 @@ export default {
         }
       }
     });
-
     window.addEventListener("keyup", event => {
       if (event.key === "Delete") {
         if (this.activeComponent) {
@@ -141,13 +139,11 @@ export default {
         this.$store.dispatch("copyActiveComponent");
       }
     });
-
     window.addEventListener('paste', () => {
       this.$store.dispatch("pasteActiveComponent");
       // console.log('pasted');
     })
   },
-
   computed: {
     ...mapState([
       "routes",
@@ -158,26 +154,25 @@ export default {
       "imagePath",
       "activeComponentObj"
     ]),
-
     // used in VueDraggableResizeable component
     activeRouteArray() {
+      // console.log(this.routes[this.activeRoute]);
       return this.routes[this.activeRoute];
     },
-
     // used to delete active component
     activeComponentData() {
-      return this.activeComponentObj;
+      // Must deep clone this so we are not directly mutating state
+      return cloneDeep(this.activeComponentObj);
     },
-
     // childList () {
     //   return this.componentMap[componentData.componentName].children
     // },
-
     options() {
       // checks if component has any parents and pushes them into lineage
       const checkParents = (component, lineage = [component.componentName]) => {
         if (!Object.keys(component.parent).length) return lineage;
         for (var parents in component.parent) {
+          // Mutating? 
           lineage.push(parents);
           checkParents(component.parent[parents], lineage);
         }
@@ -204,13 +199,11 @@ export default {
         if (!exceptions.has(component)) return component;
       });
     },
-
     userImage() {
       const imgSrc = `file://` + this.imagePath[this.activeRoute];
       // console.log('imgSrc is: ', imgSrc)
       return imgSrc;
     },
-
     // updates display with mockup image
     mockBg() {
       return this.imagePath[this.activeRoute]
@@ -244,7 +237,6 @@ export default {
       });
     }
   },
-
   methods: {
     ...mapActions([
       "setActiveComponent",
@@ -256,7 +248,6 @@ export default {
       "updateStartingSize",
       "updateComponentSize"
     ]),
-
     // records component's initial position in case of drag
     recordInitialPosition: function(e) {
       // console.log('recording initial position: ', this.initialPosition)
@@ -266,7 +257,6 @@ export default {
       this.initialPosition.x = this.activeComponentData.x;
       this.initialPosition.y = this.activeComponentData.y;
     },
-
     // records component's initial size/position in case of resize
     recordInitialSize: function(e) {
       // console.log('recording initial size')
@@ -275,7 +265,6 @@ export default {
       this.initialPosition.x = this.activeComponentData.x;
       this.initialPosition.y = this.activeComponentData.y;
     },
-
     // sets component's ending size/position
     finishedResize: function(x, y, w, h) {
       // console.log('FINISHED RESIZING')
@@ -297,7 +286,6 @@ export default {
         this.updateComponentSize(payload);
       }
     },
-
     finishedDrag: function(x, y) {
       // console.log('FINISHED DRAGGING')
       let payload = {
@@ -316,36 +304,29 @@ export default {
         this.updateComponentPosition(payload);
       }
     },
-
     /* Records size/position
       Add @resizing="onResize" to VueDraggableResizable #component-box to use
-
     onResize: function (x, y, width, height) {
       this.activeComponentData.x = x
       this.activeComponentData.y = y
       this.activeComponentData.w = width
       this.activeComponentData.h = height
-
       this.componentMap[this.activeComponent].x = x
       this.componentMap[this.activeComponent].y = y
       this.componentMap[this.activeComponent].w = width
       this.componentMap[this.activeComponent].h = height
     },
     */
-
     /* Records component's position
       Add @dragging="onDrag" to VueDraggableResizable #component-box to use
-
     onDrag: function (x, y) {
       console.log('ondrag')
       this.activeComponentData.x = x
       this.activeComponentData.y = y
-
       this.componentMap[this.activeComponent].x = x
       this.componentMap[this.activeComponent].y = y
     },
     */
-
     // unhighlights all inactive components
     onActivated(componentData) {
       // console.log('onActivated - comp display, componentData', componentData)
@@ -364,25 +345,21 @@ export default {
       }
       this.activeComponentData.isActive = true;
     },
-
     // deactivated is emitted before activated
     onDeactivated() {
       if (this.activeComponent !== "") {
         this.activeComponentData.isActive = false;
       }
     },
-
     // renders modal with Update Children and Layer in it
     handleAddChild() {
       this.modalOpen = true;
     },
-
     // used when user selects to add child from dropdown
     handleSelect(value) {
       // console.log('selected child component: ', value)
       this.updateActiveComponentChildrenValue(value);
     },
-
     // user can change component's layer order
     handleLayer(e) {
       // console.log('handeLayer\'s e: ', e)
@@ -397,7 +374,6 @@ export default {
       if (e.target.innerText === "-" && payload.z > 0) payload.z--;
       this.updateComponentLayer(payload);
     },
-
     // if user clicks on display grid, resets active component to ''
     handleClick(event) {
       if (event.target.className === "component-display grid-bg") {
@@ -409,7 +385,6 @@ export default {
     copyActiveComponent() {
       // console.log('copied');
     }
-
   },
   watch: {
     activeComponent: function() {
@@ -435,7 +410,6 @@ export default {
   line-height: 1.2;
   z-index: -1;
 }
-
 .component-html-info {
   display: flex;
   font-size: 14px;
@@ -485,7 +459,6 @@ export default {
     #269;
   behavior: url(/pie/PIE.htc);
 }
-
 .menu {
   margin-bottom: 0px !important;
 }
@@ -517,4 +490,4 @@ export default {
 #counter {
   margin-top: 20px;
 }
-</style>
+</style>

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -53,8 +53,6 @@ Description:
 import Icons from '../Icons'
 import ParentMultiselect from '../ParentMultiselect.vue'
 import { mapState, mapActions } from 'vuex'
-
-
 export default {
   name: 'HomeSidebar',
   components: {
@@ -88,7 +86,6 @@ export default {
       'addNestedNoActive',
       'editComponentName',
     ]),
-
     createComponent () {
       if (!this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, '')) {
         event.preventDefault()
@@ -113,18 +110,14 @@ export default {
         parent: {},
         isActive: false
       }
-
-      console.log(component)
       if (!this.componentMap[component.componentName]) {
-        console.log('line119')
-        this.registerComponent(component)
-        console.log(this.setActiveComponent)
-        // this.setActiveComponent(component.componentName)
+        this.registerComponent(component);
+        console.log(this.$store.state)
+        this.setActiveComponent(component.componentName)
       }
     },
   },
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -136,7 +129,6 @@ export default {
   margin: 0.75rem;
   width: 90%;
 }
-
 .inner-div {
   display: flex;
   flex-direction: column;

src/store/mutations.js

@@ -479,7 +479,7 @@ const mutations = {
     const {
       componentName, htmlList, children, parent, isActive, actions, props
     } = payload
-    const s = payload.state
+    const s = payload.state;
     state.componentMap = {
       ...state.componentMap,
       [componentName]: {