@openglobus/og 0.18.0 → 0.18.2

package/lib/js/layer/CanvasTiles.d.ts

@@ -0,0 +1,103 @@
+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;
+}
+type CanvasTilesEventsList = [
+    "load",
+    "loadend"
+];
+type CanvasTilesEventsType = EventsHandler<CanvasTilesEventsList> & EventsHandler<LayerEventsList>;
+/**
+ * Layer used to rendering each tile as a separate canvas object.
+ * @class
+ * @extends {Layer}
+ * @param {String} [name="noname"] - Layer name.
+ * @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 {DrawTileCallback} options.drawTile - Draw tile callback.
+ * @fires EventsHandler<CanvasTilesEventsList>#load
+ * @fires EventsHandler<CanvasTilesEventsList>#loadend
+ */
+declare class CanvasTiles extends Layer {
+    static MAX_REQUESTS: number;
+    static __requestsCounter: number;
+    events: CanvasTilesEventsType;
+    animated: boolean;
+    minNativeZoom: number;
+    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[];
+    /**
+     * Draw tile callback.
+     * @type {DrawTileCallback}
+     * @public
+     */
+    drawTile: DrawTileCallback;
+    protected _onLoadend_: EventCallback | null;
+    constructor(name: string | null, options: ICanvasTilesParams);
+    addTo(planet: Planet): void;
+    remove(): this;
+    _onLoadend(): void;
+    get instanceName(): string;
+    get isIdle(): boolean;
+    /**
+     * Abort loading tiles.
+     * @public
+     */
+    abortLoading(): void;
+    /**
+     * Sets layer visibility.
+     * @public
+     * @param {boolean} visibility - Layer visibility.
+     */
+    setVisibility(visibility: boolean): void;
+    /**
+     * Start to load tile material.
+     * @public
+     * @virtual
+     * @param {Material} material -
+     */
+    loadMaterial(material: Material): void;
+    /**
+     * Loads material image and apply it to the planet segment.
+     * @protected
+     * @param {Material} material - Loads material image.
+     */
+    protected _exec(material: Material): void;
+    protected _correctCounter(): void;
+    /**
+     * Abort exact material loading.
+     * @public
+     * @param {Material} material - Segment material.
+     */
+    abortMaterialLoading(material: Material): void;
+    protected _dequeueRequest(): void;
+    protected _whilePendings(): Material | null;
+    applyMaterial(material: Material): NumberArray4;
+    clearMaterial(material: Material): void;
+}
+export { CanvasTiles };

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

@@ -1,41 +1,17 @@
 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;
