scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,125 lines (723 loc) • 52.7 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>ImageAsset 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="imageasset-factory">ImageAsset factory</h1>
<p>The factory generates wrapper Objects around <img> elements which can either be pulled from the current document (DOM-based assets), or fetched from the server using an URL address.</p>
<p>Image-based assets can also be created from entity artefacts, groups of entity artefacts, and Cell wrappers</p>
<p>ImageAssets are used by <a href="./picture.html">Picture</a> and <a href="./grid.html">Grid</a> entitys, and <a href="./pattern.html">Pattern</a> styles.</p>
<p>TODO: ImageAssets don’t support animated <code>.gif</code> images (or if they do, then its entirely a lucky accident). Tested image formats are <code>.jpg</code> and <code>.png</code>.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li><a href="../../demo/canvas-008.html">Canvas-008</a> - Picture entity position; manipulate copy attributes</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-023.html">Canvas-023</a> - Grid entity - using picture-based assets (image, video, sprite)</li>
<li><a href="../../demo/canvas-025.html">Canvas-025</a> - Responsive images</li>
</ul>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { constructors, canvas, cell, group, artefact } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, isa_obj, λ<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> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>;
<span class="hljs-keyword">import</span> assetMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/asset.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="imageasset-constructor">ImageAsset constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">ImageAsset</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">assetConstructor</span>(items);
};</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="imageasset-prototype">ImageAsset prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">ImageAsset</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">'Image'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'asset'</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>
</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);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="imageasset-attributes">ImageAsset 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/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><strong>intrinsicDimensions</strong> - Javascript object which defines the intrinsic dimensions of each image contributing to an <img> element’s <code>srcset</code> attribute. Can also be set in Javascript code:</p>
<pre><code>filename-<span class="hljs-title class_">String</span>: [width-<span class="hljs-title class_">Number</span>, height-<span class="hljs-title class_">Number</span>]
{
<span class="hljs-string">'river-300.jpg'</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">225</span>],
<span class="hljs-string">'river-600.jpg'</span>: [<span class="hljs-number">600</span>, <span class="hljs-number">450</span>],
<span class="hljs-string">'river-900.jpg'</span>: [<span class="hljs-number">900</span>, <span class="hljs-number">675</span>]
}
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">intrinsicDimensions</span>: <span class="hljs-literal">null</span>,
};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>Assets do not take part in the packet or clone systems; they can, however, be used for importing and actioning packets as they retain those base functions</p>
</div>
<div class="content"><div class='highlight'><pre>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-variable language_">this</span>.<span class="hljs-property">name</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">type</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">lib</span>, {}];
};
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>;</pre></div></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>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">clone</span> = λ<span class="hljs-variable language_">this</span>;</pre></div></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>
<p>No additional kill functionality required</p>
</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> G = P.<span class="hljs-property">getters</span>,
S = P.<span class="hljs-property">setters</span>,
D = P.<span class="hljs-property">deltaSetters</span>;</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>source</strong></p>
</div>
<div class="content"><div class='highlight'><pre>G.<span class="hljs-property">width</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">source</span>.<span class="hljs-property">naturalWidth</span> || <span class="hljs-number">0</span>;
};
G.<span class="hljs-property">height</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">sourceNaturalHeight</span> || <span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span>.<span class="hljs-property">naturalHeight</span> || <span class="hljs-number">0</span>;
};
S.<span class="hljs-property">source</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (item) {</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>For <img> and <picture> elements</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ([<span class="hljs-string">'IMG'</span>, <span class="hljs-string">'PICTURE'</span>].<span class="hljs-title function_">indexOf</span>(item.<span class="hljs-property">tagName</span>.<span class="hljs-title function_">toUpperCase</span>()) >= <span class="hljs-number">0</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> = item.<span class="hljs-property">naturalWidth</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> = item.<span class="hljs-property">naturalHeight</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceLoaded</span> = item.<span class="hljs-property">complete</span>;
}
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceLoaded</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">notifySubscribers</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>currentSrc</strong> - this attribute is not part of the defs object</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">currentSrc</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentSrc</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentFile</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentSrc</span>.<span class="hljs-title function_">split</span>(<span class="hljs-string">"/"</span>).<span class="hljs-title function_">pop</span>();
};</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><code>checkSource</code></p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">checkSource</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">width, height</span>) {
<span class="hljs-keyword">let</span> el = <span class="hljs-variable language_">this</span>.<span class="hljs-property">source</span>,
action = <span class="hljs-string">'element'</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceLoaded</span>) {
<span class="hljs-keyword">let</span> iDims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">intrinsicDimensions</span>[<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentFile</span>];
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentSrc</span> !== el.<span class="hljs-property">currentSrc</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">currentSrc</span>: el.<span class="hljs-property">currentSrc</span>
});
iDims = <span class="hljs-variable language_">this</span>.<span class="hljs-property">intrinsicDimensions</span>[<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentFile</span>];
<span class="hljs-keyword">if</span> (iDims) action = <span class="hljs-string">'intrinsic'</span>;
<span class="hljs-keyword">else</span> action = <span class="hljs-string">'zero'</span>;
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (iDims) action = <span class="hljs-string">'intrinsic'</span>;
<span class="hljs-keyword">switch</span> (action) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'zero'</span> :
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">notifySubscribers</span>();
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'intrinsic'</span> :
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> !== iDims[<span class="hljs-number">0</span>] ||
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> !== iDims[<span class="hljs-number">1</span>]) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> = iDims[<span class="hljs-number">0</span>];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> = iDims[<span class="hljs-number">1</span>];
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">notifySubscribers</span>();
}
<span class="hljs-keyword">break</span>;
<span class="hljs-attr">default</span>:
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> !== el.<span class="hljs-property">naturalWidth</span> ||
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> !== el.<span class="hljs-property">naturalHeight</span> ||
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> !== width ||
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> !== height) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> = el.<span class="hljs-property">naturalWidth</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> = el.<span class="hljs-property">naturalHeight</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">notifySubscribers</span>();
}
};
}
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><code>gettableImageAssetAtributes</code>, <code>settableImageAssetAtributes</code> - exported Arrays.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> gettableImageAssetAtributes = [];
<span class="hljs-keyword">const</span> settableImageAssetAtributes = [];</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<h4 id="importing-images-into-scrawl-canvas">Importing images into Scrawl-canvas</h4>
</div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p><code>importImage</code> - load images from a remote server and create assets from them</p>
<p>Arguments can be a comma-separated list of String urls. For example, for aimage file at server url <code>http://www.example.com/path/to/image/flower.jpg</code>:</p>
<ul>
<li>Will attempt to give the new imageAsset object, and img element, a name/id value of eg ‘flower’ (but not guaranteed)</li>
<li>Will not add the new img element to the DOM</li>
</ul>
<p>Alternatively, the arguments can include an object with the following attributes:</p>
<ul>
<li><strong>name</strong> string.</li>
<li><strong>src</strong> url string.</li>
<li><strong>parent</strong> CSS search string - if set, Scrawl-canvas will attempt to append the new img element to the corresponding DOM element.</li>
<li><strong>isVisible</strong> boolean - if true, and new img element has been added to DOM, make that image visible; default is false.</li>
<li><strong>className</strong> string - list of classes to be added to the new img element.</li>
</ul>
<p>Note: strings and object arguments can be mixed - Scrawl-canvas will interrrogate each argument in turn and take appropriate action to load the assets.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> importImage = <span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) {
<span class="hljs-keyword">let</span> reg = <span class="hljs-regexp">/.*\/(.*?)\./</span>,
results = [];
args.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">let</span> name, url, className, visibility,
parent = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">let</span> flag = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (item.<span class="hljs-property">substring</span>) {
<span class="hljs-keyword">let</span> match = reg.<span class="hljs-title function_">exec</span>(item);
name = (match && match[<span class="hljs-number">1</span>]) ? match[<span class="hljs-number">1</span>] : <span class="hljs-string">''</span>;
url = item;
className = <span class="hljs-string">''</span>;
visibility = <span class="hljs-literal">false</span>;
flag = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">else</span> {
item = (<span class="hljs-title function_">isa_obj</span>(item)) ? item : <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (item && item.<span class="hljs-property">src</span>) {
name = item.<span class="hljs-property">name</span> || <span class="hljs-string">''</span>;
url = item.<span class="hljs-property">src</span>;
className = item.<span class="hljs-property">className</span> || <span class="hljs-string">''</span>;
visibility = item.<span class="hljs-property">visibility</span> || <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (item.<span class="hljs-property">parent</span>) parent = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(item.<span class="hljs-property">parent</span>);
flag = <span class="hljs-literal">true</span>;
}
}
<span class="hljs-keyword">if</span> (flag) {
<span class="hljs-keyword">let</span> image = <span class="hljs-title function_">makeImageAsset</span>({
<span class="hljs-attr">name</span>: name,
<span class="hljs-attr">intrinsicDimensions</span>: {},
});
<span class="hljs-keyword">let</span> img = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'img'</span>);
img.<span class="hljs-property">name</span> = name;
img.<span class="hljs-property">className</span> = className;
img.<span class="hljs-property">crossorigin</span> = <span class="hljs-string">'anonymous'</span>;
img.<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = (visibility) ? <span class="hljs-string">'block'</span> : <span class="hljs-string">'none'</span>;
<span class="hljs-keyword">if</span> (parent) parent.<span class="hljs-title function_">appendChild</span>(img);
img.<span class="hljs-property">onload</span> = <span class="hljs-function">() =></span> {
image.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">source</span>: img,
});
};
img.<span class="hljs-property">src</span> = url;
image.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">source</span>: img,
});
results.<span class="hljs-title function_">push</span>(name);
}
<span class="hljs-keyword">else</span> results.<span class="hljs-title function_">push</span>(<span class="hljs-literal">false</span>);
});
<span class="hljs-keyword">return</span> results;
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p><code>importDomImage</code> - import images defined in the web page HTML code</p>
<ul>
<li>Required argument is a query string used to search the dom for matching elements</li>
<li>Scrawl-canvas does not remove <img> elements from the DOM (this is a breaking change from Scrawl-canvas v7.0). </li>
<li>If <img> elements should not appear, developers need to hide them in some way - for instance by positioning them (or their parent element) absolutely to the top or left of the display; or by giving their parent element zero width/height; or by setting their CSS: <code>display: none;</code>, <code>opacity: 0;</code>, etc.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> importDomImage = <span class="hljs-keyword">function</span> (<span class="hljs-params">query</span>) {
<span class="hljs-keyword">let</span> reg = <span class="hljs-regexp">/.*\/(.*?)\./</span>;
<span class="hljs-keyword">let</span> items = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(query);
items.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">let</span> name;
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'IMG'</span>, <span class="hljs-string">'PICTURE'</span>].<span class="hljs-title function_">indexOf</span>(item.<span class="hljs-property">tagName</span>.<span class="hljs-title function_">toUpperCase</span>()) >= <span class="hljs-number">0</span>) {
<span class="hljs-keyword">if</span> (item.<span class="hljs-property">id</span> || item.<span class="hljs-property">name</span>) name = item.<span class="hljs-property">id</span> || item.<span class="hljs-property">name</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">let</span> match = reg.<span class="hljs-title function_">exec</span>(item.<span class="hljs-property">src</span>);
name = (match && match[<span class="hljs-number">1</span>]) ? match[<span class="hljs-number">1</span>] : <span class="hljs-string">''</span>;
}
<span class="hljs-keyword">let</span> intrinsics = item.<span class="hljs-property">dataset</span>.<span class="hljs-property">dimensions</span> || {};
<span class="hljs-keyword">if</span> (intrinsics.<span class="hljs-property">substring</span>) intrinsics = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(intrinsics);
<span class="hljs-keyword">let</span> image = <span class="hljs-title function_">makeImageAsset</span>({
<span class="hljs-attr">name</span>: name,
<span class="hljs-attr">source</span>: item,
<span class="hljs-attr">intrinsicDimensions</span>: intrinsics,
<span class="hljs-attr">currentSrc</span>: item.<span class="hljs-property">currentSrc</span>,
});
item.<span class="hljs-property">onload</span> = <span class="hljs-function">() =></span> {
image.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">source</span>: item,
});
};
}
});
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>We can get cells, groups and entitys to save their output as imagedata, which we can then use to build an asset which in turn can be used by Picture entitys and pattern styles</p>
</div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p><code>createImageFromCell</code></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> createImageFromCell = <span class="hljs-keyword">function</span> (<span class="hljs-params">item, stashAsAsset = <span class="hljs-literal">false</span></span>) {
<span class="hljs-keyword">let</span> mycell = (item.<span class="hljs-property">substring</span>) ? cell[item] || canvas[item] : item;
<span class="hljs-keyword">if</span> (mycell.<span class="hljs-property">type</span> === <span class="hljs-string">'Canvas'</span>) mycell = mycell.<span class="hljs-property">base</span>;
<span class="hljs-keyword">if</span> (mycell.<span class="hljs-property">type</span> === <span class="hljs-string">'Cell'</span>) {
mycell.<span class="hljs-property">stashOutput</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (stashAsAsset) mycell.<span class="hljs-property">stashOutputAsAsset</span> = <span class="hljs-literal">true</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>createImageFromGroup</code></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> createImageFromGroup = <span class="hljs-keyword">function</span> (<span class="hljs-params">item, stashAsAsset = <span class="hljs-literal">false</span></span>) {
<span class="hljs-keyword">let</span> mygroup;
<span class="hljs-keyword">if</span> (item && !item.<span class="hljs-property">substring</span>) {
<span class="hljs-keyword">if</span> (item.<span class="hljs-property">type</span> === <span class="hljs-string">'Group'</span>) mygroup = item;
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.<span class="hljs-property">type</span> === <span class="hljs-string">'Cell'</span>) mygroup = group[item.<span class="hljs-property">name</span>];
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.<span class="hljs-property">type</span> === <span class="hljs-string">'Canvas'</span>) mygroup = group[item.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>];
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item && item.<span class="hljs-property">substring</span>) mygroup = group[item];
<span class="hljs-keyword">if</span> (mygroup) {
mygroup.<span class="hljs-property">stashOutput</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (stashAsAsset) mygroup.<span class="hljs-property">stashOutputAsAsset</span> = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">