perfect-gui 3.4.5 → 3.4.6

package/README.md

@@ -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) => {
     ...
 });
 ```
@@ -168,4 +166,4 @@ gui.toggleClose();
 ## To do
 - Color palette component
 - Vector2 drag & drop
-
+- Style list component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "3.4.5",
+  "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/test/src/index.js

@@ -1,5 +1,5 @@
 import './styles/main.scss';
-import full_featured from './js/full_featured';
+//import demo from './js/demo';
 import basics from './js/basics';
 import vectors from './js/vectors';
 import multiple from './js/multiple';
@@ -7,7 +7,7 @@ import folders from './js/folders';
 import other from './js/other';
 import kill_create from './js/kill_create';
 
-//full_featured();
+//demo();
 
 basics();
 

package/test/src/js/basics.js

@@ -25,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/{full_featured.js → demo.js}

@@ -28,17 +28,17 @@ export default function()
 
     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'),
+        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.png'),
+        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..png'),
+        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'),
         () => {}
     );