@openglobus/og 0.17.2 → 0.18.0

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

@@ -1,8 +1,8 @@
-"use strict";
-
-import { Control } from "./Control.js";
-import { ToggleButton } from "../ui/ToggleButton.js";
-import { Dialog } from "../ui/Dialog.js";
+import {Control, IControlParams} from "./Control";
+import {Dialog} from "../ui/Dialog";
+import {ToggleButton} from "../ui/ToggleButton";
+import {GlobusTerrain} from "../terrain/GlobusTerrain";
+import {CanvasTiles} from "../layer/CanvasTiles";
 
 const ICON_LOCK_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
@@ -52,17 +52,30 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="iso-8859-1"?>
 </g>
 </svg>`;
 
-/**
- * Debug information
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
- */
-class DebugInfo extends Control {
-    /**
-     * @param {Object} [options] - Control options.
-     */
-    constructor(options = {}) {
+const ICON_CANVASTILES_SVG = `<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M 4 4 L 4 8 L 8 8 L 8 4 L 4 4 z M 10 4 L 10 8 L 14 8 L 14 4 L 10 4 z M 16 4 L 16 8 L 20 8 L 20 4 L 16 4 z M 4 10 L 4 14 L 8 14 L 8 10 L 4 10 z M 10 10 L 10 14 L 14 14 L 14 10 L 10 10 z M 16 10 L 16 14 L 20 14 L 20 10 L 16 10 z M 4 16 L 4 20 L 8 20 L 8 16 L 4 16 z M 10 16 L 10 20 L 14 20 L 14 16 L 10 16 z M 16 16 L 16 20 L 20 20 L 20 16 L 16 16 z"/>
+</svg>`;
+
+export interface IDebugInfoWatch {
+    label: string;
+    valEl?: HTMLElement;
+    frame?: () => string | number;
+}
+
+interface IDebugInfoParams extends IControlParams {
+    watch?: IDebugInfoWatch[];
+}
+
+export class DebugInfo extends Control {
+    public el: HTMLElement | null;
+    protected _watch: IDebugInfoWatch[];
+    protected _toggleBtn: ToggleButton;
+    protected _dialog: Dialog<null>;
+
+    protected _canvasTiles: CanvasTiles;
+
+    constructor(options: IDebugInfoParams = {}) {
         if (!options.name || options.name === "") {
             options.name = "DebugInfo";
         }
@@ -84,34 +97,83 @@ class DebugInfo extends Control {
             width: 480
         });
 
-        this._dialog.on("visibility", (v) => {
+        this._dialog.events.on("visibility", (v: boolean) => {
             this._toggleBtn.setActive(v);
         });
+
+        this._canvasTiles = new CanvasTiles("Tile grid", {
+            visibility: true,
+            isBaseLayer: false,
+            drawTile: function (material: any, applyCanvas: any) {
+
+                //
+                // This is important create canvas here!
+                //
+                let cnv = document.createElement("canvas");
+                let ctx = cnv.getContext("2d")!;
+                cnv.width = 256;
+                cnv.height = 256;
+
+                //Clear canvas
+                ctx.clearRect(0, 0, cnv.width, cnv.height);
+
+                //Draw border
+                ctx.beginPath();
+                ctx.rect(0, 0, cnv.width, cnv.height);
+                ctx.lineWidth = 2;
+                ctx.strokeStyle = 'black';
+                ctx.stroke();
+
+                let size;
+
+                if (material.segment.isPole) {
+                    let ext = material.segment.getExtentLonLat();
+
+                    ctx.fillStyle = 'black';
+                    ctx.font = 'normal ' + 29 + 'px Verdana';
+
+                    ctx.textAlign = 'center';
+                    ctx.fillText(`${ext.northEast.lon.toFixed(3)} ${ext.northEast.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 + 20);
+                    ctx.fillText(`${ext.southWest.lon.toFixed(3)} ${ext.southWest.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 - 20);
+                } else {
+                    //Draw text
+                    if (material.segment.tileZoom > 14) {
+                        size = "26";
+                    } else {
+                        size = "32";
+                    }
+                    ctx.fillStyle = 'black';
+                    ctx.font = 'normal ' + size + 'px Verdana';
+                    ctx.textAlign = 'center';
+                    ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
+                }
+
+                //Draw canvas tile
+                applyCanvas(cnv);
+            }
+        });
     }
 
-    addWatches(watches) {
+    public addWatches(watches: IDebugInfoWatch[]) {
         for (let i = 0; i < watches.length; i++) {
             this.addWatch(watches[i]);
         }
     }
 
-    addWatch(watch) {
+    public addWatch(watch: IDebugInfoWatch) {
         this._watch.push(watch);
         let watchEl = document.createElement("div");
         watchEl.classList.add("og-watch-line");
-        watchEl.innerHTML =
-            '<div class="og-watch-label">' +
-            watch.label +
-            '</div><div class="og-watch-value"></div>';
-        watch.valEl = watchEl.querySelector(".og-watch-value");
-        this.el.appendChild(watchEl);
+        watchEl.innerHTML = `<div class="og-watch-label">${watch.label}</div><div class="og-watch-value"></div>`;
+        watch.valEl = watchEl.querySelector<HTMLElement>(".og-watch-value")!;
+        this.el!.appendChild(watchEl);
     }
 
-    oninit() {
+    public override oninit() {
 
-        this._toggleBtn.appendTo(this.renderer.div);
-        this._dialog.appendTo(this.renderer.div);
-        this._toggleBtn.on("change", (isActive) => {
+        this._toggleBtn.appendTo(this.renderer!.div!);
+        this._dialog.appendTo(this.renderer!.div!);
+        this._toggleBtn.events.on("change", (isActive: boolean) => {
             this._dialog.setVisibility(isActive);
         });
 
@@ -122,21 +184,21 @@ class DebugInfo extends Control {
         $controls.classList.add("og-debuginfo_controls");
         this.el.appendChild($controls);
 
-        var temp = this._watch;
+        let temp = this._watch;
         this._watch = [];
         for (let i = 0; i < temp.length; i++) {
             this.addWatch(temp[i]);
         }
-        this._dialog.container.appendChild(this.el);
-        this.renderer.events.on("draw", this._frame, this);
+        this._dialog.container?.appendChild(this.el);
+        this.renderer!.events.on("draw", this._frame, this);
 
-        let p = this.planet;
+        let p = this.planet!;
 
         if (p) {
             this.addWatches([
                 {
                     label: "Nodes count",
-                    frame: () => p._renderedNodes.length
+                    frame: () => p!._renderedNodes.length
                 },
                 {
                     label: "createdNodes",
@@ -152,7 +214,7 @@ class DebugInfo extends Control {
                 },
                 {
                     label: "maxZoom/minZoom",
-                    frame: () => p.maxCurrZoom + " / " + p.minCurrZoom
+                    frame: () => p.maxCurrZoom + " / " + p?.minCurrZoom
                 },
                 {
                     label: "viewExtent",
@@ -163,8 +225,7 @@ class DebugInfo extends Control {
                     frame: () =>
                         `<div style="width:190px">${(p.camera._lonLat.height / 1000.0).toFixed(2) +
                         " / " +
-                        (p.camera.getAltitude() / 1000.0).toFixed(2)
-                        }</div>`
+                        (p.camera.getAltitude() / 1000.0).toFixed(2)}</div>`
                 },
                 {
                     label: "cam.slope",
@@ -177,11 +238,11 @@ class DebugInfo extends Control {
                 {
                     label: "deltaTime/FPS",
                     frame: () =>
-                        `<div style="width:70px"><div style="width:20px; float: left;">${Math.round(
-                            p.renderer.handler.deltaTime
-                        )}</div> <div style="float: left">${Math.round(
-                            1000.0 / p.renderer.handler.deltaTime
-                        )}</div></div>`
+                        `<div style="width:70px"><div style="width:20px; float: left;">
+                        ${Math.round(p.renderer!.handler.deltaTime)}
+                        </div> <div style="float: left">
+                        ${Math.round(1000.0 / p.renderer!.handler.deltaTime)}
+                        </div></div>`
                 },
                 {
                     label: "-------------------------"
@@ -196,34 +257,32 @@ class DebugInfo extends Control {
                 },
                 {
                     label: "PlainWorker",
-                    frame: () => p._plainSegmentWorker._pendingQueue.length
+                    frame: () => p._plainSegmentWorker.pendingQueue.length
                 },
                 {
                     label: "TileLoader",
-                    frame: () => p._tileLoader._loading + " " + p._tileLoader._queue.length
+                    frame: () => `${p._tileLoader.loading} ${p._tileLoader.queue.length}`
                 },
                 {
                     label: "TerrainLoader",
                     frame: () => {
-                        if (p.terrain && p.terrain._loader) {
-                            return (
-                                p.terrain._loader._loading + " " + p.terrain._loader._queue.length
-                            );
+                        if (p.terrain && !p.terrain.isEmpty) {
+                            return `${(p.terrain as GlobusTerrain).loader.loading}  ${(p.terrain as GlobusTerrain).loader.queue.length}`
                         }
                         return "";
                     }
                 },
                 {
                     label: "TerrainWorker",
-                    frame: () => p._terrainWorker._pendingQueue.length
+                    frame: () => p._terrainWorker.pendingQueue.length
                 },
                 {
                     label: "NormalMapCreator",
-                    frame: () => p._normalMapCreator._queue.length
+                    frame: () => p._normalMapCreator.queueSize
                 },
                 {
                     label: "VectorTileCreator",
-                    frame: () => p._vectorTileCreator._queue.length
+                    frame: () => p._vectorTileCreator.queueSize
                 }
             ]);
         }
@@ -235,25 +294,34 @@ class DebugInfo extends Control {
         });
         lockTreeBtn.appendTo($controls);
 
