@oliversalzburg/js-utils 0.0.14 → 0.0.15

package/lib/Async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Async.js","sourceRoot":"","sources":["../source/Async.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,OAA+B,EAC/B,OAAkC,EAClC,MAA+B,EAC/B,EAAE;IACF,OAAO,KAAK,OAAO,EAAE;SAClB,IAAI,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;SAClC,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAA+B,EAAE,EAAE;IACrE,OAAO,GAAG,EAAE,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,EAClC,UAAmE,EACnE,EAAK,EACL,EAAE;IACF,IAAI;QACF,OAAO,MAAM,UAAU,EAAE,CAAC;KAC3B;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,EAAE,CAAC;KACX;AACH,CAAC,CAAC"}

package/lib/async.d.ts

@@ -0,0 +1,24 @@
+import { AnyAsyncFunction, FunctionReturning } from "./core.js";
+/**
+ * Wraps the given asynchronous function in a new function that will ignore any outcome of
+ * the context as it resolves.
+ *
+ * This can be useful when providing asynchonous event handler to `.addEventlistener()`,
+ * which only expects synchronous functions.
+ * @param context The asynchronous function to exectute.
+ * @returns A function returning nothing.
+ * @group Async
+ */
+export declare const prepareAsyncContext: (context: AnyAsyncFunction) => (() => void);
+/**
+ * Executes an asynchronous function and resolves with an alternative result
+ * in case the function failed.
+ * @param executable The asynchronous function to execute.
+ * @param to The result we want to return when the function errors.
+ * @template {unknown} TExecutableReturn The return type of the function.
+ * @template {unknown} TCoalesce The type of the object to coalesce to.
+ * @returns Whatever the function resolved to, or the provided replacement,
+ * in case the function failed.
+ * @group Async
+ */
+export declare const coalesceOnRejection: <TExecutableReturn, TCoalesce>(executable: FunctionReturning<Promise<TExecutableReturn>>, to: TCoalesce) => Promise<TExecutableReturn | TCoalesce>;

package/lib/async.js

@@ -0,0 +1,37 @@
+/**
+ * Wraps the given asynchronous function in a new function that will ignore any outcome of
+ * the context as it resolves.
+ *
+ * This can be useful when providing asynchonous event handler to `.addEventlistener()`,
+ * which only expects synchronous functions.
+ * @param context The asynchronous function to exectute.
+ * @returns A function returning nothing.
+ * @group Async
+ */
+export const prepareAsyncContext = (context) => {
+    return () => {
+        void context()
+            .then(() => undefined)
+            .catch(() => undefined);
+    };
+};
+/**
+ * Executes an asynchronous function and resolves with an alternative result
+ * in case the function failed.
+ * @param executable The asynchronous function to execute.
+ * @param to The result we want to return when the function errors.
+ * @template {unknown} TExecutableReturn The return type of the function.
+ * @template {unknown} TCoalesce The type of the object to coalesce to.
+ * @returns Whatever the function resolved to, or the provided replacement,
+ * in case the function failed.
+ * @group Async
+ */
+export const coalesceOnRejection = async (executable, to) => {
+    try {
+        return await executable();
+    }
+    catch (error) {
+        return to;
+    }
+};
+//# sourceMappingURL=async.js.map

package/lib/async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.js","sourceRoot":"","sources":["../source/async.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAyB,EAAgB,EAAE;IAC7E,OAAO,GAAG,EAAE;QACV,KAAK,OAAO,EAAE;aACX,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC;aACrB,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,EACtC,UAAyD,EACzD,EAAa,EACb,EAAE;IACF,IAAI;QACF,OAAO,MAAM,UAAU,EAAE,CAAC;KAC3B;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,EAAE,CAAC;KACX;AACH,CAAC,CAAC"}

package/lib/core.d.ts

