@openglobus/og 0.13.8 → 0.13.10

package/src/og/control/Lighting.js

@@ -144,7 +144,7 @@ class Lighting extends Control {
         this._selectedLayer = layer;
 
         document.getElementById("opacity").value = layer.opacity;
-        document.querySelector(".og-value.opacity").innerHTML = layer.opacity.toString();
+        document.querySelector(".og-value.opacity").innerText = layer.opacity.toString();
     }
 
     oninit() {
@@ -166,15 +166,15 @@ class Lighting extends Control {
 
         document.getElementById("gamma").addEventListener("input", function (e) {
             _this.planet.renderer.gamma = Number(this.value);
-            document.querySelector(".og-value.gamma").innerHTML = this.value;
+            document.querySelector(".og-value.gamma").innerText = this.value;
         });
         document.getElementById("exposure").addEventListener("input", function (e) {
             _this.planet.renderer.exposure = Number(this.value);
-            document.querySelector(".og-value.exposure").innerHTML = this.value;
+            document.querySelector(".og-value.exposure").innerText = this.value;
         });
 
-        document.querySelector(".og-value.gamma").innerHTML = this.planet.renderer.gamma.toString();
-        document.querySelector(".og-value.exposure").innerHTML =
+        document.querySelector(".og-value.gamma").innerText = this.planet.renderer.gamma.toString();
+        document.querySelector(".og-value.exposure").innerText =
             this.planet.renderer.exposure.toString();
 
         document.getElementById("gamma").value = this.planet.renderer.gamma;
@@ -184,51 +184,51 @@ class Lighting extends Control {
             if (_this._selectedLayer) {
                 _this._selectedLayer.opacity = Number(this.value);
             }
-            document.querySelector(".og-value.opacity").innerHTML = this.value;
+            document.querySelector(".og-value.opacity").innerText = this.value;
         });
 
         document.getElementById("ambient-r").addEventListener("input", function (e) {
             _this.planet._ambient[0] = Number(this.value);
-            document.querySelector(".og-value.ambient-r").innerHTML = this.value;
+            document.querySelector(".og-value.ambient-r").innerText = this.value;
         });
         document.getElementById("ambient-g").addEventListener("input", function (e) {
             _this.planet._ambient[1] = Number(this.value);
-            document.querySelector(".og-value.ambient-g").innerHTML = this.value;
+            document.querySelector(".og-value.ambient-g").innerText = this.value;
         });
         document.getElementById("ambient-b").addEventListener("input", function (e) {
             _this.planet._ambient[2] = Number(this.value);
-            document.querySelector(".og-value.ambient-b").innerHTML = this.value;
+            document.querySelector(".og-value.ambient-b").innerText = this.value;
         });
 
         document.getElementById("diffuse-r").addEventListener("input", function (e) {
             _this.planet._diffuse[0] = Number(this.value);
-            document.querySelector(".og-value.diffuse-r").innerHTML = this.value;
+            document.querySelector(".og-value.diffuse-r").innerText = this.value;
         });
         document.getElementById("diffuse-g").addEventListener("input", function (e) {
             _this.planet._diffuse[1] = Number(this.value);
-            document.querySelector(".og-value.diffuse-g").innerHTML = this.value;
+            document.querySelector(".og-value.diffuse-g").innerText = this.value;
         });
         document.getElementById("diffuse-b").addEventListener("input", function (e) {
             _this.planet._diffuse[2] = Number(this.value);
-            document.querySelector(".og-value.diffuse-b").innerHTML = this.value;
+            document.querySelector(".og-value.diffuse-b").innerText = this.value;
         });
 
         document.getElementById("specular-r").addEventListener("input", function (e) {
             _this.planet._specular[0] = Number(this.value);
-            document.querySelector(".og-value.specular-r").innerHTML = this.value;
+            document.querySelector(".og-value.specular-r").innerText = this.value;
         });
         document.getElementById("specular-g").addEventListener("input", function (e) {
             _this.planet._specular[1] = Number(this.value);
-            document.querySelector(".og-value.specular-g").innerHTML = this.value;
+            document.querySelector(".og-value.specular-g").innerText = this.value;
         });
         document.getElementById("specular-b").addEventListener("input", function (e) {
             _this.planet._specular[2] = Number(this.value);
-            document.querySelector(".og-value.specular-b").innerHTML = this.value;
+            document.querySelector(".og-value.specular-b").innerText = this.value;
         });
 
         document.getElementById("shininess").addEventListener("input", function (e) {
             _this.planet._specular[3] = Number(this.value);
-            document.querySelector(".og-value.shininess").innerHTML = this.value;
+            document.querySelector(".og-value.shininess").innerText = this.value;
         });
 
         if (this.planet) {
@@ -248,18 +248,18 @@ class Lighting extends Control {
             document.getElementById("specular-b").value = this.planet._specular[2];
             document.getElementById("shininess").value = this.planet._specular[3];
 
-            document.querySelector(".og-value.ambient-r").innerHTML = this.planet._ambient[0].toString();
-            document.querySelector(".og-value.ambient-g").innerHTML = this.planet._ambient[1].toString();
-            document.querySelector(".og-value.ambient-b").innerHTML = this.planet._ambient[2].toString();
+            document.querySelector(".og-value.ambient-r").innerText = this.planet._ambient[0].toString();
+            document.querySelector(".og-value.ambient-g").innerText = this.planet._ambient[1].toString();
+            document.querySelector(".og-value.ambient-b").innerText = this.planet._ambient[2].toString();
 
-            document.querySelector(".og-value.diffuse-r").innerHTML = this.planet._diffuse[0].toString();
-            document.querySelector(".og-value.diffuse-g").innerHTML = this.planet._diffuse[1].toString();
-            document.querySelector(".og-value.diffuse-b").innerHTML = this.planet._diffuse[2].toString();
+            document.querySelector(".og-value.diffuse-r").innerText = this.planet._diffuse[0].toString();
+            document.querySelector(".og-value.diffuse-g").innerText = this.planet._diffuse[1].toString();
+            document.querySelector(".og-value.diffuse-b").innerText = this.planet._diffuse[2].toString();
 
-            document.querySelector(".og-value.specular-r").innerHTML = this.planet._specular[0].toString();
-            document.querySelector(".og-value.specular-g").innerHTML = this.planet._specular[1].toString();
-            document.querySelector(".og-value.specular-b").innerHTML = this.planet._specular[2].toString();
-            document.querySelector(".og-value.shininess").innerHTML = this.planet._specular[3].toString();
+            document.querySelector(".og-value.specular-r").innerText = this.planet._specular[0].toString();
+            document.querySelector(".og-value.specular-g").innerText = this.planet._specular[1].toString();
+            document.querySelector(".og-value.specular-b").innerText = this.planet._specular[2].toString();
+            document.querySelector(".og-value.shininess").innerText = this.planet._specular[3].toString();
         }
 
         this._fetchLayers();
@@ -277,7 +277,7 @@ class Lighting extends Control {
         this.bindLayer(e);
         let opt = document.createElement("option");
         opt.value = e.name;
-        opt.innerHTML = e.name;
+        opt.innerText = e.name;
         document.getElementById("layers").appendChild(opt);
         document.getElementById("layers").value = e.name;
     }

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/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/index.js

@@ -16,6 +16,7 @@ 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,
@@ -35,5 +36,6 @@ export {
     ZoomControl,
     MouseWheelZoomControl,
     Lighting,
-    Ruler
+    Ruler,
+    LayerAnimation
 };

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

@@ -112,12 +112,14 @@ class RulerScene extends RenderNode {
             entities: [this._trackEntity, this._propsLabel],
             pickingEnabled: false,
             polygonOffsetUnits: -1.0,
-            relativeToGround: true
+            relativeToGround: true,
+            displayInLayerSwitcher: false
         });
 
         this._cornersLayer = new Vector("corners", {
             entities: [this._cornerEntity[0], this._cornerEntity[1]],
-            pickingEnabled: true
+            pickingEnabled: true,
+            displayInLayerSwitcher: false
         });
     }
 
