@selvajs/visualization 1.6.0 → 1.6.1-beta.0

package/dist/render.cjs

@@ -3811,6 +3811,15 @@ const SELECTION_MIN_OPACITY = 1;
 * color blindness, so what tells hover from selected there is brightness.
 */
 const HOVER_COLOR = "#ffb020";
+/**
+* A fingertip covers far more than the pixel under its centre, so a touch that lands just beside a
+* thin curve or a narrow part still picks it. Rings are sampled only when the centre misses.
+*/
+const TOUCH_PICK_RADII_PX = [8, 16];
+const TOUCH_PICK_DIRECTIONS = 8;
+/** Two taps closer than this in time and space are a double-tap. */
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_SLOP_PX = 30;
 /** Linear RGB distance. Closer than this, a tint barely changes the surface. */
 const MIN_TINT_DISTANCE = .35;
 /** Taken by a surface already close to the tint. Blue stays distinct under every common deficiency. */
@@ -3850,7 +3859,7 @@ function tintForSelection(material, color, isMesh) {
 	}
 	if ("color" in material) material.color = selectionColor.clone();
 }
-function setupEventHandlers(canvas, scene, cameraController, config) {
+function setupEventHandlers(canvas, scene, cameraController, config, taps) {
 	const selectedObjects = /* @__PURE__ */ new Set();
 	const originalMaterials = /* @__PURE__ */ new Map();
 	const memberHighlights = [];
@@ -3859,16 +3868,7 @@ function setupEventHandlers(canvas, scene, cameraController, config) {
 	let selectedByEntries = false;
 	const raycaster = new three.Raycaster();
 	const mouse = new three.Vector2();
-	const mouseDownPosition = new three.Vector2();
 	const getActiveCamera = () => cameraController.getActiveCamera();
-	const isFullyVisible = (object) => {
-		let current = object;
-		while (current) {
-			if (!current.visible) return false;
-			current = current.parent;
-		}
-		return true;
-	};
 	const fitToView = () => {
 		const box = computeContentBounds(scene);
 		if (box.isEmpty()) {
@@ -4006,29 +4006,61 @@ function setupEventHandlers(canvas, scene, cameraController, config) {
 		}
 		raycaster.params.Points.threshold = cachedDiagonal * .01;
 	};
-	/**
-	* Nearest visible, pickable object under the pointer, or null. Viewer aids are excluded: the grid
-	* is a huge camera-following plane, so double-clicking through a thin curve onto it would frame a
-	* box the size of the fade radius and fling the camera out.
-	*/
-	const pickAt = (clientX, clientY) => {
+	const setPointerNdc = (clientX, clientY) => {
 		const rect = canvas.getBoundingClientRect();
 		mouse.x = (clientX - rect.left) / rect.width * 2 - 1;
 		mouse.y = -((clientY - rect.top) / rect.height) * 2 + 1;
+	};
+	/**
+	* Nearest visible, pickable object under the pointer, or null. Goes through the BVH pick, which
+	* also skips viewer aids: the grid is a huge camera-following plane, so double-clicking through
+	* a thin curve onto it would frame a box the size of the fade radius and fling the camera out.
+	*/
+	const pickAt = (clientX, clientY) => {
+		setPointerNdc(clientX, clientY);
 		updatePickThresholds();
 		raycaster.setFromCamera(mouse, getActiveCamera());
-		for (const hit of raycaster.intersectObjects(scene.children, true)) if (isFullyVisible(hit.object) && !isViewerAid(hit.object)) return hit;
+		return raycastVisible(scene, raycaster)[0] ?? null;
+	};
+	const pickNear = (clientX, clientY, touch) => {
+		const centre = pickAt(clientX, clientY);
+		if (centre || !touch) return centre;
+		for (const radius of TOUCH_PICK_RADII_PX) {
+			let nearest = null;
+			for (let i = 0; i < TOUCH_PICK_DIRECTIONS; i++) {
+				const angle = i / TOUCH_PICK_DIRECTIONS * Math.PI * 2;
+				const hit = pickAt(clientX + Math.cos(angle) * radius, clientY + Math.sin(angle) * radius);
+				if (hit && (!nearest || hit.distance < nearest.distance)) nearest = hit;
+			}
+			if (nearest) return nearest;
+		}
 		return null;
 	};
-	const handleMouseDown = (event) => {
-		mouseDownPosition.set(event.clientX, event.clientY);
+	let lastTap = null;
+	/** iOS fires no `dblclick` for a double-tap, so touch pairs its own taps. */
+	const isSecondTap = (event) => {
+		const previous = lastTap;
+		lastTap = {
+			time: event.timeStamp,
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (!previous) return false;
+		const isDouble = event.timeStamp - previous.time <= DOUBLE_TAP_MS && Math.hypot(event.clientX - previous.x, event.clientY - previous.y) <= DOUBLE_TAP_SLOP_PX;
+		if (isDouble) lastTap = null;
+		return isDouble;
 	};
 	const handleCanvasClick = (event) => {
-		const currentMousePosition = new three.Vector2(event.clientX, event.clientY);
-		if (mouseDownPosition.distanceTo(currentMousePosition) > 5) return;
-		const hit = pickAt(event.clientX, event.clientY);
+		if (!taps.wasTap()) return;
+		const touch = taps.pointerType() !== "mouse";
+		if (touch && isSecondTap(event)) {
+			handleDoubleTap(event.clientX, event.clientY, true);
+			return;
+		}
+		const hit = pickNear(event.clientX, event.clientY, touch);
 		if (!hit) {
 			clearSelection();
+			setPointerNdc(event.clientX, event.clientY);
 			config.events?.onBackgroundClicked?.({
 				x: mouse.x,
 				y: mouse.y
@@ -4055,7 +4087,11 @@ function setupEventHandlers(canvas, scene, cameraController, config) {
 		else if (clickedObject instanceof three.Mesh && Object.keys(clickedObject.userData).length > 0) config.events?.onMeshMetadataClicked?.(clickedObject.userData);
 	};
 	const handleDoubleClick = (event) => {
-		const hit = pickAt(event.clientX, event.clientY);
+		if (!taps.wasTap() || taps.pointerType() !== "mouse") return;
+		handleDoubleTap(event.clientX, event.clientY, false);
+	};
+	const handleDoubleTap = (clientX, clientY, touch) => {
+		const hit = pickNear(clientX, clientY, touch);
 		if (!hit) {
 			if (config.events?.enableDoubleClickZoom) cameraController.frameBounds(computeContentBounds(scene), true);
 			return;
@@ -4085,7 +4121,6 @@ function setupEventHandlers(canvas, scene, cameraController, config) {
 		}
 	};
 	if (config.events?.enableClickToFocus) {
-		canvas.addEventListener("mousedown", handleMouseDown);
 		canvas.addEventListener("click", handleCanvasClick);
 		canvas.addEventListener("dblclick", handleDoubleClick);
 	}
@@ -4094,7 +4129,6 @@ function setupEventHandlers(canvas, scene, cameraController, config) {
 		canvas.addEventListener("keydown", handleKeydown);
 	}
 	const dispose = () => {
-		canvas.removeEventListener("mousedown", handleMouseDown);
 		canvas.removeEventListener("click", handleCanvasClick);
 		canvas.removeEventListener("dblclick", handleDoubleClick);
 		canvas.removeEventListener("keydown", handleKeydown);
@@ -4109,6 +4143,69 @@ function setupEventHandlers(canvas, scene, cameraController, config) {
 		setHover
 	};
 }
+// src/render/scene-setup/tap-gesture.ts
+/** A mouse press is precise; past this it was a drag to orbit or pan. */
+const MOUSE_SLOP_PX = 5;
+/** A fingertip wobbles a few pixels on a deliberate tap. */
+const TOUCH_SLOP_PX = 10;
+/** A touch held this long was the start of an orbit that never moved, not a tap. */
+const TOUCH_LONG_PRESS_MS = 500;
+function trackTaps(canvas) {
+	const down = /* @__PURE__ */ new Map();
+	let pointerType = "mouse";
+	let startTime = 0;
+	let maxPointers = 0;
+	let maxTravel = 0;
+	let cancelled = false;
+	let lastWasTap = false;
+	const travel = (event) => {
+		const start = down.get(event.pointerId);
+		if (!start) return;
+		maxTravel = Math.max(maxTravel, Math.hypot(event.clientX - start.x, event.clientY - start.y));
+	};
+	const onDown = (event) => {
+		if (down.size === 0) {
+			pointerType = event.pointerType;
+			startTime = event.timeStamp;
+			maxPointers = 0;
+			maxTravel = 0;
+			cancelled = false;
+		}
+		down.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		maxPointers = Math.max(maxPointers, down.size);
+	};
+	const onMove = (event) => travel(event);
+	const onEnd = (event) => {
+		if (!down.has(event.pointerId)) return;
+		travel(event);
+		if (event.type === "pointercancel") cancelled = true;
+		down.delete(event.pointerId);
+		if (down.size > 0) return;
+		const isMouse = pointerType === "mouse";
+		lastWasTap = !cancelled && maxPointers === 1 && maxTravel <= (isMouse ? MOUSE_SLOP_PX : TOUCH_SLOP_PX) && (isMouse || event.timeStamp - startTime <= TOUCH_LONG_PRESS_MS);
+	};
+	const options = {
+		capture: true,
+		passive: true
+	};
+	canvas.addEventListener("pointerdown", onDown, options);
+	canvas.addEventListener("pointermove", onMove, options);
+	canvas.addEventListener("pointerup", onEnd, options);
+	canvas.addEventListener("pointercancel", onEnd, options);
+	return {
+		wasTap: () => lastWasTap,
+		pointerType: () => pointerType,
+		dispose: () => {
+			canvas.removeEventListener("pointerdown", onDown, options);
+			canvas.removeEventListener("pointermove", onMove, options);
+			canvas.removeEventListener("pointerup", onEnd, options);
+			canvas.removeEventListener("pointercancel", onEnd, options);
+		}
+	};
+}
 // src/render/scene-setup/setup-renderer.ts
 function setupRenderer(canvas, config, pixelRatio) {
 	const renderer = new three.WebGLRenderer({
@@ -4217,7 +4314,8 @@ const initThree = function(canvas, options) {
 			format: config.measure.format
 		}
 	}) : null;
-	const eventHandlers = config.events.enableEventHandlers !== false ? setupEventHandlers(canvas, scene, cameraController, config) : {
+	const taps = trackTaps(canvas);
+	const eventHandlers = config.events.enableEventHandlers !== false ? setupEventHandlers(canvas, scene, cameraController, config, taps) : {
 		dispose: () => {},
 		fitToView: () => {},
 		clearSelection: () => {},
@@ -4235,19 +4333,10 @@ const initThree = function(canvas, options) {
 		tool: gizmo,
 		priority: -100
 	});
-	const DRAG_SLOP_PX = 5;
-	let pressX = 0;
-	let pressY = 0;
-	const handlePointerDown = (event) => {
-		pressX = event.clientX;
-		pressY = event.clientY;
-	};
-	const wasDrag = (event) => Math.hypot(event.clientX - pressX, event.clientY - pressY) > DRAG_SLOP_PX;
 	const handleToolClick = (event) => {
-		if (wasDrag(event)) return;
+		if (!taps.wasTap()) return;
 		if (tools.handleClick(event)) event.stopImmediatePropagation();
 	};
-	canvas.addEventListener("mousedown", handlePointerDown, { capture: true });
 	canvas.addEventListener("click", handleToolClick, { capture: true });
 	const handleToolMove = (event) => tools.handleMove(event);
 	canvas.addEventListener("mousemove", handleToolMove, { passive: true });
@@ -4356,7 +4445,7 @@ const initThree = function(canvas, options) {
 		disposed = true;
 		disposeAnimation();
 		eventHandlers.dispose();
-		canvas.removeEventListener("mousedown", handlePointerDown, { capture: true });
+		taps.dispose();
 		canvas.removeEventListener("click", handleToolClick, { capture: true });
 		canvas.removeEventListener("mousemove", handleToolMove);
 		measureTool?.dispose();