Satini_pvduc / ocrpdf

Go to a project
Toggle navigation
Toggle navigation pinning
tien_nemo
ee4b2d1e 1 parent eeae51da

resize manual

Inline Side-by-side
Showing 1 changed file with 78 additions and 8 deletions
......@@ -37,15 +37,31 @@
:style="getBoxStyle(item, 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 -->
<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"
class="delete-btn"
......@@ -140,6 +156,60 @@
}
},
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)
mapFieldToBox(index, fieldName, text = null) {
if (index == null) return;
......