@openglobus/og 0.13.5 → 0.13.8

package/src/og/control/DebugInfo.js

@@ -79,13 +79,16 @@ class DebugInfo extends Control {
                     label: "maxZoom/minZoom",
                     frame: () => p.maxCurrZoom + " / " + p.minCurrZoom
                 },
+                {
+                    label: "viewExtent",
+                    frame: () => p.getViewExtent().toString()
+                },
                 {
                     label: "height/alt (km)",
                     frame: () =>
-                        `<div style="width:190px">${
-                            (p.camera._lonLat.height / 1000.0).toFixed(2) +
-                            " / " +
-                            (p.camera.getAltitude() / 1000.0).toFixed(2)
+                        `<div style="width:190px">${(p.camera._lonLat.height / 1000.0).toFixed(2) +
+                        " / " +
+                        (p.camera.getAltitude() / 1000.0).toFixed(2)
                         }</div>`
                 },
                 {
@@ -108,6 +111,14 @@ class DebugInfo extends Control {
                 {
                     label: "-------------------------"
                 },
+                {
+                    label: "_renderCompleted / renderCompletedActivated",
+                    frame: () => `${p._renderCompleted} / ${p._renderCompletedActivated}`
+                },
+                {
+                    label: "_terrainCompleted / terrainCompletedActivated",
+                    frame: () => `${p._terrainCompleted} / ${p._terrainCompletedActivated}`
+                },
                 {
                     label: "PlainWorker",
                     frame: () => p._plainSegmentWorker._pendingQueue.length

package/src/og/control/EarthCoordinates.js

@@ -1,64 +1,36 @@
-/**
- * @module og/control/EarthCoordinates
- */
+'use strict';
 
-"use strict";
-
-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 seconds = Math.floor((t - minutes) * 6000);
-    seconds = seconds / 100.0;
-    return (
-        numToFixedString(degrees, 3) +
-        "\u00B0" +
-        numToFixedString(minutes, 2) +
-        "\u0027" +
-        numToFixedString(seconds.toFixed(2), 2) +
-        "\u0022"
-    );
-}
+import * as units from '../utils/units.js';
+import { heightMode } from '../utils/units.js';
+import { Control } from './Control.js';
+import { throttle } from '../utils/shared.js';
+import { LonLat } from '../LonLat.js';
 
-function numToFixedString(num, fixed) {
-    var dl = num.toString().split(".")[0].length;
-    var white = "&nbsp;";
-    for (var i = dl; i < fixed; i++) {
-        white += "&nbsp;&nbsp;";
-    }
-    return white + num.toString();
-}
+const DECIMAL_TEMPLATE =
+    `<div class="og-lat-side"></div><div class="og-lat-val"></div>
+    <div class="og-lon-side"></div><div class="og-lon-val"></div>
+    <div class="og-height"></div>
+    <div class="og-units-height"></div>`;
 
-function toDecimal(ll) {
-    return ll.lat.toFixed(5) + ", " + ll.lon.toFixed(5);
-}
+const DEGREE_TEMPLATE =
+    `<div class="og-lat-side"></div><div class="og-lat-val"></div>
+    <div class="og-lon-side"></div><div class="og-lon-val"></div>
+    <div class="og-height"></div>
+    <div class="og-units-height"></div>`;
 
-function toDegrees(ll) {
-    return dec2deg(ll.lat) + ", " + dec2deg(ll.lon);
-}
+const CENTER_SVG = '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#337ab7"></path></g></svg>';
 
-function toMercator(ll) {
-    var m = ll.forwardMercator();
-    return m.lat.toFixed(5) + ", " + m.lon.toFixed(5);
-}
-
-const DisplayTypesConverters = [toDecimal, toDegrees, toMercator];
+const TYPE_HTML = [DECIMAL_TEMPLATE, DEGREE_TEMPLATE];
 
 /**
  * Control displays mouse or screen center Earth coordinates.
  * @class
- * @extends {Control}
+ * @extends {og.control.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);
 
@@ -69,154 +41,173 @@ class EarthCoordinates extends Control {
          * @private
          * @type {Boolean}
          */
-        this._displayType = options.type || 0;
+        this._type = options.type || 0;
 
-        /**
-         * Current coordinates type converter.
-         * @private
-         * @function
-         */
-        this._converter = DisplayTypesConverters[0];
+        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
 
-        /**
-         * Display dom element.
-         * @private
-         * @type {Object}
-         */
-        this._display = null;
+        this._showFn = null;
 
         /**
-         * Screen center or mouse pointer coordinates show flag.
-         * @private
-         * @type {Boolean}
+         * Current position.
+         * @public
+         * @type {og.Vec3}
          */
+        this._lonLat = new LonLat();
 
-        var pad = false;
-        if (
-            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-                navigator.userAgent
-            )
-        ) {
-            pad = true;
-        }
+        this._latSideEl = null;
+        this._lonSideEl = null;
+        this._latValEl = null;
+        this._lonValEl = null;
+        this._heightEl = null;
 
-        this._center = options.center || pad;
+        this._altUnitVal = options.altitudeUnit || "m";
+        this._heightModeVal = options.heightMode || "ell";
 
-        this._centerDiv = null;
+        this._altUnit = units[this._altUnitVal];
+        this._heightMode = heightMode[this._heightModeVal];
 
-        /**
-         * Current position.
-         * @public
-         * @type {Vec3}
-         */
-        this.position = null;
+        this._centerMode = options.centerMode || false;
     }
 
-    oninit() {
-        this._display = document.createElement("div");
-        this._display.className = "ogEarthCoordinatesControl";
-        var that = this;
+    _SHOW_DECIMAL(ll) {
+        if (ll) {
+            let lat = ll.lat,
+                lon = ll.lon;
 
-        function _refresh(el) {
-            if (that._displayType >= DisplayTypesConverters.length) {
-                that._displayType = 0;
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            } else {
+                this._latSideEl.innerHTML = 'S';
             }
 
-            if (that._displayType == 0) {
-                el.style.width = "275px";
-            } else if (that._displayType == 1) {
-                el.style.width = "355px";
-            } else if (that._displayType == 2) {
-                el.style.width = "350px";
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            } else {
+                this._lonSideEl.innerHTML = 'W';
             }
-            that._converter = DisplayTypesConverters[that._displayType];
-            that._showPosition();
+
+            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
+            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
         }
+    }
 
-        this._display.onclick = function (e) {
-            that._displayType += 1;
-            _refresh(this);
-        };
+    _SHOW_DEGREE(ll) {
+        if (ll) {
+            let lat = ll.lat,
+                lon = ll.lon;
 
-        this.renderer.div.appendChild(this._display);
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            } else {
+                this._latSideEl.innerHTML = 'S';
+            }
+
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            } else {
+                this._lonSideEl.innerHTML = 'W';
+            }
 
-        _refresh(this._display);
+            let t = 0;
 
-        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);
+            let deg = lat < 0 ? Math.ceil(lat) : Math.floor(lat);
+            let min = Math.floor(t = Math.abs((lat - deg)) * 60);
+            let sec = Math.floor((t - min) * 6000) / 100.0;
+            this._latValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
 
-        if (this._center) {
-            this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-            this._centerDiv.style.display = "block";
-        } else {
-            this.renderer.events.on("mousemove", this._onMouseMove, this);
-            this._centerDiv.style.display = "none";
+            deg = lon < 0 ? Math.ceil(lon) : Math.floor(lon);
+            min = Math.floor(t = Math.abs((lon - deg)) * 60);
+            sec = Math.floor((t - min) * 6000) / 100.0;
+            this._lonValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
         }
     }
 
-    /**
-     * Sets coordinates capturing type.
-     * @public
-     * @param {Boolean} center - True - capture screen center, false - mouse pointer.
-     */
-    setCenter(center) {
-        if (center != this._center) {
-            this._center = center;
-            if (center) {
-                this.renderer.events.off("mousemove", this._onMouseMove);
-                this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-                this._centerDiv.style.display = "block";
-            } else {
-                this.renderer.events.off("draw", this._draw);
-                this.renderer.events.on("mousemove", this._onMouseMove, this);
-                this._centerDiv.style.display = "none";
-            }
+    _createCenterEl() {
+        let el = document.createElement('div');
+        el.className = 'og-center-icon';
+        el.innerHTML = CENTER_SVG;
+        return el;
+    }
+
+    _updateUnits() {
+        this._heightMode = heightMode[this._heightModeVal];
+        this._altUnit = units[this._altUnitVal];
+        this._el.querySelector(".og-units-height").innerHTML = units.toString(this._altUnit);
+        this._showHeight();
+    }
+
+    _refreshCoordinates() {
+
+        if (this._type >= this._TYPE_FUNC.length) {
+            this._type = 0;
         }
+
+        this._el.innerHTML = TYPE_HTML[this._type];
+
+        this._latSideEl = this._el.querySelector(".og-lat-side");
+        this._lonSideEl = this._el.querySelector(".og-lon-side");
+        this._latValEl = this._el.querySelector(".og-lat-val");
+        this._lonValEl = this._el.querySelector(".og-lon-val");
+        this._heightEl = this._el.querySelector(".og-height");
+
+        this._showFn = this._TYPE_FUNC[this._type];
+        this._showFn(this._lonLat);
     }
 
-    _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
-                    : "-");
+    oninit() {
+        this._el = document.createElement('div');
+        this._el.classList.add("og-coordinates");
+
+        this.renderer.div.appendChild(this._el);
+
+        this._el.addEventListener("click", () => {
+            this._type++;
+            this._refreshCoordinates();
+            this._updateUnits();
+            this._showHeight();
+        });
+
+        if (this._centerMode) {
+            this.renderer.div.appendChild(this._createCenterEl());
+            this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
+            this.renderer.activeCamera.events.on("moveend", throttle((e) => this._showHeight(), 400, true), this);
         } else {
-            this._display.innerHTML = "Lat/Lon: " + "_____________________";
+            this.renderer.events.on("mousemove", this._grabCoordinates, this);
+            this.renderer.events.on("mousestop", throttle((e) => this._showHeight(), 400, true), this);
         }
-    }
 
-    _grabCoordinates() {
-        var r = this.renderer;
-        this.position = this.planet.getLonLatFromPixelTerrain(r.handler.getCenter());
-        this._showPosition();
+        this._refreshCoordinates();
+
+        this._updateUnits();
     }
 
-    _onMouseMove() {
-        var r = this.renderer;
-        var ms = r.events.mouseState;
-        if (
-            !(ms.leftButtonDown || ms.rightButtonDown) &&
-            r.controlsBag.scaleRot <= 0 &&
-            !r.activeCamera._flying
-        ) {
-            this.position = this.planet.getLonLatFromPixelTerrain(ms, true);
-            this._showPosition();
+    _grabCoordinates(px) {
+        let scrPx;
+        let r = this.renderer;
+        if (this._centerMode) {
+            scrPx = r.handler.getCenter();
+        } else {
+            scrPx = px;
         }
+        this._lonLat = this.planet.getLonLatFromPixelTerrain(scrPx);
+        this._showFn(this._lonLat);
     }
-}
 
-export function earthCoordinates(options) {
-    return new EarthCoordinates(options);
+    async _showHeight() {
+        if (this._lonLat) {
+            let alt = 0;
+            this._heightEl.style.opacity = 0.7;
+            if (this._heightMode === heightMode.ell) {
+                alt = await this.planet.getHeightAboveELL(this._lonLat);
+                alt = units.convertExt(true, units.m, this._altUnit, alt);
+            } else if (this._heightMode === heightMode.msl) {
+                alt = await this.planet.getHeightDefault(this._lonLat);
+                alt = units.convertExt(true, units.m, this._altUnit, alt);
+            }
+            this._heightEl.style.opacity = 1.0;
+            this._heightEl.innerHTML = alt.toString();
+        }
+    }
 }
 
 export { EarthCoordinates };

package/src/og/control/KeyboardNavigation.js

@@ -24,16 +24,22 @@ class KeyboardNavigation extends Control {
     }
 
     oninit() {
+        this.renderer.events.on("keypress", input.KEY_PGUP, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_PGDN, this.onCameraMoveBackward, this);
+        this.renderer.events.on("keypress", input.KEY_PLUS, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_EQUALS, this.onCameraMoveForward, this);
+        this.renderer.events.on("keypress", input.KEY_MINUS, this.onCameraMoveBackward, this);
         this.renderer.events.on("keypress", input.KEY_W, this.onCameraMoveForward, this);
         this.renderer.events.on("keypress", input.KEY_S, this.onCameraMoveBackward, this);
         this.renderer.events.on("keypress", input.KEY_A, this.onCameraStrifeLeft, this);
         this.renderer.events.on("keypress", input.KEY_D, this.onCameraStrifeRight, this);
         this.renderer.events.on("keypress", input.KEY_UP, this.onCameraLookUp, this);
         this.renderer.events.on("keypress", input.KEY_DOWN, this.onCameraLookDown, this);
-        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraTurnLeft, this);
-        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraTurnRight, this);
+        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraLookLeft, this);
+        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraLookRight, this);
         this.renderer.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
         this.renderer.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
+        this.renderer.events.on("keypress", input.KEY_N, this.onCameraRollNorth, this);
     }
 
     onCameraMoveForward(event) {
@@ -84,6 +90,26 @@ class KeyboardNavigation extends Control {
         cam.update();
     }
 
+    onCameraLookLeft(event) {
+        var cam = this.renderer.activeCamera;
+        if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.roll(15 / this.renderer.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
+        }
+        cam.update();
+    }
+
+    onCameraLookRight(event) {
+        var cam = this.renderer.activeCamera;
+        if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.roll(-15 / this.renderer.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((-cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
+        }
+        cam.update();
+    }
+
     onCameraTurnLeft(event) {
         var cam = this.renderer.activeCamera;
         if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
@@ -104,6 +130,26 @@ class KeyboardNavigation extends Control {
         cam.update();
     }
 
+    // from CompassButton._onClick()
+    onCameraRollNorth(event) {
+      let c = this.planet.getCartesianFromPixelTerrain(this.renderer.handler.getCenter());
+      if (c) {
+        this.planet.flyCartesian(
+          c.normal().scaleTo(c.length() + c.distance(this.planet.camera.eye)),
+          null,
+          null,
+          0,
+          null,
+          null,
+          () => {
+            this.planet.camera.look(c);
+          }
+          );
+      } else {
+        this.planet.flyCartesian(this.planet.camera.eye);
+      }
+    }
+
     onCameraRollLeft(event) {
         this.renderer.activeCamera.roll(-15 / this.renderer.handler.deltaTime);
         this.renderer.activeCamera.update();

package/src/og/control/LayerAnimation.js

@@ -0,0 +1,115 @@
+/**
+ * @module og/control/LayerAnimation
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { Events } from '../Events.js';
+
+/**
+ *
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class LayerAnimation extends Control {
+    constructor(options = {}) {
+        super(options);
+
+        this.events = new Events(["change"])
+
+        this._name = `layerAnimation ${this._id}`;
+
+        this._layersArr = options.layers || [];
+        this._layersIndexesArr = this._layersArr.map((l) => l._id);
+
+        this._currentIndex = -1;
+    }
+
+    oninit() {
+        super.oninit();
+
+        for (let i = 0; i < this._layersArr.length; i++) {
+            let li = this._layersArr[i];
+            li.setVisibility(false);
+            li.opacity = 0.0;
+            this.planet.addLayer(li);
+        }
+
+
+        this._onLayerLoadend_ = this._onLayerLoadend.bind(this);
+        this.planet._tileLoader.events.on("layerloadend", this._onLayerLoadend_, this);
+
+        this.setCurrentIndex(0);
+    }
+
+    onactivate() {
+        super.onactivate();
+        //...
+    }
+
+    ondeactivate() {
+        super.ondeactivate();
+
+        for (let i = 0; i < this._layersArr.length; i++) {
+            this._layersArr[i].setVisibility(false);
+            this._layersArr[i].opacity = 1.0;
+        }
+
+        this.planet._tileLoader.events.off("layerloadend", this._onLayerLoadend_);
+        this._onLayerLoadend_ = null;
+    }
+
+    _onLayerLoadend(layer) {
+        let currLayer = this._layersArr[this._currentIndex];
+        if (currLayer.isEqual(layer)) {
+            console.log("current layer is visible now");
+            currLayer.opacity = 1.0;
+            let prevLayer = this._layersArr[this._prevIndex];
+            if (prevLayer) {
+                prevLayer.setVisibility(false);
+                prevLayer.opacity = 0.0;
+            }
+        }
+    }
+
+    setLayers(layers) {
+
+    }
+
+    appendLayer(layer) {
+
+    }
+
+    setCurrentIndex(index) {
+        if (index != this._currentIndex && index >= 0 && index < this._layersArr.length) {
+            this._prevIndex = this._currentIndex;
+            this._currentIndex = index;
+
+            let prevLayer = this._layersArr[this._prevIndex],
+                currLayer = this._layersArr[index];
+
+            if (currLayer) {
+                currLayer.opacity = 0.0;
+                currLayer.setVisibility(true);
+                requestAnimationFrame(() => {
+                    if (currLayer.isIdle) {
+                        currLayer.opacity = 1.0;
+                        if (prevLayer) {
+                            prevLayer.setVisibility(false);
+                            prevLayer.opacity = 0.0;
+                        }
+                    }
+                });
+            }
+            this.events.dispatch(this.events.change, this._currentIndex, this._prevIndex);
+        }
+    }
+}
+
+export function layerAnimation(options) {
+    return LayerAnimation(options);
+}
+
+export { LayerAnimation };