| /* Flot plugin for adding the ability to pan and zoom the plot. |
| |
| Copyright (c) 2007-2012 IOLA and Ole Laursen. |
| Licensed under the MIT license. |
| |
| The default behaviour is double click and scrollwheel up/down to zoom in, drag |
| to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and |
| plot.pan( offset ) so you easily can add custom controls. It also fires |
| "plotpan" and "plotzoom" events, useful for synchronizing plots. |
| |
| The plugin supports these options: |
| |
| zoom: { |
| interactive: false |
| trigger: "dblclick" // or "click" for single click |
| amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out) |
| } |
| |
| pan: { |
| interactive: false |
| cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer" |
| frameRate: 20 |
| } |
| |
| xaxis, yaxis, x2axis, y2axis: { |
| zoomRange: null // or [ number, number ] (min range, max range) or false |
| panRange: null // or [ number, number ] (min, max) or false |
| } |
| |
| "interactive" enables the built-in drag/click behaviour. If you enable |
| interactive for pan, then you'll have a basic plot that supports moving |
| around; the same for zoom. |
| |
| "amount" specifies the default amount to zoom in (so 1.5 = 150%) relative to |
| the current viewport. |
| |
| "cursor" is a standard CSS mouse cursor string used for visual feedback to the |
| user when dragging. |
| |
| "frameRate" specifies the maximum number of times per second the plot will |
| update itself while the user is panning around on it (set to null to disable |
| intermediate pans, the plot will then not update until the mouse button is |
| released). |
| |
| "zoomRange" is the interval in which zooming can happen, e.g. with zoomRange: |
| [1, 100] the zoom will never scale the axis so that the difference between min |
| and max is smaller than 1 or larger than 100. You can set either end to null |
| to ignore, e.g. [1, null]. If you set zoomRange to false, zooming on that axis |
| will be disabled. |
| |
| "panRange" confines the panning to stay within a range, e.g. with panRange: |
| [-10, 20] panning stops at -10 in one end and at 20 in the other. Either can |
| be null, e.g. [-10, null]. If you set panRange to false, panning on that axis |
| will be disabled. |
| |
| Example API usage: |
| |
| plot = $.plot(...); |
| |
| // zoom default amount in on the pixel ( 10, 20 ) |
| plot.zoom({ center: { left: 10, top: 20 } }); |
| |
| // zoom out again |
| plot.zoomOut({ center: { left: 10, top: 20 } }); |
| |
| // zoom 200% in on the pixel (10, 20) |
| plot.zoom({ amount: 2, center: { left: 10, top: 20 } }); |
| |
| // pan 100 pixels to the left and 20 down |
| plot.pan({ left: -100, top: 20 }) |
| |
| Here, "center" specifies where the center of the zooming should happen. Note |
| that this is defined in pixel space, not the space of the data points (you can |
| use the p2c helpers on the axes in Flot to help you convert between these). |
| |
| "amount" is the amount to zoom the viewport relative to the current range, so |
| 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You |
| can set the default in the options. |
| |
| */ |
| |
| // First two dependencies, jquery.event.drag.js and |
| // jquery.mousewheel.js, we put them inline here to save people the |
| // effort of downloading them. |
| |
| /* |
| jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com) |
| Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt |
| */ |
| (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); |
| |
| /* jquery.mousewheel.min.js |
| * Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net) |
| * Licensed under the MIT License (LICENSE.txt). |
| * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. |
| * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. |
| * Thanks to: Seamus Leahy for adding deltaX and deltaY |
| * |
| * Version: 3.0.6 |
| * |
| * Requires: 1.2.2+ |
| */ |
| (function(d){function e(a){var b=a||window.event,c=[].slice.call(arguments,1),f=0,e=0,g=0,a=d.event.fix(b);a.type="mousewheel";b.wheelDelta&&(f=b.wheelDelta/120);b.detail&&(f=-b.detail/3);g=f;void 0!==b.axis&&b.axis===b.HORIZONTAL_AXIS&&(g=0,e=-1*f);void 0!==b.wheelDeltaY&&(g=b.wheelDeltaY/120);void 0!==b.wheelDeltaX&&(e=-1*b.wheelDeltaX/120);c.unshift(a,f,e,g);return(d.event.dispatch||d.event.handle).apply(this,c)}var c=["DOMMouseScroll","mousewheel"];if(d.event.fixHooks)for(var h=c.length;h;)d.event.fixHooks[c[--h]]=d.event.mouseHooks;d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],e,!1);else this.onmousewheel=e},teardown:function(){if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a],e,!1);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery); |
| |
| |
| |
| |
| (function ($) { |
| var options = { |
| xaxis: { |
| zoomRange: null, // or [number, number] (min range, max range) |
| panRange: null // or [number, number] (min, max) |
| }, |
| zoom: { |
| interactive: false, |
| trigger: "dblclick", // or "click" for single click |
| amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out) |
| }, |
| pan: { |
| interactive: false, |
| cursor: "move", |
| frameRate: 20 |
| } |
| }; |
| |
| function init(plot) { |
| function onZoomClick(e, zoomOut) { |
| var c = plot.offset(); |
| c.left = e.pageX - c.left; |
| c.top = e.pageY - c.top; |
| if (zoomOut) |
| plot.zoomOut({ center: c }); |
| else |
| plot.zoom({ center: c }); |
| } |
| |
| function onMouseWheel(e, delta) { |
| onZoomClick(e, delta < 0); |
| return false; |
| } |
| |
| var prevCursor = 'default', prevPageX = 0, prevPageY = 0, |
| panTimeout = null; |
| |
| function onDragStart(e) { |
| if (e.which != 1) // only accept left-click |
| return false; |
| var c = plot.getPlaceholder().css('cursor'); |
| if (c) |
| prevCursor = c; |
| plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor); |
| prevPageX = e.pageX; |
| prevPageY = e.pageY; |
| } |
| |
| function onDrag(e) { |
| var frameRate = plot.getOptions().pan.frameRate; |
| if (panTimeout || !frameRate) |
| return; |
| |
| panTimeout = setTimeout(function () { |
| plot.pan({ left: prevPageX - e.pageX, |
| top: prevPageY - e.pageY }); |
| prevPageX = e.pageX; |
| prevPageY = e.pageY; |
| |
| panTimeout = null; |
| }, 1 / frameRate * 1000); |
| } |
| |
| function onDragEnd(e) { |
| if (panTimeout) { |
| clearTimeout(panTimeout); |
| panTimeout = null; |
| } |
| |
| plot.getPlaceholder().css('cursor', prevCursor); |
| plot.pan({ left: prevPageX - e.pageX, |
| top: prevPageY - e.pageY }); |
| } |
| |
| function bindEvents(plot, eventHolder) { |
| var o = plot.getOptions(); |
| if (o.zoom.interactive) { |
| eventHolder[o.zoom.trigger](onZoomClick); |
| eventHolder.mousewheel(onMouseWheel); |
| } |
| |
| if (o.pan.interactive) { |
| eventHolder.bind("dragstart", { distance: 10 }, onDragStart); |
| eventHolder.bind("drag", onDrag); |
| eventHolder.bind("dragend", onDragEnd); |
| } |
| } |
| |
| plot.zoomOut = function (args) { |
| if (!args) |
| args = {}; |
| |
| if (!args.amount) |
| args.amount = plot.getOptions().zoom.amount; |
| |
| args.amount = 1 / args.amount; |
| plot.zoom(args); |
| }; |
| |
| plot.zoom = function (args) { |
| if (!args) |
| args = {}; |
| |
| var c = args.center, |
| amount = args.amount || plot.getOptions().zoom.amount, |
| w = plot.width(), h = plot.height(); |
| |
| if (!c) |
| c = { left: w / 2, top: h / 2 }; |
| |
| var xf = c.left / w, |
| yf = c.top / h, |
| minmax = { |
| x: { |
| min: c.left - xf * w / amount, |
| max: c.left + (1 - xf) * w / amount |
| }, |
| y: { |
| min: c.top - yf * h / amount, |
| max: c.top + (1 - yf) * h / amount |
| } |
| }; |
| |
| $.each(plot.getAxes(), function(_, axis) { |
| var opts = axis.options, |
| min = minmax[axis.direction].min, |
| max = minmax[axis.direction].max, |
| zr = opts.zoomRange, |
| pr = opts.panRange; |
| |
| if (zr === false) // no zooming on this axis |
| return; |
| |
| min = axis.c2p(min); |
| max = axis.c2p(max); |
| if (min > max) { |
| // make sure min < max |
| var tmp = min; |
| min = max; |
| max = tmp; |
| } |
| |
| //Check that we are in panRange |
| if (pr) { |
| if (pr[0] != null && min < pr[0]) { |
| min = pr[0]; |
| } |
| if (pr[1] != null && max > pr[1]) { |
| max = pr[1]; |
| } |
| } |
| |
| var range = max - min; |
| if (zr && |
| ((zr[0] != null && range < zr[0]) || |
| (zr[1] != null && range > zr[1]))) |
| return; |
| |
| opts.min = min; |
| opts.max = max; |
| }); |
| |
| plot.setupGrid(); |
| plot.draw(); |
| |
| if (!args.preventEvent) |
| plot.getPlaceholder().trigger("plotzoom", [ plot, args ]); |
| }; |
| |
| plot.pan = function (args) { |
| var delta = { |
| x: +args.left, |
| y: +args.top |
| }; |
| |
| if (isNaN(delta.x)) |
| delta.x = 0; |
| if (isNaN(delta.y)) |
| delta.y = 0; |
| |
| $.each(plot.getAxes(), function (_, axis) { |
| var opts = axis.options, |
| min, max, d = delta[axis.direction]; |
| |
| min = axis.c2p(axis.p2c(axis.min) + d), |
| max = axis.c2p(axis.p2c(axis.max) + d); |
| |
| var pr = opts.panRange; |
| if (pr === false) // no panning on this axis |
| return; |
| |
| if (pr) { |
| // check whether we hit the wall |
| if (pr[0] != null && pr[0] > min) { |
| d = pr[0] - min; |
| min += d; |
| max += d; |
| } |
| |
| if (pr[1] != null && pr[1] < max) { |
| d = pr[1] - max; |
| min += d; |
| max += d; |
| } |
| } |
| |
| opts.min = min; |
| opts.max = max; |
| }); |
| |
| plot.setupGrid(); |
| plot.draw(); |
| |
| if (!args.preventEvent) |
| plot.getPlaceholder().trigger("plotpan", [ plot, args ]); |
| }; |
| |
| function shutdown(plot, eventHolder) { |
| eventHolder.unbind(plot.getOptions().zoom.trigger, onZoomClick); |
| eventHolder.unbind("mousewheel", onMouseWheel); |
| eventHolder.unbind("dragstart", onDragStart); |
| eventHolder.unbind("drag", onDrag); |
| eventHolder.unbind("dragend", onDragEnd); |
| if (panTimeout) |
| clearTimeout(panTimeout); |
| } |
| |
| plot.hooks.bindEvents.push(bindEvents); |
| plot.hooks.shutdown.push(shutdown); |
| } |
| |
| $.plot.plugins.push({ |
| init: init, |
| options: options, |
| name: 'navigate', |
| version: '1.3' |
| }); |
| })(jQuery); |
