perfect-gui 3.3.3 → 3.4.1

package/README.md

@@ -65,6 +65,9 @@ const gui = new GUI({
     // If set to true, the panel position will be reset when the screen is resized.
     // If a panel has been dragged, it won't be be affected.
     // Default is true.
+
+    color: '#bada55',
+    // Default is #2e2e2e
 });
 ```
 
@@ -147,7 +150,8 @@ gui.vector2('Position', {
 ```javascript
 let folder = gui.folder({ 
     name: 'folder name',
-    closed: false // default is false
+    closed: false, // default is false,
+    color: '#226666' // default is #434343
 });
 folder.button('click me!', callback);
 ```

package/package.json

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

package/src/index.js

@@ -18,6 +18,7 @@ export default class GUI {
         }
 
         this.name = (options != undefined && typeof options.name == "string") ? options.name : ''; 
+        this.color = options.color || null; 
 
         if ( this instanceof GUI ) {
             if ( typeof GUI[GUI.instanceCounter] != 'number' ) {
@@ -59,7 +60,6 @@ export default class GUI {
         this.yOffset = 0;
         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 {
@@ -72,7 +72,8 @@ export default class GUI {
             width: ${this.wrapperWidth}px;
             max-height: ${this.maxHeight}px;
             transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
-            ${verticalCSSPositioning}
+            ${ this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;' }
+            ${ this.color ? 'background: ' + this.color + ';' : '' }
         }`);
 
         if (options.autoRepositioning != false) window.addEventListener('resize', this._handleResize.bind(this));
