@openglobus/og 0.17.2 → 0.18.1

package/lib/js/ui/Dialog.js

@@ -0,0 +1,173 @@
+import { getDefault, stringTemplate } from '../utils/shared';
+import { Button } from './Button';
+import { CLOSE_ICON } from './icons';
+import { View } from './View';
+const DIALOG_EVENTS = ["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 extends View {
+    constructor(options = {}) {
+        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
+        });
+        this._onCloseBtnClick = () => {
+            this.close();
+        };
+        this._onMouseDownAll = () => {
+            this.bringToFront();
+        };
+        this._onMouseDown = (e) => {
+            e.preventDefault();
+            this._startDragging();
+            this._startPosX = e.clientX;
+            this._startPosY = e.clientY;
+            document.addEventListener("mousemove", this._onMouseMove);
+            document.addEventListener("mouseup", this._onMouseUp);
+        };
+        this._onMouseMove = (e) => {
+            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);
+        };
+        this._onMouseUp = () => {
+            this._clearDragging();
+            document.removeEventListener("mouseup", this._onMouseUp);
+            document.removeEventListener("mousemove", this._onMouseMove);
+        };
+        //@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);
+    }
+    setContainer(htmlStr) {
+        this.$container.innerHTML = htmlStr;
+    }
+    get container() {
+        return this.$container;
+    }
+    get width() {
+        return this.el ? parseFloat(this.el.style.width) : 0;
+    }
+    get height() {
+        return this.el ? parseFloat(this.el.style.height) : 0;
+    }
+    bringToFront() {
+        this.el.style.zIndex = String(Dialog.__zIndex__++);
+    }
+    render(params) {
+        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;
+    }
+    show() {
+        if (!this._visibility) {
+            this._visibility = true;
+            this.el.style.display = "flex";
+            this.bringToFront();
+            this.events.dispatch(this.events.visibility, true, this);
+        }
+    }
+    hide() {
+        if (this._visibility) {
+            this._visibility = false;
+            this.el.style.display = "none";
+            this.events.dispatch(this.events.visibility, false, this);
+        }
+    }
+    close() {
+        if (this.useHide) {
+            this.hide();
+        }
+        else {
+            this.remove();
+        }
+    }
+    setVisibility(visibility) {
+        if (visibility) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    _initButtons() {
+        this._closeBtn.events.on("click", this._onCloseBtnClick);
+        this._closeBtn.appendTo(this.$buttons);
+    }
+    _initEvents() {
+        this.$header.addEventListener("mousedown", this._onMouseDown);
+        this.el.addEventListener("mousedown", this._onMouseDownAll);
+    }
+    setPosition(x, y) {
+        if (x != undefined) {
+            this.el.style.left = `${x}px`;
+        }
+        if (y != undefined) {
+            this.el.style.top = `${y}px`;
+        }
+    }
+    _startDragging() {
+        if (!this.el.classList.contains("dragging")) {
+            this.el.classList.add("dragging");
+            this.events.dispatch(this.events.dragstart, this);
+        }
+    }
+    _clearDragging() {
+        if (this.el.classList.contains("dragging")) {
+            this.events.dispatch(this.events.dragend, this);
+            this.el.classList.remove("dragging");
+        }
+    }
+    remove() {
+        this._clearDragging();
+        this._clearEvents();
+        super.remove();
+    }
+    _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);
+    }
+}
+Dialog.__zIndex__ = 0;
+export { Dialog };

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

