@openglobus/og 0.10.3 → 0.10.6

package/src/og/control/EarthNavigation.js

@@ -0,0 +1,259 @@
+"use strict";
+
+import * as math from "../math.js";
+import { Control } from "./Control.js";
+import { input } from "../input/input.js";
+import { Key } from "../Lock.js";
+import { LonLat } from "../LonLat.js";
+import { Mat4 } from "../math/Mat4.js";
+import { Quat } from "../math/Quat.js";
+import { Ray } from "../math/Ray.js";
+import { Sphere } from "../bv/Sphere.js";
+import { Vec3 } from "../math/Vec3.js";
+
+class EarthNavigation extends Control {
+    constructor(options) {
+        super(options);
+
+        this.grabbedPoint = new Vec3();
+        this.inertia = 0.007;
+        this.grabbedSpheroid = new Sphere();
+        this.planet = null;
+        this._vRot = new Quat();
+        this._hRot = new Quat();
+        this._a = 0.0;
+        this.scaleRot = 0;
+        this.currState = 0;
+
+        this.positionState = [
+            { h: 17119745.303455353, max: 0.99, min: -0.99 },
+            { h: 6866011, max: 0.99, min: -0.99 },
+            { h: 3000000, max: 0.99, min: -0.99 },
+            { h: 1000000, max: 0.99, min: -0.99 },
+            { h: 500000, max: 0.99, min: -0.99 }
+        ];
+
+        var Touch = function () {
+            this.x = 0;
+            this.y = 0;
+            this.prev_x = 0;
+            this.prev_y = 0;
+            this.grabbedPoint = new Vec3();
+            this.grabbedSpheroid = new Sphere();
+            this.dX = function () {
+                return this.x - this.prev_x;
+            };
+            this.dY = function () {
+                return this.y - this.prev_y;
+            };
+        };
+
+        this.touches = [new Touch(), new Touch()];
+    }
+
+    switchZoomState(wheelDelta) {
+        this.stopRotation();
+
+        if (wheelDelta > 0) {
+            this.currState++;
+        } else {
+            this.currState--;
+        }
+
+        if (this.currState <= 0) this.currState = 0;
+
+        if (this.currState >= this.positionState.length) {
+            this.currState = this.positionState.length - 1;
+        }
+
+        this.planet.stopFlying();
+
+        var ll = this.renderer.activeCamera._lonLat;
+
+        globus.planet.flyLonLat(new LonLat(ll.lon, ll.lat, this.positionState[this.currState].h));
+    }
+
+    onMouseWheel(event) {
+        this.switchZoomState(event.wheelDelta);
+    }
+
+    oninit() {
+        this.activate();
+    }
+
+    onactivate() {
+        this.planet = this.renderer.renderNodes.Earth;
+
+        this.renderer.events.on("mousewheel", this.onMouseWheel, this);
+        this.renderer.events.on("lhold", this.onMouseLeftButtonDown, this);
+        this.renderer.events.on("ldown", this.onMouseLeftButtonClick, this);
+        this.renderer.events.on("lup", this.onMouseLeftButtonUp, this);
+
+        this.renderer.events.on("touchstart", this.onTouchStart, this);
+        this.renderer.events.on("touchend", this.onTouchEnd, this);
+        this.renderer.events.on("touchmove", this.onTouchMove, this);
+
+        this.renderer.events.on("draw", this.onDraw, this);
+    }
+
+    onTouchStart(e) {
+        if (e.sys.touches.length == 1) {
+            var t = this.touches[0];
+
+            t.x = e.sys.touches.item(0).pageX - e.sys.offsetLeft;
+            t.y = e.sys.touches.item(0).pageY - e.sys.offsetTop;
+            t.prev_x = e.sys.touches.item(0).pageX - e.sys.offsetLeft;
+            t.prev_y = e.sys.touches.item(0).pageY - e.sys.offsetTop;
+
+            t.grabbedPoint = this.planet.getCartesianFromPixelTerrain(t, true);
+
+            if (t.grabbedPoint) {
+                t.grabbedSpheroid.radius = t.grabbedPoint.length();
+                this.stopRotation();
+            }
+        }
+    }
+
+    onTouchEnd(e) {
+        if (e.sys.touches.length == 0) {
+            this.scaleRot = 1;
+
+            if (
+                Math.abs(this.touches[0].x - this.touches[0].prev_x) < 3 &&
+                Math.abs(this.touches[0].y - this.touches[0].prev_y) < 3
+            )
+                this.stopRotation();
+        }
+    }
+
+    onTouchMove(e) {
+        if (e.sys.touches.length == 1) {
+            var cam = this.renderer.activeCamera;
+
+            var t = this.touches[0];
+
+            t.prev_x = t.x;
+            t.prev_y = t.y;
+            t.x = e.sys.touches.item(0).pageX - e.sys.offsetLeft;
+            t.y = e.sys.touches.item(0).pageY - e.sys.offsetTop;
+
+            if (!t.grabbedPoint) return;
+
+            var direction = cam.unproject(t.x, t.y);
+            var targetPoint = new Ray(cam.eye, direction).hitSphere(t.grabbedSpheroid);
+
+            if (targetPoint) {
+                this._a =
+                    Math.acos(t.grabbedPoint.y / t.grabbedSpheroid.radius) -
+                    Math.acos(targetPoint.y / t.grabbedSpheroid.radius);
+                this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+                this._hRot = Quat.getRotationBetweenVectors(
+                    new Vec3(targetPoint.x, 0.0, targetPoint.z).normal(),
+                    new Vec3(t.grabbedPoint.x, 0.0, t.grabbedPoint.z).normal()
+                );
+                var rot = this._hRot.mul(this._vRot);
+
+                var state = this.positionState[this.currState];
+                var lim = rot.mulVec3(cam.eye).normal().dot(Vec3.UP);
+                if (lim > state.max || lim < state.min) {
+                    rot = Quat.yRotation(rot.getYaw());
+                }
+
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.UP);
+                cam.update();
+            }
+        }
+    }
+
+    onMouseLeftButtonClick() {
+        this.renderer.handler.gl.canvas.classList.add("ogGrabbingPoiner");
+        this.grabbedPoint = this.planet.getCartesianFromMouseTerrain(true);
+        if (this.grabbedPoint) {
+            this.grabbedSpheroid.radius = this.grabbedPoint.length();
+            this.stopRotation();
+        }
+    }
+
+    stopRotation() {
+        this.scaleRot = 0.0;
+        this._a = 0.0;
+        this._vRot.clear();
+        this._hRot.clear();
+    }
+
+    onMouseLeftButtonUp(e) {
+        this.scaleRot = 1;
+        this.renderer.handler.gl.canvas.classList.remove("ogGrabbingPoiner");
+
+        if (Math.abs(e.x - e.prev_x) < 3 && Math.abs(e.y - e.prev_y) < 3) this.stopRotation();
+    }
+
+    onMouseLeftButtonDown(e) {
+        var cam = this.renderer.activeCamera;
+
+        if (!this.grabbedPoint || cam.isFlying()) return;
+
+        if (this.renderer.events.mouseState.moving) {
+            var targetPoint = new Ray(cam.eye, e.direction).hitSphere(this.grabbedSpheroid);
+
+            if (targetPoint) {
+                this._a =
+                    Math.acos(this.grabbedPoint.y / this.grabbedSpheroid.radius) -
+                    Math.acos(targetPoint.y / this.grabbedSpheroid.radius);
+
+                this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+                this._hRot = Quat.getRotationBetweenVectors(
+                    new Vec3(targetPoint.x, 0.0, targetPoint.z).normal(),
+                    new Vec3(this.grabbedPoint.x, 0.0, this.grabbedPoint.z).normal()
+                );
+                var rot = this._hRot.mul(this._vRot);
+
+                var state = this.positionState[this.currState];
+                var lim = rot.mulVec3(cam.eye).normal().dot(Vec3.UP);
+                if (lim > state.max || lim < state.min) {
+                    rot = Quat.yRotation(rot.getYaw());
+                }
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.UP);
+                cam.update();
+            }
+        } else {
+            this.scaleRot = 0;
+        }
+    }
+
+    onDraw(e) {
+        var r = this.renderer;
+        var cam = r.activeCamera;
+
+        if (r.events.mouseState.leftButtonDown || !this.scaleRot || cam.isFlying()) return;
+
+        this.scaleRot -= this.inertia;
+        if (this.scaleRot <= 0) {
+            this.scaleRot = 0;
+        } else {
+            this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+            var rot = this._vRot.mul(this._hRot);
+
+            var lim = rot.mulVec3(cam.eye).normal().dot(Vec3.UP);
+
+            var state = this.positionState[this.currState];
+
+            if (lim > state.max || lim < state.min) {
+                rot = Quat.yRotation(rot.getYaw());
+            }
+
+            r.controlsBag.scaleRot = this.scaleRot;
+            rot = rot
+                .slerp(Quat.IDENTITY, 1 - this.scaleRot * this.scaleRot * this.scaleRot)
+                .normalize();
+            if (!(rot.x || rot.y || rot.z)) {
+                this.scaleRot = 0;
+            }
+
+            cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.UP);
+            cam.update();
+        }
+    }
+}
+
+export { EarthNavigation };

package/src/og/control/MouseNavigation.js

@@ -2,18 +2,18 @@
  * @module og/control/MouseNavigation
  */
 
-'use strict';
-
-import * as math from '../math.js';
-import { Control } from './Control.js';
-import { input } from '../input/input.js';
-import { Key } from '../Lock.js';
-import { LonLat } from '../LonLat.js';
-import { Mat4 } from '../math/Mat4.js';
-import { Quat } from '../math/Quat.js';
-import { Ray } from '../math/Ray.js';
-import { Sphere } from '../bv/Sphere.js';
-import { Vec3 } from '../math/Vec3.js';
+"use strict";
+
+import * as math from "../math.js";
+import { Control } from "./Control.js";
+import { input } from "../input/input.js";
+import { Key } from "../Lock.js";
+import { LonLat } from "../LonLat.js";
+import { Mat4 } from "../math/Mat4.js";
+import { Quat } from "../math/Quat.js";
+import { Ray } from "../math/Ray.js";
+import { Sphere } from "../bv/Sphere.js";
+import { Vec3 } from "../math/Vec3.js";
 
 /**
  * Mouse planet camera dragging control.
@@ -46,11 +46,12 @@ class MouseNavigation extends Control {
 
         this._lmbDoubleClickActive = true;
 
+        this.minSlope = options.minSlope || 0.1;
+
         this._keyLock = new Key();
     }
 
     static getMovePointsFromPixelTerrain(cam, planet, stepsCount, delta, point, forward, dir) {
-
         var steps = [];
 
         var eye = cam.eye.clone(),
@@ -65,12 +66,11 @@ class MouseNavigation extends Control {
         }
 
         if (a) {
-
             if (!dir) {
                 dir = Vec3.sub(a, cam.eye).normalize();
             }
 
-            var d = a ? delta * cam.eye.distance(a) / stepsCount : 1000;
+            var d = a ? (delta * cam.eye.distance(a)) / stepsCount : 1000;
 
             if (forward) {
                 d = -d;
@@ -163,7 +163,7 @@ class MouseNavigation extends Control {
         this.renderer.events.off("ldblclick", this.onMouseLeftButtonDoubleClick);
         this.renderer.events.off("mouseleave", this.onMouseLeave);
         this.renderer.events.off("mouseenter", this.onMouseEnter);
-    };
+    }
 
     activateDoubleClickZoom() {
         if (!this._lmbDoubleClickActive) {
@@ -180,8 +180,16 @@ class MouseNavigation extends Control {
     }
 
     onMouseEnter(e) {
-        if (this.renderer.events.isKeyPressed(input.KEY_ALT)) {
-            this.renderer.events.releaseKeys();
+        const renderEvents = this.renderer.events;
+        if (renderEvents.isKeyPressed(input.KEY_ALT)) {
+            renderEvents.releaseKeys();
+        }
+
+        renderEvents.updateButtonsStates(e.buttons);
+        if (renderEvents.mouseState.leftButtonDown) {
+            this.renderer.handler.canvas.classList.add("ogGrabbingPoiner");
+        } else {
+            this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
         }
     }
 
@@ -189,10 +197,10 @@ class MouseNavigation extends Control {
         if (this.renderer.events.mouseState.leftButtonDown) {
             this.scaleRot = 0;
         }
+        this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
     }
 
     onMouseWheel(event) {
-
         if (this.stepIndex) {
             return;
         }
@@ -208,8 +216,15 @@ class MouseNavigation extends Control {
         this.planet._normalMapCreator.lock(this._keyLock);
 
         var ms = this.renderer.events.mouseState;
-        this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(this.renderer.activeCamera,
-            this.planet, this.stepsCount, this.distDiff, ms, event.wheelDelta > 0, ms.direction);
+        this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(
+            this.renderer.activeCamera,
+            this.planet,
+            this.stepsCount,
+            this.distDiff,
+            ms,
+            event.wheelDelta > 0,
+            ms.direction
+        );
         if (this.stepsForward) {
             this.stepIndex = this.stepsCount;
         }
@@ -229,9 +244,13 @@ class MouseNavigation extends Control {
         if (p) {
             var g = this.planet.ellipsoid.cartesianToLonLat(p);
             if (this.renderer.events.isKeyPressed(input.KEY_ALT)) {
-                this.planet.flyLonLat(new LonLat(g.lon, g.lat, this.renderer.activeCamera.eye.distance(p) * 2.0));
+                this.planet.flyLonLat(
+                    new LonLat(g.lon, g.lat, this.renderer.activeCamera.eye.distance(p) * 2.0)
+                );
             } else {
-                this.planet.flyLonLat(new LonLat(g.lon, g.lat, this.renderer.activeCamera.eye.distance(p) * 0.57));
+                this.planet.flyLonLat(
+                    new LonLat(g.lon, g.lat, this.renderer.activeCamera.eye.distance(p) * 0.57)
+                );
             }
         }
     }
@@ -264,7 +283,6 @@ class MouseNavigation extends Control {
 
     onMouseLeftButtonDown(e) {
         if (this._active) {
-
             if (!this.grabbedPoint) {
                 return;
             }
@@ -272,14 +290,16 @@ class MouseNavigation extends Control {
             this.planet.stopFlying();
 
             if (this.renderer.events.mouseState.moving) {
-
                 var cam = this.renderer.activeCamera;
 
                 if (cam.slope > 0.2) {
                     var targetPoint = new Ray(cam.eye, e.direction).hitSphere(this.grabbedSpheroid);
                     if (targetPoint) {
                         this.scaleRot = 1.0;
-                        this.qRot = Quat.getRotationBetweenVectors(targetPoint.normal(), this.grabbedPoint.normal());
+                        this.qRot = Quat.getRotationBetweenVectors(
+                            targetPoint.normal(),
+                            this.grabbedPoint.normal()
+                        );
                         var rot = this.qRot;
                         cam.eye = rot.mulVec3(cam.eye);
                         cam._v = rot.mulVec3(cam._v);
@@ -291,7 +311,6 @@ class MouseNavigation extends Control {
                         cam.update();
                     }
                 } else {
-
                     var p0 = this.grabbedPoint,
                         p1 = Vec3.add(p0, cam._u),
                         p2 = Vec3.add(p0, p0.normal());
@@ -312,23 +331,28 @@ 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(
+            {
+                x: e.x,
+                y: e.y
+            },
+            true
+        );
         if (this.pointOnEarth) {
             this.earthUp = this.pointOnEarth.normal();
         }
-    };
+    }
 
     onMouseRightButtonDown(e) {
         var cam = this.renderer.activeCamera;
 
         if (this.pointOnEarth && this.renderer.events.mouseState.moving) {
-
             this.renderer.controlsBag.scaleRot = 1.0;
-            var l = 0.5 / cam.eye.distance(this.pointOnEarth) * cam._lonLat.height * math.RADIANS;
+            var l = (0.5 / cam.eye.distance(this.pointOnEarth)) * cam._lonLat.height * math.RADIANS;
             if (l > 0.007) l = 0.007;
             cam.rotateHorizontal(l * (e.x - e.prev_x), false, this.pointOnEarth, this.earthUp);
 
-            cam.rotateVertical(l * (e.y - e.prev_y), this.pointOnEarth, true);
+            cam.rotateVertical(l * (e.y - e.prev_y), this.pointOnEarth, this.minSlope);
 
             cam.checkTerrainCollision();
 
@@ -341,9 +365,7 @@ class MouseNavigation extends Control {
     }
 
     onMouseMove(e) {
-
         if (this._active && this.renderer.events.isKeyPressed(input.KEY_ALT)) {
-
             if (!this._shiftBusy) {
                 this._shiftBusy = true;
                 this.onMouseRightButtonClick(e);
@@ -354,9 +376,7 @@ class MouseNavigation extends Control {
     }
 
     onDraw(e) {
-
         if (this._active) {
-
             var r = this.renderer;
             var cam = r.activeCamera;
             var prevEye = cam.eye.clone();
@@ -364,6 +384,13 @@ class MouseNavigation extends Control {
             if (this.stepIndex) {
                 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) {
+                    return;
+                }
+
                 cam.eye = sf.eye;
                 cam._v = sf.v;
                 cam._u = sf.u;
@@ -390,9 +417,10 @@ class MouseNavigation extends Control {
             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();
+                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;
                 }
@@ -417,6 +445,6 @@ class MouseNavigation extends Control {
             }
         }
     }
-};
+}
 
-export { MouseNavigation };
+export { MouseNavigation };

package/src/og/layer/CanvasTiles.js

@@ -2,10 +2,10 @@
  * @module og/layer/CanvasTiles
  */
 
