Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Selection plugin options #963

Merged
merged 3 commits into from

2 participants

@rlinehan

Add two options for the selection plugin:

1) Shape of the corners for the selection rectangle (defaults to "round).
2) Always show the selection rectangle, even when the selected area is very small (defaults to "false"). If this option is set to true, the selection rectangle will show up as a line for very small selected areas.

@dnschnur
Owner

I like this, and it's actually small and clean enough to make it in 0.8.

I think I have an idea for the alwaysShow option, though: what if you instead introduced an option called minSize, replacing the constant in selectionIsSane? That would make it slightly more customizable, and apply it to all the sanity checks instead of just when drawing. What do you think?

@rlinehan

I'm open to this idea, and like that it would be more customizable, but I have two slight issues with it: 1) it seems rather opaque what minSize actually means - or rather, what the calculations in selectionIsSane are actually getting. As a more concrete example, I'm working with a bar graph in time mode, with the BarWidth set to 1 minute. Being able to customize minSize would be useful to me if I knew what I would need to set minSize to so that I can select one bar without the selection rectangle going away. If we can write a decent explanation of what the number being put into minSize actually refers to, then I think this issue will be solved.

2) Setting minSize to 0 means that 'plotunselected' events will not be triggered by clicking a graph. Thus, it is necessary to set minSize to a value, so there will always be a limit to how far you can zoom before the selection rectangle goes away (rather than alwaysShow: true, which doesn't have this limit). I guess I'm okay with this, again so long as minSize is better documented.

@dnschnur
Owner

That's a very good point regarding plotunselected events. I can see arguments either way, but in the end I think it makes a little more sense for visibility to be tied to selection. As long as the selection exists, even if it's very small, an unselected event feels unexpected.

Currently minSize is in pixels rather than axis units, so it doesn't work as-is for your 1-minute example. If we did switch it to axis units, I can see some users still wanting pixels. That would need further work anyway; in the case of bars, for example, you'd want not just a size corresponding to the bar width, but also the ability to align the selection with the bars in order to select in proper whole-bar increments.

So that makes more sense as a separate enhancement. Pixels are a good default, allow us to remain backwards-compatible, and prevent the immediate changes from becoming too broad. I definitely agree that it should be well-documented, with special mention of the side-effects of using a zero value.

rlinehan added some commits
@rlinehan rlinehan 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".
0a3db84
@rlinehan rlinehan 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.
51485c0
@rlinehan rlinehan 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.
458656f
@rlinehan

I've changed the behavior so that, as discussed, minSize is customizable. However, I do still think this fails to address the initial problem I encountered and why I implemented "alwaysShow". Say, as in the "visitors" and "zooming" examples, I have a placeholder graph and an overview graph. I can zoom in infinitely on the placeholder graph, so long as the size of my selection on the placeholder graph is a greater number of pixels than minSize. However, once my selection on the overview graph is smaller than minSize, the selection rectangle will disappear and I will no longer know where I am.

I guess really the behavior I want is for minSize to apply to both graphs simultaneously. This would require it to be in axis units/apply to the range, as you stated. Then I would be prevented from zooming in too far on the placeholder graph and on the overview graph. But as you said, this is a much broader change and not backwards compatible. For now I'll just have to make do with this implementation.

@dnschnur
Owner

Doesn't minSize help with that, though? If you set it to zero for the overview then you'll always have a thin selection there no matter how far in you zoom on the placeholder. If you want to proactively prevent someone from zooming in past a certain point, you could use the 'zoomrange' option of the navigate plugin, which is (kind of) expressed in axis units.

You do still lose the ability to click to clear the selection, although you could probably do that by listening for 'plotclick' events and calling plot.clearSelection yourself. That's admittedly starting to enter hack-y territory.

In any case, I think minSize makes a good option just in general, and the implementation is nice and clean, so I'll merge this pull request in the next couple of days. I would definitely encourage you to continue working on this in a new pull request or issue if it doesn't yet work the way you want it to.

@rlinehan

minSize definitely helps, and for now I'm fine implementing slightly hacky things to get the behavior I want. Thanks for the suggestion to use zoomrange. Hopefully I'll get some time sometime soon to work on a solution that's not so hacky that I can submit another pull request for. Thanks!

@dnschnur dnschnur was assigned
@dnschnur
Owner

Merging; thanks very much!

@dnschnur dnschnur merged commit fe27116 into from
@dnschnur dnschnur referenced this pull request from a commit
@dnschnur dnschnur Updated credits for #638 and #963. 82ab0c4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 26, 2013
  1. @rlinehan

    Add option for lineJoin shape

    rlinehan authored
    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".
  2. @rlinehan

    Add option to always show selection rectangle

    rlinehan authored
    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.
  3. @rlinehan

    Make minSize customizable

    rlinehan authored
    Previously, the minimum size a selection could be was set at five
    pixels. This commit adds the ability to customize this value.
This page is out of date. Refresh to see the latest.
Showing with 22 additions and 6 deletions.
  1. +22 −6 jquery.flot.selection.js
View
28 jquery.flot.selection.js 100644 → 100755
@@ -7,14 +7,27 @@ The plugin supports these options:
selection: {
mode: null or "x" or "y" or "xy",
- color: color
+ color: color,
+ shape: "round" or "miter" or "bevel",
+ minSize: number of pixels
}
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.
+
+"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
@@ -32,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:
@@ -274,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;
}
@@ -305,7 +319,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 +349,9 @@ 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"
+ minSize: 5 // minimum number of pixels
}
},
name: 'selection',
Something went wrong with that request. Please try again.