@openglobus/og 0.17.1 → 0.18.0

package/src/og/ui/Slider.js

@@ -1,170 +0,0 @@
-'use strict';
-
-import { clamp } from '../math.js';
-import { stringTemplate } from '../utils/shared.js';
-import { View } from './View.js';
-
-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 || ""
-            }), ...options, eventList: ["change", ...(options.eventList || [])]
-        });
-
-        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._onResize_ = this._onResize.bind(this);
-        this._resizeObserver = new ResizeObserver(this._onResize_);
-
-        this.$label;
-        this.$pointer;
-        this.$progress;
-        this.$input;
-        this.$panel;
-    }
-
-    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;
-    }
-
-    _onResize(e) {
-        this._setOffset(this._value * this.$panel.clientWidth / (this._max - this._min));
-    }
-
-    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._onMouseDown_ = this._onMouseDown.bind(this);
-        this.$panel.addEventListener("mousedown", this._onMouseDown_);
-
-        this._onInput_ = this._onInput.bind(this);
-        this.$input.addEventListener("input", this._onInput_);
-
-        this._onMouseWheel_ = this._onMouseWheel.bind(this);
-        this.$panel.addEventListener("mousewheel", this._onMouseWheel_);
-
-        this._onMouseWheelFF_ = this._onMouseWheelFF.bind(this);
-        this.$panel.addEventListener("wheel", this._onMouseWheelFF_);
-    }
-
-    _clearEvents() {
-        this.$panel.removeEventListener("mousedown", this._onMouseDown_);
-        this._onMouseDown_ = undefined;
-
-        this.$input.removeEventListener("input", this._onInput_);
-        this._onInput_ = undefined;
-
-        this.$panel.removeEventListener("mousewheel", this._onMouseWheel_);
-        this._onMouseWheel_ = undefined;
-
-        this.$panel.removeEventListener("wheel", this._onMouseWheelFF_);
-        this._onMouseWheelFF_ = undefined;
-    }
-
-    _onMouseWheel(e) {
-        e = e || window.event;
-        e.preventDefault();
-        e.stopPropagation();
-        this.value = this._value + Math.sign(e.wheelDelta) * (this._max - this._min) / 100.0;
-    }
-
-    _onMouseWheelFF(e) {
-        this._onMouseWheel(e);
-    }
-
-    _onInput(e) {
-        e = e || window.event;
-        e.preventDefault();
-        e.stopPropagation();
-        this.value = parseFloat(e.target.value);
-    }
-
-    _onMouseDown(e) {
-        e = e || window.event;
-        e.preventDefault();
-
-        this._startPosX = e.clientX;
-
-        this.value = this._min + (this._max - this._min) * (e.offsetX / this.$panel.clientWidth);
-
-        this._onMouseMove_ = this._onMouseMove.bind(this)
-        document.addEventListener("mousemove", this._onMouseMove_);
-
-        this._onMouseUp_ = this._onMouseUp.bind(this);
-        document.addEventListener("mouseup", this._onMouseUp_);
-    }
-
-    _setOffset(x) {
-        if (x >= 0 && x <= this.$panel.clientWidth) {
-            this.$pointer.style.left = this.$progress.style.width = `${x * 100 / this.$panel.clientWidth}%`;
-        }
-    }
-
-    _onMouseMove(e) {
-        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;
-    }
-
-    _onMouseUp() {
-        document.removeEventListener("mouseup", this._onMouseUp_);
-        this._onMouseUp_ = undefined;
-
-        document.removeEventListener("mousemove", this._onMouseMove_);
-        this._onMouseMove_ = undefined;
-    }
-
-    remove() {
-        this._clearEvents();
-        super.remove();
-    }
-}
-
-export {
-    Slider
-};

package/src/og/ui/ToggleButton.js

@@ -1,51 +0,0 @@
-'use strict';
-
-import { Button } from './Button.js';
-
-class ToggleButton extends Button {
-    constructor(options) {
-        super({
-            ...options,
-            eventList: ["change", ...(options.eventList || [])]
-        });
-
-        this._isActive = options.isActive || false;
-
-        this.preventClick = options.preventClick || false;
-    }
-
-    setActive(isActive, stopPropagation) {
-        if (isActive !== this._isActive) {
-            this._isActive = isActive;
-            this._toggle();
-            if (!stopPropagation) {
-                this._events.dispatch(this._events.change, isActive, this);
-            }
-        }
-    }
-
-    _toggle() {
-        this.el.classList.toggle("og-button__active");
-    }
-
-    get isActive() {
-        return this._isActive;
-    }
-
-    render(params) {
-        super.render(params);
-        if (this._isActive) {
-            this._toggle();
-        }
-        return this;
-    }
-
-    _onMouseClick(e) {
-        if (!this.preventClick) {
-            super._onMouseClick(e);
-            this.setActive(!this.isActive);
-        }
-    }
-}
-
-export { ToggleButton }