@@ -165,7 +166,8 @@ export default class GUI {
         this.header = this._createElement({
             parent: this.wrapper,
             class: 'p-gui__header',
-            textContent: this.name
+            textContent: this.name,
+            inline: `${ this.color ? 'border-color: ' + this.color + ';' : ''}`
         });
     
         this._createElement({
@@ -472,6 +474,7 @@ export default class GUI {
     folder(options = {}) {
         let closed = typeof options.closed == 'boolean' ? options.closed : false;
         let name = options.name || '';
+        let color = options.color || null;
 
         this.imageContainer = null;
 
@@ -486,7 +489,8 @@ export default class GUI {
         }
         
         let container = this._createElement({
-            class: className
+            class: className,
+            inline: color ? `background-color: ${color};`: null,
         });
         
         let folderHeader = this._createElement({
@@ -496,10 +500,10 @@ export default class GUI {
                 this.parentNode.classList.toggle('p-gui__folder--closed');
             },
             parent: container
-        })
+        });
 
         let folder = new GUI({isFolder: true, folderOptions: {
-            wrapper: container
+            wrapper: container,
         }});
         this.folders.push(folder);
         return folder;

package/src/styles.js

@@ -10,7 +10,7 @@ return /* css */`
     top: 0;
     left: 0;
     transform: translate3d(0,0,0);
-    padding: 20px 0px 4px 0px;
+    padding-top: 21px;
     background: #2e2e2e;
     display: flex;
     justify-content: center;
@@ -22,6 +22,8 @@ return /* css */`
     box-sizing: border-box;
     z-index: 99999;
     user-select: none;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 
 .p-gui--collapsed {
@@ -36,7 +38,7 @@ return /* css */`
     left: 0;
     width: 100%;
     height: 20px;
-    background-color: #111111;
+    background-color: rgba(0, 0, 0, .8);
     border-bottom: 1px solid #484848;
     cursor: grab;
     color: grey;
@@ -65,17 +67,15 @@ return /* css */`
 
 .p-gui__image-container {
     width: 100%;
-    padding: 0 10px;
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: 5px;
 }
 
 .p-gui__image {
-    width: 30.33%;
-    height: 80px;
+    width: calc(33.33% - 10px);
+    aspect-ratio: 1 / 1;
     background-size: cover;
-    margin: 5px 1.5% 17px 1.5%;
+    margin: 5px 5px 19px 5px;
     cursor: pointer;
     position: relative;
 }
@@ -86,6 +86,7 @@ return /* css */`
     color: #eee;
     font-size: 11px;
     text-shadow: 0 -1px 0 #111;
+    white-space: nowrap;
 }
 
 .p-gui__button, 
@@ -93,28 +94,42 @@ return /* css */`
 .p-gui__list,
 .p-gui__vector2 {
     width: 100%;
-    margin: 3px;
     padding: 7px;
-    background: #1b1b1b;
     font-size: 11px;
     color: white;
     border-bottom: 1px solid #00ff89;
     cursor: pointer;
     position: relative;
     box-sizing: border-box;
+    margin-bottom: 3px;
+}
+
+.p-gui__button,
+.p-gui__switch {
+    margin-right: 2px;
+    margin-left: 2px;
+    background: rgba(0, 0, 0, .3);
+}
+
+.p-gui__folder .p-gui__button,
+.p-gui__folder .p-gui__switch {
+    margin-right: 0;
+    margin-left: 0;
 }
 
 .p-gui__vector2 {
+    background: transparent;
     border-bottom: 1px solid #ff9999;
     aspect-ratio: 1;
+    padding-bottom: 0;
 }
 
 .p-gui__vector2-area {
     position: relative;
-    background: black;
-    margin-top: 11px;
+    background: rgba(0, 0, 0, .3);
+    margin-top: 8px;
     width: 100%;
-    height: calc(100% - 33px);
+    height: calc(100% - 28px);
 }
 
 .p-gui__vector2-line {
@@ -159,7 +174,7 @@ return /* css */`
 
 .p-gui__button:hover,
 .p-gui__switch:hover {
-    background: #101010;
+    background: rgba(0, 0, 0, .75);
 }
 
 .p-gui__switch-checkbox {
@@ -192,9 +207,8 @@ return /* css */`
 
 .p-gui__slider {
     width: 100%;
-    margin: 3px 3px 9px 3px;
+    margin-bottom: 8px;
     padding: 7px;
-    background: #1b1b1b;
     font-size: 11px;
     color: white;
     position: relative;
@@ -254,7 +268,7 @@ return /* css */`
     display: flex;
     flex-wrap: wrap;
     border-left: 2px solid grey;
-    margin-top: 5px;
+    padding: 0 3px;
 }
 
 .p-gui__folder--first {
@@ -268,14 +282,15 @@ return /* css */`
 .p-gui__folder-header {
     padding: 5px;
     font-size: 11px;
-    background-color: #222222;
+    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: #111111;
+    background-color: rgba(0, 0, 0, .75);
 }
 
 .p-gui__folder-arrow {
@@ -291,12 +306,5 @@ return /* css */`
 .p-gui__folder--closed .p-gui__folder-arrow {
     transform: rotate(0deg);
 }
-
-.p-gui__folder .p-gui__button, 
-.p-gui__folder .p-gui__switch,
-.p-gui__folder .p-gui__slider,
-.p-gui__folder .p-gui__list {
-    margin-left: 6px;
-}
 `
 };

package/test/src/index.html

@@ -158,7 +158,8 @@
 
         <h2>Folders</h2>
 
-        <p>Folders can be closed by default by setting the <i>closed</i> parameter to <span class="code-inline">true</span>.</p>
+        <p>Folders can be closed by default by setting the <i>closed</i> option to <span class="code-inline">true</span>.</p>
+        <p>Each folder can have a different color with the <span class="code-inline">color</span> option.</p>
 
         <div id="container-3" class="container">
             <div class="element"></div>
@@ -170,7 +171,7 @@
     <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: #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: #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&#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">&#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>
@@ -180,13 +181,14 @@
     <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: #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&#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">&#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>
@@ -196,6 +198,7 @@
         <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>
+        <p>The <span class="code-inline">color</span> option can be used for both GUI panels and folders to customize their background color.</p>
         
         <div id="container-4" class="container"></div>
 
@@ -220,14 +223,31 @@
 <span style="color: #f8f8f2">});</span>
 
 <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 (closed)&#39;</span><span style="color: #f8f8f2">,</span>
+    <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;GUI 3 (closed, scrollable)&#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: #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;gui_2.toggleClose();&#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">gui_2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggleClose</span><span style="color: #f8f8f2">();</span>
+<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">f1</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui_3</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&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">color</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;#33329f&#39;</span> <span style="color: #f8f8f2">});</span>
+<span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">let</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">&lt;</span> <span style="color: #ae81ff">3</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">++</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
+    <span style="color: #a6e22e">f1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;btn &#39;</span><span style="color: #f92672">+</span> <span style="color: #a6e22e">i</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: #f8f8f2">}</span>
+<span style="color: #66d9ef">let</span> <span style="color: #a6e22e">f2</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">gui_3</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&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">color</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;#9f3293&#39;</span> <span style="color: #f8f8f2">});</span>
+<span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">let</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">&lt;</span> <span style="color: #ae81ff">3</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">++</span><span style="color: #f8f8f2">)</span> <span style="color: #f8f8f2">{</span>
+    <span style="color: #a6e22e">f2</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">button</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">&#39;btn &#39;</span><span style="color: #f92672">+</span> <span style="color: #a6e22e">i</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: #f8f8f2">}</span>
+<span style="color: #66d9ef">for</span> <span style="color: #f8f8f2">(</span><span style="color: #66d9ef">let</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">=</span> <span style="color: #ae81ff">0</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">&lt;</span> <span style="color: #ae81ff">10</span><span style="color: #f8f8f2">;</span> <span style="color: #a6e22e">i</span> <span style="color: #f92672">++</span><span style="color: #f8f8f2">)</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;btn &#39;</span><span style="color: #f92672">+</span> <span style="color: #a6e22e">i</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: #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 (custom color)&#39;</span><span style="color: #f8f8f2">,</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">color</span><span style="color: #f92672">:</span> <span style="color: #e6db74">&#39;#226666&#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;lorem&#39;</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=&gt;</span> <span style="color: #f8f8f2">{});</span>
 </pre></div>
+
         </div>
 
         <h2>Killing and creating dynamically</h2>

package/test/src/js/basics.js

@@ -10,7 +10,7 @@ export default function basics() {
 
     const gui = new GUI({
         name: 'Basics',
-        container: '#container-1'
+        container: '#container-1',
     });
 
     gui.button('Button', () => {

package/test/src/js/folders.js

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

package/test/src/js/other.js

@@ -8,7 +8,7 @@ export default function other() {
         container,
         name: 'GUI 1 (drag me!)',
         width: 500,
-        draggable: true
+        draggable: true,
     });
     gui_1.button('Custom width using the `width` option', () => {});
 
@@ -30,24 +30,23 @@ export default function other() {
         closed: true,
     });
 
-    gui_3.button('gui_2.toggleClose();', () => {
-        gui_2.toggleClose();
-    });
+    let f1 = gui_3.folder({ name: 'folder', color: '#33329f' });
+    for (let i = 0; i < 3; i ++) {
+        f1.button('btn '+ i, () => {});
+    }
+    let f2 = gui_3.folder({ name: 'folder', color: '#9f3293' });
+    for (let i = 0; i < 3; i ++) {
+        f2.button('btn '+ i, () => {});
+    }
+    for (let i = 0; i < 10; i ++) {
+        gui_3.button('btn '+ i, () => {});
+    }
 
-    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', () => {});
+    const gui_4 = new GUI({
+        container,
+        position: 'bottom right',
+        name: 'GUI 4 (custom color)',
+        color: '#226666'
+    });
+    gui_4.button('lorem', () => {});
 }

package/test/src/js/vectors.js

@@ -10,7 +10,7 @@ export default function vectors() {
 
     const gui = new GUI({
         name: 'Vectors',
-        container: '#container-vectors'
+        container: '#container-vectors',
     });
 
     gui.vector2('Position', {