'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _shape = require('@vx/shape');

var _mockData = require('@vx/mock-data');

var _axis = require('@vx/axis');

var _curve = require('@vx/curve');

var _gradient = require('@vx/gradient');

var _group = require('@vx/group');

var _grid = require('@vx/grid');

var _scale = require('@vx/scale');

var _tooltip = require('@vx/tooltip');

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

var _clipPath = require('@vx/clip-path');

var _responsive = require('@vx/responsive');

var _zoom = require('@vx/zoom');

var _drag = require('@vx/drag');

var _d3Array = require('d3-array');

var _d3TimeFormat = require('d3-time-format');

var _transformationMatrix = require('transformation-matrix');

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/tiles/brush-i.js';


// dimensions
var width = 900;
var height = 450;

var contextMargin = { top: 20, left: 20, right: 20, bottom: 40 };
var contextWidth = width - contextMargin.left - contextMargin.right;
var contextHeight = height * 0.75 - contextMargin.top - contextMargin.bottom;

var focusMargin = { top: 15, left: 20, right: 20, bottom: 30 };
var focusWidth = width - focusMargin.left - focusMargin.right;
var focusHeight = height - contextHeight - contextMargin.top - contextMargin.bottom - focusMargin.top - focusMargin.bottom;

// data
var data = _mockData.appleStock;

// accessors
var x = function x(d) {
  return new Date(d.date);
};
var y = function y(d) {
  return d.close;
};

// scales
var xScaleContext = (0, _scale.scaleTime)({
  range: [0, contextWidth],
  domain: (0, _d3Array.extent)(data, x),
  clamp: true
});
var yScaleContext = (0, _scale.scaleLinear)({
  range: [contextHeight, 0],
  domain: [0, (0, _d3Array.max)(data, y)],
  nice: true
});
var xScaleFocus = (0, _scale.scaleTime)({
  range: [0, contextWidth],
  domain: (0, _d3Array.extent)(data, x),
  clamp: true
});
var yScaleFocus = (0, _scale.scaleLinear)({
  range: [focusHeight, 0],
  domain: [0, (0, _d3Array.max)(data, y)],
  nice: true
});

var invertX = function invertX(_ref) {
  var x = _ref.x,
      tx = _ref.tx,
      sx = _ref.sx;
  return (x - tx) / sx;
};

