virtual360-react/dist/Virtual360.js

Virtual360 is an amazing pure React component which stitches together set of images into a smooth 360-degree image. This component is perfect for developers who want to provide ultimate and immersive user experience.

"use strict";

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

var _slicedToArray = function () { function sliceIterator(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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _Helper = require("./Utils/Helper");

var _Image = require("./Image/Image");

var _Image2 = _interopRequireDefault(_Image);

var _StyledImage = require("./StyledImage360");

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

function Virtual360(_ref) {
  var sensitivity = _ref.sensitivity,
      imageSrc = _ref.imageSrc,
      numOfImagesPerColumn = _ref.numOfImagesPerColumn,
      defaultImagePosition = _ref.defaultImagePosition,
      width = _ref.width,
      height = _ref.height,
      border = _ref.border,
      reverseRotation = _ref.reverseRotation;

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      images = _useState2[0],
      setImages = _useState2[1];

  (0, _react.useEffect)(function () {
    document.addEventListener("mouseup", handleMouseUp, true);

    (0, _Helper.preLoadImages)(imageSrc, numOfImagesPerColumn).then(function (resultArray) {
      var image = [];
      for (var index = 0; index < resultArray.length; index++) {
        if (resultArray[index]) {
          image.push(resultArray[index]);
        }
      }
      setImages(image);
    }).catch(function (err) {
      //  TODO: Handle Error
    });
  }, [imageSrc, numOfImagesPerColumn]);

  var _useState3 = (0, _react.useState)(false),
      _useState4 = _slicedToArray(_useState3, 2),
      dragging = _useState4[0],
      setDragging = _useState4[1];

  var _useState5 = (0, _react.useState)(defaultImagePosition || 1),
      _useState6 = _slicedToArray(_useState5, 2),
      imageIndex = _useState6[0],
      setImageIndex = _useState6[1];

  var _useState7 = (0, _react.useState)(0),
      _useState8 = _slicedToArray(_useState7, 2),
      dragStartIndex = _useState8[0],
      setDragStartIndex = _useState8[1];

  var _useState9 = (0, _react.useState)(0),
      _useState10 = _slicedToArray(_useState9, 2),
      dragStart = _useState10[0],
      setDragStart = _useState10[1];

  var handleMouseDown = function handleMouseDown(event) {
    event.persist();
    setDragging(true);
    setDragStart((0, _Helper.getTouchOrMouseScreenPosition)(event));
    setDragStartIndex(imageIndex);
  };

  var handleMouseUp = function handleMouseUp() {
    setDragging(false);
  };

  var updateImageIndex = function updateImageIndex(currentPosition) {
    var numImages = images.length > 0 && images.length;
    var pixelsPerImage = (sensitivity || 1) * (360 / numImages);

    var dx = void 0;
    if (reverseRotation) {
      dx = (currentPosition - dragStart) / pixelsPerImage;
    } else {
      dx = (dragStart - currentPosition) / pixelsPerImage;
    }
    var index = Math.floor(dx) % numImages;
    if (index < 0) {
      index = numImages + index - 1;
    }
    index = (index + dragStartIndex) % numImages;
    if (index !== imageIndex) {
      setImageIndex(index + 1);
    }
  };

  var handleMouseMove = function handleMouseMove(event) {
    if (dragging) {
      updateImageIndex((0, _Helper.getTouchOrMouseScreenPosition)(event));
    }
  };

  return images.length > 0 ? _react2.default.createElement(
    _StyledImage.StyledImage360,
    {
      onMouseDown: handleMouseDown,
      onMouseMove: handleMouseMove,
      onTouchStart: handleMouseDown,
      onTouchMove: handleMouseMove,
      onTouchEnd: handleMouseUp,
      height: height,
      width: width,
      border: border
    },
    _react2.default.createElement(_Image2.default, {
      imagesArray: images,
      imageIndex: imageIndex <= images.length ? imageIndex : 1
    })
  ) : null;
}

exports.default = Virtual360;