tracky-mouse 2.5.0 → 2.7.0

package/README.md

@@ -147,7 +147,7 @@ This is the callback that you need to define to simulate pointer movement.
 This starts up the dwell clicker.
 
 Arguments:
-- `config.targets` (required): a CSS selector for the elements to click. Anything else will be ignored.
+- `config.targets` (required): a CSS selector for the elements to click. Anything else will be ignored (except as an occluder).
 - `config.shouldDrag(el)` (optional): a function that returns true if the element should be dragged rather than simply clicked.
 - `config.noCenter(el)` (optional): a function that returns true if the element should be clicked anywhere on the element, rather than always at the center.
 - `config.retarget` (optional): an array of `{ from, to, withinMargin }` objects, which define rules for dynamically changing what is hovered/clicked when the mouse is over a different element.
@@ -156,6 +156,7 @@ Arguments:
 	- `withinMargin` (optional): a number of pixels within which to consider the mouse over the `to` element. Default to infinity.
 - `config.isEquivalentTarget(el1, el2)` (optional): a function that returns true if two elements should be considered part of the same control, i.e. if clicking either should do the same thing. Elements that are equal are always considered equivalent even if you return false. This option is used for preventing the system from detecting occluding elements as separate controls, and rejecting the click. (When an occlusion is detected, it flashes a red box.)
 - `config.dwellClickEvenIfPaused(el)` (optional): a function that returns true if the element should be clicked even while dwell clicking is otherwise paused. Use this for a dwell clicking toggle button, so it's possible to resume dwell clicking. With dwell clicking it's important to let users take a break, since otherwise you have to constantly move the cursor in order to not click on things!
+- `config.shouldClickThrough(el)` (optional): a function that returns true if the element should be totally ignored, allowing clicking on content behind it. Prefer `pointer-events: none` when possible, which will work for all input methods. Use this only if you need to differentiate input methods. Default: `(el) => el.matches(".tracky-mouse-click-through, .tracky-mouse-click-through *")`
 - `config.click({x, y, target})` (required): a function to trigger a click on the given target element.
 - `config.beforeDispatch()` (optional): a function to call before a pointer event is dispatched. For detecting un-trusted user gestures, outside of an event handler.
 - `config.afterDispatch()` (optional): a function to call after a pointer event is dispatched. For detecting un-trusted user gestures, outside of an event handler.

package/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/images/head-not-found.svg

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64.0px"
+   height="64.0px"
+   viewBox="0 0 64.0 64.0"
+   version="1.1"
+   id="SVGRoot"
+   sodipodi:docname="head-not-found.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1054"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="true"
+     inkscape:zoom="5.828192"
+     inkscape:cx="18.787988"
+     inkscape:cy="18.616408"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1540"
+       empspacing="8"
+       originx="0"
+       originy="0"
+       spacingy="1"
+       spacingx="1"
+       units="px"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1049" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3699"
+       transform="translate(0.44861459,3.114008)"
+       inkscape:label="head/face">
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000;stroke-dasharray:1,3;stroke-dashoffset:0"
+         d="m 30.141868,12.978181 c 14.494394,-1.150235 14.279704,11.10915 12.398736,17.726188 -1.811897,6.374057 -1.014423,8.596418 -3.989219,11.681623 C 35.57659,45.471196 28.068583,46.316195 24.159832,42.123198 21.531192,39.303401 21.197535,35.865302 19.751164,31.11657 17.067937,22.306985 19.888772,13.791838 30.141868,12.978181 Z"
+         id="path1660"
+         sodipodi:nodetypes="ssssss"
+         inkscape:label="head outline" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         d="m 34.049842,27.080668 c 0.01551,1.045547 0.30038,1.817774 0.538426,2.018566 2.96671,2.50248 -1.324581,6.211798 -3.858385,3.634784"
+         id="path3273"
+         sodipodi:nodetypes="csc"
+         inkscape:label="nose" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000;stroke-dasharray:1,3;stroke-dashoffset:0"
+         d="m 37.164979,36.569026 c -1.967047,3.259348 -6.756567,4.047549 -9.731686,0.636254"
+         id="path3273-3"
+         sodipodi:nodetypes="cc"
+         inkscape:label="mouth" />
+      <path
+         d="m 29.303443,26.583633 c -0.286386,-3.512331 -5.95152,-3.14935 -6.125787,0.0025 1.177451,1.011134 4.143639,1.403238 6.125787,-0.0025 z"
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         id="path3547"
+         sodipodi:nodetypes="ccc"
+         inkscape:label="eye" />
+      <path
+         d="m 40.199316,26.313676 c -0.388768,-3.372612 -6.017232,-3.133673 -6.152333,0.105298 1.343476,1.302451 4.337462,1.588922 6.152333,-0.105298 z"
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         id="path3547-3"
+         sodipodi:nodetypes="ccc"
+         inkscape:label="eye" />
+      <circle
+         style="fill:#ffffff;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         id="path3815"
+         cx="26.390192"
+         cy="26.663704"
+         r="0.75630671"
+         inkscape:label="pupil" />
+      <circle
+         style="fill:#ffffff;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         id="path3815-2"
+         cx="37.200237"
+         cy="26.602921"
+         r="0.75630671"
+         inkscape:label="pupil" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         d="m 23.975227,24.831052 c 2.776779,-1.22921 3.865192,-0.537986 5.217286,-0.146685"
+         id="path3942"
+         sodipodi:nodetypes="cc"
+         inkscape:label="eye brow"
+         transform="translate(-0.44861459,-3.114008)" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+         d="m 34.747591,24.816768 c 2.776779,-1.22921 3.865192,-0.537986 5.217286,-0.146685"
+         id="path3942-6"
+         sodipodi:nodetypes="cc"
+         inkscape:label="eye brow"
+         transform="translate(-0.44861459,-3.114008)" />
+    </g>
+    <g
+       id="g7"
+       inkscape:label="magnifying glass"
+       transform="rotate(-35.29423,47.928286,36.354572)">
+      <circle
+         style="fill:none;stroke:#f9f9f9;stroke-linecap:round;-inkscape-stroke:none"
+         id="path4"
+         cx="43.5"
+         cy="36.5"
+         r="9"
+         inkscape:label="lens" />
+      <path
+         style="fill:none;stroke:#f9f9f9;stroke-linecap:round;-inkscape-stroke:none"
+         d="m 43,46 v 10 c 0,0 0,1 1,1 1,0 1,-1 1,-1 V 46"
+         id="path7"
+         sodipodi:nodetypes="ccscc"
+         inkscape:label="handle" />
+    </g>
+  </g>
+</svg>

