@openglobus/og 0.18.4 → 0.19.0

package/lib/js/control/elevationProfile/ElevationProfile.js

@@ -1,13 +1,14 @@
 import { Deferred } from '../../Deferred';
 import { createEvents } from '../../Events';
 import { Vec3 } from "../../math/Vec3";
-const ELEVATIONPROFILE_EVENTS = ["profilecollected"];
+const DEFAULT_WARNING_HEIGHT_LEVEL = 5;
+const ELEVATIONPROFILE_EVENTS = ["startcollecting", "profilecollected", "clear"];
 /**
  * Point types
  */
-const SAFE = 0;
-const WARNING = 1;
-const COLLISION = 2;
+export const SAFE = 0;
+export const WARNING = 1;
+export const COLLISION = 2;
 /**
  * drawData index names
  */
@@ -16,51 +17,75 @@ const GROUND = 1;
 const SEGMMENT_LENGTH = 1.0; // Distance between query points on the ground
 const GROUND_OFFSET = 1.0; // Ground level offset
 const BOTTOM_PADDING = 0.1; // Range minY padding in percentage from the bottom
-const TOP_PADDING = 0.1; // Range maxY padding in percentage from the top
+const TOP_PADDING = 0.2; // Range maxY padding in percentage from the top
 const HEIGHT_EPS = 0.1; // Warning height level error
