Merge pull request #40 from Gaurav-Verma07/main

feat: draggable recalibrate modal
ruxailab · Mar 14, 2024 · c5b40f5 · c5b40f5
2 parents 8bcb466 + 2f44301
commit c5b40f5
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 9 deletions.
diff --git a/src/components/calibration/ConfigModal.vue b/src/components/calibration/ConfigModal.vue
@@ -1,9 +1,18 @@
 <template>
     <v-dialog v-model="aDialog" max-width="400px" max-height="500px">
-        <v-card>
+        <v-card class="maincard" ref="draggableCard">
+            <div class="dragbox">
+                <v-icon class="dragicon" @mousedown="startDrag">{{ 'mdi-drag' }}</v-icon>
+                <div v-if="showInfo" class="draginfo">
+                    <v-icon class="lefticon">{{ 'mdi-menu-left' }}</v-icon>
+                    Use this icon to drag the modal
+                    <v-btn variant="outlined" @click="closeinfo">OK</v-btn>
+                </div>
+            </div>
             <v-card-title class="headline text-center mx-auto">recalibrate</v-card-title>
             <v-card-text>
-                {{ (mockPattern.length != 0) ? `using ${mockPattern.length} selected points` : `no points selected, using
+                {{ (mockPattern.length != 0) ? `using ${mockPattern.length} selected points` : `no points selected,
+                using
                 all ${pattern.length} points` }}
             </v-card-text>
             <Slider :value="threshold" :min="Number(0)" :step="5" :max="Number(1000)" label="Points Distance Threshold"
@@ -18,7 +27,7 @@
         </v-card>
     </v-dialog>
 </template>
-  
+
 
 <script>
 import Slider from '@/components/general/Slider.vue'
@@ -34,7 +43,16 @@ export default {
     },
     data() {
         return {
-            aDialog: false
+            aDialog: false,
+            dragging: false,
+            initialMouseX: 0,
+            initialMouseY: 0,
+            initialClientX: 200,
+            initialClientY: 100,
+            deltaX: 0,
+            deltaY: 0,
+            startTime: 0,
+            showInfo: true
         }
     },
     watch: {
@@ -43,7 +61,7 @@ export default {
         },
         aDialog(newAdialog) {
             this.$emit('close', newAdialog);
-        }
+        },
     },
     computed: {
         threshold() {
@@ -68,7 +86,80 @@ export default {
         },
         save() {
             this.$emit('save');
+        },
+        startDrag(event) {
+            this.showInfo = false
+            this.dragging = true;
+            this.startTime = new Date();
+            this.initialMouseX = event.clientX;
+            this.initialMouseY = event.clientY;
+            const rect = this.$refs.draggableCard.$el.getBoundingClientRect();
+            this.initialClientX = rect.left - 20;
+            this.initialClientY = rect.top - 240;
+
+            window.addEventListener("mousemove", this.handleDrag);
+            window.addEventListener("mouseup", this.endDrag);
+        },
+        handleDrag(event) {
+            if (this.dragging) {
+                this.deltaX = event.clientX - this.initialMouseX;
+                this.deltaY = event.clientY - this.initialMouseY;
+                this.$refs.draggableCard.$el.style.left = this.initialClientX + this.deltaX + "px";
+                this.$refs.draggableCard.$el.style.top = this.initialClientY + this.deltaY + "px";
+            }
+        },
+        endDrag() {
+            if (this.dragging) {
+                this.dragging = false;
+                if (this.deltaX == 0 && this.deltaY == 0) {
+                    this.handleClick()
+                }
+                this.deltaX = 0
+                this.deltaY = 0
+            }
+        },
+        handleClick(event) {
+            if (!this.dragging) {
+                this.$emit('click', event);
+            }
+        },
+        closeinfo() {
+            this.showInfo = false;
         }
-    }
+
+    },
+}
+</script>
+
+
+<style>
+.maincard {
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
+}
+
+.dragicon {
+    cursor: pointer;
+}
+
+.dragbox {
+    position: absolute !important;
+    top: 20px;
+    right: 18px;
+}
+
+.draginfo {
+    position: absolute;
+    right: -330px;
+    top: 0px;
+    background-color: rgba(0, 0, 0, 0.12);
+    border-radius: 5px;
+    padding: 2px 4px;
+    color: white;
+}
+
+.lefticon {
+    position: absolute;
+    left: -6px;
+    width: 0;
 }
-</script>
+</style>
diff --git a/src/views/PostCalibration.vue b/src/views/PostCalibration.vue
@@ -5,10 +5,8 @@
             <PointModal :x="Number(x)" :y="Number(y)" :precision="Number(precision)" :accuracy="Number(accuracy)"
                 :dialog="dialog" :pointNumber="pointNumber" @close="dialogCancel" @select="select" />
         </div>
-        <div>
             <ConfigModal :configDialog="configDialog" @close="configDialogCancel" @recalib="recalibrate"
                 @save="saveCalib" />
-        </div>
         <v-col>
             <DraggableFloatingButton @click="callConfigModal" :icon="'mdi-cog'" />
         </v-col>
@@ -263,4 +261,15 @@ export default {
   width: 100%; /* Set the width to whatever you need */
   overflow-x: auto; /* Enable horizontal scrolling */
 }
+.v-dialog__content{
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: unset;
+        width: 300px;
+    }
+    .v-dialog{
+        box-shadow: none;
+        overflow-y: visible;
+    }
 </style>