tracky-mouse 2.6.0 → 2.8.0

package/src/audio.js

@@ -0,0 +1,145 @@
+
+/** @type {AudioContext | null} */
+let actx = null;
+
+const audioPath = new URL("../audio", import.meta.url).href;
+const audioFiles = {
+	// https://opengameart.org/content/51-ui-sound-effects-buttons-switches-and-clicks (CC0)
+	clickPress: `${audioPath}/click-press.wav`,
+	clickRelease: `${audioPath}/click-release.wav`,
+	// https://opengameart.org/content/middle-mouse-click (original recordings for this project, released under CC0)
+	middleClickPress: `${audioPath}/middle-click-press.wav`,
+	middleClickRelease: `${audioPath}/middle-click-release.wav`,
+	// https://opengameart.org/content/9-sci-fi-computer-sounds-and-beeps (CC-BY 3.0)
+	pause: `${audioPath}/pause.wav`,
+	unpause: `${audioPath}/unpause.wav`,
+};
+const audioBuffers = {};
+
+// Sound effects are disabled by default because the dwell clicker can be initialized without the UI,
+// in which case there's no UI to disable the sound effects from.
+// The actual default in the app is separate.
+export let audioEnabled = false;
+
+export function setAudioEnabled(enabled) {
+	audioEnabled = enabled;
+};
+
+export function initAudio() {
+	if (actx === null) {
+		actx = new AudioContext();
+
+		// "User gesture" requirements cripple this accessibility feature,
+		// but we have to at least try to work around it.
+		const unsuspend = (event) => {
+			if (actx.state === "suspended") {
+				console.log("Starting suspended audio context via", event.type);
+				actx.resume();
+			}
+		};
+		addEventListener("keydown", unsuspend);
+		addEventListener("pointerdown", unsuspend);
+
+		// Load audio files
+		for (const [key, url] of Object.entries(audioFiles)) {
+			fetch(url)
+				.then((response) => response.arrayBuffer())
+				.then((arrayBuffer) => actx.decodeAudioData(arrayBuffer))
+				.then((audioBuffer) => {
+					audioBuffers[key] = audioBuffer;
+				})
+				.catch((error) => {
+					console.error("Error loading audio file:", url, error);
+				});
+		}
+	}
+}
+
+export function playSound(soundId, { delay = 0, playbackRate = 1, volume = 1 } = {}) {
+	if (audioEnabled && actx && actx.state === "running" && audioBuffers[soundId]) {
+		const gain = actx.createGain();
+		const source = actx.createBufferSource();
+		source.buffer = audioBuffers[soundId];
+		source.connect(gain).connect(actx.destination);
+		gain.gain.value = volume;
+		source.playbackRate.value = playbackRate;
+		source.start(actx.currentTime + delay);
+	}
+}
+
+export class SleepSweep {
+	constructor(ctx = actx) {
+		this.ctx = ctx;
+
+		this.osc = this.ctx.createOscillator();
+		this.osc.type = "sine";
+
+		this.gain = this.ctx.createGain();
+		this.gain.gain.value = 0;
+
+		// Not sure how much this filter is actually doing
+		this.filter = this.ctx.createBiquadFilter();
+		this.filter.type = "lowpass";
+		this.filter.frequency.value = 800;
+
+		this.osc.connect(this.filter);
+		this.filter.connect(this.gain);
+		this.gain.connect(this.ctx.destination);
+
+		this.osc.start();
+
+		this.enabled = false;
+		this.active = false;
+		this.timeOfLastGestureTrigger = 0; // audio context time
+		this.maxEffectDurationAfterGestureTrigger = 2.0; // seconds
+	}
+
+	update(gestureProgress) {
+		const now = this.ctx.currentTime;
+		if (!this.enabled || !audioEnabled) {
+			this.gain.gain.setTargetAtTime(0, now, 0.05);
+			return;
+		}
+
+		const effectStartFraction = 0.5;
+
+		if (gestureProgress < effectStartFraction) {
+			if (this.timeOfLastGestureTrigger + this.maxEffectDurationAfterGestureTrigger < now) {
+				this.gain.gain.setTargetAtTime(0, now, 0.05);
+			}
+			return;
+		}
+
+		const effectProgress = (gestureProgress - effectStartFraction) / (1 - effectStartFraction);
+
+		const volume = effectProgress * effectProgress * 0.4;
+
+		const baseFreq = 120;
+		const freq = baseFreq + effectProgress * 40;
+
+		this.gain.gain.setTargetAtTime(volume, now, 0.05);
+		this.osc.frequency.setTargetAtTime(freq, now, 0.05);
+
+		this.filter.frequency.setTargetAtTime(800 + effectProgress * 1200, now, 0.05);
+	}
+
+	sleepModeWasToggled(nowInSleepMode) {
+		const now = this.ctx.currentTime;
+		const currentFreq = this.osc.frequency.value;
+		const targetFreq = currentFreq * (nowInSleepMode ? 0.5 : 2.0);
+
+		this.osc.frequency.cancelScheduledValues(now);
+		this.osc.frequency.setValueAtTime(currentFreq, now);
+		this.osc.frequency.exponentialRampToValueAtTime(targetFreq, now + (nowInSleepMode ? 1 : 0.15));
+
+		this.gain.gain.setTargetAtTime(0, now + 0.05, nowInSleepMode ? 0.2 : 0.1); // should be <= this.maxEffectDurationAfterGestureTrigger
+
+		playSound(nowInSleepMode ? "pause" : "unpause");
+
+		this.timeOfLastGestureTrigger = now;
+	}
+
+	setEnabled(enabled) {
+		this.enabled = enabled;
+	}
+}

