perfect-gui 2.6.0 → 3.0.0

package/README.md

@@ -19,24 +19,21 @@ https://thibka.github.io/perfect-gui/public/
 npm i perfect-gui
 ```
 ```javascript
-import perfectGUI from 'perfect-gui';
+import GUI from 'perfect-gui';
 ```
 
 ## Usage
 
 ```javascript
-const gui = new perfectGUI();
+const gui = new GUI();
 
-gui.addButton('Click me', doSomething);
+gui.button('Click me', callback);
 
-function doSomething() {
-    // ...
-}
 ```
 
 ## Options
 ```javascript
-const gui = new perfectGUI({
+const gui = new GUI({
     name: 'My GUI',
     // Name of the panel. 
     // Default is null.
@@ -50,14 +47,14 @@ const gui = new perfectGUI({
     // Default is 290.
     
     closed: false, 
-    // Defines whether the panel should be open or closed on load. 
+    // Defines whether the panel should be open or closed by default. 
     // Default is false (open).
 
     position: 'bottom right',
     // Defines where to place the panel on screen.
     // Accepted values are 'top', 'bottom', 'left' and 'right' 
     // in no particular order ('bottom right' = 'right bottom').
-    // If multiple instances have the same position, they will stack horizontally.
+    // If multiple instances have the same position, they will be stacked horizontally.
     // Default is 'top left'.
 
     draggable: false,
@@ -74,53 +71,67 @@ const gui = new perfectGUI({
 ## Methods
 <table>
 <tr><th>Method</th><th>Example</th></tr>
-<tr><td>addButton</td><td>
+<tr><td>button</td><td>
 
 ```javascript
-gui.addButton('Click me!', function() {
+gui.button('Click me!', () => {
     ...
 });
 ```
 </td></tr>
-<tr><td>addImage</td><td>
+<tr><td>image</td><td>
 
 ```javascript
-gui.addImage('Click this', 'path/to/image', function {
+gui.image('Click this', 'path/to/image', () => {
     ...
 });
 ```
 </td></tr>
-<tr><td>addSlider</td><td>
+<tr><td>slider</td><td>
 
 ```javascript
-gui.addSlider('Slide this', { min: 0, max: 10, value: 5, step: .1 }, function(value) {
+// Simple slider, only returns a value to the callback
+gui.slider('Slide this', { value: 5, min: 0, max: 10, step: .1 }, value => {
     console.log('Slider value : ' + value);
 });
+
+// Object-based slider, automatically updates the value of the object property.
+// Directly updating the property will also update the slider.
+gui.slider('Slide this', { object: foo, prop: 'bar', min: 0, max: 10, step: .1 });
 ```
 </td></tr>
-<tr><td>addSwitch</td><td>
+<tr><td>toggle</td><td>
 
 ```javascript
-gui.addSwitch('Switch me!', true, state => {
-    console.log('Switched boolean value: ' + state);
+gui.toggle('Toggle me!', true, state => {
+    console.log('Toggle boolean value: ' + state);
 });
 ```
 </td></tr>
-<tr><td>addList</td><td>
+<tr><td>list</td><td>
 
 ```javascript
-gui.addList('Select one', ['apple', 'lime', 'peach'], function(item) {
+gui.list('Select one', ['apple', 'lime', 'peach'], function(item) {
     console.log('Selected item: ' + item);
 });
 ```
 </td></tr>
-<tr><td>addFolder</td><td>
+<tr><td>vector2</td><td>
+
+```javascript
+let folder = gui.vector2('Position', { 
+    x: { object: myObject.position, prop: 'x', min: -10, max: 10 },
+    y: { object: myObject.position, prop: 'y', min: -10, max: 10 },
+});
+```
+</td></tr>
+<tr><td>folder</td><td>
 
 ```javascript
-let folder = gui.addFolder('folder name', { 
+let folder = gui.folder('folder name', { 
     closed: false // default is false
 });
-folder.addButton('click me!', callback);
+folder.button('click me!', callback);
 ```
 </td></tr>
 <tr><td>toggleClose</td><td>
@@ -134,5 +145,4 @@ gui.toggleClose();
 
 ## To do
 - Adding scrollbars if window is too short
-- Adding color palette component
-- Adding object binding
+- Adding color palette component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "description": "Nice and simple GUI for JavaScript.",
   "main": "src/index.js",
   "directories": {

package/src/index.js

@@ -17,9 +17,13 @@ export default class GUI {
 
         this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
 
-        if (this instanceof GUI) {
-            if (typeof GUI[GUI.instanceCounter] != 'number') GUI[GUI.instanceCounter] = 0;
-            else GUI[GUI.instanceCounter]++;
+        if ( this instanceof GUI ) {
+            if ( typeof GUI[GUI.instanceCounter] != 'number' ) {
+                GUI[GUI.instanceCounter] = 0;
+            }
+            else {
+                GUI[GUI.instanceCounter]++;
+            }
         }        
         this.instanceId = GUI[GUI.instanceCounter];
         
@@ -30,7 +34,9 @@ export default class GUI {
         document.head.append(this.stylesheet);
         
         // Common styles
-        if (this.instanceId == 0) this._addStyles(`${styles(this.position_type)}`);
+        if (this.instanceId == 0) {
+            this._addStyles(`${styles(this.position_type)}`);
+        }
        
         // Instance styles
         this.screenCorner = this._parseScreenCorner(options.position);
@@ -71,6 +77,8 @@ export default class GUI {
         if (options.closed) this.toggleClose();
 
         this.folders = [];
+
+        this.propReferences = [];
     }
 
     _folderConstructor(folderOptions) {
@@ -158,7 +166,7 @@ export default class GUI {
         });
     }
 
-    addButton(text, callback) {
+    button(text, callback) {
         let params = {
             text: text,
             callback: callback
@@ -177,7 +185,7 @@ export default class GUI {
         })
     }
     
-    addImage(text, path, callback) {
+    image(text, path, callback) {
         let params = {
             text: text,
             path: path,
@@ -198,27 +206,48 @@ export default class GUI {
         // Image
         var image = this._createElement({
             class: 'p-gui__image',
-            onclick: () => params.callback(params.path),
             inline: `background-image: url(${params.path})`,
             parent: this.imageContainer
         })
-    
+        
         // Text inside image
         this._createElement({
             parent: image,
             class: 'p-gui__image-text',
             textContent: params.text
         })    
+        
+        image.onclick = () => params.callback({ path: params.path, text: params.text });
     }
     
-    addSlider (text, sliderParams, callback) {
+    slider (text, sliderParams, callback) {
         this._checkMandatoryParams({
             min: 'number',
             max: 'number',
-            value: 'number',
             step: 'number'
         }, sliderParams);
 
+        let isObject = false;
+        let propReferenceIndex = null;
+        let object; 
+        let prop;
+
+        if ( sliderParams.value ) {
+            this._checkMandatoryParams({
+                value: 'number'
+            }, sliderParams);
+        } else {
+            this._checkMandatoryParams({
+                object: 'object',
+                prop: 'string'
+            }, sliderParams);
+
+            object = sliderParams.object;
+            prop = sliderParams.prop;
+            propReferenceIndex = this.propReferences.push(object[prop]) - 1;
+            isObject = true;
+        }
+
         this.imageContainer = null;
     
         var container = this._createElement({
@@ -226,7 +255,7 @@ export default class GUI {
             textContent: text
         });
     
-        var ctrl = this._createElement({
+        var slider_ctrl = this._createElement({
             parent: container,
             el: 'input',
             class: 'p-gui__slider-ctrl',
@@ -239,19 +268,39 @@ export default class GUI {
             }
         });
     
-        var val = this._createElement({
+        var slider_value = this._createElement({
             parent: container,
             class: 'p-gui__slider-value',
-            textContent: sliderParams.value
+            textContent: isObject ? String(object[prop]) : sliderParams.value
         });
     
-        ctrl.addEventListener('input', function() {
-            val.textContent = ctrl.value;
-            if (typeof callback == "function") callback(ctrl.value);
+        slider_ctrl.addEventListener('input', () => {
+            slider_value.textContent = slider_ctrl.value;
+
+            if ( isObject ) {
+                object[prop] = slider_ctrl.value;
+            }
+
+            if (typeof callback == "function") {
+                callback(slider_ctrl.value);
+            }            
         });
+
+        if ( isObject ) {
+            Object.defineProperty( object, prop, {
+                set: val => { 
+                    this.propReferences[propReferenceIndex] = val;
+                    slider_ctrl.value = val;
+                    slider_value.textContent = String( val );
+                },
+                get: () => { 
+                    return this.propReferences[propReferenceIndex];
+                }
+            });
+        }
     }
 
-    addSwitch(text, state, callback) {
+    toggle(text, state, callback) {
         let params = {
             text: text,
             state: state,
@@ -287,7 +336,7 @@ export default class GUI {
         });
     }
 
-    addList(text, list, callback) {
+    list(text, list, callback) {
         let params = {
             text: text,
             list: list,
@@ -327,7 +376,96 @@ export default class GUI {
         });
     }
 
-    addFolder(name, options = {}) {
+    vector2(text, data, callback) {
+        this._checkMandatoryParams({
+            text: 'string',
+            data: 'object',
+            minX: 'number',
+            maxX: 'number',
+            minY: 'number',
+            maxY: 'number',
+        }, {
+            text,
+            data,
+            minX: data.x.min,
+            maxX: data.x.max,
+            minY: data.y.min,
+            maxY: data.y.max,
+        });
+
+        const objectX = data.x.object;
+        const propX = data.x.prop;
+        const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
+        
+        const objectY = data.y.object;
+        const propY = data.y.prop;
+        const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
+
+        this.imageContainer = null;
+
+        const container = this._createElement({
+            class: 'p-gui__vector2',
+            textContent: text
+        });
+
+        const vector_value = this._createElement({
+            parent: container,
+            class: 'p-gui__vector-value',
+            textContent: objectX[propX] + ', ' + objectY[propY]
+        });
+
+        const area = this._createElement({
+            parent: container,
+            el: 'div',
+            class: 'p-gui__vector2-area',
+            onclick: (evt) => {
+                objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, data.x.min, data.x.max).toFixed(1));
+                objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, data.y.max, data.y.min).toFixed(1));
+            }
+        });
+
+        this._createElement({
+            parent: area,
+            class: 'p-gui__vector2-line p-gui__vector2-line-x'
+        });
+        
+        this._createElement({
+            parent: area,
+            class: 'p-gui__vector2-line p-gui__vector2-line-y'
+        });
+
+        const dot = this._createElement({
+            parent: area,
+            class: 'p-gui__vector2-dot'
+        });
+
+        dot.style.left = this._mapLinear(objectX[propX], data.x.min, data.x.max, 0, area.clientWidth) + 'px';
+        dot.style.top = this._mapLinear(objectY[propY], data.y.min, data.y.max, area.clientHeight, 0) + 'px';
+
+        Object.defineProperty( objectX, propX, {
+            set: val => { 
+                this.propReferences[propXReferenceIndex] = val;
+                dot.style.left = this._mapLinear(val, data.x.min, data.x.max, 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, data.y.min, data.y.max, area.clientHeight, 0) + 'px';
+                vector_value.textContent = objectX[propX] + ', ' + String( val );
+            },
+            get: () => { 
+                return this.propReferences[propYReferenceIndex];
+            }
+        });
+    }
+
+    folder(name, options = {}) {
         let closed = typeof options.closed == 'boolean' ? options.closed : false;
 
         let params = {
@@ -418,4 +556,12 @@ export default class GUI {
         this.closed = !this.closed;
         this.wrapper.classList.toggle('p-gui--collapsed');
     }
+
+    kill() {
+        this.wrapper.remove();
+    }
+
+    _mapLinear( x, a1, a2, b1, b2 ) {
+        return b1 + ( x - a1 ) * ( b2 - b1 ) / ( a2 - a1 );
+    }
 }

package/src/styles.js

@@ -89,7 +89,8 @@ return /* css */`
 
 .p-gui__button, 
 .p-gui__switch,
-.p-gui__list {
+.p-gui__list,
+.p-gui__vector2 {
     width: 100%;
     margin: 3px;
     padding: 7px;
@@ -102,6 +103,55 @@ return /* css */`
     box-sizing: border-box;
 }
 
+.p-gui__vector2 {
+    border-bottom: 1px solid #ff9999;
+    aspect-ratio: 1;
+}
+
+.p-gui__vector2-area {
+    position: relative;
+    background: black;
+    margin-top: 11px;
+    width: 100%;
+    height: calc(100% - 33px);
+}
+
+.p-gui__vector2-line {
+    position: absolute;
+    background: white;
+    opacity: .3;
+    pointer-events: none;
+}
+
+.p-gui__vector2-line-x {
+    width: 100%;
+    height: 1px;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.p-gui__vector2-line-y {
+    width: 1px;
+    height: 100%;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.p-gui__vector2-dot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #d5d5d5;
+    border: 2px solid #ff9999;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
 .p-gui__list {
     cursor: default;
 }
@@ -185,7 +235,8 @@ return /* css */`
     border: 2px solid #00a1ff;
 }
 
-.p-gui__slider-value {
+.p-gui__slider-value,
+.p-gui__vector-value {
     display: inline-block;
     position: absolute;
     right: 7px;