npm - @oliversalzburg/js-utils - Versions diffs - 0.0.13 → 0.0.15 - Mend

@oliversalzburg/js-utils 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/_site/assets/navigation.js +1 -1
package/_site/assets/search.js +1 -1
package/_site/classes/AbstractError.html +47 -8
package/_site/classes/Canvas.html +66 -26
package/_site/classes/CanvasSandbox.html +76 -0
package/_site/classes/Euler.html +217 -0
package/_site/classes/InternalError.html +48 -9
package/_site/classes/InvalidArgumentError.html +47 -8
package/_site/classes/InvalidOperationError.html +47 -8
package/_site/classes/Matrix3.html +167 -0
package/_site/classes/NotImplementedError.html +47 -8
package/_site/classes/PermissionViolationError.html +47 -8
package/_site/classes/Quaternion.html +211 -0
package/_site/classes/Random.html +60 -13
package/_site/classes/RenderLoop.html +62 -20
package/_site/classes/ResourceConflictError.html +47 -8
package/_site/classes/Transformation.html +52 -0
package/_site/classes/UnexpectedNilError.html +44 -5
package/_site/classes/UnknownError.html +47 -8
package/_site/classes/Vector2.html +80 -37
package/_site/classes/Vector3.html +201 -15
package/_site/classes/Vector4.html +156 -0
package/_site/favicon.ico +0 -0
package/_site/functions/addVector2.html +43 -4
package/_site/functions/addVector3.html +44 -0
package/_site/functions/blend.html +41 -2
package/_site/functions/blendAdditive.html +41 -2
package/_site/functions/blendSubtractive.html +41 -2
package/_site/functions/clamp.html +41 -2
package/_site/functions/coalesceOnRejection.html +48 -0
package/_site/functions/cosDeg.html +41 -2
package/_site/functions/crossVector3.html +44 -0
package/_site/functions/deg2rad.html +41 -2
package/_site/functions/difference.html +41 -2
package/_site/functions/distance.html +41 -2
package/_site/functions/dotVector3.html +44 -0
package/_site/functions/errorToJSON.html +41 -2
package/_site/functions/errorToRecord.html +41 -2
package/_site/functions/errorToSimpleSerializable.html +41 -2
package/_site/functions/filterType.html +41 -2
package/_site/functions/formatString.html +41 -2
package/_site/functions/formatStringTemplate.html +41 -2
package/_site/functions/fromRGB.html +41 -2
package/_site/functions/fromRGBA.html +41 -2
package/_site/functions/getA.html +41 -2
package/_site/functions/getB.html +41 -2
package/_site/functions/getDocumentElementTypeById.html +41 -2
package/_site/functions/getG.html +41 -2
package/_site/functions/getR.html +41 -2
package/_site/functions/intersect.html +41 -2
package/_site/functions/is.html +41 -2
package/_site/functions/isError.html +41 -2
package/_site/functions/isInteger.html +41 -2
package/_site/functions/isNil.html +41 -2
package/_site/functions/isqrt.html +41 -2
package/_site/functions/multiplyVector2.html +43 -4
package/_site/functions/multiplyVector3.html +44 -0
package/_site/functions/mustExist.html +41 -2
package/_site/functions/nextPalette.html +42 -2
package/_site/functions/prepareAsyncContext.html +46 -0
package/_site/functions/putPixel32.html +47 -8
package/_site/functions/putPixel32Add.html +47 -8
package/_site/functions/putPixel32Sub.html +47 -8
package/_site/functions/putSubPixel32.html +41 -2
package/_site/functions/rad2deg.html +41 -2
package/_site/functions/randomRange.html +41 -2
package/_site/functions/safeRGBComponent.html +41 -2
package/_site/functions/seedFromString.html +41 -2
package/_site/functions/shuffleArray.html +41 -2
package/_site/functions/sinDeg.html +41 -2
package/_site/functions/sleep.html +41 -2
package/_site/functions/somecolor.html +41 -2
package/_site/functions/subtractVector2.html +43 -4
package/_site/functions/subtractVector3.html +44 -0
package/_site/functions/toGrayScale.html +41 -2
package/_site/functions/unknownToError.html +41 -2
package/_site/index.html +41 -2
package/_site/interfaces/CanvasOptions.html +42 -3
package/_site/interfaces/CanvasSandboxApplication.html +60 -0
package/_site/interfaces/CanvasSandboxExpectedOptions.html +48 -0
package/_site/interfaces/RenderLoopOptions.html +43 -4
package/_site/modules.html +59 -3
package/_site/types/AnyAsyncFunction.html +41 -0
package/_site/types/AnyConstructor.html +41 -2
package/_site/types/AnyFunction.html +41 -2
package/_site/types/ConstructorOf.html +41 -2
package/_site/types/FunctionReturning.html +41 -2
package/_site/types/Maybe.html +41 -2
package/_site/types/Mixin.html +41 -2
package/_site/types/Nil.html +41 -2
package/_site/types/RenderLoopCallback.html +41 -2
package/_site/types/SerializedError.html +41 -2
package/_site/variables/MS_PER_FRAME_60FPS.html +42 -0
package/_site/variables/PALETTES.html +41 -2
package/_site/variables/TWO_PI.html +41 -2
package/_site/variables/random-1.html +41 -2
package/docs/assets/favicon.ico +0 -0
package/lib/Async.d.ts +3 -0
package/lib/Async.js +17 -0
package/lib/Async.js.map +1 -0
package/lib/async.d.ts +24 -0
package/lib/async.js +37 -0
package/lib/async.js.map +1 -0
package/lib/core.d.ts +4 -0
package/lib/core.js.map +1 -1
package/lib/graphics/canvas copy.d.ts +170 -0
package/lib/graphics/canvas copy.js +300 -0
package/lib/graphics/canvas copy.js.map +1 -0
package/lib/graphics/canvas-sandbox.d.ts +206 -0
package/lib/graphics/canvas-sandbox.js +272 -0
package/lib/graphics/canvas-sandbox.js.map +1 -0
package/lib/graphics/canvas-worker.d.ts +50 -0
package/lib/graphics/canvas-worker.js +78 -0
package/lib/graphics/canvas-worker.js.map +1 -0
package/lib/graphics/canvas.d.ts +14 -9
package/lib/graphics/canvas.js +53 -19
package/lib/graphics/canvas.js.map +1 -1
package/lib/graphics/core.d.ts +2 -1
package/lib/graphics/core.js +2 -0
package/lib/graphics/core.js.map +1 -1
package/lib/graphics/index.d.ts +1 -0
package/lib/graphics/index.js +1 -0
package/lib/graphics/index.js.map +1 -1
package/lib/graphics/render-loop.d.ts +6 -5
package/lib/graphics/render-loop.js +18 -9
package/lib/graphics/render-loop.js.map +1 -1
package/lib/index.d.ts +1 -0
package/lib/index.js +1 -0
package/lib/index.js.map +1 -1
package/lib/math/euler.d.ts +19 -0
package/lib/math/euler.js +23 -0
package/lib/math/euler.js.map +1 -0
package/lib/math/index.d.ts +5 -1
package/lib/math/index.js +5 -1
package/lib/math/index.js.map +1 -1
package/lib/math/matrix3.d.ts +218 -0
package/lib/math/matrix3.js +509 -0
package/lib/math/matrix3.js.map +1 -0
package/lib/math/quaternion.d.ts +120 -0
package/lib/math/quaternion.js +272 -0
package/lib/math/quaternion.js.map +1 -0
package/lib/math/transformation.d.ts +27 -0
package/lib/math/transformation.js +32 -0
package/lib/math/transformation.js.map +1 -0
package/lib/math/vector2.d.ts +19 -13
package/lib/math/vector2.js +12 -4
package/lib/math/vector2.js.map +1 -1
package/lib/math/vector3.d.ts +256 -3
package/lib/math/vector3.js +440 -1
package/lib/math/vector3.js.map +1 -1
package/lib/math/vector4.d.ts +183 -0
package/lib/math/vector4.js +303 -0
package/lib/math/vector4.js.map +1 -0
package/lib/random.d.ts +12 -0
package/lib/random.js +16 -0
package/lib/random.js.map +1 -1
package/package.json +4 -3

