hdr-canvas 0.0.9 → 0.0.11

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import { ColorTypes } from 'colorjs.io';
+
+// See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
+/// <reference lib="dom" />
+
+type HDRHTMLCanvasOptionsType = "mode";
+type HDRHTMLCanvasOptions = { [key in HDRHTMLCanvasOptionsType]?: string };
+
+interface HDRHTMLCanvasElement extends HTMLCanvasElement {
+  configureHighDynamicRange(options: HDRHTMLCanvasOptions): void;
+  _getContext(contextId: string, options?: object): RenderingContext | null;
+}
+
+interface HDRImageData {
+  readonly colorSpace: PredefinedColorSpace;
+  readonly data: Uint8ClampedArray | Uint16Array;
+  readonly height: number;
+  readonly width: number;
+}
+
+// See https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md
+// "rec2100-display-linear" is left out beacause of mapping issues
+type HDRPredefinedColorSpace = "display-p3" | "srgb" | "rec2100-hlg" | "rec2100-pq";
+
+type Uint16ImagePixelCallback = (red: number, green: number, blue: number, alpha: number) => Uint16Array;
+declare class Uint16Image {
+    height: number;
+    width: number;
+    data: Uint16Array;
+    static DEFAULT_COLORSPACE: HDRPredefinedColorSpace;
+    static SDR_MULTIPLIER: number;
+    static COLORSPACES: Record<HDRPredefinedColorSpace, ColorTypes>;
+    colorSpace: HDRPredefinedColorSpace;
+    constructor(width: number, height: number, colorspace?: string);
+    fill(color: number[]): Uint16Image | undefined;
+    getPixel(w: number, h: number): Uint16Array;
+    setPixel(w: number, h: number, px: number[]): void;
+    static scaleUint8ToUint16(val: number): number;
+    getImageData(): ImageData | null;
+    static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Uint16Array;
+    static convertArrayToRec2100_hlg(data: Uint8ClampedArray): Uint16Array;
+    pixelCallback(fn: Uint16ImagePixelCallback): void;
+    static loadSDRImageData(url: URL): Promise<HDRImageData | undefined>;
+    static fromImageData(imageData: HDRImageData): Uint16Image;
+    static fromURL(url: URL): Promise<Uint16Image | undefined>;
+    setImageData(imageData: HDRImageData): void;
+    clone(): Uint16Image;
+}
+
+declare function checkHDR(): boolean;
+declare function checkHDRCanvas(): boolean;
+
+declare function initHDRCanvas(canvas: HDRHTMLCanvasElement): RenderingContext | null;
+declare function defaultGetContextHDR(): void;
+declare function resetGetContext(): void;
+
+export { Uint16Image, checkHDR, checkHDRCanvas, defaultGetContextHDR, initHDRCanvas, resetGetContext };

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "hdr-canvas",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "HDR capable HTML canvas",
-  "main": "dist/hdr-canvas.js",
+  "main": "dist/hdr-canvas.cjs",
+  "module": "dist/hdr-canvas.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./build/three.module.js",
+      "require": "./build/three.cjs"
+    },
+    "./three": "./three/*"
+  },
   "files": [
     "dist/hdr-canvas.d.ts",
     "dist/hdr-canvas.js",
@@ -11,9 +20,12 @@
     "dist/hdr-canvas.min.js.map",
     "dist/hdr-canvas.cjs",
     "dist/hdr-canvas.cjs.map",
+    "dist/index.d.ts",
+    "dist/@types",
     "three",
     "src"
   ],
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . -c eslint.config.mjs --report-unused-disable-directives",
@@ -39,20 +51,20 @@
   },
   "homepage": "https://github.com/cmahnke/hdr-canvas#readme",
   "devDependencies": {
-    "@eslint/js": "^9.6.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@eslint/js": "^9.15.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@types/eslint__js": "^8.42.3",
-    "eslint": "^9.9.0",
+    "eslint": "^9.15.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "rollup": "^4.21.0",
+    "rollup": "^4.27.3",
     "rollup-plugin-dts": "^6.1.1",
-    "three": "^0.167.1",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0"
+    "three": "^0.170.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.15.0"
   },
   "dependencies": {
     "colorjs.io": "^0.5.2"

package/src/Uint16Image.ts

@@ -1,12 +1,9 @@
 import Color from "colorjs.io";
 import type { Coords, ColorTypes } from "colorjs.io";
 
-type Uint16ImagePixelCallback = (
-  red: number,
-  green: number,
-  blue: number,
-  alpha: number,
-) => Uint16Array;
+import type { HDRPredefinedColorSpace, HDRImageData } from "./types/HDRCanvas.d.ts";
+
+type Uint16ImagePixelCallback = (red: number, green: number, blue: number, alpha: number) => Uint16Array;
 
 /*
 interface ColorSpaceMapping {
@@ -24,7 +21,7 @@ export class Uint16Image {
     "rec2100-hlg": "rec2100hlg",
     "display-p3": "p3",
     srgb: "sRGB",
-    "rec2100-pq": "rec2100pq",
+    "rec2100-pq": "rec2100pq"
   };
   colorSpace: HDRPredefinedColorSpace;
 
@@ -76,25 +73,20 @@ export class Uint16Image {
     if (this.data === undefined || this.data === null) {
       return null;
     }
-    return new ImageData(
-      this.data as unknown as Uint8ClampedArray,
-      this.width,
-      this.height,
-      { colorSpace: this.colorSpace as PredefinedColorSpace },
-    );
+    return new ImageData(this.data as unknown as Uint8ClampedArray, this.width, this.height, {
+      colorSpace: this.colorSpace as PredefinedColorSpace
+    });
   }
 
   static convertPixelToRec2100_hlg(pixel: Uint8ClampedArray): Uint16Array {
-    const colorJScolorSpace = <string>(
-      Uint16Image.COLORSPACES["rec2100-hlg" as HDRPredefinedColorSpace]
-    );
+    const colorJScolorSpace = <string>Uint16Image.COLORSPACES["rec2100-hlg" as HDRPredefinedColorSpace];
 
     const srgbColor = new Color(
       "srgb",
       Array.from(pixel.slice(0, 3)).map((band: number) => {
         return band / 255;
       }) as Coords,
-      pixel[3] / 255,
+      pixel[3] / 255
     );
     const rec2100hlgColor = srgbColor.to(colorJScolorSpace);
     const hlg: Array<number> = rec2100hlgColor.coords.map((band: number) => {
@@ -118,10 +110,7 @@ export class Uint16Image {
 
   pixelCallback(fn: Uint16ImagePixelCallback) {
     for (let i = 0; i < this.data.length; i += 4) {
-      this.data.set(
-        fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]),
-        i,
-      );
+      this.data.set(fn(this.data[i], this.data[i + 1], this.data[i + 2], this.data[i + 3]), i);
     }
   }
 
@@ -146,9 +135,7 @@ export class Uint16Image {
   static fromImageData(imageData: HDRImageData): Uint16Image {
     const i = new Uint16Image(imageData.width, imageData.height);
     if (imageData.colorSpace == "srgb") {
-      i.data = Uint16Image.convertArrayToRec2100_hlg(
-        <Uint8ClampedArray>imageData.data,
-      );
+      i.data = Uint16Image.convertArrayToRec2100_hlg(<Uint8ClampedArray>imageData.data);
     } else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
       i.data = <Uint16Array>imageData.data;
     } else {
@@ -158,22 +145,18 @@ export class Uint16Image {
   }
 
   static async fromURL(url: URL): Promise<Uint16Image | undefined> {
-    return Uint16Image.loadSDRImageData(url).then(
-      (data: HDRImageData | undefined) => {
-        if (data !== undefined) {
-          return Uint16Image.fromImageData(data);
-        }
-      },
-    );
+    return Uint16Image.loadSDRImageData(url).then((data: HDRImageData | undefined) => {
+      if (data !== undefined) {
+        return Uint16Image.fromImageData(data);
+      }
+    });
   }
 
   setImageData(imageData: HDRImageData): void {
     this.width = imageData.width;
     this.height = imageData.height;
     if (imageData.colorSpace == "srgb") {
-      this.data = Uint16Image.convertArrayToRec2100_hlg(
-        <Uint8ClampedArray>imageData.data,
-      );
+      this.data = Uint16Image.convertArrayToRec2100_hlg(<Uint8ClampedArray>imageData.data);
     } else if (imageData.colorSpace == Uint16Image.DEFAULT_COLORSPACE) {
       this.data = <Uint16Array>imageData.data;
     } else {

package/src/hdr-canvas.ts

@@ -1,9 +1,11 @@
-import {Uint16Image} from './Uint16Image'
+import { Uint16Image } from "./Uint16Image";
 
-const hdr_options = {colorSpace: Uint16Image.DEFAULT_COLORSPACE, pixelFormat: 'float16'}
+import type { HDRHTMLCanvasElement } from "./types/HDRCanvas.d.ts";
 
-export function initHDRCanvas(canvas : HDRHTMLCanvasElement) : RenderingContext | null {
-  canvas.configureHighDynamicRange({mode: 'extended'});
+const hdr_options = { colorSpace: Uint16Image.DEFAULT_COLORSPACE, pixelFormat: "float16" };
+
+export function initHDRCanvas(canvas: HDRHTMLCanvasElement): RenderingContext | null {
+  canvas.configureHighDynamicRange({ mode: "extended" });
   const ctx = canvas.getContext("2d", hdr_options);
   return ctx;
 }
@@ -11,15 +13,14 @@ export function initHDRCanvas(canvas : HDRHTMLCanvasElement) : RenderingContext
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 export function defaultGetContextHDR() {
   (HTMLCanvasElement.prototype as HDRHTMLCanvasElement)._getContext = HTMLCanvasElement.prototype.getContext;
-  (HTMLCanvasElement.prototype as any).getContext = function(type: string, options: object) {
-
+  (HTMLCanvasElement.prototype as any).getContext = function (type: string, options: object) {
     if (options !== undefined) {
       options = Object.assign({}, options, hdr_options);
     } else {
       options = hdr_options;
     }
     return (this as HDRHTMLCanvasElement)._getContext(type, options);
-  }
+  };
 }
 
 /* eslint-disable  @typescript-eslint/no-explicit-any */

package/src/hdr-check.ts

@@ -4,12 +4,8 @@ export function checkHDR(): boolean {
     const hdrSupported: boolean = bitsPerChannel > 8;
 
     //TODO: Test if this works as expected
-    const dynamicRangeHighMQ: boolean = window.matchMedia(
-      "(dynamic-range: high)",
-    ).matches;
-    const colorGamutMQ: boolean =
-      window.matchMedia("(color-gamut: rec2020)").matches ||
-      window.matchMedia("(color-gamut: p3)").matches;
+    const dynamicRangeHighMQ: boolean = window.matchMedia("(dynamic-range: high)").matches;
+    const colorGamutMQ: boolean = window.matchMedia("(color-gamut: rec2020)").matches || window.matchMedia("(color-gamut: p3)").matches;
     if (colorGamutMQ && dynamicRangeHighMQ) {
       if (bitsPerChannel !== Math.round(bitsPerChannel)) {
         // iOS bug
@@ -37,22 +33,24 @@ export function checkHDRCanvas(): boolean {
     if (!canvas.getContext) {
       return false;
     }
-    const ctx: CanvasRenderingContext2D | null = <CanvasRenderingContext2D>(
-      canvas.getContext("2d", {
-        colorSpace: colorSpace,
-        pixelFormat: "float16",
-      })
-    );
+    const ctx: CanvasRenderingContext2D | null = <CanvasRenderingContext2D>canvas.getContext("2d", {
+      colorSpace: colorSpace,
+      pixelFormat: "float16"
+    });
     //canvas.drawingBufferColorSpace = colorSpace;
     //canvas.unpackColorSpace = colorSpace;
     if (ctx === null) {
       return false;
     }
     return true;
+    /* eslint-disable no-console, @typescript-eslint/no-unused-vars */
   } catch (e) {
-    /* eslint-disable no-console */
-    console.error("Bad canvas ColorSpace test", e);
-    /* eslint-enable */
+    //console.error("Bad canvas ColorSpace test", e);
+    console.error(
+      "Bad canvas ColorSpace test - make sure that the Chromium browser flag 'enable-experimental-web-platform-features' has been enabled"
+    );
+
     return false;
   }
+  /* eslint-enable */
 }

package/src/index.ts

@@ -1,7 +1,3 @@
 export { Uint16Image } from "./Uint16Image";
 export { checkHDR, checkHDRCanvas } from "./hdr-check";
-export {
-  initHDRCanvas,
-  defaultGetContextHDR,
-  resetGetContext,
-} from "./hdr-canvas";
+export { initHDRCanvas, defaultGetContextHDR, resetGetContext } from "./hdr-canvas";

package/src/{@types → types}/HDRCanvas.d.ts

@@ -1,4 +1,5 @@
 // See https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts
+/// <reference lib="dom" />
 
 type HDRHTMLCanvasOptionsType = "mode";
 type HDRHTMLCanvasOptions = { [key in HDRHTMLCanvasOptionsType]?: string };
@@ -17,10 +18,8 @@ interface HDRImageData {
 
 // See https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md
 // "rec2100-display-linear" is left out beacause of mapping issues
-type HDRPredefinedColorSpace =
-  | "display-p3"
-  | "srgb"
-  | "rec2100-hlg"
-  | "rec2100-pq";
+type HDRPredefinedColorSpace = "display-p3" | "srgb" | "rec2100-hlg" | "rec2100-pq";
 
 //enum HDRPredefinedColorSpace {"display-p3", "srgb", "rec2100-hlg", "rec2100-pq", "rec2100-display-linear"};
+
+export { HDRHTMLCanvasElement, HDRPredefinedColorSpace, HDRImageData };