@openglobus/og 0.11.5 → 0.12.0

package/css/og.css

@@ -50,7 +50,7 @@
     height: 19px;
     position: absolute;
     background-color: rgba(22, 76, 155, 1) !important;
-    z-index: 12000;
+    z-index: 35000;
 }
 
 .ogAttribution {
@@ -153,7 +153,7 @@
     right: 0px;
     width: 17em;
     background-color: rgba(22, 76, 155, 0.4);
-    z-index: 5000;
+    z-index: 25000;
     padding: 0 0 0 10px;
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
     border-radius: 2px;
@@ -261,6 +261,8 @@
     text-shadow: 0px 0px 3px #616161;
     padding: 10px;
     pointer-events: none;
+    transform: scale(1.0);
+    transform-origin: top left;
 }
 
     .og-debug-info .og-watch-line {
@@ -448,6 +450,7 @@
 
     .og-lighing .og-value {
         float: left;
+	width: 50px;
     }
 
     .og-lighing #layers {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "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,9 +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",
-    "compile_js_as_ts": "tsc src/og/index.js --AllowJs --checkJs --outDir dist/@openglobus/src/",
-    "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",
@@ -44,25 +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",
-    "@types/jest": "^27.0.2",
-    "eslint": "^8.1.0",
-    "husky": "^7.0.4",
+    "@types/jest": "^27.0.3",
+    "eslint": "^8.3.0",
     "jaguarjs-jsdoc": "^1.1.0",
     "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.6",
+    "lint-staged": "^12.1.2",
     "local-web-server": "^5.1.1",
     "msdf-bmfont-xml": "^2.5.4",
-    "postcss": "^8.3.11",
-    "prettier": "^2.4.1",
-    "rollup": "^2.58.3",
-    "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,10 +2,10 @@
  * @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.
@@ -17,7 +17,6 @@ import * as jd from './astro/jd.js';
  * @param {number} [params.multiplier=1.0] - Time speed multiolier.
  */
 class Clock {
-
     static get _staticCounter() {
         if (!this._counter && this._counter !== 0) {
             this._counter = 0;
@@ -30,7 +29,7 @@ class Clock {
     }
 
     /**
-     * 
+     *
      * @param {Object} [params] - Clock parameters:
      */
     constructor(params) {
@@ -50,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.
@@ -195,4 +191,4 @@ class Clock {
     }
 }
 
-export { Clock };
+export { Clock };

package/src/og/Events.js

@@ -2,20 +2,19 @@
  * @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
  */
 class Events {
-
     /**
-     * 
+     *
      * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
-     * @param {*} [sender] 
+     * @param {*} [sender]
      */
     constructor(eventNames, sender) {
         /**
@@ -80,7 +79,6 @@ class Events {
      * @return {boolean} -
      */
     _stamp(name, obj) {
-
         var ogid = stamp(obj);
 
         var st = this._getStamp(name, this.__id, ogid);
@@ -187,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,19 +34,25 @@ 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.
@@ -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;
@@ -85,8 +92,10 @@ export class Extent {
      * @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];
@@ -130,8 +139,10 @@ export class 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
+        );
     }
 
     /**
@@ -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);
     }
 
@@ -265,8 +285,12 @@ export class 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
+        );
     }
 
     /**
@@ -294,17 +318,25 @@ export class Extent {
      * @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_";
@@ -60,10 +60,13 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @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 {Number} [options.maxEqualZoomAltitude=850000.0] - Maximal altitude since segments on the screen bacame the same zoom level
+ * @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
+ * @param {Number} [options.loadingBatchSize=12] - 
  */
 
 class Globe {
@@ -95,7 +98,16 @@ class Globe {
         }
 
         this.div.appendChild(this._canvas);
-        this.div.classList.add("ogViewport");
+        this.div.classList.add("ogViewport");
+
+        document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === 'visible') {
+                this.renderer.handler.start();
+                this.renderer && this.renderer.resize();
+            } else {
+                this.renderer.handler.stop();
+            }
+        });
 
         function _disableWheel(e) {
             e.preventDefault();
@@ -117,7 +129,8 @@ class Globe {
          * @type {Renderer}
          */
         this.renderer = new Renderer(
-            new Handler(_canvasId, {
+            new Handler(_canvasId, {
+                pixelRatio: window.devicePixelRatio + 0.15,
                 context: {
                     alpha: false,
                     antialias: false,
@@ -159,16 +172,18 @@ class Globe {
             // TODO:
         } else {
             this.planet = new Planet({
-                name: this._planetName,
+                name: this._planetName,
+                frustums: options.frustums,
                 ellipsoid: options.ellipsoid,
                 maxGridSize: options.maxGridSize,
                 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
+                minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
+                loadingBatchSize: options.loadingBatchSize
             });
         }
 
@@ -190,8 +205,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,14 +2,13 @@
  * @module og/ImageCanvas
  */
 
-'use strict';
+"use strict";
 
 /**
  * Usefull class for working with JS canvas object.
  * @class
  */
 class ImageCanvas {
-    
     /**
      * @param {number} [width] - Canvas width. Default 256.
      * @param {number} [height] - Canvas height. Default 256.
@@ -29,7 +28,7 @@ class ImageCanvas {
          * @protected
          * @type {Object}
          */
-        this._context = this._canvas.getContext('2d');
+        this._context = this._canvas.getContext("2d");
     }
 
     /**
@@ -103,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");
     }
 
     /**
@@ -116,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);
     }
 
@@ -154,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);
     }
 
@@ -201,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();
@@ -223,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] - 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;
         }
     }
-}
+}