@openglobus/og 0.18.0 → 0.18.1

package/{src/control/Lighting.ts → lib/js/control/Lighting.js}

@@ -1,16 +1,8 @@
-import {Control, IControlParams} from "./Control";
-import {Dialog} from '../ui/Dialog';
-import {Layer} from "../layer/Layer";
-import {Slider} from "../ui/Slider";
-import {Sun} from "./Sun";
-import {ToggleButton} from "../ui/ToggleButton";
-import {View} from '../ui/View';
-import {Atmosphere} from "./Atmosphere";
-
-interface ILightingParams extends IControlParams {
-
-}
-
+import { Control } from "./Control";
+import { Dialog } from '../ui/Dialog';
+import { Slider } from "../ui/Slider";
+import { ToggleButton } from "../ui/ToggleButton";
+import { View } from '../ui/View';
 const SUN_STOP_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 70.41" style="enable-background:new 0 0 122.88 70.41" xml:space="preserve"><g><path d="M60.91,19.12c6.95,0,13.24,2.95,17.8,7.72c4.55,4.77,7.37,11.37,7.37,18.64c0,1.94-0.2,3.83-0.58,5.65h31.61 c2.1,0,2.62,1.16,2.62,2.59c0,1.43-0.52,2.59-2.62,2.59H7.09c-2.1,0-2.62-1.16-2.62-2.59c0-1.43,0.52-2.59,2.62-2.59h29.23 c-0.38-1.82-0.58-3.71-0.58-5.65c0-7.28,2.82-13.87,7.37-18.64C47.67,22.08,53.96,19.12,60.91,19.12L60.91,19.12L60.91,19.12z M63.4,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h56.86c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59H63.4 L63.4,70.41z M2.62,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h29.51c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59 H2.62L2.62,70.41z M38.39,9.46c-0.78-1.35-0.32-3.07,1.03-3.85c1.35-0.78,3.07-0.32,3.85,1.03l3.62,6.27 c0.78,1.35,0.32,3.07-1.03,3.85c-1.35,0.78-3.07,0.32-3.85-1.03L38.39,9.46L38.39,9.46L38.39,9.46z M58.67,2.83 c0-1.56,1.27-2.83,2.83-2.83c1.56,0,2.83,1.27,2.83,2.83v7.24c0,1.56-1.27,2.83-2.83,2.83c-1.56,0-2.83-1.26-2.83-2.83V2.83 L58.67,2.83L58.67,2.83z M79.56,7.23c0.77-1.35,2.49-1.81,3.84-1.04c1.35,0.77,1.81,2.49,1.04,3.84l-3.62,6.27 c-0.77,1.35-2.49,1.81-3.84,1.04c-1.35-0.77-1.81-2.49-1.04-3.84L79.56,7.23L79.56,7.23L79.56,7.23z M95.45,21.48 c1.35-0.78,3.07-0.32,3.85,1.03c0.78,1.35,0.32,3.07-1.03,3.85L92,29.98c-1.35,0.78-3.07,0.32-3.85-1.03 c-0.78-1.35-0.32-3.07,1.03-3.85L95.45,21.48L95.45,21.48L95.45,21.48z M102.08,41.76c1.56,0,2.83,1.27,2.83,2.83 c0,1.56-1.27,2.83-2.83,2.83h-7.24c-1.56,0-2.83-1.26-2.83-2.83s1.26-2.83,2.83-2.83H102.08L102.08,41.76L102.08,41.76z M19.74,46.25c-1.56,0-2.83-1.27-2.83-2.83c0-1.56,1.27-2.83,2.83-2.83h7.24c1.56,0,2.83,1.26,2.83,2.83s-1.27,2.83-2.83,2.83 H19.74L19.74,46.25L19.74,46.25z M24.14,25.35c-1.35-0.77-1.81-2.49-1.04-3.84c0.77-1.35,2.49-1.81,3.84-1.04l6.27,3.62 c1.35,0.77,1.81,2.49,1.04,3.84c-0.77,1.35-2.49,1.81-3.84,1.04L24.14,25.35L24.14,25.35L24.14,25.35z"/></g></svg>`;
 const SUN_ACTIVE_SVG_ICON = `<?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
@@ -35,10 +27,7 @@ const LIGHTING_ENABLED_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?>
 </svg>`;
 const ATMOSPHERE_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 <svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M135.688 18.5c-6.798 74.842-23.842 85.39-107.907 59.656 84.85 52.022 73.57 64.954-6.843 96.938 87.743-10.27 103.29 4.89 70.75 87.594 17.805-27.56 32.5-44.498 46.282-54.47-11.813 28.26-18.345 59.274-18.345 91.813 0 84.184 43.71 157.96 109.656 200.376-41.624-43.834-67.686-102.7-67.686-167.875 0-134.923 109.45-244.405 244.375-244.405 30.92 0 60.76 5.762 88 16.25-38.584-26.87-85.517-42.625-136.064-42.625-55.257 0-106.14 18.802-146.562 50.375 4.627-18.783 17.39-38.073 41.03-60.906C190.18 90.942 153.53 95.634 135.69 18.5zm10.03 77.188c5.67.002 11.428 1.247 16.876 3.874 14.506 6.998 22.72 21.81 22 36.938-10.26 10.87-19.507 22.696-27.594 35.344-9.035 2.753-19.075 2.27-28.25-2.156-19.37-9.343-27.5-32.6-18.156-51.97 6.715-13.92 20.638-22.036 35.125-22.03z"/></svg>`;
