react-misc-toolbox/dist/PointerUser.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _recompose = require('recompose');

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

var PointerUser = function PointerUser(_ref) {
  var threshold = _ref.threshold,
      children = _ref.children,
      updateState = _ref.updateState,
      resetState = _ref.resetState,
      state = _ref.state,
      _ref$state = _ref.state,
      mainDelta = _ref$state.mainDelta,
      initLeft = _ref$state.initLeft,
      initTop = _ref$state.initTop,
      previousLeft = _ref$state.previousLeft,
      previousTop = _ref$state.previousTop,
      isDragging = _ref$state.isDragging,
      hasCapture = _ref$state.hasCapture,
      delta = _ref$state.delta;

  var onDown = function () {
    var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(e) {
      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              e.target.setPointerCapture(e.pointerId);
              //extractPositionDelta(e)
              _context.next = 3;
              return updateState({ initLeft: e.clientX, initTop: e.clientY });

            case 3:
              _context.next = 5;
              return updateState({ isDragging: true });

            case 5:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    }));

    return function onDown(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  var extractPositionDelta = function () {
    var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2(e) {
      var left, top, delta, mainDelta;
      return _regenerator2.default.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              left = e.clientX;
              top = e.clientY;
              delta = { left: left - previousLeft, top: top - previousTop };
              mainDelta = {
                left: left - initLeft,
                top: top - initTop
              };
              _context2.next = 6;
              return updateState({ previousLeft: left });

            case 6:
              _context2.next = 8;
              return updateState({ previousTop: top });

            case 8:
              _context2.next = 10;
              return updateState({ delta: delta });

            case 10:
              _context2.next = 12;
              return updateState({ mainDelta: mainDelta });

            case 12:

              console.log(delta, mainDelta);
              return _context2.abrupt('return', delta);

            case 14:
            case 'end':
              return _context2.stop();
          }
        }
      }, _callee2, undefined);
    }));

    return function extractPositionDelta(_x2) {
      return _ref3.apply(this, arguments);
    };
  }();
  var onMove = function onMove(e) {
    //console.log(`onMove state: ${JSON.stringify(state)}`)
    if (!isDragging) {
      return;
    }

    var _extractPositionDelta = extractPositionDelta(e),
        left = _extractPositionDelta.left,
        top = _extractPositionDelta.top;
    //console.log(`onMove left: ${left}, top: ${top}, state: ${JSON.stringify(state)}`)

  };
  var onUp = function () {
    var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3(e) {
      return _regenerator2.default.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              _context3.next = 2;
              return updateState({ isDragging: false });

            case 2:
              _context3.next = 4;
              return updateState({ mainDelta: { left: 0, top: 0 } });

            case 4:
              console.log('onUp left: ' + (0, _stringify2.default)(state));

            case 5:
            case 'end':
              return _context3.stop();
          }
        }
      }, _callee3, undefined);
    }));

    return function onUp(_x3) {
      return _ref4.apply(this, arguments);
    };
  }();
  var onGotCapture = function onGotCapture() {
    updateState({ hasCapture: true });
  };
  var onLostCapture = function onLostCapture() {
    updateState({ hasCapture: false });
  };
  return children({
    onDown: onDown,
    onMove: onMove,
    onUp: onUp,
    onGotCapture: onGotCapture,
    onLostCapture: onLostCapture,
    hasCapture: hasCapture,
    mainDelta: mainDelta,
    previousLeft: previousLeft,
    previousTop: previousTop,
    delta: delta,
    initLeft: initLeft,
    initTop: initTop,
    updateState: updateState
  });
};

PointerUser.propTypes = {};
var mapStateToProps = function mapStateToProps(state) {
  return {};
};

var initialState = {
  hasCapture: false,
  isDragging: false,
  previousLeft: 0,
  initLeft: 0,
  previousTop: 0,
  initTop: 0,
  delta: {
    left: 0,
    top: 0
  },
  mainDelta: {
    left: 0,
    top: 0
  }
};

var enhance = (0, _recompose.compose)((0, _recompose.withState)('state', 'setState', initialState), (0, _recompose.withHandlers)({
  updateState: function updateState(_ref5) {
    var state = _ref5.state,
        setState = _ref5.setState;
    return function (patch) {
      return setState((0, _extends3.default)({}, state, patch));
    };
  },
  resetState: function resetState(_ref6) {
    var setState = _ref6.setState;
    return function () {
      return setState({ initialState: initialState });
    };
  }
})
//onlyUpdateForKeys([``])
// connect(mapStateToProps, {})
);

exports.default = enhance(PointerUser);