[UPD] set cursor to prevent flash on mobile #1077

Viglino · Jun 21, 2024 · 62fb70b · 62fb70b
1 parent e3d2455
commit 62fb70b
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 45 deletions.
diff --git a/dist/ol-ext.js b/dist/ol-ext.js
@@ -1338,6 +1338,17 @@ ol.ext.element.dispatchEvent = function (eventName, element) {
   }
   element.dispatchEvent(event);
 };
+/** Set cursor
+ * @param {Element|ol/Map} elt
+ * @param {string} cursor
+ */
+ol.ext.element.setCursor = function(elt, cursor) {
+  if (elt instanceof ol.Map) elt = elt.getTargetElement()
+  // prevent flashing on mobile device
+  if (!('ontouchstart' in window) && elt instanceof Element) {
+    elt.style.cursor = cursor;
+  }
+}
 
 /** Get a canvas overlay for a map (non rotated, on top of the map)
  * @param {ol.Map} map
@@ -25455,10 +25466,10 @@ ol.interaction.FillAttribute = class olinteractionFillAttribute extends ol.inter
     if (this.getMap() && this._cursor) {
       if (active) {
         this._previousCursor = this.getMap().getTargetElement().style.cursor;
-        this.getMap().getTargetElement().style.cursor = this._cursor;
+        ol.ext.element.setCursor(this.getMap(), this._cursor);
         //      console.log('setCursor',this._cursor)
       } else {
-        this.getMap().getTargetElement().style.cursor = this._previousCursor;
+        ol.ext.element.setCursor(this.getMap(), this._previousCursor);
         this._previousCursor = undefined;
       }
     }
@@ -26209,7 +26220,7 @@ ol.interaction.Hover = class olinteractionHover extends ol.interaction.Interacti
    */
   setMap(map) {
     if (this.previousCursor_ !== undefined && this.getMap()) {
-      this.getMap().getTargetElement().style.cursor = this.previousCursor_;
+      ol.ext.element.setCursor(this.getMap(), this.previousCursor_);
       this.previousCursor_ = undefined;
     }
     super.setMap(map);
@@ -26220,9 +26231,8 @@ ol.interaction.Hover = class olinteractionHover extends ol.interaction.Interacti
   setActive(b) {
     super.setActive(b);
     if (this.cursor_ && this.getMap() && this.getMap().getTargetElement()) {
-      var style = this.getMap().getTargetElement().style;
       if (this.previousCursor_ !== undefined) {
-        style.cursor = this.previousCursor_;
+        ol.ext.element.setCursor(this.getMap(), this.previousCursor_);
         this.previousCursor_ = undefined;
       }
     }
@@ -26234,7 +26244,7 @@ ol.interaction.Hover = class olinteractionHover extends ol.interaction.Interacti
    */
   setCursor(cursor) {
     if (!cursor && this.previousCursor_ !== undefined && this.getMap()) {
-      this.getMap().getTargetElement().style.cursor = this.previousCursor_;
+      ol.ext.element.setCursor(this.getMap(), this.previousCursor_);
       this.previousCursor_ = undefined;
     }
     this.cursor_ = cursor;
@@ -26325,10 +26335,10 @@ ol.interaction.Hover = class olinteractionHover extends ol.interaction.Interacti
         if (b) {
           if (style.cursor != this.cursor_) {
             this.previousCursor_ = style.cursor;
-            style.cursor = this.cursor_;
+            ol.ext.element.setCursor(map, this.cursor_);
           }
         } else if (this.previousCursor_ !== undefined) {
-          style.cursor = this.previousCursor_;
+          ol.ext.element.setCursor(map, this.previousCursor_);
           this.previousCursor_ = undefined;
         }
       }
@@ -27159,10 +27169,10 @@ ol.interaction.ModifyFeature = class olinteractionModifyFeature extends ol.inter
       if (current) {
         if (element.style.cursor != this.cursor_) {
           this.previousCursor_ = element.style.cursor
-          element.style.cursor = this.cursor_
+          ol.ext.element.setCursor(element, this.cursor_)
         }
       } else if (this.previousCursor_ !== undefined) {
-        element.style.cursor = this.previousCursor_
+        ol.ext.element.setCursor(element, this.previousCursor_)
         this.previousCursor_ = undefined
       }
     }
@@ -27522,9 +27532,9 @@ ol.interaction.Offset = class olinteractionOffset extends ol.interaction.Pointer
       if (this.previousCursor_ === false) {
         this.previousCursor_ = e.map.getTargetElement().style.cursor;
       }
-      e.map.getTargetElement().style.cursor = 'pointer';
+      ol.ext.element.setCursor(e.map, 'pointer');
     } else {
-      e.map.getTargetElement().style.cursor = this.previousCursor_;
+      ol.ext.element.setCursor(e.map, this.previousCursor_);
       this.previousCursor_ = false;
     }
   }
