Merge pull request #22 from keliphan/visualStretch

multiple stretch features added

Author: LOLDragoon

src/App.vue

@@ -93,7 +93,7 @@ let redoMixin = {
       if (undone !== undefined) {
         this.undoneAction.push(undone)
         if (undone.type === 'setActiveComponent') {
-          console.log('We did something useless!')
+          // console.log('We did something useless!')
           do {
             this.undoneAction.push(this.doneAction.pop())
           }
@@ -110,9 +110,8 @@ let redoMixin = {
         store: this.$store
       }
       this.$store.commit('EMPTY_STATE', payload)
-      console.log(this.$store)
       this.doneAction.forEach(action => {
-        console.log('In the loop', this.$store)
+        // console.log('In the loop', this.$store)
         // this.$store.commit(`${mutation.type}`, mutation.payload);
         this.$store.dispatch(action.type, cloneDeep(action.payload))
         this.doneAction.pop()

src/components/ComponentDisplay.vue

@@ -18,7 +18,6 @@
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
-      @dblclick.native="onDoubleClick(componentData)"
       @dragstop="finishedDrag"
       @resizestop="finishedResize"
       :onDragStart="recordInitialPosition"
@@ -177,7 +176,29 @@ export default {
       console.log('mockBg is working', this.imagePath[this.activeRoute])
       return this.imagePath[this.activeRoute]
         ? {
-          background: `url("${this.userImage}") center/contain no-repeat`
+          background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
+          // '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(white 2px, transparent 2px),
+          // -webkit-linear-gradient(0, white 2px, transparent 2px),
+          // -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(white 2px, transparent 2px),
+          // -moz-linear-gradient(0, white 2px, transparent 2px),
+          // -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(white 2px, transparent 2px),
+          // linear-gradient(90deg, white 2px, transparent 2px),
+          // 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(white 2px, transparent 2px) -2px -2px / 100px,
+          // linear-gradient(90deg, white 2px, transparent 2px) -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, #269`,
+          // 'background-image': `url(${this.userImage})`,
+          // behavior: 'url(/pie/PIE.htc)',
         }
         : {}
     }
@@ -346,12 +367,6 @@ export default {
       //   console.log("We just clicked without making a new active component")
       // }
     },
-    onDoubleClick (compData) {
-      if (!(componentData.componentName === this.activeComponent)) {
-        this.setActiveComponent(componentData.componentName)
-      }
-      this.activeComponentData.isActive = true
-    },
     handleAddChild () {
       // render modal with childrenmultiselect in it
       this.modalOpen = true
@@ -374,11 +389,6 @@ export default {
       if (e.target.innerText === '-' && payload.z > 0) payload.z--
       this.updateComponentLayer(payload)
     },
-    //       @dblclick.native="onDoubleClick(componentData)"
-    // onDoubleClick (compData) {
-    //   this.setActiveComponent(compData.componentName)
-    //   this.activeComponentData.isActive = true
-    // }
     handleClick (event) {
       if (event.target.className === 'component-display grid-bg') {
         if (!(this.activeComponent === '')) this.setActiveComponent('')
@@ -395,11 +405,9 @@ export default {
   top: -18px;
   left: 2px;
   color: black;
+  -webkit-text-stroke: 0.4px white;
   font-weight: 800;
-  /* background: rgba(0, 0, 0, 0.678); */
-  /* width: 1rem; */
   line-height: 1.2;
-  /* margin: 10px; */
   z-index: -1;
 }
 .component-children {

src/components/ExportProject.vue

@@ -143,14 +143,55 @@ export default {
         input: ['<input />', ''],
         navbar: ['<nav>', '</nav>']
       }
+
+      /* Function to loop through nested elements */
+      function writeNested (childrenArray, indent) {
+        if (!childrenArray.length) {
+          return ''
+        }
+        let indented = indent + '  '
+        let nestedString = ''
+
+        childrenArray.forEach(child => {
+          nestedString += indented
+          // console.log(child)
+          if (!child.text) {
+            nestedString += `<${child}/>\n`
+          } else {
+            if (child.children.length) {
+              nestedString += htmlElementMap[child.text][0]
+              nestedString += '\n'
+              nestedString += writeNested(child.children, indented)
+              nestedString += indented + htmlElementMap[child.text][1]
+              nestedString += '\n'
+            } else {
+              nestedString += htmlElementMap[child.text][0] + htmlElementMap[child.text][1] + '\n'
+            }
+          }
+        })
+        return nestedString
+      }
+
       // loop to iterate through compName arr
       let htmlArr = this.componentMap[compName].htmlList
-      let outputStr = ''
+      let outputStr = ``
       for (let el of htmlArr) {
-        outputStr += '\t\t'
-        outputStr += htmlElementMap[el.text][0]
-        outputStr += htmlElementMap[el.text][1]
-        outputStr += `\n`
+        // console.log(el)
+        if (!el.text) {
+          outputStr += `    <${el}/>\n`
+        } else {
+          outputStr += `    `
+          if (el.children.length) {
+            outputStr += htmlElementMap[el.text][0]
+            outputStr += '\n'
+            outputStr += writeNested(el.children, `    `)
+            outputStr += `    `
+            outputStr += htmlElementMap[el.text][1]
+            outputStr += `  \n`
+          } else {
+            outputStr += htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + '\n'
+          }
+        }
       }
       console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
@@ -199,15 +240,6 @@ export default {
       } else {
         // console.log(`else (if compName === 'App'`);
         str += `<div>\n`
-        children.forEach(name => {
-          str += `\t\t<${
-            // name.componentName
-            name
-          }>\n\t\t</${
-            // name.componentName
-            name
-          }>\n`
-        })
       }
       // writes the html tag boilerplate
       let templateTagStr = this.writeTemplateTag(compName)

src/components/Footer.vue

@@ -22,7 +22,7 @@
         <q-tab name="html" label="HTML Elements" id="label-text" />
       </q-tabs>
 
-      <q-tab-panels v-model="tab" animated class="bg-primary text-white full-footer">
+      <q-tab-panels v-model="tab" animated class="html-bg text-white" >
         <q-tab-panel name="code">
           <CodeSnippet />
         </q-tab-panel>
@@ -35,7 +35,7 @@
           <Tree />
         </q-tab-panel>
 
-        <q-tab-panel name="html">
+        <q-tab-panel name="html" :style="{height: `${height}vh`}">
           <HomeQueue />
         </q-tab-panel>
       </q-tab-panels>
@@ -172,14 +172,18 @@ i {
   background: black;
 }
 
-.full-footer {
-  // height: 100vh;
-  padding-bottom: 0px;
-}
+// .full-footer {
+//   // height: 100vh;
+
+// }
 
 #footer-cards {
   height: 100%;
   border-radius: 0px;
   background: #737578;
 }
+.html-bg {
+  // give html background color of grey
+  background-color: #202122;
+}
 </style>

src/components/HomeQueue.vue

@@ -14,7 +14,10 @@
       @end="drag = false"
     >
       <div :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'" @dblclick.self="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()">
-        <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
+        <!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
+        <i v-if='activeComponent === "" ' class="fas fa fa-angle-double-down fa-md" id="unavailable"></i>
+        <i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
+        <!-- <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i> -->
         {{ element[0] }}
         <i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
       </div>
@@ -137,7 +140,7 @@ export default {
 
 <style lang="stylus" scoped>
 .home-queue {
-  height: 100%;
+  padding-bottom: 40px;
 }
 li {
   list-style-type: none;
@@ -149,6 +152,7 @@ li {
 .list-group-item {
   display: inline-block;
   margin: 2px 1.5%;
+  min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
   border: 2px solid $secondary;
@@ -161,6 +165,7 @@ li {
 .list-group-item-selected {
   display: inline-block;
   margin: 2px 1.5%;
+  min-width: 175px;
   width: 30%;
   border-radius: 0.5cm;
   border: 2px solid white;
@@ -177,12 +182,17 @@ li {
 
 .fa-trash {
   position: relative;
-  left: 20px;
-
+  // left: 20px;
+  top: 2px;
+  right: 35px;
+  float: right;
 }
 .fa-angle-double-down {
   position: relative;
-  right: 20px;
+  // right: 20px;
+  top: 2px;
+  left: 35px;
+  float: left;
 }
 
 .fa-angle-double-down:hover {
@@ -199,6 +209,11 @@ li {
   color: #41B883;
 }
 
+#unavailable {
+  color: grey;
+  cursor: default
+}
+
 hr {
   border: 1px solid grey
 }

src/components/HomeSideDropDown.vue

@@ -2,18 +2,18 @@
   <div class="q-pa-md" style="max-width: 350px">
     <q-list padding bordered class="rounded-borders drawer-menu">
       <q-expansion-item dense dense-toggle expand-separator label="Components">
-        <q-card>
-          <q-card-section>
-            <div class="input-container">
-              <ComponentList />
-            </div>
-          </q-card-section>
-        </q-card>
+          <q-card>
+            <q-card-section>
+              <div class="input-container" style='height: 130px'>
+                <ComponentList />
+              </div>
+            </q-card-section>
+          </q-card>
       </q-expansion-item>
       <q-expansion-item dense dense-toggle expand-separator label="Routes">
         <q-card>
           <q-card-section>
-            <div class="input-container">
+            <div class="input-container" style='height: 150px'>
               <RouteDisplay />
               <br />
             </div>
@@ -48,13 +48,15 @@ export default {
 </script>
 
 <style lang="stylus">
+
 .input-add {
   margin: 0em 1em 0em 1em;
 }
 
 .input-container {
   margin-top: 1rem;
   background: $subsecondary;
+  overflow-y: auto;
 }
 
 .red {

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="home-sidebar">
     <multiselect
-      class='multiselect' 
-      v-model="value" 
-      :options='options' 
-      :searchable="true" 
+      class='multiselect'
+      v-model="value"
+      :options='options'
+      :searchable="true"
       :close-on-select="true"
       :max-height="90"
       :option-height="20"
       @input="handleSelect(value)"
+      @open="resetActiveComponent"
       placeholder="Select a component">
       <span slot='noResult'>No components found.</span>
       </multiselect>
@@ -55,7 +56,7 @@ export default {
     ...mapState(['routes', 'activeRoute', 'activeComponent']),
     activeRouteDisplay () {
       let component = this.routes[this.activeRoute]
-      console.log(component)
+      console.log('component', component)
       return component
     },
     activeComponentData () {
@@ -87,6 +88,11 @@ export default {
       this.setActiveComponent(componentName)
       this.value = ''
       this.activeComponentData.isActive = true
+    },
+    resetActiveComponent () {
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
+      }
     }
   }
 }

src/components/ParentMultiselect.vue

@@ -8,6 +8,7 @@
       :close-on-select="true"
       :options="options"
       @input="handleSelect"
+      @open="resetActiveComponent"
       :max-height="90"
       :option-height="20"
       :searchable="true"
@@ -44,14 +45,19 @@ export default {
   methods: {
     ...mapActions([
       // 'addParent',
-      'parentSelected'
+      'parentSelected', 'setActiveComponent'
     ]),
     handleSelect (value) {
       // Set Active Component to selected Parent
       // this.setActiveComponent(value)
       // this.addParent(value)
       // Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
       this.parentSelected(value)
+    },
+    resetActiveComponent () {
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
+      }
     }
   },
   watch: {