@openglobus/og 0.18.0 → 0.18.2

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

@@ -1,37 +1,51 @@
-import {EventsHandler, createEvents} from '../Events';
-import {Layer} from '../layer/Layer';
-import {Control, IControlParams} from "./Control";
-
-type LayerAnimationEventsList = ["change", "idle", "play", "pause", "stop"];
-
-const LAYERANIMATION_EVENTS: LayerAnimationEventsList = ["change", "idle", "play", "pause", "stop"];
-
-interface ILayerAnimationParams extends IControlParams {
-    layers?: Layer,
-    playInterval?: number,
-    frameSize?: number,
-    repeat?: boolean;
-    skipTimeout?: number;
-}
-
+import { createEvents } from '../Events';
+import { Control } from "./Control";
+const LAYERANIMATION_EVENTS = ["change", "idle", "play", "pause", "stop"];
 export class LayerAnimation extends Control {
-    public events: EventsHandler<LayerAnimationEventsList>;
-    protected _layersArr: Layer[];
-    protected _currentIndex: number;
-    protected _playInterval: number;
-    protected _playIntervalHandler: any;
-    protected _playIndex: number;
-    protected _frameSize: number;
-    public repeat: boolean;
-    public skipTimeout: number;
-    protected _timeoutStart: number;
-    protected _currVisibleIndex: number = 0;
-
-    constructor(options: ILayerAnimationParams = {}) {
+    constructor(options = {}) {
         super(options);
+        this._currVisibleIndex = 0;
+        this._onViewchange = () => {
+            this._timeoutStart = performance.now();
+        };
+        this._onVisibilityChange = (isVisible) => {
+            if (!isVisible) {
+                this.pause();
+            }
+        };
+        /**
+         * Waiting for the current index layer loadend and make it non-transparent,
+         * and make prev layer transparent, also check previous frame index to clean up.
+         */
+        this._onLayerLoadend = (layer) => {
+            let currLayer = this._layersArr[this._currentIndex];
+            if (currLayer && currLayer.isEqual(layer)) {
+                // BRUTE
+                let currFrame = this._getFrameIndex(this._currentIndex);
+                let from = currFrame * this._frameSize, to = this._currentIndex;
+                for (let i = from; i < to; i++) {
+                    let li = this._layersArr[i];
+                    li.opacity = 0;
+                    li.setVisibility(false);
+                }
+                // * Make CURRENT Layer VISIBLE *
+                currLayer.opacity = 1.0;
+                let currVisibleLayer = this._layersArr[this._currVisibleIndex];
+                if (currVisibleLayer) {
+                    currVisibleLayer.opacity = 0.0;
+                    currVisibleLayer.setVisibility(false);
+                    // If frame is changed - remove it from the planet
+                    let prevFrame = this._getFrameIndex(this._currVisibleIndex);
+                    if (this._getFrameIndex(this._currentIndex) !== prevFrame) {
+                        this._removeFrameFromPlanet(prevFrame);
+                    }
+                }
+                this.events.dispatch(this.events.idle, currLayer);
+            }
+        };
         this.events = createEvents(LAYERANIMATION_EVENTS);
         this._name = options.name || `layerAnimation-${this.__id}`;
-        this._layersArr = options.layers ? ([] as Layer[]).concat(options.layers) : [];
+        this._layersArr = options.layers ? [].concat(options.layers) : [];
         this._currentIndex = -1;
         this._playInterval = options.playInterval || 120;
         this._playIntervalHandler = -1;
@@ -41,30 +55,23 @@ export class LayerAnimation extends Control {
         this.skipTimeout = options.skipTimeout || 5000;
         this._timeoutStart = 0;
     }
-
-    protected _onViewchange = () => {
-        this._timeoutStart = performance.now();
-    }
-
-    protected _getFramesNum(): number {
+    _getFramesNum() {
         return Math.ceil(this._layersArr.length / this._frameSize);
     }
-
-    protected _setFrame(frameIndex: number) {
+    _setFrame(frameIndex) {
         for (let i = 0, len = this._getFramesNum(); i < len; i++) {
             if (i !== frameIndex) {
                 this._removeFrameFromPlanet(i);
-            } else {
+            }
+            else {
                 this._appendFrameToPlanet(i);
             }
         }
     }
-
-    protected _getFrameIndex(layerIndex: number): number {
+    _getFrameIndex(layerIndex) {
         return Math.floor(layerIndex / this._frameSize);
     }
-
-    protected _appendFrameToPlanet(frameIndex: number) {
+    _appendFrameToPlanet(frameIndex) {
         if (this.planet) {
             let minIndex = frameIndex * this._frameSize;
             let maxIndex = minIndex + this._frameSize;
@@ -73,8 +80,7 @@ export class LayerAnimation extends Control {
             }
         }
     }
-
-    protected _removeFrameFromPlanet(frameIndex: number) {
+    _removeFrameFromPlanet(frameIndex) {
         if (this.planet) {
             let minIndex = frameIndex * this._frameSize;
             let maxIndex = minIndex + this._frameSize;
@@ -85,40 +91,28 @@ export class LayerAnimation extends Control {
             }
         }
     }
-
-    public override oninit() {
+    oninit() {
         super.oninit();
         this.onactivate();
         this._initLayers();
-        this.planet!.events.on("layerloadend", this._onLayerLoadend);
+        this.planet.events.on("layerloadend", this._onLayerLoadend);
         this._setCurrentIndexAsync(0, false, true);
     }
-
-    public override onactivate() {
+    onactivate() {
         super.onactivate();
-        this.planet!.camera.events.on("viewchange", this._onViewchange);
-        this.planet!.renderer!.handler.events.on("visibilitychange", this._onVisibilityChange);
+        this.planet.camera.events.on("viewchange", this._onViewchange);
+        this.planet.renderer.handler.events.on("visibilitychange", this._onVisibilityChange);
     }
-
-    public override ondeactivate() {
+    ondeactivate() {
         super.ondeactivate();
-        this.planet!.camera.events.off("viewchange", this._onViewchange);
-
+        this.planet.camera.events.off("viewchange", this._onViewchange);
         for (let i = 0; i < this._layersArr.length; i++) {
             this._layersArr[i].setVisibility(false);
         }
-
-        this.planet!.events.off("layerloadend", this._onLayerLoadend);
-        this.planet!.renderer!.handler.events.off("visibilitychange", this._onVisibilityChange);
+        this.planet.events.off("layerloadend", this._onLayerLoadend);
+        this.planet.renderer.handler.events.off("visibilitychange", this._onVisibilityChange);
     }
-
-    protected _onVisibilityChange = (isVisible: boolean) => {
-        if (!isVisible) {
-            this.pause();
-        }
-    }
-
-    public clear() {
+    clear() {
         this.stop();
         this._currentIndex = -1;
         this._currVisibleIndex = -1;
@@ -128,8 +122,7 @@ export class LayerAnimation extends Control {
             layersToRemove[i].remove();
         }
     }
-
-    protected _initLayers() {
+    _initLayers() {
         if (this.planet) {
             for (let i = 0, len = this._layersArr.length; i < len; i++) {
                 let li = this._layersArr[i];
@@ -140,14 +133,12 @@ export class LayerAnimation extends Control {
             this._appendFrameToPlanet(0);
         }
     }
-
-    public setLayers(layers: Layer[]) {
+    setLayers(layers) {
         this.clear();
-        this._layersArr = [].concat(layers as any);
+        this._layersArr = [].concat(layers);
         this._initLayers();
     }
-
-    public appendLayer(layer: Layer) {
+    appendLayer(layer) {
         this._layersArr.push(layer);
         layer.setVisibility(false);
         layer.setBaseLayer(false);
@@ -155,21 +146,18 @@ export class LayerAnimation extends Control {
         //check current frame
         this.planet?.addLayer(layer);
     }
-
     /**
      * warning: Use XYZ.isIdle in requestAnimationFrame(after setVisibility)
      * @returns Returns true if current layer is idle
      */
-    public get isIdle(): boolean {
+    get isIdle() {
         let currLayer = this._layersArr[this._currentIndex];
         return currLayer && currLayer.isIdle || !currLayer;
     }
-
-    public get playInterval() {
+    get playInterval() {
         return this._playInterval;
     }
-
-    public set playInterval(val: number) {
+    set playInterval(val) {
         if (val !== this._playInterval) {
             this._playInterval = val;
             if (this.isPlaying) {
@@ -178,52 +166,42 @@ export class LayerAnimation extends Control {
             }
         }
     }
-
-    public get isPlaying(): boolean {
+    get isPlaying() {
         return this._playIntervalHandler !== -1;
     }
-
-    public get layers(): Layer[] {
+    get layers() {
         return this._layersArr;
     }
-
-    protected _checkEnd() {
+    _checkEnd() {
         if (this._playIndex > this._layersArr.length) {
             if (this.repeat) {
                 this._playIndex = 0;
-            } else {
+            }
+            else {
                 this.pause();
             }
         }
     }
-
-    public play() {
+    play() {
         if (!this.isPlaying) {
-
             if (this._currentIndex >= this._layersArr.length - 1) {
                 this.stop();
             }
-
             this._timeoutStart = performance.now();
-
             this._playIntervalHandler = setInterval(() => {
                 this._checkEnd();
                 this._setCurrentIndexAsync(this._playIndex, false, false);
-
                 requestAnimationFrame(() => {
                     if (this.isIdle || (performance.now() - this._timeoutStart > this.skipTimeout)) {
                         this._playIndex++;
                         this._timeoutStart = performance.now();
                     }
                 });
-
             }, this._playInterval);
-
             this.events.dispatch(this.events.play);
         }
     }
-
-    public stop() {
+    stop() {
         if (this._playIndex > 0) {
             this._clearInterval();
             this._playIndex = 0;
@@ -231,121 +209,64 @@ export class LayerAnimation extends Control {
             this.events.dispatch(this.events.stop);
         }
     }
-
-    public pause() {
+    pause() {
         if (this.isPlaying) {
             this._clearInterval();
             this.events.dispatch(this.events.pause);
         }
     }
-
-    protected _clearInterval() {
+    _clearInterval() {
         clearInterval(this._playIntervalHandler);
         this._playIntervalHandler = -1;
     }
-
-    /**
-     * Waiting for the current index layer loadend and make it non-transparent,
-     * and make prev layer transparent, also check previous frame index to clean up.
-     */
-    private _onLayerLoadend = (layer: Layer) => {
-
-        let currLayer = this._layersArr[this._currentIndex];
-
-        if (currLayer && currLayer.isEqual(layer)) {
-
-            // BRUTE
-            let currFrame = this._getFrameIndex(this._currentIndex);
-            let from = currFrame * this._frameSize,
-                to = this._currentIndex;
-            for (let i = from; i < to; i++) {
-                let li = this._layersArr[i];
-                li.opacity = 0;
-                li.setVisibility(false);
-            }
-
-            // * Make CURRENT Layer VISIBLE *
-            currLayer.opacity = 1.0;
-
-            let currVisibleLayer = this._layersArr[this._currVisibleIndex];
-            if (currVisibleLayer) {
-                currVisibleLayer.opacity = 0.0;
-                currVisibleLayer.setVisibility(false);
-
-                // If frame is changed - remove it from the planet
-                let prevFrame = this._getFrameIndex(this._currVisibleIndex);
-                if (this._getFrameIndex(this._currentIndex) !== prevFrame) {
-                    this._removeFrameFromPlanet(prevFrame);
-                }
-            }
-
-            this.events.dispatch(this.events.idle, currLayer);
-        }
-    }
-
-
     /**
      * Function sets layer index visible.
      * @param {number} index
      * @param {boolean} [stopPropagation=false]
      */
-    setCurrentIndex(index: number, stopPropagation = false) {
+    setCurrentIndex(index, stopPropagation = false) {
         this._setCurrentIndexAsync(index, true, stopPropagation);
     }
-
     /**
      * Function sets layer index visible. If the layer is idle (all visible tiles loaded), sets opacity to one,
      * otherwise to ZERO it means that when all visible tiles will be loaded the opacity becomes ONE. So, previous
      * layer remains not transparent (opacity = 1) till current layer is loading.
      */
-    protected _setCurrentIndexAsync(index: number, forceVisibility: boolean = false, stopPropagation: boolean = false) {
-
+    _setCurrentIndexAsync(index, forceVisibility = false, stopPropagation = false) {
         if (index != this._currentIndex && index >= 0 && index < this._layersArr.length) {
-
             let prevCurrIndex = this._currentIndex;
             this._currentIndex = index;
             this._playIndex = index;
-
             let prevCurrFrame = this._getFrameIndex(prevCurrIndex);
             let currFrame = this._getFrameIndex(this._currentIndex);
-
-            let prevCurrLayer = this._layersArr[prevCurrIndex],
-                currLayer = this._layersArr[index];
-
+            let prevCurrLayer = this._layersArr[prevCurrIndex], currLayer = this._layersArr[index];
             let frameChanged = currFrame != prevCurrFrame;
             if (frameChanged) {
                 this._appendFrameToPlanet(currFrame);
             }
-
             if (prevCurrLayer) {
                 if (prevCurrLayer.isIdle) {
                     this._currVisibleIndex = prevCurrIndex;
-                } else {
+                }
+                else {
                     prevCurrLayer.opacity = 0;
                     prevCurrLayer.setVisibility(false);
                 }
             }
-
             if (currLayer) {
-
                 currLayer.opacity = 0.0;
                 currLayer.setVisibility(true);
-
                 requestAnimationFrame(() => {
                     if (currLayer.isIdle || forceVisibility) {
-
                         currLayer.opacity = 1.0;
-
                         // If frame is changed - remove it from the planet
                         if (frameChanged) {
                             this._removeFrameFromPlanet(prevCurrFrame);
                         }
-
                         if (prevCurrLayer) {
                             prevCurrLayer.opacity = 0.0;
                             prevCurrLayer.setVisibility(false);
                         }
-
                         let currVisibleLayer = this._layersArr[this._currVisibleIndex];
                         if (currVisibleLayer) {
                             currVisibleLayer.opacity = 0.0;
@@ -353,7 +274,6 @@ export class LayerAnimation extends Control {
                         }
                     }
                 });
-
                 if (!stopPropagation) {
                     this.events.dispatch(this.events.change, this._currentIndex, prevCurrIndex);
                 }

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

@@ -0,0 +1,21 @@
+import { Control, IControlParams } from "./Control";
+import { Dialog } from "../ui/Dialog";
+import { Layer } from "../layer/Layer";
+import { ToggleButton } from "../ui/ToggleButton";
+interface ILayerSwitcherParams extends IControlParams {
+}
+/**
+ * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
+ * Double click for zoom, drag-and-drop to change zIndex
+ */
+export declare class LayerSwitcher extends Control {
+    dialog: Dialog<null>;
+    protected _menuBtn: ToggleButton;
+    constructor(options?: ILayerSwitcherParams);
+    oninit(): void;
+    addNewLayer: (layer: Layer) => void;
+    removeLayer: (layer: Layer) => void;
+    onactivate(): void;
+    ondeactivate(): void;
+}
+export {};

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

@@ -1,12 +1,6 @@
-import {Control, IControlParams} from "./Control";
-import {Dialog} from "../ui/Dialog";
-import {Layer} from "../layer/Layer";
-import {ToggleButton} from "../ui/ToggleButton";
-
-interface ILayerSwitcherParams extends IControlParams {
-
-}
-
+import { Control } from "./Control";
+import { Dialog } from "../ui/Dialog";
+import { ToggleButton } from "../ui/ToggleButton";
 const ICON_BUTTON_SVG = `<?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">
@@ -14,21 +8,20 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
 <g><path d="M500,573.5c-3.2,0-6.5-0.6-9.5-1.9L25,375.6c-9.1-3.8-15-12.7-15-22.6s5.9-18.8,15-22.6l465.5-196c6.1-2.5,12.9-2.5,19,0l465.5,196c9.1,3.8,15,12.7,15,22.6s-5.9,18.8-15,22.6l-465.5,196C506.5,572.9,503.2,573.5,500,573.5L500,573.5z M97.6,353L500,522.4L902.4,353L500,183.6L97.6,353L97.6,353z"/><path d="M500,720.5c-3.2,0-6.5-0.6-9.5-1.9L25,522.6c-12.4-5.2-18.3-19.6-13.1-32.1c5.2-12.5,19.6-18.3,32.1-13.1l456,192l456-192c12.4-5.2,26.9,0.6,32.1,13.1s-0.6,26.9-13.1,32.1l-465.5,196C506.5,719.9,503.2,720.5,500,720.5L500,720.5z"/><path d="M500,867.5c-3.2,0-6.5-0.6-9.5-1.9L25,669.6c-12.4-5.2-18.3-19.6-13.1-32.1c5.2-12.5,19.6-18.3,32.1-13.1l456,192l456-192c12.4-5.2,26.9,0.6,32.1,13.1c5.2,12.5-0.6,26.8-13.1,32.1l-465.5,196C506.5,866.9,503.2,867.5,500,867.5L500,867.5z"/></g>
 </svg>`;
-
 /**
  * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
  * Double click for zoom, drag-and-drop to change zIndex
  */
 export class LayerSwitcher extends Control {
-    public dialog: Dialog<null>;
-    protected _menuBtn: ToggleButton;
-
-    constructor(options: ILayerSwitcherParams = {}) {
+    constructor(options = {}) {
         super({
             name: "LayerSwitcher",
             ...options
         });
-
+        this.addNewLayer = (layer) => {
+        };
+        this.removeLayer = (layer) => {
+        };
         this.dialog = new Dialog({
             title: "Layer Switcher",
             top: 15,
@@ -36,41 +29,23 @@ export class LayerSwitcher extends Control {
             visible: false,
             width: 200
         });
-
         this._menuBtn = new ToggleButton({
             classList: ["og-map-button", "og-layerswitcher_button"],
             icon: ICON_BUTTON_SVG
         });
     }
-
-    override oninit() {
-
-        this.dialog.appendTo(this.planet!.renderer!.div as HTMLElement);
-
-        this.dialog.setPosition((this.planet!.renderer!.div!.clientWidth as number) - this.dialog.width - 67)
-
-        this.dialog.events.on("visibility", (v: boolean) => {
+    oninit() {
+        this.dialog.appendTo(this.planet.renderer.div);
+        this.dialog.setPosition(this.planet.renderer.div.clientWidth - this.dialog.width - 67);
+        this.dialog.events.on("visibility", (v) => {
             this._menuBtn.setActive(v);
         });
-
-        this.planet!.events.on("layeradd", this.addNewLayer, this)
-        this.planet!.events.on("layerremove", this.removeLayer, this)
-    }
-
-    public addNewLayer = (layer: Layer) => {
-
-    }
-
-    public removeLayer = (layer: Layer) => {
-
+        this.planet.events.on("layeradd", this.addNewLayer, this);
+        this.planet.events.on("layerremove", this.removeLayer, this);
     }
-
-    override onactivate() {
-
+    onactivate() {
     }
-
-    override ondeactivate() {
+    ondeactivate() {
         this.dialog.hide();
     }
-
 }

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

@@ -0,0 +1,49 @@
+import { Control, IControlParams } from "./Control";
+import { Dialog } from '../ui/Dialog';
+import { Layer } from "../layer/Layer";
+import { Slider } from "../ui/Slider";
+import { ToggleButton } from "../ui/ToggleButton";
+import { View } from '../ui/View';
+interface ILightingParams extends IControlParams {
+}
+/**
+ * Helps to set up lighting.
+ */
+export declare 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;
+    $gamma: HTMLElement | null;
+    $exposure: HTMLElement | null;
+    $night: HTMLElement | null;
+    $opacity: HTMLElement | null;
+    $diffuse: HTMLElement | null;
+    $ambient: HTMLElement | null;
+    $specular: HTMLElement | null;
+    $atmosphereOpacity: HTMLElement | null;
+    constructor(options?: ILightingParams);
+    bindLayer(layer: Layer): void;
+    oninit(): void;
+    protected _update(): void;
+    protected _fetchLayers(): void;
+    protected _onLayerAdd(e: Layer): void;
+    protected _onLayerRemove(e: Layer): void;
+}
+export {};