@openglobus/og 0.17.1 → 0.18.0

package/src/control/EarthNavigation.ts

@@ -0,0 +1,293 @@
+import {Control, IControlParams} from "./Control";
+import {LonLat} from "../LonLat";
+import {ITouchState} from "../renderer/RendererEvents";
+import {IMouseState} from "../renderer/RendererEvents";
+import {Quat} from "../math/Quat";
+import {Ray} from "../math/Ray";
+import {Sphere} from "../bv/Sphere";
+import {Vec2} from "../math/Vec2";
+import {Vec3} from "../math/Vec3";
+
+interface Touch {
+    pageX: number;
+    pageY: number;
+}
+
+interface IEarthNavigationParams extends IControlParams {
+
+}
+
+class TouchExt {
+    public x: number;
+    public y: number;
+    public prev_x: number;
+    public prev_y: number;
+    public grabbedPoint: Vec3 | null;
+    public grabbedSpheroid: Sphere;
+
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+        this.prev_x = 0;
+        this.prev_y = 0;
+        this.grabbedPoint = new Vec3();
+        this.grabbedSpheroid = new Sphere();
+    }
+
+    public dX(): number {
+        return this.x - this.prev_x;
+    }
+
+    public dY(): number {
+        return this.y - this.prev_y;
+    }
+}
+
+export class EarthNavigation extends Control {
+    protected grabbedPoint: Vec3 | null;
+    protected grabbedDir: Vec3;
+    public inertia: number;
+    protected grabbedSpheroid: Sphere;
+    protected _vRot: Quat;
+    protected _hRot: Quat;
+    protected _a: number;
+    protected scaleRot: number;
+    protected currState: number;
+    protected positionState: { h: number; max: number; min: number; }[];
+    protected touches: TouchExt[];
+
+    constructor(options: IEarthNavigationParams = {}) {
+        super(options);
+
+        this.grabbedPoint = new Vec3();
+        this.grabbedDir = 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.98, min: -0.98},
+            {h: 6866011, max: 0.98, min: -0.98},
+            {h: 3000000, max: 0.98, min: -0.98},
+            {h: 1000000, max: 0.98, min: -0.98},
+            {h: 500000, max: 0.98, min: -0.98}
+        ];
+
+        this.touches = [new TouchExt(), new TouchExt()];
+    }
+
+    public switchZoomState(wheelDelta: number) {
+        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();
+
+        const ll = this.planet!.camera._lonLat;
+
+        this.planet!.flyLonLat(new LonLat(ll.lon, ll.lat, this.positionState[this.currState].h));
+    }
+
+    protected onMouseWheel(event: IMouseState) {
+        this.switchZoomState(event.wheelDelta);
+    }
+
+    public override oninit() {
+        this.activate();
+    }
+
+    public override onactivate() {
+
+        let r = this.renderer!;
+
+        r.events.on("mousewheel", this.onMouseWheel, this);
+        r.events.on("lhold", this.onMouseLeftButtonDown, this);
+        r.events.on("ldown", this.onMouseLeftButtonClick, this);
+        r.events.on("lup", this.onMouseLeftButtonUp, this);
+
+        r.events.on("touchstart", this.onTouchStart, this);
+        r.events.on("touchend", this.onTouchEnd, this);
+        r.events.on("touchmove", this.onTouchMove, this);
+
+        r.events.on("draw", this.onDraw, this);
+    }
+
+    protected onTouchStart(e: ITouchState) {
+        if (e.sys!.touches.length == 1) {
+            const 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);
+            t.grabbedPoint = this.planet!.getCartesianFromPixelTerrain(new Vec2(t.x, t.y)) || null;
+
+            if (t.grabbedPoint) {
+                t.grabbedSpheroid.radius = t.grabbedPoint.length();
+                this.stopRotation();
+            }
+        }
+    }
+
+    protected onTouchEnd(e: ITouchState) {
+        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();
+        }
+    }
+
+    protected onTouchMove(e: ITouchState) {
+        if (e.sys!.touches.length == 1) {
+            let cam = this.planet!.camera;
+
+            let 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;
+
+            let direction = cam.unproject(t.x, t.y);
+            let 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()
+                );
+
+                let rot = this._hRot.mul(this._vRot);
+
+                let state = this.positionState[this.currState];
+
+                let lim = rot.mulVec3(cam.eye).normal().dot(Vec3.NORTH);
+
+                if (lim > state.max || lim < state.min) {
+                    rot = Quat.yRotation(rot.getYaw());
+                }
+
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.NORTH);
+                cam.update();
+            }
+        }
+    }
+
+    protected onMouseLeftButtonClick(e: IMouseState) {
+        this.renderer!.handler.canvas!.classList.add("ogGrabbingPoiner");
+        this.grabbedPoint = this.planet!.getCartesianFromMouseTerrain() || null;
+        this.grabbedDir.copy(e.direction);
+        if (this.grabbedPoint) {
+            this.grabbedSpheroid.radius = this.grabbedPoint.length();
+            this.stopRotation();
+        }
+    }
+
+    public stopRotation() {
+        this.scaleRot = 0.0;
+        this._a = 0.0;
+        this._vRot.clear();
+        this._hRot.clear();
+    }
+
+    protected onMouseLeftButtonUp(e: IMouseState) {
+        this.scaleRot = 1;
+        this.renderer!.handler.canvas!.classList.remove("ogGrabbingPoiner");
+        if (Math.abs(e.x - e.prev_x) < 3 && Math.abs(e.y - e.prev_y) < 3) this.stopRotation();
+    }
+
+    protected onMouseLeftButtonDown(e: IMouseState) {
+        let cam = this.planet!.camera;
+
+        if (!this.grabbedPoint || cam.isFlying()) return;
+
+        if (this.renderer!.events.mouseState.moving) {
+            let 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);
+
+                let rot = this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, rot.mulVec3(cam.getUp()));
+
+                this._hRot = Quat.getRotationBetweenVectors(
+                    new Vec3(targetPoint.x, 0.0, targetPoint.z).normal(),
+                    new Vec3(this.grabbedPoint.x, 0.0, this.grabbedPoint.z).normal()
+                );
+
+                rot = this._hRot;
+
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, rot.mulVec3(cam.getUp()));
+                cam.update();
+            }
+        } else {
+            this.scaleRot = 0;
+        }
+    }
+
+    protected onDraw() {
+        let r = this.renderer!;
+        let cam = this.planet!.camera;
+
+        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);
+
+            let rot = this._vRot.mul(this._hRot);
+
+            let lim = rot.mulVec3(cam.eye).normal().dot(Vec3.NORTH);
+
+            let 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.NORTH);
+            cam.update();
+        }
+    }
+}

