@openglobus/og 0.18.0 → 0.18.2

package/{src/Globe.ts → lib/js/Globe.js}

@@ -1,67 +1,22 @@
 // #StandWithUkraine
-
-import {CompassButton} from "./control/CompassButton";
-import {Control} from "./control/Control";
-import {EarthCoordinates} from "./control/EarthCoordinates";
-import {EarthNavigation} from "./control/EarthNavigation";
-import {Ellipsoid} from "./ellipsoid/Ellipsoid";
-import {EmptyTerrain} from "./terrain/EmptyTerrain";
-import {Handler} from "./webgl/Handler";
-import {isEmpty} from "./utils/shared";
-import {Layer} from "./layer/Layer";
-import {MouseNavigation} from "./control/MouseNavigation";
-import {NumberArray2} from "./math/Vec2";
-import {NumberArray4} from "./math/Vec4";
-import {Planet} from "./scene/Planet";
-import {ScaleControl} from "./control/ScaleControl";
-import {Sun} from "./control/Sun";
-import {TouchNavigation} from "./control/TouchNavigation";
-import {HTMLDivElementExt, Renderer} from "./renderer/Renderer";
-import {RenderNode} from "./scene/RenderNode";
-import {ZoomControl} from "./control/ZoomControl";
-import {Extent} from "./Extent";
-
-interface IGlobeParams {
-    attributionContainer?: HTMLElement;
-    target?: string | HTMLElement;
-    skybox?: RenderNode;
-    dpi?: number;
-    msaa?: number;
-    name?: string;
-    frustums?: NumberArray2[];
-    ellipsoid?: Ellipsoid;
-    maxGridSize?: number;
-    nightTextureSrc?: string | null;
-    specularTextureSrc?: string | null;
-    minAltitude?: number;
-    maxAltitude?: number;
-    maxEqualZoomAltitude?: number;
-    minEqualZoomAltitude?: number;
-    minEqualZoomCameraSlope?: number;
-    quadTreeStrategyPrototype?: any;
-    maxLoadingRequests?: number;
-    atmosphereEnabled?: boolean;
-
-    terrain?: EmptyTerrain;
-    controls?: Control[];
-    useEarthNavigation?: boolean;
-    minSlope?: number;
-    sun?: { active?: boolean };
-    layers?: Layer[];
-    viewExtent?: Extent | NumberArray4;
-    autoActivate?: boolean;
-
-    fontsSrc?: string;
-    resourcesSrc?: string;
-}
-
-const DEFAULT_NIGHT_SRC = `/res/night.png`;
-const DEFAULT_SPEC_SRC = `/res/spec.png`;
-const DEFAULT_RESOURCES_SRC = '.';
-
+import { CompassButton } from "./control/CompassButton";
+import { EarthCoordinates } from "./control/EarthCoordinates";
+import { EarthNavigation } from "./control/EarthNavigation";
+import { EmptyTerrain } from "./terrain/EmptyTerrain";
+import { Handler } from "./webgl/Handler";
+import { isEmpty } from "./utils/shared";
+import { MouseNavigation } from "./control/MouseNavigation";
+import { Planet } from "./scene/Planet";
+import { ScaleControl } from "./control/ScaleControl";
+import { Sun } from "./control/Sun";
+import { TouchNavigation } from "./control/TouchNavigation";
+import { Renderer } from "./renderer/Renderer";
+import { ZoomControl } from "./control/ZoomControl";
+const DEFAULT_NIGHT_SRC = `/night.png`;
+const DEFAULT_SPEC_SRC = `/spec.png`;
+const DEFAULT_RESOURCES_SRC = '/res';
 /** @const {string} */
 const PLANET_NAME_PREFIX = "globus_planet_";
-
 /**
  * Creates a WebGL context with globe.
  * @class
@@ -112,44 +67,11 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
  * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
  */
