@openglobus/og 0.11.2 → 0.11.7

package/src/og/utils/TextureAtlas.js

@@ -1,11 +1,11 @@
-'use strict';
+"use strict";
 
-import { ImageCanvas } from '../ImageCanvas.js';
-import { Rectangle } from '../Rectangle.js';
-import { ImagesCacheManager } from './ImagesCacheManager.js';
+import { ImageCanvas } from "../ImageCanvas.js";
+import { Rectangle } from "../Rectangle.js";
+import { ImagesCacheManager } from "./ImagesCacheManager.js";
 
 /**
- * Texture atlas stores images in one texture. Each image has its own 
+ * Texture atlas stores images in one texture. Each image has its own
  * atlas texture coordinates.
  * @class
  * @param {number} [width] - Texture atlas width, if it hasn't 1024 default.
@@ -13,11 +13,10 @@ import { ImagesCacheManager } from './ImagesCacheManager.js';
  */
 class TextureAtlas {
     constructor(width, height) {
-
         /**
          * Atlas nodes where input images store. It can be access by image.__nodeIndex.
          * @public
-         * @type {Array.<og.utils.TextureAtlasNode >}
+         * @type {Array.<utils.TextureAtlasNode >}
          */
         this.nodes = [];
 
@@ -71,7 +70,7 @@ class TextureAtlas {
     /**
      * Sets openglobus gl handler that creates gl texture.
      * @public
-     * @param {og.webgl.Handler} handler - WebGL handler.
+     * @param {Handler} handler - WebGL handler.
      */
     assignHandler(handler) {
         this._handler = handler;
@@ -93,12 +92,11 @@ class TextureAtlas {
      * Adds image to the atlas and returns creted node with texture coordinates of the stored image.
      * @public
      * @param {Object} image - Input javascript image object.
-     * @param {boolean} [fastInsert] - If it's true atlas doesnt restore all images again 
+     * @param {boolean} [fastInsert] - If it's true atlas doesnt restore all images again
      * and store image in the curent atlas sheme.
-     * @returns {og.utils.TextureAtlasNode} -
+     * @returns {utils.TextureAtlasNode} -
      */
     addImage(image, fastInsert) {
-
         if (!(image.width && image.height)) {
             return;
         }
@@ -145,11 +143,10 @@ class TextureAtlas {
     /**
      * Main atlas making function.
      * @private
-     * @param {boolean} [fastInsert] - If it's true atlas doesnt restore all images again 
+     * @param {boolean} [fastInsert] - If it's true atlas doesnt restore all images again
      * and store image in the curent atlas sheme.
      */
     _makeAtlas(fastInsert) {
-
         if (fastInsert && this._btree) {
             let im = this._images[this._images.length - 1];
             this._completeNode(this.nodes, this._btree.insert(im));
@@ -157,10 +154,15 @@ class TextureAtlas {
             let im = this._images.slice(0);
 
             im.sort(function (b, a) {
-                return ((a.atlasWidth || a.width) - (b.atlasWidth || b.width)) || ((a.atlasHeight || a.height) - (b.atlasHeight || b.height));
+                return (
+                    (a.atlasWidth || a.width) - (b.atlasWidth || b.width) ||
+                    (a.atlasHeight || a.height) - (b.atlasHeight || b.height)
+                );
             });
 
-            this._btree = new TextureAtlasNode(new Rectangle(0, 0, this.canvas.getWidth(), this.canvas.getHeight()));
+            this._btree = new TextureAtlasNode(
+                new Rectangle(0, 0, this.canvas.getWidth(), this.canvas.getHeight())
+            );
             this._btree.atlas = this;
 
             this.clearCanvas();
@@ -178,19 +180,19 @@ class TextureAtlas {
      * Creates atlas gl texture.
      * @public
      */
-    createTexture(img) {
+    createTexture(img, internalFormat) {
         if (this._handler) {
             this._handler.gl.deleteTexture(this.texture);
             if (img) {
                 this.canvas.resize(img.width, img.height);
                 this.canvas.drawImage(img, 0, 0, img.width, img.height);
             }
-            this.texture = this._handler.createTexture_l(this.canvas._canvas);
+            this.texture = this._handler.createTexture_l(this.canvas._canvas, internalFormat);
         }
     }
 
     /**
-     * Image handler callback. 
+     * Image handler callback.
      * @callback Object~successCallback
      * @param {Image} img - Loaded image.
      */
@@ -215,7 +217,7 @@ class TextureAtlas {
 /**
  * Atlas binary tree node.
  * @class
- * @param {og.Rectangle} rect - Node image rectangle.
+ * @param {Rectangle} rect - Node image rectangle.
  */
 class TextureAtlasNode {
     constructor(rect, texCoords) {
@@ -227,9 +229,7 @@ class TextureAtlasNode {
     }
 
     insert(img) {
-
         if (this.childNodes) {
-
             var newNode = this.childNodes[0].insert(img);
 
             if (newNode != null) {
@@ -237,9 +237,7 @@ class TextureAtlasNode {
             }
 
             return this.childNodes[1].insert(img);
-
         } else {
-
             if (this.image != null) {
                 return null;
             }
@@ -279,4 +277,4 @@ class TextureAtlasNode {
     }
 }
 
-export { TextureAtlas, TextureAtlasNode };
+export { TextureAtlas, TextureAtlasNode };

package/src/og/utils/VectorTileCreator.js

@@ -217,8 +217,6 @@ export class VectorTileCreator {
 
             // var prevLayerId = -1;
 
-            var extentParams = new Float32Array(4);
-
             var extentParamsHigh = new Float32Array(4);
             var extentParamsLow = new Float32Array(4);
 
@@ -245,7 +243,7 @@ export class VectorTileCreator {
 
                     f.bindOutputTexture(texture);
 
-                    gl.clearColor(1.0, 1.0, 1.0, 0.0);
+                    gl.clearColor(0.0, 0.0, 0.0, 0.0);
                     gl.clear(gl.COLOR_BUFFER_BIT);
 
                     var extent = material.segment.getExtentMerc();

package/src/og/utils/shared.js

@@ -56,7 +56,7 @@ export function readTextFile(fileUrl) {
  * Convert html color string to the RGBA number vector.
  * @param {string} htmlColor - HTML string("#C6C6C6" or "#EF5" or "rgb(8,8,8)" or "rgba(8,8,8)") color.
  * @param {number} [opacity] - Opacity for the output vector.
- * @returns {og.math.Vec4} -
+ * @returns {math.Vec4} -
  */
 export function htmlColorToRgba(htmlColor, opacity) {
     var hColor = colorTable[htmlColor];
@@ -99,7 +99,7 @@ export function htmlColorToFloat32Array(htmlColor, opacity) {
  * Convert html color string to the RGB number vector.
  * @param {string} htmlColor - HTML string("#C6C6C6" or "#EF5" or "rgb(8,8,8)" or "rgba(8,8,8)") color.
  * @param {number} [opacity] - Opacity for the output vector.
- * @returns {og.Vec3} -
+ * @returns {Vec3} -
  */
 export function htmlColorToRgb(htmlColor) {
     var hColor = colorTable[htmlColor];
@@ -283,7 +283,7 @@ export function binarySearchFast(arr, x) {
  * Finds an item in a sorted array.
  * @param {Array} ar The sorted array to search.
  * @param {Object} el The item to find in the array.
- * @param {og.utils.binarySearch~compare_fn} compare_fn comparator The function to use to compare the item to
+ * @param {utils.binarySearch~compare_fn} compare_fn comparator The function to use to compare the item to
  *        elements in the array.
  * @returns {Number} a negative number  if a is less than b; 0 if a is equal to b;a positive number of a is greater than b.
  *
@@ -316,7 +316,7 @@ export function binarySearch(ar, el, compare_fn) {
  * Binary insertion that uses binarySearch algorithm.
  * @param {Array} ar - The sorted array to insert.
  * @param {Object} el - The item to insert.
- * @param {og.utils.binarySearch~compare_fn} compare_fn - comparator The function to use to compare the item to
+ * @param {utils.binarySearch~compare_fn} compare_fn - comparator The function to use to compare the item to
  *        elements in the array.
  * @returns {Number} Array index position in which item inserted in.
  */
@@ -332,12 +332,12 @@ export function binaryInsert(ar, el, compare_fn) {
 /**
  * Returns two segment lines intersection coordinate.
  * @static
- * @param {og.math.Vec2} start1 - First line first coordinate.
- * @param {og.math.Vec2} end1 - First line second coordinate.
- * @param {og.math.Vec2} start2 - Second line first coordinate.
- * @param {og.math.Vec2} end2 - Second line second coordinate.
+ * @param {math.Vec2} start1 - First line first coordinate.
+ * @param {math.Vec2} end1 - First line second coordinate.
+ * @param {math.Vec2} start2 - Second line first coordinate.
+ * @param {math.Vec2} end2 - Second line second coordinate.
  * @param {boolean} [isSegment] - Lines are segments.
- * @return {og.math.Vec2} - Intersection coordinate.
+ * @return {math.Vec2} - Intersection coordinate.
  */
 export function getLinesIntersection2v(start1, end1, start2, end2, isSegment) {
     var dir1 = end1.sub(start1);
@@ -372,12 +372,12 @@ export function getLinesIntersection2v(start1, end1, start2, end2, isSegment) {
 /**
  * Returns two segment lines intersection coordinate.
  * @static
- * @param {og.math.Vec2} start1 - First line first coordinate.
- * @param {og.math.Vec2} end1 - First line second coordinate.
- * @param {og.math.Vec2} start2 - Second line first coordinate.
- * @param {og.math.Vec2} end2 - Second line second coordinate.
+ * @param {math.Vec2} start1 - First line first coordinate.
+ * @param {math.Vec2} end1 - First line second coordinate.
+ * @param {math.Vec2} start2 - Second line first coordinate.
+ * @param {math.Vec2} end2 - Second line second coordinate.
  * @param {boolean} [isSegment] - Lines are segments.
- * @return {og.math.Vec2} - Intersection coordinate.
+ * @return {math.Vec2} - Intersection coordinate.
  */
 export function getLinesIntersectionLonLat(start1, end1, start2, end2, isSegment) {
     var dir1 = new LonLat(end1.lon - start1.lon, end1.lat - start1.lat);
@@ -752,7 +752,7 @@ export function concatTypedArrays(a, b) {
  * @param {TypedArray | Array} a
  * @param {TypedArray | Array} b
  */
-export function concatArrays(a, b) {
+export function concatArrays(a = [], b) {
     if (ArrayBuffer.isView(a)) {
         return concatTypedArrays(a, b);
     } else {
@@ -940,4 +940,4 @@ export function cloneArray(items) {
  */
 export function isUndef(obj) {
     return obj === void 0;
-}
+}

package/src/og/webgl/Framebuffer.js

@@ -2,14 +2,14 @@
  * @module og/webgl/Framebuffer
  */
 
-'use strict';
+"use strict";
 
-import { ImageCanvas } from '../ImageCanvas.js';
+import { ImageCanvas } from "../ImageCanvas.js";
 
 /**
  * Class represents framebuffer.
  * @class
- * @param {og.webgl.Handler} handler - WebGL handler.
+ * @param {Handler} handler - WebGL handler.
  * @param {Object} [options] - Framebuffer options:
  * @param {number} [options.width] - Framebuffer width. Default is handler canvas width.
  * @param {number} [options.height] - Framebuffer height. Default is handler canvas height.
@@ -21,13 +21,11 @@ import { ImageCanvas } from '../ImageCanvas.js';
  * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
  */
 export class Framebuffer {
-
     constructor(handler, options = {}) {
-
         /**
          * WebGL handler.
          * @public
-         * @type {og.webgl.Handler}
+         * @type {Handler}
          */
         this.handler = handler;
 
@@ -49,20 +47,27 @@ export class Framebuffer {
 
         this._filter = options.filter || "NEAREST";
 
-        this._internalFormatArr = options.internalFormat instanceof Array ? options.internalFormat : [options.internalFormat || "RGBA"];
+        this._internalFormatArr =
+            options.internalFormat instanceof Array
+                ? options.internalFormat
+                : [options.internalFormat || "RGBA"];
 
-        this._formatArr = options.format instanceof Array ? options.format : [options.format || "RGBA"];
+        this._formatArr =
+            options.format instanceof Array ? options.format : [options.format || "RGBA"];
 
-        this._typeArr = options.type instanceof Array ? options.type : [options.type || "UNSIGNED_BYTE"];
+        this._typeArr =
+            options.type instanceof Array ? options.type : [options.type || "UNSIGNED_BYTE"];
 
-        this._attachmentArr = options.attachment instanceof Array ?
-            options.attachment.map((a, i) => {
-                let res = a.toUpperCase();
-                if (res === "COLOR_ATTACHMENT") {
-                    return `${res}${i.toString()}`;
-                }
-                return res;
-            }) : [options.attachment || "COLOR_ATTACHMENT0"];
+        this._attachmentArr =
+            options.attachment instanceof Array
+                ? options.attachment.map((a, i) => {
+                      let res = a.toUpperCase();
+                      if (res === "COLOR_ATTACHMENT") {
+                          return `${res}${i.toString()}`;
+                      }
+                      return res;
+                  })
+                : [options.attachment || "COLOR_ATTACHMENT0"];
 
         /**
          * Framebuffer width.
@@ -78,12 +83,13 @@ export class Framebuffer {
          */
         this._height = options.height || handler.canvas.height;
 
-        this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
+        this._depthComponent =
+            options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
 
         this._useDepth = options.useDepth != undefined ? options.useDepth : true;
 
         /**
-         * Framebuffer activity. 
+         * Framebuffer activity.
          * @private
          * @type {boolean}
          */
@@ -100,19 +106,25 @@ export class Framebuffer {
     }
 
     static blit(sourceFramebuffer, destFramebuffer, glAttachment, glMask, glFilter) {
-
         let gl = sourceFramebuffer.handler.gl;
 
         gl.bindFramebuffer(gl.READ_FRAMEBUFFER, sourceFramebuffer._fbo);
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, destFramebuffer._fbo);
         gl.readBuffer(glAttachment);
 
         gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
 
         gl.blitFramebuffer(
-            0, 0, sourceFramebuffer._width, sourceFramebuffer._height,
-            0, 0, destFramebuffer._width, destFramebuffer._height,
-            glMask, glFilter
+            0,
+            0,
+            sourceFramebuffer._width,
+            sourceFramebuffer._height,
+            0,
+            0,
+            destFramebuffer._width,
+            destFramebuffer._height,
+            glMask,
+            glFilter
         );
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -151,8 +163,8 @@ export class Framebuffer {
         if (!this._isBare) {
             let attachmentArr = [];
             for (var i = 0; i < this.textures.length; i++) {
-
-                let ti = this.textures[i] ||
+                let ti =
+                    this.textures[i] ||
                     this.handler.createEmptyTexture2DExt(
                         this._width,
                         this._height,
@@ -178,8 +190,18 @@ export class Framebuffer {
         if (this._useDepth) {
             this._depthRenderbuffer = gl.createRenderbuffer();
             gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
-            gl.renderbufferStorage(gl.RENDERBUFFER, gl[this._depthComponent], this._width, this._height);
-            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.renderbufferStorage(
+                gl.RENDERBUFFER,
+                gl[this._depthComponent],
+                this._width,
+                this._height
+            );
+            gl.framebufferRenderbuffer(
+                gl.FRAMEBUFFER,
+                gl.DEPTH_ATTACHMENT,
+                gl.RENDERBUFFER,
+                this._depthRenderbuffer
+            );
             gl.bindRenderbuffer(gl.RENDERBUFFER, null);
         }
 
@@ -197,7 +219,13 @@ export class Framebuffer {
     bindOutputTexture(texture, glAttachment) {
         var gl = this.handler.gl;
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, glAttachment || gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        gl.framebufferTexture2D(
+            gl.FRAMEBUFFER,
+            glAttachment || gl.COLOR_ATTACHMENT0,
+            gl.TEXTURE_2D,
+            texture,
+            0
+        );
         gl.bindTexture(gl.TEXTURE_2D, null);
     }
 
@@ -248,7 +276,15 @@ export class Framebuffer {
         var gl = this.handler.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
         gl.readBuffer && gl.readBuffer(gl.COLOR_ATTACHMENT0 + index || 0);
-        gl.readPixels(nx * this._width, ny * this._height, w, h, gl.RGBA, gl[this._typeArr[index]], res);
+        gl.readPixels(
+            nx * this._width,
+            ny * this._height,
+            w,
+            h,
+            gl.RGBA,
+            gl[this._typeArr[index]],
+            res
+        );
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
 
@@ -262,14 +298,22 @@ export class Framebuffer {
         var gl = this.handler.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
         gl.readBuffer && gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
-        gl.readPixels(0, 0, this._width, this._height, gl.RGBA, gl[this._typeArr[attachmentIndex]], res);
+        gl.readPixels(
+            0,
+            0,
+            this._width,
+            this._height,
+            gl.RGBA,
+            gl[this._typeArr[attachmentIndex]],
+            res
+        );
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
 
     /**
      * Activate framebuffer frame to draw.
      * @public
-     * @returns {og.webgl.Framebuffer} Returns Current framebuffer.
+     * @returns {Framebuffer} Returns Current framebuffer.
      */
     activate() {
         var gl = this.handler.gl;
@@ -323,17 +367,21 @@ export class Framebuffer {
     openImage() {
         var img = this.getImage();
         var dataUrl = img.src;
-        var windowContent = '<!DOCTYPE html>';
-        windowContent += '<html>';
-        windowContent += '<head><title>Print</title></head>';
-        windowContent += '<body>';
+        var windowContent = "<!DOCTYPE html>";
+        windowContent += "<html>";
+        windowContent += "<head><title>Print</title></head>";
+        windowContent += "<body>";
         windowContent += '<img src="' + dataUrl + '">';
-        windowContent += '</body>';
-        windowContent += '</html>';
-        var printWin = window.open('', '', 'width=' + img.width + 'px ,height=' + img.height + 'px');
+        windowContent += "</body>";
+        windowContent += "</html>";
+        var printWin = window.open(
+            "",
+            "",
+            "width=" + img.width + "px ,height=" + img.height + "px"
+        );
         printWin.document.open();
         printWin.document.write(windowContent);
         printWin.document.close();
         printWin.focus();
     }
-}
+}