Merge pull request open-source-labs#46 from pinnockf/master

Swapped out VueDragResize for VueDraggableResizable
Focus3D · Mar 12, 2019 · 8d97bda · 8d97bda
2 parents bba3819 + ebc2f53
commit 8d97bda
Show file tree

Hide file tree

Showing 37 changed files with 648 additions and 14,888 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
     '@vue/prettier'
   ],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
   parserOptions: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,8 +30,10 @@
     "electron": "^3.0.0",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
     "vue-cli-plugin-electron-builder": "^1.0.4",
     "vue-template-compiler": "^2.5.21"
   },
   "main": "background.js"
-}
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,55 +1,44 @@
 <template>
   <v-app dark>
     <div id="app">
-      <NavBar :show="$route.name" @click="drawer = !drawer"></NavBar>
-      <v-content>
-        <router-view />
+      <NavBar></NavBar>
+      <v-content class="content">
+        <router-view/>
       </v-content>
-      <v-navigation-drawer right v-model="drawer" app>
-        <Sidebar header="Create" />
-      </v-navigation-drawer>
     </div>
   </v-app>
 </template>
 
 <script>
-import Sidebar from './components/SideBar';
 import NavBar from '@/components/NavBar.vue';
 export default {
-  data() {
-    return {
-      drawer: false
-    };
-  },
   components: {
-    Sidebar,
     NavBar
   }
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  display: grid;
-  grid-template-columns: 8fr 2fr;
-  grid-template-areas: 'componentDisplay sidebar';
+  height: 100%;
+  .content {
+    height: 100%;
+  }
 }
 #nav {
   margin-left: 0;
   padding: 30px;
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+    .router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+.content {
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/components/AppDisplay.vue b/src/components/AppDisplay.vue
diff --git a/src/components/ComponentCodeDisplay.vue b/src/components/ComponentCodeDisplay.vue
@@ -1,34 +1,34 @@
 <template>
   <div>
-    <span
-      class="white--text"
-      v-for="htmlCode in componentMap[compName].htmlCode"
-      :key="Date.now()"
+    <div
+      id="component-code-display"
+      v-for="(htmlElementTag, idx) in renderHTMLCodeList"
+      :key="idx + Date.now()"
     >
-      {{ htmlCode }}
-      <br />
-    </span>
+      <p class="white--text">{{ htmlElementMap[htmlElementTag] }}</p>
+      <br>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 export default {
   name: 'ComponentCodeDisplay',
-  props: {
-    compName: {
-      type: String,
-      required: true
-    }
-  },
+
   computed: {
-    ...mapState(['componentMap'])
+    ...mapState(['componentMap', 'clickedComponent', 'htmlElementMap']),
+    renderHTMLCodeList: {
+      get() {
+        return this.componentMap[this.clickedComponent].htmlList;
+      }
+    }
   }
 };
 </script>
 
-<style>
-h1 {
-  color: white;
+<style scoped>
+#component-code-display {
+  padding-left: 10px;
 }
 </style>
diff --git a/src/components/ComponentDisplay.vue b/src/components/ComponentDisplay.vue
@@ -1,45 +1,39 @@
 <template>
-  <div class="componentDisplay">
-    <LoadingBar :duration="2000" />
-    <VueDragResize
-      class="component"
-      :isActive="true"
-      :w="200"
-      :h="200"
-      v-on:resizing="resize"
-      v-on:dragging="resize"
-      v-for="(component, index) in Object.entries(componentMap)"
-      :key="index"
-      :style="{ backgroundColor: theBackgroundColor }"
-      @clicked="handleClick(component[0])"
-    >
-      <h3>{{ component[0] }}</h3>
-      <p v-for="(element, index) in component[1].htmlElements" :key="index">
-        {{ element.text }}
-      </p>
-      <p v-for="(element, index) in component[1].children" :key="index">
-        {{ element }}
-      </p>
-
-      <!-- <p>{{ width }} х {{ height }}</p> -->
-    </VueDragResize>
-    <modals-container></modals-container>
-    <button @click="consoleCM" class="white--text">click</button>
-    <ComponentModal :modalWidth="800" :modalHeight="900" />
+  <div class="component-display">
+    <!-- <LoadingBar :duration="2000"/> -->
+    <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
+      <VueDraggableResizable
+        class-name="component-box"
+        v-for="([componentName, componentData]) in Object.entries(computedComponentMap)"
+        :key="componentName"
+        :w="componentData.w"
+        :h="componentData.h"
+        @activated="handleClick(componentName)"
+        @dragging="onDrag"
+        @resizing="onResize"
+        @dragstop="onDragStop"
+        :parent="true"
+      >
+        <h3>{{ componentName }}</h3>
+        <br>
+        X: {{ componentData.x }} / Y: {{ componentData.y }} - Width: {{ componentData.width }} / Height: {{ componentData.height }}
+      </VueDraggableResizable>
+      <modals-container></modals-container>
+      <ComponentModal :modalWidth="800" :modalHeight="900"/>
+    </div>
   </div>
 </template>
-
 <script>
 import { mapState } from 'vuex';
-import VueDragResize from 'vue-drag-resize';
 import LoadingBar from './LoadingBar.vue';
 import ComponentModal from './ComponentModal.vue';
-// import SideBar from './SideBar.vue';
+import { setComponentMap } from '../store/types';
+import VueDraggableResizable from 'vue-draggable-resizable';
 
 export default {
   name: 'ComponentDisplay',
   components: {
-    VueDragResize,
+    VueDraggableResizable,
     LoadingBar,
     ComponentModal
   },
@@ -48,25 +42,41 @@ export default {
       //might make this an array of objects to correspond to each individual component
       width: 0,
       height: 0,
-      top: 0,
-      left: 0,
+      x: 0,
+      y: 0,
       lastTimeClicked: Date.now(),
       dialog: false,
       showModal: false
     };
   },
+
   computed: {
-    ...mapState(['componentMap']),
-    theBackgroundColor: function() {
-      return this.getRandomColor();
+    ...mapState(['componentMap', 'clickedComponent']),
+    computedComponentMap: {
+      get() {
+        return this.componentMap;
+      },
+      set(value) {
+        this.$store.dispatch(setComponentMap, value);
+      }
     }
   },
   methods: {
-    resize(newRect) {
-      this.width = newRect.width;
-      this.height = newRect.height;
-      this.top = newRect.top;
-      this.left = newRect.left;
+    onResize: function(x, y, width, height) {
+      this.componentMap[this.clickedComponent].x = x;
+      this.componentMap[this.clickedComponent].y = y;
+      this.componentMap[this.clickedComponent].width = width;
+      this.componentMap[this.clickedComponent].height = height;
+    },
+    onDrag: function(x, y) {
+      this.componentMap[this.clickedComponent].x = x;
+      this.componentMap[this.clickedComponent].y = y;
+    },
+    onDragStop: function(x, y) {
+      console.log('called');
+      console.log(x, y);
+      this.componentMap[this.clickedComponent].x = x;
+      this.componentMap[this.clickedComponent].y = y;
     },
     getRandomColor() {
       var letters = '0123456789ABCDEF';
@@ -77,34 +87,30 @@ export default {
       return color;
     },
     handleClick(componentName) {
+      console.log(componentName);
+      this.$store.dispatch('setClickedComponent', componentName);
       if (Date.now() - this.lastTimeClicked < 200)
         this.doubleClick(componentName);
       else {
         this.lastTimeClicked = Date.now();
       }
     },
-    doubleClick(componentName) {
-      console.log(componentName);
-      // this.showModal = true;
-      this.$modal.show('demo-login', { comp: componentName });
-    },
-    consoleCM() {
-      console.log(Object.keys(this.componentMap));
+    doubleClick() {
+      this.$modal.show('demo-login');
     }
   }
 };
 </script>
 
-<style>
-/* .component {
-  background-color: green;
-} */
-.componentDisplay {
-  grid-area: componentDisplay;
+<style scoped>
+.component-display {
+  grid-area: component-display;
 }
 
-h3,
-p {
-  color: white;
+.component-box {
+  border: 1px solid white;
+}
+.vdr.active:before {
+  outline-style: solid !important;
 }
 </style>
diff --git a/src/components/ComponentModal.vue b/src/components/ComponentModal.vue
@@ -1,14 +1,8 @@
 <template>
-  <modal
-    name="demo-login"
-    @before-open="beforeOpen"
-    transition="pop-out"
-    :width="900"
-    :height="950"
-  >
-    <EditSideBar :header="comp" :name="comp" />
+  <modal name="demo-login" transition="pop-out" :width="900" :height="950">
+    <EditSideBar/>
 
-    <ComponentCodeDisplay :compName="comp" />
+    <ComponentCodeDisplay/>
   </modal>
 </template>
 
@@ -18,22 +12,9 @@ import EditSideBar from './EditSideBar.vue';
 import ComponentCodeDisplay from './ComponentCodeDisplay.vue';
 export default {
   name: 'ComponentModal',
-  data() {
-    return {
-      comp: ''
-    };
-  },
   components: {
     EditSideBar,
     ComponentCodeDisplay
-  },
-  methods: {
-    consoleThis() {
-      console.log(this.comp);
-    },
-    beforeOpen(event) {
-      this.comp = event.params.comp;
-    }
   }
 };
 </script>