react-image-zoom-pan/dist/Utils.js

Enables zooming and panning an image, both mobile and desktop.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.setRef = setRef;
exports.getRequiredImagePosition = exports.getImageOverflow = exports.tryCancelEvent = exports.getMinScale = exports.getAutofitScale = exports.isEqualTransform = exports.getContainerDimensions = exports.getDimensions = exports.isEqualDimensions = exports.getPinchLength = exports.getPinchMidpoint = exports.getRelativePosition = exports.negate = exports.constrain = exports.snapToTarget = void 0;

var _reselect = require("reselect");

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 snapToTarget = function snapToTarget(value, target, tolerance) {
  var withinRange = Math.abs(target - value) < tolerance;
  return withinRange ? target : value;
};

exports.snapToTarget = snapToTarget;

var constrain = function constrain(lowerBound, upperBound, value) {
  return Math.min(upperBound, Math.max(lowerBound, value));
};

exports.constrain = constrain;

var negate = function negate(value) {
  return value * -1;
};

exports.negate = negate;

var getRelativePosition = function getRelativePosition(_ref, relativeToElement) {
  var clientX = _ref.clientX,
      clientY = _ref.clientY;
  var rect = relativeToElement.getBoundingClientRect();
  return {
    x: clientX - rect.left,
    y: clientY - rect.top
  };
};

exports.getRelativePosition = getRelativePosition;

var getPinchMidpoint = function getPinchMidpoint(_ref2) {
  var _ref3 = _slicedToArray(_ref2, 2),
      touch1 = _ref3[0],
      touch2 = _ref3[1];

  return {
    x: (touch1.clientX + touch2.clientX) / 2,
    y: (touch1.clientY + touch2.clientY) / 2
  };
};

exports.getPinchMidpoint = getPinchMidpoint;

var getPinchLength = function getPinchLength(_ref4) {
  var _ref5 = _slicedToArray(_ref4, 2),
      touch1 = _ref5[0],
      touch2 = _ref5[1];

  return Math.sqrt(Math.pow(touch1.clientY - touch2.clientY, 2) + Math.pow(touch1.clientX - touch2.clientX, 2));
};

exports.getPinchLength = getPinchLength;

function setRef(ref, value) {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

;

var isEqualDimensions = function isEqualDimensions(dimensions1, dimensions2) {
  if (dimensions1 === dimensions2 === undefined) {
    return true;
  }

  if (dimensions1 === undefined || dimensions2 === undefined) {
    return false;
  }

  return dimensions1.width === dimensions2.width && dimensions1.height === dimensions2.height;
};

exports.isEqualDimensions = isEqualDimensions;

var getDimensions = function getDimensions(object) {
  if (object === undefined) {
    return undefined;
  }

  return {
    width: object.offsetWidth || object.width,
    height: object.offsetHeight || object.height
  };
};

exports.getDimensions = getDimensions;

var getContainerDimensions = function getContainerDimensions(image) {
  return {
    width: image.parentNode.offsetWidth,
    height: image.parentNode.offsetHeight
  };
};

exports.getContainerDimensions = getContainerDimensions;

var isEqualTransform = function isEqualTransform(transform1, transform2) {
  if (transform1 === transform2 === undefined) {
    return true;
  }

  if (transform1 === undefined || transform2 === undefined) {
    return false;
  }

  return round(transform1.top, 5) === round(transform2.top, 5) && round(transform1.left, 5) === round(transform2.left, 5) && round(transform1.scale, 5) === round(transform2.scale, 5);
};

exports.isEqualTransform = isEqualTransform;

var getAutofitScale = function getAutofitScale(containerDimensions, imageDimensions) {
  var _ref6 = imageDimensions || {},
      imageWidth = _ref6.width,
      imageHeight = _ref6.height;

  if (!(imageWidth > 0 && imageHeight > 0)) {
    return 1;
  }

  return Math.min(containerDimensions.width / imageWidth, containerDimensions.height / imageHeight, 1);
};

exports.getAutofitScale = getAutofitScale;
var getMinScale = (0, _reselect.createSelector)(function (state) {
  return state.containerDimensions;
}, function (state) {
  return state.imageDimensions;
}, function (state, props) {
  return props.minScale;
}, function (containerDimensions, imageDimensions, minScaleProp) {
  return String(minScaleProp).toLowerCase() === 'auto' ? getAutofitScale(containerDimensions, imageDimensions) : minScaleProp || 1;
});
exports.getMinScale = getMinScale;

function round(number, precision) {
  if (precision && number !== null && number !== undefined) {
    // Shift with exponential notation to avoid floating-point issues.
    // See [MDN](https://mdn.io/round#Examples) for more details.
    var pair = (String(number) + 'e').split('e'),
        value = Math.round(pair[0] + 'e' + (+pair[1] + precision));
    pair = (String(value) + 'e').split('e');
    return +(pair[0] + 'e' + (+pair[1] - precision));
  }

  return Math.round(number);
}

;

var tryCancelEvent = function tryCancelEvent(event) {
  if (event.cancelable === false) {
    return false;
  }

  event.preventDefault();
  return true;
};

exports.tryCancelEvent = tryCancelEvent;

function calculateOverflowLeft(left, scale, imageDimensions, containerDimensions) {
  var overflow = negate(left);
  return overflow > 0 ? overflow : 0;
}

function calculateOverflowTop(top, scale, imageDimensions, containerDimensions) {
  var overflow = negate(top);
  return overflow > 0 ? overflow : 0;
}

function calculateOverflowRight(left, scale, imageDimensions, containerDimensions) {
  var overflow = Math.max(0, scale * imageDimensions.width - containerDimensions.width);
  return overflow > 0 ? overflow - negate(left) : 0;
}

function calculateOverflowBottom(top, scale, imageDimensions, containerDimensions) {
  var overflow = Math.max(0, scale * imageDimensions.height - containerDimensions.height);
  return overflow > 0 ? overflow - negate(top) : 0;
}

var getImageOverflow = function getImageOverflow(top, left, scale, imageDimensions, containerDimensions) {
  return {
    top: calculateOverflowTop(top, scale, imageDimensions, containerDimensions),
    right: calculateOverflowRight(left, scale, imageDimensions, containerDimensions),
    bottom: calculateOverflowBottom(top, scale, imageDimensions, containerDimensions),
    left: calculateOverflowLeft(left, scale, imageDimensions, containerDimensions)
  };
};

exports.getImageOverflow = getImageOverflow;

var getRequiredImagePosition = function getRequiredImagePosition(position, scale, imageDimensions, containerDimensions) {
  var overflow = getImageOverflow();
};

exports.getRequiredImagePosition = getRequiredImagePosition;