Merge pull request #3 from dnohashi/elec

Changed component from VueDraggableResizable to VueDragResize

Author: dnohashi

package-lock.json

@@ -16,16 +16,19 @@
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
     "quasar": "^1.0.0",
+    "vue-drag-resize": "^1.3.2",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-multiselect": "^2.1.6",
-    "vued3tree": "^3.7.1"
+    "vued3tree": "^3.7.1",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",
     "electron": "^5.0.6",
+    "electron-builder": "^20.44.4",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^2.2.4",
     "eslint": "^5.10.0",

package.json

@@ -147,7 +147,7 @@ module.exports = function (ctx) {
     },
 
     electron: {
-      // bundler: 'builder', // or 'packager'
+      bundler: 'builder', // or 'packager'
 
       extendWebpack (cfg) {
         // do something with Electron main process Webpack cfg

quasar.conf.js

@@ -1,6 +1,6 @@
 <template>
   <div class="component-display">
-    <VueDraggableResizable
+    <!-- <VueDraggableResizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
       :key="componentData.componentName"
@@ -9,24 +9,43 @@
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
+      class-name-resizable="my-resizable-class"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
       @dblclick.native="onDoubleClick(componentData)"
     >
       <h3>{{ componentData.componentName }}</h3>
-    </VueDraggableResizable>
+    </VueDraggableResizable> -->
+    <VueDragResize
+      :isActive="true"
+      v-for="componentData in activeRouteArray"
+      :key="componentData.componentName"
+      :x="componentData.x"
+      :y="componentData.y"
+      :w="componentData.w"
+      :h="componentData.h"
+      @resizing="onResize"
+      @dragging="onDrag"
+      @activated="onActivated(componentData)"
+      @deactivated="onDeactivated(componentData)"
+      @dblclick.native="onDoubleClick(componentData)"
+    >
+      <h3>{{ componentData.componentName }}</h3>
+    </VueDragResize>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
-import VueDraggableResizable from 'vue-draggable-resizable'
+// import VueDraggableResizable from 'vue-draggable-resizable'
+import VueDragResize from 'vue-drag-resize'
 
 export default {
   name: 'ComponentDisplay',
   components: {
-    VueDraggableResizable
+    // VueDraggableResizable
+    VueDragResize
   },
   data () {
     return {
@@ -59,15 +78,25 @@ export default {
   },
   methods: {
     ...mapActions(['setActiveComponent', 'updateOpenModal']),
-    onResize: function (x, y, width, height) {
-      this.activeComponentData.x = x
-      this.activeComponentData.y = y
-      this.activeComponentData.w = width
-      this.activeComponentData.h = height
+    // onResize: function (x, y, width, height) {
+    //   this.activeComponentData.x = x
+    //   this.activeComponentData.y = y
+    //   this.activeComponentData.w = width
+    //   this.activeComponentData.h = height
+    // },
+    onResize (rectangle) {
+      this.activeComponentData.y = rectangle.top
+      this.activeComponentData.x = rectangle.left
+      this.activeComponentData.w = rectangle.width
+      this.activeComponentData.h = rectangle.height
     },
-    onDrag: function (x, y) {
-      this.activeComponentData.x = x
-      this.activeComponentData.y = y
+    // onDrag: function (x, y) {
+    //   this.activeComponentData.x = x
+    //   this.activeComponentData.y = y
+    // },
+    onDrag (rectangle) {
+      this.activeComponentData.y = rectangle.top
+      this.activeComponentData.x = rectangle.left
     },
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)
@@ -97,4 +126,8 @@ export default {
   color: white;
   border: 1px solid salmon;
 }
+
+h3 {
+  text-align: center;
+}
 </style>

src/components/ComponentDisplay.vue

@@ -35,6 +35,7 @@
 
 <script>
 export default {
+  name: 'FooterTabView.vue',
   data () {
     return {
       tab: 'tree'

src/components/FooterTabView.vue

@@ -87,3 +87,17 @@
     </q-bar>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'TopMenuBar',
+  components: {
+    QMenu,
+    QItem,
+    QSeparator,
+    QItemSection,
+    QList,
+    QBtn
+  }
+}
+</script>