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

Merge pull request #4174 from tschaub/fewer-layer-props

Browse Source 
Remove hue, saturation, contrast, and brightness as layer properties.
This commit is contained in:
Tim Schaub
2015-09-29 01:16:11 -06:00
parent e8257e805d 55908485f2
commit ba5b950d5c
23 changed files with 50 additions and 1687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
changelog/upgrade-notes.md
View File

@@ -2,6 +2,10 @@
### v3.10.0
#### `ol.layer.Layer` changes
The experimental `setHue`, `setContrast`, `setBrightness`, `setSaturation`, and the corresponding getter methods have been removed. These properties only worked with the WebGL renderer. If are interested in applying color transforms, look for the `postcompose` event in the API docs. In addition, the `ol.source.Raster` source provides a way to create new raster data based on arbitrary transforms run on any number of input sources.
### v3.9.0
#### `ol.style.Circle` changes

7
examples/brightness-contrast.css
View File

@@ -1,7 +0,0 @@
#reset-brightness {
min-width: 138px;
}
#reset-contrast {
min-width: 120px;
}

27
examples/brightness-contrast.html
View File

@@ -1,27 +0,0 @@
---
template: example.html
title: Brightness/contrast example
shortdesc: Example of brightness/contrast control on the client (WebGL only).
docs: >
This example shows how to control brightness/contrast on the client,
the example is limited to WebGL.
tags: "brightness, contrast, webgl"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>
<div class="btn-group">
<button id="increase-brightness"><i class="fa fa-plus"></i></button>
<button id="reset-brightness">Brightness</button>
<button id="decrease-brightness"><i class="fa fa-minus"></i></button>
</div>
<div class="btn-group">
<button id="increase-contrast"><i class="fa fa-plus"></i></button>
<button id="reset-contrast">Contrast</button>
<button id="decrease-contrast"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>

75
examples/brightness-contrast.js
View File

@@ -1,75 +0,0 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.has');
goog.require('ol.layer.Tile');
goog.require('ol.source.MapQuest');
function setResetBrightnessButtonHTML() {
resetBrightness.innerHTML = 'Brightness (' +
layer.getBrightness().toFixed(3) + ')';
}
function setResetContrastButtonHTML() {
resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
}
if (!ol.has.WEBGL) {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
} else {
var layer = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var map = new ol.Map({
layers: [layer],
renderer: 'webgl',
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var increaseBrightness = document.getElementById('increase-brightness');
var resetBrightness = document.getElementById('reset-brightness');
var decreaseBrightness = document.getElementById('decrease-brightness');
setResetBrightnessButtonHTML();
increaseBrightness.addEventListener('click', function() {
layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
setResetBrightnessButtonHTML();
}, false);
resetBrightness.addEventListener('click', function() {
layer.setBrightness(0);
setResetBrightnessButtonHTML();
}, false);
decreaseBrightness.addEventListener('click', function() {
layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
setResetBrightnessButtonHTML();
}, false);
var increaseContrast = document.getElementById('increase-contrast');
var resetContrast = document.getElementById('reset-contrast');
var decreaseContrast = document.getElementById('decrease-contrast');
setResetContrastButtonHTML();
increaseContrast.addEventListener('click', function() {
layer.setContrast(layer.getContrast() + 0.125);
setResetContrastButtonHTML();
}, false);
resetContrast.addEventListener('click', function() {
layer.setContrast(1);
setResetContrastButtonHTML();
}, false);
decreaseContrast.addEventListener('click', function() {
layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
setResetContrastButtonHTML();
}, false);
}

6
examples/hue-saturation.css
View File

@@ -1,6 +0,0 @@
#reset-hue {
min-width: 90px;
}
#reset-saturation {
min-width: 124px;
}

26
examples/hue-saturation.html
View File

@@ -1,26 +0,0 @@
---
template: example.html
title: Hue/saturation example
shortdesc: Example of hue/saturation control on the client (WebGL only).
docs: >
Example of hue/saturation control on the client (WebGL only).
tags: "custom, control"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div id="no-webgl" class="alert alert-danger" style="display: none">
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
</div>
<div class="btn-group">
<button id="increase-hue"><i class="fa fa-plus"></i></button>
<button id="reset-hue">Hue</button>
<button id="decrease-hue"><i class="fa fa-minus"></i></button>
</div>
<div class="btn-group">
<button id="increase-saturation"><i class="fa fa-plus"></i></button>
<button id="reset-saturation">Saturation</button>
<button id="decrease-saturation"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>

79
examples/hue-saturation.js
View File

@@ -1,79 +0,0 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.has');
goog.require('ol.layer.Tile');
goog.require('ol.proj');
goog.require('ol.source.BingMaps');
function setResetHueButtonHTML() {
resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
}
function setResetSaturationButtonHTML() {
resetSaturation.innerHTML = 'Saturation (' +
layer.getSaturation().toFixed(2) + ')';
}
if (!ol.has.WEBGL) {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
} else {
var layer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial'
})
});
var map = new ol.Map({
layers: [layer],
renderer: 'webgl',
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-9.375, 51.483333]),
zoom: 15
})
});
var increaseHue = document.getElementById('increase-hue');
var resetHue = document.getElementById('reset-hue');
var decreaseHue = document.getElementById('decrease-hue');
setResetHueButtonHTML();
increaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() + 0.25);
setResetHueButtonHTML();
}, false);
resetHue.addEventListener('click', function() {
layer.setHue(0);
setResetHueButtonHTML();
}, false);
decreaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() - 0.25);
setResetHueButtonHTML();
}, false);
var increaseSaturation = document.getElementById('increase-saturation');
var resetSaturation = document.getElementById('reset-saturation');
var decreaseSaturation = document.getElementById('decrease-saturation');
setResetSaturationButtonHTML();
increaseSaturation.addEventListener('click', function() {
layer.setSaturation(layer.getSaturation() + 0.25);
setResetSaturationButtonHTML();
}, false);
resetSaturation.addEventListener('click', function() {
layer.setSaturation(1);
setResetSaturationButtonHTML();
}, false);
decreaseSaturation.addEventListener('click', function() {
layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
setResetSaturationButtonHTML();
}, false);
}

32
examples/layer-group.html
View File

@@ -20,14 +20,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>Layer group</span>
@@ -37,14 +29,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
<ul>
<li><span>Food insecurity layer</span>
@@ -54,14 +38,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>World borders layer</span>
@@ -71,14 +47,6 @@ tags: "tilejson, input, bind, group, layergroup"
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
</ul>

14
examples/layer-group.js
View File

