Changeset 7615

Timestamp:

07/30/08 14:23:19 (5 years ago)

Author:

crschmidt

Message:

Change getMousePosition to only be called automatically *if* the 'includeXY'
flag on the Events object is set to true. This ends up meaning that we save a
lot of unneccesary getMousePosition calls because (for example) the layer
doesn't need to include the .xy property. In addition, we add in speed
improvements via caching to the getMousePosition, courtesy the work from
pgiraud (which was worked on further by tcoulter) -- this results in
significantly improved getMousePosition performance improvements in 'real life'
situations that are more like the cases that people use OpenLayers, with a
higher number of containing divs (and also clearly demonstrate a gain in
performance even in the simple case.)

The end result is:

• In typical map movement over the map, (n / n+1) fewer calls to getMousePosition, where n is the number of active layers when dragging over the map.
• In the simple case, 40% faster getMousePosition performance -- and in more complex cases, significantly more performance improvements.

To drop the former improvement, which may affect some applications (as
described in the includeXY documentation) simply set:

OpenLayers.Events.prototype.includeXY = true;

This will restore the 'every element has an xy property always' behavior
that was the case beore this patch.

r=me,tschaub, work by pgiraud related to (See #1509), and (Closes #1459)

Location:

trunk/openlayers/lib/OpenLayers

Files:

• Control/PanZoomBar.js (modified) (2 diffs)
• Events.js (modified) (4 diffs)
• Map.js (modified) (2 diffs)

trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js

@@ -166 +166 @@
         this.slider = slider;
         
-        this.sliderEvents = new OpenLayers.Events(this, slider, null, true);
+        this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
+                                            {includeXY: true});
         this.sliderEvents.on({
             "mousedown": this.zoomBarDown,
@@ -198 +199 @@
         this.zoombarDiv = div;
         
-        this.divEvents = new OpenLayers.Events(this, div, null, true);
+        this.divEvents = new OpenLayers.Events(this, div, null, true, 
+                                                {includeXY: true});
         this.divEvents.on({
             "mousedown": this.divClick,

trunk/openlayers/lib/OpenLayers/Events.js

@@ -393 +393 @@
     fallThrough: null,
 
+    /** 
+     * APIProperty: includeXY
+     * {Boolean} Should the .xy property automatically be created for browser
+     *    mouse events? In general, this should be false. If it is true, then
+     *    mouse events will automatically generate a '.xy' property on the 
+     *    event object that is passed. (Prior to OpenLayers 2.7, this was true
+     *    by default.) Otherwise, you can call the getMousePosition on the
+     *    relevant events handler on the object available via the 'evt.object'
+     *    property of the evt object. So, for most events, you can call:
+     *    function named(evt) { 
+     *        this.xy = this.object.events.getMousePosition(evt) 
+     *    } 
+     *
+     *    This option typically defaults to false for performance reasons:
+     *    when creating an events object whose primary purpose is to manage
+     *    relatively positioned mouse events within a div, it may make
+     *    sense to set it to true.
+     *
+     *    This option is also used to control whether the events object caches
+     *    offsets. If this is false, it will not: the reason for this is that
+     *    it is only expected to be called many times if the includeXY property
+     *    is set to true. If you set this to true, you are expected to clear 
+     *    the offset cache manually (using this.clearMouseCache()) if:
+     *        the border of the element changes
+     *        the location of the element in the page changes
+    */
+    includeXY: false,      
+
     /**
      * Constructor: OpenLayers.Events
@@ -403 +431 @@
      * fallThrough - {Boolean} Allow events to fall through after these have
      *                         been handled?
-     */
-    initialize: function (object, element, eventTypes, fallThrough) {
+     * options - {Object} Options for the events object.
+     */
+    initialize: function (object, element, eventTypes, fallThrough, options) {
+        OpenLayers.Util.extend(this, options);
         this.object     = object;
         this.element    = element;
@@ -692 +722 @@
      */
     handleBrowserEvent: function (evt) {
-        evt.xy = this.getMousePosition(evt); 
+        if (this.includeXY) {
+            evt.xy = this.getMousePosition(evt);
+        } 
         this.triggerEvent(evt.type, evt);
     },
+
+    /**
+     * APIMethod: clearMouseCache
+     * Clear cached data about the mouse position. This should be called any 
+     *     time the element that events are registered on changes position 
+     *     within the page.
+     */
+    clearMouseCache: function() { 
+        this.element.scrolls = null;
+        this.element.lefttop = null;
+        this.element.offsets = null;
+    },      
 
     /**
@@ -707 +751 @@
      */
     getMousePosition: function (evt) {
+        if (!this.includeXY) {
+            this.clearMouseCache();
+        } else if (!this.element.hasScrollEvent) {
+            OpenLayers.Event.observe(window, 'scroll', 
+                OpenLayers.Function.bind(this.clearMouseCache, this)); 
+            this.element.hasScrollEvent = true;
+        }
+        
+        if (!this.element.scrolls) {
+            this.element.scrolls = [];
+            this.element.scrolls[0] = (document.documentElement.scrollLeft
+                         || document.body.scrollLeft);
+            this.element.scrolls[1] = (document.documentElement.scrollTop
+                         || document.body.scrollTop);
+        }
+
+        if (!this.element.lefttop) {
+            this.element.lefttop = [];
+            this.element.lefttop[0] = (document.documentElement.clientLeft || 0);
+            this.element.lefttop[1] = (document.documentElement.clientTop || 0);
+        }
+        
         if (!this.element.offsets) {
             this.element.offsets = OpenLayers.Util.pagePosition(this.element);
-            this.element.offsets[0] += (document.documentElement.scrollLeft
-                         || document.body.scrollLeft);
-            this.element.offsets[1] += (document.documentElement.scrollTop
-                         || document.body.scrollTop);
+            this.element.offsets[0] += this.element.scrolls[0];
+            this.element.offsets[1] += this.element.scrolls[1];
         }
         return new OpenLayers.Pixel(
-            (evt.clientX + (document.documentElement.scrollLeft
-                         || document.body.scrollLeft)) - this.element.offsets[0]
-                         - (document.documentElement.clientLeft || 0), 
-            (evt.clientY + (document.documentElement.scrollTop
-                         || document.body.scrollTop)) - this.element.offsets[1]
-                         - (document.documentElement.clientTop || 0)
+            (evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
+                         - this.element.lefttop[0], 
+            (evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
+                         - this.element.lefttop[1]
         ); 
     },

trunk/openlayers/lib/OpenLayers/Map.js

@@ -427 +427 @@
                                             this.div, 
                                             this.EVENT_TYPES, 
-                                            this.fallThrough);
+                                            this.fallThrough, 
+                                            {includeXY: true});
         this.updateSize();
         if(this.eventListeners instanceof Object) {
@@ -1203 +1204 @@
     updateSize: function() {
         // the div might have moved on the page, also
-        this.events.element.offsets = null;
+        this.events.clearMouseCache();
         var newSize = this.getCurrentSize();
         var oldSize = this.getSize();