perfect-gui 3.4.4 → 3.4.6

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/
@@ -61,7 +61,7 @@ const gui = new GUI({
     // Defines if the panel can be manually moved across the screen.
     // Default is false.
 
-    autoRepositioning: true
+    autoRepositioning: true,
     // 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.
@@ -77,15 +77,13 @@ const gui = new GUI({
 <tr><td>button</td><td>
 
 ```javascript
-gui.button('Click me!', () => {
-    ...
-});
+gui.button('Click me!', callback);
 ```
 </td></tr>
 <tr><td>image</td><td>
 
 ```javascript
-gui.image('Click this', 'path/to/image', () => {
+gui.image('Click this', 'path/to/image', (path) => {
     ...
 });
 ```
@@ -166,4 +164,6 @@ gui.toggleClose();
 
 
 ## To do
-- Adding color palette component
+- Color palette component
+- Vector2 drag & drop
+- Style list component

package/package.json

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

package/src/index.js

@@ -246,13 +246,14 @@ export default class GUI {
                 value: 'number'
             }, params);
         } else {
+            object = params.obj || params.object;
+            prop = params.prop || params.property;
+            
             this._checkMandatoryParams({
                 object: 'object',
                 prop: 'string'
-            }, params);
+            }, {object, prop});
 
-            object = params.object;
-            prop = params.prop;
             propReferenceIndex = this.propReferences.push(object[prop]) - 1;
             isObject = true;
         }
@@ -399,12 +400,12 @@ export default class GUI {
         const minY = data.y.min ?? 0;
         const maxY = data.y.max ?? 1;
 
-        const objectX = data.x.object;
-        const propX = data.x.prop;
+        const objectX = data.x.obj || data.x.object;
+        const propX = data.x.prop || data.x.property;
         const propXReferenceIndex = this.propReferences.push(objectX[propX]) - 1;
         
-        const objectY = data.y.object;
-        const propY = data.y.prop;
+        const objectY = data.y.obj || data.y.object;
+        const propY = data.y.prop || data.y.property;
         const propYReferenceIndex = this.propReferences.push(objectY[propY]) - 1;
 
         this.imageContainer = null;

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 demo from './js/demo';
 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';
 
+//demo();
+
 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', () => {
@@ -24,7 +25,7 @@ export default function basics() {
         }
     );
 
-    gui.slider({ name: 'Slider 2 (object binding)', object: position, prop: 'x', min: -30, max: 30, step: .1 }
+    gui.slider({ name: 'Slider 2 (object binding)', obj: position, prop: 'x', min: -30, max: 30, step: .1 }
     );
 
     gui.toggle('Switch', true, state => {

package/test/src/js/demo.js

@@ -0,0 +1,66 @@
+// <div id="container-0" class="container" style="height: 800px; border-radius: 0;"></div>
+
+import GUI from '../../../src/index';
+
+export default function() 
+{
+    const element = document.querySelector('#container-0 .element');
+    const note = document.querySelector('#container-0 .note');
+
+    const gui = new GUI({
+        draggable: true,
+        container: '#container-0',
+        name: 'Control panel'
+    });
+
+
+    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}%`;
+    });
+
+    let folder1 = gui.folder({name: 'Texture'});
+
+    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.jpg'),
+        () => {}
+    );
+    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.jpg'),
+        () => {}
+    );
+    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..jpg'),
+        () => {}
+    );
+
+    let folder2 = gui.folder({name: 'Normals', closed: true});
+    folder2.button("Random element color", () => {});
+
+    gui.toggle("Rim light", true, (state) => {});
+
+    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', () => {});
+}

package/test/src/js/full_featured.js

@@ -1,84 +0,0 @@
-
-
-const full_featured_gui = new perfectGUI({
-    name: "This is a basic panel",
-    draggable: true,
-    container: '#container-1'
-});
-
-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";
-    }
-);
-
-let folder = full_featured_gui.folder('Some folder');
-
-folder.button("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
-
-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";
-    }
-);
-
-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}%`;
-});
-
-let folder2 = full_featured_gui.folder('ok', false);
-folder2.button("Random element color", () => {
-    element.style.backgroundColor = get_random_color();
-});
-
-full_featured_gui.toggle("Opacity switch", true, (state) => {
-    if (!state) element.style.opacity = .5;
-    else element.style.opacity = 1;
-});
-
-full_featured_gui.list('Select a color', ['red', 'pink', 'yellow', 'blue'], function(item) {
-    element.style.backgroundColor = item;
-});