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

Remove Atlas and AtlasManager

Browse Source
This commit is contained in:
Frederic Junod
2018-12-14 11:35:46 +01:00
parent f948577a1a
commit 1bb1e3c542
10 changed files with 18 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/ol/style.js
View File

@@ -2,9 +2,6 @@
* @module ol/style * @module ol/style
*/ */
export {default as Atlas} from './style/Atlas.js';
export {default as AtlasManager} from './style/AtlasManager.js';
export {default as Circle} from './style/Circle.js'; export {default as Circle} from './style/Circle.js';
export {default as Fill} from './style/Fill.js'; export {default as Fill} from './style/Fill.js';
export {default as Icon} from './style/Icon.js'; export {default as Icon} from './style/Icon.js';

206
src/ol/style/Atlas.js
View File

@@ -1,206 +0,0 @@
/**
* @module ol/style/Atlas
*/
import {createCanvasContext2D} from '../dom.js';
/**
* @typedef {Object} AtlasBlock
* @property {number} x
* @property {number} y
* @property {number} width
* @property {number} height
*/
/**
* Provides information for an image inside an atlas.
* `offsetX` and `offsetY` are the position of the image inside the atlas image `image`.
* @typedef {Object} AtlasInfo
* @property {number} offsetX
* @property {number} offsetY
* @property {HTMLCanvasElement} image
*/
/**
* @classesc
* This class facilitates the creation of image atlases.
*
* Images added to an atlas will be rendered onto a single
* atlas canvas. The distribution of images on the canvas is
* managed with the bin packing algorithm described in:
* http://www.blackpawn.com/texts/lightmaps/
*
* @param {number} size The size in pixels of the sprite image.
* @param {number} space The space in pixels between images.
* Because texture coordinates are float values, the edges of
* images might not be completely correct (in a way that the
* edges overlap when being rendered). To avoid this we add a
* padding around each image.
*/
class Atlas {
/**
* @param {number} size The size in pixels of the sprite image.
* @param {number} space The space in pixels between images.
* Because texture coordinates are float values, the edges of
* images might not be completely correct (in a way that the
* edges overlap when being rendered). To avoid this we add a
* padding around each image.
*/
constructor(size, space) {
/**
* @private
* @type {number}
*/
this.space_ = space;
/**
* @private
* @type {Array<AtlasBlock>}
*/
this.emptyBlocks_ = [{x: 0, y: 0, width: size, height: size}];
/**
* @private
* @type {Object<string, AtlasInfo>}
*/
this.entries_ = {};
/**
* @private
* @type {CanvasRenderingContext2D}
*/
this.context_ = createCanvasContext2D(size, size);
/**
* @private
* @type {HTMLCanvasElement}
*/
this.canvas_ = this.context_.canvas;
}
/**
* @param {string} id The identifier of the entry to check.
* @return {?AtlasInfo} The atlas info.
*/
get(id) {
return this.entries_[id] || null;
}
/**
* @param {string} id The identifier of the entry to add.
* @param {number} width The width.
* @param {number} height The height.
* @param {function(CanvasRenderingContext2D, number, number): void} renderCallback
* Called to render the new image onto an atlas image.
* @param {Object=} opt_this Value to use as `this` when executing
* `renderCallback`.
* @return {?AtlasInfo} The position and atlas image for the entry.
*/
add(id, width, height, renderCallback, opt_this) {
for (let i = 0, ii = this.emptyBlocks_.length; i < ii; ++i) {
const block = this.emptyBlocks_[i];
if (block.width >= width + this.space_ &&
block.height >= height + this.space_) {
// we found a block that is big enough for our entry
const entry = {
offsetX: block.x + this.space_,
offsetY: block.y + this.space_,
image: this.canvas_
};
this.entries_[id] = entry;
// render the image on the atlas image
renderCallback.call(opt_this, this.context_,
block.x + this.space_, block.y + this.space_);
// split the block after the insertion, either horizontally or vertically
this.split_(i, block, width + this.space_, height + this.space_);
return entry;
}
}
// there is no space for the new entry in this atlas
return null;
}
/**
* @private
* @param {number} index The index of the block.
* @param {AtlasBlock} block The block to split.
* @param {number} width The width of the entry to insert.
* @param {number} height The height of the entry to insert.
*/
split_(index, block, width, height) {
const deltaWidth = block.width - width;
const deltaHeight = block.height - height;
/** @type {AtlasBlock} */
let newBlock1;
/** @type {AtlasBlock} */
let newBlock2;
if (deltaWidth > deltaHeight) {
// split vertically
// block right of the inserted entry
newBlock1 = {
x: block.x + width,
y: block.y,
width: block.width - width,
height: block.height
};
// block below the inserted entry
newBlock2 = {
x: block.x,
y: block.y + height,
width: width,
height: block.height - height
};
this.updateBlocks_(index, newBlock1, newBlock2);
} else {
// split horizontally
// block right of the inserted entry
newBlock1 = {
x: block.x + width,
y: block.y,
width: block.width - width,
height: height
};
// block below the inserted entry
newBlock2 = {
x: block.x,
y: block.y + height,
width: block.width,
height: block.height - height
};
this.updateBlocks_(index, newBlock1, newBlock2);
}
}
/**
* Remove the old block and insert new blocks at the same array position.
* The new blocks are inserted at the same position, so that splitted
* blocks (that are potentially smaller) are filled first.
* @private
* @param {number} index The index of the block to remove.
* @param {AtlasBlock} newBlock1 The 1st block to add.
* @param {AtlasBlock} newBlock2 The 2nd block to add.
*/
updateBlocks_(index, newBlock1, newBlock2) {
const args = /** @type {Array<*>} */ ([index, 1]);
if (newBlock1.width > 0 && newBlock1.height > 0) {
args.push(newBlock1);
}
if (newBlock2.width > 0 && newBlock2.height > 0) {
args.push(newBlock2);
}
this.emptyBlocks_.splice.apply(this.emptyBlocks_, args);
}
}
export default Atlas;

