548 lines
14 KiB
Java
548 lines
14 KiB
Java
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
||
|
||
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
||
|
||
var Util = require('../util');
|
||
|
||
var Interaction = require('./base'); // const G2 = require('../core.js');
|
||
|
||
|
||
var BRUSH_TYPES = ['X', 'Y', 'XY', 'POLYGON'];
|
||
var DEFAULT_TYPE = 'XY';
|
||
|
||
var Brush = /*#__PURE__*/function (_Interaction) {
|
||
_inheritsLoose(Brush, _Interaction);
|
||
|
||
var _proto = Brush.prototype;
|
||
|
||
_proto.getDefaultCfg = function getDefaultCfg() {
|
||
var cfg = _Interaction.prototype.getDefaultCfg.call(this);
|
||
|
||
return Util.mix({}, cfg, {
|
||
type: DEFAULT_TYPE,
|
||
startPoint: null,
|
||
brushing: false,
|
||
dragging: false,
|
||
brushShape: null,
|
||
container: null,
|
||
polygonPath: null,
|
||
style: {
|
||
fill: '#C5D4EB',
|
||
opacity: 0.3,
|
||
lineWidth: 1,
|
||
stroke: '#82A6DD'
|
||
},
|
||
draggable: false,
|
||
dragOffX: 0,
|
||
dragOffY: 0,
|
||
inPlot: true,
|
||
xField: null,
|
||
yField: null
|
||
});
|
||
};
|
||
|
||
function Brush(cfg, view) {
|
||
var _this;
|
||
|
||
_this = _Interaction.call(this, cfg, view) || this;
|
||
|
||
var me = _assertThisInitialized(_this);
|
||
|
||
me.filter = !me.draggable;
|
||
me.type = me.type.toUpperCase();
|
||
me.chart = view;
|
||
|
||
if (!BRUSH_TYPES.includes(me.type)) {
|
||
me.type = DEFAULT_TYPE;
|
||
}
|
||
|
||
var canvas = me.canvas;
|
||
|
||
if (canvas) {
|
||
var plotRange;
|
||
canvas.get('children').map(function (child) {
|
||
if (child.get('type') === 'plotBack') {
|
||
plotRange = child.get('plotRange');
|
||
return false;
|
||
}
|
||
|
||
return child;
|
||
});
|
||
me.plot = {
|
||
start: plotRange.bl,
|
||
end: plotRange.tr
|
||
};
|
||
}
|
||
|
||
if (view) {
|
||
var coord = view.get('coord');
|
||
me.plot = {
|
||
start: coord.start,
|
||
end: coord.end
|
||
};
|
||
view.on('afterrender', function () {
|
||
me.plot = {
|
||
start: coord.start,
|
||
end: coord.end
|
||
};
|
||
});
|
||
me.isTransposed = coord.isTransposed;
|
||
|
||
var xScales = view._getScales('x');
|
||
|
||
var yScales = view._getScales('y');
|
||
|
||
me.xScale = me.xField ? xScales[me.xField] : view.getXScale();
|
||
me.yScale = me.yField ? yScales[me.yField] : view.getYScales()[0];
|
||
}
|
||
|
||
return _this;
|
||
} // onBurshstart() { }
|
||
// onBrushmove() { }
|
||
// onBrushend() {}
|
||
// onDragstart() {}
|
||
// onDragmove() {}
|
||
// onDragend() {}
|
||
|
||
|
||
_proto.start = function start(ev) {
|
||
var me = this;
|
||
var canvas = me.canvas,
|
||
type = me.type,
|
||
brushShape = me.brushShape;
|
||
if (!type) return;
|
||
|
||
if (me.brushing) {
|
||
// 鼠标移动到图表外up, 回到图表内点击即结束绘制，mousedown的时候却正在绘制中
|
||
me.end(ev);
|
||
}
|
||
|
||
var startPoint = {
|
||
x: ev.offsetX,
|
||
y: ev.offsetY
|
||
};
|
||
if (!startPoint.x) return;
|
||
var isInPlot = me.plot && me.inPlot;
|
||
var canvasDOM = canvas.get('canvasDOM');
|
||
var pixelRatio = canvas.get('pixelRatio');
|
||
if (me.selection) me.selection = null;
|
||
|
||
if (me.draggable && brushShape && !brushShape.get('destroyed')) {
|
||
// allow drag the brushShape
|
||
if (brushShape.isHit(startPoint.x * pixelRatio, startPoint.y * pixelRatio)) {
|
||
canvasDOM.style.cursor = 'move';
|
||
me.selection = brushShape;
|
||
me.dragging = true;
|
||
|
||
if (type === 'X') {
|
||
me.dragoffX = startPoint.x - brushShape.attr('x');
|
||
me.dragoffY = 0;
|
||
} else if (type === 'Y') {
|
||
me.dragoffX = 0;
|
||
me.dragoffY = startPoint.y - brushShape.attr('y');
|
||
} else if (type === 'XY') {
|
||
me.dragoffX = startPoint.x - brushShape.attr('x');
|
||
me.dragoffY = startPoint.y - brushShape.attr('y');
|
||
} else if (type === 'POLYGON') {
|
||
var box = brushShape.getBBox();
|
||
me.dragoffX = startPoint.x - box.minX;
|
||
me.dragoffY = startPoint.y - box.minY;
|
||
}
|
||
|
||
if (isInPlot) {// me.selection.attr('clip', canvas.addShape('rect', {
|
||
// attrs: {
|
||
// x: this.plot.start.x,
|
||
// y: this.plot.end.y,
|
||
// width: this.plot.end.x - this.plot.start.x,
|
||
// height: this.plot.start.y - this.plot.end.y,
|
||
// fill: '#fff',
|
||
// fillOpacity: 0
|
||
// }
|
||
// }));
|
||
}
|
||
|
||
me.onDragstart && me.onDragstart(ev);
|
||
}
|
||
|
||
me.prePoint = startPoint;
|
||
}
|
||
|
||
if (!me.dragging) {
|
||
// brush start
|
||
me.onBrushstart && me.onBrushstart(startPoint);
|
||
var container = me.container;
|
||
|
||
if (isInPlot) {
|
||
var _me$plot = me.plot,
|
||
start = _me$plot.start,
|
||
end = _me$plot.end;
|
||
if (startPoint.x < start.x || startPoint.x > end.x || startPoint.y < end.y || startPoint.y > start.y) return;
|
||
}
|
||
|
||
canvasDOM.style.cursor = 'crosshair';
|
||
me.startPoint = startPoint;
|
||
me.brushShape = null;
|
||
me.brushing = true;
|
||
|
||
if (!container) {
|
||
container = canvas.addGroup({
|
||
zIndex: 5 // upper
|
||
|
||
});
|
||
container.initTransform();
|
||
} else {
|
||
container.clear();
|
||
}
|
||
|
||
me.container = container;
|
||
if (type === 'POLYGON') me.polygonPath = "M " + startPoint.x + " " + startPoint.y;
|
||
}
|
||
};
|
||
|
||
_proto.process = function process(ev) {
|
||
var me = this;
|
||
var brushing = me.brushing,
|
||
dragging = me.dragging,
|
||
type = me.type,
|
||
plot = me.plot,
|
||
startPoint = me.startPoint,
|
||
xScale = me.xScale,
|
||
yScale = me.yScale,
|
||
canvas = me.canvas;
|
||
|
||
if (!brushing && !dragging) {
|
||
return;
|
||
}
|
||
|
||
var currentPoint = {
|
||
x: ev.offsetX,
|
||
y: ev.offsetY
|
||
};
|
||
var canvasDOM = canvas.get('canvasDOM');
|
||
|
||
if (brushing) {
|
||
canvasDOM.style.cursor = 'crosshair';
|
||
var start = plot.start,
|
||
end = plot.end;
|
||
var polygonPath = me.polygonPath;
|
||
var brushShape = me.brushShape;
|
||
var container = me.container;
|
||
|
||
if (me.plot && me.inPlot) {
|
||
currentPoint = me._limitCoordScope(currentPoint);
|
||
}
|
||
|
||
var rectStartX;
|
||
var rectStartY;
|
||
var rectWidth;
|
||
var rectHeight;
|
||
|
||
if (type === 'Y') {
|
||
rectStartX = start.x;
|
||
rectStartY = currentPoint.y >= startPoint.y ? startPoint.y : currentPoint.y;
|
||
rectWidth = Math.abs(start.x - end.x);
|
||
rectHeight = Math.abs(startPoint.y - currentPoint.y);
|
||
} else if (type === 'X') {
|
||
rectStartX = currentPoint.x >= startPoint.x ? startPoint.x : currentPoint.x;
|
||
rectStartY = end.y;
|
||
rectWidth = Math.abs(startPoint.x - currentPoint.x);
|
||
rectHeight = Math.abs(end.y - start.y);
|
||
} else if (type === 'XY') {
|
||
if (currentPoint.x >= startPoint.x) {
|
||
rectStartX = startPoint.x;
|
||
rectStartY = currentPoint.y >= startPoint.y ? startPoint.y : currentPoint.y;
|
||
} else {
|
||
rectStartX = currentPoint.x;
|
||
rectStartY = currentPoint.y >= startPoint.y ? startPoint.y : currentPoint.y;
|
||
}
|
||
|
||
rectWidth = Math.abs(startPoint.x - currentPoint.x);
|
||
rectHeight = Math.abs(startPoint.y - currentPoint.y);
|
||
} else if (type === 'POLYGON') {
|
||
polygonPath += "L " + currentPoint.x + " " + currentPoint.y;
|
||
me.polygonPath = polygonPath;
|
||
|
||
if (!brushShape) {
|
||
brushShape = container.addShape('path', {
|
||
attrs: Util.mix(me.style, {
|
||
path: polygonPath
|
||
})
|
||
});
|
||
} else {
|
||
!brushShape.get('destroyed') && brushShape.attr(Util.mix({}, brushShape._attrs, {
|
||
path: polygonPath
|
||
}));
|
||
}
|
||
}
|
||
|
||
if (type !== 'POLYGON') {
|
||
if (!brushShape) {
|
||
brushShape = container.addShape('rect', {
|
||
attrs: Util.mix(me.style, {
|
||
x: rectStartX,
|
||
y: rectStartY,
|
||
width: rectWidth,
|
||
height: rectHeight
|
||
})
|
||
});
|
||
} else {
|
||
!brushShape.get('destroyed') && brushShape.attr(Util.mix({}, brushShape._attrs, {
|
||
x: rectStartX,
|
||
y: rectStartY,
|
||
width: rectWidth,
|
||
height: rectHeight
|
||
}));
|
||
}
|
||
}
|
||
|
||
me.brushShape = brushShape;
|
||
} else if (dragging) {
|
||
canvasDOM.style.cursor = 'move';
|
||
var selection = me.selection;
|
||
|
||
if (selection && !selection.get('destroyed')) {
|
||
if (type === 'POLYGON') {
|
||
var prePoint = me.prePoint;
|
||
me.selection.translate(currentPoint.x - prePoint.x, currentPoint.y - prePoint.y);
|
||
} else {
|
||
me.dragoffX && selection.attr('x', currentPoint.x - me.dragoffX);
|
||
me.dragoffY && selection.attr('y', currentPoint.y - me.dragoffY);
|
||
}
|
||
}
|
||
}
|
||
|
||
me.prePoint = currentPoint;
|
||
canvas.draw();
|
||
|
||
var _me$_getSelected = me._getSelected(),
|
||
data = _me$_getSelected.data,
|
||
shapes = _me$_getSelected.shapes,
|
||
xValues = _me$_getSelected.xValues,
|
||
yValues = _me$_getSelected.yValues;
|
||
|
||
var eventObj = {
|
||
data: data,
|
||
shapes: shapes
|
||
};
|
||
|
||
if (xScale) {
|
||
eventObj[xScale.field] = xValues;
|
||
}
|
||
|
||
if (yScale) {
|
||
eventObj[yScale.field] = yValues;
|
||
} // 将框选的数据传递给 ev，供 onEnd 钩子使用
|
||
|
||
|
||
Util.mix(ev, eventObj);
|
||
eventObj.x = currentPoint.x;
|
||
eventObj.y = currentPoint.y;
|
||
me.onDragmove && me.onDragmove(eventObj);
|
||
me.onBrushmove && me.onBrushmove(eventObj);
|
||
};
|
||
|
||
_proto.end = function end(ev) {
|
||
var me = this;
|
||
|
||
if (!me.brushing && !me.dragging) {
|
||
return;
|
||
}
|
||
|
||
var data = me.data,
|
||
shapes = me.shapes,
|
||
xValues = me.xValues,
|
||
yValues = me.yValues,
|
||
canvas = me.canvas,
|
||
type = me.type,
|
||
startPoint = me.startPoint,
|
||
chart = me.chart,
|
||
container = me.container,
|
||
xScale = me.xScale,
|
||
yScale = me.yScale;
|
||
var offsetX = ev.offsetX,
|
||
offsetY = ev.offsetY;
|
||
var canvasDOM = canvas.get('canvasDOM');
|
||
canvasDOM.style.cursor = 'default';
|
||
|
||
if (startPoint === null) {
|
||
return;
|
||
}
|
||
|
||
if (Math.abs(startPoint.x - offsetX) <= 1 && Math.abs(startPoint.y - offsetY) <= 1) {
|
||
// 防止点击事件
|
||
me.brushing = false;
|
||
me.dragging = false;
|
||
container.clear();
|
||
canvas.draw();
|
||
return;
|
||
}
|
||
|
||
var eventObj = {
|
||
data: data,
|
||
shapes: shapes
|
||
};
|
||
|
||
if (xScale) {
|
||
eventObj[xScale.field] = xValues;
|
||
}
|
||
|
||
if (yScale) {
|
||
eventObj[yScale.field] = yValues;
|
||
} // 将框选的数据传递给 ev，供 onEnd 钩子使用
|
||
|
||
|
||
Util.mix(ev, eventObj);
|
||
eventObj.x = offsetX;
|
||
eventObj.y = offsetY;
|
||
|
||
if (me.dragging) {
|
||
me.dragging = false;
|
||
me.onDragend && me.onDragend(eventObj);
|
||
} else if (me.brushing) {
|
||
me.brushing = false;
|
||
var brushShape = me.brushShape;
|
||
var polygonPath = me.polygonPath;
|
||
|
||
if (type === 'POLYGON') {
|
||
polygonPath += 'z';
|
||
brushShape && !brushShape.get('destroyed') && brushShape.attr(Util.mix({}, brushShape._attrs, {
|
||
path: polygonPath
|
||
}));
|
||
me.polygonPath = polygonPath;
|
||
canvas.draw();
|
||
}
|
||
|
||
if (me.onBrushend) {
|
||
me.onBrushend(eventObj);
|
||
} else if (chart && me.filter) {
|
||
container.clear(); // clear the brush
|
||
// filter data
|
||
|
||
if (!me.isTransposed && type === 'X' || me.isTransposed && type === 'Y') {
|
||
xScale && chart.filter(xScale.field, function (val) {
|
||
return xValues.indexOf(val) > -1;
|
||
});
|
||
} else if (!me.isTransposed && type === 'Y' || me.isTransposed && type === 'X') {
|
||
yScale && chart.filter(yScale.field, function (val) {
|
||
return yValues.indexOf(val) > -1;
|
||
});
|
||
} else {
|
||
xScale && chart.filter(xScale.field, function (val) {
|
||
return xValues.indexOf(val) > -1;
|
||
});
|
||
yScale && chart.filter(yScale.field, function (val) {
|
||
return yValues.indexOf(val) > -1;
|
||
});
|
||
}
|
||
|
||
chart.repaint();
|
||
}
|
||
}
|
||
};
|
||
|
||
_proto.reset = function reset() {
|
||
var me = this;
|
||
var chart = me.chart,
|
||
filter = me.filter,
|
||
brushShape = me.brushShape,
|
||
canvas = me.canvas;
|
||
|
||
this._init(); // 重置各种参考值
|
||
|
||
|
||
if (chart && filter) {
|
||
chart.get('options').filters = {};
|
||
chart.repaint();
|
||
}
|
||
|
||
if (brushShape) {
|
||
brushShape.destroy();
|
||
canvas.draw();
|
||
}
|
||
};
|
||
|
||
_proto._limitCoordScope = function _limitCoordScope(point) {
|
||
var plot = this.plot;
|
||
var start = plot.start,
|
||
end = plot.end;
|
||
|
||
if (point.x < start.x) {
|
||
point.x = start.x;
|
||
}
|
||
|
||
if (point.x > end.x) {
|
||
point.x = end.x;
|
||
}
|
||
|
||
if (point.y < end.y) {
|
||
point.y = end.y;
|
||
}
|
||
|
||
if (point.y > start.y) {
|
||
point.y = start.y;
|
||
}
|
||
|
||
return point;
|
||
};
|
||
|
||
_proto._getSelected = function _getSelected() {
|
||
var me = this;
|
||
var chart = me.chart,
|
||
xScale = me.xScale,
|
||
yScale = me.yScale,
|
||
brushShape = me.brushShape,
|
||
canvas = me.canvas;
|
||
var pixelRatio = canvas.get('pixelRatio');
|
||
var selectedShapes = [];
|
||
var xValues = [];
|
||
var yValues = [];
|
||
var selectedData = [];
|
||
|
||
if (chart) {
|
||
var geoms = chart.get('geoms');
|
||
geoms.map(function (geom) {
|
||
var shapes = geom.getShapes();
|
||
shapes.map(function (shape) {
|
||
var shapeData = shape.get('origin');
|
||
|
||
if (!Array.isArray(shapeData)) {
|
||
// 线图、区域图等
|
||
shapeData = [shapeData];
|
||
}
|
||
|
||
shapeData.map(function (each) {
|
||
if (brushShape.isHit(each.x * pixelRatio, each.y * pixelRatio)) {
|
||
selectedShapes.push(shape);
|
||
var origin = each._origin;
|
||
selectedData.push(origin);
|
||
xScale && xValues.push(origin[xScale.field]);
|
||
yScale && yValues.push(origin[yScale.field]);
|
||
}
|
||
|
||
return each;
|
||
});
|
||
return shape;
|
||
});
|
||
return geom;
|
||
});
|
||
}
|
||
|
||
me.shapes = selectedShapes;
|
||
me.xValues = xValues;
|
||
me.yValues = yValues;
|
||
me.data = selectedData;
|
||
canvas.draw();
|
||
return {
|
||
data: selectedData,
|
||
xValues: xValues,
|
||
yValues: yValues,
|
||
shapes: selectedShapes
|
||
};
|
||
};
|
||
|
||
return Brush;
|
||
}(Interaction); // G2.registerInteraction('brush', Brush);
|
||
// G2.registerInteraction('Brush', Brush);
|
||
|
||
|
||
module.exports = Brush; |