Check if fonts are available and redraw when label cache was cleared

src/ol/render/canvas.js

@@ -1,6 +1,9 @@
 goog.provide('ol.render.canvas');
 
 
+goog.require('ol.css');
+goog.require('ol.dom');
+goog.require('ol.structs.LRUCache');
 goog.require('ol.transform');
 
 
@@ -81,6 +84,73 @@ ol.render.canvas.defaultTextBaseline = 'middle';
 ol.render.canvas.defaultLineWidth = 1;
 
 
+/**
+ * @type {ol.structs.LRUCache.<HTMLCanvasElement>}
+ */
+ol.render.canvas.labelCache = new ol.structs.LRUCache();
+
+
+/**
+ * @type {!Object.<string, boolean>}
+ */
+ol.render.canvas.checkedFonts_ = {};
+
+
+/**
+ * Clears the label cache when a font becomes available.
+ * @param {string} fontSpec CSS font spec.
+ */
+ol.render.canvas.checkFont = (function() {
+  var checked = ol.render.canvas.checkedFonts_;
+  var labelCache = ol.render.canvas.labelCache;
+  var text = 'wmytzilWMYTZIL@#/&?$%10';
+  var context, referenceWidth;
+
+  function isAvailable(fontFamily) {
+    if (!context) {
+      context = ol.dom.createCanvasContext2D();
+      context.font = '32px monospace';
+      referenceWidth = context.measureText(text).width;
+    }
+    var available = true;
+    if (fontFamily != 'monospace') {
+      context.font = '32px ' + fontFamily + ',monospace';
+      var width = context.measureText(text).width;
+      // If width and referenceWidth are the same, then the 'monospace'
+      // fallback was used instead of the font we wanted, so the font is not
+      // available.
+      available = width != referenceWidth;
+    }
+    return available;
+  }
+
+  return function(fontSpec) {
+    var fontFamilies = ol.css.getFontFamilies(fontSpec);
+    if (!fontFamilies) {
+      return;
+    }
+    fontFamilies.forEach(function(fontFamily) {
+      if (!checked[fontFamily]) {
+        checked[fontFamily] = true;
+        if (!isAvailable(fontFamily)) {
+          var callCount = 0;
+          var interval = window.setInterval(function() {
+            ++callCount;
+            var available = isAvailable(fontFamily);
+            if (available || callCount >= 60) {
+              window.clearInterval(interval);
+              if (available) {
+                labelCache.clear();
+              }
+            }
+          }, 25);
+        }
+      }
+    });
+  };
+})();
+
+
 /**
  * @param {CanvasRenderingContext2D} context Context.
  * @param {number} rotation Rotation.

src/ol/render/canvas/textreplay.js

@@ -11,7 +11,6 @@ goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Instruction');
 goog.require('ol.render.canvas.Replay');
 goog.require('ol.render.replay');
-goog.require('ol.structs.LRUCache');
 goog.require('ol.style.TextPlacement');
 
 
@@ -121,21 +120,10 @@ ol.render.canvas.TextReplay = function(
    */
   this.widths_ = {};
 
-  while (ol.render.canvas.TextReplay.labelCache_.canExpireCache()) {
-    ol.render.canvas.TextReplay.labelCache_.pop();
-  }
-
 };
 ol.inherits(ol.render.canvas.TextReplay, ol.render.canvas.Replay);
 
 
-/**
- * @private
- * @type {ol.structs.LRUCache.<HTMLCanvasElement>}
- */
-ol.render.canvas.TextReplay.labelCache_ = new ol.structs.LRUCache();
-
-
 /**
  * @param {string} font Font to use for measuring.
  * @return {ol.Size} Measurement.
@@ -324,7 +312,8 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, fill, stroke) {
   var label;
   var key = (stroke ? this.strokeKey_ : '') + this.textKey_ + text + (fill ? this.fillKey_ : '');
 
-  if (!ol.render.canvas.TextReplay.labelCache_.containsKey(key)) {
+  var labelCache = ol.render.canvas.labelCache;
+  if (!labelCache.containsKey(key)) {
     var strokeState = this.textStrokeState_;
     var fillState = this.textFillState_;
     var textState = this.textState_;
@@ -344,7 +333,7 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, fill, stroke) {
         Math.ceil(renderWidth * scale),
         Math.ceil((height + strokeWidth) * scale));
     label = context.canvas;
-    ol.render.canvas.TextReplay.labelCache_.set(key, label);
+    labelCache.pruneAndSet(key, label);
     if (scale != 1) {
       context.scale(scale, scale);
     }
@@ -379,7 +368,7 @@ ol.render.canvas.TextReplay.prototype.getImage = function(text, fill, stroke) {
       }
     }
   }
-  return ol.render.canvas.TextReplay.labelCache_.get(key);
+  return labelCache.get(key);
 };
 
 
@@ -537,6 +526,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle, declutt
     if (!textState) {
       textState = this.textState_ = /** @type {ol.CanvasTextState} */ ({});
     }
+    ol.render.canvas.checkFont(font);
     textState.exceedLength = textStyle.getExceedLength();
     textState.font = font;
     textState.maxAngle = textStyle.getMaxAngle();