Merge pull request #5130 from camptocamp/fix-ol-events2

Fix ol.events

.eslintrc.yaml

@@ -11,6 +11,7 @@ rules:
   comma-dangle: 0
   import/no-unresolved: 0
   valid-jsdoc: 0
+  no-unused-vars: error
   max-len:
     - error
     - code: 110

contribs/gmf/src/backgroundlayerselector/component.js

@@ -1,7 +1,7 @@
 import angular from 'angular';
 import gmfThemeThemes from 'gmf/theme/Themes.js';
 import ngeoMapBackgroundLayerMgr from 'ngeo/map/BackgroundLayerMgr.js';
-import * as olEvents from 'ol/events.js';
+import {listen, unlistenByKey} from 'ol/events.js';
 
 /**
  * @type {angular.IModule}
@@ -151,15 +151,15 @@ function Controller($scope, ngeoBackgroundLayerMgr, gmfThemes) {
    */
   this.listenerKeys_ = [];
 
-  this.listenerKeys_.push(olEvents.listen(gmfThemes, 'change', this.handleThemesChange_, this));
+  this.listenerKeys_.push(listen(gmfThemes, 'change', this.handleThemesChange_, this));
 
   /**
    * @type {import("ngeo/map/BackgroundLayerMgr.js").MapBackgroundLayerManager}
    * @private
    */
   this.backgroundLayerMgr_ = ngeoBackgroundLayerMgr;
 
