@bucky24/react-canvas/build/Animate.js

A library of components that can be used to manipulate a canvas using JSX embedded in react.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Animate;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _AnimationContext = _interopRequireDefault(require("./contexts/AnimationContext"));
var _ImageStrip = _interopRequireDefault(require("./ImageStrip"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var propTypes = {
  src: _propTypes.default.string.isRequired,
  cellWidth: _propTypes.default.number.isRequired,
  cellHeight: _propTypes.default.number.isRequired,
  startX: _propTypes.default.number.isRequired,
  startY: _propTypes.default.number.isRequired,
  frameCount: _propTypes.default.number.isRequired,
  x: _propTypes.default.number.isRequired,
  y: _propTypes.default.number.isRequired,
  width: _propTypes.default.number.isRequired,
  height: _propTypes.default.number.isRequired,
  rowWidth: _propTypes.default.number.isRequired
};
function Animate(_ref) {
  var src = _ref.src,
    cellWidth = _ref.cellWidth,
    cellHeight = _ref.cellHeight,
    startX = _ref.startX,
    startY = _ref.startY,
    frameCount = _ref.frameCount,
    rowWidth = _ref.rowWidth,
    x = _ref.x,
    y = _ref.y,
    width = _ref.width,
    height = _ref.height;
  var animContext = (0, _react.useContext)(_AnimationContext.default);
  if (!animContext) {
    throw new Error("Animate must be called within an AnimationProvider");
  }
  var frame = animContext.frame; // know what frame we initially started on so we know at what image frame we are on now
  var _useState = (0, _react.useState)(frame),
    _useState2 = _slicedToArray(_useState, 2),
    firstFrame = _useState2[0],
    _ = _useState2[1];
  var currentFrame = (frame - firstFrame) % frameCount;
  var row = Math.floor(currentFrame / rowWidth);
  var column = currentFrame - row * rowWidth;
  var currentX = startX + column;
  var currentY = startY + row;
  return _react.default.createElement(_ImageStrip.default, {
    src: src,
    cellWidth: cellWidth,
    cellHeight: cellHeight,
    cellX: currentX,
    cellY: currentY,
    x: x,
    y: y,
    width: width,
    height: height
  });
}
Animate.propTypes = propTypes;