@openglobus/og 0.15.0 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "[OpenGlobus](https://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"
@@ -46,23 +46,23 @@
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-terser": "^0.3.0",
-    "@types/jest": "^29.2.6",
-    "eslint": "^8.32.0",
-    "jaguarjs-jsdoc": "^1.0.2",
-    "jest": "^29.3.1",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@types/jest": "^29.4.0",
+    "eslint": "^8.35.0",
+    "jaguarjs-jsdoc": "^1.1.0",
+    "jest": "^29.5.0",
     "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-webgl-canvas-mock": "^0.2.3",
     "jsdoc": "^4.0.2",
-    "lint-staged": "^13.1.0",
-    "local-web-server": "^5.2.1",
+    "lint-staged": "^13.1.2",
+    "local-web-server": "^5.3.0",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.3",
-    "rollup": "^3.10.0",
+    "prettier": "^2.8.4",
+    "rollup": "^3.18.0",
     "rollup-plugin-postcss": "^4.0.2",
     "taffydb": "^2.7.3",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/og/Clock.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-import { Events } from "./Events.js";
 import * as jd from "./astro/jd.js";
+import { Events } from "./Events.js";
 
 /**
  * Class represents application timer that stores custom current julian datetime, and time speed multiplier.

package/src/og/Events.js

@@ -4,7 +4,7 @@
 
 "use strict";
 
-import { stamp, binaryInsert } from "./utils/shared.js";
+import { binaryInsert, stamp } from "./utils/shared.js";
 
 /**
  * Base events class to handle custom events.

package/src/og/Extent.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
+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.

package/src/og/Globe.js

@@ -8,18 +8,16 @@ import { CompassButton } from "./control/CompassButton.js";
 import { EarthCoordinates } from "./control/EarthCoordinates.js";
 import { EarthNavigation } from "./control/EarthNavigation.js";
 import { MouseNavigation } from "./control/MouseNavigation.js";
-import { KeyboardNavigation } from "./control/KeyboardNavigation.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 { Vec3 } from "./math/Vec3.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 { createColorRGB, isEmpty } from "./utils/shared.js";
 import { Handler } from "./webgl/Handler.js";
-import { createColorRGB } from "./utils/shared.js";
-import { Vec3 } from "./math/Vec3.js";
 
 /** @const {string} */
 const CANVAS_ID_PREFIX = "globus_viewport_";
