ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/flot/jquery.flot.navigate.js

   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 */
  81
  82 // First two dependencies, jquery.event.drag.js and
  83 // jquery.mousewheel.js, we put them inline here to save people the
  84 // effort of downloading them.
  85
  86 /*
  87 jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
  88 Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
  89 */
  90 (function(a){function e(h){var k,j=this,l=h.data||{};if(l.elem)j=h.dragTarget=l.elem,h.dragProxy=d.proxy||j,h.cursorOffsetX=l.pageX-l.left,h.cursorOffsetY=l.pageY-l.top,h.offsetX=h.pageX-h.cursorOffsetX,h.offsetY=h.pageY-h.cursorOffsetY;else if(d.dragging||l.which>0&&h.which!=l.which||a(h.target).is(l.not))return;switch(h.type){case"mousedown":return a.extend(l,a(j).offset(),{elem:j,target:h.target,pageX:h.pageX,pageY:h.pageY}),b.add(document,"mousemove mouseup",e,l),i(j,!1),d.dragging=null,!1;case!d.dragging&&"mousemove":if(g(h.pageX-l.pageX)+g(h.pageY-l.pageY)<l.distance)break;h.target=l.target,k=f(h,"dragstart",j),k!==!1&&(d.dragging=j,d.proxy=h.dragProxy=a(k||j)[0]);case"mousemove":if(d.dragging){if(k=f(h,"drag",j),c.drop&&(c.drop.allowed=k!==!1,c.drop.handler(h)),k!==!1)break;h.type="mouseup"}case"mouseup":b.remove(document,"mousemove mouseup",e),d.dragging&&(c.drop&&c.drop.handler(h),f(h,"dragend",j)),i(j,!0),d.dragging=d.proxy=l.elem=!1}return!0}function f(b,c,d){b.type=c;var e=a.event.dispatch.call(d,b);return e===!1?!1:e||b.result}function g(a){return Math.pow(a,2)}function h(){return d.dragging===!1}function i(a,b){a&&(a.unselectable=b?"off":"on",a.onselectstart=function(){return b},a.style&&(a.style.MozUserSelect=b?"":"none"))}a.fn.drag=function(a,b,c){return b&&this.bind("dragstart",a),c&&this.bind("dragend",c),a?this.bind("drag",b?b:a):this.trigger("drag")};var b=a.event,c=b.special,d=c.drag={not:":input",distance:0,which:1,dragging:!1,setup:function(c){c=a.extend({distance:d.distance,which:d.which,not:d.not},c||{}),c.distance=g(c.distance),b.add(this,"mousedown",e,c),this.attachEvent&&this.attachEvent("ondragstart",h)},teardown:function(){b.remove(this,"mousedown",e),this===d.dragging&&(d.dragging=d.proxy=!1),i(this,!0),this.detachEvent&&this.detachEvent("ondragstart",h)}};c.dragstart=c.dragend={setup:function(){},teardown:function(){}}})(jQuery);
  91
  92 /* jquery.mousewheel.min.js
  93  * Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
  94  * Licensed under the MIT License (LICENSE.txt).
  95  * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
  96  * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
  97  * Thanks to: Seamus Leahy for adding deltaX and deltaY
  98  *
  99  * Version: 3.0.6
 100  *
 101  * Requires: 1.2.2+
 102  */
 103 (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);
 104
 105
 106
 107
 108 (function ($) {
 109     var options = {
 110         xaxis: {
 111             zoomRange: null, // or [number, number] (min range, max range)
 112             panRange: null // or [number, number] (min, max)
 113         },
 114         zoom: {
 115             interactive: false,
 116             trigger: "dblclick", // or "click" for single click
 117             amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
 118         },
 119         pan: {
 120             interactive: false,
 121             cursor: "move",
 122             frameRate: 20
 123         }
 124     };
 125
 126     function init(plot) {
 127         function onZoomClick(e, zoomOut) {
 128             var c = plot.offset();
 129             c.left = e.pageX - c.left;
 130             c.top = e.pageY - c.top;
 131             if (zoomOut)
 132                 plot.zoomOut({ center: c });
 133             else
 134                 plot.zoom({ center: c });
 135         }
 136
 137         function onMouseWheel(e, delta) {
 138             e.preventDefault();
 139             onZoomClick(e, delta < 0);
 140             return false;
 141         }
 142
 143         var prevCursor = 'default', prevPageX = 0, prevPageY = 0,
 144             panTimeout = null;
 145
 146         function onDragStart(e) {
 147             if (e.which != 1)  // only accept left-click
 148                 return false;
 149             var c = plot.getPlaceholder().css('cursor');
 150             if (c)
 151                 prevCursor = c;
 152             plot.getPlaceholder().css('cursor', plot.getOptions().pan.cursor);
 153             prevPageX = e.pageX;
 154             prevPageY = e.pageY;
 155         }
 156
 157         function onDrag(e) {
 158             var frameRate = plot.getOptions().pan.frameRate;
 159             if (panTimeout || !frameRate)
 160                 return;
 161
 162             panTimeout = setTimeout(function () {
 163                 plot.pan({ left: prevPageX - e.pageX,
 164                            top: prevPageY - e.pageY });
 165                 prevPageX = e.pageX;
 166                 prevPageY = e.pageY;
 167
 168                 panTimeout = null;
 169             }, 1 / frameRate * 1000);
 170         }
 171
 172         function onDragEnd(e) {
 173             if (panTimeout) {
 174                 clearTimeout(panTimeout);
 175                 panTimeout = null;
 176             }
 177
 178             plot.getPlaceholder().css('cursor', prevCursor);
 179             plot.pan({ left: prevPageX - e.pageX,
 180                        top: prevPageY - e.pageY });
 181         }
 182
 183         function bindEvents(plot, eventHolder) {
 184             var o = plot.getOptions();
 185             if (o.zoom.interactive) {
 186                 eventHolder[o.zoom.trigger](onZoomClick);
 187                 eventHolder.mousewheel(onMouseWheel);
 188             }
 189
 190             if (o.pan.interactive) {
 191                 eventHolder.bind("dragstart", { distance: 10 }, onDragStart);
 192                 eventHolder.bind("drag", onDrag);
 193                 eventHolder.bind("dragend", onDragEnd);
 194             }
 195         }
 196
 197         plot.zoomOut = function (args) {
 198             if (!args)
 199                 args = {};
 200
 201             if (!args.amount)
 202                 args.amount = plot.getOptions().zoom.amount;
 203
 204             args.amount = 1 / args.amount;
 205             plot.zoom(args);
 206         };
 207
 208         plot.zoom = function (args) {
 209             if (!args)
 210                 args = {};
 211
 212             var c = args.center,
 213                 amount = args.amount || plot.getOptions().zoom.amount,
 214                 w = plot.width(), h = plot.height();
 215
 216             if (!c)
 217                 c = { left: w / 2, top: h / 2 };
 218
 219             var xf = c.left / w,
 220                 yf = c.top / h,
 221                 minmax = {
 222                     x: {
 223                         min: c.left - xf * w / amount,
 224                         max: c.left + (1 - xf) * w / amount
 225                     },
 226                     y: {
 227                         min: c.top - yf * h / amount,
 228                         max: c.top + (1 - yf) * h / amount
 229                     }
 230                 };
 231
 232             $.each(plot.getAxes(), function(_, axis) {
 233                 var opts = axis.options,
 234                     min = minmax[axis.direction].min,
 235                     max = minmax[axis.direction].max,
 236                     zr = opts.zoomRange,
 237                     pr = opts.panRange;
 238
 239                 if (zr === false) // no zooming on this axis
 240                     return;
 241
 242                 min = axis.c2p(min);
 243                 max = axis.c2p(max);
 244                 if (min > max) {
 245                     // make sure min < max
 246                     var tmp = min;
 247                     min = max;
 248                     max = tmp;
 249                 }
 250
 251                 //Check that we are in panRange
 252                 if (pr) {
 253                     if (pr[0] != null && min < pr[0]) {
 254                         min = pr[0];
 255                     }
 256                     if (pr[1] != null && max > pr[1]) {
 257                         max = pr[1];
 258                     }
 259                 }
 260
 261                 var range = max - min;
 262                 if (zr &&
 263                     ((zr[0] != null && range < zr[0]) ||
 264                      (zr[1] != null && range > zr[1])))
 265                     return;
 266
 267                 opts.min = min;
 268                 opts.max = max;
 269             });
 270
 271             plot.setupGrid();
 272             plot.draw();
 273
 274             if (!args.preventEvent)
 275                 plot.getPlaceholder().trigger("plotzoom", [ plot, args ]);
 276         };
 277
 278         plot.pan = function (args) {
 279             var delta = {
 280                 x: +args.left,
 281                 y: +args.top
 282             };
 283
 284             if (isNaN(delta.x))
 285                 delta.x = 0;
 286             if (isNaN(delta.y))
 287                 delta.y = 0;
 288
 289             $.each(plot.getAxes(), function (_, axis) {
 290                 var opts = axis.options,
 291                     min, max, d = delta[axis.direction];
 292
 293                 min = axis.c2p(axis.p2c(axis.min) + d),
 294                 max = axis.c2p(axis.p2c(axis.max) + d);
 295
 296                 var pr = opts.panRange;
 297                 if (pr === false) // no panning on this axis
 298                     return;
 299
 300                 if (pr) {
 301                     // check whether we hit the wall
 302                     if (pr[0] != null && pr[0] > min) {
 303                         d = pr[0] - min;
 304                         min += d;
 305                         max += d;
 306                     }
 307
 308                     if (pr[1] != null && pr[1] < max) {
 309                         d = pr[1] - max;
 310                         min += d;
 311                         max += d;
 312                     }
 313                 }
 314
 315                 opts.min = min;
 316                 opts.max = max;
 317             });
 318
 319             plot.setupGrid();
 320             plot.draw();
 321
 322             if (!args.preventEvent)
 323                 plot.getPlaceholder().trigger("plotpan", [ plot, args ]);
 324         };
 325
 326         function shutdown(plot, eventHolder) {
 327             eventHolder.unbind(plot.getOptions().zoom.trigger, onZoomClick);
 328             eventHolder.unbind("mousewheel", onMouseWheel);
 329             eventHolder.unbind("dragstart", onDragStart);
 330             eventHolder.unbind("drag", onDrag);
 331             eventHolder.unbind("dragend", onDragEnd);
 332             if (panTimeout)
 333                 clearTimeout(panTimeout);
 334         }
 335
 336         plot.hooks.bindEvents.push(bindEvents);
 337         plot.hooks.shutdown.push(shutdown);
 338     }
 339
 340     $.plot.plugins.push({
 341         init: init,
 342         options: options,
 343         name: 'navigate',
 344         version: '1.3'
 345     });
 346 })(jQuery);