@openglobus/og 0.17.2 → 0.18.0

package/src/{og/control/ruler/RulerScene.js → control/ruler/RulerScene.ts}

@@ -1,16 +1,25 @@
-'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 { Vec2 } from '../../math/Vec2.js';
-import { Object3d } from '../../Object3d.js';
-import { RenderNode } from '../../scene/RenderNode.js';
+import {Entity} from '../../entity/Entity';
+import {createEvents, EventsHandler} from '../../Events';
+import {LonLat} from "../../LonLat";
+import {Object3d} from '../../Object3d';
+import {Planet} from "../../scene/Planet";
+import {RenderNode} from '../../scene/RenderNode';
+import {Vector} from '../../layer/Vector';
+import {Vec2} from '../../math/Vec2';
+import {Vec3} from '../../math/Vec3';
+import {IMouseState} from "../../renderer/RendererEvents";
+import {Ellipsoid} from "../../ellipsoid/Ellipsoid";
+import {ILabelParams} from "../../entity/Label";
 
 const OUTLINE_COUNT = 120;
 
-export function distanceFormat(v) {
+export interface IRulerSceneParams {
+    name?: string;
+    ignoreTerrain?: boolean;
+    planet?: Planet;
+}
+
+export const distanceFormat = (v: number): string => {
     if (v > 1000) {
         return `${(v / 1000).toFixed(1)} km`;
     } else if (v > 9) {
@@ -20,16 +29,16 @@ export function distanceFormat(v) {
     }
 }
 
-let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0)
+let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0);
 
