Functional ComponentDisplay with VueDraggableResizable; bug in handles & resize

Author: Shanon Lee

package-lock.json

@@ -30,6 +30,7 @@
     "node-gyp": "^8.4.1",
     "quasar": "^2.0.0",
     "quasar-dotenv": "^1.0.5",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-multiselect": "^3.0.0-alpha.1",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vued3tree": "^5.1.0",

package.json

@@ -26,7 +26,6 @@ module.exports = configure(function (ctx) {
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
     boot: [
-      // "globals"
     ],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css

quasar.conf.js

@@ -13,40 +13,8 @@ Description:
   >
     <!-- This is the actual component box -->
   <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
-
-<!-- // ***************** Without draggable resizable, this works *********** -->
-  <!-- <div 
-  class="component-box"
-    v-for="componentData in activeRouteArray" 
-      ref="boxes"
-      :key="componentData.componentName"
-      :id="componentData.componentName"
-      :x="componentData.x"
-      :y="componentData.y"
-      :z="componentData.z"
-      :w="componentData.w"
-      :h="componentData.h"
-      :parent="true"
-      :preventDeactivation="true"
-      @activated="onActivated(componentData)"
-      @click="onActivated(componentData)"
-      @deactivated="onDeactivated(componentData)"
-      @dragstop="finishedDrag"
-      @resizestop="finishedResize"
-      :onDragStart="recordInitialPosition"
-      :onResizeStart="recordInitialSize"
-  >
-    {{ componentData.componentName }}
-    {{ componentData.w }}
-    {{ componentData.x }}
-    {{ componentData.y }}
-    {{ componentData.z }}
-    {{ componentData.h }}
-  </div> -->
-
-<!-- ************************** Old vue draggable resizable *************** -->
-    <!-- <vue-draggable-resizable
-      class="component-box"
+    <vue-draggable-resizable
+      class-name="component-box"
       v-for="componentData in activeRouteArray"
       ref="boxes"
       :key="componentData.componentName"
@@ -101,15 +69,7 @@ Description:
           </q-item>
         </q-list>
       </q-menu>
-    </vue-draggable-resizable> -->
-
-
-
-<!-- ************************ Vue3 draggable resizable ******************* -->
-
-
-
-<!-- ********************* This part works, don't touch it *************** -->
+    </vue-draggable-resizable>
     <div>
       <q-dialog v-model="modalOpen">
         <q-select
@@ -130,20 +90,16 @@ Description:
 </template>
 
 <script>
-import { defineComponent } from "vue"
 import { mapState, mapActions } from "vuex";
-// import Vue3DraggableResizable from 'vue3-draggable-resizable';
+import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
+import 'vue-draggable-resizable/src/components/vue-draggable-resizable.css'
 
-// import { DraggableContainer } from 'vue3-draggable-resizable'
-// import VueDraggableResizable from "vue-draggable-resizable";
-// import "vue-draggable-resizable/dist/VueDraggableResizable.css";
 const cloneDeep = require('lodash.clonedeep')
 
-
 export default {
   name: "ComponentDisplay",
   components: {
-    // Vue3DraggableResizable
+    VueDraggableResizable
   },
   data() {
     // console.log("Current Component Map is: ", this.componentMap);
@@ -204,6 +160,7 @@ export default {
     activeComponentData() {
       // Must deep clone this so we are not directly mutating state
       return cloneDeep(this.activeComponentObj);
+      // return this.activeComponentObj;
     },
     // childList () {
     //   return this.componentMap[componentData.componentName].children
@@ -262,10 +219,10 @@ export default {
         this.$refs.boxes.forEach(element => {
           element.enabled = false;
           
-          // element.$emit("deactivated");
-          // element.$emit("update:active", false);
-          this.$emit("deactivated");
-          this.$emit("update:active", false);
+          element.$emit("deactivated");
+          element.$emit("update:active", false);
+          // this.$emit("deactivated");
+          // this.$emit("update:active", false);
         });
       }
     } else {
@@ -278,10 +235,10 @@ export default {
           element.enabled === false
         ) {
           element.enabled = true;
-          // element.$emit("activated");
-          // element.$emit("update:active", true);
-          this.$emit("activated");
-          this.$emit("update:active", true);
+          element.$emit("activated");
+          element.$emit("update:active", true);
+          // this.$emit("activated");
+          // this.$emit("update:active", true);
         }
       });
     }
@@ -385,12 +342,10 @@ export default {
           if (element.id !== componentData.componentName) {
             console.log('Emit')
             element.enabled = false;
-            // element.$emit("deactivated");
-
-            // element.$emit("update:active", false);
-            this.$emit("deactivated");
-
-            this.$emit("update:active", false);
+            element.$emit("deactivated");
+            element.$emit("update:active", false);
+            // this.$emit("deactivated");
+            // this.$emit("update:active", false);
           }
         });
       }