@data-ui/xy-chart/esm/utils/brush/BrushSelection.js

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

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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; }

/* eslint react/jsx-handler-names: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import { Drag } from '../drag';
import { brushShape } from '../propShapes';
var propTypes = {
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  stageWidth: PropTypes.number.isRequired,
  stageHeight: PropTypes.number.isRequired,
  brush: brushShape.isRequired,
  updateBrush: PropTypes.func.isRequired,
  onBrushEnd: PropTypes.func.isRequired,
  disableDraggingSelection: PropTypes.bool.isRequired,
  onMouseLeave: PropTypes.func,
  onMouseMove: PropTypes.func,
  onMouseUp: PropTypes.func,
  onClick: PropTypes.func
};
var defaultProps = {
  onMouseLeave: null,
  onMouseUp: null,
  onMouseMove: null,
  onClick: null
};

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

  function BrushSelection(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.selectionDragMove = _this.selectionDragMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.selectionDragEnd = _this.selectionDragEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  var _proto = BrushSelection.prototype;

  _proto.selectionDragMove = function selectionDragMove(drag) {
    var updateBrush = this.props.updateBrush;
    updateBrush(function (prevBrush) {
      var _prevBrush$start = prevBrush.start,
          x0 = _prevBrush$start.x,
          y0 = _prevBrush$start.y;
      var _prevBrush$end = prevBrush.end,
          x1 = _prevBrush$end.x,
          y1 = _prevBrush$end.y;
      var validDx = drag.dx > 0 ? Math.min(drag.dx, prevBrush.bounds.x1 - x1) : Math.max(drag.dx, prevBrush.bounds.x0 - x0);
      var validDy = drag.dy > 0 ? Math.min(drag.dy, prevBrush.bounds.y1 - y1) : Math.max(drag.dy, prevBrush.bounds.y0 - y0);
      return _extends({}, prevBrush, {
        isBrushing: true,
        extent: _extends({}, prevBrush.extent, {
          x0: x0 + validDx,
          x1: x1 + validDx,
          y0: y0 + validDy,
          y1: y1 + validDy
        })
      });
    });
  };

  _proto.selectionDragEnd = function selectionDragEnd() {
    var _this$props = this.props,
        updateBrush = _this$props.updateBrush,
        onBrushEnd = _this$props.onBrushEnd;
    updateBrush(function (prevBrush) {
      var nextBrush = _extends({}, prevBrush, {
        isBrushing: false,
        start: _extends({}, prevBrush.start, {
          x: Math.min(prevBrush.extent.x0, prevBrush.extent.x1),
          y: Math.min(prevBrush.extent.y0, prevBrush.extent.y1)
        }),
        end: _extends({}, prevBrush.end, {
          x: Math.max(prevBrush.extent.x0, prevBrush.extent.x1),
          y: Math.max(prevBrush.extent.y0, prevBrush.extent.y1)
        })
      });

      if (onBrushEnd) {
        onBrushEnd(nextBrush);
      }

      return nextBrush;
    });
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        width = _this$props2.width,
        height = _this$props2.height,
        stageWidth = _this$props2.stageWidth,
        stageHeight = _this$props2.stageHeight,
        brush = _this$props2.brush,
        updateBrush = _this$props2.updateBrush,
        disableDraggingSelection = _this$props2.disableDraggingSelection,
        onBrushEnd = _this$props2.onBrushEnd,
        _onMouseLeave = _this$props2.onMouseLeave,
        _onMouseMove = _this$props2.onMouseMove,
        _onMouseUp = _this$props2.onMouseUp,
        _onClick = _this$props2.onClick,
        restProps = _objectWithoutPropertiesLoose(_this$props2, ["width", "height", "stageWidth", "stageHeight", "brush", "updateBrush", "disableDraggingSelection", "onBrushEnd", "onMouseLeave", "onMouseMove", "onMouseUp", "onClick"]);

    return React.createElement(Drag, {
      width: width,
      height: height,
      resetOnStart: true,
      onDragMove: this.selectionDragMove,
      onDragEnd: this.selectionDragEnd
    }, function (selection) {
      return React.createElement("g", null, selection.isDragging && React.createElement("rect", {
        width: stageWidth,
        height: stageHeight,
        fill: "transparent",
        onMouseUp: selection.dragEnd,
        onMouseMove: selection.dragMove,
        onMouseLeave: selection.dragEnd,
        style: {
          cursor: 'move'
        }
      }), React.createElement("rect", _extends({
        x: Math.min(brush.extent.x0, brush.extent.x1),
        y: Math.min(brush.extent.y0, brush.extent.y1),
        width: width,
        height: height,
        className: "vx-brush-selection",
        onMouseDown: disableDraggingSelection ? null : selection.dragStart,
        onMouseLeave: function onMouseLeave(event) {
          if (_onMouseLeave) _onMouseLeave(event);
        },
        onMouseMove: function onMouseMove(event) {
          selection.dragMove(event);
          if (_onMouseMove) _onMouseMove(event);
        },
        onMouseUp: function onMouseUp(event) {
          selection.dragEnd(event);
          if (_onMouseUp) _onMouseUp(event);
        },
        onClick: function onClick(event) {
          if (_onClick) _onClick(event);
        },
        style: {
          pointerEvents: brush.isBrushing || brush.activeHandle ? 'none' : 'all',
          cursor: disableDraggingSelection ? null : 'move'
        }
      }, restProps)));
    });
  };

  return BrushSelection;
}(React.Component);

export { BrushSelection as default };
BrushSelection.propTypes = propTypes;
BrushSelection.defaultProps = defaultProps;