@openglobus/og 0.17.2 → 0.18.0

package/src/Popup.ts

@@ -0,0 +1,228 @@
+import {CLOSE_ICON} from './ui/icons';
+import {createLonLat, stringTemplate} from "./utils/shared";
+import {EventsHandler} from "./Events";
+import {LonLat} from "./LonLat";
+import {Planet} from "./scene/Planet";
+import {NumberArray2, Vec2} from "./math/Vec2";
+import {NumberArray3, Vec3} from "./math/Vec3";
+import {View, IViewParams, ViewEventsList} from './ui/View';
+
+const TEMPLATE = `<div class="og-popup {className}">
+      <div class="og-popup-content-wrapper">
+        <div class="og-popup-content"></div>
+      </div>
+      <div class="og-popup-tip-container">
+        <div class="og-popup-tip"></div>
+      </div>
+      <div class="og-popup-toolbar">
+        <div class="og-popup-btn og-popup-close">${CLOSE_ICON}</div>
+      </div>
+      <div class="og-popup-title">{title}</div>
+    </div>`;
+
+interface IPopupParams extends IViewParams {
+    planet: Planet;
+    title?: string;
+    className?: string;
+    visibility?: boolean;
+    content?: string;
+    offset?: NumberArray2;
+    lonLat?: LonLat | NumberArray2 | NumberArray3;
+}
+
+type PopupEventsList = ["open", "close"];
+const POPUP_EVENTS: PopupEventsList = ["open", "close"];
+
+class Popup extends View<null> {
+
+    public override events: EventsHandler<PopupEventsList> & EventsHandler<ViewEventsList>;
+
+    public $content: HTMLElement | null;
+    public $tip: HTMLElement | null;
+    public $title: HTMLElement | null;
+
+    protected _content: string | HTMLElement | null;
+
+    protected _planet: Planet;
+
+    protected _offset: NumberArray2;
+
+    protected _lonLat: LonLat;
+
+    protected _cartPos: Vec3;
+
+    protected _visibility: boolean;
+
+    constructor(options: IPopupParams) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                title: options.title || ""
+            }),
+            classList: options.className ? [options.className] : [],
+            ...options
+        });
+
+        //@ts-ignore
+        this.events = this.events.registerNames(POPUP_EVENTS);
+
+        this._content = options.content || "";
+
+        this.$content = null;
+        this.$tip = null;
+        this.$title = null;
+
+        this._planet = options.planet;
+
+        this._offset = options.offset || [0, 0];
+
+        this._lonLat = createLonLat(options.lonLat);
+
+        this._cartPos = new Vec3();
+
+        this._visibility = options.visibility || false;
+
+        this.render();
+    }
+
+    _updatePosition() {
+        this.setCartesian3v(this._cartPos);
+    }
+
+    public setScreen(p: Vec2) {
+        if (this._planet) {
+            let r = this._planet.renderer!.handler.pixelRatio;
+            this.el!.style.transform =
+                `translate(${p.x / r - this.clientWidth * 0.5}px, ${p.y / r - this._planet.renderer!.handler.canvas!.clientHeight - this.$tip!.clientHeight}px)`;
+        }
+    }
+
+    public get clientWidth(): number {
+        return this.el ? this.el.clientWidth : 0;
+    }
+
+    public get clientHeight(): number {
+        return this.el ? this.el.clientHeight : 0;
+    }
+
+    public setOffset(x: number = 0, y: number = 0): this {
+        this._offset[0] = x;
+        this._offset[1] = y;
+        if (this.el) {
+            this.el.style.left = `${x}px`;
+            this.el.style.bottom = `${y}px`;
+        }
+        return this;
+    }
+
+    public override render(params?: any): this {
+        super.render(params);
+
+        this.$content = this.select(".og-popup-content")!;
+        this.$title = this.select(".og-popup-title")!;
+        this.$tip = this.select(".og-popup-tip-container")!;
+
+        this.setOffset(this._offset[0], this._offset[1]);
+        this.setContent(this._content);
+        this.setLonLat(this._lonLat);
+        this.setVisibility(this._visibility);
+        this.select(".og-popup-close")!.addEventListener("click", () => {
+            this.hide();
+        });
+
+        return this;
+    }
+
+    public setVisibility(visibility: boolean): this {
+        if (visibility) {
+            this.show();
+        } else {
+            this.hide();
+        }
+        return this;
+    }
+
+    public getContainer(): HTMLElement | null {
+        return this.$content;
+    }
+
+    public getToolbarContainer(): HTMLElement {
+        return this.select(".og-popup-toolbar")!;
+    }
+
+    public show(): this {
+        this._visibility = true;
+        if (this._planet) {
+            this._planet.events.on("draw", this._updatePosition, this);
+            this.appendTo(this._planet.renderer!.div as HTMLElement);
+            this.events.dispatch(this.events.open, this);
+        }
+        return this;
+    }
+
+    public hide(): this {
+        this._visibility = false;
+        if (this.el && this.el.parentNode) {
+            this._planet.events.off("draw", this._updatePosition);
+            this.el.parentNode.removeChild(this.el);
+            this.events.dispatch(this.events.close, this);
+        }
+        return this;
+    }
+
+    public setCartesian3v(cart: Vec3, height: number = 0): this {
+        this._cartPos = cart;
+
+        if (this._planet) {
+            let cam = this._planet.camera;
+            let f = this._planet.ellipsoid.equatorialSize + height,
+                g = cam._lonLat.height;
+
+            let look = cart.sub(cam.eye),
+                v = Math.sqrt((f + g) * (f + g) - f * f);
+
+            if (v > look.length() && cam.getForward().dot(look.normalize()) > 0.0) {
+                this.el!.style.display = "block";
+                this.setScreen(cam.project(cart));
+            } else {
+                this.el!.style.display = "none";
+            }
+        }
+        return this;
+    }
+
+    public setTitle(html: string) {
+        if (this.$title) {
+            this.$title.innerHTML = html;
+        }
+    }
+
+    public setLonLat(lonLat: LonLat) {
+        this._lonLat = lonLat;
+        if (this._planet) {
+            this.setCartesian3v(this._planet.ellipsoid.lonLatToCartesian(lonLat), lonLat.height);
+        }
+    }
+
+    public setContent(content?: string | HTMLElement | null) {
+        if (content) {
+            this.clear();
+            this._content = content;
+            if (this.$content) {
+                if (typeof content === "string") {
+                    this.$content.innerHTML = content;
+                } else {
+                    this.$content.appendChild(content);
+                }
+            }
+        }
+    }
+
+    public clear() {
+        this._content = null;
+        if (this.$content) {
+            this.$content.innerHTML = "";
+        }
+    }
+}
+
+export {Popup};

