fix(mobile): harden touch placement and pdf-elements runtime behavior

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

Author: Phillipxh

src/components/PdfEditor/PdfEditor.vue

@@ -342,15 +342,20 @@ function handleDocumentTouchEnd(event: Event) {
 	// 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) {
+		touchEvent.preventDefault?.()
+		touchEvent.stopImmediatePropagation?.()
+
 		instance.handleMouseMove({
 			type: 'touchmove',
 			touches: [{ clientX: touchPoint.clientX, clientY: touchPoint.clientY }],
 		})
 		requestAnimationFrame(() => {
-			if (instance.isAddingMode) {
-				instance.finishAdding?.()
-			}
-			scheduleSignerAddedCheck()
+			requestAnimationFrame(() => {
+				if (instance.isAddingMode) {
+					instance.finishAdding?.()
+				}
+				scheduleSignerAddedCheck()
+			})
 		})
 		return
 	}
@@ -492,21 +497,32 @@ defineExpose({
 	}
 
 	.action-btn {
-		border: none;
-		background: transparent;
-		color: #ffffff;
+		border: 1px solid #cbd5e1;
+		background: #f8fafc;
+		color: #0f172a;
 		padding: 4px;
 		min-height: 0;
 		min-width: 0;
 		border-radius: 4px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		transition: background 120ms ease;
 
 		&:hover {
-			background: rgba(255, 255, 255, 0.1);
+			background: #e2e8f0;
+		}
+
+		:deep(svg),
+		:deep(.icon-vue),
+		:deep(.material-design-icon),
+		:deep([class*='icon']) {
+			color: currentColor;
+			fill: currentColor;
+			stroke: currentColor;
+			opacity: 1;
 		}
 	}
 

vite.config.mjs

@@ -6,22 +6,53 @@
 import { createAppConfig } from '@nextcloud/vite-config'
 import { resolve } from 'node:path'
 
-const patchPdfElementsTouchmovePassive = {
-	name: 'patch-pdf-elements-touchmove-passive',
+const patchPdfElementsRuntimeFixes = {
+	name: 'patch-pdf-elements-runtime-fixes',
 	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')) {
+		if (!id.endsWith('/dist/index.mjs')
+			&& !id.endsWith('/src/components/DraggableElement.vue')
+			&& !id.endsWith('/src/components/PDFElements.vue')) {
 			return null
 		}
 
-		const replaced = code.replace(
+		let replaced = code
+
+		// Drag/resize listeners must be non-passive because handleMove calls preventDefault.
+		replaced = replaced.replace(
 			/window\.addEventListener\((['"])touchmove\1,\s*this\.boundHandleMove\)/g,
 			'window.addEventListener($1touchmove$1, this.boundHandleMove, { passive: false })',
 		)
 
+		// Adding-mode touchmove also needs to be non-passive.
+		replaced = replaced.replace(
+			/document\.addEventListener\((['"])touchmove\1,\s*this\.handleMouseMove,\s*\{\s*passive:\s*(?:!0|true)\s*\}\)/g,
+			'document.addEventListener($1touchmove$1, this.handleMouseMove, { passive: false })',
+		)
+
+		// Guard against race where add mode ends while RAF callback is still queued.
+		replaced = replaced.replace(
+			/const s = this\.pendingHoverClientPos;\s*if \(!s\) return;/g,
+			'if (!this.isAddingMode || !this.previewElement) { this.pendingHoverClientPos = null; return; } const s = this.pendingHoverClientPos; if (!s) return;',
+		)
+
+		// Defensive access to preview element dimensions in async mobile flow.
+		replaced = replaced.replace(/this\.previewElement\.width/g, '(this.previewElement?.width || 0)')
+		replaced = replaced.replace(/this\.previewElement\.height/g, '(this.previewElement?.height || 0)')
+
+		// Keep toolbar above by default, but place below when signature is near top.
+		replaced = replaced.replace(
+			/const e = this\.pagesScale \|\| 1, t = this\.mode === "drag", i = this\.mode === "resize", s = t \? this\.offsetX : 0, n = t \? this\.offsetY : 0, a = i \? this\.resizeOffsetX : 0, o = i \? this\.resizeOffsetY : 0, r = i \? this\.resizeOffsetW : 0, h = this\.object\.x \+ s \+ a, l = this\.object\.y \+ n \+ o, u = this\.object\.width \+ r, d = l - 60, g = d < 0 \? l \+ 8 : d;/g,
+			'const e = this.pagesScale || 1, t = this.mode === "drag", i = this.mode === "resize", s = t ? this.offsetX : 0, n = t ? this.offsetY : 0, a = i ? this.resizeOffsetX : 0, o = i ? this.resizeOffsetY : 0, r = i ? this.resizeOffsetW : 0, h = i ? this.resizeOffsetH : 0, l = this.object.x + s + a, u = this.object.y + n + o, c = this.object.width + r, d = this.object.height + h, g = u * e < 72, f = g ? u + d : u, b = g ? "translate(-50%, 8px)" : "translate(-50%, calc(-100% - 8px))";',
+		)
+		replaced = replaced.replace(
+			/left: `\$\{\(h \+ u \/ 2\) \* e\}px`,\s*top: `\$\{g \* e\}px`,\s*transform: "translateX\(-50%\)"/g,
+			'left: `${(l + c / 2) * e}px`, top: `${f * e}px`, transform: b',
+		)
+
 		return replaced === code ? null : { code: replaced, map: null }
 	},
 }
@@ -45,7 +76,7 @@ export default createAppConfig({
 			},
 		},
 		plugins: [
-			patchPdfElementsTouchmovePassive,
+			patchPdfElementsRuntimeFixes,
 			{
 				name: 'vue-devtools',
 				config(_, { mode }) {