@openglobus/og 0.18.3 → 0.18.5

package/lib/js/control/elevationProfile/ElevationProfileControl.js

@@ -0,0 +1,153 @@
+import { Control } from "../Control";
+import { Dialog } from "../../ui/Dialog";
+import { View } from "../../ui/View";
+import { ToggleButton } from "../../ui/ToggleButton";
+import { ElevationProfileView } from "./ElevationProfileView";
+import { ElevationProfileScene } from "./ElevationProfileScene";
+import { throttle } from "../../utils/shared";
+import { ElevationProfileButtonsView } from "./ElevationProfileButtonsView";
+import { PointListDialog } from "./PointListDialog";
+import { ElevationProfileLegend } from "./ElevationProfileLegend";
+const TEMPLATE = `<div class="og-elevationprofile__container">
+      <div class="og-elevationprofile__menu"></div>
+      <div class="og-elevationprofile__graph"></div>
+    </div>`;
+const ICON_BUTTON_SVG = `<svg style="width: 2em; height: 2em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M128 896v-158.293333l331.946667-191.573334 160.853333 93.866667L896 480V896H128M896 381.44l-275.2 159.146667-160.853333-92.586667L128 640v-94.293333l331.946667-191.573334 160.853333 93.866667L896 288v93.44z" fill="" /></svg>`;
+export class ElevationProfileControl extends Control {
+    constructor(options = {}) {
+        super({
+            name: "ElevationProfileControl",
+            ...options
+        });
+        this._onSceneChange = () => {
+            this._collectProfileThrottled();
+        };
+        this._onElevationProfilePointer = (pointerDistance, tp0, tp1, gp0, gp1, trackPoiIndex, groundPoiIndex, elevation) => {
+            let lonLat0 = this._elevationProfileScene.getPointLonLat(trackPoiIndex);
+            let lonLat1 = this._elevationProfileScene.getPointLonLat(trackPoiIndex + 1);
+            let cart0 = this.planet.ellipsoid.lonLatToCartesian(lonLat0), cart1 = this.planet.ellipsoid.lonLatToCartesian(lonLat1);
+            let d = (pointerDistance - tp0[0]) / (tp1[0] - tp0[0]);
+            let dir = cart1.sub(cart0);
+            this._elevationProfileScene.setPointerCartesian3v(cart0.add(dir.scale(d)), elevation);
+        };
+        this._onElevationProfileDblClick = (pointerDistance, tp0, tp1, gp0, gp1, trackPoiIndex, groundPoiIndex, elevation) => {
+            let lonLat0 = this._elevationProfileScene.getPointLonLat(trackPoiIndex);
+            let lonLat1 = this._elevationProfileScene.getPointLonLat(trackPoiIndex + 1);
+            let cart0 = this.planet.ellipsoid.lonLatToCartesian(lonLat0), cart1 = this.planet.ellipsoid.lonLatToCartesian(lonLat1);
+            let d = (pointerDistance - tp0[0]) / (tp1[0] - tp0[0]);
+            let dir = cart1.sub(cart0);
+            let poi = cart0.add(dir.scale(d));
+            this.planet.camera.flyDistance(poi, this.planet.camera.eye.distance(poi));
+        };
+        this._onElevationProfileMouseEnter = () => {
+            if (this._elevationProfileView.model.pointsReady) {
+                this._elevationProfileScene.setPointerVisibility(true);
+            }
+        };
+        this._onElevationProfileMouseLeave = () => {
+        };
+        this._elevationProfileScene = new ElevationProfileScene();
+        this._elevationProfileView = new ElevationProfileView();
+        this._elevationProfileLegend = new ElevationProfileLegend();
+        this._elevationProfileButtonsView = new ElevationProfileButtonsView({
+            model: this._elevationProfileView.model
+        });
+        this._elevationProfileView.events.on("pointer", this._onElevationProfilePointer);
+        this._elevationProfileView.events.on("dblclick", this._onElevationProfileDblClick);
+        this._elevationProfileView.events.on("mouseenter", this._onElevationProfileMouseEnter);
+        this._elevationProfileView.events.on("mouseleave", this._onElevationProfileMouseLeave);
+        this._dialog = new Dialog({
+            title: "Elevation Profile",
+            visible: false,
+            resizable: true,
+            useHide: true,
+            top: 175,
+            left: 65,
+            width: 400,
+            height: 200,
+            minHeight: 100,
+            minWidth: 100
+        });
+        this._graphView = new View({
+            template: TEMPLATE
+        });
+        this._poiListDialog = new PointListDialog({
+            model: this._elevationProfileScene
+        });
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-elevationprofile_button"],
+            icon: ICON_BUTTON_SVG
+        });
+        this._collectProfileThrottled = throttle(() => {
+            let points = this._elevationProfileScene.getPointsLonLat();
+            this._elevationProfileView.model.collectProfile(points);
+        }, 250);
+    }
+    oninit() {
+        this._dialog.appendTo(this.planet.renderer.div);
+        this._graphView.appendTo(this._dialog.container);
+        this._toggleBtn.appendTo(this.renderer.div);
+        this._dialog.events.on("visibility", (v) => {
+            this._toggleBtn.setActive(v);
+            if (v) {
+                this.activate();
+                this._elevationProfileView.resize();
+            }
+            else {
+                this.deactivate();
+            }
+        });
+        this._toggleBtn.events.on("change", (isActive) => {
+            this._dialog.setVisibility(isActive);
+        });
+        this._elevationProfileView.appendTo(this._graphView.select(".og-elevationprofile__graph"));
+        this._elevationProfileView.model.bindPlanet(this.planet);
+        this._elevationProfileView.model.events.on("clear", () => {
+            this._elevationProfileScene.clear();
+            this._elevationProfileLegend.clear();
+        });
+        this._elevationProfileView.model.events.on("startcollecting", () => {
+            this._elevationProfileScene.setPointerVisibility(false);
+        });
+        this._elevationProfileView.events.on("tracklength", (length) => {
+            this._elevationProfileLegend.setTrackLength(length);
+        });
+        this._elevationProfileView.events.on("groundlength", (length) => {
+            this._elevationProfileLegend.setGroundLength(length);
+        });
+        this._elevationProfileView.events.on("warninglength", (length) => {
+            this._elevationProfileLegend.setWarningLength(length);
+        });
+        this._elevationProfileView.events.on("collisionlength", (length) => {
+            this._elevationProfileLegend.setCollisionLength(length);
+        });
+        this._poiListDialog.appendTo(this.planet.renderer.div);
+        this._poiListDialog.events.on("visibility", (isVisible) => {
+            this._elevationProfileButtonsView.pointListBtn.setActive(isVisible, true);
+        });
+        this._elevationProfileLegend.appendTo(this._graphView.select(".og-elevationprofile__menu"));
+        this._elevationProfileButtonsView.appendTo(this._graphView.select(".og-elevationprofile__menu"));
+        this._elevationProfileButtonsView.events.on("list", (isActive) => {
+            this._poiListDialog.setVisibility(isActive);
+        });
+        this._elevationProfileButtonsView.events.on("location", (isActive) => {
+            this._elevationProfileScene.flyExtent();
+        });
+        this._elevationProfileButtonsView.events.on("reset", (isActive) => {
+            this._elevationProfileScene.setPointerVisibility(false);
+        });
+        this._elevationProfileScene.events.on("change", this._onSceneChange);
+    }
+    onactivate() {
+        this.renderer.controls.mouseNavigation.deactivateDoubleClickZoom();
+        this.planet && this._elevationProfileScene.bindPlanet(this.planet);
+        this.renderer && this.renderer.addNode(this._elevationProfileScene);
+    }
+    ondeactivate() {
+        this._poiListDialog.setVisibility(false);
+        this._elevationProfileView.model.clear();
+        this.renderer.controls.mouseNavigation.activateDoubleClickZoom();
+        this.renderer && this.renderer.removeNode(this._elevationProfileScene);
+        this._dialog.hide();
+    }
+}

