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

This commit is contained in:
Andreas Hocevar
2017-10-20 00:02:20 +02:00
parent dea8a340a6
commit 7f865b8520
10 changed files with 376 additions and 21 deletions

View File

@@ -7,7 +7,9 @@ goog.require('ol.View');
goog.require('ol.extent');
goog.require('ol.geom.Point');
goog.require('ol.layer.Vector');
goog.require('ol.obj');
goog.require('ol.proj');
goog.require('ol.render.canvas');
goog.require('ol.renderer.canvas.VectorLayer');
goog.require('ol.source.Vector');
goog.require('ol.style.Style');
@@ -18,6 +20,24 @@ describe('ol.renderer.canvas.VectorLayer', function() {
describe('constructor', function() {
var head = document.getElementsByTagName('head')[0];
var font = document.createElement('link');
font.href = 'https://fonts.googleapis.com/css?family=Droid+Sans';
font.rel = 'stylesheet';
var target;
beforeEach(function() {
target = document.createElement('div');
target.style.width = '256px';
target.style.height = '256px';
document.body.appendChild(target);
});
afterEach(function() {
document.body.removeChild(target);
});
it('creates a new instance', function() {
var layer = new ol.layer.Vector({
source: new ol.source.Vector()
@@ -66,6 +86,101 @@ describe('ol.renderer.canvas.VectorLayer', function() {
document.body.removeChild(target);
});
it('does not re-render for unavailable fonts', function(done) {
ol.obj.clear(ol.render.canvas.checkedFonts_);
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 0
}),
target: target
});
var layerStyle = new ol.style.Style({
text: new ol.style.Text({
text: 'layer',
font: '12px "Unavailable Font",sans-serif'
})
});
var feature = new ol.Feature(new ol.geom.Point([0, 0]));
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
}),
style: layerStyle
});
map.addLayer(layer);
var revision = layer.getRevision();
setTimeout(function() {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('does not re-render for available fonts', function(done) {
ol.obj.clear(ol.render.canvas.checkedFonts_);
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 0
}),
target: target
});
var layerStyle = new ol.style.Style({
text: new ol.style.Text({
text: 'layer',
font: '12px sans-serif'
})
});
var feature = new ol.Feature(new ol.geom.Point([0, 0]));
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
}),
style: layerStyle
});
map.addLayer(layer);
var revision = layer.getRevision();
setTimeout(function() {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('re-renders for fonts that become available', function(done) {
ol.obj.clear(ol.render.canvas.checkedFonts_);
head.appendChild(font);
var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 0
}),
target: target
});
var layerStyle = new ol.style.Style({
text: new ol.style.Text({
text: 'layer',
font: '12px "Droid Sans",sans-serif'
})
});
var feature = new ol.Feature(new ol.geom.Point([0, 0]));
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
}),
style: layerStyle
});
map.addLayer(layer);
var revision = layer.getRevision();
setTimeout(function() {
expect(layer.getRevision()).to.be(revision + 1);
head.removeChild(font);
done();
}, 1600);
});
});
describe('#forEachFeatureAtCoordinate', function() {

View File

@@ -1,6 +1,7 @@
goog.require('ol');
goog.require('ol.obj');
goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.TileState');
@@ -13,6 +14,7 @@ goog.require('ol.geom.Point');
goog.require('ol.layer.VectorTile');
goog.require('ol.proj');
goog.require('ol.proj.Projection');
goog.require('ol.render.canvas');
goog.require('ol.render.Feature');
goog.require('ol.renderer.canvas.VectorTileLayer');
goog.require('ol.source.VectorTile');
@@ -25,7 +27,12 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
describe('constructor', function() {
var map, layer, source, feature1, feature2, feature3, target, tileCallback;
var head = document.getElementsByTagName('head')[0];
var font = document.createElement('link');
font.href = 'https://fonts.googleapis.com/css?family=Dancing+Script';
font.rel = 'stylesheet';
var map, layer, layerStyle, source, feature1, feature2, feature3, target, tileCallback;
beforeEach(function() {
tileCallback = function() {};
@@ -40,7 +47,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
}),
target: target
});
var layerStyle = [new ol.style.Style({
layerStyle = [new ol.style.Style({
text: new ol.style.Text({
text: 'layer'
})
@@ -147,6 +154,44 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
spy.restore();
});
it('does not re-render for unavailable fonts', function(done) {
map.renderSync();
ol.obj.clear(ol.render.canvas.checkedFonts_);
layerStyle[0].getText().setFont('12px "Unavailable font",sans-serif');
layer.changed();
var revision = layer.getRevision();
setTimeout(function() {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('does not re-render for available fonts', function(done) {
map.renderSync();
ol.obj.clear(ol.render.canvas.checkedFonts_);
layerStyle[0].getText().setFont('12px sans-serif');
layer.changed();
var revision = layer.getRevision();
setTimeout(function() {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('re-renders for fonts that become available', function(done) {
map.renderSync();
ol.obj.clear(ol.render.canvas.checkedFonts_);
head.appendChild(font);
layerStyle[0].getText().setFont('12px "Dancing Script",sans-serif');
layer.changed();
var revision = layer.getRevision();
setTimeout(function() {
head.removeChild(font);
expect(layer.getRevision()).to.be(revision + 1);
done();
}, 1600);
});
it('transforms geometries when tile and view projection are different', function() {
var tile;
tileCallback = function(t) {