perfect-gui 4.12.0 → 4.12.4

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "perfect-gui",
-  "version": "4.12.0",
+  "type": "module",
+  "version": "4.12.4",
   "description": "GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/components/Button.js

@@ -0,0 +1,44 @@
+export default class Slider {
+    constructor(parent, params = {}, callback) {
+        this.parent = parent;
+
+        let label = '';
+        if (typeof params != 'string') {
+            if (typeof params == 'object' && params?.hasOwnProperty('label')) {
+                label = params.label == '' ? ' ' : params.label;
+            } else {
+                label = ' ';
+            }
+        } else {
+            label = params == '' ? ' ' : params;
+        }
+
+        const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : 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.parent.onUpdate) {
+                this.parent.onUpdate();
+            } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
+                this.parent.firstParent.onUpdate();
+            }
+        });
+
+        if (typeof params.color == 'string') {
+            el.style.setProperty('--color-accent', params.color);
+            el.style.setProperty('--color-accent-hover', params.hoverColor || params.color);
+        }
+
+        this.parent.wrapper.append(el);
+        return el;
+    }
+}

package/src/components/Color.js

@@ -0,0 +1,108 @@
+export default class Color {
+    constructor(parent, params = {}, callback) {
+        this.parent = parent;
+
+        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.parent.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.`);
+            }
+        }
+
+        const container = document.createElement('div');
+        container.className = 'p-gui__color';
+        container.textContent = label;
+        if ( tooltip ) {
+            container.setAttribute('title', tooltip);
+        }
+        this.parent.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.parent.onUpdate) {
+                    this.parent.onUpdate();
+                } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
+                    this.parent.firstParent.onUpdate();
+                }
+            });
+        }
+
+        if ( isObject ) {
+            Object.defineProperty( obj, prop, {
+                set: val => { 
+                    this.parent.propReferences[propReferenceIndex] = val;
+
+                    colorpicker.value = val;
+
+                    if (typeof callback == 'function') {
+                        callback(val);
+                    }
+                },
+                get: () => { 
+                    return this.parent.propReferences[propReferenceIndex];
+                }
+            });
+        }
+
+        return container;
+    }
+}

package/src/components/Image.js

@@ -0,0 +1,87 @@
+export default class Image {
+    constructor(parent, params = {}, callback) {
+        this.parent = parent;
+
+        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}; `;
+        }   
+
+        // 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.parent.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.parent.onUpdate) {
+                this.parent.onUpdate();
+            } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
+                this.parent.firstParent.onUpdate();
+            }
+        });
+
+        return image;   
+    }
+}

package/src/components/List.js

