1 |
1e2b2c27
|
Tomáš Šimandl
|
/**
|
2 |
|
|
* The class which ensures zoom.
|
3 |
|
|
*/
|
4 |
|
|
function Zoom() {
|
5 |
|
|
var CONST_ZOOM_VALUES = [10, 25, 40, 50, 60, 70, 80, 90, 100, 125, 150, 200, 300, 400, 500];
|
6 |
|
|
|
7 |
|
|
this.currentZoom = 1;
|
8 |
|
|
this.currentZoomIndex = CONST_ZOOM_VALUES.indexOf(100);
|
9 |
|
|
|
10 |
|
|
var mouseX = 0;
|
11 |
|
|
var mouseY = 0;
|
12 |
|
|
|
13 |
|
|
$(document).mousemove(function(e) {
|
14 |
|
|
mouseX = e.pageX;
|
15 |
|
|
mouseY = e.pageY - 100; //odecteni horniho okraje od viewportu
|
16 |
|
|
});
|
17 |
|
|
|
18 |
|
|
/**
|
19 |
|
|
* Gets zoom step (no per cent).
|
20 |
|
|
*
|
21 |
|
|
* @param zoomStepInPercent zoom step in per cent
|
22 |
|
|
* @returns {number} zoom step
|
23 |
|
|
*/
|
24 |
|
|
function getZoomStep(zoomStepInPercent) {
|
25 |
|
|
return zoomStepInPercent/100.0;
|
26 |
|
|
}
|
27 |
|
|
|
28 |
|
|
/**
|
29 |
|
|
* This method ensures zoom in.
|
30 |
|
|
*/
|
31 |
|
|
this.zoomIn = function() {
|
32 |
|
|
if (this.currentZoomIndex >= (CONST_ZOOM_VALUES.length - 1)) return;
|
33 |
|
|
|
34 |
|
|
var viewport_pos_top_bef_zoom = $('#viewport').scrollTop(),//pozice odshora
|
35 |
|
|
viewport_pos_left_bef_zoom = $('#viewport').scrollLeft(),//pozice odshora
|
36 |
|
|
svg_width_bef = $('#svg1').width(),//pozice odshora
|
37 |
|
|
svg_height_bef = $('#svg1').height();//pozice odshora
|
38 |
|
|
|
39 |
|
|
|
40 |
|
|
$("#zoomOut").removeAttr("disabled");
|
41 |
|
|
$("#zoomOut img").attr("src", "images/zoom_out.png");
|
42 |
|
|
this.currentZoomIndex++;
|
43 |
|
|
|
44 |
|
|
var zoomStepInPercent = CONST_ZOOM_VALUES[this.currentZoomIndex];
|
45 |
|
|
this.currentZoom = getZoomStep(zoomStepInPercent);
|
46 |
|
|
|
47 |
|
|
var graph = $("#graph");
|
48 |
|
|
graph.attr('transform', 'scale('+ this.currentZoom + ')');
|
49 |
|
|
|
50 |
|
|
GraphManager.setSizeOfSvg();
|
51 |
|
|
graph.attr('transform', 'scale('+ this.currentZoom + ') ' + GraphManager.centerGraphInViewport(this.currentZoom));
|
52 |
|
|
$("#zoomValue").html(CONST_ZOOM_VALUES[this.currentZoomIndex] + "%");
|
53 |
|
|
|
54 |
|
|
var viewport_pos_top_after_zoom = $('#viewport').scrollTop(), //pozice odshora
|
55 |
|
|
viewport_pos_left_after_zoom = $('#viewport').scrollLeft(); //pozice odshora
|
56 |
|
|
|
57 |
|
|
//pokud se rozsiruje #svg1
|
58 |
|
|
if ( viewport_pos_top_bef_zoom != viewport_pos_top_after_zoom ) {
|
59 |
|
|
var svg_height_after = $('#svg1').height(),//pozice odshora
|
60 |
|
|
new_viewport_top = (mouseY + viewport_pos_top_bef_zoom ) / svg_height_bef;
|
61 |
|
|
|
62 |
|
|
new_viewport_top = (new_viewport_top * svg_height_after) - mouseY ;
|
63 |
|
|
|
64 |
|
|
var diff_konst = 0;
|
65 |
|
|
if (mouseX < ($('#viewport').height() / 2) ){
|
66 |
|
|
diff_konst = diff_konst * -1;
|
67 |
|
|
}
|
68 |
|
|
$('#viewport').scrollTop( (new_viewport_top) + diff_konst * new_viewport_top);
|
69 |
|
|
}
|
70 |
|
|
|
71 |
|
|
if ( viewport_pos_left_bef_zoom != viewport_pos_left_after_zoom ) {
|
72 |
|
|
var viewport_width = $('#viewport').width(),
|
73 |
|
|
svg_width_after = $('#svg1').width();//pozice odshora
|
74 |
|
|
|
75 |
|
|
viewport_pos_left_bef_zoom *= -1;
|
76 |
|
|
var new_viewport_left = (viewport_width - mouseX + viewport_pos_left_bef_zoom ) / svg_width_bef;
|
77 |
|
|
|
78 |
|
|
new_viewport_left = (new_viewport_left * svg_width_after) - (viewport_width - mouseX);
|
79 |
|
|
|
80 |
|
|
var diff_konst = 0;
|
81 |
|
|
if (mouseY < ($('#viewport').width() / 2) ){
|
82 |
|
|
diff_konst = diff_konst * -1;
|
83 |
|
|
}
|
84 |
|
|
new_viewport_left *=-1;
|
85 |
|
|
$('#viewport').scrollLeft( new_viewport_left - (diff_konst * new_viewport_left));
|
86 |
|
|
}
|
87 |
|
|
|
88 |
|
|
if (this.currentZoomIndex >= (CONST_ZOOM_VALUES.length - 1)) {
|
89 |
|
|
$("#zoomIn").attr("disabled", "disabled");
|
90 |
|
|
$("#zoomIn img").attr("src", "images/zoom_in_disabled.png");
|
91 |
|
|
}
|
92 |
|
|
};
|
93 |
|
|
|
94 |
|
|
/**
|
95 |
|
|
* This method ensures zoom out.
|
96 |
|
|
*/
|
97 |
|
|
this.zoomOut = function() {
|
98 |
|
|
if (this.currentZoomIndex <= 0) return;
|
99 |
|
|
|
100 |
|
|
var viewport_pos_top_bef_zoom = $('#viewport').scrollTop(),//pozice odshora
|
101 |
|
|
viewport_pos_left_bef_zoom = $('#viewport').scrollLeft(),//pozice odshora
|
102 |
|
|
svg_width_bef = $('#svg1').width(),//pozice odshora
|
103 |
|
|
svg_height_bef = $('#svg1').height();//pozice odshora
|
104 |
|
|
|
105 |
|
|
|
106 |
|
|
$("#zoomIn").removeAttr("disabled");
|
107 |
|
|
$("#zoomIn img").attr("src", "images/zoom_in.png");
|
108 |
|
|
this.currentZoomIndex--;
|
109 |
|
|
|
110 |
|
|
var zoomStepInPercent = CONST_ZOOM_VALUES[this.currentZoomIndex];
|
111 |
|
|
this.currentZoom = getZoomStep(zoomStepInPercent);
|
112 |
|
|
|
113 |
|
|
var graph = $("#graph");
|
114 |
|
|
graph.attr('transform', 'scale('+ this.currentZoom + ')');
|
115 |
|
|
|
116 |
|
|
GraphManager.setSizeOfSvg();
|
117 |
|
|
|
118 |
|
|
graph.attr('transform', 'scale('+ this.currentZoom + ') ' + GraphManager.centerGraphInViewport(this.currentZoom));
|
119 |
|
|
$("#zoomValue").html(CONST_ZOOM_VALUES[this.currentZoomIndex] + "%");
|
120 |
|
|
|
121 |
|
|
var viewport_pos_top_after_zoom = $('#viewport').scrollTop(), //pozice odshora
|
122 |
|
|
viewport_pos_left_after_zoom = $('#viewport').scrollLeft(); //pozice odshora
|
123 |
|
|
|
124 |
|
|
if ( viewport_pos_top_bef_zoom != viewport_pos_top_after_zoom ) {
|
125 |
|
|
|
126 |
|
|
var svg_height_after = $('#svg1').height(),//pozice odshora
|
127 |
|
|
new_viewport_top = (mouseY + viewport_pos_top_bef_zoom ) / svg_height_bef;
|
128 |
|
|
|
129 |
|
|
new_viewport_top = (new_viewport_top * svg_height_after) - mouseY;
|
130 |
|
|
|
131 |
|
|
$('#viewport').scrollTop( new_viewport_top );
|
132 |
|
|
}
|
133 |
|
|
|
134 |
|
|
if ( viewport_pos_left_bef_zoom != viewport_pos_left_after_zoom ) {
|
135 |
|
|
var viewport_width = $('#viewport').width(),
|
136 |
|
|
svg_width_after = $('#svg1').width();//šířka
|
137 |
|
|
|
138 |
|
|
viewport_pos_left_bef_zoom *= -1;
|
139 |
|
|
var new_viewport_left = (viewport_width - mouseX + viewport_pos_left_bef_zoom ) / svg_width_bef;
|
140 |
|
|
|
141 |
|
|
new_viewport_left = (new_viewport_left * svg_width_after) - (viewport_width - mouseX);
|
142 |
|
|
|
143 |
|
|
$('#viewport').scrollLeft( new_viewport_left * -1 );
|
144 |
|
|
}
|
145 |
|
|
|
146 |
|
|
if (this.currentZoomIndex <= 0) {
|
147 |
|
|
$("#zoomOut").attr("disabled", "disabled");
|
148 |
|
|
$("#zoomOut img").attr("src", "images/zoom_out_disabled.png");
|
149 |
|
|
}
|
150 |
|
|
};
|
151 |
|
|
}
|