@oliversalzburg/js-utils 0.0.15 → 0.0.16
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.
- package/_site/assets/highlight.css +92 -8
- package/_site/assets/navigation.js +1 -1
- package/_site/assets/search.js +1 -1
- package/_site/classes/AbstractError.html +8 -8
- package/_site/classes/Canvas.html +36 -25
- package/_site/classes/CanvasSandbox.html +36 -21
- package/_site/classes/Euler.html +44 -44
- package/_site/classes/InternalError.html +9 -9
- package/_site/classes/InvalidArgumentError.html +8 -8
- package/_site/classes/InvalidOperationError.html +8 -8
- package/_site/classes/Matrix3.html +41 -41
- package/_site/classes/NotImplementedError.html +8 -8
- package/_site/classes/PermissionViolationError.html +8 -8
- package/_site/classes/Quaternion.html +46 -46
- package/_site/classes/Random.html +17 -17
- package/_site/classes/RenderLoop.html +21 -21
- package/_site/classes/ResourceConflictError.html +8 -8
- package/_site/classes/Transformation.html +8 -8
- package/_site/classes/UnexpectedNilError.html +6 -6
- package/_site/classes/UnknownError.html +8 -8
- package/_site/classes/Vector2.html +33 -33
- package/_site/classes/Vector3.html +43 -43
- package/_site/classes/Vector4.html +33 -33
- package/_site/functions/addVector2.html +4 -4
- package/_site/functions/addVector3.html +4 -4
- package/_site/functions/blend.html +4 -4
- package/_site/functions/blendAdditive.html +4 -4
- package/_site/functions/blendSubtractive.html +4 -4
- package/_site/functions/clamp.html +4 -4
- package/_site/functions/coalesceOnRejection.html +8 -5
- package/_site/functions/cosDeg.html +4 -4
- package/_site/functions/crossVector3.html +4 -4
- package/_site/functions/deg2rad.html +4 -4
- package/_site/functions/difference.html +4 -4
- package/_site/functions/distance.html +4 -4
- package/_site/functions/dotVector3.html +4 -4
- package/_site/functions/errorToJSON.html +4 -4
- package/_site/functions/errorToRecord.html +4 -4
- package/_site/functions/errorToSimpleSerializable.html +4 -4
- package/_site/functions/filterType.html +4 -4
- package/_site/functions/formatString.html +5 -5
- package/_site/functions/formatStringTemplate.html +5 -5
- package/_site/functions/fromRGB.html +4 -4
- package/_site/functions/fromRGBA.html +4 -4
- package/_site/functions/getA.html +4 -4
- package/_site/functions/getB.html +4 -4
- package/_site/functions/getDocumentElementTypeById.html +6 -8
- package/_site/functions/getDocumentElementTypeByIdStrict.html +48 -0
- package/_site/functions/getG.html +4 -4
- package/_site/functions/getR.html +4 -4
- package/_site/functions/intersect.html +4 -4
- package/_site/functions/is.html +4 -4
- package/_site/functions/isError.html +4 -4
- package/_site/functions/isInteger.html +4 -4
- package/_site/functions/isNil.html +4 -4
- package/_site/functions/isqrt.html +4 -4
- package/_site/functions/multiplyVector2.html +4 -4
- package/_site/functions/multiplyVector3.html +4 -4
- package/_site/functions/mustExist.html +4 -4
- package/_site/functions/nextPalette.html +4 -4
- package/_site/functions/prepareAsyncContext.html +4 -4
- package/_site/functions/putPixel32.html +4 -4
- package/_site/functions/putPixel32Add.html +4 -4
- package/_site/functions/putPixel32Sub.html +4 -4
- package/_site/functions/putSubPixel32.html +4 -4
- package/_site/functions/rad2deg.html +4 -4
- package/_site/functions/randomRange.html +4 -4
- package/_site/functions/safeRGBComponent.html +4 -4
- package/_site/functions/seedFromString.html +4 -4
- package/_site/functions/shuffleArray.html +4 -4
- package/_site/functions/sinDeg.html +4 -4
- package/_site/functions/sleep.html +4 -4
- package/_site/functions/somecolor.html +4 -4
- package/_site/functions/subtractVector2.html +4 -4
- package/_site/functions/subtractVector3.html +4 -4
- package/_site/functions/toGrayScale.html +4 -4
- package/_site/functions/unknownToError.html +4 -4
- package/_site/index.html +4 -4
- package/_site/interfaces/CanvasOptions.html +5 -5
- package/_site/interfaces/CanvasSandboxApplication.html +10 -10
- package/_site/interfaces/CanvasSandboxExpectedOptions.html +6 -6
- package/_site/interfaces/CanvasSandboxOptions.html +45 -0
- package/_site/interfaces/RenderLoopOptions.html +6 -6
- package/_site/modules.html +7 -4
- package/_site/types/AnyAsyncFunction.html +4 -4
- package/_site/types/AnyConstructor.html +4 -4
- package/_site/types/AnyFunction.html +4 -4
- package/_site/types/ConstructorOf.html +4 -4
- package/_site/types/FunctionReturning.html +4 -4
- package/_site/types/Maybe.html +4 -4
- package/_site/types/Mixin.html +4 -4
- package/_site/types/Nil.html +4 -4
- package/_site/types/RenderLoopCallback.html +4 -4
- package/_site/types/SerializedError.html +4 -4
- package/_site/variables/CANVAS_SANDBOX_DEFAULT_CSS.html +41 -0
- package/_site/variables/MS_PER_FRAME_60FPS.html +4 -4
- package/_site/variables/PALETTES.html +4 -4
- package/_site/variables/TWO_PI.html +4 -4
- package/_site/variables/random-1.html +4 -4
- package/lib/async.d.ts +6 -3
- package/lib/async.js +8 -2
- package/lib/async.js.map +1 -1
- package/lib/dom/core.d.ts +13 -3
- package/lib/dom/core.js +22 -3
- package/lib/dom/core.js.map +1 -1
- package/lib/graphics/canvas-sandbox.d.ts +40 -39
- package/lib/graphics/canvas-sandbox.js +87 -44
- package/lib/graphics/canvas-sandbox.js.map +1 -1
- package/lib/graphics/canvas.js +0 -1
- package/lib/graphics/canvas.js.map +1 -1
- package/lib/graphics/render-loop.d.ts +1 -1
- package/lib/graphics/render-loop.js +51 -33
- package/lib/graphics/render-loop.js.map +1 -1
- package/package.json +3 -3
- package/_site/favicon.ico +0 -0
- package/lib/Async.d.ts +0 -3
- package/lib/Async.js +0 -17
- package/lib/Async.js.map +0 -1
- package/lib/graphics/canvas copy.d.ts +0 -170
- package/lib/graphics/canvas copy.js +0 -300
- package/lib/graphics/canvas copy.js.map +0 -1
- package/lib/graphics/canvas-worker.d.ts +0 -50
- package/lib/graphics/canvas-worker.js +0 -78
- package/lib/graphics/canvas-worker.js.map +0 -1
- package/lib/math/vector.d.ts +0 -2
- package/lib/math/vector.js +0 -3
- package/lib/math/vector.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>random | @oliversalzburg/js-utils - v0.0.
|
|
2
|
-
</head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"><a href="https://github.com/oliversalzburg/js-utils">GitHub</a></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">@oliversalzburg/js-utils - v0.0.
|
|
3
|
-
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>random | @oliversalzburg/js-utils - v0.0.15</title><meta name="description" content="Documentation for @oliversalzburg/js-utils"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><link rel="icon" href="../favicon.ico" />
|
|
2
|
+
</head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"><a href="https://github.com/oliversalzburg/js-utils">GitHub</a></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">@oliversalzburg/js-utils - v0.0.15</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">@oliversalzburg/js-utils</a></li><li><a href="random-1.html">random</a></li></ul><h1>Variable random<code class="tsd-tag ts-flagConst">Const</code> </h1></div><div class="tsd-signature"><span class="tsd-kind-variable">random</span><span class="tsd-signature-symbol">:</span> <a href="../classes/Random.html" class="tsd-signature-type tsd-kind-class">Random</a><span class="tsd-signature-symbol"> = ...</span></div><div class="tsd-comment tsd-typography"><p>A global PRNG instance that is ready-to-use.</p>
|
|
3
|
+
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/713151d/source/random.ts#L376">source/random.ts:376</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1"></use></svg><span>@oliversalzburg/js-utils - v0.0.15</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li><a href="../classes/AbstractError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>AbstractError</a></li><li><a href="../classes/Canvas.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Canvas</a></li><li><a href="../classes/CanvasSandbox.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>CanvasSandbox</a></li><li><a href="../classes/Euler.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Euler</a></li><li><a href="../classes/InternalError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>InternalError</a></li><li><a href="../classes/InvalidArgumentError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>InvalidArgumentError</a></li><li><a href="../classes/InvalidOperationError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>InvalidOperationError</a></li><li><a href="../classes/Matrix3.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Matrix3</a></li><li><a href="../classes/NotImplementedError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>NotImplementedError</a></li><li><a href="../classes/PermissionViolationError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>PermissionViolationError</a></li><li><a href="../classes/Quaternion.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Quaternion</a></li><li><a href="../classes/Random.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Random</a></li><li><a href="../classes/RenderLoop.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>RenderLoop</a></li><li><a href="../classes/ResourceConflictError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>ResourceConflictError</a></li><li><a href="../classes/Transformation.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Transformation</a></li><li><a href="../classes/UnexpectedNilError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>UnexpectedNilError</a></li><li><a href="../classes/UnknownError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>UnknownError</a></li><li><a href="../classes/Vector2.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Vector2</a></li><li><a href="../classes/Vector3.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Vector3</a></li><li><a href="../classes/Vector4.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Vector4</a></li><li><a href="../interfaces/CanvasOptions.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-256"></use></svg>CanvasOptions</a></li><li>Loading...</li></ul></nav></div></div></div><div class="tsd-generator"><p style="line-height: 28px;">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> v0.25.3<br>
|
|
4
4
|
<span id="generation-date"></span>
|
|
5
5
|
<script>
|
|
6
|
-
window.GENERATION_DATE =
|
|
6
|
+
window.GENERATION_DATE = 1699891788814;
|
|
7
7
|
|
|
8
8
|
(() => {
|
|
9
9
|
|
package/lib/async.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnyAsyncFunction, FunctionReturning } from "./core.js";
|
|
1
|
+
import { AnyAsyncFunction, ConstructorOf, FunctionReturning } from "./core.js";
|
|
2
2
|
/**
|
|
3
3
|
* Wraps the given asynchronous function in a new function that will ignore any outcome of
|
|
4
4
|
* the context as it resolves.
|
|
@@ -9,16 +9,19 @@ import { AnyAsyncFunction, FunctionReturning } from "./core.js";
|
|
|
9
9
|
* @returns A function returning nothing.
|
|
10
10
|
* @group Async
|
|
11
11
|
*/
|
|
12
|
-
export declare const prepareAsyncContext: (context: AnyAsyncFunction) => (
|
|
12
|
+
export declare const prepareAsyncContext: (context: AnyAsyncFunction) => () => void;
|
|
13
13
|
/**
|
|
14
14
|
* Executes an asynchronous function and resolves with an alternative result
|
|
15
15
|
* in case the function failed.
|
|
16
16
|
* @param executable The asynchronous function to execute.
|
|
17
17
|
* @param to The result we want to return when the function errors.
|
|
18
|
+
* @param filter An {@linkcode !Error} subclass. If defined, only errors of
|
|
19
|
+
* this type will be coalesced.
|
|
18
20
|
* @template {unknown} TExecutableReturn The return type of the function.
|
|
19
21
|
* @template {unknown} TCoalesce The type of the object to coalesce to.
|
|
22
|
+
* @template {ConstructorOf<Error>} TFilter The type of the error filter.
|
|
20
23
|
* @returns Whatever the function resolved to, or the provided replacement,
|
|
21
24
|
* in case the function failed.
|
|
22
25
|
* @group Async
|
|
23
26
|
*/
|
|
24
|
-
export declare const coalesceOnRejection: <TExecutableReturn, TCoalesce
|
|
27
|
+
export declare const coalesceOnRejection: <TExecutableReturn, TCoalesce, TFilter extends ConstructorOf<Error>>(executable: FunctionReturning<TExecutableReturn | Promise<TExecutableReturn>>, to: TCoalesce, filter?: TFilter | undefined) => Promise<TExecutableReturn | TCoalesce>;
|
package/lib/async.js
CHANGED
|
@@ -20,18 +20,24 @@ export const prepareAsyncContext = (context) => {
|
|
|
20
20
|
* in case the function failed.
|
|
21
21
|
* @param executable The asynchronous function to execute.
|
|
22
22
|
* @param to The result we want to return when the function errors.
|
|
23
|
+
* @param filter An {@linkcode !Error} subclass. If defined, only errors of
|
|
24
|
+
* this type will be coalesced.
|
|
23
25
|
* @template {unknown} TExecutableReturn The return type of the function.
|
|
24
26
|
* @template {unknown} TCoalesce The type of the object to coalesce to.
|
|
27
|
+
* @template {ConstructorOf<Error>} TFilter The type of the error filter.
|
|
25
28
|
* @returns Whatever the function resolved to, or the provided replacement,
|
|
26
29
|
* in case the function failed.
|
|
27
30
|
* @group Async
|
|
28
31
|
*/
|
|
29
|
-
export const coalesceOnRejection = async (executable, to) => {
|
|
32
|
+
export const coalesceOnRejection = async (executable, to, filter) => {
|
|
30
33
|
try {
|
|
31
34
|
return await executable();
|
|
32
35
|
}
|
|
33
36
|
catch (error) {
|
|
34
|
-
|
|
37
|
+
if ((filter !== undefined && error instanceof filter) || !filter) {
|
|
38
|
+
return to;
|
|
39
|
+
}
|
|
40
|
+
throw error;
|
|
35
41
|
}
|
|
36
42
|
};
|
|
37
43
|
//# sourceMappingURL=async.js.map
|
package/lib/async.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"async.js","sourceRoot":"","sources":["../source/async.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAyB,
|
|
1
|
+
{"version":3,"file":"async.js","sourceRoot":"","sources":["../source/async.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAyB,EAAE,EAAE;IAC/D,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;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,EAKtC,UAA6E,EAC7E,EAAa,EACb,MAAgB,EAChB,EAAE;IACF,IAAI;QACF,OAAO,MAAM,UAAU,EAAE,CAAC;KAC3B;IAAC,OAAO,KAAK,EAAE;QACd,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,KAAK,YAAY,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE;YAChE,OAAO,EAAE,CAAC;SACX;QACD,MAAM,KAAK,CAAC;KACb;AACH,CAAC,CAAC"}
|
package/lib/dom/core.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="@types/web" />
|
|
2
2
|
import { ConstructorOf } from "../core.js";
|
|
3
3
|
/**
|
|
4
|
-
* Retrieves an element from the document and returns it if it
|
|
5
|
-
* expected type. Otherwise an error is thrown.
|
|
4
|
+
* Retrieves an element from the document and returns it if it is
|
|
5
|
+
* non-null and has the expected type. Otherwise an error is thrown.
|
|
6
6
|
* @param document The document from which to look up the element.
|
|
7
7
|
* @param id The ID of the element.
|
|
8
8
|
* @param Type The type you expect the element to have.
|
|
@@ -11,4 +11,14 @@ import { ConstructorOf } from "../core.js";
|
|
|
11
11
|
* @throws {UnexpectedNilError} When the the document element is `null`.
|
|
12
12
|
* @group DOM
|
|
13
13
|
*/
|
|
14
|
-
export declare const
|
|
14
|
+
export declare const getDocumentElementTypeByIdStrict: <T extends HTMLElement>(document: Document, id: string, Type: ConstructorOf<T>) => T;
|
|
15
|
+
/**
|
|
16
|
+
* Retrieves an element from the document and returns it if it has the
|
|
17
|
+
* expected type.
|
|
18
|
+
* @param document The document from which to look up the element.
|
|
19
|
+
* @param id The ID of the element.
|
|
20
|
+
* @param Type The type you expect the element to have.
|
|
21
|
+
* @returns The requested element, if it has the expected type; `null` otherwise.
|
|
22
|
+
* @group DOM
|
|
23
|
+
*/
|
|
24
|
+
export declare const getDocumentElementTypeById: <T extends HTMLElement>(document: Document, id: string, Type: ConstructorOf<T>) => T | null;
|
package/lib/dom/core.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { InvalidOperationError } from "../errors/InvalidOperationError.js";
|
|
2
2
|
import { UnexpectedNilError } from "../nil.js";
|
|
3
3
|
/**
|
|
4
|
-
* Retrieves an element from the document and returns it if it
|
|
5
|
-
* expected type. Otherwise an error is thrown.
|
|
4
|
+
* Retrieves an element from the document and returns it if it is
|
|
5
|
+
* non-null and has the expected type. Otherwise an error is thrown.
|
|
6
6
|
* @param document The document from which to look up the element.
|
|
7
7
|
* @param id The ID of the element.
|
|
8
8
|
* @param Type The type you expect the element to have.
|
|
@@ -11,7 +11,7 @@ import { UnexpectedNilError } from "../nil.js";
|
|
|
11
11
|
* @throws {UnexpectedNilError} When the the document element is `null`.
|
|
12
12
|
* @group DOM
|
|
13
13
|
*/
|
|
14
|
-
export const
|
|
14
|
+
export const getDocumentElementTypeByIdStrict = (document, id, Type) => {
|
|
15
15
|
const element = document.getElementById(id);
|
|
16
16
|
if (element === null) {
|
|
17
17
|
throw new UnexpectedNilError(`The document element '${id}' does not exist.`);
|
|
@@ -21,4 +21,23 @@ export const getDocumentElementTypeById = (document, id, Type) => {
|
|
|
21
21
|
}
|
|
22
22
|
return element;
|
|
23
23
|
};
|
|
24
|
+
/**
|
|
25
|
+
* Retrieves an element from the document and returns it if it has the
|
|
26
|
+
* expected type.
|
|
27
|
+
* @param document The document from which to look up the element.
|
|
28
|
+
* @param id The ID of the element.
|
|
29
|
+
* @param Type The type you expect the element to have.
|
|
30
|
+
* @returns The requested element, if it has the expected type; `null` otherwise.
|
|
31
|
+
* @group DOM
|
|
32
|
+
*/
|
|
33
|
+
export const getDocumentElementTypeById = (document, id, Type) => {
|
|
34
|
+
const element = document.getElementById(id);
|
|
35
|
+
if (element === null) {
|
|
36
|
+
return null;
|
|
37
|
+
}
|
|
38
|
+
if (!(element instanceof Type)) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
return element;
|
|
42
|
+
};
|
|
24
43
|
//# sourceMappingURL=core.js.map
|
package/lib/dom/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sourceRoot":"","sources":["../../source/dom/core.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"core.js","sourceRoot":"","sources":["../../source/dom/core.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,QAAkB,EAClB,EAAU,EACV,IAAsB,EACnB,EAAE;IACL,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;IAE5C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,kBAAkB,CAAC,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;KAC9E;IAED,IAAI,CAAC,CAAC,OAAO,YAAY,IAAI,CAAC,EAAE;QAC9B,MAAM,IAAI,qBAAqB,CAAC,yBAAyB,EAAE,2BAA2B,CAAC,CAAC;KACzF;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,QAAkB,EAClB,EAAU,EACV,IAAsB,EACZ,EAAE;IACZ,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;IAE5C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,CAAC,OAAO,YAAY,IAAI,CAAC,EAAE;QAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import { Random } from "../random.js";
|
|
3
3
|
import { Canvas } from "./canvas.js";
|
|
4
4
|
import { RenderLoop } from "./render-loop.js";
|
|
5
|
+
/**
|
|
6
|
+
* The CSS we inject into the document, if requested.
|
|
7
|
+
* @group Graphics
|
|
8
|
+
*/
|
|
9
|
+
export declare const CANVAS_SANDBOX_DEFAULT_CSS: string;
|
|
5
10
|
/**
|
|
6
11
|
* The options your application has to accept so it can interact with the {@linkcode CanvasSandbox}.
|
|
7
12
|
* @group Graphics
|
|
@@ -50,21 +55,33 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
50
55
|
* @param canvas The canvas to use.
|
|
51
56
|
* @param options The new options to use.
|
|
52
57
|
*/
|
|
53
|
-
reconfigure(canvas: Canvas, options
|
|
58
|
+
reconfigure(canvas: Canvas, options?: Partial<TApplicationOptions>): void;
|
|
54
59
|
/**
|
|
55
60
|
* Start the application.
|
|
56
61
|
*/
|
|
57
62
|
start(): void;
|
|
58
63
|
}
|
|
64
|
+
/**
|
|
65
|
+
* Options for a {@linkcode CanvasSandbox}.
|
|
66
|
+
* @group Graphics
|
|
67
|
+
*/
|
|
68
|
+
export interface CanvasSandboxOptions {
|
|
69
|
+
/**
|
|
70
|
+
* Should the sandbox default CSS be injected into the body?
|
|
71
|
+
* @default true
|
|
72
|
+
*/
|
|
73
|
+
injectDefaultCss: boolean;
|
|
74
|
+
}
|
|
59
75
|
/**
|
|
60
76
|
* The {@linkcode CanvasSandbox} provides a scaffold to quickly perform experiments
|
|
61
77
|
* with a {@linkcode !HTMLCanvasElement} in a document. Common functionality for such
|
|
62
78
|
* experiments is implemented in the sandbox already.
|
|
63
79
|
* @example
|
|
80
|
+
* ### `main.ts`
|
|
64
81
|
* ```ts
|
|
65
82
|
* import { Random, seedFromString } from "@oliversalzburg/js-utils/lib/random.js";
|
|
66
83
|
* import { Canvas } from "@oliversalzburg/js-utils/lib/graphics/canvas.js";
|
|
67
|
-
* import {
|
|
84
|
+
* import { getDocumentElementTypeByIdStrict } from "@oliversalzburg/js-utils/lib/dom/core.js";
|
|
68
85
|
* import { CanvasSandbox } from "@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js";
|
|
69
86
|
*
|
|
70
87
|
* interface ApplicationOptions {
|
|
@@ -83,7 +100,7 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
83
100
|
* this.random = new Random(seedFromString(options.seed));
|
|
84
101
|
* }
|
|
85
102
|
*
|
|
86
|
-
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions>) {
|
|
103
|
+
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions> = {}) {
|
|
87
104
|
* this.canvas = canvas;
|
|
88
105
|
* this.options = { ...this.options, ...options };
|
|
89
106
|
* this.random = new Random(seedFromString(options.seed));
|
|
@@ -96,21 +113,24 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
96
113
|
* start() {}
|
|
97
114
|
* }
|
|
98
115
|
*
|
|
99
|
-
* const canvasNode =
|
|
116
|
+
* const canvasNode = getDocumentElementTypeByIdStrict(document, "main", HTMLCanvasElement);
|
|
100
117
|
* const canvasSandbox = new CanvasSandbox(
|
|
101
118
|
* window,
|
|
102
119
|
* canvasNode,
|
|
103
120
|
* Application,
|
|
104
121
|
* {seed: "foo", somethingElse: 12345}
|
|
105
122
|
* );
|
|
123
|
+
*
|
|
124
|
+
* // By running the sandbox, your `start()` and `onDraw()` methods will automatically be invoked
|
|
125
|
+
* // by the sandbox. You shouldn't invoke those methods directly from your own code.
|
|
106
126
|
* canvasSandbox.run();
|
|
107
127
|
* ```
|
|
128
|
+
* ### `index.html`
|
|
108
129
|
* ```html
|
|
109
130
|
* <!doctype html>
|
|
110
131
|
* <html>
|
|
111
132
|
* <head>
|
|
112
133
|
* <meta charset="UTF-8" />
|
|
113
|
-
* <link rel="stylesheet" href="main.css" />
|
|
114
134
|
* </head>
|
|
115
135
|
*
|
|
116
136
|
* <body>
|
|
@@ -119,39 +139,6 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
119
139
|
* <script src="main.ts" type="module"></script>
|
|
120
140
|
* </html>
|
|
121
141
|
* ```
|
|
122
|
-
* ```css
|
|
123
|
-
* html,
|
|
124
|
-
* body {
|
|
125
|
-
* height: 100%;
|
|
126
|
-
* width: 100%;
|
|
127
|
-
* padding: 0;
|
|
128
|
-
* margin: 0;
|
|
129
|
-
* background-color: #808080;
|
|
130
|
-
* }
|
|
131
|
-
*
|
|
132
|
-
* body {
|
|
133
|
-
* transition: background-color 1s ease-in-out;
|
|
134
|
-
* }
|
|
135
|
-
* body.darkMode {
|
|
136
|
-
* background-color: #211f1f;
|
|
137
|
-
* }
|
|
138
|
-
* body.lightMode {
|
|
139
|
-
* background-color: #ebdcdc;
|
|
140
|
-
* }
|
|
141
|
-
*
|
|
142
|
-
* #main {
|
|
143
|
-
* display: block;
|
|
144
|
-
* position: absolute;
|
|
145
|
-
* margin: auto;
|
|
146
|
-
* top: 0;
|
|
147
|
-
* left: 0;
|
|
148
|
-
* right: 0;
|
|
149
|
-
* bottom: 0;
|
|
150
|
-
*
|
|
151
|
-
* filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
|
|
152
|
-
* transition: all 1s;
|
|
153
|
-
* }
|
|
154
|
-
* ```
|
|
155
142
|
* @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options
|
|
156
143
|
* the application in the sandbox will be constructed with.
|
|
157
144
|
* @group Graphics
|
|
@@ -189,8 +176,22 @@ export declare class CanvasSandbox<TApplicationOptions extends CanvasSandboxExpe
|
|
|
189
176
|
* @param canvasNode The canvas node we're drawing to.
|
|
190
177
|
* @param Application The application that is going to run in the sandbox.
|
|
191
178
|
* @param options The options that the application should be constructed with.
|
|
179
|
+
* @param sandboxOptions The options for the sandbox itself.
|
|
180
|
+
*/
|
|
181
|
+
constructor(window: Window, canvasNode: HTMLCanvasElement, Application: new (
|
|
182
|
+
/**
|
|
183
|
+
* The canvas that the application will receive.
|
|
184
|
+
*/
|
|
185
|
+
canvas: Canvas,
|
|
186
|
+
/**
|
|
187
|
+
* The options that will be passed to the application.
|
|
188
|
+
*/
|
|
189
|
+
options: TApplicationOptions) => CanvasSandboxApplication<TApplicationOptions>, options: TApplicationOptions, sandboxOptions?: CanvasSandboxOptions);
|
|
190
|
+
/**
|
|
191
|
+
* Injects our default CSS into the document, if it hasn't already been injected.
|
|
192
|
+
* @see {@linkcode CANVAS_SANDBOX_DEFAULT_CSS}
|
|
192
193
|
*/
|
|
193
|
-
|
|
194
|
+
injectDefaultCss(): void;
|
|
194
195
|
/**
|
|
195
196
|
* Run the sandbox.
|
|
196
197
|
*/
|
|
@@ -1,16 +1,63 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getDocumentElementTypeById } from "../dom/core.js";
|
|
2
2
|
import { Canvas } from "./canvas.js";
|
|
3
3
|
import { nextPalette } from "./core.js";
|
|
4
4
|
import { RenderLoop } from "./render-loop.js";
|
|
5
|
+
/**
|
|
6
|
+
* Provides the input as-is.
|
|
7
|
+
* This method exists only to make use of the `css` template string tag,
|
|
8
|
+
* which allows us to use in-IDE support for CSS through the support for
|
|
9
|
+
* {@link https://lit.dev/docs/components/styles/ Lit styles}.
|
|
10
|
+
* @param input The CSS code.
|
|
11
|
+
* @returns The CSS code as-is.
|
|
12
|
+
*/
|
|
13
|
+
const css = (input) => input.join("");
|
|
14
|
+
/**
|
|
15
|
+
* The CSS we inject into the document, if requested.
|
|
16
|
+
* @group Graphics
|
|
17
|
+
*/
|
|
18
|
+
export const CANVAS_SANDBOX_DEFAULT_CSS = /* PURE */ css `
|
|
19
|
+
html,
|
|
20
|
+
body {
|
|
21
|
+
height: 100%;
|
|
22
|
+
width: 100%;
|
|
23
|
+
padding: 0;
|
|
24
|
+
margin: 0;
|
|
25
|
+
background-color: #808080;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
body {
|
|
29
|
+
transition: background-color 1s ease-in-out;
|
|
30
|
+
}
|
|
31
|
+
body.darkMode {
|
|
32
|
+
background-color: #211f1f;
|
|
33
|
+
}
|
|
34
|
+
body.lightMode {
|
|
35
|
+
background-color: #ebdcdc;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
#main {
|
|
39
|
+
display: block;
|
|
40
|
+
position: absolute;
|
|
41
|
+
margin: auto;
|
|
42
|
+
top: 0;
|
|
43
|
+
left: 0;
|
|
44
|
+
right: 0;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
|
|
47
|
+
filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
|
|
48
|
+
transition: all 1s;
|
|
49
|
+
}
|
|
50
|
+
`;
|
|
5
51
|
/**
|
|
6
52
|
* The {@linkcode CanvasSandbox} provides a scaffold to quickly perform experiments
|
|
7
53
|
* with a {@linkcode !HTMLCanvasElement} in a document. Common functionality for such
|
|
8
54
|
* experiments is implemented in the sandbox already.
|
|
9
55
|
* @example
|
|
56
|
+
* ### `main.ts`
|
|
10
57
|
* ```ts
|
|
11
58
|
* import { Random, seedFromString } from "@oliversalzburg/js-utils/lib/random.js";
|
|
12
59
|
* import { Canvas } from "@oliversalzburg/js-utils/lib/graphics/canvas.js";
|
|
13
|
-
* import {
|
|
60
|
+
* import { getDocumentElementTypeByIdStrict } from "@oliversalzburg/js-utils/lib/dom/core.js";
|
|
14
61
|
* import { CanvasSandbox } from "@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js";
|
|
15
62
|
*
|
|
16
63
|
* interface ApplicationOptions {
|
|
@@ -29,7 +76,7 @@ import { RenderLoop } from "./render-loop.js";
|
|
|
29
76
|
* this.random = new Random(seedFromString(options.seed));
|
|
30
77
|
* }
|
|
31
78
|
*
|
|
32
|
-
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions>) {
|
|
79
|
+
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions> = {}) {
|
|
33
80
|
* this.canvas = canvas;
|
|
34
81
|
* this.options = { ...this.options, ...options };
|
|
35
82
|
* this.random = new Random(seedFromString(options.seed));
|
|
@@ -42,21 +89,24 @@ import { RenderLoop } from "./render-loop.js";
|
|
|
42
89
|
* start() {}
|
|
43
90
|
* }
|
|
44
91
|
*
|
|
45
|
-
* const canvasNode =
|
|
92
|
+
* const canvasNode = getDocumentElementTypeByIdStrict(document, "main", HTMLCanvasElement);
|
|
46
93
|
* const canvasSandbox = new CanvasSandbox(
|
|
47
94
|
* window,
|
|
48
95
|
* canvasNode,
|
|
49
96
|
* Application,
|
|
50
97
|
* {seed: "foo", somethingElse: 12345}
|
|
51
98
|
* );
|
|
99
|
+
*
|
|
100
|
+
* // By running the sandbox, your `start()` and `onDraw()` methods will automatically be invoked
|
|
101
|
+
* // by the sandbox. You shouldn't invoke those methods directly from your own code.
|
|
52
102
|
* canvasSandbox.run();
|
|
53
103
|
* ```
|
|
104
|
+
* ### `index.html`
|
|
54
105
|
* ```html
|
|
55
106
|
* <!doctype html>
|
|
56
107
|
* <html>
|
|
57
108
|
* <head>
|
|
58
109
|
* <meta charset="UTF-8" />
|
|
59
|
-
* <link rel="stylesheet" href="main.css" />
|
|
60
110
|
* </head>
|
|
61
111
|
*
|
|
62
112
|
* <body>
|
|
@@ -65,39 +115,6 @@ import { RenderLoop } from "./render-loop.js";
|
|
|
65
115
|
* <script src="main.ts" type="module"></script>
|
|
66
116
|
* </html>
|
|
67
117
|
* ```
|
|
68
|
-
* ```css
|
|
69
|
-
* html,
|
|
70
|
-
* body {
|
|
71
|
-
* height: 100%;
|
|
72
|
-
* width: 100%;
|
|
73
|
-
* padding: 0;
|
|
74
|
-
* margin: 0;
|
|
75
|
-
* background-color: #808080;
|
|
76
|
-
* }
|
|
77
|
-
*
|
|
78
|
-
* body {
|
|
79
|
-
* transition: background-color 1s ease-in-out;
|
|
80
|
-
* }
|
|
81
|
-
* body.darkMode {
|
|
82
|
-
* background-color: #211f1f;
|
|
83
|
-
* }
|
|
84
|
-
* body.lightMode {
|
|
85
|
-
* background-color: #ebdcdc;
|
|
86
|
-
* }
|
|
87
|
-
*
|
|
88
|
-
* #main {
|
|
89
|
-
* display: block;
|
|
90
|
-
* position: absolute;
|
|
91
|
-
* margin: auto;
|
|
92
|
-
* top: 0;
|
|
93
|
-
* left: 0;
|
|
94
|
-
* right: 0;
|
|
95
|
-
* bottom: 0;
|
|
96
|
-
*
|
|
97
|
-
* filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
|
|
98
|
-
* transition: all 1s;
|
|
99
|
-
* }
|
|
100
|
-
* ```
|
|
101
118
|
* @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options
|
|
102
119
|
* the application in the sandbox will be constructed with.
|
|
103
120
|
* @group Graphics
|
|
@@ -138,12 +155,16 @@ export class CanvasSandbox {
|
|
|
138
155
|
* @param canvasNode The canvas node we're drawing to.
|
|
139
156
|
* @param Application The application that is going to run in the sandbox.
|
|
140
157
|
* @param options The options that the application should be constructed with.
|
|
158
|
+
* @param sandboxOptions The options for the sandbox itself.
|
|
141
159
|
*/
|
|
142
|
-
constructor(window, canvasNode, Application, options) {
|
|
160
|
+
constructor(window, canvasNode, Application, options, sandboxOptions) {
|
|
143
161
|
this.window = window;
|
|
144
162
|
this.document = window.document;
|
|
145
163
|
this.canvasNode = canvasNode;
|
|
146
164
|
this.canvas = new Canvas(canvasNode);
|
|
165
|
+
if (sandboxOptions?.injectDefaultCss ?? true) {
|
|
166
|
+
this.injectDefaultCss();
|
|
167
|
+
}
|
|
147
168
|
this.application = new Application(this.canvas, options);
|
|
148
169
|
const applicationOnDraw = this.application.onDraw.bind(this.application);
|
|
149
170
|
this.renderLoop = new RenderLoop(applicationOnDraw, this.canvas, { drawFps: true });
|
|
@@ -158,18 +179,34 @@ export class CanvasSandbox {
|
|
|
158
179
|
this.toLightMode();
|
|
159
180
|
}
|
|
160
181
|
}
|
|
182
|
+
/**
|
|
183
|
+
* Injects our default CSS into the document, if it hasn't already been injected.
|
|
184
|
+
* @see {@linkcode CANVAS_SANDBOX_DEFAULT_CSS}
|
|
185
|
+
*/
|
|
186
|
+
injectDefaultCss() {
|
|
187
|
+
const existingStyle = getDocumentElementTypeById(this.document, "canvas-sandbox-styles", HTMLStyleElement);
|
|
188
|
+
if (existingStyle) {
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
const styleNode = this.document.createElement("style");
|
|
192
|
+
styleNode.textContent = CANVAS_SANDBOX_DEFAULT_CSS;
|
|
193
|
+
this.document.head.appendChild(styleNode);
|
|
194
|
+
}
|
|
161
195
|
/**
|
|
162
196
|
* Run the sandbox.
|
|
163
197
|
*/
|
|
164
198
|
run() {
|
|
165
199
|
this.application.start();
|
|
200
|
+
// In case the application doesn't maintain this state itself.
|
|
201
|
+
this.application.paused = false;
|
|
166
202
|
this.renderLoop.unblock();
|
|
167
203
|
}
|
|
168
204
|
/**
|
|
169
205
|
* Create event listeners on the document `body`.
|
|
170
206
|
*/
|
|
171
207
|
#hookBody() {
|
|
172
|
-
|
|
208
|
+
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
209
|
+
this.document.body.addEventListener("click", async (event) => {
|
|
173
210
|
if (event.defaultPrevented) {
|
|
174
211
|
return;
|
|
175
212
|
}
|
|
@@ -179,7 +216,7 @@ export class CanvasSandbox {
|
|
|
179
216
|
if (!this.document.fullscreenElement) {
|
|
180
217
|
await this.canvasNode.requestFullscreen();
|
|
181
218
|
}
|
|
182
|
-
})
|
|
219
|
+
});
|
|
183
220
|
this.document.body.addEventListener("keyup", event => {
|
|
184
221
|
switch (event.keyCode) {
|
|
185
222
|
case 13:
|
|
@@ -207,12 +244,15 @@ export class CanvasSandbox {
|
|
|
207
244
|
#reconfigureApplication(options = {}) {
|
|
208
245
|
this.application.reconfigure(this.canvas, options);
|
|
209
246
|
this.application.start();
|
|
247
|
+
// In case the application doesn't maintain this state itself.
|
|
248
|
+
this.application.paused = false;
|
|
210
249
|
}
|
|
211
250
|
/**
|
|
212
251
|
* Create event listeners on the canvas node in the document.
|
|
213
252
|
*/
|
|
214
253
|
#hookCanvas() {
|
|
215
|
-
|
|
254
|
+
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
255
|
+
this.canvasNode.addEventListener("click", async (event) => {
|
|
216
256
|
if (this.document.fullscreenElement) {
|
|
217
257
|
await document.exitFullscreen();
|
|
218
258
|
return;
|
|
@@ -222,7 +262,7 @@ export class CanvasSandbox {
|
|
|
222
262
|
seed: this.application.random.next().toString(),
|
|
223
263
|
});
|
|
224
264
|
event.preventDefault();
|
|
225
|
-
})
|
|
265
|
+
});
|
|
226
266
|
}
|
|
227
267
|
/**
|
|
228
268
|
* Create event listeners on the window we're running in.
|
|
@@ -243,8 +283,11 @@ export class CanvasSandbox {
|
|
|
243
283
|
this.window.clearTimeout(this.#resizeDebounce);
|
|
244
284
|
}
|
|
245
285
|
this.#resizeDebounce = this.window.setTimeout(() => {
|
|
246
|
-
this
|
|
286
|
+
this.application.reconfigure(this.canvas);
|
|
247
287
|
this.canvas.refreshCanvasNode();
|
|
288
|
+
this.application.start();
|
|
289
|
+
// In case the application doesn't maintain this state itself.
|
|
290
|
+
this.application.paused = false;
|
|
248
291
|
}, 1000);
|
|
249
292
|
});
|
|
250
293
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas-sandbox.js","sourceRoot":"","sources":["../../source/graphics/canvas-sandbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"canvas-sandbox.js","sourceRoot":"","sources":["../../source/graphics/canvas-sandbox.ts"],"names":[],"mappings":"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"}
|
package/lib/graphics/canvas.js
CHANGED
|
@@ -88,7 +88,6 @@ export class Canvas {
|
|
|
88
88
|
}), "Unable to create rendering context for offscreen canvas.");
|
|
89
89
|
this.#imageData = this.#context.createImageData(this.#width, this.#height);
|
|
90
90
|
this.buffer = this.#imageData.data;
|
|
91
|
-
this.#context.font = "12px sans-serif";
|
|
92
91
|
}
|
|
93
92
|
/**
|
|
94
93
|
* Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
|