package/lib/graphics/canvas-sandbox.d.ts ADDED Viewed

@@ -0,0 +1,206 @@
+/// <reference types="@types/web" />
+import { Random } from "../random.js";
+import { Canvas } from "./canvas.js";
+import { RenderLoop } from "./render-loop.js";
+/**
+ * The options your application has to accept so it can interact with the {@linkcode CanvasSandbox}.
+ * @group Graphics
+ */
+export interface CanvasSandboxExpectedOptions {
+    /**
+     * Should your application run in dark mode?
+     * You can ignore this setting and produce any colored output you want,
+     * but the setting will be toggeled by the sandbox according to the user's
+     * browser/OS preference.
+     */
+    darkMode: boolean;
+    /**
+     * The seed for the PRNG.
+     */
+    seed: string;
+}
+/**
+ * Describes an application running inside the {@linkcode CanvasSandbox}.
+ * @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options object
+ * with which the application is constructed.
+ * @group Graphics
+ */
+export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSandboxExpectedOptions> {
+    /**
+     * The options with which the application was constructed.
+     */
+    options: TApplicationOptions;
+    /**
+     * The PRNG used in this application.
+     */
+    random: Random;
+    /**
+     * Is the application currently paused?
+     * Should be get/set, but can also be ignored, if the feature isn't used.
+     */
+    paused: boolean;
+    /**
+     * Request the application to draw a new frame.
+     * @param delta How many milliseconds passed since the last frame draw.
+     * @param timestamp The current timestamp.
+     */
+    onDraw(delta: number, timestamp: number): void;
+    /**
+     * Reconfigure the application with the given options and restart it.
+     * @param canvas The canvas to use.
+     * @param options The new options to use.
+     */
+    reconfigure(canvas: Canvas, options: Partial<TApplicationOptions>): void;
+    /**
+     * Start the application.
+     */
+    start(): void;
+}
+/**
+ * The {@linkcode CanvasSandbox} provides a scaffold to quickly perform experiments
+ * with a {@linkcode !HTMLCanvasElement} in a document. Common functionality for such
+ * experiments is implemented in the sandbox already.
+ * @example
+ * ```ts
+ * import { Random, seedFromString } from "@oliversalzburg/js-utils/lib/random.js";
+ * import { Canvas } from "@oliversalzburg/js-utils/lib/graphics/canvas.js";
+ * import { getDocumentElementTypeById } from "@oliversalzburg/js-utils/lib/dom/core.js";
+ * import { CanvasSandbox } from "@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js";
+ *
+ * interface ApplicationOptions {
+ *   seed: string;
+ *   somethingElse: number;
+ * }
+ *
+ * class Application {
+ *   canvas: Canvas;
+ *   options: ApplicationOptions;
+ *   random: Random;
+ *
+ *   constructor(canvas:Canvas, options: ApplicationOptions) {
+ *     this.canvas = canvas;
+ *     this.options = options;
+ *     this.random = new Random(seedFromString(options.seed));
+ *   }
+ *
+ *   reconfigure(canvas:Canvas, options: Partial<ApplicationOptions>) {
+ *     this.canvas = canvas;
+ *     this.options = { ...this.options, ...options };
+ *     this.random = new Random(seedFromString(options.seed));
+ *   }
+ *
+ *   onDraw(delta:number, timestamp:number) {
+ *     // draw something on `this.canvas`
+ *   }
+ *
+ *   start() {}
+ * }
+ *
+ * const canvasNode = getDocumentElementTypeById(document, "main", HTMLCanvasElement);
+ * const canvasSandbox = new CanvasSandbox(
+ *   window,
+ *   canvasNode,
+ *   Application,
+ *   {seed: "foo", somethingElse: 12345}
+ * );
+ * canvasSandbox.run();
+ * ```
+ * ```html
+ * <!doctype html>
+ * <html>
+ *   <head>
+ *     <meta charset="UTF-8" />
+ *     <link rel="stylesheet" href="main.css" />
+ *   </head>
+ *
+ *   <body>
+ *     <canvas id="main" class="darkMode" width="512" height="512"></canvas>
+ *   </body>
+ *   <script src="main.ts" type="module"></script>
+ * </html>
+ * ```
+ * ```css
+ * html,
+ * body {
+ *   height: 100%;
+ *   width: 100%;
+ *   padding: 0;
+ *   margin: 0;
+ *   background-color: #808080;
+ * }
+ *
+ * body {
+ *   transition: background-color 1s ease-in-out;
+ * }
+ * body.darkMode {
+ *   background-color: #211f1f;
+ * }
+ * body.lightMode {
+ *   background-color: #ebdcdc;
+ * }
+ *
+ * #main {
+ *   display: block;
+ *   position: absolute;
+ *   margin: auto;
+ *   top: 0;
+ *   left: 0;
+ *   right: 0;
+ *   bottom: 0;
+ *
+ *   filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
+ *   transition: all 1s;
+ * }
+ * ```
+ * @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options
+ * the application in the sandbox will be constructed with.
+ * @group Graphics
+ */
+export declare class CanvasSandbox<TApplicationOptions extends CanvasSandboxExpectedOptions> {
+    #private;
+    /**
+     * The window the sandbox is running in.
+     */
+    readonly window: Window;
+    /**
+     * The document the sandbox is interacting with.
+     */
+    readonly document: Document;
+    /**
+     * The application running inside the sandbox.
+     */
+    readonly application: CanvasSandboxApplication<TApplicationOptions>;
+    /**
+     * The canvas node that we're drawing into.
+     */
+    readonly canvasNode: HTMLCanvasElement;
+    /**
+     * Our convenience canvas wrapper, which we provide to the application
+     * to render to.
+     */
+    readonly canvas: Canvas;
+    /**
+     * The render loop we use to control frame rendering.
+     */
+    readonly renderLoop: RenderLoop;
+    /**
+     * Construct a new {@linkcode CanvasSandbox}.
+     * @param window The window we're running inside.
+     * @param canvasNode The canvas node we're drawing to.
+     * @param Application The application that is going to run in the sandbox.
+     * @param options The options that the application should be constructed with.
+     */
+    constructor(window: Window, canvasNode: HTMLCanvasElement, Application: new (canvas: Canvas, options: TApplicationOptions) => CanvasSandboxApplication<TApplicationOptions>, options: TApplicationOptions);
+    /**
+     * Run the sandbox.
+     */
+    run(): void;
+    /**
+     * Switch the sandbox to dark mode.
+     */
+    toDarkMode(): void;
+    /**
+     * Switch the sandbox to light mode.
+     */
+    toLightMode(): void;
+}

