etro 0.9.1 → 0.10.0

package/src/object.ts

@@ -2,17 +2,20 @@ import { Movie } from './movie'
 
 /** A movie, layer or effect  */
 export default interface EtroObject {
+  currentTime: number
   /** Used in etro internals */
   type: string
-  /**
-   * Which properties to not watch for changes, for `Movie#autoRefresh`
-   *
-   * @deprecated `Movie#autoRefresh` is deprecated
-   */
-  publicExcludes: string[]
   /** Map of property name to function to run on result of `val` */
   propertyFilters: Record<string, <T>(value: T) => T>
+  /**
+   * `true` if this object is ready to be played/rendered/applied, `false`
+   * otherwise
+   */
+  ready: boolean
   movie: Movie
 
+  /**
+   * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+   */
   getDefaultOptions(): object // eslint-disable-line @typescript-eslint/ban-types
 }

package/src/util.ts

@@ -3,7 +3,6 @@
  */
 
 import EtroObject from './object'
-import { publish } from './event'
 import { Movie } from './movie'
 
 /**
@@ -15,8 +14,9 @@ import { Movie } from './movie'
 function getPropertyDescriptor (obj: unknown, name: string | number | symbol): PropertyDescriptor {
   do {
     const propDesc = Object.getOwnPropertyDescriptor(obj, name)
-    if (propDesc)
+    if (propDesc) {
       return propDesc
+    }
 
     obj = Object.getPrototypeOf(obj)
   } while (obj)
@@ -27,6 +27,10 @@ function getPropertyDescriptor (obj: unknown, name: string | number | symbol): P
  * Merges `options` with `defaultOptions`, and then copies the properties with
  * the keys in `defaultOptions` from the merged object to `destObj`.
  *
+ * @deprecated Each option should be copied individually, and the default value
+ * should be set in the constructor. See
+ * {@link https://github.com/etro-js/etro/issues/131} for more info.
+ *
  * @return
  */
 // TODO: Make methods like getDefaultOptions private
