@luma.gl/core 9.3.0-alpha.2 → 9.3.0-alpha.6

package/dist/adapter/canvas-context.d.ts

@@ -1,186 +1,11 @@
-import type { Device } from "./device.js";
-import type { Framebuffer } from "./resources/framebuffer.js";
-import type { TextureFormatDepthStencil } from "../shadertypes/textures/texture-formats.js";
-/** Properties for a CanvasContext */
-export type CanvasContextProps = {
-    /** Identifier, for debugging */
-    id?: string;
-    /** If a canvas not supplied, one will be created and added to the DOM. If a string, a canvas with that id will be looked up in the DOM */
-    canvas?: HTMLCanvasElement | OffscreenCanvas | string | null;
-    /** If new canvas is created, it will be created in the specified container, otherwise is appended as a child of document.body */
-    container?: HTMLElement | string | null;
-    /** Width in pixels of the canvas - used when creating a new canvas */
-    width?: number;
-    /** Height in pixels of the canvas - used when creating a new canvas */
-    height?: number;
-    /** Visibility (only used if new canvas is created). */
-    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;
-    /** Whether to track window resizes. */
-    autoResize?: boolean;
-    /** @see https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext/configure#alphamode */
-    alphaMode?: 'opaque' | 'premultiplied';
-    /** @see https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext/configure#colorspace */
-    colorSpace?: 'srgb';
-    /** Whether to track position changes. Calls this.device.onPositionChange */
-    trackPosition?: boolean;
-};
-export type MutableCanvasContextProps = {
-    /** 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;
-};
+export type { CanvasContextProps, MutableCanvasContextProps } from "./canvas-surface.js";
+import { CanvasSurface } from "./canvas-surface.js";
 /**
- * Manages a canvas. Supports both HTML or offscreen canvas
- * - Creates a new canvas or looks up a canvas from the DOM
- * - Provides check for DOM loaded
- * @todo commit() @see https://github.com/w3ctag/design-reviews/issues/288
- * @todo transferControlToOffscreen: @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
+ * Manages a renderable backend canvas. Supports both HTML or offscreen canvas
+ * and returns backend framebuffers sourced from the canvas itself.
  */
-export declare abstract class CanvasContext {
-    static isHTMLCanvas(canvas: unknown): canvas is HTMLCanvasElement;
-    static isOffscreenCanvas(canvas: unknown): canvas is OffscreenCanvas;
-    static defaultProps: Required<CanvasContextProps>;
-    abstract readonly device: Device;
+export declare abstract class CanvasContext extends CanvasSurface {
+    static defaultProps: Required<import("./canvas-surface").CanvasContextProps>;
     abstract readonly handle: unknown;
-    readonly id: string;
-    readonly props: Required<CanvasContextProps>;
-    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
-    /** Handle to HTML canvas */
-    readonly htmlCanvas?: HTMLCanvasElement;
-    /** Handle to wrapped OffScreenCanvas */
-    readonly offscreenCanvas?: OffscreenCanvas;
-    readonly type: 'html-canvas' | 'offscreen-canvas' | 'node';
-    /** Promise that resolved once the resize observer has updated the pixel size */
-    initialized: Promise<void>;
-    isInitialized: boolean;
-    /** Visibility is automatically updated (via an IntersectionObserver) */
-    isVisible: boolean;
-    /** Width of canvas in CSS units (tracked by a ResizeObserver) */
-    cssWidth: number;
-    /** Height of canvas in CSS units (tracked by a ResizeObserver) */
-    cssHeight: number;
-    /** Device pixel ratio. Automatically updated via media queries */
-    devicePixelRatio: number;
-    /** Exact width of canvas in physical pixels (tracked by a ResizeObserver) */
-    devicePixelWidth: number;
-    /** Exact height of canvas in physical pixels (tracked by a ResizeObserver) */
-    devicePixelHeight: number;
-    /** Width of drawing buffer: automatically tracks this.pixelWidth if props.autoResize is true */
-    drawingBufferWidth: number;
-    /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
-    drawingBufferHeight: number;
-    /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
-    protected _initializedResolvers: {
-        promise: Promise<void>;
-        resolve: (t: void) => void;
-        reject: (error: Error) => void;
-    };
-    /** ResizeObserver to track canvas size changes */
-    protected readonly _resizeObserver: ResizeObserver | undefined;
-    /** IntersectionObserver to track canvas visibility changes */
-    protected readonly _intersectionObserver: IntersectionObserver | undefined;
-    /** Position of the canvas in the document, updated by a timer */
-    protected _position: [number, number];
-    /** Whether this canvas context has been destroyed */
-    protected destroyed: boolean;
-    /** Whether the drawing buffer size needs to be resized (deferred resizing to avoid flicker) */
-    protected _needsDrawingBufferResize: boolean;
-    abstract get [Symbol.toStringTag](): string;
-    toString(): string;
-    constructor(props?: CanvasContextProps);
-    destroy(): void;
-    setProps(props: MutableCanvasContextProps): this;
-    /** Returns a framebuffer with properly resized current 'swap chain' textures */
-    getCurrentFramebuffer(options?: {
-        depthStencilFormat?: TextureFormatDepthStencil | false;
-    }): Framebuffer;
-    /**
-     * Returns the size covered by the canvas in CSS pixels
-     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
-    getCSSSize(): [number, number];
-    getPosition(): [number, number];
-    /**
-     * Returns the size covered by the canvas in actual device pixels.
-     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
-    getDevicePixelSize(): [number, number];
-    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
-    getDrawingBufferSize(): [number, number];
-    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
-    getMaxDrawingBufferSize(): [number, number];
-    /**
-     * Update the canvas drawing buffer size.
-     * @note - Called automatically if props.autoResize is true.
-     * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
-     * (resizing clears the drawing buffer)!
-     */
-    setDrawingBufferSize(width: number, height: number): void;
-    /**
-     * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
-     * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
-     * @note This function handles the non-HTML canvas cases
-     */
-    getDevicePixelRatio(): number;
-    /**
-     * Maps CSS pixel position to device pixel position
-     */
-    cssToDevicePixels(cssPixel: [number, number], yInvert?: boolean): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    /** @deprecated - use .getDevicePixelSize() */
-    getPixelSize(): [number, number];
-    /** @deprecated - TODO which values should we use for aspect */
-    getAspect(): number;
-    /** @deprecated Returns multiplier need to convert CSS size to Device size */
-    cssToDeviceRatio(): number;
-    /** @deprecated Use canvasContext.setDrawingBufferSize() */
-    resize(size: {
-        width: number;
-        height: number;
-    }): void;
-    /**
-     * Performs platform specific updates (WebGPU vs WebGL)
-     * Can be called after changes to size or props,
-     * to give implementation an opportunity to update configurations.
-     */
-    protected abstract _configureDevice(): void;
-    /** Returns a framebuffer with properly resized current 'swap chain' textures */
-    protected abstract _getCurrentFramebuffer(options?: {
-        depthStencilFormat?: TextureFormatDepthStencil | false;
-    }): Framebuffer;
-    /**
-     * Allows subclass constructor to override the canvas id for auto created canvases.
-     * This can really help when debugging DOM in apps that create multiple devices
-     */
-    protected _setAutoCreatedCanvasId(id: string): void;
-    /** reacts to an observed intersection */
-    protected _handleIntersection(entries: IntersectionObserverEntry[]): void;
-    /**
-     * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
-     * @see https://web.dev/articles/device-pixel-content-box
-     * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
-     */
-    protected _handleResize(entries: ResizeObserverEntry[]): void;
-    /** Initiate a deferred update for the canvas drawing buffer size */
-    protected _updateDrawingBufferSize(): void;
-    /** Perform a deferred resize of the drawing buffer if needed */
-    _resizeDrawingBufferIfNeeded(): void;
-    /** Monitor DPR changes */
-    _observeDevicePixelRatio(): void;
-    /** Start tracking positions with a timer */
-    _trackPosition(intervalMs?: number): void;
-    /**
-     * Calculated the absolute position of the canvas
-     * @note - getBoundingClientRect() is normally cheap but can be expensive
-     * if called before browser has finished a reflow. Should not be the case here.
-     */
-    updatePosition(): void;
 }
 //# sourceMappingURL=canvas-context.d.ts.map

package/dist/adapter/canvas-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-context.d.ts","sourceRoot":"","sources":["../../src/adapter/canvas-context.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"canvas-context.d.ts","sourceRoot":"","sources":["../../src/adapter/canvas-context.ts"],"names":[],"mappings":"AAIA,YAAY,EAAC,kBAAkB,EAAE,yBAAyB,EAAC,4BAAyB;AACpF,OAAO,EAAC,aAAa,EAAC,4BAAyB;AAE/C;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,aAAa;IACvD,OAAgB,YAAY,0DAA8B;IAE1D,kBAA2B,MAAM,EAAE,OAAO,CAAC;CAC5C"}

package/dist/adapter/canvas-context.js

@@ -1,457 +1,12 @@
 // luma.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-import { isBrowser } from '@probe.gl/env';
-import { uid } from "../utils/uid.js";
-import { withResolvers } from "../utils/promise-utils.js";
+import { CanvasSurface } from "./canvas-surface.js";
 /**
- * Manages a canvas. Supports both HTML or offscreen canvas
- * - Creates a new canvas or looks up a canvas from the DOM
- * - Provides check for DOM loaded
- * @todo commit() @see https://github.com/w3ctag/design-reviews/issues/288
- * @todo transferControlToOffscreen: @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
+ * Manages a renderable backend canvas. Supports both HTML or offscreen canvas
+ * and returns backend framebuffers sourced from the canvas itself.
  */
-export class CanvasContext {
-    static isHTMLCanvas(canvas) {
-        return typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement;
-    }
-    static isOffscreenCanvas(canvas) {
-        return typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas;
-    }
-    static defaultProps = {
-        id: undefined,
-        canvas: null,
-        width: 800,
-        height: 600,
-        useDevicePixels: true,
-        autoResize: true,
-        container: null,
-        visible: true,
-        alphaMode: 'opaque',
-        colorSpace: 'srgb',
-        trackPosition: false
-    };
-    id;
-    props;
-    canvas;
-    /** Handle to HTML canvas */
-    htmlCanvas;
-    /** Handle to wrapped OffScreenCanvas */
-    offscreenCanvas;
-    type;
-    /** Promise that resolved once the resize observer has updated the pixel size */
-    initialized;
-    isInitialized = false;
-    /** Visibility is automatically updated (via an IntersectionObserver) */
-    isVisible = true;
-    /** Width of canvas in CSS units (tracked by a ResizeObserver) */
-    cssWidth;
-    /** Height of canvas in CSS units (tracked by a ResizeObserver) */
-    cssHeight;
-    /** Device pixel ratio. Automatically updated via media queries */
-    devicePixelRatio;
-    /** Exact width of canvas in physical pixels (tracked by a ResizeObserver) */
-    devicePixelWidth;
-    /** Exact height of canvas in physical pixels (tracked by a ResizeObserver) */
-    devicePixelHeight;
-    /** Width of drawing buffer: automatically tracks this.pixelWidth if props.autoResize is true */
-    drawingBufferWidth;
-    /** Height of drawing buffer: automatically tracks this.pixelHeight if props.autoResize is true */
-    drawingBufferHeight;
-    /** Resolves when the canvas is initialized, i.e. when the ResizeObserver has updated the pixel size */
-    _initializedResolvers = withResolvers();
-    /** ResizeObserver to track canvas size changes */
-    _resizeObserver;
-    /** IntersectionObserver to track canvas visibility changes */
-    _intersectionObserver;
-    /** Position of the canvas in the document, updated by a timer */
-    _position = [0, 0];
-    /** Whether this canvas context has been destroyed */
-    destroyed = false;
-    /** Whether the drawing buffer size needs to be resized (deferred resizing to avoid flicker) */
-    _needsDrawingBufferResize = true;
-    toString() {
-        return `${this[Symbol.toStringTag]}(${this.id})`;
-    }
-    constructor(props) {
-        this.props = { ...CanvasContext.defaultProps, ...props };
-        props = this.props;
-        this.initialized = this._initializedResolvers.promise;
-        // Create a canvas element if needed
-        if (!isBrowser()) {
-            // TODO - does this prevent app from using jsdom style polyfills?
-            this.canvas = { width: props.width || 1, height: props.height || 1 };
-        }
-        else if (!props.canvas) {
-            this.canvas = createCanvasElement(props);
-        }
-        else if (typeof props.canvas === 'string') {
-            this.canvas = getCanvasFromDOM(props.canvas);
-        }
-        else {
-            this.canvas = props.canvas;
-        }
-        if (CanvasContext.isHTMLCanvas(this.canvas)) {
-            this.id = props.id || this.canvas.id;
-            this.type = 'html-canvas';
-            this.htmlCanvas = this.canvas;
-        }
-        else if (CanvasContext.isOffscreenCanvas(this.canvas)) {
-            this.id = props.id || 'offscreen-canvas';
-            this.type = 'offscreen-canvas';
-            this.offscreenCanvas = this.canvas;
-        }
-        else {
-            // TODO - Node.js support is currently untested (was used for headless-gl in luma v8)
-            this.id = props.id || 'node-canvas-context';
-            this.type = 'node';
-        }
-        // Initialize size variables to some sane values (these will be updated by ResizeObserver)
-        this.cssWidth = this.htmlCanvas?.clientWidth || this.canvas.width;
-        this.cssHeight = this.htmlCanvas?.clientHeight || this.canvas.height;
-        this.devicePixelWidth = this.canvas.width;
-        this.devicePixelHeight = this.canvas.height;
-        this.drawingBufferWidth = this.canvas.width;
-        this.drawingBufferHeight = this.canvas.height;
-        this.devicePixelRatio = globalThis.devicePixelRatio || 1;
-        this._position = [0, 0];
-        if (CanvasContext.isHTMLCanvas(this.canvas)) {
-            // Track visibility changes
-            this._intersectionObserver = new IntersectionObserver(entries => this._handleIntersection(entries));
-            this._intersectionObserver.observe(this.canvas);
-            // Track size changes
-            this._resizeObserver = new ResizeObserver(entries => this._handleResize(entries));
-            try {
-                this._resizeObserver.observe(this.canvas, { box: 'device-pixel-content-box' });
-            }
-            catch {
-                // Safari fallback
-                this._resizeObserver.observe(this.canvas, { box: 'content-box' });
-            }
-            // Track device pixel ratio changes.
-            // Defer call to after construction completes to ensure `this.device` is available.
-            setTimeout(() => this._observeDevicePixelRatio(), 0);
-            // Track top/left position changes
-            if (this.props.trackPosition) {
-                this._trackPosition();
-            }
-        }
-    }
-    destroy() {
-        this.destroyed = true;
-    }
-    setProps(props) {
-        if ('useDevicePixels' in props) {
-            this.props.useDevicePixels = props.useDevicePixels || false;
-            this._updateDrawingBufferSize();
-        }
-        return this;
-    }
-    /** Returns a framebuffer with properly resized current 'swap chain' textures */
-    getCurrentFramebuffer(options) {
-        this._resizeDrawingBufferIfNeeded();
-        return this._getCurrentFramebuffer(options);
-    }
-    // SIZE METHODS
-    /**
-     * Returns the size covered by the canvas in CSS pixels
-     * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
-    getCSSSize() {
-        return [this.cssWidth, this.cssHeight];
-    }
-    getPosition() {
-        return this._position;
-    }
-    /**
-     * Returns the size covered by the canvas in actual device pixels.
-     * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-     * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-     */
-    getDevicePixelSize() {
-        return [this.devicePixelWidth, this.devicePixelHeight];
-    }
-    /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
-    getDrawingBufferSize() {
-        return [this.drawingBufferWidth, this.drawingBufferHeight];
-    }
-    /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
-    getMaxDrawingBufferSize() {
-        const maxTextureDimension = this.device.limits.maxTextureDimension2D;
-        return [maxTextureDimension, maxTextureDimension];
-    }
-    /**
-     * Update the canvas drawing buffer size.
-     * @note - Called automatically if props.autoResize is true.
-     * @note - Defers update of drawing buffer size until framebuffer is requested to avoid flicker
-     * (resizing clears the drawing buffer)!
-     */
-    setDrawingBufferSize(width, height) {
-        // TODO(ib) - temporarily makes drawingBufferWidth/Height out of sync with canvas.width/height, could that cause issues?
-        this.drawingBufferWidth = Math.floor(width);
-        this.drawingBufferHeight = Math.floor(height);
-        this._needsDrawingBufferResize = true;
-    }
-    /**
-     * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
-     * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
-     * @note This function handles the non-HTML canvas cases
-     */
-    getDevicePixelRatio() {
-        const dpr = typeof window !== 'undefined' && window.devicePixelRatio;
-        return dpr || 1;
-    }
-    // DEPRECATED METHODS
-    /**
-     * Maps CSS pixel position to device pixel position
-     */
-    cssToDevicePixels(cssPixel, yInvert = true) {
-        const ratio = this.cssToDeviceRatio();
-        const [width, height] = this.getDrawingBufferSize();
-        return scalePixels(cssPixel, ratio, width, height, yInvert);
-    }
-    /** @deprecated - use .getDevicePixelSize() */
-    getPixelSize() {
-        return this.getDevicePixelSize();
-    }
-    /** @deprecated - TODO which values should we use for aspect */
-    getAspect() {
-        const [width, height] = this.getDevicePixelSize();
-        return width / height;
-    }
-    /** @deprecated Returns multiplier need to convert CSS size to Device size */
-    cssToDeviceRatio() {
-        try {
-            const [drawingBufferWidth] = this.getDrawingBufferSize();
-            const [cssWidth] = this.getCSSSize();
-            return cssWidth ? drawingBufferWidth / cssWidth : 1;
-        }
-        catch {
-            return 1;
-        }
-    }
-    /** @deprecated Use canvasContext.setDrawingBufferSize() */
-    resize(size) {
-        this.setDrawingBufferSize(size.width, size.height);
-    }
-    // IMPLEMENTATION
-    /**
-     * Allows subclass constructor to override the canvas id for auto created canvases.
-     * This can really help when debugging DOM in apps that create multiple devices
-     */
-    _setAutoCreatedCanvasId(id) {
-        if (this.htmlCanvas?.id === 'lumagl-auto-created-canvas') {
-            this.htmlCanvas.id = id;
-        }
-    }
-    /** reacts to an observed intersection */
-    _handleIntersection(entries) {
-        const entry = entries.find(entry_ => entry_.target === this.canvas);
-        if (!entry) {
-            return;
-        }
-        // TODO - store intersection rectangle?
-        const isVisible = entry.isIntersecting;
-        if (this.isVisible !== isVisible) {
-            this.isVisible = isVisible;
-            this.device.props.onVisibilityChange(this);
-        }
-    }
-    /**
-     * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
-     * @see https://web.dev/articles/device-pixel-content-box
-     * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
-     */
-    _handleResize(entries) {
-        const entry = entries.find(entry_ => entry_.target === this.canvas);
-        if (!entry) {
-            return;
-        }
-        // Update CSS size using content box size
-        this.cssWidth = entry.contentBoxSize[0].inlineSize;
-        this.cssHeight = entry.contentBoxSize[0].blockSize;
-        // Update our drawing buffer size variables, saving the old values for logging
-        const oldPixelSize = this.getDevicePixelSize();
-        // Use the most accurate drawing buffer size information the current browser can provide
-        // Note: content box sizes are guaranteed to be integers
-        // Note: Safari falls back to contentBoxSize
-        const devicePixelWidth = entry.devicePixelContentBoxSize?.[0].inlineSize ||
-            entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-        const devicePixelHeight = entry.devicePixelContentBoxSize?.[0].blockSize ||
-            entry.contentBoxSize[0].blockSize * devicePixelRatio;
-        // Make sure we don't overflow the maximum supported texture size
-        const [maxDevicePixelWidth, maxDevicePixelHeight] = this.getMaxDrawingBufferSize();
-        this.devicePixelWidth = Math.max(1, Math.min(devicePixelWidth, maxDevicePixelWidth));
-        this.devicePixelHeight = Math.max(1, Math.min(devicePixelHeight, maxDevicePixelHeight));
-        this._updateDrawingBufferSize();
-        // Inform the device
-        this.device.props.onResize(this, { oldPixelSize });
-    }
-    /** Initiate a deferred update for the canvas drawing buffer size */
-    _updateDrawingBufferSize() {
-        // Update the canvas drawing buffer size
-        if (this.props.autoResize) {
-            if (typeof this.props.useDevicePixels === 'number') {
-                const dpr = this.props.useDevicePixels;
-                this.setDrawingBufferSize(this.cssWidth * dpr, this.cssHeight * dpr);
-            }
-            else if (this.props.useDevicePixels) {
-                this.setDrawingBufferSize(this.devicePixelWidth, this.devicePixelHeight);
-            }
-            else {
-                this.setDrawingBufferSize(this.cssWidth, this.cssHeight);
-            }
-        }
-        // Resolve the initialized promise
-        this._initializedResolvers.resolve();
-        this.isInitialized = true;
-        this.updatePosition();
-    }
-    /** Perform a deferred resize of the drawing buffer if needed */
-    _resizeDrawingBufferIfNeeded() {
-        if (this._needsDrawingBufferResize) {
-            this._needsDrawingBufferResize = false;
-            const sizeChanged = this.drawingBufferWidth !== this.canvas.width ||
-                this.drawingBufferHeight !== this.canvas.height;
-            if (sizeChanged) {
-                // Update the canvas size
-                this.canvas.width = this.drawingBufferWidth;
-                this.canvas.height = this.drawingBufferHeight;
-                // Inform the subclass: WebGPU needs to call canvascontext.configure()
-                this._configureDevice();
-            }
-        }
-    }
-    /** Monitor DPR changes */
-    _observeDevicePixelRatio() {
-        const oldRatio = this.devicePixelRatio;
-        this.devicePixelRatio = window.devicePixelRatio;
-        this.updatePosition();
-        // Inform the device
-        this.device.props.onDevicePixelRatioChange(this, { oldRatio });
-        // Set up a one time query against the current resolution.
-        matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener('change', () => this._observeDevicePixelRatio(), { once: true });
-    }
-    /** Start tracking positions with a timer */
-    _trackPosition(intervalMs = 100) {
-        const intervalId = setInterval(() => {
-            if (this.destroyed) {
-                clearInterval(intervalId);
-            }
-            else {
-                this.updatePosition();
-            }
-        }, intervalMs);
-    }
-    /**
-     * Calculated the absolute position of the canvas
-     * @note - getBoundingClientRect() is normally cheap but can be expensive
-     * if called before browser has finished a reflow. Should not be the case here.
-     */
-    updatePosition() {
-        const newRect = this.htmlCanvas?.getBoundingClientRect();
-        if (newRect) {
-            // We only track position since we rely on the more precise ResizeObserver for size
-            const position = [newRect.left, newRect.top];
-            this._position ??= position;
-            const positionChanged = position[0] !== this._position[0] || position[1] !== this._position[1];
-            if (positionChanged) {
-                const oldPosition = this._position;
-                this._position = position;
-                this.device.props.onPositionChange?.(this, { oldPosition });
-            }
-        }
-    }
-}
-// HELPER FUNCTIONS
-/** Get a container element from a string or DOM element */
-function getContainer(container) {
-    if (typeof container === 'string') {
-        const element = document.getElementById(container);
-        if (!element) {
-            throw new Error(`${container} is not an HTML element`);
-        }
-        return element;
-    }
-    if (container) {
-        return container;
-    }
-    return document.body;
-}
-/** Get a Canvas element from DOM id */
-function getCanvasFromDOM(canvasId) {
-    const canvas = document.getElementById(canvasId);
-    if (!CanvasContext.isHTMLCanvas(canvas)) {
-        throw new Error('Object is not a canvas element');
-    }
-    return canvas;
-}
-/** Create a new canvas */
-function createCanvasElement(props) {
-    const { width, height } = props;
-    const newCanvas = document.createElement('canvas');
-    newCanvas.id = uid('lumagl-auto-created-canvas');
-    newCanvas.width = width || 1;
-    newCanvas.height = height || 1;
-    newCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';
-    newCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';
-    if (!props?.visible) {
-        newCanvas.style.visibility = 'hidden';
-    }
-    // Insert the canvas in the DOM
-    const container = getContainer(props?.container || null);
-    container.insertBefore(newCanvas, container.firstChild);
-    return newCanvas;
-}
-/**
- * Scales pixels linearly, handles edge cases
- * @param pixel
- * @param ratio
- * @param width
- * @param height
- * @param yInvert
- * @returns
- */
-function scalePixels(pixel, ratio, width, height, yInvert) {
-    const point = pixel;
-    const x = scaleX(point[0], ratio, width);
-    let y = scaleY(point[1], ratio, height, yInvert);
-    // Find boundaries of next pixel to provide valid range of device pixel locations
-    let t = scaleX(point[0] + 1, ratio, width);
-    // If next pixel's position is clamped to boundary, use it as is, otherwise subtract 1 for current pixel boundary
-    const xHigh = t === width - 1 ? t : t - 1;
-    t = scaleY(point[1] + 1, ratio, height, yInvert);
-    let yHigh;
-    if (yInvert) {
-        // If next pixel's position is clamped to boundary, use it as is, otherwise clamp it to valid range
-        t = t === 0 ? t : t + 1;
-        // swap y and yHigh
-        yHigh = y;
-        y = t;
-    }
-    else {
-        // If next pixel's position is clamped to boundary, use it as is, otherwise clamp it to valid range
-        yHigh = t === height - 1 ? t : t - 1;
-        // y remains same
-    }
-    return {
-        x,
-        y,
-        // when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.
-        width: Math.max(xHigh - x + 1, 1),
-        height: Math.max(yHigh - y + 1, 1)
-    };
-}
-function scaleX(x, ratio, width) {
-    // since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit
-    const r = Math.min(Math.round(x * ratio), width - 1);
-    return r;
-}
-function scaleY(y, ratio, height, yInvert) {
-    // since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit
-    return yInvert
-        ? Math.max(0, height - 1 - Math.round(y * ratio))
-        : Math.min(Math.round(y * ratio), height - 1);
+export class CanvasContext extends CanvasSurface {
+    static defaultProps = CanvasSurface.defaultProps;
 }
 //# sourceMappingURL=canvas-context.js.map