@openglobus/og 0.15.1 → 0.15.3

package/src/og/ui/icons.js

@@ -0,0 +1,3 @@
+export const CLOSE_ICON = `<svg className="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor; overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z"/>
+</svg>`

package/src/og/utils/FontAtlas.js

@@ -4,9 +4,9 @@
 
 'use strict';
 
+import { Deferred } from '../Deferred.js';
 import { Rectangle } from '../Rectangle.js';
 import { TextureAtlas, TextureAtlasNode } from './TextureAtlas.js';
-import { Deferred } from '../Deferred.js';
 
 //TODO: get the value from shader module
 const MAX_SIZE = 11;
@@ -219,4 +219,4 @@ class FontAtlas {
     }
 }
 
-export { FontAtlas };
+export { FontAtlas };

package/src/og/utils/GeoImageCreator.js

@@ -4,7 +4,6 @@ import { LonLat } from '../LonLat.js';
 import * as utils from '../utils/shared.js';
 import { Framebuffer } from '../webgl/Framebuffer.js';
 import { Program } from '../webgl/Program.js';
-import { types } from '../webgl/types.js';
 
 export class GeoImageCreator {
 

package/src/og/utils/NormalMapCreator.js

@@ -4,12 +4,11 @@
 
 "use strict";
 
+import { Lock } from "../Lock.js";
 import * as quadTree from "../quadTree/quadTree.js";
+import { QueueArray } from "../QueueArray.js";
 import { Framebuffer } from "../webgl/Framebuffer.js";
-import { Lock } from "../Lock.js";
 import { Program } from "../webgl/Program.js";
-import { types } from "../webgl/types.js";
-import { QueueArray } from "../QueueArray.js";
 
 export class NormalMapCreator {
 
@@ -313,6 +312,7 @@ export class NormalMapCreator {
 
         gl.disable(gl.CULL_FACE);
         gl.disable(gl.DEPTH_TEST);
+        gl.disable(gl.BLEND);
 
         if (segment.terrainReady && this._drawNormalMap(segment)) {
             segment.normalMapReady = true;
@@ -323,9 +323,9 @@ export class NormalMapCreator {
         }
         segment._inTheQueue = false;
 
-        gl.disable(gl.BLEND);
         gl.enable(gl.DEPTH_TEST);
         gl.enable(gl.CULL_FACE);
+        gl.enable(gl.BLEND);
 
         this._framebuffer.deactivate();
     }
@@ -339,6 +339,7 @@ export class NormalMapCreator {
 
             gl.disable(gl.CULL_FACE);
             gl.disable(gl.DEPTH_TEST);
+            gl.disable(gl.BLEND);
 
             var deltaTime = 0,
                 startTime = window.performance.now();
@@ -356,7 +357,7 @@ export class NormalMapCreator {
                 deltaTime = window.performance.now() - startTime;
             }
 
-            gl.disable(gl.BLEND);
+            gl.enable(gl.BLEND);
             gl.enable(gl.DEPTH_TEST);
             gl.enable(gl.CULL_FACE);
 

package/src/og/utils/TerrainWorker.js

@@ -570,4 +570,4 @@ const _programm =
             ]);
     }`;
 
-export { TerrainWorker };
+export { TerrainWorker };

package/src/og/utils/VectorTileCreator.js

@@ -198,9 +198,10 @@ export class VectorTileCreator {
 
             gl.disable(gl.CULL_FACE);
             gl.disable(gl.DEPTH_TEST);
-            gl.enable(gl.BLEND);
-            gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+            // gl.enable(gl.BLEND);
+            // gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+            // gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
             var hLine = h.programs.vectorTileLineRasterization,
                 hPoly = h.programs.vectorTilePolygonRasterization;
@@ -396,7 +397,6 @@ export class VectorTileCreator {
                 // prevLayerId = material.layer._id;
             }
 
-            gl.disable(gl.BLEND);
             gl.enable(gl.DEPTH_TEST);
             gl.enable(gl.CULL_FACE);
 

package/src/og/utils/shared.js

@@ -4,12 +4,12 @@
 
 "use strict";
 
-import { colorTable } from "./colorTable.js";
 import { Extent } from "../Extent.js";
 import { LonLat } from "../LonLat.js";
 import { Vec2 } from "../math/Vec2.js";
 import { Vec3 } from "../math/Vec3.js";
 import { Vec4 } from "../math/Vec4.js";
+import { colorTable } from "./colorTable.js";
 
 export function getDefault(param, def) {
     return param != undefined ? param : def;

package/src/og/webgl/Framebuffer.js

@@ -77,6 +77,8 @@ export class Framebuffer {
 
         this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
 
+        this._renderbufferTarget = options.renderbufferTarget != undefined ? options.renderbufferTarget : "DEPTH_ATTACHMENT";
+
         this._useDepth = options.useDepth != undefined ? options.useDepth : true;
 
         /**
@@ -170,7 +172,7 @@ export class Framebuffer {
             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.framebufferRenderbuffer(gl.FRAMEBUFFER, gl[this._renderbufferTarget], gl.RENDERBUFFER, this._depthRenderbuffer);
             gl.bindRenderbuffer(gl.RENDERBUFFER, null);
         }
 

package/src/og/webgl/Handler.js

@@ -4,14 +4,14 @@
 
 "use strict";
 
-import { cons } from "../cons.js";
 import { Clock } from "../Clock.js";
+import { cons } from "../cons.js";
+import { Events } from "../Events.js";
 import { ImageCanvas } from "../ImageCanvas.js";
+import { Vec2 } from "../math/Vec2.js";
+import { Stack } from "../Stack.js";
 import { isEmpty } from "../utils/shared.js";
 import { ProgramController } from "./ProgramController.js";
-import { Stack } from "../Stack.js";
-import { Vec2 } from "../math/Vec2.js";
-import { Events } from "../Events.js";
 
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 
@@ -99,6 +99,8 @@ class Handler {
         this._params.extensions = this._params.extensions || [];
         this._oneByHeight = 1.0 / (this._params.height * this._params.pixelRatio);
 
+        this._params.context.stencil = true;
+
         /**
          * Current WebGL extensions. Becomes here after context initialization.
          * @public
@@ -145,8 +147,6 @@ class Handler {
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.initialize();
         }
-
-        this.createTexture_n = this.gl.type === "webgl2" ? this.createTexture_n_webgl2 : this.createTexture_n_webgl1;
     }
 
     /**
@@ -176,11 +176,18 @@ class Handler {
         let ctx = null;
 
         try {
-            for (let i = 0; i < CONTEXT_TYPE.length; i++) {
-                ctx = canvas.getContext(CONTEXT_TYPE[i], contextAttributes);
-                if (ctx) {
-                    ctx.type = CONTEXT_TYPE[i];
-                    break;
+            let urlParams = new URLSearchParams(location.search);
+            let ver = urlParams.get('og_ver');
+            if (ver) {
+                ctx = canvas.getContext(ver, contextAttributes);
+                ctx.type = ver;
+            } else {
+                for (let i = 0; i < CONTEXT_TYPE.length; i++) {
+                    ctx = canvas.getContext(CONTEXT_TYPE[i], contextAttributes);
+                    if (ctx) {
+                        ctx.type = CONTEXT_TYPE[i];
+                        break;
+                    }
                 }
             }
         } catch (ex) {
@@ -613,64 +620,72 @@ class Handler {
         }
 
         this.gl = Handler.getContext(this.canvas, this._params.context);
-        this._initialized = true;
-
-        /** Sets deafult extensions */
-        this._params.extensions.push("EXT_texture_filter_anisotropic");
-
-        if (this.gl.type === "webgl") {
-            this._params.extensions.push("OES_standard_derivatives");
-            this._params.extensions.push("OES_element_index_uint");
-            this._params.extensions.push("WEBGL_depth_texture");
-            this._params.extensions.push("ANGLE_instanced_arrays");
-            //this._params.extensions.push("WEBGL_draw_buffers");
-            //this._params.extensions.push("EXT_frag_depth");
-        } else {
-            this._params.extensions.push("EXT_color_buffer_float");
-            this._params.extensions.push("OES_texture_float_linear");
-            //this._params.extensions.push("WEBGL_draw_buffers");
-        }
 
-        let i = this._params.extensions.length;
-        while (i--) {
-            this.initializeExtension(this._params.extensions[i], true);
-        }
+        if(this.gl) {
+            this._initialized = true;
 
-        if (this.gl.type === "webgl") {
-            this.createTexture_n = this.createTexture_n_webgl1.bind(this);
-            this.createTexture_l = this.createTexture_l_webgl1.bind(this);
-            this.createTexture_mm = this.createTexture_mm_webgl1.bind(this);
-            this.createTexture_a = this.createTexture_a_webgl1.bind(this);
-        } else {
-            this.createTexture_n = this.createTexture_n_webgl2.bind(this);
-            this.createTexture_l = this.createTexture_l_webgl2.bind(this);
-            this.createTexture_mm = this.createTexture_mm_webgl2.bind(this);
-            this.createTexture_a = this.createTexture_a_webgl2.bind(this);
-        }
+            /** Sets default extensions */
+            this._params.extensions.push("EXT_texture_filter_anisotropic");
 
-        this.createTexture["NEAREST"] = this.createTexture_n;
-        this.createTexture["LINEAR"] = this.createTexture_l;
-        this.createTexture["MIPMAP"] = this.createTexture_mm;
-        this.createTexture["ANISOTROPIC"] = this.createTexture_a;
+            if (this.gl.type === "webgl") {
+                this._params.extensions.push("OES_standard_derivatives");
+                this._params.extensions.push("OES_element_index_uint");
+                this._params.extensions.push("WEBGL_depth_texture");
+                this._params.extensions.push("ANGLE_instanced_arrays");
+                //this._params.extensions.push("WEBGL_draw_buffers");
+                //this._params.extensions.push("EXT_frag_depth");
+            } else {
+                this._params.extensions.push("EXT_color_buffer_float");
+                this._params.extensions.push("OES_texture_float_linear");
+                //this._params.extensions.push("WEBGL_draw_buffers");
+            }
 
-        if (!this.extensions.EXT_texture_filter_anisotropic) {
-            this.createTextureDefault = this.createTexture_mm;
-        } else {
-            this.createTextureDefault = this.createTexture_a;
-        }
+            let i = this._params.extensions.length;
+            while (i--) {
+                this.initializeExtension(this._params.extensions[i], true);
+            }
+
+            if (this.gl.type === "webgl") {
+                this.createTexture_n = this.createTexture_n_webgl1.bind(this);
+                this.createTexture_l = this.createTexture_l_webgl1.bind(this);
+                this.createTexture_mm = this.createTexture_mm_webgl1.bind(this);
+                this.createTexture_a = this.createTexture_a_webgl1.bind(this);
+            } else {
+                this.createTexture_n = this.createTexture_n_webgl2.bind(this);
+                this.createTexture_l = this.createTexture_l_webgl2.bind(this);
+                this.createTexture_mm = this.createTexture_mm_webgl2.bind(this);
+                this.createTexture_a = this.createTexture_a_webgl2.bind(this);
+            }
 
-        /** Initilalize shaders and rendering parameters*/
-        this._initPrograms();
-        this._setDefaults();
+            this.createTexture["NEAREST"] = this.createTexture_n;
+            this.createTexture["LINEAR"] = this.createTexture_l;
+            this.createTexture["MIPMAP"] = this.createTexture_mm;
+            this.createTexture["ANISOTROPIC"] = this.createTexture_a;
 
-        this.observer = new IntersectionObserver((entries) => {
-            this._toggleVisibilityChange(entries[0].isIntersecting === true);
-        }, { threshold: 0 });
-        this.observer.observe(this.canvas);
+            if (!this.extensions.EXT_texture_filter_anisotropic) {
+                this.createTextureDefault = this.createTexture_mm;
+            } else {
+                this.createTextureDefault = this.createTexture_a;
+            }
 
-        document.addEventListener("visibilitychange", () => {
-            this._toggleVisibilityChange(document.visibilityState === 'visible');
-        });
+            /** Initilalize shaders and rendering parameters*/
+            this._initPrograms();
+            this._setDefaults();
+
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                this._toggleVisibilityChange(entries[0].isIntersecting === true);
+            }, { threshold: 0 });
+            this.intersectionObserver.observe(this.canvas);
+
+            this.resizeObserver = new ResizeObserver(entries => {
+                this._toggleVisibilityChange(entries[0].contentRect.width !== 0 && entries[0].contentRect.height !== 0);
+            });
+            this.resizeObserver.observe(this.canvas);
+
+            document.addEventListener("visibilitychange", () => {
+                this._toggleVisibilityChange(document.visibilityState === 'visible');
+            });
+        }
     }
 
     _toggleVisibilityChange(visibility) {

package/src/og/webgl/Multisample.js

@@ -123,13 +123,24 @@ export class Multisample {
         for (var i = 0; i < this.renderbuffers.length; i++) {
             let rb = gl.createRenderbuffer();
             gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
-            gl.renderbufferStorageMultisample(
-                gl.RENDERBUFFER,
-                this._msaa,
-                gl[this._internalFormat],
-                this._width,
-                this._height
-            );
+
+            if (this._msaa > 0) {
+                gl.renderbufferStorageMultisample(
+                    gl.RENDERBUFFER,
+                    this._msaa,
+                    gl[this._internalFormat],
+                    this._width,
+                    this._height
+                );
+            } else {
+                gl.renderbufferStorage(
+                    gl.RENDERBUFFER,
+                    gl[this._internalFormat],
+                    this._width,
+                    this._height
+                );
+            }
+
             gl.framebufferRenderbuffer(
                 gl.FRAMEBUFFER,
                 gl.COLOR_ATTACHMENT0 + i,

package/src/og/webgl/Program.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
-import { callbacks } from "./callbacks.js";
 import { cons } from "../cons.js";
-import { typeStr, types } from "./types.js";
+import { callbacks } from "./callbacks.js";
+import { types, typeStr } from "./types.js";
 
 const itemTypes = ["BYTE", "SHORT", "UNSIGNED_BYTE", "UNSIGNED_SHORT", "FLOAT", "HALF_FLOAT"];
 

package/src/og/webgl/index.js

@@ -1,8 +1,8 @@
 import { Framebuffer } from "./Framebuffer.js";
 import { Handler } from "./Handler.js";
 import { Multisample } from "./Multisample.js";
-import { types } from "./types.js";
 import { Program } from "./Program.js";
+import { types } from "./types.js";
 
 export {
     Framebuffer,
@@ -10,4 +10,4 @@ export {
     Multisample,
     types,
     Program
-};
+};

package/types/Popup.d.ts

@@ -1,42 +1,29 @@
-export class Popup {
-    static set _staticCounter(arg: any);
-    static get _staticCounter(): any;
-    /**
-     *
-     * @param {*} options
-     */
-    constructor(options: any);
-    _id: number;
-    events: Events;
-    _template: string;
-    el: ChildNode;
-    _title: any;
+export class Popup extends View {
     _content: any;
-    _contentEl: any;
-    _titleEl: any;
+    $content: any;
+    $tip: any;
+    $title: any;
     _planet: any;
     _offset: any;
     _lonLat: any;
     _cartPos: Vec3;
     _visibility: any;
-    _renderTemplate(): ChildNode;
     _updatePosition(): void;
     setScreen(p: any): void;
     get clientWidth(): any;
     get clientHeight(): any;
     setOffset(x?: number, y?: number): Popup;
     render(params: any): Popup;
-    _tipEl: any;
     setVisibility(visibility: any): Popup;
     getContainer(): any;
     getToolbarContainer(): any;
     show(): Popup;
     hide(): Popup;
     setCartesian3v(cart: any, height?: number): Popup;
-    setTitle(html: any): Popup;
-    setLonLat(lonLat: any): Popup;
-    setContent(content: any): Popup;
+    setTitle(html: any): void;
+    setLonLat(lonLat: any): void;
+    setContent(content: any): void;
     clear(): void;
 }
-import { Events } from "./Events.js";
+import { View } from "./ui/View.js";
 import { Vec3 } from "./math/Vec3.js";

package/types/camera/PlanetCamera.d.ts

@@ -83,6 +83,7 @@ export class PlanetCamera extends Camera {
     _completeCallback: any;
     _flying: boolean;
     _checkTerrainCollision: boolean;
+    _velCart: Vec3;
     setTerrainCollisionActivity(isActive: any): void;
     eyeNorm: Vec3;
     updateGeodeticPosition(): void;

package/types/control/Sun.d.ts

@@ -43,6 +43,7 @@ export class Sun extends Control {
     _lightOn: boolean;
     _stopped: any;
     stop(): void;
+    start(): void;
     bindClock(clock: any): void;
     _draw(): void;
     _f: number;

package/types/control/ruler/RulerScene.d.ts

@@ -21,14 +21,16 @@ export class RulerScene extends RenderNode {
     _onLclick_: any;
     _onMouseMove_: any;
     _onLdblclick_: any;
+    _onLUp_: any;
     _onCornerEnter_: any;
     _onCornerLeave_: any;
     _onCornerLdown_: any;
     _onCornerLup_: any;
     _deactivate(): void;
     _onCornerLdown(e: any): void;
-    _anchorLonLat: LonLat;
-    _onCornerLup(e: any): void;
+    _anchorLonLat: import("../../LonLat.js").LonLat;
+    _onLUp(): void;
+    _onCornerLup(): void;
     _onCornerEnter(e: any): void;
     _onCornerLeave(e: any): void;
     _onLdblclick(): void;
@@ -44,4 +46,3 @@ import { RenderNode } from "../../scene/RenderNode.js";
 import { Vec2 } from "../../math/Vec2.js";
 import { Entity } from "../../entity/Entity.js";
 import { Vector } from "../../layer/Vector.js";
-import { LonLat } from "../../LonLat.js";

package/types/entity/Entity.d.ts

@@ -5,14 +5,12 @@
  * @class
  * @param {Object} [options] - Entity options:
  * @param {string} [options.name] - A human readable name to display to users. It does not have to be unique.
- * @param {Vec3|Array.<number>} [options.cartesian] - Spatial entities like billboard, label, sphere etc. cartesian position.
- * @param {LonLat} [options.lonlat] - Geodetic coordiantes for an entities like billboard, label, sphere etc.
+ * @param {Vec3|Array.<number>} [options.cartesian] - Spatial entities like billboard, label etc. cartesian position.
+ * @param {LonLat} [options.lonlat] - Geodetic coordiantes for an entities like billboard, label etc.
  * @param {boolean} [options.aground] - True for entities that have to be placed on the relief.
  * @param {boolean} [options.visibility] - Entity visibility.
  * @param {*} [options.billboard] - Billboard options(see {@link og.Billboard}).
  * @param {*} [options.label] - Label options(see {@link og.Label}).
- * @param {*} [options.sphere] - Sphere options(see {@link og.shape.Sphere}).
- * @param {*} [options.box] - Sphere options(see {@link og.shape.Box}).
  * @param {*} [options.polyline] - Polyline options(see {@link og.Polyline}).
  * @param {*} [options.ray] - Ray options(see {@link og.Ray}).
  * @param {*} [options.pointCloud] - Point cloud options(see {@link og.PointCloud}).
@@ -110,7 +108,6 @@ export class Entity {
     _featureConstructorArray: {
         billboard: (typeof Billboard | ((billboard: Billboard) => Billboard))[];
         label: (typeof Label | ((label: Label) => Label))[];
-        sphere: (typeof Sphere | ((shape: BaseShape) => Polyline))[];
         polyline: (typeof Polyline | ((polyline: Polyline) => Polyline))[];
         pointCloud: (typeof PointCloud | ((pointCloud: PointCloud) => PointCloud))[];
         geometry: (typeof Geometry | ((geometry: Geometry) => Geometry))[];
@@ -130,12 +127,6 @@ export class Entity {
      * @type {Label}
      */
     public label: Label;
-    /**
-     * Shape entity.
-     * @public
-     * @type {shape.BaseShape}
-     */
-    public shape: shape.BaseShape;
     /**
      * Polyline entity.
      * @public
@@ -280,13 +271,6 @@ export class Entity {
      * @returns {Ray} -
      */
     public setRay(ray: Ray): Ray;
-    /**
-     * Sets entity shape.
-     * @public
-     * @param {BaseShape} shape - Shape object.
-     * @returns {Polyline} -
-     */
-    public setShape(shape: BaseShape): Polyline;
     /**
      * Sets entity polyline.
      * @public
@@ -346,7 +330,6 @@ import { Vec3 } from "../math/Vec3.js";
 import { LonLat } from "../LonLat.js";
 import { Billboard } from "./Billboard.js";
 import { Label } from "./Label.js";
-import { Sphere } from "../shapes/Sphere.js";
 import { Polyline } from "./Polyline.js";
 import { PointCloud } from "./PointCloud.js";
 import { Geometry } from "./Geometry.js";

package/types/entity/EntityCollection.d.ts

@@ -92,12 +92,6 @@ export class EntityCollection {
      * @type {LabelHandler}
      */
     public labelHandler: LabelHandler;
-    /**
-     * Shape handler
-     * @public
-     * @type {ShapeHandler}
-     */
-    public shapeHandler: ShapeHandler;
     /**
      * Polyline handler
      * @public
@@ -301,7 +295,6 @@ export class EntityCollection {
 }
 import { BillboardHandler } from "./BillboardHandler.js";
 import { LabelHandler } from "./LabelHandler.js";
-import { ShapeHandler } from "./ShapeHandler.js";
 import { PolylineHandler } from "./PolylineHandler.js";
 import { RayHandler } from "./RayHandler.js";
 import { PointCloudHandler } from "./PointCloudHandler.js";