@@ -28640,10 +28650,10 @@ ol.interaction.Split = class olinteractionSplit extends ol.interaction.Interacti
       if (current) {
         if (element.style.cursor != this.cursor_) {
           this.previousCursor_ = element.style.cursor
-          element.style.cursor = this.cursor_
+          ol.ext.element.setCursor(element, this.cursor_)
         }
       } else if (this.previousCursor_ !== undefined) {
-        element.style.cursor = this.previousCursor_
+        ol.ext.element.setCursor(element, this.previousCursor_)
         this.previousCursor_ = undefined
       }
     }
@@ -30120,10 +30130,9 @@ ol.interaction.Transform = class olinteractionTransform extends ol.interaction.P
   setMap(map) {
     var oldMap = this.getMap()
     if (oldMap) {
-      var targetElement = oldMap.getTargetElement()
       oldMap.removeLayer(this.overlayLayer_)
-      if (this.previousCursor_ && targetElement && !('ontouchstart' in window)) {
-        targetElement.style.cursor = this.previousCursor_
+      if (this.previousCursor_) {
+        ol.ext.element.setCursor(oldMap, this.previousCursor_)
       }
       this.previousCursor_ = undefined
     }
@@ -30523,7 +30532,7 @@ ol.interaction.Transform = class olinteractionTransform extends ol.interaction.P
         this.center_ = this.getCenter() || ol.extent.getCenter(extent)
         // we are now rotating (cursor down on rotate mode), so apply the grabbing cursor
         var element = evt.map.getTargetElement()
-        if (!('ontouchstart' in window)) element.style.cursor = this.Cursors.rotate0
+        ol.ext.element.setCursor(element, this.Cursors.rotate0)
         this.previousCursor_ = element.style.cursor
       } else {
         this.center_ = ol.extent.getCenter(extent)
@@ -30787,10 +30796,10 @@ ol.interaction.Transform = class olinteractionTransform extends ol.interaction.P
         if (this.previousCursor_ === undefined) {
           this.previousCursor_ = element.style.cursor
         }
-        if (!('ontouchstart' in window)) element.style.cursor = c
+        ol.ext.element.setCursor(element, c);
       } else {
-        if (this.previousCursor_ !== undefined && !('ontouchstart' in window)) {
-          element.style.cursor = this.previousCursor_
+        if (this.previousCursor_ !== undefined) {
+          ol.ext.element.setCursor(element, this.previousCursor_)
         }
         this.previousCursor_ = undefined
       }
@@ -30804,7 +30813,7 @@ ol.interaction.Transform = class olinteractionTransform extends ol.interaction.P
     // remove rotate0 cursor on Up event, otherwise it's stuck on grab/grabbing
     if (this.mode_ === 'rotate') {
       var element = evt.map.getTargetElement()
-      if (!('ontouchstart' in window)) element.style.cursor = this.Cursors.default
+      ol.ext.element.setCursor(element, this.Cursors.default)
       this.previousCursor_ = undefined
     }
     //dispatchEvent

diff --git a/dist/ol-ext.min.js b/dist/ol-ext.min.js
diff --git a/examples/interaction/map.interaction.modifyfeature.html b/examples/interaction/map.interaction.modifyfeature.html
@@ -155,6 +155,7 @@ <h2>Options:</h2>
       }),
       modifyfeature: new ol.interaction.ModifyFeature ({ 
         sources: vector.getSource(),
+        cursor: 'pointer',
         // insertVertexCondition: function(){ return false; }
         // style: getStyle
       })

