Permalink
Browse files

Use fillColor and strokeColor instead of fillStyle and strokeStyle

The color names are more intuitive.  And if we want to support pattern strokes or fills, we'll need additional proerties to represent other pattern properties.
  • Loading branch information...
1 parent 5ce114c commit faee18bae1731f1e51772cb1eca437288af23677 @tschaub tschaub committed Mar 8, 2013
View
@@ -151,13 +151,13 @@
@exportObjectLiteralProperty ol.style.IconOptions.rotation number|ol.Expression|undefined
@exportObjectLiteral ol.style.LineOptions
-@exportObjectLiteralProperty ol.style.LineOptions.strokeStyle string|ol.Expression|undefined
+@exportObjectLiteralProperty ol.style.LineOptions.strokeColor string|ol.Expression|undefined
@exportObjectLiteralProperty ol.style.LineOptions.strokeWidth number|ol.Expression|undefined
@exportObjectLiteralProperty ol.style.LineOptions.opacity number|ol.Expression|undefined
@exportObjectLiteral ol.style.PolygonOptions
-@exportObjectLiteralProperty ol.style.PolygonOptions.fillStyle string|ol.Expression|undefined
-@exportObjectLiteralProperty ol.style.PolygonOptions.strokeStyle string|ol.Expression|undefined
+@exportObjectLiteralProperty ol.style.PolygonOptions.fillColor string|ol.Expression|undefined
+@exportObjectLiteralProperty ol.style.PolygonOptions.strokeColor string|ol.Expression|undefined
@exportObjectLiteralProperty ol.style.PolygonOptions.strokeWidth number|ol.Expression|undefined
@exportObjectLiteralProperty ol.style.PolygonOptions.opacity number|ol.Expression|undefined
@@ -168,8 +168,8 @@
@exportObjectLiteral ol.style.ShapeOptions
@exportObjectLiteralProperty ol.style.ShapeOptions.type ol.style.ShapeType|undefined
@exportObjectLiteralProperty ol.style.ShapeOptions.size number|ol.Expression|undefined
-@exportObjectLiteralProperty ol.style.ShapeOptions.fillStyle string|ol.Expression|undefined
-@exportObjectLiteralProperty ol.style.ShapeOptions.strokeStyle string|ol.Expression|undefined
+@exportObjectLiteralProperty ol.style.ShapeOptions.fillColor string|ol.Expression|undefined
+@exportObjectLiteralProperty ol.style.ShapeOptions.strokeColor string|ol.Expression|undefined
@exportObjectLiteralProperty ol.style.ShapeOptions.strokeWidth number|ol.Expression|undefined
@exportObjectLiteralProperty ol.style.ShapeOptions.opacity number|ol.Expression|undefined
@@ -137,7 +137,7 @@ ol.renderer.canvas.Renderer.prototype.renderLineStringFeatures_ =
i, ii, geometry, components, j, jj, line, dim, k, kk, x, y;
context.globalAlpha = symbolizer.opacity;
- context.strokeStyle = symbolizer.strokeStyle;
+ context.strokeStyle = symbolizer.strokeColor;
context.lineWidth = symbolizer.strokeWidth * this.inverseScale_;
context.lineCap = 'round'; // TODO: accept this as a symbolizer property
context.lineJoin = 'round'; // TODO: accept this as a symbolizer property
@@ -232,20 +232,20 @@ ol.renderer.canvas.Renderer.prototype.renderPointFeatures_ =
ol.renderer.canvas.Renderer.prototype.renderPolygonFeatures_ =
function(features, symbolizer) {
var context = this.context_,
- strokeStyle = symbolizer.strokeStyle,
- fillStyle = symbolizer.fillStyle,
+ strokeColor = symbolizer.strokeColor,
+ fillColor = symbolizer.fillColor,
i, ii, geometry, components, j, jj, poly,
rings, numRings, ring, dim, k, kk, x, y;
context.globalAlpha = symbolizer.opacity;
- if (strokeStyle) {
- context.strokeStyle = symbolizer.strokeStyle;
+ if (strokeColor) {
+ context.strokeStyle = symbolizer.strokeColor;
context.lineWidth = symbolizer.strokeWidth * this.inverseScale_;
context.lineCap = 'round'; // TODO: accept this as a symbolizer property
context.lineJoin = 'round'; // TODO: accept this as a symbolizer property
}
- if (fillStyle) {
- context.fillStyle = fillStyle;
+ if (fillColor) {
+ context.fillStyle = fillColor;
}
/**
@@ -282,7 +282,7 @@ ol.renderer.canvas.Renderer.prototype.renderPolygonFeatures_ =
context.lineTo(x, y);
}
}
- if (fillStyle && strokeStyle) {
+ if (fillColor && strokeColor) {
// scenario 3 - fill and stroke each time
context.fill();
context.stroke();
@@ -293,8 +293,8 @@ ol.renderer.canvas.Renderer.prototype.renderPolygonFeatures_ =
}
}
}
- if (!(fillStyle && strokeStyle)) {
- if (fillStyle) {
+ if (!(fillColor && strokeColor)) {
+ if (fillColor) {
// scenario 2 - fill all at once
context.fill();
} else {
@@ -318,32 +318,32 @@ ol.renderer.canvas.Renderer.renderCircle_ = function(circle) {
(goog.dom.createElement(goog.dom.TagName.CANVAS)),
context = /** @type {CanvasRenderingContext2D} */
(canvas.getContext('2d')),
- fillStyle = circle.fillStyle,
- strokeStyle = circle.strokeStyle,
+ fillColor = circle.fillColor,
+ strokeColor = circle.strokeColor,
twoPi = Math.PI * 2;
canvas.height = size;
canvas.width = size;
context.globalAlpha = circle.opacity;
- if (fillStyle) {
- context.fillStyle = fillStyle;
+ if (fillColor) {
+ context.fillStyle = fillColor;
}
- if (strokeStyle) {
+ if (strokeColor) {
context.lineWidth = strokeWidth;
- context.strokeStyle = strokeStyle;
+ context.strokeStyle = strokeColor;
context.lineCap = 'round'; // TODO: accept this as a symbolizer property
context.lineJoin = 'round'; // TODO: accept this as a symbolizer property
}
context.beginPath();
context.arc(mid, mid, circle.size / 2, 0, twoPi, true);
- if (fillStyle) {
+ if (fillColor) {
context.fill();
}
- if (strokeStyle) {
+ if (strokeColor) {
context.stroke();
}
return canvas;
View
@@ -8,7 +8,7 @@ goog.require('ol.style.SymbolizerLiteral');
/**
- * @typedef {{strokeStyle: (string),
+ * @typedef {{strokeColor: (string),
* strokeWidth: (number),
* opacity: (number)}}
*/
@@ -24,9 +24,9 @@ ol.style.LineLiteralOptions;
ol.style.LineLiteral = function(config) {
goog.base(this);
- goog.asserts.assertString(config.strokeStyle, 'strokeStyle must be a string');
+ goog.asserts.assertString(config.strokeColor, 'strokeColor must be a string');
/** @type {string} */
- this.strokeStyle = config.strokeStyle;
+ this.strokeColor = config.strokeColor;
goog.asserts.assertNumber(config.strokeWidth, 'strokeWidth must be a number');
/** @type {number} */
@@ -44,7 +44,7 @@ goog.inherits(ol.style.LineLiteral, ol.style.SymbolizerLiteral);
* @inheritDoc
*/
ol.style.LineLiteral.prototype.equals = function(lineLiteral) {
- return this.strokeStyle == lineLiteral.strokeStyle &&
+ return this.strokeColor == lineLiteral.strokeColor &&
this.strokeWidth == lineLiteral.strokeWidth &&
this.opacity == lineLiteral.opacity;
};
@@ -63,10 +63,10 @@ ol.style.Line = function(options) {
* @type {ol.Expression}
* @private
*/
- this.strokeStyle_ = !goog.isDef(options.strokeStyle) ?
- new ol.ExpressionLiteral(ol.style.LineDefaults.strokeStyle) :
- (options.strokeStyle instanceof ol.Expression) ?
- options.strokeStyle : new ol.ExpressionLiteral(options.strokeStyle);
+ this.strokeColor_ = !goog.isDef(options.strokeColor) ?
+ new ol.ExpressionLiteral(ol.style.LineDefaults.strokeColor) :
+ (options.strokeColor instanceof ol.Expression) ?
+ options.strokeColor : new ol.ExpressionLiteral(options.strokeColor);
/**
* @type {ol.Expression}
@@ -101,8 +101,8 @@ ol.style.Line.prototype.createLiteral = function(opt_feature) {
attrs = feature.getAttributes();
}
- var strokeStyle = this.strokeStyle_.evaluate(feature, attrs);
- goog.asserts.assertString(strokeStyle, 'strokeStyle must be a string');
+ var strokeColor = this.strokeColor_.evaluate(feature, attrs);
+ goog.asserts.assertString(strokeColor, 'strokeColor must be a string');
var strokeWidth = this.strokeWidth_.evaluate(feature, attrs);
goog.asserts.assertNumber(strokeWidth, 'strokeWidth must be a number');
@@ -111,7 +111,7 @@ ol.style.Line.prototype.createLiteral = function(opt_feature) {
goog.asserts.assertNumber(opacity, 'opacity must be a number');
return new ol.style.LineLiteral({
- strokeStyle: strokeStyle,
+ strokeColor: strokeColor,
strokeWidth: strokeWidth,
opacity: opacity
});
@@ -122,7 +122,7 @@ ol.style.Line.prototype.createLiteral = function(opt_feature) {
* @type {ol.style.LineLiteral}
*/
ol.style.LineDefaults = new ol.style.LineLiteral({
- strokeStyle: '#696969',
+ strokeColor: '#696969',
strokeWidth: 1.5,
opacity: 0.75
});
View
@@ -8,8 +8,8 @@ goog.require('ol.style.SymbolizerLiteral');
/**
- * @typedef {{fillStyle: (string|undefined),
- * strokeStyle: (string|undefined),
+ * @typedef {{fillColor: (string|undefined),
+ * strokeColor: (string|undefined),
* strokeWidth: (number|undefined),
* opacity: (number)}}
*/
@@ -26,16 +26,16 @@ ol.style.PolygonLiteral = function(config) {
goog.base(this);
/** @type {string|undefined} */
- this.fillStyle = config.fillStyle;
- if (goog.isDef(config.fillStyle)) {
- goog.asserts.assertString(config.fillStyle, 'fillStyle must be a string');
+ this.fillColor = config.fillColor;
+ if (goog.isDef(config.fillColor)) {
+ goog.asserts.assertString(config.fillColor, 'fillColor must be a string');
}
/** @type {string|undefined} */
- this.strokeStyle = config.strokeStyle;
- if (goog.isDef(this.strokeStyle)) {
+ this.strokeColor = config.strokeColor;
+ if (goog.isDef(this.strokeColor)) {
goog.asserts.assertString(
- this.strokeStyle, 'strokeStyle must be a string');
+ this.strokeColor, 'strokeColor must be a string');
}
/** @type {number|undefined} */
@@ -46,9 +46,9 @@ ol.style.PolygonLiteral = function(config) {
}
goog.asserts.assert(
- goog.isDef(this.fillStyle) ||
- (goog.isDef(this.strokeStyle) && goog.isDef(this.strokeWidth)),
- 'Either fillStyle or strokeStyle and strokeWidth must be set');
+ goog.isDef(this.fillColor) ||
+ (goog.isDef(this.strokeColor) && goog.isDef(this.strokeWidth)),
+ 'Either fillColor or strokeColor and strokeWidth must be set');
goog.asserts.assertNumber(config.opacity, 'opacity must be a number');
/** @type {number} */
@@ -62,8 +62,8 @@ goog.inherits(ol.style.PolygonLiteral, ol.style.SymbolizerLiteral);
* @inheritDoc
*/
ol.style.PolygonLiteral.prototype.equals = function(polygonLiteral) {
- return this.fillStyle == polygonLiteral.fillStyle &&
- this.strokeStyle == polygonLiteral.strokeStyle &&
+ return this.fillColor == polygonLiteral.fillColor &&
+ this.strokeColor == polygonLiteral.strokeColor &&
this.strokeWidth == polygonLiteral.strokeWidth &&
this.opacity == polygonLiteral.opacity;
};
@@ -82,22 +82,22 @@ ol.style.Polygon = function(options) {
* @type {ol.Expression}
* @private
*/
- this.fillStyle_ = !goog.isDefAndNotNull(options.fillStyle) ?
+ this.fillColor_ = !goog.isDefAndNotNull(options.fillColor) ?
null :
- (options.fillStyle instanceof ol.Expression) ?
- options.fillStyle : new ol.ExpressionLiteral(options.fillStyle);
+ (options.fillColor instanceof ol.Expression) ?
+ options.fillColor : new ol.ExpressionLiteral(options.fillColor);
// stroke handling - if any stroke property is supplied, use defaults
- var strokeStyle = null,
+ var strokeColor = null,
strokeWidth = null;
- if (goog.isDefAndNotNull(options.strokeStyle) ||
+ if (goog.isDefAndNotNull(options.strokeColor) ||
goog.isDefAndNotNull(options.strokeWidth)) {
- strokeStyle = !goog.isDefAndNotNull(options.strokeStyle) ?
- new ol.ExpressionLiteral(ol.style.PolygonDefaults.strokeStyle) :
- (options.strokeStyle instanceof ol.Expression) ?
- options.strokeStyle : new ol.ExpressionLiteral(options.strokeStyle);
+ strokeColor = !goog.isDefAndNotNull(options.strokeColor) ?
+ new ol.ExpressionLiteral(ol.style.PolygonDefaults.strokeColor) :
+ (options.strokeColor instanceof ol.Expression) ?
+ options.strokeColor : new ol.ExpressionLiteral(options.strokeColor);
strokeWidth = !goog.isDef(options.strokeWidth) ?
new ol.ExpressionLiteral(ol.style.PolygonDefaults.strokeWidth) :
@@ -109,7 +109,7 @@ ol.style.Polygon = function(options) {
* @type {ol.Expression}
* @private
*/
- this.strokeStyle_ = strokeStyle;
+ this.strokeColor_ = strokeColor;
/**
* @type {ol.Expression}
@@ -118,8 +118,8 @@ ol.style.Polygon = function(options) {
this.strokeWidth_ = strokeWidth;
// one of stroke or fill can be null, both null is user error
- goog.asserts.assert(!goog.isNull(this.fillStyle_) ||
- !(goog.isNull(this.strokeStyle_) && goog.isNull(this.strokeWidth_)),
+ goog.asserts.assert(!goog.isNull(this.fillColor_) ||
+ !(goog.isNull(this.strokeColor_) && goog.isNull(this.strokeWidth_)),
'Stroke or fill properties must be provided');
/**
@@ -146,32 +146,32 @@ ol.style.Polygon.prototype.createLiteral = function(opt_feature) {
attrs = feature.getAttributes();
}
- var fillStyle = goog.isNull(this.fillStyle_) ?
+ var fillColor = goog.isNull(this.fillColor_) ?
undefined :
- /** @type {string} */ (this.fillStyle_.evaluate(feature, attrs));
- goog.asserts.assert(!goog.isDef(fillStyle) || goog.isString(fillStyle));
+ /** @type {string} */ (this.fillColor_.evaluate(feature, attrs));
+ goog.asserts.assert(!goog.isDef(fillColor) || goog.isString(fillColor));
- var strokeStyle = goog.isNull(this.strokeStyle_) ?
+ var strokeColor = goog.isNull(this.strokeColor_) ?
undefined :
- /** @type {string} */ (this.strokeStyle_.evaluate(feature, attrs));
- goog.asserts.assert(!goog.isDef(strokeStyle) || goog.isString(strokeStyle));
+ /** @type {string} */ (this.strokeColor_.evaluate(feature, attrs));
+ goog.asserts.assert(!goog.isDef(strokeColor) || goog.isString(strokeColor));
var strokeWidth = goog.isNull(this.strokeWidth_) ?
undefined :
/** @type {number} */ (this.strokeWidth_.evaluate(feature, attrs));
goog.asserts.assert(!goog.isDef(strokeWidth) || goog.isNumber(strokeWidth));
goog.asserts.assert(
- goog.isDef(fillStyle) ||
- (goog.isDef(strokeStyle) && goog.isDef(strokeWidth)),
- 'either fill style or strokeStyle and strokeWidth must be defined');
+ goog.isDef(fillColor) ||
+ (goog.isDef(strokeColor) && goog.isDef(strokeWidth)),
+ 'either fill style or strokeColor and strokeWidth must be defined');
var opacity = this.opacity_.evaluate(feature, attrs);
goog.asserts.assertNumber(opacity, 'opacity must be a number');
return new ol.style.PolygonLiteral({
- fillStyle: fillStyle,
- strokeStyle: strokeStyle,
+ fillColor: fillColor,
+ strokeColor: strokeColor,
strokeWidth: strokeWidth,
opacity: opacity
});
@@ -182,8 +182,8 @@ ol.style.Polygon.prototype.createLiteral = function(opt_feature) {
* @type {ol.style.PolygonLiteral}
*/
ol.style.PolygonDefaults = new ol.style.PolygonLiteral({
- fillStyle: '#ffffff',
- strokeStyle: '#696969',
+ fillColor: '#ffffff',
+ strokeColor: '#696969',
strokeWidth: 1.5,
opacity: 0.75
});
Oops, something went wrong.

0 comments on commit faee18b

Please sign in to comment.