@openglobus/og 0.11.1 → 0.11.6

package/src/og/layer/BaseGeoImage.js

@@ -2,17 +2,17 @@
  * @module og/layer/BaseGeoImage
  */
 
-'use strict';
+"use strict";
 
-import * as mercator from '../mercator.js';
-import { Extent } from '../Extent.js';
-import { Layer } from './Layer.js';
-import { LonLat } from '../LonLat.js';
+import * as mercator from "../mercator.js";
+import { Extent } from "../Extent.js";
+import { Layer } from "./Layer.js";
+import { LonLat } from "../LonLat.js";
 
 /**
  * BaseGeoImage layer represents square imagery layer that could be an static image, or animated video or webgl buffer object displayed on the globe.
  * @class
- * @extends {og.Layer}
+ * @extends {Layer}
  */
 class BaseGeoImage extends Layer {
     constructor(name, options) {
@@ -54,28 +54,37 @@ class BaseGeoImage extends Layer {
     /**
      * Gets corners coordinates.
      * @public
-     * @return {Array.<og.LonLat,og.LonLat,og.LonLat,og.LonLat>} -
+     * @return {Array.<LonLat>} - (exactly 4 entries)
      */
     getCornersLonLat() {
         var c = this._cornersWgs84;
-        return [new LonLat(c[0].lon, c[0].lat), new LonLat(c[1].lon, c[1].lat),
-        new LonLat(c[2].lon, c[2].lat), new LonLat(c[3].lon, c[3].lat)];
+        return [
+            new LonLat(c[0].lon, c[0].lat),
+            new LonLat(c[1].lon, c[1].lat),
+            new LonLat(c[2].lon, c[2].lat),
+            new LonLat(c[3].lon, c[3].lat)
+        ];
     }
 
     /**
      * Gets corners coordinates.
      * @public
-     * @return {Array.<Array<number,number,number>>} -
+     * @return {Array.<Array<number>>} - (exactly 3 entries)
      */
     getCorners() {
         var c = this._cornersWgs84;
-        return [[c[0].lon, c[0].lat], [c[1].lon, c[1].lat], [c[2].lon, c[2].lat], [c[3].lon, c[3].lat]];
+        return [
+            [c[0].lon, c[0].lat],
+            [c[1].lon, c[1].lat],
+            [c[2].lon, c[2].lat],
+            [c[3].lon, c[3].lat]
+        ];
     }
 
     /**
      * Sets geoImage geographical corners coordinates.
      * @public
-     * @param {Array.<Array.<number,number,number>>} corners - GeoImage corners coordinates. Where first coordinate
+     * @param {Array.<Array.<number>>} corners - GeoImage corners coordinates. Where first coordinate (exactly 3 entries)
      * coincedents to the left top image corner, secont to the right top image corner, third to the right bottom
      * and fourth - left bottom image corner.
      */
@@ -86,13 +95,18 @@ class BaseGeoImage extends Layer {
     /**
      * Sets geoImage geographical corners coordinates.
      * @public
-     * @param {Array.<og.LonLat, og.LonLat, og.LonLat, og.LonLat>} corners - GeoImage corners coordinates. Where first coordinate
+     * @param {Array.<LonLat>} corners - GeoImage corners coordinates. Where first coordinate
      * coincedents to the left top image corner, secont to the right top image corner, third to the right bottom
-     * and fourth - left bottom image corner.
+     * and fourth - left bottom image corner. (exactly 4 entries)
      */
     setCornersLonLat(corners) {
         this._refreshFrame = true;
-        this._cornersWgs84 = [corners[0].clone(), corners[1].clone(), corners[2].clone(), corners[3].clone()] || [0, 0, 0, 0];
+        this._cornersWgs84 = [
+            corners[0].clone(),
+            corners[1].clone(),
+            corners[2].clone(),
+            corners[3].clone()
+        ] || [0, 0, 0, 0];
 
         for (var i = 0; i < this._cornersWgs84.length; i++) {
             if (this._cornersWgs84[i].lat >= 89.9) {
@@ -105,8 +119,7 @@ class BaseGeoImage extends Layer {
         this._extent.setByCoordinates(this._cornersWgs84);
 
         var me = this._extent;
-        if (me.southWest.lat > mercator.MAX_LAT ||
-            me.northEast.lat < mercator.MIN_LAT) {
+        if (me.southWest.lat > mercator.MAX_LAT || me.northEast.lat < mercator.MIN_LAT) {
             this._projType = 0;
             this.rendering = this._renderingProjType0;
         } else {
@@ -126,15 +139,32 @@ class BaseGeoImage extends Layer {
     _createFrame() {
         this._extentWgs84 = this._extent.clone();
 
-        this._cornersMerc = [this._cornersWgs84[0].forwardMercatorEPS01(), this._cornersWgs84[1].forwardMercatorEPS01(),
-        this._cornersWgs84[2].forwardMercatorEPS01(), this._cornersWgs84[3].forwardMercatorEPS01()];
+        this._cornersMerc = [
+            this._cornersWgs84[0].forwardMercatorEPS01(),
+            this._cornersWgs84[1].forwardMercatorEPS01(),
+            this._cornersWgs84[2].forwardMercatorEPS01(),
+            this._cornersWgs84[3].forwardMercatorEPS01()
+        ];
 
-        this._extentMerc = new Extent(this._extentWgs84.southWest.forwardMercatorEPS01(), this._extentWgs84.northEast.forwardMercatorEPS01());
+        this._extentMerc = new Extent(
+            this._extentWgs84.southWest.forwardMercatorEPS01(),
+            this._extentWgs84.northEast.forwardMercatorEPS01()
+        );
 
         if (this._projType === 0) {
-            this._extentWgs84Params = [this._extentWgs84.southWest.lon, this._extentWgs84.southWest.lat, 2.0 / this._extentWgs84.getWidth(), 2.0 / this._extentWgs84.getHeight()];
+            this._extentWgs84Params = [
+                this._extentWgs84.southWest.lon,
+                this._extentWgs84.southWest.lat,
+                2.0 / this._extentWgs84.getWidth(),
+                2.0 / this._extentWgs84.getHeight()
+            ];
         } else {
-            this._extentMercParams = [this._extentMerc.southWest.lon, this._extentMerc.southWest.lat, 2.0 / this._extentMerc.getWidth(), 2.0 / this._extentMerc.getHeight()];
+            this._extentMercParams = [
+                this._extentMerc.southWest.lon,
+                this._extentMerc.southWest.lat,
+                2.0 / this._extentMerc.getWidth(),
+                2.0 / this._extentMerc.getHeight()
+            ];
         }
 
         // creates material frame textures
@@ -146,7 +176,10 @@ class BaseGeoImage extends Layer {
             gl.deleteTexture(this._materialTexture);
             this._materialTexture = h.createEmptyTexture_l(this._frameWidth, this._frameHeight);
 
-            this._gridBuffer = this._planet._geoImageCreator.createGridBuffer(this._cornersWgs84, this._projType);
+            this._gridBuffer = this._planet._geoImageCreator.createGridBuffer(
+                this._cornersWgs84,
+                this._projType
+            );
 
             this._refreshFrame = false;
         }
@@ -154,7 +187,7 @@ class BaseGeoImage extends Layer {
 
     /**
      * @virtual
-     * @param {og.planetSegment.Material} material - GeoImage material.
+     * @param {Material} material - GeoImage material.
      */
     abortMaterialLoading(material) {
         this._creationProceeding = false;
@@ -200,7 +233,6 @@ class BaseGeoImage extends Layer {
      */
     setVisibility(visibility) {
         if (visibility !== this._visibility) {
-
             super.setVisibility(visibility);
 
             // remove from creator
@@ -215,7 +247,7 @@ class BaseGeoImage extends Layer {
     /**
      * @virtual
      * @protected
-     * @param {og.planetSegment.Material} material - GeoImage material.
+     * @param {Material} material - GeoImage material.
      */
     clearMaterial(material) {
         material.image = null;
@@ -227,11 +259,10 @@ class BaseGeoImage extends Layer {
     /**
      * @virtual
      * @protected
-     * @param {og.planetSegment.Material} material - GeoImage material.
-     * @returns {Array<Number, Number, Number, Number> } -
+     * @param {Material} material - GeoImage material.
+     * @returns {Array<number> } -
      */
     applyMaterial(material) {
-
         var segment = material.segment;
 
         if (this._ready) {
@@ -276,6 +307,6 @@ class BaseGeoImage extends Layer {
     get getFrameHeight() {
         return this._frameHeight;
     }
-};
+}
 
 export { BaseGeoImage };

package/src/og/layer/CanvasTiles.js

@@ -30,18 +30,18 @@ const EVENT_NAMES = [
 /**
  * Layer used to rendering each tile as a separate canvas object.
  * @class
- * @extends {og.Layer}
+ * @extends {Layer}
  * //TODO: make asynchronous handler.
  * @param {String} [name="noname"] - Layer name.
  * @param {Object} options:
  * @param {number} [options.opacity=1.0] - Layer opacity.
- * @param {Array.<number,number,number>} [options.transparentColor=[-1,-1,-1]] - RGB color that defines transparent color.
+ * @param {Array.<number>} [options.transparentColor=[-1,-1,-1]] - RGB color that defines transparent color. (exactly 3 entries)
  * @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 {og.layer.CanvasTiles~drawTileCallback} [options.drawTile] - Draw tile callback.
+ * @param {layer.CanvasTiles~drawTileCallback} [options.drawTile] - Draw tile callback.
  * @fires og.layer.CanvasTiles#load
  * @fires og.layer.CanvasTiles#loadend
  */
@@ -63,13 +63,13 @@ class CanvasTiles extends Layer {
         /**
          * Tile pending queue that waiting for create.
          * @protected
-         * @type {Array.<og.planetSegment.Material>}
+         * @type {Array.<planetSegment.Material>}
          */
         this._pendingsQueue = []; // new og.QueueArray();
 
         /**
          * Draw tile callback.
-         * @type {og.layer.CanvasTiles~drawTileCallback}
+         * @type {layer.CanvasTiles~drawTileCallback}
          * @public
          */
         this.drawTile = options.drawTile || null;
@@ -116,7 +116,7 @@ class CanvasTiles extends Layer {
      * Start to load tile material.
      * @public
      * @virtual
-     * @param {og.planetSegment.Material} material -
+     * @param {Material} material -
      */
     loadMaterial(material) {
         var seg = material.segment;
@@ -143,7 +143,7 @@ class CanvasTiles extends Layer {
     /**
      * Loads material image and apply it to the planet segment.
      * @protected
-     * @param {og.planetSegment.Material} material - Loads material image.
+     * @param {Material} material - Loads material image.
      */
     _exec(material) {
         CanvasTiles.__requestsCounter++;
@@ -153,29 +153,31 @@ class CanvasTiles extends Layer {
             /**
              * Tile custom draw function.
              * @callback og.layer.CanvasTiles~drawTileCallback
-             * @param {og.planetSegment.Material} material
+             * @param {Material} material
              * @param {applyCanvasCallback} applyCanvasCallback
              */
             var e = that.events.load;
             if (e.handlers.length) {
                 that.events.dispatch(e, material);
             }
-            that.drawTile(
-                material,
-                /**
-                 * Apply canvas.
-                 * @callback applyCanvasCallback
-                 * @param {Object} canvas -
-                 */
-                function (canvas) {
-                    that._counter--;
-                    CanvasTiles.__requestsCounter--;
-                    if (material.isLoading) {
-                        material.applyImage(canvas);
+            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();
                     }
-                    that._dequeueRequest();
-                }
-            );
+                );
+            });
         } else {
             material.textureNotExists();
         }
@@ -184,7 +186,7 @@ class CanvasTiles extends Layer {
     /**
      * Abort exact material loading.
      * @public
-     * @param {og.planetSegment.Material} material - Segment material.
+     * @param {Material} material - Segment material.
      */
     abortMaterialLoading(material) {
         if (material.isLoading && material.image) {

package/src/og/layer/GeoImage.js

@@ -2,14 +2,14 @@
  * @module og/layer/GeoImage
  */
 
-'use strict';
+"use strict";
 
-import { BaseGeoImage } from './BaseGeoImage.js';
+import { BaseGeoImage } from "./BaseGeoImage.js";
 
 /**
  * Used to load and display a single image over specific corner coordinates on the globe, implements og.layer.BaseGeoImage interface.
  * @class
- * @extends {og.layer.BaseGeoImage}
+ * @extends {BaseGeoImage}
  */
 class GeoImage extends BaseGeoImage {
     constructor(name, options) {
@@ -84,7 +84,7 @@ class GeoImage extends BaseGeoImage {
      * Loads planet segment material. In this case - GeoImage source image.
      * @virtual
      * @public
-     * @param {og.planetSegment.Material} material - GeoImage planet material.
+     * @param {Material} material - GeoImage planet material.
      */
     loadMaterial(material) {
         material.isLoading = true;
@@ -95,14 +95,14 @@ class GeoImage extends BaseGeoImage {
                     this._onLoad(this._image);
                 } else if (this._image.src) {
                     let that = this;
-                    this._image.addEventListener('load', function (e) {
+                    this._image.addEventListener("load", function (e) {
                         that._onLoad(this);
                     });
                 }
             } else {
                 let that = this;
                 this._image = new Image();
-                this._image.addEventListener('load', function (e) {
+                this._image.addEventListener("load", function (e) {
                     that._onLoad(this);
                 });
                 this._image.src = this._src;
@@ -114,10 +114,10 @@ class GeoImage extends BaseGeoImage {
 
     /**
      * @virtual
-     * @param {og.planetSegment.Material} material - GeoImage material.
+     * @param {Material} material - GeoImage material.
      */
     abortMaterialLoading(material) {
-        this._image && (this._image.src = '');
+        this._image && (this._image.src = "");
         this._creationProceeding = false;
         material.isLoading = false;
         material.isReady = false;
@@ -218,6 +218,6 @@ class GeoImage extends BaseGeoImage {
 
         this._creationProceeding = false;
     }
-};
+}
 
-export { GeoImage };
+export { GeoImage };

package/src/og/layer/GeoTexture2d.js

@@ -146,6 +146,6 @@ class GeoTexture2d extends BaseGeoImage {
 
         this._creationProceeding = false;
     }
-};
+}
 
 export { GeoTexture2d };

package/src/og/layer/GeoVideo.js

@@ -9,7 +9,7 @@ import { BaseGeoImage } from "./BaseGeoImage.js";
 /**
  * Used to load and display a video stream by specific corners coordinates on the globe, implements og.layer.BaseGeoImage interface.
  * @class
- * @extends {og.layer.BaseGeoImage}
+ * @extends {BaseGeoImage}
  */
 class GeoVideo extends BaseGeoImage {
     constructor(name, options) {
@@ -139,7 +139,7 @@ class GeoVideo extends BaseGeoImage {
      * Loads planet segment material. In this case - GeoImage source video.
      * @virtual
      * @public
-     * @param {og.planetSegment.Material} material - GeoImage planet material.
+     * @param {Material} material - GeoImage planet material.
      */
     loadMaterial(material) {
         material.isLoading = true;
@@ -177,7 +177,7 @@ class GeoVideo extends BaseGeoImage {
 
     /**
      * @virtual
-     * @param {og.planetSegment.Material} material - GeoImage material.
+     * @param {Material} material - GeoImage material.
      */
     abortMaterialLoading(material) {
         this._video && (this._video.src = "");

package/src/og/layer/KML.js

@@ -2,41 +2,51 @@
  * @module og/layer/KML
  */
 
-'use strict';
-import { Entity } from '../entity/Entity.js';
-import { Extent } from '../Extent.js';
-import { LonLat } from '../LonLat.js';
-import { Vector } from './Vector.js';
+"use strict";
+import { Entity } from "../entity/Entity.js";
+import { Extent } from "../Extent.js";
+import { LonLat } from "../LonLat.js";
+import { Vector } from "./Vector.js";
 
 /**
  * Layer to render KMLs files
  * @class
- * @extends {og.Vector}
+ * @extends {Vector}
  */
 export class KML extends Vector {
-
     /**
-     * 
-     * @param {string} name 
+     *
+     * @param {string} name
      * @param {*} [options]
      */
     constructor(name, options = {}) {
         super(name, options);
         this._extent = null;
-        this._billboard = options.billboard || { src: 'https://openglobus.org/examples/billboards/carrot.png' };
-        this._color = options.color || '#6689db';
+        this._billboard = options.billboard || {
+            src: "https://openglobus.org/examples/billboards/carrot.png"
+        };
+        /**
+         * @type {string}
+         */
+        this._color = options.color || "#6689db";
     }
 
     get instanceName() {
-        return 'KML';
+        return "KML";
     }
 
     /**
      * @private
      */
     _extractCoordonatesFromKml(xmlDoc) {
-        const raw = Array.from(xmlDoc.getElementsByTagName('coordinates'));
-        const coordinates = raw.map(item => item.textContent.trim().replace(/\n/g, ' ').split(' ').map(co => co.split(',').map(parseFloat)));
+        const raw = Array.from(xmlDoc.getElementsByTagName("coordinates"));
+        const coordinates = raw.map((item) =>
+            item.textContent
+                .trim()
+                .replace(/\n/g, " ")
+                .split(" ")
+                .map((co) => co.split(",").map(parseFloat))
+        );
         return coordinates;
     }
 
@@ -44,32 +54,35 @@ export class KML extends Vector {
      * Creates billboards or polylines from array of lonlat.
      * @private
      * @param {Array} coordonates
-     * @param {string} color 
-     * @returns {Array<og.Entity>}
+     * @param {string} color
+     * @returns {Array<Entity>}
      */
     _convertCoordonatesIntoEntities(coordinates, color, billboard) {
         const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
         const addToExtent = (c) => {
-            const lon = c[0], lat = c[1];
+            const lon = c[0],
+                lat = c[1];
             if (lon < extent.southWest.lon) extent.southWest.lon = lon;
             if (lat < extent.southWest.lat) extent.southWest.lat = lat;
             if (lon > extent.northEast.lon) extent.northEast.lon = lon;
             if (lat > extent.northEast.lat) extent.northEast.lat = lat;
         };
         const _pathes = [];
-        coordinates.forEach(kmlFile => kmlFile.forEach(p => _pathes.push(p)));
-        const entities = _pathes.map(path => {
+        coordinates.forEach((kmlFile) => kmlFile.forEach((p) => _pathes.push(p)));
+        const entities = _pathes.map((path) => {
             if (path.length === 1) {
                 const lonlat = path[0];
                 const _entity = new Entity({ lonlat, billboard });
                 addToExtent(lonlat);
                 return _entity;
             } else if (path.length > 1) {
-                const pathLonLat = path.map(item => {
+                const pathLonLat = path.map((item) => {
                     addToExtent(item);
                     return new LonLat(item[0], item[1], item[2]);
                 });
-                const _entity = new Entity({ polyline: { pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false } });
+                const _entity = new Entity({
+                    polyline: { pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false }
+                });
                 return _entity;
             }
         });
@@ -78,43 +91,53 @@ export class KML extends Vector {
 
     /**
      * @private
+     * @returns {Document}
      */
     _getXmlContent(file) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             const fileReader = new FileReader();
-            fileReader.onload = async i => resolve((new DOMParser()).parseFromString(i.target.result, 'text/xml'));
+            fileReader.onload = async (i) =>
+                resolve(new DOMParser().parseFromString(i.target.result, "text/xml"));
             fileReader.readAsText(file);
         });
-    };
+    }
 
     /**
      * @private
      */
     _expandExtents(extent1, extent2) {
         if (!extent1) return extent2;
-        if (extent2.southWest.lon < extent1.southWest.lon) extent1.southWest.lon = extent2.southWest.lon;
-        if (extent2.southWest.lat < extent1.southWest.lat) extent1.southWest.lat = extent2.southWest.lat;
-        if (extent2.northEast.lon > extent1.northEast.lon) extent1.northEast.lon = extent2.northEast.lon;
-        if (extent2.northEast.lat > extent1.northEast.lat) extent1.northEast.lat = extent2.northEast.lat;
+        if (extent2.southWest.lon < extent1.southWest.lon)
+            extent1.southWest.lon = extent2.southWest.lon;
+        if (extent2.southWest.lat < extent1.southWest.lat)
+            extent1.southWest.lat = extent2.southWest.lat;
+        if (extent2.northEast.lon > extent1.northEast.lon)
+            extent1.northEast.lon = extent2.northEast.lon;
+        if (extent2.northEast.lat > extent1.northEast.lat)
+            extent1.northEast.lat = extent2.northEast.lat;
         return extent1;
     }
 
     /**
      * @public
      * @param {File[]} kmls
-     * @returns {Promise}
+     * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
     async addKmlFromFiles(kmls) {
         const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
         const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
-        const { entities, extent } = this._convertCoordonatesIntoEntities(coordonates, this._color, this._billboard);
+        const { entities, extent } = this._convertCoordonatesIntoEntities(
+            coordonates,
+            this._color,
+            this._billboard
+        );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
         return { entities, extent };
     }
 
     /**
-     * @param {string} color 
+     * @param {string} color
      * @public
      */
     setColor(color) {
@@ -128,32 +151,35 @@ export class KML extends Vector {
     _getKmlFromUrl(url) {
         return new Promise((resolve, reject) => {
             const request = new XMLHttpRequest();
-            request.open('GET', url, true);
-            request.responseType = 'document';
-            request.overrideMimeType('text/xml');
+            request.open("GET", url, true);
+            request.responseType = "document";
+            request.overrideMimeType("text/xml");
             request.onload = () => {
                 if (request.readyState === request.DONE && request.status === 200) {
                     resolve(request.responseXML);
                 } else {
-                    reject(new Error('no valid kml file'));
+                    reject(new Error("no valid kml file"));
                 }
             };
             request.send();
         });
-    };
+    }
 
     /**
      * @public
      * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
-     * @returns {Promise}
+     * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
     async addKmlFromUrl(url) {
         const kml = await this._getKmlFromUrl(url);
         const coordonates = this._extractCoordonatesFromKml(kml);
-        const { entities, extent } = this._convertCoordonatesIntoEntities([coordonates], this._color, this._billboard);
+        const { entities, extent } = this._convertCoordonatesIntoEntities(
+            [coordonates],
+            this._color,
+            this._billboard
+        );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
         return { entities, extent };
     }
-
-};
+}