perfect-gui 3.2.0 → 3.3.1

package/package.json

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

package/src/index.js

@@ -29,7 +29,7 @@ export default class GUI {
         }        
         this.instanceId = GUI[GUI.instanceCounter];
         
-        this.wrapperWidth = (options != undefined && options.width) ? options.width : 290;
+        this.wrapperWidth = options.width || 290;
         this.stylesheet = document.createElement('style');
         this.stylesheet.setAttribute('type', 'text/css');
         this.stylesheet.setAttribute('id', 'lm-gui-stylesheet');
@@ -60,8 +60,17 @@ export default class GUI {
         this.position = {prevX:this.xOffset, prevY:this.yOffset, x:this.xOffset, y:this.yOffset};
 
         let verticalCSSPositioning = this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;';
+        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;
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
             ${verticalCSSPositioning}
         }`);

package/src/styles.js

@@ -17,7 +17,7 @@ return /* css */`
     flex-wrap: wrap;
     font-family: Verdana, Arial, sans-serif;
     width: 290px;
-    overflow: hidden;
+    overflow: auto;
     box-shadow: 0 0 10px black;
     box-sizing: border-box;
     z-index: 99999;

package/test/src/index.html

@@ -195,6 +195,7 @@
         <p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
         <p>The <span class="code-inline">toggleClose()</span> method can be used to open / close a GUI panel.</p>
         <p>Just like folders, GUI panels can be closed by default by setting the <span class="code-inline">close</span> option to <span class="code-inline">true</span>.</p>
+        <p>The <span class="code-inline">maxHeight</span> option can be used to define the maximum height of a panel beyond which scrolling is necessary. Default is the smallest value between the height of the window and the height of the container.</p>
         
         <div id="container-4" class="container"></div>
 

package/test/src/js/other.js

@@ -26,11 +26,28 @@ export default function other() {
 
     const gui_3 = new GUI({
         container,
-        name: 'GUI 3 (closed)',
+        name: 'GUI 3 (closed, scrollable)',
         closed: true,
     });
 
     gui_3.button('gui_2.toggleClose();', () => {
         gui_2.toggleClose();
     });
+
+    gui_3.button('lorem', () => {});
+    gui_3.button('ipsum', () => {});
+    gui_3.button('dolor', () => {});
+    gui_3.button('sit', () => {});
+    gui_3.button('amet', () => {});
+    gui_3.button('lorem', () => {});
+    gui_3.button('ipsum', () => {});
+    let f = gui_3.folder('dolor');
+    f.button('dolor', () => {});
+    f.button('dolor', () => {});
+    f.button('dolor', () => {});
+    gui_3.button('sit', () => {});
+    gui_3.button('amet', () => {});
+    gui_3.button('lorem', () => {});
+    gui_3.button('ipsum', () => {});
+    gui_3.button('ipsum', () => {});
 }

package/test/src/styles/main.scss

@@ -35,6 +35,10 @@ h2 {
     margin-top: 80px;
 }
 
+p {
+    line-height: 1.4;
+}
+
 .code-button {
     text-decoration: underline;
     cursor: pointer;