perfect-gui 3.5.0 → 3.5.1
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 +10 -9
- package/package.json +1 -1
- package/src/index.js +3 -3
- package/test/src/index.html +5 -4
- package/test/src/js/demo.js +1 -2
- package/test/src/js/kill_create.js +2 -1
- package/test/src/js/multiple.js +1 -1
package/README.md
CHANGED
|
@@ -14,17 +14,15 @@ https://thibka.github.io/perfect-gui/public/
|
|
|
14
14
|
|
|
15
15
|
## Install
|
|
16
16
|
|
|
17
|
-
### NPM
|
|
18
17
|
```bash
|
|
19
18
|
npm i perfect-gui
|
|
20
19
|
```
|
|
21
|
-
```javascript
|
|
22
|
-
import GUI from 'perfect-gui';
|
|
23
|
-
```
|
|
24
20
|
|
|
25
21
|
## Usage
|
|
26
22
|
|
|
27
23
|
```javascript
|
|
24
|
+
import GUI from 'perfect-gui';
|
|
25
|
+
|
|
28
26
|
const gui = new GUI();
|
|
29
27
|
|
|
30
28
|
gui.button('Click me', callback);
|
|
@@ -45,17 +43,20 @@ const gui = new GUI({
|
|
|
45
43
|
width: 250,
|
|
46
44
|
// Width of the panel (in pixels).
|
|
47
45
|
// Default is 290.
|
|
46
|
+
|
|
47
|
+
maxHeight: 500,
|
|
48
|
+
// Maximum height beyond which scrolling is necessary.
|
|
49
|
+
// Default is the smallest value between the height of the window and the height of the container.
|
|
48
50
|
|
|
49
51
|
closed: false,
|
|
50
|
-
// Defines whether the panel should be
|
|
51
|
-
// Default is false
|
|
52
|
+
// Defines whether the panel should be closed by default.
|
|
53
|
+
// Default is false.
|
|
52
54
|
|
|
53
55
|
position: 'bottom right',
|
|
54
56
|
// Defines where to place the panel on screen.
|
|
55
|
-
// Accepted values are 'top', 'bottom', 'left' and 'right'
|
|
56
|
-
// in no particular order ('bottom right' = 'right bottom').
|
|
57
|
+
// Accepted values are 'top', 'bottom', 'left' and 'right' in no particular order ('bottom right' = 'right bottom').
|
|
57
58
|
// If multiple instances have the same position, they will be stacked horizontally.
|
|
58
|
-
// Default is 'top
|
|
59
|
+
// Default is 'top right'.
|
|
59
60
|
|
|
60
61
|
draggable: false,
|
|
61
62
|
// Defines if the panel can be manually moved across the screen.
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -96,12 +96,12 @@ export default class GUI {
|
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
_parseScreenCorner(position) {
|
|
99
|
-
let parsedPosition = {x: '
|
|
99
|
+
let parsedPosition = {x: 'right', y: 'top'};
|
|
100
100
|
|
|
101
101
|
if (position == undefined) return parsedPosition;
|
|
102
|
-
else if (typeof position != 'string') console.error('[perfect-gui]
|
|
102
|
+
else if (typeof position != 'string') console.error('[perfect-gui] Position must be a string.');
|
|
103
103
|
|
|
104
|
-
if (position.includes('
|
|
104
|
+
if (position.includes('left')) parsedPosition.x = 'left';
|
|
105
105
|
if (position.includes('bottom')) parsedPosition.y = 'bottom';
|
|
106
106
|
|
|
107
107
|
return parsedPosition;
|
package/test/src/index.html
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<body>
|
|
12
12
|
<div class="wrapper">
|
|
13
13
|
<h1>Perfect GUI API</h1>
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
<h2>Basics</h2>
|
|
16
16
|
|
|
17
17
|
<div id="container-1" class="container">
|
|
@@ -134,14 +134,14 @@
|
|
|
134
134
|
|
|
135
135
|
<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>
|
|
136
136
|
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'GUI 3'</span><span style="color: #f8f8f2">,</span>
|
|
137
|
-
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'top
|
|
137
|
+
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'top left'</span>
|
|
138
138
|
<span style="color: #f8f8f2">});</span>
|
|
139
139
|
|
|
140
140
|
<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">'Button'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=></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>
|
|
141
141
|
|
|
142
142
|
<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>
|
|
143
143
|
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'GUI 4'</span><span style="color: #f8f8f2">,</span>
|
|
144
|
-
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'right
|
|
144
|
+
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'bottom right'</span>
|
|
145
145
|
<span style="color: #f8f8f2">});</span>
|
|
146
146
|
|
|
147
147
|
<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">'Button'</span><span style="color: #f8f8f2">,</span> <span style="color: #f8f8f2">()</span> <span style="color: #f92672">=></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>
|
|
@@ -261,7 +261,8 @@
|
|
|
261
261
|
<span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">[</span><span style="color: #a6e22e">guis</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">length</span><span style="color: #f8f8f2">]</span> <span style="color: #f92672">=</span> <span style="color: #66d9ef">new</span> <span style="color: #a6e22e">GUI</span><span style="color: #f8f8f2">({</span>
|
|
262
262
|
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Created GUI'</span><span style="color: #f8f8f2">,</span>
|
|
263
263
|
<span style="color: #a6e22e">position</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'bottom left'</span><span style="color: #f8f8f2">,</span>
|
|
264
|
-
<span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span>
|
|
264
|
+
<span style="color: #a6e22e">width</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">150</span><span style="color: #f8f8f2">,</span>
|
|
265
|
+
<span style="color: #a6e22e">color</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">'red'</span>
|
|
265
266
|
<span style="color: #f8f8f2">});</span>
|
|
266
267
|
<span style="color: #f8f8f2">});</span>
|
|
267
268
|
|
package/test/src/js/demo.js
CHANGED
|
@@ -13,7 +13,6 @@ export default function()
|
|
|
13
13
|
name: 'Control panel'
|
|
14
14
|
});
|
|
15
15
|
|
|
16
|
-
|
|
17
16
|
gui.button("Randomize color", () => {
|
|
18
17
|
element.style.backgroundColor = get_random_color();
|
|
19
18
|
});
|
|
@@ -62,5 +61,5 @@ export default function()
|
|
|
62
61
|
x: {min: -10, max: 10, object: position, prop: 'x'},
|
|
63
62
|
y: {min: -10, max: 10, object: position, prop: 'y'},
|
|
64
63
|
}, () => {});
|
|
65
|
-
gui2.
|
|
64
|
+
gui2.color('Color', '#ffd170', () => {});
|
|
66
65
|
}
|