package/images/manual-takeback.svg

@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64.0px"
+   height="64.0px"
+   viewBox="0 0 64.0 64.0"
+   version="1.1"
+   id="SVGRoot"
+   sodipodi:docname="manual-takeback.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1054"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="true"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="8.0000001"
+     inkscape:cx="20.8125"
+     inkscape:cy="35.8125"
+     inkscape:current-layer="layer1"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:clip-to-page="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1540"
+       empspacing="8"
+       originx="0"
+       originy="0"
+       spacingy="1"
+       spacingx="1"
+       units="px"
+       visible="false"
+       empcolor="#0099e5"
+       empopacity="0.55686275"
+       color="#0099e5"
+       opacity="0.29803922" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1049" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path4104"
+       style="fill:none;stroke:#ffffff;stroke-linecap:square;stop-color:#000000"
+       inkscape:label="mouse"
+       d="M 31.999999 16 L 31.999999 19 " />
+    <path
+       id="path30"
+       style="fill:none;stroke:#ffffff;stroke-linecap:round;stop-color:#000000"
+       inkscape:label="mouse"
+       d="M 20.749999 30 L 27.999999 30 " />
+    <path
+       id="path29"
+       style="fill:none;stroke:#ffffff;stroke-linecap:square;stop-color:#000000"
+       inkscape:label="mouse"
+       d="M 30.13762 25.321063 C 29.999999 24.639123 29.999999 23.81956 29.999999 23 C 29.999999 21.000002 30.000001 19 31.999999 19 C 33.899211 19 33.99492 20.803509 33.999743 22.697898 " />
+    <path
+       id="path26"
+       style="fill:none;stroke:#ffffff;stroke-linecap:round;stop-color:#000000"
+       inkscape:label="mouse"
+       d="M 23.926371 45.094776 C 20.801453 42.003936 20 36.894562 20 32 C 20 24.268022 22.000009 16 32 16 C 38.458981 16 41.580495 19.449298 42.981274 23.975549 " />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+       d="M 7.0111673,32 H 18.999999"
+       id="path3594"
+       sodipodi:nodetypes="cc"
+       inkscape:label="stem" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+       d="M 11.210169,35.866575 6.3738751,31.919639 11.166217,27.998078"
+       id="path3596"
+       sodipodi:nodetypes="ccc"
+       inkscape:label="head" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+       d="M 59.988831,32 H 53"
+       id="path20"
+       sodipodi:nodetypes="cc"
+       inkscape:label="stem" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+       d="m 55.789829,35.866575 4.836294,-3.946936 -4.792342,-3.921561"
+       id="path21"
+       sodipodi:nodetypes="ccc"
+       inkscape:label="head" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+       d="M 31.999999,4.005584 V 15.994416"
+       id="path18"
+       sodipodi:nodetypes="cc"
+       inkscape:label="stem" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:square;stop-color:#000000"
+       d="M 35.866574,8.2045861 31.919638,3.3682918 27.998077,8.1606341"
+       id="path19"
+       sodipodi:nodetypes="ccc"
+       inkscape:label="head" />
+    <path
+       id="path9"
+       style="fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;-inkscape-stroke:none"
+       d="m 46,28 c 0,0 2.095179,2.919938 2.53125,4 C 48.912909,32.945295 50,40 50,40 M 39,26 c 0,0 4.556424,5.014257 5,6 0.582452,1.294361 1,8 1,8 M 32,26 c 0,0 6.464592,7 7,8 0.648718,1.211633 1,6 1,6"
+       inkscape:label="finger overlap lines"
+       sodipodi:nodetypes="csccsccsc" />
+    <path
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;-inkscape-stroke:none"
+       d="M 32,63 C 32,63 25.133038,51.99557 25,50 L 23.472906,43 C 23.461073,42.035965 23.889387,41.358925 24,40 c 0.118866,-1.460319 -0.07643,-3.615892 0,-5 0,0 5,0 5,3 v 6 c 0,2 3,4 4,4 1,0 2,0 2,-1 V 41 C 35,40.644095 34.23999,36.654849 33.215871,35.483079 31.362482,33.362482 28.644095,30.644095 28,30 27,29 27.022097,27.116117 28.0221,26.116117 29.022097,25.116117 30.828641,25 32,26 c -0.149262,-1.298311 0,-2.37565 1,-3 1.199602,-0.748971 3,0 4,1 l 2,2 c 0,0 -0.425206,-1.5 0.574794,-2.5 1,-1 2.576678,-0.631371 3.425206,0.5 l 3,4 c 0,0 -0.151205,-1.424398 1,-2 2,-1 4.817482,4.62588 5,5 0.487858,1 2.035456,6.236811 3,9.40625 C 55.345413,42.274422 55,43 55,46 v 17 z"
+       id="path6"
+       inkscape:label="hand"
+       sodipodi:nodetypes="cscscsssssssscsccsscsssscc" />
+  </g>
+</svg>