chore: remove necessity to send canvas dimensions to component

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

Author: vitormattos

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@libresign/vue-pdf-editor",
   "description": "vue2 pdf editor component",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "author": "LibreCode",
   "private": false,
   "main": "dist/vue-pdf-editor.umd.js",

src/Components/Drawing.vue

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

src/Components/Image.vue

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

src/Components/ItemEventsMixin.vue

@@ -5,15 +5,17 @@ export default {
 		return {
 			x_mixin: null,
 			y_mixin: null,
+			pageWidth: 0,
+			pageHeight: 0,
 		}
 	},
 	mounted() {
-		// this.$refs.canvasElement.addEventListener('mousedown', this.handleMousedown);
-		// this.$refs.canvasElement.addEventListener('touchstart', this.handleTouchStart);
-	},
-	beforeDestroy() {
-		// this.$refs.canvasElement.removeEventListener('mousedown', this.handleMousedown);
-		// this.$refs.canvasElement.removeEventListener('touchstart', this.handleTouchStart);
+		const page = this.$el.closest('.page')
+		if (page) {
+			const canvas = page.querySelector('canvas')
+			this.pageWidth = canvas.width
+			this.pageHeight = canvas.height
+		}
 	},
 	created() {},
 	methods: {
@@ -44,8 +46,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.canvasWidth - this.width))
-			const y = Math.max(0, Math.min(this.y + this.dy, this.canvasHeight - this.height))
+			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, y },
 			}
@@ -84,19 +86,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.canvasWidth - this.width))
-			const y = Math.max(0, Math.min(this.y + this.dy, this.canvasHeight - this.height))
+			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, y },
 			}
 		},
 		translateCoordinates() {
-			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))
+			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>
-
-<style scoped></style>

src/Components/TextItem.vue

@@ -149,8 +149,6 @@ export default {
 		'y',
 		'fontFamily',
 		'pageScale',
-		'canvasWidth',
-		'canvasHeight',
 		'currentPage',
 		'showLineSizeSelect',
 		'showFontSelect',

src/VuePdfEditor.vue

@@ -112,7 +112,7 @@
 							@mousedown="selectPage(pIndex)"
 							@touchstart="selectPage(pIndex)">
 							<div style="display: inline-block;"
-								class="relative shadow-lg"
+								class="relative shadow-lg page"
 								:class="[pIndex === selectedPageIndex ?'shadowOutline':'']">
 								<PDFPage :ref="`page${pIndex}`"
 									:scale="scale"
@@ -127,8 +127,6 @@
 												<slot name="custom"
 													:object="object"
 													:pagesScale="pagesScale[pIndex]"
-													:canvas-width="object.canvasWidth"
-													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)" />
 											</div>
@@ -143,8 +141,6 @@
 													:origin-width="object.originWidth"
 													:origin-height="object.originHeight"
 													:page-scale="pagesScale[pIndex]"
-													:canvas-width="object.canvasWidth"
-													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)" />
 											</div>
@@ -163,8 +159,6 @@
 													:font-family="object.fontFamily"
 													:current-page="object.currentPage"
 													:page-scale="pagesScale[pIndex]"
-													:canvas-width="object.canvasWidth"
-													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)"
 													@onSelectFont="selectFontFamily" />
@@ -178,8 +172,6 @@
 													:origin-width="object.originWidth"
 													:origin-height="object.originHeight"
 													:page-scale="pagesScale[pIndex]"
-													:canvas-width="object.canvasWidth"
-													:canvas-height="object.canvasHeight"
 													@onUpdate="updateObject(object.id, $event)"
 													@onDelete="deleteObject(object.id)" />
 											</div>
@@ -520,15 +512,17 @@ export default {
 						measurement: [],
 					}
 					// Wait until all pages have been read
-					const pages = await Promise.all(this.pages);
-					pages.forEach((page) => {
-						const measurement = page.getViewport().viewBox
-						data.measurement[page.pageNumber] = {
-							width: measurement[2],
-							height: measurement[3],
-						}
-					})
-					this.$emit('pdf-editor:end-init', data)
+					Promise.all(this.pages)
+						.then(pages => {
+							pages.forEach((page) => {
+								const measurement = page.getViewport().viewBox
+								data.measurement[page.pageNumber] = {
+									width: measurement[2],
+									height: measurement[3],
+								}
+							})
+							this.$emit('pdf-editor:end-init', data)
+						})
 				}
 			} catch (e) {
 				console.log('Failed to add pdf.')
@@ -555,20 +549,13 @@ export default {
 				const id = this.genID()
 				const { width, height } = img
 
-				const { canvasWidth, canvasHeight }
-					= this.$refs[
-						`page${this.selectedPageIndex}`
-					][0].getCanvasMeasurement()
-
 				const object = {
 					id,
 					type: 'image',
 					width: width * sizeNarrow,
 					height: height * sizeNarrow,
 					originWidth: width,
 					originHeight: height,
-					canvasWidth,
-					canvasHeight,
 					x,
 					y,
 					isSealImage,
@@ -590,20 +577,13 @@ export default {
 			const id = this.genID()
 			fetchFont(this.currentFont)
 
-			const { canvasWidth, canvasHeight }
-				= this.$refs[
-					`page${this.selectedPageIndex}`
-				][0].getCanvasMeasurement()
-
 			const object = {
 				id,
 				text,
 				type: 'text',
 				size: this.textDefaultSize,
 				lineHeight: 1.4,
 				fontFamily: this.currentFont,
-				canvasWidth,
-				canvasHeight,
 				x,
 				y,
 				currentPage,
@@ -620,11 +600,6 @@ 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,
@@ -635,8 +610,6 @@ export default {
 				originHeight,
 				width: originWidth * scale,
 				height: originHeight * scale,
-				canvasWidth,
-				canvasHeight,
 				scale,
 			}
 			this.addObject(object)