@openglobus/og 0.13.8 → 0.13.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openglobus/og",
-  "version": "0.13.8",
-  "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.",
+  "version": "0.13.10",
+  "description": "[OpenGlobus](https://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"
   },
@@ -9,16 +9,17 @@
   "style": "./css/og.css",
   "types": "./types/index.d.ts",
   "scripts": {
-    "api": "jsdoc -t ./jsdoc -r ./src/ -c ./jsdoc/conf.json -d ./api",
+    "api": "jsdoc -r ./src/ -c ./jsdoc.conf.json -d ./api",
     "serve": "ws",
     "build": "rollup -c",
     "webgl": "rollup -c --environment entry:webgl",
     "core": "rollup -c --environment entry:core",
-    "test": "jest --env=jsdom",
+    "test": "jest --env=jsdom --runInBand --ci --coverage=false",
     "test_watch": "jest --env=jsdom --watch",
     "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/"
+    "compile_js_as_ts": "tsc src/og/index.js --AllowJs --checkJs --outDir dist/@openglobus/src/",
+    "font": "node ./fonts/index.js"
   },
   "repository": {
     "type": "git",
@@ -30,7 +31,7 @@
     "url": "https://github.com/openglobus/openglobus/issues",
     "email": "mgevlich@gmail.com"
   },
-  "homepage": "http://www.openglobus.org",
+  "homepage": "https://www.openglobus.org",
   "exports": {
     ".": "./src/og/index.js",
     "./layer": "./src/og/layer/index.js",
@@ -43,24 +44,24 @@
     "./css/og.css": "./css/og.css"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.18.9",
     "@rollup/plugin-json": "^4.1.0",
-    "@types/jest": "^27.4.0",
-    "eslint": "^8.7.0",
+    "@types/jest": "^28.1.6",
+    "eslint": "^8.20.0",
     "jaguarjs-jsdoc": "^1.1.0",
-    "jest": "^27.4.7",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^28.1.3",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-webgl-canvas-mock": "^0.2.3",
-    "jsdoc": "^3.6.10",
-    "lint-staged": "^12.3.1",
-    "local-web-server": "^5.1.1",
-    "msdf-bmfont-xml": "^2.5.4",
-    "postcss": "^8.4.5",
-    "prettier": "^2.5.1",
-    "rollup": "^2.66.1",
+    "jsdoc": "^3.6.11",
+    "lint-staged": "^13.0.3",
+    "local-web-server": "^5.2.1",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
+    "rollup": "^2.77.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.5"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/og/Globe.js

@@ -69,7 +69,7 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @param {Number} [options.maxEqualZoomAltitude=15000000.0] - Maximal altitude since segments on the screen bacame the same zoom level
  * @param {Number} [options.minEqualZoomAltitude=10000.0] - Minimal altitude since segments on the screen bacame the same zoom level
  * @param {Number} [options.minEqualZoomCameraSlope=0.8] - Minimal camera slope above te globe where segments on the screen bacame the same zoom level
- * @param {Number} [options.loadingBatchSize=12] - 
+ * @param {Number} [options.loadingBatchSize=12] -
  */
 
 class Globe {
@@ -103,15 +103,6 @@ class Globe {
         this.div.appendChild(this._canvas);
         this.div.classList.add("ogViewport");
 
-        document.addEventListener("visibilitychange", () => {
-            if (document.visibilityState === 'visible') {
-                this.renderer.handler.start();
-                this.renderer && this.renderer.resize();
-            } else {
-                this.renderer.handler.stop();
-            }
-        });
-
         function _disableWheel(e) {
             e.preventDefault();
         }
@@ -137,12 +128,13 @@ class Globe {
                 context: {
                     alpha: false,
                     antialias: false,
-                    powerPreference: "high-performance"
+                    powerPreference: "high-performance",
+                    premultipliedAlpha: true
                 }
             }), {
-            autoActivate: false,
-            backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255))
-        }
+                autoActivate: false,
+                backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255))
+            }
         );
         this.renderer.initialize();
         this.renderer.div = this.div;
@@ -190,9 +182,16 @@ class Globe {
             });
         }
 
-        // Attach terrain provider
+        // Attach terrain provider (can be one object or array)
         if (options.terrain) {
-            this.planet.setTerrain(options.terrain);
+            if (Array.isArray(options.terrain)) {
+                this.planet.setTerrain(options.terrain[0]); // If array get the terrain from 1st element
+                this.planet._terrainPool = options.terrain;
+            } else {
+                this.planet.setTerrain(options.terrain);
+                this.planet._terrainPool = [options.terrain];
+            }
+
         } else {
             this.planet.setTerrain(new EmptyTerrain());
         }

package/src/og/Object3d.js

@@ -31,6 +31,10 @@ class Object3d {
             this._normals = data.normals || [];
         } else {
             this._normals = Object3d.getNormals(this._vertices);
+            this._indexes = new Array(this._vertices.length);
+            for (let i = 0, len = this._indexes.length; i < len; i++) {
+                this._indexes[i] = i;
+            }
         }
     }
 
@@ -379,6 +383,35 @@ class Object3d {
             ]
         });
     }
+
+    static createArrow(back = 0.0, height = 2.1, front = -15) {
+        return new Object3d({
+            vertices: [
+                0, height, 0,
+                7, 0, 6,
+                0, 0, front,
+
+                0, 0, back,
+                7, 0, 6,
+                0, height, 0,
+
+                -7, 0, 6,
+                0, 0, back,
+                0, height, 0,
+
+                -7, 0, 6,
+                0, height, 0,
+                0, 0, front,
+
+                -7, 0, 6,
+                0, 0, front,
+                0, 0, back,
+                0, 0, back,
+                0, 0, front,
+                7, 0, 6
+            ]
+        });
+    }
 }
 
 export { Object3d };

