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 1/4] 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) { From dced47157ee52624f9cfa5e3a6bf14682b2aea85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 19 Jun 2014 09:57:58 +0200 Subject: [PATCH 2/4] Better docs for ol.Overlay#positioning --- externs/olx.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/externs/olx.js b/externs/olx.js index 279f0e1981..333a702541 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -238,7 +238,10 @@ olx.OverlayOptions.prototype.position; /** - * Positioning. + * Defines how the overlay is actually positioned with respect to its `position` + * property. Possible values are `'bottom-left'`, `'bottom-center'`, + * `'bottom-right'`, `'center-left'`, `'center-center'`, `'center-right'`, + * `'top-left'`, `'top-center'`, and `'top-right'`. Default is `'top-left'`. * @type {ol.OverlayPositioning|string|undefined} */ olx.OverlayOptions.prototype.positioning; From 0a0d12ec8a3dd4a887280a4d5f0d64daa572a983 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 19 Jun 2014 10:02:12 +0200 Subject: [PATCH 3/4] Make ol.Overlay always call setOffset --- src/ol/overlay.js | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/src/ol/overlay.js b/src/ol/overlay.js index 3681ef476d..70cd73fb07 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -136,9 +136,9 @@ ol.Overlay = function(options) { if (goog.isDef(options.element)) { this.setElement(options.element); } - if (goog.isDef(options.offset)) { - this.setOffset(options.offset); - } + + this.setOffset(goog.isDef(options.offset) ? options.offset : [0, 0]); + if (goog.isDef(options.position)) { this.setPosition(options.position); } @@ -151,14 +151,6 @@ 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. @@ -193,12 +185,12 @@ goog.exportProperty( /** * Get the offset of this overlay. - * @return {Array.|undefined} The offset. + * @return {Array.} The offset. * @todo observable * @todo api */ ol.Overlay.prototype.getOffset = function() { - return /** @type {Array.|undefined} */ ( + return /** @type {Array.} */ ( this.get(ol.OverlayProperty.OFFSET)); }; goog.exportProperty( @@ -343,7 +335,7 @@ goog.exportProperty( /** * Set the offset for this overlay. - * @param {Array.|undefined} offset Offset. + * @param {Array.} offset Offset. * @todo observable * @todo api */ @@ -409,9 +401,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { goog.asserts.assert(goog.isDef(mapSize)); var style = this.element_.style; var offset = this.getOffset(); - if (!goog.isDef(offset)) { - offset = ol.Overlay.offset_; - } + goog.asserts.assert(goog.isArray(offset)); var positioning = this.getPositioning(); if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT || positioning == ol.OverlayPositioning.CENTER_RIGHT || From af78adb4178f62493329a54ae19f0c9f5d0ef511 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 19 Jun 2014 10:09:57 +0200 Subject: [PATCH 4/4] Make ol.Overlay always call setPositioning --- src/ol/overlay.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/ol/overlay.js b/src/ol/overlay.js index 70cd73fb07..94642cc565 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -139,13 +139,13 @@ ol.Overlay = function(options) { this.setOffset(goog.isDef(options.offset) ? options.offset : [0, 0]); + this.setPositioning(goog.isDef(options.positioning) ? + /** @type {ol.OverlayPositioning} */ (options.positioning) : + ol.OverlayPositioning.TOP_LEFT); + if (goog.isDef(options.position)) { this.setPosition(options.position); } - if (goog.isDef(options.positioning)) { - this.setPositioning( - /** @type {ol.OverlayPositioning} */ (options.positioning)); - } }; goog.inherits(ol.Overlay, ol.Object); @@ -218,13 +218,13 @@ goog.exportProperty( /** * Get the current positioning of this overlay. - * @return {ol.OverlayPositioning|undefined} How the overlay is positioned + * @return {ol.OverlayPositioning} How the overlay is positioned * relative to its point on the map. * @todo observable * @todo api */ ol.Overlay.prototype.getPositioning = function() { - return /** @type {ol.OverlayPositioning|undefined} */ ( + return /** @type {ol.OverlayPositioning} */ ( this.get(ol.OverlayProperty.POSITIONING)); }; goog.exportProperty( @@ -366,7 +366,7 @@ goog.exportProperty( /** * Set the positioning for this overlay. - * @param {ol.OverlayPositioning|undefined} positioning how the overlay is + * @param {ol.OverlayPositioning} positioning how the overlay is * positioned relative to its point on the map. * @todo observable * @todo api @@ -403,6 +403,8 @@ ol.Overlay.prototype.updatePixelPosition_ = function() { var offset = this.getOffset(); goog.asserts.assert(goog.isArray(offset)); var positioning = this.getPositioning(); + goog.asserts.assert(goog.isDef(positioning)); + if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT || positioning == ol.OverlayPositioning.CENTER_RIGHT || positioning == ol.OverlayPositioning.TOP_RIGHT) {