@openglobus/og 0.13.3 → 0.13.6

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/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();
+        }
     }
 
     /**