@@ -0,0 +1,38 @@
+import { EventsHandler } from "../Events";
+import { IViewParams, View, ViewEventsList } from './View';
+interface ISliderParams extends IViewParams {
+    label?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+}
+type SliderEventsList = ["change"];
+declare class Slider extends View<null> {
+    events: EventsHandler<SliderEventsList> & EventsHandler<ViewEventsList>;
+    protected _value: number;
+    protected _min: number;
+    protected _max: number;
+    protected _startPosX: number;
+    protected _resizeObserver: ResizeObserver;
+    protected $label: HTMLElement | null;
+    protected $pointer: HTMLElement | null;
+    protected $progress: HTMLElement | null;
+    protected $input: HTMLInputElement | null;
+    protected $panel: HTMLElement | null;
+    constructor(options?: ISliderParams);
+    render(params: any): this;
+    protected _onResize: () => void;
+    set value(val: number);
+    get value(): number;
+    protected _initEvents(): void;
+    protected _clearEvents(): void;
+    protected _onMouseWheel: (e: WheelEvent) => void;
+    protected _onMouseWheelFF: (e: WheelEvent) => void;
+    protected _onInput: (e: Event) => void;
+    protected _onMouseDown: (e: MouseEvent) => void;
+    protected _setOffset(x: number): void;
+    protected _onMouseMove: (e: MouseEvent) => void;
+    protected _onMouseUp: () => void;
+    remove(): void;
+}
+export { Slider };

package/lib/js/ui/Slider.js

