Merge pull request #1681 from twpayne/line-dash

Fix management of line dash state

src/ol/browserfeature.js

@@ -73,6 +73,14 @@ ol.IS_LEGACY_IE = goog.userAgent.IE &&
 ol.BrowserFeature.DEVICE_PIXEL_RATIO = goog.global.devicePixelRatio || 1;
 
 
+/**
+ * True if the browser's Canvas implementation implements {get,set}LineDash.
+ * @type {boolean}
+ * @todo stability experimental
+ */
+ol.BrowserFeature.HAS_CANVAS_LINE_DASH = false;
+
+
 /**
  * True if browser supports Canvas.
  * @const
@@ -90,7 +98,16 @@ ol.BrowserFeature.HAS_CANVAS = ol.ENABLE_CANVAS && (
       try {
         var canvas = /** @type {HTMLCanvasElement} */
             (goog.dom.createElement(goog.dom.TagName.CANVAS));
-        return !goog.isNull(canvas.getContext('2d'));
+        var context = /** @type {CanvasRenderingContext2D} */
+            (canvas.getContext('2d'));
+        if (goog.isNull(context)) {
+          return false;
+        } else {
+          if (goog.isDef(context.setLineDash)) {
+            ol.BrowserFeature.HAS_CANVAS_LINE_DASH = true;
+          }
+          return true;
+        }
       } catch (e) {
         return false;
       }

src/ol/render/canvas/canvasimmediate.js

@@ -8,6 +8,7 @@ goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
+goog.require('ol.BrowserFeature');
 goog.require('ol.color');
 goog.require('ol.extent');
 goog.require('ol.geom.flat');
@@ -638,7 +639,9 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ =
   var contextStrokeState = this.contextStrokeState_;
   if (goog.isNull(contextStrokeState)) {
     context.lineCap = strokeState.lineCap;
-    context.lineDash = strokeState.lineDash;
+    if (ol.BrowserFeature.HAS_CANVAS_LINE_DASH) {
+      context.setLineDash(strokeState.lineDash);
+    }
     context.lineJoin = strokeState.lineJoin;
     context.lineWidth = strokeState.lineWidth;
     context.miterLimit = strokeState.miterLimit;
@@ -655,8 +658,11 @@ ol.render.canvas.Immediate.prototype.setContextStrokeState_ =
     if (contextStrokeState.lineCap != strokeState.lineCap) {
       contextStrokeState.lineCap = context.lineCap = strokeState.lineCap;
     }
-    if (contextStrokeState.lineDash != strokeState.lineDash) {
+    if (ol.BrowserFeature.HAS_CANVAS_LINE_DASH) {
-      contextStrokeState.lineDash = context.lineDash = strokeState.lineDash;
+      if (!goog.array.equals(
+          contextStrokeState.lineDash, strokeState.lineDash)) {
+        context.setLineDash(contextStrokeState.lineDash = strokeState.lineDash);
+      }
     }
     if (contextStrokeState.lineJoin != strokeState.lineJoin) {
       contextStrokeState.lineJoin = context.lineJoin = strokeState.lineJoin;
@@ -734,7 +740,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle =
     this.strokeState_ = {
       lineCap: goog.isDef(strokeStyleLineCap) ?
           strokeStyleLineCap : ol.render.canvas.defaultLineCap,
-      lineDash: goog.isDef(strokeStyleLineDash) ?
+      lineDash: goog.isDefAndNotNull(strokeStyleLineDash) ?
           strokeStyleLineDash : ol.render.canvas.defaultLineDash,
       lineJoin: goog.isDef(strokeStyleLineJoin) ?
           strokeStyleLineJoin : ol.render.canvas.defaultLineJoin,

src/ol/render/canvas/canvasreplay.js

@@ -10,6 +10,7 @@ goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
+goog.require('ol.BrowserFeature');
 goog.require('ol.array');
 goog.require('ol.color');
 goog.require('ol.extent');
@@ -344,7 +345,7 @@ ol.render.canvas.Replay.prototype.replay_ =
         context.lineCap = /** @type {string} */ (instruction[3]);
         context.lineJoin = /** @type {string} */ (instruction[4]);
         context.miterLimit = /** @type {number} */ (instruction[5]);
-        if (goog.isDef(context.setLineDash)) {
+        if (ol.BrowserFeature.HAS_CANVAS_LINE_DASH) {
           context.setLineDash(/** @type {Array.<number>} */ (instruction[6]));
         }
         ++i;
@@ -850,7 +851,7 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
   goog.asserts.assert(goog.isDef(miterLimit));
   if (state.currentStrokeStyle != strokeStyle ||
       state.currentLineCap != lineCap ||
-      state.currentLineDash != lineDash ||
+      !goog.array.equals(state.currentLineDash, lineDash) ||
       state.currentLineJoin != lineJoin ||
       state.currentLineWidth != lineWidth ||
       state.currentMiterLimit != miterLimit) {
@@ -1248,7 +1249,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle =
         strokeStyleLineCap : ol.render.canvas.defaultLineCap;
     var strokeStyleLineDash = strokeStyle.getLineDash();
     state.lineDash = !goog.isNull(strokeStyleLineDash) ?
-        strokeStyleLineDash : ol.render.canvas.defaultLineDash;
+        strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
     var strokeStyleLineJoin = strokeStyle.getLineJoin();
     state.lineJoin = goog.isDef(strokeStyleLineJoin) ?
         strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
@@ -1552,7 +1553,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
       var lineCap = goog.isDef(textStrokeStyleLineCap) ?
           textStrokeStyleLineCap : ol.render.canvas.defaultLineCap;
       var lineDash = goog.isDefAndNotNull(textStrokeStyleLineDash) ?
-          textStrokeStyleLineDash : ol.render.canvas.defaultLineDash;
+          textStrokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
       var lineJoin = goog.isDef(textStrokeStyleLineJoin) ?
           textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
       var lineWidth = goog.isDef(textStrokeStyleWidth) ?