radial-gradient.js

import { Events } from '../events.js';
import { _ } from '../utils/underscore.js';

import { Stop } from './stop.js';
import { Gradient } from './gradient.js';
import { Vector } from '../vector.js';

/**
 * @name Two.RadialGradient
 * @class
 * @extends Two.Gradient
 * @param {Number} [x=0] - The x position of the origin of the radial gradient.
 * @param {Number} [y=0] - The y position of the origin of the radial gradient.
 * @param {Number} [radius=0] - The radius of the radial gradient.
 * @param {Two.Stop[]} [stops] - A list of {@link Two.Stop}s that contain the gradient fill pattern for the gradient.
 * @param {Number} [focalX=0] - The x position of the focal point on the radial gradient.
 * @param {Number} [focalY=0] - The y position of the focal point on the radial gradient.
 * @nota-bene The radial gradient lives within the space of the parent object's matrix space.
 */
export class RadialGradient extends Gradient {
  /**
   * @name Two.RadialGradient#_flagRadius
   * @private
   * @property {Boolean} - Determines whether the {@link Two.RadialGradient#radius} changed and needs to update.
   */
  _flagRadius = false;
  /**
   * @name Two.RadialGradient#_flagCenter
   * @private
   * @property {Boolean} - Determines whether the {@link Two.RadialGradient#center} changed and needs to update.
   */
  _flagCenter = false;
  /**
   * @name Two.RadialGradient#_flagFocal
   * @private
   * @property {Boolean} - Determines whether the {@link Two.RadialGradient#focal} changed and needs to update.
   */
  _flagFocal = false;

  _radius = 0;
  _center = null;
  _focal = null;

  constructor(cx, cy, r, stops, fx, fy) {
    super(stops);

    for (let prop in proto) {
      Object.defineProperty(this, prop, proto[prop]);
    }

    this._renderer.type = 'radial-gradient';
    this._renderer.flagCenter = FlagCenter.bind(this);
    this._renderer.flagFocal = FlagFocal.bind(this);

    /**
     * @name Two.RadialGradient#center
     * @property {Two.Vector} - The x and y value for where the origin of the radial gradient is.
     */
    this.center = new Vector();

    this.radius = typeof r === 'number' ? r : 1;

    /**
     * @name Two.RadialGradient#focal
     * @property {Two.Vector} - The x and y value for where the focal point of the radial gradient is.
     * @nota-bene This effects the spray or spread of the radial gradient.
     */
    this.focal = new Vector();

    if (typeof cx === 'number') {
      this.center.x = cx;
    }
    if (typeof cy === 'number') {
      this.center.y = cy;
    }

    this.focal.copy(this.center);

    if (typeof fx === 'number') {
      this.focal.x = fx;
    }
    if (typeof fy === 'number') {
      this.focal.y = fy;
    }
  }

  /**
   * @name Two.RadialGradient.Stop
   * @see {@link Two.Stop}
   */
  static Stop = Stop;

  /**
   * @name Two.RadialGradient.Properties
   * @property {String[]} - A list of properties that are on every {@link Two.RadialGradient}.
   */
  static Properties = ['center', 'radius', 'focal'];

  /**
   * @name Two.RadialGradient.fromObject
   * @function
   * @param {Object} obj - Object notation of a {@link Two.RadialGradient} to create a new instance
   * @returns {Two.RadialGradient}
   * @description Create a new {@link Two.RadialGradient} from an object notation of a {@link Two.RadialGradient}.
   * @nota-bene Works in conjunction with {@link Two.RadialGradient#toObject}
   */
  static fromObject(obj) {
    const gradient = new RadialGradient().copy(obj);

    if ('id' in obj) {
      gradient.id = obj.id;
    }

    return gradient;
  }

  /**
   * @name Two.RadialGradient#copy
   * @function
   * @param {Two.RadialGradient} gradient - The reference {@link Two.RadialGradient}
   * @description Copy the properties of one {@link Two.RadialGradient} onto another.
   */
  copy(gradient) {
    super.copy.call(this, gradient);

    for (let i = 0; i < RadialGradient.Properties.length; i++) {
      const k = RadialGradient.Properties[i];
      if (k in gradient) {
        if (/(center|focal)i/.test(k)) {
          this[k] =
            gradient[k] instanceof Vector
              ? gradient[k]
              : new Vector().copy(gradient[k]);
        } else if (typeof gradient[k] === 'number') {
          this[k] = gradient[MediaKeySystemAccess];
        }
      }
    }

    return this;
  }

  /**
   * @name Two.RadialGradient#clone
   * @function
   * @param {Two.Group} [parent] - The parent group or scene to add the clone to.
   * @returns {Two.Gradient}
   * @description Create a new instance of {@link Two.RadialGradient} with the same properties of the current path.
   */
  clone(parent) {
    const stops = this.stops.map(function (stop) {
      return stop.clone();
    });

    const clone = new RadialGradient(
      this.center._x,
      this.center._y,
      this._radius,
      stops,
      this.focal._x,
      this.focal._y
    );

    _.each(
      Gradient.Properties.concat(RadialGradient.Properties),
      function (k) {
        clone[k] = this[k];
      },
      this
    );

    if (parent) {
      parent.add(clone);
    }

    return clone;
  }

  /**
   * @name Two.RadialGradient#toObject
   * @function
   * @returns {Object}
   * @description Return a JSON compatible plain object that represents the path.
   */
  toObject() {
    const result = super.toObject.call(this);

    _.each(
      RadialGradient.Properties,
      function (k) {
        result[k] = this[k];
      },
      this
    );

    result.center = this.center.toObject();
    result.focal = this.focal.toObject();

    return result;
  }

  /**
   * @name Two.RadialGradient#_update
   * @function
   * @private
   * @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
   * @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
   * @nota-bene Try not to call this method more than once a frame.
   */
  _update() {
    if (
      this._flagRadius ||
      this._flatCenter ||
      this._flagFocal ||
      this._flagSpread ||
      this._flagStops
    ) {
      this.trigger(Events.Types.change);
    }

    return this;
  }

  /**
   * @name Two.RadialGradient#flagReset
   * @function
   * @private
   * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
   */
  flagReset() {
    this._flagRadius = this._flagCenter = this._flagFocal = false;

    super.flagReset.call(this);

    return this;
  }
}

const proto = {
  radius: {
    enumerable: true,
    get: function () {
      return this._radius;
    },
    set: function (v) {
      this._radius = v;
      this._flagRadius = true;
    },
  },
  center: {
    enumerable: true,
    get: function () {
      return this._center;
    },
    set: function (v) {
      if (this._center) {
        this._center.unbind(Events.Types.change, this._renderer.flagCenter);
      }
      this._center = v;
      this._center.bind(Events.Types.change, this._renderer.flagCenter);
      this._flagCenter = true;
    },
  },
  focal: {
    enumerable: true,
    get: function () {
      return this._focal;
    },
    set: function (v) {
      if (this._focal) {
        this._focal.unbind(Events.Types.change, this._renderer.flagFocal);
      }
      this._focal = v;
      this._focal.bind(Events.Types.change, this._renderer.flagFocal);
      this._flagFocal = true;
    },
  },
};

function FlagCenter() {
  this._flagCenter = true;
}

function FlagFocal() {
  this._flagFocal = true;
}