@openglobus/og 0.19.4 → 0.20.0

package/README.md

@@ -1,7 +1,7 @@
 [![NPM PACKAGE](https://img.shields.io/npm/v/@openglobus/og.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/@openglobus/og)
 ![BUILD](https://github.com/openglobus/openglobus/actions/workflows/push.yml/badge.svg)
 
-# Openglobus
+# OpenGlobus
 
 English | [简体中文](README_CN.md) | [Portuguese-BR](README_pt-BR.md)
 
@@ -45,7 +45,7 @@ npm i @openglobus/openglobus-react
 
 - [Examples](https://sandbox.openglobus.org)
 - [Wiki](https://github.com/openglobus/openglobus/wiki)
-- [API documentation](https://www.openglobus.org/api/)
+- [API documentation](https://openglobus.github.io/docs/)
 
 ## Get Started to contribute
 
@@ -97,7 +97,7 @@ Third, try an example from the sandbox:
 
 ### Other scripts
 
-`npm run docs` - build [api documentation](https://www.openglobus.org/api/) into /api folder
+`npm run docs` - build [api documentation](https://openglobus.github.io/docs/) into /api folder
 
 `npm run serve` - run local web server for develop and watch examples
 

package/css/og.css

@@ -301,7 +301,7 @@ input {
 }
 
 .og-layerSwitcher__layerButton.og-layerSwitcher__visible {
-    border: 2px solid white;
+    border: 2px solid #00ff14;
 }
 
 .og-layerSwitcher__layerButton.og-layerSwitcher__visible img {
@@ -640,11 +640,15 @@ input {
     width: 100%;
 }
 
-.og-lighing .og-slider .og-slider-label {
+.og-lighing .og-slider .og-slider-label,
+.og-lighing .og-color-label {
     width: 100px;
     font-size: 12px;
 }
 
+.og-lighing .og-color {
+    padding-right: 10px;
+}
 
 .og-lighing #layers {
     font-family: monospace;
@@ -681,7 +685,7 @@ input {
 
 .og-lat-val,
 .og-lon-val {
-    width: 79px;
+    width: 90px;
     padding-right: 3px;
     text-align: left;
     text-overflow: unset;
@@ -689,7 +693,7 @@ input {
 }
 
 .og-height {
-    width: 36px;
+    width: 50px;
     text-align: right;
     text-overflow: ellipsis;
     padding-left: 3px;
@@ -1094,6 +1098,16 @@ TIMELINE
     align-items: center;
 }
 
+.og-simpleskybackground {
+    display: flex;
+}
+
+.og-color-label {
+    color: var(--grey6);
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+    font-size: 14px;
+}
+
 @keyframes ldio-p0v5a1f6oz {
     0% {
         opacity: 1

package/lib/@openglobus/js/Clock.d.ts

@@ -0,0 +1,106 @@
+import { EventsHandler } from "./Events";
+import { JulianDate } from "./astro/jd";
+import { Handler } from "./webgl/Handler";
+type ClockEventsList = ["tick", "end", "start", "stop"];
+export interface IClockParams {
+    name?: string;
+    startDate?: JulianDate;
+    endDate?: JulianDate;
+    currentDate?: JulianDate;
+    multiplier?: number;
+}
+/**
+ * Class represents application timer that stores custom current julian datetime, and time speed multiplier.
+ * @class
+ * @param {Object} [params] - Clock parameters:
+ * @param {JulianDate} [params.startDate=0.0] - Julian start date.
+ * @param {JulianDate} [params.endDate=0.0] - Julian end date.
+ * @param {JulianDate} [params.currentDate] - Julian current date. Default: current date.
+ * @param {number} [params.multiplier=1.0] - Time speed multiplier.
+ */
+declare class Clock {
+    static __counter__: number;
+    protected __id: number;
+    __handler: Handler | null;
+    /**
+     * Clock events.
+     * @public
+     * @type {EventsHandler<ClockEventsList>}
+     */
+    events: EventsHandler<ClockEventsList>;
+    /**
+     * Clock name.
+     * @public
+     * @type {string}
+     */
+    name: string;
+    /**
+     * Start julian date clock loop.
+     * @public
+     * @type {JulianDate}
+     */
+    startDate: JulianDate;
+    /**
+     * End julian date clock loop.
+     * @public
+     * @type {JulianDate}
+     */
+    endDate: JulianDate;
+    /**
+     * Current julian datetime.
+     * @public
+     * @type {JulianDate}
+     */
+    currentDate: JulianDate;
+    /**
+     * Animation frame delta time.
+     * @public
+     * @readonly
+     * @type {number}
+     */
+    deltaTicks: number;
+    /**
+     * Timer activity.
+     * @public
+     * @type {boolean}
+     */
+    active: boolean;
+    /**
+     * Timer speed multiplier.
+     * @protected
+     * @type {number}
+     */
+    protected _multiplier: number;
+    protected _running: number;
+    protected _intervalDelay: number;
+    protected _intervalStart: number;
+    protected _intervalCallback: Function | null;
+    constructor(params?: IClockParams);
+    clearInterval(): void;
+    setInterval(delay: number, callback: Function): void;
+    /**
+     * Sets current clock datetime.
+     * @public
+     * @param {Object} date - JavaScript Date object.
+     */
+    setDate(date: Date): void;
+    /**
+     * Returns current application date.
+     * @public
+     * @returns {Date} - Current date.
+     */
+    getDate(): Date;
+    reset(): void;
+    tick(dt: number): void;
+    /**
+     * @public
+     * @param {Clock} clock - Clock instance to compare.
+     * @returns {boolean} - Returns true if a clock is the same instance.
+     */
+    isEqual(clock: Clock): boolean;
+    start(): void;
+    get multiplier(): number;
+    set multiplier(value: number);
+    stop(): void;
+}
+export { Clock };

package/lib/@openglobus/js/Deferred.d.ts

@@ -0,0 +1,6 @@
+export declare class Deferred<T> {
+    resolve: ((value: T | PromiseLike<T>) => void);
+    reject: ((reason?: any) => void);
+    promise: Promise<T>;
+    constructor();
+}

package/lib/@openglobus/js/Events.d.ts

@@ -0,0 +1,90 @@
+export type EventCallback = (((...args: any[]) => boolean) | ((...args: any[]) => void));
+export type EventCallbackStamp = EventCallback & {
+    _openglobus_id?: number;
+    _openglobus_priority?: number;
+};
+type EventCallbacks = Array<EventCallback>;
+type EventCallbackHandler = {
+    active: boolean;
+    handlers: EventCallbacks;
+};
+export type EventsMap<T extends string[]> = {
+    [K in T[number]]?: EventCallbackHandler;
+};
+export type EventsHandler<T extends string[]> = Events<T> & EventsMap<T>;
+export declare function createEvents<T extends string[]>(methodNames: T, sender?: any): EventsHandler<T>;
+/**
+ * Base events class to handle custom events.
+ * @class
+ * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
+ * @param {*} [sender]
+ */
+export declare class Events<T extends string[]> {
+    static __counter__: number;
+    protected __id: number;
+    /**
+     * Registered event names.
+     * @protected
+     * @type {T}
+     */
+    protected _eventNames: T;
+    protected _sender: any;
+    /**
+     * Stop propagation flag
+     * @protected
+     * @type {boolean}
+     */
+    protected _stopPropagation: boolean;
+    protected _stampCache: any;
+    constructor(eventNames: T, sender?: any);
+    bindSender(sender?: any): void;
+    /**
+     * Function that creates event object properties that would be dispatched.
+     * @public
+     * @param {Array.<string>} eventNames - Specified event names list.
+     */
+    registerNames(eventNames: T): this;
+    protected _getStamp(name: string, id: number, ogid: number): string;
+    /**
+     * Returns true if event callback has stamped.
+     * @protected
+     * @param {Object} name - Event identifier.
+     * @param {Object} obj - Event callback.
+     * @return {boolean} -
+     */
+    protected _stamp(name: string, obj: any): boolean;
+    /**
+     * Attach listener.
+     * @public
+     * @param {string} name - Event name to listen.
+     * @param {EventCallback} callback - Event callback function.
+     * @param {any} [sender] - Event callback function owner.
+     * @param {number} [priority] - Priority of event callback.
+     */
+    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 | null} callback - Attached  event callback.
+     */
+    off(name: string, callback?: EventCallback | null): void;
+    /**
+     * Dispatch event.
+     * @public
+     * @param {EventCallbackHandler} event - Event instance property that created by event name.
+     * @param {Object} [args] - Callback parameters.
+     */
+    dispatch(event: EventCallbackHandler | undefined, ...args: any[]): boolean;
+    /**
+     * Brakes events propagation.
+     * @public
+     */
+    stopPropagation(): void;
+    /**
+     * Removes all events.
+     * @public
+     */
+    clear(): void;
+}
+export {};

package/lib/@openglobus/js/Extent.d.ts

@@ -0,0 +1,145 @@
+import { Ellipsoid } from "./ellipsoid/Ellipsoid";
+import { LonLat } from "./LonLat";
+/**
+ * Represents geographical coordinates extent.
+ * @class
+ * @param {LonLat} [sw] - South West extent corner coordinates.
+ * @param {LonLat} [ne] - North East extent corner coordinates.
+ */
+export declare class Extent {
+    southWest: LonLat;
+    northEast: LonLat;
+    constructor(sw?: LonLat, ne?: LonLat);
+    /**
+     * Creates extent instance from values in array.
+     * @static
+     * @param {Array.<number>} arr - South west and north-east longitude and latitudes packed in array. (exactly 4 entries)
+     * @return {Extent} Extent object.
+     */
+    static createFromArray(arr: [number, number, number, number]): Extent;
+    /**
+     * Creates bound extent instance by coordinate array.
+     * @static
+     * @param {Array.<LonLat>} arr - Coordinate array.
+     * @return {Extent} Extent object.
+     */
+    static createByCoordinates(arr: LonLat[]): Extent;
+    /**
+     * Creates bound extent instance by coordinates array.
+     * @static
+     * @param {Array.<Array<number>>} arr - Coordinate array. (exactly 2 entries)
+     * @return {Extent} Extent object.
+     */
+    static createByCoordinatesArr(arr: [number, number][]): Extent;
+    /**
+     * Creates extent by merсator grid tile coordinates.
+     * @static
+     * @param {number} x -
+     * @param {number} y -
+     * @param {number} z -
+     * @param {number} width -
+     * @param {number} height -
+     * @returns {Extent} -
+     */
+    static fromTile(x: number, y: number, z: number, width?: number, height?: number): Extent;
+    /**
+     * Sets current bounding extent object by coordinate array.
+     * @public
+     * @param {Array.<LonLat>} arr - Coordinate array.
+     * @return {Extent} Current extent.
+     */
+    setByCoordinates(arr: LonLat[]): Extent;
+    /**
+     * Determines if point inside extent.
+     * @public
+     * @param {LonLat} lonlat - Coordinate point.
+     * @return {boolean} Returns true if point inside extent.
+     */
+    isInside(lonlat: LonLat): boolean;
+    /**
+     * Returns true if two extent overlap each other.
+     * @public
+     * @param {Extent} e - Another extent.
+     * @return {boolean} -
+     */
+    overlaps(e: Extent): boolean;
+    /**
+     * Gets extent width.
+     * @public
+     * @return {number} Extent width.
+     */
+    getWidth(): number;
+    /**
+     * Gets extent height.
+     * @public
+     * @return {number} Extent height.
+     */
+    getHeight(): number;
+    /**
+     * Creates clone instance of the current extent.
+     * @public
+     * @return {Extent} Extent clone.
+     */
+    clone(): Extent;
+    /**
+     * Gets the center coordinate of the extent.
+     * @public
+     * @return {number} Center coordinate.
+     */
+    getCenter(): LonLat;
+    /**
+     * @public
+     */
+    getNorthWest(): LonLat;
+    /**
+     * @public
+     */
+    getNorthEast(): LonLat;
+    /**
+     * @public
+     */
+    getSouthWest(): LonLat;
+    /**
+     * @public
+     */
+    getSouthEast(): LonLat;
+    /**
+     * @public
+     */
+    getNorth(): number;
+    getEast(): number;
+    /**
+     * @public
+     */
+    getWest(): number;
+    /**
+     * @public
+     */
+    getSouth(): number;
+    /**
+     * Returns extents are equals.
+     * @param {Extent} extent - Extent.
+     * @returns {boolean} -
+     */
+    equals(extent: Extent): boolean;
+    /**
+     * Converts extent coordinates to mercator projection coordinates.
+     * @public
+     * @return {Extent} New instance of the current extent.
+     */
+    forwardMercator(): Extent;
+    /**
+     * Converts extent coordinates from mercator projection to degrees.
+     * @public
+     * @return {Extent} New instance of the current extent.
+     */
+    inverseMercator(): Extent;
+    /**
+     * Gets cartesian bounding bounds of the current ellipsoid.
+     * @public
+     * @param {Ellipsoid} ellipsoid - Ellipsoid.
+     * @return {Array.<number>} Cartesian 3d coordinate array. (exactly 6 entries)
+     */
+    getCartesianBounds(ellipsoid: Ellipsoid): [number, number, number, number, number, number];
+    toString(): string;
+}

package/lib/@openglobus/js/Globe.d.ts

@@ -0,0 +1,134 @@
+import { Control } from "./control/Control";
+import { Ellipsoid } from "./ellipsoid/Ellipsoid";
+import { EmptyTerrain } from "./terrain/EmptyTerrain";
+import { Layer } from "./layer/Layer";
+import { NumberArray2 } from "./math/Vec2";
+import { NumberArray4 } from "./math/Vec4";
+import { Planet } from "./scene/Planet";
+import { Sun } from "./control/Sun";
+import { HTMLDivElementExt, Renderer } from "./renderer/Renderer";
+import { RenderNode } from "./scene/RenderNode";
+import { Extent } from "./Extent";
+export 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;
+    transitionOpacityEnabled?: boolean;
+    terrain?: EmptyTerrain;
+    controls?: Control[];
+    useEarthNavigation?: boolean;
+    minSlope?: number;
+    sun?: {
+        active?: boolean;
+        stopped?: boolean;
+    };
+    layers?: Layer[];
+    viewExtent?: Extent | NumberArray4;
+    autoActivate?: boolean;
+    fontsSrc?: string;
+    resourcesSrc?: string;
+}
+/**
+ * Creates a WebGL context with globe.
+ * @class
+ *
+ * @example <caption>Basic initialization</caption>
+ * globus = new Globe({
+ *     'atmosphere': false,
+ *     'target': 'globus',
+ *     'name': 'Earth',
+ *     'controls': [
+ *          new control.MouseNavigation({ autoActivate: true }),
+ *          new control.KeyboardNavigation({ autoActivate: true }),
+ *          new control.EarthCoordinates({ autoActivate: true, center: false }),
+ *          new control.LayerSwitcher({ autoActivate: true }),
+ *          new control.ZoomControl({ autoActivate: true }),
+ *          new control.TouchNavigation({ autoActivate: true }),
+ *          new control.Sun({ autoActivate: true })
+ *      ],
+ *     'terrain': new GlobusTerrain(),
+ *     'layers': [
+ *          new XYZ("OpenStreetMap", { isBaseLayer: true, url: "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png", visibility: true, attribution: 'Data @ <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL</a>' })
+ *      ],
+ *     'autoActivate': true
+ * });
+ *
+ * @param {IGlobeParams} options - Options:
+ * @param {string|HTMLElement} options.target - HTML element id where planet canvas have to be created.
+ * @param {string} [options.name] - Planet name. Default is uniq identifier.
+ * @param {EmptyTerrain} [options.terrain] - Terrain provider. Default no terrain - og.terrain.EmptyTerrain.
+ * @param {Array.<Control>} [options.controls] - Renderer controls array.
+ * @param {Array.<Layer>} [options.layers] - Planet layers.
+ * @param {Extent| [[number, number],[number, number]]} [options.viewExtent] - Viewable starting extent.
+ * @param {boolean} [options.autoActivate=true] - Globe rendering auto activation flag. True is default.
+ * @param {HTMLElement} [options.attributionContainer] - Container for attribution list.
+ * @param {number} [options.maxGridSize=128] = Maximal segment grid size. 128 is default
+ * @param {string} [options.fontsSrc] -  Fonts collection url.
+ * @param {string} [options.resourcesSrc] - Resources root src.
+ * @param {string} [options.nightTextureSrc] - Night glowing image sources
+ * @param {string} [options.specularTextureSrc] - Specular water mask image sourcr
+ * @param {number} [options.maxAltitude=15000000.0] - Maximal camera altitude above terrain
+ * @param {number} [options.minAltitude=1.0] - Minimal camera altitude above terrain
+ * @param {number} [options.maxEqualZoomAltitude=15000000.0] - Maximal altitude since segments on the screen became the same zoom level
+ * @param {number} [options.minEqualZoomAltitude=10000.0] - Minimal altitude since segments on the screen became the same zoom level
+ * @param {number} [options.minEqualZoomCameraSlope=0.8] - Minimal camera slope above te globe where segments on the screen became the same zoom level
+ * @param {number} [options.loadingBatchSize=12] -
+ * @param {number} [options.quadTreeStrategyPrototype] - Prototype of quadTree. QuadTreeStrategy for Earth is default.
+ * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
+ * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
+ * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ * @param {boolean} [options.transtitionOpacityEnabled] - Enables terrain smooth opacity transition effect.
+ */
+declare class Globe {
+    static __counter__: number;
+    $target: HTMLElement | null;
+    protected _instanceID: string;
+    protected _canvas: HTMLCanvasElement;
+    $inner: HTMLDivElementExt;
+    /**
+     * Interface for the renderer context(events, input states, renderer nodes etc.)
+     * @public
+     * @type {Renderer}
+     */
+    renderer: Renderer;
+    /**
+     * Planet node name. Access with this.renderer.<name>
+     * @private
+     * @type {String}
+     */
+    protected _planetName: string;
+    planet: Planet;
+    sun: Sun;
+    constructor(options: IGlobeParams);
+    start(): void;
+    /**
+     * Starts screen brightness fading in effect by the duration time.
+     * @public
+     */
+    fadeIn(): void;
+    /**
+     * Starts screen brightness fading out effect by the duration time.
+     * @public
+     */
+    fadeOut(): void;
+    attachTo(target: HTMLElement | string): void;
+    detach(): void;
+    destroy(): void;
+}
+export { Globe };

package/lib/@openglobus/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 };