/
region-filter.js
88 lines (76 loc) · 2.28 KB
/
region-filter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
const Util = require('../../util/common');
const GuideBase = require('./base');
const { Rect } = require('../../graphic/shape');
class RegionFilter extends GuideBase {
_initDefaultCfg() {
this.type = 'regionFilter';
this.start = [];
this.end = [];
this.color = null;
this.style = null;
}
render(coord) {
const start = this.parsePoint(coord, this.start);
const end = this.parsePoint(coord, this.end);
if (!start || !end) {
return;
}
const clip = new Rect({
attrs: {
x: Math.min(start.x, end.x),
y: Math.min(start.y, end.y),
width: Math.abs(end.x - start.x),
height: Math.abs(end.y - start.y)
}
}); // 新建剪切区域
this.clip = clip;
const chart = this.chart;
const color = this.color;
const style = this.style || {};
const regionElements = [];
const geoms = chart.get('geoms');
geoms.map(geom => {
const geomContainer = geom.get('container');
const children = geomContainer.get('children');
const group = geomContainer.addGroup({
zIndex: 10,
className: 'guide-region-filter'
});
children.map(c => {
if (c.get('isShape')) {
const type = c.get('type');
const attrs = Util.mix({}, c.get('attrs'), style);
if (color && (attrs.fill || attrs.fillStyle)) {
attrs.fill = attrs.fillStyle = color;
}
if (color && (attrs.stroke || attrs.strokeStyle)) {
attrs.stroke = attrs.strokeStyle = color;
}
const cfg = {
attrs
};
if (type === 'custom' || type === 'Custom') { // custom 类型的 shape 会自定义绘制 path 的逻辑
cfg.createPath = c.get('createPath');
cfg.calculateBox = c.get('calculateBox');
}
group.addShape(type, cfg);
}
return c;
});
group.attr('clip', clip);
geomContainer.sort();
regionElements.push(group);
return geom;
});
this.element = regionElements;
}
remove() {
const element = this.element;
Util.each(element, group => {
group && group.remove(true);
});
this.clip && this.clip.remove(true);
}
}
GuideBase.RegionFilter = RegionFilter;
module.exports = RegionFilter;