npm - etro - Versions diffs - 0.6.0 - Mend

etro 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/.env +2 -0
package/.github/workflows/nodejs.yml +27 -0
package/CHANGELOG.md +109 -0
package/CODE_OF_CONDUCT.md +77 -0
package/CONTRIBUTING.md +155 -0
package/LICENSE +674 -0
package/README.md +57 -0
package/dist/etro.js +3397 -0
package/docs/effect.js.html +1215 -0
package/docs/event.js.html +145 -0
package/docs/index.html +81 -0
package/docs/index.js.html +92 -0
package/docs/layer.js.html +888 -0
package/docs/module-effect-GaussianBlurComponent.html +345 -0
package/docs/module-effect.Brightness.html +339 -0
package/docs/module-effect.Channels.html +319 -0
package/docs/module-effect.ChromaKey.html +611 -0
package/docs/module-effect.Contrast.html +339 -0
package/docs/module-effect.EllipticalMask.html +200 -0
package/docs/module-effect.GaussianBlur.html +202 -0
package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
package/docs/module-effect.GaussianBlurVertical.html +242 -0
package/docs/module-effect.Pixelate.html +330 -0
package/docs/module-effect.Shader.html +1227 -0
package/docs/module-effect.Stack.html +406 -0
package/docs/module-effect.Transform.Matrix.html +193 -0
package/docs/module-effect.Transform.html +1174 -0
package/docs/module-effect.html +148 -0
package/docs/module-event.html +473 -0
package/docs/module-index.html +186 -0
package/docs/module-layer-Media.html +1116 -0
package/docs/module-layer-MediaMixin.html +164 -0
package/docs/module-layer.Audio.html +1188 -0
package/docs/module-layer.Base.html +629 -0
package/docs/module-layer.Image.html +1421 -0
package/docs/module-layer.Text.html +1731 -0
package/docs/module-layer.Video.html +1938 -0
package/docs/module-layer.Visual.html +1698 -0
package/docs/module-layer.html +137 -0
package/docs/module-movie.html +3118 -0
package/docs/module-util.Color.html +702 -0
package/docs/module-util.Font.html +395 -0
package/docs/module-util.html +845 -0
package/docs/movie.js.html +689 -0
package/docs/scripts/collapse.js +20 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +83 -0
package/docs/styles/jsdoc.css +671 -0
package/docs/styles/prettify.css +79 -0
package/docs/util.js.html +503 -0
package/eslint.conf.js +28 -0
package/eslint.test-conf.js +4 -0
package/examples/application/readme-screenshot.html +86 -0
package/examples/application/video-player.html +131 -0
package/examples/application/webcam.html +28 -0
package/examples/introduction/audio.html +52 -0
package/examples/introduction/effects.html +56 -0
package/examples/introduction/export.html +70 -0
package/examples/introduction/functions.html +35 -0
package/examples/introduction/hello-world1.html +33 -0
package/examples/introduction/hello-world2.html +32 -0
package/examples/introduction/keyframes.html +67 -0
package/examples/introduction/media.html +55 -0
package/examples/introduction/text.html +27 -0
package/jsdoc.conf.json +3 -0
package/karma.conf.js +60 -0
package/package.json +63 -0
package/private-todo.txt +70 -0
package/rename-file.sh +18 -0
package/rename-versions.sh +14 -0
package/rename.sh +22 -0
package/rollup.config.js +31 -0
package/screenshots/2019-08-17_0.png +0 -0
package/scripts/gen-effect-samples.html +99 -0
package/scripts/save-effect-samples.js +43 -0
package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
package/spec/assets/effect/original.png +0 -0
package/spec/assets/effect/pixelate.png +0 -0
package/spec/assets/effect/transform/multiply.png +0 -0
package/spec/assets/effect/transform/rotate.png +0 -0
package/spec/assets/effect/transform/scale-fraction.png +0 -0
package/spec/assets/effect/transform/scale.png +0 -0
package/spec/assets/effect/transform/translate-fraction.png +0 -0
package/spec/assets/effect/transform/translate.png +0 -0
package/spec/assets/layer/audio.wav +0 -0
package/spec/assets/layer/image.jpg +0 -0
package/spec/effect.spec.js +352 -0
package/spec/event.spec.js +25 -0
package/spec/layer.spec.js +128 -0
package/spec/movie.spec.js +154 -0
package/spec/util.spec.js +285 -0
package/src/effect.js +1265 -0
package/src/event.js +78 -0
package/src/index.js +23 -0
package/src/layer.js +875 -0
package/src/movie.js +636 -0
package/src/util.js +487 -0