-}
-
-type CanvasTilesEventsList = [
-    "load",
-    "loadend"
-];
-
-type CanvasTilesEventsType = EventsHandler<CanvasTilesEventsList> & EventsHandler<LayerEventsList>;
-
-const CANVASTILES_EVENTS: CanvasTilesEventsList = [
+import { Layer } from "./Layer";
+const CANVASTILES_EVENTS = [
     /**
      * 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"
 ];
-
 /**
  * Layer used to rendering each tile as a separate canvas object.
  * @class
@@ -53,92 +29,44 @@ const CANVASTILES_EVENTS: CanvasTilesEventsList = [
  * @fires EventsHandler<CanvasTilesEventsList>#loadend
  */
 class CanvasTiles extends Layer {
-
-    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) {
+    constructor(name, options) {
         super(name, options);
-
         //@ts-ignore
         this.events = this.events.registerNames(CANVASTILES_EVENTS);
-
         this.animated = options.animated || false;
-
         this.minNativeZoom = options.minNativeZoom || 0;
         this.maxNativeZoom = options.maxNativeZoom || 100;
-
         this._counter = 0;
-
         this._pendingsQueue = []; // new og.QueueArray();
-
         this.drawTile = options.drawTile;
-
         this._onLoadend_ = null;
     }
-
-    public override addTo(planet: Planet) {
+    addTo(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);
     }
-
-    public override remove() {
+    remove() {
         this.events.off("loadend", this._onLoadend_);
         this._onLoadend_ = null;
         return super.remove();
     }
-
-    public _onLoadend() {
+    _onLoadend() {
         if (this._planet && this._planet._terrainCompletedActivated) {
             this._planet.events.dispatch(this._planet.events.layerloadend, this);
         }
     }
-
-    public override get instanceName(): string {
+    get instanceName() {
         return "CanvasTiles";
     }
-
-    public override get isIdle() {
+    get isIdle() {
         return super.isIdle && this._counter === 0;
     }
-
     /**
      * Abort loading tiles.
      * @public
      */
-    public override abortLoading() {
+    abortLoading() {
         //const q = this._pendingsQueue;
         // for (let i = q._shiftIndex + 1; i < q._popIndex + 1; i++) {
         //     if (q._array[i]) {
@@ -149,67 +77,63 @@ class CanvasTiles extends Layer {
         // for (let i = 0; i < q.length; i++) {
         //     this.abortMaterialLoading(q[i]);
         // }
-        this._pendingsQueue.forEach((qi: Material) => {
+        this._pendingsQueue.forEach((qi) => {
             this.abortMaterialLoading(qi);
-        })
+        });
         this._pendingsQueue = [];
     }
-
     /**
      * Sets layer visibility.
      * @public
      * @param {boolean} visibility - Layer visibility.
      */
-    public override setVisibility(visibility: boolean) {
+    setVisibility(visibility) {
         if (visibility !== this._visibility) {
             super.setVisibility(visibility);
-
             if (!visibility) {
                 this.abortLoading();
             }
         }
     }
-
     /**
      * Start to load tile material.
      * @public
      * @virtual
      * @param {Material} material -
      */
-    public override loadMaterial(material: Material) {
+    loadMaterial(material) {
         let seg = material.segment;
-
         if (this._isBaseLayer) {
             material.texture = seg._isNorth ? seg.planet.solidTextureOne : seg.planet.solidTextureTwo;
-        } else {
+        }
+        else {
             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) {
                 this._pendingsQueue.push(material);
-            } else {
+            }
+            else {
                 this._exec(material);
             }
         }
     }
-
     /**
      * Loads material image and apply it to the planet segment.
      * @protected
      * @param {Material} material - Loads material image.
      */
-    protected _exec(material: Material) {
+    _exec(material) {
         CanvasTiles.__requestsCounter++;
         this._counter++;
-        const e = this.events.load!;
+        const e = this.events.load;
         if (e.handlers.length) {
             this.events.dispatch(e, material);
         }
         requestAnimationFrame(() => {
-            this.drawTile(material, (canvas: HTMLCanvasElement | ImageBitmap | HTMLImageElement) => {
+            this.drawTile(material, (canvas) => {
                 this._counter--;
                 CanvasTiles.__requestsCounter--;
                 this._correctCounter();
@@ -220,18 +144,18 @@ class CanvasTiles extends Layer {
             });
         });
     }
-
-    protected _correctCounter() {
-        if (this._counter < 0) this._counter = 0;
-        if (CanvasTiles.__requestsCounter < 0) CanvasTiles.__requestsCounter = 0;
+    _correctCounter() {
+        if (this._counter < 0)
+            this._counter = 0;
+        if (CanvasTiles.__requestsCounter < 0)
+            CanvasTiles.__requestsCounter = 0;
     }
-
     /**
      * Abort exact material loading.
      * @public
      * @param {Material} material - Segment material.
      */
-    public override abortMaterialLoading(material: Material) {
+    abortMaterialLoading(material) {
         if (material.isLoading) {
             this._counter--;
             CanvasTiles.__requestsCounter--;
@@ -241,8 +165,7 @@ class CanvasTiles extends Layer {
         material.isLoading = false;
         material.isReady = false;
     }
-
-    protected _dequeueRequest() {
+    _dequeueRequest() {
         if (this._pendingsQueue.length) {
             if (CanvasTiles.__requestsCounter < CanvasTiles.MAX_REQUESTS) {
                 const pmat = this._whilePendings();
@@ -250,12 +173,12 @@ class CanvasTiles extends Layer {
                     this._exec(pmat);
                 }
             }
-        } else if (this._counter === 0 && this._planet && this._planet._terrainCompletedActivated) {
+        }
+        else if (this._counter === 0 && this._planet && this._planet._terrainCompletedActivated) {
             this.events.dispatch(this.events.loadend);
         }
     }
-
-    protected _whilePendings(): Material | null {
+    _whilePendings() {
         while (this._pendingsQueue.length) {
             const pmat = this._pendingsQueue.pop();
             if (pmat && pmat.segment && pmat.segment.node) {
@@ -267,38 +190,32 @@ class CanvasTiles extends Layer {
         }
         return null;
     }
-
-    public override applyMaterial(material: Material): NumberArray4 {
+    applyMaterial(material) {
         if (material.isReady) {
-
             // IMPORTANT!
             // Animated doesn't work withMaxNativeZoom
             // 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 as CanvasTiles).animated) {
+            if (material.layer.animated) {
                 requestAnimationFrame(() => {
                     this.drawTile(material, function (canvas) {
                         material.applyImage(canvas);
                     });
                 });
             }
-
             return material.texOffset;
-
-        } else if (material.segment.tileZoom < this.minNativeZoom) {
+        }
+        else if (material.segment.tileZoom < this.minNativeZoom) {
             material.textureNotExists();
-        } else {
-
+        }
+        else {
             let segment = material.segment;
-            let pn = segment.node,
-                parentTextureExists = false;
-            let maxNativeZoom = (material.layer as CanvasTiles).maxNativeZoom;
-
+            let pn = segment.node, parentTextureExists = false;
+            let maxNativeZoom = material.layer.maxNativeZoom;
             if (segment.passReady && !material.isLoading && segment.tileZoom <= maxNativeZoom) {
                 this.loadMaterial(material);
             }
-
             let mId = this._id;
             let psegm = material;
             while (pn.parentNode) {
@@ -309,44 +226,38 @@ class CanvasTiles extends Layer {
                     break;
                 }
             }
-
             if (segment.passReady) {
                 if (pn.segment.tileZoom === maxNativeZoom) {
                     if (segment.tileZoom > maxNativeZoom) {
                         material.textureNotExists();
                     }
-                } else if (pn.segment.tileZoom < maxNativeZoom) {
-
+                }
+                else if (pn.segment.tileZoom < maxNativeZoom) {
                     let pn = segment.node;
                     while (pn.segment.tileZoom > maxNativeZoom) {
-                        pn = pn.parentNode!;
+                        pn = pn.parentNode;
                     }
-
                     let pnm = pn.segment.materials[mId];
                     if (pnm) {
                         !pnm.isLoading && !pnm.isReady && this.loadMaterial(pnm);
-                    } else {
-                        pnm = pn.segment.materials[material.layer._id] = material.layer.createMaterial(
-                            pn.segment
-                        );
+                    }
+                    else {
+                        pnm = pn.segment.materials[material.layer._id] = material.layer.createMaterial(pn.segment);
                         this.loadMaterial(pnm);
                     }
                 }
             }
-
             if (parentTextureExists) {
-
                 //
                 // Animated doesn't work withMaxNativeZoom
                 //
-                if ((material.layer as CanvasTiles).animated) {
+                if (material.layer.animated) {
                     requestAnimationFrame(() => {
                         this.drawTile(material, function (canvas) {
                             material.applyImage(canvas);
                         });
                     });
                 }
-
                 material.appliedNodeId = pn.nodeId;
                 material.texture = psegm.texture;
                 let dZ2 = 1.0 / (2 << (segment.tileZoom - pn.segment.tileZoom - 1));
@@ -354,7 +265,8 @@ class CanvasTiles extends Layer {
                 material.texOffset[1] = segment.tileY * dZ2 - pn.segment.tileY;
                 material.texOffset[2] = dZ2;
                 material.texOffset[3] = dZ2;
-            } else {
+            }
+            else {
                 material.texture = segment.planet.transparentTexture;
                 material.texOffset[0] = 0.0;
                 material.texOffset[1] = 0.0;
@@ -362,33 +274,29 @@ class CanvasTiles extends Layer {
                 material.texOffset[3] = 1.0;
             }
         }
-
         return material.texOffset;
     }
-
-    public override clearMaterial(material: Material) {
+    clearMaterial(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;
             }
         }
-
         this.abortMaterialLoading(material);
         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;
         // }
     }
 }
-
-export {CanvasTiles};
+CanvasTiles.MAX_REQUESTS = 20;
+CanvasTiles.__requestsCounter = 0;
+export { CanvasTiles };

package/lib/js/layer/GeoImage.d.ts

@@ -0,0 +1,61 @@
+import { BaseGeoImage, IBaseGeoImageParams } from "./BaseGeoImage";
+import { Material } from "./Material";
+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.
+ * @class
+ * @extends {BaseGeoImage}
+ */
+declare class GeoImage extends BaseGeoImage {
+    /**
+     * Image object.
+     * @protected
+     * @type {HTMLImageElement | HTMLCanvasElement | ImageBitmap}
+     */
+    protected _image: HTMLImageElement | HTMLCanvasElement | ImageBitmap | null;
+    /**
+     * Image source url path.
+     * @protected
+     * @type {string}
+     */
+    protected _src: string | null;
+    protected _onLoad_: ((this: HTMLImageElement, ev: Event) => void) | null;
+    constructor(name: string | null, options?: IGeoImageParams);
+    get instanceName(): string;
+    abortLoading(): void;
+    /**
+     * Sets image source url path.
+     * @public
+     * @param {string} srs - Image url path.
+     */
+    setSrc(src: string): void;
+    /**
+     * Sets image object.
+     * @public
+     * @param {Image} image - Image object.
+     */
+    setImage(image: HTMLImageElement): void;
+    /**
+     * Creates source gl texture.
+     * @virtual
+     * @protected
+     */
+    protected _createSourceTexture(): void;
+    protected _onLoad(ev: Event): void;
+    protected _applyImage(img: HTMLImageElement | HTMLCanvasElement | ImageBitmap | null): void;
+    /**
+     * Loads planet segment material. In this case - GeoImage source image.
+     * @public
+     * @param {Material} material - GeoImage planet material.
+     */
+    loadMaterial(material: Material): void;
+    /**
+     * @public
+     * @param {Material} material - GeoImage material.
+     */
+    abortMaterialLoading(material: Material): void;
+}
+export { GeoImage };