@openglobus/og 0.17.1 → 0.18.0

package/src/{og/control/selection/SelectionScene.js → control/selection/SelectionScene.ts}

@@ -1,12 +1,9 @@
-'use strict';
-
-import { Ellipsoid } from '../../ellipsoid/Ellipsoid.js';
-import { Entity } from '../../entity/Entity.js';
-import { Events } from '../../Events.js';
-import { Vector } from '../../layer/Vector.js';
-import { LonLat } from '../../LonLat.js';
-import { Object3d } from '../../Object3d.js';
-import { RenderNode } from '../../scene/RenderNode.js';
+import { Entity } from '../../entity/Entity';
+import { Events } from '../../Events';
+import { Vector } from '../../layer/Vector';
+import { LonLat } from '../../LonLat';
+import { Object3d } from '../../Object3d';
+import { RenderNode } from '../../scene/RenderNode';
 
 const OUTLINE_COUNT = 120;
 
@@ -15,7 +12,7 @@ const MIN_SCALE = 0.001;
 const MAX_SCALE_HEIGHT = 3000.0;
 const MIN_SCALE_HEIGHT = 19000000.0;
 
-function distanceFormat(v) {
+function distanceFormat(v: number) {
     if (v > 1000) {
         return `${(v / 1000).toFixed(1)} km`;
     } else if (v > 9) {
@@ -26,7 +23,24 @@ function distanceFormat(v) {
 }
 
 class SelectionScene extends RenderNode {
-    constructor(options = {}) {
+    events: Events<string[]>;
+    _ignoreTerrain = false;
+    _onSelect: any;
+    _autoSelectionHide: any;
+    _planet: any;
+    _startLonLat: any;
+    _heading: number;
+    _propsLabel: Entity;
+    _trackEntity: Entity;
+    _cornerEntity: Entity[];
+    _trackLayer: Vector;
+    _cornersLayer: Vector;
+    _onMouseMove_: any;
+    _onMouseLdown_: any;
+    _onMouseLup_: any;
+    _pickedCorner: any;
+    _anchorLonLat: any;
+    constructor(options: { name?: string, ignoreTerrain?: boolean, onSelect?: any, autoSelectionHide?: boolean, planet?: any } = {}) {
         super(options.name);
 
         this.events = new Events(EVENT_NAMES);
@@ -54,9 +68,9 @@ class SelectionScene extends RenderNode {
                 align: "center",
                 offset: [0, 18]
             }
-        });
+        } as any);
 
-        this._propsLabel.label.setVisibility(false);
+        this._propsLabel?.label?.setVisibility(false);
 
         this._trackEntity = new Entity({
             polyline: {
@@ -65,9 +79,9 @@ class SelectionScene extends RenderNode {
                 color: "rgb(455,455,455)",
                 isClosed: false
             }
-        });
+        } as any);
 
-        this._trackEntity.polyline.altitude = 0.01;
+        (this._trackEntity as any).polyline.altitude = 0.01;
 
         let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0)
 
@@ -83,7 +97,7 @@ class SelectionScene extends RenderNode {
                 properties: {
                     name: "start"
                 }
-            }),
+            } as any),
             new Entity({
                 geoObject: {
                     scale: 1,
@@ -95,7 +109,7 @@ class SelectionScene extends RenderNode {
                 properties: {
                     name: "end"
                 }
-            })
+            } as any)
         ];
 
         this._trackLayer = new Vector("track", {
@@ -115,36 +129,36 @@ class SelectionScene extends RenderNode {
         });
     }
 
