@openglobus/og 0.11.1 → 0.11.6

package/src/og/Globe.js

@@ -4,21 +4,19 @@
 
 "use strict";
 
-import { EmptyTerrain } from "./terrain/EmptyTerrain.js";
-import { Handler } from "./webgl/Handler.js";
-import { Planet } from "./scene/Planet.js";
-import { Renderer } from "./renderer/Renderer.js";
-import { wgs84 } from "./ellipsoid/wgs84.js";
-import { isEmpty } from "./utils/shared.js";
-
+import { CompassButton } from "./control/CompassButton.js";
 import { EarthCoordinates } from "./control/EarthCoordinates.js";
-import { MouseNavigation } from "./control/MouseNavigation.js";
 import { EarthNavigation } from "./control/EarthNavigation.js";
-import { TouchNavigation } from "./control/TouchNavigation.js";
+import { MouseNavigation } from "./control/MouseNavigation.js";
+import { ScaleControl } from "./control/ScaleControl.js";
 import { Sun } from "./control/Sun.js";
+import { TouchNavigation } from "./control/TouchNavigation.js";
 import { ZoomControl } from "./control/ZoomControl.js";
-import { ScaleControl } from "./control/ScaleControl.js";
-import { CompassButton } from "./control/CompassButton.js";
+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";
 
 /** @const {string} */
 const CANVAS_ID_PREFIX = "globus_viewport_";
@@ -52,19 +50,26 @@ 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 {Number} [options.maxEqualZoomAltitude=850000.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++;
@@ -82,8 +87,13 @@ class Globe {
          * @public
          * @type {Element}
          */
-        this.div =
-            document.getElementById(options.target) || document.querySelector(options.target);
+        if (options.target instanceof HTMLElement) {
+            this.div = options.target;
+        } else {
+            this.div =
+                document.getElementById(options.target) || document.querySelector(options.target);
+        }
+
         this.div.appendChild(this._canvas);
         this.div.classList.add("ogViewport");
 
@@ -104,7 +114,7 @@ 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, {
@@ -144,7 +154,7 @@ class Globe {
             /**
              * Render node renders a planet.
              * @public
-             * @type {og.scene.Planet|og.scene.PlanetAtmosphere}
+             * @type {Planet|og.scene.PlanetAtmosphere}
              */
             // TODO:
         } else {
@@ -155,7 +165,10 @@ class Globe {
                 useNightTexture: options.useNightTexture,
                 useSpecularTexture: options.useSpecularTexture,
                 minAltitude: options.minAltitude,
-                maxAltitude: options.maxAltitude
+                maxAltitude: options.maxAltitude,
+                maxEqualZoomAltitude: options.maxEqualZoomAltitude,
+                minEqualZoomAltitude: options.minEqualZoomAltitude,
+                minEqualZoomCameraSlope: options.minEqualZoomCameraSlope
             });
         }
 
@@ -182,7 +195,7 @@ class Globe {
                 new TouchNavigation(),
                 new EarthCoordinates(),
                 new ScaleControl(),
-                new CompassButton()
+                new CompassButton(options)
             ]);
         }
 

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");
     }
 
     /**
@@ -78,7 +80,7 @@ class ImageCanvas {
     fillColor(color) {
         this._context.fillStyle = color;
         this._context.fillRect(0, 0, this._canvas.width, this._canvas.height);
-    };
+    }
 
     /**
      * Sets RGBA pixel data.
@@ -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();
@@ -218,6 +224,6 @@ class ImageCanvas {
         this._canvas = null;
         this._context = null;
     }
-};
+}
 
-export { ImageCanvas };
+export { ImageCanvas };

package/src/og/Lock.js

@@ -25,7 +25,7 @@ class Lock {
     isLocked() {
         return this._lock !== 0;
     }
-};
+}
 
 class Key {
 
@@ -43,6 +43,6 @@ class Key {
     constructor() {
         this._id = Key._staticCounter++;
     }
-};
+}
 
 export { Lock, Key };

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
@@ -48,17 +46,17 @@ export class LonLat {
          * @type {number}
          */
         this.height = height || 0;
