perfect-gui 4.12.0 → 4.12.4

package/src/index.js

@@ -1,5 +1,11 @@
-import Slider from './components/Slider';
-import styles from './styles/styles';
+import Button from './components/Button.js';
+import Slider from './components/Slider.js';
+import Image from './components/Image.js';
+import Toggle from './components/Toggle.js';
+import List from './components/List.js';
+import Color from './components/Color.js';
+import Vector2 from './components/Vector2.js';
+import styles from './styles/styles.js';
 
 export default class GUI {
     constructor(options = {}) {
@@ -206,655 +212,51 @@ export default class GUI {
         this.header.append(close_btn);
     }
 
-    button(options, callback) {
-        let label = '';
-        if (typeof options != 'string') {
-            if (typeof options == 'object' && options?.hasOwnProperty('label')) {
-                label = options.label == '' ? ' ' : options.label;
-            } else {
-                label = ' ';
-            }
-        } else {
-            label = options == '' ? ' ' : options;
-        }
-
-        const tooltip = (typeof options.tooltip === 'string') ? options.tooltip : (options.tooltip === true ? label : null);
-
+    button(params = {}, callback) {
         this.imageContainer = null;
-        
-        const el = document.createElement('div');
-        el.className = 'p-gui__button';
-        el.textContent = label;
-        if ( tooltip ) {
-            el.setAttribute('title', tooltip);
-        }
-        el.addEventListener('click', () => {
-            if (callback) {
-                callback();
-            }
-
-            if (this.onUpdate) {
-                this.onUpdate();
-            } else if (this.isFolder && this.firstParent.onUpdate) {
-                this.firstParent.onUpdate();
-            }
-        });
-        this.wrapper.append(el);
-
-        if (typeof options.color == 'string') {
-            el.style.setProperty('--color-accent', options.color);
-            el.style.setProperty('--color-accent-hover', options.hoverColor || options.color);
-        }
+        const el = new Button(this, params, callback);
+        return el;
     }
     
     image(params = {}, callback) {
-        if (typeof params != 'object') {
-            throw Error(`[GUI] image() first parameter must be an object. Received: ${typeof params}.`);
-        }
-        
-        let path;
-        if (typeof params.path == 'string') {
-            path = params.path;
-        } else {
-            if (typeof params.path == undefined) {
-                throw Error(`[GUI] image() path must be provided.`);
-            } else {
-                throw Error(`[GUI] image() path must be a string.`);
-            }
-        }
-        let filename = path.replace(/^.*[\\\/]/, '');
-        let label;
-        if (params.label == undefined) {
-            label = filename;
-        } else {
-            label = typeof params.label == 'string' ? params.label || ' ' : ' ';
-        }
-
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
-
-        const selected = params.selected === true;
-        const selectionBorder = params.selectionBorder !== false;
-        
-        // width & height options
-        let inline_styles = '';
-        if (params.width) {
-            if (typeof params.width == 'number') {
-                params.width += 'px';
-            }
-            inline_styles += `flex: 0 0 calc(${params.width} - 5px); `;
-        }
-        
-        if (params.height) {
-            if (typeof params.height == 'number') {
-                params.height += 'px';
-            }
-            inline_styles += `height: ${params.height}; `;
-        }
-                
         if (!this.imageContainer) {
             this.imageContainer = document.createElement('div');
             this.imageContainer.className = 'p-gui__image-container';
             this.wrapper.append(this.imageContainer);
         }
-
-        // Image button
-        const image = document.createElement('div');
-        image.className = 'p-gui__image';
-        image.style = 'background-image: url(' + path + '); ' + inline_styles;
-        if ( tooltip ) {
-            image.setAttribute('title', tooltip);
-        }
-        this.imageContainer.append(image);
-
-        if (selected && selectionBorder) {
-            image.classList.add('p-gui__image--selected');
-        }
-        
-        // Text inside image
-        const text = document.createElement('div');
-        text.className = 'p-gui__image-text';
-        text.textContent = label;
-        image.append(text);
-        
-        image.addEventListener('click', () => {
-            let selected_items = image.parentElement.querySelectorAll('.p-gui__image--selected');
-            for (let i = 0; i < selected_items.length; i++) {
-                selected_items[i].classList.remove('p-gui__image--selected');
-            }
-            if (selectionBorder) {
-                image.classList.add('p-gui__image--selected');
-            }
-            if (typeof callback == 'function') {
-                callback({ path, text: label });
-            }
-            if (this.onUpdate) {
-                this.onUpdate();
-            } else if (this.isFolder && this.firstParent.onUpdate) {
-                this.firstParent.onUpdate();
-            }
-        });
-
-        return image;
+        const el = new Image(this, params, callback);
+        return el;
     }
 
-    slider (params = {}, callback) {
+    slider(params = {}, callback) {
+        this.imageContainer = null;
         const el = new Slider(this, params, callback);
-        this.wrapper.append(el);
+        return el;
     }
 
     toggle(params = {}, callback) {
-        if (typeof params != 'object') {
-            throw Error(`[GUI] toggle() first parameter must be an object. Received: ${typeof params}.`);
-        }
-
-        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
-        let isObject = false;
-        let propReferenceIndex = null;
-        let obj = params.obj; 
-        let prop = params.prop;
-        let value = typeof params.value === 'boolean' ? params.value : null;
-
-        // callback mode
-        if ( value !== null ) {
-            if (prop != undefined || obj != undefined) {
-                console.warn(`[GUI] toggle() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
-            }
-        }
-
-        // object-binding
-        else if (prop != undefined && obj != undefined) {
-            if (typeof prop != 'string') {
-                throw Error(`[GUI] toggle() "prop" parameter must be an string. Received: ${typeof prop}.`);
-            }
-            if (typeof obj != 'object') {
-                throw Error(`[GUI] toggle() "obj" parameter must be an object. Received: ${typeof obj}.`);
-            }
-
-            if (label == ' ') {
-                label = prop;
-            }
-
-            propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
-            isObject = true;
-        }
-        else {
-            if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
-                console.warn(`[GUI] toggle() "obj" and "prop" parameters must be used together.`);
-            }
-        }
-
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
-
         this.imageContainer = null;
-
-        const container = document.createElement('div');
-        container.textContent = label;
-        container.className = 'p-gui__switch';
-        if ( tooltip ) {
-            container.setAttribute('title', tooltip);
-        }
-        this.wrapper.append(container);
-
-        container.addEventListener('click', (ev) => {
-            const checkbox = ev.target.childNodes[1];
-            
-            let value = true;
-            
-            if (checkbox.classList.contains('p-gui__switch-checkbox--active')) {
-                value = false;
-            }
-            
-            checkbox.classList.toggle('p-gui__switch-checkbox--active');
-
-            if ( isObject ) {
-                obj[prop] = value;
-            }
-            
-            else {
-                if (typeof callback == 'function') {
-                    callback(value);
-                }
-            }
-
-            if (this.onUpdate) {
-                this.onUpdate();
-            } else if (this.isFolder && this.firstParent.onUpdate) {
-                this.firstParent.onUpdate();
-            }
-        });
-
-        let activeClass = (() => {
-            if (!isObject) {
-                return value ? ' p-gui__switch-checkbox--active' : '';
-            } else {
-                return obj[prop] ? ' p-gui__switch-checkbox--active' : '';
-            }
-        })();
-
-        const checkbox = document.createElement('div');
-        checkbox.className = 'p-gui__switch-checkbox' + activeClass;
-        container.append(checkbox);
-
-        if ( isObject ) {
-            Object.defineProperty( obj, prop, {
-                set: val => { 
-                    this.propReferences[propReferenceIndex] = val;
-
-                    if (val) {
-                        checkbox.classList.add('p-gui__switch-checkbox--active');
-                    } else {
-                        checkbox.classList.remove('p-gui__switch-checkbox--active');
-                    }
-
-                    if (typeof callback == 'function') {
-                        callback(val);
-                    }
-                },
-                get: () => { 
-                    return this.propReferences[propReferenceIndex];
-                }
-            });
-        }
+        const el = new Toggle(this, params, callback);
+        this.wrapper.append(el);
+        return el;
     }
 
     list(params = {}, callback) {  
-        if (typeof params != 'object') {
-            throw Error(`[GUI] list() first parameter must be an object. Received: ${typeof params}.`);
-        }
-
-        let label = typeof params.label == 'string' ? params.label : ' ';
-        let isObject = false;
-        let propReferenceIndex = null;
-        let obj = params.obj; 
-        let prop = params.prop;
-        let values = Array.isArray(params.values) ? params.values : null;
-        let value;
-        let objectValues = typeof values[0] == 'string' ? false : true;
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
-
-        callback = typeof callback == 'function' ? callback : null;
-
-        // callback mode
-        if ( params.value !== undefined || 
-            (params.value === undefined && obj === undefined && prop === undefined)) {
-            if (prop != undefined || obj != undefined) {
-                console.warn(`[GUI] list() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
-            }
-
-            value = (() => {
-                if (!values) {
-                    return null;
-                }
-                if (typeof params.value == 'string') {
-                    return values.indexOf(params.value);
-                }
-                if (typeof params.value == 'number') {
-                    return params.value;
-                }
-            })();
-        }
-
-        // object-binding mode
-        else if (prop != undefined && obj != undefined) {
-            if (typeof prop != 'string') {
-                throw Error(`[GUI] list() "prop" parameter must be an string. Received: ${typeof prop}.`);
-            }
-            if (typeof obj != 'object') {
-                throw Error(`[GUI] list() "obj" parameter must be an object. Received: ${typeof obj}.`);
-            }
-
-            value = (() => {                
-                if (!values) {
-                    return null;
-                }
-                if (typeof obj[prop] == 'string') {
-                    if ( !objectValues ) { // values is an array of strings
-                        return values.indexOf(obj[prop]);
-                    }
-                    else { // values is an array of objects
-                        return values.find(item => item.value === obj[prop]).value;
-                    }
-                }
-                if (typeof obj[prop] == 'number') {
-                    if ( !objectValues ) { // values is an array of strings
-                        return obj[prop];
-                    }
-                    else { // values is an array of objects
-                        return values.find(item => item.value === obj[prop]).value;
-                    }
-                }
-            })();
-
-            propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
-            isObject = true;
-        }
-
-        else {
-            if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
-                console.warn(`[GUI] list() "obj" and "prop" parameters must be used together.`);
-            }
-        }
-
         this.imageContainer = null;
-
-        let container = document.createElement('div');
-        container.className = 'p-gui__list';
-        container.textContent = label;
-        if (tooltip) {
-            container.setAttribute('title', tooltip);
-        }
-        this.wrapper.append(container);
-
-        let select = document.createElement('select');
-        container.append(select);
-        select.className = 'p-gui__list-dropdown';
-        select.addEventListener('change', (ev) => {
-            if ( isObject ) {
-                obj[prop] = ev.target.value;
-            }
-
-            else if (callback) {
-                callback(ev.target.value);
-            }
-
-            if (this.onUpdate) {
-                this.onUpdate();
-            } else if (this.isFolder && this.firstParent.onUpdate) {
-                this.firstParent.onUpdate();
-            }
-        });
-
-        if (values) 
-        {
-            values.forEach((item, index) => 
-            {
-                const optionName = objectValues ? item.label : item;
-                const optionValue = objectValues ? item.value : item;
-                let option = document.createElement('option');
-                option.setAttribute('value', optionValue);
-                option.textContent = optionName;
-                select.append(option);
-
-                if (!objectValues && value == index || objectValues && value == optionValue) {
-                    option.setAttribute('selected', '');
-                }
-            });
-        }
-
-        if ( isObject ) {
-            Object.defineProperty( obj, prop, {
-                set: val => {
-                    let newIndex, newValue, newObj; 
-                    if (objectValues) {
-                        newObj = values.find(item => {
-                            return item.value == val;
-                        });
-                        newValue = newObj?.value || values[0].value;
-                        newIndex = values.indexOf(newObj);
-                    } else {
-                        if (typeof val == 'string') {
-                            newIndex = values.indexOf(val);
-                            newValue = val;
-                        }
-                        if (typeof val == 'number') {
-                            newIndex = val;
-                            newValue = values[val];
-                        }
-                    }
-                    
-                    this.propReferences[propReferenceIndex] = objectValues ? newValue : val;
-
-                    const previousSelection = select.querySelector('[selected]');
-                    if ( previousSelection ) {
-                        previousSelection.removeAttribute('selected')
-                    }
-                    select.querySelectorAll('option')[newIndex].setAttribute('selected', '');
-                    
-                    if (typeof callback == 'function') {
-                        if (objectValues) {
-                            callback(newObj, newIndex);
-                        } else {
-                            callback(newValue, newIndex);
-                        }
-                    }
-                },
-                get: () => { 
-                    return this.propReferences[propReferenceIndex];
-                }
-            });
-        }
+        const el = new List(this, params, callback);
+        return el;
     }
 
     color(params = {}, callback) {
-        if (typeof params != 'object') {
-            throw Error(`[GUI] color() first parameter must be an object. Received: ${typeof params}.`);
-        }
-
-        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
-
-        let isObject = false;
-        let propReferenceIndex = null;
-        let obj = params.obj; 
-        let prop = params.prop;
-        let value;
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
-
-        if (typeof params.value == 'string') {
-            if (params.value.length != 7 || params.value[0] != '#') {
-                console.error(`[GUI] color() 'value' parameter must be an hexadecimal string in the format "#ffffff". Received: "${params.value}".`)
-            }
-            else {
-                value = params.value;
-            }
-        }
-        if (!value) value = '#000000';
-
-        // callback mode
-        if ( params.value !== undefined ) {
-            if (prop != undefined || obj != undefined) {
-                console.warn(`[GUI] color() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
-            }
-        }
-
-        // object-binding
-        else if (prop != undefined && obj != undefined) {
-            if (typeof prop != 'string') {
-                throw Error(`[GUI] color() "prop" parameter must be an string. Received: ${typeof prop}.`);
-            }
-            if (typeof obj != 'object') {
-                throw Error(`[GUI] color() "obj" parameter must be an object. Received: ${typeof obj}.`);
-            }
-
-            if (label == ' ') {
-                label = prop;
-            }
-
-            propReferenceIndex = this.propReferences.push(obj[prop]) - 1;
-            isObject = true;
-        }
-        else {
-            if ((prop != undefined && obj == undefined) || (prop == undefined && obj == undefined)) {
-                console.warn(`[GUI] color() "obj" and "prop" parameters must be used together.`);
-            }
-        }
-
         this.imageContainer = null;
-
-        const container = document.createElement('div');
-        container.className = 'p-gui__color';
-        container.textContent = label;
-        if ( tooltip ) {
-            container.setAttribute('title', tooltip);
-        }
-        this.wrapper.append(container);
-
-        const colorpicker = document.createElement('input');
-        colorpicker.className = 'p-gui__color-picker';
-        colorpicker.setAttribute('type', 'color');
-        colorpicker.value = value;
-        container.append(colorpicker);
-
-        if (typeof callback == 'function') {
-            colorpicker.addEventListener('input', () => {
-                if ( isObject ) {
-                    obj[prop] = colorpicker.value;
-                }
-
-                else if (typeof callback == 'function') {
-                    callback(colorpicker.value);
-                }
-
-                if (this.onUpdate) {
-                    this.onUpdate();
-                } else if (this.isFolder && this.firstParent.onUpdate) {
-                    this.firstParent.onUpdate();
-                }
-            });
-        }
-
-        if ( isObject ) {
-            Object.defineProperty( obj, prop, {
-                set: val => { 
-                    this.propReferences[propReferenceIndex] = val;
-
-                    colorpicker.value = val;
-
-                    if (typeof callback == 'function') {
-                        callback(val);
-                    }
-                },
-                get: () => { 
-                    return this.propReferences[propReferenceIndex];
-                }
-            });
-        }
+        const el = new Color(this, params, callback);
+        return el;
     }
 
-    vector2( params = {}, callback) {
-        if (typeof params != 'object') {
-            throw Error(`[GUI] vector2() first parameter must be an object. Received: ${typeof params}.`);
-        }
-    
-        let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
-    
-        const minX = params.x.min ?? 0;
-        const maxX = params.x.max ?? 1;
-        const minY = params.y.min ?? 0;
-        const maxY = params.y.max ?? 1;
-        const stepX = params.x.step || (maxX - minX) / 100;
-        const stepY = params.y.step || (maxY - minY) / 100;
-        const decimalsX = this._countDecimals(stepX);
-        const decimalsY = this._countDecimals(stepY);
-    
-        const objectX = params.x.obj;
-        const propX = params.x.prop;
-        const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
-        
-        const objectY = params.y.obj;
-        const propY = params.y.prop;
-        const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
-    
-        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
-    
-        callback = typeof callback == 'function' ? callback : null;
-    
+    vector2(params = {}, callback) {
         this.imageContainer = null;
-    
-        const container = document.createElement('div');
-        container.className = 'p-gui__vector2';
-        container.textContent = label;
-        if ( tooltip ) {
-            container.setAttribute('title', tooltip);
-        }
-        this.wrapper.append(container);
-    
-        const vector_value = document.createElement('div');
-        vector_value.className = 'p-gui__vector-value';
-        vector_value.textContent = objectX[propX] + ', ' + objectY[propY];
-        container.append(vector_value);
-    
-        const area = document.createElement('div');
-        area.className = 'p-gui__vector2-area';
-        container.append(area);
-        area.addEventListener('click', evt => {
-            const newX = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX));
-            const newY = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY));
-            objectX[propX] = newX.toFixed(decimalsX);
-            objectY[propY] = newY.toFixed(decimalsY);
-    
-            if (callback) {
-                callback(objectX[propX], objectX[propY]);
-            }
-    
-            if (this.onUpdate) {
-                this.onUpdate();
-            } else if (this.isFolder && this.firstParent.onUpdate) {
-                this.firstParent.onUpdate();
-            }
-        });
-        
-        let pointer_is_down = false;
-        area.addEventListener('pointerdown', (evt) => {
-            pointer_is_down = true;
-        });
-        area.addEventListener('pointerup', () => {
-            pointer_is_down = false;
-        });
-        area.addEventListener('pointermove', (evt) => {
-            if (pointer_is_down) {
-                const newX = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX));
-                const newY = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY));
-                objectX[propX] = newX.toFixed(decimalsX);
-                objectY[propY] = newY.toFixed(decimalsY);
-    
-                if (callback) {
-                    callback(objectX[propX], objectX[propY]);
-                }
-    
-                if (this.onUpdate) {
-                    this.onUpdate();
-                } else if (this.isFolder && this.firstParent.onUpdate) {
-                    this.firstParent.onUpdate();
-                }
-            }
-        });
-    
-        const line_x = document.createElement('div');
-        line_x.className = 'p-gui__vector2-line p-gui__vector2-line-x';
-        area.append(line_x);
-    
-        const line_y = document.createElement('div');
-        line_y.className = 'p-gui__vector2-line p-gui__vector2-line-y';
-        area.append(line_y);
-    
-        const dot = document.createElement('div');
-        dot.className = 'p-gui__vector2-dot';
-        area.append(dot);
-    
-        dot.style.left = this._mapLinear(objectX[propX], minX, maxX, 0, area.clientWidth) + 'px';
-        dot.style.top = this._mapLinear(objectY[propY], minY, maxY, area.clientHeight, 0) + 'px';
-    
-        Object.defineProperty( objectX, propX, {
-            set: val => { 
-                this.propReferences[propXReferenceIndex] = val;
-                dot.style.left = this._mapLinear(val, minX, maxX, 0, area.clientWidth) + 'px';
-                vector_value.textContent = String( val ) + ', ' + objectY[propY];
-            },
-            get: () => { 
-                return this.propReferences[propXReferenceIndex];
-            }
-        });
-    
-        Object.defineProperty( objectY, propY, {
-            set: val => { 
-                this.propReferences[propYReferenceIndex] = val;
-                dot.style.top = this._mapLinear(val, minY, maxY, area.clientHeight, 0) + 'px';
-                vector_value.textContent = objectX[propX] + ', ' + String( val );
-            },
-            get: () => { 
-                return this.propReferences[propYReferenceIndex];
-            }
-        });
+        const el = new Vector2(this, params, callback);
+        return el;
     }
 
     folder(options = {}) {

package/src/styles/_folder.css.js

@@ -2,7 +2,7 @@ export default /* css */ `
     .p-gui__folder {
         width: 100%;
         position: relative;
-        background: #333333;
+        background: var(--color-bg);
         overflow: auto;
         margin-bottom: 2px;
         display: flex;