Native selection positioning experiment

package.json

@@ -10,7 +10,7 @@
 		"build:android": "PDFJS_CONFIG=mobile bash pdfjs/build && webpack --config-name android",
 		"start": "webpack-dev-server --mode development --config-name dev",
 		"view-dev": "PDFJS_CONFIG=mobile bash pdfjs/build && webpack-dev-server --mode development --config-name view-dev",
-		"test": "echo \"No tests yet\""
+		"test": "node --test test/pdf/native-text-selection-map.test.mjs"
 	},
 	"license": "AGPL-3.0",
 	"browserslist": [

pdfjs/build

@@ -12,6 +12,18 @@ PDFJS_LEGACY_BUILD=./pdfjs/pdf.js/build/generic-legacy
 PDFJS_MINIFIED_LEGACY_BUILD=./pdfjs/pdf.js/build/minified-legacy
 BUILD_BASE=./build
 
+add_generic_compatibility() {
+	local file
+	for file in \
+		"$BUILD_DIR/build/pdf.mjs" \
+		"$BUILD_DIR/build/pdf.worker.mjs" \
+		"$BUILD_DIR/web/viewer.mjs"
+	do
+		cat pdfjs/compatibility.js "$file" > "$file.compat"
+		mv "$file.compat" "$file"
+	done
+}
+
 # Move into the PDF.js directory, install dependencies, and build
 pushd pdfjs/pdf.js
 npm ci
@@ -42,6 +54,7 @@ if [[ $PDFJS_CONFIG = "dev" || $PDFJS_CONFIG = "all" ]]; then
 	cp -r "$PDFJS_BUILD/web/viewer.mjs" "$BUILD_DIR/web/"
 	cp -r "$PDFJS_BUILD/web/images/loading-icon.gif" "$BUILD_DIR/web/images/"
 	cp -r "pdfjs/viewer.css" "$BUILD_DIR/web/"
+	add_generic_compatibility
 fi
 
 if [[ $PDFJS_CONFIG = "mobile" || $PDFJS_CONFIG = "all" ]]; then
@@ -62,6 +75,7 @@ if [[ $PDFJS_CONFIG = "mobile" || $PDFJS_CONFIG = "all" ]]; then
 	cp -r "$PDFJS_BUILD/web/viewer.mjs" "$BUILD_DIR/web/"
 	cp -r "$PDFJS_BUILD/web/images/loading-icon.gif" "$BUILD_DIR/web/images/"
 	cp -r "pdfjs/viewer.css" "$BUILD_DIR/web/"
+	add_generic_compatibility
 fi
 
 if [[ $PDFJS_CONFIG = "web" || $PDFJS_CONFIG = "all" ]]; then
@@ -102,4 +116,5 @@ if [[ $PDFJS_CONFIG = "zotero" || $PDFJS_CONFIG = "all" ]]; then
 	cp -r "$PDFJS_BUILD/web/viewer.mjs" "$BUILD_DIR/web/"
 	cp -r "$PDFJS_BUILD/web/images/loading-icon.gif" "$BUILD_DIR/web/images/"
 	cp -r "pdfjs/viewer.css" "$BUILD_DIR/web/"
+	add_generic_compatibility
 fi

pdfjs/compatibility.js

@@ -0,0 +1,31 @@
+// PDF.js generic builds target browsers newer than some supported Reader runtimes.
+function defineMethod(object, name, method) {
+	if (typeof object[name] !== 'function') {
+		Object.defineProperty(object, name, {
+			configurable: true,
+			writable: true,
+			value: method
+		});
+	}
+}
+
+defineMethod(URL, 'parse', function parseURL(url, base) {
+	try {
+		return new URL(url, base);
+	}
+	catch (e) {
+		return null;
+	}
+});
+
+defineMethod(Promise, 'try', function promiseTry(callback, ...args) {
+	return new this(resolve => resolve(callback(...args)));
+});
+
+defineMethod(Uint8Array.prototype, 'toHex', function toHex() {
+	let result = '';
+	for (let value of this) {
+		result += value.toString(16).padStart(2, '0');
+	}
+	return result;
+});

pdfjs/viewer.css

@@ -288,6 +288,7 @@ body.portal #viewerContainer::-webkit-scrollbar { /* WebKit */
 }
 
 .textLayer {
+	color-scheme: only light;
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -296,23 +297,51 @@ body.portal #viewerContainer::-webkit-scrollbar { /* WebKit */
 	overflow: hidden;
 	opacity: 0.2;
 	line-height: 1;
+	text-size-adjust: none;
+	forced-color-adjust: none;
+	caret-color: CanvasText;
 	user-select: auto;
 	-webkit-user-select: auto;
 	transform-origin: 0 0;
 	z-index: 2;
+	--min-font-size: 1;
+	--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+	--min-font-size-inv: calc(1 / var(--min-font-size));
+}
+
+:root[data-mobile-reader] .textLayer {
+	user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+}
+
+:root[data-native-text-selection] .textLayer {
+	overflow: clip;
+	user-select: text;
+	-webkit-user-select: text;
+	-webkit-touch-callout: default;
 }
 
 .textLayer :is(span, br) {
 	color: transparent;
 	position: absolute;
 	white-space: pre;
-	/*cursor: text;*/
+	cursor: text;
 	transform-origin: 0% 0%;
 }
 