diff --git a/examples/interaction/map.interaction.split.html b/examples/interaction/map.interaction.split.html
@@ -102,6 +102,7 @@ <h2>Options:</h2>
         type: "LineString"
       }),
       split: new ol.interaction.Split ({
+        // cursor: 'crosshair'
         //sources: vector.getSource()
       })
     }

diff --git a/src/interaction/FillAttribute.js b/src/interaction/FillAttribute.js
@@ -1,5 +1,6 @@
 import ol_interaction_Select from 'ol/interaction/Select.js'
 import {click as ol_events_condition_click} from 'ol/events/condition.js'
+import ol_ext_element from '../util/element';
 
 /** A Select interaction to fill feature's properties on click.
  * @constructor
@@ -87,10 +88,10 @@ var ol_interaction_FillAttribute = class olinteractionFillAttribute extends ol_i
     if (this.getMap() && this._cursor) {
       if (active) {
         this._previousCursor = this.getMap().getTargetElement().style.cursor;
-        this.getMap().getTargetElement().style.cursor = this._cursor;
+        ol_ext_element.setCursor(this.getMap(), this._cursor);
         //      console.log('setCursor',this._cursor)
       } else {
-        this.getMap().getTargetElement().style.cursor = this._previousCursor;
+        ol_ext_element.setCursor(this.getMap(), this._previousCursor);
         this._previousCursor = undefined;
       }
     }

diff --git a/src/interaction/Hover.js b/src/interaction/Hover.js
@@ -1,4 +1,5 @@
 import ol_interaction_Interaction from 'ol/interaction/Interaction.js'
+import ol_ext_element from '../util/element';
 
 /** Interaction hover do to something when hovering a feature
  * @constructor
@@ -64,7 +65,7 @@ var ol_interaction_Hover = class olinteractionHover extends ol_interaction_Inter
    */
   setMap(map) {
     if (this.previousCursor_ !== undefined && this.getMap()) {
-      this.getMap().getTargetElement().style.cursor = this.previousCursor_;
+      ol_ext_element.setCursor(this.getMap(), this.previousCursor_);
       this.previousCursor_ = undefined;
     }
     super.setMap(map);
@@ -75,9 +76,8 @@ var ol_interaction_Hover = class olinteractionHover extends ol_interaction_Inter
   setActive(b) {
     super.setActive(b);
     if (this.cursor_ && this.getMap() && this.getMap().getTargetElement()) {
-      var style = this.getMap().getTargetElement().style;
       if (this.previousCursor_ !== undefined) {
-        style.cursor = this.previousCursor_;
+        ol_ext_element.setCursor(this.getMap(), this.previousCursor_);
         this.previousCursor_ = undefined;
       }
     }
@@ -89,7 +89,7 @@ var ol_interaction_Hover = class olinteractionHover extends ol_interaction_Inter
    */
   setCursor(cursor) {
     if (!cursor && this.previousCursor_ !== undefined && this.getMap()) {
-      this.getMap().getTargetElement().style.cursor = this.previousCursor_;
+      ol_ext_element.setCursor(this.getMap(), this.previousCursor_);
       this.previousCursor_ = undefined;
     }
     this.cursor_ = cursor;
@@ -183,10 +183,10 @@ var ol_interaction_Hover = class olinteractionHover extends ol_interaction_Inter
         if (b) {
           if (style.cursor != this.cursor_) {
             this.previousCursor_ = style.cursor;
-            style.cursor = this.cursor_;
+            ol_ext_element.setCursor(map, this.cursor_);
           }
         } else if (this.previousCursor_ !== undefined) {
-          style.cursor = this.previousCursor_;
+          ol_ext_element.setCursor(map, this.previousCursor_);
           this.previousCursor_ = undefined;
         }
       }

diff --git a/src/interaction/ModifyFeature.js b/src/interaction/ModifyFeature.js
@@ -20,6 +20,7 @@ import {altKeyOnly as ol_events_condition_altKeyOnly} from 'ol/events/condition.
 import {primaryAction as ol_events_condition_primaryAction} from 'ol/events/condition.js'
 import {always as ol_events_condition_always} from 'ol/events/condition.js'
 
+import ol_ext_element from '../util/element.js'
 import '../geom/LineStringSplitAt.js'
 
 /** Interaction for modifying feature geometries. Similar to the core ol/interaction/Modify.
@@ -778,10 +779,10 @@ var ol_interaction_ModifyFeature = class olinteractionModifyFeature extends ol_i
       if (current) {
         if (element.style.cursor != this.cursor_) {
           this.previousCursor_ = element.style.cursor
-          element.style.cursor = this.cursor_
+          ol_ext_element.setCursor(element, this.cursor_)
         }
       } else if (this.previousCursor_ !== undefined) {
-        element.style.cursor = this.previousCursor_
+        ol_ext_element.setCursor(element, this.previousCursor_)
         this.previousCursor_ = undefined
       }
     }

diff --git a/src/interaction/Offset.js b/src/interaction/Offset.js
@@ -8,6 +8,7 @@ import ol_geom_Polygon from 'ol/geom/Polygon.js'
 import {ol_coordinate_dist2d, ol_coordinate_findSegment, ol_coordinate_offsetCoords} from "../geom/GeomUtils.js";
 
 import ol_style_Style_defaultStyle from '../style/defaultStyle.js'
+import ol_ext_element from '../util/element.js';
 
 /** Offset interaction for offseting feature geometry
  * @constructor
@@ -212,9 +213,9 @@ var ol_interaction_Offset = class olinteractionOffset extends ol_interaction_Poi
       if (this.previousCursor_ === false) {
         this.previousCursor_ = e.map.getTargetElement().style.cursor;
       }
-      e.map.getTargetElement().style.cursor = 'pointer';
+      ol_ext_element.setCursor(e.map, 'pointer');
     } else {
-      e.map.getTargetElement().style.cursor = this.previousCursor_;
+      ol_ext_element.setCursor(e.map, this.previousCursor_);
       this.previousCursor_ = false;
     }
   }

diff --git a/src/interaction/Split.js b/src/interaction/Split.js
@@ -15,6 +15,7 @@ import ol_Feature from 'ol/Feature.js'
 import ol_geom_LineString from 'ol/geom/LineString.js'
 import {ol_coordinate_dist2d} from "../geom/GeomUtils.js";
 import '../geom/LineStringSplitAt.js'
+import ol_ext_element from '../util/element.js'
 
 /** Interaction split interaction for splitting feature geometry
  * @constructor
@@ -299,10 +300,10 @@ var ol_interaction_Split = class olinteractionSplit extends ol_interaction_Inter
       if (current) {
         if (element.style.cursor != this.cursor_) {
           this.previousCursor_ = element.style.cursor
-          element.style.cursor = this.cursor_
+          ol_ext_element.setCursor(element, this.cursor_)
         }
       } else if (this.previousCursor_ !== undefined) {
-        element.style.cursor = this.previousCursor_
+        ol_ext_element.setCursor(element, this.previousCursor_)
         this.previousCursor_ = undefined
       }
     }

diff --git a/src/interaction/Transform.js b/src/interaction/Transform.js
@@ -12,6 +12,7 @@ import {fromExtent as ol_geom_Polygon_fromExtent} from 'ol/geom/Polygon.js'
 import {boundingExtent as ol_extent_boundingExtent, buffer as ol_extent_buffer, createEmpty as ol_extent_createEmpty, extend as ol_extent_extend, getCenter as ol_extent_getCenter} from 'ol/extent.js'
 import {unByKey as ol_Observable_unByKey} from 'ol/Observable.js'
 import ol_geom_Polygon from 'ol/geom/Polygon.js'
+import ol_ext_element from '../util/element'
 
 /** Interaction rotate
  * @constructor
@@ -128,10 +129,9 @@ var ol_interaction_Transform = class olinteractionTransform extends ol_interacti
   setMap(map) {
     var oldMap = this.getMap()
     if (oldMap) {
-      var targetElement = oldMap.getTargetElement()
       oldMap.removeLayer(this.overlayLayer_)
-      if (this.previousCursor_ && targetElement && !('ontouchstart' in window)) {
-        targetElement.style.cursor = this.previousCursor_
+      if (this.previousCursor_) {
+        ol_ext_element.setCursor(oldMap, this.previousCursor_)
       }
       this.previousCursor_ = undefined
     }
@@ -538,7 +538,7 @@ var ol_interaction_Transform = class olinteractionTransform extends ol_interacti
         this.center_ = this.getCenter() || ol_extent_getCenter(extent)
         // we are now rotating (cursor down on rotate mode), so apply the grabbing cursor
         var element = evt.map.getTargetElement()
-        if (!('ontouchstart' in window)) element.style.cursor = this.Cursors.rotate0
+        ol_ext_element.setCursor(element, this.Cursors.rotate0)
         this.previousCursor_ = element.style.cursor
       } else {
         this.center_ = ol_extent_getCenter(extent)
@@ -817,10 +817,10 @@ var ol_interaction_Transform = class olinteractionTransform extends ol_interacti
         if (this.previousCursor_ === undefined) {
           this.previousCursor_ = element.style.cursor
         }
-        if (!('ontouchstart' in window)) element.style.cursor = c
+        ol_ext_element.setCursor(element, c);
       } else {
-        if (this.previousCursor_ !== undefined && !('ontouchstart' in window)) {
-          element.style.cursor = this.previousCursor_
+        if (this.previousCursor_ !== undefined) {
+          ol_ext_element.setCursor(element, this.previousCursor_)
         }
         this.previousCursor_ = undefined
       }
@@ -834,7 +834,7 @@ var ol_interaction_Transform = class olinteractionTransform extends ol_interacti
     // remove rotate0 cursor on Up event, otherwise it's stuck on grab/grabbing
     if (this.mode_ === 'rotate') {
       var element = evt.map.getTargetElement()
-      if (!('ontouchstart' in window)) element.style.cursor = this.Cursors.default
+      ol_ext_element.setCursor(element, this.Cursors.default)
       this.previousCursor_ = undefined
     }
 

diff --git a/src/util/element.js b/src/util/element.js
@@ -3,6 +3,7 @@
  * @see https://plainjs.com/javascript/
  * @see http://youmightnotneedjquery.com/
  */
+import ol_Map from 'ol/Map'
 import ol_ext_input_Checkbox from './input/Checkbox.js'
 import ol_ext_input_Switch from './input/Switch.js'
 import ol_ext_input_Radio from './input/Radio.js'
@@ -602,4 +603,16 @@ ol_ext_element.dispatchEvent = function (eventName, element) {
   element.dispatchEvent(event);
 };
 
+/** Set cursor
+ * @param {Element|ol/Map} elt
+ * @param {string} cursor
+ */
+ol_ext_element.setCursor = function(elt, cursor) {
+  if (elt instanceof ol_Map) elt = elt.getTargetElement()
+  // prevent flashing on mobile device
+  if (!('ontouchstart' in window) && elt instanceof Element) {
+    elt.style.cursor = cursor;
+  }
+}
+
 export default ol_ext_element
diff --git a/src/util/ext.js b/src/util/ext.js
@@ -1,3 +1,5 @@
+import ol_Map from 'ol/Map'
+
 /*global ol*/
 if (window.ol) {
   /** @namespace  ol.ext */