scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,099 lines (699 loc) • 149 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Core user interaction</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="../../docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="document.html">
./source/core/document.js
</a>
<a class="source" href="events.html">
./source/core/events.js
</a>
<a class="source" href="init.html">
./source/core/init.js
</a>
<a class="source" href="library.html">
./source/core/library.js
</a>
<a class="source" href="random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="utilities.html">
./source/core/utilities.js
</a>
<a class="source" href="../factory/action.html">
./source/factory/action.js
</a>
<a class="source" href="../factory/anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="../factory/animation.html">
./source/factory/animation.js
</a>
<a class="source" href="../factory/bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="../factory/block.html">
./source/factory/block.js
</a>
<a class="source" href="../factory/canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="../factory/cell.html">
./source/factory/cell.js
</a>
<a class="source" href="../factory/cog.html">
./source/factory/cog.js
</a>
<a class="source" href="../factory/color.html">
./source/factory/color.js
</a>
<a class="source" href="../factory/conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="../factory/coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="../factory/crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="../factory/element.html">
./source/factory/element.js
</a>
<a class="source" href="../factory/emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="../factory/filter.html">
./source/factory/filter.js
</a>
<a class="source" href="../factory/filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="../factory/filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="../factory/fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="../factory/gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="../factory/grid.html">
./source/factory/grid.js
</a>
<a class="source" href="../factory/group.html">
./source/factory/group.js
</a>
<a class="source" href="../factory/imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="../factory/line.html">
./source/factory/line.js
</a>
<a class="source" href="../factory/lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="../factory/loom.html">
./source/factory/loom.js
</a>
<a class="source" href="../factory/mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="../factory/net.html">
./source/factory/net.js
</a>
<a class="source" href="../factory/noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="../factory/oval.html">
./source/factory/oval.js
</a>
<a class="source" href="../factory/palette.html">
./source/factory/palette.js
</a>
<a class="source" href="../factory/particle.html">
./source/factory/particle.js
</a>
<a class="source" href="../factory/particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="../factory/particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="../factory/particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="../factory/particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="../factory/pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="../factory/phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="../factory/picture.html">
./source/factory/picture.js
</a>
<a class="source" href="../factory/polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="../factory/polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="../factory/quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="../factory/quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="../factory/radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="../factory/rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="../factory/rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="../factory/rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="../factory/renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="../factory/shape.html">
./source/factory/shape.js
</a>
<a class="source" href="../factory/spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="../factory/spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="../factory/stack.html">
./source/factory/stack.js
</a>
<a class="source" href="../factory/star.html">
./source/factory/star.js
</a>
<a class="source" href="../factory/state.html">
./source/factory/state.js
</a>
<a class="source" href="../factory/tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="../factory/ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="../factory/tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="../factory/tween.html">
./source/factory/tween.js
</a>
<a class="source" href="../factory/unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="../factory/vector.html">
./source/factory/vector.js
</a>
<a class="source" href="../factory/videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="../factory/wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="../mixin/anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="../mixin/asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="../mixin/assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="../mixin/assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="../mixin/base.html">
./source/mixin/base.js
</a>
<a class="source" href="../mixin/cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="../mixin/delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="../mixin/displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="../mixin/dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="../mixin/entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="../mixin/filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="../mixin/mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="../mixin/path.html">
./source/mixin/path.js
</a>
<a class="source" href="../mixin/pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="../mixin/pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="../mixin/position.html">
./source/mixin/position.js
</a>
<a class="source" href="../mixin/shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="../mixin/shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="../mixin/shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="../mixin/styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="../mixin/tween.html">
./source/mixin/tween.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-1">§</a>
</div>
<h1 id="core-user-interaction">Core user interaction</h1>
<p>A set of functions that are closely tied to the <a href="./document.html">core/document.js</a> functionality, and a couple of additional coder convenience functions.</p>
<p>Scrawl-canvas adds some event listeners (mouse movement, screen resize, scrolling) to the window object. These help maintain a centralizerd mouse/touch cursor tracking facility that updates here and then cascades and localizes to artefacts (stacks, canvases and element wrapper objects) which need to keep track of a <strong>local, immediately updated mouse/touch coordinate</strong>.</p>
<p>Checks to see if events have occurred happen once per requestAnimationFrame tick - this is to choke the more eager event listeners which can, at times, fire thousands of times a second.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> library <span class="hljs-keyword">from</span> <span class="hljs-string">"./library.js"</span>;
<span class="hljs-keyword">import</span> { xt, xta, isa_dom, isa_fn, isa_boolean, isa_obj, λ<span class="hljs-literal">null</span>, Ωempty, mergeDiscard } <span class="hljs-keyword">from</span> <span class="hljs-string">"./utilities.js"</span>;
<span class="hljs-keyword">import</span> { addListener, addNativeListener, removeListener, removeNativeListener } <span class="hljs-keyword">from</span> <span class="hljs-string">"./events.js"</span>;
<span class="hljs-keyword">import</span> { makeAnimation } <span class="hljs-keyword">from</span> <span class="hljs-string">"../factory/animation.js"</span>;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p><code>Exported array</code> (to modules). DOM element wrappers subscribe for updates by adding themselves to the <strong>uiSubscribedElements</strong> array. When an event fires, the updated data will be pushed to them automatically</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> uiSubscribedElements = [];</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Local boolean flags. </p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> trackMouse = <span class="hljs-literal">false</span>,
mouseChanged = <span class="hljs-literal">false</span>,
viewportChanged = <span class="hljs-literal">false</span>,
prefersContrastChanged = <span class="hljs-literal">false</span>,
prefersReducedMotionChanged = <span class="hljs-literal">false</span>,
prefersDarkColorSchemeChanged = <span class="hljs-literal">false</span>,
prefersReduceTransparencyChanged = <span class="hljs-literal">false</span>,
prefersReduceDataChanged = <span class="hljs-literal">false</span>;</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p><code>Exported object</code> (to modules and the scrawl object). The <strong>currentCorePosition</strong> object holds the <strong>global</strong> mouse cursor position, alongside browser view dimensions and scroll position</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> currentCorePosition = {
<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">scrollX</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">scrollY</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">w</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">h</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'mouse'</span>,
<span class="hljs-attr">prefersReducedMotion</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">prefersDarkColorScheme</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">prefersReduceTransparency</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">prefersContrast</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">prefersReduceData</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">rawTouches</span>: [],
};</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h3 id="accessibility-preferences">Accessibility preferences</h3>
</div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p><strong>contrastMediaQuery</strong> - real-time check on the <code>prefers-reduced-motion</code> user preference, as set for the device or OS</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> contrastMediaQuery = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">matchMedia</span>(<span class="hljs-string">"(prefers-contrast: more)"</span>);
contrastMediaQuery.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">() =></span> {
<span class="hljs-keyword">let</span> res = contrastMediaQuery.<span class="hljs-property">matches</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">prefersContrast</span> !== res) {
currentCorePosition.<span class="hljs-property">prefersContrast</span> = res;
prefersContrastChanged = <span class="hljs-literal">true</span>;
}
});
currentCorePosition.<span class="hljs-property">prefersContrast</span> = contrastMediaQuery.<span class="hljs-property">matches</span>;</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p><strong>reducedMotionMediaQuery</strong> - real-time check on the <code>prefers-reduced-motion</code> user preference, as set for the device or OS</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> reducedMotionMediaQuery = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">matchMedia</span>(<span class="hljs-string">"(prefers-reduced-motion: reduce)"</span>);
reducedMotionMediaQuery.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">() =></span> {
<span class="hljs-keyword">let</span> res = reducedMotionMediaQuery.<span class="hljs-property">matches</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">prefersReducedMotion</span> !== res) {
currentCorePosition.<span class="hljs-property">prefersReducedMotion</span> = res;
prefersReducedMotionChanged = <span class="hljs-literal">true</span>;
}
});
currentCorePosition.<span class="hljs-property">prefersReducedMotion</span> = reducedMotionMediaQuery.<span class="hljs-property">matches</span>;</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p><strong>colorSchemeMediaQuery</strong> - real-time check on the <code>prefers-color-scheme</code> user preference, as set for the device or OS</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> colorSchemeMediaQuery = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">matchMedia</span>(<span class="hljs-string">"(prefers-color-scheme: dark)"</span>);
colorSchemeMediaQuery.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">() =></span> {
<span class="hljs-keyword">let</span> res = colorSchemeMediaQuery.<span class="hljs-property">matches</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">prefersDarkColorScheme</span> !== res) {
currentCorePosition.<span class="hljs-property">prefersDarkColorScheme</span> = res;
prefersDarkColorSchemeChanged = <span class="hljs-literal">true</span>;
}
});
currentCorePosition.<span class="hljs-property">prefersDarkColorScheme</span> = colorSchemeMediaQuery.<span class="hljs-property">matches</span>;</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p><strong>reducedTransparencyMediaQuery</strong> - real-time check on the <code>prefers-reduced-transparency</code> user preference, as set for the device or OS</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> reducedTransparencyMediaQuery = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">matchMedia</span>(<span class="hljs-string">"(prefers-reduced-transparency: reduce)"</span>);
reducedTransparencyMediaQuery.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">() =></span> {
<span class="hljs-keyword">let</span> res = reducedTransparencyMediaQuery.<span class="hljs-property">matches</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">prefersReduceTransparency</span> !== res) {
currentCorePosition.<span class="hljs-property">prefersReduceTransparency</span> = res;
prefersReduceTransparencyChanged = <span class="hljs-literal">true</span>;
}
});
currentCorePosition.<span class="hljs-property">prefersReduceTransparency</span> = reducedTransparencyMediaQuery.<span class="hljs-property">matches</span>;</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p><strong>reducedDataMediaQuery</strong> - real-time check on the <code>prefers-reduced-data</code> user preference, as set for the device or OS</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> reducedDataMediaQuery = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">matchMedia</span>(<span class="hljs-string">"(prefers-reduced-data: reduce)"</span>);
reducedDataMediaQuery.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'change'</span>, <span class="hljs-function">() =></span> {
<span class="hljs-keyword">let</span> res = reducedDataMediaQuery.<span class="hljs-property">matches</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">prefersReduceData</span> !== res) {
currentCorePosition.<span class="hljs-property">prefersReduceData</span> = res;
prefersReduceDataChanged = <span class="hljs-literal">true</span>;
}
});
currentCorePosition.<span class="hljs-property">prefersReduceData</span> = reducedDataMediaQuery.<span class="hljs-property">matches</span>;</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<h3 id="watch-for-browser-window-resize-or-device-rotation-which-trigger-changes-in-the-viewport-dimensions">Watch for browser window resize, or device rotation, which trigger changes in the viewport dimensions</h3>
</div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>resizeAction</strong> function - to check if a view resize has occurred; if yes, flag that currentCorePosition object needs to be updated</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> resizeAction = <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {
<span class="hljs-keyword">let</span> w = <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">clientWidth</span>,
h = <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">clientHeight</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">w</span> !== w || currentCorePosition.<span class="hljs-property">h</span> !== h) {
currentCorePosition.<span class="hljs-property">w</span> = w;
currentCorePosition.<span class="hljs-property">h</span> = h;
mouseChanged = <span class="hljs-literal">true</span>;
viewportChanged = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<h3 id="watch-for-scrolling-interactions">Watch for scrolling interactions</h3>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p><strong>scrollAction</strong> function - to check if a view scroll has occurred; if yes, flag that currentCorePosition object needs to be updated</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> scrollAction = <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {
<span class="hljs-keyword">let</span> x = <span class="hljs-variable language_">window</span>.<span class="hljs-property">pageXOffset</span>,
y = <span class="hljs-variable language_">window</span>.<span class="hljs-property">pageYOffset</span>;
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">scrollX</span> !== x || currentCorePosition.<span class="hljs-property">scrollY</span> !== y) {
currentCorePosition.<span class="hljs-property">x</span> += (x - currentCorePosition.<span class="hljs-property">scrollX</span>);
currentCorePosition.<span class="hljs-property">y</span> += (y - currentCorePosition.<span class="hljs-property">scrollY</span>);
currentCorePosition.<span class="hljs-property">scrollX</span> = x;
currentCorePosition.<span class="hljs-property">scrollY</span> = y;
mouseChanged = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h3 id="watch-for-mouse-pointer-and-touch-movement">Watch for mouse, pointer and touch movement</h3>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><strong>moveAction</strong> function - to check if mouse cursor position has changed; if yes, update currentCorePosition object and flag that the updated needs to cascade to subscribed elements at the next RAF invocation.</p>
</div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>The events that trigger this function (pointermove, pointerup, pointerdown, pointerleave, pointerenter; or mousemove, mouseup, mousedown, mouseleave, mouseenter) are tied to the window object, not to any particular DOM element.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> moveAction = <span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) {
<span class="hljs-keyword">let</span> x = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(e.<span class="hljs-property">pageX</span>),
y = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(e.<span class="hljs-property">pageY</span>);
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">x</span> !== x || currentCorePosition.<span class="hljs-property">y</span> !== y) {
currentCorePosition.<span class="hljs-property">type</span> = (navigator.<span class="hljs-property">pointerEnabled</span>) ? <span class="hljs-string">'pointer'</span> : <span class="hljs-string">'mouse'</span>;
currentCorePosition.<span class="hljs-property">x</span> = x;
currentCorePosition.<span class="hljs-property">y</span> = y;
mouseChanged = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p><strong>touchAction</strong> function - maps touch coordinates to the mouse cursor position (via currentCorePosition) and then immediately invokes a cascade update action to all subscribed elements.</p>
</div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>The events that trigger this function (touchstart, touchmove, touchend, touchcancel) are tied to the window object, not to any particular DOM element.</p>
</div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Note: this is different to mouse moveAction, which is choked via an animation object so update checks happen on each requestAnimationFrame. </p>
<p>TODO: Need to keep an eye on how many times touchAction gets run, for example during a touch-driven drag-and-drop action. If necessary, add a Date.now mediated choke to the check (say minimum 15ms between checks?) to minimize impact on the wider Scrawl-canvas ecosystem.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> touchActionLastChecked = <span class="hljs-number">0</span>,
touchActionChoke = <span class="hljs-number">16</span>;
<span class="hljs-keyword">const</span> getTouchActionChoke = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> touchActionChoke;
};
<span class="hljs-keyword">const</span> setTouchActionChoke = <span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) {
<span class="hljs-keyword">if</span> (val && val.<span class="hljs-property">toFixed</span> && !<span class="hljs-built_in">isNaN</span>(val)) touchActionChoke = val;
};
<span class="hljs-keyword">const</span> touchAction = <span class="hljs-keyword">function</span> (<span class="hljs-params">e, resetCoordsToZeroOnTouchEnd = <span class="hljs-literal">true</span></span>) {
currentCorePosition.<span class="hljs-property">rawTouches</span>.<span class="hljs-property">length</span> = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (e.<span class="hljs-property">touches</span> && e.<span class="hljs-property">touches</span>.<span class="hljs-property">length</span>) {
currentCorePosition.<span class="hljs-property">rawTouches</span>.<span class="hljs-title function_">push</span>(...e.<span class="hljs-property">touches</span>);
<span class="hljs-keyword">const</span> touch = e.<span class="hljs-property">touches</span>[<span class="hljs-number">0</span>],
x = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(touch.<span class="hljs-property">pageX</span>),
y = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(touch.<span class="hljs-property">pageY</span>);
<span class="hljs-keyword">if</span> (currentCorePosition.<span class="hljs-property">x</span> !== x || currentCorePosition.<span class="hljs-property">y</span> !== y) {
currentCorePosition.<span class="hljs-property">type</span> = <span class="hljs-string">'touch'</span>;
currentCorePosition.<span class="hljs-property">x</span> = x;
currentCorePosition.<span class="hljs-property">y</span> = y;
}
}
<span class="hljs-keyword">else</span> {
currentCorePosition.<span class="hljs-property">type</span> = <span class="hljs-string">'touch'</span>;
<span class="hljs-keyword">if</span> (resetCoordsToZeroOnTouchEnd) {
currentCorePosition.<span class="hljs-property">x</span> = <span class="hljs-number">0</span>;
currentCorePosition.<span class="hljs-property">y</span> = <span class="hljs-number">0</span>;
}
}
<span class="hljs-keyword">const</span> now = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>();
<span class="hljs-keyword">if</span> (now > touchActionLastChecked + touchActionChoke) {
touchActionLastChecked = now;
<span class="hljs-title function_">updateUiSubscribedElements</span>();
}
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<h2 id="cascade-interaction-results-down-to-subscribed-elements">Cascade interaction results down to subscribed elements</h2>
</div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p>Functions to update uiSubscribedElements attached to specified DOM elements. Each stack or canvas element tracked by Scrawl-canvas will include a local <strong>here</strong> object which includes details of the element’s current dimensions, relative position, and the position of the mouse cursor in relation to its top-left corner. These all need to be updated whenever there’s a resize, scroll or cursor movement.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> updateUiSubscribedElements = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>, iz = uiSubscribedElements.<span class="hljs-property">length</span>; i < iz; i++) {
<span class="hljs-title function_">updateUiSubscribedElement</span>(uiSubscribedElements[i]);
}
};
<span class="hljs-keyword">const</span> updateUiSubscribedElement = <span class="hljs-keyword">function</span> (<span class="hljs-params">art</span>) {
<span class="hljs-keyword">const</span> dom = library.<span class="hljs-property">artefact</span>[art];
<span class="hljs-keyword">if</span> (dom) {
<span class="hljs-keyword">if</span> (!dom.<span class="hljs-property">here</span>) dom.<span class="hljs-property">here</span> = {};
<span class="hljs-keyword">const</span> { here, <span class="hljs-attr">domElement</span>:el } = dom;</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre> here.<span class="hljs-property">prefersContrast</span> = currentCorePosition.<span class="hljs-property">prefersContrast</span>;
here.<span class="hljs-property">prefersReducedMotion</span> = currentCorePosition.<span class="hljs-property">prefersReducedMotion</span>;
here.<span class="hljs-property">prefersDarkColorScheme</span> = currentCorePosition.<span class="hljs-property">prefersDarkColorScheme</span>;
here.<span class="hljs-property">prefersReduceTransparency</span> = currentCorePosition.<span class="hljs-property">prefersReduceTransparency</span>;
here.<span class="hljs-property">prefersReduceData</span> = currentCorePosition.<span class="hljs-property">prefersReduceData</span>;
<span class="hljs-keyword">if</span> (prefersContrastChanged) dom.<span class="hljs-title function_">contrastActions</span>();
<span class="hljs-keyword">if</span> (prefersReducedMotionChanged) dom.<span class="hljs-title function_">reducedMotionActions</span>();
<span class="hljs-keyword">if</span> (prefersDarkColorSchemeChanged) dom.<span class="hljs-title function_">colorSchemeActions</span>();
<span class="hljs-keyword">if</span> (prefersReduceTransparencyChanged) dom.<span class="hljs-title function_">reducedTransparencyActions</span>();
<span class="hljs-keyword">if</span> (prefersReduceDataChanged) dom.<span class="hljs-title function_">reducedDataActions</span>();</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p>DOM-element-dependant values</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (el) {
<span class="hljs-keyword">const</span> dims = el.<span class="hljs-title function_">getBoundingClientRect</span>(),
dox = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(dims.<span class="hljs-property">left</span> + <span class="hljs-variable language_">window</span>.<span class="hljs-property">pageXOffset</span>),
doy = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(dims.<span class="hljs-property">top</span> + <span class="hljs-variable language_">window</span>.<span class="hljs-property">pageYOffset</span>),
dot = dims.<span class="hljs-property">top</span>,
doh = dims.<span class="hljs-property">height</span>,
wih = <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span>;
here.<span class="hljs-property">w</span> = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(dims.<span class="hljs-property">width</span>);
here.<span class="hljs-property">h</span> = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(doh);
here.<span class="hljs-property">type</span> = currentCorePosition.<span class="hljs-property">type</span>;</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p>Position of the artefact in the browser/device viewport</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> ivpt = dot / wih,
ivpb = (dot + doh) / wih,
ivpc = (ivpt + ivpb) / <span class="hljs-number">2</span>;
here.<span class="hljs-property">inViewportTop</span> = ivpt;
here.<span class="hljs-property">inViewportBase</span> = ivpb;
here.<span class="hljs-property">inViewportCenter</span> = ivpc;</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-27">§</a>
</div>
<p>DOM-based artefacts have the option of creating a local mouse move event listener, which better tracks mouse movements across them when their element has been rotated in three dimensions.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!dom.<span class="hljs-property">localMouseListener</span>) {
here.<span class="hljs-property">localListener</span> = <span class="hljs-literal">false</span>;
here.<span class="hljs-property">active</span> = <span class="hljs-literal">true</span>;
here.<span class="hljs-property">x</span> = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(currentCorePosition.<span class="hljs-property">x</span> - dox);
here.<span class="hljs-property">y</span> = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(currentCorePosition.<span class="hljs-property">y</span> - doy);
here.<span class="hljs-property">normX</span> = (here.<span class="hljs-property">w</span>) ? here.<span class="hljs-property">x</span> / here.<span class="hljs-property">w</span> : <span class="hljs-literal">false</span>;
here.<span class="hljs-property">normY</span> = (here.<span class="hljs-property">h</span>) ? here.<span class="hljs-property">y</span> / here.<span class="hljs-property">h</span> : <span class="hljs-literal">false</span>;
here.<span class="hljs-property">offsetX</span> = dox;
here.<span class="hljs-property">offsetY</span> = doy;
<span class="hljs-keyword">if</span> (here.<span class="hljs-property">normX</span> < <span class="hljs-number">0</span> || here.<span class="hljs-property">normX</span> > <span class="hljs-number">1</span> || here.<span class="hljs-property">normY</span> < <span class="hljs-number">0</span> || her