perfect-gui 3.4.4 → 3.4.5

package/README.md

@@ -7,7 +7,7 @@ Features:
 - easy positioning
 - draggable panels
 
-<img src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/capture.png" width="464"/>  
+<img src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/capture.png" width="580"/>  
 
 ## Demo
 https://thibka.github.io/perfect-gui/public/
@@ -166,4 +166,6 @@ gui.toggleClose();
 
 
 ## To do
-- Adding color palette component
+- Color palette component
+- Vector2 drag & drop
+

package/package.json

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

package/src/styles.js

@@ -18,7 +18,7 @@ return /* css */`
     font-family: Verdana, Arial, sans-serif;
     width: 290px;
     overflow: auto;
-    box-shadow: 0 0 10px black;
+    box-shadow: 0 0 5px black;
     box-sizing: border-box;
     z-index: 99999;
     user-select: none;
@@ -75,7 +75,7 @@ return /* css */`
     width: calc(33.33% - 10px);
     aspect-ratio: 1 / 1;
     background-size: cover;
-    margin: 5px 5px 19px 5px;
+    margin: 1px 5px 19px 5px;
     cursor: pointer;
     position: relative;
 }
@@ -184,7 +184,7 @@ return /* css */`
 .p-gui__switch-checkbox {
     width: 5px;
     height: 5px;
-    background-color: #343434;
+    background-color: rgba(0, 0, 0, .5);
     position: absolute;
     top: 0;
     right: 8px;

package/test/src/index.js

@@ -1,6 +1,5 @@
 import './styles/main.scss';
-import perfectGUI from '../../src/index';
-//import full_featured_gui from './js/full_featured';
+import full_featured from './js/full_featured';
 import basics from './js/basics';
 import vectors from './js/vectors';
 import multiple from './js/multiple';
@@ -8,6 +7,8 @@ import folders from './js/folders';
 import other from './js/other';
 import kill_create from './js/kill_create';
 
+//full_featured();
+
 basics();
 
 vectors();

package/test/src/js/basics.js

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

package/test/src/js/full_featured.js

@@ -1,84 +1,66 @@
+// <div id="container-0" class="container" style="height: 800px; border-radius: 0;"></div>
 
+import GUI from '../../../src/index';
 
-const full_featured_gui = new perfectGUI({
-    name: "This is a basic panel",
-    draggable: true,
-    container: '#container-1'
-});
+export default function() 
+{
+    const element = document.querySelector('#container-0 .element');
+    const note = document.querySelector('#container-0 .note');
 
-full_featured_gui.image(
-    'Background 1',
-    'https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
-    () => {
-        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1485254767195-60704c46702e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1502&q=80)`;
-        full_featured_gui.container.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Joel Filipe on Unsplash";
-    }
-);
-full_featured_gui.image(
-    'Background 2',
-    'https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
-    () => {
-        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1535370976884-f4376736ab06?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80)`;
-        full_featured_gui.container.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Richard M. on Unsplash";
-    }
-);
-full_featured_gui.image(
-    'Background 3',
-    'https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=80',
-    () => {
-        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80)`;
-        full_featured_gui.container.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Cassi Josh on Unsplash";
-    }
-);
-full_featured_gui.image(
-    'Background 4',
-    'https://images.unsplash.com/photo-1574169208507-84376144848b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&q=80',
-    () => {
-        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1574169208507-84376144848b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&q=80)`;
-        full_featured_gui.container.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by United States Geological Survey on Unsplash";
-    }
-);
+    const gui = new GUI({
+        draggable: true,
+        container: '#container-0',
+        name: 'Control panel'
+    });
 
-let folder = full_featured_gui.folder('Some folder');
 
-folder.button("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
+    gui.button("Randomize color", () => {
+        element.style.backgroundColor = get_random_color();
+    });
+    gui.slider({name: 'Intensity', min: .1, max: 2, value: .75, step: .01 }, (value) => {
+        element.style.transform = `scale(${value})`;
+    });
+    gui.slider({name: 'Scale', min: 0, max: 50, value: 25, step: 25 }, (value) => {
+        element.style.borderRadius = `${value}%`;
+    });
 
-folder.image(
-    'Background 5',
-    'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1024&q=80',
-    () => {
-        full_featured_gui.container.style.backgroundImage = `url(https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1024&q=80)`;
-        full_featured_gui.container.style.backgroundColor = `none`;
-        document.getElementById('note').textContent = "Photo by Milad Fakurian on Unsplash";
-    }
-);
+    let folder1 = gui.folder({name: 'Texture'});
 
-full_featured_gui.button("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
-full_featured_gui.slider("Scale", {min: .1, max: 2, value: 1, step: .01 }, (value) => {
-    element.style.transform = `scale(${value})`;
-});
-full_featured_gui.slider("3-step border-radius", {min: 0, max: 50, value: 0, step: 25 }, (value) => {
-    element.style.borderRadius = `${value}%`;
-});
+    folder1.image(
+        'The officer',
+        require('../img/DALL·E 2022-11-13 20.11.16 - portrait of a squirrel in an officier suit, style of a Rembrandt painting.png'),
+        () => {}
+    );
+    folder1.image(
+        'Weird dream',
+        require('../img/DALL·E 2022-11-13 20.11.52 - a blonde girl riding a whale in the style of hopper.png'),
+        () => {}
+    );
+    folder1.image(
+        'Friends',
+        require('../img/DALL·E 2022-11-13 20.13.55 - 1 blonde haired girl with her orange cat, watching the whales in Tadoussac, Canada. In the style of an oil painting..png'),
+        () => {}
+    );
 
-let folder2 = full_featured_gui.folder('ok', false);
-folder2.button("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
+    let folder2 = gui.folder({name: 'Normals', closed: true});
+    folder2.button("Random element color", () => {});
 
-full_featured_gui.toggle("Opacity switch", true, (state) => {
-    if (!state) element.style.opacity = .5;
-    else element.style.opacity = 1;
-});
+    gui.toggle("Rim light", true, (state) => {});
 
-full_featured_gui.list('Select a color', ['red', 'pink', 'yellow', 'blue'], function(item) {
-    element.style.backgroundColor = item;
-});
+    gui.toggle("Direct light", false, (state) => {});
+
+    gui.list('Preset', ['Atomic', 'pink', 'yellow', 'blue'], function(item) {});
+
+
+    let position = { x: 2, y: 1};
+    const gui2 = new GUI({
+        draggable: true,
+        container: '#container-0',
+        name: 'Position panel'
+    });
+    gui2.vector2('Position', {
+        x: {min: -10, max: 10, object: position, prop: 'x'},
+        y: {min: -10, max: 10, object: position, prop: 'y'},
+    }, () => {});
+    gui2.button('Randomize', () => {});
+}