resize manual

@@ -37,15 +37,31 @@
                 :style="getBoxStyle(item, index)"
                 :style="getBoxStyle(item, index)"
                 @click="onBoxClick(index)">
                 @click="onBoxClick(index)">
 
 
-                <div class="edge top"    data-handle="top"></div>
-                <div class="edge right"  data-handle="right"></div>
-                <div class="edge bottom" data-handle="bottom"></div>
-                <div class="edge left"   data-handle="left"></div>
+                <div class="edge top" data-handle="top"
+                     @mousedown="startResize($event, index, 'top')">
+                </div>
+                <div class="edge right"  data-handle="right"
+                     @mousedown="startResize($event, index, 'right')">
+                </div>
+                <div class="edge bottom" data-handle="bottom"
+                     @mousedown="startResize($event, index, 'bottom')">
+                </div>
+                <div class="edge left" data-handle="left"
+                     @mousedown="startResize($event, index, 'left')">
+                </div>
                 <!-- 4 góc -->
                 <!-- 4 góc -->
-                <div class="corner nw" data-handle="nw"></div>
-                <div class="corner ne" data-handle="ne"></div>
-                <div class="corner sw" data-handle="sw"></div>
-                <div class="corner se" data-handle="se"></div>
+                <div class="corner top-left" data-handle="top-left"
+                     @mousedown="startResize($event, index, 'top-left')">
+                </div>
+                <div class="corner top-right" data-handle="top-right"
+                     @mousedown="startResize($event, index, 'top-right')">
+                </div>
+                <div class="corner bottom-left" data-handle="bottom-left"
+                     @mousedown="startResize($event, index, 'bottom-left')">
+                </div>
+                <div class="corner bottom-right" data-handle="bottom-right"
+                     @mousedown="startResize($event, index, 'bottom-right')">
+                </div>
 
 
                 <button v-if="item.isManual && item.showDelete"
                 <button v-if="item.isManual && item.showDelete"
                         class="delete-btn"
                         class="delete-btn"
@@ -140,6 +156,60 @@
             }
             }
         },
         },
         methods: {
         methods: {
+            startResize(e, index, handle) {
+                e.stopPropagation();
+                this.resizing = {
+                    index,
+                    handle,
+                    startX: e.clientX,
+                    startY: e.clientY,
+                    origBox: [...this.ocrData[index].bbox], // [x1, y1, x2, y2]
+                };
+
+                document.addEventListener("mousemove", this.onResizing);
+                document.addEventListener("mouseup", this.stopResize);
+            },
+
+            onResizing(e) {
+                if (!this.resizing) return;
+
+                const { index, handle, startX, startY, origBox } = this.resizing;
+                const dx = (e.clientX - startX) * (this.imageWidth / this.$refs.pdfImage.clientWidth);
+                const dy = (e.clientY - startY) * (this.imageHeight / this.$refs.pdfImage.clientHeight);
+
+                let [x1, y1, x2, y2] = origBox;
+
+                if (handle === 'top-left') {
+                    x1 += dx; y1 += dy;
+                } else if (handle === 'top-right') {
+                    x2 += dx; y1 += dy;
+                } else if (handle === 'bottom-left') {
+                    x1 += dx; y2 += dy;
+                } else if (handle === 'bottom-right') {
+                    x2 += dx; y2 += dy;
+                } else if (handle === 'top') {
+                    y1 += dy;
+                } else if (handle === 'bottom') {
+                    y2 += dy;
+                } else if (handle === 'left') {
+                    x1 += dx;
+                } else if (handle === 'right') {
+                    x2 += dx;
+                }
+
+
+                // giữ không cho x1 > x2, y1 > y2
+                if (x1 < x2 && y1 < y2) {
+                    this.$set(this.ocrData[index], "bbox", [x1, y1, x2, y2]);
+                }
+            },
+
+            stopResize() {
+                document.removeEventListener("mousemove", this.onResizing);
+                document.removeEventListener("mouseup", this.stopResize);
+                this.resizing = null;
+            },
+
             // Map field cho box (không set active, chỉ dùng để load data từ DB)
             // Map field cho box (không set active, chỉ dùng để load data từ DB)
             mapFieldToBox(index, fieldName, text = null) {
             mapFieldToBox(index, fieldName, text = null) {
                 if (index == null) return;
                 if (index == null) return;