@openglobus/og 0.17.2 → 0.18.0

package/src/{og/entity/Billboard.js → entity/Billboard.ts}

@@ -1,6 +1,14 @@
-"use strict";
-
-import { BaseBillboard } from "./BaseBillboard.js";
+import {BaseBillboard, IBaseBillboardParams} from "./BaseBillboard";
+import {BillboardHandler} from "./BillboardHandler";
+import {HTMLImageElementExt} from "../utils/ImagesCacheManager";
+
+export interface IBillboardParams extends IBaseBillboardParams {
+    src?: string;
+    image?: HTMLImageElement;
+    size?: [number, number];
+    width?: number;
+    height?: number;
+}
 
 /**
  * Represents basic quad billboard image.
@@ -8,7 +16,7 @@ import { BaseBillboard } from "./BaseBillboard.js";
  * @extends {BaseBillboard}
  * @param {Object} [options] - Options:
  * @param {Vec3|Array.<number>} [options.position] - Billboard spatial position.
- * @param {number} [options.rotation] - Screen angle rotaion.
+ * @param {number} [options.rotation] - Screen angle rotation.
  * @param {Vec4|string|Array.<number>} [options.color] - Billboard color.
  * @param {Vec3|Array.<number>} [options.alignedAxis] - Billboard aligned vector.
  * @param {Vec3|Array.<number>} [options.offset] - Billboard center screen offset.
@@ -20,39 +28,53 @@ import { BaseBillboard } from "./BaseBillboard.js";
  * @param {number} [options.scale] - Billboard scale.
  */
 class Billboard extends BaseBillboard {
-    constructor(options) {
+
+    public override _handler: BillboardHandler | null;
+
+    /**
+     * Image src.
+     * @protected
+     * @type {string}
+     */
+    protected _src: string | null;
+
+    /**
+     * Image object.
+     * @protected
+     * @type {Object}
+     */
+    protected _image: HTMLImageElement & { __nodeIndex?: number } | null;
+
+    protected _scale: number;
+
+    /**
+     * Billboard screen width.
+     * @public
+     * @type {number}
+     */
+    public _width: number;
+
+    /**
+     * Billboard screen height.
+     * @public
+     * @type {number}
+     */
+    public _height: number;
+
+    constructor(options: IBillboardParams = {}) {
+
         super(options);
 
-        options = options || {};
+        this._handler = null;
 
-        /**
-         * Image src.
-         * @protected
-         * @type {string}
-         */
         this._src = options.src || null;
 
-        /**
-         * Image object.
-         * @protected
-         * @type {Object}
-         */
         this._image = options.image || null;
 
         this._scale = 1.0;
 
-        /**
-         * Billboard screen width.
-         * @protected
-         * @type {number}
-         */
         this._width = options.width || (options.size ? options.size[0] : 30);
 
-        /**
-         * Billboard screen height.
-         * @protected
-         * @type {number}
-         */
         this._height = options.height || (options.size ? options.size[1] : 30);
     }
 
@@ -61,52 +83,60 @@ class Billboard extends BaseBillboard {
      * @public
      * @param {string} src - Image url.
      */
-    setSrc(src) {
+    public setSrc(src: string | null) {
         this._src = src;
-        var bh = this._handler;
-        if (bh && src) {
-            var rn = bh._entityCollection.renderNode;
-            if (rn) {
-                var ta = rn.renderer.billboardsTextureAtlas;
-                var that = this;
-                ta.loadImage(src, function (img) {
-                    if (ta.get(img.__nodeIndex)) {
+        let bh = this._handler;
+        if (bh && src && src.length) {
+            let rn = bh._entityCollection.renderNode;
+            if (rn && rn.renderer) {
+                let ta = rn.renderer.billboardsTextureAtlas;
+                let that = this;
+                ta.loadImage(src, function (img: HTMLImageElementExt) {
+                    if (img.__nodeIndex != undefined && ta.get(img.__nodeIndex)) {
                         that._image = img;
-                        bh.setTexCoordArr(
+                        bh!.setTexCoordArr(
                             that._handlerIndex,
-                            ta.get(that._image.__nodeIndex).texCoords
+                            ta.get(that._image!.__nodeIndex!)!.texCoords
                         );
                     } else {
                         ta.addImage(img);
                         ta.createTexture();
                         that._image = img;
-                        rn.updateBillboardsTexCoords();
+                        rn!.updateBillboardsTexCoords();
                     }
                 });
             }
         }
     }
 
+    public getSrc(): string | null {
+        return this._src;
+    }
+
     /**
      * Sets image object.
      * @public
      * @param {Object} image - JavaScript image object.
      */
-    setImage(image) {
+    public setImage(image: HTMLImageElement) {
         this.setSrc(image.src);
     }
 
+    public getImage(): HTMLImageElementExt | null {
+        return this._image;
+    }
+
     /**
      * Sets billboard screen size in pixels.
      * @public
      * @param {number} width - Billboard width.
      * @param {number} height - Billboard height.
      */
-    setSize(width, height) {
+    public setSize(width: number, height: number) {
         this._width = width;
         this._height = height;
         this._handler &&
-            this._handler.setSizeArr(this._handlerIndex, width * this._scale, height * this._scale);
+        this._handler.setSizeArr(this._handlerIndex, width * this._scale, height * this._scale);
     }
 
     /**
@@ -114,7 +144,7 @@ class Billboard extends BaseBillboard {
      * @public
      * @returns {Object}
      */
-    getSize() {
+    public getSize(): { width: number, height: number } {
         return {
             width: this._width,
             height: this._height
@@ -126,7 +156,7 @@ class Billboard extends BaseBillboard {
      * @public
      * @param {number} width - Width.
      */
-    setWidth(width) {
+    public setWidth(width: number) {
         this.setSize(width, this._height);
     }
 
@@ -135,7 +165,7 @@ class Billboard extends BaseBillboard {
      * @public
      * @returns {number}
      */
-    getWidth() {
+    public getWidth(): number {
         return this._width;
     }
 
@@ -144,7 +174,7 @@ class Billboard extends BaseBillboard {
      * @public
      * @param {number} height - Height.
      */
-    setHeight(height) {
+    public setHeight(height: number) {
         this.setSize(this._width, height);
     }
 
@@ -153,9 +183,9 @@ class Billboard extends BaseBillboard {
      * @public
      * @returns {number}
      */
-    getHeight() {
+    public getHeight(): number {
         return this._height;
     }
 }
 
-export { Billboard };
+export {Billboard};

package/src/entity/BillboardHandler.ts

@@ -0,0 +1,135 @@
+import {BaseBillboardHandler} from "./BaseBillboardHandler";
+import {Billboard} from "./Billboard";
+import {concatTypedArrays} from "../utils/shared";
+import {EntityCollection} from "./EntityCollection";
+
+/**
+ * @class BillboardHandler
+ */
+class BillboardHandler extends BaseBillboardHandler {
+
+    protected override _billboards: Billboard[];
+
+    constructor(props: EntityCollection) {
+        super(props);
+
+        this._billboards = [];
+    }
+
+    public override add(billboard: Billboard) {
+        if (billboard._handlerIndex == -1) {
+            super.add(billboard);
+
+            this._addBillboardToArrays(billboard);
+            this.refresh();
+            let src = billboard.getSrc() || (billboard.getImage() && billboard.getImage()!.src);
+            if (src) {
+                billboard.setSrc(src);
+            }
+        }
+    }
+
+    protected _addBillboardToArrays(billboard: Billboard) {
+        if (billboard.getVisibility()) {
+            this._vertexArr = concatTypedArrays(
+                this._vertexArr,
+                [-0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5]
+            ) as Float32Array;
+        } else {
+            this._vertexArr = concatTypedArrays(
+                this._vertexArr,
+                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+            ) as Float32Array;
+        }
+
+        this._texCoordArr = concatTypedArrays(
+            this._texCoordArr,
+            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+        ) as Float32Array;
+
+        let x = billboard._positionHigh.x,
+            y = billboard._positionHigh.y,
+            z = billboard._positionHigh.z,
+            w;
+        this._positionHighArr = concatTypedArrays(this._positionHighArr, [
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z
+        ]) as Float32Array;
+
+        x = billboard._positionLow.x;
+        y = billboard._positionLow.y;
+        z = billboard._positionLow.z;
+        this._positionLowArr = concatTypedArrays(this._positionLowArr, [
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z
+        ]) as Float32Array;
+
+        x = billboard._width;
+        y = billboard._height;
+        this._sizeArr = concatTypedArrays(this._sizeArr, [x, y, x, y, x, y, x, y, x, y, x, y]) as Float32Array;
+
+        x = billboard._offset.x;
+        y = billboard._offset.y;
+        z = billboard._offset.z;
+        this._offsetArr = concatTypedArrays(this._offsetArr, [
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z,
+            x, y, z
+        ]) as Float32Array;
+
+        x = billboard._color.x;
+        y = billboard._color.y;
+        z = billboard._color.z;
+        w = billboard._color.w;
+        this._rgbaArr = concatTypedArrays(this._rgbaArr, [
+            x, y, z, w,
+            x, y, z, w,
+            x, y, z, w,
+            x, y, z, w,
+            x, y, z, w,
+            x, y, z, w
+        ]) as Float32Array;
+
+        x = billboard._rotation;
+        this._rotationArr = concatTypedArrays(this._rotationArr, [x, x, x, x, x, x]) as Float32Array;
+
+        x = billboard._entity!._pickingColor.x / 255;
+        y = billboard._entity!._pickingColor.y / 255;
+        z = billboard._entity!._pickingColor.z / 255;
+        this._pickingColorArr = concatTypedArrays(this._pickingColorArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]) as Float32Array;
+    }
+
+    public get billboards(): Billboard[] {
+        return this._billboards
+    }
+
+    public override refreshTexCoordsArr() {
+        let bc = this._entityCollection;
+        if (bc && this._renderer) {
+            let ta = this._renderer.billboardsTextureAtlas;
+            for (let i = 0; i < this._billboards.length; i++) {
+                let bi = this._billboards[i];
+                let img = bi.getImage();
+                if (img) {
+                    let imageNode = ta.get(img.__nodeIndex!);
+                    if (imageNode) {
+                        this.setTexCoordArr(bi._handlerIndex, imageNode.texCoords);
+                    }
+                }
+            }
+        }
+    }
+}
+
+export {BillboardHandler};