-
 class Globe {
-
-    static __counter__: number = 0;
-
-    public $target: HTMLElement | null;
-
-    protected _instanceID: string;
-
-    protected _canvas: HTMLCanvasElement;
-
-    public $inner: HTMLDivElementExt;
-
-    /**
-     * Interface for the renderer context(events, input states, renderer nodes etc.)
-     * @public
-     * @type {Renderer}
-     */
-    public renderer: Renderer;
-
-    /**
-     * Planet node name. Access with this.renderer.<name>
-     * @private
-     * @type {String}
-     */
-    protected _planetName: string;
-
-    public planet: Planet;
-
-    public sun: Sun;
-
-    constructor(options: IGlobeParams) {
-
+    constructor(options) {
         this.$target = null;
-
         this._instanceID = `__globus${Globe.__counter__++ ? Globe.__counter__ : ""}__`;
-        (window as any)[this._instanceID] = this;
-
+        window[this._instanceID] = this;
         //
         // Canvas creation
         //
@@ -160,7 +82,6 @@ class Globe {
         this._canvas.style.display = "block";
         this._canvas.style.opacity = "0.0";
         this._canvas.style.transition = "opacity 150ms";
-
         /**
          * Dom element where WebGL canvas creates
          * @public
@@ -169,23 +90,20 @@ class Globe {
         this.$inner = document.createElement('div');
         this.$inner.classList.add("og-inner");
         this.$inner.appendChild(this._canvas);
-
         this.$inner.attributions = document.createElement('div');
         if (options.attributionContainer) {
             options.attributionContainer.appendChild(this.$inner.attributions);
-        } else {
+        }
+        else {
             this.$inner.attributions.classList.add("og-attribution");
             this.$inner.appendChild(this.$inner.attributions);
         }
-
         if (options.target) {
             this.attachTo(options.target);
         }
-
-        const _disableWheel = (e: Event) => {
+        const _disableWheel = (e) => {
             e.preventDefault();
-        }
-
+        };
         this._canvas.onmouseenter = function () {
             document.addEventListener("mousewheel", _disableWheel, {
                 capture: false,
@@ -195,32 +113,25 @@ class Globe {
         this._canvas.onmouseleave = function () {
             document.removeEventListener("mousewheel", _disableWheel);
         };
-
-        this.renderer = new Renderer(
-            new Handler(this._canvas, {
-                autoActivate: false,
-                pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
-                context: {
-                    alpha: false,
-                    antialias: false,
-                    premultipliedAlpha: false
-                }
-            }), {
-                autoActivate: false,
-                msaa: options.msaa,
-                fontsSrc: options.fontsSrc
+        this.renderer = new Renderer(new Handler(this._canvas, {
+            autoActivate: false,
+            pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
+            context: {
+                //alpha: false,
+                antialias: false,
+                premultipliedAlpha: false
             }
-        );
-
+        }), {
+            autoActivate: false,
+            msaa: options.msaa,
+            fontsSrc: options.fontsSrc
+        });
         this.renderer.div = this.$inner;
-
         // Skybox
         if (options.skybox) {
             this.renderer.addNode(options.skybox);
         }
-
         this._planetName = options.name ? options.name : PLANET_NAME_PREFIX + Globe.__counter__;
-
         this.planet = new Planet({
             name: this._planetName,
             frustums: options.frustums,
@@ -237,127 +148,118 @@ class Globe {
             maxLoadingRequests: options.maxLoadingRequests,
             atmosphereEnabled: options.atmosphereEnabled
         });
-
         // Attach terrain provider (can be one object or array)
         if (options.terrain) {
             //@todo: refactoring
             if (Array.isArray(options.terrain)) {
                 this.planet.setTerrain(options.terrain[0]); // If array get the terrain from 1st element
-            } else {
+            }
+            else {
                 this.planet.setTerrain(options.terrain);
             }
-        } else {
+        }
+        else {
             this.planet.setTerrain(new EmptyTerrain());
         }
-
         this.renderer.addNode(this.planet);
-
         // Add controls
         if (options.controls) {
             this.planet.addControls(options.controls);
-        } else {
+        }
+        else {
             this.planet.addControls([
                 new ZoomControl(),
-                options.useEarthNavigation ? new EarthNavigation() : new MouseNavigation({minSlope: options.minSlope}),
+                options.useEarthNavigation ? new EarthNavigation() : new MouseNavigation({ minSlope: options.minSlope }),
                 new TouchNavigation(),
                 new EarthCoordinates(),
                 new ScaleControl(),
                 new CompassButton()
             ]);
         }
-
         const _controls = this.renderer.controls;
         let sun;
         for (let i in _controls) {
             if (_controls[i] instanceof Sun) {
-                sun = _controls[i] as Sun;
+                sun = _controls[i];
                 break;
             }
         }
-
         if (!sun) {
             this.sun = new Sun();
             this.planet.addControl(this.sun);
-        } else {
+        }
+        else {
             this.sun = sun;
         }
-
         if (options.sun) {
             if (options.sun.active !== undefined && !options.sun.active) {
                 this.sun.deactivate();
             }
+            if (options.sun.stopped === true) {
+                this.sun.stop();
+            }
         }
-
         if (options.layers) {
             this.planet.addLayers(options.layers);
         }
-
         // TODO: view center, altitude, extent
         let ve = options.viewExtent;
         if (ve) {
             if (ve instanceof Array) {
                 this.planet.viewExtentArr(ve);
-            } else {
-                this.planet.viewExtent(ve as Extent);
+            }
+            else {
+                this.planet.viewExtent(ve);
             }
         }
-
         // Run!
         if (options.autoActivate || isEmpty(options.autoActivate)) {
             this.start();
         }
     }
-
-    public start() {
+    start() {
         this.renderer.start();
         this.fadeIn();
     }
-
     /**
      * Starts screen brightness fading in effect by the duration time.
      * @public
      */
-    public fadeIn() {
+    fadeIn() {
         this._canvas.style.opacity = "1.0";
     }
-
     /**
      * Starts screen brightness fading out effect by the duration time.
      * @public
      */
-    public fadeOut() {
+    fadeOut() {
         this._canvas.style.opacity = "0";
     }
-
-    public attachTo(target: HTMLElement | string) {
-
+    attachTo(target) {
         this.detach();
-
         let t;
         if (target instanceof HTMLElement) {
             t = target;
-        } else {
+        }
+        else {
             t = document.getElementById(target) || document.querySelector(target);
         }
-
         if (t) {
-            this.$target = t as HTMLElement;
+            this.$target = t;
             t.appendChild(this.$inner);
         }
     }
-
-    public detach() {
+    detach() {
         if (this.$target) {
             // Remember that when container is zero
             // sized(display none etc.) renderer frame will be stopped
             this.$target.removeChild(this.$inner);
         }
     }
-
-    public destroy() {
+    destroy() {
         this.detach();
         this.renderer.destroy();
     }
 }
-
-export {Globe};
+Globe.__counter__ = 0;
+export { Globe };

package/lib/js/ImageCanvas.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Usefull class for working with JS canvas object.
+ * @class
+ * @param {number} [width] - Canvas width. Default 256.
+ * @param {number} [height] - Canvas height. Default 256.
+ */
+declare class ImageCanvas {
+    /**
+     * Canvas object.
+     * @protected
+     * @type {HTMLCanvasElement}
+     */
+    protected _canvas: HTMLCanvasElement;
+    /**
+     * Canvas context.
+     * @protected
+     * @type {CanvasRenderingContext2D}
+     */
+    protected _context: CanvasRenderingContext2D;
+    constructor(width?: number, height?: number);
+    /**
+     * Returns canvas object.
+     * @public
+     * @returns {HTMLCanvasElement}
+     */
+    getCanvas(): HTMLCanvasElement;
+    /**
+     * Returns canvas context pointer.
+     * @public
+     * @returns {CanvasRenderingContext2D}
+     */
+    getContext(): CanvasRenderingContext2D;
+    /**
+     * Fills canvas RGBA with zeroes.
+     * @public
+     */
+    fillEmpty(): void;
+    /**
+     * Fills canvas RGBA with color.
+     * @public
+     * @param {string} color - CSS string color.
+     */
+    fill(color: string): void;
+    /**
+     * Gets canvas pixels RGBA data.
+     * @public
+     * @returns {Uint8ClampedArray}
+     */
+    getData(): Uint8ClampedArray;
+    /**
+     * Fill the canvas by color.
+     * @public
+     * @param {string} color - CSS string color.
+     */
+    fillColor(color: string): void;
+    /**
+     * Sets RGBA pixel data.
+     * @public
+     * @param {Array.<number>} data - Array RGBA data.
+     */
+    setData(data: ArrayLike<number>): void;
+    /**
+     * Resize canvas.
+     * @public
+     * @param {number} width - Width.
+     * @param {number} height - Height.
+     */
+    resize(width: number, height: number): void;
+    /**
+     * Draw an image on the canvas.
+     * @public
+     * @param {Image} img - Draw image.
+     * @param {number} [x] - Left top image corner X coordinate on the canvas.
+     * @param {number} [y] - Left top image corner Y coordinate on the canvas.
+     * @param {number} [width] - Image width slice. Image width is default.
+     * @param {number} [height] - Image height slice. Image height is default.
+     */
+    drawImage(img: HTMLImageElement, x: number, y: number, width: number, height: number): void;
+    /**
+     * Converts canvas to JS image object.
+     * @public
+     * @returns {Image}
+     */
+    getImage(): HTMLImageElement;
+    /**
+     * Get measured text width.
+     * @public
+     * @param {string} text - Measured text.
+     * @returns {number}
+     */
+    getTextWidth(text: string): number;
+    /**
+     * Draw a text on the canvas.
+     * @public
+     * @param {string} text - Text.
+     * @param {number} [x] - Canvas X - coordinate. 0 - default.
+     * @param {number} [y] - Canvas Y - coordinate. 0 - default.
+     * @param {string} [font] - Font style. 'normal 14px Verdana' - is default.
+     * @param {string} [color] - Css font color.
+     */
+    drawText(text: string, x?: number, y?: number, font?: string, color?: string): void;
+    /**
+     * Gets canvas width.
+     * @public
+     * @returns {number}
+     */
+    getWidth(): number;
+    /**
+     * Gets canvas height.
+     * @public
+     * @returns {number}
+     */
+    getHeight(): number;
+    /**
+     * Load image to canvas.
+     * @public
+     * @param {string} url - Image url.
+     * @param {Function} [callback] - Image onload callback.
+     */
+    load(url: string, callback: Function): void;
+    /**
+     * Open canvas image in the new window.
+     * @public
+     */
+    openImage(): void;
+    destroy(): void;
+}
+export { ImageCanvas };