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

chore: prevent to move element to outside of page

Author: vitormattos

src/Components/Image.vue

@@ -6,7 +6,7 @@
 		:style="{
 			width: `${width + dw}px`,
 			height: `${Math.round((width + dw) / ratio)}px`,
-			transform: `translate(${x + dx}px, ${y + dy}px)`,
+			transform: translateCoordinates(),
 		}">
 		<div class="absolute w-full h-full cursor-grab"
 			:class="[
@@ -74,6 +74,8 @@ export default {
 		'x',
 		'y',
 		'pageScale',
+		'pageWidth',
+		'pageHeight',
 		'fixSize',
 	],
 	data() {
@@ -177,15 +179,15 @@ export default {
 			if (!coordinate) return console.log('ERROR')
 			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,
 					height: Math.round((this.width + this.dw) / this.ratio),
 				})

src/Components/ItemEventsMixin.vue

@@ -44,8 +44,10 @@ export default {
 			this.y_mixin = event.clientY
 			window.removeEventListener('mousemove', this.handlePanMove)
 			window.removeEventListener('mouseup', this.handlePanEnd)
+			const x = Math.max(0, Math.min(this.x + this.dx, this.pageWidth - this.width))
+			const y = Math.max(0, Math.min(this.y + this.dy, this.pageHeight - this.height))
 			return {
-				detail: { x: this.x_mixin, y: this.y_mixin },
+				detail: { x, y },
 			}
 		},
 		handleTouchStart(event) {
@@ -82,10 +84,17 @@ export default {
 
 			window.removeEventListener('touchmove', this.handlePanMove)
 			window.removeEventListener('touchend', this.handlePanEnd)
+			const x = Math.max(0, Math.min(this.x + this.dx, this.pageWidth - this.width))
+			const y = Math.max(0, Math.min(this.y + this.dy, this.pageHeight - this.height))
 			return {
-				detail: { x: this.x_mixin, y: this.y_mixin },
+				detail: { x, y },
 			}
 		},
+		translateCoordinates() {
+			const x = Math.max(0, Math.min(this.x + this.dx, this.pageWidth - this.width))
+			const y = Math.max(0, Math.min(this.y + this.dy, this.pageHeight - this.height))
+			return 'translate(' + x + 'px, ' + y + 'px)'
+		}
 	},
 }
 </script>

src/Components/TextItem.vue

@@ -4,7 +4,7 @@
 
 		<!--    </toolbar-component>-->
 		<TapoutComponent class="absolute left-0 top-0 select-none"
-			:style="{ transform: `translate(${x + dx}px, ${y + dy}px)` }"
+			:style="{ transform: translateCoordinates() }"
 			@tapout="onBlur">
 			<TapoutComponent v-if="operation === 'edit' || operation === 'tool'"
 				ref="toolBox"
@@ -141,7 +141,21 @@ export default {
 		CloseCircleIcon,
 	},
 	mixins: [itemEventsMixin],
-	props: ['size', 'text', 'lineHeight', 'x', 'y', 'fontFamily', 'pageScale', 'currentPage', 'showLineSizeSelect', 'showFontSelect', 'showFontSizeSelect'],
+	props: [
+		'size',
+		'text',
+		'lineHeight',
+		'x',
+		'y',
+		'pageWidth',
+		'pageHeight',
+		'fontFamily',
+		'pageScale',
+		'currentPage',
+		'showLineSizeSelect',
+		'showFontSelect',
+		'showFontSizeSelect'
+	],
 	data() {
 		return {
 			Families: Object.keys(Fonts),
@@ -211,8 +225,8 @@ export default {
 				return this.$refs.editable.focus()
 			}
 			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

src/VuePdfEditor.vue

@@ -141,6 +141,8 @@
 													: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>
@@ -157,6 +159,8 @@
 													:font-family="object.fontFamily"
 													:current-page="object.currentPage"
 													: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)"
 													@onSelectFont="selectFontFamily" />
@@ -473,6 +477,7 @@ export default {
 			this.pdfDocument = null
 			this.pages = []
 			this.pagesScale = []
+			this.pageSizes = []
 			this.allObjects = []
 		},
 		async addPDF(file) {
@@ -516,6 +521,7 @@ export default {
 							width: measurement[2],
 							height: measurement[3],
 						}
+						this.pageSizes[page.pageNumber] = data.measurement[page.pageNumber]
 					})
 					this.$emit('pdf-editor:end-init', data)
 				}
@@ -558,6 +564,8 @@ export default {
 					originHeight: height,
 					canvasWidth,
 					canvasHeight,
+					pageWidth: this.pageSizes[this.selectedPageIndex + 1].width,
+					pageHeight: this.pageSizes[this.selectedPageIndex + 1].height,
 					x,
 					y,
 					isSealImage,
@@ -586,6 +594,8 @@ export default {
 				width: 0, // recalculate after editing
 				lineHeight: 1.4,
 				fontFamily: this.currentFont,
+				pageWidth: this.pageSizes[currentPage + 1].width,
+				pageHeight: this.pageSizes[currentPage + 1].height,
 				x,
 				y,
 				currentPage,