Add touch controls for axis gizmos

[lawsie]

Summary

Adds touch controls for axis-based gizmos (move, resize, rotate)

• Y and uniform resizes now retain the old 'floor' value rather than resizing from the centre

AI usage

Claude Sonnet 4.6 wrote all of the code in this PR. The plan was designed and refined by me in steps.

Summary by CodeRabbit

• New Features

  • Added mobile touch controls for 3D object manipulation (position, rotation, and scale)
  • Two control modes: responsive buttons and precision slider with axis selection
  • Intuitive axis selection (X, Y, Z) with optional uniform adjustment and visual feedback

• Improvements

  • Enhanced scaling behavior to maintain object positioning during transformations

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a new mobile HUD module for touch-device users that enables keyboard-driven gizmo operations (position, rotation, scale) through on-screen controls. The HUD detects touch capability, displays axis-selection UI, and offers two control modes: arrow buttons with press-and-hold repeat behavior, or a delta-drag slider. The HUD is then integrated into the three existing gizmo keyboard handlers, preserving all existing math, physics updates, and Blockly integration while adding touch accessibility.

Changes

Mobile HUD and Gizmo Integration

Layer / File(s)	Summary
Touch Device Detection and HUD Initialization ui/gizmo-mobile-hud.js	Detects touch/coarse-pointer devices via ontouchstart, navigator.maxTouchPoints, and media queries. Initializes a fullscreen Babylon GUI HUD with X/Y/Z axis buttons (plus optional "all"), highlights the selected axis, and displays translated axis labels on selection.
Arrow Controls Mode ui/gizmo-mobile-hud.js	Implements left-half arrow buttons that perform repeated onMove steps while pressed, using press-duration-based step magnitude and axis mapping. Manages timeout/interval lifecycles for smooth hold-to-repeat behavior.
Slider Controls Mode ui/gizmo-mobile-hud.js	Implements a delta-drag slider with thumb positioning clamped within bounds. Converts pointer motion into onMove deltas scaled by stepFast. Installs a scene.onPrePointerObservable handler to block camera/scene pointer processing when the slider is active.
HUD Lifecycle Management ui/gizmo-mobile-hud.js	Provides stop() function for idempotent cleanup: executes registered cleanup callbacks, disposes the HUD texture, restores saved joystick/controls visibility, and resumes any paused joystick source.
Gizmo Handler Integration ui/gizmos.js	Refactors position/rotation/scale keyboard handlers to define explicit onMove/onConfirm/onCancel callbacks and start mobile HUDs (arrows for position/scale, slider for rotation). Position updates Blockly coordinates; rotation preserves quaternion math and physics updates; scale re-anchors objects by adjusting mesh.position.y to maintain world-bottom alignment. All handlers now unify keyboard and mobile HUD cleanup.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• flipcomputing/flock#556: Refactors position gizmo keyboard interaction flow with shared cleanup/handler wiring for axis-constrained move, directly related to the mobile HUD-driven onMove/stop integration.
• flipcomputing/flock#536: Modifies scale-gizmo drag/update logic including bottom-anchored/clamped scaling behavior, overlaps with the new mobile HUD-driven axis onMove for scale.
• flipcomputing/flock#561: Refactors rotation/scale keyboard control flow and lifecycle/cleanup while updating Blockly blocks, which the main PR builds upon with mobile HUD wrappers around those axis move/confirm/cancel callbacks.

Poem

🐰 A touch-friendly gizmo takes flight,
With arrows and sliders that feel just right,
The slider glides smooth, the buttons repeat,
Each axis selected, the controls complete!
Mobile minds rejoice—the hud is here to stay. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add touch controls for axis gizmos' clearly and accurately summarizes the main objective of the changeset, which adds mobile/touch-based UI controls for axis-based gizmos (move, rotate, scale).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

ui/gizmos.js (1)

635-641: 💤 Low value

Potential race condition with stopAxisKeyboard reassignment.

If exitGizmoState() is called immediately after line 636 but before the setTimeout callback executes, the HUD is stopped and stopAxisKeyboard is set to null. When the setTimeout fires, it creates a keyboard handler and reassigns stopAxisKeyboard, leaving an active keyboard handler after exit. While the window is very small (a single event loop tick), consider guarding with a cancellation flag:

🔧 Suggested fix using a cancellation flag

+  let cancelled = false;
   const stopHud = createGizmoMobileHud({ onMove, stepNormal: DEFAULT_CURSOR, stepFast: FAST_CURSOR, mode: "arrows" });
-  stopAxisKeyboard = () => stopHud?.();
+  stopAxisKeyboard = () => { cancelled = true; stopHud?.(); };
 
   setTimeout(() => {
+    if (cancelled) return;
     const stopKeyboard = createAxisKeyboardHandler({ onMove, onConfirm, onCancel, stepNormal: DEFAULT_CURSOR, stepFast: FAST_CURSOR });
     stopAxisKeyboard = () => { stopKeyboard(); stopHud?.(); };
   }, 0);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/gizmos.js` around lines 635 - 641, The reassignment of stopAxisKeyboard
inside the setTimeout can resurrect a keyboard handler after exitGizmoState; fix
by introducing a local cancellation flag (e.g., let cancelled = false) captured
by the setTimeout closure, set cancelled = true when exit/cleanup runs (where
stopHud and stopAxisKeyboard are cleared), and inside the setTimeout: after
creating stopKeyboard check the flag—if cancelled, immediately call
stopKeyboard() and do not reassign stopAxisKeyboard; otherwise assign
stopAxisKeyboard = () => { stopKeyboard(); stopHud?.(); } to ensure no handler
remains active after exitGizmoState.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@ui/gizmos.js`:
- Around line 635-641: The reassignment of stopAxisKeyboard inside the
setTimeout can resurrect a keyboard handler after exitGizmoState; fix by
introducing a local cancellation flag (e.g., let cancelled = false) captured by
the setTimeout closure, set cancelled = true when exit/cleanup runs (where
stopHud and stopAxisKeyboard are cleared), and inside the setTimeout: after
creating stopKeyboard check the flag—if cancelled, immediately call
stopKeyboard() and do not reassign stopAxisKeyboard; otherwise assign
stopAxisKeyboard = () => { stopKeyboard(); stopHud?.(); } to ensure no handler
remains active after exitGizmoState.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 424ae1bd-140d-41b7-a5d1-5b55bebfb629

📥 Commits

Reviewing files that changed from the base of the PR and between e0713b6 and 0020058.

📒 Files selected for processing (2)

• ui/gizmo-mobile-hud.js
• ui/gizmos.js