perfect-gui 3.1.0 → 3.3.0
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 +15 -2
- package/package.json +1 -1
- package/src/index.js +23 -13
- package/src/styles.js +1 -0
- package/test/src/index.html +16 -8
- package/test/src/js/basics.js +2 -4
- package/test/src/js/folders.js +1 -1
- package/test/src/js/other.js +18 -1
- package/test/src/styles/main.scss +4 -0
package/README.md
CHANGED
|
@@ -93,14 +93,27 @@ gui.image('Click this', 'path/to/image', () => {
|
|
|
93
93
|
// Simple slider, only returns a value to the callback
|
|
94
94
|
// min and max parameters are optional, default is 0 (min) and 1 (max)
|
|
95
95
|
// step parameter is optional, default is (max - min) * 0.01
|
|
96
|
-
gui.slider(
|
|
96
|
+
gui.slider({
|
|
97
|
+
name: 'Slide this',
|
|
98
|
+
value: 5,
|
|
99
|
+
min: 0, // default is 0
|
|
100
|
+
max: 10, // default is 1
|
|
101
|
+
step: .1 // default is (max - min) * 0.01
|
|
102
|
+
}, value => { // optional callback
|
|
97
103
|
console.log('Slider value : ' + value);
|
|
98
104
|
});
|
|
99
105
|
|
|
100
106
|
// Object-based slider, automatically updates the value of the object property.
|
|
101
107
|
// Directly updating the property will also update the slider.
|
|
102
108
|
// callback is optional
|
|
103
|
-
gui.slider(
|
|
109
|
+
gui.slider({
|
|
110
|
+
name 'Slide this',
|
|
111
|
+
object: foo,
|
|
112
|
+
prop: 'bar',
|
|
113
|
+
min: 0,
|
|
114
|
+
max: 10,
|
|
115
|
+
step: .1
|
|
116
|
+
});
|
|
104
117
|
```
|
|
105
118
|
</td></tr>
|
|
106
119
|
<tr><td>toggle</td><td>
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export default class GUI {
|
|
|
29
29
|
}
|
|
30
30
|
this.instanceId = GUI[GUI.instanceCounter];
|
|
31
31
|
|
|
32
|
-
this.wrapperWidth =
|
|
32
|
+
this.wrapperWidth = options.width || 290;
|
|
33
33
|
this.stylesheet = document.createElement('style');
|
|
34
34
|
this.stylesheet.setAttribute('type', 'text/css');
|
|
35
35
|
this.stylesheet.setAttribute('id', 'lm-gui-stylesheet');
|
|
@@ -60,8 +60,18 @@ export default class GUI {
|
|
|
60
60
|
this.position = {prevX:this.xOffset, prevY:this.yOffset, x:this.xOffset, y:this.yOffset};
|
|
61
61
|
|
|
62
62
|
let verticalCSSPositioning = this.screenCorner.y == 'top' ? '' : 'top: auto; bottom: 0;';
|
|
63
|
+
if ( options.maxHeight ) {
|
|
64
|
+
this.maxHeight = options.maxHeight;
|
|
65
|
+
} else {
|
|
66
|
+
this.maxHeight = Math.min(this.container.clientHeight, window.innerHeight)
|
|
67
|
+
}
|
|
68
|
+
window.addEventListener('resize', () => {
|
|
69
|
+
this.maxHeight = Math.min(options.maxHeight || '', Math.min(this.container.clientHeight, window.innerHeight));
|
|
70
|
+
});
|
|
63
71
|
this._addStyles(`#p-gui-${this.instanceId} {
|
|
64
72
|
width: ${this.wrapperWidth}px;
|
|
73
|
+
max-height: ${this.maxHeight}px;
|
|
74
|
+
overflow: scroll;
|
|
65
75
|
transform: translate3d(${this.xOffset}px,${this.yOffset}px,0);
|
|
66
76
|
${verticalCSSPositioning}
|
|
67
77
|
}`);
|
|
@@ -220,28 +230,28 @@ export default class GUI {
|
|
|
220
230
|
image.onclick = () => params.callback({ path: params.path, text: params.text });
|
|
221
231
|
}
|
|
222
232
|
|
|
223
|
-
slider (
|
|
233
|
+
slider (params, callback) {
|
|
224
234
|
let isObject = false;
|
|
225
235
|
let propReferenceIndex = null;
|
|
226
236
|
let object;
|
|
227
237
|
let prop;
|
|
228
238
|
|
|
229
|
-
const min =
|
|
230
|
-
const max =
|
|
231
|
-
const step =
|
|
239
|
+
const min = params.min ?? 0;
|
|
240
|
+
const max = params.max ?? 1;
|
|
241
|
+
const step = params.step || (max - min) / 100;
|
|
232
242
|
|
|
233
|
-
if ( typeof
|
|
243
|
+
if ( typeof params.value == 'number' ) {
|
|
234
244
|
this._checkMandatoryParams({
|
|
235
245
|
value: 'number'
|
|
236
|
-
},
|
|
246
|
+
}, params);
|
|
237
247
|
} else {
|
|
238
248
|
this._checkMandatoryParams({
|
|
239
249
|
object: 'object',
|
|
240
250
|
prop: 'string'
|
|
241
|
-
},
|
|
251
|
+
}, params);
|
|
242
252
|
|
|
243
|
-
object =
|
|
244
|
-
prop =
|
|
253
|
+
object = params.object;
|
|
254
|
+
prop = params.prop;
|
|
245
255
|
propReferenceIndex = this.propReferences.push(object[prop]) - 1;
|
|
246
256
|
isObject = true;
|
|
247
257
|
}
|
|
@@ -250,7 +260,7 @@ export default class GUI {
|
|
|
250
260
|
|
|
251
261
|
var container = this._createElement({
|
|
252
262
|
class: 'p-gui__slider',
|
|
253
|
-
textContent:
|
|
263
|
+
textContent: params.name || prop
|
|
254
264
|
});
|
|
255
265
|
|
|
256
266
|
var slider_ctrl = this._createElement({
|
|
@@ -262,14 +272,14 @@ export default class GUI {
|
|
|
262
272
|
min,
|
|
263
273
|
max,
|
|
264
274
|
step,
|
|
265
|
-
value: isObject ? object[prop] :
|
|
275
|
+
value: isObject ? object[prop] : params.value
|
|
266
276
|
}
|
|
267
277
|
});
|
|
268
278
|
|
|
269
279
|
var slider_value = this._createElement({
|
|
270
280
|
parent: container,
|
|
271
281
|
class: 'p-gui__slider-value',
|
|
272
|
-
textContent: isObject ? String(object[prop]) : String(
|
|
282
|
+
textContent: isObject ? String(object[prop]) : String(params.value)
|
|
273
283
|
});
|
|
274
284
|
|
|
275
285
|
slider_ctrl.addEventListener('input', () => {
|
package/src/styles.js
CHANGED
package/test/src/index.html
CHANGED
|
@@ -31,14 +31,21 @@
|
|
|
31
31
|
|
|
32
32
|
<span style="color: #a6e22e">gui</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: #a6e22e">changeColor</span><span style="color: #f8f8f2">);</span>
|
|
33
33
|
|
|
34
|
-
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span
|
|
35
|
-
<span style="color: #
|
|
36
|
-
<span style="color: #a6e22e">value</span
|
|
37
|
-
<span style="color: #f8f8f2">
|
|
34
|
+
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">({</span>
|
|
35
|
+
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Slider (simple callback)'</span><span style="color: #f8f8f2">,</span>
|
|
36
|
+
<span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span><span style="color: #f8f8f2">,</span>
|
|
37
|
+
<span style="color: #f8f8f2">},</span> <span style="color: #a6e22e">value</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
38
|
+
<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">opacity</span> <span style="color: #f92672">=</span> <span style="color: #a6e22e">value</span>
|
|
39
|
+
<span style="color: #f8f8f2">});</span>
|
|
38
40
|
|
|
39
|
-
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span
|
|
40
|
-
<span style="color: #
|
|
41
|
-
<span style="color: #
|
|
41
|
+
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">({</span>
|
|
42
|
+
<span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Slider 2 (object binding)'</span><span style="color: #f8f8f2">,</span>
|
|
43
|
+
<span style="color: #a6e22e">object</span><span style="color: #f92672">:</span> <span style="color: #a6e22e">position</span><span style="color: #f8f8f2">,</span>
|
|
44
|
+
<span style="color: #a6e22e">prop</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'x'</span><span style="color: #f8f8f2">,</span>
|
|
45
|
+
<span style="color: #a6e22e">min</span><span style="color: #f92672">:</span> <span style="color: #f92672">-</span><span style="color: #ae81ff">30</span><span style="color: #f8f8f2">,</span>
|
|
46
|
+
<span style="color: #a6e22e">max</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">30</span><span style="color: #f8f8f2">,</span>
|
|
47
|
+
<span style="color: #a6e22e">step</span><span style="color: #f92672">:</span> <span style="color: #f8f8f2">.</span><span style="color: #ae81ff">1</span>
|
|
48
|
+
<span style="color: #f8f8f2">});</span>
|
|
42
49
|
|
|
43
50
|
<span style="color: #a6e22e">gui</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">toggle</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'Switch'</span><span style="color: #f8f8f2">,</span> <span style="color: #66d9ef">true</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">state</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
44
51
|
<span style="color: #66d9ef">if</span> <span style="color: #f8f8f2">(</span> <span style="color: #a6e22e">state</span> <span style="color: #f8f8f2">)</span> <span style="color: #a6e22e">element</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">classList</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">remove</span><span style="color: #f8f8f2">(</span><span style="color: #e6db74">'round'</span><span style="color: #f8f8f2">);</span>
|
|
@@ -169,7 +176,7 @@
|
|
|
169
176
|
<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>
|
|
170
177
|
<span style="color: #f8f8f2">});</span>
|
|
171
178
|
|
|
172
|
-
<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">(</span
|
|
179
|
+
<span style="color: #a6e22e">folder_1</span><span style="color: #f8f8f2">.</span><span style="color: #a6e22e">slider</span><span style="color: #f8f8f2">({</span> <span style="color: #a6e22e">name</span><span style="color: #f92672">:</span> <span style="color: #e6db74">'Size'</span><span style="color: #f8f8f2">,</span> <span style="color: #a6e22e">value</span><span style="color: #f92672">:</span> <span style="color: #ae81ff">1</span> <span style="color: #f8f8f2">},</span> <span style="color: #a6e22e">value</span> <span style="color: #f92672">=></span> <span style="color: #f8f8f2">{</span>
|
|
173
180
|
<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">transform</span> <span style="color: #f92672">=</span> <span style="color: #960050; background-color: #1e0010">`</span><span style="color: #a6e22e">scale</span><span style="color: #f8f8f2">(</span><span style="color: #a6e22e">$</span><span style="color: #f8f8f2">{</span><span style="color: #a6e22e">value</span><span style="color: #f8f8f2">})</span><span style="color: #960050; background-color: #1e0010">`</span><span style="color: #f8f8f2">;</span>
|
|
174
181
|
<span style="color: #f8f8f2">});</span>
|
|
175
182
|
|
|
@@ -188,6 +195,7 @@
|
|
|
188
195
|
<p>They can also have a custom width, by using the <span class="code-inline">width</span> option.</p>
|
|
189
196
|
<p>The <span class="code-inline">toggleClose()</span> method can be used to open / close a GUI panel.</p>
|
|
190
197
|
<p>Just like folders, GUI panels can be closed by default by setting the <span class="code-inline">close</span> option to <span class="code-inline">true</span>.</p>
|
|
198
|
+
<p>The <span class="code-inline">maxHeight</span> option can be used to define the maximum height of a panel beyond which scrolling is necessary. Default is the smallest value between the height of the window and the height of the container.</p>
|
|
191
199
|
|
|
192
200
|
<div id="container-4" class="container"></div>
|
|
193
201
|
|
package/test/src/js/basics.js
CHANGED
|
@@ -18,15 +18,13 @@ export default function basics() {
|
|
|
18
18
|
element.style.backgroundImage = 'none';
|
|
19
19
|
});
|
|
20
20
|
|
|
21
|
-
gui.slider('Slider (simple callback)',
|
|
22
|
-
{ value: 1 },
|
|
21
|
+
gui.slider({ name: 'Slider (simple callback)', value: 1 },
|
|
23
22
|
value => {
|
|
24
23
|
element.style.opacity = value;
|
|
25
24
|
}
|
|
26
25
|
);
|
|
27
26
|
|
|
28
|
-
gui.slider('Slider 2 (object binding)',
|
|
29
|
-
{ object: position, prop: 'x', min: -30, max: 30, step: .1 }
|
|
27
|
+
gui.slider({ name: 'Slider 2 (object binding)', object: position, prop: 'x', min: -30, max: 30, step: .1 }
|
|
30
28
|
);
|
|
31
29
|
|
|
32
30
|
gui.toggle('Switch', true, state => {
|
package/test/src/js/folders.js
CHANGED
|
@@ -15,7 +15,7 @@ export default function folders() {
|
|
|
15
15
|
element.style.backgroundColor = getRandomColor();
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
-
folder_1.slider('Size',
|
|
18
|
+
folder_1.slider({ name: 'Size', value: 1 }, value => {
|
|
19
19
|
element.style.transform = `scale(${value})`;
|
|
20
20
|
});
|
|
21
21
|
|
package/test/src/js/other.js
CHANGED
|
@@ -26,11 +26,28 @@ export default function other() {
|
|
|
26
26
|
|
|
27
27
|
const gui_3 = new GUI({
|
|
28
28
|
container,
|
|
29
|
-
name: 'GUI 3 (closed)',
|
|
29
|
+
name: 'GUI 3 (closed, scrollable)',
|
|
30
30
|
closed: true,
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
gui_3.button('gui_2.toggleClose();', () => {
|
|
34
34
|
gui_2.toggleClose();
|
|
35
35
|
});
|
|
36
|
+
|
|
37
|
+
gui_3.button('lorem', () => {});
|
|
38
|
+
gui_3.button('ipsum', () => {});
|
|
39
|
+
gui_3.button('dolor', () => {});
|
|
40
|
+
gui_3.button('sit', () => {});
|
|
41
|
+
gui_3.button('amet', () => {});
|
|
42
|
+
gui_3.button('lorem', () => {});
|
|
43
|
+
gui_3.button('ipsum', () => {});
|
|
44
|
+
let f = gui_3.folder('dolor');
|
|
45
|
+
f.button('dolor', () => {});
|
|
46
|
+
f.button('dolor', () => {});
|
|
47
|
+
f.button('dolor', () => {});
|
|
48
|
+
gui_3.button('sit', () => {});
|
|
49
|
+
gui_3.button('amet', () => {});
|
|
50
|
+
gui_3.button('lorem', () => {});
|
|
51
|
+
gui_3.button('ipsum', () => {});
|
|
52
|
+
gui_3.button('ipsum', () => {});
|
|
36
53
|
}
|