@openglobus/og 0.13.4 → 0.13.7

package/src/og/entity/LabelHandler.js

@@ -24,6 +24,9 @@ const OUTLINECOLOR_BUFFER = 10;
 
 window.LABEL_DEPTH_OFFSET = -0;
 
+const EMPTY = -1.0;
+const RTL = 1.0;
+
 /*
  * og.LabelHandler
  *
@@ -201,6 +204,8 @@ class LabelHandler extends BillboardHandler {
         var gl = h.gl,
             ec = this._entityCollection;
 
+        gl.disable(gl.CULL_FACE);
+
         gl.uniform1iv(shu.fontTextureArr, r.fontAtlas.samplerArr);
         gl.uniform4fv(shu.sdfParamsArr, r.fontAtlas.sdfParamsArr);
         gl.uniformMatrix4fv(shu.viewMatrix, false, r.activeCamera._viewMatrix._m);
@@ -264,6 +269,8 @@ class LabelHandler extends BillboardHandler {
         gl.drawArrays(gl.TRIANGLES, 0, this._vertexBuffer.numItems);
 
         gl.depthFunc(gl.LESS);
+
+        gl.enable(gl.CULL_FACE);
     }
 
     _pickingPASS() {
@@ -359,7 +366,10 @@ class LabelHandler extends BillboardHandler {
         label._isReady = false;
     }
 
-    setText(index, text, fontIndex, align) {
+    setText(index, text, fontIndex, align, isRTL = false) {
+
+        text = text.normalize('NFKC');
+
         var fa = this._renderer.fontAtlas.atlasesArr[fontIndex];
 
         if (!fa) return;
@@ -370,15 +380,19 @@ class LabelHandler extends BillboardHandler {
 
         let c = 0;
 
-        let n = fa.nodes[text[c]];
-        let offset = 0.0;
         let len = Math.min(this._maxLetters, text.length);
+        let _rtl_ = 0.0;
+        if (isRTL) {
+            _rtl_ = RTL;
+        }
+        
+        let offset = 0.0;
         let kern = fa.kernings;
 
         for (c = 0; c < len; c++) {
             let j = i + c * 24;
             let char = text[c];
-            n = fa.nodes[char] || fa.nodes[" "];
+            let n = fa.get(char.charCodeAt()) || fa.get(" ".charCodeAt());
             let tc = n.texCoords;
 
             let m = n.metrics;
@@ -386,32 +400,32 @@ class LabelHandler extends BillboardHandler {
             a[j] = tc[0];
             a[j + 1] = tc[1];
             a[j + 2] = offset;
-            a[j + 3] = 0.0;
+            a[j + 3] = _rtl_;
 
             a[j + 4] = tc[2];
             a[j + 5] = tc[3];
             a[j + 6] = offset;
-            a[j + 7] = 0.0;
+            a[j + 7] = _rtl_;
 
             a[j + 8] = tc[4];
             a[j + 9] = tc[5];
             a[j + 10] = offset;
-            a[j + 11] = 0.0;
+            a[j + 11] = _rtl_;
 
             a[j + 12] = tc[6];
             a[j + 13] = tc[7];
             a[j + 14] = offset;
-            a[j + 15] = 0.0;
+            a[j + 15] = _rtl_;
 
             a[j + 16] = tc[8];
             a[j + 17] = tc[9];
             a[j + 18] = offset;
-            a[j + 19] = 0.0;
+            a[j + 19] = _rtl_;
 
             a[j + 20] = tc[10];
             a[j + 21] = tc[11];
             a[j + 22] = offset;
-            a[j + 23] = 0.0;
+            a[j + 23] = _rtl_;
 
             //
             // Gliph
@@ -446,9 +460,9 @@ class LabelHandler extends BillboardHandler {
             g[j + 22] = m.nXOffset;
             g[j + 23] = m.nYOffset;
 
-            let k = kern[char];
-            if (k) {
-                k = k[text[c + 1]];
+            let k = kern[char.charCodeAt()];
+            if (k && text[c + 1]) {
+                k = k[text[c + 1].charCodeAt()];
                 if (k) {
                     offset += m.nAdvance + k;
                 } else {
@@ -464,33 +478,23 @@ class LabelHandler extends BillboardHandler {
             offset *= -0.5;
             for (c = 0; c < len; c++) {
                 let j = i + c * 24;
-                a[j + 3] = offset;
-                a[j + 7] = offset;
-                a[j + 11] = offset;
-                a[j + 15] = offset;
-                a[j + 19] = offset;
-                a[j + 23] = offset;
-            }
-        } else if (align === ALIGN.LEFT) {
-            for (c = 0; c < len; c++) {
-                let j = i + c * 24;
-                a[j + 3] = 0;
-                a[j + 7] = 0;
-                a[j + 11] = 0;
-                a[j + 15] = 0;
-                a[j + 19] = 0;
-                a[j + 23] = 0;
+                a[j + 2] += offset;
+                a[j + 6] += offset;
+                a[j + 10] += offset;
+                a[j + 14] += offset;
+                a[j + 18] += offset;
+                a[j + 22] += offset;
             }
         }
 
         for (; c < this._maxLetters; c++) {
             let j = i + c * 24;
-            a[j + 2] = -1.0;
-            a[j + 6] = -1.0;
-            a[j + 10] = -1.0;
-            a[j + 14] = -1.0;
-            a[j + 18] = -1.0;
-            a[j + 17] = -1.0;
+            a[j + 3] = EMPTY;
+            a[j + 7] = EMPTY;
+            a[j + 11] = EMPTY;
+            a[j + 15] = EMPTY;
+            a[j + 19] = EMPTY;
+            a[j + 23] = EMPTY;
         }
 
         this._changedBuffers[TEXCOORD_BUFFER] = true;
@@ -793,19 +797,22 @@ class LabelHandler extends BillboardHandler {
 
         for (var q = 0; q < this._maxLetters; q++) {
             var j = i + q * 12;
+
             a[j] = vertexArr[0];
             a[j + 1] = vertexArr[1];
-            a[j + 2] = vertexArr[2];
 
+            a[j + 2] = vertexArr[2];
             a[j + 3] = vertexArr[3];
+
             a[j + 4] = vertexArr[4];
             a[j + 5] = vertexArr[5];
 
             a[j + 6] = vertexArr[6];
             a[j + 7] = vertexArr[7];
-            a[j + 8] = vertexArr[8];
 
+            a[j + 8] = vertexArr[8];
             a[j + 9] = vertexArr[9];
+
             a[j + 10] = vertexArr[10];
             a[j + 11] = vertexArr[11];
         }

package/src/og/input/input.js

@@ -9,11 +9,14 @@ export const input = {
     KEY_ALT: 18,
     KEY_SHIFT: 16,
     KEY_SPACE: 32,
+    KEY_PGUP: 33,
+    KEY_PGDN: 34,
     KEY_LEFT: 37,
     KEY_UP: 38,
     KEY_RIGHT: 39,
     KEY_DOWN: 40,
     KEY_PRINTSCREEN: 44,
+    KEY_EQUALS: 61,
     KEY_A: 65,
     KEY_C: 67,
     KEY_D: 68,
@@ -23,6 +26,7 @@ export const input = {
     KEY_I: 73,
     KEY_K: 75,
     KEY_L: 76,
+    KEY_N: 78,
     KEY_O: 79,
     KEY_P: 80,
     KEY_Q: 81,
@@ -32,9 +36,11 @@ export const input = {
     KEY_W: 87,
     KEY_X: 88,
     KEY_Z: 90,
+    KEY_PLUS: 107,
     KEY_F1: 112,
+    KEY_MINUS: 173,
     KEY_APOSTROPHE: 192,
     MB_LEFT: 0,
     MB_RIGHT: 2,
     MB_MIDDLE: 1
-};
+};

package/src/og/layer/CanvasTiles.js

@@ -98,14 +98,14 @@ class CanvasTiles extends Layer {
      * @public
      * @param {boolean} visibility - Layer visibility.
      */