@@ -6,6 +6,10 @@ export type ConstructorOf<T = Record<string, unknown>> = new (...args: Array<any
  * Describes literally any function.
  */
 export type AnyFunction = (...args: Array<any>) => any;
+/**
+ * Describes literally any asynchronous function.
+ */
+export type AnyAsyncFunction = (...args: Array<any>) => Promise<any>;
 /**
  * Any constructor
  */

package/lib/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sourceRoot":"","sources":["../source/core.ts"],"names":[],"mappings":"AAAA,uDAAuD;AA4BvD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,IAAY,EAAU,EAAE;IAC1E,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAChD,CAAC,CAAC"}
+{"version":3,"file":"core.js","sourceRoot":"","sources":["../source/core.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAiCvD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,IAAY,EAAU,EAAE;IAC1E,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;AAChD,CAAC,CAAC"}

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

@@ -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

@@ -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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-sandbox.js","sourceRoot":"","sources":["../../source/graphics/canvas-sandbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAkE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGG;AACH,MAAM,OAAO,aAAa;IACxB;;OAEG;IACM,MAAM,CAAS;IAExB;;OAEG;IACM,QAAQ,CAAW;IAE5B;;OAEG;IACM,WAAW,CAAgD;IAEpE;;OAEG;IACM,UAAU,CAAoB;IAEvC;;;OAGG;IACM,MAAM,CAAS;IAExB;;OAEG;IACM,UAAU,CAAa;IAEhC;;OAEG;IACH,eAAe,GAAkB,IAAI,CAAC;IAEtC;;;;;;OAMG;IACH,YACE,MAAc,EACd,UAA6B,EAC7B,WAGkD,EAClD,OAA4B;QAE5B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QAChC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QAErC,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACzD,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEpF,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,MAAM,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC;QAC7F,IAAI,qBAAqB,EAAE;YACzB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;aAAM;YACL,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;IACH,CAAC;IAED;;OAEG;IACH,GAAG;QACD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CACjC,OAAO,EACP,mBAAmB,CAAC,KAAK,EAAE,KAAiB,EAAE,EAAE;YAC9C,IAAI,KAAK,CAAC,gBAAgB,EAAE;gBAC1B,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;gBACpC,OAAO;aACR;YAED,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;gBACpC,MAAM,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;aAC3C;QACH,CAAC,CAAC,CACH,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;YACnD,QAAQ,KAAK,CAAC,OAAO,EAAE;gBACrB,KAAK,EAAE;oBACL,QAAQ;oBACR,WAAW,EAAE,CAAC;oBACd,IAAI,CAAC,uBAAuB,CAAC;wBAC3B,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE;qBAChB,CAAC,CAAC;oBACnC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE;wBACxC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE;qBAChB,CAAC,CAAC;oBACnC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;oBACzB,MAAM;gBAER,KAAK,EAAE;oBACL,QAAQ;oBACR,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;oBACnD,MAAM;aACT;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,uBAAuB,CAAC,UAAwC,EAAE;QAChE,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC9B,OAAO,EACP,mBAAmB,CAAC,KAAK,EAAE,KAAiB,EAAE,EAAE;YAC9C,IAAI,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAAE;gBACnC,MAAM,QAAQ,CAAC,cAAc,EAAE,CAAC;gBAChC,OAAO;aACR;YAED,WAAW,EAAE,CAAC;YACd,IAAI,CAAC,uBAAuB,CAAC;gBAC3B,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE;aAChB,CAAC,CAAC;YACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,MAAM;aACR,UAAU,CAAC,8BAA8B,CAAC;aAC1C,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YAC1C,IAAI,OAAO,EAAE;gBACX,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;QACH,CAAC,CAAC,CAAC;QAEL,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;YAC7C,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,EAAE;gBACjC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aAChD;YAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjD,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC;YAClC,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,UAAU;QACR,IAAI,CAAC,uBAAuB,CAAC;YAC3B,QAAQ,EAAE,IAAI;SACiB,CAAC,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,WAAW;QACT,IAAI,CAAC,uBAAuB,CAAC;YAC3B,QAAQ,EAAE,KAAK;SACgB,CAAC,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,CAAC;CACF"}

package/lib/graphics/canvas.d.ts

@@ -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.
      */
@@ -49,6 +52,10 @@ export declare class Canvas {
      * @param options The configuration for this canvas.
      */
     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.
      */