Skip to content

Conversation

oscartbeaumont
Copy link
Member

@oscartbeaumont oscartbeaumont commented Sep 25, 2025

This improvement is mainly targetted at users with more than one monitor as it can be wierd having a different area select box per-screen.

TODO:

  • Click and drag to create selection
  • Figure out why area/studio buttons aren't working properly
  • Adding an area select on another screen should wipe out every over screens

Summary by CodeRabbit

  • New Features
    • Revamped selection overlay: start a selection from any point with click-and-drag, growing from zero for precise targeting.
    • More intuitive interactions: clicking outside creates a new selection; dragging inside moves the current selection; resize/move states are clearer with updated cursors.
    • Smarter UI behavior: selection controls appear only when relevant and reposition automatically to stay visible, adapting to viewport and window size changes.

Copy link
Contributor

coderabbitai bot commented Sep 25, 2025

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Refactors the selection overlay to a two-phase interaction: new zero-sized selection on mousedown outside existing bounds, then resize/drag via mousemove with updated state flags. Removes minimum size defaults, revises control visibility/placement logic, and updates event handling for mousedown/mousemove/mouseup and window resize.

Changes

Cohort / File(s) Summary
Selection flow refactor
apps/desktop/src/routes/target-select-overlay.tsx
Replaces drag-on-mousedown with select-then-drag flow, allows zero-sized initial bounds, removes previous min-size enforcement in calculations, updates showSelection logic, revises cursor and control rendering, repositions controls based on viewport overflow, and handles responsive updates on window resize.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Overlay
  participant SelectionState as Selection State
  participant Controls

  rect rgba(230,240,255,0.5)
    note over User,Overlay: Start new selection
    User->>Overlay: mousedown (outside selection)
    Overlay->>SelectionState: set selecting=true, bounds=(x,y,0,0)
    User->>Overlay: mousemove
    Overlay->>SelectionState: update bounds (resize)
    User->>Overlay: mouseup
    Overlay->>SelectionState: set selecting=false
  end

  rect rgba(240,255,230,0.5)
    note over User,Overlay: Drag existing selection
    User->>Overlay: mousedown (inside selection)
    Overlay->>SelectionState: set dragging=true, capture offset
    User->>Overlay: mousemove
    Overlay->>SelectionState: update bounds (translate, clamp)
    User->>Overlay: mouseup
    Overlay->>SelectionState: set dragging=false
  end

  Overlay->>Controls: compute visibility/position (above/below based on viewport)
  Note over Controls,Overlay: Recompute on window resize
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

thump-thump go my paws on the UI plain,
I trace a box from nothing—zero-charmed domain.
Select, then drag; the rectangles obey,
Controls hop above or below the fray.
No minimum fences, just fluent delight—
a hare draws windows in moonlit byte.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title Check ✅ Passed The title succinctly captures the core change—enhancing the area selection behavior in the new recording flow—and aligns with the detailed summary and objectives without extraneous wording.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

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

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

@oscartbeaumont oscartbeaumont marked this pull request as draft September 25, 2025 02:57
Comment on lines +108 to +115
0,
Math.min(
window.innerWidth - Math.max(0, newBounds.position.x),
newBounds.size.width,
),
),
height: Math.max(
150,
0,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
0,
Math.min(
window.innerWidth - Math.max(0, newBounds.position.x),
newBounds.size.width,
),
),
height: Math.max(
150,
0,
150,
Math.min(
window.innerWidth - Math.max(0, newBounds.position.x),
newBounds.size.width,
),
),
height: Math.max(
150,

Inconsistent minimum size constraints between drag selection and resize handles will cause unexpected behavior when users create small selections.

View Details

Analysis

Inconsistent minimum size constraints between drag selection and resize handles

What fails: In target-select-overlay.tsx, the setBounds function allows drag selections with 0px minimum size while ResizeHandles component enforces 150px minimum, creating jarring UX inconsistency.

How to reproduce:

  1. Open area selection mode in the desktop app
  2. Drag-select a small area (e.g., 50x50px) - this works fine
  3. Try to resize that selection using the corner handles
  4. Selection immediately snaps to 150x150px minimum

Result: User can create 50x50px selections via drag, but any resize operation snaps to 150x150px, causing unexpected size jumps.

Expected: Both drag selection and resize operations should enforce the same minimum constraint for consistent user experience.

Fix: Updated setBounds function to use Math.max(150, ...) instead of Math.max(0, ...) for both width and height, matching the resize handles behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant