@openglobus/og 0.11.2 → 0.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.11.2",
+  "version": "0.11.7",
   "description": "[OpenGlobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and completely free.",
   "directories": {
     "example": "./sandbox"
@@ -17,8 +17,8 @@
     "test": "jest --env=jsdom",
     "test_watch": "jest --env=jsdom --watch",
     "lint": "eslint src/og",
-    "generate_types": "rm -rf types; tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types; exit 0",
-    "prepare": "husky install"
+    "generate_types": "rm -rf types; tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types",
+    "compile_js_as_ts": "tsc src/og/index.js --AllowJs --checkJs --outDir dist/@openglobus/src/"
   },
   "repository": {
     "type": "git",
@@ -43,24 +43,24 @@
     "./css/og.css": "./css/og.css"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-env": "^7.16.4",
     "@rollup/plugin-json": "^4.1.0",
-    "eslint": "^8.0.1",
-    "husky": "^7.0.2",
+    "@types/jest": "^27.0.3",
+    "eslint": "^8.3.0",
     "jaguarjs-jsdoc": "^1.1.0",
-    "jest": "^27.2.5",
+    "jest": "^27.3.1",
     "jest-canvas-mock": "^2.3.1",
     "jest-webgl-canvas-mock": "^0.2.3",
     "jsdoc": "^3.6.7",
-    "lint-staged": "^11.2.3",
+    "lint-staged": "^12.1.2",
     "local-web-server": "^5.1.1",
     "msdf-bmfont-xml": "^2.5.4",
-    "postcss": "^8.3.9",
-    "prettier": "^2.4.1",
-    "rollup": "^2.58.0",
-    "rollup-plugin-postcss": "^4.0.1",
+    "postcss": "^8.4.1",
+    "prettier": "^2.5.0",
+    "rollup": "^2.60.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/og/Clock.js

@@ -2,22 +2,21 @@
  * @module og/Clock
  */
 
-'use strict';
+"use strict";
 
-import { Events } from './Events.js';
-import * as jd from './astro/jd.js';
+import { Events } from "./Events.js";
+import * as jd from "./astro/jd.js";
 
 /**
  * Class represents application timer that stores custom current julian datetime, and time speed multiplier.
  * @class
- * @param {Object} [params]: - Clock parameters:
+ * @param {Object} [params] - Clock parameters:
  * @param {number} [params.startDate=0.0] - Julian start date.
  * @param {number} [params.endDate=0.0] - Julian end date.
  * @param {number} [params.currentDate] - Julian current date. Default: current date.
  * @param {number} [params.multiplier=1.0] - Time speed multiolier.
  */
 class Clock {
-
     static get _staticCounter() {
         if (!this._counter && this._counter !== 0) {
             this._counter = 0;
@@ -29,6 +28,10 @@ class Clock {
         this._counter = n;
     }
 
+    /**
+     *
+     * @param {Object} [params] - Clock parameters:
+     */
     constructor(params) {
         params = params || {};
 
@@ -46,10 +49,7 @@ class Clock {
          * @public
          * @type {Events}
          */
-        this.events = new Events([
-            "tick",
-            "end"
-        ], this);
+        this.events = new Events(["tick", "end"], this);
 
         /**
          * Start julian date clock loop.
@@ -191,4 +191,4 @@ class Clock {
     }
 }
 
-export { Clock };
+export { Clock };

package/src/og/Events.js

@@ -2,17 +2,20 @@
  * @module og/Events
  */
 
-'use strict';
+"use strict";
 
-import { stamp, binaryInsert } from './utils/shared.js';
+import { stamp, binaryInsert } from "./utils/shared.js";
 
 /**
  * Base events class to handle custom events.
  * @class
- * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
  */
 class Events {
-
+    /**
+     *
+     * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
+     * @param {*} [sender]
+     */
     constructor(eventNames, sender) {
         /**
          * Registered event names.
@@ -76,7 +79,6 @@ class Events {
      * @return {boolean} -
      */
     _stamp(name, obj) {
-
         var ogid = stamp(obj);
 
         var st = this._getStamp(name, this.__id, ogid);
@@ -183,4 +185,4 @@ class Events {
     }
 }
 
-export { Events };
+export { Events };

package/src/og/Extent.js

@@ -2,11 +2,11 @@
  * @module og/Extent
  */
 
-'use strict';
+"use strict";
 
-import * as math from './math.js';
-import * as mercator from './mercator.js';
-import { LonLat } from './LonLat.js';
+import * as math from "./math.js";
+import * as mercator from "./mercator.js";
+import { LonLat } from "./LonLat.js";
 
 /**
  * Represents geographical coordinates extent.
@@ -15,7 +15,6 @@ import { LonLat } from './LonLat.js';
  * @param {LonLat} [ne] - North East extent corner coordiantes.
  */
 export class Extent {
-
     /**
      * @param {LonLat} [sw] - South West extent corner coordiantes.
      * @param {LonLat} [ne] - North East extent corner coordiantes.
@@ -35,25 +34,31 @@ export class Extent {
      * Whole mercator extent.
      * @const
      */
-    static get FULL_MERC() { return new Extent(LonLat.SW_MERC, LonLat.NE_MERC); }
+    static get FULL_MERC() {
+        return new Extent(LonLat.SW_MERC, LonLat.NE_MERC);
+    }
 
     /**
      * Degrees extent from north mercator limit to north pole.
      * @const
      */
-    static get NORTH_POLE_DEG() { return new Extent(LonLat.NW_MERC_DEG, new LonLat(180.0, 90.0)); }
+    static get NORTH_POLE_DEG() {
+        return new Extent(LonLat.NW_MERC_DEG, new LonLat(180.0, 90.0));
+    }
 
     /**
      * Degrees extent from south pole to south mercator limit.
      * @const
      */
-    static get SOUTH_POLE_DEG() { return new Extent(new LonLat(-180.0, -90.0), LonLat.SE_MERC_DEG); }
+    static get SOUTH_POLE_DEG() {
+        return new Extent(new LonLat(-180.0, -90.0), LonLat.SE_MERC_DEG);
+    }
 
     /**
      * Creates extent instance from values in array.
      * @static
      * @param {Array.<number>} arr - South west and north east longitude and latidudes packed in array. (exactly 4 entries)
-     * @return {og.Extent} Extent object.
+     * @return {Extent} Extent object.
      */
     static createFromArray(arr) {
         return new Extent(new LonLat(arr[0], arr[1]), new LonLat(arr[2], arr[3]));
@@ -66,8 +71,10 @@ export class Extent {
      * @return {Extent} Extent object.
      */
     static createByCoordinates(arr) {
-        let lonmin = math.MAX, lonmax = math.MIN,
-            latmin = math.MAX, latmax = math.MIN;
+        let lonmin = math.MAX,
+            lonmax = math.MIN,
+            latmin = math.MAX,
+            latmax = math.MIN;
         for (let i = 0; i < arr.length; i++) {
             const vi = arr[i];
             if (vi.lon < lonmin) lonmin = vi.lon;
@@ -82,11 +89,13 @@ export class Extent {
      * Creates bound extent instance by coordinate array.
      * @static
      * @param {Array.<Array<number>>} arr - Coordinate array. (exactly 2 entries)
-     * @return {og.Extent} Extent object.
+     * @return {Extent} Extent object.
      */
     static createByCoordinatesArr(arr) {
-        let lonmin = math.MAX, lonmax = math.MIN,
-            latmin = math.MAX, latmax = math.MIN;
+        let lonmin = math.MAX,
+            lonmax = math.MIN,
+            latmin = math.MAX,
+            latmax = math.MIN;
         for (let i = 0; i < arr.length; i++) {
             const vi = arr[i];
             if (vi[0] < lonmin) lonmin = vi[0];
@@ -105,7 +114,7 @@ export class Extent {
      * @param {number} z -
      * @param {number} width -
      * @param {number} height -
-     * @returns {og.Extent} -
+     * @returns {Extent} -
      */
     static fromTile(x, y, z, width, height) {
         width = width || mercator.POLE_DOUBLE;
@@ -127,11 +136,13 @@ export class Extent {
      * Sets current bounding extent object by coordinate array.
      * @public
      * @param {Array.<LonLat>} arr - Coordinate array.
-     * @return {og.Extent} Current extent.
+     * @return {Extent} Current extent.
      */
     setByCoordinates(arr) {
-        let lonmin = math.MAX, lonmax = math.MIN,
-            latmin = math.MAX, latmax = math.MIN;
+        let lonmin = math.MAX,
+            lonmax = math.MIN,
+            latmin = math.MAX,
+            latmax = math.MIN;
         for (let i = 0; i < arr.length; i++) {
             const vi = arr[i];
             if (vi.lon < lonmin) lonmin = vi.lon;
@@ -155,8 +166,12 @@ export class Extent {
     isInside(lonlat) {
         const sw = this.southWest,
             ne = this.northEast;
-        return lonlat.lon >= sw.lon && lonlat.lon <= ne.lon &&
-            lonlat.lat >= sw.lat && lonlat.lat <= ne.lat;
+        return (
+            lonlat.lon >= sw.lon &&
+            lonlat.lon <= ne.lon &&
+            lonlat.lat >= sw.lat &&
+            lonlat.lat <= ne.lat
+        );
     }
 
     /**
@@ -168,8 +183,12 @@ export class Extent {
     overlaps(e) {
         const sw = this.southWest,
             ne = this.northEast;
-        return sw.lon <= e.northEast.lon && ne.lon >= e.southWest.lon &&
-            sw.lat <= e.northEast.lat && ne.lat >= e.southWest.lat;
+        return (
+            sw.lon <= e.northEast.lon &&
+            ne.lon >= e.southWest.lon &&
+            sw.lat <= e.northEast.lat &&
+            ne.lat >= e.southWest.lat
+        );
     }
 
     /**
@@ -193,7 +212,7 @@ export class Extent {
     /**
      * Creates clone instance of the current extent.
      * @public
-     * @return {og.Extent} Extent clone.
+     * @return {Extent} Extent clone.
      */
     clone() {
         return new Extent(this.southWest.clone(), this.northEast.clone());
@@ -205,7 +224,8 @@ export class Extent {
      * @return {number} Center coordinate.
      */
     getCenter() {
-        const sw = this.southWest, ne = this.northEast;
+        const sw = this.southWest,
+            ne = this.northEast;
         return new LonLat(sw.lon + (ne.lon - sw.lon) * 0.5, sw.lat + (ne.lat - sw.lat) * 0.5);
     }
 
@@ -261,18 +281,22 @@ export class Extent {
 
     /**
      * Returns extents are equals.
-     * @param {og.Extent} extent - Extent.
+     * @param {Extent} extent - Extent.
      * @returns {boolean} -
      */
     equals(extent) {
-        return this.southWest.lon === extent.southWest.lon && this.southWest.lat === extent.southWest.lat &&
-            this.northEast.lon === extent.northEast.lon && this.northEast.lat === extent.northEast.lat;
+        return (
+            this.southWest.lon === extent.southWest.lon &&
+            this.southWest.lat === extent.southWest.lat &&
+            this.northEast.lon === extent.northEast.lon &&
+            this.northEast.lat === extent.northEast.lat
+        );
     }
 
     /**
      * Converts extent coordinates to mercator projection coordinates.
      * @public
-     * @return {og.Extent} New instance of the current extent.
+     * @return {Extent} New instance of the current extent.
      */
     forwardMercator() {
         return new Extent(this.southWest.forwardMercator(), this.northEast.forwardMercator());
@@ -281,7 +305,7 @@ export class Extent {
     /**
      * Converts extent coordinates from mercator projection to degrees.
      * @public
-     * @return {og.Extent} New instance of the current extent.
+     * @return {Extent} New instance of the current extent.
      */
     inverseMercator() {
         return new Extent(this.southWest.inverseMercator(), this.northEast.inverseMercator());
@@ -290,21 +314,29 @@ export class Extent {
     /**
      * Gets cartesian bounding bounds of the current ellipsoid.
      * @public
-     * @param {og.Ellipsoid} ellipsoid - Ellipsoid.
+     * @param {Ellipsoid} ellipsoid - Ellipsoid.
      * @return {Array.<number>} Cartesian 3d coordinate array. (exactly 6 entries)
      */
     getCartesianBounds(ellipsoid) {
-        let xmin = math.MAX, xmax = math.MIN, ymin = math.MAX,
-            ymax = math.MIN, zmin = math.MAX, zmax = math.MIN;
-
-        const v = [new LonLat(this.southWest.lon, this.southWest.lat),
-        new LonLat(this.southWest.lon, this.northEast.lat),
-        new LonLat(this.northEast.lon, this.northEast.lat),
-        new LonLat(this.northEast.lon, this.southWest.lat)];
+        let xmin = math.MAX,
+            xmax = math.MIN,
+            ymin = math.MAX,
+            ymax = math.MIN,
+            zmin = math.MAX,
+            zmax = math.MIN;
+
+        const v = [
+            new LonLat(this.southWest.lon, this.southWest.lat),
+            new LonLat(this.southWest.lon, this.northEast.lat),
+            new LonLat(this.northEast.lon, this.northEast.lat),
+            new LonLat(this.northEast.lon, this.southWest.lat)
+        ];
 
         for (let i = 0; i < v.length; i++) {
             const coord = ellipsoid.lonLatToCartesian(v[i]);
-            const x = coord.x, y = coord.y, z = coord.z;
+            const x = coord.x,
+                y = coord.y,
+                z = coord.z;
             if (x < xmin) xmin = x;
             if (x > xmax) xmax = x;
             if (y < ymin) ymin = y;
@@ -317,7 +349,16 @@ export class Extent {
     }
 
     toString() {
-        return "[" + this.southWest.lon + ", " + this.southWest.lat + ", " + this.northEast.lon + ", " + this.northEast.lat + "]";
+        return (
+            "[" +
+            this.southWest.lon +
+            ", " +
+            this.southWest.lat +
+            ", " +
+            this.northEast.lon +
+            ", " +
+            this.northEast.lat +
+            "]"
+        );
     }
-
-}
+}

package/src/og/Globe.js

@@ -16,7 +16,7 @@ import { Renderer } from "./renderer/Renderer.js";
 import { Planet } from "./scene/Planet.js";
 import { EmptyTerrain } from "./terrain/EmptyTerrain.js";
 import { isEmpty } from "./utils/shared.js";
-import { Handler } from "./webgl/Handler.js";
+import { Handler } from "./webgl/Handler.js";
 
 /** @const {string} */
 const CANVAS_ID_PREFIX = "globus_viewport_";
@@ -50,20 +50,28 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  *
  * @param {object} options - Options:
  * @param {string} options.target - HTML element id where planet canvas have to be created.
- * @param {og.scene.RenderNode} [options.skybox] - Render skybox. null - default.
+ * @param {RenderNode} [options.skybox] - Render skybox. null - default.
  * @param {string} [options.name] - Planet name. Default is unic identifier.
- * @param {og.terrain.Terrain} [options.terrain] - Terrain provider. Default no terrain - og.terrain.EmptyTerrain.
- * @param {Array.<og.control.Control>} [options.controls] - Renderer controls array.
- * @param {Array.<og.Layer>} [options.layers] - Planet layers.
- * @param {og.Extent} [options.viewExtent] - Viewable starting extent.
+ * @param {Terrain} [options.terrain] - Terrain provider. Default no terrain - og.terrain.EmptyTerrain.
+ * @param {Array.<control.Control>} [options.controls] - Renderer controls array.
+ * @param {Array.<Layer>} [options.layers] - Planet layers.
+ * @param {Extent} [options.viewExtent] - Viewable starting extent.
  * @param {boolean} [options.autoActivate] - Globe rendering auto activation flag. True is default.
  * @param {DOMElement} [options.attributionContainer] - Container for attribution list.
  * @param {Number} [options.maxGridSize] = Maximal segment grid size. 128 is default
  * @param {boolean} [options.useSpecularTexture] - use specular water mask
- * @param {boolean} [options.useNightTexture] - show night cities
+ * @param {boolean} [options.useNightTexture] - show night cities
+ * @param {Number} [options.maxAltitude=15000000.0] - Maximal camera altitude above terrain
+ * @param {Number} [options.minAltitude=1.0] - Minimal camera altitude above terrain
+ * @param {Number} [options.maxEqualZoomAltitude=15000000.0] - Maximal altitude since segments on the screen bacame the same zoom level
+ * @param {Number} [options.minEqualZoomAltitude=10000.0] - Minimal altitude since segments on the screen bacame the same zoom level
+ * @param {Number} [options.minEqualZoomCameraSlope=0.8] - Minimal camera slope above te globe where segments on the screen bacame the same zoom level
  */
 
 class Globe {
+    /**
+     * @param {*} options
+     */
     constructor(options) {
         // Canvas creation
         var _canvasId = CANVAS_ID_PREFIX + Globe._staticCounter++;
@@ -108,10 +116,11 @@ class Globe {
         /**
          * Interface for the renderer context(events, input states, renderer nodes etc.)
          * @public
-         * @type {og.Renderer}
+         * @type {Renderer}
          */
         this.renderer = new Renderer(
-            new Handler(_canvasId, {
+            new Handler(_canvasId, {
+                pixelRatio: window.devicePixelRatio,
                 context: {
                     alpha: false,
                     antialias: false,
@@ -148,7 +157,7 @@ class Globe {
             /**
              * Render node renders a planet.
              * @public
-             * @type {og.scene.Planet|og.scene.PlanetAtmosphere}
+             * @type {Planet|og.scene.PlanetAtmosphere}
              */
             // TODO:
         } else {
@@ -159,7 +168,10 @@ class Globe {
                 useNightTexture: options.useNightTexture,
                 useSpecularTexture: options.useSpecularTexture,
                 minAltitude: options.minAltitude,
-                maxAltitude: options.maxAltitude
+                maxAltitude: options.maxAltitude || 15000000,
+                maxEqualZoomAltitude: options.maxEqualZoomAltitude,
+                minEqualZoomAltitude: options.minEqualZoomAltitude,
+                minEqualZoomCameraSlope: options.minEqualZoomCameraSlope
             });
         }
 
@@ -181,8 +193,8 @@ class Globe {
                 options.useEarthNavigation
                     ? new EarthNavigation()
                     : new MouseNavigation({
-                        minSlope: options.minSlope
-                    }),
+                          minSlope: options.minSlope
+                      }),
                 new TouchNavigation(),
                 new EarthCoordinates(),
                 new ScaleControl(),

package/src/og/ImageCanvas.js

@@ -2,15 +2,17 @@
  * @module og/ImageCanvas
  */
 
-'use strict';
+"use strict";
 
 /**
  * Usefull class for working with JS canvas object.
  * @class
- * @param {number} [width] - Canvas width. Default 256.
- * @param {number} [height] - Canvas height. Default 256.
  */
 class ImageCanvas {
+    /**
+     * @param {number} [width] - Canvas width. Default 256.
+     * @param {number} [height] - Canvas height. Default 256.
+     */
     constructor(width, height) {
         /**
          * Canvas object.
@@ -26,7 +28,7 @@ class ImageCanvas {
          * @protected
          * @type {Object}
          */
-        this._context = this._canvas.getContext('2d');
+        this._context = this._canvas.getContext("2d");
     }
 
     /**
@@ -100,7 +102,7 @@ class ImageCanvas {
     resize(width, height) {
         this._canvas.width = width;
         this._canvas.height = height;
-        this._context = this._canvas.getContext('2d');
+        this._context = this._canvas.getContext("2d");
     }
 
     /**
@@ -113,7 +115,7 @@ class ImageCanvas {
      * @param {number} [height] - Image height slice. Image height is default.
      */
     drawImage(img, x, y, width, height) {
-        this._context = this._canvas.getContext('2d');
+        this._context = this._canvas.getContext("2d");
         this._context.drawImage(img, x || 0, y || 0, width || img.width, height || img.height);
     }
 
@@ -151,8 +153,8 @@ class ImageCanvas {
      * @param {string} [color] - Css font color.
      */
     drawText(text, x, y, font, color) {
-        this._context.fillStyle = color || 'black';
-        this._context.font = font || 'normal 14px Verdana';
+        this._context.fillStyle = color || "black";
+        this._context.font = font || "normal 14px Verdana";
         this._context.fillText(text, x || 0, y || 14);
     }
 
@@ -198,14 +200,18 @@ class ImageCanvas {
     openImage() {
         var img = this.getImage();
         var dataUrl = img.src;
-        var windowContent = '<!DOCTYPE html>';
-        windowContent += '<html>';
-        windowContent += '<head><title>Print</title></head>';
-        windowContent += '<body>';
+        var windowContent = "<!DOCTYPE html>";
+        windowContent += "<html>";
+        windowContent += "<head><title>Print</title></head>";
+        windowContent += "<body>";
         windowContent += '<img src="' + dataUrl + '">';
-        windowContent += '</body>';
-        windowContent += '</html>';
-        var printWin = window.open('', '', 'width=' + img.width + 'px ,height=' + img.height + 'px');
+        windowContent += "</body>";
+        windowContent += "</html>";
+        var printWin = window.open(
+            "",
+            "",
+            "width=" + img.width + "px ,height=" + img.height + "px"
+        );
         printWin.document.open();
         printWin.document.write(windowContent);
         printWin.document.close();
@@ -220,4 +226,4 @@ class ImageCanvas {
     }
 }
 
-export { ImageCanvas };
+export { ImageCanvas };

package/src/og/LonLat.js

@@ -2,9 +2,9 @@
  * @module og/LonLat
  */
 
-'use strict';
+"use strict";
 
-import * as mercator from './mercator.js';
+import * as mercator from "./mercator.js";
 
 const HALF_PI = Math.PI * 0.5;
 const INV_PI_BY_180 = 180.0 / Math.PI;
@@ -20,14 +20,12 @@ const INV_PI_BY_180_HALF_PI = INV_PI_BY_180 * HALF_PI;
  * @param {number} [height] - Height over the surface.
  */
 export class LonLat {
-
     /**
-     * @param {number} [lon] 
-     * @param {number} [lat] 
-     * @param {number} [height] 
+     * @param {number} [lon] - Longitude.
+     * @param {number} [lat] - Latitude.
+     * @param {number} [height] - Height over the surface.
      */
     constructor(lon, lat, height) {
-
         /**
          * Longitude.
          * @public
@@ -88,9 +86,11 @@ export class LonLat {
      * @returns {LonLat} -
      */
     static forwardMercator(lon, lat, height) {
-        return new LonLat(lon * mercator.POLE_BY_180,
+        return new LonLat(
+            lon * mercator.POLE_BY_180,
             Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI,
-            height);
+            height
+        );
     }
 
     /**
@@ -102,9 +102,11 @@ export class LonLat {
      * @returns {LonLat} -
      */
     static inverseMercator(x, y, height) {
-        return new LonLat(x * mercator.INV_POLE_BY_180,
+        return new LonLat(
+            x * mercator.INV_POLE_BY_180,
             INV_PI_BY_360 * Math.atan(Math.exp(y * mercator.PI_BY_POLE)) - INV_PI_BY_180_HALF_PI,
-            height);
+            height
+        );
     }
 
     /**
@@ -162,7 +164,8 @@ export class LonLat {
         }
         return new LonLat(
             this.lon * mercator.POLE_BY_180,
-            Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI);
+            Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI
+        );
     }
 
     /**
@@ -187,4 +190,4 @@ export class LonLat {
             return this.lon === b.lon && this.lat === b.lat;
         }
     }
-}
+}