react-pinch-zoom-pan/lib/ReactPinchZoomPan.js

'use strict';

var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _rx = require('rx');

var _rx2 = _interopRequireDefault(_rx);

var _lodash = require('lodash.throttle');

var _lodash2 = _interopRequireDefault(_lodash);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function eventPreventDefault(event) {
  event.preventDefault();
}

function isTouch() {
  return 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
}

function hasTwoTouchPoints(event) {
  if (isTouch()) return event.touches && event.touches.length === 2;else return event.altKey;
}

function logger(subject) {
  console.log(subject);
}

function between(min, max, val) {
  return Math.min(max, Math.max(min, val));
}
function inverse(val) {
  return val * -1;
}

function normalizeTouch(e) {
  var p = isTouch() ? e.touches[0] : e;
  return { x: p.clientX, y: p.clientY };
}

var ReactPinchZoomPan = function (_Component) {
  _inherits(ReactPinchZoomPan, _Component);

  function ReactPinchZoomPan(props) {
    _classCallCheck(this, ReactPinchZoomPan);

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ReactPinchZoomPan).call(this, props));

    _this.state = { obj: {
        scale: 1,
        x: 0,
        y: 0
      } };
    return _this;
  }

  _createClass(ReactPinchZoomPan, [{
    key: 'resize',
    value: function resize() {
      if (this.refs.root) {
        var domNode = this.refs.root;
        this.setState({
          size: { width: domNode.offsetWidth, height: domNode.offsetHeight }
        });
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.handlePinch();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      if (this.pinchSubscription) {
        this.pinchSubscription.dispose();
      }
      window.removeEventListener('resize', this.resize);
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      this.resize();
      window.addEventListener('resize', (0, _lodash2.default)(function () {
        return _this2.resize();
      }, 500));
    }
  }, {
    key: 'handlePinch',
    value: function handlePinch() {
      var _this3 = this;

      var touchStart = _rx2.default.Observable.fromEvent(window, isTouch() ? 'touchstart' : 'mousedown');
      var touchMove = _rx2.default.Observable.fromEvent(window, isTouch() ? 'touchmove' : 'mousemove');
      var touchEnd = _rx2.default.Observable.fromEvent(window, isTouch() ? 'touchend' : 'mouseup');

      function translatePos(point, size) {
        return {
          x: point.x - size.width / 2,
          y: point.y - size.height / 2
        };
      }

      function momentum(newValue, oldValue) {
        return oldValue / newValue * newValue * 1.01;
      }

      var pinch = touchStart.tap(eventPreventDefault).flatMap(function (md) {
        var startPoint = normalizeTouch(md);
        var size = _this3.state.size;

        return touchMove.map(function (mm) {
          var _state$obj = _this3.state.obj;
          var scale = _state$obj.scale;
          var x = _state$obj.x;
          var y = _state$obj.y;
          var maxScale = _this3.props.maxScale;

          var movePoint = normalizeTouch(mm);

          if (hasTwoTouchPoints(mm)) {
            var scaleFactor = undefined;
            if (isTouch()) {
              scaleFactor = mm.scale;
            } else {
              scaleFactor = movePoint.x < size.width / 2 ? scale + (translatePos(startPoint, size).x - translatePos(movePoint, size).x) / size.width : scale + (translatePos(movePoint, size).x - translatePos(startPoint, size).x) / size.width;
            }
            scaleFactor = between(1, maxScale, scaleFactor);
            return {
              scale: scaleFactor,
              x: scaleFactor < 1.01 ? 0 : x,
              y: scaleFactor < 1.01 ? 0 : y
            };
          } else {
            var scaleFactorX = (size.width * scale - size.width) / 4;
            var scaleFactorY = (size.height * scale - size.height) / 4;
            return {
              x: between(inverse(scaleFactorX), scaleFactorX, movePoint.x - startPoint.x),
              y: between(inverse(scaleFactorY), scaleFactorY, movePoint.y - startPoint.y)
            };
          }
        }).takeUntil(touchEnd);
      });
      //.tap(logger)

      this.pinchSubscription = pinch.subscribe(function (newObject) {
        requestAnimationFrame(function () {
          _this3.setState({
            obj: Object.assign({}, _this3.state.obj, newObject)
          });
        });
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state$obj2 = this.state.obj;
      var scale = _state$obj2.scale;
      var x = _state$obj2.x;
      var y = _state$obj2.y;

      return _react2.default.createElement(
        'div',
        { ref: 'root' },
        this.props.render({
          x: x.toFixed(2),
          y: y.toFixed(2),
          scale: scale.toFixed(2)
        })
      );
    }
  }]);

  return ReactPinchZoomPan;
}(_react.Component);

ReactPinchZoomPan.defaultProps = {
  maxScale: 2
};

ReactPinchZoomPan.propTypes = {
  render: _react.PropTypes.func,
  maxScale: _react.PropTypes.number
};

exports.default = ReactPinchZoomPan;