@openglobus/og 0.16.3 → 0.17.0

package/src/og/control/EarthCoordinates.js

@@ -1,214 +1,214 @@
-'use strict';
-
-import { LonLat } from '../LonLat.js';
-import { throttle } from '../utils/shared.js';
-import * as units from '../utils/units.js';
-import { heightMode } from '../utils/units.js';
-import { Control } from './Control.js';
-
-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>`;
-
-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>`;
-
-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>';
-
-const TYPE_HTML = [DECIMAL_TEMPLATE, DEGREE_TEMPLATE];
-
-/**
- * Control displays mouse or screen center Earth coordinates.
- * @class
- * @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 {
-    constructor(options) {
-        super(options);
-
-        options = options || {};
-
-        /**
-         * Display type.
-         * @private
-         * @type {Boolean}
-         */
-        this._type = options.type || 0;
-
-        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
-
-        this._showFn = null;
-
-        /**
-         * Current position.
-         * @public
-         * @type {og.Vec3}
-         */
-        this._lonLat = new LonLat();
-
-        this._latSideEl = null;
-        this._lonSideEl = null;
-        this._latValEl = null;
-        this._lonValEl = null;
-        this._heightEl = null;
-
-        this._altUnitVal = options.altitudeUnit || "m";
-        this._heightModeVal = options.heightMode || "ell";
-
-        this._altUnit = units[this._altUnitVal];
-        this._heightMode = heightMode[this._heightModeVal];
-
-        this._centerMode = options.centerMode || false;
-    }
-
-    _SHOW_DECIMAL(ll) {
-        if (ll) {
-            let lat = ll.lat,
-                lon = ll.lon;
-
-            if (lat >= 0) {
-                this._latSideEl.innerHTML = 'N';
-            } else {
-                this._latSideEl.innerHTML = 'S';
-            }
-
-            if (lon >= 0) {
-                this._lonSideEl.innerHTML = 'E';
-            } else {
-                this._lonSideEl.innerHTML = 'W';
-            }
-
-            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
-            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
-        }
-    }
-
-    _SHOW_DEGREE(ll) {
-        if (ll) {
-            let lat = ll.lat,
-                lon = ll.lon;
-
-            if (lat >= 0) {
-                this._latSideEl.innerHTML = 'N';
-            } else {
-                this._latSideEl.innerHTML = 'S';
-            }
-
-            if (lon >= 0) {
-                this._lonSideEl.innerHTML = 'E';
-            } else {
-                this._lonSideEl.innerHTML = 'W';
-            }
-
-            let t = 0;
-
-            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) + '"';
-
-            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) + '"';
-        }
-    }
-
-    _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);
-    }
-
-    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.renderer.events.on("mousemove", this._grabCoordinates, this);
-            this.renderer.events.on("mousestop", throttle((e) => this._showHeight(), 400, true), this);
-        }
-
-        this._refreshCoordinates();
-
-        this._updateUnits();
-    }
-
-    _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);
-    }
-
-    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 };
-
+'use strict';
+
+import { LonLat } from '../LonLat.js';
+import { throttle } from '../utils/shared.js';
+import * as units from '../utils/units.js';
+import { heightMode } from '../utils/units.js';
+import { Control } from './Control.js';
+
+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>`;
+
+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>`;
+
+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>';
+
+const TYPE_HTML = [DECIMAL_TEMPLATE, DEGREE_TEMPLATE];
+
+/**
+ * Control displays mouse or screen center Earth coordinates.
+ * @class
+ * @extends {og.control.Control}
+ * @param {Object} [options] - Options:
+ * @param {Boolean} [options.center] - Earth coordinates 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 {
+    constructor(options) {
+        super(options);
+
+        options = options || {};
+
+        /**
+         * Display type.
+         * @private
+         * @type {Boolean}
+         */
+        this._type = options.type || 0;
+
+        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
+
+        this._showFn = null;
+
+        /**
+         * Current position.
+         * @public
+         * @type {og.Vec3}
+         */
+        this._lonLat = new LonLat();
+
+        this._latSideEl = null;
+        this._lonSideEl = null;
+        this._latValEl = null;
+        this._lonValEl = null;
+        this._heightEl = null;
+
+        this._altUnitVal = options.altitudeUnit || "m";
+        this._heightModeVal = options.heightMode || "ell";
+
+        this._altUnit = units[this._altUnitVal];
+        this._heightMode = heightMode[this._heightModeVal];
+
+        this._centerMode = options.centerMode != undefined ? options.centerMode : true;
+    }
+
+    _SHOW_DECIMAL(ll) {
+        if (ll) {
+            let lat = ll.lat,
+                lon = ll.lon;
+
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            } else {
+                this._latSideEl.innerHTML = 'S';
+            }
+
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            } else {
+                this._lonSideEl.innerHTML = 'W';
+            }
+
+            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
+            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
+        }
+    }
+
+    _SHOW_DEGREE(ll) {
+        if (ll) {
+            let lat = ll.lat,
+                lon = ll.lon;
+
+            if (lat >= 0) {
+                this._latSideEl.innerHTML = 'N';
+            } else {
+                this._latSideEl.innerHTML = 'S';
+            }
+
+            if (lon >= 0) {
+                this._lonSideEl.innerHTML = 'E';
+            } else {
+                this._lonSideEl.innerHTML = 'W';
+            }
+
+            let t = 0;
+
+            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) + '"';
+
+            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) + '"';
+        }
+    }
+
+    _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);
+    }
+
+    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.renderer.events.on("mousemove", this._grabCoordinates, this);
+            this.renderer.events.on("mousestop", throttle((e) => this._showHeight(), 400, true), this);
+        }
+
+        this._refreshCoordinates();
+
+        this._updateUnits();
+    }
+
+    _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);
+    }
+
+    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/GeoImageDragControl.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/GeoImageDragControl
- */
-
 'use strict';
 
 import { BaseGeoImage } from '../layer/BaseGeoImage.js';