package/src/{og/control/GeoImageDragControl.js → control/GeoImageDragControl.ts}

@@ -1,13 +1,21 @@
-'use strict';
-
-import { BaseGeoImage } from '../layer/BaseGeoImage.js';
-import { ToggleButton } from "../ui/ToggleButton.js";
-import { Control } from './Control.js';
+import {BaseGeoImage} from '../layer/BaseGeoImage';
+import {Control, IControlParams} from './Control';
+import {Layer} from "../layer/Layer";
+import {ToggleButton} from "../ui/ToggleButton";
+import {IMouseState} from "../renderer/RendererEvents";
 
 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>`;
 
-class GeoImageDragControl extends Control {
-    constructor(options = {}) {
+interface IGeoImageDragControlParams extends IControlParams {
+
+}
+
+export class GeoImageDragControl extends Control {
+    protected _cornerIndex: number;
+    protected _catchCorner: boolean;
+    protected _toggleBtn: ToggleButton;
+
+    constructor(options: IGeoImageDragControlParams = {}) {
         super(options);
 
         this._cornerIndex = -1;
@@ -17,19 +25,18 @@ class GeoImageDragControl extends Control {
             classList: ["og-map-button", "og-geoimagegrag_button"],
             icon: ICON_BUTTON_SVG
         });
-
     }
 
-    oninit() {
-        this._toggleBtn.appendTo(this.renderer.div);
+    override oninit() {
+        this._toggleBtn.appendTo(this.renderer!.div!);
 
-        this.planet.events.on('layeradd', function (e) {
+        this.planet!.events.on('layeradd', (e: Layer) => {
             if (this.isActive()) {
                 this._bindLayer(e);
             }
         }, this);
 
-        this._toggleBtn.on("change", (isActive) => {
+        this._toggleBtn.events.on("change", (isActive: boolean) => {
             if (isActive) {
                 this.activate();
             } else {
@@ -38,24 +45,24 @@ class GeoImageDragControl extends Control {
         });
     }
 
-    onactivate() {
+    override onactivate() {
         super.onactivate();
 
-        let p = this.planet;
+        const p = this.planet!;
         for (let i = 0; i < p.layers.length; i++) {
             this._bindLayer(p.layers[i]);
         }
     }
 
-    ondeactivate() {
+    override ondeactivate() {
         super.ondeactivate();
-        let p = this.planet;
+        const p = this.planet!;
         for (let i = 0; i < p.layers.length; i++) {
             this._unbindLayer(p.layers[i]);
         }
     }
 
-    _bindLayer(layer) {
+    _bindLayer(layer: Layer) {
         if (layer instanceof BaseGeoImage) {
             layer.events.on('mousemove', this._onMouseMove, this);
             layer.events.on("mouseleave", this._onMouseLeave, this);
@@ -64,7 +71,7 @@ class GeoImageDragControl extends Control {
         }
     }
 
-    _unbindLayer(layer) {
+    protected _unbindLayer(layer: Layer) {
         if (layer instanceof BaseGeoImage) {
             layer.events.off('mousemove', this._onMouseMove);
             layer.events.off("mouseleave", this._onMouseLeave);
@@ -73,35 +80,38 @@ class GeoImageDragControl extends Control {
         }
     }
 
-    _onLUp(ms) {
+    protected _onLUp(ms: IMouseState) {
         this._catchCorner = false;
         ms.renderer.controls.mouseNavigation.activate();
     }
 
-    _onLDown(ms) {
+    protected _onLDown(ms: IMouseState) {
         if (this._cornerIndex !== -1) {
             this._catchCorner = true;
             ms.renderer.controls.mouseNavigation.deactivate();
         }
     }
 
-    _onMouseLeave() {
+    protected _onMouseLeave() {
         document.body.style.cursor = 'auto';
     }
 
-    _onMouseMove(ms) {
-        let layer = ms.pickingObject,
-            p = this.planet;
+    protected _onMouseMove(ms: IMouseState) {
+        let layer = ms.pickingObject;
+        const p = this.planet!;
         if (this._catchCorner) {// mouse is catching a corner
             let corners = layer.getCornersLonLat();
-            corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
+            // corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
+            corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms);
             layer.setCornersLonLat(corners);
         } else { // mouse isn't catching
             this._cornerIndex = -1;
             for (let i = 0; i < layer._cornersWgs84.length; i++) {
-                let ground = p.getLonLatFromPixelTerrain(ms, true);
+                // let ground = p.getLonLatFromPixelTerrain(ms, true);
+                let ground = p.getLonLatFromPixelTerrain(ms);
                 // mouse is near
-                if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
+                //if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
+                if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms) <= 0.05) {
                     this._cornerIndex = i;
                     document.body.style.cursor = 'move';
                     break;
@@ -113,5 +123,3 @@ class GeoImageDragControl extends Control {
         }
     }
 }
-
-export { GeoImageDragControl };

package/src/control/KeyboardNavigation.ts

@@ -0,0 +1,168 @@
+import * as math from "../math";
+import {Control, IControlParams} from "./Control";
+import {input} from "../input/input";
+import {Vec3} from "../math/Vec3";
+
+interface IKeyboardNavigationParams extends IControlParams {
+    step?: number;
+}
+
+/**
+ * Planet camera keyboard navigation. Use W,S,A,D and left shift key for fly around a planet.
+ */
+
+export class KeyboardNavigation extends Control {
+    public step: number;
+
+    constructor(options: IKeyboardNavigationParams = {}) {
+        options = options || {};
+        super({name: "KeyboardNavigation", ...options});
+        this.step = options.step || 250;
+    }
+
+    public override onactivate() {
+        let r = this.renderer!;
+        r.events.on("keypress", input.KEY_PGUP, this.onCameraMoveForward, this);
+        r.events.on("keypress", input.KEY_PGDN, this.onCameraMoveBackward, this);
+        r.events.on("keypress", input.KEY_PLUS, this.onCameraMoveForward, this);
+        r.events.on("keypress", input.KEY_EQUALS, this.onCameraMoveForward, this);
+        r.events.on("keypress", input.KEY_MINUS, this.onCameraMoveBackward, this);
+        r.events.on("keypress", input.KEY_W, this.onCameraMoveForward, this);
+        r.events.on("keypress", input.KEY_S, this.onCameraMoveBackward, this);
+        r.events.on("keypress", input.KEY_A, this.onCameraStrifeLeft, this);
+        r.events.on("keypress", input.KEY_D, this.onCameraStrifeRight, this);
+        r.events.on("keypress", input.KEY_UP, this.onCameraLookUp, this);
+        r.events.on("keypress", input.KEY_DOWN, this.onCameraLookDown, this);
+        r.events.on("keypress", input.KEY_LEFT, this.onCameraLookLeft, this);
+        r.events.on("keypress", input.KEY_RIGHT, this.onCameraLookRight, this);
+        r.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
+        r.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
+        r.events.on("keypress", input.KEY_N, this.onCameraRollNorth, this);
+    }
+
+    public override ondeactivate() {
+        let r = this.renderer!;
+        r.events.off("keypress", input.KEY_PGUP, this.onCameraMoveForward);
+        r.events.off("keypress", input.KEY_PGDN, this.onCameraMoveBackward);
+        r.events.off("keypress", input.KEY_PLUS, this.onCameraMoveForward);
+        r.events.off("keypress", input.KEY_EQUALS, this.onCameraMoveForward);
+        r.events.off("keypress", input.KEY_MINUS, this.onCameraMoveBackward);
+        r.events.off("keypress", input.KEY_W, this.onCameraMoveForward);
+        r.events.off("keypress", input.KEY_S, this.onCameraMoveBackward);
+        r.events.off("keypress", input.KEY_A, this.onCameraStrifeLeft);
+        r.events.off("keypress", input.KEY_D, this.onCameraStrifeRight);
+        r.events.off("keypress", input.KEY_UP, this.onCameraLookUp);
+        r.events.off("keypress", input.KEY_DOWN, this.onCameraLookDown);
+        r.events.off("keypress", input.KEY_LEFT, this.onCameraLookLeft);
+        r.events.off("keypress", input.KEY_RIGHT, this.onCameraLookRight);
+        r.events.off("keypress", input.KEY_Q, this.onCameraRollLeft);
+        r.events.off("keypress", input.KEY_E, this.onCameraRollRight);
+        r.events.off("keypress", input.KEY_N, this.onCameraRollNorth);
+    }
+
+    public override oninit() {
+        this.activate();
+    }
+
+    protected onCameraMoveForward() {
+        let cam = this.planet!.camera;
+        cam.slide(0, 0, -cam._lonLat.height / this.step);
+    }
+
+    protected onCameraMoveBackward() {
+        let cam = this.planet!.camera!;
+        cam.slide(0, 0, cam._lonLat.height / this.step);
+    }
+
+    protected onCameraStrifeLeft() {
+        let cam = this.planet!.camera;
+        cam.slide(-cam._lonLat.height / this.step, 0, 0);
+    }
+
+    protected onCameraStrifeRight() {
+        let cam = this.planet!.camera;
+        cam.slide(cam._lonLat.height / this.step, 0, 0);
+    }
+
+    protected onCameraLookUp() {
+        let cam = this.planet!.camera;
+        if (this.renderer!.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.pitch(15 / this.renderer!.handler.deltaTime);
+        } else {
+            cam.rotateVertical((cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
+        }
+    }
+
+    protected onCameraLookDown() {
+        let cam = this.planet!.camera;
+        if (this.renderer!.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.pitch(-15 / this.renderer!.handler.deltaTime);
+        } else {
+            cam.rotateVertical((-cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
+        }
+    }
+
+    protected onCameraLookLeft() {
+        let cam = this.planet!.camera;
+        if (this.renderer!.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.roll(15 / this.renderer!.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((cam._lonLat.height / 3000000) * math.RADIANS);
+        }
+    }
+
+    protected onCameraLookRight() {
+        let cam = this.planet!.camera;
+        if (this.renderer!.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.roll(-15 / this.renderer!.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((-cam._lonLat.height / 3000000) * math.RADIANS);
+        }
+    }
+
+    protected onCameraTurnLeft() {
+        let cam = this.planet!.camera;
+        if (this.renderer!.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.yaw(15 / this.renderer!.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((cam._lonLat.height / 3000000) * math.RADIANS);
+        }
+    }
+
+    protected onCameraTurnRight() {
+        let cam = this.planet!.camera;
+        if (this.renderer!.events.isKeyPressed(input.KEY_SHIFT)) {
+            cam.yaw(-15 / this.renderer!.handler.deltaTime);
+        } else {
+            cam.rotateHorizontal((-cam._lonLat.height / 3000000) * math.RADIANS, false, Vec3.ZERO);
+        }
+    }
+
+    // from CompassButton._onClick()
+    protected onCameraRollNorth() {
+        let c = this.planet!.getCartesianFromPixelTerrain(this.renderer!.handler.getCenter());
+        if (c) {
+            this.planet!.flyCartesian(
+                c.normal().scaleTo(c.length() + c.distance(this.planet!.camera.eye)),
+                null,
+                null,
+                0,
+                null,
+                null,
+                () => {
+                    this.planet!.camera.look;
+                }
+            );
+        } else {
+            this.planet!.flyCartesian(this.planet!.camera.eye);
+        }
+    }
+
+    protected onCameraRollLeft() {
+        this.planet!.camera.roll(-15 / this.renderer!.handler.deltaTime);
+    }
+
+    protected onCameraRollRight() {
+        this.planet!.camera.roll(15 / this.renderer!.handler.deltaTime);
+    }
+}