-    set ignoreTerrain(v) {
+    set ignoreTerrain(v: boolean) {
         this._ignoreTerrain = v;
         if (v) {
             //...redraw line
         }
     }
 
-    bindPlanet(planet) {
+    bindPlanet(planet: any) {
         this._planet = planet;
     }
 
-    init() {
+    override init() {
         this._activate();
     }
 
-    onremove() {
+    override onremove() {
         this._deactivate();
     }
 
     _activate() {
-        this._propsLabel.label.setVisibility(false);
+        this._propsLabel?.label?.setVisibility(false);
 
         this._onMouseMove_ = this._onMouseMove.bind(this);
-        this.renderer.events.on("mousemove", this._onMouseMove_, this);
+        this.renderer?.events.on("mousemove", this._onMouseMove_, this);
 
         this._onMouseLdown_ = this._onMouseLdown.bind(this);
-        this.renderer.events.on("ldown", this._onMouseLdown_, this);
+        this.renderer?.events.on("ldown", this._onMouseLdown_, this);
 
         this._onMouseLup_ = this._onMouseLup.bind(this);
-        this.renderer.events.on("lup", this._onMouseLup_, this);
+        this.renderer?.events.on("lup", this._onMouseLup_, this);
 
         this._planet.addLayer(this._trackLayer);
 
@@ -156,9 +170,9 @@ class SelectionScene extends RenderNode {
         this._startLonLat = null;
         this._trackLayer.remove();
         this._cornersLayer.remove();
-        this.renderer.events.off("mousemove", this._onMouseMove_);
-        this.renderer.events.off("ldown", this._onMouseLdown_);
-        this.renderer.events.off("lup", this._onMouseLup_);
+        this.renderer?.events.off("mousemove", this._onMouseMove_);
+        this.renderer?.events.off("ldown", this._onMouseLdown_);
+        this.renderer?.events.off("lup", this._onMouseLup_);
 
         this.clear();
 
@@ -167,7 +181,7 @@ class SelectionScene extends RenderNode {
         this._onMouseLup_ = null;
     }
 
-    _onMouseLdown(e) {
+    _onMouseLdown(e: any) {
 
         //workaround to show pointer, because ogGrabbingPoiner keep !importanti which override pointer style
         e.renderer.handler.canvas.classList.remove('ogGrabbingPoiner');
@@ -177,15 +191,15 @@ class SelectionScene extends RenderNode {
         if (!this._startLonLat) {
 
 
-            this._propsLabel.label.setVisibility(false);
+            this._propsLabel.label?.setVisibility(false);
 
-            this._trackEntity.polyline.setPath3v([]);
+            this._trackEntity.polyline?.setPath3v([]);
 
 
-            this._cornerEntity[0].geoObject.setVisibility(true);
-            this._cornerEntity[1].geoObject.setVisibility(true);
+            this._cornerEntity[0].geoObject?.setVisibility(true);
+            this._cornerEntity[1].geoObject?.setVisibility(true);
 
-            this.renderer.controls.mouseNavigation.deactivate();
+            this.renderer?.controls.mouseNavigation?.deactivate();
             this._startLonLat = this._planet.getLonLatFromPixelTerrain(e);
 
             let startPos = this._planet.ellipsoid.lonLatToCartesian(this._startLonLat);
@@ -194,13 +208,13 @@ class SelectionScene extends RenderNode {
         }
     }
 
-    _onMouseLup(e) {
+    _onMouseLup(e: any) {
         if (this._startLonLat) {
 
             this._pickedCorner = null;
             this._anchorLonLat = null;
 
-            this._propsLabel.label.setVisibility(true);
+            this._propsLabel.label?.setVisibility(true);
 
             if (this._onSelect && typeof this._onSelect === 'function') {
                 let startLonLat = this._cornerEntity[0].getLonLat();
@@ -222,10 +236,10 @@ class SelectionScene extends RenderNode {
             this._startLonLat = null;
         }
         e.renderer.handler.canvas.style.cursor = 'default';
-        this.renderer.controls.mouseNavigation.activate();
+        this.renderer?.controls.mouseNavigation?.activate();
     }
 
-    _drawLine(startLonLat, endLonLat, startPos) {
+    _drawLine(startLonLat: any, endLonLat: any, startPos?: any) {
 
         if (!startPos) {
             startPos = this._planet.ellipsoid.lonLatToCartesian(startLonLat);
@@ -253,7 +267,7 @@ class SelectionScene extends RenderNode {
 
         path.push(startPos);
 
-        let createPath = (sideA, sideB) => {
+        let createPath = (sideA: any, sideB: any) => {
             let dir = sideB.sub(sideA);
             let dist = dir.length();
             dir.normalize();
@@ -268,7 +282,7 @@ class SelectionScene extends RenderNode {
             createPath(corners[i], corners[i + 1]);
         }
 
-        this._trackEntity.polyline.setPath3v([path]);
+        this._trackEntity.polyline?.setPath3v([path]);
 
         if (this._ignoreTerrain) {
             // this._propsLabel.setCartesian3v(path[Math.floor(path.length / 2)]);
@@ -276,9 +290,9 @@ class SelectionScene extends RenderNode {
         }
     }
 
-    _onMouseMove(e) {
+    _onMouseMove(e: any) {
         if (this._startLonLat) {
-            this._propsLabel.label.setVisibility(true);
+            this._propsLabel.label?.setVisibility(true);
             let endLonLat = this._planet.getLonLatFromPixelTerrain(e);
             if (!endLonLat)
                 return;
@@ -287,22 +301,22 @@ class SelectionScene extends RenderNode {
     }
 
     clear() {
-        this._trackEntity.polyline.clear();
-        this._cornerEntity[0].geoObject.setVisibility(false);
-        this._cornerEntity[1].geoObject.setVisibility(false);
+        this._trackEntity.polyline?.clear();
+        this._cornerEntity[0].geoObject?.setVisibility(false);
+        this._cornerEntity[1].geoObject?.setVisibility(false);
     }
 
-    frame() {
-        let t = this._trackEntity.polyline.getPath3v()[0];
+    override frame() {
+        let t = this._trackEntity.polyline?.getPath3v()[0];
         if (t) {
             if (!this._ignoreTerrain) {
                 let res = 0;
                 for (let i = 0, len = t.length - 1; i < len; i++) {
-                    res += t[i + 1].distance(t[i]);
+                    res += (t[i + 1] as any).distance(t[i]);
                 }
 
-                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)]);
-                this._propsLabel.label.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
+                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)] as any);
+                this._propsLabel.label?.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
             }
         }
     }

package/src/{og/control/timeline/TimelineControl.js → control/timeline/TimelineControl.ts}

@@ -1,11 +1,16 @@
-'use strict';
-
-import { Dialog } from "../../ui/Dialog.js";
-import { ToggleButton } from "../../ui/ToggleButton.js";
-import { Control } from '../Control.js';
-import { TimelineView } from './TimelineView.js';
+import {Dialog} from "../../ui/Dialog";
+import {ToggleButton} from "../../ui/ToggleButton";
+import {Control, IControlParams} from '../Control';
+import {TimelineView} from './TimelineView';
+
+interface ITimelineControlParams extends IControlParams {
+    name?: string;
+    current?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+}
 
-function addHours(date, hours) {
+function addHours(date: Date, hours: number): Date {
     const temp = new Date(date);
     temp.setHours(temp.getHours() + hours);
     return temp;
@@ -20,11 +25,15 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 </svg>`;
 
 class TimelineControl extends Control {
-    constructor(options = {}) {
-        if (!options.name || options.name === "") {
-            options.name = "timeline";
-        }
-        super(options);
+    protected _timelineView: TimelineView;
+    protected _toggleBtn: ToggleButton;
+    protected _dialog: Dialog<null>;
+
+    constructor(options: ITimelineControlParams = {}) {
+        super({
+            name: "timeline",
+            ...options
+        });
 
         let currentDate = options.current || new Date();
         let startDate = options.rangeStart || addHours(currentDate, -12);
@@ -54,47 +63,47 @@ class TimelineControl extends Control {
             maxHeight: 110
         });
 
-        this._dialog.on("visibility", (v) => {
+        this._dialog.events.on("visibility", (v: boolean) => {
             this._toggleBtn.setActive(v);
         });
     }
 
-    oninit() {
+    public override oninit() {
 
-        let $container = this.renderer.div;
+        let $container = this.renderer!.div!;
 
         this._toggleBtn.appendTo($container);
         this._dialog.appendTo($container);
 
-        this._toggleBtn.on("change", (isActive) => {
+        this._toggleBtn.events.on("change", (isActive: boolean) => {
             this._dialog.setVisibility(isActive);
             if (isActive) {
                 this._timelineView.resize();
             }
         });
 
-        this._timelineView.appendTo(this._dialog.container);
+        this._timelineView.appendTo(this._dialog.container!);
 
-        this._timelineView.on("setcurrent", (d) => {
-            this.renderer.handler.defaultClock.setDate(d);
+        this._timelineView.events.on("setcurrent", (d: Date) => {
+            this.renderer && this.renderer.handler.defaultClock.setDate(d);
         });
 
-        this._timelineView.on("startdrag", () => {
-            this.renderer.controls.mouseNavigation.deactivate();
+        this._timelineView.events.on("startdrag", () => {
+            this.renderer && this.renderer.controls.mouseNavigation.deactivate();
         });
 
-        this._timelineView.on("stopdrag", (e) => {
-            this.renderer.controls.mouseNavigation.activate();
+        this._timelineView.events.on("stopdrag", () => {
+            this.renderer && this.renderer.controls.mouseNavigation.activate();
         });
 
-        this._timelineView.on("startdragcurrent", () => {
-            this.renderer.controls.mouseNavigation.deactivate();
+        this._timelineView.events.on("startdragcurrent", () => {
+            this.renderer && this.renderer.controls.mouseNavigation.deactivate();
         });
 
-        this._timelineView.on("stopdragcurrent", () => {
-            this.renderer.controls.mouseNavigation.activate();
+        this._timelineView.events.on("stopdragcurrent", () => {
+            this.renderer && this.renderer.controls.mouseNavigation.activate();
         });
     }
 }
 
-export { TimelineControl };
+export {TimelineControl};

package/src/{og/control/timeline/TimelineModel.js → control/timeline/TimelineModel.ts}

@@ -1,12 +1,36 @@
-'use strict';
+import {EventsHandler, createEvents} from '../../Events';
+import {addSeconds} from "./timelineUtils";
 
-import { Events } from '../../Events.js';
-import { addSeconds } from "./timelineUtils.js";
+type TimelineEventsList = ["change", "current"];
+
+const TIMELINE_EVENTS: TimelineEventsList = ["change", "current"/*, "tick"*/];
+
+interface ITimelineParams {
+    current?: Date;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    multiplier?: number
+}
 
 class TimelineModel {
-    constructor(options = {}) {
+    public events: EventsHandler<TimelineEventsList>;
+    protected _current: Date;
+    protected _rangeStart: Date;
+    protected _rangeEnd: Date;
+    protected _range: number;
+    protected _minDate: Date | null;
+    protected _maxDate: Date | null;
+    protected _requestAnimationFrameId: number;
+    protected _prevNow: number;
+
+    public multiplier: number;
+    public dt: number;
+
+    constructor(options: ITimelineParams = {}) {
 
-        this._events = new Events(["change", "current"/*, "tick"*/]);
+        this.events = createEvents(TIMELINE_EVENTS);
 
         this._current = options.current || new Date();
         this._rangeStart = options.rangeStart || new Date();
@@ -23,88 +47,79 @@ class TimelineModel {
         this.dt = 0;
     }
 
-    on(eventName, callback, sender) {
-        return this._events.on(eventName, callback, sender);
-    }
-
-    off(eventName, callback) {
-        return this._events.off(eventName, callback);
-    }
-
-    play() {
+    public play() {
         if (!this._requestAnimationFrameId) {
             this._prevNow = window.performance.now();
             this._animationFrameCallback();
         }
     }
 
-    stop() {
+    public stop() {
         if (this._requestAnimationFrameId) {
             window.cancelAnimationFrame(this._requestAnimationFrameId);
             this._requestAnimationFrameId = 0;
         }
     }
 
-    stopped() {
+    public stopped() {
         return this._requestAnimationFrameId == 0;
     }
 
-    _animationFrameCallback() {
+    protected _animationFrameCallback() {
         this._requestAnimationFrameId = window.requestAnimationFrame(() => {
             this._frame();
             this._animationFrameCallback();
         });
     }
 
-    _frame() {
+    protected _frame() {
         let now = window.performance.now();
         this.dt = now - this._prevNow;
         this._prevNow = now;
 
         this.current = new Date(this.currentTime + this.dt * this.multiplier);
 
-        // // @ts-ignore
         // this._events.dispatch(this._events.tick, this._current);
     }
 
-    get range() {
+    public get range(): number {
         return this._range
     }
 
-    set(rangeStart, rangeEnd) {
+    public set(rangeStart: Date, rangeEnd: Date) {
         if (rangeStart !== this._rangeStart || rangeEnd !== this._rangeEnd) {
             this._rangeStart = rangeStart;
             this._rangeEnd = rangeEnd;
             this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
-            this._events.dispatch(this._events.change, rangeStart, rangeEnd);
+            this.events.dispatch(this.events.change, rangeStart, rangeEnd);
         }
     }
 
-    get current() {
+    public get current(): Date {
         return this._current;
     }
 
-    get rangeStart() {
+    public get rangeStart(): Date {
         return this._rangeStart;
     }
 
-    get rangeEnd() {
+    public get rangeEnd(): Date {
         return this._rangeEnd;
     }
 
-    get rangeStartTime() {
+    public get rangeStartTime(): number {
         return this._rangeStart.getTime();
     }
 
-    get rangeEndTime() {
+    public get rangeEndTime(): number {
         return this._rangeEnd.getTime();
     }
 
-    get currentTime() {
+    public get currentTime(): number {
         return this._current.getTime();
     }
 
-    set current(current) {
+    public set current(current: Date) {
         if (current !== this._current) {
             if (this._maxDate && current > this._maxDate) {
                 this._current = this._maxDate;
@@ -113,25 +128,25 @@ class TimelineModel {
             } else {
                 this._current = current;
             }
-            this._events.dispatch(this._events.current, this._current);
+            this.events.dispatch(this.events.current, this._current);
         }
     }
 
-    set rangeStart(date) {
+    public set rangeStart(date: Date) {
         if (date !== this._rangeStart) {
             this._rangeStart = date;
             this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
-            this._events.dispatch(this._events.change, date);
+            this.events.dispatch(this.events.change, date);
         }
     }
 
-    set rangeEnd(date) {
+    public set rangeEnd(date: Date) {
         if (date !== this._rangeEnd) {
             this._rangeEnd = date;
             this._range = this._rangeEnd.getTime() - this._rangeStart.getTime();
-            this._events.dispatch(this._events.change, date);
+            this.events.dispatch(this.events.change, date);
         }
     }
 }
 
-export { TimelineModel };
+export {TimelineModel};