@openglobus/og 0.13.7 → 0.13.10

package/src/og/control/RulerSwitcher.js

@@ -0,0 +1,69 @@
+/**
+ * @module og/control/Ruler
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { Ruler } from "./ruler/Ruler.js";
+import { elementFactory, btnClickHandler } from "./UIhelpers.js";
+
+/**
+ * Activate ruler
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class RulerSwitcher extends Control {
+    constructor(options = {}) {
+        super(options);
+
+        this.ruler = new Ruler({
+            ignoreTerrain: options.ignoreTerrain
+        });
+    }
+
+    oninit() {
+        this.planet.addControl(this.ruler);
+        this._createMenuBtn();
+    }
+
+    onactivate() {
+        this.ruler.activate();
+    }
+
+    ondeactivate() {
+        this.ruler.deactivate();
+    }
+
+    _createMenuBtn() {
+        let btn = elementFactory(
+            'div',
+            { id: 'og-ruler-menu-btn', class: 'og-ruler og-menu-btn og-OFF' },
+            elementFactory(
+                'div',
+                { id: 'og-ruler-menu-icon', class: 'og-icon-holder' }
+            )
+        );
+
+        this.renderer.div.appendChild(btn);
+
+        btn.addEventListener('click', () => {
+            if (btn.classList.contains('og-OFF')) {
+                this.onactivate();
+            } else {
+                this.ondeactivate();
+            }
+        });
+
+        btnClickHandler(
+            btn,
+            null,
+            null,
+            '#og-ruler-menu-icon'
+        );
+    }
+}
+
+export { RulerSwitcher };
+

package/src/og/control/Sun.js

@@ -1,170 +1,170 @@
-/**
- * @module og/control/Sun
- */
-
-"use strict";
-
-import { Control } from "./Control.js";
-import { getSunPosition } from "../astro/earth.js";
-import { LightSource } from "../light/LightSource.js";
-import { Quat } from "../math/Quat.js";
-import { Vec3 } from "../math/Vec3.js";
-
-const ACTIVATION_HEIGHT = 12079000.0;
-/**
- * Real Sun geocentric position control that place the Sun on the right place by the Earth.
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
- */
-class Sun extends Control {
-    constructor(options) {
-        super(options);
-
-        this._name = "sun";
-
-        options = options || {};
-
-        /**
-         * Earth planet node.
-         * @public
-         * @type {Planet}
-         */
-        this.planet = null;
-
-        /**
-         * Sunlight position placed in the camera eye.
-         * @private
-         * @type {boolean}
-         */
-        // this._isCameraSunlight = false;
-
-        this.offsetVertical = options.offsetVertical || -5000000;
-
-        this.offsetHorizontal = options.offsetHorizontal || 5000000;
-
-        /**
-         * Light source.
-         * @public
-         * @type {LightSource}
-         */
-        this.sunlight = null;
-
-        /**
-         * Current frame handler clock date and time.
-         * @private
-         * @type {Number}
-         */
-        this._currDate = 0;
-
-        /**
-         * Previous frame handler clock date and time.
-         * @private
-         * @type {Number}
-         */
-        this._prevDate = 0;
-
-        this._clockPtr = null;
-
-        this._lightOn = false;
-
-        this._stopped = options.stopped || false;
-    }
-
-    oninit() {
-        this.planet.lightEnabled = true;
-
-        // sunlight initialization
-        this.sunlight = new LightSource("Sun", {
-            ambient: new Vec3(0.15, 0.15, 0.25),
-            diffuse: new Vec3(0.9, 0.9, 0.8),
-            specular: new Vec3(0.1, 0.1, 0.06),
-            shininess: 110
-        });
-        this.sunlight.addTo(this.planet);
-
-        this.renderer.events.on("draw", this._draw, this);
-
-        if (!this._clockPtr) {
-            this._clockPtr = this.renderer.handler.defaultClock;
-        }
-    }
-
-    stop() {
-        this._stopped = true;
-    }
-
-    onactivate() {
-        this._stopped = false;
-    }
-
-    bindClock(clock) {
-        this._clockPtr = clock;
-    }
-
-    _draw() {
-        this._currDate = this._clockPtr.currentDate;
-        if (!this._stopped) {
-            var cam = this.renderer.activeCamera;
-            if (cam.getHeight() < ACTIVATION_HEIGHT || !this._active) {
-                this._lightOn = true;
-                this._f = 1;
-                var n = cam.eye.normal(),
-                    u = cam.getForward();
-
-                u.scale(Math.sign(cam._u.dot(n))); // up
-
-                if (cam.slope > 0.99) {
-                    u = cam._u;
-                }
-
-                var tu = Vec3.proj_b_to_plane(u, n, u).normalize().scale(this.offsetVertical);
-                var tr = Vec3.proj_b_to_plane(cam._r, n, cam._r)
-                    .normalize()
-                    .scale(this.offsetHorizontal); // right
-                var d = tu.add(tr);
-                var pos = cam.eye.add(d);
-                if (this._k > 0) {
-                    this._k -= 0.01;
-                    let rot = Quat.getRotationBetweenVectors(
-                        this.sunlight._position.normal(),
-                        pos.normal()
-                    );
-                    let r = rot.slerp(Quat.IDENTITY, this._k).normalize();
-                    this.sunlight.setPosition3v(r.mulVec3(this.sunlight._position));
-                } else {
-                    this.sunlight.setPosition3v(pos);
-                }
-            } else {
-                this._k = 1;
-                if (this._f > 0) {
-                    this._f -= 0.01;
-                    let rot = Quat.getRotationBetweenVectors(
-                        this.sunlight._position.normal(),
-                        getSunPosition(this._currDate).normal()
-                    );
-                    let r = rot.slerp(Quat.IDENTITY, this._f).normalize();
-                    this.sunlight.setPosition3v(r.mulVec3(this.sunlight._position));
-                } else {
-                    if (
-                        (Math.abs(this._currDate - this._prevDate) > 0.00034 && this._active) ||
-                        this._lightOn
-                    ) {
-                        this._lightOn = false;
-                        this._prevDate = this._currDate;
-                        this.sunlight.setPosition3v(getSunPosition(this._currDate));
-                        this._f = 0;
-                    }
-                }
-            }
-        } else {
-            this.sunlight.setPosition3v(getSunPosition(this._currDate));
-        }
-    }
-}
-
-export function sun(options) {
-    return Sun(options);
-}
-
-export { Sun };
+/**
+ * @module og/control/Sun
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { getSunPosition } from "../astro/earth.js";
+import { LightSource } from "../light/LightSource.js";
+import { Quat } from "../math/Quat.js";
+import { Vec3 } from "../math/Vec3.js";
+
+const ACTIVATION_HEIGHT = 12079000.0;
+/**
+ * Real Sun geocentric position control that place the Sun on the right place by the Earth.
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class Sun extends Control {
+    constructor(options) {
+        super(options);
+
+        this._name = "sun";
+
+        options = options || {};
+
+        /**
+         * Earth planet node.
+         * @public
+         * @type {Planet}
+         */
+        this.planet = null;
+
+        /**
+         * Sunlight position placed in the camera eye.
+         * @private
+         * @type {boolean}
+         */
+        // this._isCameraSunlight = false;
+
+        this.offsetVertical = options.offsetVertical || -5000000;
+
+        this.offsetHorizontal = options.offsetHorizontal || 5000000;
+
+        /**
+         * Light source.
+         * @public
+         * @type {LightSource}
+         */
+        this.sunlight = null;
+
+        /**
+         * Current frame handler clock date and time.
+         * @private
+         * @type {Number}
+         */
+        this._currDate = 0;
+
+        /**
+         * Previous frame handler clock date and time.
+         * @private
+         * @type {Number}
+         */
+        this._prevDate = 0;
+
+        this._clockPtr = null;
+
+        this._lightOn = false;
+
+        this._stopped = options.stopped || false;
+    }
+
+    oninit() {
+        this.planet.lightEnabled = true;
+
+        // sunlight initialization
+        this.sunlight = new LightSource("Sun", {
+            ambient: new Vec3(0.15, 0.15, 0.25),
+            diffuse: new Vec3(0.9, 0.9, 0.8),
+            specular: new Vec3(0.1, 0.1, 0.06),
+            shininess: 110
+        });
+        this.sunlight.addTo(this.planet);
+
+        this.renderer.events.on("draw", this._draw, this);
+
+        if (!this._clockPtr) {
+            this._clockPtr = this.renderer.handler.defaultClock;
+        }
+    }
+
+    stop() {
+        this._stopped = true;
+    }
+
+    onactivate() {
+        this._stopped = false;
+    }
+
+    bindClock(clock) {
+        this._clockPtr = clock;
+    }
+
+    _draw() {
+        this._currDate = this._clockPtr.currentDate;
+        if (!this._stopped) {
+            var cam = this.renderer.activeCamera;
+            if (cam.getHeight() < ACTIVATION_HEIGHT || !this._active) {
+                this._lightOn = true;
+                this._f = 1;
+                var n = cam.eye.normal(),
+                    u = cam.getForward();
+
+                u.scale(Math.sign(cam._u.dot(n))); // up
+
+                if (cam.slope > 0.99) {
+                    u = cam._u;
+                }
+
+                var tu = Vec3.proj_b_to_plane(u, n, u).normalize().scale(this.offsetVertical);
+                var tr = Vec3.proj_b_to_plane(cam._r, n, cam._r)
+                    .normalize()
+                    .scale(this.offsetHorizontal); // right
+                var d = tu.add(tr);
+                var pos = cam.eye.add(d);
+                if (this._k > 0) {
+                    this._k -= 0.01;
+                    let rot = Quat.getRotationBetweenVectors(
+                        this.sunlight._position.normal(),
+                        pos.normal()
+                    );
+                    let r = rot.slerp(Quat.IDENTITY, this._k).normalize();
+                    this.sunlight.setPosition3v(r.mulVec3(this.sunlight._position));
+                } else {
+                    this.sunlight.setPosition3v(pos);
+                }
+            } else {
+                this._k = 1;
+                if (this._f > 0) {
+                    this._f -= 0.01;
+                    let rot = Quat.getRotationBetweenVectors(
+                        this.sunlight._position.normal(),
+                        getSunPosition(this._currDate).normal()
+                    );
+                    let r = rot.slerp(Quat.IDENTITY, this._f).normalize();
+                    this.sunlight.setPosition3v(r.mulVec3(this.sunlight._position));
+                } else {
+                    if (
+                        (Math.abs(this._currDate - this._prevDate) > 0.00034 && this._active) ||
+                        this._lightOn
+                    ) {
+                        this._lightOn = false;
+                        this._prevDate = this._currDate;
+                        this.sunlight.setPosition3v(getSunPosition(this._currDate));
+                        this._f = 0;
+                    }
+                }
+            }
+        } else {
+            this.sunlight.setPosition3v(getSunPosition(this._currDate));
+        }
+    }
+}
+
+export function sun(options) {
+    return new Sun(options);
+}
+
+export { Sun };

