scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,051 lines (686 loc) • 193 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cell 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="cell-factory">Cell factory</h1>
<p>Scrawl-canvas uses ‘hidden’ canvases - <canvas> elements that are not part of the DOM - for much of its functionality:</p>
<ul>
<li>When we wrap a DOM-based <canvas> element in a Scrawl-canvas <a href="./canvas.html">Canvas</a> wrapper, we create a second ‘hidden’ <canvas> element and assign it as that Canvas wrapper’s <strong>base cell</strong>. </li>
<li>This Cell is used for building the display during the Display cycle (<code>clear</code> and <code>compile</code> steps). </li>
<li>It gets copied over to the Dom-based <canvas> element at the end of the cycle (the <code>show</code> step).</li>
<li>When copied over, the base cell will determine how much of its display to copy into the controller Canvas, to meet the needs of that Canvas wrapper’s <code>fit</code> attribute.</li>
</ul>
<p>A Scrawl-canvas Canvas wrapper can have more than one Cell wrapper associated with it. These additional Cells can be used as:</p>
<ul>
<li><strong>layers</strong> to be applied to the base cell, allowing us to break a canvas display into more manageable portions</li>
<li>the source for image-based objects such as <strong>Picture entitys</strong> and <strong>Pattern styles</strong>.</li>
<li><strong>artefacts</strong> - a Cell wrapper can act just like any artefact: it can be positioned, dimensioned, scaled and rotated ; it can act as a <code>pivot</code> or <code>mimic</code> source for other artefacts, or use them for its position and dimensions data. (Be aware, though, that Cell wrappers are NOT stored in the scrawl library’s <code>artefact</code> section).</li>
</ul>
<p>Cell wrappers include a number of Boolean flags and other attributes to control how they are stamped onto other Cells. </p>
<ul>
<li>We can set flags to determine whether to include the Cell in each step of the Display cycle (<code>cleared</code>, <code>compiled</code>, <code>shown</code>) - this allows us to set up, for example, ‘static’ Cells that only need to be compiled once and can then be used as backgrounds for other Cells and entitys to be animated over.</li>
<li>We can vary the order in which Cell wrappers get processed during the Display cycle (<code>compileOrder</code>, <code>showOrder</code>). </li>
<li>Each Cell can have its own <code>backgroundColor</code>.</li>
<li>Each Cell can be made translucent (<code>alpha</code>).</li>
<li>Each Cell can be stamped onto other Cell canvases using a different composition method (<code>composite</code>).</li>
<li>Each Cell can be given its own dimensions, different to those of its Canvas wrapper, with updates cascading down to entitys that use the Cell to determine their own (relative) dimensions and start coordinates. </li>
<li>We can <code>scale</code>, <code>roll</code> and <code>flip</code> a Cell.</li>
<li>We can control which parts of the Cell display will be copied over to its destination (<code>copy attributes</code>).</li>
<li>We can add one or more <code>filters</code> to the Cell’s outputted display.</li>
</ul>
<p>Every Cell wrapper will include a <a href="./group.html">Group object</a> which shares the same name as the Cell. To include an entity object in a Cell wrapper’s canvas display we add it to this group. </p>
<ul>
<li>Additional Group objects can be added to the Cell wrapper as-and-when required. </li>
<li>Groups are processed in the order specified in their <code>order</code> attributes.</li>
<li>Groups whose <code>visibility</code> flag is set to false will be skipped during the Display cycle cascade.</li>
</ul>
<p>Scrawl-canvas uses the <code>makeCell</code> factory function internally; it is not exported to the scrawl object. Instead, <em><strong>new Cell wrappers can be created from a Canvas wrapper</strong></em> using its <code>addCell</code> function.</p>
<p>Scrawl-canvas (partially) disables Cell wrapper <code>packet</code> functionality. <em><strong>Cell wrappers cannot be cloned.</strong></em> They can be killed, either using their <code>kill</code> function or by invoking their Canvas wrapper controller’s <code>killCell</code> function.</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>All canvas and packets demos, and a few of the stack demos, include Cell wrapper functionality - most of which happens behind the scenes and does not need to be directly coded. </li>
<li><a href="../../demo/canvas-009.html">Canvas-009</a> - Pattern styles; Entity web link anchors; Dynamic accessibility</li>
<li><a href="../../demo/canvas-031.html">Canvas-031</a> - Cell generation and processing order - kaleidoscope clock</li>
<li><a href="../../demo/canvas-036.html">Canvas-036</a> - Cell artefact-like positional functionality</li>
<li><a href="../../demo/canvas-039.html">Canvas-039</a> - Detecting mouse/pointer cursor movements across a non-base Cell</li>
<li><a href="../../demo/dom-011.html">DOM-011</a> - Canvas controller <code>fit</code> attribute; Cell positioning (mouse)</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> { artefact, asset, tween, radian, constructors, styles, stylesnames, cell, cellnames, group, canvas } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { generateUniqueString, isa_canvas, mergeOver, λ<span class="hljs-variable language_">this</span>, λ<span class="hljs-literal">null</span>, Ωempty } <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> { getPixelRatio, getIgnorePixelRatio } <span class="hljs-keyword">from</span> <span class="hljs-string">"../core/events.js"</span>;
<span class="hljs-keyword">import</span> { makeGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'./group.js'</span>;
<span class="hljs-keyword">import</span> { makeState } <span class="hljs-keyword">from</span> <span class="hljs-string">'./state.js'</span>;
<span class="hljs-keyword">import</span> { makeCoordinate, requestCoordinate, releaseCoordinate } <span class="hljs-keyword">from</span> <span class="hljs-string">'./coordinate.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> { 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> positionMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/position.js'</span>;
<span class="hljs-keyword">import</span> deltaMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/delta.js'</span>;
<span class="hljs-keyword">import</span> pivotMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/pivot.js'</span>;
<span class="hljs-keyword">import</span> mimicMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/mimic.js'</span>;
<span class="hljs-keyword">import</span> pathMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/path.js'</span>;
<span class="hljs-keyword">import</span> anchorMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/anchor.js'</span>;
<span class="hljs-keyword">import</span> cascadeMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/cascade.js'</span>;
<span class="hljs-keyword">import</span> assetMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/asset.js'</span>;
<span class="hljs-keyword">import</span> patternMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/pattern.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="cell-constructor">Cell constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Cell</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-keyword">if</span> (!items.<span class="hljs-property">isPool</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-title function_">initializePositions</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">initializeCascade</span>();
<span class="hljs-keyword">if</span> (!<span class="hljs-title function_">isa_canvas</span>(items.<span class="hljs-property">element</span>)) {
<span class="hljs-keyword">let</span> mycanvas = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'canvas'</span>);
mycanvas.<span class="hljs-property">id</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>;
mycanvas.<span class="hljs-property">width</span> = <span class="hljs-number">300</span>;
mycanvas.<span class="hljs-property">height</span> = <span class="hljs-number">150</span>;
items.<span class="hljs-property">element</span> = mycanvas;
}
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">installElement</span>(items.<span class="hljs-property">element</span>);
<span class="hljs-keyword">if</span> (items.<span class="hljs-property">isPool</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">poolDefs</span>)
<span class="hljs-keyword">else</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-title function_">set</span>(items);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>.<span class="hljs-title function_">setStateFromEngine</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">engine</span>);
<span class="hljs-keyword">if</span> (!items.<span class="hljs-property">isPool</span>) {
<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">host</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">subscribers</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalDimensions</span> = <span class="hljs-title function_">makeCoordinate</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDimensionsOverride</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceLoaded</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">here</span> = {};
<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="cell-prototype">Cell prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Cell</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">'Cell'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'cell'</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">true</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>
<ul>
<li><a href="../mixin/base.html">base</a></li>
<li><a href="../mixin/asset.html">asset</a> - goes above position mixin because asset objects use the kill function defined in this mixin, but Cells need to follow the position mixin formula (which includes a call to the factoryKill function)</li>
<li><a href="../mixin/position.html">position</a></li>
<li><a href="../mixin/delta.html">delta</a></li>
<li><a href="../mixin/pivot.html">pivot</a></li>
<li><a href="../mixin/mimic.html">mimic</a></li>
<li><a href="../mixin/path.html">path</a></li>
<li><a href="../mixin/anchor.html">anchor</a></li>
<li><a href="../mixin/cascade.html">cascade</a></li>
<li><a href="../mixin/pattern.html">pattern</a></li>
<li><a href="../mixin/filter.html">filter</a></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);
P = <span class="hljs-title function_">assetMix</span>(P);
P = <span class="hljs-title function_">positionMix</span>(P);
P = <span class="hljs-title function_">deltaMix</span>(P);
P = <span class="hljs-title function_">pivotMix</span>(P);
P = <span class="hljs-title function_">mimicMix</span>(P);
P = <span class="hljs-title function_">pathMix</span>(P);
P = <span class="hljs-title function_">anchorMix</span>(P);
P = <span class="hljs-title function_">cascadeMix</span>(P);
P = <span class="hljs-title function_">patternMix</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="cell-attributes">Cell 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/position.html">position mixin</a>: <strong>group, visibility, order, start, <em>startX</em>, <em>startY</em>, handle, <em>handleX</em>, <em>handleY</em>, offset, <em>offsetX</em>, <em>offsetY</em>, dimensions, <em>width</em>, <em>height</em>, pivoted, mimicked, lockTo, <em>lockXTo</em>, <em>lockYTo</em>, scale, roll, noUserInteraction, noPositionDependencies, noCanvasEngineUpdates, noFilters, noPathUpdates, purge, bringToFrontOnDrag</strong>.</li>
<li>Attributes defined in the <a href="../mixin/delta.html">delta mixin</a>: <strong>delta, noDeltaUpdates</strong>.</li>
<li>Attributes defined in the <a href="../mixin/pivot.html">pivot mixin</a>: <strong>pivot, pivotCorner, addPivotHandle, addPivotOffset, addPivotRotation</strong>.</li>
<li>Attributes defined in the <a href="../mixin/mimic.html">mimic mixin</a>: <strong>mimic, useMimicDimensions, useMimicScale, useMimicStart, useMimicHandle, useMimicOffset, useMimicRotation, useMimicFlip, addOwnDimensionsToMimic, addOwnScaleToMimic, addOwnStartToMimic, addOwnHandleToMimic, addOwnOffsetToMimic, addOwnRotationToMimic</strong>.</li>
<li>Attributes defined in the <a href="../mixin/path.html">path mixin</a>: <strong>path, pathPosition, addPathHandle, addPathOffset, addPathRotation, constantPathSpeed</strong>.</li>
<li>Attributes defined in the <a href="../mixin/anchor.html">anchor mixin</a>: <strong>anchor</strong>.</li>
<li>Attributes defined in the <a href="../mixin/filter.html">filter mixin</a>: <strong>filters, isStencil</strong>.</li>
<li>Attributes defined in the <a href="../mixin/cascade.html">cascade mixin</a>: <strong>groups</strong>.</li>
<li>Attributes defined in the <a href="../mixin/pattern.html">pattern mixin</a>: <strong>repeat, patternMatrix, matrixA, matrixB, matrixC, matrixD, matrixE, matrixF</strong>.</li>
<li>Attributes defined in the <a href="../mixin/asset.html">asset mixin</a>: <strong>source, subscribers</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>The following booleans determine whether a Cell canvas will, clear, compile and/or show itself as part of the Display cycle.</p>
<ul>
<li>Note that as part of the Display cycle, Scrawl-canvas will complete all tasks of the <code>clear</code> part of the process before moving on to the <code>compile</code> stage, which again will complete before the <code>show</code> stage triggers.</li>
</ul>
</div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p><strong>cleared</strong> - Clearing the cell wipes it clean ready for new drawing activity - for cells that contain static imagery (such as a background) that only needs to be drawn once during an animation it makes no sense to construct its display on each iteration of the Display cycle. Can also be set to false if the compile step builds on, rather than replaces, the cell’s current imagery.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">cleared</span>: <span class="hljs-literal">true</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>compiled</strong> - Compiling the cell triggers the ‘stamp cascade’, where (visible) entitys in (visible) groups assigned to the cell are instructed to stamp themselves onto the cell. Again, set this to false if the cell’s imagery does not need to be redrawn on each iteration of the Display cycle.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">compiled</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>shown</strong> - Showing the cell instructs it to stamp itself onto the ‘base’ cell or, for base cells, to stamp itself onto the display <canvas> element in line with that canvas’s wrapper’s ‘fit’ attribute. This can be switched off if the cell is (for instance) being used as an asset source for a Picture entity or Pattern style.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">shown</span>: <span class="hljs-literal">true</span>,</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Cells will compile and show in the order given (ascending) of their <strong>compileOrder</strong> and <strong>showOrder</strong> values. Cells sharing a compileOrder or showOrder value will be compiled and shown determined by the order in which they were declared in the script where they were created.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">compileOrder</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">showOrder</span>: <span class="hljs-number">0</span>,</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>By default, cells have a background color of <code>rgba(0,0,0,0)</code> - transparent black, which gets applied as the end step in the clear part of the display cycle. Setting the <strong>backgroundColor</strong> attribute ensures the Cell will use that color instead. Any CSS color String is a valid argument (but not gradients or patterns, which get applied at a later stage in the Display cycle).</p>
<ul>
<li>Base cells can have this attribute set via their controller Canvas.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">''</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>clearAlpha</strong> - a Number with a value between 0 and 1. When not zero, the cell will not clear itself; rather it will copy its current contents, clear itself, set its globalAlpha to this value, copy back its contents (now faded) and then restore its globalAlpha value</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">clearAlpha</span>: <span class="hljs-number">0</span>,</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>Non-base Cells will stamp themselves onto the ‘base’ Cell as part of the Display cycle’s show stage. We can mediate this action by setting the Cell’s <strong>alpha</strong> and <strong>composite</strong> attributes to valid Rendering2DContext <code>globalAlpha</code> and <code>globalCompositeOperation</code> values.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">alpha</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">composite</span>: <span class="hljs-string">'source-over'</span>,</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p>We can also scale the Cell’s size in the displayed Canvas by setting the <strong>scale</strong> attribute to an appropriate value.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">scale</span>: <span class="hljs-number">1</span>,</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><strong>flipReverse</strong>, <strong>flipUpend</strong> - Boolean flags which determine the orientation of the cell when it stamps itself on the display. </p>
<ul>
<li>a <code>reversed</code> cell is effectively flipped 180° around a vertical line passing through that cell’s rotation-reflection (start) point - a face looking to the right will now look to the left</li>
<li>an <code>upended</code> cell is effectively flipped 180° around a horizontal line passing through that cell’s rotation-reflection (start) point - a normal face will now appear upside-down</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">flipReverse</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">flipUpend</span>: <span class="hljs-literal">false</span>,</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><strong>filter</strong> - the Canvas 2D engine supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter">filter attribute</a> on an experimental basis, thus it is not guaranteed to work in all browsers and devices. The filter attribute takes a String value (default: ‘none’) defining one or more filter functions to be applied to the Cell as it is stamped on its host canvas.</p>
<ul>
<li>Be aware that Cells can also take a <code>filters</code> Array - this represents an array of Scrawl-canvas filters to be applied to the Cell. The two filter systems are completely separate - combine their effects at your own risk!</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">filter</span>: <span class="hljs-string">'none'</span>,</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Scrawl-canvas sets the following attributes automatically; do not change their values!</p>
</div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p><strong>isBase</strong> - Every displayed <canvas> element - wrapped in a Scrawl-canvas Canvas object (factory/canvas.js) - must possess at least one Cell object, known as its ‘base’ Cell. </p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">isBase</span>: <span class="hljs-literal">false</span>,</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p><strong>useAsPattern</strong> - Used to ignore the requirement to resize canvases to take into account device pixel ratios greater than 1 </p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">useAsPattern</span>: <span class="hljs-literal">false</span>,</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p><strong>controller</strong> - A reference link to the displayed <canvas> element’s Scrawl-canvas wrapper (factory/canvas.js) - only ‘base’ cells require this handle.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">controller</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p><strong>includeInCascadeEventActions</strong> - if a non-base Cell has its <code>shown</code> flag set to true, then it is automatically included in CascadeEventActions functionality. In situations where we don’t want the Cell to <em>directly</em> appear in the canvas, but do want to include it in CascadeEventActions, then we can set this flag to <code>true</code></p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">includeInCascadeEventActions</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-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Cells don’t have a need for these default attributes, which will have been added in by mixin/asset.js</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">delete</span> P.<span class="hljs-property">defs</span>.<span class="hljs-property">source</span>;
<span class="hljs-keyword">delete</span> P.<span class="hljs-property">defs</span>.<span class="hljs-property">sourceLoaded</span>;</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<h4 id="packetclone-management">Packet/Clone management</h4>
<p>This functionality is disabled for Cell objects</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">stringifyFunction</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">processPacketOut</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">finalizePacketOut</span> = λ<span class="hljs-literal">null</span>;
P.<span class="hljs-property">saveAsPacket</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">`[<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.type}</span>, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.lib}</span>, {}]`</span>
};
P.<span class="hljs-property">clone</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>
<h4 id="kill-functionality">Kill functionality</h4>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">factoryKill</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></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-27">
<div class="annotation">
<div class="sswrap ">
<a clas