@openglobus/og 0.11.2 → 0.11.7

package/src/og/control/Control.js

@@ -2,7 +2,7 @@
  * @module og/control/Control
  */
 
-'use strict';
+"use strict";
 
 /**
  * Base control class for implementing renderer controls.
@@ -12,6 +12,9 @@
  * @param {Boolean} [options.autoActivated=true] - If true - calls initialize function after the renderer assigning.
  */
 class Control {
+    /**
+     * @param {Object} [options] - Control activation options:
+     */
     constructor(options) {
         options = options || {};
 
@@ -29,7 +32,7 @@ class Control {
         /**
          * Assigned renderer.
          * @public
-         * @type {og.Renderer}
+         * @type {Renderer}
          */
         this.renderer = null;
 
@@ -73,40 +76,40 @@ class Control {
      * @public
      * @virtual
      */
-    oninit() { }
+    oninit() {}
 
     /**
      * Control renderer assigning function have to be overriden.
      * @public
      * @virtual
      */
-    onadd() { }
+    onadd() {}
 
     /**
      * Control remove function have to be overriden.
      * @public
      * @virtual
      */
-    onremove() { }
+    onremove() {}
 
     /**
      * Control activation function have to be overriden.
      * @public
      * @virtual
      */
-    onactivate() { }
+    onactivate() {}
 
     /**
      * Control deactivation function have to be overriden.
      * @public
      * @virtual
      */
-    ondeactivate() { }
+    ondeactivate() {}
 
     /**
      * Assign renderer to the control.
      * @public
-     * @type {og.Renderer}
+     * @type {Renderer}
      */
     addTo(renderer) {
         if (renderer) {
@@ -126,7 +129,6 @@ class Control {
      * @public
      */
     remove() {
-
         this.onremove && this.onremove();
 
         let r = this.renderer,
@@ -183,4 +185,4 @@ class Control {
     }
 }
 
-export { Control };
+export { Control };

package/src/og/control/DebugInfo.js

@@ -9,10 +9,13 @@ import { Control } from "./Control.js";
 /**
  * Debug information
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Control options.
  */
 class DebugInfo extends Control {
+    /**
+     * @param {Object} [options] - Control options.
+     */
     constructor(options) {
         options = options || {};
         if (!options.name || options.name === "") {

package/src/og/control/EarthCoordinates.js

@@ -2,26 +2,31 @@
  * @module og/control/EarthCoordinates
  */
 
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
+import { Control } from "./Control.js";
 
 function dec2deg(base) {
     var t;
     var degrees = base < 0 ? Math.ceil(base) : Math.floor(base);
-    var minutes = Math.floor(t = Math.abs((base - degrees)) * 60);
+    var minutes = Math.floor((t = Math.abs(base - degrees) * 60));
     var seconds = Math.floor((t - minutes) * 6000);
-    seconds = seconds / 100.00;
-    return (numToFixedString(degrees, 3) + "\u00B0" +
-        numToFixedString(minutes, 2) + "\u0027" +
-        numToFixedString(seconds.toFixed(2), 2) + "\u0022");
+    seconds = seconds / 100.0;
+    return (
+        numToFixedString(degrees, 3) +
+        "\u00B0" +
+        numToFixedString(minutes, 2) +
+        "\u0027" +
+        numToFixedString(seconds.toFixed(2), 2) +
+        "\u0022"
+    );
 }
 
 function numToFixedString(num, fixed) {
-    var dl = num.toString().split('.')[0].length;
+    var dl = num.toString().split(".")[0].length;
     var white = "&nbsp;";
     for (var i = dl; i < fixed; i++) {
-        white += '&nbsp;&nbsp;';
+        white += "&nbsp;&nbsp;";
     }
     return white + num.toString();
 }
@@ -39,21 +44,21 @@ function toMercator(ll) {
     return m.lat.toFixed(5) + ", " + m.lon.toFixed(5);
 }
 
-const DisplayTypesConverters = [
-    toDecimal,
-    toDegrees,
-    toMercator
-];
+const DisplayTypesConverters = [toDecimal, toDegrees, toMercator];
 
 /**
  * Control displays mouse or screen center Earth coordinates.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Options:
  * @param {Boolean} [options.center] - Earth coordiantes by screen center otherwise mouse pointer. False is default.
  * @param {Boolean} [options.type] - Coordinates shown: 0 - is decimal degrees, 1 - degrees, 2 - mercator geodetic coordinates.
  */
 class EarthCoordinates extends Control {
+    /**
+     *
+     * @param {Object} [options] - Options:
+     */
     constructor(options) {
         super(options);
 
@@ -87,27 +92,32 @@ class EarthCoordinates extends Control {
          */
 
         var pad = false;
-        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        if (
+            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                navigator.userAgent
+            )
+        ) {
             pad = true;
         }
 
         this._center = options.center || pad;
 
+        this._centerDiv = null;
+
         /**
          * Current position.
          * @public
-         * @type {og.Vec3}
+         * @type {Vec3}
          */
         this.position = null;
     }
 
     oninit() {
-        this._display = document.createElement('div');
-        this._display.className = 'ogEarthCoordinatesControl';
+        this._display = document.createElement("div");
+        this._display.className = "ogEarthCoordinatesControl";
         var that = this;
 
         function _refresh(el) {
-
             if (that._displayType >= DisplayTypesConverters.length) {
                 that._displayType = 0;
             }
@@ -132,19 +142,19 @@ class EarthCoordinates extends Control {
 
         _refresh(this._display);
 
-        let centerDiv = document.createElement('div');
-        centerDiv.className = 'ogCenterIcon';
-        centerDiv.innerHTML = '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#009DFF"></path></g></svg>';
-        this.renderer.div.appendChild(centerDiv);
+        this._centerDiv = document.createElement("div");
+        this._centerDiv.className = "ogCenterIcon";
+        this._centerDiv.innerHTML =
+            '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#009DFF"></path></g></svg>';
+        this.renderer.div.appendChild(this._centerDiv);
 
         if (this._center) {
             this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-            centerDiv.style.display = "block";
+            this._centerDiv.style.display = "block";
         } else {
             this.renderer.events.on("mousemove", this._onMouseMove, this);
-            centerDiv.style.display = "none";
+            this._centerDiv.style.display = "none";
         }
-
     }
 
     /**
@@ -158,19 +168,28 @@ class EarthCoordinates extends Control {
             if (center) {
                 this.renderer.events.off("mousemove", this._onMouseMove);
                 this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-                centerDiv.style.display = "block";
+                this._centerDiv.style.display = "block";
             } else {
                 this.renderer.events.off("draw", this._draw);
                 this.renderer.events.on("mousemove", this._onMouseMove, this);
-                centerDiv.style.display = "none";
+                this._centerDiv.style.display = "none";
             }
         }
     }
 
     _showPosition() {
         if (this.position) {
-            this.position.height = ((this.position.height > 10000 || this.position.height < -10000) ? 0 : this.position.height);
-            this._display.innerHTML = "Lat/Lon: " + this._converter(this.position) + " h(m): " + (this.position.height > 0 ? "~" + (Math.round(this.position.height) / 1000).toFixed(3) * 1000 : "-");
+            this.position.height =
+                this.position.height > 10000 || this.position.height < -10000
+                    ? 0
+                    : this.position.height;
+            this._display.innerHTML =
+                "Lat/Lon: " +
+                this._converter(this.position) +
+                " h(m): " +
+                (this.position.height > 0
+                    ? "~" + (Math.round(this.position.height) / 1000).toFixed(3) * 1000
+                    : "-");
         } else {
             this._display.innerHTML = "Lat/Lon: " + "_____________________";
         }
@@ -185,9 +204,11 @@ class EarthCoordinates extends Control {
     _onMouseMove() {
         var r = this.renderer;
         var ms = r.events.mouseState;
-        if (!(ms.leftButtonDown || ms.rightButtonDown) &&
+        if (
+            !(ms.leftButtonDown || ms.rightButtonDown) &&
             r.controlsBag.scaleRot <= 0 &&
-            !r.activeCamera._flying) {
+            !r.activeCamera._flying
+        ) {
             this.position = this.planet.getLonLatFromPixelTerrain(ms, true);
             this._showPosition();
         }

package/src/og/control/KeyboardNavigation.js

@@ -2,17 +2,17 @@
  * @module og/control/KeyboardNavigation
  */
 
-'use strict';
+"use strict";
 
-import * as math from '../math.js';
-import { Control } from './Control.js';
-import { input } from '../input/input.js';
-import { Vec3 } from '../math/Vec3.js';
+import * as math from "../math.js";
+import { Control } from "./Control.js";
+import { input } from "../input/input.js";
+import { Vec3 } from "../math/Vec3.js";
 
 /**
  * Planet camera keyboard navigation. Use W,S,A,D and left shift key for fly around a planet.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Control options.
  */
 
@@ -69,7 +69,7 @@ class KeyboardNavigation extends Control {
         if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
             cam.pitch(15 / this.renderer.handler.deltaTime);
         } else {
-            cam.rotateVertical(cam._lonLat.height / 3000000 * math.RADIANS, Vec3.ZERO);
+            cam.rotateVertical((cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
         }
         cam.update();
     }
@@ -79,7 +79,7 @@ class KeyboardNavigation extends Control {
         if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
             cam.pitch(-15 / this.renderer.handler.deltaTime);
         } else {
-            cam.rotateVertical(-cam._lonLat.height / 3000000 * math.RADIANS, Vec3.ZERO);
+            cam.rotateVertical((-cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
         }
         cam.update();
     }
@@ -89,7 +89,7 @@ class KeyboardNavigation extends Control {
         if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
             cam.yaw(15 / this.renderer.handler.deltaTime);
         } else {
-            cam.rotateHorizontal(cam._lonLat.height / 3000000 * math.RADIANS, false, Vec3.ZERO);
+            cam.rotateHorizontal((cam._lonLat.height / 3000000) * math.RADIANS, false, Vec3.ZERO);
         }
         cam.update();
     }
@@ -99,7 +99,7 @@ class KeyboardNavigation extends Control {
         if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
             cam.yaw(-15 / this.renderer.handler.deltaTime);
         } else {
-            cam.rotateHorizontal(-cam._lonLat.height / 3000000 * math.RADIANS, false, Vec3.ZERO);
+            cam.rotateHorizontal((-cam._lonLat.height / 3000000) * math.RADIANS, false, Vec3.ZERO);
         }
         cam.update();
     }

package/src/og/control/LayerSwitcher.js

@@ -2,14 +2,14 @@
  * @module og/control/LayerSwitcher
  */
 
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
+import { Control } from "./Control.js";
 
 /**
  * Simple(OpenLayers like)layer switcher, includes base layers, overlays, geo images etc. groups.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Control options.
  */
 class LayerSwitcher extends Control {
@@ -56,16 +56,16 @@ class LayerSwitcher extends Control {
     }
 
     addSwitcher(type, obj, container, id) {
-        var lineDiv = document.createElement('div');
+        var lineDiv = document.createElement("div");
 
         var that = this;
-        var center = document.createElement('div');
-        center.classList.add('ogViewExtentBtn');
+        var center = document.createElement("div");
+        center.classList.add("ogViewExtentBtn");
         center.onclick = function () {
             that.planet.flyExtent(obj.getExtent());
         };
 
-        var inp = document.createElement('input');
+        var inp = document.createElement("input");
         inp.type = type;
         inp.name = "ogBaseLayerRadiosId" + (id || "");
         inp.checked = obj.getVisibility();
@@ -74,11 +74,12 @@ class LayerSwitcher extends Control {
             obj.setVisibility(this.checked);
         };
 
-        obj.events && obj.events.on("visibilitychange", function (e) {
-            inp.checked = e.getVisibility();
-        });
+        obj.events &&
+            obj.events.on("visibilitychange", function (e) {
+                inp.checked = e.getVisibility();
+            });
 
-        var lbl = document.createElement('label');
+        var lbl = document.createElement("label");
         lbl.className = "ogLayerSwitcherLabel";
         lbl.innerHTML = (obj.name || obj.src || "noname") + "</br>";
 
@@ -94,35 +95,35 @@ class LayerSwitcher extends Control {
     }
 
     createBaseLayersContainer() {
-        var layersDiv = document.createElement('div');
+        var layersDiv = document.createElement("div");
         layersDiv.className = "layersDiv";
         this.dialog.appendChild(layersDiv);
 
-        var baseLayersLbl = document.createElement('div');
+        var baseLayersLbl = document.createElement("div");
         baseLayersLbl.className = "layersDiv";
         baseLayersLbl.innerHTML = "Base Layer";
         layersDiv.appendChild(baseLayersLbl);
 
-        this.baseLayersDiv = document.createElement('div');
+        this.baseLayersDiv = document.createElement("div");
         layersDiv.appendChild(this.baseLayersDiv);
     }
 
     createOverlaysContainer() {
-        var overlaysDiv = document.createElement('div');
+        var overlaysDiv = document.createElement("div");
         overlaysDiv.className = "layersDiv";
         this.dialog.appendChild(overlaysDiv);
 
-        var overlaysLbl = document.createElement('div');
+        var overlaysLbl = document.createElement("div");
         overlaysLbl.className = "layersDiv";
         overlaysLbl.innerHTML = "Overlays";
         overlaysDiv.appendChild(overlaysLbl);
 
-        this.overlaysDiv = document.createElement('div');
+        this.overlaysDiv = document.createElement("div");
         overlaysDiv.appendChild(this.overlaysDiv);
     }
 
     createDialog() {
-        this.dialog = document.createElement('div');
+        this.dialog = document.createElement("div");
         this.dialog.id = "ogLayerSwitcherDialog";
         this.dialog.className = "displayNone";
         this.renderer.div.appendChild(this.dialog);
@@ -138,8 +139,8 @@ class LayerSwitcher extends Control {
     }
 
     createSwitcher() {
-        var button = document.createElement('div');
-        button.className = 'ogLayerSwitcherButton';
+        var button = document.createElement("div");
+        button.className = "ogLayerSwitcherButton";
         button.id = "ogLayerSwitcherButtonMaximize";
         var that = this;
         button.onclick = function (e) {
@@ -155,4 +156,4 @@ class LayerSwitcher extends Control {
     }
 }
 
-export { LayerSwitcher };
+export { LayerSwitcher };

package/src/og/control/Lighting.js

@@ -10,6 +10,11 @@ import { parseHTML } from "../utils/shared.js";
 const TEMPLATE = `<div class="og-lighing">
 
        <div class="og-screen-options">
+
+         <div class="og-option">
+          <div class="og-caption">Lighting enabled<input type="checkbox" id="lighting" name="light"/></div>
+         </div>
+
          <div class="og-option">
             <div class="og-caption">Gamma</div>
             <div class="og-slider">
@@ -32,6 +37,14 @@ const TEMPLATE = `<div class="og-lighing">
        </div>
       
        <div class="og-color-options">
+         <div class="og-caption">Opacity</div>
+         <div class="og-option">
+            <div class="og-label">A</div>
+            <div class="og-slider">
+                <input type="range" id="opacity" name="opacity" value="0.0" min="0.0" max="2.0" step="0.01" />
+            </div>
+            <div class="og-value opacity"></div>
+         </div>
          <div class="og-caption">Ambient</div>
          <div class="og-option">
             <div class="og-label">R</div>
@@ -115,7 +128,7 @@ const TEMPLATE = `<div class="og-lighing">
 /**
  * Helps to setup lighting.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] -
  */
 class Lighting extends Control {
@@ -128,6 +141,8 @@ class Lighting extends Control {
     bindLayer(layer) {
         this._selectedLayer = layer;
 
+        document.getElementById("opacity").value = layer.opacity;
+
         document.getElementById("ambient-r").value = layer.ambient.x;
         document.getElementById("ambient-g").value = layer.ambient.y;
         document.getElementById("ambient-b").value = layer.ambient.z;
@@ -142,6 +157,8 @@ class Lighting extends Control {
 
         document.getElementById("shininess").value = layer.shininess;
 
+        document.querySelector(".og-value.opacity").innerHTML = layer.opacity.toString();
+
         document.querySelector(".og-value.ambient-r").innerHTML = layer.ambient.x.toString();
         document.querySelector(".og-value.ambient-g").innerHTML = layer.ambient.y.toString();
         document.querySelector(".og-value.ambient-b").innerHTML = layer.ambient.z.toString();
@@ -163,8 +180,15 @@ class Lighting extends Control {
 
         var _this = this;
 
+        document.getElementById("lighting").checked = this.planet.lightEnabled;
+
+        document.getElementById("lighting").addEventListener("change", (e) => {
+            _this.planet.lightEnabled = e.target.checked;
+        });
+
         document.getElementById("layers").addEventListener("change", (e) => {
-            this._selectedLayer = _this.planet.getLayerByName(e.target.value);
+            //this._selectedLayer = _this.planet.getLayerByName(e.target.value);
+            this.bindLayer(_this.planet.getLayerByName(e.target.value));
         });
 
         document.getElementById("gamma").addEventListener("input", function (e) {
@@ -183,6 +207,13 @@ class Lighting extends Control {
         document.getElementById("gamma").value = this.planet.renderer.gamma;
         document.getElementById("exposure").value = this.planet.renderer.exposure;
 
+        document.getElementById("opacity").addEventListener("input", function (e) {
+            if (_this._selectedLayer) {
+                _this._selectedLayer.opacity = Number(this.value);
+            }
+            document.querySelector(".og-value.opacity").innerHTML = this.value;
+        });
+
         document.getElementById("ambient-r").addEventListener("input", function (e) {
             if (_this._selectedLayer) {
                 _this._selectedLayer.ambient.x = Number(this.value);
@@ -272,7 +303,7 @@ class Lighting extends Control {
         document.getElementById("layers").value = e.name;
     }
 
-    _onLayerRemove(e) {}
+    _onLayerRemove(e) { }
 }
 
 export function lighting(options) {

package/src/og/control/MouseNavigation.js

@@ -18,7 +18,7 @@ import { Vec3 } from "../math/Vec3.js";
 /**
  * Mouse planet camera dragging control.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Control options.
  */
 class MouseNavigation extends Control {

package/src/og/control/ScaleControl.js

@@ -21,7 +21,7 @@ const TEMPLATE = `<div class="og-scale-container">
 /**
  * Planet zoom buttons control.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @params {Object} [options] - Control options.
  */
 class ScaleControl extends Control {

package/src/og/control/SegmentBoundVisualization.js

@@ -1,13 +1,13 @@
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
-import { EntityCollection } from '../entity/EntityCollection.js';
-import { Entity } from '../entity/Entity.js';
+import { Control } from "./Control.js";
+import { EntityCollection } from "../entity/EntityCollection.js";
+import { Entity } from "../entity/Entity.js";
 
 /**
  * Frame per second(FPS) display control.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Control options.
  */
 class SegmentBoundVisualization extends Control {
@@ -18,7 +18,6 @@ class SegmentBoundVisualization extends Control {
     }
 
     oninit() {
-
         this.planet.addEntityCollection(this._boundingSphereCollection);
 
         this.renderer.events.on("draw", this._predraw, this);
@@ -28,7 +27,7 @@ class SegmentBoundVisualization extends Control {
     _predraw() {
         this._boundingSphereCollection.clear();
     }
-    
+
     _draw() {
         for (let i = 0; i < this.planet._renderedNodes.length; i++) {
             let si = this.planet._renderedNodes[i].segment;

package/src/og/control/ShowFps.js

@@ -2,15 +2,15 @@
  * @module og/control/ShowFps
  */
 
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
-import { print2d } from '../utils/shared.js';
+import { Control } from "./Control.js";
+import { print2d } from "../utils/shared.js";
 
 /**
  * Frame per second(FPS) display control.
  * @class
- * @extends {og.control.Control}
+ * @extends {Control}
  * @param {Object} [options] - Control options.
  */
 class ShowFps extends Control {
@@ -19,15 +19,20 @@ class ShowFps extends Control {
     }
 
     oninit() {
-        var d = document.createElement('div');
-        d.className = 'defaultText ';
+        var d = document.createElement("div");
+        d.className = "defaultText ";
         d.id = "ogShowFpsControl";
         document.body.appendChild(d);
         this.renderer.events.on("draw", this._draw, this);
     }
-    
+
     _draw() {
-        print2d("ogShowFpsControl", (1000.0 / this.renderer.handler.deltaTime).toFixed(1), this.renderer.handler.canvas.clientWidth - 60, 0);
+        print2d(
+            "ogShowFpsControl",
+            (1000.0 / this.renderer.handler.deltaTime).toFixed(1),
+            this.renderer.handler.canvas.clientWidth - 60,
+            0
+        );
     }
 }