250
src/ol/style/AtlasManager.js
View File

@@ -1,250 +0,0 @@
/**
* @module ol/style/AtlasManager
*/
import {MAX_TEXTURE_SIZE as WEBGL_MAX_TEXTURE_SIZE} from '../webgl.js';
import {VOID} from '../functions.js';
import Atlas from './Atlas.js';
/**
* @typedef {Object} Options
* @property {number} [initialSize=256] The size in pixels of the first atlas image.
* @property {number} [maxSize] The maximum size in pixels of atlas images. Default is
* `webgl/MAX_TEXTURE_SIZE` or 2048 if WebGL is not supported.
* @property {number} [space=1] The space in pixels between images.
*/
/**
* Provides information for an image inside an atlas manager.
* `offsetX` and `offsetY` is the position of the image inside
* the atlas image `image` and the position of the hit-detection image
* inside the hit-detection atlas image `hitImage`.
* @typedef {Object} AtlasManagerInfo
* @property {number} offsetX
* @property {number} offsetY
* @property {HTMLCanvasElement} image
* @property {HTMLCanvasElement} hitImage
*/
/**
* The size in pixels of the first atlas image.
* @type {number}
*/
const INITIAL_ATLAS_SIZE = 256;
/**
* The maximum size in pixels of atlas images.
* @type {number}
*/
const MAX_ATLAS_SIZE = -1;
/**
* @classdesc
* Manages the creation of image atlases.
*
* Images added to this manager will be inserted into an atlas, which
* will be used for rendering.
* The `size` given in the constructor is the size for the first
* atlas. After that, when new atlases are created, they will have
* twice the size as the latest atlas (until `maxSize` is reached).
*
* If an application uses many images or very large images, it is recommended
* to set a higher `size` value to avoid the creation of too many atlases.
* @api
*/
class AtlasManager {
/**
* @param {Options=} opt_options Options.
*/
constructor(opt_options) {
const options = opt_options || {};
/**
* The size in pixels of the latest atlas image.
* @private
* @type {number}
*/
this.currentSize_ = options.initialSize !== undefined ?
options.initialSize : INITIAL_ATLAS_SIZE;
/**
* The maximum size in pixels of atlas images.
* @private
* @type {number}
*/
this.maxSize_ = options.maxSize !== undefined ?
options.maxSize : MAX_ATLAS_SIZE != -1 ?
MAX_ATLAS_SIZE : WEBGL_MAX_TEXTURE_SIZE !== undefined ?
WEBGL_MAX_TEXTURE_SIZE : 2048;
/**
* The size in pixels between images.
* @private
* @type {number}
*/
this.space_ = options.space !== undefined ? options.space : 1;
/**
* @private
* @type {Array<import("./Atlas.js").default>}
*/
this.atlases_ = [new Atlas(this.currentSize_, this.space_)];
/**
* The size in pixels of the latest atlas image for hit-detection images.
* @private
* @type {number}
*/
this.currentHitSize_ = this.currentSize_;
/**
* @private
* @type {Array<import("./Atlas.js").default>}
*/
this.hitAtlases_ = [new Atlas(this.currentHitSize_, this.space_)];
}
/**
* @param {string} id The identifier of the entry to check.
* @return {?AtlasManagerInfo} The position and atlas image for the
* entry, or `null` if the entry is not part of the atlas manager.
*/
getInfo(id) {
/** @type {?import("./Atlas.js").AtlasInfo} */
const info = this.getInfo_(this.atlases_, id);
if (!info) {
return null;
}
const hitInfo = /** @type {import("./Atlas.js").AtlasInfo} */ (this.getInfo_(this.hitAtlases_, id));
return this.mergeInfos_(info, hitInfo);
}
/**
* @private
* @param {Array<import("./Atlas.js").default>} atlases The atlases to search.
* @param {string} id The identifier of the entry to check.
* @return {?import("./Atlas.js").AtlasInfo} The position and atlas image for the entry,
* or `null` if the entry is not part of the atlases.
*/
getInfo_(atlases, id) {
for (let i = 0, ii = atlases.length; i < ii; ++i) {
const atlas = atlases[i];
const info = atlas.get(id);
if (info) {
return info;
}
}
return null;
}
/**
* @private
* @param {import("./Atlas.js").AtlasInfo} info The info for the real image.
* @param {import("./Atlas.js").AtlasInfo} hitInfo The info for the hit-detection
* image.
* @return {?AtlasManagerInfo} The position and atlas image for the
* entry, or `null` if the entry is not part of the atlases.
*/
mergeInfos_(info, hitInfo) {
return {
offsetX: info.offsetX,
offsetY: info.offsetY,
image: info.image,
hitImage: hitInfo.image
};
}
/**
* Add an image to the atlas manager.
*
* If an entry for the given id already exists, the entry will
* be overridden (but the space on the atlas graphic will not be freed).
*
* If `renderHitCallback` is provided, the image (or the hit-detection version
* of the image) will be rendered into a separate hit-detection atlas image.
*
* @param {string} id The identifier of the entry to add.
* @param {number} width The width.
* @param {number} height The height.
* @param {function(CanvasRenderingContext2D, number, number): void} renderCallback
* Called to render the new image onto an atlas image.
* @param {function(CanvasRenderingContext2D, number, number)=} opt_renderHitCallback Called to render a hit-detection image onto a hit
* detection atlas image.
* @param {Object=} opt_this Value to use as `this` when executing
* `renderCallback` and `renderHitCallback`.
* @return {?AtlasManagerInfo} The position and atlas image for the
* entry, or `null` if the image is too big.
*/
add(id, width, height, renderCallback, opt_renderHitCallback, opt_this) {
if (width + this.space_ > this.maxSize_ ||
height + this.space_ > this.maxSize_) {
return null;
}
/** @type {?import("./Atlas.js").AtlasInfo} */
const info = this.add_(false, id, width, height, renderCallback, opt_this);
if (!info) {
return null;
}
// even if no hit-detection entry is requested, we insert a fake entry into
// the hit-detection atlas, to make sure that the offset is the same for
// the original image and the hit-detection image.
const renderHitCallback = opt_renderHitCallback !== undefined ?
opt_renderHitCallback : VOID;
const hitInfo = /** @type {import("./Atlas.js").AtlasInfo} */ (this.add_(true,
id, width, height, renderHitCallback, opt_this));
return this.mergeInfos_(info, hitInfo);
}
/**
* @private
* @param {boolean} isHitAtlas If the hit-detection atlases are used.
* @param {string} id The identifier of the entry to add.
* @param {number} width The width.
* @param {number} height The height.
* @param {function(CanvasRenderingContext2D, number, number): void} renderCallback
* Called to render the new image onto an atlas image.
* @param {Object=} opt_this Value to use as `this` when executing
* `renderCallback` and `renderHitCallback`.
* @return {?import("./Atlas.js").AtlasInfo} The position and atlas image for the entry,
* or `null` if the image is too big.
*/
add_(isHitAtlas, id, width, height, renderCallback, opt_this) {
const atlases = (isHitAtlas) ? this.hitAtlases_ : this.atlases_;
let atlas, info, i, ii;
for (i = 0, ii = atlases.length; i < ii; ++i) {
atlas = atlases[i];
info = atlas.add(id, width, height, renderCallback, opt_this);
if (info) {
return info;
} else if (!info && i === ii - 1) {
// the entry could not be added to one of the existing atlases,
// create a new atlas that is twice as big and try to add to this one.
let size;
if (isHitAtlas) {
size = Math.min(this.currentHitSize_ * 2, this.maxSize_);
this.currentHitSize_ = size;
} else {
size = Math.min(this.currentSize_ * 2, this.maxSize_);
this.currentSize_ = size;
}
atlas = new Atlas(size, this.space_);
atlases.push(atlas);
// run the loop another time
++ii;
}
}
return null;
}
}
export default AtlasManager;

