OLD | NEW |
1 (function(a){function b(k){var p={first:{x:-1,y:-1},second:{x:-1,y:-1},show:fals
e,active:false};var m={};var r=null;function e(s){if(p.active){l(s);k.getPlaceho
lder().trigger("plotselecting",[g()])}}function n(s){if(s.which!=1){return}docum
ent.body.focus();if(document.onselectstart!==undefined&&m.onselectstart==null){m
.onselectstart=document.onselectstart;document.onselectstart=function(){return f
alse}}if(document.ondrag!==undefined&&m.ondrag==null){m.ondrag=document.ondrag;d
ocument.ondrag=function(){return false}}d(p.first,s);p.active=true;r=function(t)
{j(t)};a(document).one("mouseup",r)}function j(s){r=null;if(document.onselectsta
rt!==undefined){document.onselectstart=m.onselectstart}if(document.ondrag!==unde
fined){document.ondrag=m.ondrag}p.active=false;l(s);if(f()){i()}else{k.getPlaceh
older().trigger("plotunselected",[]);k.getPlaceholder().trigger("plotselecting",
[null])}return false}function g(){if(!f()){return null}var u={},t=p.first,s=p.se
cond;a.each(k.getAxes(),function(v,w){if(w.used){var y=w.c2p(t[w.direction]),x=w
.c2p(s[w.direction]);u[v]={from:Math.min(y,x),to:Math.max(y,x)}}});return u}func
tion i(){var s=g();k.getPlaceholder().trigger("plotselected",[s]);if(s.xaxis&&s.
yaxis){k.getPlaceholder().trigger("selected",[{x1:s.xaxis.from,y1:s.yaxis.from,x
2:s.xaxis.to,y2:s.yaxis.to}])}}function h(t,u,s){return u<t?t:(u>s?s:u)}function
d(w,t){var v=k.getOptions();var u=k.getPlaceholder().offset();var s=k.getPlotOf
fset();w.x=h(0,t.pageX-u.left-s.left,k.width());w.y=h(0,t.pageY-u.top-s.top,k.he
ight());if(v.selection.mode=="y"){w.x=w==p.first?0:k.width()}if(v.selection.mode
=="x"){w.y=w==p.first?0:k.height()}}function l(s){if(s.pageX==null){return}d(p.s
econd,s);if(f()){p.show=true;k.triggerRedrawOverlay()}else{q(true)}}function q(s
){if(p.show){p.show=false;k.triggerRedrawOverlay();if(!s){k.getPlaceholder().tri
gger("plotunselected",[])}}}function c(s,w){var t,y,z,A,x=k.getAxes();for(var u
in x){t=x[u];if(t.direction==w){A=w+t.n+"axis";if(!s[A]&&t.n==1){A=w+"axis"}if(s
[A]){y=s[A].from;z=s[A].to;break}}}if(!s[A]){t=w=="x"?k.getXAxes()[0]:k.getYAxes
()[0];y=s[w+"1"];z=s[w+"2"]}if(y!=null&&z!=null&&y>z){var v=y;y=z;z=v}return{fro
m:y,to:z,axis:t}}function o(t,s){var v,u,w=k.getOptions();if(w.selection.mode=="
y"){p.first.x=0;p.second.x=k.width()}else{u=c(t,"x");p.first.x=u.axis.p2c(u.from
);p.second.x=u.axis.p2c(u.to)}if(w.selection.mode=="x"){p.first.y=0;p.second.y=k
.height()}else{u=c(t,"y");p.first.y=u.axis.p2c(u.from);p.second.y=u.axis.p2c(u.t
o)}p.show=true;k.triggerRedrawOverlay();if(!s&&f()){i()}}function f(){var s=5;re
turn Math.abs(p.second.x-p.first.x)>=s&&Math.abs(p.second.y-p.first.y)>=s}k.clea
rSelection=q;k.setSelection=o;k.getSelection=g;k.hooks.bindEvents.push(function(
t,s){var u=t.getOptions();if(u.selection.mode!=null){s.mousemove(e);s.mousedown(
n)}});k.hooks.drawOverlay.push(function(v,D){if(p.show&&f()){var t=v.getPlotOffs
et();var s=v.getOptions();D.save();D.translate(t.left,t.top);var z=a.color.parse
(s.selection.color);D.strokeStyle=z.scale("a",0.8).toString();D.lineWidth=1;D.li
neJoin="round";D.fillStyle=z.scale("a",0.4).toString();var B=Math.min(p.first.x,
p.second.x),A=Math.min(p.first.y,p.second.y),C=Math.abs(p.second.x-p.first.x),u=
Math.abs(p.second.y-p.first.y);D.fillRect(B,A,C,u);D.strokeRect(B,A,C,u);D.resto
re()}});k.hooks.shutdown.push(function(t,s){s.unbind("mousemove",e);s.unbind("mo
usedown",n);if(r){a(document).unbind("mouseup",r)}})}a.plot.plugins.push({init:b
,options:{selection:{mode:null,color:"#e8cfac"}},name:"selection",version:"1.1"}
)})(jQuery); | 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 |