scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Element 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="element-factory">Element factory</h1> <p>The Scrawl-canvas Stack/Element system is an attempt to supplement DOM elements with Scrawl-canvas entity <a href="../mixin/position.html">positioning and dimensioning</a> functionality.</p> <ul> <li><a href="../mixin/entity.html">Entitys</a> exist in a <a href="./cell.html">Cell</a> environment</li> <li>They can position themselves within that Cell either <strong>absolutely</strong> (px coordinates), or <strong>relatively</strong> (% coordinates, with values relative to the Cell’s dimensions), or <strong>by reference</strong> (using other entity’s coordinates to calculate their own coordinates - <code>pivot</code>, <code>mimic</code>, <code>path</code>)</li> <li>They can also base their dimensions on absolute (px) or relative (%) values</li> <li>They can be <strong>animated</strong> directly (<code>set</code>, <code>deltaSet</code>), or through automation (<code>delta</code> object), or through the Scrawl-canvas <code>tween</code> functionality</li> <li>They can be stored and retrieved (‘packet’ functionality), cloned (‘clone’, based on packets) and killed (‘kill’ functions)</li> </ul> <p><strong>A <a href="./stack.html">Stack</a> is a wrapper object around a DOM element</strong>, whose direct children are given Scrawl-canvas Element wrappers:</p> <pre><code><span class="hljs-title class_">Stack</span> ~~> <span class="hljs-title class_">Canvas</span>/<span class="hljs-title class_">Cell</span> <span class="hljs-title class_">Element</span> ~~> <span class="hljs-title class_">Entity</span> (eg <span class="hljs-title class_">Block</span>) </code></pre> <p>During initialization Scrawl-canvas will search the DOM tree and automatically create Stack wrappers for any element which has been given a <code>data-scrawl-stack</code> attribute which resolves to true. Every direct (first level) child inside the stack element will have Element wrappers created for them (except for <canvas> elements). As part of this work, Scrawl-canvas will modify the affected elements’ <code>position</code> CSS style:</p> <ul> <li>Stack elements have <code>relative</code> positioning within the DOM</li> <li>Element elements have <code>absolute</code> positioning within the Stack</li> </ul> <p>The <code>makeElement</code> function is not exported by the scrawl object. To create a new Element within a Stack, use <code>mystack.addNewElement({})</code>.</p> <p>Element wrapper objects use the <strong>base</strong>, <strong>position</strong>, <strong>anchor</strong> and <strong>dom</strong> mixins. Thus Element wrappers are also <strong>artefact</strong> objects. As such, Elements can be used (almost) like any other artefact; in particular, other artefacts - including any canvas-based entity - can use Elements as their pivot or mimic targets.</p> <p>Element wrappers are included in the Scrawl-canvas packet system; they can be saved and cloned. Killing an Element wrapper will remove its DOM element from the document.</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 stack demos include examples of using Elements. In particular:</li> <li><a href="../../demo/dom-002.html">DOM-002</a> - Element mouse, pivot and mimic 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-004.html">DOM-004</a> - Limitless rockets (clone and destroy elements, tweens, tickers)</li> <li><a href="../../demo/dom-006.html">DOM-006</a> - Tween actions on a DOM element; tracking tween and ticker activity (analytics)</li> <li><a href="../../demo/dom-015.html">DOM-015</a> - Use stacked DOM artefact corners as pivot points</li> <li><a href="../../demo/snippets-002.html">Snippets-002</a> - Scrawl-canvas stack element snippets</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> { element, elementnames, artefact, artefactnames, constructors } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>; <span class="hljs-keyword">import</span> { pushUnique, removeItem, isa_dom, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>; <span class="hljs-keyword">import</span> { uiSubscribedElements } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/userInteraction.js'</span>; <span class="hljs-keyword">import</span> { makeCanvas } <span class="hljs-keyword">from</span> <span class="hljs-string">'./canvas.js'</span>; <span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>; <span class="hljs-keyword">import</span> domMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/dom.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="element-constructor">Element constructor</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Element</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) { <span class="hljs-keyword">let</span> el = items.<span class="hljs-property">domElement</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-keyword">if</span> (el) {</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <p>Scrawl-canvas does not retain an Element’s textContent or innerHTML values internally. However these can be set on initialization, and subsequently, by using the attributes <code>text</code> (for textContent, which automatically escapes all HTML-related tags and entities) and <code>content</code> (which should respect HTML tags and entities) </p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (items.<span class="hljs-property">text</span>) el.<span class="hljs-property">textContent</span> = items.<span class="hljs-property">text</span>; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (items.<span class="hljs-property">content</span>) el.<span class="hljs-property">innerHTML</span> = items.<span class="hljs-property">content</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-property">dimensions</span>[<span class="hljs-number">0</span>] = <span class="hljs-variable language_">this</span>.<span class="hljs-property">dimensions</span>[<span class="hljs-number">1</span>] = <span class="hljs-number">100</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">pathCorners</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">css</span> = {}; <span class="hljs-variable language_">this</span>.<span class="hljs-property">here</span> = {}; <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">initializeDomLayout</span>(items); <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_">initializeAccessibility</span>(); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(items); el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>; <span class="hljs-keyword">if</span> (el) el.<span class="hljs-property">id</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">apply</span>(); <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</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="element-prototype">Element prototype</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Element</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">'Element'</span>; P.<span class="hljs-property">lib</span> = <span class="hljs-string">'element'</span>; P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">true</span>; P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">false</span>;</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <h4 id="mixins">Mixins</h4> <ul> <li><a href="../mixin/base.html">base</a></li> <li><a href="../mixin/dom.html">dom</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_">domMix</span>(P);</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <h4 id="element-attributes">Element 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, calculateOrder, stampOrder, 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/dom.html">dom mixin</a>: <strong>domElement, pitch, yaw, offsetZ, css, classes, position, actionResize, trackHere, domAttributes</strong>.</li> </ul> <p>No additional attributes required beyond those supplied by the mixins</p> </div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <h4 id="packet-management">Packet management</h4> <p>No additional packet 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="clone-management">Clone management</h4> <p>No additional clone 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="kill-management">Kill management</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-title function_">removeItem</span>(uiSubscribedElements, <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>.<span class="hljs-title function_">remove</span>(); };</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <h4 id="get-set-deltaset">Get, Set, deltaSet</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> S = P.<span class="hljs-property">setters</span>;</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <p><code>text</code> - <strong>this is the preferred way to update an element’s text content</strong> because the text supplied in the argument is not treated as HTML by the browser. </p> <p>When we update the DOM attribute <code>element.textContent</code>, it deletes any position-reporting corner divs we may have added to the element. Thus we need to repopulate the element with its ‘kids’ after updating the text</p> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">text</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_dom</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>)) { <span class="hljs-keyword">let</span> el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>, kids = el.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'[data-scrawl-corner-div="sc"]'</span>); el.<span class="hljs-property">textContent</span> = item; kids.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">kid</span> =></span> el.<span class="hljs-title function_">appendChild</span>(kid)); <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyContent</span> = <span class="hljs-literal">true</span>; } };</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <p><code>content</code> - <strong>WARNING - this is a dangerous function!</strong> It does not perform any character escaping before inserting the supplied argument into the element. Raw HTML (including, for instance, <script> tags) will be added to the DOM. It’s up to the developer to make sure this content is safe!</p> <p>When we update the DOM attribute <code>element.innerHTML</code>, it deletes any position-reporting corner divs we may have added to the element. Thus we need to repopulate the element with its ‘kids’ after updating the text</p> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">content</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) { <span class="hljs-keyword">let</span> el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>, kids = el.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'[data-scrawl-corner-div="sc"]'</span>); el.<span class="hljs-property">innerHTML</span> = item; kids.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">kid</span> =></span> el.<span class="hljs-title function_">appendChild</span>(kid)); <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyContent</span> = <span class="hljs-literal">true</span>; } };</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <h4 id="prototype-functions">Prototype functions</h4> </div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <p><code>cleanDimensionsAdditionalActions</code> - overwrites mixin/position function.</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">cleanDimensionsAdditionalActions</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyDomDimensions</span> = <span class="hljs-literal">true</span>; };</pre></div></div> </li> <li id="section-17"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-17">§</a> </div> <h4 id="snippet-related-functions">Snippet-related functions</h4> </div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <p><code>addCanvas</code> - adds a new <canvas> element to Scrawl-canvas stack immediately before this element, and sets up the canvas to mimic the element (meaning it will mimic changes to the element’s dimensions, positioning, scale and 3D rotational values)</p> <ul> <li>The function can accept a Javascript object argument containing key:value pairs which will be used to set up the new canvas’s attributes after it has been created.</li> <li>To make the canvas look as if it is in front of the element, set the element’s opacity CSS attribute to 0</li> <li>This function is used when adding a Scrawl-canvas snippet to a stacked element.</li> </ul> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">addCanvas</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) { <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span>) { <span class="hljs-keyword">let</span> canvas = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'canvas'</span>), el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>; canvas.<span class="hljs-property">id</span> = <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>-canvas`</span>; <span class="hljs-keyword">let</span> rect = el.<span class="hljs-title function_">getBoundingClientRect</span>(), style = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">getComputedStyle</span>(el); el.<span class="hljs-property">parentNode</span>.<span class="hljs-title function_">insertBefore</span>(canvas, <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>); <span class="hljs-keyword">let</span> art = <span class="hljs-title function_">makeCanvas</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>-canvas`</span>, <span class="hljs-attr">domElement</span>: canvas, <span class="hljs-attr">position</span>: <span class="hljs-string">'absolute'</span>, <span class="hljs-attr">width</span>: rect.<span class="hljs-property">width</span>, <span class="hljs-attr">height</span>: rect.<span class="hljs-property">height</span>, <span class="hljs-attr">mimic</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>, <span class="hljs-attr">lockTo</span>: <span class="hljs-string">'mimic'</span>, <span class="hljs-attr">useMimicDimensions</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">useMimicScale</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">useMimicStart</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">useMimicHandle</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">useMimicOffset</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">useMimicRotation</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">addOwnDimensionsToMimic</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">addOwnScaleToMimic</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">addOwnStartToMimic</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">addOwnHandleToMimic</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">addOwnOffsetToMimic</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">addOwnRotationToMimic</span>: <span class="hljs-literal">false</span>, }); art.<span class="hljs-title function_">set</span>(items); <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span> = art; <span class="hljs-keyword">return</span> art; } <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">canvas</span>; };</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> <h4 id="factory">Factory</h4> <pre><code><span class="hljs-title class_">Get</span> a handle to a <span class="hljs-title class_">Stack</span> wrapper <span class="hljs-keyword">let</span> stack = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">stack</span>.<span class="hljs-property">mystack</span>; stack.<span class="hljs-title function_">addNewElement</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">'list'</span>, <span class="hljs-attr">tag</span>: <span class="hljs-string">'ul'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'25%'</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">80</span>, <span class="hljs-attr">startX</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">startY</span>: <span class="hljs-number">120</span>, <span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>, <span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>, <span class="hljs-attr">roll</span>: <span class="hljs-number">30</span>, <span class="hljs-attr">classes</span>: <span class="hljs-string">'red-text'</span>, <span class="hljs-attr">content</span>: <span class="hljs-string">`<li>unordered list</li> <li>with several</li> <li>bullet points</li>`</span>, <span class="hljs-attr">css</span>: { <span class="hljs-attr">font</span>: <span class="hljs-string">'12px fantasy'</span>, <span class="hljs-attr">paddingInlineStart</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">paddingTop</span>: <span class="hljs-string">'0.5em'</span>, <span class="hljs-attr">margin</span>: <span class="hljs-string">'0'</span>, <span class="hljs-attr">border</span>: <span class="hljs-string">'1px solid red'</span>, <span class="hljs-attr">cursor</span>: <span class="hljs-string">'grab'</span>, }, }).<span class="hljs-title function_">clone</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">'list-no-border'</span>, <span class="hljs-attr">startY</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">scale</span>: <span class="hljs-number">1.25</span>, <span class="hljs-attr">pitch</span>: <span class="hljs-number">60</span>, <span class="hljs-attr">yaw</span>: <span class="hljs-number">80</span>, <span class="hljs-attr">css</span>: { <span class="hljs-attr">border</span>: <span class="hljs-number">0</span>, }, }); </code></pre> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> makeElement = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) { <span class="hljs-keyword">if</span> (!items) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Element</span>(items); }; constructors.<span class="hljs-property">Element</span> = <span class="hljs-title class_">Element</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="exports">Exports</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> { makeElement, };</pre></div></div> </li> </ul> </div> </body> </html>