-    setVisibility(visibility) {
+    setVisibility(visibility) {
         if (visibility !== this._visibility) {
             super.setVisibility(visibility);
 
             if (!visibility) {
                 this.abortLoading();
             }
-        }
+        }
     }
 
     /**
@@ -203,7 +203,7 @@ class CanvasTiles extends Layer {
                     this._exec(pmat);
                 }
             }
-        } else if (this._counter === 0) {
+        } else if (this._counter === 0 && this._planet._terrainCompletedActivated) {
             this.events.dispatch(this.events.loadend);
         }
     }
@@ -227,21 +227,21 @@ class CanvasTiles extends Layer {
     applyMaterial(material) {
         if (material.isReady) {
             return [0, 0, 1, 1];
-        } else {
-
+        } else {
+
             var segment = material.segment;
             var pn = segment.node,
                 notEmpty = false;
-
+
             if (segment.passReady && !material.isLoading) {
-                this.loadMaterial(material);
+                this.loadMaterial(material);
             }
 
             var mId = this._id;
             var psegm = material;
             while (pn.parentNode) {
                 pn = pn.parentNode;
-                psegm = pn.segment.materials[mId];
+                psegm = pn.segment.materials[mId];
                 if (psegm && psegm.isReady) {
                     notEmpty = true;
                     break;

package/src/og/layer/KML.js

@@ -42,17 +42,179 @@ export class KML extends Vector {
     _extractCoordonatesFromKml(xmlDoc) {
         const raw = Array.from(xmlDoc.getElementsByTagName("coordinates"));
         const rawText = raw.map(item => item.textContent.trim());
-        const coordinates = rawText.map(item => 
+        const coordinates = rawText.map(item =>
             item
-             .replace(/\n/g, " ")
-             .replace(/\t/g, " ")
-             .replace(/ +/g," ")
-             .split(" ")
-             .map((co) => co.split(",").map(parseFloat))
+                .replace(/\n/g, " ")
+                .replace(/\t/g, " ")
+                .replace(/ +/g, " ")
+                .split(" ")
+                .map((co) => co.split(",").map(parseFloat))
         );
         return coordinates;
     }
 
+    /**
+     * @private
+     */
+    _AGBRtoRGBA(agbr) {
+        if (!agbr || agbr.length != 8) return
+
+        const a = parseInt(agbr.slice(0, 2), 16) / 255;
+        const b = parseInt(agbr.slice(2, 4), 16);
+        const g = parseInt(agbr.slice(4, 6), 16);
+        const r = parseInt(agbr.slice(6, 8), 16);
+
+        return `rgba(${r},${g},${b},${a})`;
+    }
+
+    /**
+     * @private
+     returns array of longitude, latitude, altitude (altitude optional)
+     */
+    _parseKMLcoordinates(coords) {
+        const coordinates = coords.innerHTML.trim()
+            .replace(/\n/g, ' ')
+            .replace(/\t/g, ' ')
+            .replace(/ +/g, ' ')
+            .split(" ")
+            .map((co) => co.split(",").map(parseFloat))
+
+        return coordinates;
+    }
+
+    /**
+     * @private
+     */
+    _kmlPlacemarkToEntity(placemark, extent) {
+        if (!placemark) return;
+
+        const nameTags = Array.from(placemark.getElementsByTagName("name"))
+        const name = nameTags && nameTags[0]?.innerHTML?.trim() || '';
+
+        const { iconHeading, iconURL, iconColor, lineWidth, lineColor } = this._extractStyle(placemark);
+
+        // TODO handle MultiGeometry
+
+        const lonLats = [];
+        for (const coord of placemark.getElementsByTagName("coordinates")) {
+            const coordinates = this._parseKMLcoordinates(coord) || [[0, 0, 0]]
+
+            for (const lonlatalt of coordinates) {
+                const [lon, lat, alt] = lonlatalt
+
+                lonLats.push(new LonLat(lon, lat, alt));
+
+                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;
+            }
+        }
+
+        if (lonLats.length === 1) {
+            const hdgrad = iconHeading * 0.01745329; // radians
+
+            return new Entity({
+                name,
+                lonlat: lonLats[0],
+                billboard: {
+                    src: iconURL,
+                    size: [24, 24],
+                    color: iconColor,
+                    rotation: hdgrad
+                },
+                properties: {
+                    color: iconColor,
+                    heading: iconHeading
+                }
+            });
+
+        } else {
+            return new Entity({
+                polyline: {
+                    pathLonLat: [lonLats],
+                    thickness: lineWidth,
+                    color: lineColor,
+                    isClosed: false
+                }
+            });
+        }
+    }
+
+    _extractStyle(placemark) {
+        let iconColor;
+        let iconHeading;
+        let iconURL;
+        let lineColor;
+        let lineWidth;
+
+        const style = placemark.getElementsByTagName("Style")[0];
+        if (style) {
+            let iconstyle = style.getElementsByTagName("IconStyle")[0];
+            if (iconstyle) {
+                let color = iconstyle.getElementsByTagName("color")[0];
+                if (color)
+                    iconColor = this._AGBRtoRGBA(color.innerHTML.trim());
+
+                let heading = iconstyle.getElementsByTagName("heading")[0];
+                if (heading) {
+                    const hdg = parseFloat(heading.innerHTML.trim());
+                    if (hdg >= 0 && hdg <= 360)
+                        iconHeading = hdg % 360;
+                }
+
+                let icon = iconstyle.getElementsByTagName("Icon")[0];
+                if (icon) {
+                    let href = icon.getElementsByTagName("href")[0];
+                    if (href) {
+                        iconURL = href.innerHTML.trim();
+                    }
+                }
+            }
+
+            let linestyle = style.getElementsByTagName("LineStyle")[0];
+            if (linestyle) {
+                let color = linestyle.getElementsByTagName("color")[0];
+                if (color)
+                    lineColor = this._AGBRtoRGBA(color.innerHTML.trim());
+                let width = linestyle.getElementsByTagName("width")[0];
+                if (width !== undefined)
+                    lineWidth = parseFloat(width.innerHTML.trim());
+            }
+        }
+
+        if (!iconColor) iconColor = "#FFFFFF"
+        if (!iconHeading) iconHeading = 0
+        if (!iconURL) iconURL = "https://openglobus.org/examples/billboards/carrot.png"
+
+        if (!lineColor) lineColor = "#FFFFFF"
+        if (!lineWidth) lineWidth = 1
+
+        return { iconHeading, iconURL, iconColor, lineWidth, lineColor };
+    }
+
+    _parseKML(xml, extent, entities = undefined) {
+        if (!entities)
+            entities = [];
+
+        if (xml.documentElement.nodeName !== "kml")
+            return entities;
+
+        for (const placemark of xml.getElementsByTagName("Placemark")) {
+            const entity = this._kmlPlacemarkToEntity(placemark, extent);
+            if (entity) entities.push(entity);
+        }
+
+        return entities;
+    }
+
+    _convertKMLintoEntities(xml) {
+        const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
+        const entities = this._parseKML(xml, extent);
+
+        return { entities, extent }
+    }
+
     /**
      * Creates billboards or polylines from array of lonlat.
      * @public
@@ -129,6 +291,7 @@ export class KML extends Vector {
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
     async addKmlFromFiles(kmls, color = null, billboard = null) {
+        if (!Array.isArray(kmls)) return null
         const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
         const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
         const { entities, extent } = this._convertCoordonatesIntoEntities(
@@ -179,14 +342,20 @@ export class KML extends Vector {
      */
     async addKmlFromUrl(url, color = null, billboard = null) {
         const kml = await this._getKmlFromUrl(url);
-        const coordonates = this._extractCoordonatesFromKml(kml);
-        const { entities, extent } = this._convertCoordonatesIntoEntities(
-            [coordonates],
-            color || this._color,
-            billboard || this._billboard
-        );
+        /*
+                const coordonates = this._extractCoordonatesFromKml(kml);
+                const { entities, extent } = this._convertCoordonatesIntoEntities(
+                    [coordonates],
+                    color || this._color,
+                    billboard || this._billboard
+                );
+        */
+        const { entities, extent } = this._convertKMLintoEntities(kml);
+
         this._extent = this._expandExtents(this._extent, extent);
+
         entities.forEach(this.add.bind(this));
+
         return { entities, extent };
     }
 }

