@openglobus/og 0.17.1 → 0.18.0

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

@@ -1,47 +1,56 @@
-"use strict";
-
-import { Events } from '../Events.js';
-import { Control } from "./Control.js";
-
-/**
- *
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
- */
-class LayerAnimation extends Control {
-    constructor(options = {}) {
-        super(options);
+import {EventsHandler, createEvents} from '../Events';
+import {Layer} from '../layer/Layer';
+import {Control, IControlParams} from "./Control";
 
-        this.events = new Events(["change", "idle", "play", "pause", "stop"])
+type LayerAnimationEventsList = ["change", "idle", "play", "pause", "stop"];
 
-        this._name = options.name || `layerAnimation-${this._id}`;
+const LAYERANIMATION_EVENTS: LayerAnimationEventsList = ["change", "idle", "play", "pause", "stop"];
 
-        this._layersArr = options.layers ? [].concat(options.layers) : [];
-        this._currentIndex = -1;
+interface ILayerAnimationParams extends IControlParams {
+    layers?: Layer,
+    playInterval?: number,
+    frameSize?: number,
+    repeat?: boolean;
+    skipTimeout?: number;
+}
 
+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 = {}) {
+        super(options);
+        this.events = createEvents(LAYERANIMATION_EVENTS);
+        this._name = options.name || `layerAnimation-${this.__id}`;
+        this._layersArr = options.layers ? ([] as Layer[]).concat(options.layers) : [];
+        this._currentIndex = -1;
         this._playInterval = options.playInterval || 120;
         this._playIntervalHandler = -1;
         this._playIndex = 0;
-
         this._frameSize = options.frameSize || 50;
-
         this.repeat = options.repeat != undefined ? options.repeat : true;
-
         this.skipTimeout = options.skipTimeout || 5000;
-
         this._timeoutStart = 0;
     }
 
-    _onViewchange() {
+    protected _onViewchange = () => {
         this._timeoutStart = performance.now();
     }
 
-    _getFramesNum() {
+    protected _getFramesNum(): number {
         return Math.ceil(this._layersArr.length / this._frameSize);
     }
 
-    _setFrame(frameIndex) {
+    protected _setFrame(frameIndex: number) {
         for (let i = 0, len = this._getFramesNum(); i < len; i++) {
             if (i !== frameIndex) {
                 this._removeFrameFromPlanet(i);
@@ -51,11 +60,11 @@ class LayerAnimation extends Control {
         }
     }
 
-    _getFrameIndex(layerIndex) {
+    protected _getFrameIndex(layerIndex: number): number {
         return Math.floor(layerIndex / this._frameSize);
     }
 
-    _appendFrameToPlanet(frameIndex) {
+    protected _appendFrameToPlanet(frameIndex: number) {
         if (this.planet) {
             let minIndex = frameIndex * this._frameSize;
             let maxIndex = minIndex + this._frameSize;
@@ -65,7 +74,7 @@ class LayerAnimation extends Control {
         }
     }
 
-    _removeFrameFromPlanet(frameIndex) {
+    protected _removeFrameFromPlanet(frameIndex: number) {
         if (this.planet) {
             let minIndex = frameIndex * this._frameSize;
             let maxIndex = minIndex + this._frameSize;
@@ -77,47 +86,39 @@ class LayerAnimation extends Control {
         }
     }
 
-    oninit() {
+    public override oninit() {
         super.oninit();
         this.onactivate();
         this._initLayers();
-        this._onLayerLoadend_ = this._onLayerLoadend.bind(this);
-        this.planet.events.on("layerloadend", this._onLayerLoadend_, this);
+        this.planet!.events.on("layerloadend", this._onLayerLoadend);
         this._setCurrentIndexAsync(0, false, true);
     }
 
-    onactivate() {
+    public override onactivate() {
         super.onactivate();
-        this._onViewchange_ = this._onViewchange.bind(this);
-        this.planet.camera.events.on("viewchange", this._onViewchange_, this);
-
-        this._onVisibityChange_ = this._onVisibityChange.bind(this);
-        this.planet.renderer.handler.events.on("visibilitychange", this._onVisibityChange_, this);
+        this.planet!.camera.events.on("viewchange", this._onViewchange);
+        this.planet!.renderer!.handler.events.on("visibilitychange", this._onVisibilityChange);
     }
 
-    ondeactivate() {
+    public override ondeactivate() {
         super.ondeactivate();
-        this.planet.camera.events.off("viewchange", this._onViewchange_);
-        this._onViewchange_ = null;
+        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._onLayerLoadend_ = null;
-
-        this.planet.renderer.handler.events.off("visibilitychange", this._onVisibityChange_);
-        this._onVisibityChange_ = null;
+        this.planet!.events.off("layerloadend", this._onLayerLoadend);
+        this.planet!.renderer!.handler.events.off("visibilitychange", this._onVisibilityChange);
     }
 
-    _onVisibityChange(isVisible) {
+    protected _onVisibilityChange = (isVisible: boolean) => {
         if (!isVisible) {
             this.pause();
         }
     }
 
-    clear() {
+    public clear() {
         this.stop();
         this._currentIndex = -1;
         this._currVisibleIndex = -1;
@@ -128,7 +129,7 @@ class LayerAnimation extends Control {
         }
     }
 
-    _initLayers() {
+    protected _initLayers() {
         if (this.planet) {
             for (let i = 0, len = this._layersArr.length; i < len; i++) {
                 let li = this._layersArr[i];
@@ -140,37 +141,35 @@ class LayerAnimation extends Control {
         }
     }
 
-    setLayers(layers) {
+    public setLayers(layers: Layer[]) {
         this.clear();
-        this._layersArr = [].concat(layers);
+        this._layersArr = [].concat(layers as any);
         this._initLayers();
     }
 
-    appendLayer(layer) {
+    public appendLayer(layer: Layer) {
         this._layersArr.push(layer);
         layer.setVisibility(false);
         layer.setBaseLayer(false);
         layer.opacity = 0.0;
-        if (this.planet) {
-            //check current frame
-            this.planet.addLayer(layer);
-        }
+        //check current frame
+        this.planet?.addLayer(layer);
     }
 
     /**
-     * warning: Use XYZ.isIdle in requesAnimationFrame(after setVisibility)
-     * @returns {boolean} Returns truw if current layer is idle
+     * warning: Use XYZ.isIdle in requestAnimationFrame(after setVisibility)
+     * @returns Returns true if current layer is idle
      */
-    get isIdle() {
+    public get isIdle(): boolean {
         let currLayer = this._layersArr[this._currentIndex];
         return currLayer && currLayer.isIdle || !currLayer;
     }
 
-    get playInterval() {
+    public get playInterval() {
         return this._playInterval;
     }
 
-    set playInterval(val) {
+    public set playInterval(val: number) {
         if (val !== this._playInterval) {
             this._playInterval = val;
             if (this.isPlaying) {
@@ -180,15 +179,15 @@ class LayerAnimation extends Control {
         }
     }
 
-    get isPlaying() {
+    public get isPlaying(): boolean {
         return this._playIntervalHandler !== -1;
     }
 
-    get layers() {
+    public get layers(): Layer[] {
         return this._layersArr;
     }
 
-    _checkEnd() {
+    protected _checkEnd() {
         if (this._playIndex > this._layersArr.length) {
             if (this.repeat) {
                 this._playIndex = 0;
@@ -198,7 +197,7 @@ class LayerAnimation extends Control {
         }
     }
 
-    play() {
+    public play() {
         if (!this.isPlaying) {
 
             if (this._currentIndex >= this._layersArr.length - 1) {
@@ -209,7 +208,7 @@ class LayerAnimation extends Control {
 
             this._playIntervalHandler = setInterval(() => {
                 this._checkEnd();
-                this._setCurrentIndexAsync(this._playIndex);
+                this._setCurrentIndexAsync(this._playIndex, false, false);
 
                 requestAnimationFrame(() => {
                     if (this.isIdle || (performance.now() - this._timeoutStart > this.skipTimeout)) {
@@ -224,7 +223,7 @@ class LayerAnimation extends Control {
         }
     }
 
-    stop() {
+    public stop() {
         if (this._playIndex > 0) {
             this._clearInterval();
             this._playIndex = 0;
@@ -233,25 +232,23 @@ class LayerAnimation extends Control {
         }
     }
 
-    pause() {
+    public pause() {
         if (this.isPlaying) {
             this._clearInterval();
             this.events.dispatch(this.events.pause);
         }
     }
 
-    _clearInterval() {
+    protected _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 cleanup.
-     * @param {Layer} layer
-     * @private
+     * 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.
      */
-    _onLayerLoadend(layer) {
+    private _onLayerLoadend = (layer: Layer) => {
 
         let currLayer = this._layersArr[this._currentIndex];
 
@@ -290,21 +287,18 @@ class LayerAnimation extends Control {
     /**
      * Function sets layer index visible.
      * @param {number} index
-     * @param {boolean} [stopPropagation]
+     * @param {boolean} [stopPropagation=false]
      */
-    setCurrentIndex(index, stopPropagation) {
+    setCurrentIndex(index: number, 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 non transparent (opacity = 1) till current layer is loading.
-     * @param {number} index
-     * @param {boolean} [forceVisibility]
-     * @param {boolean} [stopPropagation]
+     * layer remains not transparent (opacity = 1) till current layer is loading.
      */
-    _setCurrentIndexAsync(index, forceVisibility, stopPropagation) {
+    protected _setCurrentIndexAsync(index: number, forceVisibility: boolean = false, stopPropagation: boolean = false) {
 
         if (index != this._currentIndex && index >= 0 && index < this._layersArr.length) {
 
@@ -367,13 +361,3 @@ class LayerAnimation extends Control {
         }
     }
 }
-
-export function
-
-layerAnimation(options) {
-    return LayerAnimation(options);
-}
-
-export {
-    LayerAnimation
-};

package/src/control/LayerSwitcher.ts

@@ -0,0 +1,76 @@
+import {Control, IControlParams} from "./Control";
+import {Dialog} from "../ui/Dialog";
+import {Layer} from "../layer/Layer";
+import {ToggleButton} from "../ui/ToggleButton";
+
+interface ILayerSwitcherParams extends IControlParams {
+
+}
+
+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">
+<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 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<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 = {}) {
+        super({
+            name: "LayerSwitcher",
+            ...options
+        });
+
+        this.dialog = new Dialog({
+            title: "Layer Switcher",
+            top: 15,
+            useHide: true,
+            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) => {
+            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) => {
+
+    }
+
+    override onactivate() {
+
+    }
+
+    override ondeactivate() {
+        this.dialog.hide();
+    }
+
+}