@openglobus/og 0.17.2 → 0.18.0

package/src/{og/layer/CanvasTiles.js → layer/CanvasTiles.ts}

@@ -1,98 +1,136 @@
-"use strict";
+import * as quadTree from "../quadTree/quadTree";
+import {EventCallback, EventsHandler} from "../Events";
+import {ILayerParams, Layer, LayerEventsList} from "./Layer";
+import {Material} from "../layer/Material";
+import {NumberArray4} from "../math/Vec4";
+import {Planet} from "../scene/Planet";
+
+type ApplyImageFunc = (material: HTMLCanvasElement | ImageBitmap | HTMLImageElement) => void;
+type DrawTileCallback = (material: Material, applyImage: ApplyImageFunc) => void;
+
+export interface ICanvasTilesParams extends ILayerParams {
+    drawTile: DrawTileCallback;
+    animated?: boolean;
+    minNativeZoom?: number;
+    maxNativeZoom?: number;
+}
 
-import * as quadTree from "../quadTree/quadTree.js";
-import { Layer } from "./Layer.js";
+type CanvasTilesEventsList = [
+    "load",
+    "loadend"
+];
 
-/**
- * Maximum tiles per frame.
- * @const
- * @type {number}
- */
+type CanvasTilesEventsType = EventsHandler<CanvasTilesEventsList> & EventsHandler<LayerEventsList>;
 