12
src/ol/style/Circle.js
View File

@@ -10,9 +10,6 @@ import RegularShape from './RegularShape.js';
* @property {import("./Fill.js").default} [fill] Fill style. * @property {import("./Fill.js").default} [fill] Fill style.
* @property {number} radius Circle radius. * @property {number} radius Circle radius.
* @property {import("./Stroke.js").default} [stroke] Stroke style. * @property {import("./Stroke.js").default} [stroke] Stroke style.
* @property {import("./AtlasManager.js").default} [atlasManager] The atlas manager to use for this circle.
* When using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given,
* the circle is added to an atlas. By default no atlas manager is used.
*/ */
@@ -33,14 +30,13 @@ class CircleStyle extends RegularShape {
points: Infinity, points: Infinity,
fill: options.fill, fill: options.fill,
radius: options.radius, radius: options.radius,
stroke: options.stroke, stroke: options.stroke
atlasManager: options.atlasManager
}); });
} }
/** /**
* Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too. * Clones the style.
* @return {CircleStyle} The cloned style. * @return {CircleStyle} The cloned style.
* @override * @override
* @api * @api
@@ -49,8 +45,7 @@ class CircleStyle extends RegularShape {
const style = new CircleStyle({ const style = new CircleStyle({
fill: this.getFill() ? this.getFill().clone() : undefined, fill: this.getFill() ? this.getFill().clone() : undefined,
stroke: this.getStroke() ? this.getStroke().clone() : undefined, stroke: this.getStroke() ? this.getStroke().clone() : undefined,
radius: this.getRadius(), radius: this.getRadius()
atlasManager: this.atlasManager_
}); });
style.setOpacity(this.getOpacity()); style.setOpacity(this.getOpacity());
style.setScale(this.getScale()); style.setScale(this.getScale());
@@ -65,7 +60,6 @@ class CircleStyle extends RegularShape {
*/ */
setRadius(radius) { setRadius(radius) {
this.radius_ = radius; this.radius_ = radius;
this.render_(this.atlasManager_);
} }
} }