-const LABEL_OPTIONS = {
+const LABEL_OPTIONS: ILabelParams = {
     text: "",
     size: 11,
     color: "rgba(455,455,455,1.0)",
     outlineColor: "rgba(0,0,0,0.34)",
     outline: 0.23,
     align: "center",
-    offset: [0, 20]
+    offset: [0, 20, 0]
 };
 const RULER_CORNER_OPTIONS = {
     scale: 1,
@@ -39,11 +48,60 @@ const RULER_CORNER_OPTIONS = {
     object3d: obj3d
 };
 
+type RulerSceneEventsList = [
+    "add",
+    "remove",
+    "mousemove",
+    "mouseenter",
+    "mouseleave",
+    "lclick",
+    "rclick",
+    "mclick",
+    "ldblclick",
+    "rdblclick",
+    "mdblclick",
+    "lup",
+    "rup",
+    "mup",
+    "ldown",
+    "rdown",
+    "mdown",
+    "lhold",
+    "rhold",
+    "mhold",
+    "mousewheel",
+    "touchmove",
+    "touchstart",
+    "touchend",
+    "doubletouch",
+    "touchleave",
+    "touchenter"
+];
+
 class RulerScene extends RenderNode {
-    constructor(options = {}) {
+    public events: EventsHandler<RulerSceneEventsList>;
+    protected _ignoreTerrain: boolean;
+    protected _planet: Planet | null;
+    protected _startLonLat: LonLat | null;
+    protected _preventClick: boolean;
+    protected _stopDrawing: boolean;
+    protected _pickedCorner: Entity | null;
+    protected _startPos: Vec2 | null;
+    protected _startClick: Vec2;
+    protected _heading: number;
+    protected _trackLayer: Vector;
+    protected _labelLayer: Vector;
+    protected _cornersLayer: Vector;
+    protected _cornerEntity: Entity[];
+    protected _propsLabel: Entity;
+    protected _trackEntity: Entity;
+    protected _anchorLonLat: LonLat | null;
+    protected _timeout: any;
+
+    constructor(options: IRulerSceneParams = {}) {
         super(options.name);
 
-        this.events = new Events(EVENT_NAMES);
+        this.events = createEvents(RULERSCENE_EVENTS);
 
         this._ignoreTerrain = options.ignoreTerrain != undefined ? options.ignoreTerrain : true;
 
@@ -57,6 +115,8 @@ class RulerScene extends RenderNode {
         this._startPos = null;
         this._startClick = new Vec2();
 
+        this._anchorLonLat = null;
+
         this._heading = 0;
 
         this._trackLayer = new Vector("track", {
@@ -82,20 +142,23 @@ class RulerScene extends RenderNode {
             scaleByDistance: [100, 4000000, 1.0],
             pickingScale: 2
         });
-    }
 
-    set ignoreTerrain(v) {
-        this._ignoreTerrain = v;
-        if (v) {
-            //...redraw line
-        }
-    }
+        this._propsLabel = new Entity({
+            name: 'propsLabel',
+            label: LABEL_OPTIONS
+        });
 
-    bindPlanet(planet) {
-        this._planet = planet;
-    }
+        this._trackEntity = new Entity({
+            polyline: {
+                path3v: [],
+                thickness: 4.8,
+                color: "rgb(255,131,0)",
+                isClosed: false
+            }
+        });
+
+        this._trackEntity.polyline!.altitude = 0.01;
 
-    _createCorners() {
         this._cornerEntity = [
             new Entity({
                 geoObject: RULER_CORNER_OPTIONS,
@@ -110,69 +173,55 @@ class RulerScene extends RenderNode {
                 }
             })
         ];
-        this._cornersLayer.addEntities(this._cornerEntity)
     }
 
-    init() {
-
-        this._propsLabel = new Entity({
-            'name': 'propsLabel',
-            'label': LABEL_OPTIONS
-        });
+    public set ignoreTerrain(v: boolean) {
+        this._ignoreTerrain = v;
+        if (v) {
+            //...redraw line
+        }
+    }
 
-        this._trackEntity = new Entity({
-            polyline: {
-                path3v: [],
-                thickness: 4.8,
-                color: "rgb(255,131,0)",
-                isClosed: false
-            }
-        });
+    public bindPlanet(planet: Planet) {
+        this._planet = planet;
+    }
 
-        this._trackEntity.polyline.altitude = 0.01;
+    protected _createCorners() {
+        this._cornersLayer.addEntities(this._cornerEntity)
+    }
 
+    public override init() {
         this._createCorners();
         this._trackLayer.addEntities([this._trackEntity]);
         this._labelLayer.addEntities([this._propsLabel]);
-        this._planet.addLayer(this._labelLayer);
-        this._planet.addLayer(this._trackLayer);
-        this._planet.addLayer(this._cornersLayer);
+        this._planet!.addLayer(this._labelLayer);
+        this._planet!.addLayer(this._trackLayer);
+        this._planet!.addLayer(this._cornersLayer);
         this._activate();
     }
 
-    onremove() {
+    public override onremove() {
         this._deactivate();
     }
 
-    _activate() {
-
-        this._propsLabel.label.setVisibility(false);
-        this._onLclick_ = this._onLclick.bind(this);
-        this.renderer.events.on("lclick", this._onLclick_, this);
-        this._onMouseMove_ = this._onMouseMove.bind(this);
-        this.renderer.events.on("mousemove", this._onMouseMove_, this);
-        this._onLdblclick_ = this._onLdblclick.bind(this);
-        this.renderer.events.on("ldblclick", this._onLdblclick_, this);
-
-        this._onLUp_ = this._onLUp.bind(this);
-        this.renderer.events.on("lup", this._onLUp_, this);
+    public _activate() {
 
-        this._onCornerEnter_ = this._onCornerEnter.bind(this);
-        this._cornersLayer.events.on("mouseenter", this._onCornerEnter_, this);
-
-        this._onCornerLeave_ = this._onCornerLeave.bind(this);
-        this._cornersLayer.events.on("mouseleave", this._onCornerLeave_, this);
+        this._propsLabel.label!.setVisibility(false);
+        this.setVisibility(false);
 
-        this._onCornerLdown_ = this._onCornerLdown.bind(this);
-        this._cornersLayer.events.on("ldown", this._onCornerLdown_, this);
+        this.renderer!.events.on("lclick", this._onLclick, this);
+        this.renderer!.events.on("mousemove", this._onMouseMove, this);
+        this.renderer!.events.on("ldblclick", this._onLdblclick, this);
+        this.renderer!.events.on("lup", this._onLUp, this);
 
-        this._onCornerLup_ = this._onCornerLup.bind(this);
+        this._cornersLayer.events.on("mouseenter", this._onCornerEnter, this);
+        this._cornersLayer.events.on("mouseleave", this._onCornerLeave, this);
+        this._cornersLayer.events.on("ldown", this._onCornerLdown, this);
         this._cornersLayer.events.on("lup", this._onCornerLup, this);
 
-        this.setVisibility(false);
     }
 
-    _deactivate() {
+    protected _deactivate() {
         this._startLonLat = null;
         this._preventClick = false;
         this._stopDrawing = false;
@@ -180,32 +229,24 @@ class RulerScene extends RenderNode {
         // this._trackLayer.remove();
         // this._cornersLayer.remove();
 
-        this.renderer.events.off("lclick", this._onLclick_);
-        this.renderer.events.off("mousemove", this._onMouseMove_);
-        this.renderer.events.off("lup", this._onLUp_);
+        this.renderer!.events.off("lclick", this._onLclick);
+        this.renderer!.events.off("mousemove", this._onMouseMove);
+        this.renderer!.events.off("lup", this._onLUp);
 
-        this._cornersLayer.events.off("mouseenter", this._onCornerEnter_);
-        this._cornersLayer.events.off("mouseleave", this._onCornerLeave_);
-        this._cornersLayer.events.off("ldown", this._onCornerLdown_);
-        this._cornersLayer.events.off("lup", this._onCornerLup_);
+        this._cornersLayer.events.off("mouseenter", this._onCornerEnter);
+        this._cornersLayer.events.off("mouseleave", this._onCornerLeave);
+        this._cornersLayer.events.off("ldown", this._onCornerLdown);
+        this._cornersLayer.events.off("lup", this._onCornerLup);
 
         this.clear();
-
-        this._onLclick_ = null;
-        this._onMouseMove_ = null;
-        this._onLUp_ = null;
-        this._onCornerLeave_ = null;
-        this._onCornerEnter_ = null;
-        this._onCornerLdown_ = null;
-        this._onCornerLup_ = null;
     }
 
-    _onCornerLdown(e) {
+    protected _onCornerLdown = (e: IMouseState) => {
         if (!this._startLonLat) {
-            this.renderer.controls.mouseNavigation.deactivate();
+            this.renderer?.controls.mouseNavigation?.deactivate();
             this._startClick.set(e.x, e.y);
             let coords = e.pickingObject.getCartesian();
-            this._startPos = this._planet.getPixelFromCartesian(coords);
+            this._startPos = this._planet!.getPixelFromCartesian(coords);
             this._pickedCorner = e.pickingObject;
             if (e.pickingObject.properties.name == "start") {
                 this._anchorLonLat = this._cornerEntity[1].getLonLat().clone();
@@ -215,44 +256,45 @@ class RulerScene extends RenderNode {
         }
     }
 
-    _onLUp() {
+    protected _onLUp = () => {
         if (this._pickedCorner) {
-            this.renderer.controls.mouseNavigation.activate();
+            this.renderer!.controls.mouseNavigation?.activate();
             this._pickedCorner = null;
             this._anchorLonLat = null;
         }
     }
 
-    _onCornerLup() {
+    protected _onCornerLup = () => {
         this._onLUp();
     }
 
-    _onCornerEnter(e) {
-        e.renderer.handler.canvas.style.cursor = "pointer";
+    protected _onCornerEnter = (e: IMouseState) => {
+        e.renderer.handler.canvas!.style.cursor = "pointer";
     }
 
-    _onCornerLeave(e) {
-        e.renderer.handler.canvas.style.cursor = "default";
+    protected _onCornerLeave = (e: IMouseState) => {
+        e.renderer.handler.canvas!.style.cursor = "default";
     }
 
-    _onLdblclick() {
+    protected _onLdblclick = () => {
         this._preventClick = true;
     }
 
-    setVisibility(visibility) {
+    public setVisibility(visibility: boolean) {
         this._cornersLayer.setVisibility(visibility);
         this._trackLayer.setVisibility(visibility);
         this._labelLayer.setVisibility(visibility);
     }
 
-    _onLclick(e) {
-        let startLonLat = this._planet.getLonLatFromPixelTerrain(e);
+    protected _onLclick = (e: IMouseState) => {
+        let startLonLat = this._planet!.getLonLatFromPixelTerrain(e.pos);
+        if (!startLonLat) return;
         this._timeout = setTimeout(() => {
             if (!this._preventClick) {
                 if (!this._startLonLat) {
                     this.setVisibility(true);
                     this._stopDrawing = false;
-                    this._startLonLat = startLonLat;
+                    this._startLonLat = startLonLat!;
                 } else {
                     this._startLonLat = null;
                 }
@@ -267,15 +309,15 @@ class RulerScene extends RenderNode {
         }
     }
 
-    _drawLine(startLonLat, endLonLat, startPos) {
+    protected _drawLine(startLonLat: LonLat, endLonLat: LonLat, startPos?: Vec3) {
 
         if (!startPos) {
-            startPos = this._planet.ellipsoid.lonLatToCartesian(startLonLat);
+            startPos = this._planet!.ellipsoid.lonLatToCartesian(startLonLat);
         }
 
-        let endPos = this._planet.ellipsoid.lonLatToCartesian(endLonLat);
+        let endPos = this._planet!.ellipsoid.lonLatToCartesian(endLonLat);
 
-        let res = this._planet.ellipsoid.inverse(startLonLat, endLonLat);
+        let res = this._planet!.ellipsoid.inverse(startLonLat, endLonLat);
         let length = res.distance;
         this._heading = res.initialAzimuth;
 
@@ -290,43 +332,43 @@ class RulerScene extends RenderNode {
         }
         path.push(endPos);
 
-        this._trackEntity.polyline.setPath3v([path]);
+        this._trackEntity.polyline!.setPath3v([path]);
 
         if (this._ignoreTerrain) {
             this._propsLabel.setCartesian3v(path[Math.floor(path.length / 2)]);
-            this._propsLabel.label.setText(`${distanceFormat(length)}, ${Math.round(this._heading)} deg`);
+            this._propsLabel.label!.setText(`${distanceFormat(length)}, ${Math.round(this._heading)} deg`);
         }
     }
 
-    _onMouseMove(e) {
+    protected _onMouseMove = (e: IMouseState) => {
         if (this._startLonLat && !this._stopDrawing) {
-            this._propsLabel.label.setVisibility(true);
-            let endLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            this._propsLabel.label!.setVisibility(true);
+            let endLonLat = this._planet!.getLonLatFromPixelTerrain(e.pos);
             if (!endLonLat) return;
             this._drawLine(this._startLonLat, endLonLat);
         } else if (this._pickedCorner) {
-            let newLonLat = this._planet.getLonLatFromPixelTerrain(e);
+            let newLonLat = this._planet!.getLonLatFromPixelTerrain(e.pos);
             if (newLonLat) {
                 if (this._pickedCorner.properties.name === "start") {
-                    this._drawLine(newLonLat, this._anchorLonLat);
+                    this._drawLine(newLonLat, this._anchorLonLat!);
                 } else {
-                    this._drawLine(this._anchorLonLat, newLonLat);
+                    this._drawLine(this._anchorLonLat!, newLonLat);
                 }
             }
         }
     }
 
-    clear() {
+    public clear() {
         this._trackEntity.remove();
         this._cornerEntity[0].remove();
         this._cornerEntity[1].remove();
         this._propsLabel.remove();
-        this._planet.removeLayer(this._trackLayer);
-        this._planet.removeLayer(this._cornersLayer);
+        this._planet!.removeLayer(this._trackLayer);
+        this._planet!.removeLayer(this._cornersLayer);
     }
 
-    isCornersPositionChanged() {
-        let t = this._trackEntity.polyline.getPath3v()[0];
+    public isCornersPositionChanged(): boolean {
+        let t = this._trackEntity.polyline!.getPath3v()[0] as Vec3[];
         if (t) {
             const startPos = t[0].clone(),
                 endPos = t[t.length - 1].clone();
@@ -336,8 +378,8 @@ class RulerScene extends RenderNode {
         return false
     }
 
-    frame() {
-        let t = this._trackEntity.polyline.getPath3v()[0];
+    public override frame() {
+        let t = this._trackEntity.polyline!.getPath3v()[0] as Vec3[];
         if (t) {
             const startPos = t[0].clone(),
                 endPos = t[t.length - 1].clone();
@@ -351,18 +393,18 @@ class RulerScene extends RenderNode {
                         res += t[i + 1].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.label!.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
                 }
             }
         }
     }
 
-    get ellipsoid() {
+    public get ellipsoid(): Ellipsoid | null {
         return this._planet ? this._planet.ellipsoid : null;
     }
 }
 
-const EVENT_NAMES = [
+const RULERSCENE_EVENTS: RulerSceneEventsList = [
     "add",
     "remove",
     "mousemove",
@@ -392,4 +434,4 @@ const EVENT_NAMES = [
     "touchenter"
 ];
 
-export { RulerScene };
+export {RulerScene};

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

@@ -1,17 +1,18 @@
-"use strict";
-
-import { ToggleButton } from "../../ui/ToggleButton.js";
-import { Control } from "../Control.js";
-import { SelectionScene } from "./SelectionScene.js";
+import {Control, IControlParams} from "../Control";
+import {SelectionScene} from "./SelectionScene";
+import {ToggleButton} from "../../ui/ToggleButton";
 
 const ICON_BUTTON_SVG = `<?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 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M2.1 0v1.914H0v6h3V3h5.1V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h1.8v1.2h3V0h-4.8zm1.8 7.2v6h3v-6h-3zM0 10.913v6h3v-6H0zM66.9 16.2v6h3v-6h-3zM0 19.914v6h3v-6H0zM66.9 25.2v6h3v-6h-3zM0 28.914v6h3v-6H0zM66.9 34.2v6h3v-6h-3zM0 37.914v6h3v-6H0zM66.9 43.2v6h3v-6h-3zM0 46.914v6h3v-6H0zM66.9 52.2v6h3v-6h-3zM0 55.914v5.191h3.809v-3H3v-2.19H0zm6.809 2.191v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9.648 1.899a2.076 2.076 0 0 0-2.19 2.324l3.137 33.676c.2 1.635 2.135 2.399 3.397 1.34l6.623-5.371l2.969 5.142c1.707 2.958 4.417 3.684 7.375 1.977c2.957-1.708 3.684-4.417 1.976-7.375l-2.959-5.125l7.848-3.008c1.548-.564 1.855-2.62.539-3.611L71.576 60.416a2.073 2.073 0 0 0-1.119-.412z" fill="#000000"></path></svg>`;
 
+interface ISelectionParams extends IControlParams {
+    ignoreTerrain?: boolean;
+    onSelect?: boolean;
+    autoSelectionHide?: boolean
+}
+
 /**
  * Activate Selection
- * @class
- * @extends {Control}
- * @param {Object} [options] - Control options.
  * @param {boolean} [options.ignoreTerrain=false].
  * @param {function} options.onSelect - callback (extent) => {} where extent is selected extent array [minLon,minLat,maxLon,maxLat]
  * @param {boolean} [options.autoSelectionHide=false] - clear selection rectangle  after passing extent to callback
@@ -47,12 +48,15 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to:
  *       }
  *   });
  */
-class Selection extends Control {
-    constructor(options = {}) {
+export class Selection extends Control {
+    protected _selectorScene: SelectionScene;
+    protected _toggleBtn: ToggleButton;
+
+    constructor(options: ISelectionParams = {}) {
         super(options);
 
         this._selectorScene = new SelectionScene({
-            name: `selectionScene:${this._id}`,
+            name: `selectionScene:${this.__id}`,
             ignoreTerrain: options.ignoreTerrain,
             onSelect: options.onSelect,
             autoSelectionHide: options.autoSelectionHide
@@ -65,14 +69,14 @@ class Selection extends Control {
         });
     }
 
-    set ignoreTerrain(v) {
+    public set ignoreTerrain(v: boolean) {
         this._selectorScene.ignoreTerrain = v;
     }
 
-    oninit() {
-        this._toggleBtn.appendTo(this.renderer.div);
+    public override oninit() {
+        this._toggleBtn.appendTo(this.renderer!.div!);
 
-        this._toggleBtn.on("change", (isActive) => {
+        this._toggleBtn.events.on("change", (isActive: boolean) => {
             if (isActive) {
                 this.activate();
             } else {
@@ -83,13 +87,11 @@ class Selection extends Control {
         this._selectorScene.bindPlanet(this.planet);
     }
 
-    onactivate() {
-        this.renderer.addNode(this._selectorScene);
+    public override onactivate() {
+        this.renderer!.addNode(this._selectorScene);
     }
 
-    ondeactivate() {
-        this.renderer.removeNode(this._selectorScene);
+    override ondeactivate() {
+        this.renderer!.removeNode(this._selectorScene);
     }
 }
-
-export { Selection };