Add pointer drag input support and polish mapping tiles - PR_26140_095-add-pointer-drag-input-and-polish-mapping-tiles

Author: ToolboxAid

docs/dev/reports/pointer_drag_input_mapping_tiles_report.md

@@ -0,0 +1,58 @@
+# PR_26140_095 Pointer Drag Input Mapping Tiles Report
+
+## Scope
+- Added reusable engine pointer drag support in `src/engine/input/PointerDragState.js` and bridged it through `InputService`.
+- Input Mapping V2 now surfaces engine pointer drag descriptors as mappable mouse-compatible bindings without changing the Input Mapping V2 schema.
+- Gamepad mapping tiles now display `Game Controller` plus the input detail on separate lines, with standard button names when `gamepad.mapping === "standard"` and `Button <number>` fallback otherwise.
+- Capture UI now includes pointer drag gesture buttons, an `<hr>` separator before bottom `Refresh Gamepads`, and second-click cancel for active keyboard, mouse, and gamepad capture.
+- Mapping tiles increased from 225x175 to 275x225 while preserving selected tile indication, combo display, delete behavior, fullscreen layout, and auto gamepad polling.
+
+## Notes
+- `docs/pr/BUILD_PR.md` currently describes an unrelated Level 18 runtime hardening rebase. The inline PR_26140_095 request was used as the source of truth.
+- No schemas were changed.
+- Sample JSON was not touched.
+- Workspace V2 launch behavior was preserved.
+
+## Playwright Impact
+Yes. This PR changes runtime input behavior and Input Mapping V2 UI interactions.
+
+Coverage added/updated:
+- pointer drag descriptors are surfaced in Engine Input Sources and Capture.
+- mouse drag release and rectangle gestures can be mapped.
+- gamepad tiles display `Game Controller` plus input detail on separate lines.
+- standard gamepad button names display for standard-mapped controllers.
+- unknown gamepad buttons fall back to `Button <number>`.
+- `<hr>` appears immediately before bottom `Refresh Gamepads`.
+- clicking an active Capture button cancels capture.
+- capture timeout still cancels capture.
+- mapping tile width and height are each increased by 50px.
+
+## Validation
+- PASS: targeted JS syntax validation for changed engine input and Input Mapping V2 files.
+- PASS: engine import validation for `PointerDragState` and `InputService`.
+- PASS: targeted `InputService.test.mjs` run.
+- PASS: focused Input Mapping V2 Playwright rerun after locator stabilization.
+- PASS: `npm run test:workspace-v2` final run, 61 tests passed.
+- PASS: `git diff --check` with line-ending warnings only.
+- PASS: Playwright V8 coverage generated at `docs/dev/reports/playwright_v8_coverage_report.txt`; changed runtime JS coverage guardrail reports no warnings.
+
+## Manual Validation
+1. Open `tools/input-mapping-v2/index.html`.
+2. Confirm Capture shows keyboard, mouse, pointer drag gesture buttons, detected gamepad buttons when available, an `<hr>`, and `Refresh Gamepads` at the bottom.
+3. Click `Capture Keyboard`, click it again, and confirm capture cancels and highlight clears.
+4. Create a mapping tile, click `Mouse Primary Drag Rectangle`, and confirm the tile shows `Mouse` / `Primary Drag Rectangle`.
+5. With a standard mapped controller, capture a known button and confirm the tile shows `Game Controller` plus the standard button name.
+6. Confirm no sample JSON validation or full samples smoke test is required for this PR.
+
+## Full Samples Smoke
+Skipped per PR instructions. This change is scoped to engine input support and Input Mapping V2/Workspace V2 validation.
+
+## Artifacts
+- `docs/dev/reports/codex_review.diff`
+- `docs/dev/reports/codex_changed_files.txt`
+- `docs/dev/reports/pointer_drag_input_mapping_tiles_report.md`
+- `docs/dev/reports/playwright_v8_coverage_report.txt`
+- `docs/dev/reports/coverage_changed_js_guardrail.txt`
+- `docs/dev/commit_comment.txt`
+- `docs/dev/codex_commands.md`
+- `tmp/PR_26140_095-add-pointer-drag-input-and-polish-mapping-tiles_delta.zip`

src/engine/input/InputService.js

@@ -7,6 +7,7 @@ InputService.js
 import KeyboardState from './KeyboardState.js';
 import MouseState from './MouseState.js';
 import GamepadState from './GamepadState.js';