package/docs/module-layer.Image.html ADDED Viewed

@@ -0,0 +1,1421 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Image - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-effect.Brightness.html">Brightness</a></li><li><a href="module-effect.Channels.html">Channels</a></li><li><a href="module-effect.ChromaKey.html">ChromaKey</a></li><li><a href="module-effect.Contrast.html">Contrast</a></li><li><a href="module-effect.EllipticalMask.html">EllipticalMask</a></li><li><a href="module-effect.GaussianBlur.html">GaussianBlur</a></li><li><a href="module-effect.GaussianBlurHorizontal.html">GaussianBlurHorizontal</a></li><li><a href="module-effect.GaussianBlurVertical.html">GaussianBlurVertical</a></li><li><a href="module-effect.Pixelate.html">Pixelate</a></li><li><a href="module-effect.Shader.html">Shader</a><ul class='methods'><li data-type='method'><a href="module-effect.Shader.html#._initBuffer">_initBuffer</a></li><li data-type='method'><a href="module-effect.Shader.html#._loadTexture">_loadTexture</a></li><li data-type='method'><a href="module-effect.Shader.html#_prepareValue">_prepareValue</a></li></ul></li><li><a href="module-effect.Stack.html">Stack</a><ul class='methods'><li data-type='method'><a href="module-effect.Stack.html#addEffect">addEffect</a></li></ul></li><li><a href="module-effect.Transform.html">Transform</a><ul class='methods'><li data-type='method'><a href="module-effect.Transform.html#.Matrix#cell">Matrix#cell</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#multiply">Matrix#multiply</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#rotate">Matrix#rotate</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#scale">Matrix#scale</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#translate">Matrix#translate</a></li></ul></li><li><a href="module-effect.Transform.Matrix.html">Matrix</a></li><li><a href="module-effect-GaussianBlurComponent.html">GaussianBlurComponent</a></li><li><a href="module-layer.Audio.html">Audio</a></li><li><a href="module-layer.Base.html">Base</a><ul class='methods'><li data-type='method'><a href="module-layer.Base.html#_render">_render</a></li></ul></li><li><a href="module-layer.Image.html">Image</a></li><li><a href="module-layer.Text.html">Text</a></li><li><a href="module-layer.Video.html">Video</a></li><li><a href="module-layer.Visual.html">Visual</a><ul class='methods'><li data-type='method'><a href="module-layer.Visual.html#_render">_render</a></li><li data-type='method'><a href="module-layer.Visual.html#addEffect">addEffect</a></li></ul></li><li><a href="module-layer-Media.html">Media</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.Color.html">Color</a><ul class='methods'><li data-type='method'><a href="module-util.Color.html#toString">toString</a></li></ul></li><li><a href="module-util.Font.html">Font</a><ul class='methods'><li data-type='method'><a href="module-util.Font.html#toString">toString</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-effect.html">effect</a></li><li><a href="module-event.html">event</a><ul class='methods'><li data-type='method'><a href="module-event.html#.publish">publish</a></li><li data-type='method'><a href="module-event.html#.subscribe">subscribe</a></li></ul></li><li><a href="module-index.html">index</a></li><li><a href="module-layer.html">layer</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.html">util</a><ul class='methods'><li data-type='method'><a href="module-util.html#.parseColor">parseColor</a></li><li data-type='method'><a href="module-util.html#.parseFont">parseFont</a></li><li data-type='method'><a href="module-util.html#.watchPublic">watchPublic</a></li><li data-type='method'><a href="module-util.html#~isKeyFrames">isKeyFrames</a></li></ul></li></ul><h3>Mixins</h3><ul><li><a href="module-layer-MediaMixin.html">MediaMixin</a></li></ul>
+</nav>
+<div id="main">
+    <h1 class="page-title">Image</h1>
+<section>
+<header>
+        <h2>
+            <span class="ancestors"><a href="module-layer.html">layer</a>.</span>
+        Image
+        </h2>
+</header>
+<article>
+        <div class="container-overview">
+    <h4 class="name" id="Image"><span class="type-signature"></span>new Image<span class="signature">(startTime, duration, image, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line442">line 442</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Creates a new image layer
+</div>
+    <h5>Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>startTime</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                </td>
+            <td class="description last"></td>
+        </tr>
+        <tr>
+                <td class="name"><code>duration</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                </td>
+            <td class="description last"></td>
+        </tr>
+        <tr>
+                <td class="name"><code>image</code></td>
+            <td class="type">
+<span class="param-type">HTMLImageElement</span>
+            </td>
+                <td class="attributes">
+                </td>
+            <td class="description last"></td>
+        </tr>
+        <tr>
+                <td class="name"><code>options</code></td>
+            <td class="type">
+<span class="param-type">object</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+            <td class="description last">
+                <h6>Properties</h6>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>x</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>0</code>
+                </td>
+            <td class="description last">the offset of the layer relative to the movie</td>
+        </tr>
+        <tr>
+                <td class="name"><code>y</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>0</code>
+                </td>
+            <td class="description last">the offset of the layer relative to the movie</td>
+        </tr>
+        <tr>
+                <td class="name"><code>background</code></td>
+            <td class="type">
+<span class="param-type">string</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>null</code>
+                </td>
+            <td class="description last">the background color of the layer, or <code>null</code>
+ for transparency</td>
+        </tr>
+        <tr>
+                <td class="name"><code>border</code></td>
+            <td class="type">
+<span class="param-type">object</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>null</code>
+                </td>
+            <td class="description last">the layer"s outline, or <code>null</code> for no outline
+                <h6>Properties</h6>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>color</code></td>
+            <td class="type">
+<span class="param-type">string</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last">the outline"s color; required for a border</td>
+        </tr>
+        <tr>
+                <td class="name"><code>thickness</code></td>
+            <td class="type">
+<span class="param-type">string</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>1</code>
+                </td>
+            <td class="description last">the outline"s weight</td>
+        </tr>
+    </tbody>
+</table>
+            </td>
+        </tr>
+        <tr>
+                <td class="name"><code>opacity</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>1</code>
+                </td>
+            <td class="description last">the layer"s opacity; <code>1</cod> for full opacity
+ and <code>0</code> for full transparency</td>
+        </tr>
+        <tr>
+                <td class="name"><code>clipX</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>0</code>
+                </td>
+            <td class="description last">image source x</td>
+        </tr>
+        <tr>
+                <td class="name"><code>clipY</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>0</code>
+                </td>
+            <td class="description last">image source y</td>
+        </tr>
+        <tr>
+                <td class="name"><code>clipWidth</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last">image source width, or <code>undefined</code> to fill the entire layer</td>
+        </tr>
+        <tr>
+                <td class="name"><code>clipHeight</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last">image source height, or <code>undefined</code> to fill the entire layer</td>
+        </tr>
+        <tr>
+                <td class="name"><code>imageX</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>0</code>
+                </td>
+            <td class="description last">offset of the image relative to the layer</td>
+        </tr>
+        <tr>
+                <td class="name"><code>imageY</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>0</code>
+                </td>
+            <td class="description last">offset of the image relative to the layer</td>
+        </tr>
+    </tbody>
+</table>
+            </td>
+        </tr>
+    </tbody>
+</table>
+        </div>
+        <h3 class="subsection-title">Members</h3>
+<h4 class="name" id="clipHeight"><span class="type-signature"></span>clipHeight<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line502">line 502</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Image source height, or <code>undefined</code> to fill the entire layer
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="clipWidth"><span class="type-signature"></span>clipWidth<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line496">line 496</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Image source width, or <code>undefined</code> to fill the entire layer
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="clipX"><span class="type-signature"></span>clipX<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line484">line 484</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Image source x
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="clipY"><span class="type-signature"></span>clipY<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line490">line 490</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Image source y
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="image"><span class="type-signature"></span>image<span class="type-signature"> :HTMLImageElement</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line477">line 477</a>
+    </li></ul></dd>
+</dl>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">HTMLImageElement</span>
+        </li>
+    </ul>
+<h4 class="name" id="imageX"><span class="type-signature"></span>imageX<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line508">line 508</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Offset of the image relative to the layer
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="imageX"><span class="type-signature"></span>imageX<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line514">line 514</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Offset of the image relative to the layer
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+</article>
+</section>
+</div>
+<br class="clear">
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Sun Oct 13 2019 15:38:43 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>