package/src/og/ui/UIhelpers.js

@@ -1,155 +0,0 @@
-'use strict';
-
-/* 
-* Helper functions for UI/UX
-*/
-
-// Creates new DOM elements and assigns attributes
-export function elementFactory(type, attributes, ...children) {
-    const el = document.createElement(type)
-    let key = null;
-    for (key in attributes) {
-        el.setAttribute(key, attributes[key])
-    }
-
-    children.forEach(child => {
-        if (typeof child === 'string') {
-            el.appendChild(document.createTextNode(child))
-        } else {
-            el.appendChild(child)
-        }
-    })
-
-    return el;
-}
-
-// Appends array of children to parent
-export function appendChildren(parent, childrenArray) {
-    childrenArray.forEach(child => parent.appendChild(child))
-}
-
-// Cycles an array of text and outputs next
-export function toggleText(elementText, textArray) {
-    let textIndex = textArray.indexOf(elementText);
-    let nextIndex;
-    textIndex >= 0 && textIndex < textArray.length - 1 ?
-        nextIndex = textIndex + 1 :
-        nextIndex = 0;
-    return textArray[nextIndex];
-}
-
-// Enables a movement of a DOM element. Also disables/enables mouse navigations for og-planet
-export function enableElmovement(el, planet) {
-
-    let newPosX = 0,
-        newPosY = 0,
-        startPosX = 0,
-        startPosY = 0;
-
-    const behaviour = (e) => {
-        e.preventDefault();
-        planet.renderer.controls.mouseNavigation.deactivate()
-        // get the starting position of the cursor
-        startPosX = e.clientX;
-        startPosY = e.clientY;
-
-        document.addEventListener('mousemove', mouseMove);
-
-        document.addEventListener('mouseup', function (e) {
-            document.removeEventListener('mousemove', mouseMove);
-            planet.renderer.controls.mouseNavigation.activate();
-        });
-    }
-
-    const mouseMove = (e) => {
-        // calculate the new position
-        newPosX = startPosX - e.clientX;
-        newPosY = startPosY - e.clientY;
-
-        // with each move we also want to update the start X and Y
-        startPosX = e.clientX;
-        startPosY = e.clientY;
-
-        // set the element's new position:
-        el.style.top = (el.offsetTop - newPosY) + "px";
-        el.style.left = (el.offsetLeft - newPosX) + "px";
-    }
-
-    return { behaviour, mouseMove }
-}
-
-// Get all nodes of a class
-export function getAllnodes(CSSclass) {
-    return document.querySelectorAll(CSSclass);
-}
-
-// Convert nodelist to an Array
-export function nodesToArray(nodeList) {
-    return Array.from(nodeList);
-}
-
-// Adds a class to all elements selected
-export function setAllCSSclass(CSSclass, nodeArray) {
-    return nodeArray.forEach(x => x.classList.add(CSSclass));
-}
-
-// Sets all menu buttons to off
-export function allMenuBtnOFF() {
-    setAllCSSclass('og-OFF', nodesToArray(getAllnodes('.og-menu-btn')));
-}
-
-// Hides all dialoges of main menu
-export function allDialogsHide() {
-    setAllCSSclass('og-hide', nodesToArray(getAllnodes('.og-dialog')));
-}
-
-function isString(v) {
-    return typeof v === 'string' || v instanceof String;
-}
-
-// Handles the click inside/outside a dialog - closes dialog when click outside
-export function btnClickHandler(btn_id, dialog_id, dialog_selector, btn_icon_id, callback) {
-    let btn = isString(btn_id) ? document.getElementById(btn_id) : btn_id;
-    let dialog = document.getElementById(dialog_id);
-    btn.onclick = function (e) {
-        
-        let off = true;
-        
-        if (this.classList.contains('og-OFF')) {
-            // Turn to ON
-            off = false;
-            allMenuBtnOFF();
-            allDialogsHide();
-            this.classList.remove('og-OFF');
-            if (dialog) {
-                dialog.classList.remove('og-hide');
-            }
-
-            if (this.classList.contains('og-has-dialog')) {
-                document.addEventListener('click', (e) => {
-                    if (e.target.matches(dialog_selector) || e.target.matches(btn_icon_id)) { //inside
-                        return;
-                    } else {//outside
-                        btn.classList.add('og-OFF');
-                        if (dialog) {
-                            dialog.classList.add('og-hide')
-                        }
-                        // TODO needs fix
-                        // this.removeEventListener('click', arguments.callee);
-                    }
-                })
-            }
-        } else {
-            // Turn to OFF
-            off = true;
-            this.classList.add('og-OFF');
-            if (dialog) {
-                dialog.classList.add('og-hide');
-            }
-        }
-        
-        if (callback && typeof callback === 'function'){
-            callback(off);
-        }
-    }
-}

