react-ivy-pinch-zoom/dist/index.js

React library for images scaling and dragging with touch screen gestures

var React = require('react');

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

var Touches = /*#__PURE__*/function () {
  function Touches(properties) {
    var _this = this;

    this.eventType = undefined;
    this.handlers = {};
    this.startX = 0;
    this.startY = 0;
    this.lastTap = 0;
    this.doubleTapMinTimeout = 300;
    this.tapMinTimeout = 200;
    this.touchstartTime = 0;
    this.i = 0;
    this.isMousedown = false;
    this.touchListeners = {
      "touchstart": "handleTouchstart",
      "touchmove": "handleTouchmove",
      "touchend": "handleTouchend"
    };
    this.mouseListeners = {
      "mousedown": "handleMousedown",
      "mousemove": "handleMousemove",
      "mouseup": "handleMouseup",
      "wheel": "handleWheel"
    };
    this.otherListeners = {
      "resize": "handleResize"
    };

    this.handleTouchstart = function (event) {
      _this.elementPosition = _this.getElementPosition();
      _this.touchstartTime = new Date().getTime();

      if (_this.eventType === undefined) {
        _this.getTouchstartPosition(event);
      }

      _this.runHandler("touchstart", event);
    };

    this.handleTouchmove = function (event) {
      var touches = event.touches;

      if (_this.detectPan(touches)) {
        _this.runHandler("pan", event);
      }

      if (_this.detectPinch(event)) {
        _this.runHandler("pinch", event);
      }
    };

    this.handleTouchend = function (event) {
      var touches = event.touches;

      if (_this.detectDoubleTap()) {
        _this.runHandler("double-tap", event);
      }

      _this.detectTap();

      _this.runHandler("touchend", event);

      _this.eventType = 'touchend';

      if (touches && touches.length === 0) {
        _this.eventType = undefined;
        _this.i = 0;
      }
    };

    this.handleMousedown = function (event) {
      _this.isMousedown = true;
      _this.elementPosition = _this.getElementPosition();
      _this.touchstartTime = new Date().getTime();

      if (_this.eventType === undefined) {
        _this.getMousedownPosition(event);
      }

      _this.runHandler("mousedown", event);
    };

    this.handleMousemove = function (event) {
      if (!_this.isMousedown) {
        return;
      }

      _this.runHandler("pan", event);

      switch (_this.detectLinearSwipe(event)) {
        case "horizontal-swipe":
          event.swipeType = "horizontal-swipe";

          _this.runHandler("horizontal-swipe", event);

          break;

        case "vertical-swipe":
          event.swipeType = "vertical-swipe";

          _this.runHandler("vertical-swipe", event);

          break;
      }

      if (_this.detectLinearSwipe(event) || _this.eventType === 'horizontal-swipe' || _this.eventType === 'vertical-swipe') {
        _this.handleLinearSwipe(event);
      }
    };

    this.handleMouseup = function (event) {
      _this.detectTap();

      _this.isMousedown = false;

      _this.runHandler("mouseup", event);

      _this.eventType = undefined;
      _this.i = 0;
    };

    this.handleWheel = function (event) {
      _this.runHandler("wheel", event);
    };

    this.handleResize = function (event) {
      _this.runHandler("resize", event);
    };

    this.properties = properties;
    this.element = this.properties.element;
    this.elementPosition = this.getElementPosition();
    this.toggleEventListeners('addEventListener');
  }

  var _proto = Touches.prototype;

  _proto.destroy = function destroy() {
    this.toggleEventListeners('removeEventListener');
  };

  _proto.toggleEventListeners = function toggleEventListeners(action) {
    var listeners;

    if (this.properties.listeners === 'mouse and touch') {
      listeners = Object.assign(this.touchListeners, this.mouseListeners);
    } else {
      listeners = this.detectTouchScreen() ? this.touchListeners : this.mouseListeners;
    }

    if (this.properties.resize) {
      listeners = Object.assign(listeners, this.otherListeners);
    }

    for (var listener in listeners) {
      var handler = listeners[listener];

      if (listener === "resize") {
        if (action === 'addEventListener') {
          window.addEventListener(listener, this[handler], false);
        }

        if (action === 'removeEventListener') {
          window.removeEventListener(listener, this[handler], false);
        }
      } else if (listener === 'mouseup' || listener === "mousemove") {
        if (action === 'addEventListener') {
          document.addEventListener(listener, this[handler], false);
        }

        if (action === 'removeEventListener') {
          document.removeEventListener(listener, this[handler], false);
        }
      } else {
        if (action === 'addEventListener') {
          this.element.addEventListener(listener, this[handler], false);
        }

        if (action === 'removeEventListener') {
          this.element.removeEventListener(listener, this[handler], false);
        }
      }
    }
  };

  _proto.handleLinearSwipe = function handleLinearSwipe(event) {
    this.i++;

    if (this.i > 3) {
      this.eventType = this.getLinearSwipeType(event);
    }

    if (this.eventType === 'horizontal-swipe') {
      this.runHandler('horizontal-swipe', event);
    }

    if (this.eventType === 'vertical-swipe') {
      this.runHandler('vertical-swipe', event);
    }
  };

  _proto.runHandler = function runHandler(eventName, response) {
    if (this.handlers[eventName]) {
      this.handlers[eventName](response);
    }
  };

  _proto.detectPan = function detectPan(touches) {
    return touches.length === 1 && !this.eventType || this.eventType === 'pan';
  };

  _proto.detectDoubleTap = function detectDoubleTap() {
    var _this2 = this;

    if (this.eventType != undefined) {
      return;
    }

    var currentTime = new Date().getTime();
    var tapLength = currentTime - this.lastTap;
    clearTimeout(this.doubleTapTimeout);

    if (tapLength < this.doubleTapMinTimeout && tapLength > 0) {
      return true;
    } else {
      this.doubleTapTimeout = setTimeout(function () {
        clearTimeout(_this2.doubleTapTimeout);
      }, this.doubleTapMinTimeout);
    }

    this.lastTap = currentTime;
    return undefined;
  };

  _proto.detectTap = function detectTap() {
    if (this.eventType != undefined) {
      return;
    }

    var currentTime = new Date().getTime();
    var tapLength = currentTime - this.touchstartTime;

    if (tapLength > 0) {
      if (tapLength < this.tapMinTimeout) {
        this.runHandler("tap", event);
      } else {
        this.runHandler("longtap", event);
      }
    }
  };

  _proto.detectPinch = function detectPinch(event) {
    var touches = event.touches;
    return touches.length === 2 && this.eventType === undefined || this.eventType === 'pinch';
  };

  _proto.detectLinearSwipe = function detectLinearSwipe(event) {
    var touches = event.touches;

    if (touches) {
      if (touches.length === 1 && !this.eventType || this.eventType === 'horizontal-swipe' || this.eventType === 'vertical-swipe') {
        return this.getLinearSwipeType(event);
      }
    } else {
      if (!this.eventType || this.eventType === 'horizontal-swipe' || this.eventType === 'vertical-swipe') {
        return this.getLinearSwipeType(event);
      }
    }

    return undefined;
  };

  _proto.getLinearSwipeType = function getLinearSwipeType(event) {
    if (this.eventType !== 'horizontal-swipe' && this.eventType !== 'vertical-swipe') {
      var movementX = Math.abs(this.moveLeft(0, event) - this.startX);
      var movementY = Math.abs(this.moveTop(0, event) - this.startY);

      if (movementY * 3 > movementX) {
        return 'vertical-swipe';
      } else {
        return 'horizontal-swipe';
      }
    } else {
      return this.eventType;
    }
  };

  _proto.getElementPosition = function getElementPosition() {
    return this.element.getBoundingClientRect();
  };

  _proto.getTouchstartPosition = function getTouchstartPosition(event) {
    this.startX = event.touches[0].clientX - this.elementPosition.left;
    this.startY = event.touches[0].clientY - this.elementPosition.top;
  };

  _proto.getMousedownPosition = function getMousedownPosition(event) {
    this.startX = event.clientX - this.elementPosition.left;
    this.startY = event.clientY - this.elementPosition.top;
  };

  _proto.moveLeft = function moveLeft(index, event) {
    var touches = event.touches;

    if (touches) {
      return touches[index].clientX - this.elementPosition.left;
    } else {
      return event.clientX - this.elementPosition.left;
    }
  };

  _proto.moveTop = function moveTop(index, event) {
    var touches = event.touches;

    if (touches) {
      return touches[index].clientY - this.elementPosition.top;
    } else {
      return event.clientY - this.elementPosition.top;
    }
  };

  _proto.detectTouchScreen = function detectTouchScreen() {
    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

    var mq = function mq(query) {
      return window.matchMedia(query).matches;
    };

    if ('ontouchstart' in window) {
      return true;
    }

    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
    return mq(query);
  };

  _proto.on = function on(event, handler) {
    if (event) {
      this.handlers[event] = handler;
    }
  };

  return Touches;
}();

