| OLD | NEW |
| (Empty) |
| 1 /* Flot plugin for selecting regions of a plot. | |
| 2 | |
| 3 Copyright (c) 2007-2013 IOLA and Ole Laursen. | |
| 4 Licensed under the MIT license. | |
| 5 | |
| 6 The plugin supports these options: | |
| 7 | |
| 8 selection: { | |
| 9 mode: null or "x" or "y" or "xy", | |
| 10 color: color, | |
| 11 shape: "round" or "miter" or "bevel", | |
| 12 minSize: number of pixels | |
| 13 } | |
| 14 | |
| 15 Selection support is enabled by setting the mode to one of "x", "y" or "xy". | |
| 16 In "x" mode, the user will only be able to specify the x range, similarly for | |
| 17 "y" mode. For "xy", the selection becomes a rectangle where both ranges can be | |
| 18 specified. "color" is color of the selection (if you need to change the color | |
| 19 later on, you can get to it with plot.getOptions().selection.color). "shape" | |
| 20 is the shape of the corners of the selection. | |
| 21 | |
| 22 "minSize" is the minimum size a selection can be in pixels. This value can | |
| 23 be customized to determine the smallest size a selection can be and still | |
| 24 have the selection rectangle be displayed. When customizing this value, the | |
| 25 fact that it refers to pixels, not axis units must be taken into account. | |
| 26 Thus, for example, if there is a bar graph in time mode with BarWidth set to 1 | |
| 27 minute, setting "minSize" to 1 will not make the minimum selection size 1 | |
| 28 minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent | |
| 29 "plotunselected" events from being fired when the user clicks the mouse without | |
| 30 dragging. | |
| 31 | |
| 32 When selection support is enabled, a "plotselected" event will be emitted on | |
| 33 the DOM element you passed into the plot function. The event handler gets a | |
| 34 parameter with the ranges selected on the axes, like this: | |
| 35 | |
| 36 placeholder.bind( "plotselected", function( event, ranges ) { | |
| 37 alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxi
s.to) | |
| 38 // similar for yaxis - with multiple axes, the extra ones are in | |
| 39 // x2axis, x3axis, ... | |
| 40 }); | |
| 41 | |
| 42 The "plotselected" event is only fired when the user has finished making the | |
| 43 selection. A "plotselecting" event is fired during the process with the same | |
| 44 parameters as the "plotselected" event, in case you want to know what's | |
| 45 happening while it's happening, | |
| 46 | |
| 47 A "plotunselected" event with no arguments is emitted when the user clicks the | |
| 48 mouse to remove the selection. As stated above, setting "minSize" to 0 will | |
| 49 destroy this behavior. | |
| 50 | |
| 51 The plugin allso adds the following methods to the plot object: | |
| 52 | |
| 53 - setSelection( ranges, preventEvent ) | |
| 54 | |
| 55 Set the selection rectangle. The passed in ranges is on the same form as | |
| 56 returned in the "plotselected" event. If the selection mode is "x", you | |
| 57 should put in either an xaxis range, if the mode is "y" you need to put in | |
| 58 an yaxis range and both xaxis and yaxis if the selection mode is "xy", like | |
| 59 this: | |
| 60 | |
| 61 setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } }
); | |
| 62 | |
| 63 setSelection will trigger the "plotselected" event when called. If you don't | |
| 64 want that to happen, e.g. if you're inside a "plotselected" handler, pass | |
| 65 true as the second parameter. If you are using multiple axes, you can | |
| 66 specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of | |
| 67 xaxis, the plugin picks the first one it sees. | |
| 68 | |
| 69 - clearSelection( preventEvent ) | |
| 70 | |
| 71 Clear the selection rectangle. Pass in true to avoid getting a | |
| 72 "plotunselected" event. | |
| 73 | |
| 74 - getSelection() | |
| 75 | |
| 76 Returns the current selection in the same format as the "plotselected" | |
| 77 event. If there's currently no selection, the function returns null. | |
| 78 | |
| 79 */(function(e){function t(t){function s(e){n.active&&(h(e),t.getPlaceholder().tr
igger("plotselecting",[a()]))}function o(t){if(t.which!=1)return;document.body.f
ocus(),document.onselectstart!==undefined&&r.onselectstart==null&&(r.onselectsta
rt=document.onselectstart,document.onselectstart=function(){return!1}),document.
ondrag!==undefined&&r.ondrag==null&&(r.ondrag=document.ondrag,document.ondrag=fu
nction(){return!1}),c(n.first,t),n.active=!0,i=function(e){u(e)},e(document).one
("mouseup",i)}function u(e){return i=null,document.onselectstart!==undefined&&(d
ocument.onselectstart=r.onselectstart),document.ondrag!==undefined&&(document.on
drag=r.ondrag),n.active=!1,h(e),m()?f():(t.getPlaceholder().trigger("plotunselec
ted",[]),t.getPlaceholder().trigger("plotselecting",[null])),!1}function a(){if(
!m())return null;if(!n.show)return null;var r={},i=n.first,s=n.second;return e.e
ach(t.getAxes(),function(e,t){if(t.used){var n=t.c2p(i[t.direction]),o=t.c2p(s[t
.direction]);r[e]={from:Math.min(n,o),to:Math.max(n,o)}}}),r}function f(){var e=
a();t.getPlaceholder().trigger("plotselected",[e]),e.xaxis&&e.yaxis&&t.getPlaceh
older().trigger("selected",[{x1:e.xaxis.from,y1:e.yaxis.from,x2:e.xaxis.to,y2:e.
yaxis.to}])}function l(e,t,n){return t<e?e:t>n?n:t}function c(e,r){var i=t.getOp
tions(),s=t.getPlaceholder().offset(),o=t.getPlotOffset();e.x=l(0,r.pageX-s.left
-o.left,t.width()),e.y=l(0,r.pageY-s.top-o.top,t.height()),i.selection.mode=="y"
&&(e.x=e==n.first?0:t.width()),i.selection.mode=="x"&&(e.y=e==n.first?0:t.height
())}function h(e){if(e.pageX==null)return;c(n.second,e),m()?(n.show=!0,t.trigger
RedrawOverlay()):p(!0)}function p(e){n.show&&(n.show=!1,t.triggerRedrawOverlay()
,e||t.getPlaceholder().trigger("plotunselected",[]))}function d(e,n){var r,i,s,o
,u=t.getAxes();for(var a in u){r=u[a];if(r.direction==n){o=n+r.n+"axis",!e[o]&&r
.n==1&&(o=n+"axis");if(e[o]){i=e[o].from,s=e[o].to;break}}}e[o]||(r=n=="x"?t.get
XAxes()[0]:t.getYAxes()[0],i=e[n+"1"],s=e[n+"2"]);if(i!=null&&s!=null&&i>s){var
f=i;i=s,s=f}return{from:i,to:s,axis:r}}function v(e,r){var i,s,o=t.getOptions();
o.selection.mode=="y"?(n.first.x=0,n.second.x=t.width()):(s=d(e,"x"),n.first.x=s
.axis.p2c(s.from),n.second.x=s.axis.p2c(s.to)),o.selection.mode=="x"?(n.first.y=
0,n.second.y=t.height()):(s=d(e,"y"),n.first.y=s.axis.p2c(s.from),n.second.y=s.a
xis.p2c(s.to)),n.show=!0,t.triggerRedrawOverlay(),!r&&m()&&f()}function m(){var
e=t.getOptions().selection.minSize;return Math.abs(n.second.x-n.first.x)>=e&&Mat
h.abs(n.second.y-n.first.y)>=e}var n={first:{x:-1,y:-1},second:{x:-1,y:-1},show:
!1,active:!1},r={},i=null;t.clearSelection=p,t.setSelection=v,t.getSelection=a,t
.hooks.bindEvents.push(function(e,t){var n=e.getOptions();n.selection.mode!=null
&&(t.mousemove(s),t.mousedown(o))}),t.hooks.drawOverlay.push(function(t,r){if(n.
show&&m()){var i=t.getPlotOffset(),s=t.getOptions();r.save(),r.translate(i.left,
i.top);var o=e.color.parse(s.selection.color);r.strokeStyle=o.scale("a",.8).toSt
ring(),r.lineWidth=1,r.lineJoin=s.selection.shape,r.fillStyle=o.scale("a",.4).to
String();var u=Math.min(n.first.x,n.second.x)+.5,a=Math.min(n.first.y,n.second.y
)+.5,f=Math.abs(n.second.x-n.first.x)-1,l=Math.abs(n.second.y-n.first.y)-1;r.fil
lRect(u,a,f,l),r.strokeRect(u,a,f,l),r.restore()}}),t.hooks.shutdown.push(functi
on(t,n){n.unbind("mousemove",s),n.unbind("mousedown",o),i&&e(document).unbind("m
ouseup",i)})}e.plot.plugins.push({init:t,options:{selection:{mode:null,color:"#e
8cfac",shape:"round",minSize:5}},name:"selection",version:"1.1"})})(jQuery); | |
| OLD | NEW |