@openglobus/og 0.22.1 → 0.23.0

package/lib/js/ui/Checkbox.js

@@ -0,0 +1,110 @@
+import { View } from './View';
+import { stringTemplate } from '../utils/shared';
+const SLIDER_EVENTS = ["change"];
+const TEMPLATE = `<div class="og-checkbox">
+      <div class="og-input-label">{label}</div>
+      <div class="og-checkbox-input">
+        <input type="checkbox" {checked}/>
+      </div>
+    </div>`;
+class Checkbox extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                label: options.label || "",
+                checked: options.checked ? "checked" : ""
+            })
+        });
+        this._onResize = () => {
+        };
+        this._onMouseWheel = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this._onMouseWheelFF = (e) => {
+            this._onMouseWheel(e);
+        };
+        this._onClick = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.stopPropagation();
+            this.checked = !this._checked;
+        };
+        this._checked = options.checked || false;
+        this._disabled = options.disabled || false;
+        //@ts-ignore
+        this.events = this.events.registerNames(SLIDER_EVENTS);
+        this.$label = null;
+        this.$input = null;
+    }
+    set disabled(disabled) {
+        this._disabled = disabled;
+        this._updateDisabled();
+    }
+    _updateDisabled() {
+        if (!this.el)
+            return;
+        if (this._disabled) {
+            this.el.classList.add("og-input-disabled");
+        }
+        else {
+            this.el.classList.remove("og-input-disabled");
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    render(params) {
+        super.render(params);
+        this.$label = this.select(".og-input-label");
+        if (this.$label.innerHTML === "") {
+            this.$label.style.display = "none";
+        }
+        this.$input = this.select("input");
+        this.$input.checked = this._checked;
+        this._updateDisabled();
+        this._initEvents();
+        return this;
+    }
+    set checked(isChecked) {
+        if (isChecked !== this._checked) {
+            this._checked = isChecked;
+            if (this.$input) {
+                this.$input.checked = this._checked;
+            }
+            this.events.dispatch(this.events.change, this._checked, this);
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    _initEvents() {
+        //@ts-ignore
+        this.el.addEventListener("mousewheel", this._onMouseWheel);
+        this.el.addEventListener("wheel", this._onMouseWheelFF);
+        this.$input.addEventListener("click", this._onClick);
+    }
+    _clearEvents() {
+        //@ts-ignore
+        this.el.removeEventListener("mousewheel", this._onMouseWheel);
+        this.el.removeEventListener("wheel", this._onMouseWheelFF);
+        this.$input.removeEventListener("click", this._onClick);
+    }
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+    set visibility(visibility) {
+        if (this.el) {
+            if (visibility) {
+                this.el.style.display = "";
+            }
+            else {
+                this.el.style.display = "none";
+            }
+        }
+    }
+}
+export { Checkbox };

package/lib/js/ui/Color.js

@@ -11,7 +11,8 @@ class Color extends View {
         super({
             template: stringTemplate(TEMPLATE, {
                 id: `color-${__labelCounter__++}`,
-                label: options.label || ""
+                label: options.label || "",
+                value: options.value || "#000000",
             })
         });
         this._onInput = (e) => {

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

@@ -8,6 +8,7 @@ export interface IDialogParams extends IViewParams {
     width?: number;
     height?: number;
     left?: number;
+    right?: number;
     top?: number;
     minHeight?: number;
     maxHeight?: number;
@@ -28,6 +29,7 @@ declare class Dialog<M> extends View<M> {
     protected _startPosY: number;
     protected _closeBtn: Button;
     protected _visibility: boolean;
+    protected _right: number | null;
     constructor(options?: IDialogParams);
     setContainer(htmlStr: string): void;
     get container(): HTMLElement | null;
@@ -39,6 +41,7 @@ declare class Dialog<M> extends View<M> {
     hide(): void;
     close(): void;
     setVisibility(visibility: boolean): void;
+    getVisibility(): boolean;
     protected _initButtons(): void;
     protected _initEvents(): void;
     protected _onCloseBtnClick: () => void;

package/lib/js/ui/Dialog.js

@@ -70,6 +70,7 @@ class Dialog extends View {
         });
         this.useHide = options.useHide || false;
         this._visibility = getDefault(options.visible, true);
+        this._right = options.right != undefined ? options.right : null;
     }
     setContainer(htmlStr) {
         this.$container.innerHTML = htmlStr;
@@ -95,6 +96,22 @@ class Dialog extends View {
         this.$buttons = this.select(".og-ddialog-header__buttons");
         this._initEvents();
         this._initButtons();
+        if (this._right != null) {
+            this.el.style.visibility = "hidden";
+            const observer = new IntersectionObserver((entries, obs) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.el.style.visibility = "visible";
+                        //@ts-ignore
+                        if (this.el.parentNode) {
+                            this.setPosition(this.el.parentNode.clientWidth - this.el.clientWidth - this._right);
+                            obs.disconnect();
+                        }
+                    }
+                });
+            });
+            observer.observe(this.el);
+        }
         return this;
     }
     show() {
@@ -128,6 +145,9 @@ class Dialog extends View {
             this.hide();
         }
     }
+    getVisibility() {
+        return this._visibility;
+    }
     _initButtons() {
         this._closeBtn.events.on("click", this._onCloseBtnClick);
         this._closeBtn.appendTo(this.$buttons);

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

@@ -0,0 +1,32 @@
+import { EventsHandler } from "../Events";
+import { IViewParams, View, ViewEventsList } from './View';
+interface IInputParams extends IViewParams {
+    label?: string;
+    value?: string;
+    min?: number;
+    max?: number;
+    type?: string;
+    maxFixed?: number;
+}
+type InputEventsList = ["change"];
+declare class Input extends View<null> {
+    events: EventsHandler<InputEventsList> & EventsHandler<ViewEventsList>;
+    protected _value: string;
+    protected $label: HTMLElement | null;
+    protected $input: HTMLInputElement | null;
+    protected _maxFixed: number;
+    constructor(options?: IInputParams);
+    render(params: any): this;
+    protected _onResize: () => void;
+    set value(val: string | number);
+    protected _setValue(val: string | number): void;
+    get value(): string;
+    protected _initEvents(): void;
+    protected _clearEvents(): void;
+    protected _onMouseWheel: (e: WheelEvent) => void;
+    protected _onMouseWheelFF: (e: WheelEvent) => void;
+    protected _onInput: (e: Event) => void;
+    remove(): void;
+    set visibility(visibility: boolean);
+}
+export { Input };

package/lib/js/ui/Input.js

@@ -0,0 +1,107 @@
+import { View } from './View';
+import { stringTemplate, toFixedMax } from '../utils/shared';
+const SLIDER_EVENTS = ["change"];
+const TEMPLATE = `<div class="og-input">
+      <div class="og-input-label">{label}</div>
+      <input type="{type}"/>
+    </div>`;
+class Input extends View {
+    constructor(options = {}) {
+        super({
+            template: stringTemplate(TEMPLATE, {
+                label: options.label || "",
+                type: options.type || "text"
+            })
+        });
+        this._onResize = () => {
+        };
+        this._onMouseWheel = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this._onMouseWheelFF = (e) => {
+            this._onMouseWheel(e);
+        };
+        this._onInput = (e) => {
+            //@ts-ignore
+            e = e || window.event;
+            e.preventDefault();
+            e.stopPropagation();
+            //@ts-ignore
+            this._setValue(e.target.value);
+        };
+        //@ts-ignore
+        this.events = this.events.registerNames(SLIDER_EVENTS);
+        this._value = options.value || "";
+        this._maxFixed = options.maxFixed != undefined ? options.maxFixed : -1;
+        this.$label = null;
+        this.$input = null;
+    }
+    render(params) {
+        super.render(params);
+        this.$label = this.select(".og-input-label");
+        if (this.$label.innerHTML === "") {
+            this.$label.style.display = "none";
+        }
+        this.$input = this.select("input");
+        this._initEvents();
+        return this;
+    }
+    set value(val) {
+        if (val !== this._value) {
+            if (typeof val === "number") {
+                this._value = toFixedMax(val, this._maxFixed);
+            }
+            else {
+                this._value = val;
+            }
+            if (this.$input) {
+                this.$input.value = this._value;
+            }
+            this.events.dispatch(this.events.change, this._value, this);
+        }
+    }
+    _setValue(val) {
+        if (val !== this._value) {
+            if (typeof val === "number") {
+                this._value = toFixedMax(val, this._maxFixed);
+            }
+            else {
+                this._value = val;
+            }
+            this.events.dispatch(this.events.change, this._value, this);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    _initEvents() {
+        //@ts-ignore
+        this.el.addEventListener("mousewheel", this._onMouseWheel);
+        this.el.addEventListener("wheel", this._onMouseWheelFF);
+        this.$input.addEventListener("input", this._onInput);
+    }
+    _clearEvents() {
+        //@ts-ignore
+        this.el.removeEventListener("mousewheel", this._onMouseWheel);
+        this.el.removeEventListener("wheel", this._onMouseWheelFF);
+        this.$input.removeEventListener("input", this._onInput);
+    }
+    remove() {
+        this._clearEvents();
+        super.remove();
+    }
+    set visibility(visibility) {
+        if (this.el) {
+            if (visibility) {
+                this.el.style.display = "";
+            }
+            else {
+                this.el.style.display = "none";
+            }
+        }
+    }
+}
+export { Input };

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

@@ -1,4 +1,4 @@
-import { EventsHandler } from '../Events';
+import { EventCallback, EventsHandler } from '../Events';
 export interface IViewParams {
     model?: any;
     template?: string;
@@ -16,6 +16,8 @@ declare class View<M> {
     el: HTMLElement | null;
     protected _classList: string[];
     constructor(options?: IViewParams);
+    on(name: string, callback: EventCallback, sender?: any, priority?: number): void;
+    off(name: string, callback: EventCallback): void;
     static getHTML(template: string, params: any): string;
     static parseHTML(htmlStr: string): HTMLElement[];
     static insertAfter(newNodes: HTMLElement | HTMLElement[], referenceNode: Node): HTMLElement[];

package/lib/js/ui/View.js

@@ -11,6 +11,12 @@ class View {
         this._classList = options.classList || [];
         this.el = null;
     }
+    on(name, callback, sender, priority) {
+        this.events.on(name, callback, sender, priority);
+    }
+    off(name, callback) {
+        this.events.off(name, callback);
+    }
     static getHTML(template, params) {
         return stringTemplate(template, params);
     }

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

@@ -1,24 +1,56 @@
-interface IObjGeometryData {
+import { NumberArray3 } from "../math/Vec3";
+export interface IObjGeometryData {
     vertices: number[];
-    textures: number[];
+    texCoords: number[];
     normals: number[];
 }
-interface IObjGeometry {
+export interface IObjGeometry {
     object: string;
     groups: string[];
     material: string;
     data: IObjGeometryData;
 }
-interface IObjData {
-    geometries: IObjGeometry[];
-    materialLibs: string[];
+export interface IObjMaterial {
+    ambient?: NumberArray3;
+    diffuse?: NumberArray3;
+    specular?: NumberArray3;
+    shininess?: number;
+    color?: NumberArray3;
+    opacity?: number;
+    illum?: number;
+    colorTexture?: string;
+    normalTexture?: string;
+    metallicRoughnessTexture?: string;
 }
-export declare function objParser(text: string): {
+type MaterialMap = Record<string, IObjMaterial>;
+export interface IObj {
     geometries: IObjGeometry[];
-    materialLibs: string[];
-};
-export declare function transformLeftToRightCoordinateSystem(objData: IObjData): {
+    materials: MaterialMap;
+}
+export declare class Obj {
+    objPositions: number[][];
+    objTexcoords: number[][];
+    objNormals: number[][];
+    objVertexData: [number[][], number[][], number[][]];
+    vertexData: [number[], number[], number[]];
+    _materialLibs: string[];
     geometries: IObjGeometry[];
-    materialLibs: string[];
-};
+    geometry: IObjGeometry | null;
+    materials: MaterialMap;
+    material: IObjMaterial;
+    object: string;
+    groups: string[];
+    keywords: Record<string, (parts: string[], unparsedArgs: string) => void>;
+    protected _path: string;
+    constructor();
+    newGeometry(): void;
+    setGeometry(): void;
+    addVertex(vert: string): void;
+    protected _innerParser(text: string, fileName: string): void;
+    get data(): IObj;
+    load(src: string): Promise<IObj>;
+    protected _readAndParse(file: File): Promise<void>;
+    readFile(objFile: File, mtlFile?: File): Promise<IObj>;
+    protected _cleanupGeometryArrays(): void;
+}
 export {};