package/lib/js/control/elevationProfile/ElevationProfileLegend.d.ts

@@ -0,0 +1,20 @@
+import { IViewParams, View } from '../../ui/View';
+export interface IElevationProfileLegendParams extends IViewParams {
+}
+export declare class ElevationProfileLegend extends View<null> {
+    $groundValue: HTMLElement | null;
+    $trackValue: HTMLElement | null;
+    $warningValue: HTMLElement | null;
+    $collisionValue: HTMLElement | null;
+    $trackUnits: HTMLElement | null;
+    $groundUnits: HTMLElement | null;
+    $warningUnits: HTMLElement | null;
+    $collisionUnits: HTMLElement | null;
+    constructor(params?: IElevationProfileLegendParams);
+    render(params: any): this;
+    clear(): void;
+    setTrackLength(trackLength: number): void;
+    setGroundLength(groundLength: number): void;
+    setWarningLength(warningLength: number): void;
+    setCollisionLength(collisionLength: number): void;
+}

package/lib/js/control/elevationProfile/ElevationProfileLegend.js

@@ -0,0 +1,82 @@
+import { View } from '../../ui/View';
+import { distanceFormatExt } from "../../utils/shared";
+const TEMPLATE = `<div class="og-elevationprofile-legend">
+        <div class="og-elevationprofile-legend__row og-elevationprofile-legend__track">
+          <div class="og-elevationprofile-square"></div>
+          <div class="og-elevationprofile-value">0</div>
+          <div class="og-elevationprofile-units">m</div>
+        </div>
+        <div class="og-elevationprofile-legend__row og-elevationprofile-legend__ground">
+          <div class="og-elevationprofile-square"></div>
+          <div class="og-elevationprofile-value">0</div>
+          <div class="og-elevationprofile-units">m</div>
+        </div>
+        <div class="og-elevationprofile-legend__row og-elevationprofile-legend__warning">        
+          <div class="og-elevationprofile-square"></div>
+          <div class="og-elevationprofile-value">0</div>
+          <div class="og-elevationprofile-units">m</div>
+        </div>
+        <div class="og-elevationprofile-legend__row og-elevationprofile-legend__collision">
+          <div class="og-elevationprofile-square"></div>
+          <div class="og-elevationprofile-value">0</div>
+          <div class="og-elevationprofile-units">m</div>
+        </div>
+      </div>`;
+export class ElevationProfileLegend extends View {
+    constructor(params = {}) {
+        super({
+            ...params,
+            template: TEMPLATE
+        });
+        this.$groundValue = null;
+        this.$trackValue = null;
+        this.$warningValue = null;
+        this.$collisionValue = null;
+        this.$trackUnits = null;
+        this.$groundUnits = null;
+        this.$warningUnits = null;
+        this.$collisionUnits = null;
+    }
+    render(params) {
+        super.render(params);
+        this.$trackValue = this.select(".og-elevationprofile-legend__track .og-elevationprofile-value");
+        this.$groundValue = this.select(".og-elevationprofile-legend__ground .og-elevationprofile-value");
+        this.$warningValue = this.select(".og-elevationprofile-legend__warning .og-elevationprofile-value");
+        this.$collisionValue = this.select(".og-elevationprofile-legend__collision .og-elevationprofile-value");
+        this.$trackUnits = this.select(".og-elevationprofile-legend__track .og-elevationprofile-units");
+        this.$groundUnits = this.select(".og-elevationprofile-legend__ground .og-elevationprofile-units");
+        this.$warningUnits = this.select(".og-elevationprofile-legend__warning .og-elevationprofile-units");
+        this.$collisionUnits = this.select(".og-elevationprofile-legend__collision .og-elevationprofile-units");
+        return this;
+    }
+    clear() {
+        this.$trackValue && (this.$trackValue.innerText = "0");
+        this.$trackUnits && (this.$trackUnits.innerText = "m");
+        this.$groundValue && (this.$groundValue.innerText = "0");
+        this.$groundUnits && (this.$groundUnits.innerText = "m");
+        this.$warningValue && (this.$warningValue.innerText = "0");
+        this.$warningUnits && (this.$warningUnits.innerText = "m");
+        this.$collisionValue && (this.$collisionValue.innerText = "0");
+        this.$collisionUnits && (this.$collisionUnits.innerText = "m");
+    }
+    setTrackLength(trackLength) {
+        let dist = distanceFormatExt(trackLength);
+        this.$trackValue.innerText = dist[0];
+        this.$trackUnits.innerText = dist[1];
+    }
+    setGroundLength(groundLength) {
+        let dist = distanceFormatExt(groundLength);
+        this.$groundValue.innerText = dist[0];
+        this.$groundUnits.innerText = dist[1];
+    }
+    setWarningLength(warningLength) {
+        let warningDist = distanceFormatExt(warningLength);
+        this.$warningValue.innerText = warningDist[0];
+        this.$warningUnits.innerText = warningDist[1];
+    }
+    setCollisionLength(collisionLength) {
+        let collisionDist = distanceFormatExt(collisionLength);
+        this.$collisionValue.innerText = collisionDist[0];
+        this.$collisionUnits.innerText = collisionDist[1];
+    }
+}