package/lib/graphics/canvas-sandbox.js ADDED Viewed

@@ -0,0 +1,272 @@
+import { prepareAsyncContext } from "../async.js";
+import { Canvas } from "./canvas.js";
+import { nextPalette } from "./core.js";
+import { RenderLoop } from "./render-loop.js";
+/**
+ * The {@linkcode CanvasSandbox} provides a scaffold to quickly perform experiments
+ * with a {@linkcode !HTMLCanvasElement} in a document. Common functionality for such
+ * experiments is implemented in the sandbox already.
+ * @example
+ * ```ts
+ * import { Random, seedFromString } from "@oliversalzburg/js-utils/lib/random.js";
+ * import { Canvas } from "@oliversalzburg/js-utils/lib/graphics/canvas.js";
+ * import { getDocumentElementTypeById } from "@oliversalzburg/js-utils/lib/dom/core.js";
+ * import { CanvasSandbox } from "@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js";
+ *
+ * interface ApplicationOptions {
+ *   seed: string;
+ *   somethingElse: number;
+ * }
+ *
+ * class Application {
+ *   canvas: Canvas;
+ *   options: ApplicationOptions;
+ *   random: Random;
+ *
+ *   constructor(canvas:Canvas, options: ApplicationOptions) {
+ *     this.canvas = canvas;
+ *     this.options = options;
+ *     this.random = new Random(seedFromString(options.seed));
+ *   }
+ *
+ *   reconfigure(canvas:Canvas, options: Partial<ApplicationOptions>) {
+ *     this.canvas = canvas;
+ *     this.options = { ...this.options, ...options };
+ *     this.random = new Random(seedFromString(options.seed));
+ *   }
+ *
+ *   onDraw(delta:number, timestamp:number) {
+ *     // draw something on `this.canvas`
+ *   }
+ *
+ *   start() {}
+ * }
+ *
+ * const canvasNode = getDocumentElementTypeById(document, "main", HTMLCanvasElement);
+ * const canvasSandbox = new CanvasSandbox(
+ *   window,
+ *   canvasNode,
+ *   Application,
+ *   {seed: "foo", somethingElse: 12345}
+ * );
+ * canvasSandbox.run();
+ * ```
+ * ```html
+ * <!doctype html>
+ * <html>
+ *   <head>
+ *     <meta charset="UTF-8" />
+ *     <link rel="stylesheet" href="main.css" />
+ *   </head>
+ *
+ *   <body>
+ *     <canvas id="main" class="darkMode" width="512" height="512"></canvas>
+ *   </body>
+ *   <script src="main.ts" type="module"></script>
+ * </html>
+ * ```
+ * ```css
+ * html,
+ * body {
+ *   height: 100%;
+ *   width: 100%;
+ *   padding: 0;
+ *   margin: 0;
+ *   background-color: #808080;
+ * }
+ *
+ * body {
+ *   transition: background-color 1s ease-in-out;
+ * }
+ * body.darkMode {
+ *   background-color: #211f1f;
+ * }
+ * body.lightMode {
+ *   background-color: #ebdcdc;
+ * }
+ *
+ * #main {
+ *   display: block;
+ *   position: absolute;
+ *   margin: auto;
+ *   top: 0;
+ *   left: 0;
+ *   right: 0;
+ *   bottom: 0;
+ *
+ *   filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
+ *   transition: all 1s;
+ * }
+ * ```
+ * @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options
+ * the application in the sandbox will be constructed with.
+ * @group Graphics
+ */
+export class CanvasSandbox {
+    /**
+     * The window the sandbox is running in.
+     */
+    window;
+    /**
+     * The document the sandbox is interacting with.
+     */
+    document;
+    /**
+     * The application running inside the sandbox.
+     */
+    application;
+    /**
+     * The canvas node that we're drawing into.
+     */
+    canvasNode;
+    /**
+     * Our convenience canvas wrapper, which we provide to the application
+     * to render to.
+     */
+    canvas;
+    /**
+     * The render loop we use to control frame rendering.
+     */
+    renderLoop;
+    /**
+     * The handle that keeps track of debouncing of `resize` events.
+     */
+    #resizeDebounce = null;
+    /**
+     * Construct a new {@linkcode CanvasSandbox}.
+     * @param window The window we're running inside.
+     * @param canvasNode The canvas node we're drawing to.
+     * @param Application The application that is going to run in the sandbox.
+     * @param options The options that the application should be constructed with.
+     */
+    constructor(window, canvasNode, Application, options) {
+        this.window = window;
+        this.document = window.document;
+        this.canvasNode = canvasNode;
+        this.canvas = new Canvas(canvasNode);
+        this.application = new Application(this.canvas, options);
+        const applicationOnDraw = this.application.onDraw.bind(this.application);
+        this.renderLoop = new RenderLoop(applicationOnDraw, this.canvas, { drawFps: true });
+        this.#hookWindow();
+        this.#hookBody();
+        this.#hookCanvas();
+        const systemPrefersDarkMode = this.window.matchMedia("(prefers-color-scheme: dark)").matches;
+        if (systemPrefersDarkMode) {
+            this.toDarkMode();
+        }
+        else {
+            this.toLightMode();
+        }
+    }
+    /**
+     * Run the sandbox.
+     */
+    run() {
+        this.application.start();
+        this.renderLoop.unblock();
+    }
+    /**
+     * Create event listeners on the document `body`.
+     */
+    #hookBody() {
+        this.document.body.addEventListener("click", prepareAsyncContext(async (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (!this.document.fullscreenEnabled) {
+                return;
+            }
+            if (!this.document.fullscreenElement) {
+                await this.canvasNode.requestFullscreen();
+            }
+        }));
+        this.document.body.addEventListener("keyup", event => {
+            switch (event.keyCode) {
+                case 13:
+                    // Enter
+                    nextPalette();
+                    this.#reconfigureApplication({
+                        seed: this.application.random.next().toString(),
+                    });
+                    this.application.reconfigure(this.canvas, {
+                        seed: this.application.random.next().toString(),
+                    });
+                    this.application.start();
+                    break;
+                case 32:
+                    // Space
+                    this.application.paused = !this.application.paused;
+                    break;
+            }
+        });
+    }
+    /**
+     * Reconfigures, and then restarts, the application.
+     * @param options The new options for the application.
+     */
+    #reconfigureApplication(options = {}) {
+        this.application.reconfigure(this.canvas, options);
+        this.application.start();
+    }
+    /**
+     * Create event listeners on the canvas node in the document.
+     */
+    #hookCanvas() {
+        this.canvasNode.addEventListener("click", prepareAsyncContext(async (event) => {
+            if (this.document.fullscreenElement) {
+                await document.exitFullscreen();
+                return;
+            }
+            nextPalette();
+            this.#reconfigureApplication({
+                seed: this.application.random.next().toString(),
+            });
+            event.preventDefault();
+        }));
+    }
+    /**
+     * Create event listeners on the window we're running in.
+     */
+    #hookWindow() {
+        this.window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", ({ matches }) => {
+            if (matches) {
+                this.toDarkMode();
+            }
+            else {
+                this.toLightMode();
+            }
+        });
+        this.window.addEventListener("resize", event => {
+            if (this.#resizeDebounce !== null) {
+                this.window.clearTimeout(this.#resizeDebounce);
+            }
+            this.#resizeDebounce = this.window.setTimeout(() => {
+                this.#reconfigureApplication();
+                this.canvas.refreshCanvasNode();
+            }, 1000);
+        });
+    }
+    /**
+     * Switch the sandbox to dark mode.
+     */
+    toDarkMode() {
+        this.#reconfigureApplication({
+            darkMode: true,
+        });
+        document.body.classList.add("darkMode");
+        document.body.classList.remove("lightMode");
+    }
+    /**
+     * Switch the sandbox to light mode.
+     */
+    toLightMode() {
+        this.#reconfigureApplication({
+            darkMode: false,
+        });
+        document.body.classList.add("lightMode");
+        document.body.classList.remove("darkMode");
+    }
+}
+//# sourceMappingURL=canvas-sandbox.js.map