@@ -141,6 +143,7 @@ class RulerScene extends RenderNode {
     }
 
     _activate() {
+
         this._propsLabel.label.setVisibility(false);
         this._onLclick_ = this._onLclick.bind(this);
         this.renderer.events.on("lclick", this._onLclick_, this);
@@ -163,6 +166,7 @@ class RulerScene extends RenderNode {
 
         this._planet.addLayer(this._trackLayer);
         this._planet.addLayer(this._cornersLayer);
+
     }
 
     _deactivate() {

package/src/og/control/visibleExtent/Segment.js

@@ -400,8 +400,9 @@ class Segment {
      * @param {Float32Array} elevations - Elevation data.
      */
     elevationsExists(elevations) {
+        const segment = this;
         if (this.plainReady && this.terrainIsLoading) {
-            this.planet._terrainWorker.make(this, elevations);
+            this.planet._terrainWorker.make(segment, elevations);
 
             this.plainVerticesHigh = null;
             this.plainVerticesLow = null;

package/src/og/ellipsoid/wgs84.js

@@ -10,4 +10,4 @@ import { Ellipsoid } from "./Ellipsoid.js";
  * WGS84 ellipsoid object.
  * @type {Ellipsoid}
  */
-export const wgs84 = new Ellipsoid(6378137.0, 6356752.3142);
+export const wgs84 = new Ellipsoid(6378137.0, 6356752.3142); // Equitorial Radius (m), Polar Radius (m)

package/src/og/entity/LabelHandler.js

@@ -85,7 +85,8 @@ class LabelHandler extends BillboardHandler {
     }
 
     _addLabelToArrays(label) {
-        this._renderer.labelWorker.make(this, label);
+        this._renderer.labelWorker.make(label);
+        console.time(`label${label.id}`)
     }
 
     assignFontAtlas(label) {
@@ -121,6 +122,8 @@ class LabelHandler extends BillboardHandler {
             label.update();
 
             this.refresh();
+            console.timeEnd(`label${label.id}`)
+            console.log(label)
         }
     }
 
@@ -386,7 +389,7 @@ class LabelHandler extends BillboardHandler {
         if (isRTL) {
             _rtl_ = RTL;
         }
-        
+
         let offset = 0.0;
         let kern = fa.kernings;
 

package/src/og/entity/LabelWorker.js

@@ -2,76 +2,61 @@
 
 // import { QueueArray } from '../QueueArray.js';
 
+import { BaseWorker } from "../utils/BaseWorker.js";
+
 export const LOCK_UPDATE = -2;
 export const LOCK_FREE = -1;
 
-class LabelWorker {
+class LabelWorker extends BaseWorker {
     constructor(numWorkers = 4) {
-        this._id = 0;
-        this._source = {};
-
-        this._freeWorkerQueue = []; //new QueueArray(numWorkers);
-        var labelProgramm = new Blob([_programm], { type: "application/javascript" });
-
-        var that = this;
-
-        for (let i = 0; i < numWorkers; i++) {
-            var w = new Worker(URL.createObjectURL(labelProgramm));
-            w.onmessage = function (e) {
-
-                let s = that._source[e.data.id];
-
-                if (s.label._lockId === LOCK_UPDATE) {
-                    that.make(s.handler, s.label);
-                } else {
-                    s.handler.workerCallback(e.data, s.label);
-                }
+        super(numWorkers, _programm);
+        this._source = new Map();
+    }
 
-                that._source[e.data.id] = null;
-                delete that._source[e.data.id];
-                that._freeWorkerQueue.unshift(this);
+    _onMessage(e) {
 
-                that.check();
-            };
+        let label = this._source.get(e.data.id);
 
-            this._freeWorkerQueue.push(w);
+        if (label._lockId === LOCK_UPDATE) {
+            requestAnimationFrame(() => {
+                this.make(label);
+            });
+        } else {
+            label._handler.workerCallback(e.data, label);
         }
 
-        this._pendingQueue = []; //new QueueArray(512);
-    }
+        this._source.delete(e.data.id);
+        super._onMessage(e)
 
-    check() {
-        if (this._pendingQueue.length) {
-            var p = this._pendingQueue.pop();
-            this.make(p.handler, p.label);
-        }
+        this.check();
     }
 
-    make(handler, label) {
 
+    make() {
+        const label = arguments[0],
+        handler = label._handler;
         if (handler._entityCollection) {
-            let source = { handler: handler, label: label };
 
-            if (this._freeWorkerQueue.length) {
-                var w = this._freeWorkerQueue.pop();
+            if (this._workerQueue.length) {
+                var w = this._workerQueue.pop();
 
-                this._source[this._id] = source;
+                this._source.set(this._id, label);
 
                 let labelData = new Float32Array([
-                /*0*/this._id++,
-                /*1*/handler._maxLetters,
-                /*2*/label.getVisibility() ? 1 : 0,
-                /*3, 4, 5*/label._positionHigh.x, label._positionHigh.y, label._positionHigh.z,
-                /*6, 7, 8*/label._positionLow.x, label._positionLow.y, label._positionLow.z,
-                /*9*/label._size,
-                /*10, 11, 12*/label._offset.x, label._offset.y, label._offset.z,
-                /*13, 14, 15, 16*/label._color.x, label._color.y, label._color.z, label._color.w,
-                /*17*/label._rotation,
-                /*18, 19, 20*/label._alignedAxis.x, label._alignedAxis.y, label._alignedAxis.z,
-                /*21*/label._fontIndex,
-                /*22*/label._outline,
-                /*23, 24, 25, 26*/label._outlineColor.x, label._outlineColor.y, label._outlineColor.z, label._outlineColor.w,
-                /*27, 28, 29*/label._entity._pickingColor.x, label._entity._pickingColor.y, label._entity._pickingColor.z
+                    /*0*/this._id++,
+                    /*1*/handler._maxLetters,
+                    /*2*/label.getVisibility() ? 1 : 0,
+                    /*3, 4, 5*/label._positionHigh.x, label._positionHigh.y, label._positionHigh.z,
+                    /*6, 7, 8*/label._positionLow.x, label._positionLow.y, label._positionLow.z,
+                    /*9*/label._size,
+                    /*10, 11, 12*/label._offset.x, label._offset.y, label._offset.z,
+                    /*13, 14, 15, 16*/label._color.x, label._color.y, label._color.z, label._color.w,
+                    /*17*/label._rotation,
+                    /*18, 19, 20*/label._alignedAxis.x, label._alignedAxis.y, label._alignedAxis.z,
+                    /*21*/label._fontIndex,
+                    /*22*/label._outline,
+                    /*23, 24, 25, 26*/label._outlineColor.x, label._outlineColor.y, label._outlineColor.z, label._outlineColor.w,
+                    /*27, 28, 29*/label._entity._pickingColor.x, label._entity._pickingColor.y, label._entity._pickingColor.z
                 ]);
 
                 label._lockId = this._id;
@@ -82,7 +67,7 @@ class LabelWorker {
                     labelData.buffer,
                 ]);
             } else {
-                this._pendingQueue.push(source);
+                this._pendingQueue.push(label);
             }
         }
     }