X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=plugins%2Frange-selector.js;h=2f5cdb76b09e8db5ae0256196ac3bc6edd95807c;hb=804fd99934fcdbee8b50b79561af0583cd94d805;hp=399ed3929d31d5d2ba588a686d9a4c4cf14b869d;hpb=c17e11738cb5603fafcdc84527114502312344c4;p=dygraphs.git diff --git a/plugins/range-selector.js b/plugins/range-selector.js index 399ed39..2f5cdb7 100644 --- a/plugins/range-selector.js +++ b/plugins/range-selector.js @@ -28,7 +28,6 @@ rangeSelector.prototype.toString = function() { rangeSelector.prototype.activate = function(dygraph) { this.dygraph_ = dygraph; - this.isUsingExcanvas_ = dygraph.isUsingExcanvas_; if (this.getOption_('showRangeSelector')) { this.createInterface_(); } @@ -44,7 +43,6 @@ rangeSelector.prototype.destroy = function() { this.fgcanvas_ = null; this.leftZoomHandle_ = null; this.rightZoomHandle_ = null; - this.iePanOverlay_ = null; }; //------------------------------------------------------------------ @@ -65,9 +63,6 @@ rangeSelector.prototype.setDefaultOption_ = function(name, value) { */ rangeSelector.prototype.createInterface_ = function() { this.createCanvases_(); - if (this.isUsingExcanvas_) { - this.createIEPanOverlay_(); - } this.createZoomHandles_(); this.initInteraction_(); @@ -181,7 +176,7 @@ rangeSelector.prototype.resize_ = function() { } var plotArea = this.dygraph_.layout_.getPlotArea(); - + var xAxisLabelHeight = 0; if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) { xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); @@ -218,20 +213,6 @@ rangeSelector.prototype.createCanvases_ = function() { /** * @private - * Creates overlay divs for IE/Excanvas so that mouse events are handled properly. - */ -rangeSelector.prototype.createIEPanOverlay_ = function() { - this.iePanOverlay_ = document.createElement("div"); - this.iePanOverlay_.style.position = 'absolute'; - this.iePanOverlay_.style.backgroundColor = 'white'; - this.iePanOverlay_.style.filter = 'alpha(opacity=0)'; - this.iePanOverlay_.style.display = 'none'; - this.iePanOverlay_.style.cursor = 'move'; - this.fgcanvas_.appendChild(this.iePanOverlay_); -}; - -/** - * @private * Creates the zoom handle elements. */ rangeSelector.prototype.createZoomHandles_ = function() { @@ -241,7 +222,7 @@ rangeSelector.prototype.createZoomHandles_ = function() { img.style.zIndex = 10; img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place. img.style.cursor = 'col-resize'; - +//TODO: change image to more options if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data. img.width = 7; img.height = 14; @@ -278,7 +259,7 @@ rangeSelector.prototype.initInteraction_ = function() { var handle = null; var isZooming = false; var isPanning = false; - var dynamic = !this.isMobileDevice_ && !this.isUsingExcanvas_; + var dynamic = !this.isMobileDevice_; // We cover iframes during mouse interactions. See comments in // dygraph-utils.js for more info on why this is a good idea. @@ -343,7 +324,7 @@ rangeSelector.prototype.initInteraction_ = function() { handle.style.left = (newPos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); - // Zoom on the fly (if not using excanvas). + // Zoom on the fly. if (dynamic) { doZoom(); } @@ -360,7 +341,7 @@ rangeSelector.prototype.initInteraction_ = function() { Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd); self.fgcanvas_.style.cursor = 'default'; - // If using excanvas, Zoom now. + // If on a slower device, zoom now. if (!dynamic) { doZoom(); } @@ -383,15 +364,11 @@ rangeSelector.prototype.initInteraction_ = function() { }; isMouseInPanZone = function(e) { - if (self.isUsingExcanvas_) { - return e.srcElement == self.iePanOverlay_; - } else { - var rect = self.leftZoomHandle_.getBoundingClientRect(); - var leftHandleClientX = rect.left + rect.width/2; - rect = self.rightZoomHandle_.getBoundingClientRect(); - var rightHandleClientX = rect.left + rect.width/2; - return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX); - } + var rect = self.leftZoomHandle_.getBoundingClientRect(); + var leftHandleClientX = rect.left + rect.width/2; + rect = self.rightZoomHandle_.getBoundingClientRect(); + var rightHandleClientX = rect.left + rect.width/2; + return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX); }; onPanStart = function(e) { @@ -441,7 +418,7 @@ rangeSelector.prototype.initInteraction_ = function() { self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); - // Do pan on the fly (if not using excanvas). + // Do pan on the fly. if (dynamic) { doPan(); } @@ -455,7 +432,7 @@ rangeSelector.prototype.initInteraction_ = function() { isPanning = false; Dygraph.removeEvent(topElem, 'mousemove', onPan); Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); - // If using excanvas, do pan now. + // If on a slower device, do pan now. if (!dynamic) { doPan(); } @@ -524,12 +501,8 @@ rangeSelector.prototype.initInteraction_ = function() { this.dygraph_.addAndTrackEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart); this.dygraph_.addAndTrackEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart); - if (this.isUsingExcanvas_) { - this.dygraph_.addAndTrackEvent(this.iePanOverlay_, 'mousedown', onPanStart); - } else { - this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousedown', onPanStart); - this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousemove', onCanvasHover); - } + this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousedown', onPanStart); + this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousemove', onCanvasHover); // Touch events if (this.hasTouchInterface_) { @@ -553,8 +526,8 @@ rangeSelector.prototype.drawStaticLayer_ = function() { } var margin = 0.5; - this.bgcanvas_ctx_.lineWidth = 1; - ctx.strokeStyle = 'gray'; + this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorBGLineWidth'); + ctx.strokeStyle = this.getOption_('rangeSelectorBGStrokeColor'); ctx.beginPath(); ctx.moveTo(margin, margin); ctx.lineTo(margin, this.canvasRect_.h-margin); @@ -570,6 +543,7 @@ rangeSelector.prototype.drawStaticLayer_ = function() { */ rangeSelector.prototype.drawMiniPlot_ = function() { var fillStyle = this.getOption_('rangeSelectorPlotFillColor'); + var fillGradientStyle = this.getOption_('rangeSelectorPlotFillGradientColor'); var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor'); if (!fillStyle && !strokeStyle) { return; @@ -635,7 +609,9 @@ rangeSelector.prototype.drawMiniPlot_ = function() { if (fillStyle) { var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight); - lingrad.addColorStop(0, 'white'); + if (fillGradientStyle) { + lingrad.addColorStop(0, fillGradientStyle); + } lingrad.addColorStop(1, fillStyle); this.bgcanvas_ctx_.fillStyle = lingrad; ctx.fill(); @@ -643,7 +619,7 @@ rangeSelector.prototype.drawMiniPlot_ = function() { if (strokeStyle) { this.bgcanvas_ctx_.strokeStyle = strokeStyle; - this.bgcanvas_ctx_.lineWidth = 1.5; + this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorPlotLineWidth'); ctx.stroke(); } }; @@ -685,7 +661,7 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { if (g.rollPeriod() > 1) { series = dataHandler.rollingAverage(series, g.rollPeriod(), options); } - + rolledSeries.push(series); } @@ -773,7 +749,8 @@ rangeSelector.prototype.drawInteractiveLayer_ = function() { var height = this.canvasRect_.h - margin; var zoomHandleStatus = this.getZoomHandleStatus_(); - ctx.strokeStyle = 'black'; + ctx.strokeStyle = this.getOption_('rangeSelectorFGStrokeColor'); + ctx.lineWidth = this.getOption_('rangeSelectorFGLineWidth'); if (!zoomHandleStatus.isZoomed) { ctx.beginPath(); ctx.moveTo(margin, margin); @@ -781,14 +758,11 @@ rangeSelector.prototype.drawInteractiveLayer_ = function() { ctx.lineTo(width, height); ctx.lineTo(width, margin); ctx.stroke(); - if (this.iePanOverlay_) { - this.iePanOverlay_.style.display = 'none'; - } } else { var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); - ctx.fillStyle = 'rgba(240, 240, 240, 0.6)'; + ctx.fillStyle = 'rgba(240, 240, 240, ' + this.getOption_('rangeSelectorAlpha').toString() + ')'; ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h); ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h); @@ -800,13 +774,6 @@ rangeSelector.prototype.drawInteractiveLayer_ = function() { ctx.lineTo(rightHandleCanvasPos, margin); ctx.lineTo(width, margin); ctx.stroke(); - - if (this.isUsingExcanvas_) { - this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px'; - this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px'; - this.iePanOverlay_.style.height = height + 'px'; - this.iePanOverlay_.style.display = 'inline'; - } } };