Simplify Input Mapping V2 mouse gestures - PR_26140_100-simplify-input-mapping-v2-mouse-gestures

Author: ToolboxAid

docs/dev/reports/input_mapping_v2_mouse_gesture_simplification_report.md

@@ -0,0 +1,54 @@
+# Input Mapping V2 Mouse Gesture Simplification Report
+
+## Scope
+- PR: PR_26140_100-simplify-input-mapping-v2-mouse-gestures
+- Source of truth: user PR_100 request. `docs/pr/BUILD_PR.md` still points at an unrelated Level 18 overlay runtime hardening rebase, so this workflow used the explicit PR_100 request after reading `docs/dev/PROJECT_INSTRUCTIONS.md`.
+
+## Changes Applied
+- Removed the visible `Drag Rectangle` mouse gesture from Input Mapping V2 gesture descriptors.
+- Preserved `Drag Release` as the visible drag completion gesture.
+- Preserved internal `PointerDragState` rectangle/bounds tracking and attached the current pointer drag snapshot to Drag Release runtime captures.
+- Added bounds detail to Drag Release captured token title text without changing the persisted Input Mapping V2 schema payload.
+- Stopped gesture button pointer events from bubbling into the tool-level engine input listener so clicking `Drag Release` does not overwrite the drag bounds it is capturing.
+- Preserved wheel gesture options for `Wheel Up`, `Wheel Down`, `Wheel Left`, and `Wheel Right`.
+- Confirmed raw `Mouse Move X/Y` is not exposed as a selectable mapping option.
+- Tightened Gesture/Capture spacing and reduced Capture button heights.
+
+## Contracts And Constraints
+- No schema changes.
+- No sample JSON changes.
+- No full samples smoke test; skipped per request because this is scoped to Input Mapping V2 and engine input descriptors.
+- Drag bounds are runtime/tool-local metadata (`input.pointerDrag`) and hover/title detail only; they are intentionally not persisted in the strict schema payload.
+
+## Validation
+- `node --check src/engine/input/InputCapabilityDescriptors.js`: PASS
+- `node --check src/engine/input/PointerDragState.js`: PASS
+- `node --check tools/input-mapping-v2/js/services/EngineInputSourceService.js`: PASS
+- `node --check tools/input-mapping-v2/js/controls/GestureListControl.js`: PASS
+- `node --check tests/input/InputService.test.mjs`: PASS
+- `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`: PASS
+- `node -e "const test = await import('./tests/input/InputService.test.mjs'); test.run();"`: PASS
+- `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list --grep "Input Mapping V2"`: PASS, 2 tests after compact-height alignment fix
+- `npm run test:workspace-v2`: PASS, 61 tests
+- `git diff --check`: PASS, line-ending warnings only
+- HTML inline script/style/handler scan: PASS, no matches
+- Sample/JSON diff scan: PASS, no changed sample or JSON files
+- Playwright V8 coverage report: PASS, changed runtime JS listed in `docs/dev/reports/playwright_v8_coverage_report.txt` and `coverage_changed_js_guardrail.txt`
+- Full samples smoke test: not run, per request
+- Delta ZIP verification: PASS, 13 files, nonzero size
+
+## Playwright Coverage
+- Confirms `Drag Rectangle` is not visible.
+- Confirms `Drag Release` remains visible and maps to `MousePrimaryDragRelease`.
+- Confirms Drag Release token title includes drag bounds from `PointerDragState`.
+- Confirms `Mouse Wheel Up`, `Mouse Wheel Down`, `Mouse Wheel Left`, and `Mouse Wheel Right` remain visible/capturable.
+- Confirms raw `Mouse Move X/Y` is not visible as a mapping option.
+- Confirms compact Gesture/Capture spacing and reduced capture button heights.
+
+## Manual Validation
+1. Open `tools/input-mapping-v2/index.html`.
+2. In Gestures, confirm Mouse shows Drag Release but not Drag Rectangle.
+3. Confirm Wheel Up, Wheel Down, Wheel Left, and Wheel Right are still shown.
+4. Confirm no raw Mouse Move X/Y option appears.
+5. Drag in the page, then click Drag Release and hover the captured token; bounds should be shown in the title text.
+6. Confirm Capture buttons are shorter and the spacing from Gestures/Capture into Captured Mappings is tighter.

