@luma.gl/core 9.3.3 → 9.3.5

package/dist/index.cjs

@@ -1692,7 +1692,7 @@ var _Luma = class {
   VERSION = (
     // Version detection using build plugin
     // @ts-expect-error no-undef
-    true ? "9.3.3" : "running from source"
+    true ? "9.3.5" : "running from source"
   );
   spector;
   preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -1862,6 +1862,7 @@ var import_env2 = require("@probe.gl/env");
 
 // dist/adapter/canvas-observer.js
 var CanvasObserver = class {
+  /** Observer options and event callbacks. */
   props;
   _resizeObserver;
   _intersectionObserver;
@@ -1870,12 +1871,19 @@ var CanvasObserver = class {
   _handleDevicePixelRatioChange = () => this._refreshDevicePixelRatio();
   _trackPositionInterval = null;
   _started = false;
+  /** Whether the DOM observers and polling loops have been started. */
   get started() {
     return this._started;
   }
+  /**
+   * Creates an observer coordinator for one HTML canvas.
+   *
+   * @param props - Observer options and event callbacks.
+   */
   constructor(props) {
     this.props = props;
   }
+  /** Starts DOM observation and optional position polling. */
   start() {
     if (this._started || !this.props.canvas) {
       return;
@@ -1884,8 +1892,9 @@ var CanvasObserver = class {
     this._intersectionObserver ||= new IntersectionObserver((entries) => this.props.onIntersection(entries));
     this._resizeObserver ||= new ResizeObserver((entries) => this.props.onResize(entries));
     this._intersectionObserver.observe(this.props.canvas);
+    const box = this.props.resizeObserverBox;
     try {
-      this._resizeObserver.observe(this.props.canvas, { box: "device-pixel-content-box" });
+      this._resizeObserver.observe(this.props.canvas, { box });
     } catch {
       this._resizeObserver.observe(this.props.canvas, { box: "content-box" });
     }
@@ -1894,6 +1903,7 @@ var CanvasObserver = class {
       this._trackPosition();
     }
   }
+  /** Stops DOM observation, media-query listeners, and position polling. */
   stop() {
     var _a, _b;
     if (!this._started) {
@@ -1915,6 +1925,7 @@ var CanvasObserver = class {
     (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
     (_b = this._intersectionObserver) == null ? void 0 : _b.disconnect();
   }
+  /** Reports the current device pixel ratio and arms the media query for its next change. */
   _refreshDevicePixelRatio() {
     var _a;
     if (!this._started) {
@@ -1925,6 +1936,11 @@ var CanvasObserver = class {
     this._observeDevicePixelRatioMediaQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
     this._observeDevicePixelRatioMediaQuery.addEventListener("change", this._handleDevicePixelRatioChange, { once: true });
   }
+  /**
+   * Starts periodic position callbacks while the observer remains active.
+   *
+   * @param intervalMs - Poll interval in milliseconds.
+   */
   _trackPosition(intervalMs = 100) {
     if (this._trackPositionInterval) {
       return;
@@ -2051,6 +2067,7 @@ var _CanvasSurface = class {
     this._canvasObserver = new CanvasObserver({
       canvas: this.htmlCanvas,
       trackPosition: this.props.trackPosition,
+      resizeObserverBox: this.props.pixelSizeSource === "css-dpr" ? "content-box" : "device-pixel-content-box",
       onResize: (entries) => this._handleResize(entries),
       onIntersection: (entries) => this._handleIntersection(entries),
       onDevicePixelRatioChange: () => this._observeDevicePixelRatio(),
@@ -2180,7 +2197,7 @@ var _CanvasSurface = class {
     }
   }
   _handleResize(entries) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     if (this.destroyed) {
       return;
     }
@@ -2192,11 +2209,7 @@ var _CanvasSurface = class {
     this.cssWidth = contentBoxSize.inlineSize;
     this.cssHeight = contentBoxSize.blockSize;
     const oldPixelSize = this.getDevicePixelSize();
-    const devicePixelWidth = ((_c = (_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0]) == null ? void 0 : _c.inlineSize) || contentBoxSize.inlineSize * devicePixelRatio;
-    const devicePixelHeight = ((_e = (_d = entry.devicePixelContentBoxSize) == null ? void 0 : _d[0]) == null ? void 0 : _e.blockSize) || contentBoxSize.blockSize * devicePixelRatio;
-    const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
-    this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
-    this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
+    this._setDevicePixelSize(this._getDevicePixelSizeFromResizeEntry(entry));
     this._updateDrawingBufferSize();
     this.device.props.onResize(this, { oldPixelSize });
   }
@@ -2215,6 +2228,29 @@ var _CanvasSurface = class {
     this.isInitialized = true;
     this.updatePosition();
   }
+  _getDevicePixelSizeFromResizeEntry(entry) {
+    var _a, _b, _c, _d, _e;
+    const contentBoxSize = assertDefined((_a = entry.contentBoxSize) == null ? void 0 : _a[0]);
+    if (this.props.pixelSizeSource === "css-dpr") {
+      return this._getDevicePixelSizeFromCSSSize(contentBoxSize.inlineSize, contentBoxSize.blockSize);
+    }
+    return {
+      devicePixelWidth: ((_c = (_b = entry.devicePixelContentBoxSize) == null ? void 0 : _b[0]) == null ? void 0 : _c.inlineSize) || contentBoxSize.inlineSize * devicePixelRatio,
+      devicePixelHeight: ((_e = (_d = entry.devicePixelContentBoxSize) == null ? void 0 : _d[0]) == null ? void 0 : _e.blockSize) || contentBoxSize.blockSize * devicePixelRatio
+    };
+  }
+  _getDevicePixelSizeFromCSSSize(cssWidth, cssHeight) {
+    const devicePixelRatio2 = this.getDevicePixelRatio();
+    return {
+      devicePixelWidth: Math.floor(cssWidth * devicePixelRatio2),
+      devicePixelHeight: Math.floor(cssHeight * devicePixelRatio2)
+    };
+  }
+  _setDevicePixelSize({ devicePixelWidth, devicePixelHeight }) {
+    const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
+    this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
+    this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
+  }
   _resizeDrawingBufferIfNeeded() {
     if (this._needsDrawingBufferResize) {
       this._needsDrawingBufferResize = false;
@@ -2233,6 +2269,12 @@ var _CanvasSurface = class {
     }
     const oldRatio = this.devicePixelRatio;
     this.devicePixelRatio = window.devicePixelRatio;
+    if (this.props.pixelSizeSource === "css-dpr") {
+      const oldPixelSize = this.getDevicePixelSize();
+      this._setDevicePixelSize(this._getDevicePixelSizeFromCSSSize(this.cssWidth, this.cssHeight));
+      this._updateDrawingBufferSize();
+      this.device.props.onResize(this, { oldPixelSize });
+    }
     this.updatePosition();
     (_b = (_a = this.device.props).onDevicePixelRatioChange) == null ? void 0 : _b.call(_a, this, {
       oldRatio
@@ -2265,6 +2307,7 @@ __publicField(CanvasSurface, "defaultProps", {
   width: 800,
   height: 600,
   useDevicePixels: true,
+  pixelSizeSource: "exact",
   autoResize: true,
   container: null,
   visible: true,