-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.ts
65 lines (57 loc) · 1.76 KB
/
index.ts
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
import { select, Selection } from "d3";
import NightingaleBaseElement, {
Constructor,
} from "../../../nightingale-base-element";
import withHighlight, { WithHighlightInterface } from "..";
import withZoom, { WithZoomInterface } from "../../withZoom";
export interface WithSVGHighlightInterface
extends WithZoomInterface,
WithHighlightInterface {
createHighlightGroup: () => void;
updateHighlight: () => void;
}
const withSVGHighlight = <T extends Constructor<NightingaleBaseElement>>(
superClass: T
) => {
class WithSVGHighlight extends withZoom(withHighlight(superClass)) {
protected highlighted?: Selection<
SVGGElement,
unknown,
HTMLElement | SVGElement | null,
unknown
>;
createHighlightGroup() {
const svg = select(this as unknown as NightingaleBaseElement).selectAll<
SVGSVGElement,
unknown
>("svg");
this.highlighted = svg.append("g").attr("class", "highlighted");
}
updateHighlight() {
if (!this.highlighted) return;
const highlighs = this.highlighted
.selectAll<
SVGRectElement,
{
start: number;
end: number;
}[]
>("rect")
.data(this.highlightedRegion.segments);
highlighs
.enter()
.append("rect")
.style("pointer-events", "none")
.merge(highlighs)
.attr("fill", this["highlight-color"])
.attr("height", this.height)
.attr("x", (d) => this.getXFromSeqPosition(d.start))
.attr("width", (d) =>
Math.max(0, this.getSingleBaseWidth() * (d.end - d.start + 1))
);
highlighs.exit().remove();
}
}
return WithSVGHighlight as Constructor<WithSVGHighlightInterface> & T;
};
export default withSVGHighlight;