Implemented component duplication feature

Author: Jeffrey Sul

.gitignore

@@ -17,7 +17,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /coverage
-package-lock.json
+# package-lock.json
 vetur.config.js
 
 # Editor directories and files

src/components/ComponentDisplay.vue

@@ -137,6 +137,19 @@ export default {
         }
       }
     });
+    // listener for the copy
+    window.addEventListener('copy', () => {
+      // if there is an activeComponent, copy info to state using dispatch
+      if (this.activeComponent) {
+        console.log('copied!', this.activeComponent);
+        this.$store.dispatch("copyActiveComponent");
+      }
+    });
+
+    window.addEventListener('paste', () => {
+      this.$store.dispatch("pasteActiveComponent");
+      console.log('pasted');
+    })
   },
 
   computed: {
@@ -391,7 +404,13 @@ export default {
       if (event.target.className === "component-display grid-bg") {
         if (!(this.activeComponent === "")) this.setActiveComponent("");
       }
+    },
+    
+    // event handler for copying (ctrl+C)
+    copyActiveComponent() {
+      console.log('copied');
     }
+
   },
   watch: {
     activeComponent: function() {

src/components/dashboard_items/Dashboard.vue

@@ -20,7 +20,7 @@ Description:
       >
         <q-tab name="detail" id="label-text"><i class="fas fa-code"></i></q-tab>
         <q-tab name="tree" id="label-text"><i class="fas fa-code-branch fa-flip-vertical" /></q-tab>
-        <q-tab name="store" id="label-text" ><i class="fas fa-store-alt"></i></q-tab>
+        <!-- <q-tab name="store" id="label-text" ><i class="fas fa-store-alt"></i></q-tab> -->
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white ">
         <q-tab-panel name="detail">
@@ -29,9 +29,9 @@ Description:
         <q-tab-panel name="tree" >
           <Tree />
         </q-tab-panel>
-        <q-tab-panel name="store">
+        <!-- <q-tab-panel name="store">
           <VuexStore />
-        </q-tab-panel>
+        </q-tab-panel> -->
       </q-tab-panels>
     </q-card>
      </div>
@@ -41,13 +41,13 @@ Description:
 <script>
 import { mapState, mapActions } from "vuex";
 import Tree from "./Tree";
-import VuexStore from "./DashboardVuexStore.vue";
+// import VuexStore from "./DashboardVuexStore.vue";
 import ComponentDetails from "./ComponentDetails";
 
 export default {
   components: {
     Tree,
-    VuexStore,
+    // VuexStore,
     ComponentDetails
   },
   computed: {

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -2,7 +2,7 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards">
-    <!-- <UploadImage v-if="activeComponent === ''" /> -->
+    <UploadImage v-if="activeComponent === ''" />
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -12,7 +12,7 @@ Functionality includes: if active component is selected, will switch view to edi
 import CreateComponent from './CreateComponent.vue'
 import EditDeleteComponents from './EditDeleteComponents.vue'
 import { mapState } from 'vuex'
-// import UploadImage from '../UploadImage.vue'
+import UploadImage from '../UploadImage.vue'
 
 export default {
   data () {
@@ -29,7 +29,7 @@ export default {
   components: {
     CreateComponent,
     EditDeleteComponents,
-    // UploadImage,
+    UploadImage,
   }
 }
 </script>

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -64,6 +64,7 @@ Description:
       active-color="secondary"
       indicator-color="secondary"
     >
+    <!-- Accordion for component settings -->
     <!-- HTML item that has Icon component -->
       <q-expansion-item
         group="accordion"

src/store/actions.js

@@ -76,6 +76,23 @@ const actions = {
     commit(types.UPDATE_COMPONENT_SIZE, payload)
   },
 
+  // copy the active component
+  [types.copyActiveComponent]: ({ commit }, payload) => {
+    commit(types.COPY_ACTIVE_COMPONENT, payload)
+  },
+  // paste the active component copy
+  [types.pasteActiveComponent]: ({ commit, state }) => {
+    commit(types.PASTE_ACTIVE_COMPONENT);
+    // if no other parents, update as parent of active route in componentMap
+    if (!Object.keys(state.pastedComponent.parent).length) {
+      commit(types.ADD_COMPONENT_TO_ACTIVE_ROUTE_CHILDREN, state.pastedComponent.componentName)
+      // if parents, update parent of pastedComponent to include as a child
+    } else {
+      commit(types.ADD_COPIED_PARENT, state.pastedComponent)
+    };
+    // add pastedComponent as a child of route in activeRoutes
+    commit(types.ADD_COMPONENT_TO_ACTIVE_ROUTE_IN_ROUTE_MAP, state.pastedComponent);
+  },
   // End of componentDisplay Section//////////////////////////////////
 
   // Actions that affect Routing //////////////////////////////////////

src/store/mutations.js

@@ -12,6 +12,7 @@ import {
   breadthFirstSearch,
   breadthFirstSearchParent
 } from '../utils/search.util'
+import _ from 'lodash'
 
 const cloneDeep = require('lodash.clonedeep')
 
@@ -220,17 +221,70 @@ const mutations = {
   },
 
   [types.DELETE_USER_STATE]: (state, payload) => {
-    // delete state.userState[payload];
-    // console.log('userState: ', state.userState);
+    // need to loop through components and take out matching state
+    for (const component in state.componentMap) {
+      // first don't go through if component is App or Homeview
+      if (component === 'App' || component === 'HomeView') continue;
+      // splice out if there is a match
+      const newState = state.componentMap[component].state;
+      const index = newState.indexOf(payload);
+      if (index > -1) {
+        newState.splice(index, 1);
+        state.componentMap[component].state = newState;
+      } else {
+        continue;
+      }
+    }
+    // remove from userState
     let index = state.userState.indexOf(payload);
     state.userState.splice(index, 1);
   },
 
   [types.DELETE_USER_ACTIONS]: (state, payload) => {
-    // payload should be a string of the name of the action to remove
+    for (const component in state.componentMap) {
+      // first don't go through if component is App or Homeview
+      if (component === 'App' || component === 'HomeView') continue;
+      // splice out if there is a match
+      const newActions = state.componentMap[component].actions;
+      const index = newActions.indexOf(payload);
+      if (index > -1) {
+        newActions.splice(index, 1);
+        state.componentMap[component].actions = newActions;
+      } else {
+        continue;
+      }
+    }
     let index = state.userActions.indexOf(payload);
     state.userActions.splice(index, 1);
   },
+  // copy and paste functionality
+  [types.COPY_ACTIVE_COMPONENT]: (state, payload) => {
+    // copy activeComponentObj and place in the state but without children
+    const copy = { ...state.activeComponentObj };
+    copy.componentName;
+    copy.children = [];
+    copy.isActive = false;
+    state.copiedComponent = copy;
+    // reset the number of copies created
+    state.copyNumber = 0;
+  },
+
+  [types.PASTE_ACTIVE_COMPONENT]: (state) => {
+    // check if copied exists 
+    if (state.copiedComponent) {
+      const { copiedComponent } = state;
+      // offset duplicate's coordinates
+      copiedComponent.x += 20;
+      copiedComponent.y += 20;
+      const pastedComponent = { ...copiedComponent }
+      state.componentMap[pastedComponent.componentName += ` (${state.copyNumber})`] = pastedComponent;
+      
+      // increment copyNumber
+      state.copyNumber += 1;
+      // track for pastedComponent
+      state.pastedComponent = pastedComponent;
+    }
+  },
 
   // *** EDIT FUNCTIONALITY *** //////////////////////////////////////////////
 
@@ -447,7 +501,7 @@ const mutations = {
   },
 
   [types.ADD_PARENT]: (state, payload) => {
-    state.componentMap[payload.componentName].parent[state.parentSelected] = state.componentMap[state.parentSelected]
+    state.componentMap[payload.componentName].parent[state.parentSelected] = state.componentMap[state.parentSelected];
     state.componentMap[state.parentSelected].children.push(
       payload.componentName
     )
@@ -456,6 +510,14 @@ const mutations = {
     )
   },
 
+  [types.ADD_COPIED_PARENT]: (state, payload) => {
+    const parentSelected = Object.values(payload.parent)[0].componentName;
+    // push into parent's children array
+    state.componentMap[parentSelected].children.push(payload.componentName)
+    // push into parent's htmlList array
+    state.componentMap[parentSelected].htmlList.push(payload.componentName)
+  },
+
   [types.DELETE_ACTIVE_COMPONENT]: state => {
     const { componentMap, activeComponent, activeRoute } = state
 

src/store/state/index.js

@@ -50,7 +50,11 @@ const newState = {
   activeTab: 0,
   componentChildrenMultiselectValue: [],
   modalOpen: false,
-  parentSelected: false
+  parentSelected: false,
+  // for storing copied component
+  copiedComponent: {},
+  copyNumber: 0,
+  pastedComponent: {}
 }
 
 // closured method to ensure we only ever write the default state ONCE

src/store/types.js

@@ -5,6 +5,7 @@ export const ADD_COMPONENT_TO_ACTIVE_ROUTE_CHILDREN = 'ADD_COMPONENT_TO_ACTIVE_R
 export const ADD_COMPONENT_TO_ACTIVE_ROUTE_IN_ROUTE_MAP = 'ADD_COMPONENT_TO_ACTIVE_ROUTE_IN_ROUTE_MAP'
 export const ADD_COMPONENT_TO_COMPONENT_CHILDREN = 'ADD_COMPONENT_TO_COMPONENT_CHILDREN'
 export const ADD_COMPONENT_TO_COMPONENT_MAP = 'ADD_COMPONENT_TO_COMPONENT_MAP'
+export const ADD_COPIED_PARENT = 'ADD_COPIED_PARENT'
 export const ADD_NESTED_HTML = 'ADD_NESTED_HTML'
 export const ADD_NESTED_NO_ACTIVE = 'ADD_NESTED_NO_ACTIVE'
 export const ADD_PARENT = 'ADD_PARENT'
@@ -19,6 +20,7 @@ export const ADD_TO_COMPONENT_HTML_LIST = 'ADD_TO_COMPONENT_HTML_LIST'
 export const ADD_TO_SELECTED_ELEMENT_LIST = 'ADD_TO_SELECTED_ELEMENT_LIST'
 export const CHANGE_ACTIVE_TAB = 'CHANGE_ACTIVE_TAB'
 export const CLEAR_IMAGE = 'CLEAR_IMAGE'
+export const COPY_ACTIVE_COMPONENT = 'COPY_ACTIVE_COMPONENT'
 export const CREATE_ACTION = 'CREATE_ACTION'
 export const CREATE_PROP = 'CREATE_PROP'
 export const CREATE_STATE = 'CREATE_STATE'
@@ -36,6 +38,7 @@ export const EMPTY_STATE = 'EMPTY_STATE'
 export const IMPORT_IMAGE = 'IMPORT_IMAGE'
 export const INCREMENT_PROJECT_ID = 'INCREMENT_PROJECT_ID'
 export const PARENT_SELECTED = 'PARENT_SELECTED'
+export const PASTE_ACTIVE_COMPONENT = 'PASTE_ACTIVE_COMPONENT'
 export const SET_ACTIVE_COMPONENT = 'SET_ACTIVE_COMPONENT'
 export const SET_ACTIVE_HTML_ELEMENT = 'SET_ACTIVE_HTML_ELEMENT'
 export const SET_ACTIVE_LAYER = 'SET_ACTIVE_LAYER'
@@ -75,6 +78,7 @@ export const addToComponentElementList = 'addToComponentElementList'
 export const addToSelectedElementList = 'addToSelectedElementList'
 export const changeActiveTab = 'changeActiveTab'
 export const clearImage = 'clearImage'
+export const copyActiveComponent = 'copyActiveComponent'
 export const createAction = 'createAction'
 export const createProp = 'createProp'
 export const createState = 'createState'
@@ -93,6 +97,7 @@ export const importImage = 'importImage'
 export const incrementProjectId = 'incrementProjectId'
 export const openProject = 'openProject'
 export const parentSelected = 'parentSelected'
+export const pasteActiveComponent = 'pasteActiveComponent'
 export const registerComponent = 'registerComponent'
 export const setActiveComponent = 'setActiveComponent'
 export const setActiveHTML = 'setActiveHTML'