From 920208fbb3565a1f9075d49a7be486819bdd1174 Mon Sep 17 00:00:00 2001 From: Paul Felix Date: Mon, 17 Oct 2011 18:15:55 -0400 Subject: [PATCH] Various fixes/workarounds for IE7/IE8 and some fixes/tweaks of range selector For background on IE7/IE8 work, see the following: http://groups.google.com/group/dygraphs-users/browse_thread/thread/8c305992bf185ea8 Also, I have a fix of a recent commit in dygraph-utils.js that checks for instance of Node, which doesn't exist in IE7/IE8. In addition to some minor tweaks and code cleanup in dygraph-range-selector.js, there's a fix for issue #90. --- dygraph-canvas.js | 76 +++++++++++++++++++++--- dygraph-interaction-model.js | 4 +- dygraph-range-selector.js | 136 +++++++++++++++++++++++++++---------------- dygraph-utils.js | 10 +++- dygraph.js | 70 ++++++++++++++++++---- 5 files changed, 224 insertions(+), 72 deletions(-) diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 9a12459..5b2cac8 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -50,15 +50,19 @@ DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { // Set up a clipping area for the canvas (and the interaction canvas). // This ensures that we don't overdraw. - var ctx = this.dygraph_.canvas_ctx_; - ctx.beginPath(); - ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); - ctx.clip(); - - ctx = this.dygraph_.hidden_ctx_; - ctx.beginPath(); - ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); - ctx.clip(); + if (this.dygraph_.isUsingExcanvas_) { + this._createIEClipArea(); + } else { + var ctx = this.dygraph_.canvas_ctx_; + ctx.beginPath(); + ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); + ctx.clip(); + + ctx = this.dygraph_.hidden_ctx_; + ctx.beginPath(); + ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); + ctx.clip(); + } }; DygraphCanvasRenderer.prototype.attr_ = function(x) { @@ -195,6 +199,54 @@ DygraphCanvasRenderer.prototype.render = function() { this._renderAnnotations(); }; +DygraphCanvasRenderer.prototype._createIEClipArea = function() { + var className = 'dygraph-clip-div'; + var graphDiv = this.dygraph_.graphDiv; + + // Remove old clip divs. + for (var i = graphDiv.childNodes.length-1; i >= 0; i--) { + if (graphDiv.childNodes[i].className == className) { + graphDiv.removeChild(graphDiv.childNodes[i]); + } + } + + // Determine background color to give clip divs. + var backgroundColor = document.bgColor; + var element = this.dygraph_.graphDiv; + while (element != document) { + var bgcolor = element.currentStyle.backgroundColor; + if (bgcolor && bgcolor != 'transparent') { + backgroundColor = bgcolor; + break; + } + element = element.parentNode; + } + + function createClipDiv(area) { + if (area.w == 0 || area.h == 0) { + return; + } + var elem = document.createElement('div'); + elem.className = className; + elem.style.backgroundColor = backgroundColor; + elem.style.position = 'absolute'; + elem.style.left = area.x + 'px'; + elem.style.top = area.y + 'px'; + elem.style.width = area.w + 'px'; + elem.style.height = area.h + 'px'; + graphDiv.appendChild(elem); + } + + var plotArea = this.area; + // Left side + createClipDiv({x:0, y:0, w:plotArea.x, h:this.height}); + // Top + createClipDiv({x:plotArea.x, y:0, w:this.width-plotArea.x, h:plotArea.y}); + // Right side + createClipDiv({x:plotArea.x+plotArea.w, y:0, w:this.width-plotArea.x-plotArea.w, h:this.height}); + // Bottom + createClipDiv({x:plotArea.x, y:plotArea.y+plotArea.h, w:this.width-plotArea.x, h:this.height-plotArea.h-plotArea.y}); +} DygraphCanvasRenderer.prototype._renderAxis = function() { if (!this.attr_('drawXAxis') && !this.attr_('drawYAxis')) return; @@ -251,11 +303,14 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { prec_axis = 'y2'; } var y = this.area.y + tick[1] * this.area.h; + + /* Tick marks are currently clipped, so don't bother drawing them. context.beginPath(); context.moveTo(halfUp(x), halfDown(y)); context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y)); context.closePath(); context.stroke(); + */ var label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null); var top = (y - this.attr_('axisLabelFontSize') / 2); @@ -316,11 +371,14 @@ DygraphCanvasRenderer.prototype._renderAxis = function() { var x = this.area.x + tick[0] * this.area.w; var y = this.area.y + this.area.h; + + /* Tick marks are currently clipped, so don't bother drawing them. context.beginPath(); context.moveTo(halfUp(x), halfDown(y)); context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize'))); context.closePath(); context.stroke(); + */ var label = makeDiv(tick[1], 'x'); label.style.textAlign = "center"; diff --git a/dygraph-interaction-model.js b/dygraph-interaction-model.js index 3029025..06655f1 100644 --- a/dygraph-interaction-model.js +++ b/dygraph-interaction-model.js @@ -129,7 +129,7 @@ Dygraph.Interaction.movePan = function(event, g, context) { var pixelsDragged = context.dragEndY - context.dragStartY; var unitsDragged = pixelsDragged * axis.unitsPerPixel; - + var boundedValue = context.boundedValues ? context.boundedValues[i] : null; // In log scale, maxValue and minValue are the logs of those values. @@ -322,7 +322,7 @@ Dygraph.Interaction.endZoom = function(event, g, context) { g.doZoomY_(Math.min(context.dragStartY, context.dragEndY), Math.max(context.dragStartY, context.dragEndY)); } else { - g.canvas_ctx_.clearRect(0, 0, g.canvas_.width, g.canvas_.height); + g.clearZoomRect_(); } context.dragStartX = null; context.dragStartY = null; diff --git a/dygraph-range-selector.js b/dygraph-range-selector.js index 5e0d218..15be96f 100644 --- a/dygraph-range-selector.js +++ b/dygraph-range-selector.js @@ -13,9 +13,12 @@ */ DygraphRangeSelector = function(dygraph) { this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera; - this.isUsingExcanvas = typeof(G_vmlCanvasManager) != 'undefined'; + this.isUsingExcanvas_ = dygraph.isUsingExcanvas_; this.dygraph_ = dygraph; this.createCanvases_(); + if (this.isUsingExcanvas_) { + this.createIEPanOverlay_(); + } this.createZoomHandles_(); this.initInteraction_(); }; @@ -49,16 +52,6 @@ DygraphRangeSelector.prototype.renderInteractiveLayer = function() { if (this.isChangingRange_) { return; } - - // The zoom handle image may not be loaded yet. May need to try again later. - if (this.leftZoomHandle_.height == 0 && this.leftZoomHandle_.retryCount != 5) { - var self = this; - setTimeout(function() { self.renderInteractiveLayer(); }, 300); - var retryCount = this.leftZoomHandle_.retryCount; - this.leftZoomHandle_.retryCount = retryCount == undefined ? 1 : retryCount+1; - return; - } - this.placeZoomHandles_(); this.drawInteractiveLayer_(); }; @@ -68,7 +61,7 @@ DygraphRangeSelector.prototype.renderInteractiveLayer = function() { * Resizes the range selector. */ DygraphRangeSelector.prototype.resize_ = function() { - function setCanvasRect(canvas, rect) { + function setElementRect(canvas, rect) { canvas.style.top = rect.y + 'px'; canvas.style.left = rect.x + 'px'; canvas.width = rect.w; @@ -86,8 +79,8 @@ DygraphRangeSelector.prototype.resize_ = function() { h: this.attr_('rangeSelectorHeight') }; - setCanvasRect(this.bgcanvas_, this.canvasRect_); - setCanvasRect(this.fgcanvas_, this.canvasRect_); + setElementRect(this.bgcanvas_, this.canvasRect_); + setElementRect(this.fgcanvas_, this.canvasRect_); }; DygraphRangeSelector.prototype.attr_ = function(name) { @@ -102,31 +95,57 @@ DygraphRangeSelector.prototype.createCanvases_ = function() { this.bgcanvas_ = Dygraph.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.fgcanvas_ = Dygraph.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_); }; /** * @private + * Creates overlay divs for IE/Excanvas so that mouse events are handled properly. + */ +DygraphRangeSelector.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. */ DygraphRangeSelector.prototype.createZoomHandles_ = function() { var img = new Image(); img.className = 'dygraph-rangesel-zoomhandle'; img.style.position = 'absolute'; + 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'; - img.src = 'data:image/png;base64,\ + 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,\ iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA\ zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv\ bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl\ 6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s\ qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII='; + } this.leftZoomHandle_ = img; this.rightZoomHandle_ = img.cloneNode(false); @@ -172,7 +191,6 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { } xLast = e.screenX; var zoomHandleStatus = self.getZoomHandleStatus_(); - var halfHandleWidth = Math.round(handle.width/2); if (handle == self.leftZoomHandle_) { var newPos = zoomHandleStatus.leftHandlePos + delX; newPos = Math.min(newPos, zoomHandleStatus.rightHandlePos - handle.width - 3); @@ -182,11 +200,12 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { newPos = Math.min(newPos, self.canvasRect_.x + self.canvasRect_.w); newPos = Math.max(newPos, zoomHandleStatus.leftHandlePos + handle.width + 3); } + var halfHandleWidth = handle.width/2; handle.style.left = (newPos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); // Zoom on the fly (if not using excanvas). - if (!self.isUsingExcanvas) { + if (!self.isUsingExcanvas_) { doZoom(); } }; @@ -201,7 +220,7 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { self.fgcanvas_.style.cursor = 'default'; // If using excanvas, Zoom now. - if (self.isUsingExcanvas) { + if (self.isUsingExcanvas_) { doZoom(); } }; @@ -222,10 +241,14 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { }; function isMouseInPanZone(e) { - // Getting clientX directly from the event is not accurate enough :( - var clientX = self.canvasRect_.x + (e.layerX != undefined ? e.layerX : e.offsetX); - var zoomHandleStatus = self.getZoomHandleStatus_(); - return (clientX > zoomHandleStatus.leftHandlePos && clientX < zoomHandleStatus.rightHandlePos); + if (self.isUsingExcanvas_) { + return e.srcElement == self.iePanOverlay_; + } else { + // Getting clientX directly from the event is not accurate enough :( + var clientX = self.canvasRect_.x + (e.layerX != undefined ? e.layerX : e.offsetX); + var zoomHandleStatus = self.getZoomHandleStatus_(); + return (clientX > zoomHandleStatus.leftHandlePos && clientX < zoomHandleStatus.rightHandlePos); + } }; function onPanStart(e) { @@ -242,6 +265,7 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { if (!isPanning) { return; } + Dygraph.cancelEvent(e); var delX = e.screenX - xLast; if (Math.abs(delX) < 4) { @@ -264,13 +288,13 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { leftHandlePos += delX; rightHandlePos += delX; } - var halfHandleWidth = Math.round(self.leftZoomHandle_.width/2); + var halfHandleWidth = self.leftZoomHandle_.width/2; self.leftZoomHandle_.style.left = (leftHandlePos - halfHandleWidth) + 'px'; self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px'; self.drawInteractiveLayer_(); // Do pan on the fly (if not using excanvas). - if (!self.isUsingExcanvas) { + if (!self.isUsingExcanvas_) { doPan(); } }; @@ -283,7 +307,7 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { Dygraph.removeEvent(topElem, 'mousemove', onPan); Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); // If using excanvas, do pan now. - if (self.isUsingExcanvas) { + if (self.isUsingExcanvas_) { doPan(); } }; @@ -328,10 +352,16 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { this.dygraph_.attrs_.interactionModel = interactionModel; this.dygraph_.attrs_.panEdgeFraction = .0001; - Dygraph.addEvent(this.leftZoomHandle_, 'dragstart', onZoomStart); - Dygraph.addEvent(this.rightZoomHandle_, 'dragstart', onZoomStart); - Dygraph.addEvent(this.fgcanvas_, 'mousedown', onPanStart); - Dygraph.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove); + var dragStartEvent = window.opera ? 'mousedown' : 'dragstart'; + Dygraph.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart); + Dygraph.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart); + + if (this.isUsingExcanvas_) { + Dygraph.addEvent(this.iePanOverlay_, 'mousedown', onPanStart); + } else { + Dygraph.addEvent(this.fgcanvas_, 'mousedown', onPanStart); + Dygraph.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove); + } }; /** @@ -341,22 +371,20 @@ DygraphRangeSelector.prototype.initInteraction_ = function() { DygraphRangeSelector.prototype.drawStaticLayer_ = function() { var ctx = this.bgcanvas_ctx_; ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h); - var margin = .5; try { this.drawMiniPlot_(); } catch(ex) { } - ctx.strokeStyle = 'lightgray'; - if (false) { - ctx.strokeRect(margin, margin, this.canvasRect_.w-margin, this.canvasRect_.h-margin); - } else { - ctx.beginPath(); - ctx.moveTo(margin, margin); - ctx.lineTo(margin, this.canvasRect_.h-margin); - ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin); - ctx.lineTo(this.canvasRect_.w-margin, margin); - ctx.stroke(); - } + + var margin = .5; + this.bgcanvas_ctx_.lineWidth = 1; + ctx.strokeStyle = 'gray'; + ctx.beginPath(); + ctx.moveTo(margin, margin); + ctx.lineTo(margin, this.canvasRect_.h-margin); + ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin); + ctx.lineTo(this.canvasRect_.w-margin, margin); + ctx.stroke(); }; @@ -496,7 +524,7 @@ DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { var yMax = -Number.MAX_VALUE; for (var i = 0; i < combinedSeries.length; i++) { var yVal = combinedSeries[i][1]; - if (!logscale || yVal > 0) { + if (yVal != null && isFinite(yVal) && (!logscale || yVal > 0)) { yMin = Math.min(yMin, yVal); yMax = Math.max(yMax, yVal); } @@ -539,11 +567,11 @@ DygraphRangeSelector.prototype.placeZoomHandles_ = function() { var rightPercent = Math.max(0, (xExtremes[1] - xWindowLimits[1])/xRange); var leftCoord = this.canvasRect_.x + this.canvasRect_.w*leftPercent; var rightCoord = this.canvasRect_.x + this.canvasRect_.w*(1 - rightPercent); - var handleTop = Math.round(Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2)); - var halfHandleWidth = Math.round(this.leftZoomHandle_.width/2); - this.leftZoomHandle_.style.left = Math.round(leftCoord - halfHandleWidth) + 'px'; + var handleTop = Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2); + var halfHandleWidth = this.leftZoomHandle_.width/2; + this.leftZoomHandle_.style.left = (leftCoord - halfHandleWidth) + 'px'; this.leftZoomHandle_.style.top = handleTop + 'px'; - this.rightZoomHandle_.style.left = Math.round(rightCoord - halfHandleWidth) + 'px'; + this.rightZoomHandle_.style.left = (rightCoord - halfHandleWidth) + 'px'; this.rightZoomHandle_.style.top = this.leftZoomHandle_.style.top; this.leftZoomHandle_.style.visibility = 'visible'; @@ -570,13 +598,16 @@ DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() { ctx.lineTo(width, height); ctx.lineTo(width, margin); ctx.stroke(); + if (this.iePanOverlay_) { + this.iePanOverlay_.style.display = 'none'; + } } else { leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); ctx.fillStyle = 'rgba(240, 240, 240, 0.6)'; - ctx.fillRect(margin, margin, leftHandleCanvasPos, height - margin); - ctx.fillRect(rightHandleCanvasPos, margin, width - rightHandleCanvasPos, height - margin); + ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h); + ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h); ctx.beginPath(); ctx.moveTo(margin, margin); @@ -586,6 +617,13 @@ DygraphRangeSelector.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'; + } } }; @@ -595,7 +633,7 @@ DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() { * @return {Object} The zoom handle status. */ DygraphRangeSelector.prototype.getZoomHandleStatus_ = function() { - var halfHandleWidth = Math.round(this.leftZoomHandle_.width/2); + var halfHandleWidth = this.leftZoomHandle_.width/2; var leftHandlePos = parseInt(this.leftZoomHandle_.style.left) + halfHandleWidth; var rightHandlePos = parseInt(this.rightZoomHandle_.style.left) + halfHandleWidth; return { diff --git a/dygraph-utils.js b/dygraph-utils.js index 39fa2f5..bf488ef 100644 --- a/dygraph-utils.js +++ b/dygraph-utils.js @@ -494,6 +494,14 @@ Dygraph.update = function (self, o) { * @private */ Dygraph.updateDeep = function (self, o) { + // Taken from http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object + function isNode(o) { + return ( + typeof Node === "object" ? o instanceof Node : + typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string" + ); + } + if (typeof(o) != 'undefined' && o !== null) { for (var k in o) { if (o.hasOwnProperty(k)) { @@ -501,7 +509,7 @@ Dygraph.updateDeep = function (self, o) { self[k] = null; } else if (Dygraph.isArrayLike(o[k])) { self[k] = o[k].slice(); - } else if (o[k] instanceof Node) { + } else if (isNode(o[k])) { // DOM objects are shallowly-copied. self[k] = o[k]; } else if (typeof(o[k]) == 'object') { diff --git a/dygraph.js b/dygraph.js index 8125141..3393d7d 100644 --- a/dygraph.js +++ b/dygraph.js @@ -324,6 +324,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { return; } + this.isUsingExcanvas_ = typeof(G_vmlCanvasManager) != 'undefined'; + // Copy the important bits into the object // TODO(danvk): most of these should just stay in the attrs_ dictionary. this.maindiv_ = div; @@ -796,7 +798,15 @@ Dygraph.prototype.createInterface_ = function() { // The interactive parts of the graph are drawn on top of the chart. this.graphDiv.appendChild(this.hidden_); this.graphDiv.appendChild(this.canvas_); - this.mouseEventElement_ = this.canvas_; + this.mouseEventElement_ = this.createMouseEventElement_(); + + // Create the grapher + this.layout_ = new DygraphLayout(this); + + if (this.rangeSelector_) { + // This needs to happen after the graph canvases are added to the div and the layout object is created. + this.rangeSelector_.addToGraph(this.graphDiv, this.layout_); + } // Create the grapher this.layout_ = new DygraphLayout(this); @@ -876,6 +886,26 @@ Dygraph.prototype.createPlotKitCanvas_ = function(canvas) { }; /** + * Creates an overlay element used to handle mouse events. + * @return {Object} The mouse event element. + * @private + */ +Dygraph.prototype.createMouseEventElement_ = function() { + if (this.isUsingExcanvas_) { + var elem = document.createElement("div"); + elem.style.position = 'absolute'; + elem.style.backgroundColor = 'white'; + elem.style.filter = 'alpha(opacity=0)'; + elem.style.width = this.width_ + "px"; + elem.style.height = this.height_ + "px"; + this.graphDiv.appendChild(elem); + return elem; + } else { + return this.canvas_; + } +}; + +/** * Generate a set of distinct colors for the data series. This is done with a * color wheel. Saturation/Value are customizable, and the hue is * equally-spaced around the color wheel. If a custom set of colors is @@ -1149,28 +1179,40 @@ Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, // Clean up from the previous rect if necessary if (prevDirection == Dygraph.HORIZONTAL) { - ctx.clearRect(Math.min(startX, prevEndX), 0, - Math.abs(startX - prevEndX), this.height_); + ctx.clearRect(Math.min(startX, prevEndX), this.layout_.plotArea.y, + Math.abs(startX - prevEndX), this.layout_.plotArea.h); } else if (prevDirection == Dygraph.VERTICAL){ - ctx.clearRect(0, Math.min(startY, prevEndY), - this.width_, Math.abs(startY - prevEndY)); + ctx.clearRect(this.layout_.plotArea.x, Math.min(startY, prevEndY), + this.layout_.plotArea.w, Math.abs(startY - prevEndY)); } // Draw a light-grey rectangle to show the new viewing area if (direction == Dygraph.HORIZONTAL) { if (endX && startX) { ctx.fillStyle = "rgba(128,128,128,0.33)"; - ctx.fillRect(Math.min(startX, endX), 0, - Math.abs(endX - startX), this.height_); + ctx.fillRect(Math.min(startX, endX), this.layout_.plotArea.y, + Math.abs(endX - startX), this.layout_.plotArea.h); } - } - if (direction == Dygraph.VERTICAL) { + } else if (direction == Dygraph.VERTICAL) { if (endY && startY) { ctx.fillStyle = "rgba(128,128,128,0.33)"; - ctx.fillRect(0, Math.min(startY, endY), - this.width_, Math.abs(endY - startY)); + ctx.fillRect(this.layout_.plotArea.x, Math.min(startY, endY), + this.layout_.plotArea.w, Math.abs(endY - startY)); } } + + if (this.isUsingExcanvas_) { + this.currentZoomRectArgs_ = [direction, startX, endX, startY, endY, 0, 0, 0]; + } +}; + +/** + * Clear the zoom rectangle (and perform no zoom). + * @private + */ +Dygraph.prototype.clearZoomRect_ = function() { + this.currentZoomRectArgs_ = null; + this.canvas_ctx_.clearRect(0, 0, this.canvas_.width, this.canvas_.height); }; /** @@ -1184,6 +1226,7 @@ Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, * @private */ Dygraph.prototype.doZoomX_ = function(lowX, highX) { + this.currentZoomRectArgs_ = null; // Find the earliest and latest dates contained in this canvasx range. // Convert the call to date ranges of the raw data. var minDate = this.toDataXCoord(lowX); @@ -1218,6 +1261,7 @@ Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) { * @private */ Dygraph.prototype.doZoomY_ = function(lowY, highY) { + this.currentZoomRectArgs_ = null; // Find the highest and lowest values in pixel range for each axis. // Note that lowY (in pixels) corresponds to the max Value (in data coords). // This is because pixels increase as you go down on the screen, whereas data @@ -1466,6 +1510,10 @@ Dygraph.prototype.updateSelection_ = function() { 2 * maxCircleSize + 2, this.height_); } + if (this.isUsingExcanvas_ && this.currentZoomRectArgs_) { + Dygraph.prototype.drawZoomRect_.apply(this, this.currentZoomRectArgs_); + } + if (this.selPoints_.length > 0) { // Set the status message to indicate the selected point(s) if (this.attr_('showLabelsOnHighlight')) { -- 2.7.4