-'use strict';
+"use strict";
 
-import * as quadTree from '../quadTree/quadTree.js';
-import { Layer } from './Layer.js';
+import * as quadTree from "../quadTree/quadTree.js";
+import { Layer } from "./Layer.js";
 
 /**
  * Maximum tiles per frame.
@@ -92,7 +92,7 @@ class CanvasTiles extends Layer {
         }
         this._pendingsQueue = [];
         // this._pendingsQueue.clear();
-    };
+    }
 
     /**
      * Sets layer visibility.
@@ -119,11 +119,12 @@ class CanvasTiles extends Layer {
      * @param {og.planetSegment.Material} material -
      */
     loadMaterial(material) {
-
         var seg = material.segment;
 
         if (this._isBaseLayer) {
-            material.texture = seg._isNorth ? seg.planet.solidTextureOne : seg.planet.solidTextureTwo;
+            material.texture = seg._isNorth
+                ? seg.planet.solidTextureOne
+                : seg.planet.solidTextureTwo;
         } else {
             material.texture = seg.planet.transparentTexture;
         }
@@ -149,33 +150,32 @@ class CanvasTiles extends Layer {
         this._counter++;
         var that = this;
         if (this.drawTile) {
-
             /**
              * Tile custom draw function.
              * @callback og.layer.CanvasTiles~drawTileCallback
              * @param {og.planetSegment.Material} material
              * @param {applyCanvasCallback} applyCanvasCallback
              */
-            setTimeout(function () {
-                var e = that.events.load;
-                if (e.handlers.length) {
-                    that.events.dispatch(e, material);
+            var e = that.events.load;
+            if (e.handlers.length) {
+                that.events.dispatch(e, material);
+            }
+            that.drawTile(
+                material,
+                /**
+                 * Apply canvas.
+                 * @callback applyCanvasCallback
+                 * @param {Object} canvas -
+                 */
+                function (canvas) {
+                    that._counter--;
+                    CanvasTiles.__requestsCounter--;
+                    if (material.isLoading) {
+                        material.applyImage(canvas);
+                    }
+                    that._dequeueRequest();
                 }
-                that.drawTile(material,
-                    /**
-                     * Apply canvas.
-                     * @callback applyCanvasCallback
-                     * @param {Object} canvas -
-                     */
-                    function (canvas) {
-                        that._counter--;
-                        CanvasTiles.__requestsCounter--;
-                        if (material.isLoading) {
-                            material.applyImage(canvas);
-                        }
-                        that._dequeueRequest();
-                    });
-            }, 50);
+            );
         } else {
             material.textureNotExists();
         }
@@ -214,7 +214,10 @@ class CanvasTiles extends Layer {
         while (this._pendingsQueue.length) {
             var pmat = this._pendingsQueue.pop();
             if (pmat.segment.node) {
-                if (pmat.segment.initialized && pmat.segment.node.getState() === quadTree.RENDERING) {
+                if (
+                    pmat.segment.initialized &&
+                    pmat.segment.node.getState() === quadTree.RENDERING
+                ) {
                     return pmat;
                 }
                 pmat.isLoading = false;
@@ -227,7 +230,6 @@ class CanvasTiles extends Layer {
         if (material.isReady) {
             return [0, 0, 1, 1];
         } else {
-
             !material.isLoading && this.loadMaterial(material);
 
             var segment = material.segment;
@@ -278,10 +280,10 @@ class CanvasTiles extends Layer {
         material.textureExists = false;
 
         if (material.image) {
-            material.image.src = '';
+            material.image.src = "";
             material.image = null;
         }
     }
-};
+}
 
 export { CanvasTiles };