@@ -34,10 +38,12 @@ export function applyOptions (options: object, destObj: EtroObject): void { // e
   const defaultOptions = destObj.getDefaultOptions()
 
   // Validate; make sure `keys` doesn't have any extraneous items
-  for (const option in options)
+  for (const option in options) {
     // eslint-disable-next-line no-prototype-builtins
-    if (!defaultOptions.hasOwnProperty(option))
+    if (!defaultOptions.hasOwnProperty(option)) {
       throw new Error("Invalid option: '" + option + "'")
+    }
+  }
 
   // Merge options and defaultOptions
   options = { ...defaultOptions, ...options }
@@ -46,8 +52,9 @@ export function applyOptions (options: object, destObj: EtroObject): void { // e
   for (const option in options) {
     const propDesc = getPropertyDescriptor(destObj, option)
     // Update the property as long as the property has not been set (unless if it has a setter)
-    if (!propDesc || propDesc.set)
+    if (!propDesc || propDesc.set) {
       destObj[option] = options[option]
+    }
   }
 }
 
@@ -55,14 +62,16 @@ export function applyOptions (options: object, destObj: EtroObject): void { // e
 const valCache = new WeakMap()
 function cacheValue (element: EtroObject, path: string, value: unknown) {
   // Initiate movie cache
-  if (!valCache.has(element.movie))
+  if (!valCache.has(element.movie)) {
     valCache.set(element.movie, new WeakMap())
+  }
 
   const movieCache = valCache.get(element.movie)
 
-  // Iniitate element cache
-  if (!movieCache.has(element))
+  // Initiate element cache
+  if (!movieCache.has(element)) {
     movieCache.set(element, {})
+  }
 
   const elementCache = movieCache.get(element)
 
@@ -107,15 +116,18 @@ export class KeyFrame<T> {
   }
 
   evaluate (time: number): T {
-    if (this.value.length === 0)
+    if (this.value.length === 0) {
       throw new Error('Empty keyframe')
+    }
 
-    if (time === undefined)
+    if (time === undefined) {
       throw new Error('|time| is undefined or null')
+    }
 
     const firstTime: number = this.value[0][0] as number
-    if (time < firstTime)
+    if (time < firstTime) {
       throw new Error('No keyframe point before |time|')
+    }
 
     // I think reduce are slow to do per-frame (or more)?
     for (let i = 0; i < this.value.length; i++) {
@@ -126,7 +138,7 @@ export class KeyFrame<T> {
       if (i + 1 < this.value.length) {
         const endTime = this.value[i + 1][0] as number
         const endValue = this.value[i + 1][1] as T
-        if (startTime <= time && time < endTime)
+        if (startTime <= time && time < endTime) {
           // No need for endValue if it is flat interpolation
           // TODO: support custom interpolation for 'other' types?
           if (!(typeof startValue === 'number' || typeof endValue === 'object')) {
@@ -142,6 +154,7 @@ export class KeyFrame<T> {
               percentProgress, this.interpolationKeys
             ) as unknown as T
           }
+        }
       } else {
         // Repeat last value forever
         return startValue
@@ -169,26 +182,29 @@ export type Dynamic<T> = T | KeyFrame<T> | ((element: EtroObject, time: number)
 // TODO: Is this function efficient?
 // TODO: Update doc @params to allow for keyframes
 export function val (element: EtroObject, path: string, time: number): any { // eslint-disable-line @typescript-eslint/no-explicit-any
-  if (hasCachedValue(element, path))
+  if (hasCachedValue(element, path)) {
     return getCachedValue(element, path)
+  }
 
   // Get property of element at path
   const pathParts = path.split('.')
   let property = element[pathParts.shift()]
-  while (pathParts.length > 0)
+  while (pathParts.length > 0) {
     property = property[pathParts.shift()]
+  }
 
   // Property filter function
   const process = element.propertyFilters[path]
 
   let value
-  if (property instanceof KeyFrame)
+  if (property instanceof KeyFrame) {
     value = property.evaluate(time)
-  else if (typeof property === 'function')
-    value = property(element, time) // TODO? add more args
-  else
+  } else if (typeof property === 'function') {
+    value = property(element, time)
+  } else {
     // Simple value
     value = property
+  }
 
   return cacheValue(element, path, process ? process.call(element, value) : value)
 }
@@ -202,17 +218,20 @@ export function val (element: EtroObject, path: string, time: number): any { //
 } */
 
 export function linearInterp (x1: number | object, x2: number | object, t: number, objectKeys?: string[]): number | object { // eslint-disable-line @typescript-eslint/ban-types
-  if (typeof x1 !== typeof x2)
+  if (typeof x1 !== typeof x2) {
     throw new Error('Type mismatch')
+  }
 
-  if (typeof x1 !== 'number' && typeof x1 !== 'object')
+  if (typeof x1 !== 'number' && typeof x1 !== 'object') {
     // Flat interpolation (floor)
     return x1
+  }
 
   if (typeof x1 === 'object') { // to work with objects (including arrays)
     // TODO: make this code DRY
-    if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2))
+    if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2)) {
       throw new Error('Prototype mismatch')
+    }
 
     // Preserve prototype of objects
     const int = Object.create(Object.getPrototypeOf(x1))
@@ -221,8 +240,9 @@ export function linearInterp (x1: number | object, x2: number | object, t: numbe
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i]
       // eslint-disable-next-line no-prototype-builtins
-      if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key))
+      if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key)) {
         continue
+      }
 
       int[key] = linearInterp(x1[key], x2[key], t)
     }
@@ -232,16 +252,19 @@ export function linearInterp (x1: number | object, x2: number | object, t: numbe
 }
 
 export function cosineInterp (x1: number | object, x2: number | object, t: number, objectKeys?: string[]): number | object { // eslint-disable-line @typescript-eslint/ban-types
-  if (typeof x1 !== typeof x2)
+  if (typeof x1 !== typeof x2) {
     throw new Error('Type mismatch')
+  }
 
-  if (typeof x1 !== 'number' && typeof x1 !== 'object')
+  if (typeof x1 !== 'number' && typeof x1 !== 'object') {
     // Flat interpolation (floor)
     return x1
+  }
 
   if (typeof x1 === 'object' && typeof x2 === 'object') { // to work with objects (including arrays)
-    if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2))
+    if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2)) {
       throw new Error('Prototype mismatch')
+    }
 
     // Preserve prototype of objects
     const int = Object.create(Object.getPrototypeOf(x1))
@@ -250,8 +273,9 @@ export function cosineInterp (x1: number | object, x2: number | object, t: numbe
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i]
       // eslint-disable-next-line no-prototype-builtins
-      if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key))
+      if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key)) {
         continue
+      }
 
       int[key] = cosineInterp(x1[key], x2[key], t)
     }