package/src/{og/QueueArray.js → QueueArray.ts}

@@ -1,75 +1,76 @@
-"use strict";
-
-class QueueArray {
-    /**
-     *
-     * @param {number} [size]
-     */
-    constructor(size = 2048) {
-        this._size = size;
-        this._array = new Array(this._size);
-        this._popIndex = parseInt(this._size * 0.5);
-        this._shiftIndex = this._popIndex;
-        this.length = 0;
-    }
-
-    reset() {
-        this._popIndex = parseInt(this._size * 0.5);
-        this._shiftIndex = this._popIndex;
-        this.length = 0;
-    }
-
-    clear() {
-        this._array.length = 0;
-        this._array = new Array(this._size);
-        this._popIndex = parseInt(this._size * 0.5);
-        this._shiftIndex = this._popIndex;
-        this.length = 0;
-    }
-
-    push(data) {
-        this.length++;
-        this._array[this._popIndex++] = data;
-    }
-
-    pop() {
-        if (this.length) {
-            this.length--;
-            var res = this._array[--this._popIndex];
-            this._array[this._popIndex] = null;
-            if (!this._array[this._popIndex - 1]) {
-                this._popIndex = parseInt(this._size * 0.5);
-                this._shiftIndex = this._popIndex;
-            }
-            return res;
-        }
-        return undefined;
-    }
-
-    unshift(data) {
-        this.length++;
-        this._array[--this._shiftIndex] = data;
-    }
-
-    shift() {
-        if (this.length) {
-            this.length--;
-            var res = this._array[this._shiftIndex];
-            this._array[this._shiftIndex++] = null;
-            if (!this._array[this._shiftIndex]) {
-                this._popIndex = parseInt(this._size * 0.5);
-                this._shiftIndex = this._popIndex;
-            }
-            return res;
-        }
-        return undefined;
-    }
-
-    each(callback) {
-        for (let i = this._shiftIndex; i < this._popIndex; i++) {
-            callback(this._array[i]);
-        }
-    }
-}
-
-export { QueueArray };
+class QueueArray<T> {
+    protected _size: number;
+    protected _array: T[];
+    protected _popIndex: number;
+    protected _shiftIndex: number;
+    public length: number;
+
+    constructor(size: number = 2048) {
+        this._size = size;
+        this._array = new Array(this._size);
+        this._popIndex = Math.floor(this._size * 0.5);
+        this._shiftIndex = this._popIndex;
+        this.length = 0;
+    }
+
+    public reset() {
+        this._popIndex = Math.floor(this._size * 0.5);
+        this._shiftIndex = this._popIndex;
+        this.length = 0;
+    }
+
+    public clear() {
+        this._array.length = 0;
+        this._array = new Array(this._size);
+        this._popIndex = Math.floor(this._size * 0.5);
+        this._shiftIndex = this._popIndex;
+        this.length = 0;
+    }
+
+    public push(data: T) {
+        this.length++;
+        this._array[this._popIndex++] = data;
+    }
+
+    public pop(): T | undefined {
+        if (this.length) {
+            this.length--;
+            let res = this._array[--this._popIndex]!;
+            // @ts-ignore
+            this._array[this._popIndex] = null;
+            if (!this._array[this._popIndex - 1]) {
+                this._popIndex = Math.floor(this._size * 0.5);
+                this._shiftIndex = this._popIndex;
+            }
+            return res;
+        }
+        return undefined;
+    }
+
+    public unshift(data: T) {
+        this.length++;
+        this._array[--this._shiftIndex] = data;
+    }
+
+    public shift(): T | undefined {
+        if (this.length) {
+            this.length--;
+            let res = this._array[this._shiftIndex]!;
+            // @ts-ignore
+            this._array[this._shiftIndex++] = null;
+            if (!this._array[this._shiftIndex]) {
+                this._popIndex = Math.floor(this._size * 0.5);
+                this._shiftIndex = this._popIndex;
+            }
+            return res;
+        }
+        return undefined;
+    }
+    public forEach(callback: (el: T) => void) {
+        for (let i = this._shiftIndex; i < this._popIndex; i++) {
+            callback(this._array[i]);
+        }
+    }
+}
+
+export {QueueArray};