package/src/og/control/KeyboardNavigation.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/KeyboardNavigation
- */
-
 "use strict";
 
 import { input } from "../input/input.js";

package/src/og/control/LayerAnimation.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/LayerAnimation
- */
-
 "use strict";
 
 import { Events } from '../Events.js';

package/src/og/control/LayerSwitcher.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/LayerSwitcher
- */
-
 "use strict";
 
 import { Dialog } from "../ui/Dialog.js";
@@ -283,6 +279,8 @@ class LayerSwitcher extends Control {
                 let entities = object._entities
                 let inputs = [...title.querySelectorAll('input')]
                 entities ? object._entities.forEach((entity, index) => {
+                    console.log("visibility ENTITY/INDEX/INPUTS/SIBLINGS/TITLE", entity, index, inputs, siblings, title);
+
                     inputs[index].checked = entity.getVisibility()
                 }) : null
             } else {

package/src/og/control/Lighting.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/Lighting
- */
-
 "use strict";
 
 import { Dialog } from '../ui/Dialog.js';
@@ -243,14 +239,14 @@ class Lighting extends Control {
         this._dialog.appendTo(this.renderer.div);
         this._panel.appendTo(this._dialog.container);
 
-        this.$atmosphereOpacity = document.querySelector(".og-atmosphere-opacity");
-        this.$gamma = document.querySelector(".og-option.og-gamma");
-        this.$exposure = document.querySelector(".og-option.og-exposure");
-        this.$opacity = document.querySelector(".og-option.og-opacity");
-        this.$diffuse = document.querySelector(".og-option.og-diffuse");
-        this.$ambient = document.querySelector(".og-option.og-ambient");
-        this.$specular = document.querySelector(".og-option.og-specular");
-        this.$night = document.querySelector(".og-option.og-night");
+        this.$atmosphereOpacity = this._panel.el.querySelector(".og-atmosphere-opacity");
+        this.$gamma = this._panel.el.querySelector(".og-option.og-gamma");
+        this.$exposure = this._panel.el.querySelector(".og-option.og-exposure");
+        this.$opacity = this._panel.el.querySelector(".og-option.og-opacity");
+        this.$diffuse = this._panel.el.querySelector(".og-option.og-diffuse");
+        this.$ambient = this._panel.el.querySelector(".og-option.og-ambient");
+        this.$specular = this._panel.el.querySelector(".og-option.og-specular");
+        this.$night = this._panel.el.querySelector(".og-option.og-night");
 
         this._toggleBtn.on("change", (isActive) => {
             this._dialog.setVisibility(isActive);
@@ -357,7 +353,7 @@ class Lighting extends Control {
         });
 
 
-        document.getElementById("layers").addEventListener("change", (e) => {
+        this._panel.el.querySelector("#layers").addEventListener("change", (e) => {
             this.bindLayer(this.planet.getLayerByName(e.target.value));
         });
 
@@ -480,8 +476,8 @@ class Lighting extends Control {
         let opt = document.createElement("option");
         opt.value = e.name;
         opt.innerText = e.name;
-        document.getElementById("layers").appendChild(opt);
-        document.getElementById("layers").value = e.name;
+        this._panel.el.querySelector("#layers").appendChild(opt);
+        this._panel.el.querySelector("#layers").value = e.name;
     }
 
     _onLayerRemove(e) {

package/src/og/control/MouseNavigation.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/MouseNavigation
- */
-
 "use strict";
 
 import { Sphere } from "../bv/Sphere.js";

package/src/og/control/MouseWheelZoomControl.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/MouseWheelZoomControl
- */
-
 "use strict";
 
 import { Sphere } from "../bv/Sphere.js";

package/src/og/control/RulerSwitcher.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/Ruler
- */
-
 "use strict";
 
 import { ToggleButton } from "../ui/ToggleButton.js";

package/src/og/control/ScaleControl.js

@@ -1,7 +1,3 @@
-/**
- * @module og/control/ZoomControl
- */
-
 "use strict";
 
 import { RADIANS } from "../math.js";
@@ -40,7 +36,7 @@ class ScaleControl extends Control {
         this._minWidth = 100;
         this._maxWidth = 150;
 
-        this._isCenter = options.isCenter || false;
+        this._isCenter = options.isCenter != undefined ? options.isCenter : true;
     }
 
     _renderTemplate() {
@@ -59,7 +55,7 @@ class ScaleControl extends Control {
                 this._drawScreen(this.planet.renderer.handler.getCenter());
             });
 
-            this.planet.terrain.events.on("loadend", (e) => {
+            !this.planet.terrain.isEmpty && this.planet.terrain.events.on("loadend", (e) => {
                 this._drawScreen(this.planet.renderer.handler.getCenter());
             });
         } else {

package/src/og/control/ShowFps.js

@@ -1,44 +1,40 @@
-/**
- * @module og/control/ShowFps
- */
-
-"use strict";
-
-import { print2d } from "../utils/shared.js";
-import { Control } from "./Control.js";
-
-/**
- * Frame per second(FPS) display control.
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
- */
-class ShowFps extends Control {
-    constructor(options) {
-        super(options);
-    }
-
-    oninit() {
-        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
-        );
-    }
-}
-
-export function showFps(options) {
-    return new ShowFps(options);
-}
-
-export { ShowFps };
-
+"use strict";
+
+import { print2d } from "../utils/shared.js";
+import { Control } from "./Control.js";
+
+/**
+ * Frame per second(FPS) display control.
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class ShowFps extends Control {
+    constructor(options) {
+        super(options);
+    }
+
+    oninit() {
+        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
+        );
+    }
+}
+
+export function showFps(options) {
+    return new ShowFps(options);
+}
+
+export { ShowFps };
+