perfect-gui 3.5.0 → 3.5.2

package/README.md

@@ -14,17 +14,15 @@ https://thibka.github.io/perfect-gui/public/
 
 ## Install
 
-### NPM
 ```bash
 npm i perfect-gui
 ```
-```javascript
-import GUI from 'perfect-gui';
-```
 
 ## Usage
 
 ```javascript
+import GUI from 'perfect-gui';
+
 const gui = new GUI();
 
 gui.button('Click me', callback);
@@ -45,17 +43,20 @@ const gui = new GUI({
     width: 250,
     // Width of the panel (in pixels). 
     // Default is 290.
+
+    maxHeight: 500,
+    // Maximum height beyond which scrolling is necessary. 
+    // Default is the smallest value between the height of the window and the height of the container.
     
     closed: false, 
-    // Defines whether the panel should be open or closed by default. 
-    // Default is false (open).
+    // Defines whether the panel should be closed by default. 
+    // Default is false.
 
     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').
+    // 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 be stacked horizontally.
-    // Default is 'top left'.
+    // Default is 'top right'.
 
     draggable: false,
     // Defines if the panel can be manually moved across the screen.

package/package.json

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

package/src/index.js

@@ -2,6 +2,7 @@ import styles from './styles';
 
 export default class GUI {
     constructor(options = {}) {
+        // Process options
         if ( options.container ) {
             this.container = typeof options.container == "string" ? document.querySelector(options.container) : options.container;
             this.position_type = 'absolute';
@@ -18,8 +19,17 @@ export default class GUI {
         }
 
         this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
+        
         this.backgroundColor = options.color || null; 
 
+        this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight)
+        if ( options.maxHeight ) {
+            this.initMaxHeight = options.maxHeight;
+            this.maxHeight = Math.min(this.initMaxHeight, this.maxHeight);
+        }
+
+        this.screenCorner = this._parseScreenCorner(options.position);
+
         if ( this instanceof GUI ) {
             if ( typeof GUI[GUI.instanceCounter] != 'number' ) {
                 GUI[GUI.instanceCounter] = 0;
@@ -39,10 +49,29 @@ export default class GUI {
         // Common styles
         if (this.instanceId == 0) {
             this._addStyles(`${styles(this.position_type)}`);
+        }        
+
+        // Instance specific styles
+        this._styleInstance();        
+
+        if (options.autoRepositioning != false) {
+            window.addEventListener('resize', this._handleResize.bind(this));
         }
-       
-        // Instance styles
-        this.screenCorner = this._parseScreenCorner(options.position);
+                
+        this._addWrapper();
+        this.wrapper.setAttribute('data-corner-x', this.screenCorner.x);
+        this.wrapper.setAttribute('data-corner-y', this.screenCorner.y);
+    
+        this.hasBeenDragged = false;
+        if (options.draggable == true) this._makeDraggable();
+
+        this.closed = false;
+        if (options.closed) this.toggleClose();
+
+        this.folders = [];
+    }
+
+    _styleInstance() {
         this.xOffset = this.screenCorner.x == 'left' ? 0 : this.container.clientWidth - this.wrapperWidth;
         if (this.instanceId > 0) {
             let existingDomInstances = this.container.querySelectorAll('.p-gui');
@@ -60,14 +89,6 @@ export default class GUI {
         this.yOffset = 0;
         this.position = {prevX:this.xOffset, prevY:this.yOffset, x:this.xOffset, y:this.yOffset};
 
-        if ( options.maxHeight ) {
-            this.maxHeight = options.maxHeight;
-        } else {
-            this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight)
-        }
-        window.addEventListener('resize', () => {
-            this.maxHeight = Math.min(options.maxHeight || '', Math.min(this.container.clientHeight, window.innerHeight));
-        });
         this._addStyles(`#p-gui-${this.instanceId} {
             width: ${this.wrapperWidth}px;
             max-height: ${this.maxHeight}px;
