scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Asset consumer mixin</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="../core/animationloop.html"> ./source/core/animationloop.js </a> <a class="source" href="../core/document.html"> ./source/core/document.js </a> <a class="source" href="../core/events.html"> ./source/core/events.js </a> <a class="source" href="../core/init.html"> ./source/core/init.js </a> <a class="source" href="../core/library.html"> ./source/core/library.js </a> <a class="source" href="../core/random-seed.html"> ./source/core/random-seed.js </a> <a class="source" href="../core/snippets.html"> ./source/core/snippets.js </a> <a class="source" href="../core/userInteraction.html"> ./source/core/userInteraction.js </a> <a class="source" href="../core/utilities.html"> ./source/core/utilities.js </a> <a class="source" href="../factory/action.html"> ./source/factory/action.js </a> <a class="source" href="../factory/anchor.html"> ./source/factory/anchor.js </a> <a class="source" href="../factory/animation.html"> ./source/factory/animation.js </a> <a class="source" href="../factory/bezier.html"> ./source/factory/bezier.js </a> <a class="source" href="../factory/block.html"> ./source/factory/block.js </a> <a class="source" href="../factory/canvas.html"> ./source/factory/canvas.js </a> <a class="source" href="../factory/cell.html"> ./source/factory/cell.js </a> <a class="source" href="../factory/cog.html"> ./source/factory/cog.js </a> <a class="source" href="../factory/color.html"> ./source/factory/color.js </a> <a class="source" href="../factory/conicGradient.html"> ./source/factory/conicGradient.js </a> <a class="source" href="../factory/coordinate.html"> ./source/factory/coordinate.js </a> <a class="source" href="../factory/crescent.html"> ./source/factory/crescent.js </a> <a class="source" href="../factory/element.html"> ./source/factory/element.js </a> <a class="source" href="../factory/emitter.html"> ./source/factory/emitter.js </a> <a class="source" href="../factory/filter.html"> ./source/factory/filter.js </a> <a class="source" href="../factory/filterEngine-bluenoiseData.html"> ./source/factory/filterEngine-bluenoiseData.js </a> <a class="source" href="../factory/filterEngine.html"> ./source/factory/filterEngine.js </a> <a class="source" href="../factory/fontAttributes.html"> ./source/factory/fontAttributes.js </a> <a class="source" href="../factory/gradient.html"> ./source/factory/gradient.js </a> <a class="source" href="../factory/grid.html"> ./source/factory/grid.js </a> <a class="source" href="../factory/group.html"> ./source/factory/group.js </a> <a class="source" href="../factory/imageAsset.html"> ./source/factory/imageAsset.js </a> <a class="source" href="../factory/line.html"> ./source/factory/line.js </a> <a class="source" href="../factory/lineSpiral.html"> ./source/factory/lineSpiral.js </a> <a class="source" href="../factory/loom.html"> ./source/factory/loom.js </a> <a class="source" href="../factory/mesh.html"> ./source/factory/mesh.js </a> <a class="source" href="../factory/net.html"> ./source/factory/net.js </a> <a class="source" href="../factory/noiseAsset.html"> ./source/factory/noiseAsset.js </a> <a class="source" href="../factory/oval.html"> ./source/factory/oval.js </a> <a class="source" href="../factory/palette.html"> ./source/factory/palette.js </a> <a class="source" href="../factory/particle.html"> ./source/factory/particle.js </a> <a class="source" href="../factory/particleForce.html"> ./source/factory/particleForce.js </a> <a class="source" href="../factory/particleHistory.html"> ./source/factory/particleHistory.js </a> <a class="source" href="../factory/particleSpring.html"> ./source/factory/particleSpring.js </a> <a class="source" href="../factory/particleWorld.html"> ./source/factory/particleWorld.js </a> <a class="source" href="../factory/pattern.html"> ./source/factory/pattern.js </a> <a class="source" href="../factory/phrase.html"> ./source/factory/phrase.js </a> <a class="source" href="../factory/picture.html"> ./source/factory/picture.js </a> <a class="source" href="../factory/polygon.html"> ./source/factory/polygon.js </a> <a class="source" href="../factory/polyline.html"> ./source/factory/polyline.js </a> <a class="source" href="../factory/quadratic.html"> ./source/factory/quadratic.js </a> <a class="source" href="../factory/quaternion.html"> ./source/factory/quaternion.js </a> <a class="source" href="../factory/radialGradient.html"> ./source/factory/radialGradient.js </a> <a class="source" href="../factory/rawAsset.html"> ./source/factory/rawAsset.js </a> <a class="source" href="../factory/rdAsset.html"> ./source/factory/rdAsset.js </a> <a class="source" href="../factory/rectangle.html"> ./source/factory/rectangle.js </a> <a class="source" href="../factory/renderAnimation.html"> ./source/factory/renderAnimation.js </a> <a class="source" href="../factory/shape.html"> ./source/factory/shape.js </a> <a class="source" href="../factory/spiral.html"> ./source/factory/spiral.js </a> <a class="source" href="../factory/spriteAsset.html"> ./source/factory/spriteAsset.js </a> <a class="source" href="../factory/stack.html"> ./source/factory/stack.js </a> <a class="source" href="../factory/star.html"> ./source/factory/star.js </a> <a class="source" href="../factory/state.html"> ./source/factory/state.js </a> <a class="source" href="../factory/tetragon.html"> ./source/factory/tetragon.js </a> <a class="source" href="../factory/ticker.html"> ./source/factory/ticker.js </a> <a class="source" href="../factory/tracer.html"> ./source/factory/tracer.js </a> <a class="source" href="../factory/tween.html"> ./source/factory/tween.js </a> <a class="source" href="../factory/unstackedElement.html"> ./source/factory/unstackedElement.js </a> <a class="source" href="../factory/vector.html"> ./source/factory/vector.js </a> <a class="source" href="../factory/videoAsset.html"> ./source/factory/videoAsset.js </a> <a class="source" href="../factory/wheel.html"> ./source/factory/wheel.js </a> <a class="source" href="anchor.html"> ./source/mixin/anchor.js </a> <a class="source" href="asset.html"> ./source/mixin/asset.js </a> <a class="source" href="assetAdvancedFunctionality.html"> ./source/mixin/assetAdvancedFunctionality.js </a> <a class="source" href="assetConsumer.html"> ./source/mixin/assetConsumer.js </a> <a class="source" href="base.html"> ./source/mixin/base.js </a> <a class="source" href="cascade.html"> ./source/mixin/cascade.js </a> <a class="source" href="delta.html"> ./source/mixin/delta.js </a> <a class="source" href="displayShape.html"> ./source/mixin/displayShape.js </a> <a class="source" href="dom.html"> ./source/mixin/dom.js </a> <a class="source" href="entity.html"> ./source/mixin/entity.js </a> <a class="source" href="filter.html"> ./source/mixin/filter.js </a> <a class="source" href="mimic.html"> ./source/mixin/mimic.js </a> <a class="source" href="path.html"> ./source/mixin/path.js </a> <a class="source" href="pattern.html"> ./source/mixin/pattern.js </a> <a class="source" href="pivot.html"> ./source/mixin/pivot.js </a> <a class="source" href="position.html"> ./source/mixin/position.js </a> <a class="source" href="shapeBasic.html"> ./source/mixin/shapeBasic.js </a> <a class="source" href="shapeCurve.html"> ./source/mixin/shapeCurve.js </a> <a class="source" href="shapePathCalculation.html"> ./source/mixin/shapePathCalculation.js </a> <a class="source" href="styles.html"> ./source/mixin/styles.js </a> <a class="source" href="tween.html"> ./source/mixin/tween.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="asset-consumer-mixin">Asset consumer mixin</h1> <p>This mixin needs to be applied to any factory which wishes to use an asset. Asset objects are wrappers for managing <img>, <video> and (offscreen) <canvas> elements.</p> <p>Currently only <a href="../factory/picture.html">Picture</a> entity and <a href="../factory/pattern.html">Pattern</a> style factories use assets. This mixin defines attributes and functionality common to both.</p> </div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <h4 id="imports">Imports</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { mergeOver, xt, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>; <span class="hljs-keyword">import</span> { asset } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>; <span class="hljs-keyword">import</span> { importImage } <span class="hljs-keyword">from</span> <span class="hljs-string">'../factory/imageAsset.js'</span>; <span class="hljs-keyword">import</span> { importVideo } <span class="hljs-keyword">from</span> <span class="hljs-string">'../factory/videoAsset.js'</span>; <span class="hljs-keyword">import</span> { importSprite } <span class="hljs-keyword">from</span> <span class="hljs-string">'../factory/spriteAsset.js'</span>;</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <h4 id="export-function">Export function</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">P = Ωempty</span>) {</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <h4 id="shared-attributes">Shared attributes</h4> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <p><strong>asset</strong> - eventually becomes the current asset wrapper object (as generated by the <code>imageAsset</code>, <code>spriteAsset</code> and <code>videoAsset</code> factories).</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">asset</span>: <span class="hljs-literal">null</span>,</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <p><strong>removeAssetOnKill</strong> - A flag that determines whether, when the entity object is killed (has its <code>kill</code> function invoked), the kill functionality should cascade to the asset object.</p> <ul> <li><code>false</code> (default) - do not cascade the kill action</li> <li>any value that is not false - remove the asset wrapper object</li> <li>value is a truthy String - for example, <code>'dom'</code> - also remove the underlying asset element from the DOM</li> </ul> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">removeAssetOnKill</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> <h5 id="spritesheet-specific-attributes">Spritesheet-specific attributes</h5> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">spriteIsRunning</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">spriteLastFrameChange</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">spriteCurrentFrame</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">spriteTrack</span>: <span class="hljs-string">'default'</span>, <span class="hljs-attr">spriteForward</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">spriteFrameDuration</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">spriteWillLoop</span>: <span class="hljs-literal">true</span>, }; P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <h4 id="packet-management">Packet management</h4> <p>No additional packet functionality defined here</p> </div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <h4 id="clone-management">Clone management</h4> <p>No additional clone functionality defined here</p> </div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <h4 id="kill-management">Kill management</h4> <p>No additional kill functionality defined here</p> </div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <h4 id="get-set-deltaset">Get, Set, deltaSet</h4> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> G = P.<span class="hljs-property">getters</span>, S = P.<span class="hljs-property">setters</span>; G.<span class="hljs-property">sourceDimensions</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> [<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</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>asset</strong> - Setting the Asset object. Updating the asset will set the dirtyAsset flag.</p> </div> <div class="content"><div class='highlight'><pre> S.<span class="hljs-property">asset</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">let</span> oldAsset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>, newAsset = (item && item.<span class="hljs-property">name</span>) ? item.<span class="hljs-property">name</span> : item; <span class="hljs-keyword">if</span> (oldAsset && !oldAsset.<span class="hljs-property">substring</span>) oldAsset.<span class="hljs-title function_">unsubscribe</span>(<span class="hljs-variable language_">this</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span> = newAsset; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyAsset</span> = <span class="hljs-literal">true</span>; };</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <h5 id="setting-the-source">Setting the source</h5> <p>Argument needs to be a path/file String that will be used to import the new Image, Video or Sprite file and construct an appropriate Asset object wrapper for it.</p> </div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <p><strong>imageSource</strong></p> </div> <div class="content"><div class='highlight'><pre> S.<span class="hljs-property">imageSource</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">let</span> results = <span class="hljs-title function_">importImage</span>(item); <span class="hljs-keyword">if</span> (results) { <span class="hljs-keyword">let</span> myAsset = asset[results[<span class="hljs-number">0</span>]]; <span class="hljs-keyword">if</span> (myAsset) { <span class="hljs-keyword">let</span> oldAsset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (oldAsset && oldAsset.<span class="hljs-property">unsubscribe</span>) oldAsset.<span class="hljs-title function_">unsubscribe</span>(<span class="hljs-variable language_">this</span>); myAsset.<span class="hljs-title function_">subscribe</span>(<span class="hljs-variable language_">this</span>); } } };</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <p><strong>videoSource</strong></p> </div> <div class="content"><div class='highlight'><pre> S.<span class="hljs-property">videoSource</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">let</span> result = <span class="hljs-title function_">importVideo</span>(item); <span class="hljs-keyword">if</span> (result) { <span class="hljs-keyword">let</span> myAsset = asset[result]; <span class="hljs-keyword">if</span> (myAsset) { <span class="hljs-keyword">let</span> oldAsset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (oldAsset && oldAsset.<span class="hljs-property">unsubscribe</span>) oldAsset.<span class="hljs-title function_">unsubscribe</span>(<span class="hljs-variable language_">this</span>); myAsset.<span class="hljs-title function_">subscribe</span>(<span class="hljs-variable language_">this</span>); } } };</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <p><strong>spriteSource</strong></p> </div> <div class="content"><div class='highlight'><pre> S.<span class="hljs-property">spriteSource</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">let</span> result = <span class="hljs-title function_">importSprite</span>(item); <span class="hljs-keyword">if</span> (result) { <span class="hljs-keyword">let</span> myAsset = asset[result]; <span class="hljs-keyword">if</span> (myAsset) { <span class="hljs-keyword">let</span> oldAsset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (oldAsset && oldAsset.<span class="hljs-property">unsubscribe</span>) oldAsset.<span class="hljs-title function_">unsubscribe</span>(<span class="hljs-variable language_">this</span>); myAsset.<span class="hljs-title function_">subscribe</span>(<span class="hljs-variable language_">this</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="prototype-functions">Prototype functions</h4> </div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <p><code>cleanAsset</code> - Cleaning the Asset object</p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">cleanAsset</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">let</span> ast = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (ast && ast.<span class="hljs-property">substring</span>) { <span class="hljs-keyword">let</span> myAsset = asset[ast]; <span class="hljs-keyword">if</span> (myAsset) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyAsset</span> = <span class="hljs-literal">false</span>; myAsset.<span class="hljs-title function_">subscribe</span>(<span class="hljs-variable language_">this</span>); } } };</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> <h5 id="video-actions">Video actions</h5> <p>These functions largely map to a selection of the asset’s source <video> element’s <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement">functions</a>. They allow the video to be controlled/coded by invoking the appropriate function on the Picture entity or Pattern style instance, rather than having to seek out the asset wrapper object to invoke the functions on them.</p> </div> </li> <li id="section-20"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-20">§</a> </div> <p><code>videoAction</code> - internal helper function</p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoAction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">action, ...args</span>) { <span class="hljs-keyword">let</span> myAsset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (myAsset && myAsset.<span class="hljs-property">type</span> === <span class="hljs-string">'Video'</span>) <span class="hljs-keyword">return</span> myAsset[action](...args); };</pre></div></div> </li> <li id="section-21"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-21">§</a> </div> <p><code>videoPromiseAction</code> - internal helper function</p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoPromiseAction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">action, ...args</span>) { <span class="hljs-keyword">let</span> myAsset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (myAsset && myAsset.<span class="hljs-property">type</span> === <span class="hljs-string">'Video'</span>) <span class="hljs-keyword">return</span> myAsset[action](...args); <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(<span class="hljs-string">'Asset not a video'</span>); };</pre></div></div> </li> <li id="section-22"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-22">§</a> </div> <p><code>videoAddTextTrack</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoAddTextTrack</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">kind, label, language</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoAction</span>(<span class="hljs-string">'addTextTrack'</span>, kind, label, language); };</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-23">§</a> </div> <p><code>videoCaptureStream</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoCaptureStream</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoAction</span>(<span class="hljs-string">'captureStream'</span>); };</pre></div></div> </li> <li id="section-24"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-24">§</a> </div> <p><code>videoCanPlayType</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoCanPlayType</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">mytype</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoAction</span>(<span class="hljs-string">'canPlayType'</span>, mytype); };</pre></div></div> </li> <li id="section-25"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-25">§</a> </div> <p><code>videoFastSeek</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoFastSeek</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">time</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoAction</span>(<span class="hljs-string">'fastSeek'</span>, time); };</pre></div></div> </li> <li id="section-26"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-26">§</a> </div> <p><code>videoLoad</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoLoad</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoAction</span>(<span class="hljs-string">'load'</span>); };</pre></div></div> </li> <li id="section-27"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-27">§</a> </div> <p><code>videoPause</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoPause</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoAction</span>(<span class="hljs-string">'pause'</span>); };</pre></div></div> </li> <li id="section-28"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-28">§</a> </div> <p><code>videoPlay</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoPlay</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoPromiseAction</span>(<span class="hljs-string">'play'</span>); };</pre></div></div> </li> <li id="section-29"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-29">§</a> </div> <p><code>videoSetMediaKeys</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoSetMediaKeys</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">keys</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoPromiseAction</span>(<span class="hljs-string">'setMediaKeys'</span>, keys); };</pre></div></div> </li> <li id="section-30"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-30">§</a> </div> <p><code>videoSetSinkId</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">videoSetSinkId</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">videoPromiseAction</span>(<span class="hljs-string">'setSinkId'</span>); };</pre></div></div> </li> <li id="section-31"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-31">§</a> </div> <h5 id="sprite-actions">Sprite actions</h5> <p>Add functions to the Picture entity or Pattern style factories which can be used to control image sprite animation playback.</p> </div> </li> <li id="section-32"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-32">§</a> </div> <p><code>checkSpriteFrame</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">checkSpriteFrame</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">let</span> asset = <span class="hljs-variable language_">this</span>.<span class="hljs-property">asset</span>; <span class="hljs-keyword">if</span> (asset && asset.<span class="hljs-property">type</span> === <span class="hljs-string">'Sprite'</span>) { <span class="hljs-keyword">let</span> copyArray = <span class="hljs-variable language_">this</span>.<span class="hljs-property">copyArray</span>; <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteIsRunning</span>) { <span class="hljs-keyword">let</span> last = <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteLastFrameChange</span>, choke = <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteFrameDuration</span>, now = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>(); <span class="hljs-keyword">if</span> (now > last + choke) { <span class="hljs-keyword">let</span> manifest = asset.<span class="hljs-property">manifest</span>; <span class="hljs-keyword">if</span> (manifest) { <span class="hljs-keyword">let</span> track = manifest[<span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteTrack</span>], len = track.<span class="hljs-property">length</span>, frame = <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteCurrentFrame</span>, loop = <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteWillLoop</span>; frame = (<span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteForward</span>) ? frame + <span class="hljs-number">1</span> : frame - <span class="hljs-number">1</span>; <span class="hljs-keyword">if</span> (frame < <span class="hljs-number">0</span>) frame = (loop) ? len - <span class="hljs-number">1</span> : <span class="hljs-number">0</span>; <span class="hljs-keyword">if</span> (frame >= len) frame = (loop) ? <span class="hljs-number">0</span> : len - <span class="hljs-number">1</span>; <span class="hljs-keyword">let</span> [source, x, y, w, h] = track[frame]; copyArray.<span class="hljs-property">length</span> = <span class="hljs-number">0</span>; copyArray.<span class="hljs-title function_">push</span>(x, y, w, h); <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyCopyStart</span> = <span class="hljs-literal">false</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyCopyDimensions</span> = <span class="hljs-literal">false</span>; <span class="hljs-keyword">let</span> sourceName = <span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span>.<span class="hljs-property">id</span> || <span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span>.<span class="hljs-property">name</span>; <span class="hljs-keyword">if</span> (source !== sourceName) { <span class="hljs-keyword">let</span> newSource = asset.<span class="hljs-property">sourceHold</span>[source]; <span class="hljs-keyword">if</span> (newSource) <span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span> = newSource; } <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteCurrentFrame</span> = frame; <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteLastFrameChange</span> = now; } } } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">let</span> [source, x, y, w, h] = asset.<span class="hljs-property">manifest</span>[<span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteTrack</span>][<span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteCurrentFrame</span>], [cx, cy, cw, ch] = copyArray; <span class="hljs-keyword">if</span> (cx !== x || cy !== y || cw !== w || ch !== h) { copyArray.<span class="hljs-property">length</span> = <span class="hljs-number">0</span>; copyArray.<span class="hljs-title function_">push</span>(x, y, w, h); <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyCopyStart</span> = <span class="hljs-literal">false</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyCopyDimensions</span> = <span class="hljs-literal">false</span>; } } } };</pre></div></div> </li> <li id="section-33"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-33">§</a> </div> <p><code>playSprite</code></p> </div> <div class="content"><div class='highlight'><pre> P.<span class="hljs-property">playSprite</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">speed, loop, track, forward, frame</span>) { <span class="hljs-keyword">if</span> (<span class="hljs-title function_">xt</span>(speed)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteFrameDuration</span> = speed; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">xt</span>(loop)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteWillLoop</span> = loop; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">xt</span>(track)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteTrack</span> = track; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">xt</span>(forward)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteForward</span> = forward; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">xt</span>(frame)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteCurrentFrame</span> = frame; <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteLastFrameChange</span> = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>(); <span class="hljs-variable language_">this</span>.<span class="hljs-property">spriteIsRunning</span> = <span class="hljs-literal">true</span>; }</pre></div></div> </li> <li id="section-34"> <div class="annotation">