reverted to vuedraggabledisplayable

Author: Dean Ohashi

src/components/ComponentDisplay.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="component-display">
-    <!-- <VueDraggableResizable
+    <VueDraggableResizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
       :key="componentData.componentName"
@@ -17,35 +17,17 @@
       @dblclick.native="onDoubleClick(componentData)"
     >
       <h3>{{ componentData.componentName }}</h3>
-    </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>
+    </VueDraggableResizable>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
-// import VueDraggableResizable from 'vue-draggable-resizable'
-import VueDragResize from 'vue-drag-resize'
+import VueDraggableResizable from 'vue-draggable-resizable'
 
 export default {
   name: 'ComponentDisplay',
   components: {
-    // VueDraggableResizable
-    VueDragResize
+    VueDraggableResizable
   },
   data () {
     return {
@@ -78,25 +60,15 @@ 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 (rectangle) {
-      this.activeComponentData.y = rectangle.top
-      this.activeComponentData.x = rectangle.left
-      this.activeComponentData.w = rectangle.width
-      this.activeComponentData.h = rectangle.height
+    onResize: function (x, y, width, height) {
+      this.activeComponentData.x = x
+      this.activeComponentData.y = y
+      this.activeComponentData.w = width
+      this.activeComponentData.h = height
     },
-    // onDrag: function (x, y) {
-    //   this.activeComponentData.x = x
-    //   this.activeComponentData.y = y
-    // },
-    onDrag (rectangle) {
-      this.activeComponentData.y = rectangle.top
-      this.activeComponentData.x = rectangle.left
+    onDrag: function (x, y) {
+      this.activeComponentData.x = x
+      this.activeComponentData.y = y
     },
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)