fix: allow drawing extra-risk zones on touch tablets#30
Open
IanMayo wants to merge 2 commits into
Open
Conversation
Drawing extra-risk zones relied on the `.leaflet-drawing` CSS making hex polygons and markers click-through via `pointer-events: none`. That works with a mouse, but on touch tablets the tap still reaches the hex polygon's own Leaflet click handler, so a tap selected a cell instead of starting the shape — drawing was effectively desktop-only. Gate the interactive handlers on `drawMode` instead of relying on the CSS: - HexGridLayer: bind no click/hover handlers while a draw tool is armed. - ExtraRiskLayer: committed zones are interactive only when no tool is armed, so a tap inside an existing zone can't steal the gesture either. Terra Draw still receives the gesture at the map-container level, so the behaviour is now identical on mouse and touch.
|
After the previous fix a tap no longer selected a cell, but dragging to draw a rectangle/circle just panned the map. Terra Draw's rectangle and circle modes default to the `click-move` interaction, where a drag is not a draw gesture at all, so Leaflet's drag handler consumed it as a pan. - Set `drawInteraction: 'click-move-or-drag'` on the rectangle and circle modes so a single drag draws the shape (Terra Draw disables map dragging for the duration of that drag via the adapter's setDraggability), while two taps still work. - While any tool is armed, also disable Leaflet's map dragging and double-click zoom so the first gesture and the two-tap path aren't hijacked by a pan or a double-tap zoom; the effect cleanup re-enables them on disarm/unmount.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On a touch tablet you couldn't draw extra-risk zones. Arming a tool (e.g. Rectangle) highlights its button, but tapping the map selected a hex cell instead of starting the shape.
Cause
Drawing relied on the
.leaflet-drawingCSS class making hex polygons and markers click-through viapointer-events: noneso taps fall through to the Terra Draw layer:That's a mouse-oriented trick. On a touch tablet the tap still reaches each hex polygon's own Leaflet
clickhandler (selectCellinHexGridLayer), so the cell gets selected and the draw gesture never starts. Drawing was effectively desktop-only.Fix
Gate the interactive handlers on
drawModerather than relying on the CSS:HexGridLayer— while a draw tool is armed, bind noclick/mouseover/mouseouthandlers, so a tap can never select or hover a cell.ExtraRiskLayer— committed zones are interactive only when no tool is armed, so a tap inside an existing zone can't steal the gesture either.Terra Draw still listens at the map-container level, so it receives the gesture regardless. Behaviour is now identical on mouse and touch. The existing
.leaflet-drawingCSS is left in place as belt-and-braces for markers.Verification
npm run typecheck,npm run lint,npm run test:run(95 tests) andnpm run buildall pass.https://claude.ai/code/session_015edVHaDT2Y4hfMoS6tM9mn
Generated by Claude Code