End of composeFrame
This commit is contained in:
Tim Schaub
@@ -1,110 +0,0 @@
|
||||
import {create as createTransform, scale} from '../../../../../src/ol/transform.js';
|
||||
import ImageLayer from '../../../../../src/ol/layer/Image.js';
|
||||
import MapRenderer from '../../../../../src/ol/renderer/Map.js';
|
||||
import IntermediateCanvasRenderer from '../../../../../src/ol/renderer/canvas/IntermediateCanvas.js';
|
||||
|
||||
|
||||
describe('ol.renderer.canvas.IntermediateCanvas', function() {
|
||||
|
||||
describe('#composeFrame()', function() {
|
||||
let renderer, frameState, layerState, context;
|
||||
beforeEach(function() {
|
||||
const layer = new ImageLayer({
|
||||
extent: [1, 2, 3, 4]
|
||||
});
|
||||
renderer = new IntermediateCanvasRenderer(layer);
|
||||
const image = new Image();
|
||||
image.width = 3;
|
||||
image.height = 3;
|
||||
renderer.getImage = function() {
|
||||
return image;
|
||||
};
|
||||
frameState = {
|
||||
viewState: {
|
||||
center: [2, 3],
|
||||
resolution: 1,
|
||||
rotation: 0
|
||||
},
|
||||
size: [10, 10],
|
||||
pixelRatio: 1,
|
||||
coordinateToPixelTransform: createTransform(),
|
||||
pixelToCoordinateTransform: createTransform()
|
||||
};
|
||||
renderer.getImageTransform = function() {
|
||||
return createTransform();
|
||||
};
|
||||
MapRenderer.prototype.calculateMatrices2D(frameState);
|
||||
layerState = layer.getLayerState();
|
||||
context = {
|
||||
save: sinon.spy(),
|
||||
restore: sinon.spy(),
|
||||
translate: sinon.spy(),
|
||||
rotate: sinon.spy(),
|
||||
beginPath: sinon.spy(),
|
||||
moveTo: sinon.spy(),
|
||||
lineTo: sinon.spy(),
|
||||
clip: sinon.spy(),
|
||||
drawImage: sinon.spy()
|
||||
};
|
||||
});
|
||||
|
||||
it('clips to layer extent and draws image', function() {
|
||||
frameState.extent = [0, 1, 4, 5];
|
||||
|
||||
renderer.composeFrame(frameState, layerState, context);
|
||||
expect(context.save.callCount).to.be(1);
|
||||
expect(context.translate.callCount).to.be(0);
|
||||
expect(context.rotate.callCount).to.be(0);
|
||||
expect(context.beginPath.callCount).to.be(1);
|
||||
expect(context.moveTo.firstCall.args).to.eql([4, 4]);
|
||||
expect(context.lineTo.firstCall.args).to.eql([6, 4]);
|
||||
expect(context.lineTo.secondCall.args).to.eql([6, 6]);
|
||||
expect(context.lineTo.thirdCall.args).to.eql([4, 6]);
|
||||
expect(context.clip.callCount).to.be(1);
|
||||
expect(context.drawImage.firstCall.args).to.eql(
|
||||
[renderer.getImage(), 0, 0, 3, 3, 0, 0, 3, 3]);
|
||||
expect(context.restore.callCount).to.be(1);
|
||||
});
|
||||
|
||||
it('does not clip if frame extent does not intersect layer extent', function() {
|
||||
frameState.extent = [1.1, 2.1, 2.9, 3.9];
|
||||
|
||||
renderer.composeFrame(frameState, layerState, context);
|
||||
expect(context.save.callCount).to.be(0);
|
||||
expect(context.translate.callCount).to.be(0);
|
||||
expect(context.rotate.callCount).to.be(0);
|
||||
expect(context.beginPath.callCount).to.be(0);
|
||||
expect(context.clip.callCount).to.be(0);
|
||||
expect(context.drawImage.firstCall.args).to.eql(
|
||||
[renderer.getImage(), 0, 0, 3, 3, 0, 0, 3, 3]);
|
||||
expect(context.restore.callCount).to.be(0);
|
||||
});
|
||||
|
||||
it('does not clip if frame extent is outside of layer extent', function() {
|
||||
frameState.extent = [10, 20, 30, 40];
|
||||
|
||||
renderer.composeFrame(frameState, layerState, context);
|
||||
expect(context.save.callCount).to.be(0);
|
||||
expect(context.translate.callCount).to.be(0);
|
||||
expect(context.rotate.callCount).to.be(0);
|
||||
expect(context.beginPath.callCount).to.be(0);
|
||||
expect(context.clip.callCount).to.be(0);
|
||||
expect(context.drawImage.firstCall.args).to.eql(
|
||||
[renderer.getImage(), 0, 0, 3, 3, 0, 0, 3, 3]);
|
||||
expect(context.restore.callCount).to.be(0);
|
||||
});
|
||||
|
||||
it('does not draw image with width or height < 0.5', function() {
|
||||
frameState.extent = [10, 20, 30, 40];
|
||||
renderer.getImageTransform = function() {
|
||||
return scale(createTransform(), 0.1, 0.1);
|
||||
};
|
||||
|
||||
renderer.composeFrame(frameState, layerState, context);
|
||||
|
||||
expect(context.drawImage.notCalled).to.be(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,271 +0,0 @@
|
||||
import {getUid} from '../../../../../src/ol/util.js';
|
||||
import Feature from '../../../../../src/ol/Feature.js';
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
import Point from '../../../../../src/ol/geom/Point.js';
|
||||
import TileLayer from '../../../../../src/ol/layer/Tile.js';
|
||||
import VectorLayer from '../../../../../src/ol/layer/Vector.js';
|
||||
import CanvasLayerRenderer from '../../../../../src/ol/renderer/canvas/Layer.js';
|
||||
import CanvasMapRenderer from '../../../../../src/ol/renderer/canvas/Map.js';
|
||||
import VectorSource from '../../../../../src/ol/source/Vector.js';
|
||||
import Icon from '../../../../../src/ol/style/Icon.js';
|
||||
import Style from '../../../../../src/ol/style/Style.js';
|
||||
|
||||
describe('ol.renderer.canvas.Map', function() {
|
||||
|
||||
describe('constructor', function() {
|
||||
|
||||
it('creates a new instance', function() {
|
||||
const map = new Map({
|
||||
target: document.createElement('div')
|
||||
});
|
||||
const renderer = new CanvasMapRenderer(map);
|
||||
expect(renderer).to.be.a(CanvasMapRenderer);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('#forEachFeatureAtCoordinate', function() {
|
||||
|
||||
let layer, map, target;
|
||||
|
||||
beforeEach(function(done) {
|
||||
target = document.createElement('div');
|
||||
target.style.width = '100px';
|
||||
target.style.height = '100px';
|
||||
document.body.appendChild(target);
|
||||
map = new Map({
|
||||
pixelRatio: 1,
|
||||
target: target,
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
});
|
||||
|
||||
// 1 x 1 pixel black icon
|
||||
const img = document.createElement('img');
|
||||
img.onload = function() {
|
||||
done();
|
||||
};
|
||||
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==';
|
||||
|
||||
layer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature({
|
||||
geometry: new Point([0, 0])
|
||||
})
|
||||
]
|
||||
}),
|
||||
style: new Style({
|
||||
image: new Icon({
|
||||
img: img,
|
||||
imgSize: [1, 1]
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
map.setTarget(null);
|
||||
document.body.removeChild(target);
|
||||
});
|
||||
|
||||
it('calls callback with layer for managed layers', function() {
|
||||
map.addLayer(layer);
|
||||
map.renderSync();
|
||||
const cb = sinon.spy();
|
||||
map.forEachFeatureAtPixel(map.getPixelFromCoordinate([0, 0]), cb);
|
||||
expect(cb).to.be.called();
|
||||
expect(cb.firstCall.args[1]).to.be(layer);
|
||||
});
|
||||
|
||||
it('calls callback with null for unmanaged layers', function() {
|
||||
layer.setMap(map);
|
||||
map.renderSync();
|
||||
const cb = sinon.spy();
|
||||
map.forEachFeatureAtPixel(map.getPixelFromCoordinate([0, 0]), cb);
|
||||
expect(cb).to.be.called();
|
||||
expect(cb.firstCall.args[1]).to.be(null);
|
||||
});
|
||||
|
||||
it('calls callback with main layer when skipped feature on unmanaged layer', function() {
|
||||
const feature = layer.getSource().getFeatures()[0];
|
||||
const managedLayer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [feature]
|
||||
})
|
||||
});
|
||||
map.addLayer(managedLayer);
|
||||
map.skipFeature(feature);
|
||||
layer.setMap(map);
|
||||
map.renderSync();
|
||||
const cb = sinon.spy();
|
||||
map.forEachFeatureAtPixel(map.getPixelFromCoordinate([0, 0]), cb);
|
||||
expect(cb.callCount).to.be(1);
|
||||
expect(cb.firstCall.args[1]).to.be(managedLayer);
|
||||
});
|
||||
|
||||
it('filters managed layers', function() {
|
||||
map.addLayer(layer);
|
||||
map.renderSync();
|
||||
const cb = sinon.spy();
|
||||
map.forEachFeatureAtPixel(map.getPixelFromCoordinate([0, 0]), cb, {
|
||||
layerFilter: function() {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
expect(cb).to.not.be.called();
|
||||
});
|
||||
|
||||
it('doesn\'t fail with layer with no source', function() {
|
||||
map.addLayer(new TileLayer());
|
||||
map.renderSync();
|
||||
expect(function() {
|
||||
map.forEachFeatureAtPixel(map.getPixelFromCoordinate([0, 0]),
|
||||
function() {});
|
||||
}).to.not.throwException();
|
||||
});
|
||||
|
||||
it('calls callback for clicks inside of the hitTolerance', function() {
|
||||
map.addLayer(layer);
|
||||
map.renderSync();
|
||||
const cb1 = sinon.spy();
|
||||
const cb2 = sinon.spy();
|
||||
|
||||
const pixel = map.getPixelFromCoordinate([0, 0]);
|
||||
|
||||
const pixelsInside = [
|
||||
[pixel[0] + 9, pixel[1]],
|
||||
[pixel[0] - 9, pixel[1]],
|
||||
[pixel[0], pixel[1] + 9],
|
||||
[pixel[0], pixel[1] - 9]
|
||||
];
|
||||
|
||||
const pixelsOutside = [
|
||||
[pixel[0] + 9, pixel[1] + 9],
|
||||
[pixel[0] - 9, pixel[1] + 9],
|
||||
[pixel[0] + 9, pixel[1] - 9],
|
||||
[pixel[0] - 9, pixel[1] - 9]
|
||||
];
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
map.forEachFeatureAtPixel(pixelsInside[i], cb1, {hitTolerance: 10});
|
||||
}
|
||||
expect(cb1.callCount).to.be(4);
|
||||
expect(cb1.firstCall.args[1]).to.be(layer);
|
||||
|
||||
for (let j = 0; j < 4; j++) {
|
||||
map.forEachFeatureAtPixel(pixelsOutside[j], cb2, {hitTolerance: 10});
|
||||
}
|
||||
expect(cb2).not.to.be.called();
|
||||
});
|
||||
});
|
||||
|
||||
describe('#forEachLayerAtCoordinate', function() {
|
||||
|
||||
let layer, map, target;
|
||||
|
||||
beforeEach(function(done) {
|
||||
target = document.createElement('div');
|
||||
target.style.width = '100px';
|
||||
target.style.height = '100px';
|
||||
document.body.appendChild(target);
|
||||
map = new Map({
|
||||
pixelRatio: 1,
|
||||
target: target,
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0
|
||||
})
|
||||
});
|
||||
|
||||
// 1 x 1 pixel black icon
|
||||
const img = document.createElement('img');
|
||||
img.onload = function() {
|
||||
done();
|
||||
};
|
||||
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==';
|
||||
|
||||
layer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature({
|
||||
geometry: new Point([0, 0])
|
||||
})
|
||||
]
|
||||
}),
|
||||
style: new Style({
|
||||
image: new Icon({
|
||||
img: img,
|
||||
imgSize: [1, 1]
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
map.setTarget(null);
|
||||
document.body.removeChild(target);
|
||||
});
|
||||
|
||||
it('calls callback for clicks inside of the hitTolerance', function() {
|
||||
map.addLayer(layer);
|
||||
map.renderSync();
|
||||
const cb1 = sinon.spy();
|
||||
const cb2 = sinon.spy();
|
||||
|
||||
const pixel = map.getPixelFromCoordinate([0, 0]);
|
||||
|
||||
const pixelsInside = [
|
||||
[pixel[0] + 9, pixel[1]],
|
||||
[pixel[0] - 9, pixel[1]],
|
||||
[pixel[0], pixel[1] + 9],
|
||||
[pixel[0], pixel[1] - 9]
|
||||
];
|
||||
|
||||
const pixelsOutside = [
|
||||
[pixel[0] + 9, pixel[1] + 9],
|
||||
[pixel[0] - 9, pixel[1] + 9],
|
||||
[pixel[0] + 9, pixel[1] - 9],
|
||||
[pixel[0] - 9, pixel[1] - 9]
|
||||
];
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
map.forEachLayerAtPixel(pixelsInside[i], cb1, {hitTolerance: 10});
|
||||
}
|
||||
expect(cb1.callCount).to.be(4);
|
||||
expect(cb1.firstCall.args[0]).to.be(layer);
|
||||
|
||||
for (let j = 0; j < 4; j++) {
|
||||
map.forEachLayerAtPixel(pixelsOutside[j], cb2, {hitTolerance: 10});
|
||||
}
|
||||
expect(cb2).not.to.be.called();
|
||||
});
|
||||
});
|
||||
|
||||
describe('#renderFrame()', function() {
|
||||
let layer, map, renderer;
|
||||
|
||||
beforeEach(function() {
|
||||
map = new Map({});
|
||||
map.on('postcompose', function() {});
|
||||
layer = new VectorLayer({
|
||||
source: new VectorSource({wrapX: true})
|
||||
});
|
||||
renderer = map.getRenderer();
|
||||
renderer.layerRenderers_ = {};
|
||||
const layerRenderer = new CanvasLayerRenderer(layer);
|
||||
layerRenderer.prepareFrame = function() {
|
||||
return true;
|
||||
};
|
||||
layerRenderer.getImage = function() {
|
||||
return null;
|
||||
};
|
||||
renderer.layerRenderers_[getUid(layer)] = layerRenderer;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,12 +1,7 @@
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
import TileLayer from '../../../../../src/ol/layer/Tile.js';
|
||||
import {get as getProjection} from '../../../../../src/ol/proj.js';
|
||||
import MapRenderer from '../../../../../src/ol/renderer/Map.js';
|
||||
import CanvasTileLayerRenderer from '../../../../../src/ol/renderer/canvas/TileLayer.js';
|
||||
import TileWMS from '../../../../../src/ol/source/TileWMS.js';
|
||||
import XYZ from '../../../../../src/ol/source/XYZ.js';
|
||||
import {create as createTransform} from '../../../../../src/ol/transform.js';
|
||||
|
||||
|
||||
describe('ol.renderer.canvas.TileLayer', function() {
|
||||
@@ -54,70 +49,4 @@ describe('ol.renderer.canvas.TileLayer', function() {
|
||||
});
|
||||
});
|
||||
|
||||
describe('#composeFrame()', function() {
|
||||
|
||||
let img = null;
|
||||
beforeEach(function(done) {
|
||||
img = new Image(1, 1);
|
||||
img.onload = function() {
|
||||
done();
|
||||
};
|
||||
img.src = 'data:image/gif;base64,' +
|
||||
'R0lGODlhAQABAPAAAP8AAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
|
||||
});
|
||||
afterEach(function() {
|
||||
img = null;
|
||||
});
|
||||
|
||||
it('uses correct draw scale when rotating (HiDPI)', function() {
|
||||
const layer = new TileLayer({
|
||||
source: new XYZ({
|
||||
tileSize: 1
|
||||
})
|
||||
});
|
||||
const renderer = new CanvasTileLayerRenderer(layer);
|
||||
renderer.renderedTiles = [];
|
||||
const frameState = {
|
||||
viewHints: [],
|
||||
time: Date.now(),
|
||||
viewState: {
|
||||
center: [10, 5],
|
||||
projection: getProjection('EPSG:3857'),
|
||||
resolution: 1,
|
||||
rotation: Math.PI
|
||||
},
|
||||
extent: [0, 0, 20, 10],
|
||||
size: [20, 10],
|
||||
pixelRatio: 2,
|
||||
coordinateToPixelTransform: createTransform(),
|
||||
pixelToCoordinateTransform: createTransform(),
|
||||
usedTiles: {},
|
||||
wantedTiles: {}
|
||||
};
|
||||
renderer.getImageTransform = function() {
|
||||
return createTransform();
|
||||
};
|
||||
MapRenderer.prototype.calculateMatrices2D(frameState);
|
||||
const layerState = layer.getLayerState();
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 200;
|
||||
canvas.height = 100;
|
||||
const context = {
|
||||
canvas: canvas,
|
||||
drawImage: sinon.spy()
|
||||
};
|
||||
renderer.renderedTiles = [{
|
||||
getTileCoord: function() {
|
||||
return [0, 0, 0];
|
||||
},
|
||||
getImage: function() {
|
||||
return img;
|
||||
}
|
||||
}];
|
||||
renderer.prepareFrame(frameState, layerState);
|
||||
renderer.composeFrame(frameState, layerState, context);
|
||||
expect(context.drawImage.firstCall.args[0].width).to.be(17);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user