@@ -44,15 +44,11 @@ function bindInputs(layerid, layer) {
});
visibilityInput.prop('checked', layer.getVisible());
$.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
function(i, v) {
var input = $(layerid + ' input.' + v);
input.on('input change', function() {
layer.set(v, parseFloat(this.value));
});
input.val(String(layer.get(v)));
}
);
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function() {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
map.getLayers().forEach(function(layer, i) {
bindInputs('#layer' + i, layer);

266
externs/olx.js
View File

@@ -2964,11 +2964,7 @@ olx.layer;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* hue: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* @typedef {{opacity: (number|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
* zIndex: (number|undefined),
@@ -2979,30 +2975,6 @@ olx.layer;
olx.layer.BaseOptions;
/**
* Brightness. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.BaseOptions.prototype.brightness;
/**
* Contrast. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.BaseOptions.prototype.contrast;
/**
* Hue. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.BaseOptions.prototype.hue;
/**
* Opacity (0, 1). Default is `1`.
* @type {number|undefined}
@@ -3011,14 +2983,6 @@ olx.layer.BaseOptions.prototype.hue;
olx.layer.BaseOptions.prototype.opacity;
/**
* Saturation. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.BaseOptions.prototype.saturation;
/**
* Visibility. Default is `true`.
* @type {boolean|undefined}
@@ -3062,11 +3026,7 @@ olx.layer.BaseOptions.prototype.maxResolution;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* hue: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* @typedef {{opacity: (number|undefined),
* source: (ol.source.Source|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
@@ -3078,30 +3038,6 @@ olx.layer.BaseOptions.prototype.maxResolution;
olx.layer.LayerOptions;
/**
* Brightness. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.LayerOptions.prototype.brightness;
/**
* Contrast. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.LayerOptions.prototype.contrast;
/**
* Hue. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.LayerOptions.prototype.hue;
/**
* Opacity (0, 1). Default is `1`.
* @type {number|undefined}
@@ -3110,14 +3046,6 @@ olx.layer.LayerOptions.prototype.hue;
olx.layer.LayerOptions.prototype.opacity;
/**
* Saturation. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.LayerOptions.prototype.saturation;
/**
* Source for this layer. If not provided to the constructor, the source can
* be set by calling {@link ol.layer.Layer#setSource layer.setSource(source)}
@@ -3171,11 +3099,7 @@ olx.layer.LayerOptions.prototype.maxResolution;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* hue: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* @typedef {{opacity: (number|undefined),
* visible: (boolean|undefined),
* extent: (ol.Extent|undefined),
* zIndex: (number|undefined),
@@ -3187,30 +3111,6 @@ olx.layer.LayerOptions.prototype.maxResolution;
olx.layer.GroupOptions;
/**
* Brightness. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.GroupOptions.prototype.brightness;
/**
* Contrast. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.GroupOptions.prototype.contrast;
/**
* Hue. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.GroupOptions.prototype.hue;
/**
* Opacity (0, 1). Default is `1`.
* @type {number|undefined}
@@ -3219,14 +3119,6 @@ olx.layer.GroupOptions.prototype.hue;
olx.layer.GroupOptions.prototype.opacity;
/**
* Saturation. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.GroupOptions.prototype.saturation;
/**
* Visibility. Default is `true`.
* @type {boolean|undefined}
@@ -3278,10 +3170,7 @@ olx.layer.GroupOptions.prototype.layers;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* hue: (number|undefined),
* gradient: (Array.<string>|undefined),
* @typedef {{gradient: (Array.<string>|undefined),
* radius: (number|undefined),
* blur: (number|undefined),
* shadow: (number|undefined),
@@ -3290,7 +3179,6 @@ olx.layer.GroupOptions.prototype.layers;
* minResolution: (number|undefined),
* maxResolution: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* source: (ol.source.Vector|undefined),
* visible: (boolean|undefined)}}
* @api
@@ -3298,30 +3186,6 @@ olx.layer.GroupOptions.prototype.layers;
olx.layer.HeatmapOptions;
/**
* Brightness.
* @type {number|undefined}
* @api
*/
olx.layer.HeatmapOptions.prototype.brightness;
/**
* Contrast.
* @type {number|undefined}
* @api
*/
olx.layer.HeatmapOptions.prototype.contrast;
/**
* Hue.
* @type {number|undefined}
* @api
*/
olx.layer.HeatmapOptions.prototype.hue;
/**
* The color gradient of the heatmap, specified as an array of CSS color
* strings. Default is `['#00f', '#0ff', '#0f0', '#ff0', '#f00']`.
@@ -3398,14 +3262,6 @@ olx.layer.HeatmapOptions.prototype.maxResolution;
olx.layer.HeatmapOptions.prototype.opacity;
/**
* Saturation.
* @type {number|undefined}
* @api
*/
olx.layer.HeatmapOptions.prototype.saturation;
/**
* Source.
* @type {ol.source.Vector}
@@ -3423,11 +3279,7 @@ olx.layer.HeatmapOptions.prototype.visible;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* hue: (number|undefined),
* opacity: (number|undefined),
* saturation: (number|undefined),
* @typedef {{opacity: (number|undefined),
* map: (ol.Map|undefined),
* source: (ol.source.Image|undefined),
* visible: (boolean|undefined),
@@ -3439,30 +3291,6 @@ olx.layer.HeatmapOptions.prototype.visible;
olx.layer.ImageOptions;
/**
* Brightness. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.ImageOptions.prototype.brightness;
/**
* Contrast. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.ImageOptions.prototype.contrast;
/**
* Hue. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.ImageOptions.prototype.hue;
/**
* Opacity (0, 1). Default is `1`.
* @type {number|undefined}
@@ -3471,14 +3299,6 @@ olx.layer.ImageOptions.prototype.hue;
olx.layer.ImageOptions.prototype.opacity;
/**
* Saturation. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.ImageOptions.prototype.saturation;
/**
* Source for this layer.
* @type {ol.source.Image}
@@ -3532,12 +3352,8 @@ olx.layer.ImageOptions.prototype.maxResolution;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* hue: (number|undefined),
* opacity: (number|undefined),
* @typedef {{opacity: (number|undefined),
* preload: (number|undefined),
* saturation: (number|undefined),
* source: (ol.source.Tile|undefined),
* map: (ol.Map|undefined),
* visible: (boolean|undefined),
@@ -3550,30 +3366,6 @@ olx.layer.ImageOptions.prototype.maxResolution;
olx.layer.TileOptions;
/**
* Brightness. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.TileOptions.prototype.brightness;
/**
* Contrast. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.TileOptions.prototype.contrast;
/**
* Hue. Default is `0`.
* @type {number|undefined}
* @api
*/
olx.layer.TileOptions.prototype.hue;
/**
* Opacity (0, 1). Default is `1`.
* @type {number|undefined}
@@ -3591,14 +3383,6 @@ olx.layer.TileOptions.prototype.opacity;
olx.layer.TileOptions.prototype.preload;
/**
* Saturation. Default is `1`.
* @type {number|undefined}
* @api
*/
olx.layer.TileOptions.prototype.saturation;
/**
* Source for this layer.
* @type {ol.source.Tile}
@@ -3660,15 +3444,11 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
/**
* @typedef {{brightness: (number|undefined),
* contrast: (number|undefined),
* renderOrder: (function(ol.Feature, ol.Feature):number|null|undefined),
* hue: (number|undefined),
* @typedef {{renderOrder: (function(ol.Feature, ol.Feature):number|null|undefined),
* minResolution: (number|undefined),
* maxResolution: (number|undefined),
* opacity: (number|undefined),
* renderBuffer: (number|undefined),
* saturation: (number|undefined),
* source: (ol.source.Vector|undefined),
* map: (ol.Map|undefined),
* style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
@@ -3680,22 +3460,6 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
olx.layer.VectorOptions;
/**
* Brightness.
* @type {number|undefined}
* @api
*/
olx.layer.VectorOptions.prototype.brightness;
/**
* Contrast.
* @type {number|undefined}
* @api
*/
olx.layer.VectorOptions.prototype.contrast;
/**
* Render order. Function to be used when sorting features before rendering. By
* default features are drawn in the order that they are created. Use `null` to
@@ -3706,14 +3470,6 @@ olx.layer.VectorOptions.prototype.contrast;
olx.layer.VectorOptions.prototype.renderOrder;
/**
* Hue.
* @type {number|undefined}
* @api
*/
olx.layer.VectorOptions.prototype.hue;
/**
* Sets the layer as overlay on a map. The map will not manage this layer in its
* layers collection, and the layer will be rendered on top. This is useful for
@@ -3769,14 +3525,6 @@ olx.layer.VectorOptions.prototype.opacity;
olx.layer.VectorOptions.prototype.renderBuffer;
/**
* Saturation.
* @type {number|undefined}
* @api
*/
olx.layer.VectorOptions.prototype.saturation;
/**
* Source.
* @type {ol.source.Vector}

209
src/ol/color/colormatrix.js
View File

@@ -1,209 +0,0 @@
goog.provide('ol.color.Matrix');
goog.require('goog.vec.Mat4');
goog.require('ol');
/**
* @constructor
*/
ol.color.Matrix = function() {
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.colorMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.brightness_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.brightnessMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.contrast_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.contrastMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.hue_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.hueMatrix_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {number|undefined}
*/
this.saturation_ = undefined;
/**
* @private
* @type {!goog.vec.Mat4.Number}
*/
this.saturationMatrix_ = goog.vec.Mat4.createNumber();
};
/**
* @param {!goog.vec.Mat4.Number} matrix Matrix.
* @param {number} value Brightness value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.makeBrightness = function(matrix, value) {
goog.vec.Mat4.makeTranslate(matrix, value, value, value);
return matrix;
};
/**
* @param {!goog.vec.Mat4.Number} matrix Matrix.
* @param {number} value Contrast value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.makeContrast = function(matrix, value) {
goog.vec.Mat4.makeScale(matrix, value, value, value);
var translateValue = (-0.5 * value + 0.5);
goog.vec.Mat4.setColumnValues(matrix, 3,
translateValue, translateValue, translateValue, 1);
return matrix;
};
/**
* @param {!goog.vec.Mat4.Number} matrix Matrix.
* @param {number} value Hue value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.makeHue = function(matrix, value) {
var cosHue = Math.cos(value);
var sinHue = Math.sin(value);
var v00 = 0.213 + cosHue * 0.787 - sinHue * 0.213;
var v01 = 0.715 - cosHue * 0.715 - sinHue * 0.715;
var v02 = 0.072 - cosHue * 0.072 + sinHue * 0.928;
var v03 = 0;
var v10 = 0.213 - cosHue * 0.213 + sinHue * 0.143;
var v11 = 0.715 + cosHue * 0.285 + sinHue * 0.140;
var v12 = 0.072 - cosHue * 0.072 - sinHue * 0.283;
var v13 = 0;
var v20 = 0.213 - cosHue * 0.213 - sinHue * 0.787;
var v21 = 0.715 - cosHue * 0.715 + sinHue * 0.715;
var v22 = 0.072 + cosHue * 0.928 + sinHue * 0.072;
var v23 = 0;
var v30 = 0;
var v31 = 0;
var v32 = 0;
var v33 = 1;
goog.vec.Mat4.setFromValues(matrix,
v00, v10, v20, v30,
v01, v11, v21, v31,
v02, v12, v22, v32,
v03, v13, v23, v33);
return matrix;
};
/**
* @param {!goog.vec.Mat4.Number} matrix Matrix.
* @param {number} value Saturation value.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.makeSaturation = function(matrix, value) {
var v00 = 0.213 + 0.787 * value;
var v01 = 0.715 - 0.715 * value;
var v02 = 0.072 - 0.072 * value;
var v03 = 0;
var v10 = 0.213 - 0.213 * value;
var v11 = 0.715 + 0.285 * value;
var v12 = 0.072 - 0.072 * value;
var v13 = 0;
var v20 = 0.213 - 0.213 * value;
var v21 = 0.715 - 0.715 * value;
var v22 = 0.072 + 0.928 * value;
var v23 = 0;
var v30 = 0;
var v31 = 0;
var v32 = 0;
var v33 = 1;
goog.vec.Mat4.setFromValues(matrix,
v00, v10, v20, v30,
v01, v11, v21, v31,
v02, v12, v22, v32,
v03, v13, v23, v33);
return matrix;
};
/**
* @param {number|undefined} brightness Brightness.
* @param {number|undefined} contrast Contrast.
* @param {number|undefined} hue Hue.
* @param {number|undefined} saturation Saturation.
* @return {!goog.vec.Mat4.Number} Matrix.
*/
ol.color.Matrix.prototype.getMatrix = function(
brightness, contrast, hue, saturation) {
var colorMatrixDirty = false;
if (brightness !== undefined && brightness !== this.brightness_) {
ol.color.Matrix.makeBrightness(this.brightnessMatrix_,
/** @type {number} */ (brightness));
this.brightness_ = brightness;
colorMatrixDirty = true;
}
if (contrast !== undefined && contrast !== this.contrast_) {
ol.color.Matrix.makeContrast(this.contrastMatrix_,
/** @type {number} */ (contrast));
this.contrast_ = contrast;
colorMatrixDirty = true;
}
if (hue !== undefined && hue !== this.hue_) {
ol.color.Matrix.makeHue(this.hueMatrix_, /** @type {number} */ (hue));
this.hue_ = hue;
colorMatrixDirty = true;
}
if (saturation !== undefined && saturation !== this.saturation_) {
ol.color.Matrix.makeSaturation(this.saturationMatrix_,
/** @type {number} */ (saturation));
this.saturation_ = saturation;
colorMatrixDirty = true;
}
if (colorMatrixDirty) {
var colorMatrix = this.colorMatrix_;
goog.vec.Mat4.makeIdentity(colorMatrix);
if (contrast !== undefined) {
goog.vec.Mat4.multMat(colorMatrix, this.contrastMatrix_, colorMatrix);
}
if (brightness !== undefined) {
goog.vec.Mat4.multMat(colorMatrix, this.brightnessMatrix_, colorMatrix);
}
if (saturation !== undefined) {
goog.vec.Mat4.multMat(colorMatrix, this.saturationMatrix_, colorMatrix);
}
if (hue !== undefined) {
goog.vec.Mat4.multMat(colorMatrix, this.hueMatrix_, colorMatrix);
}
}
return this.colorMatrix_;
};

136
src/ol/layer/layerbase.js
View File

@@ -13,11 +13,7 @@ goog.require('ol.source.State');
* @enum {string}
*/
ol.layer.LayerProperty = {
BRIGHTNESS: 'brightness',
CONTRAST: 'contrast',
HUE: 'hue',
OPACITY: 'opacity',
SATURATION: 'saturation',
VISIBLE: 'visible',
EXTENT: 'extent',
Z_INDEX: 'zIndex',
@@ -29,11 +25,7 @@ ol.layer.LayerProperty = {
/**
* @typedef {{layer: ol.layer.Layer,
* brightness: number,
* contrast: number,
* hue: number,
* opacity: number,
* saturation: number,
* sourceState: ol.source.State,
* visible: boolean,
* managed: boolean,
@@ -67,16 +59,8 @@ ol.layer.Base = function(options) {
* @type {Object.<string, *>}
*/
var properties = goog.object.clone(options);
properties[ol.layer.LayerProperty.BRIGHTNESS] =
options.brightness !== undefined ? options.brightness : 0;
properties[ol.layer.LayerProperty.CONTRAST] =
options.contrast !== undefined ? options.contrast : 1;
properties[ol.layer.LayerProperty.HUE] =
options.hue !== undefined ? options.hue : 0;
properties[ol.layer.LayerProperty.OPACITY] =
options.opacity !== undefined ? options.opacity : 1;
properties[ol.layer.LayerProperty.SATURATION] =
options.saturation !== undefined ? options.saturation : 1;
properties[ol.layer.LayerProperty.VISIBLE] =
options.visible !== undefined ? options.visible : true;
properties[ol.layer.LayerProperty.Z_INDEX] =
@@ -91,48 +75,11 @@ ol.layer.Base = function(options) {
goog.inherits(ol.layer.Base, ol.Object);
/**
* Return the brightness of the layer.
* @return {number} The brightness of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.getBrightness = function() {
return /** @type {number} */ (this.get(ol.layer.LayerProperty.BRIGHTNESS));
};
/**
* Return the contrast of the layer.
* @return {number} The contrast of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.getContrast = function() {
return /** @type {number} */ (this.get(ol.layer.LayerProperty.CONTRAST));
};
/**
* Return the hue of the layer.
* @return {number} The hue of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.getHue = function() {
return /** @type {number} */ (this.get(ol.layer.LayerProperty.HUE));
};
/**
* @return {ol.layer.LayerState} Layer state.
*/
ol.layer.Base.prototype.getLayerState = function() {
var brightness = this.getBrightness();
var contrast = this.getContrast();
var hue = this.getHue();
var opacity = this.getOpacity();
var saturation = this.getSaturation();
var sourceState = this.getSourceState();
var visible = this.getVisible();
var extent = this.getExtent();
@@ -141,11 +88,7 @@ ol.layer.Base.prototype.getLayerState = function() {
var minResolution = this.getMinResolution();
return {
layer: /** @type {ol.layer.Layer} */ (this),
brightness: ol.math.clamp(brightness, -1, 1),
contrast: Math.max(contrast, 0),
hue: hue,
opacity: ol.math.clamp(opacity, 0, 1),
saturation: Math.max(saturation, 0),
sourceState: sourceState,
visible: visible,
managed: true,
@@ -221,17 +164,6 @@ ol.layer.Base.prototype.getOpacity = function() {
};
/**
* Return the saturation of the layer.
* @return {number} The saturation of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.getSaturation = function() {
return /** @type {number} */ (this.get(ol.layer.LayerProperty.SATURATION));
};
/**
* @return {ol.source.State} Source state.
*/
@@ -261,59 +193,6 @@ ol.layer.Base.prototype.getZIndex = function() {
};
/**
* Adjust the layer brightness. A value of -1 will render the layer completely
* black. A value of 0 will leave the brightness unchanged. A value of 1 will
* render the layer completely white. Other values are linear multipliers on
* the effect (values are clamped between -1 and 1).
*
* The filter effects draft [1] says the brightness function is supposed to
* render 0 black, 1 unchanged, and all other values as a linear multiplier.
*
* The current WebKit implementation clamps values between -1 (black) and 1
* (white) [2]. There is a bug open to change the filter effect spec [3].
*
* TODO: revisit this if the spec is still unmodified before we release
*
* [1] https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
* [2] https://github.com/WebKit/webkit/commit/8f4765e569
* [3] https://www.w3.org/Bugs/Public/show_bug.cgi?id=15647
*
* @param {number} brightness The brightness of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.setBrightness = function(brightness) {
this.set(ol.layer.LayerProperty.BRIGHTNESS, brightness);
};
/**
* Adjust the layer contrast. A value of 0 will render the layer completely
* grey. A value of 1 will leave the contrast unchanged. Other values are
* linear multipliers on the effect (and values over 1 are permitted).
*
* @param {number} contrast The contrast of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.setContrast = function(contrast) {
this.set(ol.layer.LayerProperty.CONTRAST, contrast);
};
/**
* Apply a hue-rotation to the layer. A value of 0 will leave the hue
* unchanged. Other values are radians around the color circle.
* @param {number} hue The hue of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.setHue = function(hue) {
this.set(ol.layer.LayerProperty.HUE, hue);
};
/**
* Set the extent at which the layer is visible. If `undefined`, the layer
* will be visible at all extents.
@@ -359,21 +238,6 @@ ol.layer.Base.prototype.setOpacity = function(opacity) {
};
/**
* Adjust layer saturation. A value of 0 will render the layer completely
* unsaturated. A value of 1 will leave the saturation unchanged. Other
* values are linear multipliers of the effect (and values over 1 are
* permitted).
*
* @param {number} saturation The saturation of the layer.
* @observable
* @api
*/
ol.layer.Base.prototype.setSaturation = function(saturation) {
this.set(ol.layer.LayerProperty.SATURATION, saturation);
};
/**
* Set the visibility of the layer (`true` or `false`).
* @param {boolean} visible The visibility of the layer.

6
src/ol/layer/layergroup.js
View File

@@ -12,7 +12,6 @@ goog.require('ol.Object');
goog.require('ol.ObjectEventType');
goog.require('ol.extent');
goog.require('ol.layer.Base');
goog.require('ol.math');
goog.require('ol.source.State');
@@ -215,12 +214,7 @@ ol.layer.Group.prototype.getLayerStatesArray = function(opt_states) {
var i, ii, layerState;
for (i = pos, ii = states.length; i < ii; i++) {
layerState = states[i];
layerState.brightness = ol.math.clamp(
layerState.brightness + ownLayerState.brightness, -1, 1);
layerState.contrast *= ownLayerState.contrast;
layerState.hue += ownLayerState.hue;
layerState.opacity *= ownLayerState.opacity;
layerState.saturation *= ownLayerState.saturation;
layerState.visible = layerState.visible && ownLayerState.visible;
layerState.maxResolution = Math.min(
layerState.maxResolution, ownLayerState.maxResolution);

46
src/ol/render/webgl/webglimagecolor.glsl
View File

@@ -1,46 +0,0 @@
//! NAMESPACE=ol.render.webgl.imagereplay.shader.Color
//! CLASS=ol.render.webgl.imagereplay.shader.Color
//! COMMON
varying vec2 v_texCoord;
varying float v_opacity;
//! VERTEX
attribute vec2 a_position;
attribute vec2 a_texCoord;
attribute vec2 a_offsets;
attribute float a_opacity;
attribute float a_rotateWithView;
uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetScaleMatrix;
uniform mat4 u_offsetRotateMatrix;
void main(void) {
mat4 offsetMatrix = u_offsetScaleMatrix;
if (a_rotateWithView == 1.0) {
offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;
}
vec4 offsets = offsetMatrix * vec4(a_offsets, 0., 0.);
gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + offsets;
v_texCoord = a_texCoord;
v_opacity = a_opacity;
}
//! FRAGMENT
// @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp
uniform mat4 u_colorMatrix;
uniform float u_opacity;
uniform sampler2D u_image;
void main(void) {
vec4 texColor = texture2D(u_image, v_texCoord);
float alpha = texColor.a * v_opacity * u_opacity;
if (alpha == 0.0) {
discard;
}
gl_FragColor.a = alpha;
gl_FragColor.rgb = (u_colorMatrix * vec4(texColor.rgb, 1.)).rgb;
}

156
src/ol/render/webgl/webglimagecolorshader.js
View File

@@ -1,156 +0,0 @@
// This file is automatically generated, do not edit
goog.provide('ol.render.webgl.imagereplay.shader.Color');
goog.provide('ol.render.webgl.imagereplay.shader.Color.Locations');
goog.provide('ol.render.webgl.imagereplay.shader.ColorFragment');
goog.provide('ol.render.webgl.imagereplay.shader.ColorVertex');
goog.require('ol.webgl.shader');
/**
* @constructor
* @extends {ol.webgl.shader.Fragment}
* @struct
*/
ol.render.webgl.imagereplay.shader.ColorFragment = function() {
goog.base(this, ol.render.webgl.imagereplay.shader.ColorFragment.SOURCE);
};
goog.inherits(ol.render.webgl.imagereplay.shader.ColorFragment, ol.webgl.shader.Fragment);
goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.ColorFragment);
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.ColorFragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\nvarying float v_opacity;\n\n// @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp\nuniform mat4 u_colorMatrix;\nuniform float u_opacity;\nuniform sampler2D u_image;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_image, v_texCoord);\n float alpha = texColor.a * v_opacity * u_opacity;\n if (alpha == 0.0) {\n discard;\n }\n gl_FragColor.a = alpha;\n gl_FragColor.rgb = (u_colorMatrix * vec4(texColor.rgb, 1.)).rgb;\n}\n';
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.ColorFragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;varying float b;uniform mat4 k;uniform float l;uniform sampler2D m;void main(void){vec4 texColor=texture2D(m,a);float alpha=texColor.a*b*l;if(alpha==0.0){discard;}gl_FragColor.a=alpha;gl_FragColor.rgb=(k*vec4(texColor.rgb,1.)).rgb;}';
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.ColorFragment.SOURCE = goog.DEBUG ?
ol.render.webgl.imagereplay.shader.ColorFragment.DEBUG_SOURCE :
ol.render.webgl.imagereplay.shader.ColorFragment.OPTIMIZED_SOURCE;
/**
* @constructor
* @extends {ol.webgl.shader.Vertex}
* @struct
*/
ol.render.webgl.imagereplay.shader.ColorVertex = function() {
goog.base(this, ol.render.webgl.imagereplay.shader.ColorVertex.SOURCE);
};
goog.inherits(ol.render.webgl.imagereplay.shader.ColorVertex, ol.webgl.shader.Vertex);
goog.addSingletonGetter(ol.render.webgl.imagereplay.shader.ColorVertex);
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.ColorVertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\nvarying float v_opacity;\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nattribute vec2 a_offsets;\nattribute float a_opacity;\nattribute float a_rotateWithView;\n\nuniform mat4 u_projectionMatrix;\nuniform mat4 u_offsetScaleMatrix;\nuniform mat4 u_offsetRotateMatrix;\n\nvoid main(void) {\n mat4 offsetMatrix = u_offsetScaleMatrix;\n if (a_rotateWithView == 1.0) {\n offsetMatrix = u_offsetScaleMatrix * u_offsetRotateMatrix;\n }\n vec4 offsets = offsetMatrix * vec4(a_offsets, 0., 0.);\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.) + offsets;\n v_texCoord = a_texCoord;\n v_opacity = a_opacity;\n}\n\n\n';
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.ColorVertex.OPTIMIZED_SOURCE = 'varying vec2 a;varying float b;attribute vec2 c;attribute vec2 d;attribute vec2 e;attribute float f;attribute float g;uniform mat4 h;uniform mat4 i;uniform mat4 j;void main(void){mat4 offsetMatrix=i;if(g==1.0){offsetMatrix=i*j;}vec4 offsets=offsetMatrix*vec4(e,0.,0.);gl_Position=h*vec4(c,0.,1.)+offsets;a=d;b=f;}';
/**
* @const
* @type {string}
*/
ol.render.webgl.imagereplay.shader.ColorVertex.SOURCE = goog.DEBUG ?
ol.render.webgl.imagereplay.shader.ColorVertex.DEBUG_SOURCE :
ol.render.webgl.imagereplay.shader.ColorVertex.OPTIMIZED_SOURCE;
/**
* @constructor
* @param {WebGLRenderingContext} gl GL.
* @param {WebGLProgram} program Program.
* @struct
*/
ol.render.webgl.imagereplay.shader.Color.Locations = function(gl, program) {
/**
* @type {WebGLUniformLocation}
*/
this.u_colorMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_colorMatrix' : 'k');
/**
* @type {WebGLUniformLocation}
*/
this.u_image = gl.getUniformLocation(
program, goog.DEBUG ? 'u_image' : 'm');
/**
* @type {WebGLUniformLocation}
*/
this.u_offsetRotateMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_offsetRotateMatrix' : 'j');
/**
* @type {WebGLUniformLocation}
*/
this.u_offsetScaleMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_offsetScaleMatrix' : 'i');
/**
* @type {WebGLUniformLocation}
*/
this.u_opacity = gl.getUniformLocation(
program, goog.DEBUG ? 'u_opacity' : 'l');
/**
* @type {WebGLUniformLocation}
*/
this.u_projectionMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_projectionMatrix' : 'h');
/**
* @type {number}
*/
this.a_offsets = gl.getAttribLocation(
program, goog.DEBUG ? 'a_offsets' : 'e');
/**
* @type {number}
*/
this.a_opacity = gl.getAttribLocation(
program, goog.DEBUG ? 'a_opacity' : 'f');
/**
* @type {number}
*/
this.a_position = gl.getAttribLocation(
program, goog.DEBUG ? 'a_position' : 'c');
/**
* @type {number}
*/
this.a_rotateWithView = gl.getAttribLocation(
program, goog.DEBUG ? 'a_rotateWithView' : 'g');
/**
* @type {number}
*/
this.a_texCoord = gl.getAttribLocation(
program, goog.DEBUG ? 'a_texCoord' : 'd');
};

17
src/ol/render/webgl/webglimmediate.js
View File

@@ -186,16 +186,12 @@ ol.render.webgl.Immediate.prototype.drawPointGeometry =
replay.finish(context);
// default colors
var opacity = 1;
var brightness = 0;
var contrast = 1;
var hue = 0;
var saturation = 1;
var skippedFeatures = {};
var featureCallback;
var oneByOne = false;
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
this.size_, this.pixelRatio_, opacity, brightness,
contrast, hue, saturation, skippedFeatures, featureCallback, oneByOne);
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
oneByOne);
replay.getDeleteResourcesFunction(context)();
};
@@ -231,18 +227,13 @@ ol.render.webgl.Immediate.prototype.drawMultiPointGeometry =
replay.setImageStyle(this.imageStyle_);
replay.drawMultiPointGeometry(multiPointGeometry, data);
replay.finish(context);
// default colors
var opacity = 1;
var brightness = 0;
var contrast = 1;
var hue = 0;
var saturation = 1;
var skippedFeatures = {};
var featureCallback;
var oneByOne = false;
replay.replay(this.context_, this.center_, this.resolution_, this.rotation_,
this.size_, this.pixelRatio_, opacity, brightness,
contrast, hue, saturation, skippedFeatures, featureCallback, oneByOne);
this.size_, this.pixelRatio_, opacity, skippedFeatures, featureCallback,
oneByOne);
replay.getDeleteResourcesFunction(context)();
};

103
src/ol/render/webgl/webglreplay.js
View File

@@ -5,14 +5,9 @@ goog.require('goog.asserts');
goog.require('goog.functions');
goog.require('goog.object');
goog.require('goog.vec.Mat4');
goog.require('ol.color.Matrix');
goog.require('ol.extent');
goog.require('ol.render.IReplayGroup');
goog.require('ol.render.VectorContext');
goog.require('ol.render.webgl.imagereplay.shader.Color');
goog.require('ol.render.webgl.imagereplay.shader.Color.Locations');
goog.require('ol.render.webgl.imagereplay.shader.ColorFragment');
goog.require('ol.render.webgl.imagereplay.shader.ColorVertex');
goog.require('ol.render.webgl.imagereplay.shader.Default');
goog.require('ol.render.webgl.imagereplay.shader.Default.Locations');
goog.require('ol.render.webgl.imagereplay.shader.DefaultFragment');
@@ -46,12 +41,6 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
*/
this.anchorY_ = undefined;
/**
* @private
* @type {ol.color.Matrix}
*/
this.colorMatrix_ = new ol.color.Matrix();
/**
* The origin of the coordinate system for the point coordinates sent to
* the GPU. To eliminate jitter caused by precision problems in the GPU
@@ -116,12 +105,6 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) {
*/
this.indicesBuffer_ = null;
/**
* @private
* @type {ol.render.webgl.imagereplay.shader.Color.Locations}
*/
this.colorLocations_ = null;
/**
* @private
* @type {ol.render.webgl.imagereplay.shader.Default.Locations}
@@ -515,10 +498,6 @@ ol.render.webgl.ImageReplay.prototype.createTextures_ =
* @param {ol.Size} size Size.
* @param {number} pixelRatio Pixel ratio.
* @param {number} opacity Global opacity.
* @param {number} brightness Global brightness.
* @param {number} contrast Global contrast.
* @param {number} hue Global hue.
* @param {number} saturation Global saturation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @param {function(ol.Feature): T|undefined} featureCallback Feature callback.
@@ -530,7 +509,7 @@ ol.render.webgl.ImageReplay.prototype.createTextures_ =
*/
ol.render.webgl.ImageReplay.prototype.replay = function(context,
center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation, skippedFeaturesHash,
opacity, skippedFeaturesHash,
featureCallback, oneByOne, opt_hitExtent) {
var gl = context.getGL();
@@ -544,41 +523,21 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
'indecesBuffer must not be null');
context.bindBuffer(goog.webgl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
var useColor = brightness || contrast != 1 || hue || saturation != 1;
// get the program
var fragmentShader, vertexShader;
if (useColor) {
fragmentShader =
ol.render.webgl.imagereplay.shader.ColorFragment.getInstance();
vertexShader =
ol.render.webgl.imagereplay.shader.ColorVertex.getInstance();
} else {
fragmentShader =
ol.render.webgl.imagereplay.shader.DefaultFragment.getInstance();
vertexShader =
ol.render.webgl.imagereplay.shader.DefaultVertex.getInstance();
}
var fragmentShader =
ol.render.webgl.imagereplay.shader.DefaultFragment.getInstance();
var vertexShader =
ol.render.webgl.imagereplay.shader.DefaultVertex.getInstance();
var program = context.getProgram(fragmentShader, vertexShader);
// get the locations
var locations;
if (useColor) {
if (goog.isNull(this.colorLocations_)) {
locations =
new ol.render.webgl.imagereplay.shader.Color.Locations(gl, program);
this.colorLocations_ = locations;
} else {
locations = this.colorLocations_;
}
if (goog.isNull(this.defaultLocations_)) {
locations =
new ol.render.webgl.imagereplay.shader.Default.Locations(gl, program);
this.defaultLocations_ = locations;
} else {
if (goog.isNull(this.defaultLocations_)) {
locations =
new ol.render.webgl.imagereplay.shader.Default.Locations(gl, program);
this.defaultLocations_ = locations;
} else {
locations = this.defaultLocations_;
}
locations = this.defaultLocations_;
}
// use the program (FIXME: use the return value)
@@ -628,10 +587,6 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context,
gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false,
offsetRotateMatrix);
gl.uniform1f(locations.u_opacity, opacity);
if (useColor) {
gl.uniformMatrix4fv(locations.u_colorMatrix, false,
this.colorMatrix_.getMatrix(brightness, contrast, hue, saturation));
}
// draw!
var result;
@@ -1067,23 +1022,19 @@ ol.render.webgl.ReplayGroup.prototype.isEmpty = function() {
* @param {ol.Size} size Size.
* @param {number} pixelRatio Pixel ratio.
* @param {number} opacity Global opacity.
* @param {number} brightness Global brightness.
* @param {number} contrast Global contrast.
* @param {number} hue Global hue.
* @param {number} saturation Global saturation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
*/
ol.render.webgl.ReplayGroup.prototype.replay = function(context,
center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation, skippedFeaturesHash) {
opacity, skippedFeaturesHash) {
var i, ii, replay, result;
for (i = 0, ii = ol.render.REPLAY_ORDER.length; i < ii; ++i) {
replay = this.replays_[ol.render.REPLAY_ORDER[i]];
if (replay !== undefined) {
replay.replay(context,
center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation, skippedFeaturesHash,
opacity, skippedFeaturesHash,
undefined, false);
}
}
@@ -1099,10 +1050,6 @@ ol.render.webgl.ReplayGroup.prototype.replay = function(context,
* @param {ol.Size} size Size.
* @param {number} pixelRatio Pixel ratio.
* @param {number} opacity Global opacity.
* @param {number} brightness Global brightness.
* @param {number} contrast Global contrast.
* @param {number} hue Global hue.
* @param {number} saturation Global saturation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @param {function(ol.Feature): T|undefined} featureCallback Feature callback.
@@ -1113,16 +1060,14 @@ ol.render.webgl.ReplayGroup.prototype.replay = function(context,
* @template T
*/
ol.render.webgl.ReplayGroup.prototype.replayHitDetection_ = function(context,
center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation, skippedFeaturesHash,
featureCallback, oneByOne, opt_hitExtent) {
center, resolution, rotation, size, pixelRatio, opacity,
skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent) {
var i, replay, result;
for (i = ol.render.REPLAY_ORDER.length - 1; i >= 0; --i) {
replay = this.replays_[ol.render.REPLAY_ORDER[i]];
if (replay !== undefined) {
result = replay.replay(context,
center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation,
center, resolution, rotation, size, pixelRatio, opacity,
skippedFeaturesHash, featureCallback, oneByOne, opt_hitExtent);
if (result) {
return result;
@@ -1142,10 +1087,6 @@ ol.render.webgl.ReplayGroup.prototype.replayHitDetection_ = function(context,
* @param {ol.Size} size Size.
* @param {number} pixelRatio Pixel ratio.
* @param {number} opacity Global opacity.
* @param {number} brightness Global brightness.
* @param {number} contrast Global contrast.
* @param {number} hue Global hue.
* @param {number} saturation Global saturation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @param {function(ol.Feature): T|undefined} callback Feature callback.
@@ -1154,7 +1095,7 @@ ol.render.webgl.ReplayGroup.prototype.replayHitDetection_ = function(context,
*/
ol.render.webgl.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
coordinate, context, center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation, skippedFeaturesHash,
opacity, skippedFeaturesHash,
callback) {
var gl = context.getGL();
gl.bindFramebuffer(
@@ -1175,8 +1116,7 @@ ol.render.webgl.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
return this.replayHitDetection_(context,
coordinate, resolution, rotation, ol.render.webgl.HIT_DETECTION_SIZE_,
pixelRatio, opacity, brightness, contrast, hue, saturation,
skippedFeaturesHash,
pixelRatio, opacity, skippedFeaturesHash,
/**
* @param {ol.Feature} feature Feature.
* @return {?} Callback result.
@@ -1204,25 +1144,20 @@ ol.render.webgl.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
* @param {ol.Size} size Size.
* @param {number} pixelRatio Pixel ratio.
* @param {number} opacity Global opacity.
* @param {number} brightness Global brightness.
* @param {number} contrast Global contrast.
* @param {number} hue Global hue.
* @param {number} saturation Global saturation.
* @param {Object.<string, boolean>} skippedFeaturesHash Ids of features
* to skip.
* @return {boolean} Is there a feature at the given coordinate?
*/
ol.render.webgl.ReplayGroup.prototype.hasFeatureAtCoordinate = function(
coordinate, context, center, resolution, rotation, size, pixelRatio,
opacity, brightness, contrast, hue, saturation, skippedFeaturesHash) {
opacity, skippedFeaturesHash) {
var gl = context.getGL();
gl.bindFramebuffer(
gl.FRAMEBUFFER, context.getHitDetectionFramebuffer());
var hasFeature = this.replayHitDetection_(context,
coordinate, resolution, rotation, ol.render.webgl.HIT_DETECTION_SIZE_,
pixelRatio, opacity, brightness, contrast, hue, saturation,
skippedFeaturesHash,
pixelRatio, opacity, skippedFeaturesHash,
/**
* @param {ol.Feature} feature Feature.
* @return {boolean} Is there a feature?

65
src/ol/renderer/webgl/webgllayerrenderer.js
View File

@@ -2,16 +2,11 @@ goog.provide('ol.renderer.webgl.Layer');
goog.require('goog.vec.Mat4');
goog.require('goog.webgl');
goog.require('ol.color.Matrix');
goog.require('ol.layer.Layer');
goog.require('ol.render.Event');
goog.require('ol.render.EventType');
goog.require('ol.render.webgl.Immediate');
goog.require('ol.renderer.Layer');
goog.require('ol.renderer.webgl.map.shader.Color');
goog.require('ol.renderer.webgl.map.shader.Color.Locations');
goog.require('ol.renderer.webgl.map.shader.ColorFragment');
goog.require('ol.renderer.webgl.map.shader.ColorVertex');
goog.require('ol.renderer.webgl.map.shader.Default');
goog.require('ol.renderer.webgl.map.shader.Default.Locations');
goog.require('ol.renderer.webgl.map.shader.DefaultFragment');
@@ -78,18 +73,6 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) {
*/
this.projectionMatrix = goog.vec.Mat4.createNumberIdentity();
/**
* @private
* @type {ol.color.Matrix}
*/
this.colorMatrix_ = new ol.color.Matrix();
/**
* @private
* @type {ol.renderer.webgl.map.shader.Color.Locations}
*/
this.colorLocations_ = null;
/**
* @private
* @type {ol.renderer.webgl.map.shader.Default.Locations}
@@ -161,42 +144,19 @@ ol.renderer.webgl.Layer.prototype.composeFrame =
var gl = context.getGL();
var useColor =
layerState.brightness ||
layerState.contrast != 1 ||
layerState.hue ||
layerState.saturation != 1;
var fragmentShader, vertexShader;
if (useColor) {
fragmentShader = ol.renderer.webgl.map.shader.ColorFragment.getInstance();
vertexShader = ol.renderer.webgl.map.shader.ColorVertex.getInstance();
} else {
fragmentShader =
ol.renderer.webgl.map.shader.DefaultFragment.getInstance();
vertexShader = ol.renderer.webgl.map.shader.DefaultVertex.getInstance();
}
var fragmentShader =
ol.renderer.webgl.map.shader.DefaultFragment.getInstance();
var vertexShader = ol.renderer.webgl.map.shader.DefaultVertex.getInstance();
var program = context.getProgram(fragmentShader, vertexShader);
// FIXME colorLocations_ and defaultLocations_ should be shared somehow
var locations;
if (useColor) {
if (goog.isNull(this.colorLocations_)) {
locations =
new ol.renderer.webgl.map.shader.Color.Locations(gl, program);
this.colorLocations_ = locations;
} else {
locations = this.colorLocations_;
}
if (goog.isNull(this.defaultLocations_)) {
locations =
new ol.renderer.webgl.map.shader.Default.Locations(gl, program);
this.defaultLocations_ = locations;
} else {
if (goog.isNull(this.defaultLocations_)) {
locations =
new ol.renderer.webgl.map.shader.Default.Locations(gl, program);
this.defaultLocations_ = locations;
} else {
locations = this.defaultLocations_;
}
locations = this.defaultLocations_;
}
if (context.useProgram(program)) {
@@ -213,15 +173,6 @@ ol.renderer.webgl.Layer.prototype.composeFrame =
locations.u_texCoordMatrix, false, this.getTexCoordMatrix());
gl.uniformMatrix4fv(locations.u_projectionMatrix, false,
this.getProjectionMatrix());
if (useColor) {
gl.uniformMatrix4fv(locations.u_colorMatrix, false,
this.colorMatrix_.getMatrix(
layerState.brightness,
layerState.contrast,
layerState.hue,
layerState.saturation
));
}
gl.uniform1f(locations.u_opacity, layerState.opacity);
gl.bindTexture(goog.webgl.TEXTURE_2D, this.getTexture());
gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4);

32
src/ol/renderer/webgl/webglmapcolor.glsl
View File

@@ -1,32 +0,0 @@
//! NAMESPACE=ol.renderer.webgl.map.shader.Color
//! CLASS=ol.renderer.webgl.map.shader.Color
//! COMMON
varying vec2 v_texCoord;
//! VERTEX
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform mat4 u_texCoordMatrix;
uniform mat4 u_projectionMatrix;
void main(void) {
gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);
v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;
}
//! FRAGMENT
// @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp
uniform mat4 u_colorMatrix;
uniform float u_opacity;
uniform sampler2D u_texture;
void main(void) {
vec4 texColor = texture2D(u_texture, v_texCoord);
gl_FragColor.rgb = (u_colorMatrix * vec4(texColor.rgb, 1.)).rgb;
gl_FragColor.a = texColor.a * u_opacity;
}

132
src/ol/renderer/webgl/webglmapcolorshader.js
View File

@@ -1,132 +0,0 @@
// This file is automatically generated, do not edit
goog.provide('ol.renderer.webgl.map.shader.Color');
goog.provide('ol.renderer.webgl.map.shader.Color.Locations');
goog.provide('ol.renderer.webgl.map.shader.ColorFragment');
goog.provide('ol.renderer.webgl.map.shader.ColorVertex');
goog.require('ol.webgl.shader');
/**
* @constructor
* @extends {ol.webgl.shader.Fragment}
* @struct
*/
ol.renderer.webgl.map.shader.ColorFragment = function() {
goog.base(this, ol.renderer.webgl.map.shader.ColorFragment.SOURCE);
};
goog.inherits(ol.renderer.webgl.map.shader.ColorFragment, ol.webgl.shader.Fragment);
goog.addSingletonGetter(ol.renderer.webgl.map.shader.ColorFragment);
/**
* @const
* @type {string}
*/
ol.renderer.webgl.map.shader.ColorFragment.DEBUG_SOURCE = 'precision mediump float;\nvarying vec2 v_texCoord;\n\n\n// @see https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/platform/graphics/filters/skia/SkiaImageFilterBuilder.cpp\nuniform mat4 u_colorMatrix;\nuniform float u_opacity;\nuniform sampler2D u_texture;\n\nvoid main(void) {\n vec4 texColor = texture2D(u_texture, v_texCoord);\n gl_FragColor.rgb = (u_colorMatrix * vec4(texColor.rgb, 1.)).rgb;\n gl_FragColor.a = texColor.a * u_opacity;\n}\n';
/**
* @const
* @type {string}
*/
ol.renderer.webgl.map.shader.ColorFragment.OPTIMIZED_SOURCE = 'precision mediump float;varying vec2 a;uniform mat4 f;uniform float g;uniform sampler2D h;void main(void){vec4 texColor=texture2D(h,a);gl_FragColor.rgb=(f*vec4(texColor.rgb,1.)).rgb;gl_FragColor.a=texColor.a*g;}';
/**
* @const
* @type {string}
*/
ol.renderer.webgl.map.shader.ColorFragment.SOURCE = goog.DEBUG ?
ol.renderer.webgl.map.shader.ColorFragment.DEBUG_SOURCE :
ol.renderer.webgl.map.shader.ColorFragment.OPTIMIZED_SOURCE;
/**
* @constructor
* @extends {ol.webgl.shader.Vertex}
* @struct
*/
ol.renderer.webgl.map.shader.ColorVertex = function() {
goog.base(this, ol.renderer.webgl.map.shader.ColorVertex.SOURCE);
};
goog.inherits(ol.renderer.webgl.map.shader.ColorVertex, ol.webgl.shader.Vertex);
goog.addSingletonGetter(ol.renderer.webgl.map.shader.ColorVertex);
/**
* @const
* @type {string}
*/
ol.renderer.webgl.map.shader.ColorVertex.DEBUG_SOURCE = 'varying vec2 v_texCoord;\n\n\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform mat4 u_texCoordMatrix;\nuniform mat4 u_projectionMatrix;\n\nvoid main(void) {\n gl_Position = u_projectionMatrix * vec4(a_position, 0., 1.);\n v_texCoord = (u_texCoordMatrix * vec4(a_texCoord, 0., 1.)).st;\n}\n\n\n';
/**
* @const
* @type {string}
*/
ol.renderer.webgl.map.shader.ColorVertex.OPTIMIZED_SOURCE = 'varying vec2 a;attribute vec2 b;attribute vec2 c;uniform mat4 d;uniform mat4 e;void main(void){gl_Position=e*vec4(b,0.,1.);a=(d*vec4(c,0.,1.)).st;}';
/**
* @const
* @type {string}
*/
ol.renderer.webgl.map.shader.ColorVertex.SOURCE = goog.DEBUG ?
ol.renderer.webgl.map.shader.ColorVertex.DEBUG_SOURCE :
ol.renderer.webgl.map.shader.ColorVertex.OPTIMIZED_SOURCE;
/**
* @constructor
* @param {WebGLRenderingContext} gl GL.
* @param {WebGLProgram} program Program.
* @struct
*/
ol.renderer.webgl.map.shader.Color.Locations = function(gl, program) {
/**
* @type {WebGLUniformLocation}
*/
this.u_colorMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_colorMatrix' : 'f');
/**
* @type {WebGLUniformLocation}
*/
this.u_opacity = gl.getUniformLocation(
program, goog.DEBUG ? 'u_opacity' : 'g');
/**
* @type {WebGLUniformLocation}
*/
this.u_projectionMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_projectionMatrix' : 'e');
/**
* @type {WebGLUniformLocation}
*/
this.u_texCoordMatrix = gl.getUniformLocation(
program, goog.DEBUG ? 'u_texCoordMatrix' : 'd');
/**
* @type {WebGLUniformLocation}
*/
this.u_texture = gl.getUniformLocation(
program, goog.DEBUG ? 'u_texture' : 'h');
/**
* @type {number}
*/
this.a_position = gl.getAttribLocation(
program, goog.DEBUG ? 'a_position' : 'b');
/**
* @type {number}
*/
this.a_texCoord = gl.getAttribLocation(
program, goog.DEBUG ? 'a_texCoord' : 'c');
};

11
src/ol/renderer/webgl/webglvectorlayerrenderer.js
View File

@@ -82,8 +82,6 @@ ol.renderer.webgl.VectorLayer.prototype.composeFrame =
replayGroup.replay(context,
viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio, layerState.opacity,
layerState.brightness, layerState.contrast, layerState.hue,
layerState.saturation,
layerState.managed ? frameState.skippedFeatureUids : {});
}
@@ -120,9 +118,7 @@ ol.renderer.webgl.VectorLayer.prototype.forEachFeatureAtCoordinate =
var features = {};
return this.replayGroup_.forEachFeatureAtCoordinate(coordinate,
context, viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio,
layerState.opacity, layerState.brightness, layerState.contrast,
layerState.hue, layerState.saturation,
frameState.size, frameState.pixelRatio, layerState.opacity,
layerState.managed ? frameState.skippedFeatureUids : {},
/**
* @param {ol.Feature} feature Feature.
@@ -153,9 +149,8 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate =
var layerState = this.layerState_;
return this.replayGroup_.hasFeatureAtCoordinate(coordinate,
context, viewState.center, viewState.resolution, viewState.rotation,
frameState.size, frameState.pixelRatio,
layerState.opacity, layerState.brightness, layerState.contrast,
layerState.hue, layerState.saturation, frameState.skippedFeatureUids);
frameState.size, frameState.pixelRatio, layerState.opacity,
frameState.skippedFeatureUids);
}
};

208
test/spec/ol/layer/layer.test.js
View File

@@ -22,26 +22,10 @@ describe('ol.layer.Layer', function() {
expect(layer).to.be.a(ol.layer.Layer);
});
it('provides default brightness', function() {
expect(layer.getBrightness()).to.be(0);
});
it('provides default contrast', function() {
expect(layer.getContrast()).to.be(1);
});
it('provides default hue', function() {
expect(layer.getHue()).to.be(0);
});
it('provides default opacity', function() {
expect(layer.getOpacity()).to.be(1);
});
it('provides default saturation', function() {
expect(layer.getSaturation()).to.be(1);
});
it('provides default visibility', function() {
expect(layer.getVisible()).to.be(true);
});
@@ -57,11 +41,7 @@ describe('ol.layer.Layer', function() {
it('provides default layerState', function() {
expect(layer.getLayerState()).to.eql({
layer: layer,
brightness: 0,
contrast: 1,
hue: 0,
opacity: 1,
saturation: 1,
visible: true,
managed: true,
sourceState: ol.source.State.READY,
@@ -81,11 +61,7 @@ describe('ol.layer.Layer', function() {
source: new ol.source.Source({
projection: ol.proj.get('EPSG:4326')
}),
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
zIndex: 10,
maxResolution: 500,
@@ -93,22 +69,14 @@ describe('ol.layer.Layer', function() {
foo: 42
});
expect(layer.getBrightness()).to.be(0.5);
expect(layer.getContrast()).to.be(10);
expect(layer.getHue()).to.be(180);
expect(layer.getOpacity()).to.be(0.5);
expect(layer.getSaturation()).to.be(5);
expect(layer.getVisible()).to.be(false);
expect(layer.getMaxResolution()).to.be(500);
expect(layer.getMinResolution()).to.be(0.25);
expect(layer.get('foo')).to.be(42);
expect(layer.getLayerState()).to.eql({
layer: layer,
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -189,22 +157,14 @@ describe('ol.layer.Layer', function() {
});
it('returns a layerState from the properties values', function() {
layer.setBrightness(-0.7);
layer.setContrast(0.3);
layer.setHue(-0.3);
layer.setOpacity(0.3);
layer.setSaturation(0.3);
layer.setVisible(false);
layer.setMaxResolution(500);
layer.setMinResolution(0.25);
layer.setZIndex(10);
expect(layer.getLayerState()).to.eql({
layer: layer,
brightness: -0.7,
contrast: 0.3,
hue: -0.3,
opacity: 0.3,
saturation: 0.3,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -216,19 +176,11 @@ describe('ol.layer.Layer', function() {
});
it('returns a layerState with clamped values', function() {
layer.setBrightness(1.5);
layer.setContrast(-0.7);
layer.setHue(42);
layer.setOpacity(-1.5);
layer.setSaturation(-0.7);
layer.setVisible(false);
expect(layer.getLayerState()).to.eql({
layer: layer,
brightness: 1,
contrast: 0,
hue: 42,
opacity: 0,
saturation: 0,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -238,19 +190,11 @@ describe('ol.layer.Layer', function() {
minResolution: 0
});
layer.setBrightness(-3);
layer.setContrast(42);
layer.setHue(-100);
layer.setOpacity(3);
layer.setSaturation(42);
layer.setVisible(true);
expect(layer.getLayerState()).to.eql({
layer: layer,
brightness: -1,
contrast: 42,
hue: -100,
opacity: 1,
saturation: 42,
visible: true,
managed: true,
sourceState: ol.source.State.READY,
@@ -365,122 +309,6 @@ describe('ol.layer.Layer', function() {
});
describe('#setBrightness', function() {
var layer;
beforeEach(function() {
layer = new ol.layer.Layer({
source: new ol.source.Source({
projection: ol.proj.get('EPSG:4326')
})
});
});
afterEach(function() {
goog.dispose(layer);
});
it('accepts a positive number', function() {
layer.setBrightness(0.3);
expect(layer.getBrightness()).to.be(0.3);
});
it('accepts a negative number', function() {
layer.setBrightness(-0.7);
expect(layer.getBrightness()).to.be(-0.7);
});
it('triggers a change event', function() {
var listener = sinon.spy();
layer.on(ol.ObjectEventType.PROPERTYCHANGE, listener);
layer.setBrightness(0.5);
expect(listener.calledOnce).to.be(true);
});
});
describe('#setContrast', function() {
var layer;
beforeEach(function() {
layer = new ol.layer.Layer({
source: new ol.source.Source({
projection: ol.proj.get('EPSG:4326')
})
});
});
afterEach(function() {
goog.dispose(layer);
});
it('accepts a small positive number', function() {
layer.setContrast(0.3);
expect(layer.getContrast()).to.be(0.3);
});
it('accepts a big positive number', function() {
layer.setContrast(42);
expect(layer.getContrast()).to.be(42);
});
it('triggers a change event', function() {
var listener = sinon.spy();
layer.on(ol.ObjectEventType.PROPERTYCHANGE, listener);
layer.setContrast(43);
expect(listener.calledOnce).to.be(true);
});
});
describe('#setHue', function() {
var layer;
beforeEach(function() {
layer = new ol.layer.Layer({
source: new ol.source.Source({
projection: ol.proj.get('EPSG:4326')
})
});
});
afterEach(function() {
goog.dispose(layer);
});
it('accepts a small positive number', function() {
layer.setHue(0.3);
expect(layer.getHue()).to.be(0.3);
});
it('accepts a small negative number', function() {
layer.setHue(-0.7);
expect(layer.getHue()).to.be(-0.7);
});
it('accepts a big positive number', function() {
layer.setHue(42);
expect(layer.getHue()).to.be(42);
});
it('accepts a big negative number', function() {
layer.setHue(-100);
expect(layer.getHue()).to.be(-100);
});
it('triggers a change event', function() {
var listener = sinon.spy();
layer.on(ol.ObjectEventType.PROPERTYCHANGE, listener);
layer.setHue(0.5);
expect(listener.calledOnce).to.be(true);
});
});
describe('#setOpacity', function() {
@@ -513,42 +341,6 @@ describe('ol.layer.Layer', function() {
});
describe('#setSaturation', function() {
var layer;
beforeEach(function() {
layer = new ol.layer.Layer({
source: new ol.source.Source({
projection: ol.proj.get('EPSG:4326')
})
});
});
afterEach(function() {
goog.dispose(layer);
});
it('accepts a small positive number', function() {
layer.setSaturation(0.3);
expect(layer.getSaturation()).to.be(0.3);
});
it('accepts a big positive number', function() {
layer.setSaturation(42);
expect(layer.getSaturation()).to.be(42);
});
it('triggers a change event', function() {
var listener = sinon.spy();
layer.on(ol.ObjectEventType.PROPERTYCHANGE, listener);
layer.setSaturation(42);
expect(listener.calledOnce).to.be(true);
});
});
describe('#setVisible', function() {
var layer;

80
test/spec/ol/layer/layergroup.test.js
View File

@@ -18,26 +18,10 @@ describe('ol.layer.Group', function() {
expect(layerGroup).to.be.a(ol.layer.Group);
});
it('provides default brightness', function() {
expect(layerGroup.getBrightness()).to.be(0);
});
it('provides default contrast', function() {
expect(layerGroup.getContrast()).to.be(1);
});
it('provides default hue', function() {
expect(layerGroup.getHue()).to.be(0);
});
it('provides default opacity', function() {
expect(layerGroup.getOpacity()).to.be(1);
});
it('provides default saturation', function() {
expect(layerGroup.getSaturation()).to.be(1);
});
it('provides default visibility', function() {
expect(layerGroup.getVisible()).to.be(true);
});
@@ -45,11 +29,7 @@ describe('ol.layer.Group', function() {
it('provides default layerState', function() {
expect(layerGroup.getLayerState()).to.eql({
layer: layerGroup,
brightness: 0,
contrast: 1,
hue: 0,
opacity: 1,
saturation: 1,
visible: true,
managed: true,
sourceState: ol.source.State.READY,
@@ -155,32 +135,20 @@ describe('ol.layer.Group', function() {
});
var layerGroup = new ol.layer.Group({
layers: [layer],
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
zIndex: 10,
maxResolution: 500,
minResolution: 0.25
});
expect(layerGroup.getBrightness()).to.be(0.5);
expect(layerGroup.getContrast()).to.be(10);
expect(layerGroup.getHue()).to.be(180);
expect(layerGroup.getOpacity()).to.be(0.5);
expect(layerGroup.getSaturation()).to.be(5);
expect(layerGroup.getVisible()).to.be(false);
expect(layerGroup.getMaxResolution()).to.be(500);
expect(layerGroup.getMinResolution()).to.be(0.25);
expect(layerGroup.getLayerState()).to.eql({
layer: layerGroup,
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -207,33 +175,21 @@ describe('ol.layer.Group', function() {
var groupExtent = [-10, -5, 10, 5];
var layerGroup = new ol.layer.Group({
layers: [layer],
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
extent: groupExtent,
maxResolution: 500,
minResolution: 0.25
});
expect(layerGroup.getBrightness()).to.be(0.5);
expect(layerGroup.getContrast()).to.be(10);
expect(layerGroup.getHue()).to.be(180);
expect(layerGroup.getOpacity()).to.be(0.5);
expect(layerGroup.getSaturation()).to.be(5);
expect(layerGroup.getVisible()).to.be(false);
expect(layerGroup.getExtent()).to.eql(groupExtent);
expect(layerGroup.getMaxResolution()).to.be(500);
expect(layerGroup.getMinResolution()).to.be(0.25);
expect(layerGroup.getLayerState()).to.eql({
layer: layerGroup,
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -264,11 +220,7 @@ describe('ol.layer.Group', function() {
});
it('returns a layerState from the properties values', function() {
layerGroup.setBrightness(-0.7);
layerGroup.setContrast(0.3);
layerGroup.setHue(-0.3);
layerGroup.setOpacity(0.3);
layerGroup.setSaturation(0.3);
layerGroup.setVisible(false);
layerGroup.setZIndex(10);
var groupExtent = [-100, 50, 100, 50];
@@ -277,11 +229,7 @@ describe('ol.layer.Group', function() {
layerGroup.setMinResolution(0.25);
expect(layerGroup.getLayerState()).to.eql({
layer: layerGroup,
brightness: -0.7,
contrast: 0.3,
hue: -0.3,
opacity: 0.3,
saturation: 0.3,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -293,19 +241,11 @@ describe('ol.layer.Group', function() {
});
it('returns a layerState with clamped values', function() {
layerGroup.setBrightness(1.5);
layerGroup.setContrast(-0.7);
layerGroup.setHue(42);
layerGroup.setOpacity(-1.5);
layerGroup.setSaturation(-0.7);
layerGroup.setVisible(false);
expect(layerGroup.getLayerState()).to.eql({
layer: layerGroup,
brightness: 1,
contrast: 0,
hue: 42,
opacity: 0,
saturation: 0,
visible: false,
managed: true,
sourceState: ol.source.State.READY,
@@ -315,19 +255,11 @@ describe('ol.layer.Group', function() {
minResolution: 0
});
layerGroup.setBrightness(-3);
layerGroup.setContrast(42);
layerGroup.setHue(-100);
layerGroup.setOpacity(3);
layerGroup.setSaturation(42);
layerGroup.setVisible(true);
expect(layerGroup.getLayerState()).to.eql({
layer: layerGroup,
brightness: -1,
contrast: 42,
hue: -100,
opacity: 1,
saturation: 42,
visible: true,
managed: true,
sourceState: ol.source.State.READY,
@@ -409,11 +341,7 @@ describe('ol.layer.Group', function() {
source: new ol.source.Source({
projection: 'EPSG:4326'
}),
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
maxResolution: 500,
minResolution: 0.25
@@ -473,11 +401,7 @@ describe('ol.layer.Group', function() {
it('transforms layerStates correctly', function() {
var layerGroup = new ol.layer.Group({
layers: [layer1, layer2],
brightness: 0.5,
contrast: 10,
hue: 180,
opacity: 0.5,
saturation: 5,
visible: false,
maxResolution: 150,
minResolution: 0.2
@@ -499,11 +423,7 @@ describe('ol.layer.Group', function() {
layerState = goog.object.clone(layerStatesArray[1]);
delete layerState.layer;
expect(layerState).to.eql({
brightness: 1,
contrast: 100,
hue: 360,
opacity: 0.25,
saturation: 25,
visible: false,
managed: true,
sourceState: ol.source.State.READY,