scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,112 lines (711 loc) • 146 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM mixin</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="../core/animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="../core/document.html">
./source/core/document.js
</a>
<a class="source" href="../core/events.html">
./source/core/events.js
</a>
<a class="source" href="../core/init.html">
./source/core/init.js
</a>
<a class="source" href="../core/library.html">
./source/core/library.js
</a>
<a class="source" href="../core/random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="../core/snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="../core/userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="../core/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="anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="base.html">
./source/mixin/base.js
</a>
<a class="source" href="cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="path.html">
./source/mixin/path.js
</a>
<a class="source" href="pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="position.html">
./source/mixin/position.js
</a>
<a class="source" href="shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="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="dom-mixin">DOM mixin</h1>
<p>This mixin builds on the base and position mixins to give DOM elements (Scrawl-canvas <a href="../factory/stack.html">Stack</a>, <a href="../factory/canvas.html">Canvas</a> and <a href="../factory/element.html">Element</a> wrapper objects) the ability to act as <strong>artefacts</strong> in a Scrawl-canvas stack environment.</p>
<ul>
<li>Absolute and relative positioning and dimensioning</li>
<li>Positioning in the 3rd (z) dimension (absolute values only)</li>
<li>Use other artefacts as <code>pivot</code>, <code>mimic</code> and <code>path</code> objects</li>
<li>Allow other artefacts to use Element objects as their pivot or mimic object</li>
<li>Track the real (3D) positions of the DOM element’s corners, so that they can participate in collision detection functionality (for example, drag-and-drop)</li>
<li>Allow other artefacts to use Element object corners as their pivot reference</li>
<li>3D-rotation management - extending beyond <code>roll</code> (z) rotation to include <code>pitch</code> (x) and <code>yaw</code> (y) rotations</li>
<li>DOM element class and CSS management</li>
<li>Real-time localized mouse/pointer cursor coordinate tracking</li>
</ul>
</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> { constructors, artefact } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, removeItem, isa_obj, isa_dom, isa_quaternion, xt, xta, λ<span class="hljs-literal">null</span>, Ωempty, isa_fn } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> { uiSubscribedElements, currentCorePosition, applyCoreResizeListener, addLocalMouseMoveListener, removeLocalMouseMoveListener } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/userInteraction.js'</span>;
<span class="hljs-keyword">import</span> { addDomShowElement, setDomShowRequired, domShow } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/document.js'</span>;
<span class="hljs-keyword">import</span> { makeQuaternion, requestQuaternion, releaseQuaternion } <span class="hljs-keyword">from</span> <span class="hljs-string">'../factory/quaternion.js'</span>;
<span class="hljs-keyword">import</span> positionMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/position.js'</span>;
<span class="hljs-keyword">import</span> deltaMix <span class="hljs-keyword">from</span> <span class="hljs-string">'./delta.js'</span>;
<span class="hljs-keyword">import</span> pivotMix <span class="hljs-keyword">from</span> <span class="hljs-string">'./pivot.js'</span>;
<span class="hljs-keyword">import</span> mimicMix <span class="hljs-keyword">from</span> <span class="hljs-string">'./mimic.js'</span>;
<span class="hljs-keyword">import</span> pathMix <span class="hljs-keyword">from</span> <span class="hljs-string">'./path.js'</span>;
<span class="hljs-keyword">import</span> anchorMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/anchor.js'</span>;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="export-function">Export function</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">P = Ωempty</span>) {</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<h4 id="mixins">Mixins</h4>
<ul>
<li><a href="../mixin/position.html">position</a></li>
<li><a href="../mixin/delta.html">delta</a></li>
<li><a href="../mixin/pivot.html">pivot</a></li>
<li><a href="../mixin/mimic.html">mimic</a></li>
<li><a href="../mixin/path.html">path</a></li>
<li><a href="../mixin/anchor.html">anchor</a></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> P = <span class="hljs-title function_">positionMix</span>(P);
P = <span class="hljs-title function_">deltaMix</span>(P);
P = <span class="hljs-title function_">pivotMix</span>(P);
P = <span class="hljs-title function_">mimicMix</span>(P);
P = <span class="hljs-title function_">pathMix</span>(P);
P = <span class="hljs-title function_">anchorMix</span>(P);</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="shared-attributes">Shared attributes</h4>
<p>TODO: we need to test how various Javascript frameworks interact with Scrawl-canvas functionality in this area. In particular: <a href="https://vuejs.org/">vue.js</a>; <a href="https://reactjs.org/">React</a>; <a href="https://svelte.dev/">Svelte</a></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p><strong>domElement</strong> - Wrapper objects reference handle to its DOM element</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">domElement</span>: <span class="hljs-string">''</span>,</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p><strong>pitch</strong>, <strong>yaw</strong> - rotation management in the <code>x</code> and <code>y</code> axes, to go with the <strong>roll</strong> attribute (for <code>z</code> axis rotation) defined in the position mixin. Like roll, values should be Numbers representing <em><strong>degrees</strong></em> (not radians)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">pitch</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">yaw</span>: <span class="hljs-number">0</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>offsetZ</strong> - Number - unlike the X and Y offsets, offsetZ can only ever be a number as there is no 3d box (as such) to act as a length for relative N% strings (and ‘front’, ‘center’, ‘back’ strings would be equally nonsensical)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">offsetZ</span>: <span class="hljs-number">0</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>css</strong> - a Javascript Object to hold key:value CSS values. Scrawl-canvas does not track any non-positioning-related CSS attributes; this attribute is a convenience function to allow developers to add CSS to the DOM element’s <code>style</code> attribute.</p>
<ul>
<li>Styles added to DOM elements using this object are applied directly to the element, thus having precedence over all other CSS declarations such as those included in a <style> tag in the document, or in a CSS style sheet file.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">css</span>: <span class="hljs-literal">null</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>classes</strong> - a String representation of the DOM element’s <code>classNode</code> attribute.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">classes</span>: <span class="hljs-string">''</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>position</strong> - a String representation of the DOM element’s <code>position</code> attribute.</p>
<ul>
<li>by default all Scrawl-canvas Stack, Canvas and Element wrapper DOM elements are given a position value of <code>absolute</code></li>
<li>root Stack and Canvas wrappers have a position value of <code>relative</code> - this is to make sure their DOM elements remain in the document flow, thus attempting to minimize Scrawl-canvas’s impact on the wider environment</li>
<li>other possible values - except <code>static</code> - will be respected if they are explicitly set on the DOM elements prior to Scrawl-canvas initialization.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">position</span>: <span class="hljs-string">'absolute'</span>,</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p><strong>smoothFont</strong> - a Boolean to handle the non-standards <code>font-smooth</code>, <code>-webkit-font-smoothing</code> and <code>-moz-osx-font-smoothing</code> CSS properties.</p>
<ul>
<li>by default all Scrawl-canvas Stack, Canvas and Element wrapper DOM will automatically smooth fonts</li>
<li>setting this value to false will get Scrawl-canvas to attempt to switch off font smoothing</li>
<li><em><strong>This CSS property is non-standards-compliant</strong></em> and thus likely to break in interesting and unexpected ways!</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">smoothFont</span>: <span class="hljs-literal">true</span>,</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>checkForResize</strong> - Boolean - automatically update stuff when the element changes its dimensions</p>
<ul>
<li>triggers as part of the <a href="../core/userInteraction.html">userInteraction</a> <code>updateUiSubscribedElement</code> functionality</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">checkForResize</span>: <span class="hljs-literal">false</span>,</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p><strong>trackHere</strong> - String flag - when set, Scrawl-canvas will track mouse/touch cursor’s <em>local</em> position (relative to top-left corner) over the wrapper’s DOM element</p>
<ul>
<li>Stack and Canvas wrappers have this flag set to true <code>subscribe</code>, by default</li>
<li>Element wrappers default to false <code>''</code>, as expected</li>
<li>The value can also be set to <code>'local'</code>, which will set up a local listener to help track mouse movements across a 3d rotated DOM element</li>
<li><em><strong>BE AWARE</strong></em> that setting the value to <code>'local'</code> is an <em>experimental technology!</em> There are a number of issues surrounding the functionality - principally that we lose the ability to dynamically resize the rotated element/canvas: changing the element’s dimensions will lead to inaccuracies in mouse cursor positioning!</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">trackHere</span>: <span class="hljs-string">''</span>,</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p><strong>activePadding</strong> - Number - if the <code>trackHere</code> attribute is set to <code>'local'</code> then the here object will generally remain true whatever the position of the mouse cursor - this is because here coordinates are only updated as the cursor moves over the element, not when it moves beyond its borders. The activePadding Number supplies a padding area along the inside edge of the element - if the mouse moves into this area then a the here.active boolean will become false. This is not foolproof because it will often miss a rapidly moving cursor!</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">activePadding</span>: <span class="hljs-number">5</span>,</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p><strong>domAttributes</strong> - pseudo-attribute which is not retained by the wrapper object. See <code>updateDomAttributes</code> function below for details on how to use this functionality when creating or updating (via <code>set</code>), for example, Element objects</p>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><strong>includeInTabNavigation</strong> - pseudo-attribute which is not retained by the wrapper object. See <code>updateDomAttributes</code> function below for details on how to use this functionality when creating or updating (via <code>set</code>), for example, Element objects</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">includeInTabNavigation</span>: <span class="hljs-literal">false</span>,</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>These actions are all related to user accessibility and the ability of the user to define their preferences at the operation system or device level. Listeners to capture the state of, and changes in, those values are set up in <code>core/userInteraction.js</code>. Each canvas, stack or (subscribed) element can take advantage of this functionality to update its appearance dependant on the user’s preferences.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">moreContrastAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">otherContrastAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">reduceMotionAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">noPreferenceMotionAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">colorSchemeLightAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">colorSchemeDarkAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">reduceTransparencyAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">noPreferenceTransparencyAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">reduceDataAction</span>: <span class="hljs-literal">null</span>,
<span class="hljs-attr">noPreferenceDataAction</span>: <span class="hljs-literal">null</span>,
};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">packetExclusions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetExclusions</span>, [<span class="hljs-string">'domElement'</span>, <span class="hljs-string">'pathCorners'</span>, <span class="hljs-string">'rotation'</span>]);
P.<span class="hljs-property">packetFunctions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetFunctions</span>, [<span class="hljs-string">'onEnter'</span>, <span class="hljs-string">'onLeave'</span>, <span class="hljs-string">'onDown'</span>, <span class="hljs-string">'onUp'</span>]);</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p><code>processDOMPacketOut</code> - internal helper function</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">processDOMPacketOut</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">key, value, includes</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">processFactoryPacketOut</span>(key, value, includes);
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p><code>processFactoryPacketOut</code> - internal helper function</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">processFactoryPacketOut</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">key, value, includes</span>) {
<span class="hljs-keyword">let</span> result = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span>(includes.<span class="hljs-title function_">indexOf</span>(key) < <span class="hljs-number">0</span> && value === <span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>[key]) result = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> result;
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p><code>finalizePacketOut</code> - internal helper function</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">finalizePacketOut</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">copy, items</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_dom</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>)) {
<span class="hljs-keyword">let</span> el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>;
<span class="hljs-keyword">let</span> mynode = el.<span class="hljs-title function_">cloneNode</span>(<span class="hljs-literal">true</span>);
<span class="hljs-keyword">let</span> kids = mynode.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'[data-scrawl-corner-div="sc"]'</span>);
kids.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">kid</span> =></span> mynode.<span class="hljs-title function_">removeChild</span>(kid));
copy.<span class="hljs-property">outerHTML</span> = mynode.<span class="hljs-property">outerHTML</span>;
copy.<span class="hljs-property">host</span> = el.<span class="hljs-property">parentElement</span>.<span class="hljs-property">id</span>;
}
copy = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">handlePacketAnchor</span>(copy, items);
<span class="hljs-keyword">return</span> copy;
};</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p><code>postCloneAction</code> - internal helper function</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">postCloneAction</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">clone, items</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">onEnter</span>) clone.<span class="hljs-property">onEnter</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">onEnter</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">onLeave</span>) clone.<span class="hljs-property">onLeave</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">onLeave</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">onDown</span>) clone.<span class="hljs-property">onDown</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">onDown</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">onUp</span>) clone.<span class="hljs-property">onUp</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">onUp</span>;
<span class="hljs-keyword">return</span> clone;
};</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>No additional kill functionality required</p>
</div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<h4 id="get-set-deltaset">Get, Set, deltaSet</h4>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> S = P.<span class="hljs-property">setters</span>,
D = P.<span class="hljs-property">deltaSetters</span>;
S.<span class="hljs-property">trackHere</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">val</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">xt</span>(val)) {
<span class="hljs-keyword">if</span> (val) {
<span class="hljs-title function_">pushUnique</span>(uiSubscribedElements, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);
<span class="hljs-keyword">if</span> (val === <span class="hljs-string">'local'</span>) <span class="hljs-title function_">addLocalMouseMoveListener</span>(<span class="hljs-variable language_">this</span>);
}
<span class="hljs-keyword">else</span> {
<span class="hljs-title function_">removeItem</span>(uiSubscribedElements, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>);
<span class="hljs-title function_">removeLocalMouseMoveListener</span>(<span class="hljs-variable language_">this</span>);
}
<span class="hljs-variable language_">this</span>.<span class="hljs-property">trackHere</span> = val;
}
};</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p><code>position</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">position</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyPosition</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-27">§</a>
</div>
<p><code>smoothFont</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">smoothFont</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">smoothFont</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtySmoothFont</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-28">§</a>
</div>
<p><code>visibility</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">visibility</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">visibility</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyVisibility</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-29">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-29">§</a>
</div>
<p><code>offsetZ</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">offsetZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">offsetZ</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOffsetZ</span> = <span class="hljs-literal">true</span>;
};
D.<span class="hljs-property">offsetZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">offsetZ</span> += item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOffsetZ</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-30">§</a>
</div>
<p><code>roll</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">roll</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">roll</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">checkRotationAngle</span>(item);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyRotation</span> = <span class="hljs-literal">true</span>;
};
D.<span class="hljs-property">roll</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">roll</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">checkRotationAngle</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">roll</span> + item);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyRotation</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-31">§</a>
</div>
<p><code>pitch</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">pitch</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">pitch</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">checkRotationAngle</span>(item);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyRotation</span> = <span class="hljs-literal">true</span>;
};
D.<span class="hljs-property">pitch</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">pitch</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">checkRotationAngle</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">pitch</span> + item);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyRotation</span> = <span class="hljs-literal">true</span>;
};</pre></div></div>