-class ElevationProfile {
-    constructor(options) {
+export class ElevationProfile {
+    constructor(options = {}) {
         this.events = createEvents(ELEVATIONPROFILE_EVENTS);
-        this.planet = options.planet;
-        this._warningHeightLevel = 50;
+        this.planet = options.planet || null;
+        this._warningHeightLevel = DEFAULT_WARNING_HEIGHT_LEVEL;
         this._pointsReady = false;
         this._isWarning = false;
         this._minX = 0;
-        this._maxX = 1000;
+        this._planeDistance = this._maxX = 1000;
         this._minY = 0;
         this._maxY = 200;
-        this._drawData = [][0];
+        this._drawData = [[], []];
         this._promiseArr = [];
         this._promiseCounter = 0;
         this._pMaxY = 0;
         this._pMinY = 0;
         this._pDist = 0;
-        this._pTrackCoords = [[0, 0, SAFE]];
-        this._pGroundCoords = [[0, 0, SAFE]];
+        this._pTrackCoords = [];
+        this._pGroundCoords = [];
         this._pIndex = 0;
     }
+    bindPlanet(planet) {
+        this.planet = planet;
+    }
     setWarningHeightLevel(warningHeight = 0) {
         this._warningHeightLevel = warningHeight;
     }
     setRange(minX, maxX, minY, maxY) {
         this._minX = minX;
         this._maxX = maxX;
-        this._minY = minY;
-        this._maxY = maxY;
+        if (minY) {
+            this._minY = minY;
+        }
+        if (maxY) {
+            this._maxY = maxY;
+        }
     }
-    _getHeightAsync(ll, pIndex) {
+    _getHeightAsync(ll, pIndex, promiseCounter) {
         let def = new Deferred();
-        this.planet.terrain.getHeightAsync(ll, (elv) => {
-            elv += this.planet.terrain.geoid.getHeightLonLat(ll);
-            this._pGroundCoords[pIndex][1] = elv;
-            this._pGroundCoords[pIndex][2] = SAFE;
-            this._pGroundCoords[pIndex][3] = ll.height;
-            this._setPointType(pIndex);
-            def.resolve(elv);
-        });
+        if (this.planet) {
+            let msl = this.planet.terrain.geoid.getHeightLonLat(ll);
+            this.planet.terrain.getHeightAsync(ll, (elv) => {
+                if (this.planet && promiseCounter === this._promiseCounter) {
+                    elv += msl;
+                    this._pGroundCoords[pIndex][1] = elv;
+                    this._pGroundCoords[pIndex][2] = SAFE;
+                    this._pGroundCoords[pIndex][3] = ll.height;
+                    if (elv > this._pMaxY)
+                        this._pMaxY = elv;
+                    if (elv < this._pMinY)
+                        this._pMinY = elv;
+                    this._updatePointType(pIndex);
+                    def.resolve(elv);
+                }
+                else {
+                    def.reject();
+                }
+            });
+        }
+        else {
+            def.reject();
+        }
         return def.promise;
     }
-    _collectCoordsBetweenTwoTrackPoints(internalPoints, scaleFactor, p0, trackDir) {
+    _collectCoordsBetweenTwoTrackPoints(index, internalPoints, scaleFactor, p0, trackDir, promiseCounter) {
+        if (!this.planet)
+            return;
         for (let j = 1; j <= internalPoints; j++) {
             this._pDist += SEGMMENT_LENGTH;
             this._pIndex++;
@@ -68,19 +93,17 @@ class ElevationProfile {
             let dirSegLen = j * scaleFactor;
             let pjd = p0.add(trackDir.scaleTo(dirSegLen));
             let llx = this.planet.ellipsoid.cartesianToLonLat(pjd);
-            this._pGroundCoords[this._pIndex] = [this._pDist, 0, SAFE];
+            this._pGroundCoords[this._pIndex] = [this._pDist, 0, SAFE, 0, index];
             ((lonlat, index) => {
-                this._promiseArr.push(this._getHeightAsync(lonlat, index)
-                    .then((elv) => {
-                    if (elv > this._pMaxY)
-                        this._pMaxY = elv;
-                    if (elv < this._pMinY)
-                        this._pMinY = elv;
-                }));
+                this._promiseArr.push(this._getHeightAsync(lonlat, index, promiseCounter));
             })(llx, this._pIndex);
         }
     }
-    _collectAllPoints(pointsLonLat) {
+    _collectAllPoints(pointsLonLat, promiseCounter) {
+        if (!this.planet)
+            return;
+        if (promiseCounter !== this._promiseCounter)
+            return;
         let p0 = new Vec3(), p1 = new Vec3();
         for (let i = 1, len = pointsLonLat.length; i < len; i++) {
             let lonlat0 = pointsLonLat[i - 1], lonlat1 = pointsLonLat[i];
@@ -93,11 +116,11 @@ class ElevationProfile {
             let projLen = proj.length();
             let internalPoints = Math.floor(projLen / SEGMMENT_LENGTH);
             let scaleFactor = SEGMMENT_LENGTH * dirLength / projLen;
-            this._getGroundElevation(lonlat0);
+            this._getGroundElevation(lonlat0, i - 1, promiseCounter);
             proj.normalize();
             trackDir.normalize();
             // Getting internal point elevations and looking for the collisions
-            this._collectCoordsBetweenTwoTrackPoints(internalPoints, scaleFactor, p0, trackDir);
+            this._collectCoordsBetweenTwoTrackPoints(i - 1, internalPoints, scaleFactor, p0, trackDir, promiseCounter);
             this._pDist += projLen - internalPoints * SEGMMENT_LENGTH;
             this._pIndex++;
             let elv = lonlat1.height;
@@ -105,49 +128,41 @@ class ElevationProfile {
                 this._pMaxY = elv;
             if (elv < this._pMinY)
                 this._pMinY = elv;
-            this._pTrackCoords[i] = [this._pDist, elv];
+            this._pTrackCoords[i] = [this._pDist, elv, this._pIndex];
         }
     }
-    _getGroundElevation(lonLat) {
-        this._pGroundCoords[this._pIndex] = [this._pDist, 0, SAFE];
-        this._promiseArr.push(this._getHeightAsync(lonLat, this._pIndex)
-            .then((elv) => {
-            if (typeof elv === 'number') {
-                if ((elv > this._pMaxY) && (elv))
-                    this._pMaxY = elv;
-                if ((elv < this._pMinY) && (elv))
-                    this._pMinY = elv;
-            }
-        }));
-    }
-    _collectPromise(resolve) {
-        Promise.all(this._promiseArr).then(() => {
-            resolve({
-                dist: this._pDist,
-                minY: this._pMinY,
-                maxY: this._pMaxY,
-                trackCoords: this._pTrackCoords,
-                groundCoords: this._pGroundCoords
-            });
-        });
+    _getGroundElevation(lonLat, index, promiseCounter) {
+        this._pGroundCoords[this._pIndex] = [this._pDist, 0, SAFE, 0, index];
+        this._promiseArr.push(this._getHeightAsync(lonLat, this._pIndex, promiseCounter));
     }
-    _calcPointsAsync(pointsLonLat) {
+    _calcPointsAsync(pointsLonLat, promiseCounter) {
         return new Promise((resolve, reject) => {
-            this._pTrackCoords = [[0, pointsLonLat[0].height]];
+            this._pTrackCoords = [[0, pointsLonLat[0].height, 0]];
             this._pMaxY = pointsLonLat[0].height;
             this._pMinY = this._pMaxY;
             this._pDist = 0;
-            this._pGroundCoords = [[0, 0, SAFE]];
+            this._pGroundCoords = [];
             this._pIndex = 0;
             this._promiseArr = [];
-            this._collectAllPoints(pointsLonLat);
-            this._getGroundElevation(pointsLonLat[pointsLonLat.length - 1]);
-            this._collectPromise(resolve);
+            this._collectAllPoints(pointsLonLat, promiseCounter);
+            this._getGroundElevation(pointsLonLat[pointsLonLat.length - 1], pointsLonLat.length - 1, promiseCounter);
+            Promise.all(this._promiseArr).then(() => {
+                resolve({
+                    dist: this._pDist,
+                    minY: this._pMinY,
+                    maxY: this._pMaxY,
+                    trackCoords: this._pTrackCoords,
+                    groundCoords: this._pGroundCoords
+                });
+            });
         });
     }
     get minX() {
         return this._minX;
     }
+    get planeDistance() {
+        return this._planeDistance;
+    }
     get maxX() {
         return this._maxX;
     }
@@ -163,24 +178,36 @@ class ElevationProfile {
     get isWarningOrCollision() {
         return this._isWarning;
     }
+    get drawData() {
+        return this._drawData;
+    }
     collectProfile(pointsLonLat) {
+        let def = new Deferred();
+        if (!this.planet)
+            def.reject();
         this._pointsReady = false;
         this._isWarning = false;
-        if (!pointsLonLat || !pointsLonLat.length)
-            return;
+        if (!pointsLonLat || !pointsLonLat.length) {
+            def.reject();
+            return def.promise;
+        }
+        this.events.dispatch(this.events.startcollecting, this);
         this._promiseCounter++;
         ((counter) => {
-            this._calcPointsAsync(pointsLonLat).then((p) => {
+            this._calcPointsAsync(pointsLonLat, counter).then((p) => {
                 if (counter === this._promiseCounter) {
+                    this._planeDistance = p.dist;
                     this.setRange(0, p.dist, p.minY - BOTTOM_PADDING * Math.abs(p.minY), p.maxY + Math.abs(p.maxY) * TOP_PADDING);
                     this._pointsReady = true;
                     this._drawData = [p.trackCoords, p.groundCoords];
                     this.events.dispatch(this.events.profilecollected, this._drawData, this);
+                    def.resolve(this._drawData);
                 }
             });
         })(this._promiseCounter);
+        return def.promise;
     }
-    _setPointType(pIndex) {
+    _updatePointType(pIndex) {
         if ((this._pGroundCoords[pIndex][3] >= this._pGroundCoords[pIndex][1]) &&
             (this._pGroundCoords[pIndex][3] < this._pGroundCoords[pIndex][1] + this._warningHeightLevel - HEIGHT_EPS)) {
             this._pGroundCoords[pIndex][2] = WARNING;
@@ -188,30 +215,34 @@ class ElevationProfile {
         if (this._pGroundCoords[pIndex][3] <= this._pGroundCoords[pIndex][1] + GROUND_OFFSET) {
             this._pGroundCoords[pIndex][2] = COLLISION;
         }
-        if (this._pGroundCoords[pIndex][2] == WARNING || this._pGroundCoords[pIndex][2] == COLLISION) {
+        if (this._pGroundCoords[pIndex][2] === WARNING || this._pGroundCoords[pIndex][2] === COLLISION) {
             this._isWarning = true;
         }
     }
+    /**
+     * @deprecated
+     */
     _setPointsType() {
         this._isWarning = false;
         this._pTrackCoords = this._drawData[TRACK];
         this._pGroundCoords = this._drawData[GROUND];
         for (let i = 0; i < this._pGroundCoords.length; i++) {
-            this._setPointType(i);
+            this._updatePointType(i);
         }
         this._drawData[GROUND] = this._pGroundCoords;
         this.events.dispatch(this.events.profilecollected, this._drawData, this);
     }
     clear() {
+        this._promiseCounter = 0;
         this._pointsReady = false;
         this._isWarning = false;
-        this._drawData = [][0];
+        this._drawData = [[], []];
         this._pMaxY = 0;
         this._pMinY = 0;
         this._pDist = 0;
-        this._pTrackCoords = [[0, 0, SAFE]];
-        this._pGroundCoords = [[0, 0, SAFE]];
+        this._pTrackCoords = [];
+        this._pGroundCoords = [];
         this._pIndex = 0;
+        this.events.dispatch(this.events.clear, this._drawData, this);
     }
 }
-export { COLLISION, SAFE, WARNING, ElevationProfile, };

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

@@ -0,0 +1,14 @@
+import { View, IViewParams, ViewEventsList } from "../../ui/View";
+import { ToggleButton } from "../../ui/ToggleButton";
+import { EventsHandler } from "../../Events";
+import { ElevationProfile } from "./ElevationProfile";
+interface IElevationProfileButtonsViewParams extends IViewParams {
+}
+type ElevationProfileButtonsViewEventsList = ["reset", "list", "location"];
+export declare class ElevationProfileButtonsView extends View<ElevationProfile> {
+    events: EventsHandler<ElevationProfileButtonsViewEventsList> & EventsHandler<ViewEventsList>;
+    pointListBtn: ToggleButton;
+    constructor(params?: IElevationProfileButtonsViewParams);
+    render(params: any): this;
+}
+export {};

package/lib/js/control/elevationProfile/ElevationProfileButtonsView.js

@@ -0,0 +1,61 @@
+import { View } from "../../ui/View";
+import { Button } from "../../ui/Button";
+import { ToggleButton } from "../../ui/ToggleButton";
+const TEMPLATE = '<div class="og-elevationprofile-buttons"></div>';
+const RESET_SVG_ICON = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30" height="30" viewBox="0 0 30 30" version="1.1">
+  <g transform="translate(0,-289.0625)">
+    <path d="M 15 6 C 10.041282 6 6 10.04128 6 15 C 6 19.95872 10.041282 24 15 24 C 16.586491 24 18.07668 23.58246 19.373047 22.857422 L 17.888672 21.375 C 17.00816 21.772814 16.032235 22 15 22 C 11.122162 22 8 18.87784 8 15 C 8 11.12216 11.122162 8 15 8 C 18.877838 8 22 11.12216 22 15 L 19 15 L 23 20 L 27 15 L 24 15 C 24 10.04128 19.958718 6 15 6 z " transform="translate(0,289.0625)" />
+  </g>
+</svg>`;
+const LIST_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><svg width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title>list</title><rect x="10" y="6" width="18" height="2"/><rect x="10" y="24" width="18" height="2"/><rect x="10" y="15" width="18" height="2"/><rect x="4" y="15" width="2" height="2"/><rect x="4" y="6" width="2" height="2"/><rect x="4" y="24" width="2" height="2"/></svg>`;
+const LOCATION_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><path fill="#000000" d="M127,169.4c23.7,0,42.8-18.3,42.8-41s-19.2-41-42.8-41c-23.7,0-42.8,18.4-42.8,41S103.4,169.4,127,169.4z"/><path fill="#000000" d="M221.7,120.2c-3.8-44-40.9-78.9-87-82V15h-16.3v23.6c-44.8,4-80.3,38.5-84.1,81.7H10v15.6h24.3c3.8,43.1,39.3,77.4,84.1,81.7V241h16.3v-23.2c46-3.1,83.2-37.9,87-82H246v-15.6H221.7L221.7,120.2L221.7,120.2z M128,201.6c-42.5,0-76.7-33-76.7-73.4c0-40.4,34.5-73.4,76.7-73.4c42.5,0,76.7,33,76.7,73.4C204.7,168.5,170.5,201.6,128,201.6L128,201.6z"/></g></g>
+</svg>`;
+const ELEVATIONPROFILEBUTTONSVIEW_EVENTS = ["reset", "list", "location"];
+export class ElevationProfileButtonsView extends View {
+    constructor(params = {}) {
+        super({
+            ...params,
+            template: TEMPLATE
+        });
+        //@ts-ignore
+        this.events = this.events.registerNames(ELEVATIONPROFILEBUTTONSVIEW_EVENTS);
+        this.pointListBtn = new ToggleButton({
+            classList: ["og-elevationprofile-button"],
+            icon: LIST_SVG_ICON,
+            title: "Point List"
+        });
+        this.pointListBtn.events.on("change", (isActive) => {
+            this.events.dispatch(this.events.list, isActive);
+        });
+    }
+    render(params) {
+        super.render(params);
+        let resetBtn = new Button({
+            classList: ["og-elevationprofile-button"],
+            icon: RESET_SVG_ICON,
+            title: "Reset"
+        });
+        resetBtn.appendTo(this.el);
+        resetBtn.events.on("click", () => {
+            this.model.clear();
+            this.events.dispatch(this.events.reset, this);
+        });
+        this.pointListBtn.appendTo(this.el);
+        let locationBtn = new Button({
+            classList: ["og-elevationprofile-button", "og-elevationprofile-button__location"],
+            icon: LOCATION_SVG_ICON,
+            title: "View bounds"
+        });
+        locationBtn.appendTo(this.el);
+        locationBtn.events.on("click", () => {
+            this.events.dispatch(this.events.location, this);
+        });
+        return this;
+    }
+}

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

@@ -0,0 +1,33 @@
+import { Control, IControlParams } 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 { ElevationProfileButtonsView } from "./ElevationProfileButtonsView";
+import { PointListDialog } from "./PointListDialog";
+import { GroundItem, TrackItem } from "./ElevationProfile";
+import { ElevationProfileLegend } from "./ElevationProfileLegend";
+interface IElevationProfileGraphParams extends IControlParams {
+}
+export declare class ElevationProfileControl extends Control {
+    protected _toggleBtn: ToggleButton;
+    protected _dialog: Dialog<null>;
+    protected _graphView: View<null>;
+    protected _poiListDialog: PointListDialog;
+    protected _elevationProfileView: ElevationProfileView;
+    protected _elevationProfileScene: ElevationProfileScene;
+    protected _elevationProfileButtonsView: ElevationProfileButtonsView;
+    protected _elevationProfileLegend: ElevationProfileLegend;
+    protected _collectProfileThrottled: () => void;
+    constructor(options?: IElevationProfileGraphParams);
+    oninit(): void;
+    protected _onSceneChange: () => void;
+    onactivate(): void;
+    ondeactivate(): void;
+    protected _onElevationProfilePointer: (pointerDistance: number, tp0: TrackItem, tp1: TrackItem, gp0: GroundItem, gp1: GroundItem, trackPoiIndex: number, groundPoiIndex: number, elevation: number) => void;
+    protected _onElevationProfileDblClick: (pointerDistance: number, tp0: TrackItem, tp1: TrackItem, gp0: GroundItem, gp1: GroundItem, trackPoiIndex: number, groundPoiIndex: number, elevation: number) => void;
+    protected _onElevationProfileMouseEnter: () => void;
+    protected _onElevationProfileMouseLeave: () => void;
+}
+export {};

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;
+}