diff --git a/examples/dynamic-data.js b/examples/dynamic-data.js index 01790d6dce..14be6dfaaa 100644 --- a/examples/dynamic-data.js +++ b/examples/dynamic-data.js @@ -3,8 +3,8 @@ goog.require('ol.RendererHint'); goog.require('ol.View2D'); goog.require('ol.geom.MultiPoint'); goog.require('ol.layer.Tile'); -goog.require('ol.shape'); goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); @@ -23,9 +23,11 @@ var map = new ol.Map({ }) }); -var imageStyle = ol.shape.renderCircle(5, - new ol.style.Fill({color: 'yellow'}), - new ol.style.Stroke({color: 'red', width: 1})); +var imageStyle = new ol.style.Circle({ + radius: 5, + fill: new ol.style.Fill({color: 'yellow'}), + stroke: new ol.style.Stroke({color: 'red', width: 1}) +}); var n = 200; var omegaTheta = 30000; // Rotation period in ms diff --git a/examples/geojson.js b/examples/geojson.js index 1d8aca183a..19a9572977 100644 --- a/examples/geojson.js +++ b/examples/geojson.js @@ -4,16 +4,19 @@ goog.require('ol.RendererHint'); goog.require('ol.View2D'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.shape'); goog.require('ol.source.GeoJSON'); goog.require('ol.source.OSM'); +goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); -var image = ol.shape.renderCircle(5, null, - new ol.style.Stroke({color: 'red', width: 1})); +var image = new ol.style.Circle({ + radius: 5, + fill: null, + stroke: new ol.style.Stroke({color: 'red', width: 1}) +}); var styles = { 'Point': [new ol.style.Style({ @@ -61,9 +64,13 @@ var styles = { fill: new ol.style.Fill({ color: 'magenta' }), - image: ol.shape.renderCircle(10, null, new ol.style.Stroke({ - color: 'magenta' - })) + image: new ol.style.Circle({ + radius: 10, + fill: null, + stroke: new ol.style.Stroke({ + color: 'magenta' + }) + }) })] }; diff --git a/examples/icon.js b/examples/icon.js index aa49a4872a..b21f5100e2 100644 --- a/examples/icon.js +++ b/examples/icon.js @@ -3,11 +3,11 @@ goog.require('ol.Overlay'); goog.require('ol.OverlayPositioning'); goog.require('ol.RendererHint'); goog.require('ol.View2D'); -goog.require('ol.icon'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.GeoJSON'); goog.require('ol.source.TileJSON'); +goog.require('ol.style.Icon'); goog.require('ol.style.Style'); @@ -18,7 +18,9 @@ var raster = new ol.layer.Tile({ }); var styleArray = [new ol.style.Style({ - image: ol.icon.renderIcon('data/icon.png') + image: new ol.style.Icon({ + src: 'data/icon.png' + }) })]; var vector = new ol.layer.Vector({ diff --git a/examples/igc.js b/examples/igc.js index a0c5f6fad4..6275e3f808 100644 --- a/examples/igc.js +++ b/examples/igc.js @@ -8,9 +8,9 @@ goog.require('ol.geom.Point'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.proj'); -goog.require('ol.shape'); goog.require('ol.source.OSM'); goog.require('ol.source.Vector'); +goog.require('ol.style.Circle'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); @@ -128,10 +128,14 @@ map.on('singleclick', function(evt) { displaySnap(coordinate); }); -var imageStyle = ol.shape.renderCircle(5, null, new ol.style.Stroke({ - color: 'rgba(255,0,0,0.9)', - width: 1 -})); +var imageStyle = new ol.style.Circle({ + radius: 5, + fill: null, + stroke: new ol.style.Stroke({ + color: 'rgba(255,0,0,0.9)', + width: 1 + }) +}); var strokeStyle = new ol.style.Stroke({ color: 'rgba(255,0,0,0.9)', width: 1 diff --git a/examples/rtree.js b/examples/rtree.js index 07fd1fa12d..eeb9296a41 100644 --- a/examples/rtree.js +++ b/examples/rtree.js @@ -8,8 +8,8 @@ goog.require('ol.extent'); goog.require('ol.geom.Point'); goog.require('ol.geom.Polygon'); goog.require('ol.layer.Vector'); -goog.require('ol.shape'); goog.require('ol.source.Vector'); +goog.require('ol.style.Circle'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); @@ -30,8 +30,11 @@ var vectorSource = new ol.source.Vector({ }); var styleArray = [new ol.style.Style({ - image: ol.shape.renderCircle(3, null, - new ol.style.Stroke({color: 'red', width: 1})) + image: new ol.style.Circle({ + radius: 3, + fill: null, + stroke: new ol.style.Stroke({color: 'red', width: 1}) + }) })]; var colors = ['red', 'orange', 'yellow', 'blue', 'green', 'indigo', 'violet']; diff --git a/examples/synthetic-points.js b/examples/synthetic-points.js index b1cdfdb882..2ed6010a1d 100644 --- a/examples/synthetic-points.js +++ b/examples/synthetic-points.js @@ -6,8 +6,8 @@ goog.require('ol.View2D'); goog.require('ol.geom.LineString'); goog.require('ol.geom.Point'); goog.require('ol.layer.Vector'); -goog.require('ol.shape'); goog.require('ol.source.Vector'); +goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); goog.require('ol.style.Style'); @@ -27,14 +27,18 @@ for (var i = 0; i < count; ++i) { var styles = { '10': [new ol.style.Style({ - image: ol.shape.renderCircle(5, - new ol.style.Fill({color: '#666666'}), - new ol.style.Stroke({color: '#bada55', width: 1})) + image: new ol.style.Circle({ + radius: 5, + fill: new ol.style.Fill({color: '#666666'}), + stroke: new ol.style.Stroke({color: '#bada55', width: 1}) + }) })], '20': [new ol.style.Style({ - image: ol.shape.renderCircle(10, - new ol.style.Fill({color: '#666666'}), - new ol.style.Stroke({color: '#bada55', width: 1})) + image: new ol.style.Circle({ + radius: 10, + fill: new ol.style.Fill({color: '#666666'}), + stroke: new ol.style.Stroke({color: '#bada55', width: 1}) + }) })] }; @@ -97,10 +101,14 @@ map.on('singleclick', function(evt) { displaySnap(coordinate); }); -var imageStyle = ol.shape.renderCircle(10, null, new ol.style.Stroke({ - color: 'rgba(255,255,0,0.9)', - width: 3 -})); +var imageStyle = new ol.style.Circle({ + radius: 10, + fill: null, + stroke: new ol.style.Stroke({ + color: 'rgba(255,255,0,0.9)', + width: 3 + }) +}); var strokeStyle = new ol.style.Stroke({ color: 'rgba(255,255,0,0.9)', width: 3 diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 3fb309839e..959f6a2349 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -718,6 +718,13 @@ * @todo stability experimental */ +/** + * @typedef {Object} olx.style.CircleOptions + * @property {ol.style.Fill|undefined} fill Fill style. + * @property {number} radius Circle radius. + * @property {ol.style.Stroke|undefined} stroke Stroke style. + */ + /** * @typedef {Object} olx.style.FillOptions * @property {ol.Color|string|undefined} color Color. @@ -725,18 +732,12 @@ */ /** - * @typedef {Object} olx.style.ImageOptions - * @property {ol.Pixel} anchor Anchor. + * @typedef {Object} olx.style.IconOptions + * @property {ol.Pixel|undefined} anchor Anchor. * @property {null|string|undefined} crossOrigin crossOrigin setting for image. - * @property {HTMLCanvasElement|HTMLVideoElement|Image|undefined} image Image. - * @property {ol.style.ImageState|undefined} imageState Image state. * @property {number|undefined} rotation Rotation. - * @property {ol.Size} size Image size in pixel. - * @property {boolean|undefined} snapToPixel Whether the image should be - * snapped to the closed pixel at rendering time. - * @property {boolean|undefined} subtractViewRotation Whether the image should be - * rotated with the view or not. - * @property {string|undefined} src Image source URI. + * @property {ol.Size|undefined} size Icon size in pixel. + * @property {string} src Image source URI. */ /** diff --git a/src/ol/icon.exports b/src/ol/icon.exports deleted file mode 100644 index f7eeba7034..0000000000 --- a/src/ol/icon.exports +++ /dev/null @@ -1 +0,0 @@ -@exportSymbol ol.icon.renderIcon diff --git a/src/ol/icon.js b/src/ol/icon.js deleted file mode 100644 index 6f2cdd9f93..0000000000 --- a/src/ol/icon.js +++ /dev/null @@ -1,31 +0,0 @@ -goog.provide('ol.icon'); - -goog.require('ol.style.Image'); - - -/** - * @param {string} src Image source URI. - * @param {ol.Size=} opt_size Image size. - * @return {ol.style.Image} Image. - */ -ol.icon.renderIcon = function(src, opt_size) { - - /** - * @type {ol.Size} - */ - var size = goog.isDef(opt_size) ? opt_size : null; - - /** - * @type {ol.Pixel} - */ - var anchor = !goog.isNull(size) ? [size[0] / 2, size[1] / 2] : null; - - return new ol.style.Image({ - anchor: anchor, - size: size, - src: src, - rotation: 0, - snapToPixel: undefined, - subtractViewRotation: false - }); -}; diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index 2e1729bc29..85b3260a82 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -218,8 +218,8 @@ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) { if (!ol.extent.intersects(this.extent_, geometry.getExtent())) { return; } - this.setFillStrokeStyle(style.fill, style.stroke); - this.setImageStyle(style.image); + this.setFillStrokeStyle(style.getFill(), style.getStroke()); + this.setImageStyle(style.getImage()); var renderGeometry = ol.render.canvas.Immediate.GEOMETRY_RENDERES_[geometry.getType()]; goog.asserts.assert(goog.isDef(renderGeometry)); @@ -378,24 +378,31 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) { var state = this.state_; if (!goog.isNull(fillStyle)) { - state.fillStyle = ol.color.asString(!goog.isNull(fillStyle.color) ? - fillStyle.color : ol.render.canvas.defaultFillStyle); + var fillStyleColor = fillStyle.getColor(); + state.fillStyle = ol.color.asString(!goog.isNull(fillStyleColor) ? + fillStyleColor : ol.render.canvas.defaultFillStyle); } else { state.fillStyle = undefined; } if (!goog.isNull(strokeStyle)) { - state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ? - strokeStyle.color : ol.render.canvas.defaultStrokeStyle); - state.lineCap = goog.isDef(strokeStyle.lineCap) ? - strokeStyle.lineCap : ol.render.canvas.defaultLineCap; - state.lineDash = !goog.isNull(strokeStyle.lineDash) ? - strokeStyle.lineDash : ol.render.canvas.defaultLineDash; - state.lineJoin = goog.isDef(strokeStyle.lineJoin) ? - strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin; - state.lineWidth = this.pixelRatio_ * (goog.isDef(strokeStyle.width) ? - strokeStyle.width : ol.render.canvas.defaultLineWidth); - state.miterLimit = goog.isDef(strokeStyle.miterLimit) ? - strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit; + var strokeStyleColor = strokeStyle.getColor(); + state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ? + strokeStyleColor : ol.render.canvas.defaultStrokeStyle); + var strokeStyleLineCap = strokeStyle.getLineCap(); + state.lineCap = goog.isDef(strokeStyleLineCap) ? + strokeStyleLineCap : ol.render.canvas.defaultLineCap; + var strokeStyleLineDash = strokeStyle.getLineDash(); + state.lineDash = !goog.isNull(strokeStyleLineDash) ? + strokeStyleLineDash : ol.render.canvas.defaultLineDash; + var strokeStyleLineJoin = strokeStyle.getLineJoin(); + state.lineJoin = goog.isDef(strokeStyleLineJoin) ? + strokeStyleLineJoin : ol.render.canvas.defaultLineJoin; + var strokeStyleWidth = strokeStyle.getWidth(); + state.lineWidth = this.pixelRatio_ * (goog.isDef(strokeStyleWidth) ? + strokeStyleWidth : ol.render.canvas.defaultLineWidth); + var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); + state.miterLimit = goog.isDef(strokeStyleMiterLimit) ? + strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; } else { state.strokeStyle = undefined; state.lineCap = undefined; @@ -454,16 +461,20 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyles_ = function() { */ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) { if (!goog.isNull(imageStyle)) { - goog.asserts.assert(!goog.isNull(imageStyle.anchor)); - goog.asserts.assert(goog.isDef(imageStyle.size)); - goog.asserts.assert(!goog.isNull(imageStyle.image)); + var anchor = imageStyle.getAnchor(); + goog.asserts.assert(!goog.isNull(anchor)); + var size = imageStyle.getSize(); + goog.asserts.assert(!goog.isNull(size)); + // FIXME pixel ratio + var image = imageStyle.getImage(1); + goog.asserts.assert(!goog.isNull(image)); var state = this.state_; - state.anchorX = imageStyle.anchor[0]; - state.anchorY = imageStyle.anchor[1]; - state.image = imageStyle.image; - state.width = imageStyle.size[0]; - state.height = imageStyle.size[1]; - state.snapToPixel = imageStyle.snapToPixel; + state.anchorX = anchor[0]; + state.anchorY = anchor[1]; + state.image = image; + state.width = size[0]; + state.height = size[1]; + state.snapToPixel = imageStyle.getSnapToPixel(); } }; @@ -476,12 +487,15 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) { var state = this.state_; if (!ol.style.Text.equals(state.textStyle, textStyle)) { if (goog.isDefAndNotNull(textStyle)) { - context.font = goog.isDef(textStyle.font) ? - textStyle.font : ol.render.canvas.defaultFont; - context.textAlign = goog.isDef(textStyle.textAlign) ? - textStyle.textAlign : ol.render.canvas.defaultTextAlign; - context.textBaseline = goog.isDef(textStyle.textBaseline) ? - textStyle.textBaseline : ol.render.canvas.defaultTextBaseline; + var textStyleFont = textStyle.getFont(); + context.font = goog.isDef(textStyleFont) ? + textStyleFont : ol.render.canvas.defaultFont; + var textStyleTextAlign = textStyle.getTextAlign(); + context.textAlign = goog.isDef(textStyleTextAlign) ? + textStyleTextAlign : ol.render.canvas.defaultTextAlign; + var textStyleTextBaseline = textStyle.getTextBaseline(); + context.textBaseline = goog.isDef(textStyleTextBaseline) ? + textStyleTextBaseline : ol.render.canvas.defaultTextBaseline; } state.textStyle = textStyle; } diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 6ab1f12fcc..8a72a97353 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -466,6 +466,12 @@ ol.render.canvas.ImageReplay = function(pixelRatio, tolerance) { */ this.anchorY_ = undefined; + /** + * @private + * @type {HTMLCanvasElement|HTMLVideoElement|Image} + */ + this.hitDetectionImage_ = null; + /** * @private * @type {HTMLCanvasElement|HTMLVideoElement|Image} @@ -528,13 +534,16 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry = var myBegin = this.coordinates.length; var myEnd = this.drawCoordinates_( flatCoordinates, 0, flatCoordinates.length, stride); - var drawImageInstruction = [ + this.instructions.push([ ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.anchorX_, this.anchorY_, this.width_, this.height_, this.image_, this.snapToPixel_ - ]; - this.instructions.push(drawImageInstruction); - this.hitDetectionInstructions.push(drawImageInstruction); + ]); + this.hitDetectionInstructions.push([ + ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, + this.anchorX_, this.anchorY_, this.width_, this.height_, + this.hitDetectionImage_, this.snapToPixel_ + ]); this.endGeometry(pointGeometry, data); }; @@ -558,13 +567,16 @@ ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry = var myBegin = this.coordinates.length; var myEnd = this.drawCoordinates_( flatCoordinates, 0, flatCoordinates.length, stride); - var drawImageInstruction = [ + this.instructions.push([ ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, this.anchorX_, this.anchorY_, this.width_, this.height_, this.image_, this.snapToPixel_ - ]; - this.instructions.push(drawImageInstruction); - this.hitDetectionInstructions.push(drawImageInstruction); + ]); + this.hitDetectionInstructions.push([ + ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, + this.anchorX_, this.anchorY_, this.width_, this.height_, + this.hitDetectionImage_, this.snapToPixel_ + ]); this.endGeometry(multiPointGeometry, data); }; @@ -577,6 +589,7 @@ ol.render.canvas.ImageReplay.prototype.finish = function() { // FIXME this doesn't really protect us against further calls to draw*Geometry this.anchorX_ = undefined; this.anchorY_ = undefined; + this.hitDetectionImage_ = null; this.image_ = null; this.height_ = undefined; this.width_ = undefined; @@ -589,15 +602,22 @@ ol.render.canvas.ImageReplay.prototype.finish = function() { */ ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) { goog.asserts.assert(!goog.isNull(imageStyle)); - goog.asserts.assert(!goog.isNull(imageStyle.anchor)); - goog.asserts.assert(goog.isDef(imageStyle.size)); - goog.asserts.assert(!goog.isNull(imageStyle.image)); - this.anchorX_ = imageStyle.anchor[0]; - this.anchorY_ = imageStyle.anchor[1]; - this.image_ = imageStyle.image; - this.width_ = imageStyle.size[0]; - this.height_ = imageStyle.size[1]; - this.snapToPixel_ = imageStyle.snapToPixel; + var anchor = imageStyle.getAnchor(); + goog.asserts.assert(!goog.isNull(anchor)); + var size = imageStyle.getSize(); + goog.asserts.assert(!goog.isNull(size)); + // FIXME pixel ratio + var hitDetectionImage = imageStyle.getHitDetectionImage(1); + goog.asserts.assert(!goog.isNull(hitDetectionImage)); + var image = imageStyle.getImage(1); + goog.asserts.assert(!goog.isNull(image)); + this.anchorX_ = anchor[0]; + this.anchorY_ = anchor[1]; + this.hitDetectionImage_ = hitDetectionImage; + this.image_ = image; + this.width_ = size[0]; + this.height_ = size[1]; + this.snapToPixel_ = imageStyle.getSnapToPixel(); }; @@ -790,18 +810,24 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = goog.asserts.assert(!goog.isNull(this.state_)); goog.asserts.assert(goog.isNull(fillStyle)); goog.asserts.assert(!goog.isNull(strokeStyle)); - this.state_.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ? - strokeStyle.color : ol.render.canvas.defaultStrokeStyle); - this.state_.lineCap = goog.isDef(strokeStyle.lineCap) ? - strokeStyle.lineCap : ol.render.canvas.defaultLineCap; - this.state_.lineDash = !goog.isNull(strokeStyle.lineDash) ? - strokeStyle.lineDash : ol.render.canvas.defaultLineDash; - this.state_.lineJoin = goog.isDef(strokeStyle.lineJoin) ? - strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin; - this.state_.lineWidth = this.pixelRatio * (goog.isDef(strokeStyle.width) ? - strokeStyle.width : ol.render.canvas.defaultLineWidth); - this.state_.miterLimit = goog.isDef(strokeStyle.miterLimit) ? - strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit; + var strokeStyleColor = strokeStyle.getColor(); + this.state_.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ? + strokeStyleColor : ol.render.canvas.defaultStrokeStyle); + var strokeStyleLineCap = strokeStyle.getLineCap(); + this.state_.lineCap = goog.isDef(strokeStyleLineCap) ? + strokeStyleLineCap : ol.render.canvas.defaultLineCap; + var strokeStyleLineDash = strokeStyle.getLineDash(); + this.state_.lineDash = !goog.isNull(strokeStyleLineDash) ? + strokeStyleLineDash : ol.render.canvas.defaultLineDash; + var strokeStyleLineJoin = strokeStyle.getLineJoin(); + this.state_.lineJoin = goog.isDef(strokeStyleLineJoin) ? + strokeStyleLineJoin : ol.render.canvas.defaultLineJoin; + var strokeStyleWidth = strokeStyle.getWidth(); + this.state_.lineWidth = this.pixelRatio * (goog.isDef(strokeStyleWidth) ? + strokeStyleWidth : ol.render.canvas.defaultLineWidth); + var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); + this.state_.miterLimit = goog.isDef(strokeStyleMiterLimit) ? + strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; }; @@ -1009,24 +1035,31 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = goog.asserts.assert(!goog.isNull(fillStyle) || !goog.isNull(strokeStyle)); var state = this.state_; if (!goog.isNull(fillStyle)) { - state.fillStyle = ol.color.asString(!goog.isNull(fillStyle.color) ? - fillStyle.color : ol.render.canvas.defaultFillStyle); + var fillStyleColor = fillStyle.getColor(); + state.fillStyle = ol.color.asString(!goog.isNull(fillStyleColor) ? + fillStyleColor : ol.render.canvas.defaultFillStyle); } else { state.fillStyle = undefined; } if (!goog.isNull(strokeStyle)) { - state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyle.color) ? - strokeStyle.color : ol.render.canvas.defaultStrokeStyle); - state.lineCap = goog.isDef(strokeStyle.lineCap) ? - strokeStyle.lineCap : ol.render.canvas.defaultLineCap; - state.lineDash = !goog.isNull(strokeStyle.lineDash) ? - strokeStyle.lineDash : ol.render.canvas.defaultLineDash; - state.lineJoin = goog.isDef(strokeStyle.lineJoin) ? - strokeStyle.lineJoin : ol.render.canvas.defaultLineJoin; - state.lineWidth = this.pixelRatio * (goog.isDef(strokeStyle.width) ? - strokeStyle.width : ol.render.canvas.defaultLineWidth); - state.miterLimit = goog.isDef(strokeStyle.miterLimit) ? - strokeStyle.miterLimit : ol.render.canvas.defaultMiterLimit; + var strokeStyleColor = strokeStyle.getColor(); + state.strokeStyle = ol.color.asString(!goog.isNull(strokeStyleColor) ? + strokeStyleColor : ol.render.canvas.defaultStrokeStyle); + var strokeStyleLineCap = strokeStyle.getLineCap(); + state.lineCap = goog.isDef(strokeStyleLineCap) ? + strokeStyleLineCap : ol.render.canvas.defaultLineCap; + var strokeStyleLineDash = strokeStyle.getLineDash(); + state.lineDash = !goog.isNull(strokeStyleLineDash) ? + strokeStyleLineDash : ol.render.canvas.defaultLineDash; + var strokeStyleLineJoin = strokeStyle.getLineJoin(); + state.lineJoin = goog.isDef(strokeStyleLineJoin) ? + strokeStyleLineJoin : ol.render.canvas.defaultLineJoin; + var strokeStyleWidth = strokeStyle.getWidth(); + state.lineWidth = this.pixelRatio * (goog.isDef(strokeStyleWidth) ? + strokeStyleWidth : ol.render.canvas.defaultLineWidth); + var strokeStyleMiterLimit = strokeStyle.getMiterLimit(); + state.miterLimit = goog.isDef(strokeStyleMiterLimit) ? + strokeStyleMiterLimit : ol.render.canvas.defaultMiterLimit; } else { state.strokeStyle = undefined; state.lineCap = undefined; diff --git a/src/ol/render/dragbox.js b/src/ol/render/dragbox.js index 7142514672..80e938a0c8 100644 --- a/src/ol/render/dragbox.js +++ b/src/ol/render/dragbox.js @@ -96,7 +96,7 @@ ol.render.DragBox.prototype.handleMapPostCompose_ = function(event) { ]; var geometry = new ol.geom.Polygon(coordinates); var style = this.style_; - render.setFillStrokeStyle(style.fill, style.stroke); + render.setFillStrokeStyle(style.getFill(), style.getStroke()); render.drawPolygonGeometry(geometry, null); }; diff --git a/src/ol/render/vector.js b/src/ol/render/vector.js index 6143a6080f..d612492422 100644 --- a/src/ol/render/vector.js +++ b/src/ol/render/vector.js @@ -61,14 +61,15 @@ ol.renderer.vector.renderGeometryCollectionGeometry_ = */ ol.renderer.vector.renderLineStringGeometry_ = function(replayGroup, geometry, style, data) { - if (goog.isNull(style.stroke)) { + var strokeStyle = style.getStroke(); + if (goog.isNull(strokeStyle)) { return; } goog.asserts.assertInstanceof(geometry, ol.geom.LineString); var lineStringGeometry = /** @type {ol.geom.LineString} */ (geometry); var replay = replayGroup.getReplay( - style.zIndex, ol.render.ReplayType.LINE_STRING); - replay.setFillStrokeStyle(null, style.stroke); + style.getZIndex(), ol.render.ReplayType.LINE_STRING); + replay.setFillStrokeStyle(null, strokeStyle); replay.drawLineStringGeometry(lineStringGeometry, data); }; @@ -82,15 +83,16 @@ ol.renderer.vector.renderLineStringGeometry_ = */ ol.renderer.vector.renderMultiLineStringGeometry_ = function(replayGroup, geometry, style, data) { - if (goog.isNull(style.stroke)) { + var strokeStyle = style.getStroke(); + if (goog.isNull(strokeStyle)) { return; } goog.asserts.assertInstanceof(geometry, ol.geom.MultiLineString); var multiLineStringGeometry = /** @type {ol.geom.MultiLineString} */ (geometry); var replay = replayGroup.getReplay( - style.zIndex, ol.render.ReplayType.LINE_STRING); - replay.setFillStrokeStyle(null, style.stroke); + style.getZIndex(), ol.render.ReplayType.LINE_STRING); + replay.setFillStrokeStyle(null, strokeStyle); replay.drawMultiLineStringGeometry(multiLineStringGeometry, data); }; @@ -104,15 +106,17 @@ ol.renderer.vector.renderMultiLineStringGeometry_ = */ ol.renderer.vector.renderMultiPolygonGeometry_ = function(replayGroup, geometry, style, data) { - if (goog.isNull(style.stroke) && goog.isNull(style.fill)) { + var fillStyle = style.getFill(); + var strokeStyle = style.getStroke(); + if (goog.isNull(strokeStyle) && goog.isNull(fillStyle)) { return; } goog.asserts.assertInstanceof(geometry, ol.geom.MultiPolygon); var multiPolygonGeometry = /** @type {ol.geom.MultiPolygon} */ (geometry); var replay = replayGroup.getReplay( - style.zIndex, ol.render.ReplayType.POLYGON); - replay.setFillStrokeStyle(style.fill, style.stroke); + style.getZIndex(), ol.render.ReplayType.POLYGON); + replay.setFillStrokeStyle(fillStyle, strokeStyle); replay.drawMultiPolygonGeometry(multiPolygonGeometry, data); }; @@ -126,13 +130,15 @@ ol.renderer.vector.renderMultiPolygonGeometry_ = */ ol.renderer.vector.renderPointGeometry_ = function(replayGroup, geometry, style, data) { - if (goog.isNull(style.image)) { + var imageStyle = style.getImage(); + if (goog.isNull(imageStyle)) { return; } goog.asserts.assertInstanceof(geometry, ol.geom.Point); var pointGeometry = /** @type {ol.geom.Point} */ (geometry); - var replay = replayGroup.getReplay(style.zIndex, ol.render.ReplayType.IMAGE); - replay.setImageStyle(style.image); + var replay = replayGroup.getReplay( + style.getZIndex(), ol.render.ReplayType.IMAGE); + replay.setImageStyle(imageStyle); replay.drawPointGeometry(pointGeometry, data); }; @@ -146,13 +152,15 @@ ol.renderer.vector.renderPointGeometry_ = */ ol.renderer.vector.renderMultiPointGeometry_ = function(replayGroup, geometry, style, data) { - if (goog.isNull(style.image)) { + var imageStyle = style.getImage(); + if (goog.isNull(imageStyle)) { return; } goog.asserts.assertInstanceof(geometry, ol.geom.MultiPoint); var multiPointGeometry = /** @type {ol.geom.MultiPoint} */ (geometry); - var replay = replayGroup.getReplay(style.zIndex, ol.render.ReplayType.IMAGE); - replay.setImageStyle(style.image); + var replay = replayGroup.getReplay( + style.getZIndex(), ol.render.ReplayType.IMAGE); + replay.setImageStyle(imageStyle); replay.drawMultiPointGeometry(multiPointGeometry, data); }; @@ -166,14 +174,16 @@ ol.renderer.vector.renderMultiPointGeometry_ = */ ol.renderer.vector.renderPolygonGeometry_ = function(replayGroup, geometry, style, data) { - if (goog.isNull(style.fill) && goog.isNull(style.stroke)) { + var fillStyle = style.getFill(); + var strokeStyle = style.getStroke(); + if (goog.isNull(fillStyle) && goog.isNull(strokeStyle)) { return; } goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); var polygonGeometry = /** @type {ol.geom.Polygon} */ (geometry); var replay = replayGroup.getReplay( - style.zIndex, ol.render.ReplayType.POLYGON); - replay.setFillStrokeStyle(style.fill, style.stroke); + style.getZIndex(), ol.render.ReplayType.POLYGON); + replay.setFillStrokeStyle(fillStyle, strokeStyle); replay.drawPolygonGeometry(polygonGeometry, data); }; diff --git a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js index 7354c7c3c7..a6001644bd 100644 --- a/src/ol/renderer/canvas/canvasvectorlayerrenderer.js +++ b/src/ol/renderer/canvas/canvasvectorlayerrenderer.js @@ -151,7 +151,7 @@ ol.renderer.canvas.VectorLayer.prototype.getVectorLayer = function() { ol.renderer.canvas.VectorLayer.prototype.handleImageStyleChange_ = function(event) { var imageStyle = /** @type {ol.style.Image} */ (event.target); - if (imageStyle.imageState == ol.style.ImageState.LOADED) { + if (imageStyle.getImageState() == ol.style.ImageState.LOADED) { this.renderIfReadyAndVisible(); } }; @@ -244,18 +244,19 @@ ol.renderer.canvas.VectorLayer.prototype.renderFeature = var i, ii, style, imageStyle, imageState; for (i = 0, ii = styles.length; i < ii; ++i) { style = styles[i]; - imageStyle = style.image; + imageStyle = style.getImage(); if (!goog.isNull(imageStyle)) { - if (imageStyle.imageState == ol.style.ImageState.IDLE) { + if (imageStyle.getImageState() == ol.style.ImageState.IDLE) { goog.events.listenOnce(imageStyle, goog.events.EventType.CHANGE, this.handleImageStyleChange_, false, this); imageStyle.load(); - } else if (imageStyle.imageState == ol.style.ImageState.LOADED) { + } else if (imageStyle.getImageState() == ol.style.ImageState.LOADED) { ol.renderer.vector.renderFeature( replayGroup, feature, style, squaredTolerance, feature); } - goog.asserts.assert(imageStyle.imageState != ol.style.ImageState.IDLE); - loading = imageStyle.imageState == ol.style.ImageState.LOADING; + goog.asserts.assert( + imageStyle.getImageState() != ol.style.ImageState.IDLE); + loading = imageStyle.getImageState() == ol.style.ImageState.LOADING; } else { ol.renderer.vector.renderFeature( replayGroup, feature, style, squaredTolerance, feature); diff --git a/src/ol/shape.exports b/src/ol/shape.exports deleted file mode 100644 index a0b23dcfaa..0000000000 --- a/src/ol/shape.exports +++ /dev/null @@ -1 +0,0 @@ -@exportSymbol ol.shape.renderCircle diff --git a/src/ol/shape.js b/src/ol/shape.js deleted file mode 100644 index 7549a5ec00..0000000000 --- a/src/ol/shape.js +++ /dev/null @@ -1,57 +0,0 @@ -// FIXME check size when stroked -// FIXME move to ol.render? -// FIXME find a sensible caching strategy - -goog.provide('ol.shape'); - -goog.require('goog.dom'); -goog.require('goog.dom.TagName'); -goog.require('ol.color'); -goog.require('ol.style.Fill'); -goog.require('ol.style.Image'); -goog.require('ol.style.ImageState'); -goog.require('ol.style.Stroke'); - - -/** - * @param {number} radius Radius. - * @param {ol.style.Fill} fillStyle Fill style. - * @param {ol.style.Stroke} strokeStyle Stroke style. - * @return {ol.style.Image} Image. - */ -ol.shape.renderCircle = function(radius, fillStyle, strokeStyle) { - - var canvas = /** @type {HTMLCanvasElement} */ - (goog.dom.createElement(goog.dom.TagName.CANVAS)); - var size = 2 * radius + 1; - if (!goog.isNull(strokeStyle) && goog.isDef(strokeStyle.width)) { - size += strokeStyle.width; - } - canvas.height = size; - canvas.width = size; - - var context = /** @type {CanvasRenderingContext2D} */ - (canvas.getContext('2d')); - context.arc(size / 2, size / 2, radius, 0, 2 * Math.PI, true); - - if (goog.isDefAndNotNull(fillStyle)) { - context.fillStyle = ol.color.asString(fillStyle.color); - context.fill(); - } - if (goog.isDefAndNotNull(strokeStyle)) { - context.strokeStyle = ol.color.asString(strokeStyle.color); - context.lineWidth = goog.isDef(strokeStyle.width) ? strokeStyle.width : 1; - context.stroke(); - } - - return new ol.style.Image({ - anchor: [size / 2, size / 2], - size: [size, size], - image: canvas, - imageState: ol.style.ImageState.LOADED, - rotation: 0, - snapToPixel: undefined, - subtractViewRotation: false - }); - -}; diff --git a/src/ol/style/circlestyle.exports b/src/ol/style/circlestyle.exports new file mode 100644 index 0000000000..f397b8a0bc --- /dev/null +++ b/src/ol/style/circlestyle.exports @@ -0,0 +1,5 @@ +@exportSymbol ol.style.Circle +@exportProperty ol.style.Circle.prototype.getFill +@exportProperty ol.style.Circle.prototype.getImage +@exportProperty ol.style.Circle.prototype.getRadius +@exportProperty ol.style.Circle.prototype.getStroke diff --git a/src/ol/style/circlestyle.js b/src/ol/style/circlestyle.js new file mode 100644 index 0000000000..c698f46247 --- /dev/null +++ b/src/ol/style/circlestyle.js @@ -0,0 +1,142 @@ +// FIXME decide default value for snapToPixel + +goog.provide('ol.style.Circle'); + +goog.require('goog.dom'); +goog.require('goog.dom.TagName'); +goog.require('ol.color'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Image'); +goog.require('ol.style.ImageState'); +goog.require('ol.style.Stroke'); + + + +/** + * @constructor + * @param {olx.style.CircleOptions=} opt_options Options. + * @extends {ol.style.Image} + */ +ol.style.Circle = function(opt_options) { + + var options = goog.isDef(opt_options) ? opt_options : {}; + + /** + * @private + * @type {HTMLCanvasElement} + */ + this.canvas_ = /** @type {HTMLCanvasElement} */ + (goog.dom.createElement(goog.dom.TagName.CANVAS)); + + /** + * @private + * @type {ol.style.Fill} + */ + this.fill_ = goog.isDef(options.fill) ? options.fill : null; + + /** + * @private + * @type {number} + */ + this.radius_ = options.radius; + + /** + * @private + * @type {ol.style.Stroke} + */ + this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null; + + var size = this.render_(); + + goog.base(this, { + anchor: [size / 2, size / 2], + imageState: ol.style.ImageState.LOADED, + rotation: 0, + size: [size, size], + snapToPixel: undefined, + subtractViewRotation: false + }); + +}; +goog.inherits(ol.style.Circle, ol.style.Image); + + +/** + * @return {ol.style.Fill} Fill style. + */ +ol.style.Circle.prototype.getFill = function() { + return this.fill_; +}; + + +/** + * @inheritDoc + */ +ol.style.Circle.prototype.getHitDetectionImage = function(pixelRatio) { + return this.canvas_; +}; + + +/** + * @inheritDoc + */ +ol.style.Circle.prototype.getImage = function(pixelRatio) { + return this.canvas_; +}; + + +/** + * @return {number} Radius. + */ +ol.style.Circle.prototype.getRadius = function() { + return this.radius_; +}; + + +/** + * @return {ol.style.Stroke} Stroke style. + */ +ol.style.Circle.prototype.getStroke = function() { + return this.stroke_; +}; + + +/** + * @inheritDoc + */ +ol.style.Circle.prototype.load = goog.nullFunction; + + +/** + * @private + * @return {number} Size. + */ +ol.style.Circle.prototype.render_ = function() { + var canvas = this.canvas_; + var size = 2 * this.radius_ + 1; + + if (!goog.isNull(this.stroke_) && goog.isDef(this.stroke_.width)) { + size += this.stroke_.width; + } + + canvas.height = size; + canvas.width = size; + + var context = /** @type {CanvasRenderingContext2D} */ + (canvas.getContext('2d')); + context.arc(size / 2, size / 2, this.radius_, 0, 2 * Math.PI, true); + + if (!goog.isNull(this.fill_)) { + context.fillStyle = ol.color.asString(this.fill_.getColor()); + context.fill(); + } + if (!goog.isNull(this.stroke_)) { + var strokeColor = this.stroke_.getColor(); + context.strokeStyle = ol.color.asString(strokeColor); + var strokeWidth = this.stroke_.getWidth(); + context.lineWidth = goog.isDef(strokeWidth) ? strokeWidth : 1; + context.stroke(); + } + + return size; +}; diff --git a/src/ol/style/fillstyle.exports b/src/ol/style/fillstyle.exports index 4c10b8d9ca..81bb520fc8 100644 --- a/src/ol/style/fillstyle.exports +++ b/src/ol/style/fillstyle.exports @@ -1 +1,2 @@ @exportSymbol ol.style.Fill +@exportProperty ol.style.Fill.prototype.getColor diff --git a/src/ol/style/fillstyle.js b/src/ol/style/fillstyle.js index 78a4ddf59e..25f59b0be0 100644 --- a/src/ol/style/fillstyle.js +++ b/src/ol/style/fillstyle.js @@ -13,7 +13,16 @@ ol.style.Fill = function(opt_options) { var options = goog.isDef(opt_options) ? opt_options : {}; /** + * @private * @type {ol.Color|string} */ - this.color = goog.isDef(options.color) ? options.color : null; + this.color_ = goog.isDef(options.color) ? options.color : null; +}; + + +/** + * @return {ol.Color|string} Color. + */ +ol.style.Fill.prototype.getColor = function() { + return this.color_; }; diff --git a/src/ol/style/iconstyle.exports b/src/ol/style/iconstyle.exports new file mode 100644 index 0000000000..71c33637dd --- /dev/null +++ b/src/ol/style/iconstyle.exports @@ -0,0 +1,3 @@ +@exportSymbol ol.style.Icon +@exportProperty ol.style.Icon.prototype.getImage +@exportProperty ol.style.Icon.prototype.getSrc diff --git a/src/ol/style/iconstyle.js b/src/ol/style/iconstyle.js new file mode 100644 index 0000000000..96b312ee92 --- /dev/null +++ b/src/ol/style/iconstyle.js @@ -0,0 +1,213 @@ +// FIXME decide default value for snapToPixel + +goog.provide('ol.style.Icon'); + +goog.require('goog.array'); +goog.require('goog.asserts'); +goog.require('goog.dom'); +goog.require('goog.dom.TagName'); +goog.require('goog.events'); +goog.require('goog.events.EventType'); +goog.require('ol.style.Image'); +goog.require('ol.style.ImageState'); + + + +/** + * @constructor + * @param {olx.style.IconOptions=} opt_options Options. + * @extends {ol.style.Image} + */ +ol.style.Icon = function(opt_options) { + + var options = goog.isDef(opt_options) ? opt_options : {}; + + /** + * @private + * @type {Image|HTMLCanvasElement} + */ + this.hitDetectionImage_ = null; + + /** + * @private + * @type {Image} + */ + this.image_ = new Image(); + + /** + * @type {?string} + */ + var crossOrigin = + goog.isDef(options.crossOrigin) ? options.crossOrigin : null; + if (!goog.isNull(crossOrigin)) { + this.image_.crossOrigin = crossOrigin; + } + + /** + * @private + * @type {Array.} + */ + this.imageListenerKeys_ = null; + + /** + * @private + * @type {string|undefined} + */ + this.src_ = options.src; + + /** + * @private + * @type {boolean} + */ + this.tainting_ = false; + + /** + * @type {ol.Size} + */ + var size = goog.isDef(options.size) ? options.size : null; + + /** + * @type {ol.Pixel} + */ + var anchor; + if (goog.isDef(options.anchor)) { + anchor = options.anchor; + } else if (!goog.isNull(size)) { + anchor = [size[0] / 2, size[1] / 2]; + } else { + anchor = null; + } + + /** + * @type {number} + */ + var rotation = goog.isDef(options.rotation) ? options.rotation : 0; + + goog.base(this, { + anchor: anchor, + imageState: ol.style.ImageState.IDLE, + rotation: rotation, + size: size, + snapToPixel: undefined, + subtractViewRotation: false + }); + +}; +goog.inherits(ol.style.Icon, ol.style.Image); + + +/** + * @private + */ +ol.style.Icon.prototype.determineTainting_ = function() { + var canvas = /** @type {HTMLCanvasElement} */ + (goog.dom.createElement(goog.dom.TagName.CANVAS)); + canvas.width = 1; + canvas.height = 1; + var context = /** @type {CanvasRenderingContext2D} */ + (canvas.getContext('2d')); + context.drawImage(this.image_, 0, 0); + try { + context.getImageData(0, 0, 1, 1); + } catch (e) { + this.tainting_ = true; + } +}; + + +/** + * @private + */ +ol.style.Icon.prototype.handleImageError_ = function() { + this.imageState = ol.style.ImageState.ERROR; + this.unlistenImage_(); + this.dispatchChangeEvent(); +}; + + +/** + * @private + */ +ol.style.Icon.prototype.handleImageLoad_ = function() { + this.imageState = ol.style.ImageState.LOADED; + if (goog.isNull(this.size)) { + this.size = [this.image_.width, this.image_.height]; + } + if (goog.isNull(this.anchor)) { + this.anchor = [this.size[0] / 2, this.size[1] / 2]; + } + this.unlistenImage_(); + this.determineTainting_(); + this.dispatchChangeEvent(); +}; + + +/** + * @inheritDoc + */ +ol.style.Icon.prototype.getImage = function(pixelRatio) { + return this.image_; +}; + + +/** + * @inheritDoc + */ +ol.style.Icon.prototype.getHitDetectionImage = function(pixelRatio) { + if (goog.isNull(this.hitDetectionImage_)) { + if (this.tainting_) { + var canvas = /** @type {HTMLCanvasElement} */ + (goog.dom.createElement(goog.dom.TagName.CANVAS)); + var width = this.size[0]; + var height = this.size[1]; + canvas.width = width; + canvas.height = height; + var context = /** @type {CanvasRenderingContext2D} */ + (canvas.getContext('2d')); + context.fillRect(0, 0, width, height); + this.hitDetectionImage_ = canvas; + } else { + this.hitDetectionImage_ = this.image_; + } + } + return this.hitDetectionImage_; +}; + + +/** + * @return {string|undefined} Image src. + */ +ol.style.Icon.prototype.getSrc = function() { + return this.src_; +}; + + +/** + * Load not yet loaded URI. + */ +ol.style.Icon.prototype.load = function() { + if (this.imageState == ol.style.ImageState.IDLE) { + goog.asserts.assert(goog.isDef(this.src_)); + goog.asserts.assert(goog.isNull(this.imageListenerKeys_)); + this.imageState = ol.style.ImageState.LOADING; + this.imageListenerKeys_ = [ + goog.events.listenOnce(this.image_, goog.events.EventType.ERROR, + this.handleImageError_, false, this), + goog.events.listenOnce(this.image_, goog.events.EventType.LOAD, + this.handleImageLoad_, false, this) + ]; + this.image_.src = this.src_; + } +}; + + +/** + * Discards event handlers which listen for load completion or errors. + * + * @private + */ +ol.style.Icon.prototype.unlistenImage_ = function() { + goog.asserts.assert(!goog.isNull(this.imageListenerKeys_)); + goog.array.forEach(this.imageListenerKeys_, goog.events.unlistenByKey); + this.imageListenerKeys_ = null; +}; diff --git a/src/ol/style/imagestyle.exports b/src/ol/style/imagestyle.exports index 070870ecef..d41b6f4897 100644 --- a/src/ol/style/imagestyle.exports +++ b/src/ol/style/imagestyle.exports @@ -1 +1,4 @@ @exportSymbol ol.style.Image +@exportProperty ol.style.Image.prototype.getAnchor +@exportProperty ol.style.Image.prototype.getRotation +@exportProperty ol.style.Image.prototype.getSize diff --git a/src/ol/style/imagestyle.js b/src/ol/style/imagestyle.js index 98087746b9..ddb5089401 100644 --- a/src/ol/style/imagestyle.js +++ b/src/ol/style/imagestyle.js @@ -1,10 +1,7 @@ -// FIXME decide default value for snapToPixel - goog.provide('ol.style.Image'); goog.provide('ol.style.ImageState'); goog.require('goog.array'); -goog.require('goog.asserts'); goog.require('goog.events'); goog.require('goog.events.EventTarget'); goog.require('goog.events.EventType'); @@ -21,138 +18,138 @@ ol.style.ImageState = { }; +/** + * @typedef {{anchor: ol.Pixel, + * imageState: ol.style.ImageState, + * rotation: number, + * size: ol.Size, + * snapToPixel: (boolean|undefined), + * subtractViewRotation: boolean}} + */ +ol.style.ImageOptions; + + /** * @constructor - * @param {olx.style.ImageOptions=} opt_options Options. + * @param {ol.style.ImageOptions} options Options. * @extends {goog.events.EventTarget} */ -ol.style.Image = function(opt_options) { - - var options = goog.isDef(opt_options) ? opt_options : {}; +ol.style.Image = function(options) { goog.base(this); /** + * @protected * @type {ol.Pixel} */ this.anchor = options.anchor; /** - * @type {HTMLCanvasElement|HTMLVideoElement|Image} - */ - this.image = goog.isDefAndNotNull(options.image) ? - options.image : new Image(); - if (!goog.isNull(options.crossOrigin)) { - this.image.crossOrigin = options.crossOrigin; - } - - /** + * @protected * @type {ol.style.ImageState} */ - this.imageState = goog.isDef(options.imageState) ? - options.imageState : ol.style.ImageState.IDLE; + this.imageState = options.imageState; /** + * @private * @type {number|undefined} */ - this.rotation = options.rotation; + this.rotation_ = options.rotation; /** + * @protected * @type {ol.Size} */ this.size = options.size; /** + * @private * @type {boolean|undefined} */ - this.snapToPixel = options.snapToPixel; - - /** - * @type {boolean|undefined} - */ - this.subtractViewRotation = options.subtractViewRotation; + this.snapToPixel_ = options.snapToPixel; /** * @private - * @type {Array.} + * @type {boolean|undefined} */ - this.imageListenerKeys_ = null; - - /** - * @private - * @type {string|undefined} - */ - this.src_ = options.src; + this.subtractViewRotation_ = options.subtractViewRotation; }; goog.inherits(ol.style.Image, goog.events.EventTarget); /** - * @private + * @protected */ -ol.style.Image.prototype.dispatchChangeEvent_ = function() { +ol.style.Image.prototype.dispatchChangeEvent = function() { this.dispatchEvent(goog.events.EventType.CHANGE); }; /** - * Tracks loading or read errors. - * - * @private + * @return {ol.Pixel} Anchor. */ -ol.style.Image.prototype.handleImageError_ = function() { - this.imageState = ol.style.ImageState.ERROR; - this.unlistenImage_(); - this.dispatchChangeEvent_(); +ol.style.Image.prototype.getAnchor = function() { + return this.anchor; }; /** - * Tracks successful image load. - * - * @private + * @return {ol.style.ImageState} Image state. */ -ol.style.Image.prototype.handleImageLoad_ = function() { - this.imageState = ol.style.ImageState.LOADED; - if (goog.isNull(this.size)) { - this.size = [this.image.width, this.image.height]; - } - if (goog.isNull(this.anchor)) { - this.anchor = [this.size[0] / 2, this.size[1] / 2]; - } - this.unlistenImage_(); - this.dispatchChangeEvent_(); +ol.style.Image.prototype.getImageState = function() { + return this.imageState; }; +/** + * @return {number|undefined} Rotation. + */ +ol.style.Image.prototype.getRotation = function() { + return this.rotation_; +}; + + +/** + * @return {ol.Size} Size. + */ +ol.style.Image.prototype.getSize = function() { + return this.size; +}; + + +/** + * @return {boolean|undefined} Snap to pixel? + */ +ol.style.Image.prototype.getSnapToPixel = function() { + return this.snapToPixel_; +}; + + +/** + * @return {boolean|undefined} Subtract view rotation? + */ +ol.style.Image.prototype.getSubtractViewRotation = function() { + return this.subtractViewRotation_; +}; + + +/** + * @param {number} pixelRatio Pixel ratio. + * @return {HTMLCanvasElement|HTMLVideoElement|Image} Image element. + */ +ol.style.Image.prototype.getImage = goog.abstractMethod; + + +/** + * @param {number} pixelRatio Pixel ratio. + * @return {HTMLCanvasElement|HTMLVideoElement|Image} Image element. + */ +ol.style.Image.prototype.getHitDetectionImage = goog.abstractMethod; + + /** * Load not yet loaded URI. */ -ol.style.Image.prototype.load = function() { - if (this.imageState == ol.style.ImageState.IDLE) { - goog.asserts.assert(goog.isDef(this.src_)); - goog.asserts.assert(goog.isNull(this.imageListenerKeys_)); - this.imageState = ol.style.ImageState.LOADING; - this.imageListenerKeys_ = [ - goog.events.listenOnce(this.image, goog.events.EventType.ERROR, - this.handleImageError_, false, this), - goog.events.listenOnce(this.image, goog.events.EventType.LOAD, - this.handleImageLoad_, false, this) - ]; - this.image.src = this.src_; - } -}; - - -/** - * Discards event handlers which listen for load completion or errors. - * - * @private - */ -ol.style.Image.prototype.unlistenImage_ = function() { - goog.asserts.assert(!goog.isNull(this.imageListenerKeys_)); - goog.array.forEach(this.imageListenerKeys_, goog.events.unlistenByKey); - this.imageListenerKeys_ = null; -}; +ol.style.Image.prototype.load = goog.abstractMethod; diff --git a/src/ol/style/strokestyle.exports b/src/ol/style/strokestyle.exports index 20bb65ff96..3e2060e9d8 100644 --- a/src/ol/style/strokestyle.exports +++ b/src/ol/style/strokestyle.exports @@ -1 +1,7 @@ @exportSymbol ol.style.Stroke +@exportProperty ol.style.Stroke.prototype.getColor +@exportProperty ol.style.Stroke.prototype.getLineCap +@exportProperty ol.style.Stroke.prototype.getLineDash +@exportProperty ol.style.Stroke.prototype.getLineJoin +@exportProperty ol.style.Stroke.prototype.getMiterLimit +@exportProperty ol.style.Stroke.prototype.getWidth diff --git a/src/ol/style/strokestyle.js b/src/ol/style/strokestyle.js index 7363fd3a2f..08bbeab522 100644 --- a/src/ol/style/strokestyle.js +++ b/src/ol/style/strokestyle.js @@ -13,32 +13,86 @@ ol.style.Stroke = function(opt_options) { var options = goog.isDef(opt_options) ? opt_options : {}; /** + * @private * @type {ol.Color|string} */ - this.color = goog.isDef(options.color) ? options.color : null; + this.color_ = goog.isDef(options.color) ? options.color : null; /** + * @private * @type {string|undefined} */ - this.lineCap = options.lineCap; + this.lineCap_ = options.lineCap; /** + * @private * @type {Array.} */ - this.lineDash = goog.isDef(options.lineDash) ? options.lineDash : null; + this.lineDash_ = goog.isDef(options.lineDash) ? options.lineDash : null; /** + * @private * @type {string|undefined} */ - this.lineJoin = options.lineJoin; + this.lineJoin_ = options.lineJoin; /** + * @private * @type {number|undefined} */ - this.miterLimit = options.miterLimit; + this.miterLimit_ = options.miterLimit; /** + * @private * @type {number|undefined} */ - this.width = options.width; + this.width_ = options.width; +}; + + +/** + * @return {ol.Color|string} Color. + */ +ol.style.Stroke.prototype.getColor = function() { + return this.color_; +}; + + +/** + * @return {string|undefined} Line cap. + */ +ol.style.Stroke.prototype.getLineCap = function() { + return this.lineCap_; +}; + + +/** + * @return {Array.} Line dash. + */ +ol.style.Stroke.prototype.getLineDash = function() { + return this.lineDash_; +}; + + +/** + * @return {string|undefined} Line join. + */ +ol.style.Stroke.prototype.getLineJoin = function() { + return this.lineJoin_; +}; + + +/** + * @return {number|undefined} Miter limit. + */ +ol.style.Stroke.prototype.getMiterLimit = function() { + return this.miterLimit_; +}; + + +/** + * @return {number|undefined} Width. + */ +ol.style.Stroke.prototype.getWidth = function() { + return this.width_; }; diff --git a/src/ol/style/style.exports b/src/ol/style/style.exports index c6eea6e449..94767397d0 100644 --- a/src/ol/style/style.exports +++ b/src/ol/style/style.exports @@ -1 +1,6 @@ @exportSymbol ol.style.Style +@exportProperty ol.style.Style.prototype.getFill +@exportProperty ol.style.Style.prototype.getImage +@exportProperty ol.style.Style.prototype.getStroke +@exportProperty ol.style.Style.prototype.getText +@exportProperty ol.style.Style.prototype.getZIndex diff --git a/src/ol/style/style.js b/src/ol/style/style.js index ebe3360482..efb8d8f340 100644 --- a/src/ol/style/style.js +++ b/src/ol/style/style.js @@ -16,33 +16,78 @@ ol.style.Style = function(opt_options) { var options = goog.isDef(opt_options) ? opt_options : {}; /** + * @private * @type {ol.style.Fill} */ - this.fill = goog.isDef(options.fill) ? options.fill : null; + this.fill_ = goog.isDef(options.fill) ? options.fill : null; /** + * @private * @type {ol.style.Image} */ - this.image = goog.isDef(options.image) ? options.image : null; + this.image_ = goog.isDef(options.image) ? options.image : null; /** + * @private * @type {ol.style.Stroke} */ - this.stroke = goog.isDef(options.stroke) ? options.stroke : null; + this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null; /** + * @private * @type {ol.style.Text} */ - this.text = goog.isDef(options.text) ? options.text : null; + this.text_ = goog.isDef(options.text) ? options.text : null; /** + * @private * @type {number|undefined} */ - this.zIndex = options.zIndex; + this.zIndex_ = options.zIndex; }; +/** + * @return {ol.style.Fill} Fill style. + */ +ol.style.Style.prototype.getFill = function() { + return this.fill_; +}; + + +/** + * @return {ol.style.Image} Image style. + */ +ol.style.Style.prototype.getImage = function() { + return this.image_; +}; + + +/** + * @return {ol.style.Stroke} Stroke style. + */ +ol.style.Style.prototype.getStroke = function() { + return this.stroke_; +}; + + +/** + * @return {ol.style.Text} Text style. + */ +ol.style.Style.prototype.getText = function() { + return this.text_; +}; + + +/** + * @return {number|undefined} ZIndex. + */ +ol.style.Style.prototype.getZIndex = function() { + return this.zIndex_; +}; + + /** * @typedef {function(ol.Feature, number): Array.} */ diff --git a/src/ol/style/textstyle.js b/src/ol/style/textstyle.js index a2a7851897..8ad1c50469 100644 --- a/src/ol/style/textstyle.js +++ b/src/ol/style/textstyle.js @@ -11,39 +11,46 @@ ol.style.Text = function(opt_options) { var options = goog.isDef(opt_options) ? opt_options : {}; /** + * @private * @type {string|undefined} */ - this.font = options.font; + this.font_ = options.font; /** + * @private * @type {number|undefined} */ - this.rotation = options.rotation; + this.rotation_ = options.rotation; /** + * @private * @type {string|undefined} */ - this.text = options.text; + this.text_ = options.text; /** + * @private * @type {string|undefined} */ - this.textAlign = options.textAlign; + this.textAlign_ = options.textAlign; /** + * @private * @type {string|undefined} */ - this.textBaseline = options.textBaseline; + this.textBaseline_ = options.textBaseline; /** + * @private * @type {ol.style.Fill} */ - this.fill = goog.isDef(options.fill) ? options.fill : null; + this.fill_ = goog.isDef(options.fill) ? options.fill : null; /** + * @private * @type {ol.style.Stroke} */ - this.stroke = goog.isDef(options.stroke) ? options.stroke : null; + this.stroke_ = goog.isDef(options.stroke) ? options.stroke : null; }; @@ -56,10 +63,10 @@ ol.style.Text.equals = function(textStyle1, textStyle2) { if (!goog.isNull(textStyle1)) { if (!goog.isNull(textStyle2)) { return textStyle1 === textStyle2 || ( - textStyle1.font == textStyle2.font && - textStyle1.text == textStyle2.text && - textStyle1.textAlign == textStyle2.textAlign && - textStyle1.textBaseline == textStyle2.textBaseline); + textStyle1.getFont() == textStyle2.getFont() && + textStyle1.getText() == textStyle2.getText() && + textStyle1.getTextAlign() == textStyle2.getTextAlign() && + textStyle1.getTextBaseline() == textStyle2.getTextBaseline()); } else { return false; } @@ -71,3 +78,59 @@ ol.style.Text.equals = function(textStyle1, textStyle2) { } } }; + + +/** + * @return {string|undefined} Font. + */ +ol.style.Text.prototype.getFont = function() { + return this.font_; +}; + + +/** + * @return {ol.style.Fill} Fill style. + */ +ol.style.Text.prototype.getFill = function() { + return this.fill_; +}; + + +/** + * @return {number|undefined} Rotation. + */ +ol.style.Text.prototype.getRotation = function() { + return this.rotation_; +}; + + +/** + * @return {ol.style.Stroke} Stroke style. + */ +ol.style.Text.prototype.getStroke = function() { + return this.stroke_; +}; + + +/** + * @return {string|undefined} Text. + */ +ol.style.Text.prototype.getText = function() { + return this.text_; +}; + + +/** + * @return {string|undefined} Text align. + */ +ol.style.Text.prototype.getTextAlign = function() { + return this.textAlign_; +}; + + +/** + * @return {string|undefined} Text baseline. + */ +ol.style.Text.prototype.getTextBaseline = function() { + return this.textBaseline_; +};