package/src/autoscroll.js

@@ -0,0 +1,189 @@
+
+const indicator = document.createElement("div");
+indicator.innerHTML = `
+	<svg width="32" height="32" viewBox="0 0 32 32">
+		<!-- base shape -->
+		<circle cx="16" cy="16" r="13" fill="rgb(230, 230, 230)" stroke="rgb(50, 50, 50)" stroke-width="1" />
+		<!-- middle dot -->
+		<circle cx="16" cy="16" r="2" fill="rgb(0, 0, 0)" />
+		<!-- triangle above -->
+		<polygon data-axis="y" points="16,5 13,10 19,10" fill="rgb(0, 0, 0)" />
+		<!-- triangle below -->
+		<polygon data-axis="y" points="16,27 13,22 19,22" fill="rgb(0, 0, 0)" />
+		<!-- triangle left -->
+		<polygon data-axis="x" points="5,16 10,13 10,19" fill="rgb(0, 0, 0)" />
+		<!-- triangle right -->
+		<polygon data-axis="x" points="27,16 22,13 22,19" fill="rgb(0, 0, 0)" />
+	</svg>
+`;
+indicator.style.position = "fixed";
+indicator.style.pointerEvents = "none";
+indicator.style.transform = "translate(-50%, -50%)";
+indicator.style.zIndex = "800000"; // below .tracky-mouse-cursor and inputFeedbackCanvas
+
+const lockingClickRadius = 10; // pixels
+const scrollSpeed = 0.01;
+const scrollExponent = 1.6;
+const deadZone = 10; // pixels (taxicab distance)
+const maxDeltaTime = 100; // milliseconds
+
+
+// Block clicks with a full-page transparent element while autoscrolling,
+// so it doesn't doubly-act when stopping locked autoscroll with a click.
+const clickBlocker = document.createElement("div");
+clickBlocker.style.position = "fixed";
+clickBlocker.style.left = "0";
+clickBlocker.style.top = "0";
+clickBlocker.style.width = "100%";
+clickBlocker.style.height = "100%";
+clickBlocker.style.zIndex = "1000000";
+clickBlocker.style.pointerEvents = "auto"; // default
+clickBlocker.style.backgroundColor = "transparent"; // default (but could override weird CSS ig)
+clickBlocker.addEventListener("pointerdown", (event) => {
+	event.stopPropagation();
+	event.preventDefault();
+	autoscroll.stopAutoscroll();
+});
+
+addEventListener("keydown", (event) => {
+	if (event.key === "Escape" && autoscroll._start) {
+		event.stopPropagation();
+		event.preventDefault();
+		autoscroll.stopAutoscroll();
+	}
+}, { capture: true });
+
+export const autoscroll = {
+	_start: null,
+	_currentScrollDelta: null,
+	_lastTimestamp: null,
+	_animationFrameRequest: null,
+	pointerDown(target, x, y, buttonIndex = 0, pointerId) {
+		if (buttonIndex !== 1) {
+			this.stopAutoscroll();
+			return;
+		}
+		if (target.closest("a")) return;
+		this.startAutoscroll(target, x, y, pointerId);
+	},
+	pointerUp(_target, x, y, buttonIndex = 0, _pointerId) {
+		// Allow any pointer to stop autoscroll, because it's more likely to be annoying if it gets stuck
+		if (buttonIndex !== 1 || !this._start) return;
+		if (Math.hypot(x - this._start.x, y - this._start.y) < lockingClickRadius) {
+			return; // lock autoscroll mode until next click
+		}
+		this.stopAutoscroll();
+	},
+	startAutoscroll(target, x, y, pointerId) {
+		indicator.style.left = `${x}px`;
+		indicator.style.top = `${y}px`;
+		document.body.appendChild(indicator);
+		document.body.appendChild(clickBlocker);
+		this._start = { x, y, target, pointerId };
+		this._currentScrollDelta = null;
+		this._lastTimestamp = performance.now();
+		// Update arrow visibility immediately, and start animation loop
+		this.updateAutoscroll();
+	},
+	stopAutoscroll() {
+		this._start = null;
+		this._currentScrollDelta = null;
+		this._lastTimestamp = null;
+		if (indicator.parentElement) {
+			document.body.removeChild(indicator);
+		}
+		if (clickBlocker.parentElement) {
+			document.body.removeChild(clickBlocker);
+		}
+		cancelAnimationFrame(this._animationFrameRequest);
+		this._animationFrameRequest = null;
+	},
+	pointerMove(_target, x, y, pointerId) {
+		// Don't allow other pointers to affect autoscroll started by a different pointer
+		if (!this._start || this._start.pointerId !== pointerId) return;
+		const diff = { x: x - this._start.x, y: y - this._start.y };
+		// Note: Don't return early if within deadzone,
+		// because we still want to update the indicator arrows.
+		if (Math.abs(diff.x) < deadZone) diff.x = 0;
+		if (Math.abs(diff.y) < deadZone) diff.y = 0;
+		diff.x -= Math.sign(diff.x) * deadZone;
+		diff.y -= Math.sign(diff.y) * deadZone;
+
+		// Note: there's a question of whether to apply the exponent or multiplier first.
+		// I think with exponent after multiplier, adjusting the exponent changes the
+		// average speed less for nominal values of input/exponent/multiplier,
+		// making it more intuitive to tweak the curvature,
+		// but tweaking the multiplier may be more intuitive, at least in a strict mathematical sense,
+		// with the exponent applied first.
+		// The set of curves expressible should be equal.
+		// As an aside, switching between the two orders could be easier if we used one variable
+		// instead of both `diff` and `scrollDelta`. I doubt it would harm clarity.
+		const scrollDelta = { x: diff.x * scrollSpeed, y: diff.y * scrollSpeed };
+		scrollDelta.x = Math.sign(scrollDelta.x) * Math.pow(Math.abs(scrollDelta.x), scrollExponent);
+		scrollDelta.y = Math.sign(scrollDelta.y) * Math.pow(Math.abs(scrollDelta.y), scrollExponent);
+		this._currentScrollDelta = scrollDelta;
+	},
+	getScrollable() {
+		let container = this._start.target;
+		let canScrollX = false;
+		let canScrollY = false;
+		while (container && container !== document.body) {
+			// This initial test gives a false positive on the demo section of the website
+			// Trying an actual scroll seems like a sure test, but could cause performance issues
+			canScrollX = container.scrollWidth > container.clientWidth;
+			canScrollY = container.scrollHeight > container.clientHeight;
+			if (canScrollX || canScrollY) {
+				if (canScrollX) {
+					const oldScrollLeft = container.scrollLeft;
+					container.scrollLeft = 1;
+					if (container.scrollLeft === 0) {
+						canScrollX = false;
+					}
+					container.scrollLeft = oldScrollLeft;
+				}
+				if (canScrollY) {
+					const oldScrollTop = container.scrollTop;
+					container.scrollTop = 1;
+					if (container.scrollTop === 0) {
+						canScrollY = false;
+					}
+					container.scrollTop = oldScrollTop;
+				}
+			}
+			if (canScrollX || canScrollY) {
+				break;
+			}
+			container = container.parentElement;
+		}
+		if (!container || container === document.body) {
+			// container = document.scrollingElement;
+			container = window;
+			canScrollX = document.scrollingElement.scrollWidth > document.scrollingElement.clientWidth;
+			canScrollY = document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight;
+		}
+		return { container, canScrollX, canScrollY };
+	},
+	updateAutoscroll() {
+		const deltaTime = Math.min(maxDeltaTime, performance.now() - this._lastTimestamp);
+		// Note: we could optimize by not calling getScrollable every frame
+		const { container, canScrollX, canScrollY } = this.getScrollable();
+		const scrollDelta = this._currentScrollDelta;
+		if (scrollDelta) {
+			// Note: scrolling might be limited to integers, which could cause it to not scroll at low speeds,
+			// especially at high frame rates,
+			// and affect the accuracy of deltaTime-based movement. We could accumulate fractional scroll
+			// deltas and apply them when they reach a whole pixel.
+			container.scrollBy(scrollDelta.x * deltaTime, scrollDelta.y * deltaTime);
+		}
+
+		for (const arrow of indicator.querySelectorAll("[data-axis]")) {
+			const axis = arrow.dataset.axis;
+			arrow.style.display = (axis === "x" ? canScrollX : canScrollY) ? "" : "none";
+		}
+
+		this._lastTimestamp = performance.now();
+
+		cancelAnimationFrame(this._animationFrameRequest);
+		this._animationFrameRequest = requestAnimationFrame(() => this.updateAutoscroll());
+	},
+};