Refactor mouse joystick to use proper API instead of direct event handling

- Replace event-driven approach with clean API methods: onMouseMove(), onMouseDown(), onMouseUp(), isEnabled()
- Update main.js to use API methods instead of direct property manipulation
- Fix config change handler to use updated parsedQuery values for immediate UI response
- Remove debug console.log statements from MouseJoystickSource and VIA
- Update tests to reflect new API-based approach
- Remove event listener registration/cleanup code

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: mattgodbolt

src/main.js

@@ -245,7 +245,7 @@ const config = new Config(function (changed) {
     }
     // Handle ADC source changes
     if (changed.mouseJoystickEnabled !== undefined || changed.microphoneChannel !== undefined) {
-        // Update sources based on new settings
+        // Update sources based on new settings (parsedQuery already updated with changed values)
         updateAdcSources(parsedQuery.mouseJoystickEnabled, parsedQuery.microphoneChannel);
 
         // Handle microphone initialization if needed
@@ -421,7 +421,23 @@ $cub.on("mousemove mousedown mouseup", function (evt) {
     const screenOffset = $screen.offset();
     const x = (evt.offsetX - cubOffset.left + screenOffset.left) / $screen.width();
     const y = (evt.offsetY - cubOffset.top + screenOffset.top) / $screen.height();
+
+    // Handle touchscreen
     if (processor.touchScreen) processor.touchScreen.onMouse(x, y, evt.buttons);
+
+    // Handle mouse joystick if enabled
+    if (parsedQuery.mouseJoystickEnabled && mouseJoystickSource.isEnabled()) {
+        // Use the API methods instead of direct manipulation
+        mouseJoystickSource.onMouseMove(x, y);
+
+        // Handle button events
+        if (evt.type === "mousedown" && evt.button === 0) {
+            mouseJoystickSource.onMouseDown(0);
+        } else if (evt.type === "mouseup" && evt.button === 0) {
+            mouseJoystickSource.onMouseUp(0);
+        }
+    }
+
     evt.preventDefault();
 });
 

src/mouse-joystick-source.js

@@ -16,115 +16,59 @@ export class MouseJoystickSource extends AnalogueSource {
         this.mouseY = 0.5; // Normalized position (0-1)
         this.isActive = false;
         this.via = null; // Will be set later
-
-        // Bind event handlers
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleMouseEnter = this.handleMouseEnter.bind(this);
-        this.handleMouseLeave = this.handleMouseLeave.bind(this);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.handleGlobalMouseMove = this.handleGlobalMouseMove.bind(this);
-
-        // Attach event listeners
-        this.canvas.addEventListener("mousemove", this.handleMouseMove);
-        this.canvas.addEventListener("mouseenter", this.handleMouseEnter);
-        this.canvas.addEventListener("mouseleave", this.handleMouseLeave);
-        this.canvas.addEventListener("mousedown", this.handleMouseDown);
-        this.canvas.addEventListener("mouseup", this.handleMouseUp);
-
-        // Also listen to global mouse moves to track position even when not over canvas
-        document.addEventListener("mousemove", this.handleGlobalMouseMove);
     }
 
     /**
-     * Handle mouse movement over the canvas
-     * @param {MouseEvent} event - The mouse event
+     * Set the VIA reference for button handling
+     * @param {object} via - The system VIA
      */
-    handleMouseMove(event) {
-        if (!this.isActive) return;
-
-        const rect = this.canvas.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-
-        // Normalize to 0-1 range
-        this.mouseX = x / rect.width;
-        this.mouseY = y / rect.height;
-
-        // Clamp values
-        this.mouseX = Math.max(0, Math.min(1, this.mouseX));
-        this.mouseY = Math.max(0, Math.min(1, this.mouseY));
+    setVia(via) {
+        this.via = via;
     }
 
     /**
-     * Handle mouse entering the canvas
+     * Handle mouse movement event from external handler
+     * @param {number} x - Normalized X position (0-1)
+     * @param {number} y - Normalized Y position (0-1)
      */
-    handleMouseEnter() {
+    onMouseMove(x, y) {
+        this.mouseX = Math.max(0, Math.min(1, x));
+        this.mouseY = Math.max(0, Math.min(1, y));
         this.isActive = true;
     }
 
     /**
-     * Handle mouse leaving the canvas
+     * Handle mouse button press from external handler
+     * @param {number} button - Mouse button number (0 = left, 1 = middle, 2 = right)
      */
-    handleMouseLeave() {
-        this.isActive = false;
-        // Don't center when mouse leaves - keep last position
-    }
-
-    /**
-     * Handle global mouse movement (even when not over canvas)
-     * @param {MouseEvent} event - The mouse event
-     */
-    handleGlobalMouseMove(event) {
-        const rect = this.canvas.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
-
-        // Normalize to 0-1 range
-        this.mouseX = x / rect.width;
-        this.mouseY = y / rect.height;
-
-        // Clamp values to 0-1 range
-        this.mouseX = Math.max(0, Math.min(1, this.mouseX));
-        this.mouseY = Math.max(0, Math.min(1, this.mouseY));
-    }
-
-    /**
-     * Handle mouse button press
-     * @param {MouseEvent} event - The mouse event
-     */
-    handleMouseDown(event) {
-        if (!this.isActive || !this.via) return;
+    onMouseDown(button) {
+        if (!this.via) return;
 
         // Only handle left mouse button (button 0)
-        if (event.button === 0) {
-            // Set fire button 1 pressed (PB4)
+        if (button === 0) {
             this.via.setJoystickButton(0, true);
-            event.preventDefault();
         }
     }
 
     /**
-     * Handle mouse button release
-     * @param {MouseEvent} event - The mouse event
+     * Handle mouse button release from external handler
+     * @param {number} button - Mouse button number (0 = left, 1 = middle, 2 = right)
      */
-    handleMouseUp(event) {
+    onMouseUp(button) {
         if (!this.via) return;
 
         // Only handle left mouse button (button 0)
-        if (event.button === 0) {
-            // Release fire button 1 (PB4)
+        if (button === 0) {
             this.via.setJoystickButton(0, false);
-            event.preventDefault();
         }
     }
 
     /**
-     * Set the VIA reference for button handling
-     * @param {object} via - The system VIA
+     * Check if mouse joystick is enabled and ready
+     * @returns {boolean} True if mouse joystick can handle events
      */
-    setVia(via) {
-        this.via = via;
+    isEnabled() {
+        return !!this.via;
     }
 
     /**
@@ -152,15 +96,12 @@ export class MouseJoystickSource extends AnalogueSource {
     }
 
     /**
-     * Clean up event listeners when source is no longer needed
+     * Clean up when source is no longer needed
      * Called by ADC when switching to a different source
      */
     dispose() {
-        this.canvas.removeEventListener("mousemove", this.handleMouseMove);
-        this.canvas.removeEventListener("mouseenter", this.handleMouseEnter);
-        this.canvas.removeEventListener("mouseleave", this.handleMouseLeave);
-        this.canvas.removeEventListener("mousedown", this.handleMouseDown);
-        this.canvas.removeEventListener("mouseup", this.handleMouseUp);
-        document.removeEventListener("mousemove", this.handleGlobalMouseMove);
+        // Reset state
+        this.via = null;
+        this.isActive = false;
     }
 }