X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=src%2Fplugins%2Frange-selector.js;h=c1f70f9656baeb77f6da75c86cfa6b00954960f2;hb=f598f5e131cf7644fa168bfe49bded499d16363f;hp=4c1e938ed3e49cee9b1aabdf81bc5bb199c475d5;hpb=07cae5dd0adbcee97689ffa6099a6b0e8665011b;p=dygraphs.git diff --git a/src/plugins/range-selector.js b/src/plugins/range-selector.js index 4c1e938..c1f70f9 100644 --- a/src/plugins/range-selector.js +++ b/src/plugins/range-selector.js @@ -10,13 +10,14 @@ * a timeline range selector widget for dygraphs. */ -Dygraph.Plugins.RangeSelector = (function() { - /*global Dygraph:false */ "use strict"; +import * as utils from '../dygraph-utils'; +import DygraphInteraction from '../dygraph-interaction-model'; +import IFrameTarp from '../iframe-tarp'; + var rangeSelector = function() { - this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera; this.hasTouchInterface_ = typeof(TouchEvent) != 'undefined'; this.isMobileDevice_ = /mobile|android/gi.test(navigator.appVersion); this.interfaceCreated_ = false; @@ -160,8 +161,8 @@ rangeSelector.prototype.updateVisibility_ = function() { * Resizes the range selector. */ rangeSelector.prototype.resize_ = function() { - function setElementRect(canvas, context, rect) { - var canvasScale = Dygraph.getContextPixelRatio(context); + function setElementRect(canvas, context, rect, pixelRatioOption) { + var canvasScale = pixelRatioOption || utils.getContextPixelRatio(context); canvas.style.top = rect.y + 'px'; canvas.style.left = rect.x + 'px'; @@ -188,8 +189,9 @@ rangeSelector.prototype.resize_ = function() { h: this.getOption_('rangeSelectorHeight') }; - setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_); - setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_); + var pixelRatioOption = this.dygraph_.getNumericOption('pixelRatio'); + setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_, pixelRatioOption); + setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_, pixelRatioOption); }; /** @@ -197,18 +199,18 @@ rangeSelector.prototype.resize_ = function() { * Creates the background and foreground canvases. */ rangeSelector.prototype.createCanvases_ = function() { - this.bgcanvas_ = Dygraph.createCanvas(); + this.bgcanvas_ = utils.createCanvas(); this.bgcanvas_.className = 'dygraph-rangesel-bgcanvas'; this.bgcanvas_.style.position = 'absolute'; this.bgcanvas_.style.zIndex = 9; - this.bgcanvas_ctx_ = Dygraph.getContext(this.bgcanvas_); + this.bgcanvas_ctx_ = utils.getContext(this.bgcanvas_); - this.fgcanvas_ = Dygraph.createCanvas(); + this.fgcanvas_ = utils.createCanvas(); this.fgcanvas_.className = 'dygraph-rangesel-fgcanvas'; this.fgcanvas_.style.position = 'absolute'; this.fgcanvas_.style.zIndex = 9; this.fgcanvas_.style.cursor = 'default'; - this.fgcanvas_ctx_ = Dygraph.getContext(this.fgcanvas_); + this.fgcanvas_ctx_ = utils.getContext(this.fgcanvas_); }; /** @@ -222,22 +224,15 @@ 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; - img.style.backgroundColor = 'white'; - img.style.border = '1px solid #333333'; // Just show box in IE7. - } else { - img.width = 9; - img.height = 16; - img.src = 'data:image/png;base64,' + + // TODO: change image to more options + img.width = 9; + img.height = 16; + img.src = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' + 'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' + 'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' + '6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' + 'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII='; - } if (this.isMobileDevice_) { img.width *= 2; @@ -263,7 +258,7 @@ rangeSelector.prototype.initInteraction_ = function() { // We cover iframes during mouse interactions. See comments in // dygraph-utils.js for more info on why this is a good idea. - var tarp = new Dygraph.IFrameTarp(); + var tarp = new IFrameTarp(); // functions, defined below. Defining them this way (rather than with // "function foo() {...}" makes JSHint happy. @@ -282,14 +277,14 @@ rangeSelector.prototype.initInteraction_ = function() { }; onZoomStart = function(e) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); isZooming = true; clientXLast = e.clientX; handle = e.target ? e.target : e.srcElement; if (e.type === 'mousedown' || e.type === 'dragstart') { // These events are removed manually. - Dygraph.addEvent(topElem, 'mousemove', onZoom); - Dygraph.addEvent(topElem, 'mouseup', onZoomEnd); + utils.addEvent(topElem, 'mousemove', onZoom); + utils.addEvent(topElem, 'mouseup', onZoomEnd); } self.fgcanvas_.style.cursor = 'col-resize'; tarp.cover(); @@ -300,7 +295,7 @@ rangeSelector.prototype.initInteraction_ = function() { if (!isZooming) { return false; } - Dygraph.cancelEvent(e); + utils.cancelEvent(e); var delX = e.clientX - clientXLast; if (Math.abs(delX) < 4) { @@ -337,8 +332,8 @@ rangeSelector.prototype.initInteraction_ = function() { } isZooming = false; tarp.uncover(); - Dygraph.removeEvent(topElem, 'mousemove', onZoom); - Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd); + utils.removeEvent(topElem, 'mousemove', onZoom); + utils.removeEvent(topElem, 'mouseup', onZoomEnd); self.fgcanvas_.style.cursor = 'default'; // If on a slower device, zoom now. @@ -373,13 +368,13 @@ rangeSelector.prototype.initInteraction_ = function() { onPanStart = function(e) { if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); isPanning = true; clientXLast = e.clientX; if (e.type === 'mousedown') { // These events are removed manually. - Dygraph.addEvent(topElem, 'mousemove', onPan); - Dygraph.addEvent(topElem, 'mouseup', onPanEnd); + utils.addEvent(topElem, 'mousemove', onPan); + utils.addEvent(topElem, 'mouseup', onPanEnd); } return true; } @@ -390,7 +385,7 @@ rangeSelector.prototype.initInteraction_ = function() { if (!isPanning) { return false; } - Dygraph.cancelEvent(e); + utils.cancelEvent(e); var delX = e.clientX - clientXLast; if (Math.abs(delX) < 4) { @@ -430,8 +425,8 @@ rangeSelector.prototype.initInteraction_ = function() { return false; } isPanning = false; - Dygraph.removeEvent(topElem, 'mousemove', onPan); - Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); + utils.removeEvent(topElem, 'mousemove', onPan); + utils.removeEvent(topElem, 'mouseup', onPanEnd); // If on a slower device, do pan now. if (!dynamic) { doPan(); @@ -462,11 +457,11 @@ rangeSelector.prototype.initInteraction_ = function() { onZoomHandleTouchEvent = function(e) { if (e.type == 'touchstart' && e.targetTouches.length == 1) { if (onZoomStart(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else if (e.type == 'touchmove' && e.targetTouches.length == 1) { if (onZoom(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else { onZoomEnd(e); @@ -476,11 +471,11 @@ rangeSelector.prototype.initInteraction_ = function() { onCanvasTouchEvent = function(e) { if (e.type == 'touchstart' && e.targetTouches.length == 1) { if (onPanStart(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else if (e.type == 'touchmove' && e.targetTouches.length == 1) { if (onPan(e.targetTouches[0])) { - Dygraph.cancelEvent(e); + utils.cancelEvent(e); } } else { onPanEnd(e); @@ -494,7 +489,7 @@ rangeSelector.prototype.initInteraction_ = function() { } }; - this.setDefaultOption_('interactionModel', Dygraph.Interaction.dragIsPanInteractionModel); + this.setDefaultOption_('interactionModel', DygraphInteraction.dragIsPanInteractionModel); this.setDefaultOption_('panEdgeFraction', 0.0001); var dragStartEvent = window.opera ? 'mousedown' : 'dragstart'; @@ -641,13 +636,23 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { var labels = g.getLabels(); var includeSeries = new Array(numColumns); var anySet = false; + var visibility = g.visibility(); + var inclusion = []; + for (i = 1; i < numColumns; i++) { var include = this.getOption_('showInRangeSelector', labels[i]); - includeSeries[i] = include; + inclusion.push(include); if (include !== null) anySet = true; // it's set explicitly for this series } - if (!anySet) { - for (i = 0; i < includeSeries.length; i++) includeSeries[i] = true; + + if (anySet) { + for (i = 1; i < numColumns; i++) { + includeSeries[i] = inclusion[i - 1]; + } + } else { + for (i = 1; i < numColumns; i++) { + includeSeries[i] = visibility[i - 1]; + } } // Create a combined series (average of selected series values). @@ -693,11 +698,11 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { // Also, expand the Y range to compress the mini plot a little. var extraPercent = 0.25; if (logscale) { - yMax = Dygraph.log10(yMax); + yMax = utils.log10(yMax); yMax += yMax*extraPercent; - yMin = Dygraph.log10(yMin); + yMin = utils.log10(yMin); for (i = 0; i < combinedSeries.length; i++) { - combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]); + combinedSeries[i][1] = utils.log10(combinedSeries[i][1]); } } else { var yExtra; @@ -793,6 +798,4 @@ rangeSelector.prototype.getZoomHandleStatus_ = function() { }; }; -return rangeSelector; - -})(); +export default rangeSelector;