Summary

This PR fixes device pixel ratio (DPR) changes when moving windows between displays with different pixel ratios, building on top of #9886.

Key Discovery: The onResize callback is sufficient for handling both window resize AND DPR changes. The onDevicePixelRatioChange callback is redundant because luma.gl's ResizeObserver fires onResize whenever DPR changes.

Changes

modules/core/src/lib/deck.ts

• Added onResize callback to attach path (interleaved mode) that:
  • Manually syncs drawing buffer dimensions from canvas
  • Sets redraw flag when resize is detected
  • Preserves user-provided callbacks
• Kept existing onResize callback in create path (standalone mode)
• Note: Manual drawing buffer sync needed because luma 9.2's setDrawingBufferSize() immediately modifies the canvas, but in attach mode the external library (Mapbox/Maplibre/Google Maps) manages canvas size

modules/mapbox/src/mapbox-overlay.ts

• Removed incorrect autoResize: true override
• This was fighting with luma's attach behavior which forces autoResize: false
• Added explanatory comment

Test Matrix Results ✅

Tested all scenarios with window resize, DPR changes (moving between displays), and where applicable, fullscreen mode.

Google Maps (4/4) ✅

• ✅ pure-js interleaved: true (default) - resize, DPR work
• ✅ pure-js interleaved: false - resize, DPR work (⚠️ fullscreen blank - pre-existing)
• ✅ react interleaved: true (default) - resize, DPR work
• ✅ react interleaved: false - resize, DPR work (⚠️ fullscreen blank - pre-existing)

Maplibre (4/4) ✅

• ✅ pure-js interleaved: false (default) - resize, DPR work
• ✅ pure-js interleaved: true - resize, DPR work
• ✅ react interleaved: false (default) - resize, DPR work
• ✅ react interleaved: true - resize, DPR work

Mapbox (4/4) ✅

• ✅ pure-js interleaved: false (default) - resize, DPR work
• ✅ pure-js interleaved: true - resize, DPR work
• ✅ react interleaved: false (default) - resize, DPR work
• ✅ react interleaved: true - resize, DPR work

Maplibre Globe (2/2) ✅

• ✅ pure-js interleaved: false (default) - resize, DPR work
• ✅ pure-js interleaved: true - resize, DPR work

Test Apps (2/2) ✅

• ✅ test/apps/widgets-infovis - resize, DPR work
• ✅ test/apps/widgets-9.2 - resize, DPR work

Total: 15/15 scenarios passed

Known Issues

⚠️ Google Maps fullscreen mode shows blank canvas in overlaid mode (interleaved: false). This is a pre-existing issue unrelated to the DPR fix and should be tracked separately.

Technical Details

Why does onResize handle DPR changes?

Luma.gl's CanvasContext uses a ResizeObserver to monitor the canvas. When DPR changes (e.g., moving window to a display with different pixel ratio), the browser fires the ResizeObserver because the device pixel dimensions of the canvas change. This triggers the onResize callback with the new dimensions, making a separate onDevicePixelRatioChange callback redundant.

Why manual drawing buffer sync in attach mode?

In attach mode (interleaved rendering), the external mapping library (Mapbox/Maplibre/Google Maps) manages the canvas element and its size. When luma detects a resize, we need to manually sync the drawing buffer dimensions to match the canvas, because:

1. autoResize is forced to false in attach mode (the external library controls canvas size)
2. In luma 9.2, we can't call setDrawingBufferSize() as it would fight with the external library
3. Direct property assignment ensures deck.gl's internal state matches the actual canvas size

Future Improvements

When upgrading to luma 9.3+, we can use canvasContext.setDrawingBufferSize(width, height) instead of direct property assignment (see TODO comments in code).