-  this.listenerKeys_.push(olEvents.listen(this.backgroundLayerMgr_, 'change',
+  this.listenerKeys_.push(listen(this.backgroundLayerMgr_, 'change',
     /**
      * @param {Event|import('ol/events/Event.js').default} event Event.
      */
@@ -250,7 +250,7 @@ Controller.prototype.setOpacityBgLayer = function(layer) {
  * @private
  */
 Controller.prototype.handleDestroy_ = function() {
-  this.listenerKeys_.forEach(olEvents.unlistenByKey);
+  this.listenerKeys_.forEach(unlistenByKey);
   this.listenerKeys_.length = 0;
 };
 

contribs/gmf/src/controllers/AbstractAppController.js

@@ -24,7 +24,7 @@ import ngeoStatemanagerModule from 'ngeo/statemanager/module.js';
 import ngeoStatemanagerWfsPermalink from 'ngeo/statemanager/WfsPermalink.js';
 import ngeoGeolocation from 'ngeo/geolocation/component.js';
 import * as olArray from 'ol/array.js';
-import * as olEvents from 'ol/events.js';
+import {listen} from 'ol/events.js';
 import olMap from 'ol/Map.js';
 import olStyleCircle from 'ol/style/Circle.js';
 import olStyleFill from 'ol/style/Fill.js';
@@ -243,9 +243,9 @@ export function AbstractAppController(config, map, $scope, $injector) {
     this.updateHasEditableLayers_();
   };
 
-  olEvents.listen(gmfAuthentication, 'ready', userChange);
-  olEvents.listen(gmfAuthentication, 'login', userChange);
-  olEvents.listen(gmfAuthentication, 'logout', userChange);
+  listen(gmfAuthentication, 'ready', userChange);
+  listen(gmfAuthentication, 'login', userChange);
+  listen(gmfAuthentication, 'logout', userChange);
 
   /**
    * @type {Array<import('gmf/search/component.js').SearchComponentDatasource>}

contribs/gmf/src/controllers/AbstractDesktopController.js

@@ -12,7 +12,7 @@ import ngeoDrawFeatures from 'ngeo/draw/features.js';
 import ngeoMiscToolActivate from 'ngeo/misc/ToolActivate.js';
 import gmfImportModule from 'gmf/import/module.js';
 import olCollection from 'ol/Collection.js';
-import * as olEvents from 'ol/events.js';
+import {listen} from 'ol/events.js';
 import olLayerVector from 'ol/layer/Vector.js';
 import olSourceVector from 'ol/source/Vector.js';
 import olStyleFill from 'ol/style/Fill.js';
@@ -219,7 +219,7 @@ export class AbstractDesktopController extends AbstractAPIController {
     // Listen to window resize to set the max resizable width
     // accordingly, and set it also right away.
     const ngeoDebounce = $injector.get('ngeoDebounce');
-    olEvents.listen(
+    listen(
       window,
       'resize',
       ngeoDebounce(this.setDataPanelMaxResizableWidth_.bind(this), 50, true)

contribs/gmf/src/controllers/bootstrap.js

@@ -1,4 +1,3 @@
-
 import $ from 'jquery';
 import angular from 'angular';
 

contribs/gmf/src/datasource/ExternalDataSourcesManager.js

@@ -13,7 +13,7 @@ import ngeoDatasourceOGCGroup from 'ngeo/datasource/OGCGroup.js';
 import ngeoDatasourceWMSGroup from 'ngeo/datasource/WMSGroup.js';
 import {getUid as olUtilGetUid} from 'ol/util.js';
 import {isEmpty} from 'ol/extent.js';
-import * as olEvents from 'ol/events.js';
+import {listen} from 'ol/events.js';
 import olCollection from 'ol/Collection.js';
 import olFormatGPX from 'ol/format/GPX.js';
 import olFormatKML from 'ol/format/KML.js';
@@ -151,7 +151,7 @@ export class ExternalDatSourcesManager {
      */
     this.wmtsCache_ = {};
 
-    olEvents.listen(this.dataSources_, 'remove', this.handleDataSourcesRemove_, this);
+    listen(this.dataSources_, 'remove', this.handleDataSourcesRemove_, this);
   }
 
 

contribs/gmf/src/datasource/Manager.js

@@ -15,13 +15,12 @@ import ngeoMapBackgroundLayerMgr from 'ngeo/map/BackgroundLayerMgr.js';
 import ngeoMapLayerHelper from 'ngeo/map/LayerHelper.js';
 import ngeoMiscWMSTime from 'ngeo/misc/WMSTime.js';
 import {getUid as olUtilGetUid} from 'ol/util.js';
-import * as olEvents from 'ol/events.js';
+import {listen} from 'ol/events.js';
 import olLayerTile from 'ol/layer/Tile.js';
 import {clear as clearObject} from 'ol/obj.js';
 import olLayerImage from 'ol/layer/Image.js';
 import olSourceImageWMS from 'ol/source/ImageWMS.js';
 import olSourceTileWMS from 'ol/source/TileWMS.js';
-import BaseLayer from 'ol/layer/Base.js';
 
 
 /**
@@ -208,13 +207,13 @@ export class DatasourceManager {
 
     // === Events ===
 
-    olEvents.listen(
+    listen(
       this.ngeoBackgroundLayerMgr_,
       'change',
       this.handleNgeoBackgroundLayerChange_,
       this
     );
-    olEvents.listen(this.gmfThemes_, 'change', this.handleThemesChange_, this);
+    listen(this.gmfThemes_, 'change', this.handleThemesChange_, this);
   }
 
 
@@ -256,7 +255,7 @@ export class DatasourceManager {
 
     // Create a layer list to update each one only once
     /**
-     * @type {BaseLayer[]}
+     * @type {import('ol/layer/Base.js').default[]}
      */
     const layers = [];
     /**

contribs/gmf/src/disclaimer/component.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import {getUid as olUtilGetUid} from 'ol/util.js';
-import * as olEvents from 'ol/events.js';
+import {listen} from 'ol/events.js';
 import olLayerBase from 'ol/layer/Base.js';
 import olLayerGroup from 'ol/layer/Group.js';
 import {DATALAYERGROUP_NAME} from 'gmf/index.js';
@@ -207,7 +207,7 @@ DisclaimerController.prototype.registerLayer_ = function(layer) {
     // (1) Listen to added/removed layers to this group
     this.eventHelper_.addListenerKey(
       layerUid,
-      olEvents.listen(
+      listen(
         layer.getLayers(),
         'add',
         this.handleLayersAdd_,
@@ -216,7 +216,7 @@ DisclaimerController.prototype.registerLayer_ = function(layer) {
     );
     this.eventHelper_.addListenerKey(
       layerUid,
-      olEvents.listen(
+      listen(
         layer.getLayers(),
         'remove',
         this.handleLayersRemove_,
@@ -239,7 +239,7 @@ DisclaimerController.prototype.registerLayer_ = function(layer) {
         this.closeAll_(layer);
       }
 
-      const listenerKey = olEvents.listen(layer, 'change', (event) => {
+      const listenerKey = listen(layer, 'change', (event) => {
         if (layer.getVisible()) {
           this.update_(layer);
         } else {

contribs/gmf/src/drawing/drawFeatureComponent.js

@@ -19,7 +19,7 @@ import ngeoMiscFeatureHelper from 'ngeo/misc/FeatureHelper.js';
 import ngeoMiscToolActivate from 'ngeo/misc/ToolActivate.js';
 import ngeoMiscToolActivateMgr from 'ngeo/misc/ToolActivateMgr.js';
 import {getUid as olUtilGetUid} from 'ol/util.js';
-import * as olEvents from 'ol/events.js';
+import {listen, unlistenByKey} from 'ol/events.js';
 import olCollection from 'ol/Collection.js';
 import olStyleFill from 'ol/style/Fill.js';
 import olStyleStyle from 'ol/style/Style.js';
@@ -267,11 +267,17 @@ function Controller($scope, $timeout, gettextCatalog, ngeoFeatureHelper, ngeoFea
   this.translateToolActivate = new ngeoMiscToolActivate(this.translate_, 'active');
 
   /**
-   * @type {Array<import("ol/events.js").EventsKey>}
+   * @type {import("ol/events.js").EventsKey[]}
    * @private
    */
   this.listenerKeys_ = [];
 
+  /**
+   * @type {import("ol/events.js").EventsKey[]}
+   * @private
+   */
+  this.mapListenerKeys_ = [];
+
   /**
    * Flag used to determine whether the selection of a feature was made
    * from the selection of an item from the list or not (the map, contextual
@@ -352,7 +358,7 @@ Controller.prototype.closeMenu_ = function() {
     }
     this.map.removeOverlay(this.menu_);
     this.menu_ = null;
-    olEvents.unlistenByKey(this.menuListenerKey_);
+    unlistenByKey(this.menuListenerKey_);
   }
 };
 
@@ -413,13 +419,10 @@ Controller.prototype.handleActiveChange_ = function(active) {
   if (active) {
     // when activated
 
-    keys.push(
-      olEvents.listen(this.features, 'add', this.handleFeaturesAdd_, this),
-      olEvents.listen(this.features, 'remove', this.handleFeaturesRemove_, this)
-    );
-
-    keys.push(olEvents.listen(this.translate_, 'translateend', this.handleTranslateEnd_, this));
-    keys.push(olEvents.listen(this.rotate_, 'rotateend', this.handleRotateEnd_, this));
+    keys.push(listen(this.features, 'add', this.handleFeaturesAdd_, this));
+    keys.push(listen(this.features, 'remove', this.handleFeaturesRemove_, this));
+    keys.push(listen(this.translate_, 'translateend', this.handleTranslateEnd_, this));
+    keys.push(listen(this.rotate_, 'rotateend', this.handleRotateEnd_, this));
 
     toolMgr.registerTool(drawUid, this.drawToolActivate, false);
     toolMgr.registerTool(drawUid, this.mapSelectToolActivate, true);
@@ -434,7 +437,7 @@ Controller.prototype.handleActiveChange_ = function(active) {
   } else {
     // when deactivated
 
-    keys.forEach(olEvents.unlistenByKey);
+    keys.forEach(unlistenByKey);
     keys.length = 0;
 
     toolMgr.unregisterTool(drawUid, this.drawToolActivate);
@@ -543,17 +546,13 @@ Controller.prototype.handleMapSelectActiveChange_ = function(active) {
   }
 
   if (active) {
-    olEvents.listen(this.map, 'click', this.handleMapClick_, this);
-    olEvents.listen(mapDiv, 'contextmenu', this.handleMapContextMenu_, this);
-    olEvents.listen(mapDiv, 'touchstart', this.handleMapTouchStart_, this);
-    olEvents.listen(mapDiv, 'touchmove', this.handleMapTouchEnd_, this);
-    olEvents.listen(mapDiv, 'touchend', this.handleMapTouchEnd_, this);
+    this.mapListenerKeys_.push(listen(this.map, 'click', this.handleMapClick_, this));
+    this.mapListenerKeys_.push(listen(mapDiv, 'contextmenu', this.handleMapContextMenu_, this));
+    this.mapListenerKeys_.push(listen(mapDiv, 'touchstart', this.handleMapTouchStart_, this));
+    this.mapListenerKeys_.push(listen(mapDiv, 'touchmove', this.handleMapTouchEnd_, this));
+    this.mapListenerKeys_.push(listen(mapDiv, 'touchend', this.handleMapTouchEnd_, this));
   } else {
-    olEvents.unlisten(this.map, 'click', this.handleMapClick_, this);
-    olEvents.unlisten(mapDiv, 'contextmenu', this.handleMapContextMenu_, this);
-    olEvents.unlisten(mapDiv, 'touchstart', this.handleMapTouchStart_, this);
-    olEvents.unlisten(mapDiv, 'touchmove', this.handleMapTouchEnd_, this);
-    olEvents.unlisten(mapDiv, 'touchend', this.handleMapTouchEnd_, this);
+    this.mapListenerKeys_.forEach(unlistenByKey);
   }
 };
 
@@ -698,7 +697,7 @@ Controller.prototype.handleMapContextMenu_ = function(evt) {
         actions
       });
 
-      this.menuListenerKey_ = olEvents.listen(this.menu_, 'actionclick',
+      this.menuListenerKey_ = listen(this.menu_, 'actionclick',
         this.handleMenuActionClick_.bind(this, vertexInfo), this);
       this.map.addOverlay(this.menu_);
 

contribs/gmf/src/drawing/featureStyleComponent.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import {getUid as olUtilGetUid} from 'ol/util.js';
-import * as olEvents from 'ol/events.js';
+import {listen, unlistenByKey} from 'ol/events.js';
 import ngeoFormatFeatureProperties from 'ngeo/format/FeatureProperties.js';
 
 import ngeoMiscColorpickerComponent from 'ngeo/misc/colorpickerComponent.js';
@@ -143,7 +143,7 @@ Controller.prototype.handleFeatureSet_ = function(newFeature, previousFeature) {
   const keys = this.featureListenerKeys_;
 
   if (previousFeature) {
-    keys.forEach(olEvents.unlistenByKey);
+    keys.forEach(unlistenByKey);
     keys.length = 0;
     this.type = undefined;
     this.color = undefined;
@@ -162,29 +162,15 @@ Controller.prototype.handleFeatureSet_ = function(newFeature, previousFeature) {
       ngeoFormatFeatureProperties.SIZE,
       ngeoFormatFeatureProperties.STROKE
     ].forEach((propName) => {
-      keys.push(
-        olEvents.listen(
-          newFeature,
-          `change:${propName}`,
-          this.handleFeatureChange_,
-          this
-        )
-      );
+      keys.push(listen(newFeature, `change:${propName}`, this.handleFeatureChange_, this));
     });
 
     const geometry = newFeature.getGeometry();
     if (!geometry) {
       throw new Error('Missing geometry');
     }
 
-    keys.push(
-      olEvents.listen(
-        geometry,
-        'change',
-        this.handleGeometryChange_,
-        this
-      )
-    );
+    keys.push(listen(geometry, 'change', this.handleGeometryChange_, this));
 
     this.type = this.featureHelper_.getType(newFeature);
     this.color = this.featureHelper_.getColorProperty(newFeature);

contribs/gmf/src/editing/Snapping.js

@@ -4,7 +4,7 @@ import gmfThemeThemes, {ThemeNodeType, getSnappingConfig} from 'gmf/theme/Themes
 import ngeoLayertreeController, {getFirstParentTree} from 'ngeo/layertree/Controller.js';
 import {DEFAULT_GEOMETRY_NAME} from 'ngeo/datasource/OGC.js';
 import {getUid as olUtilGetUid} from 'ol/util.js';
-import * as olEvents from 'ol/events.js';
+import {listen, unlistenByKey} from 'ol/events.js';
 import olCollection from 'ol/Collection.js';
 import olFormatWFS from 'ol/format/WFS.js';
 import olInteractionSnap from 'ol/interaction/Snap.js';
@@ -190,7 +190,7 @@ EditingSnappingService.prototype.setMap = function(map) {
     }
     this.treeCtrlsUnregister_();
     this.unregisterAllTreeCtrl_();
-    keys.forEach(olEvents.unlistenByKey);
+    keys.forEach(unlistenByKey);
     keys.length = 0;
   }
 
@@ -216,8 +216,8 @@ EditingSnappingService.prototype.setMap = function(map) {
     });
 
     keys.push(
-      olEvents.listen(this.gmfThemes_, 'change', this.handleThemesChange_, this),
-      olEvents.listen(map, 'moveend', this.handleMapMoveEnd_, this)
+      listen(this.gmfThemes_, 'change', this.handleThemesChange_, this),
+      listen(map, 'moveend', this.handleMapMoveEnd_, this)
     );
   }
 };