package/src/og/layer/Layer.js

@@ -413,8 +413,10 @@ class Layer {
      * @param {string} html - HTML code that represents layer attribution, it could be just a text.
      */
     setAttribution(html) {
-        this._attribution = html;
-        this._planet && this._planet.updateAttributionsList();
+        if (this._attribution !== html) {
+            this._attribution = html;
+            this._planet && this._planet.updateAttributionsList();
+        }
     }
 
     /**

package/src/og/layer/XYZ.js

@@ -162,6 +162,7 @@ class XYZ extends Layer {
 
                 this._planet._tileLoader.load(
                     {
+                        sender: this,
                         src: this._getHTTPRequestString(material.segment),
                         type: "imageBitmap",
                         filter: () =>
@@ -185,7 +186,8 @@ class XYZ extends Layer {
                                 material.textureNotExists();
                             }
                         }
-                    }
+                    },
+                    this._id
                 );
             } else {
                 material.textureNotExists();
@@ -303,7 +305,7 @@ class XYZ extends Layer {
     clearMaterial(material) {
         if (material.isReady && material.textureExists) {
             !material.texture.default &&
-            material.segment.handler.gl.deleteTexture(material.texture);
+                material.segment.handler.gl.deleteTexture(material.texture);
             material.texture = null;
 
             if (material.image) {

package/src/og/quadTree/Node.js

@@ -404,6 +404,7 @@ class Node {
 
         if (!this.segment.terrainReady) {
             this.planet._renderCompleted = false;
+            this.planet._terrainCompleted = false;
         }
 
         let k = 0,

package/src/og/renderer/RendererEvents.js

@@ -161,6 +161,8 @@ class RendererEvents extends Events {
             prev_x: 0,
             /** Previous touch Y coordinate. */
             prev_y: 0,
+            /** Screen touch position world direction. */
+            direction: new Vec3(),
             /** JavaScript touching system event message. */
             sys: null,
             /** Current touched(picking) object. */
@@ -222,6 +224,13 @@ class RendererEvents extends Events {
                 this.mouseState.x,
                 this.mouseState.y
             );
+            //
+            // TODO: Replace in some other place with a thought that we do            
+            // not need to make unproject when we do not make touching
+            this.touchState.direction = this.renderer.activeCamera.unproject(
+                this.touchState.x,
+                this.touchState.y
+            );
             this.entityPickingEvents();
             this._keyboardHandler.handleEvents();
             this.handleMouseEvents();
@@ -493,7 +502,7 @@ class RendererEvents extends Events {
         var ts = this.touchState;
         ts.sys = event;
 
-        ts.clienX = event.touches.item(0).clientX - event.offsetLeft;
+        ts.clientX = event.touches.item(0).clientX - event.offsetLeft;
         ts.clientY = event.touches.item(0).clientY - event.offsetTop;
 
         let h = this.renderer.handler;
@@ -569,8 +578,13 @@ class RendererEvents extends Events {
 
         ts.sys = event;
         ts.moving = true;
-        // this._dblTchBegins = 0;
-        // this._oneTouchStart = false;
+
+        var dX = ts.x - ts.prev_x
+        var dY = ts.y - ts.prev_y
+        if (Math.abs(dX) > 9 || Math.abs(dY) > 9) {
+            this._dblTchBegins = 0;
+            this._oneTouchStart = false;
+        }
     }
 
     /**