From 0a3db84559aeb66a5aaec24ee7badb2faf214f42 Mon Sep 17 00:00:00 2001 From: rlinehan Date: Tue, 19 Feb 2013 10:29:10 -0800 Subject: [PATCH 1/3] Add option for lineJoin shape This commit adds an option for the shape of the corners of the selection rectangle. By default the shape is set to "round" (the previous setting for lineJoin). The other options are "bevel" and "miter". --- jquery.flot.selection.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) mode change 100644 => 100755 jquery.flot.selection.js diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js old mode 100644 new mode 100755 index 781678c..1a28abc --- a/jquery.flot.selection.js +++ b/jquery.flot.selection.js @@ -7,14 +7,16 @@ The plugin supports these options: selection: { mode: null or "x" or "y" or "xy", - color: color + color: color, + shape: "round" or "miter" or "bevel" } Selection support is enabled by setting the mode to one of "x", "y" or "xy". In "x" mode, the user will only be able to specify the x range, similarly for "y" mode. For "xy", the selection becomes a rectangle where both ranges can be specified. "color" is color of the selection (if you need to change the color -later on, you can get to it with plot.getOptions().selection.color). +later on, you can get to it with plot.getOptions().selection.color). "shape" +is the shape of the corners of the selection. When selection support is enabled, a "plotselected" event will be emitted on the DOM element you passed into the plot function. The event handler gets a @@ -305,7 +307,7 @@ The plugin allso adds the following methods to the plot object: ctx.strokeStyle = c.scale('a', 0.8).toString(); ctx.lineWidth = 1; - ctx.lineJoin = "round"; + ctx.lineJoin = o.selection.shape; ctx.fillStyle = c.scale('a', 0.4).toString(); var x = Math.min(selection.first.x, selection.second.x) + 0.5, @@ -335,7 +337,8 @@ The plugin allso adds the following methods to the plot object: options: { selection: { mode: null, // one of null, "x", "y" or "xy" - color: "#e8cfac" + color: "#e8cfac", + shape: "round" // one of "round", "miter", or "bevel" } }, name: 'selection', From 51485c03810357a80b4267628069bea33359eee0 Mon Sep 17 00:00:00 2001 From: rlinehan Date: Tue, 19 Feb 2013 11:55:01 -0800 Subject: [PATCH 2/3] Add option to always show selection rectangle Previously, if the selected area was very small, the selection rectangle would not be displayed. This commit adds an "alwaysShow" option so that, when true, the selection rectangle will always be displayed. When the selected area is very small, the selection rectangle will become a line. --- jquery.flot.selection.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js index 1a28abc..2c9ab1c 100755 --- a/jquery.flot.selection.js +++ b/jquery.flot.selection.js @@ -8,7 +8,8 @@ The plugin supports these options: selection: { mode: null or "x" or "y" or "xy", color: color, - shape: "round" or "miter" or "bevel" + shape: "round" or "miter" or "bevel", + alwaysShow: boolean } Selection support is enabled by setting the mode to one of "x", "y" or "xy". @@ -16,7 +17,9 @@ In "x" mode, the user will only be able to specify the x range, similarly for "y" mode. For "xy", the selection becomes a rectangle where both ranges can be specified. "color" is color of the selection (if you need to change the color later on, you can get to it with plot.getOptions().selection.color). "shape" -is the shape of the corners of the selection. +is the shape of the corners of the selection. When "alwaysShow" is true, +the selection rectangle will always be displayed (as a line), even when the +selection is very small. When selection support is enabled, a "plotselected" event will be emitted on the DOM element you passed into the plot function. The event handler gets a @@ -296,9 +299,9 @@ The plugin allso adds the following methods to the plot object: plot.hooks.drawOverlay.push(function (plot, ctx) { // draw selection - if (selection.show && selectionIsSane()) { + var o = plot.getOptions(); + if (selection.show && (selectionIsSane() || o.selection.alwaysShow)) { var plotOffset = plot.getPlotOffset(); - var o = plot.getOptions(); ctx.save(); ctx.translate(plotOffset.left, plotOffset.top); @@ -338,7 +341,8 @@ The plugin allso adds the following methods to the plot object: selection: { mode: null, // one of null, "x", "y" or "xy" color: "#e8cfac", - shape: "round" // one of "round", "miter", or "bevel" + shape: "round", // one of "round", "miter", or "bevel" + alwaysShow: false // boolean } }, name: 'selection', From 458656f3b9749f348ea37ada2bfbd67b1a54dade Mon Sep 17 00:00:00 2001 From: rlinehan Date: Tue, 26 Feb 2013 15:26:56 -0800 Subject: [PATCH 3/3] Make minSize customizable Previously, the minimum size a selection could be was set at five pixels. This commit adds the ability to customize this value. --- jquery.flot.selection.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/jquery.flot.selection.js b/jquery.flot.selection.js index 2c9ab1c..d382619 100755 --- a/jquery.flot.selection.js +++ b/jquery.flot.selection.js @@ -9,7 +9,7 @@ selection: { mode: null or "x" or "y" or "xy", color: color, shape: "round" or "miter" or "bevel", - alwaysShow: boolean + minSize: number of pixels } Selection support is enabled by setting the mode to one of "x", "y" or "xy". @@ -17,9 +17,17 @@ In "x" mode, the user will only be able to specify the x range, similarly for "y" mode. For "xy", the selection becomes a rectangle where both ranges can be specified. "color" is color of the selection (if you need to change the color later on, you can get to it with plot.getOptions().selection.color). "shape" -is the shape of the corners of the selection. When "alwaysShow" is true, -the selection rectangle will always be displayed (as a line), even when the -selection is very small. +is the shape of the corners of the selection. + +"minSize" is the minimum size a selection can be in pixels. This value can +be customized to determine the smallest size a selection can be and still +have the selection rectangle be displayed. When customizing this value, the +fact that it refers to pixels, not axis units must be taken into account. +Thus, for example, if there is a bar graph in time mode with BarWidth set to 1 +minute, setting "minSize" to 1 will not make the minimum selection size 1 +minute, but rather 1 pixel. Note also that setting "minSize" to 0 will prevent +"plotunselected" events from being fired when the user clicks the mouse without +dragging. When selection support is enabled, a "plotselected" event will be emitted on the DOM element you passed into the plot function. The event handler gets a @@ -37,7 +45,8 @@ parameters as the "plotselected" event, in case you want to know what's happening while it's happening, A "plotunselected" event with no arguments is emitted when the user clicks the -mouse to remove the selection. +mouse to remove the selection. As stated above, setting "minSize" to 0 will +destroy this behavior. The plugin allso adds the following methods to the plot object: @@ -279,7 +288,7 @@ The plugin allso adds the following methods to the plot object: } function selectionIsSane() { - var minSize = 5; + var minSize = plot.getOptions().selection.minSize; return Math.abs(selection.second.x - selection.first.x) >= minSize && Math.abs(selection.second.y - selection.first.y) >= minSize; } @@ -299,9 +308,9 @@ The plugin allso adds the following methods to the plot object: plot.hooks.drawOverlay.push(function (plot, ctx) { // draw selection - var o = plot.getOptions(); - if (selection.show && (selectionIsSane() || o.selection.alwaysShow)) { + if (selection.show && selectionIsSane()) { var plotOffset = plot.getPlotOffset(); + var o = plot.getOptions(); ctx.save(); ctx.translate(plotOffset.left, plotOffset.top); @@ -342,7 +351,7 @@ The plugin allso adds the following methods to the plot object: mode: null, // one of null, "x", "y" or "xy" color: "#e8cfac", shape: "round", // one of "round", "miter", or "bevel" - alwaysShow: false // boolean + minSize: 5 // minimum number of pixels } }, name: 'selection',