10238377546

Committed 04 Aug 2024 06:25PM UTC coverage: 76.195% (-0.04%) from 76.238%

Build # 10238377546

Build Type

push

github

Committed by

web-flow

Commit Message

fix(examples): Fix website resolution and dirlight use in instancing example (#2156)

Run Details

1931 of 2490 branches covered (77.55%)

Branch coverage included in aggregate %.

12 of 22 new or added lines in 1 file covered. (54.55%)

2 existing lines in 1 file now uncovered.

23868 of 31369 relevant lines covered (76.09%)

27.55 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

79.69

/modules/core/src/adapter/canvas-context.ts

// luma.gl
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

import {isBrowser} from '@probe.gl/env';
import type {Device} from './device';
import type {Framebuffer} from './resources/framebuffer';
import {log} from '../utils/log';
import type {TextureFormat} from '../gpu-type-utils/texture-formats';

const isPage: boolean = isBrowser() && typeof document !== 'undefined';
const isPageLoaded: () => boolean = () => isPage && document.readyState === 'complete';

/** Properties for a CanvasContext */
export type CanvasContextProps = {
  /** If canvas not supplied, will be created and added to the DOM. If string, 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 appended to body */
  container?: HTMLElement | string | null;
  /** Width in pixels of the canvas */
  width?: number;
  /** Height in pixels of the canvas */
  height?: number;
  /** Whether to apply a device pixels scale factor (`true` uses browser DPI) */
  useDevicePixels?: boolean | number;
  /** Whether to track resizes (if not ) */
  autoResize?: boolean;
  /** Visibility (only used if new canvas is created). */
  visible?: boolean;
  /** WebGPU only https://www.w3.org/TR/webgpu/#canvas-configuration */
  colorSpace?: 'srgb'; // GPUPredefinedColorSpace
  /** WebGPU only https://www.w3.org/TR/webgpu/#canvas-configuration */
  alphaMode?: 'opaque' | 'premultiplied';
};

const DEFAULT_CANVAS_CONTEXT_PROPS: Required<CanvasContextProps> = {
  canvas: null,
  width: 800, // width are height are only used by headless gl
  height: 600,
  useDevicePixels: true,
  autoResize: true,
  container: null,
  visible: true,
  colorSpace: 'srgb',
  alphaMode: 'opaque'
};

/**
 * 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(): https://github.com/w3ctag/design-reviews/issues/288
 * @todo transferControlToOffscreen: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
 */
export abstract class CanvasContext {
  abstract readonly device: Device;
  readonly id: string;
  readonly props: Required<CanvasContextProps>;
  readonly canvas: HTMLCanvasElement | OffscreenCanvas;
  readonly htmlCanvas?: HTMLCanvasElement;
  readonly offscreenCanvas?: OffscreenCanvas;
  readonly type: 'html-canvas' | 'offscreen-canvas' | 'node';

  /** Format of returned textures: "bgra8unorm", "rgba8unorm" */
  abstract readonly format: TextureFormat;
  /** Default stencil format for depth textures */
  abstract readonly depthStencilFormat: TextureFormat;

  width: number = 1;
  height: number = 1;

  readonly resizeObserver: ResizeObserver | undefined;

  /** State used by luma.gl classes: TODO - move to canvasContext*/
  readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};

  /** Check if the DOM is loaded */
  static get isPageLoaded(): boolean {
    return isPageLoaded();
  }

  /**
   * Get a 'lazy' promise that resolves when the DOM is loaded.
   * @note Since there may be limitations on number of `load` event listeners,
   * it is recommended avoid calling this function until actually needed.
   * I.e. don't call it until you know that you will be looking up a string in the DOM.
   */
  static pageLoaded: Promise<void> = getPageLoadPromise();

  constructor(props?: CanvasContextProps) {
    this.props = {...DEFAULT_CANVAS_CONTEXT_PROPS, ...props};
    props = this.props;

    if (!isBrowser()) {
      this.id = 'node-canvas-context';
      this.type = 'node';
      this.width = this.props.width;
      this.height = this.props.height;
      // TODO - does this prevent app from using jsdom style polyfills?
      this.canvas = null!;
      return;
    }

    if (!props.canvas) {
      const canvas = createCanvas(props);
      const container = getContainer(props?.container || null);
      container.insertBefore(canvas, container.firstChild);

      this.canvas = canvas;

      if (!props?.visible) {
        this.canvas.style.visibility = 'hidden';
      }
    } else if (typeof props.canvas === 'string') {
      this.canvas = getCanvasFromDOM(props.canvas);
    } else {
      this.canvas = props.canvas;
    }

    if (this.canvas instanceof HTMLCanvasElement) {
      this.id = this.canvas.id;
      this.type = 'html-canvas';
      this.htmlCanvas = this.canvas;
    } else {
      this.id = 'offscreen-canvas';
      this.type = 'offscreen-canvas';
      this.offscreenCanvas = this.canvas;
    }

    // React to size changes
    if (this.canvas instanceof HTMLCanvasElement && props.autoResize) {
      this.resizeObserver = new ResizeObserver(entries => {
        for (const entry of entries) {
          if (entry.target === this.canvas) {
            this.update();
          }
        }
      });
      this.resizeObserver.observe(this.canvas);
    }
  }

  /** Returns a framebuffer with properly resized current 'swap chain' textures */
  abstract getCurrentFramebuffer(): Framebuffer;

  /**
   * Returns the current DPR, if props.useDevicePixels is true
   * Device refers to physical
   */
  getDevicePixelRatio(useDevicePixels?: boolean | number): number {
    if (typeof OffscreenCanvas !== 'undefined' && this.canvas instanceof OffscreenCanvas) {
      return 1;
    }

    useDevicePixels = useDevicePixels === undefined ? this.props.useDevicePixels : useDevicePixels;

    if (!useDevicePixels || (useDevicePixels as number) <= 0) {
      return 1;
    }

    // The param was mainly provide to support the test cases, could be removed
    if (useDevicePixels === true) {
      const dpr = typeof window !== 'undefined' && window.devicePixelRatio;
      return dpr || 1;
    }

    return useDevicePixels;
  }

  /**
   * Returns the size of drawing buffer in device pixels.
   * @note This can be different from the 'CSS' size of a canvas, and also from the
   * canvas' internal drawing buffer size (.width, .height).
   * This is the size required to cover the canvas, adjusted for DPR
   */
  getPixelSize(): [number, number] {
    switch (this.type) {
      case 'node':
        return [this.width, this.height];
      case 'offscreen-canvas':
        return [this.canvas.width, this.canvas.height];
      case 'html-canvas':
        const dpr = this.getDevicePixelRatio();
        const canvas = this.canvas as HTMLCanvasElement;
        // If not attached to DOM client size can be 0
        return canvas.parentElement
          ? [canvas.clientWidth * dpr, canvas.clientHeight * dpr]
          : [this.canvas.width, this.canvas.height];
      default:
        throw new Error(this.type);
    }
  }

  getAspect(): number {
    const [width, height] = this.getPixelSize();
    return width / height;
  }

  /**
   * Returns multiplier need to convert CSS size to Device size
   */
  cssToDeviceRatio(): number {
    try {
      // For headless gl we might have used custom width and height
      // hence use cached clientWidth
      const [drawingBufferWidth] = this.getDrawingBufferSize();
      const {clientWidth} = this._canvasSizeInfo;
      return clientWidth ? drawingBufferWidth / clientWidth : 1;
    } catch {
      return 1;
    }
  }

  /**
   * Maps CSS pixel position to device pixel position
   */
  cssToDevicePixels(
    cssPixel: number[],
    yInvert: boolean = true
  ): {
    x: number;
    y: number;
    width: number;
    height: number;
  } {
    const ratio = this.cssToDeviceRatio();
    const [width, height] = this.getDrawingBufferSize();
    return scalePixels(cssPixel, ratio, width, height, yInvert);
  }

  /**
   * Use devicePixelRatio to set canvas width and height
   * @note this is a raw port of luma.gl v8 code. Might be worth a review
   */
  setDevicePixelRatio(
    devicePixelRatio: number,
    options: {width?: number; height?: number} = {}
  ): void {
    if (!this.htmlCanvas) {
      return;
    }

    // NOTE: if options.width and options.height not used remove in v8
    let clientWidth = 'width' in options ? options.width : this.htmlCanvas.clientWidth;
    let clientHeight = 'height' in options ? options.height : this.htmlCanvas.clientHeight;

    if (!clientWidth || !clientHeight) {
      log.log(1, 'Canvas clientWidth/clientHeight is 0')();
      // by forcing devicePixel ratio to 1, we do not scale canvas.width and height in each frame.
      devicePixelRatio = 1;
      clientWidth = this.htmlCanvas.width || 1;
      clientHeight = this.htmlCanvas.height || 1;
    }

    const cachedSize = this._canvasSizeInfo;
    // Check if canvas needs to be resized
    if (
      cachedSize.clientWidth !== clientWidth ||
      cachedSize.clientHeight !== clientHeight ||
      cachedSize.devicePixelRatio !== devicePixelRatio
    ) {
      let clampedPixelRatio = devicePixelRatio;

      const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);
      const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);
      this.htmlCanvas.width = canvasWidth;
      this.htmlCanvas.height = canvasHeight;

      // @ts-expect-error This only works for WebGL
      const gl = this.device.gl;
      if (gl) {
        // Note: when devicePixelRatio is too high, it is possible we might hit system limit for
        // drawing buffer width and hight, in those cases they get clamped and resulting aspect ration may not be maintained
        // for those cases, reduce devicePixelRatio.
        const [drawingBufferWidth, drawingBufferHeight] = this.getDrawingBufferSize();

        if (drawingBufferWidth !== canvasWidth || drawingBufferHeight !== canvasHeight) {
          clampedPixelRatio = Math.min(
            drawingBufferWidth / clientWidth,
            drawingBufferHeight / clientHeight
          );

          this.htmlCanvas.width = Math.floor(clientWidth * clampedPixelRatio);
          this.htmlCanvas.height = Math.floor(clientHeight * clampedPixelRatio);

          log.warn('Device pixel ratio clamped')();
        }

        this._canvasSizeInfo.clientWidth = clientWidth;
        this._canvasSizeInfo.clientHeight = clientHeight;
        this._canvasSizeInfo.devicePixelRatio = devicePixelRatio;
      }
    }
  }

  // PRIVATE

  /** @todo Major hack done to port the CSS methods above, base canvas context should not depend on WebGL */
  getDrawingBufferSize(): [number, number] {
    // @ts-expect-error This only works for WebGL
    const gl = this.device.gl;
    if (!gl) {
      // use default device pixel ratio
      throw new Error('canvas size');
    }
    return [gl.drawingBufferWidth, gl.drawingBufferHeight];
  }

  abstract resize(options?: {
    width?: number;
    height?: number;
    useDevicePixels?: boolean | number;
  }): void;

  /** Perform platform specific updates (WebGPU vs WebGL) */
  protected abstract update(): void;

  /**
   * 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) {
    if (this.htmlCanvas?.id === 'lumagl-auto-created-canvas') {
      this.htmlCanvas.id = id;
    }
  }
}

// HELPER FUNCTIONS

/** Returns a promise that resolves when the page is loaded */
function getPageLoadPromise(): Promise<void> {
  if (isPageLoaded() || typeof window === 'undefined') {
    return Promise.resolve();
  }
  return new Promise(resolve => {
    window.addEventListener('load', () => resolve());
  });
}

