@openglobus/og 0.18.0 → 0.18.1

package/{src/terrain/MapboxTerrain.ts → lib/js/terrain/MapboxTerrain.js}

@@ -1,88 +1,52 @@
 import * as mercator from "../mercator";
-import {Extent} from "../Extent";
-import {getTileExtent} from "../mercator";
-import {GlobusTerrain, IGlobusTerrainParams} from "./GlobusTerrain";
-import {isPowerOfTwo} from "../math";
-import {Layer} from "../layer/Layer";
-import {LonLat} from "../LonLat";
-import {Segment} from "../segment/Segment";
-import {TypedArray} from "../utils/shared";
-import {IResponse} from "../utils/Loader";
-
-interface IMapboxTerrainParams extends IGlobusTerrainParams {
-    equalizeNormals?: boolean;
-    key?: string;
-    imageSize?: number;
-}
-
+import { getTileExtent } from "../mercator";
+import { GlobusTerrain } from "./GlobusTerrain";
+import { isPowerOfTwo } from "../math";
+import { Layer } from "../layer/Layer";
 /**
  * The key doesn't work; just an example!
  */
 const KEY = "pk.eyJ1IjoiZm94bXVsZGVyODMiLCJhIjoiY2pqYmR3dG5oM2Z1bzNrczJqYm5pODhuNSJ9.Y4DRmEPhb-XSlCR9CAXACQ";
