1 | class Datapoint {
|
2 | |
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | constructor(canvas, datapoint) {
|
9 | this.canvas = canvas;
|
10 |
|
11 | this.model = datapoint;
|
12 | this.radius = 0;
|
13 | this.steps = 0;
|
14 | }
|
15 |
|
16 | |
17 |
|
18 |
|
19 | updateFromModel() {
|
20 | [this.x, this.y] = this.model.features;
|
21 | this.color = this.canvas.getClassColor(this.model.classIndex);
|
22 | this.marked = this.model.isMarked();
|
23 | }
|
24 |
|
25 | |
26 |
|
27 |
|
28 | update() {
|
29 | this.updateFromModel();
|
30 |
|
31 |
|
32 | const progress = Math.min(this.steps / 20, 0.75);
|
33 | this.radius = Math.sin(progress * Math.PI) * 6;
|
34 |
|
35 |
|
36 | this.steps += 1;
|
37 | }
|
38 |
|
39 | |
40 |
|
41 |
|
42 | draw() {
|
43 | const context = this.canvas.canvas.context;
|
44 |
|
45 |
|
46 | const [pointCx, pointCy] = this.canvas.convertFeaturesToCanvasCoordinates(this.x, this.y);
|
47 |
|
48 |
|
49 | context.beginPath();
|
50 | context.arc(pointCx, pointCy, this.radius, 0, 2 * Math.PI, false);
|
51 | context.fillStyle = this.color;
|
52 | context.fill();
|
53 | context.lineWidth = 1;
|
54 | context.strokeStyle = '#555';
|
55 | context.stroke();
|
56 |
|
57 |
|
58 | if (this.marked) {
|
59 | context.beginPath();
|
60 | context.arc(pointCx, pointCy, this.radius + 3, 0, 2 * Math.PI, false);
|
61 | context.lineWidth = 1;
|
62 | context.strokeStyle = '#555';
|
63 | context.stroke();
|
64 | }
|
65 | }
|
66 | }
|
67 |
|
68 | export default Datapoint;
|