-    };
+    }
 
     isZero() {
         return this.lon === 0.0 && this.lat === 0.0 && this.height === 0.0;
-    };
+    }
 
     /**
      * Creates coordinates array.
      * @static
      * @param{Array.<Array<number>>} arr - Coordinates array data. (exactly 3 entries)
-     * @return{Array.<og.LonLat>} the same coordinates array but each element is LonLat instance.
+     * @return{Array.<LonLat>} the same coordinates array but each element is LonLat instance.
      */
     static join(arr) {
         var res = [];
@@ -67,17 +65,17 @@ export class LonLat {
             res[i] = new LonLat(ai[0], ai[1], ai[2]);
         }
         return res;
-    };
+    }
 
     /**
      * Creates an object by coordinate array.
      * @static
      * @param {Array.<number>} arr - Coordiante array, where first is longitude, second is latitude and third is a height. (exactly 3 entries)
-     * @returns {og.LonLat} -
+     * @returns {LonLat} -
      */
     static createFromArray(arr) {
         return new LonLat(arr[0], arr[1], arr[2]);
-    };
+    }
 
     /**
      * Converts degrees to mercator coordinates.
@@ -85,13 +83,15 @@ export class LonLat {
      * @param {number} lon - Degrees longitude.
      * @param {number} lat - Degrees latitude.
      * @param {number} [height] - Height.
-     * @returns {og.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
+        );
+    }
 
     /**
      * Converts mercator to degrees coordinates.
@@ -99,13 +99,15 @@ export class LonLat {
      * @param {number} x - Mercator longitude.
      * @param {number} y - Mercator latitude.
      * @param {number} [height] - Height.
-     * @returns {og.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
+        );
+    }
 
     /**
      * Sets coordinates.
@@ -113,45 +115,45 @@ export class LonLat {
      * @param {number} [lon] - Longitude.
      * @param {number} [lat] - Latitude.
      * @param {number} [height] - Height.
-     * @returns {og.LonLat} -
+     * @returns {LonLat} -
      */
     set(lon, lat, height) {
         this.lon = lon || 0;
         this.lat = lat || 0;
         this.height = height || 0;
         return this;
-    };
+    }
 
     /**
      * Copy coordinates.
      * @public
-     * @param {og.LonLat} [lonLat] - Coordinates to copy.
-     * @returns {og.LonLat} -
+     * @param {LonLat} [lonLat] - Coordinates to copy.
+     * @returns {LonLat} -
      */
     copy(lonLat) {
         this.lon = lonLat.lon;
         this.lat = lonLat.lat;
         this.height = lonLat.height;
         return this;
-    };
+    }
 
     /**
      * Clone the coordiante.
      * @public
-     * @returns {og.LonLat} -
+     * @returns {LonLat} -
      */
     clone() {
         return new LonLat(this.lon, this.lat, this.height);
-    };
+    }
 
     /**
      * Converts to mercator coordinates.
      * @public
-     * @returns {og.LonLat} -
+     * @returns {LonLat} -
      */
     forwardMercator() {
         return LonLat.forwardMercator(this.lon, this.lat, this.height);
-    };
+    }
 
     forwardMercatorEPS01() {
         var lat = this.lat;
@@ -162,22 +164,23 @@ 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
+        );
+    }
 
     /**
      * Converts from mercator coordinates.
      * @public
-     * @returns {og.LonLat} -
+     * @returns {LonLat} -
      */
     inverseMercator() {
         return LonLat.inverseMercator(this.lon, this.lat, this.height);
-    };
+    }
 
     /**
      * Compares coordinates.
      * @public
-     * @param {og.LonLat} b - Coordinate to compare with.
+     * @param {LonLat} b - Coordinate to compare with.
      * @returns {boolean} -
      */
     equal(b) {
@@ -186,5 +189,5 @@ export class LonLat {
         } else {
             return this.lon === b.lon && this.lat === b.lat;
         }
-    };
-}
+    }
+}

package/src/og/Popup.js

@@ -1,11 +1,10 @@
-'use strict';
+"use strict";
 
-import { Events } from './Events.js';
-import { Vec3 } from './math/Vec3.js';
-import { getHTML, parseHTML, createLonLat } from './utils/shared.js';
+import { Events } from "./Events.js";
+import { Vec3 } from "./math/Vec3.js";
+import { getHTML, parseHTML, createLonLat } from "./utils/shared.js";
 
-const TEMPLATE =
-    `<div class="og-popup {className}">
+const TEMPLATE = `<div class="og-popup {className}">
       <div class="og-popup-content-wrapper">
         <div class="og-popup-content"></div>
       </div>