package/src/{og/Rectangle.js → Rectangle.ts}

@@ -1,111 +1,115 @@
-"use strict";
-
-/**
- * 2D Rectangle class.
- * @class
- * @param {number} [left] - Left coordinate. 0 - default.
- * @param {number} [top] - Top coordinate. 0 - default.
- * @param {number} [right] - Right coordinate. 0 - default.
- * @param {number} [bottom] - Bottom coordinate. 0 - default.
- */
-class Rectangle {
-    /**
-     * @param {number} [left] - Left coordinate. 0 - default.
-     * @param {number} [top] - Top coordinate. 0 - default.
-     * @param {number} [right] - Right coordinate. 0 - default.
-     * @param {number} [bottom] - Bottom coordinate. 0 - default.
-     */
-    constructor(left = 0, top = 0, right = 0, bottom = 0) {
-        /**
-         * Left coordinate.
-         * @public
-         * @type {number}
-         */
-        this.left = left;
-
-        /**
-         * Right coordinate.
-         * @public
-         * @type {number}
-         */
-        this.right = right;
-
-        /**
-         * Top coordinate.
-         * @public
-         * @type {number}
-         */
-        this.top = top;
-
-        /**
-         * Top coordinate.
-         * @public
-         * @type {number}
-         */
-        this.bottom = bottom;
-    }
-
-    /**
-     * Clone rectangle object.
-     * @public
-     * @returns {Rectangle}
-     */
-    clone() {
-        return new Rectangle(this.left, this.top, this.right, this.bottom);
-    }
-
-    /**
-     * Returns rectangle width.
-     * @public
-     * @type {number}
-     */
-    getWidth() {
-        return Math.abs(this.right - this.left);
-    }
-
-    /**
-     * Returns rectangle height.
-     * @public
-     * @type {number}
-     */
-    getHeight() {
-        return Math.abs(this.bottom - this.top);
-    }
-
-    /**
-     * Returns rectangle area.
-     * @public
-     * @type {number}
-     */
-    getSquare() {
-        return this.getHeight() * this.getWidth();
-    }
-
-    /**
-     * Returns rectangle diagonal size.
-     * @public
-     * @type {number}
-     */
-    getDiagonal() {
-        var w = this.getWidth(),
-            h = this.getHeight();
-        return Math.sqrt(h * h + w * w);
-    }
-
-    /**
-     * Returns true if rectangle fits their size in width and height.
-     * @public
-     * @param {number} width - Width.
-     * @param {number} height - Height.
-     * @type {boolean}
-     */
-    fit(width, height) {
-        return this.getWidth() == width && this.getHeight() == height;
-    }
-
-    isInside(x, y) {
-        return x >= this.left && x <= this.right && y >= this.top && y <= this.bottom;
-    }
-}
-
-export { Rectangle };
+/**
+ * 2D Rectangle class.
+ * @class
+ * @param {number} [left] - Left coordinate. 0 - default.
+ * @param {number} [top] - Top coordinate. 0 - default.
+ * @param {number} [right] - Right coordinate. 0 - default.
+ * @param {number} [bottom] - Bottom coordinate. 0 - default.
+ */
+class Rectangle {
+    /**
+     * Left coordinate.
+     * @public
+     * @type {number}
+     */
+    public left: number;
+
+    /**
+     * Right coordinate.
+     * @public
+     * @type {number}
+     */
+    public right: number;
+
+    /**
+     * Top coordinate.
+     * @public
+     * @type {number}
+     */
+    public top: number;
+
+    /**
+     * Top coordinate.
+     * @public
+     * @type {number}
+     */
+    public bottom: number;
+
+    constructor(left: number = 0, top: number = 0, right: number = 0, bottom: number = 0) {
+        this.left = left;
+        this.right = right;
+        this.top = top;
+        this.bottom = bottom;
+    }
+
+    public set(left: number = 0, top: number = 0, right: number = 0, bottom: number = 0) {
+        this.left = left;
+        this.right = right;
+        this.top = top;
+        this.bottom = bottom;
+    }
+
+    /**
+     * Clone rectangle object.
+     * @public
+     * @returns {Rectangle}
+     */
+    public clone(): Rectangle {
+        return new Rectangle(this.left, this.top, this.right, this.bottom);
+    }
+
+    /**
+     * Returns rectangle width.
+     * @public
+     * @type {number}
+     */
+    public getWidth(): number {
+        return Math.abs(this.right - this.left);
+    }
+
+    /**
+     * Returns rectangle height.
+     * @public
+     * @type {number}
+     */
+    public getHeight(): number {
+        return Math.abs(this.bottom - this.top);
+    }
+
+    /**
+     * Returns rectangle area.
+     * @public
+     * @type {number}
+     */
+    public getSquare(): number {
+        return this.getHeight() * this.getWidth();
+    }
+
+    /**
+     * Returns rectangle diagonal size.
+     * @public
+     * @type {number}
+     */
+    public getDiagonal(): number {
+        let w = this.getWidth(),
+            h = this.getHeight();
+        return Math.sqrt(h * h + w * w);
+    }
+
+    /**
+     * Returns true if rectangle fits their size in width and height.
+     * @public
+     * @param {number} width - Width.
+     * @param {number} height - Height.
+     * @type {boolean}
+     */
+    public fit(width: number, height: number): boolean {
+        return this.getWidth() == width && this.getHeight() == height;
+    }
+
+    public isInside(x: number, y: number): boolean {
+        return x >= this.left && x <= this.right && y >= this.top && y <= this.bottom;
+    }
+}
+
+export {Rectangle};