2
src/ol/style/Fill.js
View File

@@ -1,8 +1,6 @@
/** /**
* @module ol/style/Fill * @module ol/style/Fill
*/ */
import {getUid} from '../util.js';
import {asString} from '../color.js';
/** /**

66
src/ol/style/RegularShape.js
View File

@@ -23,9 +23,6 @@ import ImageStyle from './Image.js';
* @property {import("./Stroke.js").default} [stroke] Stroke style. * @property {import("./Stroke.js").default} [stroke] Stroke style.
* @property {number} [rotation=0] Rotation in radians (positive rotation clockwise). * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
* @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view. * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
* @property {import("./AtlasManager.js").default} [atlasManager] The atlas manager to use for this symbol. When
* using WebGL it is recommended to use an atlas manager to avoid texture switching. If an atlas manager is given, the
* symbol is added to an atlas. By default no atlas manager is used.
*/ */
@@ -152,18 +149,12 @@ class RegularShape extends ImageStyle {
*/ */
this.hitDetectionImageSize_ = null; this.hitDetectionImageSize_ = null;
/** this.render_();
* @protected
* @type {import("./AtlasManager.js").default|undefined}
*/
this.atlasManager_ = options.atlasManager;
this.render_(this.atlasManager_);
} }
/** /**
* Clones the style. If an atlasmanager was provided to the original style it will be used in the cloned style, too. * Clones the style.
* @return {RegularShape} The cloned style. * @return {RegularShape} The cloned style.
* @api * @api
*/ */
@@ -176,8 +167,7 @@ class RegularShape extends ImageStyle {
angle: this.getAngle(), angle: this.getAngle(),
stroke: this.getStroke() ? this.getStroke().clone() : undefined, stroke: this.getStroke() ? this.getStroke().clone() : undefined,
rotation: this.getRotation(), rotation: this.getRotation(),
rotateWithView: this.getRotateWithView(), rotateWithView: this.getRotateWithView()
atlasManager: this.atlasManager_
}); });
style.setOpacity(this.getOpacity()); style.setOpacity(this.getOpacity());
style.setScale(this.getScale()); style.setScale(this.getScale());
@@ -317,10 +307,8 @@ class RegularShape extends ImageStyle {
/** /**
* @protected * @protected
* @param {import("./AtlasManager.js").default|undefined} atlasManager An atlas manager.
*/ */
render_(atlasManager) { render_() {
let imageSize;
let lineCap = ''; let lineCap = '';
let lineJoin = ''; let lineJoin = '';
let miterLimit = 0; let miterLimit = 0;
@@ -369,48 +357,16 @@ class RegularShape extends ImageStyle {
miterLimit: miterLimit miterLimit: miterLimit
}; };
if (atlasManager === undefined) { const context = createCanvasContext2D(size, size);
// no atlas manager is used, create a new canvas this.canvas_ = context.canvas;
const context = createCanvasContext2D(size, size);
this.canvas_ = context.canvas;
// canvas.width and height are rounded to the closest integer // canvas.width and height are rounded to the closest integer
size = this.canvas_.width; size = this.canvas_.width;
imageSize = size; const imageSize = size;
this.draw_(renderOptions, context, 0, 0); this.draw_(renderOptions, context, 0, 0);
this.createHitDetectionCanvas_(renderOptions); this.createHitDetectionCanvas_(renderOptions);
} else {
// an atlas manager is used, add the symbol to an atlas
size = Math.round(size);
const hasCustomHitDetectionImage = !this.fill_;
let renderHitDetectionCallback;
if (hasCustomHitDetectionImage) {
// render the hit-detection image into a separate atlas image
renderHitDetectionCallback =
this.drawHitDetectionCanvas_.bind(this, renderOptions);
}
const id = this.getChecksum();
const info = atlasManager.add(
id, size, size, this.draw_.bind(this, renderOptions),
renderHitDetectionCallback);
this.canvas_ = info.image;
this.origin_ = [info.offsetX, info.offsetY];
imageSize = info.image.width;
if (hasCustomHitDetectionImage) {
this.hitDetectionCanvas_ = info.hitImage;
this.hitDetectionImageSize_ =
[info.hitImage.width, info.hitImage.height];
} else {
this.hitDetectionCanvas_ = this.canvas_;
this.hitDetectionImageSize_ = [imageSize, imageSize];
}
}
this.anchor_ = [size / 2, size / 2]; this.anchor_ = [size / 2, size / 2];
this.size_ = [size, size]; this.size_ = [size, size];

1
src/ol/style/Stroke.js
View File

@@ -1,7 +1,6 @@
/** /**
* @module ol/style/Stroke * @module ol/style/Stroke
*/ */
import {getUid} from '../util.js';
/** /**

284
test/spec/ol/style/atlasmanager.test.js
View File

@@ -1,284 +0,0 @@
import Atlas from '../../../../src/ol/style/Atlas.js';
import AtlasManager from '../../../../src/ol/style/AtlasManager.js';
describe('ol.style.Atlas', function() {
const defaultRender = function(context, x, y) {
};
describe('#constructor', function() {
it('inits the atlas', function() {
const atlas = new Atlas(256, 1);
expect(atlas.emptyBlocks_).to.eql(
[{x: 0, y: 0, width: 256, height: 256}]);
});
});
describe('#add (squares with same size)', function() {
it('adds one entry', function() {
const atlas = new Atlas(128, 1);
const info = atlas.add('1', 32, 32, defaultRender);
expect(info).to.eql(
{offsetX: 1, offsetY: 1, image: atlas.canvas_});
expect(atlas.get('1')).to.eql(info);
});
it('adds two entries', function() {
const atlas = new Atlas(128, 1);
atlas.add('1', 32, 32, defaultRender);
const info = atlas.add('2', 32, 32, defaultRender);
expect(info).to.eql(
{offsetX: 34, offsetY: 1, image: atlas.canvas_});
expect(atlas.get('2')).to.eql(info);
});
it('adds three entries', function() {
const atlas = new Atlas(128, 1);
atlas.add('1', 32, 32, defaultRender);
atlas.add('2', 32, 32, defaultRender);
const info = atlas.add('3', 32, 32, defaultRender);
expect(info).to.eql(
{offsetX: 67, offsetY: 1, image: atlas.canvas_});
expect(atlas.get('3')).to.eql(info);
});
it('adds four entries (new row)', function() {
const atlas = new Atlas(128, 1);
atlas.add('1', 32, 32, defaultRender);
atlas.add('2', 32, 32, defaultRender);
atlas.add('3', 32, 32, defaultRender);
const info = atlas.add('4', 32, 32, defaultRender);
expect(info).to.eql(
{offsetX: 1, offsetY: 34, image: atlas.canvas_});
expect(atlas.get('4')).to.eql(info);
});
it('returns null when an entry is too big', function() {
const atlas = new Atlas(128, 1);
atlas.add('1', 32, 32, defaultRender);
atlas.add('2', 32, 32, defaultRender);
atlas.add('3', 32, 32, defaultRender);
const info = atlas.add(4, 100, 100, defaultRender);
expect(info).to.eql(null);
});
it('fills up the whole atlas', function() {
const atlas = new Atlas(128, 1);
for (let i = 1; i <= 16; i++) {
expect(atlas.add(i.toString(), 28, 28, defaultRender)).to.be.ok();
}
// there is no more space for items of this size, the next one will fail
expect(atlas.add('17', 28, 28, defaultRender)).to.eql(null);
});
});
describe('#add (rectangles with different sizes)', function() {
it('adds a bunch of rectangles', function() {
const atlas = new Atlas(128, 1);
expect(atlas.add('1', 64, 32, defaultRender)).to.eql(
{offsetX: 1, offsetY: 1, image: atlas.canvas_});
expect(atlas.add('2', 64, 32, defaultRender)).to.eql(
{offsetX: 1, offsetY: 34, image: atlas.canvas_});
expect(atlas.add('3', 64, 32, defaultRender)).to.eql(
{offsetX: 1, offsetY: 67, image: atlas.canvas_});
// this one can not be added anymore
expect(atlas.add('4', 64, 32, defaultRender)).to.eql(null);
// but there is still room for smaller ones
expect(atlas.add('5', 40, 32, defaultRender)).to.eql(
{offsetX: 66, offsetY: 1, image: atlas.canvas_});
expect(atlas.add('6', 40, 32, defaultRender)).to.eql(
{offsetX: 66, offsetY: 34, image: atlas.canvas_});
});
it('fills up the whole atlas (rectangles in portrait format)', function() {
const atlas = new Atlas(128, 1);
for (let i = 1; i <= 32; i++) {
expect(atlas.add(i.toString(), 28, 14, defaultRender)).to.be.ok();
}
// there is no more space for items of this size, the next one will fail
expect(atlas.add('33', 28, 14, defaultRender)).to.eql(null);
});
it('fills up the whole atlas (rectangles in landscape format)', function() {
const atlas = new Atlas(128, 1);
for (let i = 1; i <= 32; i++) {
expect(atlas.add(i.toString(), 14, 28, defaultRender)).to.be.ok();
}
// there is no more space for items of this size, the next one will fail
expect(atlas.add('33', 14, 28, defaultRender)).to.eql(null);
});
});
describe('#add (rendering)', function() {
it('calls the render callback with the right values', function() {
const atlas = new Atlas(128, 1);
let rendererCallback = sinon.spy();
atlas.add('1', 32, 32, rendererCallback);
expect(rendererCallback.calledOnce).to.be.ok();
expect(rendererCallback.calledWith(atlas.context_, 1, 1)).to.be.ok();
rendererCallback = sinon.spy();
atlas.add('2', 32, 32, rendererCallback);
expect(rendererCallback.calledOnce).to.be.ok();
expect(rendererCallback.calledWith(atlas.context_, 34, 1)).to.be.ok();
});
it('is possible to actually draw on the canvas', function() {
const atlas = new Atlas(128, 1);
const rendererCallback = function(context, x, y) {
context.fillStyle = '#FFA500';
context.fillRect(x, y, 32, 32);
};
expect(atlas.add('1', 32, 32, rendererCallback)).to.be.ok();
expect(atlas.add('2', 32, 32, rendererCallback)).to.be.ok();
// no error, ok
});
});
});
describe('ol.style.AtlasManager', function() {
const defaultRender = function(context, x, y) {
};
describe('#constructor', function() {
it('inits the atlas manager', function() {
const manager = new AtlasManager();
expect(manager.atlases_).to.not.be.empty();
});
});
describe('#add', function() {
it('adds one entry', function() {
const manager = new AtlasManager({initialSize: 128});
const info = manager.add('1', 32, 32, defaultRender);
expect(info).to.eql({
offsetX: 1, offsetY: 1, image: manager.atlases_[0].canvas_,
hitImage: manager.hitAtlases_[0].canvas_});
expect(manager.getInfo('1')).to.eql(info);
});
it('adds one entry (also to the hit detection atlas)', function() {
const manager = new AtlasManager({initialSize: 128});
const info = manager.add('1', 32, 32, defaultRender, defaultRender);
expect(info).to.eql({
offsetX: 1, offsetY: 1, image: manager.atlases_[0].canvas_,
hitImage: manager.hitAtlases_[0].canvas_});
expect(manager.getInfo('1')).to.eql(info);
});
it('creates a new atlas if needed', function() {
const manager = new AtlasManager({initialSize: 128});
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
const info = manager.add('2', 100, 100, defaultRender, defaultRender);
expect(info).to.be.ok();
expect(info.image.width).to.eql(256);
expect(manager.atlases_).to.have.length(2);
expect(info.hitImage.width).to.eql(256);
expect(manager.hitAtlases_).to.have.length(2);
});
it('creates new atlases until one is large enough', function() {
const manager = new AtlasManager({initialSize: 128});
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.atlases_).to.have.length(1);
expect(manager.hitAtlases_).to.have.length(1);
const info = manager.add('2', 500, 500, defaultRender, defaultRender);
expect(info).to.be.ok();
expect(info.image.width).to.eql(512);
expect(manager.atlases_).to.have.length(3);
expect(info.hitImage.width).to.eql(512);
expect(manager.hitAtlases_).to.have.length(3);
});
it('checks all existing atlases and create a new if needed', function() {
const manager = new AtlasManager({initialSize: 128});
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.add('2', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.atlases_).to.have.length(2);
expect(manager.hitAtlases_).to.have.length(2);
const info = manager.add(3, 500, 500, defaultRender, defaultRender);
expect(info).to.be.ok();
expect(info.image.width).to.eql(512);
expect(manager.atlases_).to.have.length(3);
expect(info.hitImage.width).to.eql(512);
expect(manager.hitAtlases_).to.have.length(3);
});
it('returns null if the size exceeds the maximum size', function() {
const manager = new AtlasManager(
{initialSize: 128, maxSize: 2048});
expect(manager.add('1', 100, 100, defaultRender, defaultRender))
.to.be.ok();
expect(manager.add('2', 2048, 2048, defaultRender, defaultRender))
.to.eql(null);
});
it('always has the same offset for the hit-detection', function() {
const manager = new AtlasManager({initialSize: 128});
// add one image without hit-detection callback
let info = manager.add('1', 32, 32, defaultRender);
// add then one with hit-detection callback
info = manager.add('2', 32, 32, defaultRender, defaultRender);
expect(info).to.eql({
offsetX: 34, offsetY: 1, image: manager.atlases_[0].canvas_,
hitImage: manager.hitAtlases_[0].canvas_});
expect(manager.getInfo('2')).to.eql(info);
});
});
describe('#getInfo', function() {
it('returns null if no entry for the given id', function() {
const manager = new AtlasManager({initialSize: 128});
expect(manager.getInfo('123456')).to.eql(null);
});
});
});

38
test/spec/ol/style/circle.test.js
View File

@@ -1,4 +1,3 @@
import AtlasManager from '../../../../src/ol/style/AtlasManager.js';
import CircleStyle from '../../../../src/ol/style/Circle.js'; import CircleStyle from '../../../../src/ol/style/Circle.js';
import Fill from '../../../../src/ol/style/Fill.js'; import Fill from '../../../../src/ol/style/Fill.js';
import Stroke from '../../../../src/ol/style/Stroke.js'; import Stroke from '../../../../src/ol/style/Stroke.js';
@@ -8,7 +7,7 @@ describe('ol.style.Circle', function() {
describe('#constructor', function() { describe('#constructor', function() {
it('creates a canvas if no atlas is used (no fill-style)', function() { it('creates a canvas (no fill-style)', function() {
const style = new CircleStyle({radius: 10}); const style = new CircleStyle({radius: 10});
expect(style.getImage()).to.be.an(HTMLCanvasElement); expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]); expect(style.getSize()).to.eql([21, 21]);
@@ -21,7 +20,7 @@ describe('ol.style.Circle', function() {
expect(style.getHitDetectionImageSize()).to.eql([21, 21]); expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
}); });
it('creates a canvas if no atlas is used (fill-style)', function() { it('creates a canvas (fill-style)', function() {
const style = new CircleStyle({ const style = new CircleStyle({
radius: 10, radius: 10,
fill: new Fill({ fill: new Fill({
@@ -39,39 +38,6 @@ describe('ol.style.Circle', function() {
expect(style.getHitDetectionImageSize()).to.eql([21, 21]); expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
}); });
it('adds itself to an atlas manager (no fill-style)', function() {
const atlasManager = new AtlasManager({initialSize: 512});
const style = new CircleStyle({radius: 10, atlasManager: atlasManager});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// hit-detection image is created, because no fill style is set
expect(style.getImage()).to.not.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
});
it('adds itself to an atlas manager (fill-style)', function() {
const atlasManager = new AtlasManager({initialSize: 512});
const style = new CircleStyle({
radius: 10,
atlasManager: atlasManager,
fill: new Fill({
color: '#FFFF00'
})
});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// no hit-detection image is created, because fill style is set
expect(style.getImage()).to.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
});
}); });
describe('#clone', function() { describe('#clone', function() {

39
test/spec/ol/style/regularshape.test.js
View File

@@ -1,4 +1,3 @@
import AtlasManager from '../../../../src/ol/style/AtlasManager.js';
import RegularShape from '../../../../src/ol/style/RegularShape.js'; import RegularShape from '../../../../src/ol/style/RegularShape.js';
import Fill from '../../../../src/ol/style/Fill.js'; import Fill from '../../../../src/ol/style/Fill.js';
import Stroke from '../../../../src/ol/style/Stroke.js'; import Stroke from '../../../../src/ol/style/Stroke.js';
@@ -34,7 +33,7 @@ describe('ol.style.RegularShape', function() {
expect(style.getRadius2()).to.eql(10); expect(style.getRadius2()).to.eql(10);
}); });
it('creates a canvas if no atlas is used (no fill-style)', function() { it('creates a canvas (no fill-style)', function() {
const style = new RegularShape({radius: 10}); const style = new RegularShape({radius: 10});
expect(style.getImage()).to.be.an(HTMLCanvasElement); expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]); expect(style.getSize()).to.eql([21, 21]);
@@ -47,7 +46,7 @@ describe('ol.style.RegularShape', function() {
expect(style.getHitDetectionImageSize()).to.eql([21, 21]); expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
}); });
it('creates a canvas if no atlas is used (fill-style)', function() { it('creates a canvas (fill-style)', function() {
const style = new RegularShape({ const style = new RegularShape({
radius: 10, radius: 10,
fill: new Fill({ fill: new Fill({
@@ -65,40 +64,6 @@ describe('ol.style.RegularShape', function() {
expect(style.getHitDetectionImageSize()).to.eql([21, 21]); expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
}); });
it('adds itself to an atlas manager (no fill-style)', function() {
const atlasManager = new AtlasManager({initialSize: 512});
const style = new RegularShape(
{radius: 10, atlasManager: atlasManager});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// hit-detection image is created, because no fill style is set
expect(style.getImage()).to.not.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
});
it('adds itself to an atlas manager (fill-style)', function() {
const atlasManager = new AtlasManager({initialSize: 512});
const style = new RegularShape({
radius: 10,
atlasManager: atlasManager,
fill: new Fill({
color: '#FFFF00'
})
});
expect(style.getImage()).to.be.an(HTMLCanvasElement);
expect(style.getSize()).to.eql([21, 21]);
expect(style.getImageSize()).to.eql([512, 512]);
expect(style.getOrigin()).to.eql([1, 1]);
expect(style.getAnchor()).to.eql([10.5, 10.5]);
// no hit-detection image is created, because fill style is set
expect(style.getImage()).to.be(style.getHitDetectionImage());
expect(style.getHitDetectionImage()).to.be.an(HTMLCanvasElement);
expect(style.getHitDetectionImageSize()).to.eql([512, 512]);
});
}); });
describe('#clone', function() { describe('#clone', function() {