-
-const rgb2Height = (r: number, g: number, b: number): number => {
+const rgb2Height = (r, g, b) => {
     return -10000 + 0.1 * (r * 256 * 256 + g * 256 + b);
 };
-
 class MapboxTerrain extends GlobusTerrain {
-
-    protected _imageSize: number;
-
-    protected _ctx: CanvasRenderingContext2D;
-
-    protected _imageDataCache: Record<string, Uint8ClampedArray>;
-
-    constructor(name: string | null, options: IMapboxTerrainParams = {}) {
+    constructor(name, options = {}) {
         super(name || "MapboxTerrain", {
             equalizeVertices: options.equalizeVertices != undefined ? options.equalizeVertices : true,
             maxZoom: options.maxZoom || 17,
             ...options
         });
-
         this.equalizeNormals = options.equalizeNormals || false;
-
         this.gridSizeByZoom = options.gridSizeByZoom || [
             64, 32, 16, 8, 8, 8, 8, 16, 16, 16, 16, 16, 32, 16, 32, 16, 32, 16, 32, 16, 8, 4
         ];
-
         this.url = options.url != undefined
             ? options.url
             : `//api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=${options.key || KEY}`;
-
         this.noDataValues = options.noDataValues || [-65537, -10000];
-
         this.plainGridSize = options.plainGridSize || 128;
-
         this._dataType = "imageBitmap";
-
         this._imageSize = options.imageSize || 256;
-
         this._ctx = this._createTemporalCanvas(this._imageSize);
-
         this._imageDataCache = {};
     }
-
-    public override isBlur(segment: Segment): boolean {
+    isBlur(segment) {
         return segment.tileZoom >= 16;
     }
-
-    protected _createTemporalCanvas(size: number): CanvasRenderingContext2D {
+    _createTemporalCanvas(size) {
         let canvas = document.createElement("canvas");
         canvas.width = size;
         canvas.height = size;
         return canvas.getContext("2d", {
             willReadFrequently: true
-        })!;
+        });
     }
-
-    protected override _createHeights(data: HTMLImageElement | ImageBitmap, tileIndex: string, tileX: number, tileY: number, tileZoom: number, extent: Extent, preventChildren: boolean): TypedArray | number[] {
-
+    _createHeights(data, tileIndex, tileX, tileY, tileZoom, extent, preventChildren) {
         this._ctx.clearRect(0, 0, this._imageSize, this._imageSize);
         this._ctx.drawImage(data, 0, 0);
         let rgbaData = this._ctx.getImageData(0, 0, this._imageSize, this._imageSize).data;
-
         const SIZE = data.width;
-
         //
         //Non-power of two images
         //
@@ -91,77 +55,58 @@ class MapboxTerrain extends GlobusTerrain {
             extractElevationTilesMapboxNonPowerOfTwo(rgbaData, outCurrenElevations);
             return outCurrenElevations;
         }
-
         if (this._imageSize === this.plainGridSize) {
             let elevationsSize = (this.plainGridSize + 1) * (this.plainGridSize + 1);
             let outCurrenElevations = new Float32Array(elevationsSize);
             for (let k = 0, len = this._imageSize * this._imageSize; k < len; k++) {
-                let j = k % this._imageSize,
-                    i = Math.floor(k / this._imageSize);
+                let j = k % this._imageSize, i = Math.floor(k / this._imageSize);
                 let fromInd4 = k * 4;
                 let h = rgb2Height(rgbaData[fromInd4], rgbaData[fromInd4 + 1], rgbaData[fromInd4 + 2]);
                 outCurrenElevations[i * (this._imageSize + 1) + j] = h;
             }
-
             for (let i = 0, len = this._imageSize; i < len; i++) {
                 let j = this._imageSize - 1;
                 let fromInd4 = (i * this._imageSize + j) * 4;
                 let h = rgb2Height(rgbaData[fromInd4], rgbaData[fromInd4 + 1], rgbaData[fromInd4 + 2]);
                 outCurrenElevations[i * (this._imageSize + 1) + this._imageSize] = h;
             }
-
             for (let j = 0, len = this._imageSize; j < len; j++) {
                 let i = this._imageSize - 1;
                 let fromInd4 = (i * this._imageSize + j) * 4;
                 let h = rgb2Height(rgbaData[fromInd4], rgbaData[fromInd4 + 1], rgbaData[fromInd4 + 2]);
                 outCurrenElevations[this._imageSize * (this._imageSize + 1) + j] = h;
             }
-
             let h = rgb2Height(rgbaData[rgbaData.length - 4], rgbaData[rgbaData.length - 3], rgbaData[rgbaData.length - 2]);
             outCurrenElevations[outCurrenElevations.length - 1] = h;
-
             return outCurrenElevations;
         }
-
         //
         // Power of two images
         //
         let elevationsSize = (this.plainGridSize + 1) * (this.plainGridSize + 1);
-
         let d = SIZE / this.plainGridSize;
-
         let outCurrenElevations = new Float32Array(elevationsSize);
         let outChildrenElevations = new Array(d);
-
         for (let i = 0; i < d; i++) {
             outChildrenElevations[i] = [];
             for (let j = 0; j < d; j++) {
                 outChildrenElevations[i][j] = new Float32Array(elevationsSize);
             }
         }
-
         if (preventChildren) {
             extractElevationTilesMapboxNoChildren(rgbaData, this.noDataValues, outCurrenElevations);
-        } else {
-            extractElevationTilesMapbox(
-                rgbaData,
-                this.noDataValues,
-                outCurrenElevations,
-                outChildrenElevations
-            );
         }
-
+        else {
+            extractElevationTilesMapbox(rgbaData, this.noDataValues, outCurrenElevations, outChildrenElevations);
+        }
         this._elevationCache[tileIndex] = {
             heights: outCurrenElevations,
-            extent: extent//segment.getExtent()
+            extent: extent //segment.getExtent()
         };
-
         if (!preventChildren) {
             for (let i = 0; i < d; i++) {
                 for (let j = 0; j < d; j++) {
-                    let x = tileX * 2 + j,
-                        y = tileY * 2 + i,
-                        z = tileZoom + 1;
+                    let x = tileX * 2 + j, y = tileY * 2 + i, z = tileZoom + 1;
                     let tileIndex = Layer.getTileIndex(x, y, z);
                     this._elevationCache[tileIndex] = {
                         heights: outChildrenElevations[i][j],
@@ -170,38 +115,23 @@ class MapboxTerrain extends GlobusTerrain {
                 }
             }
         }
-
         return outCurrenElevations;
     }
-
-    public override getHeightAsync(lonLat: LonLat, callback: (h: number) => void, zoom?: number): boolean {
+    getHeightAsync(lonLat, callback, zoom) {
         if (!lonLat || lonLat.lat > mercator.MAX_LAT || lonLat.lat < mercator.MIN_LAT) {
             callback(0);
             return true;
         }
-
-        let z = zoom || this.maxZoom,
-            size = mercator.POLE2 / Math.pow(2, z),
-            merc = mercator.forward(lonLat),
-            x = Math.floor((mercator.POLE + merc.lon) / size),
-            y = Math.floor((mercator.POLE - merc.lat) / size);
-
-        let tileIndex = Layer.getTileIndex(x, y, z),
-            extent = mercator.getTileExtent(x, y, z);
-
-        let sizeImgW = extent.getWidth() / (this._imageSize - 1),
-            sizeImgH = extent.getHeight() / (this._imageSize - 1);
-
-        let i = this._imageSize - Math.ceil((merc.lat - extent.southWest.lat) / sizeImgH) - 1,
-            j = Math.floor((merc.lon - extent.southWest.lon) / sizeImgW);
+        let z = zoom || this.maxZoom, size = mercator.POLE2 / Math.pow(2, z), merc = mercator.forward(lonLat), x = Math.floor((mercator.POLE + merc.lon) / size), y = Math.floor((mercator.POLE - merc.lat) / size);
+        let tileIndex = Layer.getTileIndex(x, y, z), extent = mercator.getTileExtent(x, y, z);
+        let sizeImgW = extent.getWidth() / (this._imageSize - 1), sizeImgH = extent.getHeight() / (this._imageSize - 1);
+        let i = this._imageSize - Math.ceil((merc.lat - extent.southWest.lat) / sizeImgH) - 1, j = Math.floor((merc.lon - extent.southWest.lon) / sizeImgW);
         let index = (i * this._imageSize + j) * 4;
-
         if (this._imageDataCache[tileIndex]) {
             let data = this._imageDataCache[tileIndex];
             callback(rgb2Height(data[index], data[index + 1], data[index + 2]));
             return true;
         }
-
         if (!this._fetchCache[tileIndex]) {
             let url = this._buildURL(x, y, z);
             this._fetchCache[tileIndex] = this._loader.fetch({
@@ -209,259 +139,160 @@ class MapboxTerrain extends GlobusTerrain {
                 type: this._dataType
             });
         }
-
-        this._fetchCache[tileIndex].then((response: IResponse) => {
+        this._fetchCache[tileIndex].then((response) => {
             if (response.status === "ready") {
                 this._ctx.clearRect(0, 0, this._imageSize, this._imageSize);
                 this._ctx.drawImage(response.data, 0, 0);
                 let data = this._ctx.getImageData(0, 0, 256, 256).data;
                 this._imageDataCache[tileIndex] = data;
                 callback(rgb2Height(data[index], data[index + 1], data[index + 2]));
-            } else if (response.status === "error") {
+            }
+            else if (response.status === "error") {
                 callback(0);
-            } else {
+            }
+            else {
                 //@ts-ignore
                 this._fetchCache[tileIndex] = null;
                 delete this._fetchCache[tileIndex];
             }
         });
-
         return false;
     }
 }
-
-function extractElevationTilesMapboxNonPowerOfTwo(rgbaData: number[] | TypedArray, outCurrenElevations: number[] | TypedArray) {
+function extractElevationTilesMapboxNonPowerOfTwo(rgbaData, outCurrenElevations) {
     for (let i = 0, len = outCurrenElevations.length; i < len; i++) {
         let i4 = i * 4;
         outCurrenElevations[i] = rgb2Height(rgbaData[i4], rgbaData[i4 + 1], rgbaData[i4 + 2]);
     }
 }
-
-function extractElevationTilesMapbox(
-    rgbaData: number[] | TypedArray,
-    noDataValues: number[] | TypedArray,
-    outCurrenElevations: number[] | TypedArray,
-    outChildrenElevations: number[][][] | TypedArray[][]
-) {
+function extractElevationTilesMapbox(rgbaData, noDataValues, outCurrenElevations, outChildrenElevations) {
     let destSize = Math.sqrt(outCurrenElevations.length) - 1;
     let destSizeOne = destSize + 1;
     let sourceSize = Math.sqrt(rgbaData.length / 4);
     let dt = sourceSize / destSize;
-
-    let rightHeight = 0,
-        bottomHeight = 0,
-        sourceSize4 = 0;
-
-    for (
-        let k = 0, currIndex = 0, sourceDataLength = rgbaData.length / 4;
-        k < sourceDataLength;
-        k++
-    ) {
+    let rightHeight = 0, bottomHeight = 0, sourceSize4 = 0;
+    for (let k = 0, currIndex = 0, sourceDataLength = rgbaData.length / 4; k < sourceDataLength; k++) {
         let k4 = k * 4;
-
         let height = rgb2Height(rgbaData[k4], rgbaData[k4 + 1], rgbaData[k4 + 2]);
-
-        let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height),
-            isNoDataRight = false,
-            isNoDataBottom = false;
-
-        let i = Math.floor(k / sourceSize),
-            j = k % sourceSize;
-
-        let tileX = Math.floor(j / destSize),
-            tileY = Math.floor(i / destSize);
-
+        let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height), isNoDataRight = false, isNoDataBottom = false;
+        let i = Math.floor(k / sourceSize), j = k % sourceSize;
+        let tileX = Math.floor(j / destSize), tileY = Math.floor(i / destSize);
         let destArr = outChildrenElevations[tileY][tileX];
-
-        let ii = i % destSize,
-            jj = j % destSize;
-
+        let ii = i % destSize, jj = j % destSize;
         let destIndex = (ii + tileY) * destSizeOne + jj + tileX;
-
         destArr[destIndex] = height;
-
         if ((i + tileY) % dt === 0 && (j + tileX) % dt === 0) {
             outCurrenElevations[currIndex++] = height;
         }
-
         if ((j + 1) % destSize === 0 && j !== sourceSize - 1) {
             //current tile
             rightHeight = rgb2Height(rgbaData[k4 + 4], rgbaData[k4 + 5], rgbaData[k4 + 6]);
-
             isNoDataRight = MapboxTerrain.checkNoDataValue(noDataValues, rightHeight);
-
             let middleHeight = height;
-
             if (!(isNoDataCurrent || isNoDataRight)) {
                 middleHeight = (height + rightHeight) * 0.5;
             }
-
             destIndex = (ii + tileY) * destSizeOne + jj + 1;
             destArr[destIndex] = middleHeight;
-
             if ((i + tileY) % dt === 0) {
                 outCurrenElevations[currIndex++] = middleHeight;
             }
-
             //next right tile
             let rightindex = (ii + tileY) * destSizeOne + ((jj + 1) % destSize);
             outChildrenElevations[tileY][tileX + 1][rightindex] = middleHeight;
         }
-
         if ((i + 1) % destSize === 0 && i !== sourceSize - 1) {
             //current tile
             sourceSize4 = sourceSize * 4;
-
             bottomHeight = rgb2Height(rgbaData[k4 + sourceSize4], rgbaData[k4 + sourceSize4 + 1], rgbaData[k4 + sourceSize4 + 2]);
-
             isNoDataBottom = MapboxTerrain.checkNoDataValue(noDataValues, bottomHeight);
-
             let middleHeight = (height + bottomHeight) * 0.5;
-
             if (!(isNoDataCurrent || isNoDataBottom)) {
                 middleHeight = (height + bottomHeight) * 0.5;
             }
-
             destIndex = (ii + 1) * destSizeOne + jj + tileX;
             destArr[destIndex] = middleHeight;
-
             if ((j + tileX) % dt === 0) {
                 outCurrenElevations[currIndex++] = middleHeight;
             }
-
             //next bottom tile
             let bottomindex = ((ii + 1) % destSize) * destSizeOne + jj + tileX;
             outChildrenElevations[tileY + 1][tileX][bottomindex] = middleHeight;
         }
-
-        if (
-            (j + 1) % destSize === 0 && j !== sourceSize - 1 &&
-            (i + 1) % destSize === 0 && i !== sourceSize - 1
-        ) {
+        if ((j + 1) % destSize === 0 && j !== sourceSize - 1 &&
+            (i + 1) % destSize === 0 && i !== sourceSize - 1) {
             //current tile
             let rightBottomHeight = rgb2Height(rgbaData[k4 + sourceSize4 + 4], rgbaData[k4 + sourceSize4 + 5], rgbaData[k4 + sourceSize4 + 6]);
-
             let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(noDataValues, rightBottomHeight);
-
             let middleHeight = height;
-
             if (!(isNoDataCurrent || isNoDataRight || isNoDataBottom || isNoDataRightBottom)) {
                 middleHeight = (height + rightHeight + bottomHeight + rightBottomHeight) * 0.25;
             }
-
             destIndex = (ii + 1) * destSizeOne + (jj + 1);
             destArr[destIndex] = middleHeight;
-
             outCurrenElevations[currIndex++] = middleHeight;
-
             //next right tile
             let rightindex = (ii + 1) * destSizeOne;
             outChildrenElevations[tileY][tileX + 1][rightindex] = middleHeight;
-
             //next bottom tile
             let bottomindex = destSize;
             outChildrenElevations[tileY + 1][tileX][bottomindex] = middleHeight;
-
             //next right bottom tile
             let rightBottomindex = 0;
             outChildrenElevations[tileY + 1][tileX + 1][rightBottomindex] = middleHeight;
         }
     }
 }
-
-function extractElevationTilesMapboxNoChildren(
-    rgbaData: number[] | TypedArray,
-    noDataValues: number[] | TypedArray,
-    outCurrenElevations: number[] | TypedArray
-) {
+function extractElevationTilesMapboxNoChildren(rgbaData, noDataValues, outCurrenElevations) {
     let destSize = Math.sqrt(outCurrenElevations.length) - 1;
     let sourceSize = Math.sqrt(rgbaData.length / 4);
     let dt = sourceSize / destSize;
-
-    let rightHeight = 0,
-        bottomHeight = 0,
-        sourceSize4 = 0;
-
-    for (
-        let k = 0, currIndex = 0, sourceDataLength = rgbaData.length / 4;
-        k < sourceDataLength;
-        k++
-    ) {
+    let rightHeight = 0, bottomHeight = 0, sourceSize4 = 0;
+    for (let k = 0, currIndex = 0, sourceDataLength = rgbaData.length / 4; k < sourceDataLength; k++) {
         let k4 = k * 4;
-
         let height = rgb2Height(rgbaData[k4], rgbaData[k4 + 1], rgbaData[k4 + 2]);
-
-        let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height),
-            isNoDataRight = false,
-            isNoDataBottom = false;
-
-        let i = Math.floor(k / sourceSize),
-            j = k % sourceSize;
-
-        let tileX = Math.floor(j / destSize),
-            tileY = Math.floor(i / destSize);
-
+        let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height), isNoDataRight = false, isNoDataBottom = false;
+        let i = Math.floor(k / sourceSize), j = k % sourceSize;
+        let tileX = Math.floor(j / destSize), tileY = Math.floor(i / destSize);
         if ((i + tileY) % dt === 0 && (j + tileX) % dt === 0) {
             outCurrenElevations[currIndex++] = height;
         }
-
         if ((j + 1) % destSize === 0 && j !== sourceSize - 1) {
             //current tile
             rightHeight = rgb2Height(rgbaData[k4 + 4], rgbaData[k4 + 5], rgbaData[k4 + 6]);
-
             isNoDataRight = MapboxTerrain.checkNoDataValue(noDataValues, rightHeight);
-
             let middleHeight = height;
-
             if (!(isNoDataCurrent || isNoDataRight)) {
                 middleHeight = (height + rightHeight) * 0.5;
             }
-
             if ((i + tileY) % dt === 0) {
                 outCurrenElevations[currIndex++] = middleHeight;
             }
         }
-
         if ((i + 1) % destSize === 0 && i !== sourceSize - 1) {
             //current tile
             sourceSize4 = sourceSize * 4;
-
             bottomHeight = rgb2Height(rgbaData[k4 + sourceSize4], rgbaData[k4 + sourceSize4 + 1], rgbaData[k4 + sourceSize4 + 2]);
-
             isNoDataBottom = MapboxTerrain.checkNoDataValue(noDataValues, bottomHeight);
-
             let middleHeight = (height + bottomHeight) * 0.5;
-
             if (!(isNoDataCurrent || isNoDataBottom)) {
                 middleHeight = (height + bottomHeight) * 0.5;
             }
-
             if ((j + tileX) % dt === 0) {
                 outCurrenElevations[currIndex++] = middleHeight;
             }
         }
-
-        if (
-            (j + 1) % destSize === 0 && j !== sourceSize - 1 &&
-            (i + 1) % destSize === 0 && i !== sourceSize - 1
-        ) {
+        if ((j + 1) % destSize === 0 && j !== sourceSize - 1 &&
+            (i + 1) % destSize === 0 && i !== sourceSize - 1) {
             //current tile
             let rightBottomHeight = rgb2Height(rgbaData[k4 + sourceSize4 + 4], rgbaData[k4 + sourceSize4 + 5], rgbaData[k4 + sourceSize4 + 6]);
-
-            let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(
-                noDataValues,
-                rightBottomHeight
-            );
-
+            let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(noDataValues, rightBottomHeight);
             let middleHeight = height;
-
             if (!(isNoDataCurrent || isNoDataRight || isNoDataBottom || isNoDataRightBottom)) {
                 middleHeight = (height + rightHeight + bottomHeight + rightBottomHeight) * 0.25;
             }
-
             outCurrenElevations[currIndex++] = middleHeight;
         }
     }
 }
-
-export {MapboxTerrain};
+export { MapboxTerrain };

package/{src/terrain/index.ts → lib/js/terrain/index.d.ts}

@@ -2,5 +2,4 @@ import { BilTerrain } from './BilTerrain';
 import { EmptyTerrain } from './EmptyTerrain';
 import { GlobusTerrain } from './GlobusTerrain';
 import { MapboxTerrain } from './MapboxTerrain';
-
 export { EmptyTerrain, GlobusTerrain, MapboxTerrain, BilTerrain };

package/lib/js/terrain/index.js

@@ -0,0 +1,5 @@
+import { BilTerrain } from './BilTerrain';
+import { EmptyTerrain } from './EmptyTerrain';
+import { GlobusTerrain } from './GlobusTerrain';
+import { MapboxTerrain } from './MapboxTerrain';
+export { EmptyTerrain, GlobusTerrain, MapboxTerrain, BilTerrain };

package/lib/js/ui/Button.d.ts

@@ -0,0 +1,32 @@
+import { IViewParams, View, ViewEventsList } from './View';
+import { EventsHandler } from "../Events";
+interface HTMLElementExt extends HTMLElement {
+    __og_button__: Button;
+}
+export type ButtonEventsList = ["click", "mousedown", "mouseup", "touchstart", "touchend", "touchcancel"];
+export interface IButtonParams extends IViewParams {
+    icon?: string;
+    text?: string;
+    title?: string;
+    name?: string;
+}
+declare class Button extends View<null> {
+    events: EventsHandler<ButtonEventsList> & EventsHandler<ViewEventsList>;
+    el: HTMLElementExt | null;
+    name: string;
+    $icon: HTMLElement | null;
+    $text: HTMLElement | null;
+    constructor(options?: IButtonParams);
+    render(params: any): this;
+    protected _initEvents(): void;
+    protected _onMouseDown: (e: MouseEvent) => void;
+    protected _onMouseUp: (e: MouseEvent) => void;
+    protected _onTouchStart: (e: TouchEvent) => void;
+    protected _onTouchEnd: (e: TouchEvent) => void;
+    protected _onTouchCancel: (e: TouchEvent) => void;
+    protected _mouseClickHandler(e: MouseEvent): void;
+    protected _onMouseClick: (e: MouseEvent) => void;
+    remove(): void;
+    protected _clearEvents(): void;
+}
+export { Button };

package/lib/js/ui/Button.js

@@ -0,0 +1,78 @@
+import { stringTemplate } from '../utils/shared';
+import { View } from './View';
+const TEMPLATE = `<div class="og-button" title="{title}">
+       <div class="og-button-icon">{icon}</div>
+       <div class="og-button-text">{text}</div>
+    </div>`;
+const BUTTON_EVENTS = ["click", "mousedown", "mouseup", "touchstart", "touchend", "touchcancel"];
+class Button extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                icon: options.icon || "",
+                text: options.text || "",
+                title: options.title || ""
+            }),
+            ...options
+        });
+        this._onMouseDown = (e) => {
+            e.preventDefault();
+            this.events.dispatch(this.events.mousedown, this, e);
+        };
+        this._onMouseUp = (e) => {
+            e.preventDefault();
+            this.events.dispatch(this.events.mouseup, this, e);
+        };
+        this._onTouchStart = (e) => {
+            e.preventDefault();
+            this.events.dispatch(this.events.touchstart, this, e);
+        };
+        this._onTouchEnd = (e) => {
+            e.preventDefault();
+            this.events.dispatch(this.events.touchend, this, e);
+        };
+        this._onTouchCancel = (e) => {
+            e.preventDefault();
+            this.events.dispatch(this.events.touchcancel, this, e);
+        };
+        this._onMouseClick = (e) => {
+            this._mouseClickHandler(e);
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(BUTTON_EVENTS);
+        this.el = null;
+        this.name = options.name || "";
+        this.$icon = null;
+        this.$text = null;
+    }
+    render(params) {
+        super.render(params);
+        this.$icon = this.select(".og-button-icon");
+        this.$text = this.select(".og-button-text");
+        this.el.__og_button__ = this;
+        this._initEvents();
+        return this;
+    }
+    _initEvents() {
+        if (this.el) {
+            this.el.addEventListener("click", this._onMouseClick);
+            this.el.addEventListener("mousedown", this._onMouseDown);
+            this.el.addEventListener("mouseup", this._onMouseUp);
+            this.el.addEventListener("touchstart", this._onTouchStart);
+            this.el.addEventListener("touchend", this._onTouchEnd);
+            this.el.addEventListener("touchcancel", this._onTouchCancel);
+        }
+    }
+    _mouseClickHandler(e) {
+        e.preventDefault();
+        this.events.dispatch(this.events.click, this, e);
+    }
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+    _clearEvents() {
+        this.el && this.el.removeEventListener("click", this._onMouseClick);
+    }
+}
+export { Button };

package/lib/js/ui/ButtonGroup.d.ts

@@ -0,0 +1,16 @@
+import { ToggleButton } from "./ToggleButton";
+import { EventsHandler } from '../Events';
+interface IButtonGroupParams {
+    buttons?: ToggleButton[];
+}
+type ButtonGroupEventsList = ["change"];
+declare class ButtonGroup {
+    events: EventsHandler<ButtonGroupEventsList>;
+    protected _buttons: ToggleButton[];
+    constructor(options?: IButtonGroupParams);
+    protected _bindButton(button: ToggleButton): void;
+    add(button: ToggleButton): void;
+    protected _onChange: (isActive: boolean, btn: ToggleButton) => void;
+    remove(button: ToggleButton): void;
+}
+export { ButtonGroup };