package/lib/js/control/elevationProfile/ElevationProfileScene.d.ts

@@ -0,0 +1,80 @@
+import { Entity } from '../../entity/Entity';
+import { EventsHandler } from '../../Events';
+import { LonLat } from "../../LonLat";
+import { Planet } from "../../scene/Planet";
+import { RenderNode } from '../../scene/RenderNode';
+import { Vector } from '../../layer/Vector';
+import { Vec2 } from '../../math/Vec2';
+import { Vec3 } from '../../math/Vec3';
+import { IMouseState } from "../../renderer/RendererEvents";
+import { Ellipsoid } from "../../ellipsoid/Ellipsoid";
+export interface IElevationProfileSceneParams {
+    name?: string;
+    planet?: Planet;
+}
+declare class ElevationProfileScene extends RenderNode {
+    events: EventsHandler<ElevationProfileSceneEventsList>;
+    protected _planet: Planet | null;
+    protected _trackLayer: Vector;
+    protected _groundPointersLayer: Vector;
+    protected _columnPointersLayer: Vector;
+    protected _headPointersLayer: Vector;
+    protected _heightsLayer: Vector;
+    protected _trackEntity: Entity;
+    protected _pickedGroundEntity: Entity | null;
+    protected _pickedHeadEntity: Entity | null;
+    protected _pointerLayer: Vector;
+    protected _pointerHeadEntity: Entity;
+    protected _pointerLabelEntity: Entity;
+    protected _pointerRayEntity: Entity;
+    protected _startClickPos: Vec2;
+    protected _startEntityPos: Vec2;
+    protected _clampToGround: boolean;
+    constructor(options?: IElevationProfileSceneParams);
+    flyExtent(): void;
+    get planet(): Planet | null;
+    protected _createGroundPointer(groundCart: Vec3, altitude?: number): {
+        headEntity: Entity;
+        groundEntity: Entity;
+        columnEntity: Entity;
+        heightLabelEntity: Entity;
+    };
+    setPointerCartesian3v(p: Vec3, height: number): void;
+    bindPlanet(planet: Planet): void;
+    init(): void;
+    onremove(): void;
+    _activate(): void;
+    getPointLonLat(index: number): LonLat | undefined;
+    getPointsLonLat(): LonLat[];
+    getHeightMSL(lonLat: LonLat): number;
+    getHeightELLAsync(lonLat: LonLat): Promise<number>;
+    addPointLonLatArrayAsync(lonLatArr: LonLat[], stopPropagation?: boolean): Promise<Entity>[];
+    addPointLonLatAsync(lonLat: LonLat, stopPropagation?: boolean): Promise<Entity>;
+    addGroundPointLonLatAsync(lonLat: LonLat, altitude?: number, stopPropagation?: boolean): Promise<Entity>;
+    addGroundPoint3vAsync(groundPos: Vec3, altitude?: number, stopPropagation?: boolean): Promise<Entity>;
+    protected _addPoint(groundPos: Vec3, lonLat: LonLat, altitude: number, stopPropagation?: boolean): Promise<Entity>;
+    protected _onLClick: (e: IMouseState) => void;
+    protected _onMouseMove: (e: IMouseState) => void;
+    setHeadPointCartesian3v(entityIndex: number, headPos: Vec3): void;
+    setGroundPointCartesian3v(entityIndex: number, groundPos: Vec3): void;
+    protected _onLUp: (e: IMouseState) => void;
+    protected _onGroundPointerEnter: (e: IMouseState) => void;
+    protected _onGroundPointerLeave: (e: IMouseState) => void;
+    protected _onGroundPointerLDown: (e: IMouseState) => void;
+    protected _onGroundPointerLUp: (e: IMouseState) => void;
+    protected _onHeadPointerEnter: (e: IMouseState) => void;
+    protected _onHeadPointerLeave: (e: IMouseState) => void;
+    protected _onHeadPointerLDown: (e: IMouseState) => void;
+    protected _onHeadPointerLUp: (e: IMouseState) => void;
+    protected _deactivate(): void;
+    setPointerVisibility(visibility: boolean): void;
+    setVisibility(visibility: boolean): void;
+    clear(): void;
+    frame(): void;
+    get ellipsoid(): Ellipsoid | null;
+}
+type ElevationProfileSceneEventsList = [
+    "change",
+    "addpoint"
+];
+export { ElevationProfileScene };