package/src/Stack.ts

@@ -0,0 +1,58 @@
+class Node<T> {
+
+    public next: Node<T> | null;
+    public prev: Node<T> | null;
+    public data: T | null;
+
+    constructor() {
+        this.next = null;
+        this.prev = null;
+        this.data = null;
+    }
+}
+
+/**
+ * @class Stack<T>
+ * @param {number} [size=256] - Stack size
+ */
+class Stack<T> {
+
+    protected _current: Node<T>;
+    protected _head: Node<T>;
+
+    constructor(size: number = 256) {
+        this._current = new Node<T>();
+        this._head = this._current;
+
+        for (let i = 0; i < size; i++) {
+            let n = new Node<T>();
+            n.prev = this._current;
+            this._current.next = n;
+            this._current = n;
+        }
+        this._current = this._head;
+    }
+
+    public current(): Node<T> {
+        return this._current;
+    }
+
+    public push(data: T) {
+        this._current = this._current.next!;
+        this._current.data = data;
+    }
+
+    public pop(): T | null {
+        let res = this._current.data;
+        //this._current.data = null;
+        this._current = this._current.prev!;
+        return res;
+    }
+
+    public popPrev(): T | null {
+        this._current = this._current.prev!;
+        return this._current.data;
+    }
+}
+
+export {Stack};