perfect-gui 4.9.8 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.9.8",
+  "version": "4.10.0",
   "description": "GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/Slider.js

@@ -0,0 +1,242 @@
+export default class Slider {
+    constructor(params = {}, callback) {
+        this.propReferences = [];
+
+        if (typeof params != 'object') {
+            throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof params}.`);
+        }
+
+        let name = typeof params.name == 'string' ? params.name || ' ' : ' ';
+        this.isObject = false;
+        let propReferenceIndex = null;
+        this.obj = params.obj; 
+        this.prop = params.prop;
+        let value = typeof params.value == 'number' ? params.value : null;
+        this.min = params.min ?? 0;
+        this.max = params.max ?? 1;
+        this.step = params.step || (this.max - this.min) / 100;
+
+        // callback mode
+        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.`);
+            }
+        }
+        // object-binding
+        else if (this.prop != undefined && this.obj != undefined) {
+            if (typeof this.prop != 'string') {
+                throw Error(`[GUI] slider() "prop" parameter must be an string. Received: ${typeof this.prop}.`);
+            }
+            if (typeof this.obj != 'object') {
+                throw Error(`[GUI] slider() "obj" parameter must be an object. Received: ${typeof this.obj}.`);
+            }
+
+            if (name == ' ') {
+                name = this.prop;
+            }
+
+            propReferenceIndex = this.propReferences.push(this.obj[this.prop]) - 1;
+            this.isObject = true;
+        }
+        else {
+            if ((this.prop != undefined && this.obj == undefined) || (this.prop == undefined && this.obj != undefined)) {
+                console.warn(`[GUI] slider() "obj" and "prop" parameters must be used together.`);
+            }
+
+            value = (this.max - this.min) / 2;
+        }
+
+        this.imageContainer = null;
+    
+        const container = document.createElement('div');
+        container.className = 'p-gui__slider';
+
+        const slider_name = document.createElement('div');
+        slider_name.className = 'p-gui__slider-name';
+        slider_name.textContent = name;
+        container.append(slider_name);
+    
+        this.ctrlDiv = document.createElement('div');
+        this.ctrlDiv.className = 'p-gui__slider-ctrl';
+        this.ctrlDiv.setAttribute('type', 'range');
+        this.ctrlDiv.setAttribute('min', this.min);
+        this.ctrlDiv.setAttribute('max', this.max);
+        container.append(this.ctrlDiv);
+
+        const slider_bar = document.createElement('div');
+        slider_bar.className = 'p-gui__slider-bar';
+        this.ctrlDiv.append(slider_bar);
+
+        this.handle = document.createElement('div');
+        this.handle.className = 'p-gui__slider-handle';
+        this.ctrlDiv.append(this.handle);
+
+        this.filling = document.createElement('div');
+        this.filling.className = 'p-gui__slider-filling';
+        slider_bar.append(this.filling);
+
+        this.valueInput = document.createElement('input');
+        this.valueInput.className = 'p-gui__slider-value';
+        this.valueInput.value = this.isObject ? this.obj[this.prop] : value;
+        container.append(this.valueInput);
+
+        // init position
+        setTimeout(() => {
+            const handleWidth = this.handle.offsetWidth;
+            this.handle.position = this._mapLinear(this.valueInput.value, this.min, this.max, handleWidth / 2, 88 - handleWidth / 2);
+            this.handle.style.transform = `translate(-50%, -50%) translateX(${this.handle.position}px)`;
+            this.filling.style.width = `${this.handle.position}px`;
+        }, 0); // wait for render
+
+        this.valueInput.addEventListener('change', () => {
+            this._updateHandlePositionFromValue();
+            this._triggerCallbacks();
+        })
+    
+        this.ctrlDiv.addEventListener('pointerdown', (evt) => {
+            this.ctrlDiv.pointerDown = true;
+            this.ctrlDiv.prevPosition = evt.clientX;
+            this._updateHandlePositionFromPointer(evt, true);
+        });
+
+        window.addEventListener('pointerup', (evt) => {
+            this.ctrlDiv.pointerDown = false;
+        });
+
+        window.addEventListener('pointermove', (evt) => {
+            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 => { 
+                    this.propReferences[propReferenceIndex] = val;
+                    this.valueInput.value = val;
+
+                    this._updateHandlePositionFromValue();
+
+                    if (typeof callback == "function") {
+                        callback(parseFloat(this.valueInput.value));
+                    }            
+                },
+                get: () => { 
+                    return this.propReferences[propReferenceIndex];
+                }
+            });
+        }
+
+        return container;
+    }
+
+    _updateHandlePositionFromPointer(evt, firstDown = false) {
+        const sliderWidth = this.ctrlDiv.offsetWidth;
+        const handleWidth = this.handle.offsetWidth;
+        const pointerDelta = evt.clientX - this.ctrlDiv.prevPosition;
+        let handlePosition;
+        const currentValue = parseFloat(this.valueInput.value);
+        
+        if (firstDown) {
+            handlePosition = evt.offsetX;
+        } else {
+            handlePosition = this.handle.position + pointerDelta;
+        }
+
+        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 ) {
+            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) {
+            const decimals = this._countDecimals(this.step);
+            newValue = newValue.toFixed(decimals);
+
+            this.valueInput.value = newValue;
+
+            this.ctrlDiv.prevPosition = evt.clientX;
+
+            this.handle.style.transform = `translate(-50%, -50%) translateX(${handlePosition}px)`;
+            this.handle.position = handlePosition;
+
+            this.filling.style.width = this.handle.position + 'px';
+        
+            this._triggerCallbacks();
+        }
+    }
+
+    _countDecimals(num) {
+        // Convert the number to a string
+        const numStr = num.toString();
+        
+        // Find the position of the decimal point
+        const decimalIndex = numStr.indexOf('.');
+        
+        // If there is no decimal point, return 0
+        if (decimalIndex === -1) {
+          return 0;
+        }
+        
+        // Calculate the number of digits after the decimal point
+        const decimalPlaces = numStr.length - decimalIndex - 1;
+        
+        return decimalPlaces;
+      }
+
+    _updateHandlePositionFromValue() {
+        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 ) {
+            this.obj[this.prop] = parseFloat(this.valueInput.value);
+        }
+        else {
+            if (typeof callback == "function") {
+                callback(parseFloat(this.valueInput.value));
+            }
+        }
+
+        if (this.onUpdate) {
+            this.onUpdate();
+        } else if (this.isFolder && this.firstParent.onUpdate) {
+            this.firstParent.onUpdate();
+        }
+    }
+    
+    _mapLinear( x, a1, a2, b1, b2 ) {
+        return b1 + ( x - a1 ) * ( b2 - b1 ) / ( a2 - a1 );
+    }
+
+    _quantize(x, step) {
+        return step * Math.round(x / step);
+    }
+
+    _quantizeCeil(x, step) {
+        return step * Math.ceil(x / step);
+    }
+
+    _quantizeFloor(x, step) {
+        return step * Math.floor(x / step);
+    }
+}

