Fix mobile signature placement and coordinate serialization

Signed-off-by: Phillip <phillipxh@gmail.com>

Author: Phillipxh

src/components/PdfEditor/PdfEditor.vue

@@ -127,6 +127,12 @@ type PdfElementsInstance = {
 	selectedDocIndex?: number
 	autoFitZoom?: boolean
 }
+type PdfElementsRuntimeInstance = PdfElementsInstance & {
+	handleMouseMove?: (event: { type: string, touches: Array<{ clientX: number, clientY: number }> }) => void
+	finishAdding?: () => void
+	previewElement?: Record<string, unknown> | null
+	previewVisible?: boolean
+}
 
 defineOptions({
 	name: 'PdfEditor',
@@ -155,6 +161,7 @@ const pdfElements = ref<PdfElementsInstance | null>(null)
 const pendingAddedObjectCount = ref<number | null>(null)
 
 let pendingAddCheckTimer: ReturnType<typeof setTimeout> | null = null
+let pendingAddCheckRetries = 0
 
 const ignoreClickOutsideSelectors = computed(() => ['.action-item__popper', '.action-item'])
 
@@ -271,6 +278,7 @@ function clearPendingAddCheck() {
 		clearTimeout(pendingAddCheckTimer)
 		pendingAddCheckTimer = null
 	}
+	pendingAddCheckRetries = 0
 	pendingAddedObjectCount.value = null
 }
 
@@ -283,11 +291,29 @@ function checkSignerAdded() {
 	pendingAddCheckTimer = null
 	const isAddingMode = pdfElements.value?.isAddingMode === true
 	const objectsAfter = getTotalObjectsCount()
-	pendingAddedObjectCount.value = null
 
-	if (!isAddingMode && objectsAfter > objectsBefore) {
+	if (objectsAfter > objectsBefore) {
+		clearPendingAddCheck()
 		emit('pdf-editor:signer-added')
+		return
+	}
+
+	// Fallback: once add mode ends, unblock the UI even if the object count
+	// comparison was not conclusive due timing/reactivity.
+	if (!isAddingMode) {
+		clearPendingAddCheck()
+		emit('pdf-editor:signer-added')
+		return
 	}
+
+	// Poll while the external component still processes placement.
+	if (pendingAddCheckRetries < 300) {
+		pendingAddCheckRetries++
+		pendingAddCheckTimer = setTimeout(checkSignerAdded, 100)
+		return
+	}
+
+	clearPendingAddCheck()
 }
 
 function scheduleSignerAddedCheck() {
@@ -300,6 +326,38 @@ function scheduleSignerAddedCheck() {
 	pendingAddCheckTimer = setTimeout(checkSignerAdded, 0)
 }
 
+function handleDocumentTouchEnd(event: Event) {
+	if (pendingAddedObjectCount.value === null) {
+		return
+	}
+
+	const instance = pdfElements.value as PdfElementsRuntimeInstance | null
+	const touchEvent = event as TouchEvent
+	const touchPoint = touchEvent.changedTouches?.[0]
+	if (!instance || !touchPoint) {
+		scheduleSignerAddedCheck()
+		return
+	}
+
+	// Work around mobile tap placement timing in pdf-elements: touchend has no
+	// touches[0], so preview may never become visible on first tap.
+	if (instance.isAddingMode && instance.previewElement && !instance.previewVisible && instance.handleMouseMove) {
+		instance.handleMouseMove({
+			type: 'touchmove',
+			touches: [{ clientX: touchPoint.clientX, clientY: touchPoint.clientY }],
+		})
+		requestAnimationFrame(() => {
+			if (instance.isAddingMode) {
+				instance.finishAdding?.()
+			}
+			scheduleSignerAddedCheck()
+		})
+		return
+	}
+
+	scheduleSignerAddedCheck()
+}
+
 function startAddingSigner(signer: SignerSummaryRecord | SignerDetailRecord | null | undefined, size: { width?: number, height?: number }) {
 	if (!pdfElements.value || !size?.width || !size?.height) {
 		return false
@@ -319,6 +377,11 @@ function startAddingSigner(signer: SignerSummaryRecord | SignerDetailRecord | nu
 		signer: signerPayload,
 	})
 	pendingAddedObjectCount.value = getTotalObjectsCount()
+	pendingAddCheckRetries = 0
+	if (pendingAddCheckTimer !== null) {
+		clearTimeout(pendingAddCheckTimer)
+	}
+	pendingAddCheckTimer = setTimeout(checkSignerAdded, 100)
 
 	return true
 }
@@ -383,15 +446,11 @@ async function waitForPageRender(docIndex: number, pageIndex: number) {
 
 onMounted(() => {
 	ensurePdfWorker()
-	document.addEventListener('mouseup', scheduleSignerAddedCheck)
-	document.addEventListener('touchend', scheduleSignerAddedCheck)
-	document.addEventListener('keyup', scheduleSignerAddedCheck)
+	document.addEventListener('touchend', handleDocumentTouchEnd)
 })
 
 onBeforeUnmount(() => {
-	document.removeEventListener('mouseup', scheduleSignerAddedCheck)
-	document.removeEventListener('touchend', scheduleSignerAddedCheck)
-	document.removeEventListener('keyup', scheduleSignerAddedCheck)
+	document.removeEventListener('touchend', handleDocumentTouchEnd)
 	clearPendingAddCheck()
 })
 

src/components/Request/VisibleElements.vue

@@ -51,20 +51,22 @@
 						</template>
 					</Signer>
 				</ul>
-				<NcButton v-if="canSave"
-					:variant="variantOfSaveButton"
-					:wide="true"
-					:class="{ disabled: signerSelected }"
-					@click="save()">
-					{{ t('libresign', 'Save') }}
-				</NcButton>
-
-				<NcButton v-if="canSign"
-					:variant="variantOfSignButton"
-					:wide="true"
-					@click="goToSign">
-					{{ t('libresign', 'Sign') }}
-				</NcButton>
+				<div class="sign-details__actions">
+					<NcButton v-if="canSave"
+						:variant="variantOfSaveButton"
+						:wide="true"
+						:class="{ disabled: signerSelected }"
+						@click="save()">
+						{{ t('libresign', 'Save') }}
+					</NcButton>
+
+					<NcButton v-if="canSign"
+						:variant="variantOfSignButton"
+						:wide="true"
+						@click="goToSign">
+						{{ t('libresign', 'Sign') }}
+					</NcButton>
+				</div>
 			</div>
 			<PdfEditor v-if="!filesStore.loading && pdfFiles.length > 0"
 				ref="pdfEditor"
@@ -947,6 +949,12 @@ defineExpose({
 				margin: 3px 3px 1em 3px;
 			}
 		}
+		&__actions {
+			position: sticky;
+			bottom: 0;
+			background-color: var(--color-main-background);
+			padding-top: 4px;
+		}
 		.disabled {
 			pointer-events: none;
 			visibility: hidden;

src/store/files.js

@@ -867,10 +867,11 @@ const _filesStore = defineStore('files', () => {
 				}
 				const coordinates = element.coordinates && typeof element.coordinates === 'object'
 					? {
-						x: element.coordinates.x,
-						y: element.coordinates.y,
-						w: element.coordinates.w,
-						h: element.coordinates.h,
+						page: element.coordinates.page,
+						top: element.coordinates.top,
+						left: element.coordinates.left,
+						width: element.coordinates.width,
+						height: element.coordinates.height,
 					}
 					: undefined
 				return {

vite.config.mjs

@@ -6,6 +6,26 @@
 import { createAppConfig } from '@nextcloud/vite-config'
 import { resolve } from 'node:path'
 
+const patchPdfElementsTouchmovePassive = {
+	name: 'patch-pdf-elements-touchmove-passive',
+	enforce: 'pre',
+	transform(code, id) {
+		if (!id.includes('/@libresign/pdf-elements/')) {
+			return null
+		}
+		if (!id.endsWith('/dist/index.mjs') && !id.endsWith('/src/components/DraggableElement.vue')) {
+			return null
+		}
+
+		const replaced = code.replace(
+			/window\.addEventListener\((['"])touchmove\1,\s*this\.boundHandleMove\)/g,
+			'window.addEventListener($1touchmove$1, this.boundHandleMove, { passive: false })',
+		)
+
+		return replaced === code ? null : { code: replaced, map: null }
+	},
+}
+
 export default createAppConfig({
 	main: resolve('src/main.ts'),
 	init: resolve('src/init.ts'),
@@ -25,6 +45,7 @@ export default createAppConfig({
 			},
 		},
 		plugins: [
+			patchPdfElementsTouchmovePassive,
 			{
 				name: 'vue-devtools',
 				config(_, { mode }) {