@@ -142,7 +140,7 @@ class Globe {
         if (options.attributionContainer) {
             options.attributionContainer.appendChild(this.div.attributions);
         } else {
-            this.div.attributions.classList.add("ogAttribution");
+            this.div.attributions.classList.add("og-attribution");
             this.div.appendChild(this.div.attributions);
         }
 

package/src/og/Popup.js

@@ -1,8 +1,9 @@
 "use strict";
 
-import { Events } from "./Events.js";
 import { Vec3 } from "./math/Vec3.js";
-import { getHTML, parseHTML, createLonLat } from "./utils/shared.js";
+import { createLonLat, stringTemplate } from "./utils/shared.js";
+import { View } from './ui/View.js';
+import { CLOSE_ICON } from './ui/icons.js';
 
 const TEMPLATE = `<div class="og-popup {className}">
       <div class="og-popup-content-wrapper">
@@ -12,33 +13,27 @@ const TEMPLATE = `<div class="og-popup {className}">
         <div class="og-popup-tip"></div>
       </div>
       <div class="og-popup-toolbar">
-        <div class="og-popup-btn og-popup-close">×</div>
-      </div>
-      <div class="og-popup-title">
+        <div class="og-popup-btn og-popup-close">${CLOSE_ICON}</div>
       </div>
+      <div class="og-popup-title">{title}</div>
     </div>`;
 
-class Popup {
-    /**
-     *
-     * @param {*} options
-     */
-    constructor(options) {
-        this._id = Popup._staticCounter++;
-
-        this.events = new Events(["open", "close"]);
-
-        this._template = getHTML(TEMPLATE, { className: options.className });
-
-        this.el = null;
-
-        this._title = options.title || "";
-
-        this._content = options.content || null;
+class Popup extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                title: options.title || ""
+            }),
+            eventList: ["open", "close"],
+            classList: options.className ? [options.className] : [],
+            ...options
+        });
 
-        this._contentEl = null;
+        this._content = options.content || "";
 
-        this._titleEl = null;
+        this.$content = null;
+        this.$tip = null;
+        this.$title = null;
 
         this._planet = options.planet;
 
@@ -53,21 +48,6 @@ class Popup {
         this.render();
     }
 
-    static get _staticCounter() {
-        if (!this.__counter__ && this.__counter__ !== 0) {
-            this.__counter__ = 0;
-        }
-        return this.__counter__;
-    }
-
-    static set _staticCounter(n) {
-        this.__counter__ = n;
-    }
-
-    _renderTemplate() {
-        return parseHTML(this._template)[0];
-    }
-
     _updatePosition() {
         this.setCartesian3v(this._cartPos);
     }
@@ -76,11 +56,7 @@ class Popup {
         if (this._planet) {
             let r = this._planet.renderer.handler.pixelRatio;
             this.el.style.transform =
-                "translate(" +
-                (p.x / r - this.clientWidth * 0.5) +
-                "px, " +
-                (p.y / r - this._planet.renderer.handler.canvas.clientHeight - this._tipEl.clientHeight) +
-                "px)";
+                `translate(${p.x / r - this.clientWidth * 0.5}px, ${p.y / r - this._planet.renderer.handler.canvas.clientHeight - this.$tip.clientHeight}px)`;
         }
     }
 
@@ -103,18 +79,20 @@ 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");
+        super.render(params);
+
+        this.$content = this.select(".og-popup-content");
+        this.$title = this.select(".og-popup-title");
+        this.$tip = this.select(".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", () => {
+        this.select(".og-popup-close").addEventListener("click", () => {
             this.hide();
         });
+
         return this;
     }
 
@@ -128,19 +106,20 @@ class Popup {
     }
 
     getContainer() {
-        return this._contentEl;
+        return this.$content;
     }
 
     getToolbarContainer() {
-        return this.el.querySelector(".og-popup-toolbar");
+        return this.select(".og-popup-toolbar");
     }
 
     show() {
         this._visibility = true;
         if (this._planet) {
             this._planet.events.on("draw", this._updatePosition, this);
-            this._planet.renderer.div.appendChild(this.el);
-            this.events.dispatch(this.events.open, this);
+            this.appendTo(this._planet.renderer.div);
+            //this._planet.renderer.div.appendChild(this.el);
+            this._events.dispatch(this._events.open, this);
         }
         return this;
     }
@@ -150,7 +129,7 @@ class Popup {
         if (this.el.parentNode) {
             this._planet.events.off("draw", this._updatePosition);
             this.el.parentNode.removeChild(this.el);
-            this.events.dispatch(this.events.close, this);
+            this._events.dispatch(this._events.close, this);
         }
         return this;
     }
@@ -177,9 +156,7 @@ class Popup {
     }
 
     setTitle(html) {
-        this._title = html;
-        this._titleEl.innerHTML = html;
-        return this;
+        this.$title.innerHTML = html;
     }
 
     setLonLat(lonLat) {
@@ -187,7 +164,6 @@ class Popup {
         if (this._planet) {
             this.setCartesian3v(this._planet.ellipsoid.lonLatToCartesian(lonLat), lonLat.height);
         }
-        return this;
     }
 
     setContent(content) {
@@ -195,17 +171,16 @@ class Popup {
             this.clear();
             this._content = content;
             if (typeof content === "string") {
-                this._contentEl.innerHTML = content;
+                this.$content.innerHTML = content;
             } else {
-                this._contentEl.appendChild(content);
+                this.$content.appendChild(content);
             }
         }
-        return this;
     }
 
     clear() {
         this._content = null;
-        this._contentEl.innerHTML = "";
+        this.$content.innerHTML = "";
     }
 }
 

package/src/og/astro/earth.js

@@ -4,11 +4,11 @@
 
 "use strict";
 
-import * as jd from "./jd.js";
 import * as math from "../math.js";
-import * as astro from "./astro.js";
 import { Quat } from "../math/Quat.js";
 import { Vec3 } from "../math/Vec3.js";
+import * as astro from "./astro.js";
+import * as jd from "./jd.js";
 
 /**
  * Returns Sun position in the geocentric coordinate system by the time.

package/src/og/astro/rotation.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
-import { Vec3 } from "../math/Vec3.js";
-import { Mat3 } from "../math/Mat3.js";
 import { PI_TWO } from "../math.js";
+import { Mat3 } from "../math/Mat3.js";
+import { Vec3 } from "../math/Vec3.js";
 
 export function getRotationMatrix(rightAscension, declination, res) {
     let xAxis = new Vec3(),

package/src/og/bv/Box.js

@@ -78,3 +78,4 @@ class Box {
 }
 
 export { Box };
+

package/src/og/bv/index.js

@@ -1,4 +1,4 @@
 import { Box } from './Box';
 import { Sphere } from './Sphere';
 
-export { Box, Sphere };
+export { Box, Sphere };

package/src/og/camera/Camera.js

@@ -1,13 +1,13 @@
 "use strict";
 
-import * as math from "../math.js";
 import { Events } from "../Events.js";
-import { Frustum } from "./Frustum.js";
+import * as math from "../math.js";
+import { Mat3 } from "../math/Mat3.js";
+import { Mat4 } from "../math/Mat4.js";
 import { Vec2 } from "../math/Vec2.js";
 import { Vec3 } from "../math/Vec3.js";
 import { Vec4 } from "../math/Vec4.js";
-import { Mat3 } from "../math/Mat3.js";
-import { Mat4 } from "../math/Mat4.js";
+import { Frustum } from "./Frustum.js";
 
 /**
  * Camera class.

package/src/og/camera/PlanetCamera.js

@@ -4,15 +4,15 @@
 
 "use strict";
 
-import * as math from "../math.js";
-import * as mercator from "../mercator.js";
-import { Camera } from "./Camera.js";
-import { Vec3 } from "../math/Vec3.js";
 import { Key } from "../Lock.js";
 import { LonLat } from "../LonLat.js";
-import { Ray } from "../math/Ray.js";
-import { Quat } from "../math/Quat.js";
+import * as math from "../math.js";
 import { Mat4 } from "../math/Mat4.js";
+import { Quat } from "../math/Quat.js";
+import { Ray } from "../math/Ray.js";
+import { Vec3 } from "../math/Vec3.js";
+import * as mercator from "../mercator.js";
+import { Camera } from "./Camera.js";
 
 /**
  * Planet camera.
@@ -121,6 +121,8 @@ class PlanetCamera extends Camera {
         this._completeCallback = null;
         this._flying = false;
         this._checkTerrainCollision = true;
+
+        this._velCart = new Vec3(0.0,0.0,0.0);
     }
 
     setTerrainCollisionActivity(isActive) {
@@ -657,6 +659,24 @@ class PlanetCamera extends Camera {
         let e = this.eye.length();
         return this.eye.distance(poi) < Math.sqrt(e * e - this.planet.ellipsoid._a2);
     }
+
+    // _calcOrientation() {
+    //     let qq = Quat.yRotation(this.yaw * RADIANS).mul(this._qNorthFrame).conjugate();
+    //     this.orientation = qq.mulVec3(MODEL_FORWARD).normalize();
+    //     this._uOrientation[0] = this.orientation.x;
+    //     this._uOrientation[1] = this.orientation.y;
+    //     this._uOrientation[2] = this.orientation.z;
+    // }
+    //
+    // _updatePrediction(now) {
+    //
+    //     this._qNorthFrame = Planet.getBearingNorthRotationQuat(this.eye);
+    //
+    //     let dt = (now - this._positionTime) * 0.001;
+    //     this._positionTime = now;
+    //
+    //     this._predMapPosCart = this.eye.add(this._velCartesian.scaleTo(dt));
+    // }
 }
 
 export { PlanetCamera };

package/src/og/camera/index.js

@@ -1,4 +1,4 @@
 import { Camera } from './Camera.js';
 import { PlanetCamera } from './PlanetCamera.js';
 
-export { Camera, PlanetCamera };
+export { Camera, PlanetCamera };

package/src/og/control/Atmosphere.js

@@ -5,9 +5,9 @@
 "use strict";
 
 import * as atmos from "../shaders/atmos.js";
-import { Control } from "./Control.js";
-import { Program } from '../webgl/Program.js';
 import { Framebuffer } from "../webgl/index.js";
+import { Program } from '../webgl/Program.js';
+import { Control } from "./Control.js";
 
 /**
  * Frame per second(FPS) display control.
@@ -146,10 +146,6 @@ class Atmosphere extends Control {
 
         gl.disable(gl.DEPTH_TEST);
 
-        gl.blendEquation(gl.FUNC_ADD);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-        gl.enable(gl.BLEND);
-
         sh.activate();
         gl.bindBuffer(gl.ARRAY_BUFFER, this.renderer.screenFramePositionBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
@@ -174,7 +170,6 @@ class Atmosphere extends Control {
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
         gl.enable(gl.DEPTH_TEST);
-        gl.disable(gl.BLEND);
     }
 }
 
@@ -383,7 +378,7 @@ function atmosphereBackgroundShader() {
                     light += sunLum * SUN_INTENSITY * transmittanceFromCameraToSpace;
                 }
                             
-                fragColor = vec4(pow(light * 8.0, vec3(1.0 / 2.2)), opacity);           
+                fragColor = vec4(pow(light * 8.0, vec3(1.0 / 2.2)), clamp(opacity, 0.0, 1.0));           
             }
                                     
             void main(void) 

package/src/og/control/CompassButton.js

@@ -1,9 +1,7 @@
 "use strict";
 
-import { Control } from "./Control.js";
-import { parseHTML } from "../utils/shared.js";
 import { Button } from "../ui/Button.js";
-import { ToggleButton } from "../ui/ToggleButton.js";
+import { Control } from "./Control.js";
 
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -98,10 +96,11 @@ class CompassButton extends Control {
 
         let btn = new Button({
             classList: ["og-map-button", "og-compass-button"],
-            icon: ICON_BUTTON_SVG,
-            appendTo: this.renderer.div
+            icon: ICON_BUTTON_SVG
         });
 
+        btn.appendTo(this.renderer.div);
+
         btn.on("click", this._onClick, this);
 
         this._svg = btn.select("svg");

package/src/og/control/Control.js

@@ -41,7 +41,7 @@ class Control {
          * @public
          * @type {Boolean}
          */
-        this.autoActivate = options.autoActivate != undefined ? options.autoActivate : true;
+        this.autoActivate = options.autoActivate || false;
 
         /**
          * Control activity.
@@ -76,35 +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.
@@ -116,9 +121,10 @@ class Control {
             this.renderer = renderer;
             renderer.controls[this.name] = this;
             this.onadd && this.onadd();
+            this._initialized = true;
+            this.oninit && this.oninit();
             if (this.autoActivate) {
-                this._initialized = true;
-                this.oninit && this.oninit();
+                this.activate();
             }
         }
     }
@@ -154,12 +160,14 @@ class Control {
      * @public
      */
     activate() {
-        if (!this._initialized) {
-            this._initialized = true;
-            this.oninit && this.oninit();
+        if (!this._active) {
+            if (!this._initialized) {
+                this._initialized = true;
+                this.oninit && this.oninit();
+            }
+            this._active = true;
+            this.onactivate && this.onactivate();
         }
-        this._active = true;
-        this.onactivate && this.onactivate();
     }
 
     /**
@@ -167,8 +175,10 @@ class Control {
      * @public
      */
     deactivate() {
-        this._active = false;
-        this.ondeactivate && this.ondeactivate();
+        if (this._active) {
+            this._active = false;
+            this.ondeactivate && this.ondeactivate();
+        }
     }
 
     /**

package/src/og/control/EarthCoordinates.js

@@ -1,10 +1,10 @@
 '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';
-import { throttle } from '../utils/shared.js';
-import { LonLat } from '../LonLat.js';
 
 const DECIMAL_TEMPLATE =
     `<div class="og-lat-side"></div><div class="og-lat-val"></div>
@@ -211,3 +211,4 @@ class EarthCoordinates extends Control {
 }
 
 export { EarthCoordinates };
+

package/src/og/control/EarthNavigation.js

@@ -6,7 +6,6 @@ import { Quat } from "../math/Quat.js";
 import { Ray } from "../math/Ray.js";
 import { Vec3 } from "../math/Vec3.js";
 import { Control } from "./Control.js";
-import { Mat4 } from "../math/Mat4.js";
 
 class Touch {
     constructor() {

package/src/og/control/GeoImageDragControl.js

@@ -4,9 +4,9 @@
 
 'use strict';
 
-import { Control } from './Control.js';
 import { BaseGeoImage } from '../layer/BaseGeoImage.js';
 import { ToggleButton } from "../ui/ToggleButton.js";
+import { Control } from './Control.js';
 
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M16 13l6.964 4.062-2.973.85 2.125 3.681-1.732 1-2.125-3.68-2.223 2.15L16 13zm-2-7h2v2h5a1 1 0 0 1 1 1v4h-2v-3H10v10h4v2H9a1 1 0 0 1-1-1v-5H6v-2h2V9a1 1 0 0 1 1-1h5V6zM4 14v2H2v-2h2zm0-4v2H2v-2h2zm0-4v2H2V6h2zm0-4v2H2V2h2zm4 0v2H6V2h2zm4 0v2h-2V2h2zm4 0v2h-2V2h2z" fill="#000"/></svg>`;
 
@@ -118,4 +118,4 @@ class GeoImageDragControl extends Control {
     }
 }
 
-export { GeoImageDragControl };
+export { GeoImageDragControl };

package/src/og/control/KeyboardNavigation.js

@@ -4,10 +4,10 @@
 
 "use strict";
 
-import * as math from "../math.js";
-import { Control } from "./Control.js";
 import { input } from "../input/input.js";
+import * as math from "../math.js";
 import { Vec3 } from "../math/Vec3.js";
+import { Control } from "./Control.js";
 
 /**
  * Planet camera keyboard navigation. Use W,S,A,D and left shift key for fly around a planet.
@@ -166,3 +166,4 @@ export function keyboardNavigation(options) {
 }
 
 export { KeyboardNavigation };
+

package/src/og/control/LayerAnimation.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-import { Control } from "./Control.js";
 import { Events } from '../Events.js';
+import { Control } from "./Control.js";
 
 /**
  *
@@ -380,4 +380,4 @@ layerAnimation(options) {
 
 export {
     LayerAnimation
-};
+};