@openglobus/og 0.18.0 → 0.18.1

package/{src/utils/FontAtlas.ts → lib/js/utils/FontAtlas.js}

@@ -1,87 +1,24 @@
-import {Deferred} from '../Deferred';
-import {Rectangle} from '../Rectangle';
-import {TextureAtlas, TextureAtlasNode} from './TextureAtlas';
-import {Handler} from "../webgl/Handler";
-import {HTMLImageElementExt} from "./ImagesCacheManager";
-
+import { Deferred } from '../Deferred';
+import { Rectangle } from '../Rectangle';
+import { TextureAtlas, TextureAtlasNode } from './TextureAtlas';
 //@todo: get the value from shader module
 const MAX_SIZE = 11;
-
-interface IChar {
-    id: number;
-    char: string;
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    chnl: number;
-    index: number;
-    page: number;
-    xadvance: number;
-    xoffset: number;
-    yoffset: number;
-}
-
-interface IKerning {
-    first: number;
-    second: number;
-    amount: number;
-}
-
-export interface IFontParams {
-    common: {
-        scaleH: number;
-        scaleW: number;
-    };
-    info: {
-        size: number;
-    };
-    distanceField: {
-        distanceRange: number;
-    }
-    chars: IChar[];
-    kernings: IKerning[];
-    pages: string[];
-}
-
 class FontTextureAtlas extends TextureAtlas {
-    public width: number;
-    public height: number;
-    public gliphSize: number;
-    public distanceRange: number;
-    public override nodes: Map<number, FontTextureAtlasNode>;
-    public kernings: Record<number, Record<number, number>>;
-
-    constructor(width?: number, height?: number) {
+    constructor(width, height) {
         super(width, height);
         this.width = 0;
         this.height = 0;
         this.gliphSize = 0;
         this.distanceRange = 0;
-        this.nodes = new Map<number, FontTextureAtlasNode>();
+        this.nodes = new Map();
         this.kernings = {};
     }
-
-    public override get(key: number): FontTextureAtlasNode | undefined {
+    get(key) {
         return this.nodes.get(key);
     }
 }
-
-interface IMetrics extends IChar {
-    nChar: string;
-    nCode: number;
-    nWidth: number;
-    nHeight: number
-    nAdvance: number;
-    nXOffset: number;
-    nYOffset: number;
-}
-
 class FontTextureAtlasNode extends TextureAtlasNode {
-    public metrics: IMetrics;
-    public emptySize: number;
-
-    constructor(rect: Rectangle, texCoords: number[]) {
+    constructor(rect, texCoords) {
         super(rect, texCoords);
         this.emptySize = 1;
         this.metrics = {
@@ -97,7 +34,6 @@ class FontTextureAtlasNode extends TextureAtlasNode {
             xadvance: 0,
             xoffset: 0,
             yoffset: 0,
-
             nChar: "",
             nCode: 0,
             nWidth: 0,
@@ -105,22 +41,11 @@ class FontTextureAtlasNode extends TextureAtlasNode {
             nAdvance: 0,
             nXOffset: 0,
             nYOffset: 0
-        }
+        };
     }
 }
-
 class FontAtlas {
-    public atlasesArr: FontTextureAtlas[];
-    public samplerArr: Uint32Array;
-    public sdfParamsArr: Float32Array;
-    public catalogSrc: string;
-
-    protected atlasIndexes: Record<string, number>;
-    protected atlasIndexesDeferred: Record<string, Deferred<number>>;
-    protected tokenImageSize: number;
-    protected _handler: Handler | null;
-
-    constructor(catalogSrc?: string) {
+    constructor(catalogSrc) {
         this.atlasesArr = [];
         this.atlasIndexes = {};
         this.atlasIndexesDeferred = {};
@@ -130,84 +55,58 @@ class FontAtlas {
         this._handler = null;
         this.catalogSrc = catalogSrc || "./";
     }
-
-    public assignHandler(handler: Handler) {
+    assignHandler(handler) {
         this._handler = handler;
     }
-
-    public getFontIndex(face: string): Promise<number> {
+    getFontIndex(face) {
         let fullName = this.getFullIndex(face);
-
         // Try to load font from the directory
         if (!this.atlasIndexes[fullName]) {
             this.loadFont(fullName, this.catalogSrc, `${fullName}.json`);
         }
-
         if (!this.atlasIndexesDeferred[fullName]) {
-            this.atlasIndexesDeferred[fullName] = new Deferred<number>();
+            this.atlasIndexesDeferred[fullName] = new Deferred();
         }
         return this.atlasIndexesDeferred[fullName].promise;
     }
-
-    public getFullIndex(face: string): string {
+    getFullIndex(face) {
         return face.trim().toLowerCase();
     }
-
-    protected _applyFontDataToAtlas(atlas: FontTextureAtlas, data: IFontParams, index: number = 0) {
+    _applyFontDataToAtlas(atlas, data, index = 0) {
         let chars = data.chars;
-
         atlas.height = data.common.scaleH;
         atlas.width = data.common.scaleW;
         atlas.gliphSize = data.info.size;
         atlas.distanceRange = data.distanceField.distanceRange;
-
-        let w = atlas.width,
-            h = atlas.height,
-            s = atlas.gliphSize;
-
+        let w = atlas.width, h = atlas.height, s = atlas.gliphSize;
         this.sdfParamsArr[index * 4] = w;
         this.sdfParamsArr[index * 4 + 1] = h;
         this.sdfParamsArr[index * 4 + 2] = s;
         this.sdfParamsArr[index * 4 + 3] = atlas.distanceRange;
-
-        let idToChar: Record<number, string> = {};
-
+        let idToChar = {};
         for (let i = 0; i < chars.length; i++) {
             let ci = chars[i];
             let ti = ci.char;
-
             idToChar[ci.id] = ti;
-
             let r = new Rectangle(ci.x, ci.y, ci.x + ci.width, ci.y + ci.height);
-
             let tc = new Array(12);
-
             tc[0] = r.left / w;
             tc[1] = r.top / h;
-
             tc[2] = r.left / w;
             tc[3] = r.bottom / h;
-
             tc[4] = r.right / w;
             tc[5] = r.bottom / h;
-
             tc[6] = r.right / w;
             tc[7] = r.bottom / h;
-
             tc[8] = r.right / w;
             tc[9] = r.top / h;
-
             tc[10] = r.left / w;
             tc[11] = r.top / h;
-
             let taNode = new FontTextureAtlasNode(r, tc);
             let ciNorm = ci.char.normalize('NFKC');
             let ciCode = ciNorm.charCodeAt(0);
-
             //taNode.metrics = ci;
-
             let m = taNode.metrics;
-
             m.id = ci.id;
             m.char = ci.char;
             m.width = ci.width;
@@ -220,7 +119,6 @@ class FontAtlas {
             m.xadvance = ci.xadvance;
             m.xoffset = ci.xoffset;
             m.yoffset = ci.yoffset;
-
             m.nChar = ciNorm;
             m.nCode = ciCode;
             m.nWidth = taNode.metrics.width / s;
@@ -228,65 +126,45 @@ class FontAtlas {
             m.nAdvance = taNode.metrics.xadvance / s;
             m.nXOffset = taNode.metrics.xoffset / s;
             m.nYOffset = 1.0 - taNode.metrics.yoffset / s;
-
             taNode.emptySize = 1;
-
             atlas.nodes.set(ciNorm.charCodeAt(0), taNode);
         }
-
         atlas.kernings = {};
-
         for (let i = 0; i < data.kernings.length; i++) {
             let ki = data.kernings[i];
-
-            let first = ki.first,
-                second = ki.second;
-
+            let first = ki.first, second = ki.second;
             //let charFirst = idToChar[first],
             //    charSecond = idToChar[second];
-
             // if (!atlas.kernings[charFirst]) {
             //     atlas.kernings[charFirst] = {};
             // }
             //
             // atlas.kernings[charFirst][charSecond] = ki.amount / s;
-
             if (!atlas.kernings[first]) {
                 atlas.kernings[first] = {};
             }
-
             atlas.kernings[first][second] = ki.amount / s;
         }
     }
-
-    public initFont(faceName: string, dataJson: IFontParams, imageBase64: string) {
+    initFont(faceName, dataJson, imageBase64) {
         let index = this.atlasesArr.length;
         let fullName = this.getFullIndex(faceName);
-
         this.atlasIndexes[fullName] = index;
-
         let def = this.atlasIndexesDeferred[fullName];
         if (!def) {
-            def = this.atlasIndexesDeferred[fullName] = new Deferred<number>();
+            def = this.atlasIndexesDeferred[fullName] = new Deferred();
         }
-
         this.samplerArr[this.atlasesArr.length] = index;
-
         // TODO: FontTextureAtlas();
         let atlas = new FontTextureAtlas();
-
         atlas.height = 0;
         atlas.width = 0;
         atlas.gliphSize = 0;
         atlas.distanceRange = 0;
         atlas.kernings = {};
-
-        atlas.assignHandler(this._handler!);
-
+        atlas.assignHandler(this._handler);
         this.atlasesArr[index] = atlas;
-
         this._applyFontDataToAtlas(atlas, dataJson, index);
-
         let img = new Image();
         img.onload = () => {
             this._createTexture(atlas, img);
@@ -294,63 +172,49 @@ class FontAtlas {
         };
         img.src = imageBase64;
     }
-
-    protected _createTexture(atlas: FontTextureAtlas, img: HTMLImageElementExt) {
+    _createTexture(atlas, img) {
         atlas.createTexture(img);
     }
-
-    public loadFont(faceName: string, srcDir: string, atlasUrl: string) {
-
+    loadFont(faceName, srcDir, atlasUrl) {
         let index = this.atlasesArr.length;
         let fullName = this.getFullIndex(faceName);
-
         this.atlasIndexes[fullName] = index;
-
         let def = this.atlasIndexesDeferred[fullName];
         if (!def) {
-            def = this.atlasIndexesDeferred[fullName] = new Deferred<number>();
+            def = this.atlasIndexesDeferred[fullName] = new Deferred();
         }
-
         this.samplerArr[this.atlasesArr.length] = index;
-
         // TODO: FontTextureAtlas();
         let atlas = new FontTextureAtlas();
-
         atlas.height = 0;
         atlas.width = 0;
         atlas.gliphSize = 0;
         atlas.distanceRange = 0;
         atlas.kernings = {};
-
-        atlas.assignHandler(this._handler!);
+        atlas.assignHandler(this._handler);
         this.atlasesArr[index] = atlas;
-
         fetch(`${srcDir}/${atlasUrl}`)
-            .then((response: Response) => {
-                if (!response.ok) {
-                    throw Error(`Unable to load "${srcDir}/${atlasUrl}"`);
-                }
-                //return response.json(response);
-                return response.json();
-            })
-            .then((data: IFontParams) => {
-
-                this._applyFontDataToAtlas(atlas, data, index);
-
-                let img = new Image();
-                img.onload = () => {
-                    this._createTexture(atlas, img);
-                    def.resolve(index);
-                };
-
-                img.src = `${srcDir}/${data.pages[0]}`;
-                img.crossOrigin = "Anonymous";
-            })
+            .then((response) => {
+            if (!response.ok) {
+                throw Error(`Unable to load "${srcDir}/${atlasUrl}"`);
+            }
+            //return response.json(response);
+            return response.json();
+        })
+            .then((data) => {
+            this._applyFontDataToAtlas(atlas, data, index);
+            let img = new Image();
+            img.onload = () => {
+                this._createTexture(atlas, img);
+                def.resolve(index);
+            };
+            img.src = `${srcDir}/${data.pages[0]}`;
+            img.crossOrigin = "Anonymous";
+        })
             .catch(err => {
-                def.reject();
-                return {'status': "error", 'msg': err.toString()};
-            });
+            def.reject();
+            return { 'status': "error", 'msg': err.toString() };
+        });
     }
 }
-
-export {FontAtlas};
+export { FontAtlas };

package/lib/js/utils/GeoImageCreator.d.ts

@@ -0,0 +1,34 @@
+import { BaseGeoImage } from "../layer/BaseGeoImage";
+import { Framebuffer } from '../webgl/Framebuffer';
+import { LonLat } from '../LonLat';
+import { Planet } from "../scene/Planet";
+import { WebGLBufferExt, WebGLTextureExt } from "../webgl/Handler";
+export declare class GeoImageCreator {
+    MAX_FRAMES: number;
+    protected _gridSize: number;
+    protected _planet: Planet;
+    _framebuffer: Framebuffer | null;
+    protected _framebufferMercProj: Framebuffer | null;
+    _texCoordsBuffer: WebGLBufferExt | null;
+    _indexBuffer: WebGLBufferExt | null;
+    protected _currentFrame: number;
+    protected _queue: BaseGeoImage[];
+    protected _animate: BaseGeoImage[];
+    protected _quadTexCoordsBuffer: WebGLBufferExt | null;
+    protected _quadVertexBuffer: WebGLTextureExt | null;
+    constructor(planet: Planet, maxFrames?: number);
+    init(): void;
+    /**
+     * Creates geoImage corners coordinates grid buffer.
+     * @public
+     * @param{Array.<LonLat>} c - GeoImage corners coordinates.
+     * @param{boolean} [toMerc=false] - Transform to web mercator.
+     * @return{WebGLBuffer} Grid coordinates buffer.
+     */
+    createGridBuffer(c: LonLat[], toMerc?: boolean): [WebGLBufferExt, WebGLBufferExt];
+    frame(): void;
+    add(geoImage: BaseGeoImage): void;
+    remove(geoImage: BaseGeoImage): void;
+    protected _initBuffers(): void;
+    protected _initShaders(): void;
+}

package/{src/utils/GeoImageCreator.ts → lib/js/utils/GeoImageCreator.js}

@@ -1,29 +1,10 @@
 import * as utils from '../utils/shared';
-import {BaseGeoImage} from "../layer/BaseGeoImage";
-import {Framebuffer} from '../webgl/Framebuffer';
-import {LonLat} from '../LonLat';
-import {Program} from '../webgl/Program';
-import {Planet} from "../scene/Planet";
-import {doubleToTwoFloats2} from "../math/coder";
-import {WebGLBufferExt, WebGLTextureExt} from "../webgl/Handler";
-
+import { Framebuffer } from '../webgl/Framebuffer';
+import { LonLat } from '../LonLat';
+import { Program } from '../webgl/Program';
+import { doubleToTwoFloats2 } from "../math/coder";
 export class GeoImageCreator {
-
-    public MAX_FRAMES: number;
-
-    protected _gridSize: number;
-    protected _planet: Planet;
-    public _framebuffer: Framebuffer | null;
-    protected _framebufferMercProj: Framebuffer | null;
-    public _texCoordsBuffer: WebGLBufferExt | null;
-    public _indexBuffer: WebGLBufferExt | null;
-    protected _currentFrame: number;
-    protected _queue: BaseGeoImage[];
-    protected _animate: BaseGeoImage[];
-    protected _quadTexCoordsBuffer: WebGLBufferExt | null;
-    protected _quadVertexBuffer: WebGLTextureExt | null;
-
-    constructor(planet: Planet, maxFrames: number = 5) {
+    constructor(planet, maxFrames = 5) {
         this.MAX_FRAMES = maxFrames;
         this._gridSize = 64;
         this._planet = planet;
@@ -37,12 +18,10 @@ export class GeoImageCreator {
         this._quadTexCoordsBuffer = null;
         this._quadVertexBuffer = null;
     }
-
-    public init() {
+    init() {
         this._initShaders();
         this._initBuffers();
     }
-
     /**
      * Creates geoImage corners coordinates grid buffer.
      * @public
@@ -50,101 +29,77 @@ export class GeoImageCreator {
      * @param{boolean} [toMerc=false] - Transform to web mercator.
      * @return{WebGLBuffer} Grid coordinates buffer.
      */
-    public createGridBuffer(c: LonLat[], toMerc: boolean = false): [WebGLBufferExt, WebGLBufferExt] {
+    createGridBuffer(c, toMerc = false) {
         let gs = this._gridSize;
-
-        let v03 = new LonLat((c[3].lon - c[0].lon) / gs, (c[3].lat - c[0].lat) / gs),
-            v12 = new LonLat((c[2].lon - c[1].lon) / gs, (c[2].lat - c[1].lat) / gs),
-            v01 = new LonLat((c[1].lon - c[0].lon) / gs, (c[1].lat - c[0].lat) / gs),
-            v32 = new LonLat((c[2].lon - c[3].lon) / gs, (c[2].lat - c[3].lat) / gs);
-
-        const size = (gs + 1) * (gs + 1) * 2,
-            halfSize = size / 2;
-
-        let gridHigh = new Float32Array(size),
-            gridLow = new Float32Array(size);
-
+        let v03 = new LonLat((c[3].lon - c[0].lon) / gs, (c[3].lat - c[0].lat) / gs), v12 = new LonLat((c[2].lon - c[1].lon) / gs, (c[2].lat - c[1].lat) / gs), v01 = new LonLat((c[1].lon - c[0].lon) / gs, (c[1].lat - c[0].lat) / gs), v32 = new LonLat((c[2].lon - c[3].lon) / gs, (c[2].lat - c[3].lat) / gs);
+        const size = (gs + 1) * (gs + 1) * 2, halfSize = size / 2;
+        let gridHigh = new Float32Array(size), gridLow = new Float32Array(size);
         let lonLatArr = new Array(halfSize);
-
-        let kh = 0,
-            kl = 0,
-            k = 0;
-
+        let kh = 0, kl = 0, k = 0;
         let tempArr = new Float32Array(2);
-
         for (let i = 0; i <= gs; i++) {
-
-            let P03i = new LonLat(c[0].lon + i * v03.lon, c[0].lat + i * v03.lat),
-                P12i = new LonLat(c[1].lon + i * v12.lon, c[1].lat + i * v12.lat);
-
+            let P03i = new LonLat(c[0].lon + i * v03.lon, c[0].lat + i * v03.lat), P12i = new LonLat(c[1].lon + i * v12.lon, c[1].lat + i * v12.lat);
             for (let j = 0; j <= gs; j++) {
-                let P01j = new LonLat(c[0].lon + j * v01.lon, c[0].lat + j * v01.lat),
-                    P32j = new LonLat(c[3].lon + j * v32.lon, c[3].lat + j * v32.lat);
-                let xx = utils.getLinesIntersectionLonLat(P03i, P12i, P01j, P32j)!;
+                let P01j = new LonLat(c[0].lon + j * v01.lon, c[0].lat + j * v01.lat), P32j = new LonLat(c[3].lon + j * v32.lon, c[3].lat + j * v32.lat);
+                let xx = utils.getLinesIntersectionLonLat(P03i, P12i, P01j, P32j);
                 doubleToTwoFloats2(xx.lon, tempArr);
                 gridHigh[kh++] = tempArr[0];
                 gridLow[kl++] = tempArr[1];
                 doubleToTwoFloats2(xx.lat, tempArr);
                 gridHigh[kh++] = tempArr[0];
                 gridLow[kl++] = tempArr[1];
-
                 lonLatArr[k++] = xx;
             }
         }
-
         if (toMerc) {
             for (let i = 0; i < halfSize; i++) {
                 let c = lonLatArr[i].forwardMercator();
                 doubleToTwoFloats2(c.lon, tempArr);
                 gridHigh[i * 2] = tempArr[0];
                 gridLow[i * 2] = tempArr[1];
-
                 doubleToTwoFloats2(c.lat, tempArr);
                 gridHigh[i * 2 + 1] = tempArr[0];
                 gridLow[i * 2 + 1] = tempArr[1];
             }
         }
-
         return [
-            this._planet.renderer!.handler.createArrayBuffer(gridHigh, 2, halfSize),
-            this._planet.renderer!.handler.createArrayBuffer(gridLow, 2, halfSize)
+            this._planet.renderer.handler.createArrayBuffer(gridHigh, 2, halfSize),
+            this._planet.renderer.handler.createArrayBuffer(gridLow, 2, halfSize)
         ];
     }
-
-    public frame() {
+    frame() {
         let i = this.MAX_FRAMES;
         while (i-- && this._queue.length) {
-            const q = this._queue.shift()!;
+            const q = this._queue.shift();
             q._isRendering = false;
             q.rendering();
             q.events.dispatch(q.events.loadend);
         }
-
         i = this._animate.length;
         while (i--) {
             this._animate[i].rendering();
         }
     }
-
-    public add(geoImage: BaseGeoImage) {
+    add(geoImage) {
         if (!geoImage._isRendering) {
             geoImage._isRendering = true;
             if (geoImage._animate) {
                 this._animate.push(geoImage);
-            } else {
+            }
+            else {
                 this._queue.push(geoImage);
             }
         }
     }
-
-    public remove(geoImage: BaseGeoImage) {
+    remove(geoImage) {
         if (geoImage._isRendering) {
             geoImage._creationProceeding = false;
             geoImage._isRendering = false;
-            let arr: BaseGeoImage[];
+            let arr;
             if (geoImage._animate) {
                 arr = this._animate;
-            } else {
+            }
+            else {
                 arr = this._queue;
             }
             for (let i = 0; i < arr.length; i++) {
@@ -155,30 +110,20 @@ export class GeoImageCreator {
             }
         }
     }
-
-    protected _initBuffers() {
-
-        let h = this._planet.renderer!.handler!;
-
-        this._framebuffer = new Framebuffer(h, {width: 2, height: 2, useDepth: false});
+    _initBuffers() {
+        let h = this._planet.renderer.handler;
+        this._framebuffer = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
         this._framebuffer.init();
-
-        this._framebufferMercProj = new Framebuffer(h, {width: 2, height: 2, useDepth: false});
+        this._framebufferMercProj = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
         this._framebufferMercProj.init();
-
         let gs = Math.log2(this._gridSize);
-
         this._texCoordsBuffer = this._planet._textureCoordsBufferCache[gs];
-
         this._indexBuffer = this._planet._indexesCache[gs][gs][gs][gs][gs].buffer;
-
         this._quadTexCoordsBuffer = h.createArrayBuffer(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2, 4);
         this._quadVertexBuffer = h.createArrayBuffer(new Float32Array([-1, 1, 1, 1, -1, -1, 1, -1]), 2, 4);
     }
-
-    protected _initShaders() {
-
-        this._planet.renderer!.handler.addProgram(new Program("geoImageTransform", {
+    _initShaders() {
+        this._planet.renderer.handler.addProgram(new Program("geoImageTransform", {
             uniforms: {
                 sourceTexture: "sampler2d",
                 extentParamsHigh: "vec4",
@@ -190,8 +135,7 @@ export class GeoImageCreator {
                 cornersLow: "vec2",
                 texCoords: "vec2"
             },
-            vertexShader:
-                `attribute vec2 cornersHigh; 
+            vertexShader: `attribute vec2 cornersHigh; 
                      attribute vec2 cornersLow;
                       attribute vec2 texCoords; 
                       uniform vec4 extentParamsHigh; 
@@ -203,8 +147,7 @@ export class GeoImageCreator {
                           vec2 lowDiff = cornersLow - extentParamsLow.xy;                                        
                           gl_Position = vec4((-1.0 + (highDiff + lowDiff) * extentParamsHigh.zw) * vec2(1.0, -1.0), 0.0, 1.0); 
                       }`,
-            fragmentShader:
-                `precision highp float;
+            fragmentShader: `precision highp float;
                         uniform sampler2D sourceTexture;
                         uniform bool isFullExtent;
                         varying vec2 v_texCoords;
@@ -217,4 +160,4 @@ export class GeoImageCreator {
                         }`
         }));
     }
-}
+}

package/lib/js/utils/ImagesCacheManager.d.ts

@@ -0,0 +1,22 @@
+import { QueueArray } from '../QueueArray';
+export type HTMLImageElementExt = HTMLImageElement & {
+    __nodeIndex?: number;
+    atlasWidth?: number;
+    atlasHeight?: number;
+};
+export type ImagesCacheManagerCallback = (image: HTMLImageElementExt) => void;
+interface IImagesCacheRequest {
+    "src": string;
+    "success": ImagesCacheManagerCallback;
+}
+declare class ImagesCacheManager {
+    imagesCache: Record<string, HTMLImageElementExt>;
+    protected _counter: number;
+    protected _pendingsQueue: QueueArray<IImagesCacheRequest>;
+    protected _imageIndexCounter: number;
+    constructor();
+    load(src: string, success: ImagesCacheManagerCallback): void;
+    protected _exec(req: IImagesCacheRequest): void;
+    protected _dequeueRequest(): void;
+}
+export { ImagesCacheManager };