scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,062 lines (663 loc) • 42.6 kB
HTML
<html>
<head>
<title>Cascade 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="cascade-mixin">Cascade mixin</h1>
<p>This mixin sets up the Scrawl-canvas functionality required to perform its <strong>Display cycle</strong>.</p>
<ul>
<li>The Display cycle is initiated by <a href="../factory/stack.html">Stack</a> and DOM-related <a href="../factory/cell.html">Cell</a> wrappers (generally <a href="../factory/canvas.html">Canvas</a> wrappers) - <strong>controller objects</strong></li>
<li>The cycle cascades from the wrappers to all artefact objects associated with them, as mediated by <a href="../factory/group.html">Group</a> objects.</li>
</ul>
<p>The mixin also includes code to assist <strong>drag-and-drop</strong> functionality.</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> { group } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, removeItem, xtGet, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.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="shared-attributes">Shared attributes</h4>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>The <strong>groups</strong> attribute holds the String names of all the Group objects associated with the controller object.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">groups</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>The <strong>groupBuckets</strong> attribute holds a reference to each Group object, in a set of arrays grouping Groups according to their order values.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">groupBuckets</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>The <strong>batchResort</strong> Boolean flag determines whether the Groups will be sorted by their order value before instructions get passed to each in sequence. Best to leave this flag alone to do its job.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">batchResort</span>: <span class="hljs-literal">true</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-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>No additional packet functionality required</p>
</div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p>No additional clone functionality required</p>
</div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>No additional kill functionality required</p>
</div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</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> G = P.<span class="hljs-property">getters</span>,
S = P.<span class="hljs-property">setters</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>groups</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">groups</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> [].<span class="hljs-title function_">concat</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>);
};
S.<span class="hljs-property">groups</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">addGroups</span>(item);
};</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p><code>sortGroups</code> - internal function - Groups are sorted from the <strong>groups</strong> Array into the <strong>groupBuckets</strong> array using a bespoke bucket sort algorithm, based on each Group object’s <strong>order</strong> attribute</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">sortGroups</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">force = <span class="hljs-literal">false</span></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">batchResort</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">batchResort</span> = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">let</span> floor = <span class="hljs-title class_">Math</span>.<span class="hljs-property">floor</span>,
groupnames = <span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>,
buckets = [],
mygroup, order;
groupnames.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">name</span> =></span> {
mygroup = group[name];
order = (mygroup) ? <span class="hljs-title function_">floor</span>(mygroup.<span class="hljs-property">order</span>) : <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (!buckets[order]) buckets[order] = [];
buckets[order].<span class="hljs-title function_">push</span>(mygroup);
});
<span class="hljs-variable language_">this</span>.<span class="hljs-property">groupBuckets</span> = buckets.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">a, v</span>) =></span> a.<span class="hljs-title function_">concat</span>(v), []);
}
};</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p><code>initializeCascade</code> - internal function used by factory constructors</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">initializeCascade</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">groupBuckets</span> = [];
};</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h5 id="group-management">Group management</h5>
<p>Groups should be added to, and removed from, the controller object using the <strong>addGroups</strong> and <strong>removeGroups</strong> functions. The argument can be one or more Group object’s name attribute, or the Group object(s) itself.</p>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><code>addGroups</code></p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">addGroups</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) {
args.<span class="hljs-title function_">forEach</span>( <span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">if</span> (item && item.<span class="hljs-property">substring</span>) <span class="hljs-title function_">pushUnique</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>, item);
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (group[item]) <span class="hljs-title function_">pushUnique</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>, item.<span class="hljs-property">name</span>);
}, <span class="hljs-variable language_">this</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">batchResort</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><code>removeGroups</code></p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">removeGroups</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) {
args.<span class="hljs-title function_">forEach</span>( <span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">if</span> (item && item.<span class="hljs-property">substring</span>) <span class="hljs-title function_">removeItem</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>, item);
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (group[item]) <span class="hljs-title function_">removeItem</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>, item.<span class="hljs-property">name</span>);
}, <span class="hljs-variable language_">this</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">batchResort</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p><code>cascadeAction</code> - internal helper function used by the functions below</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">cascadeAction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items, action</span>) {
<span class="hljs-keyword">let</span> grp;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>.<span class="hljs-title function_">forEach</span>( <span class="hljs-function"><span class="hljs-params">groupname</span> =></span> {
grp = group[groupname];
<span class="hljs-keyword">if</span> (grp) grp[action](items);
}, <span class="hljs-variable language_">this</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</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>updateArtefacts</code> - Update all artefact objects in all the controller object’s Groups. The supplied argument will be passed on to each artefact’s <code>setDelta</code> function.</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">updateArtefacts</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cascadeAction</span>(items, <span class="hljs-string">'updateArtefacts'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p><code>updateArtefacts</code> - Set all artefact objects in all the controller object’s Groups. The supplied argument will be passed on to each artefact’s <code>set</code> functions</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">setArtefacts</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cascadeAction</span>(items, <span class="hljs-string">'setArtefacts'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p><code>addArtefactClasses</code> - specific to DOM-related artefacts (Stack, Canvas, Element)</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">addArtefactClasses</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cascadeAction</span>(items, <span class="hljs-string">'addArtefactClasses'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p><code>removeArtefactClasses</code> - specific to DOM-related artefacts (Stack, Canvas, Element)</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">removeArtefactClasses</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cascadeAction</span>(items, <span class="hljs-string">'removeArtefactClasses'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p><code>updateByDelta</code> - triggers the related artefact function, to update (add) its attributes by values held in its <code>delta</code> object attribute</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">updateByDelta</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cascadeAction</span>(<span class="hljs-literal">false</span>, <span class="hljs-string">'updateByDelta'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p><code>reverseByDelta</code> - triggers the related artefact function, to reverse (subtract) its attributes by values held in its <code>delta</code> object attribute</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">reverseByDelta</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">cascadeAction</span>(<span class="hljs-literal">false</span>, <span class="hljs-string">'reverseByDelta'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<h5 id="collision-detection">Collision detection</h5>
<p>The <code>getArtefactAt</code> function checks to see if any of the controller object’s Groups’ artefacts are located at the supplied coordinates in the argument object. </p>
<ul>
<li>The first artefact to report back as being at that coordinate will be returned by the function</li>
<li>Where no artefacts are present at that coordinate the function returns false. </li>
<li>The artefact with the highest order attribute value will be returned first. </li>
<li>This function forms part of the Scrawl-canvas <strong>drag-and-drop</strong> functionality.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">getArtefactAt</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
items = <span class="hljs-title function_">xtGet</span>(items, <span class="hljs-variable language_">this</span>.<span class="hljs-property">here</span>, <span class="hljs-literal">false</span>);
<span class="hljs-keyword">if</span> (items) {
<span class="hljs-keyword">let</span> grp, result;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>; i >= <span class="hljs-number">0</span>; i--) {
grp = group[<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>[i]];
<span class="hljs-keyword">if</span> (grp) {
result = grp.<span class="hljs-title function_">getArtefactAt</span>(items);
<span class="hljs-keyword">if</span> (result) <span class="hljs-keyword">return</span> result;
}
}
}
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
};</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-27">§</a>
</div>
<p>The <code>getAllArtefactsAt</code> function returns all of the controller object’s Groups’ artefacts located at the supplied coordinates in the argument object. </p>
<ul>
<li>The artefact with the highest order attribute value will be returned first. </li>
<li>The function will always return an array of artefact objects, or an empty Array</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">getAllArtefactsAt</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
items = <span class="hljs-title function_">xtGet</span>(items, <span class="hljs-variable language_">this</span>.<span class="hljs-property">here</span>, <span class="hljs-literal">false</span>);
<span class="hljs-keyword">if</span> (items) {
<span class="hljs-keyword">let</span> grp, result,
results = [];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>; i >= <span class="hljs-number">0</span>; i--) {
grp = group[<span class="hljs-variable language_">this</span>.<span class="hljs-property">groups</span>[i]];
<span class="hljs-keyword">if</span> (grp) {
result = grp.<span class="hljs-title function_">getAllArtefactsAt</span>(items);
<span class="hljs-keyword">if</span>(result) results = results.<span class="hljs-title function_">concat</span>(result);
}
}
<span class="hljs-keyword">return</span> results;
}
<span class="hljs-keyword">return</span> [];
};</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-28">§</a>
</div>
<p>Return the prototype</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> P;
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>