src/engine/input/InputCapabilityDescriptors.js

@@ -81,7 +81,6 @@ const GESTURE_DEFINITIONS = Object.freeze([
     mouseGesture('MouseDoubleClick', 'Double Click', 'Mouse double click', 'mouse'),
     pointerGesture('MousePrimaryDrag', 'Drag', 'Mouse drag', 'mouse'),
     pointerGesture('MousePrimaryDragRelease', 'Drag Release', 'Mouse drag release', 'mouse'),
-    pointerGesture('MousePrimaryDragRectangle', 'Drag Rectangle', 'Mouse drag rectangle', 'mouse'),
     wheelGesture('MouseWheelUp', 'Wheel Up', 'Mouse wheel up', ['mouse', 'wheel']),
     wheelGesture('MouseWheelDown', 'Wheel Down', 'Mouse wheel down', ['mouse', 'wheel']),
     wheelGesture('MouseWheelLeft', 'Wheel Left', 'Mouse wheel left', ['mouse', 'wheel']),

tests/input/InputService.test.mjs

@@ -77,10 +77,14 @@ export function run() {
     const dragRectangle = input.getPointerDragDescriptor('MousePrimaryDragRectangle');
     assert(dragRectangle.label === 'Mouse Drag Rectangle', 'Pointer drag descriptors should expose rectangle gestures.');
     assert(dragRectangle.source === 'mouse', 'Pointer drag descriptors should remain schema-compatible mouse inputs.');
+    const dragRelease = input.getPointerDragDescriptor('MousePrimaryDragRelease');
+    assert(dragRelease.snapshot.dragBounds.width === 40, 'Drag release descriptors should carry drag bounds width.');
+    assert(dragRelease.snapshot.dragBounds.height === 40, 'Drag release descriptors should carry drag bounds height.');
     const capabilities = input.getInputDeviceCapabilities({ gamepadCount: 0 });
     assert(capabilities.some((device) => device.label === 'VR Controller'), 'Input capabilities should expose safe VR controller descriptors.');
     const gestures = input.getInputGestureDescriptors({ enabledDeviceIds: ['keyboard', 'mouse', 'wheel'] });
     assert(gestures.some((gesture) => gesture.binding === 'MouseWheelUp'), 'Input gestures should expose wheel descriptors when wheel is enabled.');
+    assert(!gestures.some((gesture) => gesture.binding === 'MousePrimaryDragRectangle'), 'Visible input gestures should not expose Drag Rectangle.');
 
     input.detach();
 }

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -1515,9 +1515,26 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#inputMappingV2DeviceList")).toContainText("InputService + MouseState + PointerDragState");
       await expect(page.locator("#inputMappingV2DeviceList")).toContainText("InputService + GamepadState + GamepadInputAdapter");
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Press");
-      await expect(page.locator("#inputMappingV2GestureList")).toContainText("Drag Rectangle");
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Wheel Up");
+      await expect(page.locator("#inputMappingV2GestureList")).toContainText("Wheel Down");
+      await expect(page.locator("#inputMappingV2GestureList")).toContainText("Wheel Left");
+      await expect(page.locator("#inputMappingV2GestureList")).toContainText("Wheel Right");
+      await expect(page.locator("#inputMappingV2GestureList")).toContainText("Drag Release");
+      await expect(page.locator("#inputMappingV2GestureList")).not.toContainText("Drag Rectangle");
+      await expect(page.locator("#inputMappingV2GestureList")).not.toContainText(/Mouse Move [XY]/);
       await expect(page.locator("#inputMappingV2GestureList")).toContainText("Button");
+      const compactAccordionSpacing = await page.locator("#gestureSetupContent, #captureInputContent").evaluateAll((contents) => (
+        contents.map((content) => ({
+          columnGap: getComputedStyle(content).columnGap,
+          id: content.id,
+          paddingBottom: getComputedStyle(content).paddingBottom,
+          rowGap: getComputedStyle(content).rowGap
+        }))
+      ));
+      expect(compactAccordionSpacing).toEqual(expect.arrayContaining([
+        expect.objectContaining({ id: "gestureSetupContent", paddingBottom: "6px" }),
+        expect.objectContaining({ id: "captureInputContent", paddingBottom: "6px", rowGap: "6px" })
+      ]));
       const gestureFlowLayout = await page.locator("#inputMappingV2GestureList").evaluate((container) => {
         const wantedGroups = ["Keyboard", "Mouse", "Game Controller"];
         const groupLayouts = wantedGroups.map((label) => {
@@ -1567,6 +1584,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         const rectFor = (selector) => {
           const box = content.querySelector(selector).getBoundingClientRect();
           return {
+            height: Math.round(box.height),
             left: Math.round(box.left),
             top: Math.round(box.top),
             width: Math.round(box.width)
@@ -1581,7 +1599,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         };
       });
       expect(captureFlowLayout.keyboard.width).toBeGreaterThan(110);
+      expect(captureFlowLayout.keyboard.height).toBeLessThanOrEqual(36);
       expect(captureFlowLayout.mouse.width).toBeGreaterThan(110);
+      expect(captureFlowLayout.mouse.height).toBeLessThanOrEqual(36);
       expect(captureFlowLayout.mouse.left).toBeGreaterThan(captureFlowLayout.keyboard.left);
       expect(Math.abs(captureFlowLayout.mouse.top - captureFlowLayout.keyboard.top)).toBeLessThanOrEqual(1);
       expect(captureFlowLayout.note.top).toBeGreaterThan(captureFlowLayout.keyboard.top);
@@ -1703,8 +1723,38 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         }));
       });
       await expect(page.locator("#inputMappingV2CaptureMouseButton")).not.toHaveClass(/is-capturing/);
