From d1d8d5f96c49d712f1c89afd37d7d731ee0fbbd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 18 Jun 2014 22:11:07 +0200 Subject: [PATCH] Add an offset property to ol.Overlay Replaces "offsetX" and "offsetY" by an ol.Object "offset" property. --- externs/olx.js | 31 ++++++++------------ src/ol/overlay.js | 75 ++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 73 insertions(+), 33 deletions(-) diff --git a/externs/olx.js b/externs/olx.js index 7c87c7bfdf..279f0e1981 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -203,12 +203,11 @@ olx.MapOptions.prototype.view; /** * Object literal with config options for the overlay. * @typedef {{element: (Element|undefined), + * offset: (Array.|undefined), * position: (ol.Coordinate|undefined), * positioning: (ol.OverlayPositioning|string|undefined), * stopEvent: (boolean|undefined), - * insertFirst: (boolean|undefined), - * offsetX: (number|undefined), - * offsetY: (number|undefined)}} + * insertFirst: (boolean|undefined)}} * @todo api */ olx.OverlayOptions; @@ -221,6 +220,16 @@ olx.OverlayOptions; olx.OverlayOptions.prototype.element; +/** + * Offsets in pixels used when positioning the overlay. The fist element in the + * array is the horizontal offset. A positive value shifts the overlay right. + * The second element in the array is the vertical offset. A positive value + * shifts the overlay down. Default is `[0, 0]`. + * @type {Array.|undefined} + */ +olx.OverlayOptions.prototype.offset; + + /** * The overlay position in map projection. * @type {ol.Coordinate|undefined} @@ -254,22 +263,6 @@ olx.OverlayOptions.prototype.stopEvent; olx.OverlayOptions.prototype.insertFirst; -/** - * Horizontal offset in pixels. A positive will shift the overlay right. Default - * is `0`. - * @type {number|undefined} - */ -olx.OverlayOptions.prototype.offsetX; - - -/** - * Vertical offset in pixels. A positive will shift the overlay down. Default is - * `0`. - * @type {number|undefined} - */ -olx.OverlayOptions.prototype.offsetY; - - /** * Object literal with config options for the Proj4js projection. * @typedef {{code: string, diff --git a/src/ol/overlay.js b/src/ol/overlay.js index cce29a6e7d..3681ef476d 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -19,6 +19,7 @@ goog.require('ol.Object'); ol.OverlayProperty = { ELEMENT: 'element', MAP: 'map', + OFFSET: 'offset', POSITION: 'position', POSITIONING: 'positioning' }; @@ -82,18 +83,6 @@ ol.Overlay = function(options) { */ this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : true; - /** - * @private - * @type {number} - */ - this.offsetX_ = goog.isDef(options.offsetX) ? options.offsetX : 0; - - /** - * @private - * @type {number} - */ - this.offsetY_ = goog.isDef(options.offsetY) ? options.offsetY : 0; - /** * @private * @type {Element} @@ -131,6 +120,10 @@ ol.Overlay = function(options) { this, ol.Object.getChangeEventType(ol.OverlayProperty.MAP), this.handleMapChanged, false, this); + goog.events.listen( + this, ol.Object.getChangeEventType(ol.OverlayProperty.OFFSET), + this.handleOffsetChanged, false, this); + goog.events.listen( this, ol.Object.getChangeEventType(ol.OverlayProperty.POSITION), this.handlePositionChanged, false, this); @@ -143,6 +136,9 @@ ol.Overlay = function(options) { if (goog.isDef(options.element)) { this.setElement(options.element); } + if (goog.isDef(options.offset)) { + this.setOffset(options.offset); + } if (goog.isDef(options.position)) { this.setPosition(options.position); } @@ -155,6 +151,14 @@ ol.Overlay = function(options) { goog.inherits(ol.Overlay, ol.Object); +/** + * Default offsets. + * @type {Array.} + * @private + */ +ol.Overlay.offset_ = [0, 0]; + + /** * Get the DOM element of this overlay. * @return {Element|undefined} The Element containing the overlay. @@ -187,6 +191,22 @@ goog.exportProperty( ol.Overlay.prototype.getMap); +/** + * Get the offset of this overlay. + * @return {Array.|undefined} The offset. + * @todo observable + * @todo api + */ +ol.Overlay.prototype.getOffset = function() { + return /** @type {Array.|undefined} */ ( + this.get(ol.OverlayProperty.OFFSET)); +}; +goog.exportProperty( + ol.Overlay.prototype, + 'getOffset', + ol.Overlay.prototype.getOffset); + + /** * Get the current position of this overlay. * @return {ol.Coordinate|undefined} The spatial point that the overlay is @@ -267,6 +287,14 @@ ol.Overlay.prototype.handleMapPostrender = function() { }; +/** + * @protected + */ +ol.Overlay.prototype.handleOffsetChanged = function() { + this.updatePixelPosition_(); +}; + + /** * @protected */ @@ -313,6 +341,21 @@ goog.exportProperty( ol.Overlay.prototype.setMap); +/** + * Set the offset for this overlay. + * @param {Array.|undefined} offset Offset. + * @todo observable + * @todo api + */ +ol.Overlay.prototype.setOffset = function(offset) { + this.set(ol.OverlayProperty.OFFSET, offset); +}; +goog.exportProperty( + ol.Overlay.prototype, + 'setOffset', + ol.Overlay.prototype.setOffset); + + /** * Set the position for this overlay. * @param {ol.Coordinate|undefined} position The spatial point that the overlay @@ -365,6 +408,10 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { var mapSize = map.getSize(); goog.asserts.assert(goog.isDef(mapSize)); var style = this.element_.style; + var offset = this.getOffset(); + if (!goog.isDef(offset)) { + offset = ol.Overlay.offset_; + } var positioning = this.getPositioning(); if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT || positioning == ol.OverlayPositioning.CENTER_RIGHT || @@ -380,7 +427,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { if (this.rendered_.right_ !== '') { this.rendered_.right_ = style.right = ''; } - var offsetX = -this.offsetX_; + var offsetX = -offset[0]; if (positioning == ol.OverlayPositioning.BOTTOM_CENTER || positioning == ol.OverlayPositioning.CENTER_CENTER || positioning == ol.OverlayPositioning.TOP_CENTER) { @@ -405,7 +452,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { if (this.rendered_.bottom_ !== '') { this.rendered_.bottom_ = style.bottom = ''; } - var offsetY = -this.offsetY_; + var offsetY = -offset[1]; if (positioning == ol.OverlayPositioning.CENTER_LEFT || positioning == ol.OverlayPositioning.CENTER_CENTER || positioning == ol.OverlayPositioning.CENTER_RIGHT) {