diff --git a/.gitignore b/.gitignore index 5be2a45..241560d 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ pnpm-debug.log* # Build files dist lib + +package-lock.json diff --git a/package.json b/package.json index 272461b..9581a5e 100644 --- a/package.json +++ b/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", diff --git a/src/Components/Drawing.vue b/src/Components/Drawing.vue index 5da9384..2fe829d 100644 --- a/src/Components/Drawing.vue +++ b/src/Components/Drawing.vue @@ -58,8 +58,6 @@ export default { 'x', 'y', 'pageScale', - 'canvasWidth', - 'canvasHeight', 'path', ], data() { diff --git a/src/Components/Image.vue b/src/Components/Image.vue index f99bfe1..59303ec 100644 --- a/src/Components/Image.vue +++ b/src/Components/Image.vue @@ -74,8 +74,6 @@ export default { 'x', 'y', 'pageScale', - 'canvasWidth', - 'canvasHeight', 'fixSize', ], data() { diff --git a/src/Components/ItemEventsMixin.vue b/src/Components/ItemEventsMixin.vue index 31765ce..f99f3e7 100644 --- a/src/Components/ItemEventsMixin.vue +++ b/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)' } }, } - - diff --git a/src/Components/TextItem.vue b/src/Components/TextItem.vue index dc4dd9a..5515553 100644 --- a/src/Components/TextItem.vue +++ b/src/Components/TextItem.vue @@ -149,8 +149,6 @@ export default { 'y', 'fontFamily', 'pageScale', - 'canvasWidth', - 'canvasHeight', 'currentPage', 'showLineSizeSelect', 'showFontSelect', diff --git a/src/VuePdfEditor.vue b/src/VuePdfEditor.vue index 5d4c8e0..0bb3417 100644 --- a/src/VuePdfEditor.vue +++ b/src/VuePdfEditor.vue @@ -112,7 +112,7 @@ @mousedown="selectPage(pIndex)" @touchstart="selectPage(pIndex)">
@@ -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)" /> @@ -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)" /> @@ -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,11 +549,6 @@ 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', @@ -567,8 +556,6 @@ export default { height: height * sizeNarrow, originWidth: width, originHeight: height, - canvasWidth, - canvasHeight, x, y, isSealImage, @@ -590,11 +577,6 @@ export default { const id = this.genID() fetchFont(this.currentFont) - const { canvasWidth, canvasHeight } - = this.$refs[ - `page${this.selectedPageIndex}` - ][0].getCanvasMeasurement() - const object = { id, text, @@ -602,8 +584,6 @@ export default { 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)