Comment out entire component code in SlackLoginWindow.vue, clean commented-out code in Canvas.vue, remove large blocks of commented-out code in actions.ts, clean up comments in types.ts, remove StyleClassMap type, delete extractor.js, npm uninstall vue-sfc-parser.

Author: Jaime de Venecia

extractor.js

@@ -66,7 +66,6 @@
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "4.0.13",
-    "vue-sfc-parser": "^0.1.2",
     "vue3-draggable-resizable": "^1.6.4",
     "vue3-tree": "^0.11.0",
     "vued3tree": "^5.1.0",

package-lock.json

@@ -5,7 +5,7 @@
 
   FUNCTIONALITY:
   - Displays previous 'Canvas' grid functionality
-  - Deprecated by OverVue v.10.0 but left as option for users who wish to use it
+  - Soft-deprecated by OverVue v.10.0 but left as option for users who wish to use it
 -->
 
 <template>
@@ -650,18 +650,13 @@ const gridHeight = computed(() => {
 //methods
 const setActiveComponent: typeof store.setActiveComponent = (payload) =>
   store.setActiveComponent(payload);
-// const updateComponentChildrenMultiselectValue: typeof store.updateComponentChildrenMultiselectValue = (payload) =>
-//   store.updateComponentChildrenMultiselectValue(payload);
 const updateActiveComponentChildrenValue: typeof store.updateActiveComponentChildrenValue =
   (payload) => store.updateActiveComponentChildrenValue(payload);
 const updateComponentPosition: typeof store.updateComponentPosition = (
   payload
 ) => store.updateComponentPosition(payload);
-// const updateStartingPosition: typeof store.updateStartingPosition = (payload) =>
-// (payload);
 const updateComponentLayer: typeof store.updateComponentLayer = (payload) =>
   store.updateComponentLayer(payload);
-// const updateStartingSize: typeof store.updateStartingSize = (payload) => store.updateStartingSize(payload);
 const updateComponentSize: typeof store.updateComponentSize = (payload) =>
   store.updateComponentSize(payload);
 const addActiveComponentNote: typeof store.addActiveComponentNote = (payload) =>
@@ -1015,23 +1010,6 @@ li:hover {
   background-color: rgba(223, 218, 218, 0.613);
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
   background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-  //   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
-  //     -webkit-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
-  //     -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
-  //     -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  //   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
-  //     -moz-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
-  //     -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
-  //     -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  //   background-image: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
-  //     linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
-  //     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
-  //     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
-  //   -pie-background: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
-  //     linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
-  //     linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px / 20px,
-  //     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px / 20px,
-  //     $secondary;
   behavior: url(/pie/PIE.htc);
 }
 
@@ -1080,9 +1058,6 @@ li:hover {
 }
 
 .cssContainerText {
-  // display: flex;
-  // justify-content: center;
-  // align-content: center;
   position: absolute;
   text-align: center;
   font-size: 4em;

package.json

@@ -1,6 +1,9 @@
-<template>
+<!--
+  NOTE: This component was formerly rendered in MyLayout.vue prior to OverVue v.10.0, but this feature has been deprecated for the time being.
+-->
+
+<!-- <template>
   <q-btn class="menu-btn" color="purple" no-caps @click="openLogin">
-    <!-- Slack logo -->
     <svg
       xmlns="http://www.w3.org/2000/svg"
       style="height: 20px; width: 20px; margin-right: 12px"
@@ -183,4 +186,4 @@ const openLogin = () => {
   width: 80%;
   margin: 10px 0px;
 }
-</style>
+</style> -->

src/components/Canvas.vue

@@ -704,16 +704,9 @@ const actions: Store<"main", State, {}, Actions> = {
 
       this.addComponentToActiveRouteInRouteMap(payload);
 
-      // const value = this.componentChildrenMultiselectValue.map(
-      //   (component) => this.componentMap[component]
-      // );
-
       if (this.parentSelected.length) {
         this.addParent(payload);
       }
-
-      // this.updateComponentChildrenValue({ componentName, value });
-      // this.updateComponentChildrenMultiselectValue([]);
       this.updateComponentNameInputValue("");
       this.setSelectedElementList([]);
       this.setActiveComponent(componentName);
@@ -844,9 +837,6 @@ const actions: Store<"main", State, {}, Actions> = {
       };
     } else {
       this.activeComponent = payload;
-      // this.activeComponentObj = this.routes[this.activeRoute].filter(
-      //   (comp) => comp.componentName === this.activeComponent
-      // )[0];
       this.activeComponentObj = this.componentMap[
         this.activeComponent
       ] as Component;
@@ -862,21 +852,6 @@ const actions: Store<"main", State, {}, Actions> = {
     this.componentMap = payload;
   },
 
-  // executed when a new component is made
-  // also invoked when a child is added to the parent from the sidebar (EditSidebar or HomeSidebar?)
-  // also invoked when clicked on invoking the modal-view
-  // event: @ VueMultiselect
-  // updateComponentChildrenMultiselectValue(payload) {
-  //   this.componentChildrenMultiselectValue = payload;
-  // },
-
-  // executed when a new component is made
-  // additionally adds children to the component
-  // updateComponentChildrenValue(payload) {
-  //   const { componentName, value } = payload;
-  //   this.componentMap[componentName].children = value;
-  // },
-
   updateComponentNameInputValue(payload) {
     this.componentNameInputValue = payload;
   },
@@ -986,8 +961,6 @@ const actions: Store<"main", State, {}, Actions> = {
     // delete block
     if (temp.filter((el) => payload === el).length > 0) {
       //commented stuff below does not seem necessary for the functionality of this if block.
-      //children will be current children EXCLUDING payload
-      // const child = temp.filter((el) => payload.includes(el));
       let childCount = 0;
       const components = Object.values(this.componentMap);
       for (const comp of components) {
@@ -1001,12 +974,6 @@ const actions: Store<"main", State, {}, Actions> = {
           ...temp.filter((el) => payload === el)
         );
       }
-      // const newHTMLList = state.componentMap[
-      //   state.activeComponent
-      // ].htmlList.filter((el) => el !== child[0]);
-      // state.componentMap[state.activeComponent].htmlList = newHTMLList;
-      // const newMap = { ...state.componentMap };
-      // state.componentMap = { ...newMap };
 
       //delete the instances of the Child Component in the activeComponent's htmlList
       const componentName = this.activeComponent;
@@ -1028,12 +995,6 @@ const actions: Store<"main", State, {}, Actions> = {
       const active = this.componentMap[payload] as Component;
       //updates the htmlList with the child components deleted
       this.componentMap[componentName].htmlList = htmlList;
-
-      //delete the parent because the payload is no longer a child to the active component
-
-      // delete active.parent[this.activeComponent];
-
-      // add block
     } else {
       const child = temp;
       child.push(payload);
@@ -1257,14 +1218,6 @@ const actions: Store<"main", State, {}, Actions> = {
     this.setActiveComponent("");
   },
 
-  // updateStartingPosition (payload) {
-
-  // },
-
-  // updateStartingSize (payload) {
-
-  // },
-
   // *** END PROJECTS *** //////////////////////////////////////////////
 
   // IMAGES