Fix Input Mapping V2 device and gesture wiring - PR_26140_115-fix-input-mapping-v2-device-gesture-wiring

Author: ToolboxAid

docs/dev/reports/input_mapping_v2_device_gesture_wiring_report.md

@@ -0,0 +1,28 @@
+# Input Mapping V2 Device/Gesture Wiring Report
+
+PR: PR_26140_115-fix-input-mapping-v2-device-gesture-wiring
+
+## Summary
+- Renamed the center-column Capture accordion to `Input Device(s)` and Gestures to `Capture Gestures`, with no braces in either visible label.
+- Disabled and grayed `Input Device(s)` until the selected action has an existing tile, and disabled `Capture Gestures` until an input device is selected.
+- Enforced device-first capture flow: selecting an input device enables only that device's gesture group, and stale selected gestures no longer auto-arm when a device is clicked after capture completion.
+- Removed visible Mouse Wheel Left/Right gesture descriptors because PR_115 only requires visible/wired Wheel Up and Wheel Down; underlying wheel input support remains available through the engine where used by existing capture/combo paths.
+- Preserved selected action/tile behavior, token deletion, mapping scroll behavior, Export/Copy JSON, engine-backed combo capture, and game controller release capture through engine input services.
+
+## Gesture Wiring
+- Keyboard: Press, Release, Hold, Combo are visible when Keyboard is selected and are covered by focused Playwright capture paths.
+- Mouse: Click, Double Click, Drag, Drag Release, Wheel Up, Wheel Down, Combo are visible when Mouse is selected and are covered by focused Playwright capture paths.
+- Game Controller: Btn Press, Btn Hold, Btn Release, Trigger, Stick, DPad, Combo are visible when a Game Controller input device is selected and are covered by focused Playwright capture paths.
+- Btn Release continues to capture on release, not press, via `src/engine/input/**` state consumed by Input Mapping V2.
+- Combo capture continues to use the engine-backed combo state path rather than a tool-local-only model.
+
+## Validation
+- PASS: targeted syntax validation with `node --check` for changed engine/input, Input Mapping V2, and Playwright files.
+- PASS: targeted module import validation for changed engine/input and Input Mapping V2 JS modules.
+- PASS: focused Input Mapping V2 Playwright coverage: 11 passed.
+- PASS: `npm run test:workspace-v2`: 70 passed.
+- SKIPPED as requested: full samples smoke test.
+
+## Schema/Samples
+- No schemas changed.
+- No sample JSON touched.

src/engine/input/InputCapabilityDescriptors.js