-        lockTreeBtn.on("change", (isActive) => {
+        lockTreeBtn.events.on("change", (isActive: boolean) => {
             if (isActive) {
                 p.lockQuadTree();
             } else {
                 p.unlockQuadTree();
             }
         });
+
+        let canvasTilesBtn = new ToggleButton({
+            classList: ["og-debuginfo_controls-button"],
+            icon: ICON_CANVASTILES_SVG,
+            title: "Show/Hide grid"
+        });
+        canvasTilesBtn.appendTo($controls);
+
+        canvasTilesBtn.events.on("change", (isActive: boolean) => {
+            if (isActive) {
+                this.planet!.addLayer(this._canvasTiles);
+            } else {
+                this._canvasTiles.remove();
+            }
+        });
     }
 
-    _frame() {
+    protected _frame() {
         for (let i = 0; i < this._watch.length; i++) {
-            var w = this._watch[i];
-            w.valEl.innerHTML = w.frame ? w.frame() : "";
+            let w = this._watch[i];
+            w.valEl!.innerHTML = w.frame ? String(w.frame()) : "";
         }
     }
-}
-
-export function debugInfo(options) {
-    return new DebugInfo(options);
-}
-
-export { DebugInfo };
+}

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

@@ -1,9 +1,7 @@
-"use strict";
-
-import { ToggleButton } from "../ui/ToggleButton.js";
-import { Control } from "./Control.js";
-import { DrawingControl } from "./drawing/DrawingControl.js";
-import { ButtonGroup } from "../ui/ButtonGroup.js";
+import {ButtonGroup} from "../ui/ButtonGroup";
+import {Control} from "./Control";
+import {DrawingControl} from "./drawing/DrawingControl";
+import {ToggleButton} from "../ui/ToggleButton";
 
 const ICON_POLYGON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
@@ -41,11 +39,10 @@ const ICON_DEFAULT_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" hei
 
 /**
  * Activate drawing control
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
  */
-class DrawingSwitcher extends Control {
+export class DrawingSwitcher extends Control {
+    public drawingControl: DrawingControl;
+
     constructor(options = {}) {
         super({
             name: "DrawingSwitcher",
@@ -55,20 +52,20 @@ class DrawingSwitcher extends Control {
         this.drawingControl = new DrawingControl();
     }
 
-    oninit() {
-        this.planet.addControl(this.drawingControl);
+    public override oninit() {
+        this.planet!.addControl(this.drawingControl);
         this._createMenu();
     }
 
-    onactivate() {
+    public override onactivate() {
         this.drawingControl.activate();
     }
 
-    ondeactivate() {
+    public override ondeactivate() {
         this.drawingControl.deactivate();
     }
 
-    _createMenu() {
+    protected _createMenu() {
 
         let defaultBtn = new ToggleButton({
             classList: ["og-map-button", "og-drawing-default_button"],
@@ -95,7 +92,7 @@ class DrawingSwitcher extends Control {
             ]
         });
 
-        buttons.on("change", (btn) => {
+        buttons.events.on("change", (btn: ToggleButton) => {
             this.drawingControl.deactivate();
             switch (btn.name) {
                 case "polygon":
@@ -107,11 +104,8 @@ class DrawingSwitcher extends Control {
             }
         });
 
-        defaultBtn.appendTo(this.renderer.div)
-        polyBtn.appendTo(this.renderer.div);
-        lineBtn.appendTo(this.renderer.div);
+        defaultBtn.appendTo(this.renderer!.div!)
+        polyBtn.appendTo(this.renderer!.div!);
+        lineBtn.appendTo(this.renderer!.div!);
     }
 }
-
-export { DrawingSwitcher };
-

package/src/control/EarthCoordinates.ts

@@ -0,0 +1,222 @@
+import * as units from '../utils/units';
+import {Control, IControlParams} from './Control';
+import {heightMode} from '../utils/units';
+import {LonLat} from '../LonLat';
+import {throttle} from '../utils/shared';
+import {IMouseState} from "../renderer/RendererEvents";
+
+interface IEarthCoordinatesParams extends IControlParams {
+    heightMode?: string;
+    centerMode?: boolean;
+    altitudeUnit?: string;
+    type?: number
+}
+
+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.
+ * @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.
+ */
+export class EarthCoordinates extends Control {
+    protected _type: number;
+    protected _TYPE_FUNC: ((ll?: LonLat | null) => void)[];
+    protected _showFn: ((ll?: LonLat | null) => void) | null;
+    protected _lonLat: LonLat | null;
+    protected _latSideEl: HTMLElement | null;
+    protected _lonSideEl: HTMLElement | null;
+    protected _latValEl: HTMLElement | null;
+    protected _lonValEl: HTMLElement | null;
+    protected _heightEl: HTMLElement | null;
+    protected _altUnitVal: string;
+    protected _heightModeVal: string;
+    protected _altUnit: number;
+    protected _heightMode: number;
+    protected _centerMode: boolean;
+    protected _el: HTMLElement | null;
+
+    constructor(options: IEarthCoordinatesParams = {}) {
+        super(options);
+
+        this._type = options.type || 0;
+
+        this._TYPE_FUNC = [this._SHOW_DECIMAL, this._SHOW_DEGREE];
+
+        this._showFn = null;
+
+        this._el = null;
+        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 as any)[this._altUnitVal];
+        this._heightMode = heightMode[this._heightModeVal];
+
+        this._lonLat = null;
+
+        this._centerMode = options.centerMode != undefined ? options.centerMode : true;
+    }
+
+    protected _SHOW_DECIMAL(ll?: LonLat | null) {
+        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) + '°';
+        }
+    }
+
+    protected _SHOW_DEGREE(ll?: LonLat | null) {
+        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) + '"';
+        }
+    }
+
+    protected _createCenterEl(): HTMLElement {
+        let el = document.createElement('div');
+        el.className = 'og-center-icon';
+        el.innerHTML = CENTER_SVG;
+        return el;
+    }
+
+    protected _updateUnits() {
+        this._heightMode = heightMode[this._heightModeVal];
+        this._altUnit = (units as any)[this._altUnitVal];
+        this._el!.querySelector(".og-units-height")!.innerHTML = units.toString(this._altUnit);
+        this._showHeight();
+    }
+
+    protected _refreshCoordinates() {
+
+        if (this._type >= this._TYPE_FUNC.length) {
+            this._type = 0;
+        }
+
+        let el = this._el!;
+
+        el.innerHTML = TYPE_HTML[this._type];
+
+        this._latSideEl = el.querySelector(".og-lat-side");
+        this._lonSideEl = el.querySelector(".og-lon-side");
+        this._latValEl = el.querySelector(".og-lat-val");
+        this._lonValEl = el.querySelector(".og-lon-val");
+        this._heightEl = el.querySelector(".og-height");
+
+        this._showFn = this._TYPE_FUNC[this._type];
+        this._showFn(this._lonLat);
+    }
+
+    public override 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.planet!.camera.events.on("moveend", this._grabCoordinates, this);
+            this.planet!.camera.events.on("moveend", throttle(() => this._showHeight(), 400, true), this);
+        } else {
+            this.renderer!.events.on("mousemove", this._grabCoordinates, this);
+            this.renderer!.events.on("mousestop", throttle(() => this._showHeight(), 400, true), this);
+        }
+
+        this._refreshCoordinates();
+
+        this._updateUnits();
+    }
+
+    protected _grabCoordinates(e: IMouseState) {
+        let px = e.pos;
+        let scrPx;
+        let r = this.renderer;
+        if (this._centerMode) {
+            scrPx = r!.handler.getCenter();
+        } else {
+            scrPx = px;
+        }
+        this._lonLat = this.planet!.getLonLatFromPixelTerrain(scrPx) || null;
+        this._showFn!(this._lonLat);
+    }
+
+    protected async _showHeight() {
+        if (this._lonLat && this.planet) {
+            let alt = 0;
+            this._heightEl!.style.opacity = "0.7";
+            if (this._heightMode === heightMode.ell) {
+                alt = await this.planet.getHeightAboveELL(this._lonLat);
+                alt = Number(units.convertExt(true, units.m, this._altUnit, alt));
+            } else if (this._heightMode === heightMode.msl) {
+                alt = await this.planet.getHeightDefault(this._lonLat);
+                alt = Number(units.convertExt(true, units.m, this._altUnit, alt));
+            }
+            this._heightEl!.style.opacity = "1.0";
+            this._heightEl!.innerHTML = alt.toString();
+        }
+    }
+}