@openglobus/og 0.12.1 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "[OpenGlobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and completely free.",
   "directories": {
     "example": "./sandbox"
@@ -16,7 +16,7 @@
     "core": "rollup -c --environment entry:core",
     "test": "jest --env=jsdom",
     "test_watch": "jest --env=jsdom --watch",
-    "lint": "eslint src/og",
+    "lint": "eslint -c ./.eslintrc.js src/og",
     "generate_types": "rm -rf types; tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types",
     "compile_js_as_ts": "tsc src/og/index.js --AllowJs --checkJs --outDir dist/@openglobus/src/"
   },

package/src/og/entity/GeoObjectHandler.js

@@ -14,7 +14,8 @@ const VERTEX_BUFFER = 0,
     DIRECTION_BUFFER = 5,
     PITCH_ROLL_BUFFER = 6,
     SIZE_BUFFER = 7,
-    PICKINGCOLOR_BUFFER = 8;
+    PICKINGCOLOR_BUFFER = 8,
+    VISIBLE_BUFFER = 9;
 
 const setParametersToArray = (arr = [], index = 0, length, itemSize, ...params) => {
     const currIndex = index * length;
@@ -48,6 +49,7 @@ class GeoObjectHandler {
         this._normalsArr = [[]];
         this._indicesArr = [[]];
         this._pickingColorArr = [[]];
+        this._vehicleVisibleArr = [[]];
 
         this._pitchRollBuffer = [];
         this._sizeBuffer = [];
@@ -59,6 +61,7 @@ class GeoObjectHandler {
         this._normalsBuffer = [];
         this._indicesBuffer = [];
         this._pickingColorBuffer = [];
+        this._vehicleVisibleBuffer = [];
 
         this.__staticId = GeoObjectHandler._staticCounter++;
         this._buffersUpdateCallbacks = [];
@@ -71,6 +74,7 @@ class GeoObjectHandler {
         this._buffersUpdateCallbacks[VERTEX_BUFFER] = this.createVertexBuffer;
         this._buffersUpdateCallbacks[SIZE_BUFFER] = this.createSizeBuffer;
         this._buffersUpdateCallbacks[PITCH_ROLL_BUFFER] = this.createPitchRollBuffer;
+        this._buffersUpdateCallbacks[VISIBLE_BUFFER] = this.createVisibleBuffer;
 
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
 
@@ -100,6 +104,15 @@ class GeoObjectHandler {
         }
     }
 
+    createVisibleBuffer() {
+        const h = this._renderer.handler;
+        for (let i = 0, len = this._vehicleVisibleArr.length; i < len; i++) {
+            this._vehicleVisibleBuffer && h.gl.deleteBuffer(this._vehicleVisibleBuffer[i]);
+            this._vehicleVisibleArr[i] = makeArrayTyped(this._vehicleVisibleArr[i]);
+            this._vehicleVisibleBuffer[i] = h.createArrayBuffer(this._vehicleVisibleArr[i], 1, this._vehicleVisibleArr[i].length);
+        }
+    }
+
     createSizeBuffer() {
         const h = this._renderer.handler;
         for (let i = 0, len = this._sizeArr.length; i < len; i++) {
@@ -225,7 +238,7 @@ class GeoObjectHandler {
          * mark object by index for recalc indices array
          */
         geoObject._tagIndex = tagData.iCounts - 1;
-        if (geoObject._visibility) {
+
             if (!this._vertexArr[ti] || this._vertexArr[ti].length !== geoObject._vertices.length) {
 
                 this._vertexArr[ti] = concatArrays(
@@ -250,12 +263,11 @@ class GeoObjectHandler {
                     )
                 );
             }
-        } else {
-            this._vertexArr[ti] = concatArrays(
-                this._vertexArr[ti],
-                setParametersToArray([], 0, geoObject._verticesCount * itemSize, 1, 0)
-            );
-        }
+        this._vehicleVisibleArr[ti] = concatArrays(
+            this._vehicleVisibleArr[ti],
+            setParametersToArray([], 0, 1, 1, geoObject._visibility ? 1 : 0)
+        );
+
         let x = geoObject._positionHigh.x,
             y = geoObject._positionHigh.y,
             z = geoObject._positionHigh.z,
@@ -366,6 +378,9 @@ class GeoObjectHandler {
             gl.bindBuffer(gl.ARRAY_BUFFER, this._rgbaBuffer[ti]);
             gl.vertexAttribPointer(a.aColor, this._rgbaBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._vehicleVisibleBuffer[ti]);
+            gl.vertexAttribPointer(a.aDispose, this._vehicleVisibleBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
+
             gl.bindBuffer(gl.ARRAY_BUFFER, this._positionHighBuffer[ti]);
             gl.vertexAttribPointer(
                 a.aPositionHigh,
@@ -503,6 +518,9 @@ class GeoObjectHandler {
                 0
             );
 
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._vehicleVisibleBuffer[ti]);
+            gl.vertexAttribPointer(a.aDispose, this._vehicleVisibleBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
+
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer[ti]);
 
             if (tagData.iCounts) {
@@ -627,14 +645,12 @@ class GeoObjectHandler {
     }
 
     setVisibility(index, visibility) {
-        const ob = this.getObjectByIndex(index);
-        let vArr;
-        if (visibility) {
-            vArr = ob._vertices;
-        } else {
-            vArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-        }
-        this.setVertexArr(index, vArr);
+        const ob = this.getObjectByIndex(index),
+            ti = this.getTagIndexByObjectIndex(index);
+
+        setParametersToArray(this._vehicleVisibleArr[ti], ob._tagIndex, 1, 1, visibility ? 1 : 0);
+
+        this._changedBuffers[VISIBLE_BUFFER] = true;
     }
 
     setPositionArr(index, positionHigh, positionLow) {
@@ -753,6 +769,7 @@ class GeoObjectHandler {
         this._normalsArr = null;
         this._indicesArr = null;
         this._pickingColorArr = null;
+        this._vehicleVisibleArr = null;
 
         this._pitchRollArr = [new Float32Array()];
         this._sizeArr = [new Float32Array()];
@@ -764,6 +781,7 @@ class GeoObjectHandler {
         this._normalsArr = [new Float32Array()];
         this._indicesArr = [new Uint16Array()];
         this._pickingColorArr = [new Float32Array()];
+        this._vehicleVisibleArr = [new Int8Array()];
 
         this._removeGeoObjects();
         this._deleteBuffers();
@@ -880,6 +898,7 @@ class GeoObjectHandler {
         this._pitchRollArr[ti] = spliceArray(this._pitchRollArr[ti], i, 2);
         i = geoObject._tagIndex;
         this._sizeArr[ti] = spliceArray(this._sizeArr[ti], i, 1);
+        this._vehicleVisibleArr[ti] = spliceArray(this._vehicleVisibleArr[ti], i, 1);
 
         this._removeIndices(geoObject);
 

package/src/og/layer/KML.js

@@ -3,6 +3,7 @@
  */
 
 "use strict";
+import { Billboard } from "../entity/Billboard.js";
 import { Entity } from "../entity/Entity.js";
 import { Extent } from "../Extent.js";
 import { LonLat } from "../LonLat.js";
@@ -40,12 +41,14 @@ export class KML extends Vector {
      */
     _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 rawText = raw.map(item => item.textContent.trim());
+        const coordinates = rawText.map(item => 
+            item
+             .replace(/\n/g, " ")
+             .replace(/\t/g, " ")
+             .replace(/ +/g," ")
+             .split(" ")
+             .map((co) => co.split(",").map(parseFloat))
         );
         return coordinates;
     }
@@ -121,15 +124,17 @@ export class KML extends Vector {
     /**
      * @public
      * @param {File[]} kmls
+     * @param {string} [color]
+     * @param {Billboard} [billboard]
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
-    async addKmlFromFiles(kmls) {
+    async addKmlFromFiles(kmls, color = null, billboard = null) {
         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
+            color || this._color,
+            billboard || this._billboard
         );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
@@ -168,15 +173,17 @@ export class KML extends Vector {
     /**
      * @public
      * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
+     * @param {string} [color]
+     * @param {Billboard} [billboard]
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
-    async addKmlFromUrl(url) {
+    async addKmlFromUrl(url, color = null, billboard = null) {
         const kml = await this._getKmlFromUrl(url);
         const coordonates = this._extractCoordonatesFromKml(kml);
         const { entities, extent } = this._convertCoordonatesIntoEntities(
             [coordonates],
-            this._color,
-            this._billboard
+            color || this._color,
+            billboard || this._billboard
         );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));

package/src/og/layer/Layer.js

@@ -497,7 +497,10 @@ class Layer {
                 if (this._isBaseLayer && visibility) {
                     this._planet.setBaseLayer(this);
                 }
-                this._planet.updateVisibleLayers();
+                this._planet.updateVisibleLayers();
+                if (visibility) {
+                    this._planet._preLoad();
+                }
             }
             this.events.dispatch(this.events.visibilitychange, this);
         }

package/src/og/scene/Planet.js

@@ -843,19 +843,9 @@ export class Planet extends RenderNode {
     }
 
     _preLoad() {
-        this._skipPreRender = false;
-
-        // Zoom 0
-        this._quadTree.segment.passReady = true;
-        this._quadTree.renderNode(true);
-        this._normalMapCreator.drawSingle(this._quadTree.segment);
+        this._clearRenderedNodeList();
 
-        // Zoom 1
-        for (let i = 0; i < this._quadTree.nodes.length; i++) {
-            this._quadTree.nodes[i].segment.passReady = true;
-            this._quadTree.nodes[i].renderNode(true);
-            this._normalMapCreator.drawSingle(this._quadTree.nodes[i].segment);
-        }
+        this._skipPreRender = false;
 
         // Same for poles
         this._quadTreeNorth.segment.passReady = true;
@@ -877,6 +867,18 @@ export class Planet extends RenderNode {
             this._quadTreeSouth.nodes[i].renderNode(true);
             this._normalMapCreator.drawSingle(this._quadTreeSouth.nodes[i].segment);
         }
+
+        // Zoom 1
+        for (let i = 0; i < this._quadTree.nodes.length; i++) {
+            this._quadTree.nodes[i].segment.passReady = true;
+            this._quadTree.nodes[i].renderNode(true);
+            this._normalMapCreator.drawSingle(this._quadTree.nodes[i].segment);
+        }
+
+        // Zoom 0
+        this._quadTree.segment.passReady = true;
+        this._quadTree.renderNode(true);
+        this._normalMapCreator.drawSingle(this._quadTree.segment);
     }
 
     /**
@@ -955,8 +957,6 @@ export class Planet extends RenderNode {
                     html += "<li>" + li._attribution + "</li>";
                 }
 
-                this._preLoad();
-
             } else if (li._fading && li._fadingOpacity > 0) {
                 if (li.hasImageryTiles()) {
                     this.visibleTileLayers.push(li);

package/src/og/shaders/geoObject.js

@@ -30,7 +30,8 @@ export const geo_object = () =>
             aDirection: { type: "vec3", divisor: 1 },
             aPitchRoll: { type: "vec2", divisor: 1 },
             aColor: { type: "vec4", divisor: 1 },
-            aScale: { type: "float", divisor: 1 }
+            aScale: { type: "float", divisor: 1 },
+            aDispose: { type: "float", divisor: 1 }
         },
         vertexShader: `precision highp float;
 
@@ -42,6 +43,7 @@ export const geo_object = () =>
             attribute vec2 aPitchRoll;
             attribute vec4 aColor;
             attribute float aScale;
+            attribute float aDispose;
             
             uniform vec3 uScaleByDistance;
             uniform mat4 projectionMatrix;
@@ -54,11 +56,13 @@ export const geo_object = () =>
             varying vec3 vNormal;
             varying vec4 vPosition;           
             varying vec4 vColor;
+            varying float vDispose;
             
             const float RADIANS = 3.141592653589793 / 180.0;
 
             void main(void) {
             
+                vDispose = aDispose;
                 vColor = aColor;
                 float roll = aPitchRoll.y * RADIANS;
                 mat3 rotZ = mat3(
@@ -91,7 +95,7 @@ export const geo_object = () =>
 
                 vPosition = viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
 
-                gl_Position = projectionMatrix * vPosition;
+                gl_Position = mix(vec4(0.0, 0.0, 0.0, 0.0), projectionMatrix * vPosition, aDispose);
             }`,
         fragmentShader: `precision highp float;
 
@@ -135,7 +139,7 @@ export const geo_object_picking = () =>
 
             eyePositionHigh: "vec3",
             eyePositionLow: "vec3",
-            pickingScale: "float",
+            pickingScale: "float"
 
         },
         attributes: {
@@ -145,7 +149,8 @@ export const geo_object_picking = () =>
             aDirection: { type: "vec3", divisor: 1 },
             aPitchRoll: { type: "vec2", divisor: 1 },
             aPickingColor: { type: "vec3", divisor: 1 },
-            aScale: { type: "float", divisor: 1 }
+            aScale: { type: "float", divisor: 1 },
+            aDispose: { type: "float", divisor: 1 }
         },
         vertexShader: `precision highp float;
 
@@ -156,6 +161,7 @@ export const geo_object_picking = () =>
             attribute vec2 aPitchRoll;
             attribute vec3 aPickingColor;
             attribute float aScale;
+            attribute float aDispose;
             
             uniform vec3 uScaleByDistance;
             uniform mat4 projectionMatrix;
@@ -165,12 +171,14 @@ export const geo_object_picking = () =>
             uniform vec3 eyePositionHigh;
             uniform vec3 eyePositionLow;
 
+            varying float vDispose;
             varying vec3 vColor;
             
             const float RADIANS = 3.141592653589793 / 180.0;
 
             void main(void) {
             
+                vDispose = aDispose;
                 vColor = aPickingColor;
                 float roll = aPitchRoll.y * RADIANS;
                 mat3 rotZ = mat3(
@@ -200,12 +208,13 @@ export const geo_object_picking = () =>
                 mat4 viewMatrixRTE = viewMatrix;
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
-                gl_Position = projectionMatrix *viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
+                gl_Position = mix(vec4(0.0, 0.0, 0.0, 0.0),  projectionMatrix *viewMatrixRTE * vec4(highDiff + lowDiff, 1.0), aDispose);
             }`,
         fragmentShader:
             `precision highp float;
             varying vec3 vColor;
+            varying float vDispose;
             void main () {
-                gl_FragColor = vec4(vColor, 1.0);
+                gl_FragColor = vec4(vColor, vDispose);
             }`
     });

package/types/Clock.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Class represents application timer that stores custom current julian datetime, and time speed multiplier.
+ * @class
+ * @param {Object} [params] - Clock parameters:
+ * @param {number} [params.startDate=0.0] - Julian start date.
+ * @param {number} [params.endDate=0.0] - Julian end date.
+ * @param {number} [params.currentDate] - Julian current date. Default: current date.
+ * @param {number} [params.multiplier=1.0] - Time speed multiolier.
+ */
+export class Clock {
+    static set _staticCounter(arg: any);
+    static get _staticCounter(): any;
+    /**
+     *
+     * @param {Object} [params] - Clock parameters:
+     */
+    constructor(params?: any);
+    _id: number;
+    /**
+     * Clock name.
+     * @public
+     * @type {string}
+     */
+    public name: string;
+    /**
+     * Clock events.
+     * @public
+     * @type {Events}
+     */
+    public events: Events;
+    /**
+     * Start julian date clock loop.
+     * @public
+     * @type {number}
+     */
+    public startDate: number;
+    /**
+     * End julian date clock loop.
+     * @public
+     * @type {number}
+     */
+    public endDate: number;
+    /**
+     * Current julian datetime.
+     * @public
+     * @type {number}
+     */
+    public currentDate: number;
+    /**
+     * Timer speed multiplier.
+     * @public
+     * @type {number}
+     */
+    public multiplier: number;
+    /**
+     * Animation frame delta time.
+     * @public
+     * @readonly
+     * @type {number}
+     */
+    public readonly deltaTicks: number;
+    /**
+     * Timer activity.
+     * @public
+     * @type {boolean}
+     */
+    public active: boolean;
+    _intervalDelay: number;
+    _intervalStart: number;
+    _intervalCallback: any;
+    clearInterval(): void;
+    setInterval(delay: any, callback: any): void;
+    /**
+     * Sets current clock datetime.
+     * @public
+     * @param {Object} date - JavaScript Date object.
+     */
+    public setDate(date: any): void;
+    /**
+     * Returns current application date.
+     * @public
+     * @returns {Date} - Current date.
+     */
+    public getDate(): Date;
+    reset(): void;
+    _tick(dt: any): void;
+    /**
+     * @public
+     * @param {Clock} clock - Clock instance to compare.
+     * @returns {boolean} - Returns true if a clock is the same instance.
+     */
+    public equal(clock: Clock): boolean;
+}
+import { Events } from "./Events.js";

package/types/Deferred.d.ts

@@ -0,0 +1,6 @@
+export function Deferred(): void;
+export class Deferred {
+    resolve: any;
+    reject: any;
+    promise: Promise<any>;
+}

package/types/Events.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Base events class to handle custom events.
+ * @class
+ */
+export class Events {
+    static set _staticCounter(arg: any);
+    static get _staticCounter(): any;
+    /**
+     *
+     * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
+     * @param {*} [sender]
+     */
+    constructor(eventNames?: Array<string>, sender?: any);
+    /**
+     * Registered event names.
+     * @protected
+     * @type {Array.<string>}
+     */
+    protected _eventNames: Array<string>;
+    _sender: any;
+    /**
+     * Stop propagation flag
+     * @protected
+     * @type {boolean}
+     */
+    protected _stopPropagation: boolean;
+    _stampCache: {};
+    __id: number;
+    bindSender(sender: any): void;
+    /**
+     * Function that creates event object properties that would be dispatched.
+     * @public
+     * @param {Array.<string>} eventNames - Specified event names list.
+     */
+    public registerNames(eventNames: Array<string>): void;
+    _getStamp(name: any, id: any, ogid: any): string;
+    /**
+     * Returns true if event callback has stamped.
+     * @protected
+     * @param {Object} name - Event identifier.
+     * @param {Object} obj - Event callback.
+     * @return {boolean} -
+     */
+    protected _stamp(name: any, obj: any): boolean;
+    /**
+     * Attach listener.
+     * @public
+     * @param {string} name - Event name to listen.
+     * @param {eventCallback} callback - Event callback function.
+     * @param {Object} sender - Event callback function owner.
+     */
+    public on(name: string, callback: eventCallback, sender: any, priority?: number): void;
+    /**
+     * Stop listening event name with specified callback function.
+     * @public
+     * @param {string} name - Event name.
+     * @param {eventCallback} callback - Attached  event callback.
+     */
+    public off(name: string, callback: eventCallback): void;
+    /**
+     * Dispatch event.
+     * @public
+     * @param {Object} event - Event instance property that created by event name.
+     * @param {Object} [obj] - Event object.
+     */
+    public dispatch(event: any, ...args: any[]): boolean;
+    /**
+     * Brakes events propagation.
+     * @public
+     */
+    public stopPropagation(): void;
+    /**
+     * Removes all events.
+     * @public
+     */
+    public clear(): void;
+}