root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.flot.navigate.js @ 76
History | View | Annotate | Download (11.2 KB)
1 |
/*
|
---|---|
2 |
Flot plugin for adding panning and zooming capabilities to a plot.
|
3 |
|
4 |
The default behaviour is double click and scrollwheel up/down to zoom
|
5 |
in, drag to pan. The plugin defines plot.zoom({ center }),
|
6 |
plot.zoomOut() and plot.pan(offset) so you easily can add custom
|
7 |
controls. It also fires a "plotpan" and "plotzoom" event when
|
8 |
something happens, useful for synchronizing plots.
|
9 |
|
10 |
Example usage:
|
11 |
|
12 |
plot = $.plot(...);
|
13 |
|
14 |
// zoom default amount in on the pixel (100, 200)
|
15 |
plot.zoom({ center: { left: 10, top: 20 } });
|
16 |
|
17 |
// zoom out again
|
18 |
plot.zoomOut({ center: { left: 10, top: 20 } });
|
19 |
|
20 |
// pan 100 pixels to the left and 20 down
|
21 |
plot.pan({ left: -100, top: 20 })
|
22 |
|
23 |
|
24 |
Options:
|
25 |
|
26 |
zoom: {
|
27 |
interactive: false
|
28 |
trigger: "dblclick" // or "click" for single click
|
29 |
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
30 |
}
|
31 |
|
32 |
pan: {
|
33 |
interactive: false
|
34 |
}
|
35 |
|
36 |
xaxis, yaxis, x2axis, y2axis: {
|
37 |
zoomRange: null // or [number, number] (min range, max range)
|
38 |
panRange: null // or [number, number] (min, max)
|
39 |
}
|
40 |
|
41 |
"interactive" enables the built-in drag/click behaviour. "amount" is
|
42 |
the amount to zoom the viewport relative to the current range, so 1 is
|
43 |
100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out).
|
44 |
|
45 |
"zoomRange" is the interval in which zooming can happen, e.g. with
|
46 |
zoomRange: [1, 100] the zoom will never scale the axis so that the
|
47 |
difference between min and max is smaller than 1 or larger than 100.
|
48 |
You can set either of them to null to ignore.
|
49 |
|
50 |
"panRange" confines the panning to stay within a range, e.g. with
|
51 |
panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
|
52 |
other. Either can be null.
|
53 |
*/
|
54 |
|
55 |
|
56 |
// First two dependencies, jquery.event.drag.js and
|
57 |
// jquery.mousewheel.js, we put them inline here to save people the
|
58 |
// effort of downloading them.
|
59 |
|
60 |
/*
|
61 |
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
|
62 |
Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
|
63 |
*/
|
64 |
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery); |
65 |
|
66 |
|
67 |
/* jquery.mousewheel.min.js
|
68 |
* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
|
69 |
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
70 |
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
71 |
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
72 |
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
73 |
*
|
74 |
* Version: 3.0.2
|
75 |
*
|
76 |
* Requires: 1.2.2+
|
77 |
*/
|
78 |
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery); |
79 |
|
80 |
|
81 |
|
82 |
|
83 |
(function ($) { |
84 |
var options = {
|
85 |
xaxis: {
|
86 |
zoomRange: null, // or [number, number] (min range, max range) |
87 |
panRange: null // or [number, number] (min, max) |
88 |
}, |
89 |
zoom: {
|
90 |
interactive: false, |
91 |
trigger: "dblclick", // or "click" for single click |
92 |
amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out) |
93 |
}, |
94 |
pan: {
|
95 |
interactive: false |
96 |
} |
97 |
}; |
98 |
|
99 |
function init(plot) { |
100 |
function bindEvents(plot, eventHolder) { |
101 |
var o = plot.getOptions();
|
102 |
if (o.zoom.interactive) {
|
103 |
function clickHandler(e, zoomOut) { |
104 |
var c = plot.offset();
|
105 |
c.left = e.pageX - c.left; |
106 |
c.top = e.pageY - c.top; |
107 |
if (zoomOut)
|
108 |
plot.zoomOut({ center: c });
|
109 |
else
|
110 |
plot.zoom({ center: c });
|
111 |
} |
112 |
|
113 |
eventHolder[o.zoom.trigger](clickHandler); |
114 |
|
115 |
eventHolder.mousewheel(function (e, delta) {
|
116 |
clickHandler(e, delta < 0);
|
117 |
return false; |
118 |
}); |
119 |
} |
120 |
if (o.pan.interactive) {
|
121 |
var prevCursor = 'default', pageX = 0, pageY = 0; |
122 |
|
123 |
eventHolder.bind("dragstart", { distance: 10 }, function (e) { |
124 |
if (e.which != 1) // only accept left-click |
125 |
return false; |
126 |
eventHolderCursor = eventHolder.css('cursor');
|
127 |
eventHolder.css('cursor', 'move'); |
128 |
pageX = e.pageX; |
129 |
pageY = e.pageY; |
130 |
}); |
131 |
eventHolder.bind("drag", function (e) { |
132 |
// unused at the moment, but we need it here to
|
133 |
// trigger the dragstart/dragend events
|
134 |
}); |
135 |
eventHolder.bind("dragend", function (e) { |
136 |
eventHolder.css('cursor', prevCursor);
|
137 |
plot.pan({ left: pageX - e.pageX,
|
138 |
top: pageY - e.pageY });
|
139 |
}); |
140 |
} |
141 |
} |
142 |
|
143 |
plot.zoomOut = function (args) { |
144 |
if (!args)
|
145 |
args = {}; |
146 |
|
147 |
if (!args.amount)
|
148 |
args.amount = plot.getOptions().zoom.amount |
149 |
|
150 |
args.amount = 1 / args.amount;
|
151 |
plot.zoom(args); |
152 |
} |
153 |
|
154 |
plot.zoom = function (args) { |
155 |
if (!args)
|
156 |
args = {}; |
157 |
|
158 |
var axes = plot.getAxes(),
|
159 |
options = plot.getOptions(), |
160 |
c = args.center, |
161 |
amount = args.amount ? args.amount : options.zoom.amount, |
162 |
w = plot.width(), h = plot.height(); |
163 |
|
164 |
if (!c)
|
165 |
c = { left: w / 2, top: h / 2 }; |
166 |
|
167 |
var xf = c.left / w,
|
168 |
x1 = c.left - xf * w / amount, |
169 |
x2 = c.left + (1 - xf) * w / amount,
|
170 |
yf = c.top / h, |
171 |
y1 = c.top - yf * h / amount, |
172 |
y2 = c.top + (1 - yf) * h / amount;
|
173 |
|
174 |
function scaleAxis(min, max, name) { |
175 |
var axis = axes[name],
|
176 |
axisOptions = options[name]; |
177 |
|
178 |
if (!axis.used)
|
179 |
return;
|
180 |
|
181 |
min = axis.c2p(min); |
182 |
max = axis.c2p(max); |
183 |
if (max < min) { // make sure min < max |
184 |
var tmp = min
|
185 |
min = max; |
186 |
max = tmp; |
187 |
} |
188 |
|
189 |
var range = max - min, zr = axisOptions.zoomRange;
|
190 |
if (zr &&
|
191 |
((zr[0] != null && range < zr[0]) || |
192 |
(zr[1] != null && range > zr[1]))) |
193 |
return;
|
194 |
|
195 |
axisOptions.min = min; |
196 |
axisOptions.max = max; |
197 |
} |
198 |
|
199 |
scaleAxis(x1, x2, 'xaxis');
|
200 |
scaleAxis(x1, x2, 'x2axis');
|
201 |
scaleAxis(y1, y2, 'yaxis');
|
202 |
scaleAxis(y1, y2, 'y2axis');
|
203 |
|
204 |
plot.setupGrid(); |
205 |
plot.draw(); |
206 |
|
207 |
if (!args.preventEvent)
|
208 |
plot.getPlaceholder().trigger("plotzoom", [ plot ]);
|
209 |
} |
210 |
|
211 |
plot.pan = function (args) { |
212 |
var l = +args.left, t = +args.top,
|
213 |
axes = plot.getAxes(), options = plot.getOptions(); |
214 |
|
215 |
if (isNaN(l))
|
216 |
l = 0;
|
217 |
if (isNaN(t))
|
218 |
t = 0;
|
219 |
|
220 |
function panAxis(delta, name) { |
221 |
var axis = axes[name],
|
222 |
axisOptions = options[name], |
223 |
min, max; |
224 |
|
225 |
if (!axis.used)
|
226 |
return;
|
227 |
|
228 |
min = axis.c2p(axis.p2c(axis.min) + delta), |
229 |
max = axis.c2p(axis.p2c(axis.max) + delta); |
230 |
|
231 |
var pr = axisOptions.panRange;
|
232 |
if (pr) {
|
233 |
// check whether we hit the wall
|
234 |
if (pr[0] != null && pr[0] > min) { |
235 |
delta = pr[0] - min;
|
236 |
min += delta; |
237 |
max += delta; |
238 |
} |
239 |
|
240 |
if (pr[1] != null && pr[1] < max) { |
241 |
delta = pr[1] - max;
|
242 |
min += delta; |
243 |
max += delta; |
244 |
} |
245 |
} |
246 |
|
247 |
axisOptions.min = min; |
248 |
axisOptions.max = max; |
249 |
} |
250 |
|
251 |
panAxis(l, 'xaxis');
|
252 |
panAxis(l, 'x2axis');
|
253 |
panAxis(t, 'yaxis');
|
254 |
panAxis(t, 'y2axis');
|
255 |
|
256 |
plot.setupGrid(); |
257 |
plot.draw(); |
258 |
|
259 |
if (!args.preventEvent)
|
260 |
plot.getPlaceholder().trigger("plotpan", [ plot ]);
|
261 |
} |
262 |
|
263 |
plot.hooks.bindEvents.push(bindEvents); |
264 |
} |
265 |
|
266 |
$.plot.plugins.push({
|
267 |
init: init,
|
268 |
options: options,
|
269 |
name: 'navigate', |
270 |
version: '1.1' |
271 |
}); |
272 |
})(jQuery); |