Merge pull request #112 from LibreSign/fix/prevent-move-drawing-element-to-outside-of-page

fix: prevent move drawing element to outside of page

Author: vitormattos

src/Components/Drawing.vue

@@ -3,7 +3,7 @@
 		:style="{
 			width: `${width + dw}px`,
 			height: `${(width + dw) / ratio}px`,
-			transform: `translate(${x + dx}px, ${y + dy}px)`,
+			transform: translateCoordinates(),
 		}">
 		<div class="
 				absolute
@@ -58,6 +58,8 @@ export default {
 		'x',
 		'y',
 		'pageScale',
+		'pageWidth',
+		'pageHeight',
 		'path',
 	],
 	data() {
@@ -133,15 +135,15 @@ export default {
 
 			if (this.operation === 'move') {
 				this.$emit('onUpdate', {
-					x: this.x + this.dx,
-					y: this.y + this.dy,
+					x: coordinate.detail.x,
+					y: coordinate.detail.y,
 				})
 				this.dx = 0
 				this.dy = 0
 			} else if (this.operation === 'scale') {
 				this.$emit('onUpdate', {
-					x: this.x + this.dx,
-					y: this.y + this.dy,
+					x: coordinate.detail.x,
+					y: coordinate.detail.y,
 					width: this.width + this.dw,
 					scale: (this.width + this.dw) / this.originWidth,
 				})

src/VuePdfEditor.vue

@@ -170,9 +170,12 @@
 													:x="object.x"
 													:y="object.y"
 													:width="object.width"
+													:height="object.height"
 													:origin-width="object.originWidth"
 													:origin-height="object.originHeight"
 													:page-scale="pagesScale[pIndex]"
+													:page-width="pageSizes[pIndex + 1].width"
+													:page-height="pageSizes[pIndex + 1].height"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)" />
 											</div>
@@ -620,6 +623,7 @@ export default {
 				originWidth,
 				originHeight,
 				width: originWidth * scale,
+				height: originHeight * scale,
 				scale,
 			}
 			this.addObject(object)