@oliversalzburg/js-utils 0.0.15 → 0.0.17
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 +45 -39
- package/lib/graphics/canvas-sandbox.js +92 -45
- 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/core.d.ts +6 -0
- package/lib/graphics/core.js +6 -0
- package/lib/graphics/core.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,38 @@ 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 render developer information?
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
73
|
+
devMode: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Should the sandbox default CSS be injected into the body?
|
|
76
|
+
* @default true
|
|
77
|
+
*/
|
|
78
|
+
injectDefaultCss: boolean;
|
|
79
|
+
}
|
|
59
80
|
/**
|
|
60
81
|
* The {@linkcode CanvasSandbox} provides a scaffold to quickly perform experiments
|
|
61
82
|
* with a {@linkcode !HTMLCanvasElement} in a document. Common functionality for such
|
|
62
83
|
* experiments is implemented in the sandbox already.
|
|
63
84
|
* @example
|
|
85
|
+
* ### `main.ts`
|
|
64
86
|
* ```ts
|
|
65
87
|
* import { Random, seedFromString } from "@oliversalzburg/js-utils/lib/random.js";
|
|
66
88
|
* import { Canvas } from "@oliversalzburg/js-utils/lib/graphics/canvas.js";
|
|
67
|
-
* import {
|
|
89
|
+
* import { getDocumentElementTypeByIdStrict } from "@oliversalzburg/js-utils/lib/dom/core.js";
|
|
68
90
|
* import { CanvasSandbox } from "@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js";
|
|
69
91
|
*
|
|
70
92
|
* interface ApplicationOptions {
|
|
@@ -83,7 +105,7 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
83
105
|
* this.random = new Random(seedFromString(options.seed));
|
|
84
106
|
* }
|
|
85
107
|
*
|
|
86
|
-
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions>) {
|
|
108
|
+
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions> = {}) {
|
|
87
109
|
* this.canvas = canvas;
|
|
88
110
|
* this.options = { ...this.options, ...options };
|
|
89
111
|
* this.random = new Random(seedFromString(options.seed));
|
|
@@ -96,21 +118,24 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
96
118
|
* start() {}
|
|
97
119
|
* }
|
|
98
120
|
*
|
|
99
|
-
* const canvasNode =
|
|
121
|
+
* const canvasNode = getDocumentElementTypeByIdStrict(document, "main", HTMLCanvasElement);
|
|
100
122
|
* const canvasSandbox = new CanvasSandbox(
|
|
101
123
|
* window,
|
|
102
124
|
* canvasNode,
|
|
103
125
|
* Application,
|
|
104
126
|
* {seed: "foo", somethingElse: 12345}
|
|
105
127
|
* );
|
|
128
|
+
*
|
|
129
|
+
* // By running the sandbox, your `start()` and `onDraw()` methods will automatically be invoked
|
|
130
|
+
* // by the sandbox. You shouldn't invoke those methods directly from your own code.
|
|
106
131
|
* canvasSandbox.run();
|
|
107
132
|
* ```
|
|
133
|
+
* ### `index.html`
|
|
108
134
|
* ```html
|
|
109
135
|
* <!doctype html>
|
|
110
136
|
* <html>
|
|
111
137
|
* <head>
|
|
112
138
|
* <meta charset="UTF-8" />
|
|
113
|
-
* <link rel="stylesheet" href="main.css" />
|
|
114
139
|
* </head>
|
|
115
140
|
*
|
|
116
141
|
* <body>
|
|
@@ -119,39 +144,6 @@ export interface CanvasSandboxApplication<TApplicationOptions extends CanvasSand
|
|
|
119
144
|
* <script src="main.ts" type="module"></script>
|
|
120
145
|
* </html>
|
|
121
146
|
* ```
|
|
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
147
|
* @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options
|
|
156
148
|
* the application in the sandbox will be constructed with.
|
|
157
149
|
* @group Graphics
|
|
@@ -189,8 +181,22 @@ export declare class CanvasSandbox<TApplicationOptions extends CanvasSandboxExpe
|
|
|
189
181
|
* @param canvasNode The canvas node we're drawing to.
|
|
190
182
|
* @param Application The application that is going to run in the sandbox.
|
|
191
183
|
* @param options The options that the application should be constructed with.
|
|
184
|
+
* @param sandboxOptions The options for the sandbox itself.
|
|
185
|
+
*/
|
|
186
|
+
constructor(window: Window, canvasNode: HTMLCanvasElement, Application: new (
|
|
187
|
+
/**
|
|
188
|
+
* The canvas that the application will receive.
|
|
189
|
+
*/
|
|
190
|
+
canvas: Canvas,
|
|
191
|
+
/**
|
|
192
|
+
* The options that will be passed to the application.
|
|
193
|
+
*/
|
|
194
|
+
options: TApplicationOptions) => CanvasSandboxApplication<TApplicationOptions>, options: TApplicationOptions, sandboxOptions?: Partial<CanvasSandboxOptions>);
|
|
195
|
+
/**
|
|
196
|
+
* Injects our default CSS into the document, if it hasn't already been injected.
|
|
197
|
+
* @see {@linkcode CANVAS_SANDBOX_DEFAULT_CSS}
|
|
192
198
|
*/
|
|
193
|
-
|
|
199
|
+
injectDefaultCss(): void;
|
|
194
200
|
/**
|
|
195
201
|
* Run the sandbox.
|
|
196
202
|
*/
|
|
@@ -1,16 +1,64 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable no-console */
|
|
2
|
+
import { getDocumentElementTypeById } from "../dom/core.js";
|
|
2
3
|
import { Canvas } from "./canvas.js";
|
|
3
4
|
import { nextPalette } from "./core.js";
|
|
4
5
|
import { RenderLoop } from "./render-loop.js";
|
|
6
|
+
/**
|
|
7
|
+
* Provides the input as-is.
|
|
8
|
+
* This method exists only to make use of the `css` template string tag,
|
|
9
|
+
* which allows us to use in-IDE support for CSS through the support for
|
|
10
|
+
* {@link https://lit.dev/docs/components/styles/ Lit styles}.
|
|
11
|
+
* @param input The CSS code.
|
|
12
|
+
* @returns The CSS code as-is.
|
|
13
|
+
*/
|
|
14
|
+
const css = (input) => input.join("");
|
|
15
|
+
/**
|
|
16
|
+
* The CSS we inject into the document, if requested.
|
|
17
|
+
* @group Graphics
|
|
18
|
+
*/
|
|
19
|
+
export const CANVAS_SANDBOX_DEFAULT_CSS = /* PURE */ css `
|
|
20
|
+
html,
|
|
21
|
+
body {
|
|
22
|
+
height: 100%;
|
|
23
|
+
width: 100%;
|
|
24
|
+
padding: 0;
|
|
25
|
+
margin: 0;
|
|
26
|
+
background-color: #808080;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
body {
|
|
30
|
+
transition: background-color 1s ease-in-out;
|
|
31
|
+
}
|
|
32
|
+
body.darkMode {
|
|
33
|
+
background-color: #211f1f;
|
|
34
|
+
}
|
|
35
|
+
body.lightMode {
|
|
36
|
+
background-color: #ebdcdc;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
#main {
|
|
40
|
+
display: block;
|
|
41
|
+
position: absolute;
|
|
42
|
+
margin: auto;
|
|
43
|
+
top: 0;
|
|
44
|
+
left: 0;
|
|
45
|
+
right: 0;
|
|
46
|
+
bottom: 0;
|
|
47
|
+
|
|
48
|
+
filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.5));
|
|
49
|
+
transition: all 1s;
|
|
50
|
+
}
|
|
51
|
+
`;
|
|
5
52
|
/**
|
|
6
53
|
* The {@linkcode CanvasSandbox} provides a scaffold to quickly perform experiments
|
|
7
54
|
* with a {@linkcode !HTMLCanvasElement} in a document. Common functionality for such
|
|
8
55
|
* experiments is implemented in the sandbox already.
|
|
9
56
|
* @example
|
|
57
|
+
* ### `main.ts`
|
|
10
58
|
* ```ts
|
|
11
59
|
* import { Random, seedFromString } from "@oliversalzburg/js-utils/lib/random.js";
|
|
12
60
|
* import { Canvas } from "@oliversalzburg/js-utils/lib/graphics/canvas.js";
|
|
13
|
-
* import {
|
|
61
|
+
* import { getDocumentElementTypeByIdStrict } from "@oliversalzburg/js-utils/lib/dom/core.js";
|
|
14
62
|
* import { CanvasSandbox } from "@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js";
|
|
15
63
|
*
|
|
16
64
|
* interface ApplicationOptions {
|
|
@@ -29,7 +77,7 @@ import { RenderLoop } from "./render-loop.js";
|
|
|
29
77
|
* this.random = new Random(seedFromString(options.seed));
|
|
30
78
|
* }
|
|
31
79
|
*
|
|
32
|
-
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions>) {
|
|
80
|
+
* reconfigure(canvas:Canvas, options: Partial<ApplicationOptions> = {}) {
|
|
33
81
|
* this.canvas = canvas;
|
|
34
82
|
* this.options = { ...this.options, ...options };
|
|
35
83
|
* this.random = new Random(seedFromString(options.seed));
|
|
@@ -42,21 +90,24 @@ import { RenderLoop } from "./render-loop.js";
|
|
|
42
90
|
* start() {}
|
|
43
91
|
* }
|
|
44
92
|
*
|
|
45
|
-
* const canvasNode =
|
|
93
|
+
* const canvasNode = getDocumentElementTypeByIdStrict(document, "main", HTMLCanvasElement);
|
|
46
94
|
* const canvasSandbox = new CanvasSandbox(
|
|
47
95
|
* window,
|
|
48
96
|
* canvasNode,
|
|
49
97
|
* Application,
|
|
50
98
|
* {seed: "foo", somethingElse: 12345}
|
|
51
99
|
* );
|
|
100
|
+
*
|
|
101
|
+
* // By running the sandbox, your `start()` and `onDraw()` methods will automatically be invoked
|
|
102
|
+
* // by the sandbox. You shouldn't invoke those methods directly from your own code.
|
|
52
103
|
* canvasSandbox.run();
|
|
53
104
|
* ```
|
|
105
|
+
* ### `index.html`
|
|
54
106
|
* ```html
|
|
55
107
|
* <!doctype html>
|
|
56
108
|
* <html>
|
|
57
109
|
* <head>
|
|
58
110
|
* <meta charset="UTF-8" />
|
|
59
|
-
* <link rel="stylesheet" href="main.css" />
|
|
60
111
|
* </head>
|
|
61
112
|
*
|
|
62
113
|
* <body>
|
|
@@ -65,39 +116,6 @@ import { RenderLoop } from "./render-loop.js";
|
|
|
65
116
|
* <script src="main.ts" type="module"></script>
|
|
66
117
|
* </html>
|
|
67
118
|
* ```
|
|
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
119
|
* @template {CanvasSandboxExpectedOptions} TApplicationOptions The type of the options
|
|
102
120
|
* the application in the sandbox will be constructed with.
|
|
103
121
|
* @group Graphics
|
|
@@ -138,15 +156,21 @@ export class CanvasSandbox {
|
|
|
138
156
|
* @param canvasNode The canvas node we're drawing to.
|
|
139
157
|
* @param Application The application that is going to run in the sandbox.
|
|
140
158
|
* @param options The options that the application should be constructed with.
|
|
159
|
+
* @param sandboxOptions The options for the sandbox itself.
|
|
141
160
|
*/
|
|
142
|
-
constructor(window, canvasNode, Application, options) {
|
|
161
|
+
constructor(window, canvasNode, Application, options, sandboxOptions) {
|
|
143
162
|
this.window = window;
|
|
144
163
|
this.document = window.document;
|
|
145
164
|
this.canvasNode = canvasNode;
|
|
146
165
|
this.canvas = new Canvas(canvasNode);
|
|
166
|
+
if (sandboxOptions?.injectDefaultCss ?? true) {
|
|
167
|
+
this.injectDefaultCss();
|
|
168
|
+
}
|
|
147
169
|
this.application = new Application(this.canvas, options);
|
|
148
170
|
const applicationOnDraw = this.application.onDraw.bind(this.application);
|
|
149
|
-
this.renderLoop = new RenderLoop(applicationOnDraw, this.canvas, {
|
|
171
|
+
this.renderLoop = new RenderLoop(applicationOnDraw, this.canvas, {
|
|
172
|
+
drawFps: sandboxOptions?.devMode,
|
|
173
|
+
});
|
|
150
174
|
this.#hookWindow();
|
|
151
175
|
this.#hookBody();
|
|
152
176
|
this.#hookCanvas();
|
|
@@ -158,18 +182,35 @@ export class CanvasSandbox {
|
|
|
158
182
|
this.toLightMode();
|
|
159
183
|
}
|
|
160
184
|
}
|
|
185
|
+
/**
|
|
186
|
+
* Injects our default CSS into the document, if it hasn't already been injected.
|
|
187
|
+
* @see {@linkcode CANVAS_SANDBOX_DEFAULT_CSS}
|
|
188
|
+
*/
|
|
189
|
+
injectDefaultCss() {
|
|
190
|
+
const existingStyle = getDocumentElementTypeById(this.document, "canvas-sandbox-styles", HTMLStyleElement);
|
|
191
|
+
if (existingStyle) {
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
const styleNode = this.document.createElement("style");
|
|
195
|
+
styleNode.textContent = CANVAS_SANDBOX_DEFAULT_CSS;
|
|
196
|
+
this.document.head.appendChild(styleNode);
|
|
197
|
+
}
|
|
161
198
|
/**
|
|
162
199
|
* Run the sandbox.
|
|
163
200
|
*/
|
|
164
201
|
run() {
|
|
202
|
+
console.info("Sandbox: Starting application with these options.", this.application.options);
|
|
165
203
|
this.application.start();
|
|
204
|
+
// In case the application doesn't maintain this state itself.
|
|
205
|
+
this.application.paused = false;
|
|
166
206
|
this.renderLoop.unblock();
|
|
167
207
|
}
|
|
168
208
|
/**
|
|
169
209
|
* Create event listeners on the document `body`.
|
|
170
210
|
*/
|
|
171
211
|
#hookBody() {
|
|
172
|
-
|
|
212
|
+
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
213
|
+
this.document.body.addEventListener("click", async (event) => {
|
|
173
214
|
if (event.defaultPrevented) {
|
|
174
215
|
return;
|
|
175
216
|
}
|
|
@@ -179,7 +220,7 @@ export class CanvasSandbox {
|
|
|
179
220
|
if (!this.document.fullscreenElement) {
|
|
180
221
|
await this.canvasNode.requestFullscreen();
|
|
181
222
|
}
|
|
182
|
-
})
|
|
223
|
+
});
|
|
183
224
|
this.document.body.addEventListener("keyup", event => {
|
|
184
225
|
switch (event.keyCode) {
|
|
185
226
|
case 13:
|
|
@@ -207,12 +248,15 @@ export class CanvasSandbox {
|
|
|
207
248
|
#reconfigureApplication(options = {}) {
|
|
208
249
|
this.application.reconfigure(this.canvas, options);
|
|
209
250
|
this.application.start();
|
|
251
|
+
// In case the application doesn't maintain this state itself.
|
|
252
|
+
this.application.paused = false;
|
|
210
253
|
}
|
|
211
254
|
/**
|
|
212
255
|
* Create event listeners on the canvas node in the document.
|
|
213
256
|
*/
|
|
214
257
|
#hookCanvas() {
|
|
215
|
-
|
|
258
|
+
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
259
|
+
this.canvasNode.addEventListener("click", async (event) => {
|
|
216
260
|
if (this.document.fullscreenElement) {
|
|
217
261
|
await document.exitFullscreen();
|
|
218
262
|
return;
|
|
@@ -222,7 +266,7 @@ export class CanvasSandbox {
|
|
|
222
266
|
seed: this.application.random.next().toString(),
|
|
223
267
|
});
|
|
224
268
|
event.preventDefault();
|
|
225
|
-
})
|
|
269
|
+
});
|
|
226
270
|
}
|
|
227
271
|
/**
|
|
228
272
|
* Create event listeners on the window we're running in.
|
|
@@ -243,8 +287,11 @@ export class CanvasSandbox {
|
|
|
243
287
|
this.window.clearTimeout(this.#resizeDebounce);
|
|
244
288
|
}
|
|
245
289
|
this.#resizeDebounce = this.window.setTimeout(() => {
|
|
246
|
-
this
|
|
290
|
+
this.application.reconfigure(this.canvas);
|
|
247
291
|
this.canvas.refreshCanvasNode();
|
|
292
|
+
this.application.start();
|
|
293
|
+
// In case the application doesn't maintain this state itself.
|
|
294
|
+
this.application.paused = false;
|
|
248
295
|
}, 1000);
|
|
249
296
|
});
|
|
250
297
|
}
|
|
@@ -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}.
|