-
Notifications
You must be signed in to change notification settings - Fork 0
/
escala.js
119 lines (110 loc) · 3.5 KB
/
escala.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
113
114
115
116
117
118
119
let escala = 1,
panoramica = false,
coordenadaX = 0,
coordenadaY = 0,
inicio = { x: 0, y: 0 };
const svg = document.getElementById("canvas"),
tamLetra = 16,
desviacionNombres = -50;
function establecerTransform() {
svg.style.transform =
"translate(" +
coordenadaX +
"px, " +
coordenadaY +
"px) scale(" +
escala +
")";
}
svg.addEventListener("mousedown", (e) => {
e.preventDefault();
inicio = { x: e.clientX - coordenadaX, y: e.clientY - coordenadaY };
panoramica = true;
});
svg.addEventListener("mouseup", () => {
panoramica = false;
});
svg.addEventListener("mousemove", (e) => {
e.preventDefault();
if (!panoramica) return;
coordenadaX = e.clientX - inicio.x;
coordenadaY = e.clientY - inicio.y;
establecerTransform();
});
svg.addEventListener("wheel", (e) => {
e.preventDefault();
const xs = (e.clientX - coordenadaX) / escala,
ys = (e.clientY - coordenadaY) / escala,
delta = e.wheelDelta ? e.wheelDelta : -e.deltaY;
delta > 0 ? (escala *= 1.2) : (escala /= 1.2);
escala = Math.max(1, escala);
coordenadaX = e.clientX - xs * escala;
coordenadaY = e.clientY - ys * escala;
/**
* Al hacer zoom se reasignan valores de ancho y
* tamaño de letra, para poder visualizar mejor los
* elementos.
*/
lineas.forEach((linea) => {
linea.setAttribute("font-size", tamLetra / escala);
if (linea.getAttribute("x") < ANCHO_CUADRANTE / 2 - 100)
linea.setAttribute("dx", desviacionNombres / escala);
});
NODOS.forEach((nodo) => {
const circulo = document.getElementById("nodo-" + nodo.id);
circulo.setAttribute("r", nodo.r / escala);
});
ENLACES.forEach((enlace) => {
const path = document.getElementById(enlace.id);
path.setAttribute("stroke-width", enlace.ancho / escala);
});
establecerTransform();
});
// Eventos táctiles
let touchStartX, touchStartY, initialPinchDistance, initialScale;
svg.addEventListener("touchstart", (e) => {
if (e.touches.length === 1) {
touchStartX = e.touches[0].clientX - coordenadaX;
touchStartY = e.touches[0].clientY - coordenadaY;
} else if (e.touches.length === 2) {
initialPinchDistance = Math.hypot(
e.touches[1].clientX - e.touches[0].clientX,
e.touches[1].clientY - e.touches[0].clientY
);
initialScale = escala;
}
});
svg.addEventListener("touchmove", (e) => {
e.preventDefault();
if (e.touches.length === 1) {
coordenadaX = e.touches[0].clientX - touchStartX;
coordenadaY = e.touches[0].clientY - touchStartY;
establecerTransform();
} else if (e.touches.length === 2) {
const currentPinchDistance = Math.hypot(
e.touches[1].clientX - e.touches[0].clientX,
e.touches[1].clientY - e.touches[0].clientY
);
escala = (currentPinchDistance / initialPinchDistance) * initialScale;
escala = Math.max(1, escala);
/**
* Al hacer zoom se reasignan valores de ancho y
* tamaño de letra, para poder visualizar mejor los
* elementos.
*/
lineas.forEach((linea) => {
linea.setAttribute("font-size", tamLetra / escala);
if (linea.getAttribute("x") < ANCHO_CUADRANTE / 2 - 100)
linea.setAttribute("dx", desviacionNombres / escala);
});
NODOS.forEach((nodo) => {
const circulo = document.getElementById("nodo-" + nodo.id);
circulo.setAttribute("r", nodo.r / escala);
});
ENLACES.forEach((enlace) => {
const path = document.getElementById(enlace.id);
path.setAttribute("stroke-width", enlace.ancho / escala);
});
establecerTransform();
}
});