function getContainer(container: HTMLElement | string | null): HTMLElement {
  if (typeof container === 'string') {
    const element = document.getElementById(container);
    if (!element && !isPageLoaded()) {
      throw new Error(`Accessing '${container}' before page was loaded`);
    }
    if (!element) {
      throw new Error(`${container} is not an HTML element`);
    }
    return element;
  } else if (container) {
    return container;
  }
  return document.body;
}

/** Get a Canvas element from DOM id */
function getCanvasFromDOM(canvasId: string): HTMLCanvasElement {
  const canvas = document.getElementById(canvasId);
  if (!canvas && !isPageLoaded()) {
    throw new Error(`Accessing '${canvasId}' before page was loaded`);
  }
  if (!(canvas instanceof HTMLCanvasElement)) {
    throw new Error('Object is not a canvas element');
  }
  return canvas;
}

/** Create a new canvas */
function createCanvas(props: CanvasContextProps) {
  const {width, height} = props;
  const targetCanvas = document.createElement('canvas');
  targetCanvas.id = 'lumagl-auto-created-canvas';
  targetCanvas.width = width || 1;
  targetCanvas.height = height || 1;
  targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';
  targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';
  return targetCanvas;
}

/**
 *
 * @param pixel
 * @param ratio
 * @param width
 * @param height
 * @param yInvert
 * @returns
 */