package/src/og/control/UIhelpers.js

@@ -0,0 +1,146 @@
+'use strict';
+
+/* 
+* Helper functions for UI/UX
+*/
+
+// Creates new DOM elements and assigns attributes
+export function elementFactory(type, attributes, ...children) {
+    const el = document.createElement(type)
+    let key = null;
+    for (key in attributes) {
+        el.setAttribute(key, attributes[key])
+    }
+
+    children.forEach(child => {
+        if (typeof child === 'string') {
+            el.appendChild(document.createTextNode(child))
+        } else {
+            el.appendChild(child)
+        }
+    })
+
+    return el;
+}
+
+// Appends array of children to parent
+export function appendChildren(parent, childrenArray) {
+    childrenArray.forEach(child => parent.appendChild(child))
+}
+
+// Cycles an array of text and outputs next
+export function toggleText(elementText, textArray) {
+    let textIndex = textArray.indexOf(elementText);
+    let nextIndex;
+    textIndex >= 0 && textIndex < textArray.length - 1 ?
+        nextIndex = textIndex + 1 :
+        nextIndex = 0;
+    return textArray[nextIndex];
+}
+
+// Enables a movement of a DOM element. Also disables/enables mouse navigations for og-planet
+export function enableElmovement(el, planet) {
+
+    let newPosX = 0,
+        newPosY = 0,
+        startPosX = 0,
+        startPosY = 0;
+
+    const behaviour = (e) => {
+        e.preventDefault();
+        planet.renderer.controls.mouseNavigation.deactivate()
+        // get the starting position of the cursor
+        startPosX = e.clientX;
+        startPosY = e.clientY;
+
+        document.addEventListener('mousemove', mouseMove);
+
+        document.addEventListener('mouseup', function (e) {
+            document.removeEventListener('mousemove', mouseMove);
+            planet.renderer.controls.mouseNavigation.activate();
+        });
+    }
+
+    const mouseMove = (e) => {
+        // calculate the new position
+        newPosX = startPosX - e.clientX;
+        newPosY = startPosY - e.clientY;
+
+        // with each move we also want to update the start X and Y
+        startPosX = e.clientX;
+        startPosY = e.clientY;
+
+        // set the element's new position:
+        el.style.top = (el.offsetTop - newPosY) + "px";
+        el.style.left = (el.offsetLeft - newPosX) + "px";
+    }
+
+    return { behaviour, mouseMove }
+}
+
+// Get all nodes of a class
+export function getAllnodes(CSSclass) {
+    return document.querySelectorAll(CSSclass);
+}
+
+// Convert nodelist to an Array
+export function nodesToArray(nodeList) {
+    return Array.from(nodeList);
+}
+
+// Adds a class to all elements selected
+export function setAllCSSclass(CSSclass, nodeArray) {
+    return nodeArray.forEach(x => x.classList.add(CSSclass));
+}
+
+// Sets all menu buttons to off
+export function allMenuBtnOFF() {
+    setAllCSSclass('og-OFF', nodesToArray(getAllnodes('.og-menu-btn')));
+}
+
+// Hides all dialoges of main menu
+export function allDialogsHide() {
+    setAllCSSclass('og-hide', nodesToArray(getAllnodes('.og-dialog')));
+}
+
+function isString(v) {
+    return typeof v === 'string' || v instanceof String;
+}
+
+// Handles the click inside/outside a dialog - closes dialog when click outside
+export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id) {
+    let btn = isString(btn_id) ? document.getElementById(btn_id) : btn_id;
+    let dialog = document.getElementById(dialog_id);
+    btn.onclick = function (e) {
+        if (this.classList.contains('og-OFF')) {
+            // Turn to ON
+            allMenuBtnOFF();
+            allDialogsHide();
+            this.classList.remove('og-OFF');
+            if (dialog) {
+                dialog.classList.remove('og-hide');
+            }
+
+            if (this.classList.contains('og-has-dialog')) {
+                document.addEventListener('click', (e) => {
+                    if (e.target.matches(dialog_selector) || e.target.matches(btn_icon_id)) { //inside
+                        return;
+                    } else {//outside
+                        btn.classList.add('og-OFF');
+                        if (dialog) {
+                            dialog.classList.add('og-hide')
+                        }
+                        // TODO needs fix
+                        // this.removeEventListener('click', arguments.callee);
+                    }
+                })
+            }
+        } else {
+            // Turn to OFF
+            this.classList.add('og-OFF');
+            if (dialog) {
+                dialog.classList.add('og-hide');
+            }
+        }
+    }
+}

