etro 0.13.0 → 0.14.0

package/src/util.ts

@@ -122,6 +122,25 @@ export class KeyFrame<T> {
     return this
   }
 
+  toJSON (): object {
+    return {
+      type: 'KeyFrame',
+      value: this.value.map(point => {
+        const out: any[] = [point[0], serializeProperty(point[1])]
+        if (point.length === 3) {
+          const interp = point[2] as Interpolate
+          if (interp === linearInterp) {
+            out.push('linear')
+          } else if (interp === cosineInterp) {
+            out.push('cosine')
+          }
+        }
+        return out
+      }),
+      interpolationKeys: this.interpolationKeys
+    }
+  }
+
   evaluate (time: number): T {
     if (this.value.length === 0) {
       throw new Error('Empty keyframe')
@@ -322,6 +341,10 @@ export class Color {
   toString (): string {
     return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
   }
+
+  toJSON (): object {
+    return { type: 'Color', r: this.r, g: this.g, b: this.b, a: this.a }
+  }
 }
 
 const parseColorCanvas = document.createElement('canvas')
@@ -398,6 +421,20 @@ export class Font {
 
     return s
   }
+
+  toJSON (): object {
+    return {
+      type: 'Font',
+      size: this.size,
+      sizeUnit: this.sizeUnit,
+      family: this.family,
+      style: this.style,
+      variant: this.variant,
+      weight: this.weight,
+      stretch: this.stretch,
+      lineHeight: this.lineHeight
+    }
+  }
 }
 
 const parseFontEl = document.createElement('div')
@@ -454,3 +491,70 @@ export function mapPixels (
     ctx.putImageData(frame, x, y)
   }
 }
+
+export function serializeProperty (val: any): any {
+  if (val && typeof val === 'object') {
+    if (typeof val.toJSON === 'function') {
+      return val.toJSON()
+    }
+    if (Array.isArray(val)) {
+      return val.map(serializeProperty)
+    }
+    if (val instanceof HTMLImageElement || val instanceof HTMLVideoElement || val instanceof HTMLAudioElement) {
+      // It's a DOM element serving as a media source
+      return val.getAttribute('src') || val.src
+    }
+    // plain object
+    if (val.constructor === Object) {
+      const out: any = {}
+      for (const k in val) {
+        if (Object.prototype.hasOwnProperty.call(val, k)) {
+          out[k] = serializeProperty(val[k])
+        }
+      }
+      return out
+    }
+  }
+  return val
+}
+
+export function deserializeProperty (val: any): any {
+  if (val && typeof val === 'object') {
+    if (Array.isArray(val)) {
+      return val.map(deserializeProperty)
+    }
+    if (val.type === 'Color') {
+      return new Color(val.r, val.g, val.b, val.a)
+    }
+    if (val.type === 'Font') {
+      return new Font(val.size, val.sizeUnit, val.family, val.style, val.variant, val.weight, val.stretch, val.lineHeight)
+    }
+    if (val.type === 'KeyFrame') {
+      const kf = new KeyFrame()
+      kf.value = val.value.map((point: any[]) => {
+        const out: any[] = [point[0], deserializeProperty(point[1])]
+        if (point.length === 3) {
+          if (point[2] === 'linear') {
+            out.push(linearInterp)
+          } else if (point[2] === 'cosine') {
+            out.push(cosineInterp)
+          }
+        }
+        return out
+      })
+      kf.interpolationKeys = val.interpolationKeys
+      return kf
+    }
+    // plain object
+    if (val.constructor === Object) {
+      const out: any = {}
+      for (const k in val) {
+        if (Object.prototype.hasOwnProperty.call(val, k)) {
+          out[k] = deserializeProperty(val[k])
+        }
+      }
+      return out
+    }
+  }
+  return val
+}

package/tsconfig.json