function scalePixels(
  pixel: number[],
  ratio: number,
  width: number,
  height: number,
  yInvert: boolean
): {
  x: number;
  y: number;
  width: number;
  height: number;
} {
  const point = pixel as [number, number];

  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: number, ratio: number, width: number): number {
  // 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: number, ratio: number, height: number, yInvert: boolean): number {
  // 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);
}

1	// luma.gl	1✔
2	// SPDX-License-Identifier: MIT	1✔
3	// Copyright (c) vis.gl contributors	1✔
4		1✔
5	import {isBrowser} from '@probe.gl/env';	1✔
6	import type {Device} from './device';	1✔
7	import type {Framebuffer} from './resources/framebuffer';	1✔
8	import {log} from '../utils/log';	1✔
9	import type {TextureFormat} from '../gpu-type-utils/texture-formats';	1✔
10		1✔
11	const isPage: boolean = isBrowser() && typeof document !== 'undefined';	1✔
12	const isPageLoaded: () => boolean = () => isPage && document.readyState === 'complete';	1✔
13		1✔
14	/** Properties for a CanvasContext */	1✔
15	export type CanvasContextProps = {	1✔
16	/** If canvas not supplied, will be created and added to the DOM. If string, will be looked up in the DOM */	1✔
17	canvas?: HTMLCanvasElement \| OffscreenCanvas \| string \| null;	1✔
18	/** If new canvas is created, it will be created in the specified container, otherwise appended to body */	1✔
19	container?: HTMLElement \| string \| null;	1✔
20	/** Width in pixels of the canvas */	1✔
21	width?: number;	1✔
22	/** Height in pixels of the canvas */	1✔
23	height?: number;	1✔
24	/** Whether to apply a device pixels scale factor (`true` uses browser DPI) */	1✔
25	useDevicePixels?: boolean \| number;	1✔
26	/** Whether to track resizes (if not ) */	1✔
27	autoResize?: boolean;	1✔
28	/** Visibility (only used if new canvas is created). */	1✔
29	visible?: boolean;	1✔
30	/** WebGPU only https://www.w3.org/TR/webgpu/#canvas-configuration */	1✔
31	colorSpace?: 'srgb'; // GPUPredefinedColorSpace	1✔
32	/** WebGPU only https://www.w3.org/TR/webgpu/#canvas-configuration */	1✔
33	alphaMode?: 'opaque' \| 'premultiplied';	1✔
34	};	1✔
35		1✔
36	const DEFAULT_CANVAS_CONTEXT_PROPS: Required<CanvasContextProps> = {	1✔
37	canvas: null,	1✔
38	width: 800, // width are height are only used by headless gl	1✔
39	height: 600,	1✔
40	useDevicePixels: true,	1✔
41	autoResize: true,	1✔
42	container: null,	1✔
43	visible: true,	1✔
44	colorSpace: 'srgb',	1✔
45	alphaMode: 'opaque'	1✔
46	};	1✔
47		1✔
48	/**	1✔
49	* Manages a canvas. Supports both HTML or offscreen canvas	1✔
50	* - Creates a new canvas or looks up a canvas from the DOM	1✔
51	* - Provides check for DOM loaded	1✔
52	* @todo commit(): https://github.com/w3ctag/design-reviews/issues/288	1✔
53	* @todo transferControlToOffscreen: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen	1✔
54	*/	1✔
55	export abstract class CanvasContext {	1✔
56	abstract readonly device: Device;	1✔
57	readonly id: string;	1✔
58	readonly props: Required<CanvasContextProps>;	1✔
59	readonly canvas: HTMLCanvasElement \| OffscreenCanvas;	1✔
60	readonly htmlCanvas?: HTMLCanvasElement;	1✔
61	readonly offscreenCanvas?: OffscreenCanvas;	1✔
62	readonly type: 'html-canvas' \| 'offscreen-canvas' \| 'node';	1✔
63		1✔
64	/** Format of returned textures: "bgra8unorm", "rgba8unorm" */	1✔
65	abstract readonly format: TextureFormat;	1✔
66	/** Default stencil format for depth textures */	1✔
67	abstract readonly depthStencilFormat: TextureFormat;	1✔
68		1✔
69	width: number = 1;	1✔
70	height: number = 1;	1✔
71		1✔
72	readonly resizeObserver: ResizeObserver \| undefined;	1✔
73		1✔
74	/** State used by luma.gl classes: TODO - move to canvasContext*/	1✔
75	readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};	1✔
76		1✔
77	/** Check if the DOM is loaded */	1✔
78	static get isPageLoaded(): boolean {	1✔
79	return isPageLoaded();	×
80	}	×
81		1✔
82	/**	1✔
83	* Get a 'lazy' promise that resolves when the DOM is loaded.	1✔
84	* @note Since there may be limitations on number of `load` event listeners,	1✔
85	* it is recommended avoid calling this function until actually needed.	1✔
86	* I.e. don't call it until you know that you will be looking up a string in the DOM.	1✔
87	*/	1✔
88	static pageLoaded: Promise<void> = getPageLoadPromise();	1✔
89		1✔
90	constructor(props?: CanvasContextProps) {	1✔
91	this.props = {...DEFAULT_CANVAS_CONTEXT_PROPS, ...props};	10✔
92	props = this.props;	10✔
93		10✔
94	if (!isBrowser()) {	10!
95	this.id = 'node-canvas-context';	×
96	this.type = 'node';	×
97	this.width = this.props.width;	×
98	this.height = this.props.height;	×
99	// TODO - does this prevent app from using jsdom style polyfills?	×
100	this.canvas = null!;	×
101	return;	×
102	}	×
103		10✔
104	if (!props.canvas) {	10✔
105	const canvas = createCanvas(props);	10✔
106	const container = getContainer(props?.container \|\| null);	10✔
107	container.insertBefore(canvas, container.firstChild);	10✔
108		10✔
109	this.canvas = canvas;	10✔
110		10✔
111	if (!props?.visible) {	10!
112	this.canvas.style.visibility = 'hidden';	×
113	}	×
114	} else if (typeof props.canvas === 'string') {	10!
115	this.canvas = getCanvasFromDOM(props.canvas);	×
116	} else {	×
117	this.canvas = props.canvas;	×
118	}	×
119		10✔
120	if (this.canvas instanceof HTMLCanvasElement) {	10✔
121	this.id = this.canvas.id;	10✔
122	this.type = 'html-canvas';	10✔
123	this.htmlCanvas = this.canvas;	10✔
124	} else {	10!
125	this.id = 'offscreen-canvas';	×
126	this.type = 'offscreen-canvas';	×
127	this.offscreenCanvas = this.canvas;	×
128	}	×
129		10✔
130	// React to size changes	10✔
131	if (this.canvas instanceof HTMLCanvasElement && props.autoResize) {	10✔
132	this.resizeObserver = new ResizeObserver(entries => {	10✔
133	for (const entry of entries) {	10✔
134	if (entry.target === this.canvas) {	10✔
135	this.update();	10✔
136	}	10✔
137	}	10✔
138	});	10✔
139	this.resizeObserver.observe(this.canvas);	10✔
140	}	10✔
141	}	10✔
142		1✔
143	/** Returns a framebuffer with properly resized current 'swap chain' textures */	1✔
144	abstract getCurrentFramebuffer(): Framebuffer;	1✔
145		1✔
146	/**	1✔
147	* Returns the current DPR, if props.useDevicePixels is true	1✔
148	* Device refers to physical	1✔
149	*/	1✔
150	getDevicePixelRatio(useDevicePixels?: boolean \| number): number {	1✔
151	if (typeof OffscreenCanvas !== 'undefined' && this.canvas instanceof OffscreenCanvas) {	51!
152	return 1;	×
153	}	×
154		51✔
155	useDevicePixels = useDevicePixels === undefined ? this.props.useDevicePixels : useDevicePixels;	51✔
156		51✔
157	if (!useDevicePixels \|\| (useDevicePixels as number) <= 0) {	51✔
158	return 1;	5✔
159	}	5✔
160		46✔
161	// The param was mainly provide to support the test cases, could be removed	46✔
162	if (useDevicePixels === true) {	51✔
163	const dpr = typeof window !== 'undefined' && window.devicePixelRatio;	45✔
164	return dpr \|\| 1;	45!
165	}	45✔
166		1✔
167	return useDevicePixels;	1✔
168	}	51✔
169		1✔
170	/**	1✔
171	* Returns the size of drawing buffer in device pixels.	1✔
172	* @note This can be different from the 'CSS' size of a canvas, and also from the	1✔
173	* canvas' internal drawing buffer size (.width, .height).	1✔
174	* This is the size required to cover the canvas, adjusted for DPR	1✔
175	*/	1✔
176	getPixelSize(): [number, number] {	1✔
177	switch (this.type) {	34✔
178	case 'node':	34!
179	return [this.width, this.height];	×
180	case 'offscreen-canvas':	34!
181	return [this.canvas.width, this.canvas.height];	×
182	case 'html-canvas':	34✔
183	const dpr = this.getDevicePixelRatio();	34✔
184	const canvas = this.canvas as HTMLCanvasElement;	34✔
185	// If not attached to DOM client size can be 0	34✔
186	return canvas.parentElement	34✔
187	? [canvas.clientWidth * dpr, canvas.clientHeight * dpr]	34!
188	: [this.canvas.width, this.canvas.height];	×
189	default:	34!
190	throw new Error(this.type);	×
191	}	34!
192	}	34✔
193		1✔
194	getAspect(): number {	1✔
195	const [width, height] = this.getPixelSize();	×
196	return width / height;	×
197	}	×
198		1✔
199	/**	1✔
200	* Returns multiplier need to convert CSS size to Device size	1✔
201	*/	1✔
202	cssToDeviceRatio(): number {	1✔
203	try {	33✔
204	// For headless gl we might have used custom width and height	33✔
205	// hence use cached clientWidth	33✔
206	const [drawingBufferWidth] = this.getDrawingBufferSize();	33✔
207	const {clientWidth} = this._canvasSizeInfo;	33✔
208	return clientWidth ? drawingBufferWidth / clientWidth : 1;	33!
209	} catch {	33!
210	return 1;	×
211	}	×
212	}	33✔
213		1✔
214	/**	1✔
215	* Maps CSS pixel position to device pixel position	1✔
216	*/	1✔
217	cssToDevicePixels(	1✔
218	cssPixel: number[],	28✔
219	yInvert: boolean = true	28✔
220	): {	28✔
221	x: number;	28✔
222	y: number;	28✔
223	width: number;	28✔
224	height: number;	28✔
225	} {	28✔
226	const ratio = this.cssToDeviceRatio();	28✔
227	const [width, height] = this.getDrawingBufferSize();	28✔
228	return scalePixels(cssPixel, ratio, width, height, yInvert);	28✔
229	}	28✔
230		1✔
231	/**	1✔
232	* Use devicePixelRatio to set canvas width and height	1✔
233	* @note this is a raw port of luma.gl v8 code. Might be worth a review	1✔
234	*/	1✔
235	setDevicePixelRatio(	1✔
236	devicePixelRatio: number,	11✔
237	options: {width?: number; height?: number} = {}	11✔
238	): void {	11✔
239	if (!this.htmlCanvas) {	11!
240	return;	×
241	}	×
242		11✔
243	// NOTE: if options.width and options.height not used remove in v8	11✔
244	let clientWidth = 'width' in options ? options.width : this.htmlCanvas.clientWidth;	11!
245	let clientHeight = 'height' in options ? options.height : this.htmlCanvas.clientHeight;	11!
246		11✔
247	if (!clientWidth \|\| !clientHeight) {	11!
248	log.log(1, 'Canvas clientWidth/clientHeight is 0')();	×
249	// by forcing devicePixel ratio to 1, we do not scale canvas.width and height in each frame.	×
250	devicePixelRatio = 1;	×
251	clientWidth = this.htmlCanvas.width \|\| 1;	×
252	clientHeight = this.htmlCanvas.height \|\| 1;	×
253	}	×
254		11✔
255	const cachedSize = this._canvasSizeInfo;	11✔
256	// Check if canvas needs to be resized	11✔
257	if (	11✔
258	cachedSize.clientWidth !== clientWidth \|\|	11!
UNCOV 259	cachedSize.clientHeight !== clientHeight \|\|	×
UNCOV 260	cachedSize.devicePixelRatio !== devicePixelRatio	×
261	) {	11✔
262	let clampedPixelRatio = devicePixelRatio;	11✔
263		11✔
264	const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);	11✔
265	const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);	11✔
266	this.htmlCanvas.width = canvasWidth;	11✔
267	this.htmlCanvas.height = canvasHeight;	11✔
268		11✔
269	// @ts-expect-error This only works for WebGL	11✔
270	const gl = this.device.gl;	11✔
271	if (gl) {	11✔
272	// Note: when devicePixelRatio is too high, it is possible we might hit system limit for	5✔
273	// drawing buffer width and hight, in those cases they get clamped and resulting aspect ration may not be maintained	5✔
274	// for those cases, reduce devicePixelRatio.	5✔
275	const [drawingBufferWidth, drawingBufferHeight] = this.getDrawingBufferSize();	5✔
276		5✔
277	if (drawingBufferWidth !== canvasWidth \|\| drawingBufferHeight !== canvasHeight) {	5!
NEW 278	clampedPixelRatio = Math.min(	×
NEW 279	drawingBufferWidth / clientWidth,	×
NEW 280	drawingBufferHeight / clientHeight	×
NEW 281	);	×
NEW 282		×
NEW 283	this.htmlCanvas.width = Math.floor(clientWidth * clampedPixelRatio);	×
NEW 284	this.htmlCanvas.height = Math.floor(clientHeight * clampedPixelRatio);	×
NEW 285		×
NEW 286	log.warn('Device pixel ratio clamped')();	×
NEW 287	}	×
288		5✔
289	this._canvasSizeInfo.clientWidth = clientWidth;	5✔
290	this._canvasSizeInfo.clientHeight = clientHeight;	5✔
291	this._canvasSizeInfo.devicePixelRatio = devicePixelRatio;	5✔
292	}	5✔
293	}	11✔
294	}	11✔
295		1✔
296	// PRIVATE	1✔
297		1✔
298	/** @todo Major hack done to port the CSS methods above, base canvas context should not depend on WebGL */	1✔
299	getDrawingBufferSize(): [number, number] {	1✔
300	// @ts-expect-error This only works for WebGL	15✔
301	const gl = this.device.gl;	15✔
302	if (!gl) {	15!
303	// use default device pixel ratio	×
304	throw new Error('canvas size');	×
305	}	×
306	return [gl.drawingBufferWidth, gl.drawingBufferHeight];	15✔
307	}	15✔
308		1✔
309	abstract resize(options?: {	1✔
310	width?: number;	1✔
311	height?: number;	1✔
312	useDevicePixels?: boolean \| number;	1✔
313	}): void;	1✔
314		1✔
315	/** Perform platform specific updates (WebGPU vs WebGL) */	1✔
316	protected abstract update(): void;	1✔
317		1✔
318	/**	1✔
319	* Allows subclass constructor to override the canvas id for auto created canvases.	1✔
320	* This can really help when debugging DOM in apps that create multiple devices	1✔
321	*/	1✔
322	protected _setAutoCreatedCanvasId(id: string) {	1✔
323	if (this.htmlCanvas?.id === 'lumagl-auto-created-canvas') {	8✔
324	this.htmlCanvas.id = id;	8✔
325	}	8✔
326	}	8✔
327	}	1✔
328		1✔
329	// HELPER FUNCTIONS	1✔
330		1✔
331	/** Returns a promise that resolves when the page is loaded */	1✔
332	function getPageLoadPromise(): Promise<void> {	1✔
333	if (isPageLoaded() \|\| typeof window === 'undefined') {	1!
334	return Promise.resolve();	×
335	}	×
336	return new Promise(resolve => {	1✔
337	window.addEventListener('load', () => resolve());	1✔
338	});	1✔
339	}	1✔
340		1✔
341	function getContainer(container: HTMLElement \| string \| null): HTMLElement {	10✔
342	if (typeof container === 'string') {	10!
343	const element = document.getElementById(container);	×
344	if (!element && !isPageLoaded()) {	×
345	throw new Error(`Accessing '${container}' before page was loaded`);	×
346	}	×
347	if (!element) {	×
348	throw new Error(`${container} is not an HTML element`);	×
349	}	×
350	return element;	×
351	} else if (container) {	10!
352	return container;	×
353	}	×
354	return document.body;	10✔
355	}	10✔
356		1✔
357	/** Get a Canvas element from DOM id */	1✔
358	function getCanvasFromDOM(canvasId: string): HTMLCanvasElement {	×
359	const canvas = document.getElementById(canvasId);	×
360	if (!canvas && !isPageLoaded()) {	×
361	throw new Error(`Accessing '${canvasId}' before page was loaded`);	×
362	}	×
363	if (!(canvas instanceof HTMLCanvasElement)) {	×
364	throw new Error('Object is not a canvas element');	×
365	}	×
366	return canvas;	×
367	}	×
368		1✔
369	/** Create a new canvas */	1✔
370	function createCanvas(props: CanvasContextProps) {	10✔
371	const {width, height} = props;	10✔
372	const targetCanvas = document.createElement('canvas');	10✔
373	targetCanvas.id = 'lumagl-auto-created-canvas';	10✔
374	targetCanvas.width = width \|\| 1;	10!
375	targetCanvas.height = height \|\| 1;	10!
376	targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';	10!
377	targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';	10!
378	return targetCanvas;	10✔
379	}	10✔
380		1✔
381	/**	1✔
382	*	1✔
383	* @param pixel	1✔
384	* @param ratio	1✔
385	* @param width	1✔
386	* @param height	1✔
387	* @param yInvert	1✔
388	* @returns	1✔
389	*/	1✔
390	function scalePixels(	28✔
391	pixel: number[],	28✔
392	ratio: number,	28✔
393	width: number,	28✔
394	height: number,	28✔
395	yInvert: boolean	28✔
396	): {	28✔
397	x: number;	28✔
398	y: number;	28✔
399	width: number;	28✔
400	height: number;	28✔
401	} {	28✔
402	const point = pixel as [number, number];	28✔
403		28✔
404	const x = scaleX(point[0], ratio, width);	28✔
405	let y = scaleY(point[1], ratio, height, yInvert);	28✔
406		28✔
407	// Find boundaries of next pixel to provide valid range of device pixel locations	28✔
408		28✔
409	let t = scaleX(point[0] + 1, ratio, width);	28✔
410	// If next pixel's position is clamped to boundary, use it as is, otherwise subtract 1 for current pixel boundary	28✔
411	const xHigh = t === width - 1 ? t : t - 1;	28✔
412		28✔
413	t = scaleY(point[1] + 1, ratio, height, yInvert);	28✔
414	let yHigh;	28✔
415	if (yInvert) {	28✔
416	// If next pixel's position is clamped to boundary, use it as is, otherwise clamp it to valid range	14✔
417	t = t === 0 ? t : t + 1;	14✔
418	// swap y and yHigh	14✔
419	yHigh = y;	14✔
420	y = t;	14✔
421	} else {	14✔
422	// If next pixel's position is clamped to boundary, use it as is, otherwise clamp it to valid range	14✔
423	yHigh = t === height - 1 ? t : t - 1;	14✔
424	// y remains same	14✔
425	}	14✔
426	return {	28✔
427	x,	28✔
428	y,	28✔
429	// when ratio < 1, current css pixel and next css pixel may point to same device pixel, set width/height to 1 in those cases.	28✔
430	width: Math.max(xHigh - x + 1, 1),	28✔
431	height: Math.max(yHigh - y + 1, 1)	28✔
432	};	28✔
433	}	28✔
434		1✔
435	function scaleX(x: number, ratio: number, width: number): number {	56✔
436	// since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit	56✔
437	const r = Math.min(Math.round(x * ratio), width - 1);	56✔
438	return r;	56✔
439	}	56✔
440		1✔
441	function scaleY(y: number, ratio: number, height: number, yInvert: boolean): number {	56✔
442	// since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit	56✔
443	return yInvert	56✔
444	? Math.max(0, height - 1 - Math.round(y * ratio))	28✔
445	: Math.min(Math.round(y * ratio), height - 1);	28✔
446	}	56✔

visgl / luma.gl / 10238377546

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous