@openglobus/og 0.17.2 → 0.18.1

package/lib/js/control/MouseNavigation.js

@@ -0,0 +1,362 @@
+import * as math from "../math";
+import { Control } from "./Control";
+import { input } from "../input/input";
+import { Key } from "../Lock";
+import { LonLat } from "../LonLat";
+import { Mat4 } from "../math/Mat4";
+import { Quat } from "../math/Quat";
+import { Ray } from "../math/Ray";
+import { Sphere } from "../bv/Sphere";
+import { Vec3 } from "../math/Vec3";
+/**
+ * Mouse planet camera dragging control.
+ */
+export class MouseNavigation extends Control {
+    constructor(options = {}) {
+        super(options);
+        this._deactivate = false;
+        this._shiftBusy = false;
+        this._name = "mouseNavigation";
+        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.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._wheelDirection = +1;
+        this._keyLock = new Key();
+    }
+    static getMovePointsFromPixelTerrain(cam, planet, stepsCount, delta, point, forward, dir) {
+        const steps = [];
+        let eye = cam.eye.clone(), n = cam._b.clone(), u = cam._r.clone(), v = cam._u.clone();
+        let a = planet.getCartesianFromPixelTerrain(point);
+        if (!a) {
+            a = planet.getCartesianFromPixelTerrain(planet.renderer.handler.getCenter());
+        }
+        if (a) {
+            if (!dir) {
+                dir = Vec3.sub(a, cam.eye).normalize();
+            }
+            let d = (delta * cam.eye.distance(a)) / stepsCount;
+            if (forward) {
+                d = -1.25 * d;
+            }
+            else {
+                d *= 2;
+            }
+            const scaled_n = n.scaleTo(d);
+            const slope = dir.dot(cam.eye.normal().negate());
+            if (slope >= 0.1) {
+                const grabbedSpheroid = new Sphere();
+                grabbedSpheroid.radius = a.length();
+                let rotArr = [], eyeArr = [];
+                let breaked = false;
+                for (let i = 0; i < stepsCount; i++) {
+                    eye.addA(scaled_n);
+                    const b = new Ray(eye, dir).hitSphere(grabbedSpheroid);
+                    eyeArr[i] = eye.clone();
+                    if (b) {
+                        rotArr[i] = new Mat4().rotateBetweenVectors(a.normal(), b.normal());
+                    }
+                    else {
+                        breaked = true;
+                        break;
+                    }
+                }
+                if (!breaked) {
+                    for (let i = 0; i < stepsCount; i++) {
+                        let rot = rotArr[i];
+                        steps[i] = {
+                            eye: rot.mulVec3(eyeArr[i]),
+                            v: rot.mulVec3(v),
+                            u: rot.mulVec3(u),
+                            n: rot.mulVec3(n)
+                        };
+                    }
+                }
+                else {
+                    eye = cam.eye.clone();
+                    for (let i = 0; i < stepsCount; i++) {
+                        steps[i] = {
+                            eye: eye.addA(scaled_n).clone(),
+                            v: v,
+                            u: u,
+                            n: n,
+                        };
+                    }
+                }
+            }
+            else {
+                for (let i = 0; i < stepsCount; i++) {
+                    steps[i] = {
+                        eye: eye.addA(dir.scaleTo(-d)).clone(),
+                        v: v,
+                        u: u,
+                        n: n,
+                    };
+                }
+            }
+            return steps;
+        }
+    }
+    onactivate() {
+        if (this.renderer) {
+            this.renderer.events.on("mousewheel", this.onMouseWheel, this);
+            this.renderer.events.on("lhold", this.onMouseLeftButtonDown, this);
+            this.renderer.events.on("rhold", this.onMouseRightButtonDown, this);
+            this.renderer.events.on("ldown", this.onMouseLeftButtonClick, this);
+            this.renderer.events.on("lup", this.onMouseLeftButtonUp, this);
+            this.renderer.events.on("rdown", this.onMouseRightButtonClick, this);
+            this.renderer.events.on("draw", this.onDraw, this, -1000);
+            this.renderer.events.on("mousemove", this.onMouseMove, this);
+            this.renderer.events.on("mouseleave", this.onMouseLeave, this);
+            this.renderer.events.on("mouseenter", this.onMouseEnter, this);
+            if (this._lmbDoubleClickActive) {
+                this.renderer.events.on("ldblclick", this.onMouseLeftButtonDoubleClick, this);
+            }
+        }
+    }
+    ondeactivate() {
+        if (this.renderer) {
+            this.renderer.events.off("mousewheel", this.onMouseWheel);
+            this.renderer.events.off("lhold", this.onMouseLeftButtonDown);
+            this.renderer.events.off("rhold", this.onMouseRightButtonDown);
+            this.renderer.events.off("ldown", this.onMouseLeftButtonClick);
+            this.renderer.events.off("lup", this.onMouseLeftButtonUp);
+            this.renderer.events.off("rdown", this.onMouseRightButtonClick);
+            this.renderer.events.off("draw", this.onDraw);
+            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) {
+            this._lmbDoubleClickActive = true;
+            this.renderer && this.renderer.events.on("ldblclick", this.onMouseLeftButtonDoubleClick, this);
+        }
+    }
+    deactivateDoubleClickZoom() {
+        if (this._lmbDoubleClickActive) {
+            this._lmbDoubleClickActive = false;
+            this.renderer && this.renderer.events.off("ldblclick", this.onMouseLeftButtonDoubleClick);
+        }
+    }
+    onMouseEnter(e) {
+        const renderEvents = this.renderer.events;
+        if (renderEvents.isKeyPressed(input.KEY_ALT)) {
+            renderEvents.releaseKeys();
+        }
+        renderEvents.updateButtonsStates(e.sys.buttons);
+        if (renderEvents.mouseState.leftButtonDown) {
+            this.renderer.handler.canvas.classList.add("ogGrabbingPoiner");
+        }
+        else {
+            this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
+        }
+    }
+    onMouseLeave() {
+        if (this.renderer.events.mouseState.leftButtonDown) {
+            this.scaleRot = 0;
+        }
+        this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
+    }
+    onMouseWheel(e) {
+        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, e.pos, e.wheelDelta > 0, e.direction) || null;
+        this._wheelDirection = e.wheelDelta;
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+    oninit() {
+        this.activate();
+        if (this.renderer) {
+            this.renderer.events.on("keyfree", input.KEY_ALT, this.onShiftFree, this);
+            this.renderer.events.on("keyfree", input.KEY_PRINTSCREEN, this.onShiftFree, this);
+        }
+    }
+    onMouseLeftButtonDoubleClick(e) {
+        this.planet.stopFlying();
+        this.stopRotation();
+        const p = this.planet.getCartesianFromPixelTerrain(e.pos);
+        if (p) {
+            const cam = this.planet.camera;
+            let maxAlt = cam.maxAltitude + this.planet.ellipsoid.polarSize;
+            let minAlt = cam.minAltitude + this.planet.ellipsoid.polarSize;
+            const camAlt = cam.eye.length();
+            const g = this.planet.ellipsoid.cartesianToLonLat(p);
+            if (camAlt > maxAlt || camAlt < minAlt) {
+                this.planet.flyLonLat(new LonLat(g.lon, g.lat));
+                return;
+            }
+            if (this.renderer.events.isKeyPressed(input.KEY_ALT)) {
+                this.planet.flyLonLat(new LonLat(g.lon, g.lat, cam.eye.distance(p) * 2.0));
+            }
+            else {
+                this.planet.flyLonLat(new LonLat(g.lon, g.lat, cam.eye.distance(p) * 0.57));
+            }
+        }
+    }
+    onMouseLeftButtonClick() {
+        if (this._active) {
+            this.renderer.handler.canvas.classList.add("ogGrabbingPoiner");
+            this.grabbedPoint = this.planet.getCartesianFromMouseTerrain();
+            if (this.grabbedPoint) {
+                this._eye0.copy(this.planet.camera.eye);
+                this.grabbedSpheroid.radius = this.grabbedPoint.length();
+                this.stopRotation();
+            }
+        }
+    }
+    stopRotation() {
+        this.qRot.clear();
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
+    onMouseLeftButtonUp(e) {
+        this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
+        if (e.x === e.prev_x && e.y === e.prev_y) {
+            this.scaleRot = 0.0;
+        }
+    }
+    onMouseLeftButtonDown(e) {
+        if (this._active) {
+            if (!this.grabbedPoint) {
+                return;
+            }
+            this.planet.stopFlying();
+            if (e.moving) {
+                let cam = this.planet.camera;
+                if (cam.slope > 0.2) {
+                    const 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());
+                        let rot = this.qRot;
+                        cam.eye = rot.mulVec3(cam.eye);
+                        cam._u = rot.mulVec3(cam._u);
+                        cam._r = rot.mulVec3(cam._r);
+                        cam._b = rot.mulVec3(cam._b);
+                    }
+                }
+                else {
+                    let p0 = this.grabbedPoint, p1 = Vec3.add(p0, cam._r), p2 = Vec3.add(p0, p0.normal());
+                    let px = new Vec3();
+                    if (new Ray(cam.eye, e.direction).hitPlane(p0, p1, p2, px) === Ray.INSIDE) {
+                        cam.eye = this._eye0.addA(px.subA(p0).negate());
+                    }
+                }
+            }
+        }
+    }
+    onMouseRightButtonClick(e) {
+        this.stopRotation();
+        this.planet.stopFlying();
+        this.pointOnEarth = this.planet.getCartesianFromPixelTerrain(e.pos);
+        if (this.pointOnEarth) {
+            this.earthUp = this.pointOnEarth.normal();
+        }
+    }
+    onMouseRightButtonDown(e) {
+        const cam = this.planet.camera;
+        if (this.pointOnEarth && e.moving) {
+            this.renderer.controlsBag.scaleRot = 1.0;
+            let l = (0.5 / cam.eye.distance(this.pointOnEarth)) * (cam._lonLat.height < 5.0 ? 5.0 : 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, this.minSlope);
+        }
+    }
+    onShiftFree() {
+        this._shiftBusy = false;
+    }
+    onMouseMove(e) {
+        if (this._active && this.renderer.events.isKeyPressed(input.KEY_ALT)) {
+            if (!this._shiftBusy) {
+                this._shiftBusy = true;
+                this.onMouseRightButtonClick(e);
+            }
+            this.onMouseRightButtonDown(e);
+        }
+    }
+    onDraw() {
+        if (this._active) {
+            const r = this.renderer;
+            const cam = this.planet.camera;
+            let prevEye = cam.eye.clone();
+            if (this.stepIndex) {
+                r.controlsBag.scaleRot = 1.0;
+                const sf = this.stepsForward[this.stepsCount - this.stepIndex--];
+                let maxAlt = cam.maxAltitude + this.planet.ellipsoid.polarSize;
+                let minAlt = cam.minAltitude + this.planet.ellipsoid.polarSize;
+                const camAlt = sf.eye.length();
+                if (camAlt > maxAlt || camAlt < minAlt && this._wheelDirection > 0) {
+                    this._wheelDirection = +1;
+                    return;
+                }
+                cam.eye = sf.eye;
+                cam._u = sf.v;
+                cam._r = sf.u;
+                cam._b = sf.n;
+            }
+            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);
+            }
+            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/lib/js/control/MouseWheelZoomControl.d.ts