@@ -0,0 +1,171 @@
+export default class List {
+    constructor(parent, params = {}, callback) {
+        this.parent = parent;
+
+        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.parent.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.`);
+            }
+        }
+
+        let container = document.createElement('div');
+        container.className = 'p-gui__list';
+        container.textContent = label;
+        if (tooltip) {
+            container.setAttribute('title', tooltip);
+        }
+        this.parent.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.parent.onUpdate) {
+                this.parent.onUpdate();
+            } else if (this.parent.isFolder && this.parent.firstParent.onUpdate) {
+                this.parent.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.parent.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.parent.propReferences[propReferenceIndex];
+                }
+            });
+        }
+
+        return container;
+    }
+}

package/src/components/Slider.js

@@ -10,7 +10,7 @@ export default class Slider {
         let label = typeof params.label == 'string' ? params.label || ' ' : ' ';
         this.isObject = false;
         let propReferenceIndex = null;
-        this.obj = params.obj; 
+        this.obj = params.obj;
         this.prop = params.prop;
         let value = typeof params.value == 'number' ? params.value : null;
         this.min = params.min ?? 0;
@@ -20,7 +20,7 @@ export default class Slider {
         this.callback = typeof callback == 'function' ? callback : null;
 
         // callback mode
-        if ( value !== null ) {            
+        if (value !== null) {
             if (this.prop != undefined || this.obj != undefined) {
                 console.warn(`[GUI] slider() "obj" and "prop" parameters are ignored when a "value" parameter is used.`);
             }
@@ -50,8 +50,6 @@ export default class Slider {
         }
         const tooltip = (typeof params.tooltip === 'string') ? params.tooltip : (params.tooltip === true ? label : null);
 
-        this.imageContainer = null;
-    
         const container = document.createElement('div');
         container.className = 'p-gui__slider';
 
@@ -59,11 +57,13 @@ export default class Slider {
             container.setAttribute('title', tooltip);
         }
 
+        this.parent.wrapper.append(container);
+
         const slider_name = document.createElement('div');
         slider_name.className = 'p-gui__slider-name';
         slider_name.textContent = label;
         container.append(slider_name);
-    
+
         this.ctrlDiv = document.createElement('div');
         this.ctrlDiv.className = 'p-gui__slider-ctrl';
         this.ctrlDiv.setAttribute('type', 'range');
@@ -102,7 +102,7 @@ export default class Slider {
             this._updateHandlePositionFromValue();
             this._triggerCallbacks();
         })
-    
+
         this.ctrlDiv.addEventListener('pointerdown', (evt) => {
             this.ctrlDiv.pointerDown = true;
             this.ctrlDiv.prevPosition = evt.clientX;
@@ -114,15 +114,15 @@ export default class Slider {
         });
 
         window.addEventListener('pointermove', (evt) => {
-            if (this.ctrlDiv.pointerDown) {                
+            if (this.ctrlDiv.pointerDown) {
                 this.ctrlDiv.pointerDelta = evt.clientX - this.ctrlDiv.prevPosition;
                 this._updateHandlePositionFromPointer(evt);
             }
         });
 
-        if ( this.isObject ) {
-            Object.defineProperty( this.obj, this.prop, {
-                set: val => { 
+        if (this.isObject) {
+            Object.defineProperty(this.obj, this.prop, {
+                set: val => {
                     this.propReferences[propReferenceIndex] = val;
                     this.valueInput.value = val;
 
@@ -130,9 +130,9 @@ export default class Slider {
 
                     if (this.callback) {
                         this.callback(parseFloat(this.valueInput.value));
-                    }            
+                    }
                 },
-                get: () => { 
+                get: () => {
                     return this.propReferences[propReferenceIndex];
                 }
             });
@@ -147,7 +147,7 @@ export default class Slider {
         const pointerDelta = evt.clientX - this.ctrlDiv.prevPosition;
         const currentValue = parseFloat(this.valueInput.value);
         let handlePosition;
-        
+
         if (firstDown) {
             handlePosition = evt.offsetX;
         } else {
@@ -155,19 +155,19 @@ export default class Slider {
         }
 
         handlePosition = Math.max(handleWidth / 2, Math.min(handlePosition, sliderWidth - handleWidth / 2));
-        
+
         let newValue = this.min + (this.max - this.min) * (handlePosition - handleWidth / 2) / (sliderWidth - handleWidth);
-        if ( newValue > currentValue ) {
+        if (newValue > currentValue) {
             newValue = this._quantizeFloor(newValue, this.step);
         } else {
             newValue = this._quantizeCeil(newValue, this.step);
         }
-        
+
         // toFixed(9) avoids weird javascript infinite decimals
         newValue = parseFloat(newValue.toFixed(9));
         const nextValue = parseFloat((currentValue + this.step).toFixed(9));
         const prevValue = parseFloat((currentValue - this.step).toFixed(9));
-        
+
         if (newValue >= nextValue || newValue <= prevValue) {
             newValue = newValue.toFixed(this.decimals);
 
@@ -179,7 +179,7 @@ export default class Slider {
             this.handle.position = handlePosition;
 
             this.filling.style.width = this.handle.position + 'px';
-        
+
             this._triggerCallbacks();
         }
     }
@@ -188,17 +188,17 @@ export default class Slider {
         const sliderWidth = this.ctrlDiv.offsetWidth;
         const handleWidth = this.handle.offsetWidth;
         let handlePosition = this._mapLinear(this.valueInput.value, this.min, this.max, handleWidth / 2, sliderWidth - handleWidth / 2);
-        
+
         handlePosition = Math.max(handleWidth / 2, Math.min(handlePosition, sliderWidth - handleWidth / 2));
-        
+
         this.handle.style.transform = `translate(-50%, -50%) translateX(${handlePosition}px)`;
         this.handle.position = handlePosition;
 
         this.filling.style.width = this.handle.position + 'px';
     }
 
-    _triggerCallbacks() {        
-        if ( this.isObject ) {
+    _triggerCallbacks() {
+        if (this.isObject) {
             this.obj[this.prop] = parseFloat(this.valueInput.value);
         }
         else {
@@ -213,9 +213,9 @@ export default class Slider {
             this.parent.firstParent.onUpdate();
         }
     }
-    
-    _mapLinear( x, a1, a2, b1, b2 ) {
-        return b1 + ( x - a1 ) * ( b2 - b1 ) / ( a2 - a1 );
+
+    _mapLinear(x, a1, a2, b1, b2) {
+        return b1 + (x - a1) * (b2 - b1) / (a2 - a1);
     }
 
     _quantize(x, step) {