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

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

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, dragShape } from '../propShapes';
var propTypes = {
  stageWidth: PropTypes.number.isRequired,
  stageHeight: PropTypes.number.isRequired,
  brush: brushShape.isRequired,
  updateBrush: PropTypes.func.isRequired,
  onBrushEnd: PropTypes.func.isRequired,
  handle: dragShape.isRequired,
  type: PropTypes.string.isRequired
};

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

  function BrushHandle(props) {
    var _this;

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

  var _proto = BrushHandle.prototype;

  _proto.handleDragMove = function handleDragMove(drag) {
    var _this$props = this.props,
        updateBrush = _this$props.updateBrush,
        type = _this$props.type;
    if (!drag.isDragging) return;
    updateBrush(function (prevBrush) {
      var start = prevBrush.start,
          end = prevBrush.end;
      var nextState = {};
      var move = 0;
      var xMax = Math.max(start.x, end.x);
      var xMin = Math.min(start.x, end.x);
      var yMax = Math.max(start.y, end.y);
      var yMin = Math.min(start.y, end.y);

      switch (type) {
        case 'right':
          move = xMax + drag.dx;
          nextState = _extends({}, prevBrush, {
            activeHandle: type,
            extent: _extends({}, prevBrush.extent, {
              x0: Math.max(Math.min(move, start.x), prevBrush.bounds.x0),
              x1: Math.min(Math.max(move, start.x), prevBrush.bounds.x1)
            })
          });
          break;

        case 'left':
          move = xMin + drag.dx;
          nextState = _extends({}, prevBrush, {
            activeHandle: type,
            extent: _extends({}, prevBrush.extent, {
              x0: Math.min(move, end.x),
              x1: Math.max(move, end.x)
            })
          });
          break;

        case 'bottom':
          move = yMax + drag.dy;
          nextState = _extends({}, prevBrush, {
            activeHandle: type,
            extent: _extends({}, prevBrush.extent, {
              y0: Math.min(move, start.y),
              y1: Math.max(move, start.y)
            })
          });
          break;

        case 'top':
          move = yMin + drag.dy;
          nextState = _extends({}, prevBrush, {
            activeHandle: type,
            extent: _extends({}, prevBrush.extent, {
              y0: Math.min(move, end.y),
              y1: Math.max(move, end.y)
            })
          });
          break;

        default:
          break;
      }

      return nextState;
    });
  };

  _proto.handleDragEnd = function handleDragEnd() {
    var _this$props2 = this.props,
        updateBrush = _this$props2.updateBrush,
        onBrushEnd = _this$props2.onBrushEnd;
    updateBrush(function (prevBrush) {
      var start = prevBrush.start,
          end = prevBrush.end,
          extent = prevBrush.extent;
      start.x = Math.min(extent.x0, extent.x1);
      start.y = Math.min(extent.y0, extent.y0);
      end.x = Math.max(extent.x0, extent.x1);
      end.y = Math.max(extent.y0, extent.y1);

      var nextBrush = _extends({}, prevBrush, {
        start: start,
        end: end,
        activeHandle: undefined,
        isBrushing: false,
        domain: {
          x0: Math.min(start.x, end.x),
          x1: Math.max(start.x, end.x),
          y0: Math.min(start.y, end.y),
          y1: Math.max(start.y, end.y)
        }
      });

      if (onBrushEnd) {
        onBrushEnd(nextBrush);
      }

      return nextBrush;
    });
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        stageWidth = _this$props3.stageWidth,
        stageHeight = _this$props3.stageHeight,
        brush = _this$props3.brush,
        type = _this$props3.type,
        handle = _this$props3.handle;
    var x = handle.x,
        y = handle.y,
        width = handle.width,
        height = handle.height;
    var cursor = type === 'right' || type === 'left' ? 'ew-resize' : 'ns-resize';
    return React.createElement(Drag, {
      width: stageWidth,
      height: stageHeight,
      onDragMove: this.handleDragMove,
      onDragEnd: this.handleDragEnd,
      resetOnStart: true
    }, function (drag) {
      return React.createElement("g", null, handle.isDragging && React.createElement("rect", {
        fill: "transparent",
        width: stageWidth,
        height: stageHeight,
        style: {
          cursor: cursor
        },
        onMouseMove: drag.dragMove,
        onMouseUp: drag.dragEnd,
        onMouseLeave: drag.dragEnd
      }), React.createElement("rect", {
        x: x,
        y: y,
        width: width,
        height: height,
        fill: "transparent",
        className: "vx-brush-handle-" + type,
        onMouseDown: drag.dragStart,
        onMouseMove: drag.dragMove,
        onMouseUp: drag.dragEnd,
        style: {
          cursor: cursor,
          pointerEvents: !!brush.activeHandle || !!brush.isBrushing ? 'none' : 'all'
        }
      }));
    });
  };

  return BrushHandle;
}(React.Component);

export { BrushHandle as default };
BrushHandle.propTypes = propTypes;