rangeSelector.prototype.activate = function(dygraph) {
this.dygraph_ = dygraph;
- this.isUsingExcanvas_ = dygraph.isUsingExcanvas_;
if (this.getOption_('showRangeSelector')) {
this.createInterface_();
}
this.fgcanvas_ = null;
this.leftZoomHandle_ = null;
this.rightZoomHandle_ = null;
- this.iePanOverlay_ = null;
};
//------------------------------------------------------------------
*/
rangeSelector.prototype.createInterface_ = function() {
this.createCanvases_();
- if (this.isUsingExcanvas_) {
- this.createIEPanOverlay_();
- }
this.createZoomHandles_();
this.initInteraction_();
}
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'));
/**
* @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() {
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;
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.
handle.style.left = (newPos - halfHandleWidth) + 'px';
self.drawInteractiveLayer_();
- // Zoom on the fly (if not using excanvas).
+ // Zoom on the fly.
if (dynamic) {
doZoom();
}
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();
}
};
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) {
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();
}
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();
}
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_) {
}
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);
if (strokeStyle) {
this.bgcanvas_ctx_.strokeStyle = strokeStyle;
- this.bgcanvas_ctx_.lineWidth = 1.5;
+ this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorPlotLineWidth');
ctx.stroke();
}
};
if (g.rollPeriod() > 1) {
series = dataHandler.rollingAverage(series, g.rollPeriod(), options);
}
-
+
rolledSeries.push(series);
}
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);
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);
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';
- }
}
};