fix(tools): expand transformer anchor hit area for easier grabbing #27

Merged

AhmedHanafy725 merged 1 commit from development_resize_anchor_hit_area into development

2026-04-21 12:11:18 +00:00

AhmedHanafy725 commented

2026-04-21 12:07:20 +00:00

Member

Summary

Fixes issue #21 — resize anchors were too small (8 px) and had a hit region matching the visual, so near-miss clicks selected the underlying object instead of starting a resize. Bumps the visible anchor size to 10 px (Konva default) and installs a padded hitFunc on every anchor so the pickable area is ~22 x 22 px.

Closes #21

Changes

crates/hero_whiteboard_ui/static/web/js/whiteboard/tools.js
- anchorSize 8 -> 10.
- New applyAnchorHitPadding() helper that walks every ._anchor on the transformer and sets a hitFunc drawing a rect with 6 px padding on every side.
- Re-applies on every transform event and monkey-patches transformer.nodes and transformer.forceUpdate so padding survives anchor rebuilds triggered by selection changes or resize end.

Test Results

cargo check --workspace: pass
cargo clippy --workspace -- -D warnings: pass
cargo fmt --check: pass

Vanilla-JS change; needs manual verification in the browser.

Manual verification

Clicks within ~6 px of any anchor (including the rotation handle) reliably start a resize/rotate instead of selecting the underlying object.
Visible anchors still look small and unobtrusive.
Adjacent anchors on a 40 x 30 min-size object remain distinguishable.
No regression on single-select, multi-select, rubber-band select, or any widget-type resize flow.

## Summary Fixes issue #21 — resize anchors were too small (8 px) and had a hit region matching the visual, so near-miss clicks selected the underlying object instead of starting a resize. Bumps the visible anchor size to 10 px (Konva default) and installs a padded `hitFunc` on every anchor so the pickable area is ~22 x 22 px. ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_whiteboard/issues/21 ## Changes - `crates/hero_whiteboard_ui/static/web/js/whiteboard/tools.js` - `anchorSize` 8 -> 10. - New `applyAnchorHitPadding()` helper that walks every `._anchor` on the transformer and sets a `hitFunc` drawing a rect with 6 px padding on every side. - Re-applies on every `transform` event and monkey-patches `transformer.nodes` and `transformer.forceUpdate` so padding survives anchor rebuilds triggered by selection changes or resize end. ## Test Results - `cargo check --workspace`: pass - `cargo clippy --workspace -- -D warnings`: pass - `cargo fmt --check`: pass Vanilla-JS change; needs manual verification in the browser. ## Manual verification - [ ] Clicks within ~6 px of any anchor (including the rotation handle) reliably start a resize/rotate instead of selecting the underlying object. - [ ] Visible anchors still look small and unobtrusive. - [ ] Adjacent anchors on a 40 x 30 min-size object remain distinguishable. - [ ] No regression on single-select, multi-select, rubber-band select, or any widget-type resize flow.

AhmedHanafy725 added 1 commit

2026-04-21 12:07:20 +00:00

fix(tools): expand transformer anchor hit area for easier grabbing

CI / build (pull_request) Successful in 2m12s

Details

a8757454e5

The resize/rotate anchors were 8px (smaller than Konva's 10px default)
and the hit region matched the visual, so clicks within a few pixels of
the corner missed and selected the underlying object instead.

- Bump visible anchorSize 8 -> 10
- Install a padded hitFunc on every anchor (6px padding -> ~22x22 pick
  area) via a helper that re-runs on transform, transformer.nodes(), and
  transformer.forceUpdate() so the padding survives anchor rebuilds

#21