@openglobus/og 0.17.1 → 0.18.0

package/src/og/control/EarthCoordinates.js

@@ -1,214 +0,0 @@
-'use strict';
-
-import { LonLat } from '../LonLat.js';
-import { throttle } from '../utils/shared.js';
-import * as units from '../utils/units.js';
-import { heightMode } from '../utils/units.js';
-import { Control } from './Control.js';
-
-const DECIMAL_TEMPLATE =
-    `<div class="og-lat-side"></div><div class="og-lat-val"></div>
-    <div class="og-lon-side"></div><div class="og-lon-val"></div>
-    <div class="og-height"></div>
-    <div class="og-units-height"></div>`;
-
-const DEGREE_TEMPLATE =
-    `<div class="og-lat-side"></div><div class="og-lat-val"></div>
-    <div class="og-lon-side"></div><div class="og-lon-val"></div>
-    <div class="og-height"></div>
-    <div class="og-units-height"></div>`;
-
-const CENTER_SVG = '<svg width="12" height="12"><g><path stroke-width="1" stroke-opacity="1" d="M6 0L6 12M0 6L12 6" stroke="#337ab7"></path></g></svg>';
-
-const TYPE_HTML = [DECIMAL_TEMPLATE, DEGREE_TEMPLATE];
-
-/**
- * Control displays mouse or screen center Earth coordinates.
- * @class
- * @extends {og.control.Control}
- * @param {Object} [options] - Options:
- * @param {Boolean} [options.center] - Earth coordinates by screen center otherwise mouse pointer. False is default.
- * @param {Boolean} [options.type] - Coordinates shown: 0 - is decimal degrees, 1 - degrees, 2 - mercator geodetic coordinates.
- */
-class EarthCoordinates extends Control {
-    constructor(options) {
-        super(options);
-
-        options = options || {};
-
-        /**
-         * Display type.
-         * @private
-         * @type {Boolean}
-         */
-        this._type = options.type || 0;
-
-        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
-
-        this._showFn = null;
-
-        /**
-         * Current position.
-         * @public
-         * @type {og.Vec3}
-         */
-        this._lonLat = new LonLat();
-
-        this._latSideEl = null;
-        this._lonSideEl = null;
-        this._latValEl = null;
-        this._lonValEl = null;
-        this._heightEl = null;
-
-        this._altUnitVal = options.altitudeUnit || "m";
-        this._heightModeVal = options.heightMode || "ell";
-
-        this._altUnit = units[this._altUnitVal];
-        this._heightMode = heightMode[this._heightModeVal];
-
-        this._centerMode = options.centerMode != undefined ? options.centerMode : true;
-    }
-
-    _SHOW_DECIMAL(ll) {
-        if (ll) {
-            let lat = ll.lat,
-                lon = ll.lon;
-
-            if (lat >= 0) {
-                this._latSideEl.innerHTML = 'N';
-            } else {
-                this._latSideEl.innerHTML = 'S';
-            }
-
-            if (lon >= 0) {
-                this._lonSideEl.innerHTML = 'E';
-            } else {
-                this._lonSideEl.innerHTML = 'W';
-            }
-
-            this._latValEl.innerHTML = Math.abs(lat).toFixed(5) + '°';
-            this._lonValEl.innerHTML = Math.abs(lon).toFixed(5) + '°';
-        }
-    }
-
-    _SHOW_DEGREE(ll) {
-        if (ll) {
-            let lat = ll.lat,
-                lon = ll.lon;
-
-            if (lat >= 0) {
-                this._latSideEl.innerHTML = 'N';
-            } else {
-                this._latSideEl.innerHTML = 'S';
-            }
-
-            if (lon >= 0) {
-                this._lonSideEl.innerHTML = 'E';
-            } else {
-                this._lonSideEl.innerHTML = 'W';
-            }
-
-            let t = 0;
-
-            let deg = lat < 0 ? Math.ceil(lat) : Math.floor(lat);
-            let min = Math.floor(t = Math.abs((lat - deg)) * 60);
-            let sec = Math.floor((t - min) * 6000) / 100.0;
-            this._latValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
-
-            deg = lon < 0 ? Math.ceil(lon) : Math.floor(lon);
-            min = Math.floor(t = Math.abs((lon - deg)) * 60);
-            sec = Math.floor((t - min) * 6000) / 100.0;
-            this._lonValEl.innerHTML = Math.abs(deg) + '°' + min + "'" + sec.toFixed(0) + '"';
-        }
-    }
-
-    _createCenterEl() {
-        let el = document.createElement('div');
-        el.className = 'og-center-icon';
-        el.innerHTML = CENTER_SVG;
-        return el;
-    }
-
-    _updateUnits() {
-        this._heightMode = heightMode[this._heightModeVal];
-        this._altUnit = units[this._altUnitVal];
-        this._el.querySelector(".og-units-height").innerHTML = units.toString(this._altUnit);
-        this._showHeight();
-    }
-
-    _refreshCoordinates() {
-
-        if (this._type >= this._TYPE_FUNC.length) {
-            this._type = 0;
-        }
-
-        this._el.innerHTML = TYPE_HTML[this._type];
-
-        this._latSideEl = this._el.querySelector(".og-lat-side");
-        this._lonSideEl = this._el.querySelector(".og-lon-side");
-        this._latValEl = this._el.querySelector(".og-lat-val");
-        this._lonValEl = this._el.querySelector(".og-lon-val");
-        this._heightEl = this._el.querySelector(".og-height");
-
-        this._showFn = this._TYPE_FUNC[this._type];
-        this._showFn(this._lonLat);
-    }
-
-    oninit() {
-        this._el = document.createElement('div');
-        this._el.classList.add("og-coordinates");
-
-        this.renderer.div.appendChild(this._el);
-
-        this._el.addEventListener("click", () => {
-            this._type++;
-            this._refreshCoordinates();
-            this._updateUnits();
-            this._showHeight();
-        });
-
-        if (this._centerMode) {
-            this.renderer.div.appendChild(this._createCenterEl());
-            this.renderer.activeCamera.events.on("moveend", this._grabCoordinates, this);
-            this.renderer.activeCamera.events.on("moveend", throttle((e) => this._showHeight(), 400, true), this);
-        } else {
-            this.renderer.events.on("mousemove", this._grabCoordinates, this);
-            this.renderer.events.on("mousestop", throttle((e) => this._showHeight(), 400, true), this);
-        }
-
-        this._refreshCoordinates();
-
-        this._updateUnits();
-    }
-
-    _grabCoordinates(px) {
-        let scrPx;
-        let r = this.renderer;
-        if (this._centerMode) {
-            scrPx = r.handler.getCenter();
-        } else {
-            scrPx = px;
-        }
-        this._lonLat = this.planet.getLonLatFromPixelTerrain(scrPx);
-        this._showFn(this._lonLat);
-    }
-
-    async _showHeight() {
-        if (this._lonLat) {
-            let alt = 0;
-            this._heightEl.style.opacity = 0.7;
-            if (this._heightMode === heightMode.ell) {
-                alt = await this.planet.getHeightAboveELL(this._lonLat);
-                alt = units.convertExt(true, units.m, this._altUnit, alt);
-            } else if (this._heightMode === heightMode.msl) {
-                alt = await this.planet.getHeightDefault(this._lonLat);
-                alt = units.convertExt(true, units.m, this._altUnit, alt);
-            }
-            this._heightEl.style.opacity = 1.0;
-            this._heightEl.innerHTML = alt.toString();
-        }
-    }
-}
-
-export { EarthCoordinates };
-

