[Feature request] Add adjustable selection handles before capturing region screenshot

[janiosarmento]

Currently, when taking a region screenshot, the capture is triggered immediately between the mousedown and mouseup events — meaning the screenshot is taken the moment the user releases the mouse button. This makes it difficult to precisely select the desired area, as any small slip or misjudgment during the drag requires the user to start over.

Proposed improvement:

After the user drags to define the initial capture region, instead of taking the screenshot right away, BetterShot should display resizable handles (draggable corners and edges) on the selected area. This would allow the user to fine-tune the boundaries before confirming the capture (e.g., by pressing Enter or double-clicking inside the selection).

Expected workflow:

1. User initiates a region screenshot
2. User drags to define the initial selection area
3. On mouseup, the selection becomes an adjustable rectangle with draggable handles on corners and edges
4. User fine-tunes the selection as needed
5. User confirms the capture (e.g., Enter, double-click, or a confirm button)
6. Pressing Escape cancels the capture

[tembo]

Good catch on the workflow issue. Looking at the codebase, there's actually already a foundation for this in src/components/RegionSelector.tsx.

The component currently draws corner handles visually (lines 125-139) but they're purely decorative. The selection completes immediately on mouseup at line 201-216:

const handleMouseUp = () => {
  if (!isSelectingRef.current) return;
  isSelectingRef.current = false;
  // ... immediately calls onSelect()
};

Implementation approach:

The RegionSelector would need a new state to track "adjustment mode" vs "drawing mode":

1. Add a hasSelection ref/state that gets set true on first mouseup
2. Instead of calling onSelect() immediately, enter adjustment mode
3. Add hit-testing logic in handleMouseDown to detect if user clicked on a handle or edge
4. Track which handle is being dragged and update the corresponding corner/edge on mousemove
5. Handle Enter key and double-click to confirm (call onSelect())

The corner positions are already calculated at lines 128-133 - these same coordinates can be used for hit-testing.

For edge handles, you'd add midpoints between corners. A typical handle hit-test radius is around 8-12px for comfortable targeting on desktop.

The instructions overlay at line 269-271 would need updating to show "Enter to confirm" when in adjustment mode.

[rautelaKamal]

Hi! I’d like to work on this issue.

Based on the discussion, I’ll update RegionSelector.tsx to introduce an adjustment mode after mouseup, make the resize handles interactive with hit-testing, and trigger onSelect() only after confirmation (Enter/double-click), with Esc to cancel.

Please let me know if this approach looks good

[janiosarmento]

Based on the discussion, I’ll update RegionSelector.tsx to introduce an adjustment mode after mouseup, make the resize handles interactive with hit-testing, and trigger onSelect() only after confirmation (Enter/double-click), with Esc to cancel.

It seems perfect to me! Thank you!