@@ -0,0 +1,129 @@
+import { clamp } from '../math';
+import { View } from './View';
+import { stringTemplate } from '../utils/shared';
+const SLIDER_EVENTS = ["change"];
+const TEMPLATE = `<div class="og-slider">
+      <div class="og-slider-label">{label}</div>
+      <div class="og-slider-panel">
+        <div class="og-slider-progress"></div>      
+        <div class="og-slider-pointer"></div>
+      </div>
+      <input type="number"/>
+    </div>`;
+class Slider extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                label: options.label || ""
+            })
+        });
+        this._onResize = () => {
+            this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+        };
+        this._onMouseWheel = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            //@ts-ignore
+            this.value = this._value + Math.sign(e.wheelDelta) * (this._max - this._min) / 100.0;
+        };
+        this._onMouseWheelFF = (e) => {
+            this._onMouseWheel(e);
+        };
+        this._onInput = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            //@ts-ignore
+            this.value = parseFloat(e.target.value);
+        };
+        this._onMouseDown = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            this._startPosX = e.clientX;
+            this.value = this._min + (this._max - this._min) * (e.offsetX / this.$panel.clientWidth);
+            document.addEventListener("mousemove", this._onMouseMove);
+            document.addEventListener("mouseup", this._onMouseUp);
+        };
+        this._onMouseMove = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            let rect = this.$panel.getBoundingClientRect();
+            let clientX = clamp(e.clientX, rect.left, rect.right);
+            let dx = this._startPosX - clientX;
+            this._startPosX = clientX;
+            this.value = (this.$pointer.offsetLeft - dx) * (this._max - this._min) / this.$panel.clientWidth;
+        };
+        this._onMouseUp = () => {
+            document.removeEventListener("mouseup", this._onMouseUp);
+            document.removeEventListener("mousemove", this._onMouseMove);
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(SLIDER_EVENTS);
+        this._value = options.value || 0.0;
+        this._min = options.min || 0.0;
+        this._max = options.max || 1.0;
+        //this._step = options.step || ((this._max - this._min) / 10.0);
+        this._resizeObserver = new ResizeObserver(this._onResize);
+        this._startPosX = 0;
+        this.$label = null;
+        this.$pointer = null;
+        this.$progress = null;
+        this.$input = null;
+        this.$panel = null;
+    }
+    render(params) {
+        super.render(params);
+        this.$label = this.select(".og-slider-label");
+        if (this.$label.innerHTML === "") {
+            this.$label.style.display = "none";
+        }
+        this.$pointer = this.select(".og-slider-pointer");
+        this.$progress = this.select(".og-slider-progress");
+        this.$panel = this.select(".og-slider-panel");
+        this.$input = this.select("input");
+        this._resizeObserver.observe(this.el);
+        this._initEvents();
+        return this;
+    }
+    set value(val) {
+        if (val !== this._value) {
+            this._value = clamp(val, this._min, this._max);
+            this.$input.value = this._value.toString();
+            this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
+            this.events.dispatch(this.events.change, this._value, this);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    _initEvents() {
+        this.$panel.addEventListener("mousedown", this._onMouseDown);
+        //@ts-ignore
+        this.$panel.addEventListener("mousewheel", this._onMouseWheel);
+        this.$panel.addEventListener("wheel", this._onMouseWheelFF);
+        this.$input.addEventListener("input", this._onInput);
+    }
+    _clearEvents() {
+        this.$panel.removeEventListener("mousedown", this._onMouseDown);
+        //@ts-ignore
+        this.$panel.removeEventListener("mousewheel", this._onMouseWheel);
+        this.$panel.removeEventListener("wheel", this._onMouseWheelFF);
+        this.$input.removeEventListener("input", this._onInput);
+    }
+    _setOffset(x) {
+        if (x >= 0 && x <= this.$panel.clientWidth) {
+            this.$pointer.style.left = this.$progress.style.width = `${x * 100 / this.$panel.clientWidth}%`;
+        }
+    }
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+}
+export { Slider };

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

@@ -0,0 +1,20 @@
+import { Button, IButtonParams, ButtonEventsList } from './Button';
+import { EventsHandler } from "../Events";
+import { ViewEventsList } from "./View";
+interface IToggleButtonParams extends IButtonParams {
+    isActive?: boolean;
+    preventClick?: boolean;
+}
+type ToggleButtonEventsList = ["change"];
+declare class ToggleButton extends Button {
+    events: EventsHandler<ToggleButtonEventsList> & EventsHandler<ButtonEventsList> & EventsHandler<ViewEventsList>;
+    protected _isActive: boolean;
+    preventClick: boolean;
+    constructor(options: IToggleButtonParams);
+    setActive(isActive: boolean, stopPropagation?: boolean): void;
+    protected _toggle(): void;
+    get isActive(): boolean;
+    render(params: any): this;
+    protected _onMouseClick: (e: MouseEvent) => void;
+}
+export { ToggleButton };

package/lib/js/ui/ToggleButton.js

@@ -0,0 +1,42 @@
+import { Button } from './Button';
+const TOGGLEBUTTON_EVENTS = ["change"];
+class ToggleButton extends Button {
+    constructor(options) {
+        super({
+            ...options
+        });
+        this._onMouseClick = (e) => {
+            if (!this.preventClick) {
+                this._mouseClickHandler(e);
+                this.setActive(!this.isActive);
+            }
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(TOGGLEBUTTON_EVENTS);
+        this._isActive = options.isActive || false;
+        this.preventClick = options.preventClick || false;
+    }
+    setActive(isActive, stopPropagation = false) {
+        if (isActive !== this._isActive) {
+            this._isActive = isActive;
+            this._toggle();
+            if (!stopPropagation) {
+                this.events.dispatch(this.events.change, isActive, this);
+            }
+        }
+    }
+    _toggle() {
+        this.el && this.el.classList.toggle("og-button__active");
+    }
+    get isActive() {
+        return this._isActive;
+    }
+    render(params) {
+        super.render(params);
+        if (this._isActive) {
+            this._toggle();
+        }
+        return this;
+    }
+}
+export { ToggleButton };

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

@@ -0,0 +1,37 @@
+import { EventsHandler } from '../Events';
+export interface IViewParams {
+    model?: any;
+    template?: string;
+    parent?: View<any> | null;
+    classList?: string[];
+}
+export type ViewEventsList = ["render"];
+declare class View<M> {
+    static __counter__: number;
+    protected __id: number;
+    events: EventsHandler<ViewEventsList>;
+    model: M;
+    template: string;
+    parent: View<any> | null;
+    el: HTMLElement | null;
+    protected _classList: string[];
+    constructor(options?: IViewParams);
+    static getHTML(template: string, params: any): string;
+    static parseHTML(htmlStr: string): HTMLElement[];
+    static insertAfter(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[];
+    static insertBefore(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[];
+    insertBefore(view: View<any> | HTMLElement): void;
+    insertAfter(view: View<any> | HTMLElement): void;
+    isEqual(view: View<any>): boolean;
+    appendTo(node: HTMLElement, clean?: boolean, firstPosition?: boolean): this;
+    afterRender(parentNode: HTMLElement): void;
+    beforeRender(parentNode: HTMLElement): void;
+    stopPropagation(): void;
+    renderTemplate(params: any): HTMLElement;
+    render(params?: any): this;
+    select<T extends HTMLElement>(queryStr: string): T | null;
+    selectRemove(queryStr: string): HTMLElement | undefined;
+    selectAll(queryStr: string, callback?: Function): NodeListOf<Element> | undefined;
+    remove(): void;
+}
+export { View };

package/lib/js/ui/View.js

@@ -0,0 +1,151 @@
+import { createEvents } from '../Events';
+import { parseHTML, stringTemplate } from '../utils/shared';
+const VIEW_EVENTS = ["render"];
+class View {
+    constructor(options = {}) {
+        this.__id = View.__counter__++;
+        this.events = createEvents(VIEW_EVENTS);
+        this.model = options.model || null;
+        this.template = options.template || "";
+        this.parent = options.parent || null;
+        this._classList = options.classList || [];
+        this.el = null;
+    }
+    static getHTML(template, params) {
+        return stringTemplate(template, params);
+    }
+    static parseHTML(htmlStr) {
+        return parseHTML(htmlStr);
+    }
+    static insertAfter(newNodes, referenceNode) {
+        if (!Array.isArray(newNodes)) {
+            newNodes = [newNodes];
+        }
+        for (let i = 0; i < newNodes.length; i++) {
+            if (referenceNode.parentNode) {
+                referenceNode.parentNode.insertBefore(newNodes[i], referenceNode.nextSibling);
+            }
+        }
+        return newNodes;
+    }
+    static insertBefore(newNodes, referenceNode) {
+        if (!Array.isArray(newNodes)) {
+            newNodes = [newNodes];
+        }
+        for (let i = 0; i < newNodes.length; i++) {
+            if (referenceNode.parentNode) {
+                referenceNode.parentNode.insertBefore(newNodes[i], referenceNode);
+            }
+        }
+        return newNodes;
+    }
+    insertBefore(view) {
+        if (!this.el) {
+            this.render();
+        }
+        if (this.el) {
+            if (view instanceof HTMLElement && view.parentNode) {
+                View.insertBefore(this.el, view);
+            }
+            if (view instanceof View && view.el && view.el.parentNode) {
+                View.insertBefore(this.el, view.el);
+            }
+        }
+    }
+    insertAfter(view) {
+        if (!this.el) {
+            this.render();
+        }
+        if (this.el) {
+            if (view instanceof HTMLElement && view.parentNode) {
+                View.insertAfter(this.el, view);
+            }
+            if (view instanceof View && view.el && view.el.parentNode) {
+                View.insertAfter(this.el, view.el);
+            }
+        }
+    }
+    isEqual(view) {
+        return view.__id === this.__id;
+    }
+    appendTo(node, clean = false, firstPosition = false) {
+        if (node) {
+            if (!this.el) {
+                this.beforeRender(node);
+                this.render();
+            }
+            if (this.el && this.el.parentNode) {
+                this.el.parentNode.removeChild(this.el);
+            }
+            if (clean) {
+                node.innerHTML = "";
+            }
+            if (this.el) {
+                if (firstPosition) {
+                    if (node.childNodes[0]) {
+                        View.insertBefore(this.el, node.childNodes[0]);
+                    }
+                    else {
+                        node.appendChild(this.el);
+                    }
+                }
+                else {
+                    node.appendChild(this.el);
+                }
+            }
+            this.afterRender(node);
+        }
+        return this;
+    }
+    afterRender(parentNode) {
+    }
+    beforeRender(parentNode) {
+    }
+    stopPropagation() {
+        this.events.stopPropagation();
+    }
+    renderTemplate(params) {
+        return View.parseHTML(View.getHTML(this.template, params || {}))[0];
+    }
+    render(params) {
+        this.el = this.renderTemplate(params);
+        for (let i = 0, len = this._classList.length; i < len; i++) {
+            this.el.classList.add(this._classList[i]);
+        }
+        this.events.dispatch(this.events.render, this);
+        return this;
+    }
+    select(queryStr) {
+        if (this.el) {
+            return this.el.querySelector(queryStr);
+        }
+        return null;
+    }
+    selectRemove(queryStr) {
+        if (this.el) {
+            let r = this.select(queryStr);
+            if (r && r.parentNode) {
+                r.parentNode.removeChild(r);
+                return r;
+            }
+        }
+    }
+    selectAll(queryStr, callback) {
+        if (this.el) {
+            const res = this.el.querySelectorAll(queryStr);
+            if (callback) {
+                for (let i = 0, len = res.length; i < len; i++) {
+                    callback(res[i], i);
+                }
+            }
+            return res;
+        }
+    }
+    remove() {
+        if (this.el && this.el.parentNode) {
+            this.el.parentNode.removeChild(this.el);
+        }
+    }
+}
+View.__counter__ = 0;
+export { View };

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

@@ -0,0 +1 @@
+export declare const CLOSE_ICON = "<svg className=\"svg-icon\" style=\"width: 1em; height: 1em;vertical-align: middle;fill: currentColor; overflow: hidden;\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z\"/>\n</svg>";

package/lib/js/ui/icons.js

@@ -0,0 +1,3 @@
+export const CLOSE_ICON = `<svg className="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor; overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M777.856 280.192l-33.92-33.952-231.872 231.872-231.84-231.872-33.984 33.888 231.872 231.904-231.84 231.84 33.888 33.984 231.904-231.904 231.84 231.872 33.952-33.888-231.872-231.904z"/>
+</svg>`;

package/lib/js/utils/BaseWorker.d.ts

@@ -0,0 +1,14 @@
+export declare class BaseWorker<T> {
+    protected _sourceId: number;
+    protected _source: Map<number, T>;
+    protected _pendingQueue: T[];
+    protected _numWorkers: number;
+    protected _workerQueue: Worker[];
+    constructor(numWorkers?: number, program?: string);
+    check(): void;
+    setProgram(program: string): void;
+    make(data: T): void;
+    protected _onMessage(e: MessageEvent): void;
+    destroy(): void;
+    get pendingQueue(): T[];
+}

package/lib/js/utils/BaseWorker.js

@@ -0,0 +1,47 @@
+export class BaseWorker {
+    constructor(numWorkers = 2, program) {
+        this._sourceId = 0;
+        this._source = new Map();
+        this._pendingQueue = [];
+        this._numWorkers = numWorkers;
+        this._workerQueue = [];
+        if (program) {
+            this.setProgram(program);
+        }
+    }
+    check() {
+        if (this._pendingQueue.length) {
+            this.make(this._pendingQueue.pop());
+        }
+    }
+    setProgram(program) {
+        let p = new Blob([program], { type: "application/javascript" });
+        for (let i = 0; i < this._numWorkers; i++) {
+            let w = new Worker(URL.createObjectURL(p));
+            w.onmessage = (e) => {
+                this._onMessage(e);
+                this._workerQueue && this._workerQueue.unshift(e.target);
+                this.check();
+            };
+            this._workerQueue.push(w);
+        }
+    }
+    make(data) {
+    }
+    _onMessage(e) {
+    }
+    destroy() {
+        for (let i = 0; i < this._workerQueue.length; i++) {
+            const w = this._workerQueue[i];
+            w.onmessage = null;
+            w.terminate();
+        }
+        //@ts-ignore
+        this._pendingQueue = null;
+        //@ts-ignore
+        this._workerQueue = null;
+    }
+    get pendingQueue() {
+        return this._pendingQueue;
+    }
+}