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

The SVG animation engine behind Wilderness

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__ */

import config from './config';
import easingFunction from './easing-function';
import { offset, position, rotate } from 'points';
import { toPoints } from 'svg-points';
import { flattenPoints, pointsToFrameShape, transformPoints } from './transform';
import { valid } from './plain-shape-object';

/**
 * 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 = flattenPoints(frameShape),
      points = _flattenPoints.points,
      pointsMap = _flattenPoints.pointsMap;

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

  return 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' && 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 ? config.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 = transformPoints(toPoints(coreProps), transforms);
  var easing = easingFunction(motionPathEasing);

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

    var _position = 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
    });
  };
};

export default motionPath;