+      await page.evaluate(() => {
+        window.dispatchEvent(new PointerEvent("pointerdown", {
+          bubbles: true,
+          button: 0,
+          cancelable: true,
+          clientX: 12,
+          clientY: 16,
+          pointerId: 9,
+          pointerType: "mouse"
+        }));
+        window.dispatchEvent(new PointerEvent("pointermove", {
+          bubbles: true,
+          button: 0,
+          buttons: 1,
+          cancelable: true,
+          clientX: 52,
+          clientY: 66,
+          pointerId: 9,
+          pointerType: "mouse"
+        }));
+        window.dispatchEvent(new PointerEvent("pointerup", {
+          bubbles: true,
+          button: 0,
+          buttons: 0,
+          cancelable: true,
+          clientX: 72,
+          clientY: 96,
+          pointerId: 9,
+          pointerType: "mouse"
+        }));
+      });
       await page.locator(".input-mapping-v2__gesture-button", { hasText: "Drag Release" }).click();
-      await page.locator(".input-mapping-v2__gesture-button", { hasText: "Drag Rectangle" }).click();
       await expect(page.locator(".input-mapping-v2__mapping-card")).toHaveCount(1);
       const mappingTileBox = await page.locator(".input-mapping-v2__mapping-card").first().boundingBox();
       expect(Math.round(mappingTileBox.width)).toBe(225);
@@ -1714,13 +1764,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#previewOutput")).toContainText("Keyboard KeyD");
       await expect(page.locator("#previewOutput")).toContainText("Mouse Middle Button");
       await expect(page.locator("#previewOutput")).toContainText("Mouse Drag Release");
-      await expect(page.locator("#previewOutput")).toContainText("Mouse Drag Rectangle");
+      await expect(page.locator("#previewOutput")).not.toContainText("Mouse Drag Rectangle");
+      await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Mouse Drag Release" })).toHaveAttribute("title", /Bounds: x 12, y 16, width 60, height 80/);
       await expect(page.locator("#inspectorOutput")).toContainText('"action": "moveLeft"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "KeyA"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "KeyD"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "MouseButton1"');
       await expect(page.locator("#inspectorOutput")).toContainText('"binding": "MousePrimaryDragRelease"');
-      await expect(page.locator("#inspectorOutput")).toContainText('"binding": "MousePrimaryDragRectangle"');
+      await expect(page.locator("#inspectorOutput")).not.toContainText('"binding": "MousePrimaryDragRectangle"');
       await page.locator(".input-mapping-v2__input-token", { hasText: "Keyboard KeyA" }).click();
       await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Keyboard KeyA" })).toHaveCount(0);
       await expect(page.locator(".input-mapping-v2__input-token", { hasText: "Keyboard KeyD" })).toHaveCount(1);
