-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
112 lines (98 loc) · 3.59 KB
/
script.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
but.addEventListener('click', createDiv);
var array = [];
var lines = [];
function createDiv() {
array.push(new CreateBlock);
}
function CreateBlock() {
this.newDiv = document.createElement('div');
this.butt = document.createElement('button');
this.butt.onclick = makeLine.bind(this);
this.butt.className = 'button';
this.newDiv.className = 'windows';
this.newDiv.onmousedown = move;
document.body.appendChild(this.newDiv);
this.newDiv.appendChild(this.butt);
}
function makeLine() {
this.newDiv.onmousedown = start.bind(this);
}
function start() {
var box = this.newDiv.getBoundingClientRect();
var shiftX = event.clientX - box.left;
var shiftY = event.clientY - box.top;
array.forEach(function(obj) {
obj.newDiv.onmousedown = finish.bind(obj);
});
finish.shiftX = shiftX;
finish.shiftY = shiftY;
finish.start = this;
this.newDiv.onemousedown = null;
}
function finish() {
var box = this.newDiv.getBoundingClientRect();
var shiftX = event.clientX - box.left;
var shiftY = event.clientY - box.top;
lines.push(new CreateLine(finish.start, this, finish.shiftX, finish.shiftY, shiftX, shiftY));
array.forEach(function(obj) {
obj.newDiv.onmousedown = move;
});
}
function move() {
var cont = document;
var box = this.getBoundingClientRect();
var shiftX = event.clientX - box.left;
var shiftY = event.clientY - box.top;
cont.onmousemove = mover.bind(this);
function mover() {
this.style.left = event.clientX - shiftX + 'px';
this.style.top = event.clientY - shiftY + 'px';
}
cont.onmouseup = function() {
cont.onmousemove = null;
cont.onmouseup = null;
lines.forEach(function(obj) {
moveLine(obj);
});
}
}
function CreateLine(block1, block2, fromX, fromY, toX, toY) { // создаем связь
this.line = document.createElement('div');
this.from = block1.newDiv;
this.fromShiftX = fromX;
this.fromShiftY = fromY;
this.to = block2.newDiv;
this.toShiftX = toX;
this.toShiftY = toY;
this.line.className = 'lines';
document.body.appendChild(this.line);
moveLine(this);
}
function moveLine(obj) { // перемещение связей
var coordsFrom = obj.from.getBoundingClientRect();
var coordsTo = obj.to.getBoundingClientRect();
var angle, catheterX, catheterY = 0; // угол, координаты
var sideA, sideB, sideC = 0; // стороны треугольника
var hypotenuse; // длина палки
var heightOfTriangle; // высота треугольника
var offsetToLeft; // смещение влево
var lineFromLeft = coordsFrom.left + obj.fromShiftX;
var lineFromTop = coordsFrom.top + obj.fromShiftY;
var lineToLeft = coordsTo.left + obj.toShiftX;
var lineToTop = coordsTo.top + obj.toShiftY;
catheterX = lineToLeft - lineFromLeft;
catheterY = lineToTop - lineFromTop;
hypotenuse = Math.sqrt(catheterX*catheterX + catheterY*catheterY); // длина палки
obj.line.style.width = hypotenuse + 'px';
angle = Math.atan(1/(catheterX/catheterY)) * (180/Math.PI); // вычисляем угол
if ( catheterX < 0) {
angle += 180;
}
obj.line.style.transform = 'rotateZ(' + angle + 'deg)';
sideA = sideB = hypotenuse/2; // стороны треугольника две
sideC = 2 * sideA * Math.sin(angle/2 * Math.PI / 180); // третья сторона
heightOfTriangle = sideB * Math.sin(angle * Math.PI / 180); // высота
offsetToLeft = Math.sqrt(sideC*sideC - heightOfTriangle*heightOfTriangle); // смещение влево
obj.line.style.top = lineFromTop + heightOfTriangle + 'px'; // отступ сверху
obj.line.style.left = lineFromLeft - offsetToLeft + 'px'; // отступ слева
}