@openglobus/og 0.17.2 → 0.18.0

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

@@ -1,19 +1,39 @@
-import { Layer } from "../layer/Layer.js";
-import { isPowerOfTwo } from "../math.js";
-import * as mercator from "../mercator.js";
-import { getTileExtent } from "../mercator.js";
-import { GlobusTerrain } from "./GlobusTerrain.js";
+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;
+}
 
-const KEY =
-    "pk.eyJ1IjoiZm94bXVsZGVyODMiLCJhIjoiY2pqYmR3dG5oM2Z1bzNrczJqYm5pODhuNSJ9.Y4DRmEPhb-XSlCR9CAXACQ";
+/**
+ * The key doesn't work; just an example!
+ */
+const KEY = "pk.eyJ1IjoiZm94bXVsZGVyODMiLCJhIjoiY2pqYmR3dG5oM2Z1bzNrczJqYm5pODhuNSJ9.Y4DRmEPhb-XSlCR9CAXACQ";
 
-const rgb2Height = (r, g, b) => {
+const rgb2Height = (r: number, g: number, b: number): number => {
     return -10000 + 0.1 * (r * 256 * 256 + g * 256 + b);
 };
 
 class MapboxTerrain extends GlobusTerrain {
-    constructor(name, options = {}) {
-        super(name || "mapbox", {
+
+    protected _imageSize: number;
+
+    protected _ctx: CanvasRenderingContext2D;
+
+    protected _imageDataCache: Record<string, Uint8ClampedArray>;
+
+    constructor(name: string | null, options: IMapboxTerrainParams = {}) {
+        super(name || "MapboxTerrain", {
             equalizeVertices: options.equalizeVertices != undefined ? options.equalizeVertices : true,
             maxZoom: options.maxZoom || 17,
             ...options
@@ -25,14 +45,9 @@ class MapboxTerrain extends GlobusTerrain {
             64, 32, 16, 8, 8, 8, 8, 16, 16, 16, 16, 16, 32, 16, 32, 16, 32, 16, 32, 16, 8, 4
         ];
 
-        "//{s}.srtm3.openglobus.org/{z}/{y}/{x}.ddm";
-
-        this.url =
-            options.url != undefined
-                ? options.url
-                : `//api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=${
-                    options.key || KEY
-                }`;
+        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];
 
@@ -47,24 +62,20 @@ class MapboxTerrain extends GlobusTerrain {
         this._imageDataCache = {};
     }
 
-    isBlur(segment) {
-        if (segment.tileZoom >= 16) {
-            return true;
-        }
-        return false;
+    public override isBlur(segment: Segment): boolean {
+        return segment.tileZoom >= 16;
     }
 
-    _createTemporalCanvas(size) {
+    protected _createTemporalCanvas(size: number): CanvasRenderingContext2D {
         let canvas = document.createElement("canvas");
         canvas.width = size;
         canvas.height = size;
-        return canvas.getContext("2d",
-            {
-                willReadFrequently: true
-            });
+        return canvas.getContext("2d", {
+            willReadFrequently: true
+        })!;
     }
 
-    _createHeights(data, tileIndex, tileX, tileY, tileZoom, extent, preventChildren) {
+    protected override _createHeights(data: HTMLImageElement | ImageBitmap, tileIndex: string, tileX: number, tileY: number, tileZoom: number, extent: Extent, preventChildren: boolean): TypedArray | number[] {
 
         this._ctx.clearRect(0, 0, this._imageSize, this._imageSize);
         this._ctx.drawImage(data, 0, 0);
@@ -73,7 +84,7 @@ class MapboxTerrain extends GlobusTerrain {
         const SIZE = data.width;
 
         //
-        //Non power of two images
+        //Non-power of two images
         //
         if (!isPowerOfTwo(this._imageSize) && SIZE === this._imageSize) {
             let outCurrenElevations = new Float32Array(SIZE * SIZE);
@@ -163,7 +174,7 @@ class MapboxTerrain extends GlobusTerrain {
         return outCurrenElevations;
     }
 
-    getHeightAsync(lonLat, callback, zoom) {
+    public override getHeightAsync(lonLat: LonLat, callback: (h: number) => void, zoom?: number): boolean {
         if (!lonLat || lonLat.lat > mercator.MAX_LAT || lonLat.lat < mercator.MIN_LAT) {
             callback(0);
             return true;
@@ -199,7 +210,7 @@ class MapboxTerrain extends GlobusTerrain {
             });
         }
 
-        this._fetchCache[tileIndex].then((response) => {
+        this._fetchCache[tileIndex].then((response: IResponse) => {
             if (response.status === "ready") {
                 this._ctx.clearRect(0, 0, this._imageSize, this._imageSize);
                 this._ctx.drawImage(response.data, 0, 0);
@@ -209,6 +220,7 @@ class MapboxTerrain extends GlobusTerrain {
             } else if (response.status === "error") {
                 callback(0);
             } else {
+                //@ts-ignore
                 this._fetchCache[tileIndex] = null;
                 delete this._fetchCache[tileIndex];
             }
@@ -218,7 +230,7 @@ class MapboxTerrain extends GlobusTerrain {
     }
 }
 
-function extractElevationTilesMapboxNonPowerOfTwo(rgbaData, outCurrenElevations) {
+function extractElevationTilesMapboxNonPowerOfTwo(rgbaData: number[] | TypedArray, outCurrenElevations: number[] | TypedArray) {
     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]);
@@ -226,10 +238,10 @@ function extractElevationTilesMapboxNonPowerOfTwo(rgbaData, outCurrenElevations)
 }
 
 function extractElevationTilesMapbox(
-    rgbaData,
-    noDataValues,
-    outCurrenElevations,
-    outChildrenElevations
+    rgbaData: number[] | TypedArray,
+    noDataValues: number[] | TypedArray,
+    outCurrenElevations: number[] | TypedArray,
+    outChildrenElevations: number[][][] | TypedArray[][]
 ) {
     let destSize = Math.sqrt(outCurrenElevations.length) - 1;
     let destSizeOne = destSize + 1;
@@ -248,7 +260,6 @@ function extractElevationTilesMapbox(
         let k4 = k * 4;
 
         let height = rgb2Height(rgbaData[k4], rgbaData[k4 + 1], rgbaData[k4 + 2]);
-        //-10000 + 0.1 * (rgbaData[k4] * 256 * 256 + rgbaData[k4 + 1] * 256 + rgbaData[k4 + 2]);
 
         let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height),
             isNoDataRight = false,
@@ -276,7 +287,6 @@ function extractElevationTilesMapbox(
         if ((j + 1) % destSize === 0 && j !== sourceSize - 1) {
             //current tile
             rightHeight = rgb2Height(rgbaData[k4 + 4], rgbaData[k4 + 5], rgbaData[k4 + 6]);
-            // -10000 + 0.1 * (rgbaData[k4 + 4] * 256 * 256 + rgbaData[k4 + 5] * 256 + rgbaData[k4 + 6]);
 
             isNoDataRight = MapboxTerrain.checkNoDataValue(noDataValues, rightHeight);
 
@@ -303,7 +313,6 @@ function extractElevationTilesMapbox(
             sourceSize4 = sourceSize * 4;
 
             bottomHeight = rgb2Height(rgbaData[k4 + sourceSize4], rgbaData[k4 + sourceSize4 + 1], rgbaData[k4 + sourceSize4 + 2]);
-            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 1] * 256 + rgbaData[k4 + sourceSize4 + 2]);
 
             isNoDataBottom = MapboxTerrain.checkNoDataValue(noDataValues, bottomHeight);
 
@@ -326,19 +335,13 @@ function extractElevationTilesMapbox(
         }
 
         if (
-            (j + 1) % destSize === 0 &&
-            j !== sourceSize - 1 &&
-            (i + 1) % destSize === 0 &&
-            i !== sourceSize - 1
+            (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]);
-            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4 + 4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 5] * 256 + rgbaData[k4 + sourceSize4 + 6]);
 
-            let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(
-                noDataValues,
-                rightBottomHeight
-            );
+            let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(noDataValues, rightBottomHeight);
 
             let middleHeight = height;
 
@@ -367,9 +370,9 @@ function extractElevationTilesMapbox(
 }
 
 function extractElevationTilesMapboxNoChildren(
-    rgbaData,
-    noDataValues,
-    outCurrenElevations
+    rgbaData: number[] | TypedArray,
+    noDataValues: number[] | TypedArray,
+    outCurrenElevations: number[] | TypedArray
 ) {
     let destSize = Math.sqrt(outCurrenElevations.length) - 1;
     let sourceSize = Math.sqrt(rgbaData.length / 4);
@@ -387,7 +390,6 @@ function extractElevationTilesMapboxNoChildren(
         let k4 = k * 4;
 
         let height = rgb2Height(rgbaData[k4], rgbaData[k4 + 1], rgbaData[k4 + 2]);
-        //-10000 + 0.1 * (rgbaData[k4] * 256 * 256 + rgbaData[k4 + 1] * 256 + rgbaData[k4 + 2]);
 
         let isNoDataCurrent = MapboxTerrain.checkNoDataValue(noDataValues, height),
             isNoDataRight = false,
@@ -406,7 +408,6 @@ function extractElevationTilesMapboxNoChildren(
         if ((j + 1) % destSize === 0 && j !== sourceSize - 1) {
             //current tile
             rightHeight = rgb2Height(rgbaData[k4 + 4], rgbaData[k4 + 5], rgbaData[k4 + 6]);
-            //-10000 + 0.1 * (rgbaData[k4 + 4] * 256 * 256 + rgbaData[k4 + 5] * 256 + rgbaData[k4 + 6]);
 
             isNoDataRight = MapboxTerrain.checkNoDataValue(noDataValues, rightHeight);
 
@@ -426,7 +427,6 @@ function extractElevationTilesMapboxNoChildren(
             sourceSize4 = sourceSize * 4;
 
             bottomHeight = rgb2Height(rgbaData[k4 + sourceSize4], rgbaData[k4 + sourceSize4 + 1], rgbaData[k4 + sourceSize4 + 2]);
-            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 1] * 256 + rgbaData[k4 + sourceSize4 + 2]);
 
             isNoDataBottom = MapboxTerrain.checkNoDataValue(noDataValues, bottomHeight);
 
@@ -442,14 +442,11 @@ function extractElevationTilesMapboxNoChildren(
         }
 
         if (
-            (j + 1) % destSize === 0 &&
-            j !== sourceSize - 1 &&
-            (i + 1) % destSize === 0 &&
-            i !== sourceSize - 1
+            (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]);
-            // -10000 + 0.1 * (rgbaData[k4 + sourceSize4 + 4] * 256 * 256 + rgbaData[k4 + sourceSize4 + 5] * 256 + rgbaData[k4 + sourceSize4 + 6]);
 
             let isNoDataRightBottom = MapboxTerrain.checkNoDataValue(
                 noDataValues,
@@ -467,4 +464,4 @@ function extractElevationTilesMapboxNoChildren(
     }
 }
 
-export { MapboxTerrain };
+export {MapboxTerrain};

package/src/terrain/index.ts

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

package/src/ui/Button.ts

@@ -0,0 +1,121 @@
+import {stringTemplate} from '../utils/shared';
+import {IViewParams, View, ViewEventsList} from './View';
+import {EventsHandler} from "../Events";
+
+const TEMPLATE =
+    `<div class="og-button" title="{title}">
+       <div class="og-button-icon">{icon}</div>
+       <div class="og-button-text">{text}</div>
+    </div>`;
+
+interface HTMLElementExt extends HTMLElement {
+    __og_button__: Button;
+}
+
+export type ButtonEventsList = ["click", "mousedown", "mouseup", "touchstart", "touchend", "touchcancel"];
+
+const BUTTON_EVENTS: ButtonEventsList = ["click", "mousedown", "mouseup", "touchstart", "touchend", "touchcancel"];
+
+export interface IButtonParams extends IViewParams {
+    icon?: string;
+    text?: string;
+    title?: string;
+    name?: string;
+}
+
+class Button extends View<null> {
+
+    public override events: EventsHandler<ButtonEventsList> & EventsHandler<ViewEventsList>;
+
+    public override el: HTMLElementExt | null;
+
+    public name: string;
+    public $icon: HTMLElement | null;
+    public $text: HTMLElement | null;
+
+    constructor(options: IButtonParams = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                icon: options.icon || "",
+                text: options.text || "",
+                title: options.title || ""
+            }),
+            ...options
+        });
+
+        //@ts-ignore
+        this.events = this.events.registerNames(BUTTON_EVENTS);
+
+        this.el = null;
+
+        this.name = options.name || "";
+
+        this.$icon = null;
+        this.$text = null;
+    }
+
+    public override render(params: any): this {
+        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;
+    }
+
+    protected _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);
+        }
+    }
+
+    protected _onMouseDown = (e: MouseEvent) => {
+        e.preventDefault();
+        this.events.dispatch(this.events.mousedown, this, e);
+    }
+
+    protected _onMouseUp = (e: MouseEvent) => {
+        e.preventDefault();
+        this.events.dispatch(this.events.mouseup, this, e);
+    }
+
+    protected _onTouchStart = (e: TouchEvent) => {
+        e.preventDefault();
+        this.events.dispatch(this.events.touchstart, this, e);
+    }
+
+    protected _onTouchEnd = (e: TouchEvent) => {
+        e.preventDefault();
+        this.events.dispatch(this.events.touchend, this, e);
+    }
+
+    protected _onTouchCancel = (e: TouchEvent) => {
+        e.preventDefault();
+        this.events.dispatch(this.events.touchcancel, this, e);
+    }
+
+    protected _mouseClickHandler(e: MouseEvent) {
+        e.preventDefault();
+        this.events.dispatch(this.events.click, this, e);
+    }
+
+    protected _onMouseClick = (e: MouseEvent) => {
+        this._mouseClickHandler(e)
+    }
+
+    public override remove() {
+        this._clearEvents();
+        super.remove();
+    }
+
+    protected _clearEvents() {
+        this.el && this.el.removeEventListener("click", this._onMouseClick);
+    }
+}
+
+export {Button};

package/src/ui/ButtonGroup.ts

@@ -0,0 +1,63 @@
+import {ToggleButton} from "./ToggleButton";
+import {createEvents, EventsHandler} from '../Events';
+
+interface IButtonGroupParams {
+    buttons?: ToggleButton[];
+}
+
+type ButtonGroupEventsList = ["change"];
+
+const BUTTONGROUP_EVENTS: ButtonGroupEventsList = ["change"];
+
+class ButtonGroup {
+
+    public events: EventsHandler<ButtonGroupEventsList>;
+
+    protected _buttons: ToggleButton[];
+
+    constructor(options: IButtonGroupParams = {}) {
+
+        this.events = createEvents<ButtonGroupEventsList>(BUTTONGROUP_EVENTS);
+
+        this._buttons = options.buttons || [];
+
+        for (let i = 0; i < this._buttons.length; i++) {
+            this._bindButton(this._buttons[i]);
+        }
+    }
+
+    protected _bindButton(button: ToggleButton) {
+        button.events.on("change", this._onChange);
+    }
+
+    public add(button: ToggleButton) {
+        this._buttons.push(button);
+        this._bindButton(button);
+    }
+
+    protected _onChange = (isActive: boolean, btn: ToggleButton) => {
+        if (isActive) {
+            btn.preventClick = true;
+            for (let i = 0; i < this._buttons.length; i++) {
+                let bi = this._buttons[i];
+                if (!bi.isEqual(btn)) {
+                    bi.setActive(false);
+                    bi.preventClick = false;
+                }
+            }
+            this.events.dispatch(this.events.change, btn);
+        }
+    }
+
+    public remove(button: ToggleButton) {
+        for (let i = 0; i < this._buttons.length; i++) {
+            if (this._buttons[i].isEqual(button)) {
+                this._buttons.splice(i);
+                button.events.off("change", this._onChange);
+                return;
+            }
+        }
+    }
+}
+
+export {ButtonGroup}

package/src/ui/Dialog.ts

@@ -0,0 +1,244 @@
+import {getDefault, stringTemplate} from '../utils/shared';
+import {Button} from './Button';
+import {CLOSE_ICON} from './icons';
+import {IViewParams, View, ViewEventsList} from './View';
+import {EventsHandler} from "../Events";
+
+export interface IDialogParams extends IViewParams {
+    title?: string;
+    visible?: boolean;
+    resizable?: boolean;
+    width?: number;
+    height?: number;
+    left?: number;
+    top?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    useHide?: boolean;
+}
+
+type DialogEventsList = ["resize", "focus", "visibility", "dragstart", "dragend"];
+
+const DIALOG_EVENTS: DialogEventsList = ["resize", "focus", "visibility", "dragstart", "dragend"];
+
+const TEMPLATE = `<div class="og-ddialog" 
+        style="display:{display}; resize:{resize}; width: {width}px; {height}; top: {top}px; left: {left}px; min-height: {minHeight}; max-height: {maxHeight}; min-width: {minWidth}; max-width: {maxWidth};">
+       <div class="og-ddialog-header">
+         <div class="og-ddialog-header__title">{title}</div>      
+         <div class="og-ddialog-header__buttons"></div>      
+        </div>
+       <div class="og-ddialog-container"></div>
+    </div>>`;
+
+class Dialog<M> extends View<M> {
+
+    static __zIndex__: number = 0;
+
+    public override events: EventsHandler<DialogEventsList> & EventsHandler<ViewEventsList>;
+
+    public $header: HTMLElement | null;
+    public $title: HTMLElement | null;
+    public $container: HTMLElement | null;
+    public $buttons: HTMLElement | null;
+
+    public useHide: boolean;
+
+    protected _startPosX: number;
+    protected _startPosY: number;
+
+    protected _closeBtn: Button;
+
+    protected _visibility: boolean;
+
+    constructor(options: IDialogParams = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                title: options.title || "",
+                display: getDefault(options.visible, true) ? "flex" : "none",
+                resize: getDefault(options.resizable, true) ? "both" : "none",
+                width: options.width || 300,
+                height: options.height ? `height:${options.height || 200}` : "",
+                left: options.left || 0,
+                top: options.top || 0,
+                minHeight: options.minHeight ? `${options.minHeight}px` : 'unset',
+                maxHeight: options.maxHeight ? `${options.maxHeight}px` : 'unset',
+                minWidth: options.minWidth ? `${options.minWidth}px` : 'unset',
+                maxWidth: options.maxWidth ? `${options.maxWidth}px` : 'unset',
+            }),
+            ...options
+        });
+
+        //@ts-ignore
+        this.events = this.events.registerNames(DIALOG_EVENTS);
+
+        this._startPosX = 0;
+        this._startPosY = 0;
+
+        this.$header = null;
+        this.$title = null;
+        this.$container = null;
+        this.$buttons = null;
+
+        this._closeBtn = new Button({
+            icon: CLOSE_ICON,
+            classList: ["og-button-size__20"]
+        });
+
+        this.useHide = options.useHide || false;
+
+        this._visibility = getDefault(options.visible, true);
+    }
+
+    public setContainer(htmlStr: string) {
+        this.$container!.innerHTML = htmlStr;
+    }
+
+    public get container(): HTMLElement | null {
+        return this.$container;
+    }
+
+    public get width(): number {
+        return this.el ? parseFloat(this.el.style.width) : 0;
+    }
+
+    public get height(): number {
+        return this.el ? parseFloat(this.el.style.height) : 0;
+    }
+
+    public bringToFront() {
+        this.el!.style.zIndex = String(Dialog.__zIndex__++);
+    }
+
+    public override render(params: any): this {
+        super.render(params);
+        this.bringToFront();
+        this.$header = this.select(".og-ddialog-header");
+        this.$title = this.select(".og-ddialog-header__title");
+        this.$container = this.select(".og-ddialog-container");
+        this.$buttons = this.select(".og-ddialog-header__buttons");
+        this._initEvents();
+        this._initButtons();
+        return this;
+    }
+
+    public show() {
+        if (!this._visibility) {
+            this._visibility = true;
+            this.el!.style.display = "flex";
+            this.bringToFront();
+            this.events.dispatch(this.events.visibility, true, this);
+        }
+    }
+
+    public hide() {
+        if (this._visibility) {
+            this._visibility = false;
+            this.el!.style.display = "none";
+            this.events.dispatch(this.events.visibility, false, this);
+        }
+    }
+
+    public close() {
+        if (this.useHide) {
+            this.hide();
+        } else {
+            this.remove();
+        }
+    }
+
+    public setVisibility(visibility: boolean) {
+        if (visibility) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+
+    protected _initButtons() {
+        this._closeBtn.events.on("click", this._onCloseBtnClick);
+        this._closeBtn.appendTo(this.$buttons!);
+    }
+
+    protected _initEvents() {
+        this.$header!.addEventListener("mousedown", this._onMouseDown);
+        this.el!.addEventListener("mousedown", this._onMouseDownAll);
+    }
+
+    protected _onCloseBtnClick = () => {
+        this.close();
+    }
+
+    protected _onMouseDownAll = () => {
+        this.bringToFront();
+    }
+
+    protected _onMouseDown = (e: MouseEvent) => {
+        e.preventDefault();
+
+        this._startDragging();
+
+        this._startPosX = e.clientX;
+        this._startPosY = e.clientY;
+
+        document.addEventListener("mousemove", this._onMouseMove);
+        document.addEventListener("mouseup", this._onMouseUp);
+    }
+
+    public setPosition(x?: number, y?: number) {
+        if (x != undefined) {
+            this.el!.style.left = `${x}px`;
+        }
+        if (y != undefined) {
+            this.el!.style.top = `${y}px`;
+        }
+    }
+
+    protected _onMouseMove = (e: MouseEvent) => {
+        e.preventDefault();
+        let dx = this._startPosX - e.clientX;
+        let dy = this._startPosY - e.clientY;
+        this._startPosX = e.clientX;
+        this._startPosY = e.clientY;
+        this.setPosition(this.el!.offsetLeft - dx, this.el!.offsetTop - dy);
+    }
+
+    protected _startDragging() {
+        if (!this.el!.classList.contains("dragging")) {
+            this.el!.classList.add("dragging");
+            this.events.dispatch(this.events.dragstart, this);
+        }
+    }
+
+    protected _clearDragging() {
+        if (this.el!.classList.contains("dragging")) {
+            this.events.dispatch(this.events.dragend, this);
+            this.el!.classList.remove("dragging");
+        }
+    }
+
+    protected _onMouseUp = () => {
+        this._clearDragging();
+        document.removeEventListener("mouseup", this._onMouseUp);
+        document.removeEventListener("mousemove", this._onMouseMove);
+    }
+
+    public override remove() {
+        this._clearDragging();
+        this._clearEvents();
+        super.remove();
+    }
+
+    protected _clearEvents() {
+        this._closeBtn.events.off("click", this._onCloseBtnClick);
+
+        document.removeEventListener("mouseup", this._onMouseUp);
+        document.removeEventListener("mousemove", this._onMouseMove);
+
+        this.$header!.removeEventListener("mousedown", this._onMouseDown);
+        this.el!.removeEventListener("mousedown", this._onMouseDownAll);
+    }
+}
+
+export {Dialog};