@@ -1798,12 +1849,14 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const gamepadButtonLayout = await page.locator(".input-mapping-v2__gamepad-capture-button").evaluateAll((buttons) => buttons.map((button) => {
         const box = button.getBoundingClientRect();
         return {
+          height: Math.round(box.height),
           left: Math.round(box.left),
           top: Math.round(box.top),
           width: Math.round(box.width)
         };
       }));
       expect(gamepadButtonLayout.every((entry) => entry.width > 170)).toBe(true);
+      expect(gamepadButtonLayout.every((entry) => entry.height <= 60)).toBe(true);
       expect(new Set(gamepadButtonLayout.map((entry) => entry.left)).size).toBe(2);
       expect(Math.abs(gamepadButtonLayout[1].top - gamepadButtonLayout[0].top)).toBeLessThanOrEqual(1);
       await page.locator(".input-mapping-v2__mapping-card[data-input-mapping-tile-action-id='moveLeft']").click({ position: { x: 12, y: 12 } });

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

@@ -44,6 +44,11 @@ export class GestureListControl {
     button.dataset.inputMappingGestureBinding = gesture.binding;
     button.textContent = gesture.label;
     button.title = gesture.title;
+    ["pointerdown", "pointermove", "pointerup", "pointercancel"].forEach((eventName) => {
+      button.addEventListener(eventName, (event) => {
+        event.stopPropagation();
+      });
+    });
     button.addEventListener("click", () => {
       this.onGestureSelected(gesture);
     });

tools/input-mapping-v2/js/services/EngineInputSourceService.js

@@ -152,8 +152,9 @@ export class EngineInputSourceService {
         binding: descriptor.binding,
         displayLabelLines: descriptor.displayLabelLines,
         label: descriptor.label,
-        title: descriptor.title,
-        engine: descriptor.engine
+        title: pointerDragTitle(descriptor),
+        engine: descriptor.engine,
+        pointerDrag: descriptor.snapshot
       }
     };
   }
@@ -418,6 +419,17 @@ function formatGamepadDeviceLabel(gamepad) {
   return gamepadDeviceInfo(gamepad).statusLabel;
 }
 
+function pointerDragTitle(descriptor) {
+  const bounds = descriptor.snapshot?.dragBounds;
+  if (!bounds) {
+    return descriptor.title;
+  }
+  return [
+    descriptor.title,
+    `Bounds: x ${bounds.x}, y ${bounds.y}, width ${bounds.width}, height ${bounds.height}`
+  ].join("\n");
+}
+
 function gamepadDeviceInfo(gamepad) {
   const index = Number.isInteger(Number(gamepad?.index)) ? Number(gamepad.index) : 0;
   const id = normalizeWhitespace(gamepad?.id || "");

tools/input-mapping-v2/styles/inputMappingV2.css

@@ -37,7 +37,8 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-content: start;
-  gap: 8px;
+  align-items: flex-start;
+  gap: 6px 8px;
 }
 
 .input-mapping-v2 #inputMappingV2SelectedActionLabel {
@@ -67,7 +68,7 @@
 }
 
 .input-mapping-v2__gamepad-capture-button {
-  min-height: 74px;
+  min-height: 50px;
   white-space: pre-line;
 }
 
@@ -82,7 +83,7 @@
   width: 100%;
   border: 0;
   border-top: 1px solid var(--tool-starter-line);
-  margin: 2px 0;
+  margin: 0;
 }
 
 .input-mapping-v2 #inputMappingV2CaptureMessage {
@@ -116,7 +117,7 @@
 .input-mapping-v2__device-list,
 .input-mapping-v2__gesture-groups {
   display: grid;
-  gap: 10px;
+  gap: 8px;
 }
 
 .input-mapping-v2__gesture-groups {
@@ -238,6 +239,15 @@
   min-height: 30px;
 }
 
+.input-mapping-v2 #gestureSetupContent,
+.input-mapping-v2 #captureInputContent {
+  padding-bottom: 6px;
+}
+
+.input-mapping-v2 #captureInputContent .input-mapping-v2__capture-button {
+  min-height: 34px;
+}
+
 .input-mapping-v2__export-menu {
   margin: 0;
 }