@openglobus/og 0.17.2 → 0.18.0

package/src/control/MouseWheelZoomControl.ts

@@ -0,0 +1,269 @@
+import {Sphere} from "../bv/Sphere";
+import {Key} from "../Lock";
+import {Quat} from "../math/Quat";
+import {Vec3} from "../math/Vec3";
+import {Control, IControlParams} from "./Control";
+import {IStepForward, MouseNavigation} from "./MouseNavigation";
+
+interface IMouseWheelZoomControl extends IControlParams {
+    minSlope?: number;
+}
+
+export class MouseWheelZoomControl extends Control {
+    protected grabbedPoint: Vec3;
+    protected _eye0: Vec3;
+    protected pointOnEarth: Vec3;
+    protected earthUp: Vec3;
+    public inertia: number;
+    protected grabbedSpheroid: Sphere;
+    protected qRot: Quat;
+    protected scaleRot: number;
+    protected distDiff: number;
+    protected stepsCount: number;
+    protected stepsForward: IStepForward[] | null;
+    protected stepIndex: number;
+    protected _lmbDoubleClickActive: boolean;
+    protected minSlope: number;
+    protected _keyLock: Key;
+    protected _deactivate: boolean;
+    protected _move: number;
+
+    constructor(options: IMouseWheelZoomControl = {}) {
+        super(options);
+
+        this._name = "MouseWheelZoomControl";
+
+        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();
+
+        this._deactivate = false;
+
+        this._move = 0;
+    }
+
+    public override oninit() {
+        let 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", () => this.zoomIn());
+        btnZoomIn.addEventListener("mouseup", () => this.stopZoom());
+
+        btnZoomOut.addEventListener("mousedown", () => this.zoomOut());
+        btnZoomOut.addEventListener("mouseup", () => this.stopZoom());
+
+        btnZoomIn.addEventListener("touchstart", (e: TouchEvent) => {
+            e.preventDefault();
+            this.zoomIn();
+        });
+        btnZoomIn.addEventListener("touchend", (e: TouchEvent) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+        btnZoomIn.addEventListener("touchcancel", (e: TouchEvent) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+
+        btnZoomOut.addEventListener("touchstart", (e: TouchEvent) => {
+            e.preventDefault();
+            this.zoomOut();
+        });
+        btnZoomOut.addEventListener("touchend", (e: TouchEvent) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+        btnZoomOut.addEventListener("touchcancel", (e: TouchEvent) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+
+        this.renderer!.events.on("draw", this._draw, this);
+    }
+
+    /**
+     * Planet zoom in.
+     * @public
+     */
+    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.planet!.camera,
+            this.planet!,
+            this.stepsCount,
+            this.distDiff,
+            this.renderer!.handler.getCenter(),
+            true,
+            null
+        ) || null;
+
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+
+    /**
+     * Planet zoom out.
+     * @public
+     */
+    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.planet!.camera,
+            this.planet!,
+            this.stepsCount,
+            this.distDiff,
+            this.renderer!.handler.getCenter(),
+            false,
+            null
+        ) || null;
+
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+
+    public stopRotation() {
+        this.qRot.clear();
+        this.planet!.layerLock.free(this._keyLock);
+        this.planet!.terrainLock.free(this._keyLock);
+        this.planet!._normalMapCreator.free(this._keyLock);
+    }
+
+    public stopZoom() {
+        this._move = 0;
+
+        this.planet!.layerLock.free(this._keyLock);
+        this.planet!.terrainLock.free(this._keyLock);
+        this.planet!._normalMapCreator.free(this._keyLock);
+    }
+
+    protected _draw() {
+        if (this._active) {
+            let r = this.renderer!;
+            let cam = this.planet!.camera;
+            let prevEye = cam.eye.clone();
+
+            if (this.stepIndex) {
+                r.controlsBag.scaleRot = 1.0;
+                let sf = this.stepsForward![this.stepsCount - this.stepIndex--];
+
+                let maxAlt = cam.maxAltitude + this.planet!.ellipsoid.equatorialSize;
+                let minAlt = cam.minAltitude + this.planet!.ellipsoid.equatorialSize;
+                const camAlt = sf.eye.length();
+                if (camAlt > maxAlt || camAlt < minAlt) {
+                    return;
+                }
+
+                cam.eye = sf.eye;
+                cam._u = sf.v;
+                cam._r = sf.u;
+                cam._b = 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;
+
+                let 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._u = rot.mulVec3(cam._u);
+                cam._r = rot.mulVec3(cam._r);
+                cam._b = rot.mulVec3(cam._b);
+
+                cam.checkTerrainCollision();
+
+                cam.update();
+            }
+
+            if (cam.eye.distance(prevEye) / cam.getAltitude() > 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);
+            }
+        }
+    }
+}

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

@@ -1,8 +1,6 @@
-"use strict";
-
-import { ToggleButton } from "../ui/ToggleButton.js";
-import { Control } from "./Control.js";
-import { HeightRuler } from "./heightRuler/HeightRuler.js";
+import {Control, IControlParams} from "./Control";
+import {ToggleButton} from "../ui/ToggleButton";
+import {HeightRuler} from "./heightRuler/HeightRuler";
 
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
@@ -20,14 +18,17 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="iso-8859-1"?>
 </g>
 </svg>`;
 
+interface IRulerSwitcherParams extends IControlParams {
+    ignoreTerrain?: boolean;
+}
+
 /**
  * Activate ruler
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
  */
-class RulerSwitcher extends Control {
-    constructor(options = {}) {
+export class RulerSwitcher extends Control {
+    ruler: HeightRuler;
+
+    constructor(options: IRulerSwitcherParams = {}) {
         super({
             name: "RulerSwitcher",
             ...options
@@ -38,29 +39,29 @@ class RulerSwitcher extends Control {
         });
     }
 
-    oninit() {
-        this.planet.addControl(this.ruler);
+    public override oninit() {
+        this.planet!.addControl(this.ruler);
         this._createMenuBtn();
     }
 
-    onactivate() {
+    public override onactivate() {
         this.ruler.activate();
     }
 
-    ondeactivate() {
+    public override ondeactivate() {
         this.ruler.deactivate();
     }
 
-    _createMenuBtn() {
+    protected _createMenuBtn() {
 
         let btn = new ToggleButton({
             classList: ["og-map-button", "og-ruler_button"],
             icon: ICON_BUTTON_SVG
         });
 
-        btn.appendTo(this.renderer.div);
+        btn.appendTo(this.renderer!.div!);
 
-        btn.on("change", (isActive) => {
+        btn.events.on("change", (isActive: boolean) => {
             if (isActive) {
                 this.onactivate();
             } else {
@@ -69,6 +70,3 @@ class RulerSwitcher extends Control {
         });
     }
 }
-
-export { RulerSwitcher };
-

package/src/control/ScaleControl.ts

@@ -0,0 +1,131 @@
+import {binarySearch, parseHTML} from "../utils/shared";
+import {Control, IControlParams} from "./Control";
+import {RADIANS} from "../math";
+import {Vec2} from "../math/Vec2";
+import {Vec3} from "../math/Vec3";
+import {GlobusTerrain} from "../terrain/GlobusTerrain";
+import {IMouseState} from "../renderer/RendererEvents";
+
+interface IScaleControlParams extends IControlParams {
+    isCenter?: boolean
+}
+
+const scale: number[] = [
+    1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1e3, 2e3, 3e3, 5e3, 10e3, 20e3, 30e3, 50e3,
+    100e3, 200e3, 300e3, 500e3, 1000e3, 2000e3, 3000e3, 5000e3, 10000e3
+];
+
+const TEMPLATE = `<div class="og-scale-container">
+      <div class="og-scale-label"></div>
+      <div class="og-scale-ruler"></div>
+    </div>`;
+
+/**
+ * Planet zoom buttons control.
+ */
+export class ScaleControl extends Control {
+
+    public el: HTMLElement | null;
+    protected _template: string;
+    protected _minWidth: number;
+    protected _maxWidth: number;
+    protected _isCenter: boolean;
+    protected _scaleLabelEl: HTMLElement | null;
+    protected _mPx: number;
+    protected currWidth: number;
+    protected _metersInMinSize: number;
+
+    constructor(options: IScaleControlParams = {}) {
+        if (!options.name || options.name === "") {
+            options.name = "scaleControl";
+        }
+        super(options);
+
+        this._template = TEMPLATE;
+
+        this._minWidth = 100;
+        this._maxWidth = 150;
+
+        this._isCenter = options.isCenter != undefined ? options.isCenter : true;
+
+        this._mPx = 0
+        this.currWidth = 0;
+        this._metersInMinSize = 0;
+
+        this.el = null;
+
+        this._scaleLabelEl = null;
+    }
+
+    protected _renderTemplate() {
+        return parseHTML(this._template)[0];
+    }
+
+    public override oninit() {
+        this.el = this._renderTemplate()!;
+
+        this._scaleLabelEl = this.el.querySelector<HTMLElement>(".og-scale-label")!;
+
+        this.renderer!.div!.appendChild(this.el);
+
+        if (this._isCenter) {
+            this.planet!.camera.events.on("moveend", () => {
+                this._drawScreen(this.planet!.renderer!.handler.getCenter());
+            });
+
+            !this.planet!.terrain!.isEmpty && (this.planet!.terrain as GlobusTerrain).events.on("loadend", () => {
+                this._drawScreen(this.planet!.renderer!.handler.getCenter());
+            });
+        } else {
+            this.renderer!.events.on("mousemove", (e: IMouseState) => {
+                if (!e.leftButtonHold && !e.rightButtonHold) {
+                    this._drawScreen(e.pos);
+                }
+            });
+
+            this.planet!.camera.events.on("moveend", () => {
+                let ms = this.renderer!.events.mouseState;
+                if (!ms.leftButtonHold && !ms.rightButtonHold) {
+                    this._drawScreen(ms.pos);
+                }
+            });
+        }
+    }
+
+    protected _drawScreen(px: Vec2) {
+        let cam = this.planet!.camera;
+        let s0 = px;
+        let dist = this.planet!.getDistanceFromPixel(s0) || 0;
+        if (dist === 0) {
+            s0 = cam.project(Vec3.ZERO);
+            dist = this.planet!.getDistanceFromPixel(s0) || 0;
+        }
+        let p0 = cam.getForward().scaleTo(dist).addA(cam.eye);
+        let tempSize = dist * Math.tan(cam.viewAngle * RADIANS);
+        let p1 = p0.add(cam.getRight().scaleTo(tempSize));
+        let s1 = cam.project(p1);
+        this._mPx = tempSize / s1.distance(s0);
+
+        let metersInMinSize = this._mPx * this._minWidth;
+
+        let index = binarySearch(scale, metersInMinSize, (a: number, b: number) => a - b);
+        if (index < 0) {
+            index = ~index;
+        }
+        let minMeters = scale[index],
+            maxMeters = scale[index + 1];
+
+        let t = (minMeters - metersInMinSize) / (maxMeters - minMeters);
+        this.currWidth = this._minWidth + t * (this._maxWidth - this._minWidth);
+
+        if (minMeters > 1000) {
+            this._scaleLabelEl!.innerText = `${minMeters / 1000} km`;
+        } else {
+            this._scaleLabelEl!.innerText = `${minMeters} m`;
+        }
+
+        this._metersInMinSize = metersInMinSize;
+
+        this.el!.style.width = this.currWidth + "px";
+    }
+}

package/src/control/SegmentBoundVisualization.ts

@@ -0,0 +1,50 @@
+import {Entity} from "../entity/Entity";
+import {EntityCollection} from "../entity/EntityCollection";
+import {Control, IControlParams} from "./Control";
+import {Segment} from '../segment/Segment';
+
+interface SegmentExt extends Segment {
+    _sphereEntity: Entity;
+}
+
+/**
+ * Frame per second(FPS) display control.
+ */
+export class SegmentBoundVisualization extends Control {
+    protected _boundingSphereCollection: EntityCollection;
+
+    constructor(options: IControlParams) {
+        super(options);
+
+        this._boundingSphereCollection = new EntityCollection();
+    }
+
+    public override oninit() {
+        this.planet!.addEntityCollection(this._boundingSphereCollection);
+
+        this.renderer!.events.on("draw", this._predraw, this);
+        this.planet!.events.on("draw", this._draw, this);
+    }
+
+    protected _predraw() {
+        this._boundingSphereCollection.clear();
+    }
+
+    protected _draw() {
+        const planet = this.planet!;
+        for (let i = 0; i < planet._renderedNodes.length; i++) {
+            let si = planet._renderedNodes[i].segment as SegmentExt;
+            if (!si._sphereEntity) {
+                si._sphereEntity = new Entity({
+                    billboard: {
+                        //todo: replace with sphere geoObject
+                    }
+                });
+            }
+            //@todo: geoObject
+            //si._sphereEntity.shape.setScale(si.bsphere.radius / 2);
+            //si._sphereEntity.shape.setPosition3v(si.bsphere.center);
+            this._boundingSphereCollection.add(si._sphereEntity);
+        }
+    }
+}

package/src/control/ShowFps.ts

@@ -0,0 +1,28 @@
+import { print2d } from "../utils/shared";
+import {Control, IControlParams} from "./Control";
+
+/**
+ * Frame per second(FPS) display control.
+ */
+export class ShowFps extends Control {
+    constructor(options: IControlParams) {
+        super(options);
+    }
+
+    public override oninit() {
+        let d = document.createElement("div");
+        d.className = "defaultText ";
+        d.id = "ogShowFpsControl";
+        document.body.appendChild(d);
+        this.renderer!.events.on("draw", this._draw, this);
+    }
+
+    protected _draw() {
+        print2d(
+            "ogShowFpsControl",
+            (1000.0 / this.renderer!.handler.deltaTime).toFixed(1),
+            this.renderer!.handler.canvas!.clientWidth - 60,
+            0
+        );
+    }
+}

package/src/control/SimpleNavigation.ts

@@ -0,0 +1,118 @@
+import {Camera} from "../camera/Camera";
+import {Control, IControlParams} from "./Control";
+import {input} from "../input/input";
+
+interface ISimpleNavigationParams extends IControlParams {
+    speed?: number;
+}
+
+/**
+ * Simple keyboard camera navigation with W,S,A,D and shift keys to fly around the scene.
+ */
+export class SimpleNavigation extends Control {
+    public speed: number;
+
+    constructor(options: ISimpleNavigationParams = {}) {
+        super({
+            name: "SimpleNavigation",
+            autoActivate: true, ...options
+        });
+        this.speed = options.speed || 1.0;
+    }
+
+    override oninit() {
+
+    }
+
+    public override onactivate() {
+        super.onactivate();
+        let r = this.renderer!;
+        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.onCameraTurnLeft, this);
+        r.events.on("keypress", input.KEY_RIGHT, this.onCameraTurnRight, this);
+        r.events.on("keypress", input.KEY_Q, this.onCameraRollLeft, this);
+        r.events.on("keypress", input.KEY_E, this.onCameraRollRight, this);
+    }
+
+    public override ondeactivate() {
+        super.ondeactivate();
+        let r = this.renderer!;
+        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.onCameraTurnLeft);
+        r.events.off("keypress", input.KEY_RIGHT, this.onCameraTurnRight);
+        r.events.off("keypress", input.KEY_Q, this.onCameraRollLeft);
+        r.events.off("keypress", input.KEY_E, this.onCameraRollRight);
+    }
+
+    protected onCameraMoveForward() {
+        if (this._active) {
+            let cam = this.renderer!.activeCamera!;
+            cam.slide(0, 0, -this.speed);
+            cam.update();
+        }
+    }
+
+    protected onCameraMoveBackward() {
+        let cam = this.renderer!.activeCamera!;
+        cam.slide(0, 0, this.speed);
+        cam.update();
+    }
+
+    protected onCameraStrifeLeft() {
+        let cam = this.renderer!.activeCamera!;
+        cam.slide(-this.speed, 0, 0);
+        cam.update();
+    }
+
+    protected onCameraStrifeRight() {
+        let cam = this.renderer!.activeCamera!;
+        cam.slide(this.speed, 0, 0);
+        cam.update();
+    }
+
+    protected onCameraLookUp() {
+        let cam = this.renderer!.activeCamera!;
+        cam.pitch(0.5);
+        cam.update();
+    }
+
+    protected onCameraLookDown() {
+        let cam = this.renderer!.activeCamera!;
+        cam.pitch(-0.5);
+        cam.update();
+    }
+
+    protected onCameraTurnLeft() {
+        let cam = this.renderer!.activeCamera!;
+        cam.yaw(0.5);
+        cam.update();
+    }
+
+    protected onCameraTurnRight() {
+        let cam = this.renderer!.activeCamera!;
+        cam.yaw(-0.5);
+        cam.update();
+    }
+
+    protected onCameraRollLeft() {
+        let cam = this.renderer!.activeCamera!;
+        cam.roll(-0.5);
+        cam.update();
+    }
+
+    protected onCameraRollRight() {
+        let cam = this.renderer!.activeCamera!;
+        cam.roll(0.5);
+        cam.update();
+    }
+}