Fix private scope type issues in controls

src/ol/control/Attribution.js

@@ -49,7 +49,7 @@ class Attribution extends Control {
 
     super({
       element: document.createElement('div'),
-      render: options.render || render,
+      render: options.render,
       target: options.target,
     });
 
@@ -328,15 +328,15 @@ class Attribution extends Control {
   getCollapsed() {
     return this.collapsed_;
   }
-}
 
-/**
+  /**
- * Update the attribution element.
+   * Update the attribution element.
- * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
- * @this {Attribution}
+   * @override
- */
+   */
-export function render(mapEvent) {
+  render(mapEvent) {
-  this.updateElement_(mapEvent.frameState);
+    this.updateElement_(mapEvent.frameState);
+  }
 }
 
 export default Attribution;

src/ol/control/Control.js

@@ -74,11 +74,9 @@ class Control extends BaseObject {
      */
     this.listenerKeys = [];
 
-    /**
+    if (options.render) {
-     * @private
+      this.render = options.render;
-     * @type {function(import("../MapEvent.js").default): void}
+    }
-     */
-    this.render_ = options.render ? options.render : VOID;
 
     if (options.target) {
       this.setTarget(options.target);
@@ -133,14 +131,11 @@ class Control extends BaseObject {
   }
 
   /**
-   * Update the projection. Rendering of the coordinates is done in
+   * Renders the control.
-   * `handleMouseMove` and `handleMouseUp`.
    * @param {import("../MapEvent.js").default} mapEvent Map event.
    * @api
    */
-  render(mapEvent) {
+  render(mapEvent) {}
-    this.render_.call(this, mapEvent);
-  }
 
   /**
    * This function is used to set a target element for the control. It has no

src/ol/control/MousePosition.js

@@ -66,7 +66,7 @@ class MousePosition extends Control {
 
     super({
       element: element,
-      render: options.render || render,
+      render: options.render,
       target: options.target,
     });
 
@@ -251,22 +251,22 @@ class MousePosition extends Control {
       this.renderedHTML_ = html;
     }
   }
-}
 
-/**
+  /**
- * Update the projection. Rendering of the coordinates is done in
+   * Update the projection. Rendering of the coordinates is done in
- * `handleMouseMove` and `handleMouseUp`.
+   * `handleMouseMove` and `handleMouseUp`.
- * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
- * @this {MousePosition}
+   * @override
- */
+   */
-export function render(mapEvent) {
+  render(mapEvent) {
-  const frameState = mapEvent.frameState;
+    const frameState = mapEvent.frameState;
-  if (!frameState) {
+    if (!frameState) {
-    this.mapProjection_ = null;
+      this.mapProjection_ = null;
-  } else {
+    } else {
-    if (this.mapProjection_ != frameState.viewState.projection) {
+      if (this.mapProjection_ != frameState.viewState.projection) {
-      this.mapProjection_ = frameState.viewState.projection;
+        this.mapProjection_ = frameState.viewState.projection;
-      this.transform_ = null;
+        this.transform_ = null;
+      }
     }
   }
 }

src/ol/control/OverviewMap.js

@@ -81,7 +81,7 @@ class OverviewMap extends Control {
 
     super({
       element: document.createElement('div'),
-      render: options.render || render,
+      render: options.render,
       target: options.target,
     });
 
@@ -644,16 +644,16 @@ class OverviewMap extends Control {
   getOverviewMap() {
     return this.ovmap_;
   }
-}
 
-/**
+  /**
- * Update the overview map element.
+   * Update the overview map element.
- * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
- * @this {OverviewMap}
+   * @override
- */
+   */
-export function render(mapEvent) {
+  render(mapEvent) {
-  this.validateExtent_();
+    this.validateExtent_();
-  this.updateBox_();
+    this.updateBox_();
+  }
 }
 
 export default OverviewMap;

src/ol/control/Rotate.js

@@ -39,7 +39,7 @@ class Rotate extends Control {
 
     super({
       element: document.createElement('div'),
-      render: options.render || render,
+      render: options.render,
       target: options.target,
     });
 
@@ -145,32 +145,32 @@ class Rotate extends Control {
       }
     }
   }
-}
 
-/**
+  /**
- * Update the rotate control element.
+   * Update the rotate control element.
- * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
- * @this {Rotate}
+   * @override
- */
+   */
-export function render(mapEvent) {
+  render(mapEvent) {
-  const frameState = mapEvent.frameState;
+    const frameState = mapEvent.frameState;
-  if (!frameState) {
+    if (!frameState) {
-    return;
+      return;
-  }
-  const rotation = frameState.viewState.rotation;
-  if (rotation != this.rotation_) {
-    const transform = 'rotate(' + rotation + 'rad)';
-    if (this.autoHide_) {
-      const contains = this.element.classList.contains(CLASS_HIDDEN);
-      if (!contains && rotation === 0) {
-        this.element.classList.add(CLASS_HIDDEN);
-      } else if (contains && rotation !== 0) {
-        this.element.classList.remove(CLASS_HIDDEN);
-      }
     }
-    this.label_.style.transform = transform;
+    const rotation = frameState.viewState.rotation;
+    if (rotation != this.rotation_) {
+      const transform = 'rotate(' + rotation + 'rad)';
+      if (this.autoHide_) {
+        const contains = this.element.classList.contains(CLASS_HIDDEN);
+        if (!contains && rotation === 0) {
+          this.element.classList.add(CLASS_HIDDEN);
+        } else if (contains && rotation !== 0) {
+          this.element.classList.remove(CLASS_HIDDEN);
+        }
+      }
+      this.label_.style.transform = transform;
+    }
+    this.rotation_ = rotation;
   }
-  this.rotation_ = rotation;
 }
 
 export default Rotate;

src/ol/control/ScaleLine.js

@@ -87,7 +87,7 @@ class ScaleLine extends Control {
 
     super({
       element: document.createElement('div'),
-      render: options.render || render,
+      render: options.render,
       target: options.target,
     });
 
@@ -471,21 +471,21 @@ class ScaleLine extends Control {
     const inchesPerMeter = 39.37;
     return parseFloat(resolution.toString()) * mpu * inchesPerMeter * dpi;
   }
-}
 
-/**
+  /**
- * Update the scale line element.
+   * Update the scale line element.
- * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
- * @this {ScaleLine}
+   * @override
- */
+   */
-export function render(mapEvent) {
+  render(mapEvent) {
-  const frameState = mapEvent.frameState;
+    const frameState = mapEvent.frameState;
-  if (!frameState) {
+    if (!frameState) {
-    this.viewState_ = null;
+      this.viewState_ = null;
-  } else {
+    } else {
-    this.viewState_ = frameState.viewState;
+      this.viewState_ = frameState.viewState;
+    }
+    this.updateElement_();
   }
-  this.updateElement_();
 }
 
 export default ScaleLine;

src/ol/control/ZoomSlider.js

@@ -49,7 +49,7 @@ class ZoomSlider extends Control {
 
     super({
       element: document.createElement('div'),
-      render: options.render || render,
+      render: options.render,
     });
 
     /**
@@ -356,23 +356,23 @@ class ZoomSlider extends Control {
     const fn = this.getMap().getView().getValueForResolutionFunction();
     return clamp(1 - fn(res), 0, 1);
   }
-}
 
-/**
+  /**
- * Update the zoomslider element.
+   * Update the zoomslider element.
- * @param {import("../MapEvent.js").default} mapEvent Map event.
+   * @param {import("../MapEvent.js").default} mapEvent Map event.
- * @this {ZoomSlider}
+   * @override
- */
+   */
-export function render(mapEvent) {
+  render(mapEvent) {
-  if (!mapEvent.frameState) {
+    if (!mapEvent.frameState) {
-    return;
+      return;
+    }
+    if (!this.sliderInitialized_) {
+      this.initSlider_();
+    }
+    const res = mapEvent.frameState.viewState.resolution;
+    this.currentResolution_ = res;
+    this.setThumbPosition_(res);
   }
-  if (!this.sliderInitialized_) {
-    this.initSlider_();
-  }
-  const res = mapEvent.frameState.viewState.resolution;
-  this.currentResolution_ = res;
-  this.setThumbPosition_(res);
 }
 
 export default ZoomSlider;

test/spec/ol/control/scaleline.test.js

@@ -1,6 +1,6 @@
 import Map from '../../../../src/ol/Map.js';
 import Projection from '../../../../src/ol/proj/Projection.js';
-import ScaleLine, {render} from '../../../../src/ol/control/ScaleLine.js';
+import ScaleLine from '../../../../src/ol/control/ScaleLine.js';
 import View from '../../../../src/ol/View.js';
 import proj4 from 'proj4';
 import {
@@ -82,14 +82,14 @@ describe('ol.control.ScaleLine', function () {
     describe('render', function () {
       it('defaults to `ol.control.ScaleLine.render`', function () {
         const ctrl = new ScaleLine();
-        expect(ctrl.render_).to.be(render);
+        expect(ctrl.render).to.be(ScaleLine.prototype.render);
       });
       it('can be configured', function () {
         const myRender = function () {};
         const ctrl = new ScaleLine({
           render: myRender,
         });
-        expect(ctrl.render_).to.be(myRender);
+        expect(ctrl.render).to.be(myRender);
       });
     });
   });