ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make code prettier

Browse Source 
This updates ESLint and our shared eslint-config-openlayers to use Prettier.  Most formatting changes were automatically applied with this:

    npm run lint -- --fix

A few manual changes were required:

 * In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
 * In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason.  While editing this, I reworked `ExampleBuilder` to be a class.
 * In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
This commit is contained in:
Tim Schaub
2020-04-06 12:25:12 -06:00
parent 53b48baf62
commit 054af09032
790 changed files with 46833 additions and 33765 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/spec/ol/renderer/canvas/builder.test.js
+185 -123
View File
@@ -1,4 +1,10 @@
import BuilderGroup from '../../../../../src/ol/render/canvas/BuilderGroup.js';
import CanvasBuilder from '../../../../../src/ol/render/canvas/Builder.js';
import CanvasLineStringBuilder from '../../../../../src/ol/render/canvas/LineStringBuilder.js';
import CanvasPolygonBuilder from '../../../../../src/ol/render/canvas/PolygonBuilder.js';
import ExecutorGroup from '../../../../../src/ol/render/canvas/ExecutorGroup.js';
import Feature from '../../../../../src/ol/Feature.js';
import Fill from '../../../../../src/ol/style/Fill.js';
import GeometryCollection from '../../../../../src/ol/geom/GeometryCollection.js';
import LineString from '../../../../../src/ol/geom/LineString.js';
import MultiLineString from '../../../../../src/ol/geom/MultiLineString.js';
@@ -6,21 +12,16 @@ import MultiPoint from '../../../../../src/ol/geom/MultiPoint.js';
import MultiPolygon from '../../../../../src/ol/geom/MultiPolygon.js';
import Point from '../../../../../src/ol/geom/Point.js';
import Polygon from '../../../../../src/ol/geom/Polygon.js';
import CanvasLineStringBuilder from '../../../../../src/ol/render/canvas/LineStringBuilder.js';
import CanvasPolygonBuilder from '../../../../../src/ol/render/canvas/PolygonBuilder.js';
import CanvasBuilder from '../../../../../src/ol/render/canvas/Builder.js';
import BuilderGroup from '../../../../../src/ol/render/canvas/BuilderGroup.js';
import ExecutorGroup from '../../../../../src/ol/render/canvas/ExecutorGroup.js';
import {renderFeature} from '../../../../../src/ol/renderer/vector.js';
import Fill from '../../../../../src/ol/style/Fill.js';
import Stroke from '../../../../../src/ol/style/Stroke.js';
import Style from '../../../../../src/ol/style/Style.js';
import {create as createTransform, scale as scaleTransform} from '../../../../../src/ol/transform.js';
describe('ol.render.canvas.BuilderGroup', function() {
describe('#replay', function() {
import {
create as createTransform,
scale as scaleTransform,
} from '../../../../../src/ol/transform.js';
import {renderFeature} from '../../../../../src/ol/renderer/vector.js';
describe('ol.render.canvas.BuilderGroup', function () {
describe('#replay', function () {
let context, builder, fillCount, transform;
let strokeCount, beginPathCount, moveToCount, lineToCount;
let feature0, feature1, feature2, feature3;
@@ -32,36 +33,82 @@ describe('ol.render.canvas.BuilderGroup', function() {
* @param {boolean=} overlaps Whether there is overlaps.
*/
function execute(builder, pixelRatio, overlaps) {
const executor = new ExecutorGroup([-180, -90, 180, 90], 1,
pixelRatio || 1, !!overlaps, builder.finish());
const executor = new ExecutorGroup(
[-180, -90, 180, 90],
1,
pixelRatio || 1,
!!overlaps,
builder.finish()
);
executor.execute(context, transform, 0, false);
}
beforeEach(function() {
beforeEach(function () {
transform = createTransform();
builder = new BuilderGroup(1, [-180, -90, 180, 90], 1, 1, false);
feature0 = new Feature(new Polygon(
[[[-90, 0], [-45, 45], [0, 0], [1, 1], [0, -45], [-90, 0]]]));
feature1 = new Feature(new Polygon(
[[[-90, -45], [-90, 0], [0, 0], [0, -45], [-90, -45]]]));
feature2 = new Feature(new Polygon(
[[[90, 45], [90, 0], [0, 0], [0, 45], [90, 45]]]));
feature3 = new Feature(new Polygon(
[[[-90, -45], [-90, 45], [90, 45], [90, -45], [-90, -45]]]));
feature0 = new Feature(
new Polygon([
[
[-90, 0],
[-45, 45],
[0, 0],
[1, 1],
[0, -45],
[-90, 0],
],
])
);
feature1 = new Feature(
new Polygon([
[
[-90, -45],
[-90, 0],
[0, 0],
[0, -45],
[-90, -45],
],
])
);
feature2 = new Feature(
new Polygon([
[
[90, 45],
[90, 0],
[0, 0],
[0, 45],
[90, 45],
],
])
);
feature3 = new Feature(
new Polygon([
[
[-90, -45],
[-90, 45],
[90, 45],
[90, -45],
[-90, -45],
],
])
);
fill0 = new Style({
fill: new Fill({color: 'black'})
fill: new Fill({color: 'black'}),
});
fill1 = new Style({
fill: new Fill({color: 'red'})
fill: new Fill({color: 'red'}),
});
style1 = new Style({
fill: new Fill({color: 'black'}),
stroke: new Stroke({color: 'white', width: 1})
stroke: new Stroke({color: 'white', width: 1}),
});
style2 = new Style({
fill: new Fill({color: 'white'}),
stroke: new Stroke({color: 'black', width: 1, lineDash: [3, 6],
lineDashOffset: 2})
stroke: new Stroke({
color: 'black',
width: 1,
lineDash: [3, 6],
lineDashOffset: 2,
}),
});
fillCount = 0;
strokeCount = 0;
@@ -69,36 +116,35 @@ describe('ol.render.canvas.BuilderGroup', function() {
moveToCount = 0;
lineToCount = 0;
context = {
fill: function() {
fill: function () {
fillCount++;
},
stroke: function() {
stroke: function () {
strokeCount++;
},
beginPath: function() {
beginPath: function () {
beginPathCount++;
},
clip: function() {
clip: function () {
// remove beginPath, moveTo and lineTo counts for clipping
beginPathCount--;
moveToCount--;
lineToCount -= 3;
},
moveTo: function() {
moveTo: function () {
moveToCount++;
},
lineTo: function() {
lineTo: function () {
lineToCount++;
},
closePath: function() {},
setLineDash: function() {},
save: function() {},
restore: function() {}
closePath: function () {},
setLineDash: function () {},
save: function () {},
restore: function () {},
};
});
it('omits lineTo for repeated coordinates', function() {
it('omits lineTo for repeated coordinates', function () {
renderFeature(builder, feature0, fill0, 1);
execute(builder);
expect(lineToCount).to.be(4);
@@ -108,14 +154,14 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(lineToCount).to.be(3);
});
it('does not omit moveTo for repeated coordinates', function() {
it('does not omit moveTo for repeated coordinates', function () {
renderFeature(builder, feature0, fill0, 1);
renderFeature(builder, feature1, fill1, 1);
execute(builder);
expect(moveToCount).to.be(2);
});
it('batches fill and stroke instructions for same style', function() {
it('batches fill and stroke instructions for same style', function () {
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style1, 1);
@@ -125,7 +171,7 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(beginPathCount).to.be(1);
});
it('batches fill and stroke instructions for different styles', function() {
it('batches fill and stroke instructions for different styles', function () {
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style2, 1);
@@ -135,7 +181,7 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(beginPathCount).to.be(2);
});
it('batches fill and stroke instructions for changing styles', function() {
it('batches fill and stroke instructions for changing styles', function () {
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style2, 1);
renderFeature(builder, feature3, style1, 1);
@@ -145,7 +191,7 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(beginPathCount).to.be(3);
});
it('does not batch when overlaps is set to true', function() {
it('does not batch when overlaps is set to true', function () {
builder = new BuilderGroup(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
@@ -156,23 +202,25 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(beginPathCount).to.be(3);
});
it('applies the pixelRatio to the linedash array and offset', function() {
it('applies the pixelRatio to the linedash array and offset', function () {
// replay with a pixelRatio of 2
builder = new BuilderGroup(1, [-180, -90, 180, 90], 1, 2, true);
let lineDash, lineDashCount = 0,
lineDashOffset, lineDashOffsetCount = 0;
let lineDash,
lineDashCount = 0,
lineDashOffset,
lineDashOffsetCount = 0;
context.setLineDash = function(lineDash_) {
context.setLineDash = function (lineDash_) {
lineDashCount++;
lineDash = lineDash_.slice();
};
Object.defineProperty(context, 'lineDashOffset', {
set: function(lineDashOffset_) {
set: function (lineDashOffset_) {
lineDashOffsetCount++;
lineDashOffset = lineDashOffset_;
}
},
});
renderFeature(builder, feature1, style2, 1);
@@ -188,10 +236,10 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(lineDashOffset).to.be(4);
});
it('calls the renderer function configured for the style', function() {
it('calls the renderer function configured for the style', function () {
const calls = [];
const style = new Style({
renderer: function(coords, state) {
renderer: function (coords, state) {
calls.push({
coords: coords,
geometry: state.geometry,
@@ -199,22 +247,44 @@ describe('ol.render.canvas.BuilderGroup', function() {
context: state.context,
pixelRatio: state.pixelRatio,
rotation: state.rotation,
resolution: state.resolution
resolution: state.resolution,
});
}
},
});
const point = new Feature(new Point([45, 90]));
const multipoint = new Feature(new MultiPoint(
[[45, 90], [90, 45]]));
const linestring = new Feature(new LineString(
[[45, 90], [45, 45], [90, 45]]));
const multilinestring = new Feature(new MultiLineString(
[linestring.getGeometry().getCoordinates(), linestring.getGeometry().getCoordinates()]));
const multipoint = new Feature(
new MultiPoint([
[45, 90],
[90, 45],
])
);
const linestring = new Feature(
new LineString([
[45, 90],
[45, 45],
[90, 45],
])
);
const multilinestring = new Feature(
new MultiLineString([
linestring.getGeometry().getCoordinates(),
linestring.getGeometry().getCoordinates(),
])
);
const polygon = feature1;
const multipolygon = new Feature(new MultiPolygon(
[polygon.getGeometry().getCoordinates(), polygon.getGeometry().getCoordinates()]));
const geometrycollection = new Feature(new GeometryCollection(
[point.getGeometry(), linestring.getGeometry(), polygon.getGeometry()]));
const multipolygon = new Feature(
new MultiPolygon([
polygon.getGeometry().getCoordinates(),
polygon.getGeometry().getCoordinates(),
])
);
const geometrycollection = new Feature(
new GeometryCollection([
point.getGeometry(),
linestring.getGeometry(),
polygon.getGeometry(),
])
);
builder = new BuilderGroup(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(builder, point, style, 1);
renderFeature(builder, multipoint, style, 1);
@@ -249,54 +319,58 @@ describe('ol.render.canvas.BuilderGroup', function() {
expect(calls[8].geometry.getCoordinates()[0][0]).to.eql([-90, -45]);
});
});
});
describe('ol.render.canvas.Builder', function() {
describe('constructor', function() {
it('creates a new replay batch', function() {
describe('ol.render.canvas.Builder', function () {
describe('constructor', function () {
it('creates a new replay batch', function () {
const tolerance = 10;
const extent = [-180, -90, 180, 90];
const replay = new CanvasBuilder(tolerance, extent, 1, 1, true);
expect(replay).to.be.a(CanvasBuilder);
});
});
describe('#appendFlatCoordinates()', function() {
describe('#appendFlatCoordinates()', function () {
let replay;
beforeEach(function() {
beforeEach(function () {
replay = new CanvasBuilder(1, [-180, -90, 180, 90], 1, 1, true);
});
it('appends coordinates that are within the max extent', function() {
it('appends coordinates that are within the max extent', function () {
const flat = [-110, 45, 110, 45, 110, -45, -110, -45];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, false, false);
expect(replay.coordinates).to.eql(flat);
});
it('appends polygon coordinates that are within the max extent', function() {
it('appends polygon coordinates that are within the max extent', function () {
const flat = [-110, 45, 110, 45, 110, -45, -110, -45, -110, 45];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, false);
expect(replay.coordinates).to.eql(flat);
});
it('appends polygon coordinates that are within the max extent (skipping first)', function() {
it('appends polygon coordinates that are within the max extent (skipping first)', function () {
const flat = [-110, 45, 110, 45, 110, -45, -110, -45, -110, 45];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, true);
expect(replay.coordinates).to.eql([110, 45, 110, -45, -110, -45, -110, 45]);
expect(replay.coordinates).to.eql([
110,
45,
110,
-45,
-110,
-45,
-110,
45,
]);
});
it('works with a single coordinate (inside)', function() {
it('works with a single coordinate (inside)', function () {
const flat = [-110, 45];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, false, false);
expect(replay.coordinates).to.eql(flat);
});
it('always appends first point (even if outside)', function() {
it('always appends first point (even if outside)', function () {
// this could be changed, but to make the code simpler for properly
// closing rings, we always add the first point
const flat = [-110, 145];
@@ -304,7 +378,7 @@ describe('ol.render.canvas.Builder', function() {
expect(replay.coordinates).to.eql(flat);
});
it('always appends first polygon vertex (even if outside)', function() {
it('always appends first polygon vertex (even if outside)', function () {
// this could be changed, but to make the code simpler for properly
// closing rings, we always add the first point
const flat = [-110, 145, -110, 145];
@@ -312,13 +386,13 @@ describe('ol.render.canvas.Builder', function() {
expect(replay.coordinates).to.eql(flat);
});
it('skips first polygon vertex upon request (also when outside)', function() {
it('skips first polygon vertex upon request (also when outside)', function () {
const flat = [-110, 145, -110, 145];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, true);
expect(replay.coordinates).to.eql([-110, 145]);
});
it('appends points when segments cross (top to bottom)', function() {
it('appends points when segments cross (top to bottom)', function () {
// this means we get a few extra points when coordinates are not
// part of a linestring or ring, but only a few extra
const flat = [0, 200, 0, -200];
@@ -326,13 +400,13 @@ describe('ol.render.canvas.Builder', function() {
expect(replay.coordinates).to.eql(flat);
});
it('appends points when segments cross (top to inside)', function() {
it('appends points when segments cross (top to inside)', function () {
const flat = [0, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, false, false);
expect(replay.coordinates).to.eql(flat);
});
it('always appends the first segment (even when outside)', function() {
it('always appends the first segment (even when outside)', function () {
// this could be changed, but to make the code simpler for properly
// closing rings, we always add the first segment
const flat = [-10, 200, 10, 200];
@@ -340,7 +414,7 @@ describe('ol.render.canvas.Builder', function() {
expect(replay.coordinates).to.eql(flat);
});
it('always appends the first polygon segment (even when outside)', function() {
it('always appends the first polygon segment (even when outside)', function () {
// this could be changed, but to make the code simpler for properly
// closing rings, we always add the first segment
const flat = [-10, 200, 10, 200, -10, 200];
@@ -348,110 +422,101 @@ describe('ol.render.canvas.Builder', function() {
expect(replay.coordinates).to.eql(flat);
});
it('skips first polygon segment upon request (also when outside)', function() {
it('skips first polygon segment upon request (also when outside)', function () {
const flat = [-10, 200, 10, 200, -10, 200];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, true);
expect(replay.coordinates).to.eql([10, 200, -10, 200]);
});
it('eliminates segments outside (and not changing rel)', function() {
it('eliminates segments outside (and not changing rel)', function () {
const flat = [0, 0, 0, 200, 5, 200, 10, 200];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, false, false);
expect(replay.coordinates).to.eql([0, 0, 0, 200]);
});
it('eliminates polygon segments outside (and not changing rel)', function() {
it('eliminates polygon segments outside (and not changing rel)', function () {
const flat = [0, 0, 0, 200, 5, 200, 10, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, false);
expect(replay.coordinates).to.eql([0, 0, 0, 200, 10, 200, 0, 0]);
});
it('eliminates polygon segments outside (skipping first and not changing rel)', function() {
it('eliminates polygon segments outside (skipping first and not changing rel)', function () {
const flat = [0, 0, 0, 10, 0, 200, 5, 200, 10, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, true);
expect(replay.coordinates).to.eql([0, 10, 0, 200, 10, 200, 0, 0]);
});
it('eliminates segments outside (and not changing rel)', function() {
it('eliminates segments outside (and not changing rel)', function () {
const flat = [0, 0, 0, 200, 10, 200];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, false, false);
expect(replay.coordinates).to.eql([0, 0, 0, 200]);
});
it('includes polygon segments outside (and not changing rel) when on last segment', function() {
it('includes polygon segments outside (and not changing rel) when on last segment', function () {
const flat = [0, 0, 0, 200, 10, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, false);
expect(replay.coordinates).to.eql(flat);
});
it('includes polygon segments outside (skipping first and not changing rel) when on last segment', function() {
it('includes polygon segments outside (skipping first and not changing rel) when on last segment', function () {
const flat = [0, 0, 0, 200, 10, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, true);
expect(replay.coordinates).to.eql([0, 200, 10, 200, 0, 0]);
});
it('includes outside segments that change relationship', function() {
it('includes outside segments that change relationship', function () {
const flat = [0, 0, 0, 200, 200, 200, 250, 200];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, false, false);
expect(replay.coordinates).to.eql([0, 0, 0, 200, 200, 200]);
});
it('includes outside polygon segments that change relationship when on last segment', function() {
it('includes outside polygon segments that change relationship when on last segment', function () {
const flat = [0, 0, 0, 200, 200, 200, 250, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, false);
expect(replay.coordinates).to.eql(flat);
});
it('includes outside polygon segments that change relationship when on last segment (when skipping first)', function() {
it('includes outside polygon segments that change relationship when on last segment (when skipping first)', function () {
const flat = [0, 0, 0, 200, 200, 200, 250, 200, 0, 0];
replay.appendFlatCoordinates(flat, 0, flat.length, 2, true, true);
expect(replay.coordinates).to.eql([0, 200, 200, 200, 250, 200, 0, 0]);
});
});
});
describe('ol.render.canvas.LineStringBuilder', function() {
describe('#getBufferedMaxExtent()', function() {
it('buffers the max extent to accommodate stroke width', function() {
describe('ol.render.canvas.LineStringBuilder', function () {
describe('#getBufferedMaxExtent()', function () {
it('buffers the max extent to accommodate stroke width', function () {
const tolerance = 1;
const extent = [-180, -90, 180, 90];
const resolution = 10;
const replay = new CanvasLineStringBuilder(tolerance, extent,
resolution);
const replay = new CanvasLineStringBuilder(tolerance, extent, resolution);
const stroke = new Stroke({
width: 2
width: 2,
});
replay.setFillStrokeStyle(null, stroke);
const buffered = replay.getBufferedMaxExtent();
expect(buffered).to.eql([-195, -105, 195, 105]);
});
});
});
describe('ol.render.canvas.PolygonBuilder', function() {
describe('ol.render.canvas.PolygonBuilder', function () {
let replay;
beforeEach(function() {
beforeEach(function () {
const tolerance = 1;
const extent = [-180, -90, 180, 90];
const resolution = 10;
replay = new CanvasPolygonBuilder(tolerance, extent,
resolution);
replay = new CanvasPolygonBuilder(tolerance, extent, resolution);
});
describe('#drawFlatCoordinatess_()', function() {
it('returns correct offset', function() {
describe('#drawFlatCoordinatess_()', function () {
it('returns correct offset', function () {
const coords = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2, 3, 4, 5, 6, 1, 2];
const ends = [7, 14];
const stroke = new Stroke({
width: 5
width: 5,
});
replay.setFillStrokeStyle(null, stroke);
let offset = replay.drawFlatCoordinatess_(coords, 0, ends, 2);
@@ -462,17 +527,14 @@ describe('ol.render.canvas.PolygonBuilder', function() {
});
});
describe('#getBufferedMaxExtent()', function() {
it('buffers the max extent to accommodate stroke width', function() {
describe('#getBufferedMaxExtent()', function () {
it('buffers the max extent to accommodate stroke width', function () {
const stroke = new Stroke({
width: 5
width: 5,
});
replay.setFillStrokeStyle(null, stroke);
const buffered = replay.getBufferedMaxExtent();
expect(buffered).to.eql([-210, -120, 210, 120]);
});
});
});
test/spec/ol/renderer/canvas/imagelayer.test.js
+43 -46
View File
@@ -1,25 +1,22 @@
import Map from '../../../../../src/ol/Map.js';
import View from '../../../../../src/ol/View.js';
import {get as getProj} from '../../../../../src/ol/proj.js';
import ImageLayer from '../../../../../src/ol/layer/Image.js';
import VectorImageLayer from '../../../../../src/ol/layer/VectorImage.js';
import Feature from '../../../../../src/ol/Feature.js';
import ImageLayer from '../../../../../src/ol/layer/Image.js';
import Map from '../../../../../src/ol/Map.js';
import Point from '../../../../../src/ol/geom/Point.js';
import Projection from '../../../../../src/ol/proj/Projection.js';
import Static from '../../../../../src/ol/source/ImageStatic.js';
import VectorImageLayer from '../../../../../src/ol/layer/VectorImage.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import View from '../../../../../src/ol/View.js';
import {get as getProj} from '../../../../../src/ol/proj.js';
describe('ol.renderer.canvas.ImageLayer', function() {
describe('#forEachLayerAtCoordinate', function() {
describe('ol.renderer.canvas.ImageLayer', function () {
describe('#forEachLayerAtCoordinate', function () {
let map, target, source;
beforeEach(function(done) {
beforeEach(function (done) {
const projection = new Projection({
code: 'custom-image',
units: 'pixels',
extent: [0, 0, 200, 200]
extent: [0, 0, 200, 200],
});
target = document.createElement('div');
target.style.width = '100px';
@@ -28,32 +25,34 @@ describe('ol.renderer.canvas.ImageLayer', function() {
source = new Static({
url: 'spec/ol/data/dot.png',
projection: projection,
imageExtent: [0, 0, 20, 20]
imageExtent: [0, 0, 20, 20],
});
map = new Map({
pixelRatio: 1,
target: target,
layers: [new ImageLayer({
source: source
})],
layers: [
new ImageLayer({
source: source,
}),
],
view: new View({
projection: projection,
center: [10, 10],
zoom: 2,
maxZoom: 8
})
maxZoom: 8,
}),
});
source.on('imageloadend', function() {
source.on('imageloadend', function () {
done();
});
});
afterEach(function() {
afterEach(function () {
map.setTarget(null);
document.body.removeChild(target);
});
it('properly detects pixels', function() {
it('properly detects pixels', function () {
map.renderSync();
let has = false;
function hasLayer() {
@@ -67,17 +66,17 @@ describe('ol.renderer.canvas.ImageLayer', function() {
});
});
describe('Image rendering', function() {
describe('Image rendering', function () {
let map, div, layer;
beforeEach(function(done) {
beforeEach(function (done) {
const projection = getProj('EPSG:3857');
layer = new ImageLayer({
source: new Static({
url: 'spec/ol/data/osm-0-0-0.png',
imageExtent: projection.getExtent(),
projection: projection
})
projection: projection,
}),
});
div = document.createElement('div');
@@ -89,30 +88,30 @@ describe('ol.renderer.canvas.ImageLayer', function() {
layers: [layer],
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
layer.getSource().on('imageloadend', function() {
layer.getSource().on('imageloadend', function () {
done();
});
});
afterEach(function() {
afterEach(function () {
map.setTarget(null);
document.body.removeChild(div);
map.dispose();
});
it('dispatches prerender and postrender events on the image layer', function(done) {
it('dispatches prerender and postrender events on the image layer', function (done) {
let prerender = 0;
let postrender = 0;
layer.on('prerender', function() {
layer.on('prerender', function () {
++prerender;
});
layer.on('postrender', function() {
layer.on('postrender', function () {
++postrender;
});
map.on('postrender', function() {
map.on('postrender', function () {
expect(prerender).to.be(1);
expect(postrender).to.be(1);
done();
@@ -120,15 +119,14 @@ describe('ol.renderer.canvas.ImageLayer', function() {
});
});
describe('Vector image rendering', function() {
describe('Vector image rendering', function () {
let map, div, layer;
beforeEach(function() {
beforeEach(function () {
layer = new VectorImageLayer({
source: new VectorSource({
features: [new Feature(new Point([0, 0]))]
})
features: [new Feature(new Point([0, 0]))],
}),
});
div = document.createElement('div');
@@ -140,32 +138,31 @@ describe('ol.renderer.canvas.ImageLayer', function() {
layers: [layer],
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
});
afterEach(function() {
afterEach(function () {
map.setTarget(null);
document.body.removeChild(div);
map.dispose();
});
it('dispatches prerender and postrender events on the vector layer', function(done) {
it('dispatches prerender and postrender events on the vector layer', function (done) {
let prerender = 0;
let postrender = 0;
layer.on('prerender', function() {
layer.on('prerender', function () {
++prerender;
});
layer.on('postrender', function() {
layer.on('postrender', function () {
++postrender;
});
map.once('postrender', function() {
map.once('postrender', function () {
expect(prerender).to.be(1);
expect(postrender).to.be(1);
done();
});
});
});
});
test/spec/ol/renderer/canvas/tilelayer.test.js
+26 -28
View File
@@ -1,49 +1,48 @@
import Map from '../../../../../src/ol/Map.js';
import View from '../../../../../src/ol/View.js';
import TileLayer from '../../../../../src/ol/layer/Tile.js';
import TileWMS from '../../../../../src/ol/source/TileWMS.js';
import View from '../../../../../src/ol/View.js';
import XYZ from '../../../../../src/ol/source/XYZ.js';
import {fromLonLat} from '../../../../../src/ol/proj.js';
describe('ol.renderer.canvas.TileLayer', function() {
describe('#prepareFrame', function() {
describe('ol.renderer.canvas.TileLayer', function () {
describe('#prepareFrame', function () {
let map, target, source, tile;
beforeEach(function(done) {
beforeEach(function (done) {
target = document.createElement('div');
target.style.width = '100px';
target.style.height = '100px';
document.body.appendChild(target);
source = new TileWMS({
url: 'spec/ol/data/osm-0-0-0.png',
params: {LAYERS: 'foo', TIME: '0'}
params: {LAYERS: 'foo', TIME: '0'},
});
source.once('tileloadend', function(e) {
source.once('tileloadend', function (e) {
tile = e.tile;
done();
});
map = new Map({
target: target,
layers: [new TileLayer({
source: source
})],
layers: [
new TileLayer({
source: source,
}),
],
view: new View({
zoom: 0,
center: [0, 0]
})
center: [0, 0],
}),
});
});
afterEach(function() {
afterEach(function () {
map.setTarget(null);
document.body.removeChild(target);
});
it('properly handles interim tiles', function(done) {
it('properly handles interim tiles', function (done) {
const layer = map.getLayers().item(0);
source.once('tileloadend', function(e) {
source.once('tileloadend', function (e) {
expect(e.tile.inTransition()).to.be(false);
done();
});
@@ -56,38 +55,37 @@ describe('ol.renderer.canvas.TileLayer', function() {
});
});
describe('#renderFrame', function() {
describe('#renderFrame', function () {
let map, layer;
beforeEach(function() {
beforeEach(function () {
layer = new TileLayer({
source: new XYZ({
cacheSize: 1,
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
})
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
}),
});
map = new Map({
target: createMapDiv(100, 100),
layers: [layer],
view: new View({
center: fromLonLat([-122.416667, 37.783333]),
zoom: 5
})
zoom: 5,
}),
});
});
afterEach(function() {
afterEach(function () {
disposeMap(map);
});
it('respects the source\'s zDirection setting', function(done) {
it("respects the source's zDirection setting", function (done) {
layer.getSource().zDirection = 1;
map.getView().setZoom(5.8); // would lead to z6 tile request with the default zDirection
map.once('rendercomplete', function() {
map.once('rendercomplete', function () {
const tileCache = layer.getSource().tileCache;
const keys = tileCache.getKeys();
expect(keys.some(key => key.startsWith('6/'))).to.be(false);
expect(keys.some((key) => key.startsWith('6/'))).to.be(false);
done();
});
});
});
});
test/spec/ol/renderer/canvas/vectorimage.test.js
+15 -18
View File
@@ -1,39 +1,37 @@
import CanvasVectorImageLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorImageLayer.js';
import VectorImageLayer from '../../../../../src/ol/layer/VectorImage.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import CanvasVectorImageLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorImageLayer.js';
import {create} from '../../../../../src/ol/transform.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
import {scaleFromCenter} from '../../../../../src/ol/extent.js';
import {create} from '../../../../../src/ol/transform.js';
describe('ol/renderer/canvas/VectorImageLayer', function() {
describe('#dispose()', function() {
it('cleans up CanvasVectorRenderer', function() {
describe('ol/renderer/canvas/VectorImageLayer', function () {
describe('#dispose()', function () {
it('cleans up CanvasVectorRenderer', function () {
const layer = new VectorImageLayer({
source: new VectorSource()
source: new VectorSource(),
});
const renderer = new CanvasVectorImageLayerRenderer(layer);
const spy = sinon.spy(renderer.vectorRenderer_, 'dispose');
renderer.dispose();
expect(spy.called).to.be(true);
});
});
describe('#prepareFrame', function() {
it('sets correct extent with imageRatio = 2', function() {
describe('#prepareFrame', function () {
it('sets correct extent with imageRatio = 2', function () {
const layer = new VectorImageLayer({
imageRatio: 2,
source: new VectorSource()
source: new VectorSource(),
});
const renderer = new CanvasVectorImageLayerRenderer(layer);
const projection = getProjection('EPSG:3857');
const projExtent = projection.getExtent();
const extent = [
projExtent[0] - 10000, -10000, projExtent[0] + 10000, 10000
projExtent[0] - 10000,
-10000,
projExtent[0] + 10000,
10000,
];
const frameState = {
layerStatesArray: [layer.getLayerState()],
@@ -45,8 +43,8 @@ describe('ol/renderer/canvas/VectorImageLayer', function() {
center: [0, 0],
projection: projection,
resolution: 1,
rotation: 0
}
rotation: 0,
},
};
renderer.prepareFrame(frameState);
const expected = renderer.image_.getExtent();
@@ -56,5 +54,4 @@ describe('ol/renderer/canvas/VectorImageLayer', function() {
expect(expected).to.eql(extent);
});
});
});
test/spec/ol/renderer/canvas/vectorlayer.test.js
+213 -150
View File
@@ -1,27 +1,28 @@
import Feature from '../../../../../src/ol/Feature.js';
import Map from '../../../../../src/ol/Map.js';
import View from '../../../../../src/ol/View.js';
import {buffer as bufferExtent, getWidth, getCenter} from '../../../../../src/ol/extent.js';
import Circle from '../../../../../src/ol/geom/Circle.js';
import Point from '../../../../../src/ol/geom/Point.js';
import {fromExtent} from '../../../../../src/ol/geom/Polygon.js';
import VectorLayer from '../../../../../src/ol/layer/Vector.js';
import {bbox as bboxStrategy} from '../../../../../src/ol/loadingstrategy.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
import CanvasVectorLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorLayer.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import Circle from '../../../../../src/ol/geom/Circle.js';
import CircleStyle from '../../../../../src/ol/style/Circle.js';
import Feature from '../../../../../src/ol/Feature.js';
import Fill from '../../../../../src/ol/style/Fill.js';
import Map from '../../../../../src/ol/Map.js';
import Point from '../../../../../src/ol/geom/Point.js';
import Stroke from '../../../../../src/ol/style/Stroke.js';
import Style from '../../../../../src/ol/style/Style.js';
import Text from '../../../../../src/ol/style/Text.js';
import VectorLayer from '../../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import View from '../../../../../src/ol/View.js';
import {bbox as bboxStrategy} from '../../../../../src/ol/loadingstrategy.js';
import {
buffer as bufferExtent,
getCenter,
getWidth,
} from '../../../../../src/ol/extent.js';
import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
import {fromExtent} from '../../../../../src/ol/geom/Polygon.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
describe('ol.renderer.canvas.VectorLayer', function() {
describe('constructor', function() {
describe('ol.renderer.canvas.VectorLayer', function () {
describe('constructor', function () {
const head = document.getElementsByTagName('head')[0];
const font = document.createElement('link');
font.href = 'https://fonts.googleapis.com/css?family=Droid+Sans';
@@ -29,26 +30,26 @@ describe('ol.renderer.canvas.VectorLayer', function() {
let target;
beforeEach(function() {
beforeEach(function () {
target = document.createElement('div');
target.style.width = '256px';
target.style.height = '256px';
document.body.appendChild(target);
});
afterEach(function() {
afterEach(function () {
document.body.removeChild(target);
});
it('creates a new instance', function() {
it('creates a new instance', function () {
const layer = new VectorLayer({
source: new VectorSource()
source: new VectorSource(),
});
const renderer = new CanvasVectorLayerRenderer(layer);
expect(renderer).to.be.a(CanvasVectorLayerRenderer);
});
it('gives precedence to feature styles over layer styles', function() {
it('gives precedence to feature styles over layer styles', function () {
const target = document.createElement('div');
target.style.width = '256px';
target.style.height = '256px';
@@ -56,28 +57,32 @@ describe('ol.renderer.canvas.VectorLayer', function() {
const map = new Map({
view: new View({
center: [0, 0],
zoom: 0
zoom: 0,
}),
target: target
target: target,
});
const layerStyle = [new Style({
text: new Text({
text: 'layer'
})
})];
const featureStyle = [new Style({
text: new Text({
text: 'feature'
})
})];
const layerStyle = [
new Style({
text: new Text({
text: 'layer',
}),
}),
];
const featureStyle = [
new Style({
text: new Text({
text: 'feature',
}),
}),
];
const feature1 = new Feature(new Point([0, 0]));
const feature2 = new Feature(new Point([0, 0]));
feature2.setStyle(featureStyle);
const layer = new VectorLayer({
source: new VectorSource({
features: [feature1, feature2]
features: [feature1, feature2],
}),
style: layerStyle
style: layerStyle,
});
map.addLayer(layer);
const spy = sinon.spy(layer.getRenderer(), 'renderFeature');
@@ -87,122 +92,126 @@ describe('ol.renderer.canvas.VectorLayer', function() {
document.body.removeChild(target);
});
it('does not re-render for unavailable fonts', function(done) {
it('does not re-render for unavailable fonts', function (done) {
checkedFonts.values_ = {};
const map = new Map({
view: new View({
center: [0, 0],
zoom: 0
zoom: 0,
}),
target: target
target: target,
});
const layerStyle = new Style({
text: new Text({
text: 'layer',
font: '12px "Unavailable Font",sans-serif'
})
font: '12px "Unavailable Font",sans-serif',
}),
});
const feature = new Feature(new Point([0, 0]));
const layer = new VectorLayer({
source: new VectorSource({
features: [feature]
features: [feature],
}),
style: layerStyle
style: layerStyle,
});
map.addLayer(layer);
const revision = layer.getRevision();
setTimeout(function() {
setTimeout(function () {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('does not re-render for available fonts', function(done) {
it('does not re-render for available fonts', function (done) {
checkedFonts.values_ = {};
const map = new Map({
view: new View({
center: [0, 0],
zoom: 0
zoom: 0,
}),
target: target
target: target,
});
const layerStyle = new Style({
text: new Text({
text: 'layer',
font: '12px sans-serif'
})
font: '12px sans-serif',
}),
});
const feature = new Feature(new Point([0, 0]));
const layer = new VectorLayer({
source: new VectorSource({
features: [feature]
features: [feature],
}),
style: layerStyle
style: layerStyle,
});
map.addLayer(layer);
const revision = layer.getRevision();
setTimeout(function() {
setTimeout(function () {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('re-renders for fonts that become available', function(done) {
it('re-renders for fonts that become available', function (done) {
checkedFonts.values_ = {};
head.appendChild(font);
const map = new Map({
view: new View({
center: [0, 0],
zoom: 0
zoom: 0,
}),
target: target
target: target,
});
const layerStyle = new Style({
text: new Text({
text: 'layer',
font: '12px "Droid Sans",sans-serif'
})
font: '12px "Droid Sans",sans-serif',
}),
});
const feature = new Feature(new Point([0, 0]));
const layer = new VectorLayer({
source: new VectorSource({
features: [feature]
features: [feature],
}),
style: layerStyle
style: layerStyle,
});
map.addLayer(layer);
const revision = layer.getRevision();
setTimeout(function() {
setTimeout(function () {
expect(layer.getRevision()).to.be(revision + 1);
head.removeChild(font);
done();
}, 1600);
});
});
describe('#forEachFeatureAtCoordinate', function() {
describe('#forEachFeatureAtCoordinate', function () {
let layer, renderer;
beforeEach(function() {
beforeEach(function () {
layer = new VectorLayer({
source: new VectorSource()
source: new VectorSource(),
});
renderer = new CanvasVectorLayerRenderer(layer);
const replayGroup = {};
renderer.replayGroup_ = replayGroup;
replayGroup.forEachFeatureAtCoordinate = function(coordinate,
resolution, rotation, hitTolerance, callback) {
replayGroup.forEachFeatureAtCoordinate = function (
coordinate,
resolution,
rotation,
hitTolerance,
callback
) {
const feature = new Feature();
callback(feature);
callback(feature);
};
});
it('calls callback once per feature with a layer as 2nd arg', function() {
it('calls callback once per feature with a layer as 2nd arg', function () {
const spy = sinon.spy();
const coordinate = [0, 0];
const frameState = {
@@ -210,30 +219,35 @@ describe('ol.renderer.canvas.VectorLayer', function() {
viewState: {
center: [0, 0],
resolution: 1,
rotation: 0
}
rotation: 0,
},
};
renderer.forEachFeatureAtCoordinate(
coordinate, frameState, 0, spy, undefined);
coordinate,
frameState,
0,
spy,
undefined
);
expect(spy.callCount).to.be(1);
expect(spy.getCall(0).args[1]).to.equal(layer);
});
});
describe('#prepareFrame and #compose', function() {
describe('#prepareFrame and #compose', function () {
let frameState, projExtent, renderer, worldWidth, buffer, loadExtents;
function loader(extent) {
loadExtents.push(extent);
}
beforeEach(function() {
beforeEach(function () {
const layer = new VectorLayer({
source: new VectorSource({
wrapX: true,
loader: loader,
strategy: bboxStrategy
})
strategy: bboxStrategy,
}),
});
renderer = new CanvasVectorLayerRenderer(layer);
const projection = getProjection('EPSG:3857');
@@ -246,8 +260,8 @@ describe('ol.renderer.canvas.VectorLayer', function() {
viewState: {
projection: projection,
resolution: 1,
rotation: 0
}
rotation: 0,
},
};
});
@@ -256,75 +270,128 @@ describe('ol.renderer.canvas.VectorLayer', function() {
frameState.viewState.center = getCenter(extent);
}
it('sets correct extent for small viewport near dateline', function() {
it('sets correct extent for small viewport near dateline', function () {
setExtent([projExtent[0] - 10000, -10000, projExtent[0] + 10000, 10000]);
renderer.prepareFrame(frameState);
expect(renderer.replayGroup_.maxExtent_).to.eql(bufferExtent([
projExtent[0] - worldWidth + buffer,
-10000, projExtent[2] + worldWidth - buffer, 10000
], buffer));
expect(renderer.replayGroup_.maxExtent_).to.eql(
bufferExtent(
[
projExtent[0] - worldWidth + buffer,
-10000,
projExtent[2] + worldWidth - buffer,
10000,
],
buffer
)
);
expect(loadExtents.length).to.be(2);
expect(loadExtents[0]).to.eql(bufferExtent(frameState.extent, buffer));
const otherExtent = [projExtent[2] - 10000, -10000, projExtent[2] + 10000, 10000];
const otherExtent = [
projExtent[2] - 10000,
-10000,
projExtent[2] + 10000,
10000,
];
expect(loadExtents[1]).to.eql(bufferExtent(otherExtent, buffer));
});
it('sets correct extent for viewport less than 1 world wide', function() {
it('sets correct extent for viewport less than 1 world wide', function () {
setExtent([projExtent[0] - 10000, -10000, projExtent[2] - 10000, 10000]);
renderer.prepareFrame(frameState);
expect(renderer.replayGroup_.maxExtent_).to.eql(bufferExtent([
projExtent[0] - worldWidth + buffer,
-10000, projExtent[2] + worldWidth - buffer, 10000
], buffer));
expect(renderer.replayGroup_.maxExtent_).to.eql(
bufferExtent(
[
projExtent[0] - worldWidth + buffer,
-10000,
projExtent[2] + worldWidth - buffer,
10000,
],
buffer
)
);
expect(loadExtents.length).to.be(2);
expect(loadExtents[0]).to.eql(bufferExtent(frameState.extent, buffer));
const otherExtent = [projExtent[0] - 10000 + worldWidth, -10000, projExtent[2] - 10000 + worldWidth, 10000];
const otherExtent = [
projExtent[0] - 10000 + worldWidth,
-10000,
projExtent[2] - 10000 + worldWidth,
10000,
];
expect(loadExtents[1]).to.eql(bufferExtent(otherExtent, buffer));
});
it('sets correct extent for viewport more than 1 world wide', function() {
setExtent([2 * projExtent[0] + 10000, -10000, 2 * projExtent[2] - 10000, 10000]);
it('sets correct extent for viewport more than 1 world wide', function () {
setExtent([
2 * projExtent[0] + 10000,
-10000,
2 * projExtent[2] - 10000,
10000,
]);
renderer.prepareFrame(frameState);
expect(renderer.replayGroup_.maxExtent_).to.eql(bufferExtent([
projExtent[0] - worldWidth + buffer,
-10000, projExtent[2] + worldWidth - buffer, 10000
], buffer));
expect(renderer.replayGroup_.maxExtent_).to.eql(
bufferExtent(
[
projExtent[0] - worldWidth + buffer,
-10000,
projExtent[2] + worldWidth - buffer,
10000,
],
buffer
)
);
expect(loadExtents.length).to.be(1);
expect(loadExtents[0]).to.eql(bufferExtent(frameState.extent, buffer));
});
it('sets correct extent for viewport more than 2 worlds wide, one world away', function() {
setExtent([projExtent[0] - 2 * worldWidth - 10000,
-10000, projExtent[0] + 2 * worldWidth + 10000, 10000
it('sets correct extent for viewport more than 2 worlds wide, one world away', function () {
setExtent([
projExtent[0] - 2 * worldWidth - 10000,
-10000,
projExtent[0] + 2 * worldWidth + 10000,
10000,
]);
renderer.prepareFrame(frameState);
expect(renderer.replayGroup_.maxExtent_).to.eql(bufferExtent([
projExtent[0] - 2 * worldWidth - 10000,
-10000, projExtent[2] + 2 * worldWidth + 10000, 10000
], buffer));
expect(renderer.replayGroup_.maxExtent_).to.eql(
bufferExtent(
[
projExtent[0] - 2 * worldWidth - 10000,
-10000,
projExtent[2] + 2 * worldWidth + 10000,
10000,
],
buffer
)
);
expect(loadExtents.length).to.be(1);
const normalizedExtent = [projExtent[0] - 2 * worldWidth + worldWidth - 10000, -10000, projExtent[0] + 2 * worldWidth + worldWidth + 10000, 10000];
const normalizedExtent = [
projExtent[0] - 2 * worldWidth + worldWidth - 10000,
-10000,
projExtent[0] + 2 * worldWidth + worldWidth + 10000,
10000,
];
expect(loadExtents[0]).to.eql(bufferExtent(normalizedExtent, buffer));
});
it('sets correct extent for small viewport, one world away', function() {
it('sets correct extent for small viewport, one world away', function () {
setExtent([-worldWidth - 10000, -10000, -worldWidth + 10000, 10000]);
renderer.prepareFrame(frameState);
expect(renderer.replayGroup_.maxExtent_).to.eql(bufferExtent([
projExtent[0] - worldWidth + buffer,
-10000, projExtent[2] + worldWidth - buffer, 10000
], buffer));
expect(renderer.replayGroup_.maxExtent_).to.eql(
bufferExtent(
[
projExtent[0] - worldWidth + buffer,
-10000,
projExtent[2] + worldWidth - buffer,
10000,
],
buffer
)
);
expect(loadExtents.length).to.be(1);
const normalizedExtent = [-10000, -10000, 10000, 10000];
expect(loadExtents[0]).to.eql(bufferExtent(normalizedExtent, buffer));
});
it('sets replayGroupChanged correctly', function() {
it('sets replayGroupChanged correctly', function () {
setExtent([-10000, -10000, 10000, 10000]);
renderer.prepareFrame(frameState);
expect(renderer.replayGroupChanged).to.be(true);
@@ -332,10 +399,10 @@ describe('ol.renderer.canvas.VectorLayer', function() {
expect(renderer.replayGroupChanged).to.be(false);
});
it('dispatches a postrender event when rendering', function(done) {
it('dispatches a postrender event when rendering', function (done) {
const layer = renderer.getLayer();
layer.getSource().addFeature(new Feature(new Point([0, 0])));
layer.once('postrender', function() {
layer.once('postrender', function () {
expect(true);
done();
});
@@ -351,12 +418,10 @@ describe('ol.renderer.canvas.VectorLayer', function() {
}
expect(rendered).to.be(true);
});
});
describe('hit detection', function() {
it('with no fill and transparent fill', function() {
describe('hit detection', function () {
it('with no fill and transparent fill', function () {
const target = document.createElement('div');
target.style.width = '300px';
target.style.height = '300px';
@@ -365,101 +430,101 @@ describe('ol.renderer.canvas.VectorLayer', function() {
transparent: new Style({
stroke: new Stroke({
color: 'blue',
width: 3
width: 3,
}),
fill: new Fill({
color: 'transparent'
color: 'transparent',
}),
image: new CircleStyle({
radius: 30,
stroke: new Stroke({
color: 'blue',
width: 3
width: 3,
}),
fill: new Fill({
color: 'transparent'
})
})
color: 'transparent',
}),
}),
}),
none: new Style({
stroke: new Stroke({
color: 'blue',
width: 3
width: 3,
}),
image: new CircleStyle({
radius: 30,
stroke: new Stroke({
color: 'blue',
width: 3
})
})
})
width: 3,
}),
}),
}),
};
const source = new VectorSource({
features: [
new Feature({
geometry: fromExtent([0, 10, 3, 13]),
fillType: 'none'
fillType: 'none',
}),
new Feature({
geometry: fromExtent([1, 11, 4, 14]),
fillType: 'none'
fillType: 'none',
}),
new Feature({
geometry: fromExtent([5, 10, 8, 13]),
fillType: 'transparent'
fillType: 'transparent',
}),
new Feature({
geometry: fromExtent([6, 11, 9, 14]),
fillType: 'transparent'
fillType: 'transparent',
}),
new Feature({
geometry: new Circle([1.5, 6.5], 1.5),
fillType: 'none'
fillType: 'none',
}),
new Feature({
geometry: new Circle([2.5, 7.5], 1.5),
fillType: 'none'
fillType: 'none',
}),
new Feature({
geometry: new Circle([6.5, 6.5], 1.5),
fillType: 'transparent'
fillType: 'transparent',
}),
new Feature({
geometry: new Circle([7.5, 7.5], 1.5),
fillType: 'transparent'
fillType: 'transparent',
}),
new Feature({
geometry: new Point([1.5, 1.5]),
fillType: 'none'
fillType: 'none',
}),
new Feature({
geometry: new Point([2.5, 2.5]),
fillType: 'none'
fillType: 'none',
}),
new Feature({
geometry: new Point([6.5, 1.5]),
fillType: 'transparent'
fillType: 'transparent',
}),
new Feature({
geometry: new Point([7.5, 2.5]),
fillType: 'transparent'
})
]
fillType: 'transparent',
}),
],
});
const layer = new VectorLayer({
source: source,
style: function(feature, resolution) {
style: function (feature, resolution) {
return styles[feature.get('fillType')];
}
},
});
const map = new Map({
layers: [layer],
view: new View({
center: [4.5, 7],
resolution: 0.05
resolution: 0.05,
}),
target: target
target: target,
});
map.renderSync();
@@ -568,7 +633,5 @@ describe('ol.renderer.canvas.VectorLayer', function() {
document.body.removeChild(target);
});
});
});
test/spec/ol/renderer/canvas/vectortilelayer.test.js
+160 -118
View File
@@ -1,41 +1,46 @@
import CanvasVectorTileLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorTileLayer.js';
import Feature from '../../../../../src/ol/Feature.js';
import MVT from '../../../../../src/ol/format/MVT.js';
import Map from '../../../../../src/ol/Map.js';
import Point from '../../../../../src/ol/geom/Point.js';
import RenderFeature from '../../../../../src/ol/render/Feature.js';
import Style from '../../../../../src/ol/style/Style.js';
import Text from '../../../../../src/ol/style/Text.js';
import TileLayer from '../../../../../src/ol/layer/Tile.js';
import TileState from '../../../../../src/ol/TileState.js';
import VectorRenderTile from '../../../../../src/ol/VectorRenderTile.js';
import VectorTile from '../../../../../src/ol/VectorTile.js';
import View from '../../../../../src/ol/View.js';
import {getCenter} from '../../../../../src/ol/extent.js';
import MVT from '../../../../../src/ol/format/MVT.js';
import Point from '../../../../../src/ol/geom/Point.js';
import VectorTileLayer from '../../../../../src/ol/layer/VectorTile.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
import RenderFeature from '../../../../../src/ol/render/Feature.js';
import CanvasVectorTileLayerRenderer from '../../../../../src/ol/renderer/canvas/VectorTileLayer.js';
import VectorTileSource from '../../../../../src/ol/source/VectorTile.js';
import Style from '../../../../../src/ol/style/Style.js';
import Text from '../../../../../src/ol/style/Text.js';
import {createXYZ} from '../../../../../src/ol/tilegrid.js';
import VectorTileRenderType from '../../../../../src/ol/layer/VectorTileRenderType.js';
import {getUid} from '../../../../../src/ol/util.js';
import TileLayer from '../../../../../src/ol/layer/Tile.js';
import VectorTileSource from '../../../../../src/ol/source/VectorTile.js';
import View from '../../../../../src/ol/View.js';
import XYZ from '../../../../../src/ol/source/XYZ.js';
import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
import {create} from '../../../../../src/ol/transform.js';
import {createXYZ} from '../../../../../src/ol/tilegrid.js';
import {getCenter} from '../../../../../src/ol/extent.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
import {getUid} from '../../../../../src/ol/util.js';
describe('ol.renderer.canvas.VectorTileLayer', function() {
describe('constructor', function() {
describe('ol.renderer.canvas.VectorTileLayer', function () {
describe('constructor', function () {
const head = document.getElementsByTagName('head')[0];
const font = document.createElement('link');
font.href = 'https://fonts.googleapis.com/css?family=Dancing+Script';
font.rel = 'stylesheet';
let map, layer, layerStyle, source, feature1, feature2, feature3, target, tileCallback;
let map,
layer,
layerStyle,
source,
feature1,
feature2,
feature3,
target,
tileCallback;
beforeEach(function() {
tileCallback = function() {};
beforeEach(function () {
tileCallback = function () {};
target = document.createElement('div');
target.style.width = '256px';
target.style.height = '256px';
@@ -44,20 +49,24 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
pixelRatio: 1,
view: new View({
center: [0, 0],
zoom: 0
zoom: 0,
}),
target: target
target: target,
});
layerStyle = [new Style({
text: new Text({
text: 'layer'
})
})];
const featureStyle = [new Style({
text: new Text({
text: 'feature'
})
})];
layerStyle = [
new Style({
text: new Text({
text: 'layer',
}),
}),
];
const featureStyle = [
new Style({
text: new Text({
text: 'feature',
}),
}),
];
feature1 = new Feature(new Point([1, -1]));
feature2 = new Feature(new Point([0, 0]));
feature3 = new RenderFeature('Point', [1, -1], []);
@@ -74,14 +83,17 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
format: new MVT(),
tileClass: TileClass,
tileGrid: createXYZ(),
url: '{z}/{x}/{y}.pbf'
url: '{z}/{x}/{y}.pbf',
});
source.getSourceTiles = function() {
source.getSourceTiles = function () {
return [new TileClass([0, 0, 0])];
};
source.getTile = function() {
const tile = VectorTileSource.prototype.getTile.apply(source, arguments);
tile.hasContext = function() {
source.getTile = function () {
const tile = VectorTileSource.prototype.getTile.apply(
source,
arguments
);
tile.hasContext = function () {
return true;
};
tile.setState(TileState.LOADED);
@@ -89,58 +101,65 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
};
layer = new VectorTileLayer({
source: source,
style: layerStyle
style: layerStyle,
});
map.addLayer(layer);
});
afterEach(function() {
afterEach(function () {
document.body.removeChild(target);
map.dispose();
});
it('creates a new instance', function() {
it('creates a new instance', function () {
const renderer = new CanvasVectorTileLayerRenderer(layer);
expect(renderer).to.be.a(CanvasVectorTileLayerRenderer);
expect(renderer.getLayer()).to.equal(layer);
});
it('does not render replays for pure image rendering', function() {
it('does not render replays for pure image rendering', function () {
const testLayer = new VectorTileLayer({
renderMode: VectorTileRenderType.IMAGE,
source: source,
style: layerStyle
style: layerStyle,
});
map.removeLayer(layer);
map.addLayer(testLayer);
const spy = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
'getRenderTransform');
const spy = sinon.spy(
CanvasVectorTileLayerRenderer.prototype,
'getRenderTransform'
);
map.renderSync();
expect(spy.callCount).to.be(0);
spy.restore();
});
it('does not render images for pure vector rendering', function() {
it('does not render images for pure vector rendering', function () {
const testLayer = new VectorTileLayer({
renderMode: VectorTileRenderType.VECTOR,
source: source,
style: layerStyle
style: layerStyle,
});
map.removeLayer(layer);
map.addLayer(testLayer);
const spy = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
'renderTileImage_');
const spy = sinon.spy(
CanvasVectorTileLayerRenderer.prototype,
'renderTileImage_'
);
map.renderSync();
expect(spy.callCount).to.be(0);
spy.restore();
});
it('renders both replays and images for hybrid rendering', function() {
const spy1 = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
'getRenderTransform');
const spy2 = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
'renderTileImage_');
it('renders both replays and images for hybrid rendering', function () {
const spy1 = sinon.spy(
CanvasVectorTileLayerRenderer.prototype,
'getRenderTransform'
);
const spy2 = sinon.spy(
CanvasVectorTileLayerRenderer.prototype,
'renderTileImage_'
);
map.renderSync();
expect(spy1.callCount).to.be(1);
expect(spy2.callCount).to.be(1);
@@ -148,72 +167,75 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
spy2.restore();
});
it('renders replays with custom renderers as direct replays', function() {
layer.setStyle(new Style({
renderer: function() {}
}));
const spy = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
'getRenderTransform');
it('renders replays with custom renderers as direct replays', function () {
layer.setStyle(
new Style({
renderer: function () {},
})
);
const spy = sinon.spy(
CanvasVectorTileLayerRenderer.prototype,
'getRenderTransform'
);
map.renderSync();
expect(spy.callCount).to.be(1);
spy.restore();
});
it('gives precedence to feature styles over layer styles', function() {
const spy = sinon.spy(layer.getRenderer(),
'renderFeature');
it('gives precedence to feature styles over layer styles', function () {
const spy = sinon.spy(layer.getRenderer(), 'renderFeature');
map.renderSync();
expect(spy.getCall(0).args[2]).to.be(layer.getStyle());
expect(spy.getCall(1).args[2]).to.be(feature2.getStyle());
spy.restore();
});
it('does not re-render for unavailable fonts', function(done) {
it('does not re-render for unavailable fonts', function (done) {
map.renderSync();
checkedFonts.values_ = {};
layerStyle[0].getText().setFont('12px "Unavailable font",sans-serif');
layer.changed();
const revision = layer.getRevision();
setTimeout(function() {
setTimeout(function () {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('does not re-render for available fonts', function(done) {
it('does not re-render for available fonts', function (done) {
map.renderSync();
checkedFonts.values_ = {};
layerStyle[0].getText().setFont('12px sans-serif');
layer.changed();
const revision = layer.getRevision();
setTimeout(function() {
setTimeout(function () {
expect(layer.getRevision()).to.be(revision);
done();
}, 800);
});
it('re-renders for fonts that become available', function(done) {
it('re-renders for fonts that become available', function (done) {
map.renderSync();
checkedFonts.values_ = {};
head.appendChild(font);
layerStyle[0].getText().setFont('12px "Dancing Script",sans-serif');
layer.changed();
const revision = layer.getRevision();
setTimeout(function() {
setTimeout(function () {
head.removeChild(font);
expect(layer.getRevision()).to.be(revision + 1);
done();
}, 1600);
});
it('works for multiple layers that use the same source', function() {
it('works for multiple layers that use the same source', function () {
const layer2 = new VectorTileLayer({
source: source,
style: new Style({
text: new Text({
text: 'layer2'
})
})
text: 'layer2',
}),
}),
});
map.addLayer(layer2);
@@ -223,13 +245,16 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
expect(Object.keys(tile.executorGroups)[1]).to.be(getUid(layer2));
});
it('reuses render container and adds and removes overlay context', function(done) {
map.getLayers().insertAt(0, new TileLayer({
source: new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
it('reuses render container and adds and removes overlay context', function (done) {
map.getLayers().insertAt(
0,
new TileLayer({
source: new XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
}),
})
}));
map.once('rendercomplete', function() {
);
map.once('rendercomplete', function () {
expect(document.querySelector('.ol-layers').childElementCount).to.be(1);
expect(document.querySelector('.ol-layer').childElementCount).to.be(1);
map.removeLayer(map.getLayers().item(1));
@@ -238,33 +263,31 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
done();
});
});
});
describe('#prepareFrame', function() {
it('re-renders when layer changed', function() {
describe('#prepareFrame', function () {
it('re-renders when layer changed', function () {
const layer = new VectorTileLayer({
source: new VectorTileSource({
tileGrid: createXYZ(),
transition: 0
})
transition: 0,
}),
});
const sourceTile = new VectorTile([0, 0, 0], 2);
sourceTile.features_ = [];
sourceTile.getImage = function() {
sourceTile.getImage = function () {
return document.createElement('canvas');
};
const tile = new VectorRenderTile([0, 0, 0], 1, [0, 0, 0],
function() {
return sourceTile;
});
const tile = new VectorRenderTile([0, 0, 0], 1, [0, 0, 0], function () {
return sourceTile;
});
tile.transition_ = 0;
tile.setState(TileState.LOADED);
layer.getSource().getTile = function() {
layer.getSource().getTile = function () {
return tile;
};
const renderer = new CanvasVectorTileLayerRenderer(layer);
renderer.isDrawableTile = function() {
renderer.isDrawableTile = function () {
return true;
};
const proj = getProjection('EPSG:3857');
@@ -279,11 +302,11 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
viewState: {
center: [0, 0],
resolution: 156543.03392804097,
projection: proj
projection: proj,
},
size: [256, 256],
usedTiles: {},
wantedTiles: {}
wantedTiles: {},
};
renderer.renderFrame(frameState);
const replayState = renderer.renderedTiles[0].getReplayState(layer);
@@ -297,7 +320,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
});
});
describe('#forEachFeatureAtCoordinate', function() {
describe('#forEachFeatureAtCoordinate', function () {
let layer, renderer, executorGroup, source;
class TileClass extends VectorRenderTile {
constructor() {
@@ -307,34 +330,42 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
}
}
beforeEach(function() {
beforeEach(function () {
const sourceTile = new VectorTile([0, 0, 0]);
sourceTile.setState(TileState.LOADED);
source = new VectorTileSource({
tileClass: TileClass,
tileGrid: createXYZ()
tileGrid: createXYZ(),
});
source.sourceTileCache.set('0/0/0.mvt', sourceTile);
executorGroup = {};
source.getTile = function() {
const tile = VectorTileSource.prototype.getTile.apply(source, arguments);
source.getTile = function () {
const tile = VectorTileSource.prototype.getTile.apply(
source,
arguments
);
tile.sourceTiles = [sourceTile];
tile.executorGroups[getUid(layer)] = [executorGroup];
return tile;
};
layer = new VectorTileLayer({
source: source
source: source,
});
renderer = new CanvasVectorTileLayerRenderer(layer);
executorGroup.forEachFeatureAtCoordinate = function(coordinate,
resolution, rotation, hitTolerance, callback) {
executorGroup.forEachFeatureAtCoordinate = function (
coordinate,
resolution,
rotation,
hitTolerance,
callback
) {
const feature = new Feature();
callback(feature);
callback(feature);
};
});
it('calls callback once per feature with a layer as 2nd arg', function() {
it('calls callback once per feature with a layer as 2nd arg', function () {
const spy = sinon.spy();
const coordinate = [0, 0];
const frameState = {
@@ -342,43 +373,55 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
viewState: {
projection: getProjection('EPSG:3857'),
resolution: 1,
rotation: 0
}
rotation: 0,
},
};
renderer.renderedTiles = [source.getTile(0, 0, 0, 1, getProjection('EPSG:3857'))];
renderer.renderedTiles = [
source.getTile(0, 0, 0, 1, getProjection('EPSG:3857')),
];
renderer.forEachFeatureAtCoordinate(
coordinate, frameState, 0, spy, undefined);
coordinate,
frameState,
0,
spy,
undefined
);
expect(spy.callCount).to.be(1);
expect(spy.getCall(0).args[1]).to.equal(layer);
});
it('does not give false positives when overzoomed', function(done) {
it('does not give false positives when overzoomed', function (done) {
const target = document.createElement('div');
target.style.width = '100px';
target.style.height = '100px';
document.body.appendChild(target);
const extent = [1824704.739223726, 6141868.096770482, 1827150.7241288517, 6144314.081675608];
const extent = [
1824704.739223726,
6141868.096770482,
1827150.7241288517,
6144314.081675608,
];
const source = new VectorTileSource({
format: new MVT(),
url: 'spec/ol/data/14-8938-5680.vector.pbf',
minZoom: 14,
maxZoom: 14
maxZoom: 14,
});
const map = new Map({
target: target,
layers: [
new VectorTileLayer({
extent: extent,
source: source
})
source: source,
}),
],
view: new View({
center: getCenter(extent),
zoom: 19
})
zoom: 19,
}),
});
source.on('tileloadend', function() {
setTimeout(function() {
source.on('tileloadend', function () {
setTimeout(function () {
const features = map.getFeaturesAtPixel([96, 96]);
document.body.removeChild(target);
map.dispose();
@@ -388,6 +431,5 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
}, 200);
});
});
});
});