276 lines
8.0 KiB
JavaScript
276 lines
8.0 KiB
JavaScript
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
||
|
||
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
||
|
||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
||
|
||
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
||
|
||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
||
|
||
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
||
|
||
var Component = require('../component');
|
||
|
||
var Util = require('../util');
|
||
|
||
var Crosshair = /*#__PURE__*/function (_Component) {
|
||
_inheritsLoose(Crosshair, _Component);
|
||
|
||
var _super = _createSuper(Crosshair);
|
||
|
||
var _proto = Crosshair.prototype;
|
||
|
||
_proto.getDefaultCfg = function getDefaultCfg() {
|
||
var cfg = _Component.prototype.getDefaultCfg.call(this);
|
||
|
||
return Util.mix({}, cfg, {
|
||
/**
|
||
* crosshair的类型
|
||
* @type {String}
|
||
*/
|
||
type: null,
|
||
|
||
/**
|
||
* 画在哪层视图
|
||
* @type {G-Element}
|
||
*/
|
||
plot: null,
|
||
|
||
/**
|
||
* x轴上，移动到位置的偏移量
|
||
* @type {Number}
|
||
*/
|
||
plotRange: null,
|
||
|
||
/**
|
||
* 默认rect crosshair样式
|
||
* @type {Object}
|
||
*/
|
||
rectStyle: {
|
||
fill: '#CCD6EC',
|
||
opacity: 0.3
|
||
},
|
||
|
||
/**
|
||
* 默认line crosshair样式
|
||
* @type {Object}
|
||
*/
|
||
lineStyle: {
|
||
stroke: 'rgba(0, 0, 0, 0.25)',
|
||
lineWidth: 1
|
||
},
|
||
isTransposed: false
|
||
});
|
||
};
|
||
|
||
function Crosshair(cfg) {
|
||
var _this;
|
||
|
||
_this = _Component.call(this, cfg) || this;
|
||
|
||
_this._init_();
|
||
|
||
_this.render();
|
||
|
||
return _this;
|
||
}
|
||
|
||
_proto._init_ = function _init_() {
|
||
var self = this;
|
||
var plot = self.get('plot');
|
||
var group;
|
||
|
||
if (self.type === 'rect') {
|
||
group = plot.addGroup({
|
||
zIndex: 0
|
||
});
|
||
} else {
|
||
group = plot.addGroup();
|
||
}
|
||
|
||
this.set('container', group);
|
||
};
|
||
|
||
_proto._addLineShape = function _addLineShape(attrs, type) {
|
||
var container = this.get('container');
|
||
var shape = container.addShape('line', {
|
||
capture: false,
|
||
attrs: attrs
|
||
}); // shape.hide();
|
||
|
||
this.set('crossLineShape' + type, shape);
|
||
return shape;
|
||
};
|
||
|
||
_proto._renderHorizontalLine = function _renderHorizontalLine(canvas, plotRange) {
|
||
var style = Util.mix(this.get('lineStyle'), this.get('style'));
|
||
var attrs = Util.mix({
|
||
x1: plotRange ? plotRange.bl.x : canvas.get('width'),
|
||
y1: 0,
|
||
x2: plotRange ? plotRange.br.x : 0,
|
||
y2: 0
|
||
}, style);
|
||
|
||
this._addLineShape(attrs, 'X');
|
||
};
|
||
|
||
_proto._renderVerticalLine = function _renderVerticalLine(canvas, plotRange) {
|
||
var style = Util.mix(this.get('lineStyle'), this.get('style'));
|
||
var attrs = Util.mix({
|
||
x1: 0,
|
||
y1: plotRange ? plotRange.bl.y : canvas.get('height'),
|
||
x2: 0,
|
||
y2: plotRange ? plotRange.tl.y : 0
|
||
}, style);
|
||
|
||
this._addLineShape(attrs, 'Y');
|
||
};
|
||
|
||
_proto._renderBackground = function _renderBackground(canvas, plotRange) {
|
||
var style = Util.mix(this.get('rectStyle'), this.get('style'));
|
||
var container = this.get('container');
|
||
var attrs = Util.mix({
|
||
x: plotRange ? plotRange.tl.x : 0,
|
||
y: plotRange ? plotRange.tl.y : canvas.get('height'),
|
||
width: plotRange ? plotRange.br.x - plotRange.bl.x : canvas.get('width'),
|
||
height: plotRange ? Math.abs(plotRange.tl.y - plotRange.bl.y) : canvas.get('height')
|
||
}, style);
|
||
var shape = container.addShape('rect', {
|
||
attrs: attrs,
|
||
capture: false
|
||
}); // shape.hide();
|
||
|
||
this.set('crosshairsRectShape', shape);
|
||
return shape;
|
||
};
|
||
|
||
_proto._updateRectShape = function _updateRectShape(items) {
|
||
var offset;
|
||
var crosshairsRectShape = this.get('crosshairsRectShape');
|
||
var isTransposed = this.get('isTransposed');
|
||
var firstItem = items[0];
|
||
var lastItem = items[items.length - 1];
|
||
var dim = isTransposed ? 'y' : 'x';
|
||
var attr = isTransposed ? 'height' : 'width';
|
||
var startDim = firstItem[dim];
|
||
|
||
if (items.length > 1 && firstItem[dim] > lastItem[dim]) {
|
||
startDim = lastItem[dim];
|
||
}
|
||
|
||
if (this.get('width')) {
|
||
// 用户定义了 width
|
||
crosshairsRectShape.attr(dim, startDim - this.get('crosshairs').width / 2);
|
||
crosshairsRectShape.attr(attr, this.get('width'));
|
||
} else {
|
||
if (Util.isArray(firstItem.point[dim]) && !firstItem.size) {
|
||
// 直方图
|
||
var width = firstItem.point[dim][1] - firstItem.point[dim][0];
|
||
crosshairsRectShape.attr(dim, firstItem.point[dim][0]);
|
||
crosshairsRectShape.attr(attr, width);
|
||
} else {
|
||
offset = 3 * firstItem.size / 4;
|
||
crosshairsRectShape.attr(dim, startDim - offset);
|
||
|
||
if (items.length === 1) {
|
||
crosshairsRectShape.attr(attr, 3 * firstItem.size / 2);
|
||
} else {
|
||
crosshairsRectShape.attr(attr, Math.abs(lastItem[dim] - firstItem[dim]) + 2 * offset);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
_proto.render = function render() {
|
||
var canvas = this.get('canvas');
|
||
var plotRange = this.get('plotRange');
|
||
var isTransposed = this.get('isTransposed');
|
||
this.clear();
|
||
|
||
switch (this.get('type')) {
|
||
case 'x':
|
||
this._renderHorizontalLine(canvas, plotRange);
|
||
|
||
break;
|
||
|
||
case 'y':
|
||
this._renderVerticalLine(canvas, plotRange);
|
||
|
||
break;
|
||
|
||
case 'cross':
|
||
this._renderHorizontalLine(canvas, plotRange);
|
||
|
||
this._renderVerticalLine(canvas, plotRange);
|
||
|
||
break;
|
||
|
||
case 'rect':
|
||
this._renderBackground(canvas, plotRange);
|
||
|
||
break;
|
||
|
||
default:
|
||
isTransposed ? this._renderHorizontalLine(canvas, plotRange) : this._renderVerticalLine(canvas, plotRange);
|
||
}
|
||
};
|
||
|
||
_proto.show = function show() {
|
||
var container = this.get('container');
|
||
|
||
_Component.prototype.show.call(this);
|
||
|
||
container.show();
|
||
};
|
||
|
||
_proto.hide = function hide() {
|
||
var container = this.get('container');
|
||
|
||
_Component.prototype.hide.call(this);
|
||
|
||
container.hide();
|
||
};
|
||
|
||
_proto.clear = function clear() {
|
||
var container = this.get('container');
|
||
this.set('crossLineShapeX', null);
|
||
this.set('crossLineShapeY', null);
|
||
this.set('crosshairsRectShape', null);
|
||
|
||
_Component.prototype.clear.call(this);
|
||
|
||
container.clear();
|
||
};
|
||
|
||
_proto.destroy = function destroy() {
|
||
var container = this.get('container');
|
||
|
||
_Component.prototype.destroy.call(this);
|
||
|
||
container.remove();
|
||
};
|
||
|
||
_proto.setPosition = function setPosition(x, y, items) {
|
||
var crossLineShapeX = this.get('crossLineShapeX');
|
||
var crossLineShapeY = this.get('crossLineShapeY');
|
||
var crosshairsRectShape = this.get('crosshairsRectShape');
|
||
|
||
if (crossLineShapeY && !crossLineShapeY.get('destroyed')) {
|
||
// 第一次进入时，画布需要单独绘制，所以需要先设定corss的位置
|
||
crossLineShapeY.move(x, 0);
|
||
}
|
||
|
||
if (crossLineShapeX && !crossLineShapeX.get('destroyed')) {
|
||
crossLineShapeX.move(0, y);
|
||
}
|
||
|
||
if (crosshairsRectShape && !crosshairsRectShape.get('destroyed')) {
|
||
this._updateRectShape(items);
|
||
}
|
||
};
|
||
|
||
return Crosshair;
|
||
}(Component);
|
||
|
||
module.exports = Crosshair; |