@@ -20,8 +19,11 @@ const TEMPLATE =
     </div>`;
 
 class Popup {
+    /**
+     *
+     * @param {*} options
+     */
     constructor(options) {
-
         this._id = Popup._staticCounter++;
 
         this.events = new Events(["open", "close"]);
@@ -72,7 +74,12 @@ class Popup {
 
     setScreen(p) {
         if (this._planet) {
-            this.el.style.transform = "translate(" + (p.x - this.clientWidth * 0.5) + "px, " + (p.y - this._planet.renderer.handler.canvas.height - this._tipEl.clientHeight) + "px)"
+            this.el.style.transform =
+                "translate(" +
+                (p.x - this.clientWidth * 0.5) +
+                "px, " +
+                (p.y - this._planet.renderer.handler.canvas.height - this._tipEl.clientHeight) +
+                "px)";
         }
     }
 
@@ -97,14 +104,14 @@ class Popup {
     render(params) {
         this.el = this._renderTemplate(params);
         this._contentEl = this.el.querySelector(".og-popup-content");
-        this._titleEl = this.el.querySelector(".og-popup-title")
-        this._tipEl = this.el.querySelector(".og-popup-tip-container")
+        this._titleEl = this.el.querySelector(".og-popup-title");
+        this._tipEl = this.el.querySelector(".og-popup-tip-container");
         this.setOffset(this._offset[0], this._offset[1]);
         this.setContent(this._content);
         this.setTitle(this._title);
         this.setLonLat(this._lonLat);
         this.setVisibility(this._visibility);
-        this.el.querySelector(".og-popup-close").addEventListener("click", (e) => {
+        this.el.querySelector(".og-popup-close").addEventListener("click", () => {
             this.hide();
         });
         return this;
@@ -148,7 +155,6 @@ class Popup {
     }
 
     setCartesian3v(cart, height = 0) {
-
         this._cartPos = cart;
 
         if (this._planet) {
@@ -187,10 +193,10 @@ class Popup {
         if (content) {
             this.clear();
             this._content = content;
-            if (typeof content === 'string') {
+            if (typeof content === "string") {
                 this._contentEl.innerHTML = content;
             } else {
-                this._contentEl.appendChild(content)
+                this._contentEl.appendChild(content);
             }
         }
         return this;
@@ -202,4 +208,4 @@ class Popup {
     }
 }
 
-export { Popup };
+export { Popup };

package/src/og/QueueArray.js

@@ -1,6 +1,10 @@
-'use strict';
+"use strict";
 
 class QueueArray {
+    /**
+     *
+     * @param {number} [size]
+     */
     constructor(size) {
         this._size = size || 2048;
         this._array = new Array(this._size);
@@ -66,6 +70,6 @@ class QueueArray {
             callback(this._array[i]);
         }
     }
-};
+}
 
-export { QueueArray };
+export { QueueArray };

package/src/og/Rectangle.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 /**
  * 2D Rectangle class.
@@ -7,10 +7,15 @@
  * @param {number} [top] - Top coordinate. 0 - default.
  * @param {number} [right] - Right coordinate. 0 - default.
  * @param {number} [bottom] - Bottom coordinate. 0 - default.
-*/
+ */
 class Rectangle {
+    /**
+     * @param {number} [left] - Left coordinate. 0 - default.
+     * @param {number} [top] - Top coordinate. 0 - default.
+     * @param {number} [right] - Right coordinate. 0 - default.
+     * @param {number} [bottom] - Bottom coordinate. 0 - default.
+     */
     constructor(left, top, right, bottom) {
-
         /**
          * Left coordinate.
          * @public
@@ -43,7 +48,7 @@ class Rectangle {
     /**
      * Clone rectangle object.
      * @public
-     * @returns {og.Rectangle}
+     * @returns {Rectangle}
      */
     clone() {
         return new Rectangle(this.left, this.top, this.right, this.bottom);
@@ -95,7 +100,7 @@ class Rectangle {
      * @type {boolean}
      */
     fit(width, height) {
-        return (this.getWidth() == width && this.getHeight() == height);
+        return this.getWidth() == width && this.getHeight() == height;
     }
 
     isInside(x, y) {
@@ -103,4 +108,4 @@ class Rectangle {
     }
 }
 
-export { Rectangle };
+export { Rectangle };

package/src/og/Stack.js

@@ -2,7 +2,7 @@
  * @module og/Stack
  */
 
-'use strict';
+"use strict";
 
 class Node {
     constructor() {
@@ -10,11 +10,14 @@ class Node {
         this.prev = null;
         this.data = null;
     }
-};
+}
 
 class Stack {
+    /**
+     *
+     * @param {number} [size]
+     */
     constructor(size = 256) {
-
         this._current = new Node();
         this._head = this._current;
 
@@ -34,7 +37,7 @@ class Stack {
     push(data) {
         this._current = this._current.next;
         this._current.data = data;
-    };
+    }
 
     pop(data) {
         this._current = this._current.prev;
@@ -45,6 +48,6 @@ class Stack {
         this._current = this._current.prev;
         return this._current.data;
     }
-};
+}
 
 export { Stack };