package/src/og/control/EarthNavigation.js

@@ -1,258 +0,0 @@
-"use strict";
-
-import { Sphere } from "../bv/Sphere.js";
-import { LonLat } from "../LonLat.js";
-import { Quat } from "../math/Quat.js";
-import { Ray } from "../math/Ray.js";
-import { Vec3 } from "../math/Vec3.js";
-import { Control } from "./Control.js";
-
-class Touch {
-    constructor() {
-        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;
-        };
-    }
-}
-
-class EarthNavigation extends Control {
-    constructor(options) {
-        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 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;
-
-        this.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.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();
-            }
-        }
-    }
-
-    onMouseLeftButtonClick(e) {
-        this.renderer.handler.gl.canvas.classList.add("ogGrabbingPoiner");
-        this.grabbedPoint = this.planet.getCartesianFromMouseTerrain(true);
-        this.grabbedDir.copy(e.direction);
-        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);
-
-                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;
-        }
-    }
-
-    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.NORTH);
-
-            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.NORTH);
-            cam.update();
-        }
-    }
-}
-
-export { EarthNavigation };

package/src/og/control/KeyboardNavigation.js

@@ -1,149 +0,0 @@
-"use strict";
-
-import { input } from "../input/input.js";
-import * as math from "../math.js";
-import { Vec3 } from "../math/Vec3.js";
-import { Control } from "./Control.js";
-
-/**
- * Planet camera keyboard navigation. Use W,S,A,D and left shift key for fly around a planet.
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
- */
-
-class KeyboardNavigation extends Control {
-    constructor(options) {
-        options = options || {};
-        super(options);
-        this.step = options.step || 250;
-    }
-
-    oninit() {
-        this.renderer.events.on("keypress", input.KEY_PGUP, this.onCameraMoveForward, this);
-        this.renderer.events.on("keypress", input.KEY_PGDN, this.onCameraMoveBackward, this);
-        this.renderer.events.on("keypress", input.KEY_PLUS, this.onCameraMoveForward, this);
-        this.renderer.events.on("keypress", input.KEY_EQUALS, this.onCameraMoveForward, this);
-        this.renderer.events.on("keypress", input.KEY_MINUS, this.onCameraMoveBackward, this);
-        this.renderer.events.on("keypress", input.KEY_W, this.onCameraMoveForward, this);
-        this.renderer.events.on("keypress", input.KEY_S, this.onCameraMoveBackward, this);
-        this.renderer.events.on("keypress", input.KEY_A, this.onCameraStrifeLeft, this);
-        this.renderer.events.on("keypress", input.KEY_D, this.onCameraStrifeRight, this);
-        this.renderer.events.on("keypress", input.KEY_UP, this.onCameraLookUp, this);
-        this.renderer.events.on("keypress", input.KEY_DOWN, this.onCameraLookDown, this);
-        this.renderer.events.on("keypress", input.KEY_LEFT, this.onCameraLookLeft, this);
-        this.renderer.events.on("keypress", input.KEY_RIGHT, this.onCameraLookRight, this);
-        this.renderer.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
-        this.renderer.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
-        this.renderer.events.on("keypress", input.KEY_N, this.onCameraRollNorth, this);
-    }
-
-    onCameraMoveForward(event) {
-        var cam = this.renderer.activeCamera;
-        cam.slide(0, 0, -cam._lonLat.height / this.step);
-    }
-
-    onCameraMoveBackward(event) {
-        var cam = this.renderer.activeCamera;
-        cam.slide(0, 0, cam._lonLat.height / this.step);
-    }
-
-    onCameraStrifeLeft(event) {
-        var cam = this.renderer.activeCamera;
-        cam.slide(-cam._lonLat.height / this.step, 0, 0);
-    }
-
-    onCameraStrifeRight(event) {
-        var cam = this.renderer.activeCamera;
-        cam.slide(cam._lonLat.height / this.step, 0, 0);
-    }
-
-    onCameraLookUp(event) {
-        var cam = this.renderer.activeCamera;
-        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);
-        }
-    }
-
-    onCameraLookDown(event) {
-        var cam = this.renderer.activeCamera;
-        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);
-        }
-    }
-
-    onCameraLookLeft(event) {
-        var cam = this.renderer.activeCamera;
-        if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
-            cam.roll(15 / this.renderer.handler.deltaTime);
-        } else {
-            cam.rotateHorizontal((cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
-        }
-    }
-
-    onCameraLookRight(event) {
-        var cam = this.renderer.activeCamera;
-        if (this.renderer.events.isKeyPressed(input.KEY_SHIFT)) {
-            cam.roll(-15 / this.renderer.handler.deltaTime);
-        } else {
-            cam.rotateHorizontal((-cam._lonLat.height / 3000000) * math.RADIANS, Vec3.ZERO);
-        }
-    }
-
-    onCameraTurnLeft(event) {
-        var cam = this.renderer.activeCamera;
-        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);
-        }
-    }
-
-    onCameraTurnRight(event) {
-        var cam = this.renderer.activeCamera;
-        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()
-    onCameraRollNorth(event) {
-      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(c);
-          }
-          );
-      } else {
-        this.planet.flyCartesian(this.planet.camera.eye);
-      }
-    }
-
-    onCameraRollLeft(event) {
-        this.renderer.activeCamera.roll(-15 / this.renderer.handler.deltaTime);
-    }
-
-    onCameraRollRight(event) {
-        this.renderer.activeCamera.roll(15 / this.renderer.handler.deltaTime);
-    }
-}
-
-export function keyboardNavigation(options) {
-    return new KeyboardNavigation(options);
-}
-
-export { KeyboardNavigation };
-