From ca2b6e41891931939c169709c6fa2c5db9fa1ab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:41:44 +0200 Subject: [PATCH 1/7] map has a viewport --- src/ol/base/map.js | 40 +++++++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/src/ol/base/map.js b/src/ol/base/map.js index 1ee8f668a2..d526932743 100644 --- a/src/ol/base/map.js +++ b/src/ol/base/map.js @@ -68,7 +68,7 @@ ol.MapProperty = { * @enum {number} */ ol.MapPaneZIndex = { - EVENTS: 1000 + VIEWPORT: 1000 }; @@ -129,16 +129,22 @@ ol.Map = function( * @private * @type {Element} */ - this.eventsPane_ = goog.dom.createElement(goog.dom.TagName.DIV); - this.eventsPane_.className = 'ol-pane-events'; - this.eventsPane_.style.position = 'absolute'; - // FIXME why can't we use width and height 100% here? - this.eventsPane_.style.width = target.clientWidth + 'px'; - this.eventsPane_.style.height = target.clientHeight + 'px'; - this.eventsPane_.style.zIndex = ol.MapPaneZIndex.EVENTS; - goog.dom.appendChild(target, this.eventsPane_); + this.container_ = container; - goog.events.listen(this.eventsPane_, [ + /** + * @private + * @type {Element} + */ + this.viewport_ = goog.dom.createElement(goog.dom.TagName.DIV); + this.viewport_.className = 'ol-viewport'; + this.viewport_.style.position = 'relative'; + this.viewport_.style.overflow = 'hidden'; + this.viewport_.style.width = '100%'; + this.viewport_.style.height = '100%'; + this.viewport_.style.zIndex = ol.MapPaneZIndex.VIEWPORT; + goog.dom.appendChild(target, this.viewport_); + + goog.events.listen(this.viewport_, [ goog.events.EventType.DBLCLICK ], this.handleBrowserEvent, false, this); @@ -148,13 +154,13 @@ ol.Map = function( this.handleBrowserEvent, false, this); this.registerDisposable(keyHandler); - var mouseWheelHandler = new goog.events.MouseWheelHandler(this.eventsPane_); + var mouseWheelHandler = new goog.events.MouseWheelHandler(this.viewport_); goog.events.listen(mouseWheelHandler, goog.events.MouseWheelHandler.EventType.MOUSEWHEEL, this.handleBrowserEvent, false, this); this.registerDisposable(mouseWheelHandler); - var dragger = new goog.fx.Dragger(this.eventsPane_); + var dragger = new goog.fx.Dragger(this.viewport_); dragger.defaultAction = function() {}; goog.events.listen(dragger, [ goog.fx.Dragger.EventType.START, @@ -167,7 +173,7 @@ ol.Map = function( * @type {ol.MapRenderer} * @private */ - this.renderer_ = new rendererConstructor(target, this); + this.renderer_ = new rendererConstructor(this.viewport_, this); this.registerDisposable(this.renderer_); /** @@ -467,6 +473,14 @@ goog.exportProperty( ol.Map.prototype.getUserProjection); +/** + * @return {Element} Viewport. + */ +ol.Map.prototype.getViewport = function() { + return this.viewport_; +}; + + /** * @param {goog.events.BrowserEvent} browserEvent Browser event. * @param {string=} opt_type Type. From 66d4d199b49dd56d0cd5d5bc1a62948570abe924 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:44:29 +0200 Subject: [PATCH 2/7] map target is now map container --- src/ol/base/map.js | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/ol/base/map.js b/src/ol/base/map.js index d526932743..e4b9cc0514 100644 --- a/src/ol/base/map.js +++ b/src/ol/base/map.js @@ -77,7 +77,7 @@ ol.MapPaneZIndex = { * @constructor * @extends {ol.Object} * @implements {goog.fx.anim.Animated} - * @param {Element} target Target. + * @param {Element} container Container. * @param {function(new: ol.MapRenderer, Element, ol.Map)} rendererConstructor * Renderer constructor. * @param {Object=} opt_values Values. @@ -85,7 +85,7 @@ ol.MapPaneZIndex = { * Viewport size monitor. */ ol.Map = function( - target, rendererConstructor, opt_values, opt_viewportSizeMonitor) { + container, rendererConstructor, opt_values, opt_viewportSizeMonitor) { goog.base(this); @@ -142,7 +142,7 @@ ol.Map = function( this.viewport_.style.width = '100%'; this.viewport_.style.height = '100%'; this.viewport_.style.zIndex = ol.MapPaneZIndex.VIEWPORT; - goog.dom.appendChild(target, this.viewport_); + goog.dom.appendChild(container, this.viewport_); goog.events.listen(this.viewport_, [ goog.events.EventType.DBLCLICK @@ -176,12 +176,6 @@ ol.Map = function( this.renderer_ = new rendererConstructor(this.viewport_, this); this.registerDisposable(this.renderer_); - /** - * @private - * @type {Element} - */ - this.target_ = target; - /** * @private * @type {goog.dom.ViewportSizeMonitor} @@ -272,6 +266,14 @@ goog.exportProperty( ol.Map.prototype.getCenter); +/** + * @return {Element} Container. + */ +ol.Map.prototype.getContainer = function() { + return this.container_; +}; + + /** * @param {ol.Pixel} pixel Pixel. * @return {ol.Coordinate|undefined} Coordinate. @@ -426,14 +428,6 @@ goog.exportProperty( ol.Map.prototype.getSize); -/** - * @return {Element} Target. - */ -ol.Map.prototype.getTarget = function() { - return this.target_; -}; - - /** * @return {ol.Coordinate|undefined} Center in user projection. */ @@ -527,7 +521,8 @@ ol.Map.prototype.handleUserProjectionChanged = function() { * @protected */ ol.Map.prototype.handleViewportResize = function() { - var size = new ol.Size(this.target_.clientWidth, this.target_.clientHeight); + var size = new ol.Size(this.container_.clientWidth, + this.container_.clientHeight); this.setSize(size); }; From a9706cd84b2590a9b01d68c2bdbd42e07af9e722 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:44:57 +0200 Subject: [PATCH 3/7] Map.handleViewportResize renamed handleBrowserWindowResize --- src/ol/base/map.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ol/base/map.js b/src/ol/base/map.js index e4b9cc0514..546debe448 100644 --- a/src/ol/base/map.js +++ b/src/ol/base/map.js @@ -184,7 +184,7 @@ ol.Map = function( opt_viewportSizeMonitor || new goog.dom.ViewportSizeMonitor(); goog.events.listen(this.viewportSizeMonitor_, goog.events.EventType.RESIZE, - this.handleViewportResize, false, this); + this.handleBrowserWindowResize, false, this); goog.events.listen( this, ol.Object.getChangedEventType(ol.MapProperty.PROJECTION), @@ -198,7 +198,7 @@ ol.Map = function( this.setValues(opt_values); } - this.handleViewportResize(); + this.handleBrowserWindowResize(); }; goog.inherits(ol.Map, ol.Object); @@ -520,7 +520,7 @@ ol.Map.prototype.handleUserProjectionChanged = function() { /** * @protected */ -ol.Map.prototype.handleViewportResize = function() { +ol.Map.prototype.handleBrowserWindowResize = function() { var size = new ol.Size(this.container_.clientWidth, this.container_.clientHeight); this.setSize(size); From a6104138110aef0214049bf335199e294271c068 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:48:30 +0200 Subject: [PATCH 4/7] map renderer target is now map renderer container --- src/ol/base/maprenderer.js | 6 +++--- src/ol/dom/maprenderer.js | 6 +++--- src/ol/webgl/maprenderer.js | 12 ++++++------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/ol/base/maprenderer.js b/src/ol/base/maprenderer.js index 06546c5a61..792bbe6179 100644 --- a/src/ol/base/maprenderer.js +++ b/src/ol/base/maprenderer.js @@ -13,10 +13,10 @@ goog.require('ol.MapProperty'); /** * @constructor * @extends {goog.Disposable} - * @param {Element} target Target. + * @param {Element} container Container. * @param {ol.Map} map Map. */ -ol.MapRenderer = function(target, map) { +ol.MapRenderer = function(container, map) { goog.base(this); @@ -24,7 +24,7 @@ ol.MapRenderer = function(target, map) { * @private * @type {Element} */ - this.target_ = target; + this.container_ = container; /** * @protected diff --git a/src/ol/dom/maprenderer.js b/src/ol/dom/maprenderer.js index 2014f10901..c648fdf4c9 100644 --- a/src/ol/dom/maprenderer.js +++ b/src/ol/dom/maprenderer.js @@ -15,12 +15,12 @@ goog.require('ol.dom.TileLayerRenderer'); /** * @constructor * @extends {ol.MapRenderer} - * @param {Element} target Target. + * @param {Element} container Container. * @param {ol.Map} map Map. */ -ol.dom.MapRenderer = function(target, map) { +ol.dom.MapRenderer = function(container, map) { - goog.base(this, target, map); + goog.base(this, container, map); /** * @type {!Element} diff --git a/src/ol/webgl/maprenderer.js b/src/ol/webgl/maprenderer.js index 8cc7343d4f..9b9c24678a 100644 --- a/src/ol/webgl/maprenderer.js +++ b/src/ol/webgl/maprenderer.js @@ -135,22 +135,22 @@ goog.addSingletonGetter(ol.webgl.map.shader.Vertex); /** * @constructor * @extends {ol.MapRenderer} - * @param {Element} target Target. + * @param {Element} container Container. * @param {ol.Map} map Map. */ -ol.webgl.MapRenderer = function(target, map) { +ol.webgl.MapRenderer = function(container, map) { - goog.base(this, target, map); + goog.base(this, container, map); /** * @private * @type {Element} */ this.canvas_ = goog.dom.createElement(goog.dom.TagName.CANVAS); - this.canvas_.height = target.clientHeight; - this.canvas_.width = target.clientWidth; this.canvas_.style.overflow = 'hidden'; - goog.dom.appendChild(target, this.canvas_); + this.canvas_.height = container.clientHeight; + this.canvas_.width = container.clientWidth; + goog.dom.appendChild(container, this.canvas_); /** * @private From 21ae6d1be36438d835cce540c358bebef3f1aab2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:49:40 +0200 Subject: [PATCH 5/7] DOM map renderer no longer need a viewport --- src/ol/dom/maprenderer.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/ol/dom/maprenderer.js b/src/ol/dom/maprenderer.js index c648fdf4c9..ec51737a4d 100644 --- a/src/ol/dom/maprenderer.js +++ b/src/ol/dom/maprenderer.js @@ -22,18 +22,6 @@ ol.dom.MapRenderer = function(container, map) { goog.base(this, container, map); - /** - * @type {!Element} - * @private - */ - this.viewport_ = goog.dom.createElement(goog.dom.TagName.DIV); - this.viewport_.className = 'ol-viewport'; - this.viewport_.style.position = 'relative'; - this.viewport_.style.overflow = 'hidden'; - this.viewport_.style.width = '100%'; - this.viewport_.style.height = '100%'; - goog.dom.appendChild(target, this.viewport_); - /** * @type {!Element} * @private @@ -41,7 +29,7 @@ ol.dom.MapRenderer = function(container, map) { this.layersPane_ = goog.dom.createElement(goog.dom.TagName.DIV); this.layersPane_.className = 'ol-layers-pane'; this.layersPane_.style.position = 'absolute'; - goog.dom.appendChild(this.viewport_, this.layersPane_); + goog.dom.appendChild(container, this.layersPane_); /** * @type {Object} From d0572c081ef2e3acef0b0e94047a52cf3ba1946e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:50:24 +0200 Subject: [PATCH 6/7] webgl canvas element does not need overflow:hidden --- src/ol/webgl/maprenderer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ol/webgl/maprenderer.js b/src/ol/webgl/maprenderer.js index 9b9c24678a..a7a76864ee 100644 --- a/src/ol/webgl/maprenderer.js +++ b/src/ol/webgl/maprenderer.js @@ -147,7 +147,6 @@ ol.webgl.MapRenderer = function(container, map) { * @type {Element} */ this.canvas_ = goog.dom.createElement(goog.dom.TagName.CANVAS); - this.canvas_.style.overflow = 'hidden'; this.canvas_.height = container.clientHeight; this.canvas_.width = container.clientWidth; goog.dom.appendChild(container, this.canvas_); From 83994081b50342f6467e6a6f2f217b5379a45ad0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 20 Aug 2012 21:51:23 +0200 Subject: [PATCH 7/7] mouseposition listens to mousemove and mouseout on map viewport --- src/ol/control/mouseposition.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ol/control/mouseposition.js b/src/ol/control/mouseposition.js index c8ed67088e..4d558a7855 100644 --- a/src/ol/control/mouseposition.js +++ b/src/ol/control/mouseposition.js @@ -59,10 +59,10 @@ ol.control.MousePosition = ol.Object.getChangedEventType(ol.MapProperty.PROJECTION), this.handleMapProjectionChanged, false, this); - goog.events.listen(map.getTarget(), goog.events.EventType.MOUSEMOVE, + goog.events.listen(map.getViewport(), goog.events.EventType.MOUSEMOVE, this.handleMouseMove, false, this); - goog.events.listen(map.getTarget(), goog.events.EventType.MOUSEOUT, + goog.events.listen(map.getViewport(), goog.events.EventType.MOUSEOUT, this.handleMouseOut, false, this); this.handleMapProjectionChanged();