@@ -75,20 +96,6 @@ export default class GUI {
             ${ this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;' }
             ${ this.backgroundColor ? 'background: ' + this.backgroundColor + ';' : '' }
         }`);
-
-        if (options.autoRepositioning != false) window.addEventListener('resize', this._handleResize.bind(this));
-                
-        this._addWrapper();
-        this.wrapper.setAttribute('data-corner-x', this.screenCorner.x);
-        this.wrapper.setAttribute('data-corner-y', this.screenCorner.y);
-    
-        this.hasBeenDragged = false;
-        if (options.draggable == true) this._makeDraggable();
-
-        this.closed = false;
-        if (options.closed) this.toggleClose();
-
-        this.folders = [];
     }
 
     _folderConstructor(folderOptions) {
@@ -96,19 +103,31 @@ export default class GUI {
     }
 
     _parseScreenCorner(position) {
-        let parsedPosition = {x: 'left', y: 'top'};
+        let parsedPosition = {x: 'right', y: 'top'};
 
         if (position == undefined) return parsedPosition;
-        else if (typeof position != 'string') console.error('[perfect-gui] The position option must be a string.');
+        else if (typeof position != 'string') console.error('[perfect-gui] Position must be a string.');
 
-        if (position.includes('right')) parsedPosition.x = 'right';
+        if (position.includes('left')) parsedPosition.x = 'left';
         if (position.includes('bottom')) parsedPosition.y = 'bottom';
 
         return parsedPosition;
     }
 
+    _getScrollbarWidth(element) {
+        if (element === document.body) {
+            return window.innerWidth - document.documentElement.clientWidth;
+        } else {
+            return element.offsetWidth - element.clientWidth;
+        }
+    }
+
     _handleResize() {
-        if (this.hasBeenDragged) return;
+        this.maxHeight = Math.min(this.initMaxHeight, Math.min(this.container.clientHeight, window.innerHeight));
+
+        if (this.hasBeenDragged) {
+            return;
+        }
 
         this.xOffset = this.screenCorner.x == 'left' ? 0 : this.container.clientWidth - this.wrapperWidth;
         if (this.instanceId > 0) {
@@ -131,8 +150,7 @@ export default class GUI {
     }
 
     _createElement(element) {
-        // DOM
-        element.el = element.el ? element.el : 'div';
+        element.el = element.el || 'div';
         var domElement = document.createElement(element.el);
         if (element.id) domElement.id = element.id;
         if (element.class) domElement.className = element.class;

package/test/src/index.html

@@ -11,7 +11,7 @@
 <body>
     <div class="wrapper">
         <h1>Perfect GUI API</h1>
-        
+
         <h2>Basics</h2>
 
         <div id="container-1" class="container">
@@ -134,14 +134,14 @@
 
 <span style="color: #66d9ef">const</span> <span style="color: #a6e22e">gui_3</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
     <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 3&#39;</span><span style="color: #f8f8f2">,</span>
-    <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;top right&#39;</span>
+    <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;top left&#39;</span>
 <span style="color: #f8f8f2">});</span>
 
 <span style="color: #a6e22e">gui_3</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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">const</span> <span style="color: #a6e22e">gui_4</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
     <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 4&#39;</span><span style="color: #f8f8f2">,</span>
-    <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;right bottom&#39;</span>
+    <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;bottom right&#39;</span>
 <span style="color: #f8f8f2">});</span>
 
 <span style="color: #a6e22e">gui_4</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;Button&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</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>
@@ -261,7 +261,8 @@
     <span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">[</span><span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">length</span><span style="color: #f8f8f2">]</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
         <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;Created GUI&#39;</span><span style="color: #f8f8f2">,</span>
         <span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;bottom left&#39;</span><span style="color: #f8f8f2">,</span>
-        <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span>
+        <span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span><span style="color: #f8f8f2">,</span>
+        <span style="color: #a6e22e">color</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">'red'</span>
     <span style="color: #f8f8f2">});</span>
 <span style="color: #f8f8f2">});</span>
 

package/test/src/js/demo.js

@@ -13,7 +13,6 @@ export default function()
         name: 'Control panel'
     });
 
-
     gui.button("Randomize color", () => {
         element.style.backgroundColor = get_random_color();
     });
@@ -62,5 +61,5 @@ export default function()
         x: {min: -10, max: 10, object: position, prop: 'x'},
         y: {min: -10, max: 10, object: position, prop: 'y'},
     }, () => {});
-    gui2.button('Randomize', () => {});
+    gui2.color('Color', '#ffd170', () => {});
 }

package/test/src/js/kill_create.js

@@ -16,7 +16,8 @@ export default function other() {
             container,
             name: 'Created GUI',
             position: 'bottom left',
-            width: 150
+            width: 150,
+            color: 'red'
         });
     });
 

package/test/src/js/multiple.js

@@ -24,7 +24,7 @@ export default function multiple() {
     
     const gui_3 = new GUI({
         name: 'GUI 3',
-        position: 'top right',
+        position: 'top left',
         container: '#container-2'
     });
     

package/test/src/js/other.js

@@ -7,7 +7,7 @@ export default function other() {
     const gui_1 = new GUI({
         container,
         name: 'GUI 1 (drag me!)',
-        width: 500,
+        width: 450,
         draggable: true,
     });
     gui_1.button('Custom width using the `width` option', () => {});