@@ -0,0 +1,44 @@
+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 } from "./MouseNavigation";
+interface IMouseWheelZoomControl extends IControlParams {
+    minSlope?: number;
+}
+export declare class MouseWheelZoomControl extends Control {
+    protected grabbedPoint: Vec3;
+    protected _eye0: Vec3;
+    protected pointOnEarth: Vec3;
+    protected earthUp: Vec3;
+    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);
+    oninit(): void;
+    /**
+     * Planet zoom in.
+     * @public
+     */
+    zoomIn(): void;
+    /**
+     * Planet zoom out.
+     * @public
+     */
+    zoomOut(): void;
+    stopRotation(): void;
+    stopZoom(): void;
+    protected _draw(): void;
+}
+export {};

package/lib/js/control/MouseWheelZoomControl.js

@@ -0,0 +1,181 @@
+import { Sphere } from "../bv/Sphere";
+import { Key } from "../Lock";
+import { Quat } from "../math/Quat";
+import { Vec3 } from "../math/Vec3";
+import { Control } from "./Control";
+import { MouseNavigation } from "./MouseNavigation";
+export class MouseWheelZoomControl extends Control {
+    constructor(options = {}) {
+        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;
+    }
+    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) => {
+            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.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
+     */
+    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;
+        }
+    }
+    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() {
+        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/lib/js/control/RulerSwitcher.d.ts

@@ -0,0 +1,17 @@
+import { Control, IControlParams } from "./Control";
+import { HeightRuler } from "./heightRuler/HeightRuler";
+interface IRulerSwitcherParams extends IControlParams {
+    ignoreTerrain?: boolean;
+}
+/**
+ * Activate ruler
+ */
+export declare class RulerSwitcher extends Control {
+    ruler: HeightRuler;
+    constructor(options?: IRulerSwitcherParams);
+    oninit(): void;
+    onactivate(): void;
+    ondeactivate(): void;
+    protected _createMenuBtn(): void;
+}
+export {};

package/lib/js/control/RulerSwitcher.js

@@ -0,0 +1,57 @@
+import { Control } 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 -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+\t viewBox="0 0 512 512" xml:space="preserve">
+<g>
+\t<g>
+\t\t<path d="M369.151,0L0.001,369.15L142.85,512l369.149-369.15L369.151,0z M47.286,369.15l10.908-10.908l47.782,47.782l23.642-23.642
+\t\t\tL81.837,334.6l10.909-10.909l23.711,23.711L140.1,323.76l-23.711-23.711l10.909-10.909l23.711,23.711l23.642-23.642
+\t\t\tl-23.711-23.711l10.909-10.909l47.782,47.782l23.642-23.642l-47.782-47.782l10.908-10.908l23.71,23.71l23.642-23.642l-23.71-23.71
+\t\t\tl10.908-10.908l23.711,23.711l23.642-23.642l-23.711-23.711l10.909-10.909l47.782,47.782l23.642-23.642l-47.782-47.782
+\t\t\tl10.908-10.908l23.71,23.711l23.642-23.642l-23.711-23.71L334.6,81.837l23.711,23.71l23.642-23.642l-23.711-23.712l10.908-10.908
+\t\t\tl95.564,95.564L142.85,464.714L47.286,369.15z"/>
+\t</g>
+</g>
+</svg>`;
+/**
+ * Activate ruler
+ */
+export class RulerSwitcher extends Control {
+    constructor(options = {}) {
+        super({
+            name: "RulerSwitcher",
+            ...options
+        });
+        this.ruler = new HeightRuler({
+            ignoreTerrain: options.ignoreTerrain
+        });
+    }
+    oninit() {
+        this.planet.addControl(this.ruler);
+        this._createMenuBtn();
+    }
+    onactivate() {
+        this.ruler.activate();
+    }
+    ondeactivate() {
+        this.ruler.deactivate();
+    }
+    _createMenuBtn() {
+        let btn = new ToggleButton({
+            classList: ["og-map-button", "og-ruler_button"],
+            icon: ICON_BUTTON_SVG
+        });
+        btn.appendTo(this.renderer.div);
+        btn.events.on("change", (isActive) => {
+            if (isActive) {
+                this.onactivate();
+            }
+            else {
+                this.ondeactivate();
+            }
+        });
+    }
+}

package/lib/js/control/ScaleControl.d.ts

@@ -0,0 +1,24 @@
+import { Control, IControlParams } from "./Control";
+import { Vec2 } from "../math/Vec2";
+interface IScaleControlParams extends IControlParams {
+    isCenter?: boolean;
+}
+/**
+ * Planet zoom buttons control.
+ */
+export declare class ScaleControl extends Control {
+    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);
+    protected _renderTemplate(): HTMLElement;
+    oninit(): void;
+    protected _drawScreen(px: Vec2): void;
+}
+export {};