@openglobus/og 0.17.2 → 0.18.0

package/src/ui/Slider.ts

@@ -0,0 +1,188 @@
+import {clamp} from '../math';
+import {EventsHandler} from "../Events";
+import {IViewParams, View, ViewEventsList} from './View';
+import {stringTemplate} from '../utils/shared';
+
+interface ISliderParams extends IViewParams {
+    label?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+}
+
+type SliderEventsList = ["change"];
+
+const SLIDER_EVENTS: SliderEventsList = ["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<null> {
+
+    public override 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 = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                label: options.label || ""
+            })
+        });
+
+        //@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;
+    }
+
+    public override render(params: any): this {
+
+        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<HTMLInputElement>("input");
+
+        this._resizeObserver.observe(this.el!);
+
+        this._initEvents();
+
+        return this;
+    }
+
+    protected _onResize = () => {
+        this._setOffset(this._value * this.$panel!.clientWidth / (this._max - this._min));
+    }
+
+    public set value(val: number) {
+        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);
+        }
+    }
+
+    public get value(): number {
+        return this._value;
+    }
+
+    protected _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);
+    }
+
+    protected _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);
+    }
+
+    protected _onMouseWheel = (e: WheelEvent) => {
+        //@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;
+    }
+
+    protected _onMouseWheelFF = (e: WheelEvent) => {
+        this._onMouseWheel(e);
+    }
+
+    protected _onInput = (e: Event) => {
+        //@ts-ignore
+        e = e || window.event;
+        e.preventDefault();
+        e.stopPropagation();
+        //@ts-ignore
+        this.value = parseFloat(e.target.value);
+    }
+
+    protected _onMouseDown = (e: MouseEvent) => {
+        //@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);
+    }
+
+    protected _setOffset(x: number) {
+        if (x >= 0 && x <= this.$panel!.clientWidth) {
+            this.$pointer!.style.left = this.$progress!.style.width = `${x * 100 / this.$panel!.clientWidth}%`;
+        }
+    }
+
+    protected _onMouseMove = (e: MouseEvent) => {
+        //@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;
+    }
+
+    protected _onMouseUp = () => {
+        document.removeEventListener("mouseup", this._onMouseUp);
+        document.removeEventListener("mousemove", this._onMouseMove);
+    }
+
+    public override remove() {
+        this._clearEvents();
+        super.remove();
+    }
+}
+
+export {Slider}

package/src/ui/ToggleButton.ts

@@ -0,0 +1,68 @@
+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"];
+
+const TOGGLEBUTTON_EVENTS: ToggleButtonEventsList = ["change"];
+
+class ToggleButton extends Button {
+
+    public override events: EventsHandler<ToggleButtonEventsList> & EventsHandler<ButtonEventsList> & EventsHandler<ViewEventsList>;
+
+    protected _isActive: boolean;
+    public preventClick: boolean;
+
+    constructor(options: IToggleButtonParams) {
+        super({
+            ...options
+        });
+
+        //@ts-ignore
+        this.events = this.events.registerNames(TOGGLEBUTTON_EVENTS);
+
+        this._isActive = options.isActive || false;
+
+        this.preventClick = options.preventClick || false;
+    }
+
+    public setActive(isActive: boolean, stopPropagation: boolean = false) {
+        if (isActive !== this._isActive) {
+            this._isActive = isActive;
+            this._toggle();
+            if (!stopPropagation) {
+                this.events.dispatch(this.events.change, isActive, this);
+            }
+        }
+    }
+
+    protected _toggle() {
+        this.el && this.el.classList.toggle("og-button__active");
+    }
+
+    public get isActive(): boolean {
+        return this._isActive;
+    }
+
+    public override render(params: any): this {
+        super.render(params);
+        if (this._isActive) {
+            this._toggle();
+        }
+        return this;
+    }
+
+    protected override _onMouseClick = (e: MouseEvent) => {
+        if (!this.preventClick) {
+            this._mouseClickHandler(e);
+            this.setActive(!this.isActive);
+        }
+    }
+}
+
+export {ToggleButton}

package/src/{og/ui/View.js → ui/View.ts}

