spiritjs/lib/group/transition.js

The animation toolkit for the web

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _events = require('events');

var _params = require('./params');

var _params2 = _interopRequireDefault(_params);

var _utils = require('../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Frame transition.
 * Containing frame, ease and params information.
 *
 * @fires Transition#change
 * @fires Transition#change:frame
 * @fires Transition#change:ease
 * @fires Transition#change:params
 *
 * @fires Transition#change:param
 * @fires Transition#change:param:prop
 * @fires Transition#change:param:value
 *
 * @fires Transition#add:param
 * @fires Transition#remove:param
 */
var Transition = function (_EventEmitter) {
  _inherits(Transition, _EventEmitter);

  /**
   * Create Transition.
   *
   * @param {number}              frame
   * @param {Array|Params|object} params
   * @param {string|function}     ease
   */
  function Transition(frame) {
    var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new _params2.default();
    var ease = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Linear.easeNone';

    _classCallCheck(this, Transition);

    var _this = _possibleConstructorReturn(this, (Transition.__proto__ || Object.getPrototypeOf(Transition)).call(this));

    _this._frame = null;
    _this._params = new _params2.default();
    _this._ease = null;
    _this._list = null;

    _this.setMaxListeners(Infinity);

    if (frame === undefined || frame === null || isNaN(frame)) {
      throw new Error('Invalid frame');
    }

    if (!ease || typeof ease !== 'string' && typeof ease !== 'function') {
      throw new Error('Invalid ease');
    }

    if (!(params instanceof _params2.default)) {
      params = new _params2.default(params);
    }

    Object.assign(_this, {
      _frame: frame,
      _params: params,
      _ease: ease
    });

    _this.setupBubbleEvents();
    return _this;
  }

  /**
   * Get current frame
   *
   * @returns {number}
   */


  _createClass(Transition, [{
    key: 'setupBubbleEvents',
    value: function setupBubbleEvents() {
      _utils.events.clearEvents(this._params, _params2.default.Events);

      this._params.on('change', _utils.events.bubbleEvent('change:param', this));
      this._params.on('change:prop', _utils.events.bubbleEvent('change:param:prop', this));
      this._params.on('change:value', _utils.events.bubbleEvent('change:param:value', this));
      this._params.on('add', _utils.events.bubbleEvent('add:param', this));
      this._params.on('remove', _utils.events.bubbleEvent('remove:param', this));

      if (this._list) {
        this._params.on('change', _utils.events.bubbleEvent('change:param', this._list));
        this._params.on('change:prop', _utils.events.bubbleEvent('change:param:prop', this._list));
        this._params.on('change:value', _utils.events.bubbleEvent('change:param:value', this._list));
        this._params.on('add', _utils.events.bubbleEvent('add:param', this._list));
        this._params.on('remove', _utils.events.bubbleEvent('remove:param', this._list));
      }
    }

    /**
     * Convert this transition to object
     *
     * @returns {object}
     */

  }, {
    key: 'toObject',
    value: function toObject() {
      var paramsAsArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

      return {
        frame: this.frame,
        ease: this.ease,
        params: paramsAsArray ? this.params.toArray() : this.params.toObject()
      };
    }

    /**
     * Clean up this transition.
     * Removes all listeners
     */

  }, {
    key: 'destroy',
    value: function destroy() {
      _utils.events.clearEvents(this._params, _params2.default.Events);
      _utils.events.clearEvents(this, Transition.Events);
    }
  }, {
    key: 'frame',
    get: function get() {
      return this._frame;
    }

    /**
     * Set frame
     *
     * @param {number} f
     * @fires Transition#change
     * @fires Transition#change:frame
     * @fires List#change
     * @fires List#change:frame
     */
    ,
    set: function set(f) {
      if (isNaN(f)) {
        throw new Error('Frame should be a number');
      }

      if (f === this._frame) {
        return;
      }

      var evt = _utils.events.createEventObjectForModel(Transition, this.toObject(), 'frame', this._frame, f);
      this._frame = f;

      /**
       * Transition event.
       *
       * @event Transition#change
       * @type {Array}
       */
      var evtChange = ['change', evt];

      /**
       * Transition event.
       *
       * @event Transition#change:frame
       * @type {Array}
       */
      var evtChangeFrame = ['change:frame', evt, f];

      this.emit.apply(this, evtChange);
      this.emit.apply(this, evtChangeFrame);

      if (this._list) {
        var _list, _list2;

        (_list = this._list).emit.apply(_list, evtChange);
        (_list2 = this._list).emit.apply(_list2, evtChangeFrame);
      }
    }

    /**
     * Get ease
     *
     * @returns {string|function}
     */

  }, {
    key: 'ease',
    get: function get() {
      return this._ease;
    }

    /**
     * Set ease
     *
     * @param {string|function} e
     * @fires Transition#change:ease
     */
    ,
    set: function set(e) {
      if (typeof e !== 'string' && typeof e !== 'function') {
        throw new Error('Ease should be a string or function');
      }

      if (e === this._ease) {
        return;
      }

      var evt = _utils.events.createEventObjectForModel(Transition, this.toObject(), 'ease', this._ease, e);
      this._ease = e;

      /**
       * Transition event.
       *
       * @event Transition#change
       * @type {Array}
       */
      var evtChange = ['change', evt];

      /**
       * Transition event.
       *
       * @event Transition#change:frame
       * @type {Array}
       */
      var evtChangeEase = ['change:ease', evt, e];

      this.emit.apply(this, evtChange);
      this.emit.apply(this, evtChangeEase);

      if (this._list) {
        var _list3, _list4;

        (_list3 = this._list).emit.apply(_list3, evtChange);
        (_list4 = this._list).emit.apply(_list4, evtChangeEase);
      }
    }

    /**
     * Get the params
     *
     * @returns {Params}
     */

  }, {
    key: 'params',
    get: function get() {
      return this._params;
    }

    /**
     * Set params
     *
     * @param {Params} p
     * @fires Transition#change:params
     */
    ,
    set: function set(p) {
      if (!(p instanceof _params2.default)) {
        p = new _params2.default(p);
      }

      var mappings = this.params.mappings;

      var evt = _utils.events.createEventObjectForModel(Transition, this.toObject(), 'params', this._params.toArray(), p.toArray());

      _utils.events.clearEvents(this._params, _params2.default.Events);

      this._params.clear();
      this._params = p;
      this._params.mappings = mappings;

      this.setupBubbleEvents();

      /**
       * Transition event.
       *
       * @event Transition#change
       * @type {Array}
       */
      var evtChange = ['change', evt];

      /**
       * Transition event.
       *
       * @event Transition#change:params
       * @type {Array}
       */
      var evtChangeParams = ['change:params', evt, p];

      this.emit.apply(this, evtChange);
      this.emit.apply(this, evtChangeParams);

      if (this._list) {
        var _list5, _list6;

        (_list5 = this._list).emit.apply(_list5, evtChange);
        (_list6 = this._list).emit.apply(_list6, evtChangeParams);
      }
    }
  }]);

  return Transition;
}(_events.EventEmitter);

/**
 * Parse Transition from object
 *
 * @param   {object} obj {ease:string|function, frame:number, params:array|object}
 * @example {frame: 12, ease: 'Linear.easeNone', params: {x: 100, y: 309}}
 * @returns {Transition}
 */


Transition.fromObject = function (obj) {
  if (!_utils.is.isObject(obj)) {
    throw new Error('Object is invalid.');
  }

  var keys = Object.keys(obj);

  if (!keys.includes('frame')) {
    throw new Error('Object is invalid');
  }

  var frame = obj.frame;
  var ease = obj.ease || undefined;
  var params = obj.params || undefined;
  var args = [frame, params, ease].filter(function (arg) {
    return arg !== undefined;
  });

  return new (Function.prototype.bind.apply(Transition, [null].concat(_toConsumableArray(args))))();
};

Transition.Events = ['change', 'change:frame', 'change:ease', 'change:params', 'change:param', 'change:param:prop', 'change:param:value', 'add:param', 'remove:param'];

exports.default = Transition;
module.exports = exports['default'];