scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,158 lines (724 loc) • 107 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Group 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>
<h1 id="group-factory">Group factory</h1>
<p>Scrawl-canvas uses Group objects to gather together artefact objects (Block, Canvas, Element, Grid, Loom, Phrase, Picture, Shape, Stack, Wheel) for common functions.</p>
<p>Groups connect artefacts with controller objects - Stack, Cell - through which the Display cycle can cascade. Each controller object can have more than one Group associated with it. Only Groups whose <strong>visibility</strong> flag has been set to true will propagate the Display cycle cascade to their member artefacts. The order in which each controller object invokes its Group objects is determined by each Group object’s <strong>order</strong> value.</p>
<p>Groups can also be used for purposes beyond the Display cycle:</p>
<ul>
<li>They are closely involved in collision detection functionality.</li>
<li>They can be used to propagate updates to their constituent artefacts - for instance animating them in a coordinated manner.</li>
<li>Filters can be applied to entity objects at the Group level</li>
</ul>
<p>Additional functionality to help control and interact with Groups is defined in the <strong>cascade</strong> mixin. Groups also use the <strong>base</strong> mixin, thus they come equipped with packet functionality, alongside clone and kill functions.</p>
<p>NOTE: <strong>Groups are NOT used to position a set of artefacts in the display</strong> - they have no positioning functionality, which is instead handled by the artefact objects themselves. To position and move a collection of artefacts around the display, choose one of them to act as a a reference, and then <strong>pivot</strong> or <strong>mimic</strong> other artefacts to that reference. When you position or animate the reference artefact, all the other artefacts will position/move with it. See Demo <a href="../../demo/canvas-002.html">Canvas-002</a> for an example.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li><a href="../../demo/canvas-014.html">Canvas-014</a> - Line, quadratic and bezier Shapes - control lock alternatives</li>
<li><a href="../../demo/canvas-020.html">Canvas-020</a> - Testing createImageFromXXX functionality</li>
<li><a href="../../demo/dom-003.html">DOM-003</a> - Dynamically create and clone Element artefacts; drag and drop elements (including SVG elements) around a Stack</li>
<li><a href="../../demo/dom-008.html">DOM-008</a> - 3d animated cube</li>
<li><a href="../../demo/dom-009.html">DOM-009</a> - Stop and restart the main animation loop; add and remove event listener; retrieve all artefacts at a given coordinate</li>
</ul>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { constructors, cell, artefact, group, entity, asset } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, removeItem, Ωempty, λ<span class="hljs-literal">null</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> { scrawlCanvasHold } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/document.js'</span>;
<span class="hljs-keyword">import</span> { filterEngine } <span class="hljs-keyword">from</span> <span class="hljs-string">'./filterEngine.js'</span>;
<span class="hljs-keyword">import</span> { requestCell, releaseCell } <span class="hljs-keyword">from</span> <span class="hljs-string">'./cell.js'</span>;
<span class="hljs-keyword">import</span> { importDomImage } <span class="hljs-keyword">from</span> <span class="hljs-string">'./imageAsset.js'</span>;
<span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>;
<span class="hljs-keyword">import</span> filterMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/filter.js'</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="group-constructor">Group constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Group</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeName</span>(items.<span class="hljs-property">name</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">register</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-property">artefacts</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">artefactCalculateBuckets</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">artefactStampBuckets</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">onEntityHover</span> = λ<span class="hljs-literal">null</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">onEntityNoHover</span> = λ<span class="hljs-literal">null</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">isHovering</span> = <span class="hljs-literal">null</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(items);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="group-prototype">Group prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Group</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">'Group'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'group'</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-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h4 id="mixins">Mixins</h4>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);
P = <span class="hljs-title function_">filterMix</span>(P);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="group-attributes">Group attributes</h4>
<ul>
<li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</strong>.</li>
<li>Attributes defined in the <a href="../mixin/filter.html">filter mixin</a>: <strong>filters, isStencil</strong>.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p><strong>artefacts</strong> - an Array containing the names of all artefact objects included in this group.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">artefacts</span>: <span class="hljs-literal">null</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>order</strong> - positive integer Number, which determines the order in which Stack and Cell controllers will process this Group object during the Display cycle</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">order</span>: <span class="hljs-number">0</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>visibility</strong> - Boolean flag; when unset, the Group will <strong>not</strong> be processed by Stack and Cell controllers as part of the Display cycle</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">visibility</span>: <span class="hljs-literal">true</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>regionRadius</strong> - positive Number (measured in px), used as an initial test as part of collision detection functionality</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">regionRadius</span>: <span class="hljs-number">0</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>checkForEntityHover</strong> - we can trigger groups, as part of the Display cycle, to check if any of their entitys are currently hittable (the mouse cursor is hovering over them) and run functions based on changes in hover state. This is not the same as canvas <code>cascadeEventActions</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">checkForEntityHover</span>: <span class="hljs-literal">false</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>onEntityHover</strong> - define tasks to be performed for <code>down</code> events</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">onEntityHover</span>: <span class="hljs-literal">null</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>onEntityNoHover</strong> - define tasks to be performed for <code>up</code> events</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">onEntityNoHover</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-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</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">'artefactCalculateBuckets'</span>, <span class="hljs-string">'artefactStampBuckets'</span>, <span class="hljs-string">'batchResort'</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">'onEntityHover'</span>, <span class="hljs-string">'onEntityNoHover'</span>]);</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
</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">let</span> host;
<span class="hljs-keyword">if</span> (items.<span class="hljs-property">host</span>) {
host = artefact[items.<span class="hljs-property">host</span>];
}
<span class="hljs-keyword">else</span> {
host = (<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentHost</span>) ? <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentHost</span> : (<span class="hljs-variable language_">this</span>.<span class="hljs-property">host</span>) ? artefact[<span class="hljs-variable language_">this</span>.<span class="hljs-property">host</span>] : <span class="hljs-literal">false</span>;
}
<span class="hljs-keyword">if</span> (host) {
host.<span class="hljs-title function_">addGroups</span>(clone.<span class="hljs-property">name</span>);
<span class="hljs-keyword">if</span> (!clone.<span class="hljs-property">host</span>) clone.<span class="hljs-property">host</span> = host.<span class="hljs-property">name</span>;
}
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">onEntityHover</span>) clone.<span class="hljs-property">onEntityHover</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">onEntityHover</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">onEntityNoHover</span>) clone.<span class="hljs-property">onEntityNoHover</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">onEntityNoHover</span>;
<span class="hljs-keyword">return</span> clone;
};</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">kill</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">killArtefacts = <span class="hljs-literal">false</span></span>) {
<span class="hljs-keyword">let</span> myname = <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>;</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>Remove the Group object from affected Stack and Cell objects’ <code>groups</code> attribute</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(artefact).<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">[name, art]</span>) =></span> {
<span class="hljs-keyword">if</span> (<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(art.<span class="hljs-property">groups</span>) && art.<span class="hljs-property">groups</span>.<span class="hljs-title function_">indexOf</span>(myname) >= <span class="hljs-number">0</span>) {
<span class="hljs-title function_">removeItem</span>(art.<span class="hljs-property">groups</span>, myname);
art.<span class="hljs-property">batchResort</span> = <span class="hljs-literal">true</span>;
};
});
<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(cell).<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">[name, obj]</span>) =></span> {
<span class="hljs-keyword">if</span> (<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(obj.<span class="hljs-property">groups</span>) && obj.<span class="hljs-property">groups</span>.<span class="hljs-title function_">indexOf</span>(myname) >= <span class="hljs-number">0</span>) {
<span class="hljs-title function_">removeItem</span>(obj.<span class="hljs-property">groups</span>, myname);
obj.<span class="hljs-property">batchResort</span> = <span class="hljs-literal">true</span>;
};
});
<span class="hljs-keyword">if</span> (killArtefacts) <span class="hljs-variable language_">this</span>.<span class="hljs-property">artefactCalculateBuckets</span>.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.<span class="hljs-title function_">kill</span>());</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Remove Group object from the Scrawl-canvas library</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">deregister</span>();
}
P.<span class="hljs-property">killArtefacts</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">artefactCalculateBuckets</span>.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.<span class="hljs-title function_">kill</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>
<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-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Artefect membership of the Group object is better handled by the dedicated artefact management functions - <strong>addArtefacts</strong>, <strong>removeArtefacts</strong>, <strong>clearArtefacts</strong>, <strong>moveArtefactsIntoGroup</strong>. </p>
</div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>Returns a new Array containing the name String values of current artefact members </p>
</div>
<div class="content"><div class='highlight'><pre>G.<span class="hljs-property">artefacts</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">artefacts</span>);
};</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p>Replaces the existing artefact membership with new members, supplied as an Array of name-String values</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">artefacts</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">artefacts</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">addArtefacts</span>(item);
};</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Adds the Group to a new controller Stack or Cell object. NOTE that this does not remove the Group from its existing host!</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">host</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">let</span> host = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getHost</span>(item);
<span class="hljs-keyword">if</span> (host && host.<span class="hljs-property">addGroups</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">host</span> = item;
host.<span class="hljs-title function_">addGroups</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">dirtyHost</span> = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p>Update the Group’s <code>order</code> attribute, and tell its current host that it will need to resort its associated Groups</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">order</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">let</span> host = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getHost</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">host</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">order</span> = item;
<span class="hljs-keyword">if</span> (host) {
host.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">batchResort</span>: <span class="hljs-literal">true</span>
});
}
};</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p><strong>noFilters</strong></p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">noFilters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">noFilters</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</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>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-28">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-28">§</a>
</div>
<p><code>getHost</code> - internal helper function</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">getHost</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">let</span> host = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentHost</span>;
<span class="hljs-keyword">if</span> (!host || host.<span class="hljs-property">substring</span>) <span class="hljs-keyword">return</span> artefact[item] || cell[item] || artefact[host] || cell[host] || <span class="hljs-literal">null</span>;
<span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> host;
};</pre></div></div>
</li>
<li id="section-29">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-29">§</a>
</div>
<p><code>forceStamp</code> - invoke the Group to instruct its artefact members to perform a <code>stamp</code> action, ignoring whether the Group <code>visibility</code> flag setting</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">forceStamp</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> v = <span class="hljs-variable language_">this</span>.<span class="hljs-property">visibility</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">visibility</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">stamp</span>()
<span class="hljs-variable language_">this</span>.<span class="hljs-property">visibility</span> = v;
};</pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-30">§</a>
</div>
<p><code>stamp</code> - the Display Cycle is mediated through Groups.</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">stamp</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-31">§</a>
</div>
<p>Check we have a host of some sort (either a Stack artefact or a Cell asset)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyHost</span> || !<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentHost</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyHost</span> = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">let</span> currentHost = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getHost</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">host</span>);
<span class="hljs-keyword">if</span> (currentHost) <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentHost</span> = currentHost;
<span class="hljs-keyword">else</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyHost</span> = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">visibility</span>) {
<span class="hljs-keyword">let</span> { currentHost, stashOutput, noFilters, filters } = <span class="hljs-variable language_">this</span>;
<span class="hljs-keyword">if</span> (currentHost) {</pre></div></div>
</li>
<li id="section-32">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-32">§</a>
</div>
<p>Check if artefacts need to be sorterd and, if yes, sort them by their order attribute</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sortArtefacts</span>();</pre></div></div>
</li>
<li id="section-33">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-33">§</a>
</div>
<p>Check to see if there is a Group filter in place or if the Group needs to stash its output and, if yes, pull a Cell asset from the pool</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> filterCell = (stashOutput || (!noFilters && filters && filters.<span class="hljs-property">length</span>)) ?
<span class="hljs-title function_">requestCell</span>() :
<span class="hljs-literal">false</span>;</pre></div></div>
</li>
<li id="section-34">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-34">§</a>
</div>
<p>Setup the pool Cell, if required</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (filterCell && filterCell.<span class="hljs-property">element</span>) {
<span class="hljs-keyword">let</span> dims = currentHost.<span class="hljs-property">currentDimensions</span>,
fCellDims = filterCell.<span class="hljs-property">currentDimensions</span>,
fEl = filterCell.<span class="hl