var Brush = function (_React$Component) {
  (0, _inherits3.default)(Brush, _React$Component);

  function Brush(props) {
    (0, _classCallCheck3.default)(this, Brush);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Brush.__proto__ || (0, _getPrototypeOf2.default)(Brush)).call(this, props));

    _this.state = {
      brush: {
        width: undefined,
        x: undefined,
        x0: undefined,
        x1: undefined,
        y0: undefined,
        y1: undefined
      }
    };
    _this.calcBrushWidth = _this.calcBrushWidth.bind(_this);
    _this.calcBrushX = _this.calcBrushX.bind(_this);
    _this.brushDragStart = _this.brushDragStart.bind(_this);
    _this.brushDragMove = _this.brushDragMove.bind(_this);
    _this.brushDragEnd = _this.brushDragEnd.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Brush, [{
    key: 'calcBrushWidth',
    value: function calcBrushWidth(_ref2) {
      var currentPoint = _ref2.currentPoint,
          startPoint = _ref2.startPoint;

      return startPoint.x - currentPoint.x < 0 ? currentPoint.x - startPoint.x : startPoint.x - currentPoint.x;
    }
  }, {
    key: 'calcBrushX',
    value: function calcBrushX(_ref3) {
      var currentPoint = _ref3.currentPoint,
          startPoint = _ref3.startPoint;
      var margin = this.props.margin;

      return startPoint.x - currentPoint.x < 0 ? startPoint.x - margin.left : currentPoint.x - margin.left;
    }
  }, {
    key: 'brushDragStart',
    value: function brushDragStart(event) {
      this.setState(function (state, props) {
        return {
          brush: {
            width: undefined,
            x: undefined,
            x0: undefined,
            x1: undefined,
            y0: undefined,
            y1: undefined
          }
        };
      });
    }
  }, {
    key: 'brushDragMove',
    value: function brushDragMove(_ref4) {
      var event = _ref4.event,
          startPoint = _ref4.startPoint,
          currentPoint = _ref4.currentPoint;
      var _props = this.props,
          margin = _props.margin,
          onBrushMove = _props.onBrushMove;

      var nextState = {
        width: this.calcBrushWidth({ startPoint: startPoint, currentPoint: currentPoint }),
        x: this.calcBrushX({ startPoint: startPoint, currentPoint: currentPoint })
      };
      if (onBrushMove) {
        onBrushMove({ brush: nextState });
      }
      this.setState(function (state, props) {
        return { brush: nextState };
      });
    }
  }, {
    key: 'brushDragEnd',
    value: function brushDragEnd(_ref5) {
      var event = _ref5.event,
          currentPoint = _ref5.currentPoint,
          startPoint = _ref5.startPoint;
      var brush = this.state.brush;
      var onBrushEnd = this.props.onBrushEnd;

      if (onBrushEnd) {
        onBrushEnd({ currentPoint: currentPoint, startPoint: startPoint, brush: brush });
      }
      this.setState(function (state, props) {
        return {};
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props2 = this.props,
          svg = _props2.svg,
          height = _props2.height,
          width = _props2.width,
          margin = _props2.margin,
          onBrushMove = _props2.onBrushMove,
          onBrushEnd = _props2.onBrushEnd;
      var brush = this.state.brush;

      return _react2.default.createElement(_drag.Drag, {
        svg: svg,
        onDragStart: this.brushDragStart,
        onDragMove: this.brushDragMove,
        onDragEnd: this.brushDragEnd,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 157
        }
      }, function (_ref6) {
        var dragStart = _ref6.dragStart,
            dragMove = _ref6.dragMove,
            dragEnd = _ref6.dragEnd,
            isDragging = _ref6.isDragging;

        return _react2.default.createElement('g', {
          __source: {
            fileName: _jsxFileName,
            lineNumber: 165
          }
        }, _react2.default.createElement('rect', {
          height: height,
          width: width,
          fill: 'transparent',
          onMouseDown: dragStart,
          onMouseMove: dragMove,
          onMouseUp: dragEnd,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 166
          }
        }), !!_this2.state.brush.width && _react2.default.createElement(_drag.Drag, {
          svg: svg,
          onDragMove: function onDragMove(_ref7) {
            var startPoint = _ref7.startPoint,
                currentPoint = _ref7.currentPoint,
                dx = _ref7.dx;
            var brush = _this2.state.brush;

            var nextX = brush.x + dx <= 0 ? 0 : brush.x + dx + brush.width > width ? brush.x : brush.x + dx;
            var nextBrush = (0, _extends3.default)({}, brush, { x: nextX });
            if (onBrushEnd) {
              onBrushEnd({
                currentPoint: currentPoint,
                startPoint: startPoint,
                brush: nextBrush
              });
            }
            _this2.setState(function (state) {
              return {
                brush: nextBrush
              };
            });
          },
          __source: {
            fileName: _jsxFileName,
            lineNumber: 175
          }
        }, function (_ref8) {
          var brushDragStart = _ref8.dragStart,
              brushDragEnd = _ref8.dragEnd,
              brushDragMove = _ref8.dragMove,
              brushDragging = _ref8.isDragging;

          return _react2.default.createElement('g', {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 207
            }
          }, !!brushDragging && _react2.default.createElement('rect', {
            fill: 'transparent',
            width: width,
            height: height,
            onMouseDown: function onMouseDown(event) {
              brushDragStart(event);
              // dragStart(event);
            },
            onMouseMove: function onMouseMove(event) {
              brushDragMove(event);
              if (!brushDragging) dragMove(event);
            },
            onMouseUp: function onMouseUp(event) {
              brushDragEnd(event);
              if (!brushDragging) dragEnd(event);
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 209
            }
          }), _react2.default.createElement('rect', {
            fill: 'steelblue',
            fillOpacity: 0.5,
            height: height,
            width: brush.width,
            x: brush.x,
            style: { cursor: 'move' },
            onMouseDown: function onMouseDown(event) {
              brushDragStart(event);
              // dragStart(event);
            },
            onMouseMove: function onMouseMove(event) {
              brushDragMove(event);
              if (!brushDragging) dragMove(event);
            },
            onMouseUp: function onMouseUp(event) {
              brushDragEnd(event);
              if (!brushDragging) dragEnd(event);
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 227
            }
          }), _react2.default.createElement(_drag.Drag, {
            svg: svg,
            onDragMove: function onDragMove(_ref9) {
              var event = _ref9.event,
                  currentPoint = _ref9.currentPoint,
                  startPoint = _ref9.startPoint,
                  dx = _ref9.dx;

              _this2.setState(function (state) {
                var nextBrush = (0, _extends3.default)({}, _this2.state.brush, {
                  width: state.brush.width - dx,
                  x: state.brush.x + dx
                });
                if (onBrushEnd) onBrushEnd({
                  currentPoint: currentPoint,
                  startPoint: startPoint,
                  brush: nextBrush
                });
                return { brush: nextBrush };
              });
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 247
            }
          }, function (_ref10) {
            var westHandleDragStart = _ref10.dragStart,
                westHandleDragEnd = _ref10.dragEnd,
                westHandleDragMove = _ref10.dragMove,
                westHandleDragging = _ref10.isDragging;

            return _react2.default.createElement('g', {
              __source: {
                fileName: _jsxFileName,
                lineNumber: 278
              }
            }, westHandleDragging && _react2.default.createElement('rect', {
              fill: 'transparent',
              style: {
                cursor: 'ew-resize'
              },
              width: width,
              height: height,
              onMouseDown: westHandleDragStart,
              onMouseMove: westHandleDragMove,
              onMouseUp: westHandleDragEnd,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 280
              }
            }), _react2.default.createElement('rect', {
              width: 6,
              height: height,
              fill: 'transparent',
              x: brush.x,
              style: {
                cursor: 'ew-resize',
                pointerEvents: isDragging ? 'none' : 'all'
              },
              onMouseDown: westHandleDragStart,
              onMouseUp: westHandleDragEnd,
              onMouseMove: function onMouseMove(event) {
                if (!brushDragging) {
                  westHandleDragMove(event);
                }
              },
              __source: {
                fileName: _jsxFileName,
                lineNumber: 292
              }
            }));
          }), _react2.default.createElement(_drag.Drag, {
            svg: svg,
            onDragMove: function onDragMove(_ref11) {
              var event = _ref11.event,
                  currentPoint = _ref11.currentPoint,
                  startPoint = _ref11.startPoint,
                  dx = _ref11.dx;

              _this2.setState(function (state) {
                var cur = currentPoint.x - margin.left;
                var invert = currentPoint.x - margin.left <= state.brush.x;
                var nextWidth = invert ? 10 : state.brush.width + dx;
                var nextX = invert ? cur : state.brush.x;
                var nextBrush = (0, _extends3.default)({}, _this2.state.brush, {
                  width: nextWidth,
                  x: nextX
                });
                if (onBrushEnd) onBrushEnd({
                  currentPoint: currentPoint,
                  startPoint: startPoint,
                  brush: nextBrush
                });
                return { brush: nextBrush };
              });
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 315
            }
          }, function (_ref12) {
            var eastHandleDragStart = _ref12.dragStart,
                eastHandleDragEnd = _ref12.dragEnd,
                eastHandleDragMove = _ref12.dragMove,
                eastHandleDragging = _ref12.isDragging;

            return _react2.default.createElement('g', {
              __source: {
                fileName: _jsxFileName,
                lineNumber: 357
              }
            }, eastHandleDragging && _react2.default.createElement('rect', {
              fill: 'transparent',
              width: width,
              height: height,
              style: {
                cursor: 'ew-resize'
              },
              onMouseDown: eastHandleDragStart,
              onMouseMove: eastHandleDragMove,
              onMouseUp: eastHandleDragEnd,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 359
              }
            }), _react2.default.createElement('rect', {
              width: 6,
              height: height,
              fill: 'transparent',
              x: brush.x + brush.width - 6,
              style: {
                cursor: 'ew-resize',
                pointerEvents: isDragging ? 'none' : 'all'
              },
              onMouseDown: eastHandleDragStart,
              onMouseMove: function onMouseMove(event) {
                if (!brushDragging) eastHandleDragMove(event);
              },
              onMouseUp: eastHandleDragEnd,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 371
              }
            }));
          }));
        }));
      });
    }
  }]);

  return Brush;
}(_react2.default.Component);

