Keep the selection outline while dragging and zooming the map

[ryanbarlow97]

Problem

Dragging or zooming the map with a realm selected removed its white outline and the slight brightening until the map settled. A CSS rule ([data-gesturing] .map-selected-region { filter: none }) turned the highlight filter off for the whole of every gesture, because the filter was assumed too costly to redraw each frame.

Change

• The rule is gone, and so is the data-gesturing attribute that only existed to drive it. The selection and hover highlights now stay up through drags and zooms.
• The rim width is calc(rimPx / var(--map-rim-scale)). React sets --map-rim-scale to the settled scale. Mid-gesture the transform runs ahead of React, so onLiveTransform writes the live scale onto each .map-selected-region, and the rim keeps its on-screen width through a pinch or wheel zoom instead of growing or shrinking and then snapping back. React writes the same value once the gesture commits.
• Safari is unchanged: it never gets these filters (mapFiltersSupportedHere).

Measurements (headless Chromium against tfminecraft.net, 1440×900)

• Drag: trace sums (raster, pipeline, draw, paint) with the filter kept were within the run-to-run spread of the filter off, over three interleaved runs. Promoting the element with will-change: transform was worse.
• Wheel zoom: raster sums were up to about 30% higher in two of three runs. rAF frame-time p50/p90 and long-frame counts showed no consistent difference; tile loading dominates. Worth a pinch on a real phone or PC on dev.
• Local build mid-zoom: the rim measured 2.5 px on screen at rest, mid-zoom-in and mid-zoom-out. The live site has the filter off at the same moment.

Checks

• tsc --noEmit passes.
• vitest run: 1,948 tests pass. RecipeVehiclePreview.test.tsx timed out once under load and passes alone.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 30 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: a4cb139f-6084-48df-a3d1-7b30b059e584

📥 Commits

Reviewing files that changed from the base of the PR and between 5672587 and c7c6bda.

📒 Files selected for processing (3)

• frontend/app/components/map/MapCanvas.tsx
• frontend/app/hooks/useMapViewport.ts
• frontend/app/internal/globals.css

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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.}