OLD | NEW |
1 (function(i){i.fn.drag=function(j,k,l){if(k){this.bind("dragstart",j)}if(l){this
.bind("dragend",l)}return !j?this.trigger("drag"):this.bind("drag",k?k:j)};var d
=i.event,c=d.special,h=c.drag={not:":input",distance:0,which:1,dragging:false,se
tup:function(j){j=i.extend({distance:h.distance,which:h.which,not:h.not},j||{});
j.distance=e(j.distance);d.add(this,"mousedown",f,j);if(this.attachEvent){this.a
ttachEvent("ondragstart",a)}},teardown:function(){d.remove(this,"mousedown",f);i
f(this===h.dragging){h.dragging=h.proxy=false}g(this,true);if(this.detachEvent){
this.detachEvent("ondragstart",a)}}};c.dragstart=c.dragend={setup:function(){},t
eardown:function(){}};function f(j){var k=this,l,m=j.data||{};if(m.elem){k=j.dra
gTarget=m.elem;j.dragProxy=h.proxy||k;j.cursorOffsetX=m.pageX-m.left;j.cursorOff
setY=m.pageY-m.top;j.offsetX=j.pageX-j.cursorOffsetX;j.offsetY=j.pageY-j.cursorO
ffsetY}else{if(h.dragging||(m.which>0&&j.which!=m.which)||i(j.target).is(m.not))
{return}}switch(j.type){case"mousedown":i.extend(m,i(k).offset(),{elem:k,target:
j.target,pageX:j.pageX,pageY:j.pageY});d.add(document,"mousemove mouseup",f,m);g
(k,false);h.dragging=null;return false;case !h.dragging&&"mousemove":if(e(j.page
X-m.pageX)+e(j.pageY-m.pageY)<m.distance){break}j.target=m.target;l=b(j,"dragsta
rt",k);if(l!==false){h.dragging=k;h.proxy=j.dragProxy=i(l||k)[0]}case"mousemove"
:if(h.dragging){l=b(j,"drag",k);if(c.drop){c.drop.allowed=(l!==false);c.drop.han
dler(j)}if(l!==false){break}j.type="mouseup"}case"mouseup":d.remove(document,"mo
usemove mouseup",f);if(h.dragging){if(c.drop){c.drop.handler(j)}b(j,"dragend",k)
}g(k,true);h.dragging=h.proxy=m.elem=false;break}return true}function b(m,k,j){m
.type=k;var l=i.event.handle.call(j,m);return l===false?false:l||m.result}functi
on e(j){return Math.pow(j,2)}function a(){return(h.dragging===false)}function g(
j,k){if(!j){return}j.unselectable=k?"off":"on";j.onselectstart=function(){return
k};if(j.style){j.style.MozUserSelect=k?"":"none"}}})(jQuery);(function(f){var e
=["DOMMouseScroll","mousewheel"];f.event.special.mousewheel={setup:function(){if
(this.addEventListener){for(var a=e.length;a;){this.addEventListener(e[--a],d,fa
lse)}}else{this.onmousewheel=d}},teardown:function(){if(this.removeEventListener
){for(var a=e.length;a;){this.removeEventListener(e[--a],d,false)}}else{this.onm
ousewheel=null}}};f.fn.extend({mousewheel:function(a){return a?this.bind("mousew
heel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind
("mousewheel",a)}});function d(b){var h=[].slice.call(arguments,1),a=0,c=true;b=
f.event.fix(b||window.event);b.type="mousewheel";if(b.wheelDelta){a=b.wheelDelta
/120}if(b.detail){a=-b.detail/3}h.unshift(b,a);return f.event.handle.apply(this,
h)}})(jQuery);(function(b){var a={xaxis:{zoomRange:null,panRange:null},zoom:{int
eractive:false,trigger:"dblclick",amount:1.5},pan:{interactive:false,cursor:"mov
e",frameRate:20}};function c(o){function m(q,p){var r=o.offset();r.left=q.pageX-
r.left;r.top=q.pageY-r.top;if(p){o.zoomOut({center:r})}else{o.zoom({center:r})}}
function d(p,q){m(p,q<0);return false}var i="default",g=0,e=0,n=null;function f(
p){if(p.which!=1){return false}var q=o.getPlaceholder().css("cursor");if(q){i=q}
o.getPlaceholder().css("cursor",o.getOptions().pan.cursor);g=p.pageX;e=p.pageY}f
unction j(q){var p=o.getOptions().pan.frameRate;if(n||!p){return}n=setTimeout(fu
nction(){o.pan({left:g-q.pageX,top:e-q.pageY});g=q.pageX;e=q.pageY;n=null},1/p*1
000)}function h(p){if(n){clearTimeout(n);n=null}o.getPlaceholder().css("cursor",
i);o.pan({left:g-p.pageX,top:e-p.pageY})}function l(q,p){var r=q.getOptions();if
(r.zoom.interactive){p[r.zoom.trigger](m);p.mousewheel(d)}if(r.pan.interactive){
p.bind("dragstart",{distance:10},f);p.bind("drag",j);p.bind("dragend",h)}}o.zoom
Out=function(p){if(!p){p={}}if(!p.amount){p.amount=o.getOptions().zoom.amount}p.
amount=1/p.amount;o.zoom(p)};o.zoom=function(q){if(!q){q={}}var x=q.center,r=q.a
mount||o.getOptions().zoom.amount,p=o.width(),t=o.height();if(!x){x={left:p/2,to
p:t/2}}var s=x.left/p,v=x.top/t,u={x:{min:x.left-s*p/r,max:x.left+(1-s)*p/r},y:{
min:x.top-v*t/r,max:x.top+(1-v)*t/r}};b.each(o.getAxes(),function(z,C){var D=C.o
ptions,B=u[C.direction].min,w=u[C.direction].max,E=D.zoomRange;if(E===false){ret
urn}B=C.c2p(B);w=C.c2p(w);if(B>w){var A=B;B=w;w=A}var y=w-B;if(E&&((E[0]!=null&&
y<E[0])||(E[1]!=null&&y>E[1]))){return}D.min=B;D.max=w});o.setupGrid();o.draw();
if(!q.preventEvent){o.getPlaceholder().trigger("plotzoom",[o])}};o.pan=function(
p){var q={x:+p.left,y:+p.top};if(isNaN(q.x)){q.x=0}if(isNaN(q.y)){q.y=0}b.each(o
.getAxes(),function(s,u){var v=u.options,t,r,w=q[u.direction];t=u.c2p(u.p2c(u.mi
n)+w),r=u.c2p(u.p2c(u.max)+w);var x=v.panRange;if(x===false){return}if(x){if(x[0
]!=null&&x[0]>t){w=x[0]-t;t+=w;r+=w}if(x[1]!=null&&x[1]<r){w=x[1]-r;t+=w;r+=w}}v
.min=t;v.max=r});o.setupGrid();o.draw();if(!p.preventEvent){o.getPlaceholder().t
rigger("plotpan",[o])}};function k(q,p){p.unbind(q.getOptions().zoom.trigger,m);
p.unbind("mousewheel",d);p.unbind("dragstart",f);p.unbind("drag",j);p.unbind("dr
agend",h);if(n){clearTimeout(n)}}o.hooks.bindEvents.push(l);o.hooks.shutdown.pus
h(k)}b.plot.plugins.push({init:c,options:a,name:"navigate",version:"1.3"})})(jQu
ery); | 1 /* Flot plugin for adding the ability to pan and zoom the plot. |
| 2 |
| 3 Copyright (c) 2007-2013 IOLA and Ole Laursen. |
| 4 Licensed under the MIT license. |
| 5 |
| 6 The default behaviour is double click and scrollwheel up/down to zoom in, drag |
| 7 to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and |
| 8 plot.pan( offset ) so you easily can add custom controls. It also fires |
| 9 "plotpan" and "plotzoom" events, useful for synchronizing plots. |
| 10 |
| 11 The plugin supports these options: |
| 12 |
| 13 zoom: { |
| 14 interactive: false |
| 15 trigger: "dblclick" // or "click" for single click |
| 16 amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) |
| 17 } |
| 18 |
| 19 pan: { |
| 20 interactive: false |
| 21 cursor: "move" // CSS mouse cursor value used when dragging
, e.g. "pointer" |
| 22 frameRate: 20 |
| 23 } |
| 24 |
| 25 xaxis, yaxis, x2axis, y2axis: { |
| 26 zoomRange: null // or [ number, number ] (min range, max range)
or false |
| 27 panRange: null // or [ number, number ] (min, max) or false |
| 28 } |
| 29 |
| 30 "interactive" enables the built-in drag/click behaviour. If you enable |
| 31 interactive for pan, then you'll have a basic plot that supports moving |
| 32 around; the same for zoom. |
| 33 |
| 34 "amount" specifies the default amount to zoom in (so 1.5 = 150%) relative to |
| 35 the current viewport. |
| 36 |
| 37 "cursor" is a standard CSS mouse cursor string used for visual feedback to the |
| 38 user when dragging. |
| 39 |
| 40 "frameRate" specifies the maximum number of times per second the plot will |
| 41 update itself while the user is panning around on it (set to null to disable |
| 42 intermediate pans, the plot will then not update until the mouse button is |
| 43 released). |
| 44 |
| 45 "zoomRange" is the interval in which zooming can happen, e.g. with zoomRange: |
| 46 [1, 100] the zoom will never scale the axis so that the difference between min |
| 47 and max is smaller than 1 or larger than 100. You can set either end to null |
| 48 to ignore, e.g. [1, null]. If you set zoomRange to false, zooming on that axis |
| 49 will be disabled. |
| 50 |
| 51 "panRange" confines the panning to stay within a range, e.g. with panRange: |
| 52 [-10, 20] panning stops at -10 in one end and at 20 in the other. Either can |
| 53 be null, e.g. [-10, null]. If you set panRange to false, panning on that axis |
| 54 will be disabled. |
| 55 |
| 56 Example API usage: |
| 57 |
| 58 plot = $.plot(...); |
| 59 |
| 60 // zoom default amount in on the pixel ( 10, 20 ) |
| 61 plot.zoom({ center: { left: 10, top: 20 } }); |
| 62 |
| 63 // zoom out again |
| 64 plot.zoomOut({ center: { left: 10, top: 20 } }); |
| 65 |
| 66 // zoom 200% in on the pixel (10, 20) |
| 67 plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); |
| 68 |
| 69 // pan 100 pixels to the left and 20 down |
| 70 plot.pan({ left: -100, top: 20 }) |
| 71 |
| 72 Here, "center" specifies where the center of the zooming should happen. Note |
| 73 that this is defined in pixel space, not the space of the data points (you can |
| 74 use the p2c helpers on the axes in Flot to help you convert between these). |
| 75 |
| 76 "amount" is the amount to zoom the viewport relative to the current range, so |
| 77 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You |
| 78 can set the default in the options. |
| 79 |
| 80 */// First two dependencies, jquery.event.drag.js and |
| 81 // jquery.mousewheel.js, we put them inline here to save people the |
| 82 // effort of downloading them. |
| 83 /* |
| 84 jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threed
ubmedia.com) |
| 85 Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-L
ICENSE.txt |
| 86 */(function(e){function t(i){var l,h=this,p=i.data||{};if(p.elem)h=i.dragTarget=
p.elem,i.dragProxy=a.proxy||h,i.cursorOffsetX=p.pageX-p.left,i.cursorOffsetY=p.p
ageY-p.top,i.offsetX=i.pageX-i.cursorOffsetX,i.offsetY=i.pageY-i.cursorOffsetY;e
lse if(a.dragging||p.which>0&&i.which!=p.which||e(i.target).is(p.not))return;swi
tch(i.type){case"mousedown":return e.extend(p,e(h).offset(),{elem:h,target:i.tar
get,pageX:i.pageX,pageY:i.pageY}),o.add(document,"mousemove mouseup",t,p),s(h,!1
),a.dragging=null,!1;case!a.dragging&&"mousemove":if(r(i.pageX-p.pageX)+r(i.page
Y-p.pageY)<p.distance)break;i.target=p.target,l=n(i,"dragstart",h),l!==!1&&(a.dr
agging=h,a.proxy=i.dragProxy=e(l||h)[0]);case"mousemove":if(a.dragging){if(l=n(i
,"drag",h),u.drop&&(u.drop.allowed=l!==!1,u.drop.handler(i)),l!==!1)break;i.type
="mouseup"};case"mouseup":o.remove(document,"mousemove mouseup",t),a.dragging&&(
u.drop&&u.drop.handler(i),n(i,"dragend",h)),s(h,!0),a.dragging=a.proxy=p.elem=!1
}return!0}function n(t,n,r){t.type=n;var i=e.event.dispatch.call(r,t);return i==
=!1?!1:i||t.result}function r(e){return Math.pow(e,2)}function i(){return a.drag
ging===!1}function s(e,t){e&&(e.unselectable=t?"off":"on",e.onselectstart=functi
on(){return t},e.style&&(e.style.MozUserSelect=t?"":"none"))}e.fn.drag=function(
e,t,n){return t&&this.bind("dragstart",e),n&&this.bind("dragend",n),e?this.bind(
"drag",t?t:e):this.trigger("drag")};var o=e.event,u=o.special,a=u.drag={not:":in
put",distance:0,which:1,dragging:!1,setup:function(n){n=e.extend({distance:a.dis
tance,which:a.which,not:a.not},n||{}),n.distance=r(n.distance),o.add(this,"mouse
down",t,n),this.attachEvent&&this.attachEvent("ondragstart",i)},teardown:functio
n(){o.remove(this,"mousedown",t),this===a.dragging&&(a.dragging=a.proxy=!1),s(th
is,!0),this.detachEvent&&this.detachEvent("ondragstart",i)}};u.dragstart=u.drage
nd={setup:function(){},teardown:function(){}}})(jQuery),function(e){function t(t
){var n=t||window.event,r=[].slice.call(arguments,1),i=0,s=0,o=0,t=e.event.fix(n
);return t.type="mousewheel",n.wheelDelta&&(i=n.wheelDelta/120),n.detail&&(i=-n.
detail/3),o=i,void 0!==n.axis&&n.axis===n.HORIZONTAL_AXIS&&(o=0,s=-1*i),void 0!=
=n.wheelDeltaY&&(o=n.wheelDeltaY/120),void 0!==n.wheelDeltaX&&(s=-1*n.wheelDelta
X/120),r.unshift(t,i,s,o),(e.event.dispatch||e.event.handle).apply(this,r)}var n
=["DOMMouseScroll","mousewheel"];if(e.event.fixHooks)for(var r=n.length;r;)e.eve
nt.fixHooks[n[--r]]=e.event.mouseHooks;e.event.special.mousewheel={setup:functio
n(){if(this.addEventListener)for(var e=n.length;e;)this.addEventListener(n[--e],
t,!1);else this.onmousewheel=t},teardown:function(){if(this.removeEventListener)
for(var e=n.length;e;)this.removeEventListener(n[--e],t,!1);else this.onmousewhe
el=null}},e.fn.extend({mousewheel:function(e){return e?this.bind("mousewheel",e)
:this.trigger("mousewheel")},unmousewheel:function(e){return this.unbind("mousew
heel",e)}})}(jQuery),function(e){function n(t){function n(e,n){var r=t.offset();
r.left=e.pageX-r.left,r.top=e.pageY-r.top,n?t.zoomOut({center:r}):t.zoom({center
:r})}function r(e,t){return e.preventDefault(),n(e,t<0),!1}function a(e){if(e.wh
ich!=1)return!1;var n=t.getPlaceholder().css("cursor");n&&(i=n),t.getPlaceholder
().css("cursor",t.getOptions().pan.cursor),s=e.pageX,o=e.pageY}function f(e){var
n=t.getOptions().pan.frameRate;if(u||!n)return;u=setTimeout(function(){t.pan({l
eft:s-e.pageX,top:o-e.pageY}),s=e.pageX,o=e.pageY,u=null},1/n*1e3)}function l(e)
{u&&(clearTimeout(u),u=null),t.getPlaceholder().css("cursor",i),t.pan({left:s-e.
pageX,top:o-e.pageY})}function c(e,t){var i=e.getOptions();i.zoom.interactive&&(
t[i.zoom.trigger](n),t.mousewheel(r)),i.pan.interactive&&(t.bind("dragstart",{di
stance:10},a),t.bind("drag",f),t.bind("dragend",l))}function h(e,t){t.unbind(e.g
etOptions().zoom.trigger,n),t.unbind("mousewheel",r),t.unbind("dragstart",a),t.u
nbind("drag",f),t.unbind("dragend",l),u&&clearTimeout(u)}var i="default",s=0,o=0
,u=null;t.zoomOut=function(e){e||(e={}),e.amount||(e.amount=t.getOptions().zoom.
amount),e.amount=1/e.amount,t.zoom(e)},t.zoom=function(n){n||(n={});var r=n.cent
er,i=n.amount||t.getOptions().zoom.amount,s=t.width(),o=t.height();r||(r={left:s
/2,top:o/2});var u=r.left/s,a=r.top/o,f={x:{min:r.left-u*s/i,max:r.left+(1-u)*s/
i},y:{min:r.top-a*o/i,max:r.top+(1-a)*o/i}};e.each(t.getAxes(),function(e,t){var
n=t.options,r=f[t.direction].min,i=f[t.direction].max,s=n.zoomRange,o=n.panRang
e;if(s===!1)return;r=t.c2p(r),i=t.c2p(i);if(r>i){var u=r;r=i,i=u}o&&(o[0]!=null&
&r<o[0]&&(r=o[0]),o[1]!=null&&i>o[1]&&(i=o[1]));var a=i-r;if(s&&(s[0]!=null&&a<s
[0]||s[1]!=null&&a>s[1]))return;n.min=r,n.max=i}),t.setupGrid(),t.draw(),n.preve
ntEvent||t.getPlaceholder().trigger("plotzoom",[t,n])},t.pan=function(n){var r={
x:+n.left,y:+n.top};isNaN(r.x)&&(r.x=0),isNaN(r.y)&&(r.y=0),e.each(t.getAxes(),f
unction(e,t){var n=t.options,i,s,o=r[t.direction];i=t.c2p(t.p2c(t.min)+o),s=t.c2
p(t.p2c(t.max)+o);var u=n.panRange;if(u===!1)return;u&&(u[0]!=null&&u[0]>i&&(o=u
[0]-i,i+=o,s+=o),u[1]!=null&&u[1]<s&&(o=u[1]-s,i+=o,s+=o)),n.min=i,n.max=s}),t.s
etupGrid(),t.draw(),n.preventEvent||t.getPlaceholder().trigger("plotpan",[t,n])}
,t.hooks.bindEvents.push(c),t.hooks.shutdown.push(h)}var t={xaxis:{zoomRange:nul
l,panRange:null},zoom:{interactive:!1,trigger:"dblclick",amount:1.5},pan:{intera
ctive:!1,cursor:"move",frameRate:20}};e.plot.plugins.push({init:n,options:t,name
:"navigate",version:"1.3"})}(jQuery); |
OLD | NEW |