Fix resizing with touch

And move some annotation-overlay styles to CSS.

src/dom/common/components/overlay/annotation-overlay.tsx

@@ -110,18 +110,7 @@ export const AnnotationOverlay: React.FC<AnnotationOverlayProps> = (props) => {
 	let widgetContainer = useRef<SVGSVGElement>(null);
 
 	return <>
-		<svg
-			className="annotation-container"
-			style={{
-				mixBlendMode: 'multiply',
-				zIndex: '9999',
-				pointerEvents: 'none',
-				position: 'absolute',
-				left: '0',
-				top: '0',
-				overflow: 'visible'
-			}}
-		>
+		<svg className="annotation-container blended">
 			{annotations.filter(annotation => annotation.type == 'highlight' || annotation.type == 'underline').map((annotation) => {
 				if (annotation.id) {
 					return (
@@ -159,14 +148,6 @@ export const AnnotationOverlay: React.FC<AnnotationOverlayProps> = (props) => {
 		</svg>
 		<svg
 			className="annotation-container"
-			style={{
-				zIndex: '9999',
-				pointerEvents: 'none',
-				position: 'absolute',
-				left: '0',
-				top: '0',
-				overflow: 'visible'
-			}}
 			ref={widgetContainer}
 		>
 			<StaggeredNotes
@@ -515,14 +496,12 @@ const Resizer: React.FC<ResizerProps> = (props) => {
 	highlightRects = Array.from(highlightRects)
 		.sort((a, b) => (a.bottom - b.bottom) || (a.left - b.left));
 
-	let handlePointerDown = (event: React.PointerEvent, isStart: boolean) => {
+	let handlePointerDown = (event: React.PointerEvent) => {
 		if (event.button !== 0) {
 			return;
 		}
+		event.preventDefault();
 		(event.target as Element).setPointerCapture(event.pointerId);
-		setResizingSide(isStart ? 'start' : 'end');
-		setPointerCapture({ elem: event.target as Element, pointerId: event.pointerId });
-		onResizeStart(annotation);
 	};
 
 	let handlePointerUp = (event: React.PointerEvent) => {
@@ -532,9 +511,20 @@ const Resizer: React.FC<ResizerProps> = (props) => {
 			return;
 		}
 		(event.target as Element).releasePointerCapture(event.pointerId);
+	};
+
+	let handleGotPointerCapture = (event: React.PointerEvent, side: 'start' | 'end') => {
+		setResizingSide(side);
+		setPointerCapture({ elem: event.target as Element, pointerId: event.pointerId });
+		onResizeStart(annotation);
+	};
+
+	let handleLostPointerCapture = () => {
 		setResizingSide(false);
-		setPointerCapture(null);
-		onResizeEnd(annotation, false);
+		if (pointerCapture) {
+			setPointerCapture(null);
+			onResizeEnd(annotation, false);
+		}
 	};
 
 	let handleKeyDown = useCallback((event: KeyboardEvent) => {
@@ -631,21 +621,29 @@ const Resizer: React.FC<ResizerProps> = (props) => {
 			width={WIDTH}
 			height={topLeftRect.height}
 			fill={annotation.color}
-			style={{ pointerEvents: pointerEventsSuppressed ? 'none' : 'all', cursor: 'col-resize' }}
-			onPointerDown={event => handlePointerDown(event, true)}
-			onPointerUp={event => handlePointerUp(event)}
+			className="resizer"
+			style={{ pointerEvents: pointerEventsSuppressed ? 'none' : 'auto' }}
+			onPointerDown={handlePointerDown}
+			onPointerUp={handlePointerUp}
+			onPointerCancel={handlePointerUp}
 			onPointerMove={resizingSide == 'start' ? (event => handlePointerMove(event, !rtl)) : undefined}
+			onGotPointerCapture={event => handleGotPointerCapture(event, 'start')}
+			onLostPointerCapture={handleLostPointerCapture}
 		/>
 		<rect
 			x={bottomRightRect.right}
 			y={bottomRightRect.top}
 			width={WIDTH}
 			height={bottomRightRect.height}
 			fill={annotation.color}
-			style={{ pointerEvents: pointerEventsSuppressed ? 'none' : 'all', cursor: 'col-resize' }}
-			onPointerDown={event => handlePointerDown(event, false)}
-			onPointerUp={event => handlePointerUp(event)}
+			className="resizer"
+			style={{ pointerEvents: pointerEventsSuppressed ? 'none' : 'auto' }}
+			onPointerDown={handlePointerDown}
+			onPointerUp={handlePointerUp}
+			onPointerCancel={handlePointerUp}
 			onPointerMove={resizingSide == 'end' ? (event => handlePointerMove(event, rtl)) : undefined}
+			onGotPointerCapture={event => handleGotPointerCapture(event, 'end')}
+			onLostPointerCapture={handleLostPointerCapture}
 		/>
 	</>;
 };

src/dom/common/dom-view.tsx

@@ -35,6 +35,8 @@ import { SELECTION_COLOR } from "../../common/defines";
 import { isSafari } from "../../common/lib/utilities";
 import { isElement } from "./lib/nodes";
 import { debounce } from "../../common/lib/debounce";
+// @ts-ignore
+import annotationOverlayCSS from '!!raw-loader!./stylesheets/annotation-overlay.css';
 
 abstract class DOMView<State extends DOMViewState, Data> {
 	initializedPromise: Promise<void>;
@@ -442,6 +444,10 @@ abstract class DOMView<State extends DOMViewState, Data> {
 		this._iframeDocument.addEventListener('scroll', this._handleScroll.bind(this), { passive: true });
 		this._iframeDocument.addEventListener('selectionchange', this._handleSelectionChange.bind(this));
 
+		let style = this._iframeDocument.createElement('style');
+		style.innerHTML = annotationOverlayCSS;
+		this._iframeDocument.head.append(style);
+
 		// Pass options to setters that were delayed until iframe initialization
 		this.setAnnotations(this._options.annotations);
 		this.setTool(this._options.tool);

src/dom/common/stylesheets/annotation-overlay.css

@@ -0,0 +1,25 @@
+.annotation-container {
+    z-index: 9999;
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: visible;
+}
+
+.annotation-container.blended {
+    mix-blend-mode: multiply;
+}
+
+.resizer {
+    cursor: col-resize;
+    touch-action: none;
+}
+
+@media (any-pointer: coarse) {
+    .resizer {
+        stroke: transparent;
+        stroke-width: 20px;
+        margin: -10px;
+    }
+}