wilderness-core/cjs/motion-path-force.js

The SVG animation engine behind Wilderness

'use strict';

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

var _config = require('./config');

var _config2 = _interopRequireDefault(_config);

var _easingFunction = require('./easing-function');

var _easingFunction2 = _interopRequireDefault(_easingFunction);

var _points = require('points');

var _svgPoints = require('svg-points');

var _transform = require('./transform');

var _plainShapeObject = require('./plain-shape-object');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /* globals __DEV__ */

/**
 * Applies a motion path's offset and rotation to a FrameShape.
 *
 * @param {Object} opts
 * @param {number} opts.angle - The angle to rotate the FrameShape
 * @param {FrameShape} opts.frameShape
 * @param {number} opts.x - The value to offset the FrameShape on the x axis
 * @param {number} opts.x - The value to offset the FrameShape on the x axis
 *
 * @returns {FrameShape}
 *
 * @example
 * applyMotionPath({ angle, frameShape, x, y })
 */
var applyMotionPath = function applyMotionPath(_ref) {
  var angle = _ref.angle,
      frameShape = _ref.frameShape,
      x = _ref.x,
      y = _ref.y;

  var _flattenPoints = (0, _transform.flattenPoints)(frameShape),
      points = _flattenPoints.points,
      pointsMap = _flattenPoints.pointsMap;

  var offsetPoints = (0, _points.offset)(points, x, y);
  var rotatedPoints = angle ? (0, _points.rotate)(offsetPoints, angle) : offsetPoints;

  return (0, _transform.pointsToFrameShape)({
    frameShape: frameShape,
    points: rotatedPoints,
    pointsMap: pointsMap
  });
};

/**
 * Creates a motion path force function from a PlainShapeObject.
 *
 * @param {PlainShapeObject} plainShapeObject
 *
 * @returns {function}
 *
 * @example
 * motionPath({ ...plainShapeObject, accuracy: 0.1, rotate: true })
 */
var motionPath = function motionPath(plainShapeObject) {
  if (process.env.NODE_ENV !== 'production' && (0, _plainShapeObject.valid)(plainShapeObject)) {
    if (plainShapeObject.type === 'g') {
      throw new TypeError('A motion path cannot be a group shape');
    }
  }

  var _plainShapeObject$acc = plainShapeObject.accuracy,
      accuracy = _plainShapeObject$acc === undefined ? 1 : _plainShapeObject$acc,
      _plainShapeObject$eas = plainShapeObject.easing,
      motionPathEasing = _plainShapeObject$eas === undefined ? _config2.default.defaults.motionPath.easing : _plainShapeObject$eas,
      _plainShapeObject$rot = plainShapeObject.rotate,
      r = _plainShapeObject$rot === undefined ? false : _plainShapeObject$rot,
      _plainShapeObject$tra = plainShapeObject.transforms,
      transforms = _plainShapeObject$tra === undefined ? [] : _plainShapeObject$tra,
      coreProps = _objectWithoutProperties(plainShapeObject, ['accuracy', 'easing', 'rotate', 'transforms']);

  var motionPathPoints = (0, _transform.transformPoints)((0, _svgPoints.toPoints)(coreProps), transforms);
  var easing = (0, _easingFunction2.default)(motionPathEasing);

  return function (frameShape, framePosition) {
    var motionPathPosition = easing(framePosition, 0, 1, 1);

    var _position = (0, _points.position)(motionPathPoints, motionPathPosition, accuracy),
        angle = _position.angle,
        x = _position.x,
        y = _position.y;

    if (!x && !y) {
      return frameShape;
    }

    return applyMotionPath({
      angle: typeof r === 'number' ? (angle + r) % 360 : r === true ? angle : 0,
      frameShape: frameShape,
      x: x,
      y: y
    });
  };
};

exports.default = motionPath;