@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,11 +1,16 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CanvasSandbox | @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.
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CanvasSandbox | @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="CanvasSandbox.html">CanvasSandbox</a></li></ul><h1>Class CanvasSandbox<TApplicationOptions></h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>The <a href="CanvasSandbox.html" class="tsd-kind-class"><code>CanvasSandbox</code></a> provides a scaffold to quickly perform experiments
|
|
3
3
|
with a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a> in a document. Common functionality for such
|
|
4
4
|
experiments is implemented in the sandbox already.</p>
|
|
5
|
-
</div><div class="tsd-comment tsd-typography"></
|
|
5
|
+
</div><div class="tsd-comment tsd-typography"><h4>Example</h4><a id="md:maints" class="tsd-anchor"></a><h3><a href="#md:maints"><code>main.ts</code></a></h3><pre><code class="language-ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">Random</span><span class="hl-1">, </span><span class="hl-2">seedFromString</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"@oliversalzburg/js-utils/lib/random.js"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">Canvas</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"@oliversalzburg/js-utils/lib/graphics/canvas.js"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">getDocumentElementTypeByIdStrict</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"@oliversalzburg/js-utils/lib/dom/core.js"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">CanvasSandbox</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"@oliversalzburg/js-utils/lib/graphics/canvas-sandbox.js"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-5">ApplicationOptions</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">seed</span><span class="hl-1">: </span><span class="hl-5">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">somethingElse</span><span class="hl-1">: </span><span class="hl-5">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">class</span><span class="hl-1"> </span><span class="hl-5">Application</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">canvas</span><span class="hl-1">: </span><span class="hl-5">Canvas</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">options</span><span class="hl-1">: </span><span class="hl-5">ApplicationOptions</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">random</span><span class="hl-1">: </span><span class="hl-5">Random</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-4">constructor</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">:</span><span class="hl-5">Canvas</span><span class="hl-1">, </span><span class="hl-2">options</span><span class="hl-1">: </span><span class="hl-5">ApplicationOptions</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">canvas</span><span class="hl-1"> = </span><span class="hl-2">canvas</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1"> = </span><span class="hl-2">options</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">random</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Random</span><span class="hl-1">(</span><span class="hl-6">seedFromString</span><span class="hl-1">(</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">seed</span><span class="hl-1">));</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-6">reconfigure</span><span class="hl-1">(</span><span class="hl-2">canvas</span><span class="hl-1">:</span><span class="hl-5">Canvas</span><span class="hl-1">, </span><span class="hl-2">options</span><span class="hl-1">: </span><span class="hl-5">Partial</span><span class="hl-1"><</span><span class="hl-5">ApplicationOptions</span><span class="hl-1">>) {</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">canvas</span><span class="hl-1"> = </span><span class="hl-2">canvas</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1"> = { ...</span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">options</span><span class="hl-1">, ...</span><span class="hl-2">options</span><span class="hl-1"> };</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">random</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">Random</span><span class="hl-1">(</span><span class="hl-6">seedFromString</span><span class="hl-1">(</span><span class="hl-2">options</span><span class="hl-1">.</span><span class="hl-2">seed</span><span class="hl-1">));</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-6">onDraw</span><span class="hl-1">(</span><span class="hl-2">delta</span><span class="hl-1">:</span><span class="hl-5">number</span><span class="hl-1">, </span><span class="hl-2">timestamp</span><span class="hl-1">:</span><span class="hl-5">number</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">// draw something on `this.canvas`</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-6">start</span><span class="hl-1">() {}</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-8">canvasNode</span><span class="hl-1"> = </span><span class="hl-6">getDocumentElementTypeByIdStrict</span><span class="hl-1">(</span><span class="hl-2">document</span><span class="hl-1">, </span><span class="hl-3">"main"</span><span class="hl-1">, </span><span class="hl-2">HTMLCanvasElement</span><span class="hl-1">);</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-8">canvasSandbox</span><span class="hl-1"> = </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-6">CanvasSandbox</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-2">window</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">canvasNode</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">Application</span><span class="hl-1">,</span><br/><span class="hl-1"> {</span><span class="hl-2">seed:</span><span class="hl-1"> </span><span class="hl-3">"foo"</span><span class="hl-1">, </span><span class="hl-2">somethingElse:</span><span class="hl-1"> </span><span class="hl-9">12345</span><span class="hl-1">}</span><br/><span class="hl-1">);</span><br/><br/><span class="hl-7">// By running the sandbox, your `start()` and `onDraw()` methods will automatically be invoked</span><br/><span class="hl-7">// by the sandbox. You shouldn't invoke those methods directly from your own code.</span><br/><span class="hl-2">canvasSandbox</span><span class="hl-1">.</span><span class="hl-6">run</span><span class="hl-1">();</span>
|
|
6
|
+
</code><button>Copy</button></pre>
|
|
7
|
+
<a id="md:indexhtml" class="tsd-anchor"></a><h3><a href="#md:indexhtml"><code>index.html</code></a></h3><pre><code class="language-html"><span class="hl-10"><!</span><span class="hl-11">doctype</span><span class="hl-1"> </span><span class="hl-12">html</span><span class="hl-10">></span><br/><span class="hl-10"><</span><span class="hl-11">html</span><span class="hl-10">></span><br/><span class="hl-1"> </span><span class="hl-10"><</span><span class="hl-11">head</span><span class="hl-10">></span><br/><span class="hl-1"> </span><span class="hl-10"><</span><span class="hl-11">meta</span><span class="hl-1"> </span><span class="hl-12">charset</span><span class="hl-1">=</span><span class="hl-13">"UTF-8"</span><span class="hl-1"> </span><span class="hl-10">/></span><br/><span class="hl-1"> </span><span class="hl-10"></</span><span class="hl-11">head</span><span class="hl-10">></span><br/><br/><span class="hl-1"> </span><span class="hl-10"><</span><span class="hl-11">body</span><span class="hl-10">></span><br/><span class="hl-1"> </span><span class="hl-10"><</span><span class="hl-11">canvas</span><span class="hl-1"> </span><span class="hl-12">id</span><span class="hl-1">=</span><span class="hl-13">"main"</span><span class="hl-1"> </span><span class="hl-12">class</span><span class="hl-1">=</span><span class="hl-13">"darkMode"</span><span class="hl-1"> </span><span class="hl-12">width</span><span class="hl-1">=</span><span class="hl-13">"512"</span><span class="hl-1"> </span><span class="hl-12">height</span><span class="hl-1">=</span><span class="hl-13">"512"</span><span class="hl-10">></</span><span class="hl-11">canvas</span><span class="hl-10">></span><br/><span class="hl-1"> </span><span class="hl-10"></</span><span class="hl-11">body</span><span class="hl-10">></span><br/><span class="hl-1"> </span><span class="hl-10"><</span><span class="hl-11">script</span><span class="hl-14"> </span><span class="hl-12">src</span><span class="hl-14">=</span><span class="hl-13">"main.ts"</span><span class="hl-14"> </span><span class="hl-12">type</span><span class="hl-14">=</span><span class="hl-13">"module"</span><span class="hl-10">></</span><span class="hl-11">script</span><span class="hl-10">></span><br/><span class="hl-10"></</span><span class="hl-11">html</span><span class="hl-10">></span>
|
|
8
|
+
</code><button>Copy</button></pre>
|
|
9
|
+
</div></section> <section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><h4><span class="tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol"> extends </span><a href="../interfaces/CanvasSandboxExpectedOptions.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxExpectedOptions</a></h4><div class="tsd-comment tsd-typography"><p>The type of the options
|
|
6
10
|
the application in the sandbox will be constructed with.</p>
|
|
7
|
-
</div><div class="tsd-comment tsd-typography"></div></li></ul></section> <section class="tsd-panel tsd-hierarchy"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li><span class="target">CanvasSandbox</span></li></ul></section><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/
|
|
8
|
-
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="CanvasSandbox.html#
|
|
11
|
+
</div><div class="tsd-comment tsd-typography"></div></li></ul></section> <section class="tsd-panel tsd-hierarchy"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li><span class="target">CanvasSandbox</span></li></ul></section><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/713151d/source/graphics/canvas-sandbox.ts#L203">source/graphics/canvas-sandbox.ts:203</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="CanvasSandbox.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-512"></use></svg><span>constructor</span></a>
|
|
12
|
+
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="CanvasSandbox.html#_resizeDebounce" class="tsd-index-link tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>#resize<wbr/>Debounce</span></a>
|
|
13
|
+
<a href="CanvasSandbox.html#application" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>application</span></a>
|
|
9
14
|
<a href="CanvasSandbox.html#canvas" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>canvas</span></a>
|
|
10
15
|
<a href="CanvasSandbox.html#canvasNode" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>canvas<wbr/>Node</span></a>
|
|
11
16
|
<a href="CanvasSandbox.html#document" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>document</span></a>
|
|
@@ -14,31 +19,41 @@ the application in the sandbox will be constructed with.</p>
|
|
|
14
19
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="CanvasSandbox.html#_hookBody" class="tsd-index-link tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#hook<wbr/>Body</span></a>
|
|
15
20
|
<a href="CanvasSandbox.html#_hookCanvas" class="tsd-index-link tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#hook<wbr/>Canvas</span></a>
|
|
16
21
|
<a href="CanvasSandbox.html#_hookWindow" class="tsd-index-link tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#hook<wbr/>Window</span></a>
|
|
22
|
+
<a href="CanvasSandbox.html#_reconfigureApplication" class="tsd-index-link tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#reconfigure<wbr/>Application</span></a>
|
|
23
|
+
<a href="CanvasSandbox.html#injectDefaultCss" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>inject<wbr/>Default<wbr/>Css</span></a>
|
|
17
24
|
<a href="CanvasSandbox.html#run" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>run</span></a>
|
|
18
25
|
<a href="CanvasSandbox.html#toDarkMode" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>to<wbr/>Dark<wbr/>Mode</span></a>
|
|
19
26
|
<a href="CanvasSandbox.html#toLightMode" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>to<wbr/>Light<wbr/>Mode</span></a>
|
|
20
|
-
</div></section></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link" id="constructor.new_CanvasSandbox"><span class="tsd-kind-constructor-signature">new <wbr/>Canvas<wbr/>Sandbox</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">window</span>, <span class="tsd-kind-parameter">canvasNode</span>, <span class="tsd-kind-parameter">Application</span>, <span class="tsd-kind-parameter">options</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="CanvasSandbox.html" class="tsd-signature-type tsd-kind-class">CanvasSandbox</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span><a href="#constructor.new_CanvasSandbox" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Construct a new <a href="CanvasSandbox.html" class="tsd-kind-class"><code>CanvasSandbox</code></a>.</p>
|
|
27
|
+
</div></section></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link" id="constructor.new_CanvasSandbox"><span class="tsd-kind-constructor-signature">new <wbr/>Canvas<wbr/>Sandbox</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">window</span>, <span class="tsd-kind-parameter">canvasNode</span>, <span class="tsd-kind-parameter">Application</span>, <span class="tsd-kind-parameter">options</span>, <span class="tsd-kind-parameter">sandboxOptions</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="CanvasSandbox.html" class="tsd-signature-type tsd-kind-class">CanvasSandbox</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span><a href="#constructor.new_CanvasSandbox" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Construct a new <a href="CanvasSandbox.html" class="tsd-kind-class"><code>CanvasSandbox</code></a>.</p>
|
|
21
28
|
</div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><h4><span class="tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol"> extends </span><a href="../interfaces/CanvasSandboxExpectedOptions.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxExpectedOptions</a></h4></li></ul></section><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">window</span>: <span class="tsd-signature-type ">Window</span></h5><div class="tsd-comment tsd-typography"><p>The window we're running inside.</p>
|
|
22
29
|
</div><div class="tsd-comment tsd-typography"></div></li><li><h5><span class="tsd-kind-parameter">canvasNode</span>: <span class="tsd-signature-type ">HTMLCanvasElement</span></h5><div class="tsd-comment tsd-typography"><p>The canvas node we're drawing to.</p>
|
|
23
30
|
</div><div class="tsd-comment tsd-typography"></div></li><li><h5><span class="tsd-kind-parameter">Application</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">new </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">canvas</span>, <span class="tsd-kind-parameter">options</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><a href="../interfaces/CanvasSandboxApplication.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxApplication</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span></h5><div class="tsd-comment tsd-typography"><p>The application that is going to run in the sandbox.</p>
|
|
24
|
-
</div><div class="tsd-comment tsd-typography"></div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature"><span class="tsd-signature-symbol">new </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">canvas</span>, <span class="tsd-kind-parameter">options</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/CanvasSandboxApplication.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxApplication</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">canvas</span>: <a href="Canvas.html" class="tsd-signature-type tsd-kind-class">Canvas</a></h5
|
|
25
|
-
</div><div class="tsd-comment tsd-typography"></div></li
|
|
26
|
-
</div><div class="tsd-comment tsd-typography"></div><
|
|
31
|
+
</div><div class="tsd-comment tsd-typography"></div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature"><span class="tsd-signature-symbol">new </span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">canvas</span>, <span class="tsd-kind-parameter">options</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/CanvasSandboxApplication.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxApplication</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">canvas</span>: <a href="Canvas.html" class="tsd-signature-type tsd-kind-class">Canvas</a></h5><div class="tsd-comment tsd-typography"><p>The canvas that the application will receive.</p>
|
|
32
|
+
</div><div class="tsd-comment tsd-typography"></div></li><li><h5><span class="tsd-kind-parameter">options</span>: <span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span></h5><div class="tsd-comment tsd-typography"><p>The options that will be passed to the application.</p>
|
|
33
|
+
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="../interfaces/CanvasSandboxApplication.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxApplication</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span></h4></li></ul></li></ul></li><li><h5><span class="tsd-kind-parameter">options</span>: <span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span></h5><div class="tsd-comment tsd-typography"><p>The options that the application should be constructed with.</p>
|
|
34
|
+
</div><div class="tsd-comment tsd-typography"></div></li><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">sandboxOptions</span>: <a href="../interfaces/CanvasSandboxOptions.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxOptions</a></h5><div class="tsd-comment tsd-typography"><p>The options for the sandbox itself.</p>
|
|
35
|
+
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="CanvasSandbox.html" class="tsd-signature-type tsd-kind-class">CanvasSandbox</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span></h4><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/graphics/canvas-sandbox.ts#L248">source/graphics/canvas-sandbox.ts:248</a></li></ul></aside></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Properties</h2><section class="tsd-panel tsd-member tsd-is-private"><a id="_resizeDebounce" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>#resize<wbr/>Debounce</span><a href="#_resizeDebounce" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">#resize<wbr/>Debounce</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = null</span></div><div class="tsd-comment tsd-typography"><p>The handle that keeps track of debouncing of <code>resize</code> events.</p>
|
|
36
|
+
</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/graphics/canvas-sandbox.ts#L238">source/graphics/canvas-sandbox.ts:238</a></li></ul></aside></section><section class="tsd-panel tsd-member"><a id="application" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>application</span><a href="#application" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">application</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/CanvasSandboxApplication.html" class="tsd-signature-type tsd-kind-interface">CanvasSandboxApplication</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>The application running inside the sandbox.</p>
|
|
37
|
+
</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/graphics/canvas-sandbox.ts#L217">source/graphics/canvas-sandbox.ts:217</a></li></ul></aside></section><section class="tsd-panel tsd-member"><a id="canvas" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>canvas</span><a href="#canvas" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">canvas</span><span class="tsd-signature-symbol">:</span> <a href="Canvas.html" class="tsd-signature-type tsd-kind-class">Canvas</a></div><div class="tsd-comment tsd-typography"><p>Our convenience canvas wrapper, which we provide to the application
|
|
27
38
|
to render to.</p>
|
|
28
|
-
</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/
|
|
29
|
-
</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/
|
|
30
|
-
</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/
|
|
31
|
-
</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/
|
|
32
|
-
</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/
|
|
33
|
-
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/
|
|
34
|
-
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/
|
|
35
|
-
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/
|
|
36
|
-
</div><
|
|
37
|
-
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/
|
|
38
|
-
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"
|
|
39
|
+
</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/graphics/canvas-sandbox.ts#L228">source/graphics/canvas-sandbox.ts:228</a></li></ul></aside></section><section class="tsd-panel tsd-member"><a id="canvasNode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>canvas<wbr/>Node</span><a href="#canvasNode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">canvas<wbr/>Node</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type ">HTMLCanvasElement</span></div><div class="tsd-comment tsd-typography"><p>The canvas node that we're drawing into.</p>
|
|
40
|
+
</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/graphics/canvas-sandbox.ts#L222">source/graphics/canvas-sandbox.ts:222</a></li></ul></aside></section><section class="tsd-panel tsd-member"><a id="document" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>document</span><a href="#document" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">document</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type ">Document</span></div><div class="tsd-comment tsd-typography"><p>The document the sandbox is interacting with.</p>
|
|
41
|
+
</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/graphics/canvas-sandbox.ts#L212">source/graphics/canvas-sandbox.ts:212</a></li></ul></aside></section><section class="tsd-panel tsd-member"><a id="renderLoop" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>render<wbr/>Loop</span><a href="#renderLoop" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">render<wbr/>Loop</span><span class="tsd-signature-symbol">:</span> <a href="RenderLoop.html" class="tsd-signature-type tsd-kind-class">RenderLoop</a></div><div class="tsd-comment tsd-typography"><p>The render loop we use to control frame rendering.</p>
|
|
42
|
+
</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/graphics/canvas-sandbox.ts#L233">source/graphics/canvas-sandbox.ts:233</a></li></ul></aside></section><section class="tsd-panel tsd-member"><a id="window" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>window</span><a href="#window" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">window</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type ">Window</span></div><div class="tsd-comment tsd-typography"><p>The window the sandbox is running in.</p>
|
|
43
|
+
</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/graphics/canvas-sandbox.ts#L207">source/graphics/canvas-sandbox.ts:207</a></li></ul></aside></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member tsd-is-private"><a id="_hookBody" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>#hook<wbr/>Body</span><a href="#_hookBody" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-private"><li class="tsd-signature tsd-anchor-link" id="_hookBody._hookBody-1"><span class="tsd-kind-call-signature">#hook<wbr/>Body</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#_hookBody._hookBody-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create event listeners on the document <code>body</code>.</p>
|
|
44
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L320">source/graphics/canvas-sandbox.ts:320</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-private"><a id="_hookCanvas" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>#hook<wbr/>Canvas</span><a href="#_hookCanvas" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-private"><li class="tsd-signature tsd-anchor-link" id="_hookCanvas._hookCanvas-1"><span class="tsd-kind-call-signature">#hook<wbr/>Canvas</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#_hookCanvas._hookCanvas-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create event listeners on the canvas node in the document.</p>
|
|
45
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L374">source/graphics/canvas-sandbox.ts:374</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-private"><a id="_hookWindow" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>#hook<wbr/>Window</span><a href="#_hookWindow" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-private"><li class="tsd-signature tsd-anchor-link" id="_hookWindow._hookWindow-1"><span class="tsd-kind-call-signature">#hook<wbr/>Window</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#_hookWindow._hookWindow-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Create event listeners on the window we're running in.</p>
|
|
46
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L395">source/graphics/canvas-sandbox.ts:395</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-private"><a id="_reconfigureApplication" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagPrivate">Private</code> <span>#reconfigure<wbr/>Application</span><a href="#_reconfigureApplication" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-private"><li class="tsd-signature tsd-anchor-link" id="_reconfigureApplication._reconfigureApplication-1"><span class="tsd-kind-call-signature">#reconfigure<wbr/>Application</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">options</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#_reconfigureApplication._reconfigureApplication-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Reconfigures, and then restarts, the application.</p>
|
|
47
|
+
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">options</span>: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" class="tsd-signature-type external" target="_blank">Partial</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type tsd-kind-type-parameter">TApplicationOptions</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> = {}</span></h5><div class="tsd-comment tsd-typography"><p>The new options for the application.</p>
|
|
48
|
+
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L364">source/graphics/canvas-sandbox.ts:364</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member"><a id="injectDefaultCss" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>inject<wbr/>Default<wbr/>Css</span><a href="#injectDefaultCss" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link" id="injectDefaultCss.injectDefaultCss-1"><span class="tsd-kind-call-signature">inject<wbr/>Default<wbr/>Css</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#injectDefaultCss.injectDefaultCss-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Injects our default CSS into the document, if it hasn't already been injected.</p>
|
|
49
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><h4>See</h4><p><a href="../variables/CANVAS_SANDBOX_DEFAULT_CSS.html" class="tsd-kind-variable"><code>CANVAS_SANDBOX_DEFAULT_CSS</code></a></p>
|
|
50
|
+
</div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/oliversalzburg/js-utils/blob/713151d/source/graphics/canvas-sandbox.ts#L293">source/graphics/canvas-sandbox.ts:293</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member"><a id="run" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>run</span><a href="#run" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link" id="run.run-1"><span class="tsd-kind-call-signature">run</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#run.run-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Run the sandbox.</p>
|
|
51
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L310">source/graphics/canvas-sandbox.ts:310</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member"><a id="toDarkMode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>to<wbr/>Dark<wbr/>Mode</span><a href="#toDarkMode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link" id="toDarkMode.toDarkMode-1"><span class="tsd-kind-call-signature">to<wbr/>Dark<wbr/>Mode</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#toDarkMode.toDarkMode-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Switch the sandbox to dark mode.</p>
|
|
52
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L421">source/graphics/canvas-sandbox.ts:421</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member"><a id="toLightMode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>to<wbr/>Light<wbr/>Mode</span><a href="#toLightMode" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link" id="toLightMode.toLightMode-1"><span class="tsd-kind-call-signature">to<wbr/>Light<wbr/>Mode</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#toLightMode.toLightMode-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Switch the sandbox to light mode.</p>
|
|
53
|
+
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><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/graphics/canvas-sandbox.ts#L432">source/graphics/canvas-sandbox.ts:432</a></li></ul></aside></li></ul></section></section></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><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><ul><li><a href="#md:maints"><span>main.ts</span></a></li><li><ul><li><a href="#md:indexhtml"><span>index.html</span></a></li></ul></li></ul></li><li><a href="#constructor" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#_resizeDebounce" class="tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>#resize<wbr/>Debounce</span></a></li><li><a href="#application" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>application</span></a></li><li><a href="#canvas" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>canvas</span></a></li><li><a href="#canvasNode" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>canvas<wbr/>Node</span></a></li><li><a href="#document" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>document</span></a></li><li><a href="#renderLoop" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>render<wbr/>Loop</span></a></li><li><a href="#window" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-1024"></use></svg><span>window</span></a></li><li><a href="#_hookBody" class="tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#hook<wbr/>Body</span></a></li><li><a href="#_hookCanvas" class="tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#hook<wbr/>Canvas</span></a></li><li><a href="#_hookWindow" class="tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#hook<wbr/>Window</span></a></li><li><a href="#_reconfigureApplication" class="tsd-is-private"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>#reconfigure<wbr/>Application</span></a></li><li><a href="#injectDefaultCss" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>inject<wbr/>Default<wbr/>Css</span></a></li><li><a href="#run" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>run</span></a></li><li><a href="#toDarkMode" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>to<wbr/>Dark<wbr/>Mode</span></a></li><li><a href="#toLightMode" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-2048"></use></svg><span>to<wbr/>Light<wbr/>Mode</span></a></li></ul></div></details></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="AbstractError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>AbstractError</a></li><li><a href="Canvas.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Canvas</a></li><li><a href="CanvasSandbox.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>CanvasSandbox</a></li><li><a href="Euler.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Euler</a></li><li><a href="InternalError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>InternalError</a></li><li><a href="InvalidArgumentError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>InvalidArgumentError</a></li><li><a href="InvalidOperationError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>InvalidOperationError</a></li><li><a href="Matrix3.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Matrix3</a></li><li><a href="NotImplementedError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>NotImplementedError</a></li><li><a href="PermissionViolationError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>PermissionViolationError</a></li><li><a href="Quaternion.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Quaternion</a></li><li><a href="Random.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Random</a></li><li><a href="RenderLoop.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>RenderLoop</a></li><li><a href="ResourceConflictError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>ResourceConflictError</a></li><li><a href="Transformation.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Transformation</a></li><li><a href="UnexpectedNilError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>UnexpectedNilError</a></li><li><a href="UnknownError.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>UnknownError</a></li><li><a href="Vector2.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Vector2</a></li><li><a href="Vector3.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>Vector3</a></li><li><a href="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>
|
|
39
54
|
<span id="generation-date"></span>
|
|
40
55
|
<script>
|
|
41
|
-
window.GENERATION_DATE =
|
|
56
|
+
window.GENERATION_DATE = 1699891788640;
|
|
42
57
|
|
|
43
58
|
(() => {
|
|
44
59
|
|