@openglobus/og 0.11.7 → 0.11.8

package/css/og.css

@@ -50,7 +50,7 @@
     height: 19px;
     position: absolute;
     background-color: rgba(22, 76, 155, 1) !important;
-    z-index: 12000;
+    z-index: 35000;
 }
 
 .ogAttribution {
@@ -153,7 +153,7 @@
     right: 0px;
     width: 17em;
     background-color: rgba(22, 76, 155, 0.4);
-    z-index: 5000;
+    z-index: 25000;
     padding: 0 0 0 10px;
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
     border-radius: 2px;
@@ -448,6 +448,7 @@
 
     .og-lighing .og-value {
         float: left;
+	width: 50px;
     }
 
     .og-lighing #layers {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "[OpenGlobus](http://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"

package/src/og/control/Lighting.js

@@ -29,22 +29,9 @@ const TEMPLATE = `<div class="og-lighing">
             </div>
             <div class="og-value exposure"></div>
          </div>
-       </div>
-       
-       <div class="og-layers">
-         <div class="og-caption">Select layer:</div>
-         <select id="layers"></select>
-       </div>
+       </div>      
       
        <div class="og-color-options">
-         <div class="og-caption">Opacity</div>
-         <div class="og-option">
-            <div class="og-label">A</div>
-            <div class="og-slider">
-                <input type="range" id="opacity" name="opacity" value="0.0" min="0.0" max="2.0" step="0.01" />
-            </div>
-            <div class="og-value opacity"></div>
-         </div>
          <div class="og-caption">Ambient</div>
          <div class="og-option">
             <div class="og-label">R</div>
@@ -123,6 +110,21 @@ const TEMPLATE = `<div class="og-lighing">
             <div class="og-value shininess"></div>
          </div>
        </div>
+
+       <div class="og-layers">
+         <div class="og-caption">Select layer:</div>
+         <select id="layers"></select>
+       </div>
+
+        <div class="og-caption">Opacity</div>
+            <div class="og-option">
+            <div class="og-label">A</div>
+            <div class="og-slider">
+                <input type="range" id="opacity" name="opacity" value="0.0" min="0.0" max="2.0" step="0.01" />
+            </div>
+            <div class="og-value opacity"></div>
+        </div>
+
     </div>`;
 
 /**
@@ -142,36 +144,7 @@ class Lighting extends Control {
         this._selectedLayer = layer;
 
         document.getElementById("opacity").value = layer.opacity;
-
-        document.getElementById("ambient-r").value = layer.ambient.x;
-        document.getElementById("ambient-g").value = layer.ambient.y;
-        document.getElementById("ambient-b").value = layer.ambient.z;
-
-        document.getElementById("diffuse-r").value = layer.diffuse.x;
-        document.getElementById("diffuse-g").value = layer.diffuse.y;
-        document.getElementById("diffuse-b").value = layer.diffuse.z;
-
-        document.getElementById("specular-r").value = layer.specular.x;
-        document.getElementById("specular-g").value = layer.specular.y;
-        document.getElementById("specular-b").value = layer.specular.z;
-
-        document.getElementById("shininess").value = layer.shininess;
-
         document.querySelector(".og-value.opacity").innerHTML = layer.opacity.toString();
-
-        document.querySelector(".og-value.ambient-r").innerHTML = layer.ambient.x.toString();
-        document.querySelector(".og-value.ambient-g").innerHTML = layer.ambient.y.toString();
-        document.querySelector(".og-value.ambient-b").innerHTML = layer.ambient.z.toString();
-
-        document.querySelector(".og-value.diffuse-r").innerHTML = layer.diffuse.x.toString();
-        document.querySelector(".og-value.diffuse-g").innerHTML = layer.diffuse.y.toString();
-        document.querySelector(".og-value.diffuse-b").innerHTML = layer.diffuse.z.toString();
-
-        document.querySelector(".og-value.specular-r").innerHTML = layer.specular.x.toString();
-        document.querySelector(".og-value.specular-g").innerHTML = layer.specular.y.toString();
-        document.querySelector(".og-value.specular-b").innerHTML = layer.specular.z.toString();
-
-        document.querySelector(".og-value.shininess").innerHTML = layer.shininess.toString();
     }
 
     oninit() {
@@ -215,72 +188,78 @@ class Lighting extends Control {
         });
 
         document.getElementById("ambient-r").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.ambient.x = Number(this.value);
-            }
+            _this.planet._ambient[0] = Number(this.value);
             document.querySelector(".og-value.ambient-r").innerHTML = this.value;
         });
         document.getElementById("ambient-g").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.ambient.y = Number(this.value);
-            }
+            _this.planet._ambient[1] = Number(this.value);
             document.querySelector(".og-value.ambient-g").innerHTML = this.value;
         });
         document.getElementById("ambient-b").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.ambient.z = Number(this.value);
-            }
+            _this.planet._ambient[2] = Number(this.value);
             document.querySelector(".og-value.ambient-b").innerHTML = this.value;
         });
 
         document.getElementById("diffuse-r").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.diffuse.x = Number(this.value);
-            }
+            _this.planet._diffuse[0] = Number(this.value);
             document.querySelector(".og-value.diffuse-r").innerHTML = this.value;
         });
         document.getElementById("diffuse-g").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.diffuse.y = Number(this.value);
-            }
+            _this.planet._diffuse[1] = Number(this.value);
             document.querySelector(".og-value.diffuse-g").innerHTML = this.value;
         });
         document.getElementById("diffuse-b").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.diffuse.z = Number(this.value);
-            }
+            _this.planet._diffuse[2] = Number(this.value);
             document.querySelector(".og-value.diffuse-b").innerHTML = this.value;
         });
 
         document.getElementById("specular-r").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.specular.x = Number(this.value);
-            }
+            _this.planet._specular[0] = Number(this.value);
             document.querySelector(".og-value.specular-r").innerHTML = this.value;
         });
         document.getElementById("specular-g").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.specular.y = Number(this.value);
-            }
+            _this.planet._specular[1] = Number(this.value);
             document.querySelector(".og-value.specular-g").innerHTML = this.value;
         });
         document.getElementById("specular-b").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.specular.z = Number(this.value);
-            }
+            _this.planet._specular[2] = Number(this.value);
             document.querySelector(".og-value.specular-b").innerHTML = this.value;
         });
 
         document.getElementById("shininess").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.shininess = Number(this.value);
-            }
+            _this.planet._specular[3] = Number(this.value);
             document.querySelector(".og-value.shininess").innerHTML = this.value;
         });
 
         if (this.planet) {
             this.planet.events.on("layeradd", this._onLayerAdd, this);
             this.planet.events.on("layerremove", this._onLayerRemove, this);
+
+            document.getElementById("ambient-r").value = this.planet._ambient[0];
+            document.getElementById("ambient-g").value = this.planet._ambient[1];
+            document.getElementById("ambient-b").value = this.planet._ambient[2];
+
+            document.getElementById("diffuse-r").value = this.planet._diffuse[0];
+            document.getElementById("diffuse-g").value = this.planet._diffuse[1];
+            document.getElementById("diffuse-b").value = this.planet._diffuse[2];
+
+            document.getElementById("specular-r").value = this.planet._specular[0];
+            document.getElementById("specular-g").value = this.planet._specular[1];
+            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.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.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();
         }
 
         this._fetchLayers();

package/src/og/control/MouseNavigation.js

@@ -46,7 +46,9 @@ class MouseNavigation extends Control {
 
         this._lmbDoubleClickActive = true;
 
-        this.minSlope = options.minSlope || 0.1;
+        this.minSlope = options.minSlope || 0.1;
+
+        this._wheelDirection = +1;
 
         this._keyLock = new Key();
     }
@@ -73,7 +75,7 @@ class MouseNavigation extends Control {
             var d = a ? (delta * cam.eye.distance(a)) / stepsCount : 1000;
 
             if (forward) {
-                d = -d;
+                d = -1.25*d;
             } else {
                 d *= 2;
             }
@@ -224,7 +226,10 @@ class MouseNavigation extends Control {
             ms,
             event.wheelDelta > 0,
             ms.direction
-        );
+        );
+
+        this._wheelDirection = event.wheelDelta;
+
         if (this.stepsForward) {
             this.stepIndex = this.stepsCount;
         }
@@ -240,7 +245,7 @@ class MouseNavigation extends Control {
     onMouseLeftButtonDoubleClick() {
         this.planet.stopFlying();
         this.stopRotation();
-        var p = this.planet.getCartesianFromPixelTerrain(this.renderer.events.mouseState, true);
+        var p = this.planet.getCartesianFromPixelTerrain(this.renderer.events.mouseState);
         if (p) {
             var g = this.planet.ellipsoid.cartesianToLonLat(p);
             if (this.renderer.events.isKeyPressed(input.KEY_ALT)) {
@@ -258,8 +263,9 @@ class MouseNavigation extends Control {
     onMouseLeftButtonClick() {
         if (this._active) {
             this.renderer.handler.canvas.classList.add("ogGrabbingPoiner");
-            this.grabbedPoint = this.planet.getCartesianFromMouseTerrain(true);
-            if (this.grabbedPoint) {
+            this.grabbedPoint = this.planet.getCartesianFromMouseTerrain();
+            if (this.grabbedPoint) {
+                this.renderer.isActiveBackBuffers = false;
                 this._eye0.copy(this.renderer.activeCamera.eye);
                 this.grabbedSpheroid.radius = this.grabbedPoint.length();
                 this.stopRotation();
@@ -274,7 +280,8 @@ class MouseNavigation extends Control {
         this.planet._normalMapCreator.free(this._keyLock);
     }
 
-    onMouseLeftButtonUp(e) {
+    onMouseLeftButtonUp(e) {
+        this.renderer.isActiveBackBuffers = true;
         this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
         if (e.x === e.prev_x && e.y === e.prev_y) {
             this.scaleRot = 0.0;
@@ -331,20 +338,14 @@ class MouseNavigation extends Control {
     onMouseRightButtonClick(e) {
         this.stopRotation();
         this.planet.stopFlying();
-        this.pointOnEarth = this.planet.getCartesianFromPixelTerrain(
-            {
-                x: e.x,
-                y: e.y
-            },
-            true
-        );
+        this.pointOnEarth = this.planet.getCartesianFromPixelTerrain(e);
         if (this.pointOnEarth) {
             this.earthUp = this.pointOnEarth.normal();
         }
     }
 
     onMouseRightButtonDown(e) {
-        var cam = this.renderer.activeCamera;
+        var cam = this.renderer.activeCamera;
 
         if (this.pointOnEarth && this.renderer.events.mouseState.moving) {
             this.renderer.controlsBag.scaleRot = 1.0;
@@ -385,9 +386,11 @@ class MouseNavigation extends Control {
                 r.controlsBag.scaleRot = 1.0;
                 var sf = this.stepsForward[this.stepsCount - this.stepIndex--];
 
-                let maxAlt = cam.maxAltitude + this.planet.ellipsoid._a;
-
-                if (sf.eye.length() > maxAlt) {
+                let maxAlt = cam.maxAltitude + this.planet.ellipsoid._b;
+                let minAlt = cam.minAltitude + this.planet.ellipsoid._b;
+                const camAlt = sf.eye.length();
+                if (camAlt > maxAlt || camAlt < minAlt && this._wheelDirection > 0) {
+                    this._wheelDirection = +1;
                     return;
                 }
 

package/src/og/control/MouseWheelZoomControl.js

@@ -0,0 +1,257 @@
+/**
+ * @module og/control/MouseWheelZoomControl
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { Key } from "../Lock.js";
+import { Quat } from "../math/Quat.js";
+import { Sphere } from "../bv/Sphere.js";
+import { Vec3 } from "../math/Vec3.js";
+import { MouseNavigation } from "./MouseNavigation.js";
+
+/**
+ * Planet zoom buttons control.
+ * @class
+ * @extends {Control}
+ * @params {Object} [options] - Control options.
+ */
+class MouseWheelZoomControl extends Control {
+    constructor(options) {
+        super(options);
+
+        this._name = "MouseWheelZoomControl";
+
+        options = options || {};
+
+        this.grabbedPoint = new Vec3();
+        this._eye0 = new Vec3();
+        this.pointOnEarth = new Vec3();
+        this.earthUp = new Vec3();
+        this.inertia = 0.007;
+        this.grabbedSpheroid = new Sphere();
+        this.planet = null;
+        this.qRot = new Quat();
+        this.scaleRot = 0.0;
+
+        this.distDiff = 0.3;
+        this.stepsCount = 8;
+        this.stepsForward = null;
+        this.stepIndex = 0;
+
+        this._lmbDoubleClickActive = true;
+
+        this.minSlope = options.minSlope || 0.1;
+
+        this._keyLock = new Key();
+    }
+
+    oninit() {
+        var zoomDiv = document.createElement("div"),
+            btnZoomIn = document.createElement("button"),
+            btnZoomOut = document.createElement("button");
+
+        zoomDiv.className = "ogZoomControl";
+        btnZoomIn.className = "ogZoomButton ogZoomIn";
+        btnZoomOut.className = "ogZoomButton ogZoomOut";
+
+        zoomDiv.appendChild(btnZoomIn);
+        zoomDiv.appendChild(btnZoomOut);
+
+        this.renderer.div.appendChild(zoomDiv);
+
+        btnZoomIn.addEventListener("mousedown", (e) => this.zoomIn());
+        btnZoomIn.addEventListener("mouseup", (e) => this.stopZoom());
+
+        btnZoomOut.addEventListener("mousedown", (e) => this.zoomOut());
+        btnZoomOut.addEventListener("mouseup", (e) => this.stopZoom());
+
+        btnZoomIn.addEventListener("touchstart", (e) => {
+            e.preventDefault();
+            this.zoomIn();
+        });
+        btnZoomIn.addEventListener("touchend", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+        btnZoomIn.addEventListener("touchcancel", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+
+        btnZoomOut.addEventListener("touchstart", (e) => {
+            e.preventDefault();
+            this.zoomOut();
+        });
+        btnZoomOut.addEventListener("touchend", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+        btnZoomOut.addEventListener("touchcancel", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+
+        this.renderer.events.on("draw", this._draw, this);
+    }
+
+    /**
+     * Planet zoom in.
+     * @public
+     */
+    zoomIn() {
+        if (this.stepIndex) {
+            return;
+        }
+
+        this.planet.stopFlying();
+
+        this.stopRotation();
+
+        this._deactivate = true;
+
+        this.planet.layerLock.lock(this._keyLock);
+        this.planet.terrainLock.lock(this._keyLock);
+        this.planet._normalMapCreator.lock(this._keyLock);
+
+        this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(
+            this.renderer.activeCamera,
+            this.planet,
+            this.stepsCount,
+            this.distDiff,
+            this.renderer.getCenter(),
+            true,
+           null
+        );
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+
+    /**
+     * Planet zoom out.
+     * @public
+     */
+    zoomOut() {
+        if (this.stepIndex) {
+            return;
+        }
+
+        this.planet.stopFlying();
+
+        this.stopRotation();
+
+        this._deactivate = true;
+
+        this.planet.layerLock.lock(this._keyLock);
+        this.planet.terrainLock.lock(this._keyLock);
+        this.planet._normalMapCreator.lock(this._keyLock);
+        
+        this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(
+            this.renderer.activeCamera,
+            this.planet,
+            this.stepsCount,
+            this.distDiff,
+            this.renderer.getCenter(),
+            false,
+           null
+        );
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+
+    stopRotation() {
+        this.qRot.clear();
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
+
+    stopZoom() {
+        this._move = 0;
+
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
+
+    _draw(e) {
+        if (this._active) {
+            var r = this.renderer;
+            var cam = r.activeCamera;
+            var prevEye = cam.eye.clone();
+
+            if (this.stepIndex) {
+                r.controlsBag.scaleRot = 1.0;
+                var sf = this.stepsForward[this.stepsCount - this.stepIndex--];
+
+                let maxAlt = cam.maxAltitude + this.planet.ellipsoid._a;
+                let minAlt = cam.minAltitude + this.planet.ellipsoid._a;
+                const camAlt = sf.eye.length();
+                if (camAlt > maxAlt || camAlt < minAlt) {
+                    return;
+                }
+
+                cam.eye = sf.eye;
+                cam._v = sf.v;
+                cam._u = sf.u;
+                cam._n = sf.n;
+
+                cam.checkTerrainCollision();
+
+                cam.update();
+            } else {
+                if (this._deactivate) {
+                    this._deactivate = false;
+
+                    this.planet.layerLock.free(this._keyLock);
+                    this.planet.terrainLock.free(this._keyLock);
+                    this.planet._normalMapCreator.free(this._keyLock);
+                }
+            }
+
+            if (r.events.mouseState.leftButtonDown || !this.scaleRot) {
+                return;
+            }
+
+            this.scaleRot -= this.inertia;
+            if (this.scaleRot <= 0.0) {
+                this.scaleRot = 0.0;
+            } else {
+                r.controlsBag.scaleRot = this.scaleRot;
+                var rot = this.qRot
+                    .slerp(Quat.IDENTITY, 1.0 - this.scaleRot * this.scaleRot * this.scaleRot)
+                    .normalize();
+                if (!(rot.x || rot.y || rot.z)) {
+                    this.scaleRot = 0.0;
+                }
+                cam.eye = rot.mulVec3(cam.eye);
+                cam._v = rot.mulVec3(cam._v);
+                cam._u = rot.mulVec3(cam._u);
+                cam._n = rot.mulVec3(cam._n);
+
+                cam.checkTerrainCollision();
+
+                cam.update();
+            }
+
+            if (cam.eye.distance(prevEye) / cam._terrainAltitude > 0.01) {
+                this.planet.layerLock.lock(this._keyLock);
+                this.planet.terrainLock.lock(this._keyLock);
+                this.planet._normalMapCreator.lock(this._keyLock);
+            } else {
+                this.planet.layerLock.free(this._keyLock);
+                this.planet.terrainLock.free(this._keyLock);
+                this.planet._normalMapCreator.free(this._keyLock);
+            }
+        }
+    }
+}
+
+export function mouseWheelZoomControl(options) {
+    return new MouseWheelZoomControl(options);
+}
+
+export { MouseWheelZoomControl };

package/src/og/control/index.js

@@ -13,6 +13,7 @@ import { SimpleNavigation } from "./SimpleNavigation.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";
 
 export {
@@ -31,5 +32,6 @@ export {
     ShowFps,
     Sun,
     ZoomControl,
+    MouseWheelZoomControl,
     Lighting
 };