ol 7.0.0-dev.1659909163207 → 7.0.0-dev.1659909182469

package/control/ScaleLine.d.ts

@@ -9,7 +9,8 @@ export type Units = 'degrees' | 'imperial' | 'nautical' | 'metric' | 'us';
 export type ScaleLineOnSignature<Return> = import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> & import("../Observable").OnSignature<import("../ObjectEventType").Types | 'change:units', import("../Object").ObjectEvent, Return> & import("../Observable").CombinedOnSignature<import("../Observable").EventTypes | import("../ObjectEventType").Types | 'change:units', Return>;
 export type Options = {
     /**
-     * CSS Class name.
+     * CSS class name. The default is `ol-scale-bar` when configured with
+     * `bar: true`. Otherwise the default is `ol-scale-line`.
      */
     className?: string | undefined;
     /**
@@ -66,7 +67,8 @@ export type Options = {
  */
 /**
  * @typedef {Object} Options
- * @property {string} [className='ol-scale-line'] CSS Class name.
+ * @property {string} [className] CSS class name. The default is `ol-scale-bar` when configured with
+ * `bar: true`. Otherwise the default is `ol-scale-line`.
  * @property {number} [minWidth=64] Minimum width in pixels at the OGC default dpi. The width will be
  * adjusted to match the dpi used.
  * @property {number} [maxWidth] Maximum width in pixels at the OGC default dpi. The width will be
@@ -209,11 +211,10 @@ declare class ScaleLine extends Control {
     private createScaleBar;
     /**
      * Creates a marker at given position
-     * @param {string} position The position, absolute or relative
-     * @param {number} i The iterator
+     * @param {'absolute'|'relative'} position The position, absolute or relative
      * @return {string} The stringified div containing the marker
      */
-    createMarker(position: string, i: number): string;
+    createMarker(position: 'absolute' | 'relative'): string;
     /**
      * Creates the label for a marker marker at given position
      * @param {number} i The iterator

package/control/ScaleLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleLine.d.ts","sourceRoot":"","sources":["ScaleLine.js"],"names":[],"mappings":";;;;oBAca,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,IAAI;;;;2CAkBrD,OAAO,eAAe,EAAE,WAAW,CAAC,OAAO,eAAe,EAAE,UAAU,EAAE,OAAO,oBAAoB,EAAE,OAAO,EAAE,MAAM,CAAC,GACjI,OAAW,eAAe,EAAE,WAAW,CAAC,OAAO,oBAAoB,EAAE,KAAK,GAC1E,cAAoB,EAAE,OAAO,WAAW,EAAE,WAAW,EAAE,MAAM,CAAC,GAC9D,OAAW,eAAe,EAAE,mBAAmB,CAAC,OAAO,eAAe,EAAE,UAAU,GAAC,OAAO,oBAAoB,EAAE,KAAK,GAC9G,cAAc,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;qBAUR,OAAO,gBAAgB,EAAE,OAAO,KAAE,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAU/C,MAAM,GAAC,SAAS;;AA1B9B;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;OAEG;IACH,+CAwGC;IAxFC;;OAEG;IACH,IAFU,qBAAqB,OAAO,WAAW,EAAE,SAAS,CAAC,CAEtD;IAEP;;OAEG;IACH,MAFU,qBAAqB,OAAO,WAAW,EAAE,SAAS,CAAC,CAEpD;IAET;;OAEG;IACH,IAFU,qBAAqB,IAAI,CAAC,CAE7B;IAEP;;;OAGG;IACH,sBAAkD;IAMlD;;;OAGG;IACH,mBAAsB;IAEtB;;;OAGG;IACH,kBAAuE;IAEvE;;;OAGG;IACH,kBAAiC;IAEjC;;;OAGG;IACH,yBAA6B;IAE7B;;;OAGG;IACH,uBAA+B;IAE/B;;;OAGG;IACH,sBAAuB;IAMvB;;;OAGG;IACH,kBAAqC;IAErC;;;OAGG;IACH,uBAAwC;IAExC;;;OAGG;IACH,sBAA0C;IAE1C;;;OAGG;IACH,aAAoC;IAGtC;;;;;;OAMG;IACH,YALY,KAAK,CAOhB;IAED;;OAEG;IACH,4BAEC;IAED;;;;;OAKG;IACH,gBAJW,KAAK,QAMf;IAED;;;;OAIG;IACH,YAHW,MAAM,GAAC,SAAS,QAK1B;IAED;;OAEG;IACH,uBAqIC;IAED;;;;;;OAMG;IACH,uBA+DC;IAED;;;;;OAKG;IACH,uBAJW,MAAM,KACN,MAAM,GACL,MAAM,CAejB;IAED;;;;;;;;OAQG;IACH,kBAPW,MAAM,SACN,MAAM,UACN,OAAO,SACP,MAAM,UACN,MAAM,GACL,MAAM,CA4BjB;IAED;;;OAGG;IACH,yBAFY,MAAM,CAYjB;CAgBF"}
+{"version":3,"file":"ScaleLine.d.ts","sourceRoot":"","sources":["ScaleLine.js"],"names":[],"mappings":";;;;oBAca,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,IAAI;;;;2CAkBrD,OAAO,eAAe,EAAE,WAAW,CAAC,OAAO,eAAe,EAAE,UAAU,EAAE,OAAO,oBAAoB,EAAE,OAAO,EAAE,MAAM,CAAC,GACjI,OAAW,eAAe,EAAE,WAAW,CAAC,OAAO,oBAAoB,EAAE,KAAK,GAC1E,cAAoB,EAAE,OAAO,WAAW,EAAE,WAAW,EAAE,MAAM,CAAC,GAC9D,OAAW,eAAe,EAAE,mBAAmB,CAAC,OAAO,eAAe,EAAE,UAAU,GAAC,OAAO,oBAAoB,EAAE,KAAK,GAC9G,cAAc,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;qBAWR,OAAO,gBAAgB,EAAE,OAAO,KAAE,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAU/C,MAAM,GAAC,SAAS;;AA3B9B;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;;;;;;;;GAaG;AACH;IACE;;OAEG;IACH,+CA2GC;IA/FC;;OAEG;IACH,IAFU,qBAAqB,OAAO,WAAW,EAAE,SAAS,CAAC,CAEtD;IAEP;;OAEG;IACH,MAFU,qBAAqB,OAAO,WAAW,EAAE,SAAS,CAAC,CAEpD;IAET;;OAEG;IACH,IAFU,qBAAqB,IAAI,CAAC,CAE7B;IASP;;;OAGG;IACH,sBAAkD;IAMlD;;;OAGG;IACH,mBAAsB;IAEtB;;;OAGG;IACH,kBAAuE;IAEvE;;;OAGG;IACH,kBAAiC;IAEjC;;;OAGG;IACH,yBAA6B;IAE7B;;;OAGG;IACH,uBAA+B;IAE/B;;;OAGG;IACH,sBAAuB;IAMvB;;;OAGG;IACH,kBAAqC;IAErC;;;OAGG;IACH,uBAAwC;IAExC;;;OAGG;IACH,sBAA0C;IAE1C;;;OAGG;IACH,aAAoC;IAGtC;;;;;;OAMG;IACH,YALY,KAAK,CAOhB;IAED;;OAEG;IACH,4BAEC;IAED;;;;;OAKG;IACH,gBAJW,KAAK,QAMf;IAED;;;;OAIG;IACH,YAHW,MAAM,GAAC,SAAS,QAK1B;IAED;;OAEG;IACH,uBAkIC;IAED;;;;;;OAMG;IACH,uBAoCC;IAED;;;;OAIG;IACH,uBAHW,UAAU,GAAC,UAAU,GACpB,MAAM,CAUjB;IAED;;;;;;;;OAQG;IACH,kBAPW,MAAM,SACN,MAAM,UACN,OAAO,SACP,MAAM,UACN,MAAM,GACL,MAAM,CAoBjB;IAED;;;OAGG;IACH,yBAFY,MAAM,CAYjB;CAgBF"}

package/control/ScaleLine.js

@@ -39,7 +39,8 @@ const DEFAULT_DPI = 25.4 / 0.28;
 
 /**
  * @typedef {Object} Options
- * @property {string} [className='ol-scale-line'] CSS Class name.
+ * @property {string} [className] CSS class name. The default is `ol-scale-bar` when configured with
+ * `bar: true`. Otherwise the default is `ol-scale-line`.
  * @property {number} [minWidth=64] Minimum width in pixels at the OGC default dpi. The width will be
  * adjusted to match the dpi used.
  * @property {number} [maxWidth] Maximum width in pixels at the OGC default dpi. The width will be
@@ -79,15 +80,11 @@ class ScaleLine extends Control {
   constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
-    const className =
-      options.className !== undefined
-        ? options.className
-        : options.bar
-        ? 'ol-scale-bar'
-        : 'ol-scale-line';
+    const element = document.createElement('div');
+    element.style.pointerEvents = 'none';
 
     super({
-      element: document.createElement('div'),
+      element: element,
       render: options.render,
       target: options.target,
     });
@@ -107,6 +104,13 @@ class ScaleLine extends Control {
      */
     this.un;
 
+    const className =
+      options.className !== undefined
+        ? options.className
+        : options.bar
+        ? 'ol-scale-bar'
+        : 'ol-scale-line';
+
     /**
      * @private
      * @type {HTMLElement}
@@ -334,12 +338,9 @@ class ScaleLine extends Control {
       previousDecimalCount = decimalCount;
       ++i;
     }
-    let html;
-    if (this.scaleBar_) {
-      html = this.createScaleBar(width, count, suffix);
-    } else {
-      html = count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
-    }
+    const html = this.scaleBar_
+      ? this.createScaleBar(width, count, suffix)
+      : count.toFixed(decimalCount < 0 ? -decimalCount : 0) + ' ' + suffix;
 
     if (this.renderedHTML_ != html) {
       this.innerElement_.innerHTML = html;
@@ -365,87 +366,54 @@ class ScaleLine extends Control {
    * @return {string} The stringified HTML of the scalebar.
    */
   createScaleBar(width, scale, suffix) {
+    const resolutionScale = this.getScaleForResolution();
     const mapScale =
-      '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
-    const scaleSteps = [];
-    const stepWidth = width / this.scaleBarSteps_;
-    let backgroundColor = 'ol-scale-singlebar-odd';
-    for (let i = 0; i < this.scaleBarSteps_; i++) {
-      if (i === 0) {
-        // create the first marker at position 0
-        scaleSteps.push(this.createMarker('absolute', i));
-      }
+      resolutionScale < 1
+        ? Math.round(1 / resolutionScale).toLocaleString() + ' : 1'
+        : '1 : ' + Math.round(resolutionScale).toLocaleString();
+    const steps = this.scaleBarSteps_;
+    const stepWidth = width / steps;
+    const scaleSteps = [this.createMarker('absolute')];
+    for (let i = 0; i < steps; ++i) {
+      const cls =
+        i % 2 === 0 ? 'ol-scale-singlebar-odd' : 'ol-scale-singlebar-even';
       scaleSteps.push(
         '<div>' +
           '<div ' +
-          'class="ol-scale-singlebar ' +
-          backgroundColor +
-          '" ' +
-          'style=' +
-          '"width: ' +
-          stepWidth +
-          'px;"' +
+          `class="ol-scale-singlebar ${cls}" ` +
+          `style="width: ${stepWidth}px;"` +
           '>' +
           '</div>' +
-          this.createMarker('relative', i) +
-          /*render text every second step, except when only 2 steps */
-          (i % 2 === 0 || this.scaleBarSteps_ === 2
+          this.createMarker('relative') +
+          // render text every second step, except when only 2 steps
+          (i % 2 === 0 || steps === 2
             ? this.createStepText(i, width, false, scale, suffix)
             : '') +
           '</div>'
       );
-      if (i === this.scaleBarSteps_ - 1) {
-        {
-          /*render text at the end */
-        }
-        scaleSteps.push(this.createStepText(i + 1, width, true, scale, suffix));
-      }
-      // switch style of steps
-      backgroundColor =
-        backgroundColor === 'ol-scale-singlebar-odd'
-          ? 'ol-scale-singlebar-even'
-          : 'ol-scale-singlebar-odd';
     }
+    // render text at the end
+    scaleSteps.push(this.createStepText(steps, width, true, scale, suffix));
 
-    let scaleBarText;
-    if (this.scaleBarText_) {
-      scaleBarText =
-        '<div ' +
-        'class="ol-scale-text" ' +
-        'style="width: ' +
-        width +
-        'px;">' +
+    const scaleBarText = this.scaleBarText_
+      ? `<div class="ol-scale-text" style="width: ${width}px;">` +
         mapScale +
-        '</div>';
-    } else {
-      scaleBarText = '';
-    }
-    const container =
-      '<div ' +
-      'style="display: flex;">' +
-      scaleBarText +
-      scaleSteps.join('') +
-      '</div>';
-    return container;
+        '</div>'
+      : '';
+    return scaleBarText + scaleSteps.join('');
   }
 
   /**
    * Creates a marker at given position
-   * @param {string} position The position, absolute or relative
-   * @param {number} i The iterator
+   * @param {'absolute'|'relative'} position The position, absolute or relative
    * @return {string} The stringified div containing the marker
    */
-  createMarker(position, i) {
+  createMarker(position) {
     const top = position === 'absolute' ? 3 : -10;
     return (
       '<div ' +
       'class="ol-scale-step-marker" ' +
-      'style="position: ' +
-      position +
-      ';' +
-      'top: ' +
-      top +
-      'px;"' +
+      `style="position: ${position}; top: ${top}px;"` +
       '></div>'
     );
   }
@@ -469,19 +437,11 @@ class ScaleLine extends Control {
       '<div ' +
       'class="ol-scale-step-text" ' +
       'style="' +
-      'margin-left: ' +
-      margin +
-      'px;' +
-      'text-align: ' +
-      (i === 0 ? 'left' : 'center') +
-      '; ' +
-      'min-width: ' +
-      minWidth +
-      'px;' +
-      'left: ' +
-      (isLast ? width + 'px' : 'unset') +
-      ';"' +
-      '>' +
+      `margin-left: ${margin}px;` +
+      `text-align: ${i === 0 ? 'left' : 'center'};` +
+      `min-width: ${minWidth}px;` +
+      `left: ${isLast ? width + 'px' : 'unset'};` +
+      '">' +
       lengthString +
       '</div>'
     );
@@ -500,7 +460,7 @@ class ScaleLine extends Control {
     );
     const dpi = this.dpi_ || DEFAULT_DPI;
     const inchesPerMeter = 1000 / 25.4;
-    return parseFloat(resolution.toString()) * inchesPerMeter * dpi;
+    return resolution * inchesPerMeter * dpi;
   }
 
   /**

package/ol.css

@@ -41,20 +41,16 @@
   transition: all 0.25s;
 }
 
-.ol-scale-singlebar-even {
-  background-color: var(--ol-subtle-foreground-color);
-}
-
-.ol-scale-singlebar-odd {
-  background-color: var(--ol-background-color);
-}
-
 .ol-scale-bar {
   position: absolute;
   bottom: 8px;
   left: 8px;
 }
 
+.ol-scale-bar-inner {
+  display: flex;
+}
+
 .ol-scale-step-marker {
   width: 1px;
   height: 15px;
@@ -89,6 +85,14 @@
   border: 1px solid var(--ol-foreground-color);
 }
 
+.ol-scale-singlebar-even {
+  background-color: var(--ol-subtle-foreground-color);
+}
+
+.ol-scale-singlebar-odd {
+  background-color: var(--ol-background-color);
+}
+
 .ol-unsupported {
   display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "7.0.0-dev.1659909163207",
+  "version": "7.0.0-dev.1659909182469",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",