chore: replace page width and height by canvas width and height

Signed-off-by: Vitor Mattos <vitor@php.rio>

Author: vitormattos

src/Components/Drawing.vue

@@ -58,8 +58,8 @@ export default {
 		'x',
 		'y',
 		'pageScale',
-		'pageWidth',
-		'pageHeight',
+		'canvasWidth',
+		'canvasHeight',
 		'path',
 	],
 	data() {

src/Components/Image.vue

@@ -74,8 +74,8 @@ export default {
 		'x',
 		'y',
 		'pageScale',
-		'pageWidth',
-		'pageHeight',
+		'canvasWidth',
+		'canvasHeight',
 		'fixSize',
 	],
 	data() {

src/Components/ItemEventsMixin.vue

@@ -44,8 +44,8 @@ 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))
+			const x = Math.max(0, Math.min(this.x + this.dx, this.canvasWidth - this.width))
+			const y = Math.max(0, Math.min(this.y + this.dy, this.canvasHeight - this.height))
 			return {
 				detail: { x, y },
 			}
@@ -84,15 +84,15 @@ 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))
+			const x = Math.max(0, Math.min(this.x + this.dx, this.canvasWidth - this.width))
+			const y = Math.max(0, Math.min(this.y + this.dy, this.canvasHeight - this.height))
 			return {
 				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))
+			const x = Math.max(0, Math.min(this.x + this.dx, this.canvasWidth - this.width))
+			const y = Math.max(0, Math.min(this.y + this.dy, this.canvasHeight - this.height))
 			return 'translate(' + x + 'px, ' + y + 'px)'
 		}
 	},

src/Components/TextItem.vue

@@ -147,10 +147,10 @@ export default {
 		'lineHeight',
 		'x',
 		'y',
-		'pageWidth',
-		'pageHeight',
 		'fontFamily',
 		'pageScale',
+		'canvasWidth',
+		'canvasHeight',
 		'currentPage',
 		'showLineSizeSelect',
 		'showFontSelect',

src/VuePdfEditor.vue

@@ -141,8 +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"
+													:canvas-width="object.canvasWidth"
+													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)" />
 											</div>
@@ -159,8 +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"
+													:canvas-width="object.canvasWidth"
+													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)"
 													@onSelectFont="selectFontFamily" />
@@ -174,8 +174,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"
+													:canvas-width="object.canvasWidth"
+													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)" />
 											</div>
@@ -330,7 +330,6 @@ export default {
 			pdfDocument: null,
 			pages: [],
 			pagesScale: [],
-			pageSizes: [],
 			allObjects: [],
 			currentFont: 'Courier',
 			focusId: null,
@@ -481,7 +480,6 @@ export default {
 			this.pdfDocument = null
 			this.pages = []
 			this.pagesScale = []
-			this.pageSizes = []
 			this.allObjects = []
 		},
 		async addPDF(file) {
@@ -525,7 +523,6 @@ export default {
 							width: measurement[2],
 							height: measurement[3],
 						}
-						this.pageSizes[page.pageNumber] = data.measurement[page.pageNumber]
 					})
 					this.$emit('pdf-editor:end-init', data)
 				}
@@ -568,8 +565,6 @@ export default {
 					originHeight: height,
 					canvasWidth,
 					canvasHeight,
-					pageWidth: this.pageSizes[this.selectedPageIndex + 1].width,
-					pageHeight: this.pageSizes[this.selectedPageIndex + 1].height,
 					x,
 					y,
 					isSealImage,
@@ -590,6 +585,12 @@ export default {
 		addTextField(text = 'Please enter here', x = 0, y = 0, currentPage = this.selectedPageIndex) {
 			const id = this.genID()
 			fetchFont(this.currentFont)
+
+			const { canvasWidth, canvasHeight }
+				= this.$refs[
+					`page${this.selectedPageIndex}`
+				][0].getCanvasMeasurement()
+
 			const object = {
 				id,
 				text,
@@ -598,8 +599,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,
+				canvasWidth,
+				canvasHeight,
 				x,
 				y,
 				currentPage,
@@ -615,6 +616,12 @@ export default {
 
 		addDrawing(originWidth, originHeight, path, scale = 1) {
 			const id = this.genID()
+
+			const { canvasWidth, canvasHeight }
+				= this.$refs[
+					`page${this.selectedPageIndex}`
+				][0].getCanvasMeasurement()
+
 			const object = {
 				id,
 				path,
@@ -625,6 +632,8 @@ export default {
 				originHeight,
 				width: originWidth * scale,
 				height: originHeight * scale,
+				canvasWidth,
+				canvasHeight,
 				scale,
 			}
 			this.addObject(object)