@@ -1,7 +1,8 @@
 {
     "compilerOptions": {
-        "lib": ["es6", "DOM"],
-        "target": "es5",
+        "lib": ["es2016", "DOM"],
+        "target": "es6",
+        "moduleResolution": "node",
         "declaration": true
     },
     "include": [

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ${1}

package/.husky/prepare-commit-msg

@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-
-# gitmoji as a commit hook
-if npx -v >&/dev/null
-then
-  exec < /dev/tty
-  npx -c "gitmoji --hook $1 $2"
-else
-  exec < /dev/tty
-  gitmoji --hook $1 $2
-fi

package/commitlint.config.ts

@@ -1,39 +0,0 @@
-import type {UserConfig} from '@commitlint/types';
-import { RuleConfigSeverity } from "@commitlint/types";
-
-const Configuration: UserConfig = {
-  /*
-   * Resolve and load @commitlint/format from node_modules.
-   * Referenced package must be installed
-   */
-  formatter: '@commitlint/format',
-  /*
-   * Any rules defined here will override the default ones
-   */
-  rules: {
-    'header-max-length': [RuleConfigSeverity.Error, 'always', 72],
-    'body-max-line-length': [RuleConfigSeverity.Error, 'always', 72],
-  },
-  /*
-   * Functions that return true if commitlint should ignore the given message.
-   */
-  ignores: [(commit) => commit === ''],
-  /*
-   * Whether commitlint uses the default ignore rules.
-   */
-  defaultIgnores: true,
-  /*
-   * Custom URL to show upon failure
-   */
-  helpUrl:
-    'https://github.com/conventional-changelog/commitlint/#what-is-commitlint',
-  /*
-   * Custom prompt configs
-   */
-  prompt: {
-    messages: {},
-    questions: {},
-  },
-};
-
-module.exports = Configuration;

package/coverage/Chrome Headless 79.0.3945.0 (Mac OS 10.16.0)/html/index.html

@@ -1,176 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for All files</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="prettify.css" />
-    <link rel="stylesheet" href="base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1>All files</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">79.84% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>1363/1707</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">51.89% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>343/661</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">85.01% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>312/367</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">79.51% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>1250/1572</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line medium'></div>
-    <div class="pad1">
-<table class="coverage-summary">
-<thead>
-<tr>
-   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
-   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
-   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
-   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
-   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
-   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
-   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
-   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
-</tr>
-</thead>
-<tbody><tr>
-	<td class="file high" data-value="spec/smoke/effect"><a href="spec/smoke/effect/index.html">spec/smoke/effect</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="163" class="abs high">163/163</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="63" class="abs high">63/63</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="148" class="abs high">148/148</td>
-	</tr>
-
-<tr>
-	<td class="file medium" data-value="src"><a href="src/index.html">src</a></td>
-	<td data-value="56.18" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 56%"></div><div class="cover-empty" style="width: 44%"></div></div>
-	</td>
-	<td data-value="56.18" class="pct medium">56.18%</td>
-	<td data-value="299" class="abs medium">168/299</td>
-	<td data-value="34.43" class="pct low">34.43%</td>
-	<td data-value="151" class="abs low">52/151</td>
-	<td data-value="65.9" class="pct medium">65.9%</td>
-	<td data-value="44" class="abs medium">29/44</td>
-	<td data-value="56.93" class="pct medium">56.93%</td>
-	<td data-value="274" class="abs medium">156/274</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="src/effect"><a href="src/effect/index.html">src/effect</a></td>
-	<td data-value="86.87" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 86%"></div><div class="cover-empty" style="width: 14%"></div></div>
-	</td>
-	<td data-value="86.87" class="pct high">86.87%</td>
-	<td data-value="556" class="abs high">483/556</td>
-	<td data-value="55.55" class="pct medium">55.55%</td>
-	<td data-value="189" class="abs medium">105/189</td>
-	<td data-value="84" class="pct high">84%</td>
-	<td data-value="100" class="abs high">84/100</td>
-	<td data-value="86.13" class="pct high">86.13%</td>
-	<td data-value="505" class="abs high">435/505</td>
-	</tr>
-
-<tr>
-	<td class="file medium" data-value="src/layer"><a href="src/layer/index.html">src/layer</a></td>
-	<td data-value="72.15" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 72%"></div><div class="cover-empty" style="width: 28%"></div></div>
-	</td>
-	<td data-value="72.15" class="pct medium">72.15%</td>
-	<td data-value="352" class="abs medium">254/352</td>
-	<td data-value="48.05" class="pct low">48.05%</td>
-	<td data-value="154" class="abs low">74/154</td>
-	<td data-value="80.64" class="pct high">80.64%</td>
-	<td data-value="93" class="abs high">75/93</td>
-	<td data-value="71.72" class="pct medium">71.72%</td>
-	<td data-value="336" class="abs medium">241/336</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="src/movie"><a href="src/movie/index.html">src/movie</a></td>
-	<td data-value="87.53" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 87%"></div><div class="cover-empty" style="width: 13%"></div></div>
-	</td>
-	<td data-value="87.53" class="pct high">87.53%</td>
-	<td data-value="337" class="abs high">295/337</td>
-	<td data-value="67.06" class="pct medium">67.06%</td>
-	<td data-value="167" class="abs medium">112/167</td>
-	<td data-value="91.04" class="pct high">91.04%</td>
-	<td data-value="67" class="abs high">61/67</td>
-	<td data-value="87.37" class="pct high">87.37%</td>
-	<td data-value="309" class="abs high">270/309</td>
-	</tr>
-
-</tbody>
-</table>
-</div>
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-01-16T00:23:52.140Z
-            </div>
-        <script src="prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="sorter.js"></script>
-        <script src="block-navigation.js"></script>
-    </body>
-</html>
-    

package/coverage/Chrome Headless 79.0.3945.0 (Mac OS 10.16.0)/html/src/custom-array.ts.html

@@ -1,214 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Code coverage report for src/custom-array.ts</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../prettify.css" />
-    <link rel="stylesheet" href="../base.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type='text/css'>
-        .coverage-summary .sorter {
-            background-image: url(../sort-arrow-sprite.png);
-        }
-    </style>
-</head>
-    
-<body>
-<div class='wrapper'>
-    <div class='pad1'>
-        <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> custom-array.ts</h1>
-        <div class='clearfix'>
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Statements</span>
-                <span class='fraction'>24/24</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
-                <span class="quiet">Branches</span>
-                <span class='fraction'>5/6</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Functions</span>
-                <span class='fraction'>5/5</span>
-            </div>
-        
-            
-            <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
-                <span class="quiet">Lines</span>
-                <span class='fraction'>19/19</span>
-            </div>
-        
-            
-        </div>
-        <p class="quiet">
-            Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
-        </p>
-        <template id="filterTemplate">
-            <div class="quiet">
-                Filter:
-                <input oninput="onInput()" type="search" id="fileSearch">
-            </div>
-        </template>
-    </div>
-    <div class='status-line high'></div>
-    <pre><table class="coverage">
-<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
-<a name='L2'></a><a href='#L2'>2</a>
-<a name='L3'></a><a href='#L3'>3</a>
-<a name='L4'></a><a href='#L4'>4</a>
-<a name='L5'></a><a href='#L5'>5</a>
-<a name='L6'></a><a href='#L6'>6</a>
-<a name='L7'></a><a href='#L7'>7</a>
-<a name='L8'></a><a href='#L8'>8</a>
-<a name='L9'></a><a href='#L9'>9</a>
-<a name='L10'></a><a href='#L10'>10</a>
-<a name='L11'></a><a href='#L11'>11</a>
-<a name='L12'></a><a href='#L12'>12</a>
-<a name='L13'></a><a href='#L13'>13</a>
-<a name='L14'></a><a href='#L14'>14</a>
-<a name='L15'></a><a href='#L15'>15</a>
-<a name='L16'></a><a href='#L16'>16</a>
-<a name='L17'></a><a href='#L17'>17</a>
-<a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a>
-<a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
-<a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a>
-<a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a>
-<a name='L26'></a><a href='#L26'>26</a>
-<a name='L27'></a><a href='#L27'>27</a>
-<a name='L28'></a><a href='#L28'>28</a>
-<a name='L29'></a><a href='#L29'>29</a>
-<a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a>
-<a name='L32'></a><a href='#L32'>32</a>
-<a name='L33'></a><a href='#L33'>33</a>
-<a name='L34'></a><a href='#L34'>34</a>
-<a name='L35'></a><a href='#L35'>35</a>
-<a name='L36'></a><a href='#L36'>36</a>
-<a name='L37'></a><a href='#L37'>37</a>
-<a name='L38'></a><a href='#L38'>38</a>
-<a name='L39'></a><a href='#L39'>39</a>
-<a name='L40'></a><a href='#L40'>40</a>
-<a name='L41'></a><a href='#L41'>41</a>
-<a name='L42'></a><a href='#L42'>42</a>
-<a name='L43'></a><a href='#L43'>43</a>
-<a name='L44'></a><a href='#L44'>44</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">176x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">352x</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">176x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">80x</span>
-<span class="cline-any cline-yes">80x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">80x</span>
-<span class="cline-any cline-yes">38x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">38x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">80x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export abstract class CustomArrayListener&lt;T&gt; {
-  abstract onAdd(item: T): void
-  abstract onRemove(item: T): void
-}
-&nbsp;
-/**
- * An array that notifies a listener when items are added or removed.
- */
-export class CustomArray&lt;T&gt; extends Array&lt;T&gt; {
-  constructor (target: T[], listener: CustomArrayListener&lt;T&gt;) {
-    super()<span class="branch-1 cbranch-no" title="branch not covered" ></span>
-&nbsp;
-    for (const item of target) {
-      listener.onAdd(item)
-    }
-&nbsp;
-    // Create proxy
-    return new Proxy(target, {
-      deleteProperty (target, property): boolean {
-        const value = target[property]
-        delete target[property]
-        listener.onRemove(value)
-        return true
-      },
-&nbsp;
-      set (target, property, value): boolean {
-        const oldValue = target[property]
-        target[property] = value
-&nbsp;
-        // Check if property is a number (index)
-        if (!isNaN(Number(property))) {
-          if (oldValue !== undefined) {
-            listener.onRemove(oldValue)
-          }
-&nbsp;
-          listener.onAdd(value)
-        }
-&nbsp;
-        return true
-      }
-    }) as T[]
-  }
-}
-&nbsp;</pre></td></tr></table></pre>
-
-                <div class='push'></div><!-- for sticky footer -->
-            </div><!-- /wrapper -->
-            <div class='footer quiet pad2 space-top1 center small'>
-                Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-01-16T00:23:52.140Z
-            </div>
-        <script src="../prettify.js"></script>
-        <script>
-            window.onload = function () {
-                prettyPrint();
-            };
-        </script>
-        <script src="../sorter.js"></script>
-        <script src="../block-navigation.js"></script>
-    </body>
-</html>
-