123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- /*
- Flot plugin for selecting regions.
-
- The plugin defines the following options:
-
- selection: {
- mode: null or "x" or "y" or "xy",
- color: color
- }
-
- You enable selection support 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.
-
- 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 one extra parameter with the ranges selected on the axes,
- like this:
-
- placeholder.bind("plotselected", function(event, ranges) {
- alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
- // similar for yaxis, secondary axes are in x2axis
- // and y2axis if present
- });
-
- The "plotselected" event is only fired when the user has finished
- making the selection. A "plotselecting" event is fired during the
- process with the same 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.
-
- The plugin allso adds the following methods to the plot object:
-
- - setSelection(ranges, preventEvent)
-
- Set the selection rectangle. The passed in ranges is on the same
- form as returned in the "plotselected" event. If the selection
- mode is "x", you should put in either an xaxis (or x2axis) object,
- if the mode is "y" you need to put in an yaxis (or y2axis) object
- and both xaxis/x2axis and yaxis/y2axis if the selection mode is
- "xy", like this:
-
- setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
-
- setSelection will trigger the "plotselected" event when called. If
- you don't want that to happen, e.g. if you're inside a
- "plotselected" handler, pass true as the second parameter.
-
- - clearSelection(preventEvent)
-
- Clear the selection rectangle. Pass in true to avoid getting a
- "plotunselected" event.
-
- - getSelection()
-
- Returns the current selection in the same format as the
- "plotselected" event. If there's currently no selection, the
- function returns null.
-
- */
-
- (function ($) {
- function init(plot) {
- var selection = {
- first: { x: -1, y: -1}, second: { x: -1, y: -1},
- show: false,
- active: false
- };
-
- // FIXME: The drag handling implemented here should be
- // abstracted out, there's some similar code from a library in
- // the navigation plugin, this should be massaged a bit to fit
- // the Flot cases here better and reused. Doing this would
- // make this plugin much slimmer.
- var savedhandlers = {};
-
- function onMouseMove(e) {
- if (selection.active) {
- plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
-
- updateSelection(e);
- }
- }
-
- function onMouseDown(e) {
- if (e.which != 1) // only accept left-click
- return;
-
- // cancel out any text selections
- document.body.focus();
-
- // prevent text selection and drag in old-school browsers
- if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
- savedhandlers.onselectstart = document.onselectstart;
- document.onselectstart = function () { return false; };
- }
- if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
- savedhandlers.ondrag = document.ondrag;
- document.ondrag = function () { return false; };
- }
-
- setSelectionPos(selection.first, e);
-
- selection.active = true;
-
- $(document).one("mouseup", onMouseUp);
- }
-
- function onMouseUp(e) {
- // revert drag stuff for old-school browsers
- if (document.onselectstart !== undefined)
- document.onselectstart = savedhandlers.onselectstart;
- if (document.ondrag !== undefined)
- document.ondrag = savedhandlers.ondrag;
-
- // no more draggy-dee-drag
- selection.active = false;
- updateSelection(e);
-
- if (selectionIsSane())
- triggerSelectedEvent();
- else {
- // this counts as a clear
- plot.getPlaceholder().trigger("plotunselected", [ ]);
- plot.getPlaceholder().trigger("plotselecting", [ null ]);
- }
-
- return false;
- }
-
- function getSelection() {
- if (!selectionIsSane())
- return null;
-
- var x1 = Math.min(selection.first.x, selection.second.x),
- x2 = Math.max(selection.first.x, selection.second.x),
- y1 = Math.max(selection.first.y, selection.second.y),
- y2 = Math.min(selection.first.y, selection.second.y);
-
- var r = {};
- var axes = plot.getAxes();
- if (axes.xaxis.used)
- r.xaxis = { from: axes.xaxis.c2p(x1), to: axes.xaxis.c2p(x2) };
- if (axes.x2axis.used)
- r.x2axis = { from: axes.x2axis.c2p(x1), to: axes.x2axis.c2p(x2) };
- if (axes.yaxis.used)
- r.yaxis = { from: axes.yaxis.c2p(y1), to: axes.yaxis.c2p(y2) };
- if (axes.y2axis.used)
- r.y2axis = { from: axes.y2axis.c2p(y1), to: axes.y2axis.c2p(y2) };
- return r;
- }
-
- function triggerSelectedEvent() {
- var r = getSelection();
-
- plot.getPlaceholder().trigger("plotselected", [ r ]);
-
- // backwards-compat stuff, to be removed in future
- var axes = plot.getAxes();
- if (axes.xaxis.used && axes.yaxis.used)
- plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
- }
-
- function clamp(min, value, max) {
- return value < min? min: (value > max? max: value);
- }
-
- function setSelectionPos(pos, e) {
- var o = plot.getOptions();
- var offset = plot.getPlaceholder().offset();
- var plotOffset = plot.getPlotOffset();
- pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
- pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
-
- if (o.selection.mode == "y")
- pos.x = pos == selection.first? 0: plot.width();
-
- if (o.selection.mode == "x")
- pos.y = pos == selection.first? 0: plot.height();
- }
-
- function updateSelection(pos) {
- if (pos.pageX == null)
- return;
-
- setSelectionPos(selection.second, pos);
- if (selectionIsSane()) {
- selection.show = true;
- plot.triggerRedrawOverlay();
- }
- else
- clearSelection(true);
- }
-
- function clearSelection(preventEvent) {
- if (selection.show) {
- selection.show = false;
- plot.triggerRedrawOverlay();
- if (!preventEvent)
- plot.getPlaceholder().trigger("plotunselected", [ ]);
- }
- }
-
- function setSelection(ranges, preventEvent) {
- var axis, range, axes = plot.getAxes();
- var o = plot.getOptions();
-
- if (o.selection.mode == "y") {
- selection.first.x = 0;
- selection.second.x = plot.width();
- }
- else {
- axis = ranges["xaxis"]? axes["xaxis"]: (ranges["x2axis"]? axes["x2axis"]: axes["xaxis"]);
- range = ranges["xaxis"] || ranges["x2axis"] || { from:ranges["x1"], to:ranges["x2"] }
- selection.first.x = axis.p2c(Math.min(range.from, range.to));
- selection.second.x = axis.p2c(Math.max(range.from, range.to));
- }
-
- if (o.selection.mode == "x") {
- selection.first.y = 0;
- selection.second.y = plot.height();
- }
- else {
- axis = ranges["yaxis"]? axes["yaxis"]: (ranges["y2axis"]? axes["y2axis"]: axes["yaxis"]);
- range = ranges["yaxis"] || ranges["y2axis"] || { from:ranges["y1"], to:ranges["y2"] }
- selection.first.y = axis.p2c(Math.min(range.from, range.to));
- selection.second.y = axis.p2c(Math.max(range.from, range.to));
- }
-
- selection.show = true;
- plot.triggerRedrawOverlay();
- if (!preventEvent)
- triggerSelectedEvent();
- }
-
- function selectionIsSane() {
- var minSize = 5;
- return Math.abs(selection.second.x - selection.first.x) >= minSize &&
- Math.abs(selection.second.y - selection.first.y) >= minSize;
- }
-
- plot.clearSelection = clearSelection;
- plot.setSelection = setSelection;
- plot.getSelection = getSelection;
-
- plot.hooks.bindEvents.push(function(plot, eventHolder) {
- var o = plot.getOptions();
- if (o.selection.mode != null)
- eventHolder.mousemove(onMouseMove);
-
- if (o.selection.mode != null)
- eventHolder.mousedown(onMouseDown);
- });
-
-
- plot.hooks.drawOverlay.push(function (plot, ctx) {
- // draw selection
- if (selection.show && selectionIsSane()) {
- var plotOffset = plot.getPlotOffset();
- var o = plot.getOptions();
-
- ctx.save();
- ctx.translate(plotOffset.left, plotOffset.top);
-
- var c = $.color.parse(o.selection.color);
-
- ctx.strokeStyle = c.scale('a', 0.8).toString();
- ctx.lineWidth = 1;
- ctx.lineJoin = "round";
- ctx.fillStyle = c.scale('a', 0.4).toString();
-
- var x = Math.min(selection.first.x, selection.second.x),
- y = Math.min(selection.first.y, selection.second.y),
- w = Math.abs(selection.second.x - selection.first.x),
- h = Math.abs(selection.second.y - selection.first.y);
-
- ctx.fillRect(x, y, w, h);
- ctx.strokeRect(x, y, w, h);
-
- ctx.restore();
- }
- });
- }
-
- $.plot.plugins.push({
- init: init,
- options: {
- selection: {
- mode: null, // one of null, "x", "y" or "xy"
- color: "#e8cfac"
- }
- },
- name: 'selection',
- version: '1.0'
- });
- })(jQuery);
|