-.textLayer span.markedContent {
-  top: 0;
-  height: 0;
+.textLayer > :not(.markedContent),
+.textLayer .markedContent span:not(.markedContent) {
+	z-index: 1;
+	--font-height: 0;
+	font-size: calc(var(--text-scale-factor) * var(--font-height));
+	--scale-x: 1;
+	--rotate: 0deg;
+	transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+
+.textLayer .markedContent {
+	display: contents;
 }
 
 .textLayer .highlight {
@@ -345,6 +374,11 @@ body.portal #viewerContainer::-webkit-scrollbar { /* WebKit */
 ::selection {
 	background: transparent;
 }
+
+:root[data-native-text-selection]:not([data-native-text-selection-mapped]) .textLayer ::selection {
+	background-color: rgb(66, 133, 244);
+}
+
 .customAnnotationLayer ::selection {
 	background-color: #71ADFD;
 }
@@ -356,15 +390,19 @@ body.portal #viewerContainer::-webkit-scrollbar { /* WebKit */
 	top: 100%;
 	right: 0;
 	bottom: 0;
-	z-index: -1;
+	z-index: 0;
 	/*cursor: default;*/
 	user-select: none;
 }
 
-.textLayer .endOfContent.active {
+.textLayer.selecting .endOfContent {
 	top: 0;
 }
 
+:root[data-native-text-selection] .textLayer .endOfContent {
+	pointer-events: none;
+}
+
 .customAnnotationLayer {
 	position: absolute;
 	left: 0;

src/index.view-dev.js

@@ -96,6 +96,7 @@ async function main() {
 	let queryString = window.location.search;
 	let urlParams = new URLSearchParams(queryString);
 	let type = urlParams.get('type') || 'snapshot';
+	let platform = urlParams.get('platform') || (/Android/.test(navigator.userAgent) ? 'android' : undefined);
 	let demo;
 	if (type === 'pdf') {
 		demo = pdf;
@@ -109,6 +110,7 @@ async function main() {
 	let res = await fetch(demo.fileName);
 	window.createView({
 		type,
+		platform,
 		data: {
 			buf: new Uint8Array(await res.arrayBuffer()),
 		},

src/pdf/lib/auto-scroll.js

@@ -34,17 +34,22 @@ export class AutoScroll {
 		};
 		container.ownerDocument.defaultView.requestAnimationFrame(scroll);
 
-
 		container.ownerDocument.defaultView.addEventListener('mousemove', this._handleMouseMove.bind(this));
-		container.ownerDocument.defaultView.addEventListener('mouseup', () => this.disable.bind(this));
-
+		container.ownerDocument.defaultView.addEventListener('mouseup', () => this.disable());
 	}
 
 	_handleMouseMove(event) {
 		if (event.buttons !== 1) {
 			this.disable();
 			return;
 		}
+		if (!this._enabled) {
+			return;
+		}
+		this.update(event.clientX, event.clientY);
+	}
+
+	update(clientX, clientY) {
 		if (!this._enabled) {
 			return;
 		}
@@ -57,7 +62,7 @@ export class AutoScroll {
 			rect[3] - MARGIN
 		];
 
-		let p = [event.clientX, event.clientY];
+		let p = [clientX, clientY];
 
 		// Get absolute distance to rect
 		var dx = Math.max(rect[0] - p[0], 0, p[0] - rect[2]);
@@ -93,4 +98,8 @@ export class AutoScroll {
 		this._enabled = false;
 		this._scrollVector = [0, 0];
 	}
+
+	stop() {
+		this.disable();
+	}
 }