perfect-gui 4.12.7 → 4.12.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -67
- package/package.json +1 -1
- package/src/index.js +3 -3
package/README.md
CHANGED
|
@@ -1,94 +1,113 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1>Perfect GUI</h1>
|
|
3
|
+
<p>A nice, simple and (probably not so) perfect GUI for JavaScript.</p>
|
|
4
|
+
|
|
5
|
+
<p>
|
|
6
|
+
<a href="https://thibka.github.io/perfect-gui/"><b>Documentation & Live Examples</b></a>
|
|
7
|
+
</p>
|
|
8
|
+
</div>
|
|
3
9
|
|
|
4
|
-
##
|
|
5
|
-
Go to the [documentation page](https://thibka.github.io/perfect-gui/) to see all the features and examples.
|
|
10
|
+
## Features
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
- **Simplicity first**: Extremely easy to setup and use, inspired by timeless classics like `dat.gui` and `lil.gui`.
|
|
13
|
+
- **Modern UI**: Clean, customizable, and polished design right out of the box.
|
|
14
|
+
- **Rich Inputs**: Support for sliders, buttons, color pickers, vectors, images, lists, and toggles.
|
|
15
|
+
- **Folders**: Easily group and organize your controls in collapsible sections.
|
|
16
|
+
- **Draggable & Auto-positioned**: Snap it to screen edges or let the user drag it anywhere.
|
|
17
|
+
- **Data Binding**: Automatically sync your controls with object properties.
|
|
18
|
+
- **Zero Dependencies**: Lightweight and built with vanilla JavaScript.
|
|
8
19
|
|
|
9
|
-
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
**With NPM:**
|
|
10
23
|
|
|
11
24
|
```bash
|
|
12
25
|
npm i perfect-gui
|
|
13
26
|
```
|
|
14
27
|
|
|
15
|
-
|
|
28
|
+
**From a CDN (ES Modules):**
|
|
16
29
|
|
|
17
|
-
|
|
30
|
+
For a quick setup without build tools, use an import map:
|
|
31
|
+
|
|
32
|
+
```html
|
|
18
33
|
<script type="importmap">
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
34
|
+
{
|
|
35
|
+
"imports": {
|
|
36
|
+
"perfect-gui": "https://unpkg.com/perfect-gui@latest/dist/perfect-gui.js"
|
|
37
|
+
}
|
|
22
38
|
}
|
|
23
|
-
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<script type="module">
|
|
42
|
+
import GUI from 'perfect-gui';
|
|
43
|
+
|
|
44
|
+
const gui = new GUI();
|
|
45
|
+
gui.button('Click me!', () => alert('Hello world!'));
|
|
24
46
|
</script>
|
|
25
47
|
```
|
|
26
48
|
|
|
27
|
-
##
|
|
49
|
+
## Quick Start
|
|
50
|
+
|
|
51
|
+
Creating a control panel is as simple as instantiating the GUI and adding some components:
|
|
28
52
|
|
|
29
53
|
```javascript
|
|
30
54
|
import GUI from 'perfect-gui';
|
|
31
55
|
|
|
32
|
-
|
|
56
|
+
// 1. Create a new GUI instance
|
|
57
|
+
const gui = new GUI({
|
|
58
|
+
label: 'My Settings',
|
|
59
|
+
position: 'top right',
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
// 2. Add a simple button
|
|
63
|
+
gui.button('Click me', () => {
|
|
64
|
+
console.log('Button clicked!');
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
// 3. Add a slider connected to an object value natively
|
|
68
|
+
const params = { opacity: 0.5 };
|
|
69
|
+
gui.slider({ obj: params, prop: 'opacity', min: 0, max: 1 }, (val) => {
|
|
70
|
+
document.body.style.opacity = val;
|
|
71
|
+
});
|
|
33
72
|
|
|
34
|
-
|
|
73
|
+
// 4. Group controls in a folder
|
|
74
|
+
const folder = gui.folder({ label: 'Advanced' });
|
|
75
|
+
folder.color({ label: 'Color', value: '#bada55' }, (color) => {
|
|
76
|
+
document.body.style.backgroundColor = color;
|
|
77
|
+
});
|
|
35
78
|
```
|
|
36
79
|
|
|
37
|
-
## Options
|
|
80
|
+
## Configuration Options
|
|
81
|
+
|
|
82
|
+
You can customize the GUI by passing an options object to the constructor:
|
|
83
|
+
|
|
38
84
|
```javascript
|
|
39
85
|
const gui = new GUI({
|
|
40
|
-
label: 'My GUI',
|
|
41
|
-
//
|
|
42
|
-
//
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
//
|
|
46
|
-
//
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
// Width of the panel (in pixels).
|
|
50
|
-
// Default is 290.
|
|
51
|
-
|
|
52
|
-
maxHeight: 500,
|
|
53
|
-
// Maximum height beyond which scrolling is necessary.
|
|
54
|
-
// Default is the smallest value between the height of the window and the height of the container.
|
|
55
|
-
|
|
56
|
-
closed: false,
|
|
57
|
-
// Defines whether the panel should be closed by default.
|
|
58
|
-
// Default is false.
|
|
59
|
-
|
|
60
|
-
position: 'bottom right',
|
|
61
|
-
// Defines where to place the panel on screen.
|
|
62
|
-
// Accepted values are 'top', 'bottom', 'left' and 'right' in no particular order ('bottom right' = 'right bottom').
|
|
63
|
-
// If multiple instances have the same position, they will be stacked horizontally.
|
|
64
|
-
// Default is 'top right'.
|
|
65
|
-
|
|
66
|
-
draggable: false,
|
|
67
|
-
// Defines if the panel can be manually moved across the screen.
|
|
68
|
-
// Default is false.
|
|
69
|
-
|
|
70
|
-
autoRepositioning: true,
|
|
71
|
-
// If set to true, the panel position will be reset when the screen is resized.
|
|
72
|
-
// If a panel has been dragged, it won't be be affected.
|
|
73
|
-
// Default is true.
|
|
74
|
-
|
|
75
|
-
color: '#bada55',
|
|
76
|
-
// Default is #2e2e2e
|
|
77
|
-
|
|
86
|
+
label: 'My GUI', // Name of the panel (default: null)
|
|
87
|
+
container: '#container', // Element containing the GUI (default: document.body)
|
|
88
|
+
width: 250, // Width of the panel in pixels (default: 290)
|
|
89
|
+
maxHeight: 500, // Max height beyond which scrolling is necessary
|
|
90
|
+
closed: false, // Start closed? (default: false)
|
|
91
|
+
position: 'bottom right', // Position ('top', 'bottom', 'left', 'right')
|
|
92
|
+
draggable: false, // Can it be manually moved? (default: false)
|
|
93
|
+
autoRepositioning: true, // Reset position on window resize? (default: true)
|
|
94
|
+
color: '#bada55', // Accent color
|
|
78
95
|
onUpdate: () => {
|
|
79
|
-
|
|
80
|
-
}
|
|
96
|
+
// Callback function triggered each time any GUI instance is updated
|
|
97
|
+
},
|
|
81
98
|
});
|
|
82
99
|
```
|
|
83
100
|
|
|
84
|
-
##
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
101
|
+
## API / Available Components
|
|
102
|
+
|
|
103
|
+
See the [Documentation](https://thibka.github.io/perfect-gui/) for a comprehensive list of properties and usage.
|
|
104
|
+
|
|
105
|
+
- [`button()`](https://thibka.github.io/perfect-gui/public/#button)
|
|
106
|
+
- [`slider()`](https://thibka.github.io/perfect-gui/public/#slider)
|
|
107
|
+
- [`toggle()`](https://thibka.github.io/perfect-gui/public/#toggle)
|
|
108
|
+
- [`list()`](https://thibka.github.io/perfect-gui/public/#list)
|
|
109
|
+
- [`image()`](https://thibka.github.io/perfect-gui/public/#image)
|
|
110
|
+
- [`color()`](https://thibka.github.io/perfect-gui/public/#color)
|
|
111
|
+
- [`vector2()`](https://thibka.github.io/perfect-gui/public/#vector2)
|
|
112
|
+
- [`folder()`](https://thibka.github.io/perfect-gui/public/#folder)
|
|
113
|
+
- [`toggleClose()`](https://thibka.github.io/perfect-gui/public)
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -199,11 +199,11 @@ export default class GUI {
|
|
|
199
199
|
this.screenCorner.x == 'left'
|
|
200
200
|
? 0
|
|
201
201
|
: this.container.clientWidth -
|
|
202
|
-
|
|
203
|
-
|
|
202
|
+
this.wrapperWidth -
|
|
203
|
+
scrollbar_width;
|
|
204
204
|
if (this.instanceId > 0) {
|
|
205
205
|
let existingDomInstances = this.container.querySelectorAll(
|
|
206
|
-
`.p-gui:not(#${this.
|
|
206
|
+
`.p-gui:not(#${this.domElement.id}):not([data-dragged])`,
|
|
207
207
|
);
|
|
208
208
|
for (let i = 0; i < existingDomInstances.length; i++) {
|
|
209
209
|
let instanceId = parseInt(
|