kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
13 KiB
336 lines
13 KiB
/*
|
|
Flot plugin for adding panning and zooming capabilities to a plot.
|
|
|
|
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 a "plotpan" and "plotzoom" event when
|
|
something happens, useful for synchronizing plots.
|
|
|
|
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) 2009 Brandon Aaron (http://brandonaaron.net)
|
|
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
|
* 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.
|
|
*
|
|
* Version: 3.0.2
|
|
*
|
|
* Requires: 1.2.2+
|
|
*/
|
|
(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);
|
|
|
|
|
|
|
|
|
|
(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;
|
|
|
|
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;
|
|
}
|
|
|
|
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 ]);
|
|
}
|
|
|
|
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 ]);
|
|
}
|
|
|
|
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);
|
|
|