package/src/index.js

@@ -1,4 +1,5 @@
-import styles from './styles';
+import Slider from './Slider';
+import styles from './styles/styles';
 
 export default class GUI {
     constructor(options = {}) {
@@ -322,8 +323,13 @@ export default class GUI {
 
         return image;
     }
-    
+
     slider (params = {}, callback) {
+        const el = new Slider(params, callback);
+        this.wrapper.append(el);
+    }
+    
+    sliderOld (params = {}, callback) {
         if (typeof params != 'object') {
             throw Error(`[GUI] slider() first parameter must be an object. Received: ${typeof params}.`);
         }
@@ -372,8 +378,12 @@ export default class GUI {
     
         const container = document.createElement('div');
         container.className = 'p-gui__slider';
-        container.textContent = name;
         this.wrapper.append(container);
+
+        const slider_name = document.createElement('div');
+        slider_name.className = 'p-gui__slider-name';
+        slider_name.textContent = name;
+        container.append(slider_name);
     
         const slider_ctrl = document.createElement('input');
         slider_ctrl.className = 'p-gui__slider-ctrl';
@@ -384,13 +394,17 @@ export default class GUI {
         slider_ctrl.setAttribute('value', isObject ? obj[prop] : value);
         container.append(slider_ctrl);
 
-        const slider_value = document.createElement('div');
+        const slider_value = document.createElement('input');
         slider_value.className = 'p-gui__slider-value';
-        slider_value.textContent = isObject ? String(obj[prop]) : String(value);
+        slider_value.value = isObject ? String(obj[prop]) : String(value);
         container.append(slider_value);
+
+        slider_value.addEventListener('change', () => {
+            slider_ctrl.value = parseFloat(slider_value.value);
+        })
     
         slider_ctrl.addEventListener('input', () => {
-            slider_value.textContent = slider_ctrl.value;
+            slider_value.value = slider_ctrl.value;
 
             if ( isObject ) {
                 obj[prop] = parseFloat(slider_ctrl.value);
@@ -995,6 +1009,14 @@ export default class GUI {
 
     toggleClose() {
         this.closed = !this.closed;
+        
+        if (this.closed) {
+            this.previousInnerScroll = this.wrapper.scrollTop;
+            this.wrapper.scrollTo(0,0);
+        } else {
+            this.wrapper.scrollTo(0,this.previousInnerScroll);
+        }
+        
         this.wrapper.classList.toggle('p-gui--collapsed');
     }
 

package/src/styles/_button.js

@@ -0,0 +1,21 @@
+export default /* css */ `
+.p-gui__button {
+    background: var(--color-accent);
+    text-align: center;
+    color: white;
+    border: none;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    transition: var(--transition) background, var(--transition) border-color;
+}
+
+.p-gui__button:hover {
+    background: var(--color-accent-hover);
+    color: var(--color-text-light);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.p-gui__folder .p-gui__button {
+    margin-inline: 0;
+}
+`;

package/src/styles/_color.js

@@ -0,0 +1,36 @@
+export default /* css */ `
+.p-gui__color {
+    cursor: default;
+    color: var(--color-text-dark);
+    transition: var(--transition) color;
+}
+
+.p-gui__color:hover {
+    color: var(--color-text-light);
+}
+
+.p-gui__color-picker {
+    position: absolute;
+    right: 5px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 21px;
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid var(--color-border-2);
+    outline: none;
+    -webkit-appearance: none;
+    padding: 0;
+    background-color: transparent;
+    border: 1px solid #222222;
+    overflow: hidden;
+}
+
+.p-gui__color-picker::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+.p-gui__color-picker::-webkit-color-swatch {
+    border: none;
+}
+`;

package/src/styles/_folder.js

@@ -0,0 +1,56 @@
+export default /* css */ `
+    .p-gui__folder {
+        width: 100%;
+        position: relative;
+        background: #434343;
+        overflow: auto;
+        margin-bottom: 3px;
+        display: flex;
+        flex-wrap: wrap;
+        border: 1px solid grey;
+        padding: 0 3px 3px 3px;
+        border-radius: var(--main-border-radius);
+        box-sizing: border-box;
+    }
+    
+    .p-gui__folder:last-of-type {
+        margin-bottom: 0;
+        border-bottom: none;
+    }
+    
+    .p-gui__folder--first {
+        margin-top: 0;
+    }
+    
+    .p-gui__folder--closed {
+        height: 32px;
+        overflow: hidden;
+    }
+    
+    .p-gui__folder-header {
+        padding: 10px 5px;
+        background-color: rgba(0, 0, 0, .5);
+        color: white;
+        cursor: pointer;
+        width: 100%;
+        margin: 0 -2px 2px -3px;
+    }
+    
+    .p-gui__folder-header:hover {
+        background-color: rgba(0, 0, 0, .75);
+    }
+    
+    .p-gui__folder-arrow {
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);
+        background-size: contain;
+        margin-right: 5px;
+        transform: rotate(90deg)
+    }
+    
+    .p-gui__folder--closed .p-gui__folder-arrow {
+        transform: rotate(0deg);
+    }
+`;

package/src/styles/_image.js

@@ -0,0 +1,54 @@
+export default /* css */ `
+    .p-gui__image-container {
+        width: 100%;
+        padding: 3px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+    }
+    
+    .p-gui__image {
+        background-size: cover;
+        cursor: pointer;
+        position: relative;
+        margin: 1px 2.5px 19px 2.5px;
+        border-radius: var(--main-border-radius);
+        flex: 0 0 calc(33.333% - 5px);
+        height: 90px;
+        background-position: center;
+        color: var(--color-text-dark);
+        transition: var(--transition) color;
+    }
+
+    .p-gui__image:hover {
+        color: var(--color-text-text);
+    }
+
+    .p-gui__image::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        content: '';
+        border: 1px solid transparent;
+        box-sizing: border-box;
+        border-radius: var(--main-border-radius);
+        transition: var(--transition) border-color;
+    }
+    .p-gui__image--selected::after {
+        border-color: #06FF89;
+    }
+    
+    .p-gui__image-text {
+        position: absolute;
+        bottom: -15px;
+        text-shadow: 0 -1px 0 #111;
+        white-space: nowrap;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        
+    }
+`;

package/src/styles/_list.js

@@ -0,0 +1,35 @@
+export default /* css */ `
+.p-gui__list {
+    cursor: default;
+    color: var(--color-text-dark);
+    transition: var(--transition) color;
+}
+
+.p-gui__list:hover {
+    color: var(--color-text-light);
+}
+
+.p-gui__list-dropdown {
+    background: rgba(255, 255, 255,.05);
+    color: white;
+    padding: 0 12px 0 5px;
+    top: 0px;
+}
+
+.p-gui__list-dropdown {
+    position: absolute;
+    right: 5px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 21px;
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid var(--color-border-2);
+    outline: none;
+}
+
+.p-gui__list-dropdown:hover {
+    background: rgba(255, 255, 255, .1);
+}
+`;

package/src/styles/_slider.js

@@ -0,0 +1,92 @@
+export default /* css */ `
+.p-gui__slider {
+    position: relative;
+    min-height: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    color: var(--color-text-dark);
+    transition: color var(--transition);
+}
+
+.p-gui__slider:hover {
+    color: var(--color-text-light);
+}
+
+.p-gui__slider-name {
+    width: 50%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.p-gui__slider-ctrl {
+    -webkit-appearance: none;
+    padding: 0;
+    font: inherit;
+    outline: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    position: relative;
+    right: 0;
+    height: 14px;
+    margin: 0 0 0 auto;
+    width: 37%;
+}
+
+.p-gui__slider-bar {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 2px;
+    background: rgba(255, 255, 255, .2);
+    width: 100%;
+    transform: translateY(-50%);
+}
+
+.p-gui__slider-filling {
+    position: absolute;
+    top: -25%;
+    left: 0;
+    height: 150%;
+    background: var(--color-accent);
+    width: 0;
+}
+
+.p-gui__slider:hover .p-gui__slider-filling {
+    background: var(--color-accent-hover);
+}
+
+.p-gui__slider-handle {
+    width: 15px;
+    height: 8px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    border-radius: 2px;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: var(--color-text-dark);
+    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
+}
+
+.p-gui__slider:hover .p-gui__slider-handle {
+    background: var(--color-text-light);
+}
+
+.p-gui__slider-value {
+    display: inline-block;
+    right: 7px;
+    width: 13%;
+    border: none;
+    color: white;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 2px 4px;
+    color: inherit;
+}
+
+.p-gui__slider-value:focus {
+    outline: none;
+}
+`;

package/src/styles/_switch.js

@@ -0,0 +1,35 @@
+export default /* css */ `
+.p-gui__switch {
+    background: rgba(255, 255, 255, .05);
+    color: var(--color-text-dark);
+    transition: var(--transition) background, var(--transition) color;
+}
+
+.p-gui__switch:hover {
+    background: rgba(255, 255, 255, .1);
+    color: var(--color-text-light);
+}
+
+.p-gui__folder .p-gui__switch {
+    margin-inline: 0;
+}
+
+.p-gui__switch-checkbox {
+    width: 5px;
+    height: 5px;
+    background-color: rgba(0, 0, 0, .5);
+    border: 1px solid grey;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    margin: auto;
+    border-radius: 50%;
+    pointer-events: none;
+}
+
+.p-gui__switch-checkbox--active {
+    background-color: #00ff89;
+    box-shadow: 0 0 7px #00ff89;
+}
+`;