package/lib/graphics/canvas-sandbox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"canvas-sandbox.js","sourceRoot":"","sources":["../../source/graphics/canvas-sandbox.ts"],"names":[],"mappings":"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"}

package/lib/graphics/canvas-worker.d.ts ADDED Viewed

@@ -0,0 +1,50 @@
+/// <reference types="@types/web" />
+import { CanvasOptions } from "./canvas.js";
+/**
+ * The {@linkcode Canvas} is a double-buffered construct to help with drawing to a
+ * {@linkcode !HTMLCanvasElement} with best possible performance.
+ * We utilize an {@linkcode !OffscreenCanvas} with a {@linkcode !OffscreenCanvasRenderingContext2D}
+ * to draw frames and expect to render them back to the DOM in regular intervals.
+ * @group Graphics
+ */
+export declare class CanvasWorker {
+    #private;
+    /**
+     * The {@linkcode !HTMLCanvasElement} we're interacting with in the DOM.
+     */
+    readonly canvasDom: HTMLCanvasElement | undefined;
+    /**
+     * The width of the canvas.
+     */
+    readonly width: number;
+    /**
+     * The height of the canvas.
+     */
+    readonly height: number;
+    /**
+     * The {@linkcode !OffscreenCanvasRenderingContext2D} we're using to draw to the canvas.
+     */
+    readonly context: OffscreenCanvasRenderingContext2D | undefined;
+    /**
+     * Our back buffer.
+     */
+    buffer: Uint8ClampedArray | undefined;
+    worker: Worker;
+    /**
+     * The configuration that was used for this canvas.
+     */
+    readonly options: Readonly<Partial<CanvasOptions>>;
+    /**
+     * Constructs a new {@linkcode Canvas}.
+     * @param canvas The canvas to wrap.
+     * @param worker
+     * @param options The configuration for this canvas.
+     */
+    constructor(canvas: HTMLCanvasElement, worker: Worker, options?: Partial<CanvasOptions>);
+    /**
+     * Draws the back buffer onto the canvas.
+     */
+    update(delta: number, timestamp: number): void;
+    render(): void;
+    clearWith(color: number): void;
+}

