merged Chris' updates with tutorial and right sidebar updates

Author: Emma Genesen

extractor.js

@@ -80,7 +80,6 @@ const getVueFiles = (package = "iview") => {
   return vueFilePathList;
 };
 
-console.log(getVueFiles());
 
 //work with documentation for parse vue to work out how to use this
 function parseVueFile(path) {
@@ -89,7 +88,7 @@ function parseVueFile(path) {
   return parsedFile
 }
 
-console.log(parseVueFile(getVueFiles()[0]))
+
 
 function generateImportObjs(pathList) { // or something
   // iterate through paths

src/components/Canvas.vue

@@ -16,7 +16,6 @@
     <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
     <p class="cssContainerText"> {{this.activeRoute}} Preview </p>
     <!--each component box in canvas will have these properties-->
-    <!-- :onDragStart="recordInitialPosition" :onResizeStart="recordInitialSize" :preventDeactivation="true" graveyard attribute -->
     <vue-draggable-resizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
@@ -347,7 +346,6 @@
 import { useExportComponent } from "./composables/useExportComponent.js";
 import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
-// import Vue3DraggableResizable from 'vue3-draggable-resizable'
 import VueMultiselect from "vue-multiselect";
 import "vue-draggable-resizable/src/components/vue-draggable-resizable.css";
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
@@ -360,7 +358,6 @@ const cloneDeep = require("lodash.clonedeep");
 export default {
   name: "Canvas",
   components: {
-    // Vue3DraggableResizable,
     VueDraggableResizable,
     VueMultiselect,
     ColorPicker,
@@ -374,8 +371,6 @@ export default {
       noteModal: false,
       colorModal: false,
       mockImg: false,
-      // initialPosition: { x: 0, y: 0 },
-      // initialSize: { w: 0, h: 0 },
       htmlElements: [],
       childrenSelected: [],
     };
@@ -523,21 +518,7 @@ export default {
     useExportComponentBound() {
       useExportComponent.bind(this)();
     },
-    // !records component's initial position in case of drag - CHRIS: probably don't need this function?
-    // recordInitialPosition: function (e) {
-    //   if (this.activeComponent !== e.target.id) {
-    //     if (e.target.parentElement?.classList.contains('draggable')) {
-    //       // this.setActiveComponent(e.target.parentElement.id)
-    //     } 
-    //     else if (typeof `${e.target.id}` !== 'number') {
-    //       // this.setActiveComponent(e.target.id);
-    //     }
-    //   }
-    //   this.initialPosition.x = this.activeComponentData.x;
-    //   this.initialPosition.y = this.activeComponentData.y;
-    // },
     isElementPlus(htmlList) {
-      console.log(htmlList);
       return htmlList.find(({ text }) => text[0] === 'e');
     },
     //color change function
@@ -551,14 +532,6 @@ export default {
       this.updateColor(payload)
       this.refresh();
     },
-
-    // records component's initial size/position in case of resize (also graveyard - dont need initial size?)
-    // recordInitialSize: function (e) {
-    //   this.initialSize.h = this.activeComponentData.h;
-    //   this.initialSize.w = this.activeComponentData.w;
-    //   this.initialPosition.x = this.activeComponentData.x;
-    //   this.initialPosition.y = this.activeComponentData.y;
-    // },
     // sets component's ending size/position
     finishedResize: function (x, y, w, h) {
       let payload = {
@@ -570,19 +543,12 @@ export default {
         routeArray: this.routes[this.activeRoute],
         activeComponentData: this.activeComponentData,
       };
-      // if (
-      //   payload.x !== this.initialPosition.x ||
-      //   payload.y !== this.initialPosition.y ||
-      //   payload.w !== this.initialSize.w ||
-      //   payload.h !== this.initialSize.h
-      // ) {
       this.updateComponentSize(payload);
       this.updateComponentGridPosition(payload);
-      // }
       this.refresh();
     },
 
-    //refresh function - super ghetto refresh function
+    // refresh function
     refresh() {
       const payload = {
         activeComponent: this.activeComponent,
@@ -595,7 +561,7 @@ export default {
       payload.z--;
       this.updateComponentLayer(payload);
     },
-    //!drag and drop function
+    // drag and drop function
     finishedDrag: function (x, y) {
       let payload = {
         x: x,
@@ -647,12 +613,11 @@ export default {
 
     // renders modal with Update Children and Layer in it
     handleAddNotes() {
-      console.log(this.activeComponentData);
       if (this.wasDragged === false && this.activeComponent !== '') {
         this.openNoteModal();
       }
     },
-//color editor - opens the pop up
+    //color editor - opens the pop up
     handleEditColor() {
       if (this.wasDragged === false && this.activeComponent !== '') {
         this.openColorModal();
@@ -894,7 +859,6 @@ behavior: url(/pie/PIE.htc);
   height: 720px;
   background-color: rgba(223, 218, 218, 0.886);
   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),
@@ -973,15 +937,13 @@ behavior: url(/pie/PIE.htc);
 .component-box {
   color: $menutext;
   border: 1.2px dashed $darktext;
-  // background-color: rgba($darktext, .42);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
   position: absolute;
 }
 
 .active {
-  // background-color: rgba($secondary, .42);
   border: 3px solid $primary;
 }
 

src/components/composables/useCreateComponent.js

@@ -28,8 +28,6 @@ export function useCreateComponent(importObj) {
       return false;
     }
     // boilerplate properties for each component upon creation
-    console.log(importObj.parent);
-    console.log({ y: importObj?.parent?.y })
     const component = {
       x: importObj?.parent?.x ?? 0,
       y: importObj?.parent?.y ?? 0,
@@ -68,9 +66,4 @@ export function useCreateComponent(importObj) {
   }
   createComponent(importObj)
 
-  // console logging all components from Element Plus to determine shape of data and investigate structure of components
-  // console.log(ElementPlus)
-    // components all within giant object
 }
-
-//

src/components/left-sidebar/ComponentTab/ImportLibraryButton.vue

@@ -33,7 +33,6 @@
       }
       this.changeLibComponentDisplay(payload);
       this.changeLib(payload);
-      // console.log(this.$store.state.importLibraries.includes('element'));
     },
 
 

src/components/left-sidebar/ComponentTab/ParentMultiselect.vue

@@ -44,7 +44,6 @@ export default {
       // 'routes'
     ]),
     options() {
-      console.log(this.routes);
       return this.routes[this.activeRoute].map(
         (component) => component.componentName
       );

src/components/nav-buttons/ExportMenu.vue

@@ -482,9 +482,7 @@ test('renders ${componentName}', () => {
     writeStyle(componentName) {
       let htmlArray = this.componentMap[componentName].htmlList;
       let styleString = "";
-      console.log(componentName);
       // Add grid css property to view component div
-      if (this.routes)
       // adds view component id grid style and adds child component css styling
       if (this.routes.hasOwnProperty(componentName)) {
         styleString += `#${componentName} {\n\tdisplay: grid; \n\tgrid-template-columns: repeat(${this.gridLayout[0]}, 1fr);\n\tgrid-template-rows: repeat(${this.gridLayout[1]}, 1fr);\n\tgrid-column-gap: 0px;\n\tgrid-row-gap: 0px;\n}\n`;

src/layouts/MyLayout.vue

@@ -279,7 +279,6 @@ export default {
 
     },
     syncOauthGitFlag(e) {
-      console.log(this.$store.state.exportOauthGithub);
 
        let checkboxValue;
        if (e.target.value === "off") {
@@ -288,7 +287,6 @@ export default {
          checkboxValue = "off";
        }
        this.$store.commit("EXPORT_OAUTH_GIT", checkboxValue);
-       console.log(this.$store.state.exportOauthGithub);
 
      },
     clickedUndo() {

src/store/mutations.js

@@ -1078,8 +1078,6 @@ const mutations = {
 
   // change grid density
   [types.CHANGE_GRID_DENSITY]: (state, payload) => {
-    // state.gridLayout = payload.direction === 'height' ? [state.gridLayout[0], payload.densityNum]:[payload.densityNum, state.gridLayout[1]];
-    // console.log(payload);
     if (payload.direction === 'height'){
       state.gridLayout[1] = payload.densityNum;
 
@@ -1100,7 +1098,6 @@ const mutations = {
         updatedComponent.y = (rowStart - 1) * state.containerW / state.gridLayout[0];
         updatedComponent.w = (colEnd - 1) * state.containerH / state.gridLayout[1] - updatedComponent.y;
         updatedComponent.h = (rowEnd - 1) * state.containerW / state.gridLayout[0] - updatedComponent.x;
-        // Math.round((rowEnd - 1) * state.containerW / state.gridLayout[0]) - updatedComponent.x
       }
     );
   },