Fixed geosolutions-it#1470: optimized mousemove with throttling

mbarto · Mar 14, 2017 · cf8f072 · cf8f072
1 parent b694b05
commit cf8f072
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/web/client/components/map/leaflet/Map.jsx b/web/client/components/map/leaflet/Map.jsx
@@ -12,6 +12,8 @@ var CoordinatesUtils = require('../../../utils/CoordinatesUtils');
 var assign = require('object-assign');
 var mapUtils = require('../../../utils/MapUtils');
 
+const {throttle} = require('lodash');
+
 require('./SingleClick');
 let LeafletMap = React.createClass({
     propTypes: {
@@ -115,9 +117,10 @@ let LeafletMap = React.createClass({
                 });
             }
         });
-        this.map.on('dragstart', () => { this.map.off('mousemove', this.mouseMoveEvent); });
-        this.map.on('dragend', () => { this.map.on('mousemove', this.mouseMoveEvent); });
-        this.map.on('mousemove', this.mouseMoveEvent);
+        const mouseMove = throttle(this.mouseMoveEvent, 500);
+        this.map.on('dragstart', () => { this.map.off('mousemove', mouseMove); });
+        this.map.on('dragend', () => { this.map.on('mousemove', mouseMove); });
+        this.map.on('mousemove', mouseMove);
         this.map.on('contextmenu', () => {
             if (this.props.onRightClick) {
                 this.props.onRightClick(event.containerPoint);

diff --git a/web/client/components/map/openlayers/Map.jsx b/web/client/components/map/openlayers/Map.jsx
@@ -13,7 +13,7 @@ var CoordinatesUtils = require('../../../utils/CoordinatesUtils');
 var ConfigUtils = require('../../../utils/ConfigUtils');
 var mapUtils = require('../../../utils/MapUtils');
 
-const {isEqual} = require('lodash');
+const {isEqual, throttle} = require('lodash');
 
 var OpenlayersMap = React.createClass({
     propTypes: {
@@ -129,27 +129,8 @@ var OpenlayersMap = React.createClass({
                 });
             }
         });
-        map.on('pointermove', (event) => {
-            if (!event.dragging && event.coordinate) {
-                let pos = event.coordinate.slice();
-                let coords = ol.proj.toLonLat(pos, this.props.projection);
-                let tLng = (( coords[0] / 360) % 1) * 360;
-                if (tLng < -180) {
-                    tLng = tLng + 360;
-                } else if (tLng > 180) {
-                    tLng = tLng - 360;
-                }
-                this.props.onMouseMove({
-                    y: coords[1] || 0.0,
-                    x: tLng || 0.0,
-                    crs: "EPSG:4326",
-                    pixel: {
-                        x: event.pixel[0],
-                        y: event.pixel[1]
-                    }
-                });
-            }
-        });
+        const mouseMove = throttle(this.mouseMoveEvent, 500);
+        map.on('pointermove', mouseMove);
 
         this.updateMapInfoState();
         this.setMousePointer(this.props.mousePointer);
@@ -279,6 +260,27 @@ var OpenlayersMap = React.createClass({
             </div>
         );
     },
+    mouseMoveEvent(event) {
+        if (!event.dragging && event.coordinate) {
+            let pos = event.coordinate.slice();
+            let coords = ol.proj.toLonLat(pos, this.props.projection);
+            let tLng = (( coords[0] / 360) % 1) * 360;
+            if (tLng < -180) {
+                tLng = tLng + 360;
+            } else if (tLng > 180) {
+                tLng = tLng - 360;
+            }
+            this.props.onMouseMove({
+                y: coords[1] || 0.0,
+                x: tLng || 0.0,
+                crs: "EPSG:4326",
+                pixel: {
+                    x: event.pixel[0],
+                    y: event.pixel[1]
+                }
+            });
+        }
+    },
     updateMapInfoState() {
         let view = this.map.getView();
         let c = this.normalizeCenter(view.getCenter());