scrawl-canvas

<!DOCTYPE html> <html> <head> <title>UnstackedElement factory</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="action.html"> ./source/factory/action.js </a> <a class="source" href="anchor.html"> ./source/factory/anchor.js </a> <a class="source" href="animation.html"> ./source/factory/animation.js </a> <a class="source" href="bezier.html"> ./source/factory/bezier.js </a> <a class="source" href="block.html"> ./source/factory/block.js </a> <a class="source" href="canvas.html"> ./source/factory/canvas.js </a> <a class="source" href="cell.html"> ./source/factory/cell.js </a> <a class="source" href="cog.html"> ./source/factory/cog.js </a> <a class="source" href="color.html"> ./source/factory/color.js </a> <a class="source" href="conicGradient.html"> ./source/factory/conicGradient.js </a> <a class="source" href="coordinate.html"> ./source/factory/coordinate.js </a> <a class="source" href="crescent.html"> ./source/factory/crescent.js </a> <a class="source" href="element.html"> ./source/factory/element.js </a> <a class="source" href="emitter.html"> ./source/factory/emitter.js </a> <a class="source" href="filter.html"> ./source/factory/filter.js </a> <a class="source" href="filterEngine-bluenoiseData.html"> ./source/factory/filterEngine-bluenoiseData.js </a> <a class="source" href="filterEngine.html"> ./source/factory/filterEngine.js </a> <a class="source" href="fontAttributes.html"> ./source/factory/fontAttributes.js </a> <a class="source" href="gradient.html"> ./source/factory/gradient.js </a> <a class="source" href="grid.html"> ./source/factory/grid.js </a> <a class="source" href="group.html"> ./source/factory/group.js </a> <a class="source" href="imageAsset.html"> ./source/factory/imageAsset.js </a> <a class="source" href="line.html"> ./source/factory/line.js </a> <a class="source" href="lineSpiral.html"> ./source/factory/lineSpiral.js </a> <a class="source" href="loom.html"> ./source/factory/loom.js </a> <a class="source" href="mesh.html"> ./source/factory/mesh.js </a> <a class="source" href="net.html"> ./source/factory/net.js </a> <a class="source" href="noiseAsset.html"> ./source/factory/noiseAsset.js </a> <a class="source" href="oval.html"> ./source/factory/oval.js </a> <a class="source" href="palette.html"> ./source/factory/palette.js </a> <a class="source" href="particle.html"> ./source/factory/particle.js </a> <a class="source" href="particleForce.html"> ./source/factory/particleForce.js </a> <a class="source" href="particleHistory.html"> ./source/factory/particleHistory.js </a> <a class="source" href="particleSpring.html"> ./source/factory/particleSpring.js </a> <a class="source" href="particleWorld.html"> ./source/factory/particleWorld.js </a> <a class="source" href="pattern.html"> ./source/factory/pattern.js </a> <a class="source" href="phrase.html"> ./source/factory/phrase.js </a> <a class="source" href="picture.html"> ./source/factory/picture.js </a> <a class="source" href="polygon.html"> ./source/factory/polygon.js </a> <a class="source" href="polyline.html"> ./source/factory/polyline.js </a> <a class="source" href="quadratic.html"> ./source/factory/quadratic.js </a> <a class="source" href="quaternion.html"> ./source/factory/quaternion.js </a> <a class="source" href="radialGradient.html"> ./source/factory/radialGradient.js </a> <a class="source" href="rawAsset.html"> ./source/factory/rawAsset.js </a> <a class="source" href="rdAsset.html"> ./source/factory/rdAsset.js </a> <a class="source" href="rectangle.html"> ./source/factory/rectangle.js </a> <a class="source" href="renderAnimation.html"> ./source/factory/renderAnimation.js </a> <a class="source" href="shape.html"> ./source/factory/shape.js </a> <a class="source" href="spiral.html"> ./source/factory/spiral.js </a> <a class="source" href="spriteAsset.html"> ./source/factory/spriteAsset.js </a> <a class="source" href="stack.html"> ./source/factory/stack.js </a> <a class="source" href="star.html"> ./source/factory/star.js </a> <a class="source" href="state.html"> ./source/factory/state.js </a> <a class="source" href="tetragon.html"> ./source/factory/tetragon.js </a> <a class="source" href="ticker.html"> ./source/factory/ticker.js </a> <a class="source" href="tracer.html"> ./source/factory/tracer.js </a> <a class="source" href="tween.html"> ./source/factory/tween.js </a> <a class="source" href="unstackedElement.html"> ./source/factory/unstackedElement.js </a> <a class="source" href="vector.html"> ./source/factory/vector.js </a> <a class="source" href="videoAsset.html"> ./source/factory/videoAsset.js </a> <a class="source" href="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> </div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <h1 id="unstackedelement-factory">UnstackedElement factory</h1> </div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <p><em><strong>To be aware - this artefact factory is HIGHLY EXPERIMENTAL; its API will be subject to short-notice breaking changes as we amend and inprove the artefact’s functionality</strong></em></p> </div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <p>TODO - documentation</p> </div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <h4 id="to-instantiate-objects-from-the-factory">To instantiate objects from the factory</h4> </div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <h4 id="library-storage">Library storage</h4> </div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <h4 id="clone-functionality">Clone functionality</h4> </div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <h4 id="kill-functionality">Kill functionality</h4> </div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <h2 id="imports">Imports</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { unstackedelement, constructors } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>; <span class="hljs-keyword">import</span> { xt, mergeOver, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>; <span class="hljs-keyword">import</span> { makeCanvas } <span class="hljs-keyword">from</span> <span class="hljs-string">'./canvas.js'</span>; <span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>;</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <h2 id="unstackedelement-constructor">UnstackedElement constructor</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">UnstackedElement</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">el</span>) { <span class="hljs-keyword">let</span> name = el.<span class="hljs-property">id</span> || el.<span class="hljs-property">name</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeName</span>(name); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">register</span>(); el.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'data-scrawl-name'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span> = el; <span class="hljs-variable language_">this</span>.<span class="hljs-property">elementComputedStyles</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">getComputedStyle</span>(el); <span class="hljs-variable language_">this</span>.<span class="hljs-property">hostStyles</span> = Ωempty; <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasStartX</span> = <span class="hljs-number">0</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasStartY</span> = <span class="hljs-number">0</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasWidth</span> = <span class="hljs-number">0</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasHeight</span> = <span class="hljs-number">0</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasZIndex</span> = <span class="hljs-number">0</span>; <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; };</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <h2 id="unstackedelement-object-prototype-setup">UnstackedElement object prototype setup</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">UnstackedElement</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>); P.<span class="hljs-property">type</span> = <span class="hljs-string">'UnstackedElement'</span>; P.<span class="hljs-property">lib</span> = <span class="hljs-string">'unstackedelement'</span>; P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">false</span>; P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">false</span>;</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <p>Apply mixins to prototype object</p> </div> <div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <h2 id="define-default-attributes">Define default attributes</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <p>TODO - documentation</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">canvasOnTop</span>: <span class="hljs-literal">false</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-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <h2 id="packet-management">Packet management</h2> </div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <p>TODO</p> </div> </li> <li id="section-17"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-17">§</a> </div> <h2 id="define-getter-setter-and-deltasetter-functions">Define getter, setter and deltaSetter functions</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> G = P.<span class="hljs-property">getters</span>, S = P.<span class="hljs-property">setters</span>, D = P.<span class="hljs-property">deltaSetters</span>;</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <h2 id="define-prototype-functions">Define prototype functions</h2> </div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> <p>TODO - documentation</p> </div> </li> <li id="section-20"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-20">§</a> </div> <p>This is going to be rewritten as part of the “kill” review/recode work</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">demolish</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">removeFromDom = <span class="hljs-literal">false</span></span>) { <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; };</pre></div></div> </li> <li id="section-21"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-21">§</a> </div> <p>Adds a canvas element to sit behind the element, or in front of it, depending on the setting of the <strong>canvasOnTop</strong> attribute</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">addCanvas</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) { <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span>) { <span class="hljs-keyword">let</span> canvas = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'canvas'</span>), el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>, style = el.<span class="hljs-property">style</span>; <span class="hljs-keyword">if</span> (style.<span class="hljs-property">position</span> === <span class="hljs-string">'static'</span>) style.<span class="hljs-property">position</span> = <span class="hljs-string">'relative'</span>; canvas.<span class="hljs-property">id</span> = <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>-canvas`</span>; el.<span class="hljs-title function_">prepend</span>(canvas); <span class="hljs-keyword">let</span> art = <span class="hljs-title function_">makeCanvas</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>-canvas`</span>, <span class="hljs-attr">domElement</span>: canvas, <span class="hljs-attr">position</span>: <span class="hljs-string">'absolute'</span>, }); <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span> = art; art.<span class="hljs-title function_">set</span>(items); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">updateCanvas</span>(); <span class="hljs-keyword">return</span> art; } };</pre></div></div> </li> <li id="section-22"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-22">§</a> </div> <p>DOM element styles that we need to observe for changes, to keep the canvas in step with its element</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">includedStyles</span> = [<span class="hljs-string">'width'</span>, <span class="hljs-string">'height'</span>, <span class="hljs-string">'zIndex'</span>, <span class="hljs-string">'borderBottomLeftRadius'</span>, <span class="hljs-string">'borderBottomRightRadius'</span>, <span class="hljs-string">'borderTopLeftRadius'</span>, <span class="hljs-string">'borderTopRightRadius'</span>];</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-23">§</a> </div> <p>Included styles that we can transfer directly from DOM element to canvas with no further processing</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">mimickedStyles</span> = [<span class="hljs-string">'borderBottomLeftRadius'</span>, <span class="hljs-string">'borderBottomRightRadius'</span>, <span class="hljs-string">'borderTopLeftRadius'</span>, <span class="hljs-string">'borderTopRightRadius'</span>];</pre></div></div> </li> <li id="section-24"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-24">§</a> </div> <p>Observer function - runs on every RAF loop (when the DOM element is viewable); aim is to:</p> </div> </li> <li id="section-25"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-25">§</a> </div> <ul> <li>keep canvas dimensions exactly matched with its DOM element’s dimensions (including border/padding)</li> <li>position the canvas correctly over/under the DOM element (taking into account border/padding)</li> <li>maintain parity between other DOM element CSS values and those values on the canvas (eg border radius)</li> </ul> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">checkElementStyleValues</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">let</span> results = {}; <span class="hljs-keyword">let</span> el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>, wrapper = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span>; <span class="hljs-keyword">if</span> (el && wrapper && wrapper.<span class="hljs-property">domElement</span>) { <span class="hljs-keyword">let</span> host = <span class="hljs-variable language_">this</span>.<span class="hljs-property">hostStyles</span>, style = <span class="hljs-variable language_">this</span>.<span class="hljs-property">elementComputedStyles</span>, canvas = wrapper.<span class="hljs-property">domElement</span>, includedStyles = <span class="hljs-variable language_">this</span>.<span class="hljs-property">includedStyles</span>; <span class="hljs-keyword">let</span> {<span class="hljs-attr">x</span>: elX, <span class="hljs-attr">y</span>: elY, <span class="hljs-attr">width</span>: elW, <span class="hljs-attr">height</span>: elH} = el.<span class="hljs-title function_">getBoundingClientRect</span>(); <span class="hljs-keyword">let</span> {<span class="hljs-attr">x</span>: canvasX, <span class="hljs-attr">y</span>: canvasY} = canvas.<span class="hljs-title function_">getBoundingClientRect</span>(); <span class="hljs-keyword">let</span> {<span class="hljs-attr">zIndex</span>: styleZ, <span class="hljs-attr">width</span>: styleW, <span class="hljs-attr">height</span>: styleH} = style; elX = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(elX); elY = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(elY); canvasX = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(canvasX); canvasY = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(canvasY); elW = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(elW); elH = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(elH); styleW = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-built_in">parseFloat</span>(styleW)); styleH = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-built_in">parseFloat</span>(styleH)); includedStyles.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> { <span class="hljs-keyword">switch</span> (item) { <span class="hljs-keyword">case</span> <span class="hljs-string">'width'</span> : <span class="hljs-keyword">let</span> w = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(styleW, elW); <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasWidth</span> !== w) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasWidth</span> = w; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">true</span>; } <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-string">'height'</span> : <span class="hljs-keyword">let</span> h = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(styleH, elH); <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasHeight</span> !== h) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasHeight</span> = h; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">true</span>; } <span class="hljs-keyword">break</span>; <span class="hljs-keyword">case</span> <span class="hljs-string">'zIndex'</span> : <span class="hljs-keyword">let</span> z = (styleZ === <span class="hljs-string">'auto'</span>) ? <span class="hljs-number">0</span> : <span class="hljs-built_in">parseInt</span>(styleZ, <span class="hljs-number">10</span>); z = (<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasOnTop</span>) ? z + <span class="hljs-number">1</span> : z - <span class="hljs-number">1</span>; <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasZIndex</span> !== z) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasZIndex</span> = z; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyZIndex</span> = <span class="hljs-literal">true</span>; } <span class="hljs-keyword">break</span>; <span class="hljs-keyword">default</span> : <span class="hljs-keyword">let</span> hi = host[item], si = style[item]; <span class="hljs-keyword">if</span>(!<span class="hljs-title function_">xt</span>(hi) || hi !== si) { host[item] = si; results[item] = si; } } }); <span class="hljs-keyword">let</span> dx = elX - canvasX, dy = elY - canvasY; <span class="hljs-keyword">if</span> (dx || dy) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasStartX</span> += dx; <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasStartY</span> += dy; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyStart</span> = <span class="hljs-literal">true</span>; } } <span class="hljs-keyword">return</span> results; };</pre></div></div> </li> <li id="section-26"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-26">§</a> </div> <p>Perform any updates reported by the observer function</p> </div> </li> <li id="section-27"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-27">§</a> </div> <p>UnstackedElement canvases keep their display and base canvases in dimensional sync - which means that <strong>relatively positioned and dimensioned</strong> entitys in the canvas (those set with appropriate ‘val%’ string values) will update in line with changes in the DOM element’s width, height, padding and margin values</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">updateCanvas</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span> && <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span>.<span class="hljs-property">domElement</span>) { <span class="hljs-keyword">let</span> canvas = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span>, style = canvas.<span class="hljs-property">domElement</span>.<span class="hljs-property">style</span>, mimics = <span class="hljs-variable language_">this</span>.<span class="hljs-property">mimickedStyles</span>, updates = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">checkElementStyleValues</span>(); <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> [key, value] <span class="hljs-keyword">of</span> <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(updates)) { <span class="hljs-keyword">if</span> (mimics.<span class="hljs-title function_">indexOf</span>(key) >= <span class="hljs-number">0</span>) { style[key] = value; } } <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyStart</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyStart</span> = <span class="hljs-literal">false</span>; canvas.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">startX</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasStartX</span>, <span class="hljs-attr">startY</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasStartY</span>, }); } <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensions</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">false</span>; <span class="hljs-keyword">let</span> w = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasWidth</span>, h = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasHeight</span>; canvas.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">width</span>: w, <span class="hljs-attr">height</span>: h, }); canvas.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">true</span>; canvas.<span class="hljs-property">base</span>.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">width</span>: w, <span class="hljs-attr">height</span>: h, }); canvas.<span class="hljs-property">base</span>.<span class="hljs-property">dirtyDimensions</span> = <span class="hljs-literal">true</span>; canvas.<span class="hljs-title function_">cleanDimensions</span>(); canvas.<span class="hljs-property">base</span>.<span class="hljs-title function_">cleanDimensions</span>(); } <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyZIndex</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyZIndex</span> = <span class="hljs-literal">false</span>; style.<span class="hljs-property">zIndex</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvasZIndex</span>; } } };</pre></div></div> </li> <li id="section-28"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-28">§</a> </div> <h2 id="exported-factory-function">Exported factory function</h2> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> makeUnstackedElement = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) { <span class="hljs-keyword">if</span> (!items) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">UnstackedElement</span>(items); }; constructors.<span class="hljs-property">UnstackedElement</span> = <span class="hljs-title class_">UnstackedElement</span>; <span class="hljs-keyword">export</span> { makeUnstackedElement, };</pre></div></div> </li> </ul> </div> </body> </html>