Merge pull request #3983 from LibreSign/chore/make-possible-choose-th…

…e-page

Chore/make possible choose the page

.github/workflows/owasp-dependency-check.yml

@@ -7,6 +7,7 @@ on: pull_request
 
 jobs:
   dependency-check:
+    if: false # temporary disabled
     runs-on: ubuntu-latest
     steps:
       - name: Check out code

package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@fontsource/dancing-script": "^5.1.0",
-    "@libresign/vue-pdf-editor": "^1.3.7",
+    "@libresign/vue-pdf-editor": "^1.4.4",
     "@marionebl/option": "^1.0.8",
     "@mdi/js": "^7.4.47",
     "@mdi/svg": "^7.4.47",

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) {

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,

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>

src/Components/Signers/Signer.vue

@@ -3,26 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
-		<NcListItem :name="signer.displayName"
-			:force-display-actions="true"
-			@click="signerClickAction">
-			<template #icon>
-				<NcAvatar :size="44" :display-name="signer.displayName" />
-			</template>
-			<template #subname>
-				<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
-			</template>
-			<NcActions>
-				<slot v-if="$slots.actions" slot="actions" name="actions" />
-			</NcActions>
-			<template #indicator>
-				<CheckboxBlankCircle :size="16"
-					:fill-color="statusColor"
-					:title="statusText" />
-			</template>
-		</NcListItem>
-	</div>
+	<NcListItem :name="signer.displayName"
+		:force-display-actions="true"
+		@click="signerClickAction">
+		<template #icon>
+			<NcAvatar :size="44" :display-name="signer.displayName" />
+		</template>
+		<template #subname>
+			<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
+		</template>
+		<NcActions>
+			<slot v-if="$slots.actions" slot="actions" name="actions" />
+		</NcActions>
+		<template #indicator>
+			<CheckboxBlankCircle :size="16"
+				:fill-color="statusColor"
+				:title="statusText" />
+		</template>
+	</NcListItem>
 </template>
 <script>
 import CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle.vue'