-const EVENT_NAMES = [/**
- * Triggered when current tile image has loaded before rendereing.
- * @event og.layer.CanvasTiles#load
- */
+const CANVASTILES_EVENTS: CanvasTilesEventsList = [
+    /**
+     * Triggered when current tile image has loaded before rendering.
+     * @event og.layer.CanvasTiles#load
+     */
     "load",
 
     /**
      * Triggered when all tiles have loaded or loading has stopped.
      * @event og.layer.CanvasTiles#loadend
      */
-    "loadend"];
+    "loadend"
+];
 
 /**
  * Layer used to rendering each tile as a separate canvas object.
  * @class
  * @extends {Layer}
- * //TODO: make asynchronous handler.
  * @param {String} [name="noname"] - Layer name.
- * @param {Object} options:
+ * @param {ICanvasTilesParams} options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
  * @param {number} [options.minZoom=0] - Minimal visibility zoom level.
  * @param {number} [options.maxZoom=0] - Maximal visibility zoom level.
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - Base layer flag.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {layer.CanvasTiles~drawTileCallback} [options.drawTile] - Draw tile callback.
- * @fires og.layer.CanvasTiles#load
- * @fires og.layer.CanvasTiles#loadend
+ * @param {DrawTileCallback} options.drawTile - Draw tile callback.
+ * @fires EventsHandler<CanvasTilesEventsList>#load
+ * @fires EventsHandler<CanvasTilesEventsList>#loadend
  */
 class CanvasTiles extends Layer {
-    constructor(name, options = {}) {
+
+    static MAX_REQUESTS: number = 20;
+    static __requestsCounter: number = 0
+
+    public override events: CanvasTilesEventsType;
+
+    public animated: boolean;
+
+    public minNativeZoom: number;
+    public maxNativeZoom: number;
+
+    /**
+     * Current creating tiles counter.
+     * @protected
+     * @type {number}
+     */
+    protected _counter: number;
+
+    /**
+     * Tile pending queue that waiting for create.
+     * @protected
+     * @type {Material[]}
+     */
+    protected _pendingsQueue: Material[]; // new og.QueueArray();
+
+    /**
+     * Draw tile callback.
+     * @type {DrawTileCallback}
+     * @public
+     */
+    public drawTile: DrawTileCallback;
+
+    protected _onLoadend_: EventCallback | null;
+
+
+    constructor(name: string | null, options: ICanvasTilesParams) {
         super(name, options);
 
-        this.events.registerNames(EVENT_NAMES);
+        //@ts-ignore
+        this.events = this.events.registerNames(CANVASTILES_EVENTS);
 
         this.animated = options.animated || false;
 
         this.minNativeZoom = options.minNativeZoom || 0;
         this.maxNativeZoom = options.maxNativeZoom || 100;
-        /**
-         * Current creating tiles couter.
-         * @protected
-         * @type {number}
-         */
+
         this._counter = 0;
 
-        /**
-         * Tile pending queue that waiting for create.
-         * @protected
-         * @type {Array.<planetSegment.Material>}
-         */
         this._pendingsQueue = []; // new og.QueueArray();
 
-        /**
-         * Draw tile callback.
-         * @type {layer.CanvasTiles~drawTileCallback}
-         * @public
-         */
-        this.drawTile = options.drawTile || null;
+        this.drawTile = options.drawTile;
+
+        this._onLoadend_ = null;
     }
 
-    addTo(planet) {
+    public override addTo(planet: Planet) {
         this._onLoadend_ = this._onLoadend.bind(this);
-        this.events.on("loadend", this._onLoadend_, this);
+        this.events.on("loadend", this._onLoadend_!, this);
         return super.addTo(planet);
     }
 
-    remove() {
+    public override remove() {
         this.events.off("loadend", this._onLoadend_);
         this._onLoadend_ = null;
         return super.remove();
     }
 
-    _onLoadend() {
+    public _onLoadend() {
         if (this._planet && this._planet._terrainCompletedActivated) {
             this._planet.events.dispatch(this._planet.events.layerloadend, this);
         }
     }
 
-    get instanceName() {
+    public override get instanceName(): string {
         return "CanvasTiles";
     }
 
-    get isIdle() {
+    public override get isIdle() {
         return super.isIdle && this._counter === 0;
     }
 
@@ -100,15 +138,21 @@ class CanvasTiles extends Layer {
      * Abort loading tiles.
      * @public
      */
-    abortLoading() {
-        var q = this._pendingsQueue;
-        for (let i = q._shiftIndex + 1; i < q._popIndex + 1; i++) {
-            if (q._array[i]) {
-                this.abortMaterialLoading(q._array[i]);
-            }
-        }
-        this._pendingsQueue = [];
+    public override abortLoading() {
+        //const q = this._pendingsQueue;
+        // for (let i = q._shiftIndex + 1; i < q._popIndex + 1; i++) {
+        //     if (q._array[i]) {
+        //         this.abortMaterialLoading(q._array[i]);
+        //     }
+        // }
         // this._pendingsQueue.clear();
+        // for (let i = 0; i < q.length; i++) {
+        //     this.abortMaterialLoading(q[i]);
+        // }
+        this._pendingsQueue.forEach((qi: Material) => {
+            this.abortMaterialLoading(qi);
+        })
+        this._pendingsQueue = [];
     }
 
     /**
@@ -116,7 +160,7 @@ class CanvasTiles extends Layer {
      * @public
      * @param {boolean} visibility - Layer visibility.
      */
-    setVisibility(visibility) {
+    public override setVisibility(visibility: boolean) {
         if (visibility !== this._visibility) {
             super.setVisibility(visibility);
 
@@ -132,7 +176,7 @@ class CanvasTiles extends Layer {
      * @virtual
      * @param {Material} material -
      */
-    loadMaterial(material) {
+    public override loadMaterial(material: Material) {
         let seg = material.segment;
 
         if (this._isBaseLayer) {
@@ -141,7 +185,7 @@ class CanvasTiles extends Layer {
             material.texture = seg.planet.transparentTexture;
         }
 
-        if (this._planet.layerLock.isFree() || material.segment.tileZoom < 2) {
+        if (this._planet!.layerLock.isFree() || material.segment.tileZoom < 2) {
             material.isReady = false;
             material.isLoading = true;
             if (CanvasTiles.__requestsCounter >= CanvasTiles.MAX_REQUESTS && this._counter) {
@@ -157,41 +201,29 @@ class CanvasTiles extends Layer {
      * @protected
      * @param {Material} material - Loads material image.
      */
-    _exec(material) {
+    protected _exec(material: Material) {
         CanvasTiles.__requestsCounter++;
         this._counter++;
-        var that = this;
-        if (this.drawTile) {
-            /**
-             * Tile custom draw function.
-             * @callback og.layer.CanvasTiles~drawTileCallback
-             * @param {Material} material
-             * @param {applyCanvasCallback} applyCanvasCallback
-             */
-            var e = that.events.load;
-            if (e.handlers.length) {
-                that.events.dispatch(e, material);
-            }
-            requestAnimationFrame(() => {
-                that.drawTile(
-                    material,
-                    /**
-                     * Apply canvas.
-                     * @callback applyCanvasCallback
-                     * @param {Object} canvas -
-                     */
-                    function (canvas) {
-                        that._counter--;
-                        CanvasTiles.__requestsCounter--;
-                        if (material.isLoading) {
-                            material.applyImage(canvas);
-                        }
-                        that._dequeueRequest();
-                    });
-            });
-        } else {
-            material.textureNotExists();
+        const e = this.events.load!;
+        if (e.handlers.length) {
+            this.events.dispatch(e, material);
         }
+        requestAnimationFrame(() => {
+            this.drawTile(material, (canvas: HTMLCanvasElement | ImageBitmap | HTMLImageElement) => {
+                this._counter--;
+                CanvasTiles.__requestsCounter--;
+                this._correctCounter();
+                if (material.isLoading) {
+                    material.applyImage(canvas);
+                }
+                this._dequeueRequest();
+            });
+        });
+    }
+
+    protected _correctCounter() {
+        if (this._counter < 0) this._counter = 0;
+        if (CanvasTiles.__requestsCounter < 0) CanvasTiles.__requestsCounter = 0;
     }
 
     /**
@@ -199,21 +231,21 @@ class CanvasTiles extends Layer {
      * @public
      * @param {Material} material - Segment material.
      */
-    abortMaterialLoading(material) {
-        if (material.isLoading && material.image) {
-            material.image.src = "";
+    public override abortMaterialLoading(material: Material) {
+        if (material.isLoading) {
             this._counter--;
             CanvasTiles.__requestsCounter--;
+            this._correctCounter();
             this._dequeueRequest();
         }
         material.isLoading = false;
         material.isReady = false;
     }
 
-    _dequeueRequest() {
+    protected _dequeueRequest() {
         if (this._pendingsQueue.length) {
             if (CanvasTiles.__requestsCounter < CanvasTiles.MAX_REQUESTS) {
-                var pmat = this._whilePendings();
+                const pmat = this._whilePendings();
                 if (pmat) {
                     this._exec(pmat);
                 }
@@ -223,10 +255,10 @@ class CanvasTiles extends Layer {
         }
     }
 
-    _whilePendings() {
+    protected _whilePendings(): Material | null {
         while (this._pendingsQueue.length) {
-            var pmat = this._pendingsQueue.pop();
-            if (pmat.segment.node) {
+            const pmat = this._pendingsQueue.pop();
+            if (pmat && pmat.segment && pmat.segment.node) {
                 if (pmat.segment.initialized && pmat.segment.node.getState() === quadTree.RENDERING) {
                     return pmat;
                 }
@@ -236,7 +268,7 @@ class CanvasTiles extends Layer {
         return null;
     }
 
-    applyMaterial(material) {
+    public override applyMaterial(material: Material): NumberArray4 {
         if (material.isReady) {
 
             // IMPORTANT!
@@ -244,7 +276,7 @@ class CanvasTiles extends Layer {
             // It could be fixed with call drawTile method only for parent
             // material (which is rendered on the current segment material),
             // just for one renderer frame
-            if (material.layer.animated) {
+            if ((material.layer as CanvasTiles).animated) {
                 requestAnimationFrame(() => {
                     this.drawTile(material, function (canvas) {
                         material.applyImage(canvas);
@@ -261,7 +293,7 @@ class CanvasTiles extends Layer {
             let segment = material.segment;
             let pn = segment.node,
                 parentTextureExists = false;
-            let maxNativeZoom = material.layer.maxNativeZoom;
+            let maxNativeZoom = (material.layer as CanvasTiles).maxNativeZoom;
 
             if (segment.passReady && !material.isLoading && segment.tileZoom <= maxNativeZoom) {
                 this.loadMaterial(material);
@@ -287,7 +319,7 @@ class CanvasTiles extends Layer {
 
                     let pn = segment.node;
                     while (pn.segment.tileZoom > maxNativeZoom) {
-                        pn = pn.parentNode;
+                        pn = pn.parentNode!;
                     }
 
                     let pnm = pn.segment.materials[mId];
@@ -307,7 +339,7 @@ class CanvasTiles extends Layer {
                 //
                 // Animated doesn't work withMaxNativeZoom
                 //
-                if (material.layer.animated) {
+                if ((material.layer as CanvasTiles).animated) {
                     requestAnimationFrame(() => {
                         this.drawTile(material, function (canvas) {
                             material.applyImage(canvas);
@@ -334,11 +366,11 @@ class CanvasTiles extends Layer {
         return material.texOffset;
     }
 
-    clearMaterial(material) {
+    public override clearMaterial(material: Material) {
         if (material.isReady) {
             material.isReady = false;
             if (material.textureExists && material.texture && !material.texture.default) {
-                material.segment.handler.gl.deleteTexture(material.texture);
+                material.segment.handler.gl!.deleteTexture(material.texture);
                 material.texture = null;
             }
         }
@@ -347,14 +379,16 @@ class CanvasTiles extends Layer {
         material.isLoading = false;
         material.textureExists = false;
 
+        //@ts-ignore
         material.layer = null;
+        //@ts-ignore
         material.segment = null;
 
-        if (material.image) {
-            material.image.src = "";
-            material.image = null;
-        }
+        // if (material.image) {
+        //     material.image.src = "";
+        //     material.image = null;
+        // }
     }
 }
 
-export { CanvasTiles };
+export {CanvasTiles};

package/src/{og/layer/GeoImage.js → layer/GeoImage.ts}

@@ -1,47 +1,58 @@
-"use strict";
+import {nextHighestPowerOfTwo} from "../math";
+import {BaseGeoImage, IBaseGeoImageParams} from "./BaseGeoImage";
+import {isImageLoaded} from "../utils/shared";
+import {Material} from "./Material";
 
-import { nextHighestPowerOfTwo } from "../math.js";
-import { BaseGeoImage } from "./BaseGeoImage.js";
-import { isImageLoaded } from "../utils/shared.js";
+interface IGeoImageParams extends IBaseGeoImageParams {
+    image?: HTMLImageElement | HTMLCanvasElement | ImageBitmap;
+    src?: string;
+}
 
 /**
- * Used to load and display a single image over specific corner coordinates on the globe, implements og.layer.BaseGeoImage interface.
+ * Used to load and display a single image over specific corner coordinates on the globe.
  * @class
  * @extends {BaseGeoImage}
  */
 class GeoImage extends BaseGeoImage {
-    constructor(name, options) {
-        super(name, options);
+    /**
+     * Image object.
+     * @protected
+     * @type {HTMLImageElement | HTMLCanvasElement | ImageBitmap}
+     */
+    protected _image: HTMLImageElement | HTMLCanvasElement | ImageBitmap | null;
 
-        /**
-         * Image object.
-         * @private
-         * @type {Image}
-         */
-        this._image = options.image || null;
+    /**
+     * Image source url path.
+     * @protected
+     * @type {string}
+     */
+    protected _src: string | null;
+
+    protected _onLoad_: ((this: HTMLImageElement, ev: Event) => void) | null;
 
-        /**
-         * Image source url path.
-         * @private
-         * @type {String}
-         */
+    constructor(name: string | null, options: IGeoImageParams = {}) {
+        super(name, options);
+        this._image = options.image || null;
         this._src = options.src || null;
+        this._onLoad_ = null;
     }
 
-    get instanceName() {
+    public override get instanceName(): string {
         return "GeoImage";
     }
 
-    abortLoading() {
-        this._image.src = "";
+    public override abortLoading() {
+        if (this._image instanceof HTMLImageElement) {
+            this._image.src = "";
+        }
     }
 
     /**
      * Sets image source url path.
      * @public
-     * @param {String} srs - Image url path.
+     * @param {string} srs - Image url path.
      */
-    setSrc(src) {
+    public setSrc(src: string) {
         this._planet && this._planet._geoImageCreator.remove(this);
         this._src = src;
         this._sourceReady = false;
@@ -57,7 +68,7 @@ class GeoImage extends BaseGeoImage {
      * @public
      * @param {Image} image - Image object.
      */
-    setImage(image) {
+    public setImage(image: HTMLImageElement) {
         this._planet && this._planet._geoImageCreator.remove(this);
         this._sourceCreated = false;
         this._sourceReady = false;
@@ -76,53 +87,50 @@ class GeoImage extends BaseGeoImage {
      * @virtual
      * @protected
      */
-    _createSourceTexture() {
-        if (!this._sourceCreated) {
-            this._sourceTexture = this._planet.renderer.handler.createTexture_l(this._image);
+    protected override _createSourceTexture() {
+        if (!this._sourceCreated && this._image) {
+            this._sourceTexture = this._planet!.renderer!.handler.createTexture_l(this._image);
             this._sourceCreated = true;
         }
     }
 
-    /**
-     * @private
-     * @param {Image} [img]
-     */
-    _onLoad() {
+    protected _onLoad(ev: Event) {
         this._applyImage(this._image);
-        this._image.removeEventListener("load", this._onLoad_);
-        this._onLoad_ = undefined;
+        if (this._image instanceof HTMLImageElement) {
+            this._image.removeEventListener("load", this._onLoad_!);
+        }
+        this._onLoad_ = null;
     }
 
-    /**
-     * @private
-     * @param {Image} [img]
-     */
-    _applyImage(img) {
+    protected _applyImage(img: HTMLImageElement | HTMLCanvasElement | ImageBitmap | null) {
         if (img) {
             this._frameWidth = nextHighestPowerOfTwo(img.width * 2, 4096);
             this._frameHeight = nextHighestPowerOfTwo(img.height * 3, 4096);
             this._sourceReady = true;
-            this._planet._geoImageCreator.add(this);
+            if (this._planet) {
+                this._planet._geoImageCreator.add(this);
+            }
         }
     }
 
 
     /**
      * Loads planet segment material. In this case - GeoImage source image.
-     * @virtual
      * @public
      * @param {Material} material - GeoImage planet material.
      */
-    loadMaterial(material) {
+    public override loadMaterial(material: Material) {
         material.isLoading = true;
         this._creationProceeding = true;
         if (!this._sourceReady && this._src) {
             if (this._image) {
-                if (isImageLoaded(this._image)) {
-                    this._applyImage(this._image);
-                } else {
-                    this._onLoad_ = this._onLoad.bind(this);
-                    this._image.addEventListener("load", this._onLoad_);
+                if (this._image instanceof HTMLImageElement) {
+                    if (isImageLoaded(this._image)) {
+                        this._applyImage(this._image);
+                    } else {
+                        this._onLoad_ = this._onLoad.bind(this);
+                        this._image.addEventListener("load", this._onLoad_);
+                    }
                 }
             } else {
                 this._image = new Image();
@@ -130,21 +138,23 @@ class GeoImage extends BaseGeoImage {
                 this._image.addEventListener("load", this._onLoad_);
                 this._image.src = this._src;
             }
-        } else {
+        } else if (this._planet) {
             this._planet._geoImageCreator.add(this);
         }
     }
 
     /**
-     * @virtual
+     * @public
      * @param {Material} material - GeoImage material.
      */
-    abortMaterialLoading(material) {
-        this._image && (this._image.src = "");
+    public override abortMaterialLoading(material: Material) {
+        if (this._image && this._image instanceof HTMLImageElement) {
+            this._image.src = "";
+        }
         this._creationProceeding = false;
         material.isLoading = false;
         material.isReady = false;
     }
 }
 
-export { GeoImage };
+export {GeoImage};

package/src/layer/GeoTexture2d.ts

@@ -0,0 +1,56 @@
+import {BaseGeoImage, IBaseGeoImageParams} from './BaseGeoImage';
+import {Material} from "../layer/Material";
+import {nextHighestPowerOfTwo} from '../math';
+import {WebGLTextureExt} from "../webgl/Handler";
+
+interface IGeoTexture2dParams extends IBaseGeoImageParams {
+    texture?: WebGLTextureExt;
+    frameWidth?: number;
+    frameHeight?: number;
+}
+
+class GeoTexture2d extends BaseGeoImage {
+    constructor(name: string | null, options: IGeoTexture2dParams = {}) {
+        super(name, options);
+
+        this._sourceTexture = options.texture || null;
+
+        if (options.texture) {
+            this._sourceReady = true;
+            this._sourceCreated = true;
+        }
+
+        this._frameWidth = options.frameWidth != undefined ? nextHighestPowerOfTwo(options.frameWidth!) : 256;
+        this._frameHeight = options.frameHeight != undefined ? nextHighestPowerOfTwo(options.frameHeight!) : 256;
+
+        this._animate = true;
+    }
+
+    public override get instanceName(): string {
+        return "GeoTexture2d";
+    }
+
+    public override loadMaterial(material: Material) {
+        this._planet!._geoImageCreator.add(this);
+    }
+
+    public bindTexture(texture: WebGLTextureExt) {
+        this._sourceReady = true;
+        this._sourceCreated = true;
+        this._sourceTexture = texture;
+    }
+
+    public setSize(width: number, height: number) {
+        this._frameWidth = width;
+        this._frameHeight = height;
+        this._frameCreated = false;
+    }
+
+    public override abortMaterialLoading(material: Material) {
+        this._creationProceeding = false;
+        material.isLoading = false;
+        material.isReady = false;
+    }
+}
+
+export {GeoTexture2d};