root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.flot.navigate.js @ 70
History | View | Annotate | Download (11.2 KB)
1 | 11 | alexbesir | /*
|
---|---|---|---|
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); |