@@ -1,39 +1,53 @@
-'use strict';
+import {createEvents, EventsHandler} from '../Events';
+import {parseHTML, stringTemplate} from '../utils/shared';
+
+export interface IViewParams {
+    model?: any;
+    template?: string;
+    parent?: View<any> | null;
+    classList?: string[];
+}
+
+export type ViewEventsList = ["render"];
+const VIEW_EVENTS: ViewEventsList = ["render"];
+
+class View<M> {
+
+    static __counter__: number = 0;
+
+    protected __id: number;
+
+    public events: EventsHandler<ViewEventsList>;
 
+    public model: M;
 
-import { Events } from '../Events.js';
-import { parseHTML, stringTemplate } from '../utils/shared.js';
+    public template: string;
 
-class View {
-    constructor(options = {}) {
-        this.__id = View.__staticCounter++;
-        this._events = new Events(options.eventList || []);
+    public parent: View<any> | null;
+
+    public el: HTMLElement | null;
+
+    protected _classList: string[];
+
+    constructor(options: IViewParams = {}) {
+        this.__id = View.__counter__++;
+        this.events = createEvents<ViewEventsList>(VIEW_EVENTS);
         this.model = options.model || null;
         this.template = options.template || "";
         this.parent = options.parent || null;
         this._classList = options.classList || [];
+        this.el = null;
     }
 
-    static set __staticCounter(n) {
-        this.__counter__ = n;
-    }
-
-    static get __staticCounter() {
-        if (!this.__counter__ && this.__counter__ !== 0) {
-            this.__counter__ = 0;
-        }
-        return this.__counter__;
-    }
-
-    static getHTML(template, params) {
+    static getHTML(template: string, params: any): string {
         return stringTemplate(template, params);
     }
 
-    static parseHTML(htmlStr) {
+    static parseHTML(htmlStr: string): HTMLElement[] {
         return parseHTML(htmlStr);
     }
 
-    static insertAfter(newNodes, referenceNode) {
+    static insertAfter(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[] {
         if (!Array.isArray(newNodes)) {
             newNodes = [newNodes];
         }
@@ -45,7 +59,7 @@ class View {
         return newNodes;
     }
 
-    static insertBefore(newNodes, referenceNode) {
+    static insertBefore(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[] {
         if (!Array.isArray(newNodes)) {
             newNodes = [newNodes];
         }
@@ -54,21 +68,10 @@ class View {
                 referenceNode.parentNode.insertBefore(newNodes[i], referenceNode);
             }
         }
+        return newNodes;
     }
 
-    get events() {
-        return this._events;
-    }
-
-    on(eventName, callback, sender) {
-        return this._events.on(eventName, callback, sender);
-    }
-
-    off(eventName, callback) {
-        return this._events.off(eventName, callback);
-    }
-
-    insertBefore(view) {
+    public insertBefore(view: View<any> | HTMLElement) {
         if (!this.el) {
             this.render();
         }
@@ -76,13 +79,13 @@ class View {
             if (view instanceof HTMLElement && view.parentNode) {
                 View.insertBefore(this.el, view);
             }
-            if (view instanceof View && view.el.parentNode) {
+            if (view instanceof View && view.el && view.el.parentNode) {
                 View.insertBefore(this.el, view.el);
             }
         }
     }
 
-    insertAfter(view) {
+    public insertAfter(view: View<any> | HTMLElement) {
         if (!this.el) {
             this.render();
         }
@@ -90,17 +93,17 @@ class View {
             if (view instanceof HTMLElement && view.parentNode) {
                 View.insertAfter(this.el, view);
             }
-            if (view instanceof View && view.el.parentNode) {
+            if (view instanceof View && view.el && view.el.parentNode) {
                 View.insertAfter(this.el, view.el);
             }
         }
     }
 
-    isEqual(view) {
+    public isEqual(view: View<any>): boolean {
         return view.__id === this.__id;
     }
 
-    appendTo(node, clean, firstPosition) {
+    public appendTo(node: HTMLElement, clean: boolean = false, firstPosition: boolean = false) {
         if (node) {
             if (!this.el) {
                 this.beforeRender(node);
@@ -115,14 +118,16 @@ class View {
                 node.innerHTML = "";
             }
 
-            if (firstPosition) {
-                if (node.childNodes[0]) {
-                    View.insertBefore(this.el, node.childNodes[0]);
+            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);
                 }
-            } else {
-                node.appendChild(this.el);
             }
             this.afterRender(node);
         }
@@ -130,35 +135,37 @@ class View {
         return this;
     }
 
-    afterRender(parentNode) {
-        //virtual
+    public afterRender(parentNode: HTMLElement) {
     }
 
-    beforeRender(parentNode) {
-        //virtual
+    public beforeRender(parentNode: HTMLElement) {
     }
 
-    stopPropagation() {
-        this._events.stopPropagation();
+    public stopPropagation() {
+        this.events.stopPropagation();
     }
 
-    renderTemplate(params) {
+    public renderTemplate(params: any): HTMLElement {
         return View.parseHTML(View.getHTML(this.template, params || {}))[0];
     }
 
-    render(params) {
+    public render(params?: any): this {
         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) {
-        return this.el.querySelector(queryStr);
+    public select<T extends HTMLElement>(queryStr: string): T | null {
+        if (this.el) {
+            return this.el.querySelector<T>(queryStr);
+        }
+        return null as T | null;
     }
 
-    selectRemove(queryStr) {
+    public selectRemove(queryStr: string): HTMLElement | undefined {
         if (this.el) {
             let r = this.select(queryStr);
             if (r && r.parentNode) {
@@ -168,7 +175,7 @@ class View {
         }
     }
 
-    selectAll(queryStr, callback) {
+    public selectAll(queryStr: string, callback?: Function) {
         if (this.el) {
             const res = this.el.querySelectorAll(queryStr);
             if (callback) {
@@ -180,11 +187,11 @@ class View {
         }
     }
 
-    remove() {
+    public remove() {
         if (this.el && this.el.parentNode) {
             this.el.parentNode.removeChild(this.el);
         }
     }
 }
 
-export { View };
+export {View};

package/src/utils/BaseWorker.ts

@@ -0,0 +1,60 @@
+export class BaseWorker<T> {
+    protected _sourceId: number;
+    protected _source: Map<number, T>;
+    protected _pendingQueue: T[];
+    protected _numWorkers: number;
+    protected _workerQueue: Worker[];
+
+    constructor(numWorkers: number = 2, program?: string) {
+        this._sourceId = 0;
+        this._source = new Map<number, T>();
+        this._pendingQueue = [];
+        this._numWorkers = numWorkers;
+        this._workerQueue = [];
+        if (program) {
+            this.setProgram(program);
+        }
+    }
+
+    public check() {
+        if (this._pendingQueue.length) {
+            this.make(this._pendingQueue.pop()!);
+        }
+    }
+
+    public setProgram(program: string) {
+        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: MessageEvent) => {
+                this._onMessage(e);
+                this._workerQueue && this._workerQueue.unshift(e.target as Worker);
+                this.check();
+            }
+            this._workerQueue.push(w);
+        }
+    }
+
+    public make(data: T) {
+    }
+
+    protected _onMessage(e: MessageEvent) {
+
+    }
+
+    public 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;
+    }
+
+    public get pendingQueue(): T[] {
+        return this._pendingQueue;
+    }
+}