Integrate Tracky Mouse

index.html

@@ -11,6 +11,7 @@
 		<!-- <link href="lib/os-gui/windows-98.css" rel="stylesheet" type="text/css"> -->
 		<!-- <link href="lib/os-gui/windows-default.css" rel="stylesheet" type="text/css" title="Windows Default"> -->
 		<!-- <link href="lib/os-gui/peggys-pastels.css" rel="alternate stylesheet" type="text/css" title="Peggy's Pastels"> -->
+		<link href="lib/tracky-mouse/tracky-mouse.css" rel="stylesheet" type="text/css">
 
 		<link rel="apple-touch-icon" href="images/icons/apple-icon-180x180.png">
 		<!-- Chrome will pick the largest image for some reason, instead of the most appropriate one. -->
@@ -1482,6 +1483,7 @@
 		<script src="lib/FileSaver.js"></script>
 		<script src="lib/font-detective.js"></script>
 		<script src="lib/libtess.min.js"></script>
+		<script src="lib/tracky-mouse/tracky-mouse.js"></script>
 		<script src="lib/os-gui/parse-theme.js"></script>
 		<script src="lib/os-gui/$Window.js"></script>
 		<script src="lib/os-gui/$MenuBar.js"></script>

src/app.js

@@ -1261,7 +1261,61 @@ const eye_gaze_mode_config = {
 	},
 };
 
-function init_eye_gaze_mode() {
+var tracky_mouse_deps_promise;
+
+async function init_eye_gaze_mode() {
+	if (!tracky_mouse_deps_promise) {
+		TrackyMouse.dependenciesRoot = "lib/tracky-mouse";
+		tracky_mouse_deps_promise = TrackyMouse.loadDependencies();
+	}
+	await tracky_mouse_deps_promise;
+
+	const $tracky_mouse_window = $Window({
+		title: "Tracky Mouse",
+		icon: "tracky-mouse",
+	});
+	$tracky_mouse_window.addClass("tracky-mouse-window");
+	const tracky_mouse_container = $tracky_mouse_window.$content[0];
+
+	TrackyMouse.init(tracky_mouse_container);
+	TrackyMouse.useCamera();
+
+	$tracky_mouse_window.center();
+
+	let last_el_over;
+	TrackyMouse.onPointerMove = (x, y) => {
+		const target = document.elementFromPoint(x, y) || document.body;
+		if (target !== last_el_over) {
+			if (last_el_over) {
+				const event = new /*PointerEvent*/$.Event("pointerleave", Object.assign(get_event_options({ x, y }), {
+					button: 0,
+					buttons: 1,
+					bubbles: false,
+					cancelable: false,
+				}));
+				// last_el_over.dispatchEvent(event);
+				$(last_el_over).trigger(event);
+			}
+			const event = new /*PointerEvent*/$.Event("pointerenter", Object.assign(get_event_options({ x, y }), {
+				button: 0,
+				buttons: 1,
+				bubbles: false,
+				cancelable: false,
+			}));
+			// target.dispatchEvent(event);
+			$(target).trigger(event);
+			last_el_over = target;
+		}
+		const event = new PointerEvent/*$.Event*/("pointermove", Object.assign(get_event_options({ x, y }), {
+			button: 0,
+			buttons: 1,
+		}));
+		target.dispatchEvent(event);
+		// $(target).trigger(event);
+	};
+
+	// tracky_mouse_container.querySelector(".tracky-mouse-canvas").classList.add("inset-deep");
+
 	const circle_radius_max = 50; // dwell indicator size in pixels
 	const hover_timespan = 500; // how long between the dwell indicator appearing and triggering a click
 	const averaging_window_timespan = 500;

src/help.js

@@ -17,8 +17,8 @@ function show_help() {
 
 // awkward shim to interface with my own stupid code
 window.TITLEBAR_ICON_SIZE = 16;
-window.$Icon = ()=> {
-	return $("<img src='images/chm-16x16.png'>");
+window.$Icon = (name)=> {
+	return $(`<img src='images/${name}-16x16.png'>`);
 };
 
 // shared code with 98.js.org

styles/layout.css

@@ -703,7 +703,7 @@ html, body, .jspaint {
 }
 
 /* Fix label ordering for RTL layout (display inline labels can get super out of order with the checkboxes/inputs - very confusing!) */
-.window:not(.edit-colors-window) .window-content label {
+.window:not(.edit-colors-window):not(.tracky-mouse-window) .window-content label {
 	display: inline-flex;
 	flex-direction: row;
 	direction: ltr;

styles/layout.rtl.css

@@ -703,7 +703,7 @@ html, body, .jspaint {
 }
 
 /* Fix label ordering for RTL layout (display inline labels can get super out of order with the checkboxes/inputs - very confusing!) */
-.window:not(.edit-colors-window) .window-content label {
+.window:not(.edit-colors-window):not(.tracky-mouse-window) .window-content label {
 	display: inline-flex;
 	flex-direction: row;
 	direction: rtl;