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

Merge pull request #8926 from gberaudo/replay_refactoring

Browse Source 
Uncouple replay creation and rendering
This commit is contained in:
Andreas Hocevar
2018-11-16 13:54:18 +01:00
committed by GitHub
parent 9937fd5963 8d51e0d487
commit 36cf7227c0
22 changed files with 1672 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/spec/ol/render/canvas/replaygroup.test.js
View File

@@ -1,4 +1,4 @@
import {getCircleArray} from '../../../../../src/ol/render/canvas/ReplayGroup.js';
import {getCircleArray} from '../../../../../src/ol/render/canvas/BuilderGroup.js';
describe('ol.render.canvas.ReplayGroup', function() {

69
test/spec/ol/render/canvas/textreplay.test.js
View File

@@ -1,48 +1,87 @@
import Feature from '../../../../../src/ol/Feature.js';
import MultiPolygon from '../../../../../src/ol/geom/MultiPolygon.js';
import Polygon from '../../../../../src/ol/geom/Polygon.js';
import CanvasTextReplay from '../../../../../src/ol/render/canvas/TextReplay.js';
import CanvasTextReplay from '../../../../../src/ol/render/canvas/TextBuilder.js';
import InstructionExecutor from '../../../../../src/ol/render/canvas/Executor.js';
import Text from '../../../../../src/ol/style/Text.js';
import {create as createTransform} from '../../../../../src/ol/transform.js';
function createBuilder() {
return new CanvasTextReplay(1, [-180, -90, 180, 90], 0.02, 1, true);
}
function createContext() {
return {
fill: function() {},
stroke: function() {},
beginPath: function() {},
clip: function() {},
moveTo: function() {},
lineTo: function() {},
closePath: function() {},
setLineDash: function() {},
save: function() {},
restore: function() {}
};
}
function executeInstructions(builder, expectedDrawTextImageCalls, expectedReplayImageCalls) {
const transform = createTransform();
const context = createContext();
const executor = new InstructionExecutor(1, [-180, -90, 180, 90], 0.02, 1, false, null, builder.finish());
sinon.spy(executor, 'drawTextImageWithPointPlacement_');
const replayImageStub = sinon.stub(executor, 'replayImage_');
executor.execute(context, transform);
expect(executor.drawTextImageWithPointPlacement_.callCount).to.be(expectedDrawTextImageCalls);
expect(replayImageStub.callCount).to.be(expectedReplayImageCalls);
}
describe('ol.render.canvas.TextReplay', function() {
it('renders polygon labels only when they fit', function() {
const replay = new CanvasTextReplay(1, [-180, -90, 180, 90], 0.02, 1, true);
let builder = createBuilder();
const geometry = new Polygon([[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]]);
const feature = new Feature(geometry);
replay.setTextStyle(new Text({
builder.setTextStyle(new Text({
text: 'This is a long text'
}));
replay.drawText(geometry, feature);
expect(replay.instructions.length).to.be(0);
builder.drawText(geometry, feature);
expect(builder.instructions.length).to.be(3);
executeInstructions(builder, 1, 0);
replay.setTextStyle(new Text({
builder = createBuilder();
builder.setTextStyle(new Text({
text: 'short'
}));
replay.drawText(geometry, feature);
expect(replay.instructions.length).to.be(3);
builder.drawText(geometry, feature);
expect(builder.instructions.length).to.be(3);
executeInstructions(builder, 1, 1);
});
it('renders multipolygon labels only when they fit', function() {
const replay = new CanvasTextReplay(1, [-180, -90, 180, 90], 0.02, 1, true);
const geometry = new MultiPolygon([
[[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]],
[[[1, 1], [1, 2], [2, 2], [2, 1], [1, 1]]]
]);
const feature = new Feature(geometry);
replay.setTextStyle(new Text({
let builder = createBuilder();
builder.setTextStyle(new Text({
text: 'This is a long text'
}));
replay.drawText(geometry, feature);
expect(replay.instructions.length).to.be(0);
builder.drawText(geometry, feature);
expect(builder.instructions.length).to.be(3);
executeInstructions(builder, 1, 0);
replay.setTextStyle(new Text({
builder = createBuilder();
builder.setTextStyle(new Text({
text: 'short'
}));
replay.drawText(geometry, feature);
expect(replay.instructions.length).to.be(3);
builder.drawText(geometry, feature);
expect(builder.instructions.length).to.be(3);
executeInstructions(builder, 1, 2);
});
});

125
test/spec/ol/renderer/canvas/replay.test.js
View File

@@ -7,10 +7,11 @@ 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 CanvasLineStringReplay from '../../../../../src/ol/render/canvas/LineStringReplay.js';
import CanvasPolygonReplay from '../../../../../src/ol/render/canvas/PolygonReplay.js';
import CanvasReplay from '../../../../../src/ol/render/canvas/Replay.js';
import CanvasReplayGroup from '../../../../../src/ol/render/canvas/ReplayGroup.js';
import CanvasLineStringBuilder from '../../../../../src/ol/render/canvas/LineStringBuilder.js';
import CanvasPolygonBuilder from '../../../../../src/ol/render/canvas/PolygonBuilder.js';
import CanvasReplay from '../../../../../src/ol/render/canvas/Builder.js';
import CanvasInstructionsGroupBuilder from '../../../../../src/ol/render/canvas/BuilderGroup.js';
import CanvasInstructionsGroupExecutor 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';
@@ -21,14 +22,26 @@ describe('ol.render.canvas.ReplayGroup', function() {
describe('#replay', function() {
let context, replay, fillCount, transform;
let context, builder, fillCount, transform;
let strokeCount, beginPathCount, moveToCount, lineToCount;
let feature0, feature1, feature2, feature3;
let fill0, fill1, style1, style2;
/**
* @param {CanvasInstructionsGroupBuilder} builder The builder to get instructions from.
* @param {Object=} skippedUids The ids to skip.
* @param {number=} pixelRatio The pixel ratio.
* @param {boolean=} overlaps Whether there is overlaps.
*/
function execute(builder, skippedUids, pixelRatio, overlaps) {
const executor = new CanvasInstructionsGroupExecutor(1, [-180, -90, 180, 90], 1,
pixelRatio || 1, !!overlaps, null, builder.finish());
executor.execute(context, transform, 0, skippedUids || {});
}
beforeEach(function() {
transform = createTransform();
replay = new CanvasReplayGroup(1, [-180, -90, 180, 90], 1, 1, false);
builder = new CanvasInstructionsGroupBuilder(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(
@@ -88,95 +101,95 @@ describe('ol.render.canvas.ReplayGroup', function() {
});
it('omits lineTo for repeated coordinates', function() {
renderFeature(replay, feature0, fill0, 1);
replay.replay(context, transform, 0, {});
renderFeature(builder, feature0, fill0, 1);
execute(builder);
expect(lineToCount).to.be(4);
lineToCount = 0;
scaleTransform(transform, 0.25, 0.25);
replay.replay(context, transform, 0, {});
execute(builder);
expect(lineToCount).to.be(3);
});
it('does not omit moveTo for repeated coordinates', function() {
renderFeature(replay, feature0, fill0, 1);
renderFeature(replay, feature1, fill1, 1);
replay.replay(context, transform, 0, {});
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() {
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style1, 1);
renderFeature(replay, feature3, style1, 1);
replay.replay(context, transform, 0, {});
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style1, 1);
execute(builder);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('batches fill and stroke instructions for different styles', function() {
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style1, 1);
renderFeature(replay, feature3, style2, 1);
replay.replay(context, transform, 0, {});
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style2, 1);
execute(builder);
expect(fillCount).to.be(2);
expect(strokeCount).to.be(2);
expect(beginPathCount).to.be(2);
});
it('batches fill and stroke instructions for changing styles', function() {
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style2, 1);
renderFeature(replay, feature3, style1, 1);
replay.replay(context, transform, 0, {});
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style2, 1);
renderFeature(builder, feature3, style1, 1);
execute(builder);
expect(fillCount).to.be(3);
expect(strokeCount).to.be(3);
expect(beginPathCount).to.be(3);
});
it('batches fill and stroke instructions for skipped feature at the beginning', function() {
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style2, 1);
renderFeature(replay, feature3, style2, 1);
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style2, 1);
renderFeature(builder, feature3, style2, 1);
const skippedUids = {};
skippedUids[getUid(feature1)] = true;
replay.replay(context, transform, 0, skippedUids);
execute(builder, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('batches fill and stroke instructions for skipped feature at the end', function() {
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style1, 1);
renderFeature(replay, feature3, style2, 1);
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style2, 1);
const skippedUids = {};
skippedUids[getUid(feature3)] = true;
replay.replay(context, transform, 0, skippedUids);
execute(builder, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('batches fill and stroke instructions for skipped features', function() {
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style1, 1);
renderFeature(replay, feature3, style2, 1);
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style2, 1);
const skippedUids = {};
skippedUids[getUid(feature1)] = true;
skippedUids[getUid(feature2)] = true;
replay.replay(context, transform, 0, skippedUids);
execute(builder, skippedUids);
expect(fillCount).to.be(1);
expect(strokeCount).to.be(1);
expect(beginPathCount).to.be(1);
});
it('does not batch when overlaps is set to true', function() {
replay = new CanvasReplayGroup(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(replay, feature1, style1, 1);
renderFeature(replay, feature2, style1, 1);
renderFeature(replay, feature3, style1, 1);
replay.replay(context, transform, 0, {});
builder = new CanvasInstructionsGroupBuilder(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(builder, feature1, style1, 1);
renderFeature(builder, feature2, style1, 1);
renderFeature(builder, feature3, style1, 1);
execute(builder, {}, 1, true);
expect(fillCount).to.be(3);
expect(strokeCount).to.be(3);
expect(beginPathCount).to.be(3);
@@ -184,7 +197,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
it('applies the pixelRatio to the linedash array and offset', function() {
// replay with a pixelRatio of 2
replay = new CanvasReplayGroup(1, [-180, -90, 180, 90], 1, 2, true);
builder = new CanvasInstructionsGroupBuilder(1, [-180, -90, 180, 90], 1, 2, true);
let lineDash, lineDashCount = 0,
lineDashOffset, lineDashOffsetCount = 0;
@@ -201,9 +214,9 @@ describe('ol.render.canvas.ReplayGroup', function() {
}
});
renderFeature(replay, feature1, style2, 1);
renderFeature(replay, feature2, style2, 1);
replay.replay(context, transform, 0, {});
renderFeature(builder, feature1, style2, 1);
renderFeature(builder, feature2, style2, 1);
execute(builder, {}, 2, true);
expect(lineDashCount).to.be(1);
expect(style2.getStroke().getLineDash()).to.eql([3, 6]);
@@ -241,16 +254,16 @@ describe('ol.render.canvas.ReplayGroup', function() {
[polygon.getGeometry().getCoordinates(), polygon.getGeometry().getCoordinates()]));
const geometrycollection = new Feature(new GeometryCollection(
[point.getGeometry(), linestring.getGeometry(), polygon.getGeometry()]));
replay = new CanvasReplayGroup(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(replay, point, style, 1);
renderFeature(replay, multipoint, style, 1);
renderFeature(replay, linestring, style, 1);
renderFeature(replay, multilinestring, style, 1);
renderFeature(replay, polygon, style, 1);
renderFeature(replay, multipolygon, style, 1);
renderFeature(replay, geometrycollection, style, 1);
builder = new CanvasInstructionsGroupBuilder(1, [-180, -90, 180, 90], 1, 1, true);
renderFeature(builder, point, style, 1);
renderFeature(builder, multipoint, style, 1);
renderFeature(builder, linestring, style, 1);
renderFeature(builder, multilinestring, style, 1);
renderFeature(builder, polygon, style, 1);
renderFeature(builder, multipolygon, style, 1);
renderFeature(builder, geometrycollection, style, 1);
scaleTransform(transform, 0.1, 0.1);
replay.replay(context, transform, 0, {});
execute(builder, {}, 1, true);
expect(calls.length).to.be(9);
expect(calls[0].geometry).to.be(point.getGeometry());
expect(calls[0].feature).to.be(point);
@@ -446,7 +459,7 @@ describe('ol.render.canvas.LineStringReplay', function() {
const tolerance = 1;
const extent = [-180, -90, 180, 90];
const resolution = 10;
const replay = new CanvasLineStringReplay(tolerance, extent,
const replay = new CanvasLineStringBuilder(tolerance, extent,
resolution);
const stroke = new Stroke({
width: 2
@@ -468,7 +481,7 @@ describe('ol.render.canvas.PolygonReplay', function() {
const tolerance = 1;
const extent = [-180, -90, 180, 90];
const resolution = 10;
replay = new CanvasPolygonReplay(tolerance, extent,
replay = new CanvasPolygonBuilder(tolerance, extent,
resolution);
});

16
test/spec/ol/renderer/canvas/vectortilelayer.test.js
View File

@@ -241,10 +241,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
});
map.addLayer(layer2);
const spy1 = sinon.spy(VectorTile.prototype,
'getReplayGroup');
const spy2 = sinon.spy(VectorTile.prototype,
'setReplayGroup');
const spy1 = sinon.spy(VectorTile.prototype, 'getExecutorGroup');
const spy2 = sinon.spy(VectorTile.prototype, 'setExecutorGroup');
map.renderSync();
expect(spy1.callCount).to.be(4);
expect(spy2.callCount).to.be(2);
@@ -308,7 +306,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
});
describe('#forEachFeatureAtCoordinate', function() {
let layer, renderer, replayGroup;
let layer, renderer, executorGroup;
class TileClass extends VectorImageTile {
constructor() {
super(...arguments);
@@ -317,8 +315,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
const sourceTile = new VectorTile([0, 0, 0]);
sourceTile.setState(TileState.LOADED);
sourceTile.setProjection(getProjection('EPSG:3857'));
sourceTile.getReplayGroup = function() {
return replayGroup;
sourceTile.getExecutorGroup = function() {
return executorGroup;
};
const key = sourceTile.tileCoord.toString();
this.tileKeys = [key];
@@ -329,7 +327,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
}
beforeEach(function() {
replayGroup = {};
executorGroup = {};
layer = new VectorTileLayer({
source: new VectorTileSource({
tileClass: TileClass,
@@ -337,7 +335,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
})
});
renderer = new CanvasVectorTileLayerRenderer(layer);
replayGroup.forEachFeatureAtCoordinate = function(coordinate,
executorGroup.forEachFeatureAtCoordinate = function(coordinate,
resolution, rotation, hitTolerance, skippedFeaturesUids, callback) {
const feature = new Feature();
callback(feature);

34
test/spec/ol/renderer/vector.test.js
View File

@@ -6,7 +6,7 @@ import Polygon from '../../../../src/ol/geom/Polygon.js';
import MultiLineString from '../../../../src/ol/geom/MultiLineString.js';
import MultiPoint from '../../../../src/ol/geom/MultiPoint.js';
import MultiPolygon from '../../../../src/ol/geom/MultiPolygon.js';
import CanvasReplayGroup from '../../../../src/ol/render/canvas/ReplayGroup.js';
import CanvasBuilderGroup from '../../../../src/ol/render/canvas/BuilderGroup.js';
import {renderFeature} from '../../../../src/ol/renderer/vector.js';
import Fill from '../../../../src/ol/style/Fill.js';
import Icon from '../../../../src/ol/style/Icon.js';
@@ -17,12 +17,12 @@ import Feature from '../../../../src/ol/Feature.js';
describe('ol.renderer.vector', function() {
describe('#renderFeature', function() {
let replayGroup;
let builderGroup;
let feature, iconStyle, style, squaredTolerance, listener, listenerThis;
let iconStyleLoadSpy;
beforeEach(function() {
replayGroup = new CanvasReplayGroup(1);
builderGroup = new CanvasBuilderGroup(1);
feature = new Feature();
iconStyle = new Icon({
src: 'http://example.com/icon.png'
@@ -50,7 +50,7 @@ describe('ol.renderer.vector', function() {
let listeners;
// call #1
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(iconStyleLoadSpy.calledOnce).to.be.ok();
@@ -59,7 +59,7 @@ describe('ol.renderer.vector', function() {
expect(listeners.length).to.eql(1);
// call #2
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(iconStyleLoadSpy.calledOnce).to.be.ok();
@@ -74,11 +74,11 @@ describe('ol.renderer.vector', function() {
it('does not render the point', function() {
feature.setGeometry(new Point([0, 0]));
const imageReplay = replayGroup.getReplay(
const imageReplay = builderGroup.getBuilder(
style.getZIndex(), 'Image');
const setImageStyleSpy = sinon.spy(imageReplay, 'setImageStyle');
const drawPointSpy = sinon.stub(imageReplay, 'drawPoint').callsFake(VOID);
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setImageStyleSpy.called).to.be(false);
setImageStyleSpy.restore();
@@ -87,11 +87,11 @@ describe('ol.renderer.vector', function() {
it('does not render the multipoint', function() {
feature.setGeometry(new MultiPoint([[0, 0], [1, 1]]));
const imageReplay = replayGroup.getReplay(
const imageReplay = builderGroup.getBuilder(
style.getZIndex(), 'Image');
const setImageStyleSpy = sinon.spy(imageReplay, 'setImageStyle');
const drawMultiPointSpy = sinon.stub(imageReplay, 'drawMultiPoint').callsFake(VOID);
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setImageStyleSpy.called).to.be(false);
setImageStyleSpy.restore();
@@ -100,12 +100,12 @@ describe('ol.renderer.vector', function() {
it('does render the linestring', function() {
feature.setGeometry(new LineString([[0, 0], [1, 1]]));
const lineStringReplay = replayGroup.getReplay(
const lineStringReplay = builderGroup.getBuilder(
style.getZIndex(), 'LineString');
const setFillStrokeStyleSpy = sinon.spy(lineStringReplay,
'setFillStrokeStyle');
const drawLineStringSpy = sinon.stub(lineStringReplay, 'drawLineString').callsFake(VOID);
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawLineStringSpy.called).to.be(true);
@@ -115,12 +115,12 @@ describe('ol.renderer.vector', function() {
it('does render the multilinestring', function() {
feature.setGeometry(new MultiLineString([[[0, 0], [1, 1]]]));
const lineStringReplay = replayGroup.getReplay(
const lineStringReplay = builderGroup.getBuilder(
style.getZIndex(), 'LineString');
const setFillStrokeStyleSpy = sinon.spy(lineStringReplay,
'setFillStrokeStyle');
const drawMultiLineStringSpy = sinon.stub(lineStringReplay, 'drawMultiLineString').callsFake(VOID);
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawMultiLineStringSpy.called).to.be(true);
@@ -131,12 +131,12 @@ describe('ol.renderer.vector', function() {
it('does render the polygon', function() {
feature.setGeometry(new Polygon(
[[[0, 0], [1, 1], [1, 0], [0, 0]]]));
const polygonReplay = replayGroup.getReplay(
const polygonReplay = builderGroup.getBuilder(
style.getZIndex(), 'Polygon');
const setFillStrokeStyleSpy = sinon.spy(polygonReplay,
'setFillStrokeStyle');
const drawPolygonSpy = sinon.stub(polygonReplay, 'drawPolygon').callsFake(VOID);
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawPolygonSpy.called).to.be(true);
@@ -147,12 +147,12 @@ describe('ol.renderer.vector', function() {
it('does render the multipolygon', function() {
feature.setGeometry(new MultiPolygon(
[[[[0, 0], [1, 1], [1, 0], [0, 0]]]]));
const polygonReplay = replayGroup.getReplay(
const polygonReplay = builderGroup.getBuilder(
style.getZIndex(), 'Polygon');
const setFillStrokeStyleSpy = sinon.spy(polygonReplay,
'setFillStrokeStyle');
const drawMultiPolygonSpy = sinon.stub(polygonReplay, 'drawMultiPolygon').callsFake(VOID);
renderFeature(replayGroup, feature,
renderFeature(builderGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawMultiPolygonSpy.called).to.be(true);