perfect-gui 3.0.5 → 3.1.0

package/README.md

@@ -91,8 +91,7 @@ gui.image('Click this', 'path/to/image', () => {
 
 ```javascript
 // Simple slider, only returns a value to the callback
-// min parameter is optional, default is 0
-// max parameter is optional, default is 1
+// min and max parameters are optional, default is 0 (min) and 1 (max)
 // step parameter is optional, default is (max - min) * 0.01
 gui.slider('Slide this', { value: 5, min: 0, max: 10, step: .1 }, value => {
     console.log('Slider value : ' + value);
@@ -123,7 +122,8 @@ gui.list('Select one', ['apple', 'lime', 'peach'], function(item) {
 <tr><td>vector2</td><td>
 
 ```javascript
-let folder = gui.vector2('Position', { 
+// min and max parameters are optional, default is 0 (min) and 1 (max)
+gui.vector2('Position', { 
     x: { object: myObject.position, prop: 'x', min: -10, max: 10 },
     y: { object: myObject.position, prop: 'y', min: -10, max: 10 },
 });
@@ -132,7 +132,8 @@ let folder = gui.vector2('Position', {
 <tr><td>folder</td><td>
 
 ```javascript
-let folder = gui.folder('folder name', { 
+let folder = gui.folder({ 
+    name: 'folder name',
     closed: false // default is false
 });
 folder.button('click me!', callback);

package/package.json

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

package/src/index.js

@@ -378,19 +378,16 @@ export default class GUI {
         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 minX = data.x.min ?? 0;
+        const maxX = data.x.max ?? 1;
+        const minY = data.y.min ?? 0;
+        const maxY = data.y.max ?? 1;
+
         const objectX = data.x.object;
         const propX = data.x.prop;
         const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
@@ -417,8 +414,8 @@ export default class GUI {
             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));
+                objectX[propX] = parseFloat(this._mapLinear(evt.offsetX, 0, area.clientWidth, minX, maxX).toFixed(1));
+                objectY[propY] = parseFloat(this._mapLinear(evt.offsetY, 0, area.clientHeight, maxY, minY).toFixed(1));
             }
         });
 
@@ -437,13 +434,13 @@ export default class GUI {
             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';
+        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, data.x.min, data.x.max, 0, area.clientWidth) + 'px';
+                dot.style.left = this._mapLinear(val, minX, maxX, 0, area.clientWidth) + 'px';
                 vector_value.textContent = String( val ) + ', ' + objectY[propY];
             },
             get: () => { 
@@ -454,7 +451,7 @@ export default class GUI {
         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';
+                dot.style.top = this._mapLinear(val, minY, maxY, area.clientHeight, 0) + 'px';
                 vector_value.textContent = objectX[propX] + ', ' + String( val );
             },
             get: () => { 
@@ -463,17 +460,9 @@ export default class GUI {
         });
     }
 
-    folder(name, options = {}) {
+    folder(options = {}) {
         let closed = typeof options.closed == 'boolean' ? options.closed : false;
-
-        let params = {
-            name,
-            closed
-        };
-        this._checkMandatoryParams({
-            name: 'string',
-            closed: 'boolean'
-        }, params);
+        let name = options.name || '';
 
         this.imageContainer = null;
 
@@ -492,7 +481,7 @@ export default class GUI {
         });
         
         let folderHeader = this._createElement({
-            innerHTML: `<span class="p-gui__folder-arrow"></span>${params.name}`,
+            innerHTML: `<span class="p-gui__folder-arrow"></span>${name}`,
             class: 'p-gui__folder-header',
             onclick: function() {
                 this.parentNode.classList.toggle('p-gui__folder--closed');

package/test/src/index.html

@@ -151,7 +151,7 @@
 
         <h2>Folders</h2>
 
-        <p>Folders can be closed by default by setting the <i>open</i> parameter to <span class="code-inline">false</span>.</p>
+        <p>Folders can be closed by default by setting the <i>closed</i> parameter to <span class="code-inline">true</span>.</p>
 
         <div id="container-3" class="container">
             <div class="element"></div>
@@ -159,22 +159,27 @@
 
         <div class="code-button" onclick="document.getElementById('code-block-folders').classList.toggle('code-block--hidden')">See code</div>
         <div id="code-block-folders" class="code-block code-block--hidden">
-        <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
+        <!-- HTML generated using hilite.me --><div style="background: #272822; overflow:auto;width:auto;;"><pre style="margin: 0; line-height: 125%"><span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">perfectGUI</span><span style="color: #f8f8f2">({</span>
     <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Folders&#39;</span>
 <span style="color: #f8f8f2">});</span>
 
-<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 1&#39;</span><span style="color: #f8f8f2">);</span>
+<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">({</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Folder 1 (open)&#39;</span> <span style="color: #f8f8f2">});</span>
 
-<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
+<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Random color&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
     <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
 <span style="color: #f8f8f2">});</span>
 
-<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Folder 2&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">false</span><span style="color: #f8f8f2">);</span>
+<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Size&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">{</span> <span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span> <span style="color: #f8f8f2">},</span> <span style="color: #a6e22e">value</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
+    <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">scale</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">value</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
+<span style="color: #f8f8f2">});</span>
+
+<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">folder_2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">folder</span><span style="color: #f8f8f2">({</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Folder 2 (closed)&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">closed</span><span style="color: #f92672">:</span> <span style="color: #66d9ef">true</span> <span style="color: #f8f8f2">});</span>
 
-<span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&quot;Random color&quot;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
+<span style="color: #a6e22e">folder_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Random color&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{</span>
     <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">style</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">backgroundColor</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">getRandomColor</span><span style="color: #f8f8f2">();</span>
 <span style="color: #f8f8f2">});</span>
 </pre></div>
+    
         </div>
     
         <h2>Other options</h2>

package/test/src/js/folders.js

@@ -9,19 +9,19 @@ export default function folders() {
         container: '#container-3'
     });
 
-    let folder_1 = gui.folder('Folder 1 (open)');
+    let folder_1 = gui.folder({ name: 'Folder 1 (open)' });
 
-    folder_1.button("Random color", () => {
+    folder_1.button('Random color', () => {
         element.style.backgroundColor = getRandomColor();
     });
 
-    folder_1.slider("Size", { value: 1 }, value => {
+    folder_1.slider('Size', { value: 1 }, value => {
         element.style.transform = `scale(${value})`;
     });
 
-    let folder_2 = gui.folder('Folder 2 (closed)', { closed: true });
+    let folder_2 = gui.folder({ name: 'Folder 2 (closed)', closed: true });
 
-    folder_2.button("Random color", () => {
+    folder_2.button('Random color', () => {
         element.style.backgroundColor = getRandomColor();
     });
 }