Merge pull request #12414 from ahocevar/change-event-type

Replace getChangeEventType() with add/removeChangeListener methods

src/ol/Feature.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/Feature
  */
-import BaseObject, {getChangeEventType} from './Object.js';
+import BaseObject from './Object.js';
 import EventType from './events/EventType.js';
 import {assert} from './asserts.js';
 import {listen, unlistenByKey} from './events.js';
@@ -100,10 +100,7 @@ class Feature extends BaseObject {
      */
     this.geometryChangeKey_ = null;
 
-    this.addEventListener(
+    this.addChangeListener(this.geometryName_, this.handleGeometryChanged_);
-      getChangeEventType(this.geometryName_),
-      this.handleGeometryChanged_
-    );
 
     if (opt_geometryOrProperties) {
       if (
@@ -274,15 +271,9 @@ class Feature extends BaseObject {
    * @api
    */
   setGeometryName(name) {
-    this.removeEventListener(
+    this.removeChangeListener(this.geometryName_, this.handleGeometryChanged_);
-      getChangeEventType(this.geometryName_),
-      this.handleGeometryChanged_
-    );
     this.geometryName_ = name;
-    this.addEventListener(
+    this.addChangeListener(this.geometryName_, this.handleGeometryChanged_);
-      getChangeEventType(this.geometryName_),
-      this.handleGeometryChanged_
-    );
     this.handleGeometryChanged_();
   }
 }

src/ol/Geolocation.js

@@ -2,7 +2,7 @@
  * @module ol/Geolocation
  */
 import BaseEvent from './events/Event.js';
-import BaseObject, {getChangeEventType} from './Object.js';
+import BaseObject from './Object.js';
 import EventType from './events/EventType.js';
 import {circular as circularPolygon} from './geom/Polygon.js';
 import {
@@ -112,14 +112,8 @@ class Geolocation extends BaseObject {
      */
     this.watchId_ = undefined;
 
-    this.addEventListener(
+    this.addChangeListener(Property.PROJECTION, this.handleProjectionChanged_);
-      getChangeEventType(Property.PROJECTION),
+    this.addChangeListener(Property.TRACKING, this.handleTrackingChanged_);
-      this.handleProjectionChanged_
-    );
-    this.addEventListener(
-      getChangeEventType(Property.TRACKING),
-      this.handleTrackingChanged_
-    );
 
     if (options.projection !== undefined) {
       this.setProjection(options.projection);

src/ol/Object.js

@@ -149,12 +149,28 @@ class BaseObject extends Observable {
    */
   notify(key, oldValue) {
     let eventType;
-    eventType = getChangeEventType(key);
+    eventType = `change:${key}`;
     this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
     eventType = ObjectEventType.PROPERTYCHANGE;
     this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
   }
 
+  /**
+   * @param {string} key Key name.
+   * @param {import("./events.js").Listener} listener Listener.
+   */
+  addChangeListener(key, listener) {
+    this.addEventListener(`change:${key}`, listener);
+  }
+
+  /**
+   * @param {string} key Key name.
+   * @param {import("./events.js").Listener} listener Listener.
+   */
+  removeChangeListener(key, listener) {
+    this.removeEventListener(`change:${key}`, listener);
+  }
+
   /**
    * Sets a value.
    * @param {string} key Key name.
@@ -220,19 +236,4 @@ class BaseObject extends Observable {
   }
 }
 
-/**
- * @type {Object<string, string>}
- */
-const changeEventTypeCache = {};
-
-/**
- * @param {string} key Key name.
- * @return {string} Change name.
- */
-export function getChangeEventType(key) {
-  return changeEventTypeCache.hasOwnProperty(key)
-    ? changeEventTypeCache[key]
-    : (changeEventTypeCache[key] = 'change:' + key);
-}
-
 export default BaseObject;

src/ol/Overlay.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/Overlay
  */
-import BaseObject, {getChangeEventType} from './Object.js';
+import BaseObject from './Object.js';
 import MapEventType from './MapEventType.js';
 import OverlayPositioning from './OverlayPositioning.js';
 import {CLASS_SELECTABLE} from './css.js';
@@ -176,26 +176,11 @@ class Overlay extends BaseObject {
      */
     this.mapPostrenderListenerKey = null;
 
-    this.addEventListener(
+    this.addChangeListener(Property.ELEMENT, this.handleElementChanged);
-      getChangeEventType(Property.ELEMENT),
+    this.addChangeListener(Property.MAP, this.handleMapChanged);
-      this.handleElementChanged
+    this.addChangeListener(Property.OFFSET, this.handleOffsetChanged);
-    );
+    this.addChangeListener(Property.POSITION, this.handlePositionChanged);
-    this.addEventListener(
+    this.addChangeListener(Property.POSITIONING, this.handlePositioningChanged);
-      getChangeEventType(Property.MAP),
-      this.handleMapChanged
-    );
-    this.addEventListener(
-      getChangeEventType(Property.OFFSET),
-      this.handleOffsetChanged
-    );
-    this.addEventListener(
-      getChangeEventType(Property.POSITION),
-      this.handlePositionChanged
-    );
-    this.addEventListener(
-      getChangeEventType(Property.POSITIONING),
-      this.handlePositioningChanged
-    );
 
     if (options.element !== undefined) {
       this.setElement(options.element);

src/ol/PluggableMap.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/PluggableMap
  */
-import BaseObject, {getChangeEventType} from './Object.js';
+import BaseObject from './Object.js';
 import Collection from './Collection.js';
 import CollectionEventType from './CollectionEventType.js';
 import EventType from './events/EventType.js';
@@ -345,22 +345,13 @@ class PluggableMap extends BaseObject {
       this.handleTileChange_.bind(this)
     );
 
-    this.addEventListener(
+    this.addChangeListener(
-      getChangeEventType(MapProperty.LAYERGROUP),
+      MapProperty.LAYERGROUP,
       this.handleLayerGroupChanged_
     );
-    this.addEventListener(
+    this.addChangeListener(MapProperty.VIEW, this.handleViewChanged_);
-      getChangeEventType(MapProperty.VIEW),
+    this.addChangeListener(MapProperty.SIZE, this.handleSizeChanged_);
-      this.handleViewChanged_
+    this.addChangeListener(MapProperty.TARGET, this.handleTargetChanged_);
-    );
-    this.addEventListener(
-      getChangeEventType(MapProperty.SIZE),
-      this.handleSizeChanged_
-    );
-    this.addEventListener(
-      getChangeEventType(MapProperty.TARGET),
-      this.handleTargetChanged_
-    );
 
     // setProperties will trigger the rendering of the map if the map
     // is "defined" already.

src/ol/control/MousePosition.js

@@ -4,7 +4,6 @@
 
 import Control from './Control.js';
 import EventType from '../pointer/EventType.js';
-import {getChangeEventType} from '../Object.js';
 import {
   get as getProjection,
   getTransformFromProjections,
@@ -69,10 +68,7 @@ class MousePosition extends Control {
       target: options.target,
     });
 
-    this.addEventListener(
+    this.addChangeListener(PROJECTION, this.handleProjectionChanged_);
-      getChangeEventType(PROJECTION),
-      this.handleProjectionChanged_
-    );
 
     if (options.coordinateFormat) {
       this.setCoordinateFormat(options.coordinateFormat);

src/ol/control/OverviewMap.js

@@ -20,7 +20,6 @@ import {
   getTopLeft,
   scaleFromCenter,
 } from '../extent.js';
-import {getChangeEventType} from '../Object.js';
 import {listen, listenOnce} from '../events.js';
 import {fromExtent as polygonFromExtent} from '../geom/Polygon.js';
 import {replaceNode} from '../dom.js';
@@ -348,8 +347,8 @@ class OverviewMap extends Control {
       this.ovmap_.setView(newView);
     }
 
-    view.addEventListener(
+    view.addChangeListener(
-      getChangeEventType(ViewProperty.ROTATION),
+      ViewProperty.ROTATION,
       this.boundHandleRotationChanged_
     );
     // Sync once with the new view
@@ -362,8 +361,8 @@ class OverviewMap extends Control {
    * @private
    */
   unbindView_(view) {
-    view.removeEventListener(
+    view.removeChangeListener(
-      getChangeEventType(ViewProperty.ROTATION),
+      ViewProperty.ROTATION,
       this.boundHandleRotationChanged_
     );
   }

src/ol/control/ScaleLine.js

@@ -6,7 +6,6 @@ import ProjUnits from '../proj/Units.js';
 import {CLASS_UNSELECTABLE} from '../css.js';
 import {METERS_PER_UNIT, getPointResolution} from '../proj.js';
 import {assert} from '../asserts.js';
-import {getChangeEventType} from '../Object.js';
 
 /**
  * @type {string}
@@ -131,10 +130,7 @@ class ScaleLine extends Control {
      */
     this.renderedHTML_ = '';
 
-    this.addEventListener(
+    this.addChangeListener(UNITS_PROP, this.handleUnitsChanged_);
-      getChangeEventType(UNITS_PROP),
-      this.handleUnitsChanged_
-    );
 
     this.setUnits(options.units || Units.METRIC);
 

src/ol/interaction/Draw.js

@@ -29,7 +29,6 @@ import {
 } from '../extent.js';
 import {createEditingStyle} from '../style/Style.js';
 import {fromUserCoordinate, getUserProjection} from '../proj.js';
-import {getChangeEventType} from '../Object.js';
 import {squaredDistance as squaredCoordinateDistance} from '../coordinate.js';
 
 /**
@@ -477,10 +476,7 @@ class Draw extends PointerInteraction {
         : shiftKeyOnly;
     }
 
-    this.addEventListener(
+    this.addChangeListener(InteractionProperty.ACTIVE, this.updateState_);
-      getChangeEventType(InteractionProperty.ACTIVE),
-      this.updateState_
-    );
   }
 
   /**

src/ol/interaction/Translate.js

@@ -7,7 +7,6 @@ import InteractionProperty from './Property.js';
 import PointerInteraction from './Pointer.js';
 import {TRUE} from '../functions.js';
 import {always} from '../events/condition.js';
-import {getChangeEventType} from '../Object.js';
 import {includes} from '../array.js';
 
 /**
@@ -192,8 +191,8 @@ class Translate extends PointerInteraction {
      */
     this.lastFeature_ = null;
 
-    this.addEventListener(
+    this.addChangeListener(
-      getChangeEventType(InteractionProperty.ACTIVE),
+      InteractionProperty.ACTIVE,
       this.handleActiveChanged_
     );
   }

src/ol/layer/Group.js

@@ -9,7 +9,6 @@ import ObjectEventType from '../ObjectEventType.js';
 import SourceState from '../source/State.js';
 import {assert} from '../asserts.js';
 import {assign, clear} from '../obj.js';
-import {getChangeEventType} from '../Object.js';
 import {getIntersection} from '../extent.js';
 import {getUid} from '../util.js';
 import {listen, unlistenByKey} from '../events.js';
@@ -77,10 +76,7 @@ class LayerGroup extends BaseLayer {
      */
     this.listenerKeys_ = {};
 
-    this.addEventListener(
+    this.addChangeListener(Property.LAYERS, this.handleLayersChanged_);
-      getChangeEventType(Property.LAYERS),
-      this.handleLayersChanged_
-    );
 
     if (layers) {
       if (Array.isArray(layers)) {

src/ol/layer/Heatmap.js

@@ -6,7 +6,6 @@ import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer.js';
 import {assign} from '../obj.js';
 import {clamp} from '../math.js';
 import {createCanvasContext2D} from '../dom.js';
-import {getChangeEventType} from '../Object.js';
 
 /**
  * @typedef {Object} Options
@@ -86,10 +85,7 @@ class Heatmap extends VectorLayer {
      */
     this.gradient_ = null;
 
-    this.addEventListener(
+    this.addChangeListener(Property.GRADIENT, this.handleGradientChanged_);
-      getChangeEventType(Property.GRADIENT),
-      this.handleGradientChanged_
-    );
 
     this.setGradient(options.gradient ? options.gradient : DEFAULT_GRADIENT);
 

src/ol/layer/Layer.js

@@ -8,7 +8,6 @@ import RenderEventType from '../render/EventType.js';
 import SourceState from '../source/State.js';
 import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
-import {getChangeEventType} from '../Object.js';
 import {listen, unlistenByKey} from '../events.js';
 
 /**
@@ -130,8 +129,8 @@ class Layer extends BaseLayer {
       this.setMap(options.map);
     }
 
-    this.addEventListener(
+    this.addChangeListener(
-      getChangeEventType(LayerProperty.SOURCE),
+      LayerProperty.SOURCE,
       this.handleSourcePropertyChange_
     );