package/src/og/utils/BaseWorker.js

@@ -1,46 +0,0 @@
-export class BaseWorker {
-    constructor(numWorkers = 2, program) {
-        this._id = 0;
-        this._pendingQueue = [];
-        this._numWorkers = numWorkers;
-        this._workerQueue = [];
-        if (program) this.setProgram(program);
-    }
-
-    /**
-     * @virtual
-     */
-    make() {
-    }
-
-    check() {
-        if (this._pendingQueue && this._pendingQueue.length) {
-            this.make(this._pendingQueue.pop());
-        }
-    }
-
-    setProgram(program) {
-        let elevationProgramm = new Blob([program], { type: "application/javascript" });
-
-        for (let i = 0; i < this._numWorkers; i++) {
-            let w = new Worker(URL.createObjectURL(elevationProgramm));
-            w.onmessage = (e) => {
-                this._onMessage(e);
-                this._workerQueue && this._workerQueue.unshift(e.target);
-                this.check();
-            }
-            this._workerQueue.push(w);
-        }
-    }
-
-    destroy() {
-        for (let i = 0; i < this._workerQueue.length; i++) {
-            const w = this._workerQueue[i];
-            w.onmessage = undefined;
-            w.terminate();
-        }
-        this._pendingQueue = undefined;
-        this._numWorkers = undefined;
-        this._workerQueue = undefined;
-    }
-}

package/src/og/utils/FontAtlas.js

