clamp area box

app/javascript/template_builder/area.vue

@@ -716,14 +716,6 @@ export default {
         }
       }
     },
-    drag (e) {
-      if (e.target.id === 'mask' && this.editable) {
-        this.isDragged = true
-
-        this.area.x = (e.offsetX - this.dragFrom.x) / e.target.clientWidth
-        this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
-      }
-    },
     startTouchDrag (e) {
       if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
         return
@@ -769,6 +761,8 @@ export default {
 
       this.maybeChangeAreaPage(this.area)
 
+      this.clampAreaBounds(this.area)
+
       if (this.isDragged) {
         this.save()
       }
@@ -836,6 +830,8 @@ export default {
 
       this.maybeChangeAreaPage(this.area)
 
+      this.clampAreaBounds(this.area)
+
       if (this.isMoved) {
         this.save()
       }
@@ -860,18 +856,6 @@ export default {
         area.y = area.y - 1 - (16.0 / this.$parent.$refs.mask.previousSibling.offsetHeight)
       }
     },
-    stopDrag () {
-      this.$el.getRootNode().removeEventListener('mousemove', this.drag)
-      this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
-
-      if (this.isDragged) {
-        this.save()
-      }
-
-      this.isDragged = false
-
-      this.$emit('stop-drag')
-    },
     startResize () {
       if (!this.selectedAreasRef.value.includes(this.area)) {
         this.selectedAreasRef.value = [this.area]
@@ -886,6 +870,8 @@ export default {
       this.$el.getRootNode().removeEventListener('mousemove', this.resize)
       this.$el.getRootNode().removeEventListener('mouseup', this.stopResize)
 
+      this.clampAreaBounds(this.area)
+
       this.$emit('stop-resize')
 
       this.save()
@@ -924,9 +910,17 @@ export default {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)
       this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize)
 
+      this.clampAreaBounds(this.area)
+
       this.$emit('stop-resize')
 
       this.save()
+    },
+    clampAreaBounds (area) {
+      area.x = Math.min(Math.max(area.x, 0), 1)
+      area.y = Math.min(Math.max(area.y, 0), 1)
+      area.w = Math.min(Math.max(area.w, 0), 1)
+      area.h = Math.min(Math.max(area.h, 0), 1)
     }
   }
 }

app/javascript/template_builder/builder.vue

@@ -2512,6 +2512,11 @@ export default {
 
         this.selectedAreasRef.value = [area]
 
+        area.x = Math.min(Math.max(area.x, 0), 1)
+        area.y = Math.min(Math.max(area.y, 0), 1)
+        area.w = Math.min(Math.max(area.w, 0), 1)
+        area.h = Math.min(Math.max(area.h, 0), 1)
+
         this.save()
       } else {
         const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)