var BrushOne = function (_React$Component2) {
  (0, _inherits3.default)(BrushOne, _React$Component2);

  function BrushOne(props) {
    (0, _classCallCheck3.default)(this, BrushOne);

    var _this3 = (0, _possibleConstructorReturn3.default)(this, (BrushOne.__proto__ || (0, _getPrototypeOf2.default)(BrushOne)).call(this, props));

    _this3.state = {
      contextScale: xScaleContext,
      focusScale: xScaleFocus
    };
    _this3.updateContextScale = _this3.updateContextScale.bind(_this3);
    return _this3;
  }

  (0, _createClass3.default)(BrushOne, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.forceUpdate();
    }
  }, {
    key: 'updateContextScale',
    value: function updateContextScale(_ref13) {
      var currentPoint = _ref13.currentPoint,
          startPoint = _ref13.startPoint,
          brush = _ref13.brush;

      this.setState(function (state, props) {
        if (!brush.width || !brush.x) {
          return { contextScale: xScaleContext.copy() };
        }
        var brushDomain = [state.focusScale.invert(brush.x), state.focusScale.invert(brush.x + brush.width)];
        var nextContextScale = state.contextScale.copy();
        nextContextScale.domain(brushDomain);
        return {
          contextScale: nextContextScale
        };
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var contextScale = this.state.contextScale;

      return _react2.default.createElement('div', { className: 'BrushOne', __source: {
          fileName: _jsxFileName,
          lineNumber: 437
        }
      }, _react2.default.createElement('svg', { width: width, height: height, ref: function ref(s) {
          return _this4.svg = s;
        }, __source: {
          fileName: _jsxFileName,
          lineNumber: 438
        }
      }, _react2.default.createElement(_clipPath.RectClipPath, {
        width: contextWidth,
        height: contextHeight,
        id: 'ContextClip',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 439
        }
      }), _react2.default.createElement('rect', {
        fill: 'transparent',
        stroke: 'lightgray',
        width: width,
        height: contextHeight + contextMargin.top + contextMargin.bottom,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 444
        }
      }), _react2.default.createElement(_group.Group, { top: contextMargin.top, left: contextMargin.left, __source: {
          fileName: _jsxFileName,
          lineNumber: 452
        }
      }, _react2.default.createElement(_axis.AxisBottom, {
        top: contextHeight,
        scale: contextScale,
        data: data,
        hideTicks: true,
        hideAxisLine: true,
        tickLength: 1,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 453
        }
      }), _react2.default.createElement('rect', {
        fill: 'lightgray',
        width: contextWidth,
        height: contextHeight,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 461
        }
      }), _react2.default.createElement(_shape.AreaClosed, {
        data: data,
        xScale: contextScale,
        yScale: yScaleContext,
        x: x,
        y: y,
        strokeWidth: 0,
        curve: _curve.curveMonotoneX,
        clipPath: 'url(#clip)',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 466
        }
      })), _react2.default.createElement(_group.Group, {
        top: contextHeight + contextMargin.bottom + contextMargin.top,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 477
        }
      }, _react2.default.createElement('rect', {
        fill: 'transparent',
        stroke: 'lightgray',
        width: width,
        height: focusHeight + focusMargin.top + focusMargin.bottom,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 482
        }
      }), _react2.default.createElement(_group.Group, { left: focusMargin.left, top: focusMargin.top, __source: {
          fileName: _jsxFileName,
          lineNumber: 490
        }
      }, _react2.default.createElement(_axis.AxisBottom, {
        top: focusHeight,
        scale: xScaleFocus,
        data: data,
        hideTicks: true,
        hideAxisLine: true,
        tickLength: 1,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 491
        }
      }), _react2.default.createElement('rect', {
        fill: 'lightgray',
        width: focusWidth,
        height: focusHeight,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 499
        }
      }), _react2.default.createElement(_shape.AreaClosed, {
        data: data,
        xScale: xScaleFocus,
        yScale: yScaleFocus,
        x: x,
        y: y,
        strokeWidth: 0,
        curve: _curve.curveMonotoneX,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 504
        }
      }), _react2.default.createElement(Brush, {
        svg: this.svg,
        width: focusWidth,
        height: focusHeight,
        margin: focusMargin,
        onBrushEnd: this.updateContextScale,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 513
        }
      })))));
    }
  }]);

  return BrushOne;
}(_react2.default.Component);

exports.default = BrushOne;