+++ /dev/null
-/* Flot plugin for selecting regions of a plot.
-
-Copyright (c) 2007-2013 IOLA and Ole Laursen.
-Licensed under the MIT license.
-
-The plugin supports these options:
-
-selection: {
- mode: null or "x" or "y" or "xy",
- 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). "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
-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 - with multiple axes, the extra ones are in
- // x2axis, x3axis, ...
- });
-
-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. As stated above, setting "minSize" to 0 will
-destroy this behavior.
-
-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 range, if the mode is "y" you need to put in
- an yaxis range and both xaxis and yaxis 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. If you are using multiple axes, you can
- specify the ranges on any of those, e.g. as x2axis/x3axis/... instead of
- xaxis, the plugin picks the first one it sees.
-
-- 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 = {};
-
- var mouseUpHandler = null;
-
- function onMouseMove(e) {
- if (selection.active) {
- updateSelection(e);
-
- plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
- }
- }
-
- 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;
-
- // this is a bit silly, but we have to use a closure to be
- // able to whack the same handler again
- mouseUpHandler = function (e) { onMouseUp(e); };
-
- $(document).one("mouseup", mouseUpHandler);
- }
-
- function onMouseUp(e) {
- mouseUpHandler = null;
-
- // 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 dragging
- 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;
-
- if (!selection.show) return null;
-
- var r = {}, c1 = selection.first, c2 = selection.second;
- $.each(plot.getAxes(), function (name, axis) {
- if (axis.used) {
- var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]);
- r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
- }
- });
- return r;
- }
-
- function triggerSelectedEvent() {
- var r = getSelection();
-
- plot.getPlaceholder().trigger("plotselected", [ r ]);
-
- // backwards-compat stuff, to be removed in future
- if (r.xaxis && r.yaxis)
- 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 taken from markings support in Flot
- function extractRange(ranges, coord) {
- var axis, from, to, key, axes = plot.getAxes();
-
- for (var k in axes) {
- axis = axes[k];
- if (axis.direction == coord) {
- key = coord + axis.n + "axis";
- if (!ranges[key] && axis.n == 1)
- key = coord + "axis"; // support x1axis as xaxis
- if (ranges[key]) {
- from = ranges[key].from;
- to = ranges[key].to;
- break;
- }
- }
- }
-
- // backwards-compat stuff - to be removed in future
- if (!ranges[key]) {
- axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
- from = ranges[coord + "1"];
- to = ranges[coord + "2"];
- }
-
- // auto-reverse as an added bonus
- if (from != null && to != null && from > to) {
- var tmp = from;
- from = to;
- to = tmp;
- }
-
- return { from: from, to: to, axis: axis };
- }
-
- function setSelection(ranges, preventEvent) {
- var axis, range, o = plot.getOptions();
-
- if (o.selection.mode == "y") {
- selection.first.x = 0;
- selection.second.x = plot.width();
- }
- else {
- range = extractRange(ranges, "x");
-
- selection.first.x = range.axis.p2c(range.from);
- selection.second.x = range.axis.p2c(range.to);
- }
-
- if (o.selection.mode == "x") {
- selection.first.y = 0;
- selection.second.y = plot.height();
- }
- else {
- range = extractRange(ranges, "y");
-
- selection.first.y = range.axis.p2c(range.from);
- selection.second.y = range.axis.p2c(range.to);
- }
-
- selection.show = true;
- plot.triggerRedrawOverlay();
- if (!preventEvent && selectionIsSane())
- triggerSelectedEvent();
- }
-
- function selectionIsSane() {
- 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;
- }
-
- 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);
- 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 = o.selection.shape;
- ctx.fillStyle = c.scale('a', 0.4).toString();
-
- var x = Math.min(selection.first.x, selection.second.x) + 0.5,
- y = Math.min(selection.first.y, selection.second.y) + 0.5,
- w = Math.abs(selection.second.x - selection.first.x) - 1,
- h = Math.abs(selection.second.y - selection.first.y) - 1;
-
- ctx.fillRect(x, y, w, h);
- ctx.strokeRect(x, y, w, h);
-
- ctx.restore();
- }
- });
-
- plot.hooks.shutdown.push(function (plot, eventHolder) {
- eventHolder.unbind("mousemove", onMouseMove);
- eventHolder.unbind("mousedown", onMouseDown);
-
- if (mouseUpHandler)
- $(document).unbind("mouseup", mouseUpHandler);
- });
-
- }
-
- $.plot.plugins.push({
- init: init,
- options: {
- selection: {
- mode: null, // one of null, "x", "y" or "xy"
- color: "#e8cfac",
- shape: "round", // one of "round", "miter", or "bevel"
- minSize: 5 // minimum number of pixels
- }
- },
- name: 'selection',
- version: '1.1'
- });
-})(jQuery);
Code Review / stor4nfv.git / blobdiff