@data-ui/xy-chart/lib/utils/drag/Drag.js

A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _event = require("@vx/event");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

var propTypes = {
  children: _propTypes.default.func.isRequired,
  width: _propTypes.default.number.isRequired,
  height: _propTypes.default.number.isRequired,
  captureDragArea: _propTypes.default.bool,
  resetOnStart: _propTypes.default.bool,
  onDragStart: _propTypes.default.func,
  onDragMove: _propTypes.default.func.isRequired,
  onDragEnd: _propTypes.default.func.isRequired
};
var defaultProps = {
  captureDragArea: true,
  resetOnStart: false,
  onDragStart: null
};

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

  function Drag(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      x: undefined,
      y: undefined,
      dx: 0,
      dy: 0,
      isDragging: false
    };
    _this.dragEnd = _this.dragEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.dragMove = _this.dragMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.dragStart = _this.dragStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  var _proto = Drag.prototype;

  _proto.dragStart = function dragStart(event) {
    var _this$props = this.props,
        onDragStart = _this$props.onDragStart,
        resetOnStart = _this$props.resetOnStart;
    var _this$state = this.state,
        dx = _this$state.dx,
        dy = _this$state.dy;
    var point = (0, _event.localPoint)(event);

    var nextState = _extends({}, this.state, {
      isDragging: true,
      dx: resetOnStart ? 0 : dx,
      dy: resetOnStart ? 0 : dy,
      x: resetOnStart ? point.x : -dx + point.x,
      y: resetOnStart ? point.y : -dy + point.y
    });

    if (onDragStart) onDragStart(_extends({}, nextState, {
      event: event
    }));
    this.setState(function () {
      return nextState;
    });
  };

  _proto.dragMove = function dragMove(event) {
    var onDragMove = this.props.onDragMove;
    var _this$state2 = this.state,
        x = _this$state2.x,
        y = _this$state2.y,
        isDragging = _this$state2.isDragging;
    if (!isDragging) return;
    var point = (0, _event.localPoint)(event);

    var nextState = _extends({}, this.state, {
      isDragging: true,
      dx: -(x - point.x),
      dy: -(y - point.y)
    });

    if (onDragMove) onDragMove(_extends({}, nextState, {
      event: event
    }));
    this.setState(function () {
      return nextState;
    });
  };

  _proto.dragEnd = function dragEnd(event) {
    var onDragEnd = this.props.onDragEnd;

    var nextState = _extends({}, this.state, {
      isDragging: false
    });

    if (onDragEnd) onDragEnd(_extends({}, nextState, {
      event: event
    }));
    this.setState(function () {
      return nextState;
    });
  };

  _proto.render = function render() {
    var _this$state3 = this.state,
        x = _this$state3.x,
        y = _this$state3.y,
        dx = _this$state3.dx,
        dy = _this$state3.dy,
        isDragging = _this$state3.isDragging;
    var _this$props2 = this.props,
        children = _this$props2.children,
        width = _this$props2.width,
        height = _this$props2.height,
        captureDragArea = _this$props2.captureDragArea;
    return _react.default.createElement("g", null, isDragging && captureDragArea && _react.default.createElement("rect", {
      width: width,
      height: height,
      onMouseMove: this.dragMove,
      onMouseUp: this.dragEnd,
      fill: "transparent"
    }), children({
      x: x,
      y: y,
      dx: dx,
      dy: dy,
      isDragging: isDragging,
      dragEnd: this.dragEnd,
      dragMove: this.dragMove,
      dragStart: this.dragStart
    }));
  };

  return Drag;
}(_react.default.Component);

exports.default = Drag;
Drag.propTypes = propTypes;
Drag.defaultProps = defaultProps;