package/src/og/control/ZoomControl.js

@@ -17,8 +17,6 @@ class ZoomControl extends Control {
     constructor(options) {
         super(options);
 
-        options = options || {};
-
         this._keyLock = new Key();
 
         this.planet = null;

package/src/og/control/index.js

@@ -10,11 +10,13 @@ import { MouseNavigation } from "./MouseNavigation.js";
 import { ToggleWireframe } from "./ToggleWireframe.js";
 import { TouchNavigation } from "./TouchNavigation.js";
 import { SimpleNavigation } from "./SimpleNavigation.js";
+import { Ruler } from "./ruler/Ruler.js";
 import { ShowFps } from "./ShowFps.js";
 import { Sun } from "./Sun.js";
 import { ZoomControl } from "./ZoomControl.js";
 import { MouseWheelZoomControl } from "./MouseWheelZoomControl.js";
 import { Lighting } from "./Lighting.js";
+import { LayerAnimation } from "./LayerAnimation.js";
 
 export {
     Control,
@@ -33,5 +35,7 @@ export {
     Sun,
     ZoomControl,
     MouseWheelZoomControl,
-    Lighting
+    Lighting,
+    Ruler,
+    LayerAnimation
 };

package/src/og/control/ruler/Ruler.js

@@ -0,0 +1,43 @@
+/**
+ * @module og/control/Ruler
+ */
+
+"use strict";
+
+import { Control } from "../Control.js";
+import { RulerScene } from "./RulerScene.js";
+
+/**
+ * Activate ruler
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class Ruler extends Control {
+    constructor(options = {}) {
+        super(options);
+
+        this._rulerScene = new RulerScene({
+            name: `rulerScene:${this._id}`,
+            ignoreTerrain: options.ignoreTerrain
+        });
+    }
+
+    set ignoreTerrain(v) {
+        this._rulerScene.ignoreTerrain = v;
+    }
+
+    oninit() {
+        this._rulerScene.bindPlanet(this.planet);
+    }
+
+    onactivate() {
+        this.renderer.addNode(this._rulerScene);
+    }
+
+    ondeactivate() {
+        this.renderer.removeNode(this._rulerScene);
+    }
+}
+
+export { Ruler };