var IvyPinchDefaultProperties = {
  doubleTap: true,
  doubleTapScale: 2,
  zoomControlScale: 2,
  transitionDuration: 200,
  limitZoom: "original image size",
  minPanScale: 1.0001,
  minScale: 0,
  wheelZoomFactor: 0.2,
  draggableImage: true
};
var IvyPinch = /*#__PURE__*/function () {
  function IvyPinch(properties) {
    var _this = this;

    this.properties = {
      minPanScale: 1
    };
    this.i = 0;
    this.scale = 1;
    this.initialScale = 1;
    this.startX = 0;
    this.startY = 0;
    this.moveX = 0;
    this.moveY = 0;
    this.initialMoveX = 0;
    this.initialMoveY = 0;
    this.moveXC = 0;
    this.moveYC = 0;
    this.lastTap = 0;
    this.draggingMode = false;
    this.distance = 0;
    this.doubleTapTimeout = 0;
    this.initialDistance = 0;
    this.events = {};
    this.maxHtmlContentScale = 3;
    this.maxScale = 1;

    this.handleTouchstart = function (event) {
      _this.getElementPosition();

      if (_this.eventType === undefined) {
        _this.getTouchstartPosition(event);
      }

      _this.emitEvent({
        name: 'touchstart'
      });
    };

    this.handleTouchend = function (event) {
      if (event.type === "touchend") {
        _this.i = 0;
        _this.draggingMode = false;
        var touches = event.touches;

        if (_this.scale < 1) {
          _this.scale = 1;
        }

        if (_this.properties.autoZoomOut && _this.eventType === 'pinch') {
          _this.scale = 1;
        }

        if (_this.eventType === 'pinch' || _this.eventType === 'pan' && _this.scale > _this.properties.minPanScale) {
          _this.alignImage();
        }

        if (_this.eventType === 'pinch' || _this.eventType === 'pan' || _this.eventType === 'horizontal-swipe' || _this.eventType === 'vertical-swipe') {
          _this.updateInitialValues();
        }

        _this.eventType = 'touchend';

        if (touches && touches.length === 0) {
          _this.eventType = undefined;
        }
      }

      if (event.type === "mouseup") {
        _this.draggingMode = false;

        _this.updateInitialValues();

        _this.eventType = undefined;
      }

      _this.emitEvent({
        name: 'touchend'
      });
    };

    this.handlePan = function (event) {
      if (_this.scale < _this.properties.minPanScale || _this.properties.disablePan) {
        return;
      }

      event.preventDefault();

      var _this$getClientPositi = _this.getClientPosition(event),
          clientX = _this$getClientPositi.clientX,
          clientY = _this$getClientPositi.clientY;

      if (!_this.eventType) {
        _this.startX = clientX - _this.elementPosition.left;
        _this.startY = clientY - _this.elementPosition.top;
      }

      _this.eventType = 'pan';
      _this.moveX = _this.initialMoveX + (_this.moveLeft(event, 0) - _this.startX);
      _this.moveY = _this.initialMoveY + (_this.moveTop(event, 0) - _this.startY);

      if (_this.properties.limitPan) {
        _this.limitPanY();

        _this.limitPanX();
      }

      if (event.type === "mousemove" && _this.scale > _this.properties.minPanScale) {
        _this.centeringImage();
      }

      _this.emitEvent({
        name: 'pan',
        detail: {
          moveX: _this.moveX,
          moveY: _this.moveY
        }
      });

      _this.transformElement(0);
    };

    this.handleDoubleTap = function (event) {
      _this.emitEvent({
        name: 'double-tap',
        detail: {
          scale: _this.scale
        }
      });

      _this.toggleZoom(event);

      return;
    };

    this.handlePinch = function (event) {
      event.preventDefault();

      if (_this.eventType === undefined || _this.eventType === 'pinch') {
        var touches = event.touches;

        if (!_this.eventType) {
          _this.initialDistance = _this.getDistance(touches);

          var moveLeft0 = _this.moveLeft(event, 0);

          var moveLeft1 = _this.moveLeft(event, 1);

          var moveTop0 = _this.moveTop(event, 0);

          var moveTop1 = _this.moveTop(event, 1);

          _this.moveXC = (moveLeft0 + moveLeft1) / 2 - _this.initialMoveX;
          _this.moveYC = (moveTop0 + moveTop1) / 2 - _this.initialMoveY;
        }

        _this.eventType = 'pinch';
        _this.distance = _this.getDistance(touches);
        _this.scale = _this.initialScale * (_this.distance / _this.initialDistance);
        _this.moveX = _this.initialMoveX - (_this.distance / _this.initialDistance * _this.moveXC - _this.moveXC);
        _this.moveY = _this.initialMoveY - (_this.distance / _this.initialDistance * _this.moveYC - _this.moveYC);

        _this.handleLimitZoom();

        if (_this.properties.limitPan) {
          _this.limitPanY();

          _this.limitPanX();
        }

        if (_this.properties.fullImage) {
          _this.replaceImagePath();
        }

        _this.emitEvent({
          name: 'pinch',
          detail: {
            scale: _this.scale
          }
        });

        _this.transformElement(0);
      }
    };

    this.handleWheel = function (event) {
      event.preventDefault();
      var zoomFactor = event.deltaY < 0 ? _this.properties.wheelZoomFactor : -_this.properties.wheelZoomFactor;
      var newScale = _this.initialScale + zoomFactor;

      if (newScale < 1 + _this.properties.wheelZoomFactor) {
        newScale = 1;
      } else if (newScale < _this.maxScale && newScale > _this.maxScale - _this.properties.wheelZoomFactor) {
        newScale = _this.maxScale;
      }

      if (newScale < 1 || newScale > _this.maxScale) {
        return;
      }

      if (newScale === _this.scale) {
        return;
      }

      _this.getElementPosition();

      _this.scale = newScale;
      var xCenter = event.clientX - _this.elementPosition.left - _this.initialMoveX;
      var yCenter = event.clientY - _this.elementPosition.top - _this.initialMoveY;

      _this.setZoom({
        scale: newScale,
        center: [xCenter, yCenter]
      });
    };

    this.handleResize = function () {
      _this.setAutoHeight();
    };

    this.element = properties.element;
    this.elementTarget = this.element.querySelector('*').tagName;
    this.parentElement = this.element.parentElement;
    this.properties = Object.assign({}, IvyPinchDefaultProperties, properties);
    this.touches = new Touches({
      element: properties.element,
      listeners: properties.listeners,
      resize: properties.autoHeight
    });
    this.setBasicStyles();
    this.touches.on('touchstart', this.handleTouchstart);
    this.touches.on('touchend', this.handleTouchend);
    this.touches.on('mousedown', this.handleTouchstart);
    this.touches.on('mouseup', this.handleTouchend);
    this.touches.on('pan', this.handlePan);
    this.touches.on('mousemove', this.handlePan);
    this.touches.on('pinch', this.handlePinch);

    if (this.properties.wheel) {
      this.touches.on('wheel', this.handleWheel);
    }

    if (this.properties.doubleTap) {
      this.touches.on('double-tap', this.handleDoubleTap);
    }

    if (this.properties.autoHeight) {
      this.touches.on('resize', this.handleResize);
    }
  }

  var _proto = IvyPinch.prototype;

  _proto.emitEvent = function emitEvent(properties) {
    if (this.properties.eventHandler) {
      this.properties.eventHandler({
        name: properties.name,
        detail: properties.detail
      });
    }
  };

  _proto.handleLimitZoom = function handleLimitZoom() {
    var limitZoom = this.maxScale;
    var minScale = this.properties.minScale;

    if (this.scale > limitZoom || this.scale <= minScale) {
      var imageWidth = this.getImageWidth();
      var imageHeight = this.getImageHeight();
      var enlargedImageWidth = imageWidth * this.scale;
      var enlargedImageHeight = imageHeight * this.scale;
      var moveXRatio = this.moveX / (enlargedImageWidth - imageWidth);
      var moveYRatio = this.moveY / (enlargedImageHeight - imageHeight);

      if (this.scale > limitZoom) {
        this.scale = limitZoom;
      }

      if (this.scale <= minScale) {
        this.scale = minScale;
      }

      var newImageWidth = imageWidth * this.scale;
      var newImageHeight = imageHeight * this.scale;
      this.moveX = -Math.abs(moveXRatio * (newImageWidth - imageWidth));
      this.moveY = -Math.abs(-moveYRatio * (newImageHeight - imageHeight));
    }
  };

  _proto.getLimitZoom = function getLimitZoom() {
    var maxScale;

    if (this.properties.limitZoom === "original image size") {
      if (this.elementTarget === "IMG") {
        var img = this.element.getElementsByTagName("img")[0];

        if (img.naturalWidth && img.offsetWidth) {
          this.maxScale = img.naturalWidth / img.offsetWidth;
          maxScale = this.maxScale;
        }
      } else {
        this.maxScale = this.maxHtmlContentScale;
        maxScale = this.maxScale;
      }
    } else {
      this.maxScale = this.properties.limitZoom;
      maxScale = this.maxScale;
    }

    return maxScale;
  };

  _proto.moveLeft = function moveLeft(event, index) {
    if (index === void 0) {
      index = 0;
    }

    var clientX = this.getClientPosition(event, index).clientX;
    return clientX - this.elementPosition.left;
  };

  _proto.moveTop = function moveTop(event, index) {
    if (index === void 0) {
      index = 0;
    }

    var clientY = this.getClientPosition(event, index).clientY;
    return clientY - this.elementPosition.top;
  };

  _proto.centeringImage = function centeringImage() {
    var img = this.element.getElementsByTagName(this.elementTarget)[0];
    var initialMoveX = this.moveX;
    var initialMoveY = this.moveY;

    if (this.moveY > 0) {
      this.moveY = 0;
    }

    if (this.moveX > 0) {
      this.moveX = 0;
    }

    if (img) {
      this.limitPanY();
      this.limitPanX();
    }

    if (img && this.scale < 1) {
      if (this.moveX < this.element.offsetWidth * (1 - this.scale)) {
        this.moveX = this.element.offsetWidth * (1 - this.scale);
      }
    }

    return initialMoveX !== this.moveX || initialMoveY !== this.moveY;
  };

  _proto.limitPanY = function limitPanY() {
    var imgHeight = this.getImageHeight();
    var scaledImgHeight = imgHeight * this.scale;
    var parentHeight = this.parentElement.offsetHeight;
    var elementHeight = this.element.offsetHeight;

    if (scaledImgHeight < parentHeight) {
      this.moveY = (parentHeight - elementHeight * this.scale) / 2;
    } else {
      var imgOffsetTop = (imgHeight - elementHeight) * this.scale / 2;

      if (this.moveY > imgOffsetTop) {
        this.moveY = imgOffsetTop;
      } else if (scaledImgHeight + Math.abs(imgOffsetTop) - parentHeight + this.moveY < 0) {
        this.moveY = -(scaledImgHeight + Math.abs(imgOffsetTop) - parentHeight);
      }
    }
  };

  _proto.limitPanX = function limitPanX() {
    var imgWidth = this.getImageWidth();
    var scaledImgWidth = imgWidth * this.scale;
    var parentWidth = this.parentElement.offsetWidth;
    var elementWidth = this.element.offsetWidth;

    if (scaledImgWidth < parentWidth) {
      this.moveX = (parentWidth - elementWidth * this.scale) / 2;
    } else {
      var imgOffsetLeft = (imgWidth - elementWidth) * this.scale / 2;

      if (this.moveX > imgOffsetLeft) {
        this.moveX = imgOffsetLeft;
      } else if (scaledImgWidth + Math.abs(imgOffsetLeft) - parentWidth + this.moveX < 0) {
        this.moveX = -(imgWidth * this.scale + Math.abs(imgOffsetLeft) - parentWidth);
      }
    }
  };

  _proto.setBasicStyles = function setBasicStyles() {
    this.element.style.display = 'flex';
    this.element.style.alignItems = 'center';
    this.element.style.justifyContent = 'center';
    this.element.style.transformOrigin = '0 0';
    this.setImageSize();
    this.setDraggableImage();
  };

  _proto.removeBasicStyles = function removeBasicStyles() {
    this.element.style.display = '';
    this.element.style.alignItems = '';
    this.element.style.justifyContent = '';
    this.element.style.transformOrigin = '';
    this.removeImageSize();
    this.removeDraggableImage();
  };

  _proto.setDraggableImage = function setDraggableImage() {
    var imgElement = this.getImageElement();

    if (imgElement) {
      imgElement.draggable = this.properties.draggableImage;
    }
  };

  _proto.removeDraggableImage = function removeDraggableImage() {
    var imgElement = this.getImageElement();

    if (imgElement) {
      imgElement.draggable = !this.properties.draggableImage;
    }
  };

  _proto.setImageSize = function setImageSize() {
    var imgElement = this.element.getElementsByTagName(this.elementTarget);

    if (imgElement.length) {
      imgElement[0].style.maxWidth = '100%';
      imgElement[0].style.maxHeight = '100%';
      this.setAutoHeight();
    }
  };

  _proto.setAutoHeight = function setAutoHeight() {
    var imgElement = this.element.getElementsByTagName(this.elementTarget);

    if (!this.properties.autoHeight || !imgElement.length) {
      return;
    }

    var imgNaturalWidth = imgElement[0].getAttribute("width");
    var imgNaturalHeight = imgElement[0].getAttribute("height");
    var sizeRatio = imgNaturalWidth / imgNaturalHeight;
    var parentWidth = this.parentElement.offsetWidth;
    imgElement[0].style.maxHeight = parentWidth / sizeRatio + "px";
  };

  _proto.removeImageSize = function removeImageSize() {
    var imgElement = this.element.getElementsByTagName(this.elementTarget);

    if (imgElement.length) {
      imgElement[0].style.maxWidth = '';
      imgElement[0].style.maxHeight = '';
    }
  };

  _proto.getElementPosition = function getElementPosition() {
    this.elementPosition = this.element.parentElement.getBoundingClientRect();
  };

  _proto.getTouchstartPosition = function getTouchstartPosition(event) {
    var _this$getClientPositi2 = this.getClientPosition(event),
        clientX = _this$getClientPositi2.clientX,
        clientY = _this$getClientPositi2.clientY;

    this.startX = clientX - this.elementPosition.left;
    this.startY = clientY - this.elementPosition.top;
  };

  _proto.getClientPosition = function getClientPosition(event, index) {
    if (index === void 0) {
      index = 0;
    }

    var clientX;
    var clientY;

    if (event.type === "touchstart" || event.type === "touchmove") {
      clientX = event.touches[index].clientX;
      clientY = event.touches[index].clientY;
    }

    if (event.type === "mousedown" || event.type === "mousemove") {
      clientX = event.clientX;
      clientY = event.clientY;
    }

    return {
      clientX: clientX,
      clientY: clientY
    };
  };

  _proto.resetScale = function resetScale() {
    this.scale = 1;
    this.moveX = 0;
    this.moveY = 0;
    this.updateInitialValues();
    this.transformElement(this.properties.transitionDuration);
  };

  _proto.updateInitialValues = function updateInitialValues() {
    this.initialScale = this.scale;
    this.initialMoveX = this.moveX;
    this.initialMoveY = this.moveY;
  };

  _proto.getDistance = function getDistance(touches) {
    return Math.sqrt(Math.pow(touches[0].pageX - touches[1].pageX, 2) + Math.pow(touches[0].pageY - touches[1].pageY, 2));
  };

  _proto.getImageHeight = function getImageHeight() {
    var img = this.element.getElementsByTagName(this.elementTarget)[0];
    return img.offsetHeight;
  };

  _proto.getImageWidth = function getImageWidth() {
    var img = this.element.getElementsByTagName(this.elementTarget)[0];
    return img.offsetWidth;
  };

  _proto.transformElement = function transformElement(duration) {
    this.element.style.transition = "all " + duration + "ms";
    this.element.style.transform = "matrix(" + Number(this.scale) + ", 0, 0, " + Number(this.scale) + ", " + Number(this.moveX) + ", " + Number(this.moveY) + ")";
  };

  _proto.isTouchScreen = function isTouchScreen() {
    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

    if ('ontouchstart' in window) {
      return true;
    }

    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
    return this.getMatchMedia(query);
  };

  _proto.getMatchMedia = function getMatchMedia(query) {
    return window.matchMedia(query).matches;
  };

  _proto.isDragging = function isDragging() {
    if (this.properties.disablePan) {
      return false;
    }

    var imgHeight = this.getImageHeight();
    var imgWidth = this.getImageWidth();

    if (this.scale > 1) {
      return imgHeight * this.scale > this.parentElement.offsetHeight || imgWidth * this.scale > this.parentElement.offsetWidth;
    }

    if (this.scale === 1) {
      return imgHeight > this.parentElement.offsetHeight || imgWidth > this.parentElement.offsetWidth;
    }

    return undefined;
  };

  _proto.replaceImagePath = function replaceImagePath() {
    var _this2 = this;

    var minScale = this.properties.fullImage.minScale;

    if (minScale) {
      if (this.scale < minScale) {
        return;
      }
    }

    if (!minScale && this.properties.limitZoom === "original image size") {
      if (this.scale < this.maxScale) {
        return;
      }
    }

    var img;
    var imgTemp;

    if (this.elementTarget === "IMG") {
      img = this.element.getElementsByTagName("img")[0];
      imgTemp = new Image();

      if (img.src !== this.properties.fullImage.path) {
        this.emitEvent({
          name: 'startLoadingFullImage',
          detail: {
            url: img.src,
            fullImagePath: this.properties.fullImage.path
          }
        });
        imgTemp.src = this.properties.fullImage.path;

        imgTemp.onload = function () {
          _this2.emitEvent({
            name: 'loadedFullImage',
            detail: {
              url: img.src,
              fullImagePath: _this2.properties.fullImage.path
            }
          });

          img.src = _this2.properties.fullImage.path;

          _this2.pollLimitZoom();
        };
      }
    }
  };

  _proto.pollLimitZoom = function pollLimitZoom() {
    var _this3 = this;

    var poll = setInterval(function () {
      if (_this3.getLimitZoom()) {
        clearInterval(poll);
      }
    }, 10);
  };

  _proto.getImageElement = function getImageElement() {
    var imgElement = this.element.getElementsByTagName(this.elementTarget);

    if (imgElement.length) {
      return imgElement[0];
    }
  };

  _proto.setMoveX = function setMoveX(value, transitionDuration) {
    this.moveX = value;
    this.transformElement(transitionDuration || this.properties.transitionDuration);
  };

  _proto.setMoveY = function setMoveY(value, transitionDuration) {
    this.moveY = value;
    this.transformElement(transitionDuration || this.properties.transitionDuration);
  };

  _proto.toggleZoom = function toggleZoom(event) {
    if (event === void 0) {
      event = false;
    }

    console.log("toggleZoom", this.initialScale);

    if (this.initialScale === 1) {
      if (event && event.changedTouches) {
        if (this.properties.doubleTapScale === undefined) {
          return;
        }

        var changedTouches = event.changedTouches;
        this.scale = this.initialScale * this.properties.doubleTapScale;
        this.moveX = this.initialMoveX - (changedTouches[0].clientX - this.elementPosition.left) * (this.properties.doubleTapScale - 1);
        this.moveY = this.initialMoveY - (changedTouches[0].clientY - this.elementPosition.top) * (this.properties.doubleTapScale - 1);
      } else {
        this.scale = this.initialScale * (this.properties.zoomControlScale + 1);
        console.log("this.properties.zoomControlScale", this.properties.zoomControlScale);
        this.moveX = this.initialMoveX - this.element.offsetWidth * (this.scale - 1) / 2;
        this.moveY = this.initialMoveY - this.element.offsetHeight * (this.scale - 1) / 2;
      }

      if (this.properties.fullImage) {
        this.replaceImagePath();
      }

      this.centeringImage();
      this.updateInitialValues();
      this.emitEvent({
        name: 'zoom-in',
        detail: {
          scale: this.scale
        }
      });
      this.transformElement(this.properties.transitionDuration);
    } else {
      this.emitEvent({
        name: 'zoom-out',
        detail: {
          scale: this.scale
        }
      });
      this.resetScale();
    }
  };

  _proto.setZoom = function setZoom(properties) {
    this.scale = properties.scale;
    var xCenter;
    var yCenter;
    var visibleAreaWidth = this.element.offsetWidth;
    var visibleAreaHeight = this.element.offsetHeight;
    var scalingPercent = visibleAreaWidth * this.scale / (visibleAreaWidth * this.initialScale);

    if (properties.center) {
      xCenter = properties.center[0];
      yCenter = properties.center[1];
    } else {
      xCenter = visibleAreaWidth / 2 - this.initialMoveX;
      yCenter = visibleAreaHeight / 2 - this.initialMoveY;
    }

    this.moveX = this.initialMoveX - (scalingPercent * xCenter - xCenter);
    this.moveY = this.initialMoveY - (scalingPercent * yCenter - yCenter);

    if (this.properties.fullImage) {
      this.replaceImagePath();
    }

    this.centeringImage();
    this.updateInitialValues();
    this.transformElement(this.properties.transitionDuration);
  };

  _proto.alignImage = function alignImage() {
    var isMoveChanged = this.centeringImage();

    if (isMoveChanged) {
      this.updateInitialValues();
      this.transformElement(this.properties.transitionDuration);
    }
  };

  _proto.setTransform = function setTransform(properties) {
    var transitionDuration = properties.transitionDuration || this.properties.transitionDuration;

    if (properties.x) {
      this.moveX = properties.x;
    }

    if (properties.y) {
      this.moveY = properties.y;
    }

    if (properties.scale) {
      this.scale = properties.scale;
    }

    if (this.properties.fullImage) {
      this.replaceImagePath();
    }

    this.updateInitialValues();
    this.transformElement(transitionDuration);
  };

  _proto.destroy = function destroy() {
    this.removeBasicStyles();
    this.touches.destroy();
  };

  return IvyPinch;
}();

