chore: make possible choose the page when select the signer

Signed-off-by: Vitor Mattos <[email protected]>
LibreSign · Nov 18, 2024 · c99da74 · c99da74
1 parent 9b8d23c
commit c99da74
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 11 deletions.
diff --git a/src/Components/PdfEditor/PdfEditor.vue b/src/Components/PdfEditor/PdfEditor.vue
@@ -30,6 +30,8 @@
 				:origin-width="object.originWidth"
 				:origin-height="object.originHeight"
 				:page-scale="pagesScale"
+				:canvas-width="object.canvasWidth"
+				:canvas-height="object.canvasHeight"
 				@onUpdate="$refs.vuePdfEditor.updateObject(object.id, $event)"
 				@onDelete="onDeleteSigner(object)" />
 		</template>
@@ -78,6 +80,8 @@ export default {
 				originHeight: signer.element.coordinates.height,
 				x: signer.element.coordinates.llx,
 				y: signer.element.coordinates.ury,
+				canvasWidth: signer.element.coordinates.canvasWidth,
+				canvasHeight: signer.element.coordinates.canvasHeight,
 			}
 			this.$refs.vuePdfEditor.allObjects = this.$refs.vuePdfEditor.allObjects.map((objects, pIndex) => {
 				if (pIndex === signer.element.coordinates.page - 1) {

diff --git a/src/Components/PdfEditor/Signature.vue b/src/Components/PdfEditor/Signature.vue
@@ -7,7 +7,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="signature absolute w-full h-full"
 			:class="[
@@ -93,6 +93,14 @@ export default {
 			type: Number,
 			default: 1,
 		},
+		canvasWidth: {
+			type: Number,
+			default: 1,
+		},
+		canvasHeight: {
+			type: Number,
+			default: 1,
+		},
 		fixSize: {
 			type: Boolean,
 			default: false,

diff --git a/src/Components/Request/VisibleElements.vue b/src/Components/Request/VisibleElements.vue
@@ -16,15 +16,20 @@
 					{{ statusLabel }}
 				</Chip>
 			</h2>
-			<p>
-				<small>
-					{{ t('libresign', 'Click the page to add visible signature, then select a signer to set their signature position') }}
-				</small>
-			</p>
 			<ul class="view-sign-detail__sidebar">
+				<li v-if="signerSelected"
+					:class="{ tip: signerSelected }">
+					{{ t('libresign', 'Click on the place you want to add.') }}
+					<NcButton type="primary"
+						@click="stopAddSigner">
+						{{ t('libresign', 'Cancel') }}
+					</NcButton>
+				</li>
 				<Signer v-for="(signer, key) in document.signers"
 					:key="key"
+					:ref="'li-' + key"
 					:current-signer="key"
+					:class="{ disabled: signerSelected }"
 					:signer="signer"
 					event="libresign:visible-elements-select-signer">
 					<slot v-bind="{signer}" slot="actions" name="actions" />
@@ -33,6 +38,7 @@
 			<NcButton v-if="canSave"
 				:type="typeOfRequestButton"
 				:wide="true"
+				:class="{ disabled: signerSelected }"
 				@click="showConfirm = true">
 				{{ t('libresign', 'Request') }}
 			</NcButton>
@@ -122,6 +128,7 @@ export default {
 			showConfirm: false,
 			loading: false,
 			errorConfirmRequest: '',
+			signerSelected: null,
 		}
 	},
 	computed: {
@@ -207,16 +214,42 @@ export default {
 			this.filesStore.loading = false
 		},
 		onSelectSigner(signer) {
-			signer.element = {
+			this.signerSelected = signer
+			const canvasList = this.$refs.pdfEditor.$refs.vuePdfEditor.$refs.pdfBody.querySelectorAll('canvas')
+			canvasList.forEach((canvas) => {
+				canvas.addEventListener('click', this.doSelectSigner)
+			})
+		},
+		doSelectSigner(event) {
+			const canvasList = this.$refs.pdfEditor.$refs.vuePdfEditor.$refs.pdfBody.querySelectorAll('canvas')
+			const page = Array.from(canvasList).indexOf(event.target)
+			this.addSignerToPosition(event, page)
+			this.stopAddSigner()
+		},
+		addSignerToPosition(event, page) {
+			const measurement = this.$refs.pdfEditor.$refs.vuePdfEditor.$refs['page' + page][0].getCanvasMeasurement()
+			const rect = event.target.getBoundingClientRect()
+			const x = event.clientX - rect.left
+			const y = event.clientY - rect.top
+			this.signerSelected.element = {
 				coordinates: {
-					page: this.$refs.pdfEditor.$refs.vuePdfEditor.selectedPageIndex + 1,
-					llx: 100,
-					ury: 100,
+					page: page + 1,
+					llx: x - SignatureImageDimensions.width / 2,
+					ury: y - SignatureImageDimensions.height / 2,
 					height: SignatureImageDimensions.height,
 					width: SignatureImageDimensions.width,
+					canvasWidth: measurement.canvasWidth,
+					canvasHeight: measurement.canvasHeight,
 				},
 			}
-			this.$refs.pdfEditor.addSigner(signer)
+			this.$refs.pdfEditor.addSigner(this.signerSelected)
+		},
+		stopAddSigner() {
+			const canvasList = this.$refs.pdfEditor.$refs.vuePdfEditor.$refs.pdfBody.querySelectorAll('canvas')
+			canvasList.forEach((canvas) => {
+				canvas.removeEventListener('click', this.doSelectSigner)
+			})
+			this.signerSelected = null
 		},
 		async onDeleteSigner(object) {
 			if (!object.signer.element.elementId) {
@@ -314,6 +347,23 @@ export default {
 				margin: 3px 3px 1em 3px;
 			}
 		}
+		.disabled {
+			pointer-events: none;
+			visibility: hidden;
+		}
+		.tip {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			margin-top: 1px;
+			margin-bottom: 1px;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+		}
 	}
 }
 </style>