html draw line div

1
2class CreateLine {
3
4    line;
5
6    constructor(element, element2) {
7        let el1 = this.GetCoord(element);
8        let el2 = this.GetCoord(element2);
9        let x1 = el1[0];
10        let y1 = el1[1];
11        let x2 = el2[0];
12        let y2 = el2[1];
13        let length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
14        let cx = ((x1 + x2) / 2) - (length / 2);
15        let cy = ((y1 + y2) / 2) - (1 / 2);
16        let deg = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
17        let line = document.createElement("div");
18        line.style.left = cx + "px";
19        line.style.top = cy + "px";
20        line.style.width = length + "px";
21        line.style.transform = "rotate(" + deg + "deg)";
22        this.line = line;
23    }
24
25    GetLine() {
26        return this.line;
27    }
28
29    GetCoord(element, top = true) {
30        let x = element.offsetLeft;
31        let y = element.offsetTop;
32        return [x, y];
33    }
34
35}