@@ -75,8 +75,6 @@ const GESTURE_DEFINITIONS = Object.freeze([
     pointerGesture('MousePrimaryDragRelease', 'Drag Release', 'Mouse Drag Release. Use for completed drag gestures, such as box-selecting objects from start/end positions.', 'mouse'),
     wheelGesture('MouseWheelUp', 'Wheel Up', 'Mouse Wheel Up. Use for zoom, scrolling, or cycling selections.'),
     wheelGesture('MouseWheelDown', 'Wheel Down', 'Mouse Wheel Down. Use for zoom, scrolling, or cycling selections.'),
-    wheelGesture('MouseWheelLeft', 'Wheel Left', 'Mouse Wheel Left. Use for horizontal scrolling or cycling selections.'),
-    wheelGesture('MouseWheelRight', 'Wheel Right', 'Mouse Wheel Right. Use for horizontal scrolling or cycling selections.'),
     comboGesture('MouseCombo', 'Mouse', ['mouse'], 'Mouse Combo. Use for combinations such as Shift + Mouse Right Button. Capture keyboard, mouse, wheel, or controller inputs for one selected action.'),
     gameControllerGesture('GameControllerButtonPress', 'Btn Press', 'Game controller button press. Use when an action should trigger on the transition from up to down.', 'gameController'),
     gameControllerGesture('GameControllerButtonHold', 'Btn Hold', 'Game controller button hold. Use while a game controller button remains held.', 'gameController'),

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -105,7 +105,7 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
       <section class="tool-starter__panel tool-starter__panel--center" aria-label="Captured mappings">
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <div class="accordion-v2__header input-mapping-v2__capture-header" aria-expanded="true" aria-controls="captureInputContent">
-            <span>Capture</span>
+            <span>Input Device(s)</span>
             <div class="input-mapping-v2__capture-header-actions">
               <label class="input-mapping-v2__context-toggle" for="inputMappingV2DisableContextCheckbox">
                 <input id="inputMappingV2DisableContextCheckbox" type="checkbox">
@@ -133,7 +133,7 @@ <h2 class="tools-platform-frame__eyebrow">Input Sources and Action Mapping</h2>
 
         <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="gestureSetupContent">
-            <span>Gestures</span>
+            <span>Capture Gestures</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
           </button>
           <div id="gestureSetupContent" class="accordion-v2__content">

tools/input-mapping-v2/index.html

@@ -153,6 +153,8 @@ export class ToolStarterApp {
   deleteSelectedAction() {
     const result = this.state.deleteSelectedAction();
     this.statusLog[result.ok ? "ok" : "warn"](result.message);
+    this.clearSelectedCaptureDevice();
+    this.clearCapture();
     this.refreshActions();
   }
 
@@ -176,8 +178,9 @@ export class ToolStarterApp {
       this.cancelCapture("Keyboard");
       return;
     }
+    const hadSelectedCaptureDevice = this.selectedCaptureSource === "keyboard" && this.selectedCaptureId === "keyboard";
     this.selectCaptureDevice("keyboard", "keyboard", "Keyboard");
-    if (!this.selectedGestureForCaptureSource("keyboard")) {
+    if (!hadSelectedCaptureDevice || !this.selectedGestureForCaptureSource("keyboard")) {
       this.capture.showMessage(`Keyboard capture device selected for ${this.state.selectedActionLabel()}. Choose a Keyboard gesture to capture.`);
       this.statusLog.ok(`Keyboard capture device selected for ${this.state.selectedActionLabel()}.`);
       this.refreshActions();
@@ -204,8 +207,9 @@ export class ToolStarterApp {
       this.cancelCapture("Mouse");
       return;
     }
+    const hadSelectedCaptureDevice = this.selectedCaptureSource === "mouse" && this.selectedCaptureId === "mouse";
     this.selectCaptureDevice("mouse", "mouse", "Mouse");
-    if (!this.selectedGestureForCaptureSource("mouse")) {
+    if (!hadSelectedCaptureDevice || !this.selectedGestureForCaptureSource("mouse")) {
       this.capture.showMessage(`Mouse capture device selected for ${this.state.selectedActionLabel()}. Choose a Mouse gesture to capture.`);
       this.statusLog.ok(`Mouse capture device selected for ${this.state.selectedActionLabel()}.`);
       this.refreshActions();
@@ -256,8 +260,9 @@ export class ToolStarterApp {
       this.cancelCapture(`Gamepad ${selectedIndex}`);
       return;
     }
+    const hadSelectedCaptureDevice = this.selectedCaptureSource === "gamepad" && this.selectedCaptureId === captureId;
     this.selectCaptureDevice("gamepad", captureId, `Gamepad ${selectedIndex}`);
-    if (!this.selectedGestureForCaptureSource("gamepad")) {
+    if (!hadSelectedCaptureDevice || !this.selectedGestureForCaptureSource("gamepad")) {
       this.capture.showMessage(`Gamepad ${selectedIndex} capture device selected for ${this.state.selectedActionLabel()}. Choose a Game Controller gesture to capture.`);
       this.statusLog.ok(`Gamepad ${selectedIndex} capture device selected for ${this.state.selectedActionLabel()}.`);
       this.refreshActions();
@@ -1076,18 +1081,20 @@ export class ToolStarterApp {
     const gestures = this.engineInputSources.gestures(this.enabledDeviceIds);
     const actions = this.state.actions();
     const selectedAction = actions.find((action) => action.id === this.state.selectedActionId);
+    const hasSelectedActionTile = this.state.selectedActionHasTile();
     this.actionNav.setToolActionsEnabled(true);
     this.exportControl.setEnabled(true);
     this.actionSelection.render(actions, this.state.selectedActionId);
     this.deviceList.render(devices, this.enabledDeviceIds, gamepadStatus.haptics, this.selectedRumbleSettings());
-    this.gestureList.render(gestures, this.selectedGesture?.binding ?? "", this.captureGestureSourceFilter());
+    this.gestureList.render(gestures, this.selectedGesture?.binding ?? "", this.captureGestureSourceFilter(), hasSelectedActionTile);
     this.capture.render(
       this.state.selectedActionLabel(),
       gamepadStatus.gamepads,
       selectedAction?.inputs ?? [],
       this.captureMode,
       this.captureAvailability(),
-      this.selectedCaptureId || this.activeCaptureId
+      this.selectedCaptureId || this.activeCaptureId,
+      hasSelectedActionTile
     );
     this.preview.render(
       this.engineInputSources.actionsWithActiveInputState(actions),

tools/input-mapping-v2/js/ToolStarterApp.js

@@ -38,15 +38,18 @@ export class CaptureControl {
     this.refreshGamepadsButton.addEventListener("click", onRefreshGamepads);
   }
 
-  render(actionLabel, gamepads = [], selectedInputs = [], captureMode = "", captureAvailability = allCaptureAvailable(), selectedCaptureId = "") {
+  render(actionLabel, gamepads = [], selectedInputs = [], captureMode = "", captureAvailability = allCaptureAvailable(), selectedCaptureId = "", canSelectInputDevice = true) {
     this.selectedCaptureId = selectedCaptureId;
     this.selectedActionLabel.textContent = `Selected action: ${actionLabel}`;
     const canHighlightUsedInputs = true;
-    this.setCaptureButtonEnabled(this.captureKeyboardButton, captureAvailability.keyboard, "keyboard");
-    this.setCaptureButtonEnabled(this.captureMouseButton, captureAvailability.mouse, "mouse");
+    this.setSectionDisabled(!canSelectInputDevice);
+    this.setCaptureButtonEnabled(this.captureKeyboardButton, canSelectInputDevice && captureAvailability.keyboard, "keyboard");
+    this.setCaptureButtonEnabled(this.captureMouseButton, canSelectInputDevice && captureAvailability.mouse, "mouse");
+    this.refreshGamepadsButton.disabled = !canSelectInputDevice;
+    this.refreshGamepadsButton.ariaDisabled = this.refreshGamepadsButton.disabled ? "true" : "false";
     this.captureKeyboardButton.classList.toggle("has-used-input", canHighlightUsedInputs && selectedInputs.some(usesKeyboard));
     this.captureMouseButton.classList.toggle("has-used-input", canHighlightUsedInputs && selectedInputs.some(usesMouse));
-    this.renderGamepadButtons(gamepads, selectedInputs, canHighlightUsedInputs, captureAvailability.gamepad);
+    this.renderGamepadButtons(gamepads, selectedInputs, canHighlightUsedInputs, canSelectInputDevice && captureAvailability.gamepad);
     this.applySelectedCaptureState();
     this.applyCaptureState();
   }
@@ -152,6 +155,12 @@ export class CaptureControl {
     });
   }
 
+  setSectionDisabled(isDisabled) {
+    this.captureKeyboardButton
+      .closest(".tool-starter__accordion")
+      ?.classList.toggle("input-mapping-v2__section-disabled", isDisabled);
+  }
+
   allCaptureButtons() {
     return [
       this.captureKeyboardButton,

tools/input-mapping-v2/js/controls/CaptureControl.js

@@ -8,7 +8,8 @@ export class GestureListControl {
     this.onGestureSelected = onGestureSelected;
   }
 
-  render(gestures, selectedGestureBinding = "", selectedCaptureSource = "") {
+  render(gestures, selectedGestureBinding = "", selectedCaptureSource = "", canCaptureGesture = true) {
+    this.setSectionDisabled(!canCaptureGesture || !selectedCaptureSource);
     if (!gestures.length) {
       const empty = document.createElement("p");
       empty.className = "tool-starter__hint";
@@ -18,12 +19,12 @@ export class GestureListControl {
     }
 
     const groups = groupGestures(gestures);
-    this.container.replaceChildren(...groups.map((group) => this.createGestureGroup(group, selectedGestureBinding, selectedCaptureSource)));
+    this.container.replaceChildren(...groups.map((group) => this.createGestureGroup(group, selectedGestureBinding, selectedCaptureSource, canCaptureGesture)));
   }
 
-  createGestureGroup(group, selectedGestureBinding, selectedCaptureSource) {
+  createGestureGroup(group, selectedGestureBinding, selectedCaptureSource, canCaptureGesture) {
     const section = document.createElement("article");
-    const isDisabled = Boolean(selectedCaptureSource) && group.source !== selectedCaptureSource;
+    const isDisabled = !canCaptureGesture || !selectedCaptureSource || group.source !== selectedCaptureSource;
     section.className = `input-mapping-v2__gesture-group${isDisabled ? " is-disabled" : ""}`;
     section.dataset.inputMappingGestureDevice = group.deviceLabel;
     section.dataset.inputMappingGestureSource = group.source;
@@ -33,17 +34,17 @@ export class GestureListControl {
 
     const list = document.createElement("div");
     list.className = "input-mapping-v2__gesture-list";
-    list.append(...group.gestures.map((gesture) => this.createGestureButton(gesture, selectedGestureBinding, selectedCaptureSource)));
+    list.append(...group.gestures.map((gesture) => this.createGestureButton(gesture, selectedGestureBinding, selectedCaptureSource, canCaptureGesture)));
 
     section.append(title, list);
     return section;
   }
 
-  createGestureButton(gesture, selectedGestureBinding, selectedCaptureSource) {
+  createGestureButton(gesture, selectedGestureBinding, selectedCaptureSource, canCaptureGesture) {
     const button = document.createElement("button");
     button.type = "button";
     const isSelected = gesture.binding === selectedGestureBinding;
-    const isDisabled = Boolean(selectedCaptureSource) && gesture.source !== selectedCaptureSource;
+    const isDisabled = !canCaptureGesture || !selectedCaptureSource || gesture.source !== selectedCaptureSource;
     button.className = `input-mapping-v2__gesture-button${isSelected ? " is-selected" : ""}${isDisabled ? " is-disabled" : ""}`;
     button.dataset.inputMappingGestureBinding = gesture.binding;
     button.dataset.inputMappingGestureSource = gesture.source;
@@ -65,6 +66,12 @@ export class GestureListControl {
     });
     return button;
   }
+
+  setSectionDisabled(isDisabled) {
+    this.container
+      .closest(".tool-starter__accordion")
+      ?.classList.toggle("input-mapping-v2__section-disabled", isDisabled);
+  }
 }
 
 function groupGestures(gestures) {

tools/input-mapping-v2/js/controls/GestureListControl.js

@@ -71,6 +71,11 @@
   font-weight: 700;
 }
 
+.input-mapping-v2__section-disabled > .accordion-v2__header,
+.input-mapping-v2__section-disabled > .accordion-v2__content {
+  opacity: 0.58;
+}
+
 .input-mapping-v2 #inputMappingV2CaptureKeyboardButton,
 .input-mapping-v2 #inputMappingV2CaptureMouseButton,
 .input-mapping-v2__gamepad-capture-button {