@luma.gl/core 9.3.2 → 9.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/core",
-  "version": "9.3.2",
+  "version": "9.3.4",
   "description": "The luma.gl core Device API",
   "license": "MIT",
   "type": "module",
@@ -46,5 +46,5 @@
     "@probe.gl/stats": "^4.1.1",
     "@types/offscreencanvas": "^2019.7.3"
   },
-  "gitHead": "8f60fca63dc43702af5b16d0381fd97d7ace7dc9"
+  "gitHead": "f430daba8be25561034dca6bb0af3ea487c9d1c8"
 }

package/src/adapter/canvas-surface.ts

@@ -29,6 +29,15 @@ export type CanvasContextProps = {
   visible?: boolean;
   /** Whether to size the drawing buffer to the pixel size during auto resize. If a number is provided it is used as a static pixel ratio */
   useDevicePixels?: boolean | number;
+  /**
+   * How to derive the tracked device pixel size for HTML canvases when auto-resizing.
+   *
+   * - `'exact'` uses `ResizeObserver.devicePixelContentBoxSize` when available to match the
+   *   browser's exact physical pixel coverage.
+   * - `'css-dpr'` uses `Math.round(cssSize * devicePixelRatio)` to match overlays and external
+   *   canvases that still rely on legacy CSS-size times DPR rounding.
+   */
+  pixelSizeSource?: 'exact' | 'css-dpr';
   /** Whether to track window resizes. */
   autoResize?: boolean;
   /** @see https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext/configure#alphamode */
@@ -66,6 +75,7 @@ export abstract class CanvasSurface {
     width: 800,
     height: 600,
     useDevicePixels: true,
+    pixelSizeSource: 'exact',
     autoResize: true,
     container: null,
     visible: true,
@@ -347,13 +357,7 @@ export abstract class CanvasSurface {
 
     const oldPixelSize = this.getDevicePixelSize();
 
-    const devicePixelWidth =
-      entry.devicePixelContentBoxSize?.[0]?.inlineSize ||
-      contentBoxSize.inlineSize * devicePixelRatio;
-
-    const devicePixelHeight =
-      entry.devicePixelContentBoxSize?.[0]?.blockSize ||
-      contentBoxSize.blockSize * devicePixelRatio;
+    const {devicePixelWidth, devicePixelHeight} = this._getDevicePixelSizeFromResizeEntry(entry);
 
     const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
     this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
@@ -385,6 +389,30 @@ export abstract class CanvasSurface {
     this.updatePosition();
   }
 
+  protected _getDevicePixelSizeFromResizeEntry(entry: ResizeObserverEntry): {
+    devicePixelWidth: number;
+    devicePixelHeight: number;
+  } {
+    const contentBoxSize = assertDefined(entry.contentBoxSize?.[0]);
+
+    if (this.props.pixelSizeSource === 'css-dpr') {
+      const devicePixelRatio = this.getDevicePixelRatio();
+      return {
+        devicePixelWidth: Math.round(contentBoxSize.inlineSize * devicePixelRatio),
+        devicePixelHeight: Math.round(contentBoxSize.blockSize * devicePixelRatio)
+      };
+    }
+
+    return {
+      devicePixelWidth:
+        entry.devicePixelContentBoxSize?.[0]?.inlineSize ||
+        contentBoxSize.inlineSize * devicePixelRatio,
+      devicePixelHeight:
+        entry.devicePixelContentBoxSize?.[0]?.blockSize ||
+        contentBoxSize.blockSize * devicePixelRatio
+    };
+  }
+
   _resizeDrawingBufferIfNeeded() {
     if (this._needsDrawingBufferResize) {
       this._needsDrawingBufferResize = false;