@@ -345,12 +369,22 @@ export class Font {
    */
   toString (): string {
     let s = ''
-    if (this.style !== 'normal') s += this.style + ' '
-    if (this.variant !== 'normal') s += this.variant + ' '
-    if (this.weight !== 'normal') s += this.weight + ' '
-    if (this.stretch !== 'normal') s += this.stretch + ' '
+    if (this.style !== 'normal') {
+      s += this.style + ' '
+    }
+    if (this.variant !== 'normal') {
+      s += this.variant + ' '
+    }
+    if (this.weight !== 'normal') {
+      s += this.weight + ' '
+    }
+    if (this.stretch !== 'normal') {
+      s += this.stretch + ' '
+    }
     s += `${this.size}${this.sizeUnit} `
-    if (this.lineHeight !== 'normal') s += this.lineHeight + ' '
+    if (this.lineHeight !== 'normal') {
+      s += this.lineHeight + ' '
+    }
     s += this.family
 
     return s
@@ -403,66 +437,11 @@ export function mapPixels (
   width = width || canvas.width
   height = height || canvas.height
   const frame = ctx.getImageData(x, y, width, height)
-  for (let i = 0, l = frame.data.length; i < l; i += 4)
+  for (let i = 0, l = frame.data.length; i < l; i += 4) {
     mapper(frame.data, i)
-
-  if (flush)
-    ctx.putImageData(frame, x, y)
-}
-
-/**
- * <p>Emits "change" event when public properties updated, recursively.
- * <p>Must be called before any watchable properties are set, and only once in
- * the prototype chain.
- *
- * @deprecated Will be removed in the future (see issue #130)
- *
- * @param target - object to watch
- */
-export function watchPublic (target: EtroObject): EtroObject {
-  const getPath = (receiver, prop) =>
-    (receiver === proxy ? '' : (paths.get(receiver) + '.')) + prop
-  const callback = function (prop, val, receiver) {
-    // Public API property updated, emit 'modify' event.
-    publish(proxy, `${target.type}.change.modify`, { property: getPath(receiver, prop), newValue: val })
   }
-  const canWatch = (receiver, prop) => !prop.startsWith('_') &&
-    (receiver.publicExcludes === undefined || !receiver.publicExcludes.includes(prop))
-
-  // The path to each child property (each is a unique proxy)
-  const paths = new WeakMap()
-
-  const handler = {
-    set (obj, prop, val, receiver) {
-      // Recurse
-      if (typeof val === 'object' && val !== null && !paths.has(val) && canWatch(receiver, prop)) {
-        val = new Proxy(val, handler)
-        paths.set(val, getPath(receiver, prop))
-      }
 
-      // Set property or attribute
-      // Search prototype chain for the closest setter
-      let objProto = obj
-      while ((objProto = Object.getPrototypeOf(objProto))) {
-        const propDesc = Object.getOwnPropertyDescriptor(objProto, prop)
-        if (propDesc && propDesc.set) {
-          // Call setter, supplying proxy as this (fixes event bugs)
-          propDesc.set.call(receiver, val)
-          break
-        }
-      }
-      if (!objProto)
-        // Couldn't find setter; set value on instance
-        obj[prop] = val
-
-      // Check if the property isn't blacklisted in publicExcludes.
-      if (canWatch(receiver, prop))
-        callback(prop, val, receiver)
-
-      return true
-    }
+  if (flush) {
+    ctx.putImageData(frame, x, y)
   }
-
-  const proxy = new Proxy(target, handler)
-  return proxy
 }

package/dist/movie.d.ts

@@ -1,201 +0,0 @@
-/**
- * @module movie
- */
-import { Dynamic, Color } from './util';
-import { Base as BaseLayer } from './layer/index';
-import { Base as BaseEffect } from './effect/index';
-declare global {
-    interface Window {
-        webkitAudioContext: typeof AudioContext;
-    }
-    interface HTMLCanvasElement {
-        captureStream(frameRate?: number): MediaStream;
-    }
-}
-export declare class MovieOptions {
-    /** The html canvas element to use for playback */
-    canvas: HTMLCanvasElement;
-    /** The audio context to use for playback, defaults to a new audio context */
-    actx?: AudioContext;
-    /** @deprecated Use <code>actx</code> instead */
-    audioContext?: AudioContext;
-    /** The background color of the movie as a cSS string */
-    background?: Dynamic<Color>;
-    repeat?: boolean;
-    /** Call `refresh` when the user changes a property on the movie or any of its layers or effects */
-    autoRefresh?: boolean;
-}
-/**
- * The movie contains everything included in the render.
- *
- * Implements a pub/sub system.
- */
-export declare class Movie {
-    type: string;
-    /**
-     * @deprecated Auto-refresh will be removed in the future (see issue #130).
-     */
-    publicExcludes: string[];
-    propertyFilters: Record<string, <T>(value: T) => T>;
-    repeat: boolean;
-    /**
-     * Call `refresh` when the user changes a property on the movie or any of its
-     * layers or effects
-     *
-     * @deprecated Auto-refresh will be removed in the future. If you want to
-     * refresh the canvas, call `refresh`. See issue #130.
-     */
-    autoRefresh: boolean;
-    /** The background color of the movie as a cSS string */
-    background: Dynamic<Color>;
-    /** The audio context to which audio output is sent during playback */
-    readonly actx: AudioContext;
-    readonly effects: BaseEffect[];
-    readonly layers: BaseLayer[];
-    private _canvas;
-    private _cctx;
-    private _effectsBack;
-    private _layersBack;
-    private _currentTime;
-    private _paused;
-    private _ended;
-    private _renderingFrame;
-    private _recordEndTime;
-    private _mediaRecorder;
-    private _lastPlayed;
-    private _lastPlayedOffset;
-    /**
-     * Creates a new movie.
-     */
-    constructor(options: MovieOptions);
-    /**
-     * Plays the movie
-     * @return fulfilled when the movie is done playing, never fails
-     */
-    play(): Promise<void>;
-    /**
-     * Plays the movie in the background and records it
-     *
-     * @param options
-     * @param frameRate
-     * @param [options.video=true] - whether to include video in recording
-     * @param [options.audio=true] - whether to include audio in recording
-     * @param [options.mediaRecorderOptions=undefined] - options to pass to the <code>MediaRecorder</code>
-     * @param [options.type='video/webm'] - MIME type for exported video
-     *  constructor
-     * @return resolves when done recording, rejects when internal media recorder errors
-     */
-    record(options: {
-        frameRate: number;
-        duration?: number;
-        type?: string;
-        video?: boolean;
-        audio?: boolean;
-        mediaRecorderOptions?: Record<string, unknown>;
-    }): Promise<Blob>;
-    /**
-     * Stops the movie, without reseting the playback position
-     * @return the movie (for chaining)
-     */
-    pause(): Movie;
-    /**
-     * Stops playback and resets the playback position
-     * @return the movie (for chaining)
-     */
-    stop(): Movie;
-    /**
-     * @param [timestamp=performance.now()]
-     * @param [done=undefined] - called when done playing or when the current frame is loaded
-     * @private
-     */
-    private _render;
-    private _updateCurrentTime;
-    private _renderBackground;
-    /**
-     * @return whether or not video frames are loaded
-     * @param [timestamp=performance.now()]
-     * @private
-     */
-    private _renderLayers;
-    private _applyEffects;
-    /**
-     * Refreshes the screen (only use this if auto-refresh is disabled)
-     * @return - resolves when the frame is loaded
-     */
-    refresh(): Promise<null>;
-    /**
-     * Convienence method
-     */
-    private _publishToLayers;
-    /**
-     * If the movie is playing, recording or refreshing
-     */
-    get rendering(): boolean;
-    /**
-     * If the movie is refreshing current frame
-     */
-    get renderingFrame(): boolean;
-    /**
-     * If the movie is recording
-     */
-    get recording(): boolean;
-    /**
-     * The combined duration of all layers
-     */
-    get duration(): number;
-    /**
-     * Convienence method for <code>layers.push()</code>
-     * @param layer
-     * @return the movie
-     */
-    addLayer(layer: BaseLayer): Movie;
-    /**
-     * Convienence method for <code>effects.push()</code>
-     * @param effect
-     * @return the movie
-     */
-    addEffect(effect: BaseEffect): Movie;
-    /**
-     */
-    get paused(): boolean;
-    /**
-     * If the playback position is at the end of the movie
-     */
-    get ended(): boolean;
-    /**
-     * The current playback position
-     */
-    get currentTime(): number;
-    set currentTime(time: number);
-    /**
-     * Sets the current playback position. This is a more powerful version of
-     * `set currentTime`.
-     *
-     * @param time - the new cursor's time value in seconds
-     * @param [refresh=true] - whether to render a single frame
-     * @return resolves when the current frame is rendered if
-     * <code>refresh</code> is true, otherwise resolves immediately
-     *
-     */
-    setCurrentTime(time: number, refresh?: boolean): Promise<void>;
-    /**
-     * The rendering canvas
-     */
-    get canvas(): HTMLCanvasElement;
-    /**
-     * The rendering canvas's context
-     */
-    get cctx(): CanvasRenderingContext2D;
-    /**
-     * The width of the rendering canvas
-     */
-    get width(): number;
-    set width(width: number);
-    /**
-     * The height of the rendering canvas
-     */
-    get height(): number;
-    set height(height: number);
-    get movie(): Movie;
-    getDefaultOptions(): MovieOptions;
-}