+import PointerDragState from './PointerDragState.js';
 import InputMap from './InputMap.js';
 
 export default class InputService {
@@ -15,13 +16,15 @@ export default class InputService {
         keyboard = null,
         mouse = null,
         gamepads = null,
+        pointerDrag = null,
         inputMap = null,
         getGamepads = null,
     } = {}) {
         this.target = target;
         this.keyboard = keyboard ?? new KeyboardState();
         this.mouse = mouse ?? new MouseState();
         this.gamepads = gamepads ?? new GamepadState();
+        this.pointerDrag = pointerDrag ?? new PointerDragState();
         this.inputMap = inputMap ?? new InputMap();
         this.getGamepadsFromNavigator = getGamepads ?? (() => {
             if (typeof navigator === 'undefined' || typeof navigator.getGamepads !== 'function') {
@@ -35,12 +38,17 @@ export default class InputService {
         this.mousePosition = { x: 0, y: 0 };
         this.mouseDelta = { x: 0, y: 0 };
         this.isAttached = false;
+        this.pointerEventsAvailable = typeof PointerEvent !== 'undefined';
 
         this.onKeyDown = this.onKeyDown.bind(this);
         this.onKeyUp = this.onKeyUp.bind(this);
         this.onMouseMove = this.onMouseMove.bind(this);
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onMouseUp = this.onMouseUp.bind(this);
+        this.onPointerDown = this.onPointerDown.bind(this);
+        this.onPointerMove = this.onPointerMove.bind(this);
+        this.onPointerUp = this.onPointerUp.bind(this);
+        this.onPointerCancel = this.onPointerCancel.bind(this);
         this.onBlur = this.onBlur.bind(this);
     }
 
@@ -54,6 +62,10 @@ export default class InputService {
         this.target.addEventListener('mousemove', this.onMouseMove);
         this.target.addEventListener('mousedown', this.onMouseDown);
         this.target.addEventListener('mouseup', this.onMouseUp);
+        this.target.addEventListener('pointerdown', this.onPointerDown);
+        this.target.addEventListener('pointermove', this.onPointerMove);
+        this.target.addEventListener('pointerup', this.onPointerUp);
+        this.target.addEventListener('pointercancel', this.onPointerCancel);
         this.target.addEventListener('blur', this.onBlur);
         this.isAttached = true;
     }
@@ -68,6 +80,10 @@ export default class InputService {
         this.target.removeEventListener('mousemove', this.onMouseMove);
         this.target.removeEventListener('mousedown', this.onMouseDown);
         this.target.removeEventListener('mouseup', this.onMouseUp);
+        this.target.removeEventListener('pointerdown', this.onPointerDown);
+        this.target.removeEventListener('pointermove', this.onPointerMove);
+        this.target.removeEventListener('pointerup', this.onPointerUp);
+        this.target.removeEventListener('pointercancel', this.onPointerCancel);
         this.target.removeEventListener('blur', this.onBlur);
         this.isAttached = false;
         this.reset();
@@ -94,6 +110,7 @@ export default class InputService {
         this.keyboard.reset();
         this.mouse.reset();
         this.gamepads.reset();
+        this.pointerDrag.reset();
     }
 
     setInputMap(inputMap) {
@@ -131,6 +148,7 @@ export default class InputService {
         return {
             keyboard: this.keyboard.getSnapshot(),
             mouse: this.mouse.getSnapshot(),
+            pointerDrag: this.pointerDrag.getSnapshot(),
             gamepads: this.gamepads.getGamepads(),
             actions: this.getActionSnapshot(),
         };
@@ -152,6 +170,18 @@ export default class InputService {
         return this.mouse.isPressed(button);
     }
 
+    getPointerDragSnapshot() {
+        return this.pointerDrag.getSnapshot();
+    }
+
+    getPointerDragDescriptors() {
+        return this.pointerDrag.getDescriptors();
+    }
+
+    getPointerDragDescriptor(binding) {
+        return this.pointerDrag.getDescriptor(binding);
+    }
+
     getGamepad(index) {
         return this.gamepads.getGamepad(index);
     }
@@ -169,6 +199,9 @@ export default class InputService {
     }
 
     onMouseMove(event) {
+        if (!this.pointerEventsAvailable) {
+            this.pointerDrag.pointerMove(event);
+        }
         const eventTarget = event?.target ?? null;
         const isCanvasTarget = typeof HTMLCanvasElement !== 'undefined'
             && eventTarget instanceof HTMLCanvasElement;
@@ -185,16 +218,39 @@ export default class InputService {
 
     onMouseDown(event) {
         this.liveMouseButtonsDown.add(event.button ?? 0);
+        if (!this.pointerEventsAvailable) {
+            this.pointerDrag.pointerDown(event);
+        }
     }
 
     onMouseUp(event) {
         this.liveMouseButtonsDown.delete(event.button ?? 0);
+        if (!this.pointerEventsAvailable) {
+            this.pointerDrag.pointerUp(event);
+        }
+    }
+
+    onPointerDown(event) {
+        this.pointerDrag.pointerDown(event);
+    }
+
+    onPointerMove(event) {
+        this.pointerDrag.pointerMove(event);
+    }
+
+    onPointerUp(event) {
+        this.pointerDrag.pointerUp(event);
+    }
+
+    onPointerCancel(event) {
+        this.pointerDrag.pointerCancel(event);
     }
 
     onBlur() {
         this.liveKeysDown.clear();
         this.liveMouseButtonsDown.clear();
         this.mouseDelta = { x: 0, y: 0 };
+        this.pointerDrag.reset();
     }
 
     readConnectedGamepads() {