@@ -1,218 +0,0 @@
-'use strict';
-
-import { Deferred } from '../Deferred.js';
-import { Rectangle } from '../Rectangle.js';
-import { TextureAtlas, TextureAtlasNode } from './TextureAtlas.js';
-
-//TODO: get the value from shader module
-const MAX_SIZE = 11;
-
-class FontAtlas {
-    constructor() {
-        this.atlasesArr = [];
-        this.atlasIndexes = {};
-        this.atlasIndexesDeferred = [];
-        this.tokenImageSize = 64;
-        this.samplerArr = new Uint32Array(MAX_SIZE);
-        this.sdfParamsArr = new Float32Array(MAX_SIZE * 4);
-        this._handler = null;
-    }
-
-    assignHandler(handler) {
-        this._handler = handler;
-    }
-
-    getFontIndex(face) {
-        let fullName = this.getFullIndex(face);
-        if (!this.atlasIndexesDeferred[fullName]) {
-            this.atlasIndexesDeferred[fullName] = new Deferred();
-        }
-        return this.atlasIndexesDeferred[fullName].promise;
-    }
-
-    getFullIndex(face) {
-        return face.trim().toLowerCase();
-    }
-
-    _applyFontDataToAtlas(atlas, data, index = 0) {
-        let chars = data.chars;
-
-        atlas.height = data.common.scaleH;
-        atlas.width = data.common.scaleW;
-        atlas.gliphSize = data.info.size;
-        atlas.distanceRange = data.distanceField.distanceRange;
-
-        let w = atlas.width,
-            h = atlas.height,
-            s = atlas.gliphSize;
-
-        this.sdfParamsArr[index * 4] = w;
-        this.sdfParamsArr[index * 4 + 1] = h;
-        this.sdfParamsArr[index * 4 + 2] = s;
-        this.sdfParamsArr[index * 4 + 3] = atlas.distanceRange;
-
-        let idToChar = {};
-
-        for (let i = 0; i < chars.length; i++) {
-            let ci = chars[i];
-            let ti = ci.char;
-
-            idToChar[ci.id] = ti;
-
-            let r = new Rectangle(ci.x, ci.y, ci.x + ci.width, ci.y + ci.height);
-
-            let tc = new Array(12);
-
-            tc[0] = r.left / w;
-            tc[1] = r.top / h;
-
-            tc[2] = r.left / w;
-            tc[3] = r.bottom / h;
-
-            tc[4] = r.right / w;
-            tc[5] = r.bottom / h;
-
-            tc[6] = r.right / w;
-            tc[7] = r.bottom / h;
-
-            tc[8] = r.right / w;
-            tc[9] = r.top / h;
-
-            tc[10] = r.left / w;
-            tc[11] = r.top / h;
-
-            let taNode = new TextureAtlasNode(r, tc);
-            let ciNorm = ci.char.normalize('NFKC');
-            let ciCode = ciNorm.charCodeAt();
-            taNode.metrics = ci;
-            taNode.metrics.nChar = ciNorm;
-            taNode.metrics.nCode = ciCode;
-            taNode.metrics.nWidth = taNode.metrics.width / s;
-            taNode.metrics.nHeight = taNode.metrics.height / s;
-            taNode.metrics.nAdvance = taNode.metrics.xadvance / s;
-            taNode.metrics.nXOffset = taNode.metrics.xoffset / s;
-            taNode.metrics.nYOffset = 1.0 - taNode.metrics.yoffset / s;
-            taNode.emptySize = 1;
-
-            atlas.nodes.set(ciNorm.charCodeAt(), taNode);
-        }
-
-        atlas.kernings = {};
-
-        for (let i = 0; i < data.kernings.length; i++) {
-            let ki = data.kernings[i];
-
-            let first = ki.first,
-                second = ki.second;
-
-            //let charFirst = idToChar[first],
-            //    charSecond = idToChar[second];
-
-            // if (!atlas.kernings[charFirst]) {
-            //     atlas.kernings[charFirst] = {};
-            // }
-            //
-            // atlas.kernings[charFirst][charSecond] = ki.amount / s;
-
-            if (!atlas.kernings[first]) {
-                atlas.kernings[first] = {};
-            }
-
-            atlas.kernings[first][second] = ki.amount / s;
-        }
-    }
-
-    initFont(faceName, dataJson, imageBase64) {
-        let index = this.atlasesArr.length;
-        let fullName = this.getFullIndex(faceName);
-
-        this.atlasIndexes[fullName] = index;
-
-        let def = this.atlasIndexesDeferred[fullName];
-        if (!def) {
-            def = this.atlasIndexesDeferred[fullName] = new Deferred();
-        }
-
-        this.samplerArr[this.atlasesArr.length] = index;
-
-        // TODO: FontTextureAtlas();
-        let atlas = new TextureAtlas();
-
-        atlas.height = 0;
-        atlas.width = 0;
-        atlas.gliphSize = 0;
-        atlas.distanceRange = 0;
-        atlas.kernings = {};
-
-        atlas.assignHandler(this._handler);
-
-        this.atlasesArr[index] = atlas;
-
-        this._applyFontDataToAtlas(atlas, dataJson, index);
-
-        let img = new Image();
-        img.onload = () => {
-            this._createTexture(atlas, img);
-            def.resolve(index);
-        };
-        img.src = imageBase64;
-    }
-
-    _createTexture(atlas, img) {
-        atlas.createTexture(img);
-    }
-
-    loadFont(faceName, srcDir, atlasUrl) {
-
-        let index = this.atlasesArr.length;
-        let fullName = this.getFullIndex(faceName);
-
-        this.atlasIndexes[fullName] = index;
-
-        let def = this.atlasIndexesDeferred[fullName];
-        if (!def) {
-            def = this.atlasIndexesDeferred[fullName] = new Deferred();
-        }
-
-        this.samplerArr[this.atlasesArr.length] = index;
-
-        // TODO: FontTextureAtlas();
-        let atlas = new TextureAtlas();
-
-        atlas.height = 0;
-        atlas.width = 0;
-        atlas.gliphSize = 0;
-        atlas.distanceRange = 0;
-        atlas.kernings = {};
-
-        atlas.assignHandler(this._handler);
-        this.atlasesArr[index] = atlas;
-
-        fetch(`${srcDir}/${atlasUrl}`)
-            .then(response => {
-                if (!response.ok) {
-                    throw Error(`Unable to load "${srcDir}/${atlasUrl}"`);
-                }
-                return response.json(response);
-            })
-            .then(data => {
-
-                this._applyFontDataToAtlas(atlas, data, index);
-
-                let img = new Image();
-                img.onload = () => {
-                    this._createTexture(atlas, img);
-                    def.resolve(index);
-                };
-
-                img.src = `${srcDir}/${data.pages[0]}`;
-                img.crossOrigin = "Anonymous";
-            })
-            .catch(err => {
-                def.reject();
-                return { 'status': "error", 'msg': err.toString() };
-            });
-    }
-}
-
-export { FontAtlas };