@data-ui/xy-chart
Version:
A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui
218 lines (186 loc) • 7.92 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _drag = require("../drag");
var _propShapes = require("../propShapes");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var propTypes = {
stageWidth: _propTypes.default.number.isRequired,
stageHeight: _propTypes.default.number.isRequired,
brush: _propShapes.brushShape.isRequired,
updateBrush: _propTypes.default.func.isRequired,
onBrushEnd: _propTypes.default.func.isRequired,
type: _propTypes.default.string.isRequired,
style: _propShapes.generalStyleShape
};
var defaultProps = {
style: {}
};
var BrushCorner =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(BrushCorner, _React$Component);
function BrushCorner(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.cornerDragMove = _this.cornerDragMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.cornerDragEnd = _this.cornerDragEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
return _this;
}
var _proto = BrushCorner.prototype;
_proto.cornerDragMove = function cornerDragMove(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 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);
var moveX = 0;
var moveY = 0;
var nextState = {};
switch (type) {
case 'topRight':
moveX = xMax + drag.dx;
moveY = yMin + drag.dy;
nextState = _extends({}, prevBrush, {
activeHandle: type,
extent: _extends({}, prevBrush.extent, {
x0: Math.max(Math.min(moveX, start.x), prevBrush.bounds.x0),
x1: Math.min(Math.max(moveX, start.x), prevBrush.bounds.x1),
y0: Math.max(Math.min(moveY, end.y), prevBrush.bounds.y0),
y1: Math.min(Math.max(moveY, end.y), prevBrush.bounds.y1)
})
});
break;
case 'topLeft':
moveX = xMin + drag.dx;
moveY = yMin + drag.dy;
nextState = _extends({}, prevBrush, {
activeHandle: type,
extent: _extends({}, prevBrush.extent, {
x0: Math.max(Math.min(moveX, end.x), prevBrush.bounds.x0),
x1: Math.min(Math.max(moveX, end.x), prevBrush.bounds.x1),
y0: Math.max(Math.min(moveY, end.y), prevBrush.bounds.y0),
y1: Math.min(Math.max(moveY, end.y), prevBrush.bounds.y1)
})
});
break;
case 'bottomLeft':
moveX = xMin + drag.dx;
moveY = yMax + drag.dy;
nextState = _extends({}, prevBrush, {
activeHandle: type,
extent: _extends({}, prevBrush.extent, {
x0: Math.max(Math.min(moveX, end.x), prevBrush.bounds.x0),
x1: Math.min(Math.max(moveX, end.x), prevBrush.bounds.x1),
y0: Math.max(Math.min(moveY, start.y), prevBrush.bounds.y0),
y1: Math.min(Math.max(moveY, start.y), prevBrush.bounds.y1)
})
});
break;
case 'bottomRight':
moveX = xMax + drag.dx;
moveY = yMax + drag.dy;
nextState = _extends({}, prevBrush, {
activeHandle: type,
extent: _extends({}, prevBrush.extent, {
x0: Math.max(Math.min(moveX, start.x), prevBrush.bounds.x0),
x1: Math.min(Math.max(moveX, start.x), prevBrush.bounds.x1),
y0: Math.max(Math.min(moveY, start.y), prevBrush.bounds.y0),
y1: Math.min(Math.max(moveY, start.y), prevBrush.bounds.y1)
})
});
break;
default:
break;
}
return nextState;
});
};
_proto.cornerDragEnd = function cornerDragEnd() {
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,
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,
type = _this$props3.type,
brush = _this$props3.brush,
updateBrush = _this$props3.updateBrush,
stageWidth = _this$props3.stageWidth,
stageHeight = _this$props3.stageHeight,
styleProp = _this$props3.style,
onBrushEnd = _this$props3.onBrushEnd,
restProps = _objectWithoutPropertiesLoose(_this$props3, ["type", "brush", "updateBrush", "stageWidth", "stageHeight", "style", "onBrushEnd"]);
var cursor = type === 'topLeft' || type === 'bottomRight' ? 'nwse-resize' : 'nesw-resize';
var pointerEvents = brush.activeHandle || brush.isBrushing ? 'none' : 'all';
var style = _extends({
cursor: cursor,
pointerEvents: pointerEvents
}, styleProp);
return _react.default.createElement(_drag.Drag, {
width: stageWidth,
height: stageHeight,
onDragMove: this.cornerDragMove,
onDragEnd: this.cornerDragEnd,
resetOnStart: true
}, function (handle) {
return _react.default.createElement("g", null, handle.isDragging && _react.default.createElement("rect", {
fill: "transparent",
width: stageWidth,
height: stageHeight,
style: {
cursor: style.cursor
},
onMouseMove: handle.dragMove,
onMouseUp: handle.dragEnd
}), _react.default.createElement("rect", _extends({
fill: "transparent",
onMouseDown: handle.dragStart,
onMouseMove: handle.dragMove,
onMouseUp: handle.dragEnd,
className: "vx-brush-handle-" + type,
style: style
}, restProps)));
});
};
return BrushCorner;
}(_react.default.Component);
exports.default = BrushCorner;
BrushCorner.propTypes = propTypes;
BrushCorner.defaultProps = defaultProps;