package/src/og/control/GeoImageDragControl.js

@@ -1,76 +1,103 @@
-/**
- * @module og/control/GeoImageDragControl
- */
-
-'use strict';
-
-import { Control } from './Control.js';
-import { BaseGeoImage } from '../layer/BaseGeoImage.js';
-
-class GeoImageDragControl extends Control {
-    constructor(options) {
-        super(options);
-
-        options = options || {};
-
-        this._cornerIndex = -1;
-        this._catchCorner = false;
-
-    }
-
-    oninit() {
-        let p = this.planet;
-
-        p.events.on('layeradd', function (e) {
-            this._bindLayer(e);
-        }, this);
-
-        for (let i = 0; i < p.layers.length; i++) {
-            if (p.layers[i] instanceof BaseGeoImage) {
-                this._bindLayer(p.layers[i]);
-            }
-        }
-    }
-
-    _bindLayer(layer) {
-        if (layer instanceof BaseGeoImage) {
-
-            var p = this.planet;
-
-            layer.events.on('mousemove', function (ms) {
-                if (this._active) {
-                    if (this._catchCorner) {
-                        var corners = layer.getCornersLonLat();
-                        corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
-                        layer.setCornersLonLat(corners);
-                    } else {
-                        this._cornerIndex = -1;
-                        for (var i = 0; i < layer._cornersWgs84.length; i++) {
-                            var ground = p.getLonLatFromPixelTerrain(ms, true);
-                            if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
-                                this._cornerIndex = i;
-                                break;
-                            }
-                        }
-                    }
-                }
-            }, this);
-
-            layer.events.on('ldown', function (ms) {
-                if (this._active && this._cornerIndex != -1) {
-                    this._catchCorner = true;
-                    ms.renderer.controls.mouseNavigation.deactivate();
-                }
-            }, this);
-
-            layer.events.on('lup', function (ms) {
-                if (this._active) {
-                    this._catchCorner = false;
-                    ms.renderer.controls.mouseNavigation.activate();
-                }
-            }, this);
-        }
-    }
-}
-
+/**
+ * @module og/control/GeoImageDragControl
+ */
+
+'use strict';
+
+import { Control } from './Control.js';
+import { BaseGeoImage } from '../layer/BaseGeoImage.js';
+import { elementFactory, btnClickHandler } from "./UIhelpers.js";
+
+class GeoImageDragControl extends Control {
+    constructor(options = {}) {
+        super(options);
+        this._cornerIndex = -1;
+        this._catchCorner = false;
+    }
+
+    oninit() {
+        let p = this.planet;
+        this.createDraggerButton();
+
+        p.events.on('layeradd', function (e) {
+            this._bindLayer(e);
+        }, this);
+
+        for (let i = 0; i < p.layers.length; i++) {
+            if (p.layers[i] instanceof BaseGeoImage) {
+                this._bindLayer(p.layers[i]);
+            }
+        }
+        btnClickHandler('og-geo-image-dragger-menu-btn', null, null, '#og-geo-image-dragger-menu-icon'); // btn_id, dialog_id, dialog_selector, icon_id
+    }
+
+    // Create a button to activate-deactivate control
+    createDraggerButton() {
+        let btn = elementFactory('div', {
+                id: 'og-geo-image-dragger-menu-btn',
+                class: 'og-geo-image-dragger og-menu-btn og-OFF'
+            },
+            elementFactory('div', { id: 'og-geo-image-dragger-menu-icon', class: 'og-icon-holder' }));
+        this.renderer.div.appendChild(btn);
+    }
+
+    _bindLayer(layer) {
+        if (layer instanceof BaseGeoImage) { // if the layer is a geoImage layer
+
+            var p = this.planet;
+
+            layer.events.on('mousemove', function (ms) {
+                var btn = document.getElementById('og-geo-image-dragger-menu-btn');
+                var btn_off = btn.classList.contains('og-OFF');
+                if (this._active && !btn_off) { // active layer and button ON
+                    if (this._catchCorner) {// mouse is catching a corner
+                        var corners = layer.getCornersLonLat();
+                        corners[this._cornerIndex] = p.getLonLatFromPixelTerrain(ms, true);
+                        layer.setCornersLonLat(corners);
+                    } else { // mouse isn't catching
+                        this._cornerIndex = -1;
+                        for (var i = 0; i < layer._cornersWgs84.length; i++) {
+                            var ground = p.getLonLatFromPixelTerrain(ms, true);
+                            // mouse is near
+                            if (ground && p.ellipsoid.getGreatCircleDistance(layer._cornersWgs84[i], ground) / p.getDistanceFromPixel(ms, true) <= 0.05) {
+                                this._cornerIndex = i;
+                                document.body.style.cursor = 'move';
+                                break;
+                                // mouse is far
+                            } else {
+                                document.body.style.cursor = 'auto';
+
+                            }
+                        }
+                    }
+                }
+
+                layer.events.on("mouseleave", function () {
+                    document.body.style.cursor = 'auto';
+                });
+
+            }, this);
+
+            layer.events.on('ldown', function (ms) {
+                if (this._active && this._cornerIndex !== -1) {
+                    this._catchCorner = true;
+                    ms.renderer.controls.mouseNavigation.deactivate();
+                }
+            }, this);
+
+            layer.events.on('lup', function (ms) {
+                if (this._active) {
+                    this._catchCorner = false;
+                    ms.renderer.controls.mouseNavigation.activate();
+                }
+            }, this);
+
+            layer.events.on('rdblclick', function () {
+                alert(layer.getID());
+            })
+
+        }
+    }
+}
+
 export { GeoImageDragControl };