@luma.gl/core 9.0.0-alpha.9 → 9.0.0-beta.2

package/src/adapter/attribute-utils/get-attribute-from-layouts.ts

@@ -0,0 +1,259 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+import {log} from '../../utils/log';
+import type {ShaderLayout, AttributeDeclaration} from '../types/shader-layout';
+import type {BufferLayout} from '../types/buffer-layout';
+import type {ShaderDataType, ShaderAttributeType} from '../types/shader-types';
+import {decodeShaderAttributeType} from '../type-utils/decode-attribute-type';
+import type {VertexFormat, VertexType} from '../types/vertex-formats';
+import {decodeVertexFormat} from '../type-utils/decode-vertex-format';
+
+/** Resolved info for a buffer / attribute combination to help backend configure it correctly */
+export type AttributeInfo = {
+  /** Attribute name */
+  attributeName: string;
+  /** Location in shader */
+  location: number;
+  /** Type / precision used in shader (buffer values may be converted) */
+  shaderType: ShaderAttributeType;
+  /** Calculations are done in this type in the shader's attribute declaration */
+  shaderDataType: ShaderDataType;
+  /** Components refer to the number of components in the shader's attribute declaration */
+  shaderComponents: 1 | 2 | 3 | 4;
+  /** It is the shader attribute declaration that determines whether GPU will process as integer or float */
+  integer: boolean;
+
+  /** BufferName */
+  bufferName: string;
+  /** Format of buffer data */
+  vertexFormat: VertexFormat;
+  /** Memory data type refers to the data type in the buffer */
+  bufferDataType: VertexType;
+  /** Components refer to the number of components in the buffer's vertex format */
+  bufferComponents: 1 | 2 | 3 | 4;
+  /** Normalization is encoded in the buffer layout's vertex format... */
+  normalized: boolean;
+
+  /** If not specified, the step mode is inferred from the attribute name in the shader (contains string instance) */
+  stepMode: 'vertex' | 'instance';
+
+  /** The byteOffset is encoded in or calculated from the buffer layout */
+  byteOffset: number;
+  /** The byteStride is encoded in or calculated from the buffer layout */
+  byteStride: number;
+};
+
+type BufferAttributeInfo = {
+  attributeName: string;
+  bufferName: string;
+  stepMode?: 'vertex' | 'instance';
+  vertexFormat: VertexFormat;
+  byteOffset: number;
+  byteStride: number;
+};
+
+/** 
+ * Map from "attribute names" to "resolved attribute infos" 
+ * containing information about both buffer layouts and shader attribute declarations
+ */
+export function getAttributeInfosFromLayouts(
+  shaderLayout: ShaderLayout,
+  bufferLayout: BufferLayout[]
+): Record<string, AttributeInfo> {
+  const attributeInfos: Record<string, AttributeInfo> = {};
+  for (const attribute of shaderLayout.attributes) {
+    attributeInfos[attribute.name] = getAttributeInfoFromLayouts(
+      shaderLayout,
+      bufferLayout,
+      attribute.name
+    );
+  }
+  return attributeInfos;
+}
+
+/** 
+ * Array indexed by "location" holding "resolved attribute infos" 
+ */
+export function getAttributeInfosByLocation(
+  shaderLayout: ShaderLayout,
+  bufferLayout: BufferLayout[],
+  maxVertexAttributes: number = 16
+): AttributeInfo[] {
+  const attributeInfos = getAttributeInfosFromLayouts(shaderLayout, bufferLayout);
+  const locationInfos: AttributeInfo[] = new Array(maxVertexAttributes).fill(null);
+  for (const attributeInfo of Object.values(attributeInfos)) {
+    locationInfos[attributeInfo.location] = attributeInfo;
+  }
+  return locationInfos;
+}
+
+/**
+ * Get the combined information from a shader layout and a buffer layout for a specific attribute
+ */
+function getAttributeInfoFromLayouts(
+  shaderLayout: ShaderLayout,
+  bufferLayout: BufferLayout[],
+  name: string
+): AttributeInfo | null {
+  const shaderDeclaration = getAttributeFromShaderLayout(shaderLayout, name);
+  const bufferMapping: BufferAttributeInfo = getAttributeFromBufferLayout(bufferLayout, name);
+
+  // TODO should no longer happen
+  if (!shaderDeclaration) {
+    //  || !bufferMapping
+    return null;
+  }
+
+  const attributeTypeInfo = decodeShaderAttributeType(shaderDeclaration.type);
+  const vertexFormat = bufferMapping?.vertexFormat || attributeTypeInfo.defaultVertexFormat;
+  const vertexFormatInfo = decodeVertexFormat(vertexFormat);
+
+  return {
+    attributeName: bufferMapping?.attributeName || shaderDeclaration.name,
+    bufferName: bufferMapping?.bufferName || shaderDeclaration.name,
+    location: shaderDeclaration.location,
+    shaderType: shaderDeclaration.type,
+    shaderDataType: attributeTypeInfo.dataType,
+    shaderComponents: attributeTypeInfo.components,
+    vertexFormat,
+    bufferDataType: vertexFormatInfo.type,
+    bufferComponents: vertexFormatInfo.components,
+    // normalized is a property of the buffer's vertex format
+    normalized: vertexFormatInfo.normalized,
+    // integer is a property of the shader declaration
+    integer: attributeTypeInfo.integer,
+    stepMode: bufferMapping?.stepMode || shaderDeclaration.stepMode,
+    byteOffset: bufferMapping?.byteOffset || 0,
+    byteStride: bufferMapping?.byteStride || 0
+  };
+}
+
+function getAttributeFromShaderLayout(
+  shaderLayout: ShaderLayout,
+  name: string
+): AttributeDeclaration | null {
+  const attribute = shaderLayout.attributes.find(attr => attr.name === name);
+  if (!attribute) {
+    log.warn(`shader layout attribute "${name}" not present in shader`);
+  }
+  return attribute || null;
+}
+
+function getAttributeFromBufferLayout(
+  bufferLayouts: BufferLayout[],
+  name: string
+): BufferAttributeInfo | null {
+  // Check that bufferLayouts are valid (each either has format or attribute)
+  checkBufferLayouts(bufferLayouts);
+
+  let bufferLayoutInfo = getAttributeFromShortHand(bufferLayouts, name);
+  if (bufferLayoutInfo) {
+    return bufferLayoutInfo;
+  }
+
+  bufferLayoutInfo = getAttributeFromAttributesList(bufferLayouts, name);
+  if (bufferLayoutInfo) {
+    return bufferLayoutInfo;
+  }
+
+  // Didn't find...
+  log.warn(`layout for attribute "${name}" not present in buffer layout`);
+  return null;
+}
+
+/** Check that bufferLayouts are valid (each either has format or attribute) */
+function checkBufferLayouts(bufferLayouts: BufferLayout[]) {
+  for (const bufferLayout of bufferLayouts) {
+    if (
+      (bufferLayout.attributes && bufferLayout.format) ||
+      (!bufferLayout.attributes && !bufferLayout.format)
+    ) {
+      log.warn(`BufferLayout ${name} must have either 'attributes' or 'format' field`);
+    }
+  }
+}
+
+/** Get attribute from format shorthand if specified */
+function getAttributeFromShortHand(
+  bufferLayouts: BufferLayout[],
+  name: string
+): BufferAttributeInfo | null {
+  for (const bufferLayout of bufferLayouts) {
+    if (bufferLayout.format && bufferLayout.name === name) {
+      return {
+        attributeName: bufferLayout.name,
+        bufferName: name,
+        stepMode: bufferLayout.stepMode,
+        vertexFormat: bufferLayout.format,
+        // If offset is needed, use `attributes` field.
+        byteOffset: 0,
+        byteStride: bufferLayout.byteStride || 0
+      };
+    }
+  }
+  return null;
+}
+
+/**
+ * Search attribute mappings (e.g. interleaved attributes) for buffer mapping.
+ * Not the name of the buffer might be the same as one of the interleaved attributes.
+ */
+function getAttributeFromAttributesList(
+  bufferLayouts: BufferLayout[],
+  name: string
+): BufferAttributeInfo | null {
+  for (const bufferLayout of bufferLayouts) {
+    let byteStride: number | undefined = bufferLayout.byteStride;
+
+    // Calculate a default byte stride if not provided
+    if (typeof bufferLayout.byteStride !== 'number') {
+      for (const attributeMapping of bufferLayout.attributes || []) {
+        const info = decodeVertexFormat(attributeMapping.format);
+        byteStride += info.byteLength;
+      }
+    }
+
+    const attributeMapping = bufferLayout.attributes?.find(mapping => mapping.attribute === name);
+    if (attributeMapping) {
+      return {
+        attributeName: attributeMapping.attribute,
+        bufferName: bufferLayout.name,
+        stepMode: bufferLayout.stepMode,
+        vertexFormat: attributeMapping.format,
+        byteOffset: attributeMapping.byteOffset,
+        byteStride
+      };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Merges an provided shader layout into a base shader layout
+ * In WebGL, this allows the auto generated shader layout to be overridden by the application
+ * Typically to change the format of the vertex attributes (from float32x4 to uint8x4 etc).
+ * @todo Drop this? Aren't all use cases covered by mergeBufferLayout()?
+ */
+export function mergeShaderLayout(
+  baseLayout: ShaderLayout,
+  overrideLayout: ShaderLayout
+): ShaderLayout {
+  // Deep clone the base layout
+  const mergedLayout: ShaderLayout = {
+    ...baseLayout,
+    attributes: baseLayout.attributes.map(attribute => ({...attribute}))
+  };
+  // Merge the attributes
+  for (const attribute of overrideLayout?.attributes || []) {
+    const baseAttribute = mergedLayout.attributes.find(attr => attr.name === attribute.name);
+    if (!baseAttribute) {
+      log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+    } else {
+      baseAttribute.type = attribute.type || baseAttribute.type;
+      baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+    }
+  }
+  return mergedLayout;
+}

package/src/adapter/canvas-context.ts

@@ -0,0 +1,433 @@
+// luma.gl, MIT license
+import {isBrowser} from '@probe.gl/env';
+import type {Device} from './device';
+import type {Framebuffer} from './resources/framebuffer';
+import {log} from '../utils/log';
+
+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';
+
+  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;
+
+      // 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);
+}