package/lib/graphics/canvas-worker.js ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * The {@linkcode Canvas} is a double-buffered construct to help with drawing to a
+ * {@linkcode !HTMLCanvasElement} with best possible performance.
+ * We utilize an {@linkcode !OffscreenCanvas} with a {@linkcode !OffscreenCanvasRenderingContext2D}
+ * to draw frames and expect to render them back to the DOM in regular intervals.
+ * @group Graphics
+ */
+export class CanvasWorker {
+    /**
+     * The {@linkcode !HTMLCanvasElement} we're interacting with in the DOM.
+     */
+    canvasDom;
+    /**
+     * The rendering context for the canvas located in the DOM.
+     */
+    //#canvasDomContext: ImageBitmapRenderingContext;
+    /**
+     * The offscreen canvas we use for rendering.
+     */
+    #canvasOffscreen;
+    /**
+     * The width of the canvas.
+     */
+    width;
+    /**
+     * The height of the canvas.
+     */
+    height;
+    /**
+     * The {@linkcode !OffscreenCanvasRenderingContext2D} we're using to draw to the canvas.
+     */
+    context;
+    /**
+     * The {@linkcode !ImageData} object in our offscreen canvas. We usually interact with its
+     * {@linkcode Canvas.buffer buffer} directly.
+     */
+    #imageData;
+    /**
+     * Our back buffer.
+     */
+    buffer;
+    worker;
+    /**
+     * The configuration that was used for this canvas.
+     */
+    options;
+    /**
+     * Constructs a new {@linkcode Canvas}.
+     * @param canvas The canvas to wrap.
+     * @param worker
+     * @param options The configuration for this canvas.
+     */
+    constructor(canvas, worker, options) {
+        this.width = canvas.width;
+        this.height = canvas.height;
+        this.options = options ?? {};
+        this.canvasDom = canvas;
+        //this.#canvasDomContext = mustExist(
+        //  this.canvasDom.getContext("bitmaprenderer", {
+        //    alpha: false,
+        //  }),
+        //  "Unable to create rendering context for DOM canvas.",
+        //);
+        this.#canvasOffscreen = this.canvasDom.transferControlToOffscreen();
+        //this.context.font = "12px sans-serif";
+        this.worker = worker;
+        this.worker.postMessage({ id: "init", canvas: this.#canvasOffscreen }, [this.#canvasOffscreen]);
+    }
+    /**
+     * Draws the back buffer onto the canvas.
+     */
+    update(delta, timestamp) {
+        this.worker.postMessage({ id: "draw", delta, timestamp });
+    }
+    render() { }
+    clearWith(color) { }
+}
+//# sourceMappingURL=canvas-worker.js.map

package/lib/graphics/canvas-worker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"canvas-worker.js","sourceRoot":"","sources":["../../source/graphics/canvas-worker.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,OAAO,YAAY;IACvB;;OAEG;IACM,SAAS,CAAgC;IAElD;;OAEG;IACH,iDAAiD;IAEjD;;OAEG;IACH,gBAAgB,CAAkB;IAElC;;OAEG;IACM,KAAK,CAAS;IAEvB;;OAEG;IACM,MAAM,CAAS;IAExB;;OAEG;IACM,OAAO,CAAgD;IAEhE;;;OAGG;IACH,UAAU,CAAwB;IAElC;;OAEG;IACH,MAAM,CAAgC;IAEtC,MAAM,CAAS;IAEf;;OAEG;IACM,OAAO,CAAmC;IAEnD;;;;;OAKG;IACH,YAAY,MAAyB,EAAE,MAAc,EAAE,OAAgC;QACrF,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,OAAO,IAAI,EAAE,CAAC;QAE7B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;QACxB,qCAAqC;QACrC,iDAAiD;QACjD,mBAAmB;QACnB,OAAO;QACP,yDAAyD;QACzD,IAAI;QAEJ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,0BAA0B,EAAE,CAAC;QAEpE,wCAAwC;QAExC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAClG,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,KAAa,EAAE,SAAiB;QACrC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM,KAAG,CAAC;IAEV,SAAS,CAAC,KAAY,IAAE,CAAC;CAC1B"}

package/lib/graphics/canvas.d.ts CHANGED Viewed

@@ -24,17 +24,20 @@ export declare class Canvas {
      */
     readonly canvasDom: HTMLCanvasElement;
     /**
-     * The width of the canvas.
+     * Retrieves the width of the canvas.
+     * @returns The width of the canvas.
      */
-    readonly width: number;
+    get width(): number;
     /**
-     * The height of the canvas.
+     * Retrieves the height of the canvas.
+     * @returns The height of the canvas.
      */
-    readonly height: number;
+    get height(): number;
     /**
-     * The {@linkcode !OffscreenCanvasRenderingContext2D} we're using to draw to the canvas.
+     * Retrieves the rendering context of the canvas.
+     * @returns The rendering context of the canvas.
      */
-    readonly context: OffscreenCanvasRenderingContext2D;
+    get context(): OffscreenCanvasRenderingContext2D;
     /**
      * Our back buffer.
      */
@@ -46,11 +49,13 @@ export declare class Canvas {
     /**
      * Constructs a new {@linkcode Canvas}.
      * @param canvas The canvas to wrap.
-     * @param width The width of the canvas.
-     * @param height The height of the canvas.
      * @param options The configuration for this canvas.
      */
-    constructor(canvas: HTMLCanvasElement, width: number, height: number, options?: Partial<CanvasOptions>);
+    constructor(canvas: HTMLCanvasElement, options?: Partial<CanvasOptions>);
+    /**
+     * Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
+     */
+    refreshCanvasNode(): void;
     /**
      * Draws the back buffer onto the canvas.
      */