react-flexigrid/lib/dom/MouseMoveTracker.js

A React table component designed to allow presenting millions of rows of data.

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import { requestAnimationFrame, cancelAnimationFrame } from '../utils';

var MouseMoveTracker = function () {
  function MouseMoveTracker(domNode, onMouseMoveCallback, onMouseMoveEndCallback) {
    var _this = this;

    _classCallCheck(this, MouseMoveTracker);

    this.onMouseMove = function (e) {
      var x = e.clientX;
      var y = e.clientY;

      _this.deltaX += x - _this.x;
      _this.deltaY += y - _this.y;

      if (_this.animationFrameID === null) {
        _this.animationFrameID = requestAnimationFrame(_this.triggerOnMouseMoveCallback);
      }

      _this.x = x;
      _this.y = y;

      e.preventDefault();
    };

    this.onMouseUp = function () {
      if (_this.animationFrameID) {
        cancelAnimationFrame(_this.animationFrameID);
        _this.triggerOnMouseMoveCallback();
      }

      _this.triggerOnMouseMoveEndCallback(false);
    };

    this.triggerOnMouseMoveCallback = function () {
      _this.animationFrameID = null;
      _this.onMouseMoveCallback(_this.deltaX, _this.deltaY);
      _this.deltaX = 0;
      _this.deltaY = 0;
    };

    this.triggerOnMouseMoveEndCallback = function (cancelMove) {
      _this.onMouseMoveEndCallback(cancelMove);
    };

    this.domNode = domNode;
    this.onMouseMoveCallback = onMouseMoveCallback;
    this.onMouseMoveEndCallback = onMouseMoveEndCallback;

    this.dragging = false;
    this.animationFrameID = null;
  }

  MouseMoveTracker.prototype.capture = function capture(e) {
    if (!this.captured) {
      this.mouseMoveToken = addEventListener(this.domNode, 'mousemove', this.onMouseMove);
      this.mouseUpToken = addEventListener(this.domNode, 'mouseup', this.onMouseUp);
      // this.mouseLeaveToken = addEventListener(this.domNode, 'mouseleave', this.onMouseEnd)
      // this.mouseOutToken = addEventListener(this.domNode, 'mouseout', this.onMouseEnd)
    }

    this.captured = true;

    if (!this.dragging) {
      this.x = e.clientX;
      this.y = e.clientY;
      this.deltaX = 0;
      this.deltaY = 0;
      this.dragging = true;
    }

    e.preventDefault();
  };

  MouseMoveTracker.prototype.release = function release() {
    if (this.captured) {
      this.mouseMoveToken.remove();
      this.mouseMoveToken = null;
      this.mouseUpToken.remove();
      this.mouseUpToken = null;
      // this.mouseLeaveToken.remove()
      // this.mouseLeaveToken = null
      // this.mouseOutToken.remove()
      // this.mouseOutToken = null
    }

    this.captured = false;

    if (this.dragging) {
      this.dragging = false;
      this.x = null;
      this.y = null;
    }
  };

  MouseMoveTracker.prototype.isDragging = function isDragging() {
    return this.dragging;
  };

  // onMouseEnd = () => {
  //   this.triggerMouseMoveEndCallback(true)
  // }

  return MouseMoveTracker;
}();

export default MouseMoveTracker;