From 40b0d1b63a578aa32529dead9d5fb85607af333f Mon Sep 17 00:00:00 2001 From: Vinicios Gomes Date: Sun, 18 Feb 2024 08:00:12 -0300 Subject: [PATCH 01/10] chore: input accept only pdf files --- src/VuePdfEditor.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/VuePdfEditor.vue b/src/VuePdfEditor.vue index 70d9cde..c95a22b 100644 --- a/src/VuePdfEditor.vue +++ b/src/VuePdfEditor.vue @@ -12,6 +12,7 @@ type="file" name="pdf" class="hidden" + accept="application/pdf" @change="onUploadPDF"> Date: Sun, 18 Feb 2024 10:14:43 -0300 Subject: [PATCH 02/10] feat: simple pagination --- src/Components/PDFPage.vue | 3 ++ src/VuePdfEditor.vue | 69 ++++++++++++++++++++++++-------------- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/Components/PDFPage.vue b/src/Components/PDFPage.vue index 307a847..286480b 100644 --- a/src/Components/PDFPage.vue +++ b/src/Components/PDFPage.vue @@ -24,6 +24,9 @@ export default { } }, watch: { + page(){ + this.render() + }, scale(newScale) { this.dynamicScale = newScale // Monitor changes in the scale attribute and update dynamic scaling this.render() diff --git a/src/VuePdfEditor.vue b/src/VuePdfEditor.vue index c95a22b..96160fe 100644 --- a/src/VuePdfEditor.vue +++ b/src/VuePdfEditor.vue @@ -77,6 +77,13 @@ @click="savePDF"> {{ saving ? 'saving' : 'keep' }} + +
+ + + +
+
-
+
+ @mousedown="selectPage(currentPage)" + @touchstart="selectPage(currentPage)">
- + + :data-key="currentPage" + :page="pages[currentPage]" + @onMeasure="onMeasure($event, currentPage)" />
-
+ :style="{transform: `scale(${pagesScale[currentPage]})`}"> +
@@ -141,7 +147,7 @@ :height="object.height" :origin-width="object.originWidth" :origin-height="object.originHeight" - :page-scale="pagesScale[pIndex]" + :page-scale="pagesScale[currentPage]" @onUpdate="updateObject(object.id, $event)" @onDelete="deleteObject(object.id)" />
@@ -157,7 +163,7 @@ :line-height="object.lineHeight" :font-family="object.fontFamily" :current-page="object.currentPage" - :page-scale="pagesScale[pIndex]" + :page-scale="pagesScale[currentPage]" @onUpdate="updateObject(object.id, $event)" @onDelete="deleteObject(object.id)" @onSelectFont="selectFontFamily" /> @@ -169,7 +175,7 @@ :width="object.width" :origin-width="object.originWidth" :origin-height="object.originHeight" - :page-scale="pagesScale[pIndex]" + :page-scale="pagesScale[currentPage]" @onUpdate="updateObject(object.id, $event)" @onDelete="deleteObject(object.id)" />
@@ -324,6 +330,7 @@ export default { numPages: null, pdfDocument: null, pages: [], + currentPage: 0, pagesScale: [], allObjects: [], currentFont: 'Courier', @@ -397,20 +404,20 @@ export default { for (let i = 0; i < this.pages.length; i++) { this.selectedPageIndex = i for (let j = 0; j < this.initTextFields.length; j++) { - const text = this.initTextFields[j] - this.addTextField(text, 0, j * 60, this.selectedPageIndex) + // const text = this.initTextFields[j] + // this.addTextField(text, 0, j * 60, this.selectedPageIndex) } } this.selectedPageIndex = 0 const checker = setInterval(() => { - if (this.$refs.textItem.length === this.initTextFields.length * this.pages.length) { - document.getElementById('pdfBody').dispatchEvent(new MouseEvent('mousedown', { - bubbles: true, - cancelable: true, - view: window, - })) + // if (this.$refs.textItem.length === this.initTextFields.length * this.pages.length) { + // document.getElementById('pdfBody').dispatchEvent(new MouseEvent('mousedown', { + // bubbles: true, + // cancelable: true, + // view: window, + // })) clearInterval(checker) - } + // } }, 100) }, @@ -681,7 +688,19 @@ export default { this.saving = false } }, - }, + onPreviousPage(){ + const previousPage = this.currentPage-1 + const canSetPreviousPage = previousPage >= 0 + if(!canSetPreviousPage) return; + this.currentPage = previousPage; + }, + onNextPage(){ + const nextPage = this.currentPage+1 + const canSetNextPage = nextPage <= this.pages.length-1 + if(!canSetNextPage) return; + this.currentPage = nextPage; + }, + } } From 4f498a719a779e3f3629af829ae93a99158710fe Mon Sep 17 00:00:00 2001 From: Vinicios Gomes Date: Sun, 18 Feb 2024 12:00:29 -0300 Subject: [PATCH 03/10] refactor: pagination component --- src/Components/Pagination.vue | 49 +++++++++++++++++++++++++++++++++++ src/VuePdfEditor.vue | 21 +++++---------- 2 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 src/Components/Pagination.vue diff --git a/src/Components/Pagination.vue b/src/Components/Pagination.vue new file mode 100644 index 0000000..c5e5a04 --- /dev/null +++ b/src/Components/Pagination.vue @@ -0,0 +1,49 @@ + + + \ No newline at end of file diff --git a/src/VuePdfEditor.vue b/src/VuePdfEditor.vue index 96160fe..5ed567a 100644 --- a/src/VuePdfEditor.vue +++ b/src/VuePdfEditor.vue @@ -79,9 +79,7 @@
- - - +
@@ -200,6 +198,7 @@ import { fetchFont } from './utils/prepareAssets.js' import PDFPage from './Components/PDFPage.vue' +import Pagination from './Components/Pagination.vue' import ImageItem from './Components/Image.vue' import TextItem from './Components/TextItem.vue' import Drawing from './Components/Drawing.vue' @@ -223,6 +222,7 @@ export default { TextIcon, GestureIcon, PencilIcon, + Pagination, }, props: { msg: String, @@ -688,18 +688,9 @@ export default { this.saving = false } }, - onPreviousPage(){ - const previousPage = this.currentPage-1 - const canSetPreviousPage = previousPage >= 0 - if(!canSetPreviousPage) return; - this.currentPage = previousPage; - }, - onNextPage(){ - const nextPage = this.currentPage+1 - const canSetNextPage = nextPage <= this.pages.length-1 - if(!canSetNextPage) return; - this.currentPage = nextPage; - }, + onPageChange({ page }){ + this.currentPage = page + } } } From 942e8fd5944c5876c893755bc87146226ac2a304 Mon Sep 17 00:00:00 2001 From: Vinicios Gomes Date: Sun, 18 Feb 2024 12:03:13 -0300 Subject: [PATCH 04/10] fix: edit into a selected page using current page index --- src/VuePdfEditor.vue | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/VuePdfEditor.vue b/src/VuePdfEditor.vue index 5ed567a..65cdd95 100644 --- a/src/VuePdfEditor.vue +++ b/src/VuePdfEditor.vue @@ -383,7 +383,7 @@ export default { } try { await this.addPDF(this.initFileSrc) - this.selectedPageIndex = 0 + this.currentPage = 0 fetchFont(this.currentFont) this.narrowEnlargeShow = true this.initTextField() @@ -398,17 +398,17 @@ export default { } }, initTextField() { - if (this.selectedPageIndex < 0 || this.initTextFields === null || this.initTextFields.length === 0) { + if (this.currentPage < 0 || this.initTextFields === null || this.initTextFields.length === 0) { return } for (let i = 0; i < this.pages.length; i++) { - this.selectedPageIndex = i + this.currentPage = i for (let j = 0; j < this.initTextFields.length; j++) { // const text = this.initTextFields[j] - // this.addTextField(text, 0, j * 60, this.selectedPageIndex) + // this.addTextField(text, 0, j * 60, this.currentPage) } } - this.selectedPageIndex = 0 + this.currentPage = 0 const checker = setInterval(() => { // if (this.$refs.textItem.length === this.initTextFields.length * this.pages.length) { // document.getElementById('pdfBody').dispatchEvent(new MouseEvent('mousedown', { @@ -422,11 +422,11 @@ export default { }, async initImages() { - if (this.selectedPageIndex < 0) { + if (this.currentPage < 0) { return } for (let i = 0; i < this.pages.length; i++) { - this.selectedPageIndex = i + this.currentPage = i let y = 0 if (this.initImageUrls !== null && this.initImageUrls.length !== 0) { // Need to initialize pictures @@ -445,7 +445,7 @@ export default { await this.addImage(await res.blob(), 0, (y + 1) * 100, 0.4, true) } } - this.selectedPageIndex = 0 + this.currentPage = 0 }, onFinishDrawingCanvas(e) { @@ -470,11 +470,11 @@ export default { const files = e.target.files || (e.dataTransfer && e.dataTransfer.files) const file = files[0] if (!file || file.type !== 'application/pdf') return - this.selectedPageIndex = -1 + this.currentPage = -1 try { await this.addPDF(file) this.narrowEnlargeShow = true - this.selectedPageIndex = 0 + this.currentPage = 0 } catch (e) { console.log(e) } @@ -524,7 +524,7 @@ export default { }, async onUploadImage(e) { const file = e.target.files[0] - if (file && this.selectedPageIndex >= 0) { + if (file && this.currentPage >= 0) { await this.addImage(file) } e.target.value = null @@ -544,7 +544,7 @@ export default { const { canvasWidth, canvasHeight } = this.$refs[ - `page${this.selectedPageIndex}` + `page${this.currentPage}` ][0].getCanvasMeasurement() const object = { @@ -568,12 +568,12 @@ export default { } }, onAddTextField() { - if (this.selectedPageIndex >= 0) { + if (this.currentPage >= 0) { this.addTextField() } }, - addTextField(text = 'Please enter here', x = 0, y = 0, currentPage = this.selectedPageIndex) { + addTextField(text = 'Please enter here', x = 0, y = 0, currentPage = this.currentPage) { const id = this.genID() fetchFont(this.currentFont) const object = { @@ -592,7 +592,7 @@ export default { }, onAddDrawing() { - if (this.selectedPageIndex >= 0) { + if (this.currentPage >= 0) { this.addingDrawing = true } }, @@ -615,7 +615,7 @@ export default { addObject(object) { this.allObjects = this.allObjects.map((objects, pIndex) => - pIndex === this.selectedPageIndex ? [...objects, object] : objects, + pIndex === this.currentPage ? [...objects, object] : objects, ) }, @@ -626,12 +626,12 @@ export default { }, selectPage(index) { - this.selectedPageIndex = index + this.currentPage = index }, updateObject(objectId, payload) { this.allObjects = this.allObjects.map((objects, pIndex) => - pIndex === (payload.currentPage !== undefined ? payload.currentPage : this.selectedPageIndex) + pIndex === (payload.currentPage !== undefined ? payload.currentPage : this.currentPage) ? objects.map(object => object.id === objectId ? { ...object, ...payload } : object, ) @@ -641,7 +641,7 @@ export default { deleteObject(objectId) { this.allObjects = this.allObjects.map((objects, pIndex) => - pIndex === this.selectedPageIndex + pIndex === this.currentPage ? objects.filter(object => object.id !== objectId) : objects, ) From 110368103058af540d8fa0675851068f4e0e4471 Mon Sep 17 00:00:00 2001 From: Vinicios Gomes Date: Sun, 18 Feb 2024 12:35:37 -0300 Subject: [PATCH 05/10] chore: remove unused binds --- src/VuePdfEditor.vue | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/VuePdfEditor.vue b/src/VuePdfEditor.vue index 65cdd95..41c3041 100644 --- a/src/VuePdfEditor.vue +++ b/src/VuePdfEditor.vue @@ -114,9 +114,7 @@
+ style="text-align: center">
pIndex === (payload.currentPage !== undefined ? payload.currentPage : this.currentPage) From 06a15bb217c815ba20bf0f68e4e7fbe7e7e3d12c Mon Sep 17 00:00:00 2001 From: Vinicios Gomes Date: Sun, 18 Feb 2024 12:40:53 -0300 Subject: [PATCH 06/10] fix: first render error caused by page proxy undefined on first render --- src/Components/PDFPage.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Components/PDFPage.vue b/src/Components/PDFPage.vue index 286480b..4aeb379 100644 --- a/src/Components/PDFPage.vue +++ b/src/Components/PDFPage.vue @@ -49,6 +49,9 @@ export default { }, async render() { const _page = await this.page + + if(typeof _page ==='undefined') return + const canvas = this.$refs.canvas const context = canvas.getContext('2d') const viewport = _page.getViewport({ From d6b7c09973bc783d164dd367bffd4ffd06405a16 Mon Sep 17 00:00:00 2001 From: Vinicios Gomes Date: Sun, 18 Feb 2024 13:16:37 -0300 Subject: [PATCH 07/10] feat: slot for pagination and usage example --- examples/App.vue | 11 +++++++++++ src/Components/Pagination.vue | 24 +++++++++++------------- src/VuePdfEditor.vue | 12 ++++++++---- 3 files changed, 30 insertions(+), 17 deletions(-) diff --git a/examples/App.vue b/examples/App.vue index cce84eb..eed08b3 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -11,6 +11,7 @@ :show-customize-editor-add-draw="true" :show-line-size-select = 'true' :show-font-size-select= 'true' + :show-pagination="true" :show-font-select="true" :show-rename="true" :show-save-btn="true" @@ -24,6 +25,13 @@ :seal-image-hidden-on-save="false" @onSave2Upload="save2Upload" > +
@@ -42,6 +50,9 @@ export default { } }, methods:{ + pageChange(e){ + console.log(e) + }, save2Upload(payload){ console.log(payload.pdfBytes); console.log(payload.fileName); diff --git a/src/Components/Pagination.vue b/src/Components/Pagination.vue index c5e5a04..f8207a7 100644 --- a/src/Components/Pagination.vue +++ b/src/Components/Pagination.vue @@ -1,19 +1,14 @@