var defaultProperties = {
  transitionDuration: 200,
  doubleTap: true,
  doubleTapScale: 2,
  limitZoom: "original image size",
  autoZoomOut: false,
  disabled: false,
  overflow: "hidden",
  zoomControlScale: 1,
  backgroundColor: "rgba(0,0,0,0.85)",
  minScale: 0,
  disableZoomControl: "auto",
  listeners: "mouse and touch",
  wheel: true,
  wheelZoomFactor: 0.2,
  draggableImage: false
};

var PinchZoom = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(PinchZoom, _React$Component);

  function PinchZoom(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      isZoomedIn: false
    };
    _this.contentRef = React.createRef();

    var changedOptions = _this.getProperties(_this.props);

    _this.applyOptionsDefault(defaultProperties, changedOptions);

    _this.setStyles();

    return _this;
  }

  var _proto = PinchZoom.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.init();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.ivyPinch.destroy();
  };

  _proto.isDragging = function isDragging() {
    if (!this.ivyPinch) {
      return undefined;
    }

    return this.ivyPinch.isDragging();
  };

  _proto.isControl = function isControl() {
    if (this._properties['disabled']) {
      return false;
    }

    if (!this._properties) {
      return undefined;
    }

    if (this._properties['disableZoomControl'] === "disable") {
      return false;
    }

    if (this.isTouchScreen && this._properties['disableZoomControl'] === "auto") {
      return false;
    }

    return true;
  };

  _proto.getScale = function getScale() {
    if (!this.ivyPinch) {
      return undefined;
    }

    return this.ivyPinch.scale;
  };

  _proto.init = function init() {
    if (this._properties['disabled']) {
      return;
    }

    this._properties['element'] = this.contentRef.current;
    this._properties['eventHandler'] = this.myEventHandler;
    this.ivyPinch = new IvyPinch(this._properties);
    this.pollLimitZoom();
  };

  _proto.getProperties = function getProperties(changes) {
    var properties = {};

    for (var prop in changes) {
      if (changes[prop] !== undefined) {
        if (prop !== 'properties') {
          properties[prop] = changes[prop];
        }

        if (prop === 'properties') {
          properties = changes[prop];
        }
      }
    }

    return properties;
  };

  _proto.applyOptionsDefault = function applyOptionsDefault(defaultOptions, options) {
    this._properties = Object.assign({}, defaultOptions, options);
  };

  _proto.myEventHandler = function myEventHandler(event) {
    if (event.name === "wheel") {
      this.isZoomedIn = event.detail.scale > 1;
    }
  };

  _proto.toggleZoom = function toggleZoom() {
    this.ivyPinch.toggleZoom();

    if (this.getScale() > 1) {
      this.setState({
        isZoomedIn: true
      });
    } else {
      this.setState({
        isZoomedIn: false
      });
    }
  };

  _proto.pollLimitZoom = function pollLimitZoom() {
    this.ivyPinch.pollLimitZoom();
  };

  _proto.setStyles = function setStyles() {
    this.styleObject = {
      'overflow': this._properties['overflow'],
      'backgroundColor': this._properties['backgroundColor']
    };
  };

  _proto.render = function render() {
    var _this2 = this;

    return React.createElement("div", {
      className: "pinch-zoom-wrapper",
      style: this.styleObject
    }, this.state.isZoomedIn, React.createElement("div", {
      className: "pinch-zoom-content " + (this.state.isZoomedIn ? 'pz-zoom-button-out' : null),
      ref: this.contentRef
    }, React.createElement("img", {
      src: this.props.imgPath
    })), React.createElement("div", {
      className: "pz-zoom-button pz-zoom-control-position-bottom " + (this.state.isZoomedIn ? 'pz-zoom-button-out' : null),
      onClick: function onClick() {
        return _this2.toggleZoom();
      }
    }));
  };

  _createClass(PinchZoom, [{
    key: "isTouchScreen",
    get: function get() {
      var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');

      var mq = function mq(query) {
        return window.matchMedia(query).matches;
      };

      if ('ontouchstart' in window) {
        return true;
      }

      var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
      return mq(query);
    }
  }]);

  return PinchZoom;
}(React.Component);

exports.PinchZoom = PinchZoom;
//# sourceMappingURL=index.js.map