-
-
-const TEMPLATE =
-    `<div class="og-lighing">
+const TEMPLATE = `<div class="og-lighing">
 
          <div class="og-option">
            <div class="og-suncontrol"></div>
@@ -79,7 +68,6 @@ const TEMPLATE =
          </div>        
 
     </div>`;
-
 const ICON_BUTTON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
 
 <defs>
@@ -96,55 +84,18 @@ const ICON_BUTTON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="ht
 \t<path d="M 74.698 77.698 c -0.768 0 -1.535 -0.293 -2.121 -0.879 l -8.171 -8.171 c -1.172 -1.171 -1.172 -3.071 0 -4.242 c 1.172 -1.172 3.07 -1.172 4.242 0 l 8.171 8.171 c 1.172 1.171 1.172 3.071 0 4.242 C 76.233 77.405 75.466 77.698 74.698 77.698 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
 </g>
 </svg>`;
-
 const MAX_COLOR = 5;
-
 /**
  * Helps to set up lighting.
  */
 export class Lighting extends Control {
-    protected _selectedLayer: Layer | null;
-    protected _toggleBtn: ToggleButton;
-    protected _dialog: Dialog<null>;
-    protected _panel: View<null>;
-
-    protected _atmosphereMaxOpacity: Slider;
-    protected _atmosphereMinOpacity: Slider;
-    protected _gamma: Slider;
-    protected _exposure: Slider;
-    protected _night: Slider;
-    protected _opacity: Slider;
-    protected _diffuse_r: Slider;
-    protected _diffuse_g: Slider;
-    protected _diffuse_b: Slider;
-    protected _ambient_r: Slider;
-    protected _ambient_g: Slider;
-    protected _ambient_b: Slider;
-    protected _specular_r: Slider;
-    protected _specular_g: Slider;
-    protected _specular_b: Slider;
-    protected _shininess: Slider;
-
-    public $gamma: HTMLElement | null;
-    public $exposure: HTMLElement | null;
-    public $night: HTMLElement | null;
-    public $opacity: HTMLElement | null;
-    public $diffuse: HTMLElement | null;
-    public $ambient: HTMLElement | null;
-    public $specular: HTMLElement | null;
-    public $atmosphereOpacity: HTMLElement | null;
-
-
-    constructor(options: ILightingParams = {}) {
+    constructor(options = {}) {
         super(options);
-
         this._selectedLayer = null;
-
         this._toggleBtn = new ToggleButton({
             classList: ["og-map-button", "og-lighting_button"],
             icon: ICON_BUTTON_SVG
         });
-
         this._dialog = new Dialog({
             title: "Lighting Parameters",
             visible: false,
@@ -153,15 +104,12 @@ export class Lighting extends Control {
             left: 60,
             width: 600
         });
-
-        this._dialog.events.on("visibility", (v: boolean) => {
+        this._dialog.events.on("visibility", (v) => {
             this._toggleBtn.setActive(v);
         });
-
         this._panel = new View({
             template: TEMPLATE
         });
-
         this.$gamma = null;
         this.$exposure = null;
         this.$night = null;
@@ -170,37 +118,30 @@ export class Lighting extends Control {
         this.$ambient = null;
         this.$specular = null;
         this.$atmosphereOpacity = null;
-
         this._atmosphereMaxOpacity = new Slider({
             label: "Max.opacity",
             max: 5
         });
-
         this._atmosphereMinOpacity = new Slider({
             label: "Min.opacity",
             max: 5
         });
-
         this._gamma = new Slider({
             label: "Gamma",
             max: 5
         });
-
         this._exposure = new Slider({
             label: "Exposure",
             max: 5
         });
-
         this._night = new Slider({
             label: "Nightlight",
             max: 5
         });
-
         this._opacity = new Slider({
             label: "Opacity",
             max: 1
         });
-
         //
         // Diffuse sliders
         //
@@ -208,17 +149,14 @@ export class Lighting extends Control {
             label: "Diffuse R",
             max: MAX_COLOR
         });
-
         this._diffuse_g = new Slider({
             label: "Diffuse G",
             max: MAX_COLOR
         });
-
         this._diffuse_b = new Slider({
             label: "Diffuse B",
             max: MAX_COLOR
         });
-
         //
         // Ambient sliders
         //
@@ -226,17 +164,14 @@ export class Lighting extends Control {
             label: "Ambient R",
             max: MAX_COLOR
         });
-
         this._ambient_g = new Slider({
             label: "Ambient G",
             max: MAX_COLOR
         });
-
         this._ambient_b = new Slider({
             label: "Ambient B",
             max: MAX_COLOR
         });
-
         //
         // Specular sliders
         //
@@ -244,35 +179,28 @@ export class Lighting extends Control {
             label: "Specular R",
             max: 0.2
         });
-
         this._specular_g = new Slider({
             label: "Specular G",
             max: 0.2
         });
-
         this._specular_b = new Slider({
             label: "Specular B",
             max: 0.2
         });
-
         this._shininess = new Slider({
             label: "Shininess",
             max: 100
         });
     }
-
-    public bindLayer(layer: Layer) {
+    bindLayer(layer) {
         this._selectedLayer = layer;
         this._opacity.value = layer.opacity;
         this._update();
     }
-
-    public override oninit() {
-
-        this._toggleBtn.appendTo(this.renderer!.div!);
-        this._dialog.appendTo(this.renderer!.div!);
-        this._panel.appendTo(this._dialog.container!);
-
+    oninit() {
+        this._toggleBtn.appendTo(this.renderer.div);
+        this._dialog.appendTo(this.renderer.div);
+        this._panel.appendTo(this._dialog.container);
         if (this._panel.el) {
             this.$atmosphereOpacity = this._panel.el.querySelector(".og-atmosphere-opacity");
             this.$gamma = this._panel.el.querySelector(".og-option.og-gamma");
@@ -283,13 +211,10 @@ export class Lighting extends Control {
             this.$specular = this._panel.el.querySelector(".og-option.og-specular");
             this.$night = this._panel.el.querySelector(".og-option.og-night");
         }
-
-        this._toggleBtn.events.on("change", (isActive: boolean) => {
+        this._toggleBtn.events.on("change", (isActive) => {
             this._dialog.setVisibility(isActive);
         });
-
-        let $suncontrol = this._dialog.select(".og-suncontrol")!;
-
+        let $suncontrol = this._dialog.select(".og-suncontrol");
         let sunStopBtn = new ToggleButton({
             classList: ["og-suncontrol-button"],
             isActive: true,
@@ -297,7 +222,6 @@ export class Lighting extends Control {
             title: "Star/stop the Sun from following the camera"
         });
         sunStopBtn.appendTo($suncontrol);
-
         let sunActiveBtn = new ToggleButton({
             classList: ["og-suncontrol-button"],
             isActive: true,
@@ -305,221 +229,184 @@ export class Lighting extends Control {
             title: "Activate/deactivate the Sun current time positioning"
         });
         sunActiveBtn.appendTo($suncontrol);
-
-        sunStopBtn.events.on("change", (isActive: boolean) => {
-            const sun = this.planet!.renderer!.controls.sun as Sun;
+        sunStopBtn.events.on("change", (isActive) => {
+            const sun = this.planet.renderer.controls.sun;
             if (isActive) {
                 sun.start();
-            } else {
+            }
+            else {
                 sun.stop();
             }
         });
-
-        sunActiveBtn.events.on("change", (isActive: boolean) => {
-            const sun = this.planet!.renderer!.controls.sun;
+        sunActiveBtn.events.on("change", (isActive) => {
+            const sun = this.planet.renderer.controls.sun;
             if (isActive) {
                 sun.activate();
-            } else {
+            }
+            else {
                 sun.deactivate();
             }
         });
-
         let lightingEnabledBtn = new ToggleButton({
             classList: ["og-suncontrol-button"],
-            isActive: this.planet!.lightEnabled,
+            isActive: this.planet.lightEnabled,
             icon: LIGHTING_ENABLED_SVG_ICON,
             title: "Enable/disable planet lighting"
         });
         lightingEnabledBtn.appendTo($suncontrol);
-
-        lightingEnabledBtn.events.on("change", (isActive: boolean) => {
-            this.planet!.lightEnabled = isActive;
+        lightingEnabledBtn.events.on("change", (isActive) => {
+            this.planet.lightEnabled = isActive;
         });
-
         let atmosphereEnabledBtn = new ToggleButton({
             classList: ["og-suncontrol-button"],
-            isActive: this.planet!.atmosphereEnabled,
+            isActive: this.planet.atmosphereEnabled,
             icon: ATMOSPHERE_SVG_ICON,
             title: "Enable/disable atmosphere scattering"
         });
         atmosphereEnabledBtn.appendTo($suncontrol);
-
-        if (this.planet!.atmosphereEnabled) {
-            this.$atmosphereOpacity!.style.display = "block";
-        } else {
-            this.$atmosphereOpacity!.style.display = "none";
+        if (this.planet.atmosphereEnabled) {
+            this.$atmosphereOpacity.style.display = "block";
         }
-        atmosphereEnabledBtn.events.on("change", (isActive: boolean) => {
-            this.planet!.atmosphereEnabled = isActive;
-            if (this.planet!.atmosphereEnabled) {
-                this.$atmosphereOpacity!.style.display = "block";
-            } else {
-                this.$atmosphereOpacity!.style.display = "none";
+        else {
+            this.$atmosphereOpacity.style.display = "none";
+        }
+        atmosphereEnabledBtn.events.on("change", (isActive) => {
+            this.planet.atmosphereEnabled = isActive;
+            if (this.planet.atmosphereEnabled) {
+                this.$atmosphereOpacity.style.display = "block";
+            }
+            else {
+                this.$atmosphereOpacity.style.display = "none";
             }
         });
-
-        this._atmosphereMaxOpacity.appendTo(this.$atmosphereOpacity!);
-        this._atmosphereMinOpacity.appendTo(this.$atmosphereOpacity!);
-
-        this._gamma.appendTo(this.$gamma!);
-        this._exposure.appendTo(this.$exposure!);
-
-        this._night.appendTo(this.$night!);
-        this._opacity.appendTo(this.$opacity!);
-
-        this._diffuse_r.appendTo(this.$diffuse!);
-        this._diffuse_g.appendTo(this.$diffuse!);
-        this._diffuse_b.appendTo(this.$diffuse!);
-
-        this._ambient_r.appendTo(this.$ambient!);
-        this._ambient_g.appendTo(this.$ambient!);
-        this._ambient_b.appendTo(this.$ambient!);
-
-        this._specular_r.appendTo(this.$specular!);
-        this._specular_g.appendTo(this.$specular!);
-        this._specular_b.appendTo(this.$specular!);
-        this._shininess.appendTo(this.$specular!);
-
-        this._atmosphereMinOpacity.value = this.planet!.atmosphereMinOpacity;
-        this._atmosphereMinOpacity.events.on("change", (val: number) => {
-            this.planet!.atmosphereMinOpacity = val;
-        });
-
-        this._gamma.value = this.planet!.renderer!.gamma;
-        this._gamma.events.on("change", (val: number) => {
-            this.planet!.renderer!.gamma = val;
-        });
-
-        this._panel.el!.querySelector<HTMLSelectElement>("#layers")!.addEventListener("change", (e: Event) => {
-            const l = this.planet!.getLayerByName((e.target as HTMLSelectElement).value);
+        this._atmosphereMaxOpacity.appendTo(this.$atmosphereOpacity);
+        this._atmosphereMinOpacity.appendTo(this.$atmosphereOpacity);
+        this._gamma.appendTo(this.$gamma);
+        this._exposure.appendTo(this.$exposure);
+        this._night.appendTo(this.$night);
+        this._opacity.appendTo(this.$opacity);
+        this._diffuse_r.appendTo(this.$diffuse);
+        this._diffuse_g.appendTo(this.$diffuse);
+        this._diffuse_b.appendTo(this.$diffuse);
+        this._ambient_r.appendTo(this.$ambient);
+        this._ambient_g.appendTo(this.$ambient);
+        this._ambient_b.appendTo(this.$ambient);
+        this._specular_r.appendTo(this.$specular);
+        this._specular_g.appendTo(this.$specular);
+        this._specular_b.appendTo(this.$specular);
+        this._shininess.appendTo(this.$specular);
+        this._atmosphereMinOpacity.value = this.planet.atmosphereMinOpacity;
+        this._atmosphereMinOpacity.events.on("change", (val) => {
+            this.planet.atmosphereMinOpacity = val;
+        });
+        this._gamma.value = this.planet.renderer.gamma;
+        this._gamma.events.on("change", (val) => {
+            this.planet.renderer.gamma = val;
+        });
+        this._panel.el.querySelector("#layers").addEventListener("change", (e) => {
+            const l = this.planet.getLayerByName(e.target.value);
             if (l) {
                 this.bindLayer(l);
             }
         });
-
-        this._atmosphereMaxOpacity.value = this.planet!.atmosphereMaxOpacity;
-        this._atmosphereMaxOpacity.events.on("change", (val: number) => {
-            this.planet!.atmosphereMaxOpacity = val;
-            let atmos = this.planet!.renderer!.controls.Atmosphere as Atmosphere;
+        this._atmosphereMaxOpacity.value = this.planet.atmosphereMaxOpacity;
+        this._atmosphereMaxOpacity.events.on("change", (val) => {
+            this.planet.atmosphereMaxOpacity = val;
+            let atmos = this.planet.renderer.controls.Atmosphere;
             atmos.opacity = val;
         });
-
-        this._exposure.value = this.planet!.renderer!.exposure;
-        this._exposure.events.on("change", (val: number) => {
-            this.planet!.renderer!.exposure = val;
+        this._exposure.value = this.planet.renderer.exposure;
+        this._exposure.events.on("change", (val) => {
+            this.planet.renderer.exposure = val;
         });
-
-        this._night.events.on("change", (val: number) => {
+        this._night.events.on("change", (val) => {
             if (this._selectedLayer) {
                 this._selectedLayer.nightTextureCoefficient = val;
             }
         });
-
-        this._opacity.events.on("change", (val: number) => {
+        this._opacity.events.on("change", (val) => {
             if (this._selectedLayer)
                 this._selectedLayer.opacity = val;
         });
-
-        this._ambient_r.events.on("change", (val: number) => {
+        this._ambient_r.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._ambient)
-                this._selectedLayer._ambient[0] = val
+                this._selectedLayer._ambient[0] = val;
         });
-
-        this._ambient_g.events.on("change", (val: number) => {
+        this._ambient_g.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._ambient)
-                this._selectedLayer._ambient[1] = val
+                this._selectedLayer._ambient[1] = val;
         });
-
-        this._ambient_b.events.on("change", (val: number) => {
+        this._ambient_b.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._ambient)
-                this._selectedLayer._ambient[2] = val
+                this._selectedLayer._ambient[2] = val;
         });
-
-        this._diffuse_r.events.on("change", (val: number) => {
+        this._diffuse_r.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._diffuse)
-                this._selectedLayer._diffuse[0] = val
+                this._selectedLayer._diffuse[0] = val;
         });
-
-        this._diffuse_g.events.on("change", (val: number) => {
+        this._diffuse_g.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._diffuse)
-                this._selectedLayer._diffuse[1] = val
+                this._selectedLayer._diffuse[1] = val;
         });
-
-        this._diffuse_b.events.on("change", (val: number) => {
+        this._diffuse_b.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._diffuse)
-                this._selectedLayer._diffuse[2] = val
+                this._selectedLayer._diffuse[2] = val;
         });
-
-        this._specular_r.events.on("change", (val: number) => {
+        this._specular_r.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._specular)
-                this._selectedLayer._specular[0] = val
+                this._selectedLayer._specular[0] = val;
         });
-
-        this._specular_g.events.on("change", (val: number) => {
+        this._specular_g.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._specular)
-                this._selectedLayer._specular[1] = val
+                this._selectedLayer._specular[1] = val;
         });
-
-        this._specular_b.events.on("change", (val: number) => {
+        this._specular_b.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._specular)
-                this._selectedLayer._specular[2] = val
+                this._selectedLayer._specular[2] = val;
         });
-
-        this._shininess.events.on("change", (val: number) => {
+        this._shininess.events.on("change", (val) => {
             if (this._selectedLayer && this._selectedLayer._specular)
-                this._selectedLayer._specular[3] = val
+                this._selectedLayer._specular[3] = val;
         });
-
-
         if (this.planet) {
-            this.planet!.events.on("layeradd", this._onLayerAdd, this);
-            this.planet!.events.on("layerremove", this._onLayerRemove, this);
+            this.planet.events.on("layeradd", this._onLayerAdd, this);
+            this.planet.events.on("layerremove", this._onLayerRemove, this);
         }
-
         this._fetchLayers();
     }
-
-    protected _update() {
+    _update() {
         let l = this._selectedLayer;
-
         this._opacity.value = l && l.opacity ? l.opacity : 0.0;
-
-        this._night.value = l && l.nightTextureCoefficient ? l.nightTextureCoefficient : this.planet!.nightTextureCoefficient;
-
-        let a = l && l._ambient ? l._ambient : this.planet!._ambient;
+        this._night.value = l && l.nightTextureCoefficient ? l.nightTextureCoefficient : this.planet.nightTextureCoefficient;
+        let a = l && l._ambient ? l._ambient : this.planet._ambient;
         this._ambient_r.value = a[0];
         this._ambient_g.value = a[1];
         this._ambient_b.value = a[2];
-
-        let d = l && l._diffuse ? l._diffuse : this.planet!._diffuse;
+        let d = l && l._diffuse ? l._diffuse : this.planet._diffuse;
         this._diffuse_r.value = d[0];
         this._diffuse_g.value = d[1];
         this._diffuse_b.value = d[2];
-
-        let s = l && l._specular ? l._specular : this.planet!._specular;
+        let s = l && l._specular ? l._specular : this.planet._specular;
         this._specular_r.value = s[0];
         this._specular_g.value = s[1];
         this._specular_b.value = s[2];
         this._shininess.value = s[3];
     }
-
-    protected _fetchLayers() {
+    _fetchLayers() {
         if (this.planet) {
             for (let i = 0; i < this.planet.layers.length; i++) {
                 this._onLayerAdd(this.planet.layers[i]);
             }
         }
     }
-
-    protected _onLayerAdd(e: Layer) {
+    _onLayerAdd(e) {
         this.bindLayer(e);
         let opt = document.createElement("option");
         opt.value = e.name;
         opt.innerText = e.name;
-        this._panel.el!.querySelector("#layers")!.appendChild(opt);
-        this._panel.el!.querySelector<HTMLSelectElement>("#layers")!.value = e.name;
+        this._panel.el.querySelector("#layers").appendChild(opt);
+        this._panel.el.querySelector("#layers").value = e.name;
     }
-
-    protected _onLayerRemove(e: Layer) {
+    _onLayerRemove(e) {
     }
 }

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

@@ -0,0 +1,62 @@
+import { Control, IControlParams } from "./Control";
+import { Key } from "../Lock";
+import { Quat } from "../math/Quat";
+import { Sphere } from "../bv/Sphere";
+import { Vec3 } from "../math/Vec3";
+import { Vec2 } from "../math/Vec2";
+import { Planet } from "../scene/Planet";
+import { PlanetCamera } from "../camera/PlanetCamera";
+import { IMouseState } from "../renderer/RendererEvents";
+export interface IStepForward {
+    eye: Vec3;
+    v: Vec3;
+    u: Vec3;
+    n: Vec3;
+}
+interface IMouseNavigationParams extends IControlParams {
+    minSlope?: number;
+}
+/**
+ * Mouse planet camera dragging control.
+ */
+export declare class MouseNavigation 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;
+    minSlope: number;
+    protected _wheelDirection: number;
+    protected _keyLock: Key;
+    protected _deactivate: boolean;
+    protected _shiftBusy: boolean;
+    constructor(options?: IMouseNavigationParams);
+    static getMovePointsFromPixelTerrain(cam: PlanetCamera, planet: Planet, stepsCount: number, delta: number, point: Vec2, forward: boolean, dir?: Vec3 | null): IStepForward[] | undefined;
+    onactivate(): void;
+    ondeactivate(): void;
+    activateDoubleClickZoom(): void;
+    deactivateDoubleClickZoom(): void;
+    protected onMouseEnter(e: IMouseState): void;
+    protected onMouseLeave(): void;
+    protected onMouseWheel(e: IMouseState): void;
+    oninit(): void;
+    protected onMouseLeftButtonDoubleClick(e: IMouseState): void;
+    protected onMouseLeftButtonClick(): void;
+    stopRotation(): void;
+    protected onMouseLeftButtonUp(e: IMouseState): void;
+    protected onMouseLeftButtonDown(e: IMouseState): void;
+    protected onMouseRightButtonClick(e: IMouseState): void;
+    protected onMouseRightButtonDown(e: IMouseState): void;
+    onShiftFree(): void;
+    protected onMouseMove(e: IMouseState): void;
+    protected onDraw(): void;
+}
+export {};