From 3e71a59079e5a6a82e173a23f93abfa656508672 Mon Sep 17 00:00:00 2001 From: Degubi Date: Tue, 6 Jun 2023 09:20:47 +0200 Subject: [PATCH 1/5] Add functionality to disable folders --- src/GUI.js | 43 +++++++++++++++++++++++++++++++++++++++++++ style/base.scss | 7 +++++++ 2 files changed, 50 insertions(+) diff --git a/src/GUI.js b/src/GUI.js index 1414143..449d68c 100644 --- a/src/GUI.js +++ b/src/GUI.js @@ -90,6 +90,12 @@ export default class GUI { */ this.folders = []; + /** + * Used to determine if the GUI is disabled. * Use `gui.disable( true|false )` to modify this value. + * @type {boolean} + */ + this._disabled = false; + /** * Used to determine if the GUI is closed. Use `gui.open()` or `gui.close()` to change this. * @type {boolean} @@ -394,6 +400,43 @@ export default class GUI { } + /** + * Enables this GUI. + * @param {boolean} enabled + * @returns {this} + * @example + * gui.enable(); + * gui.enable( false ); // disable + * gui.enable( gui._disabled ); // toggle + */ + enable( enabled = true ) { + return this.disable( !enabled ); + } + + /** + * Disables this GUI. + * @param {boolean} disabled + * @returns {this} + * @example + * gui.disable(); + * gui.disable( false ); // enable + * gui.disable( !gui._disabled ); // toggle + */ + disable( disabled = true ) { + + if ( disabled === this._disabled ) return this; + + this._disabled = disabled; + + this.domElement.classList.toggle( 'disabled', disabled ); + this.domElement.toggleAttribute( 'disabled', disabled ); + + if ( !disabled ) this.close(); + + return this; + + } + /** * Closes the GUI. * @returns {this} diff --git a/style/base.scss b/style/base.scss index b6f0c1a..2c0c7b5 100644 --- a/style/base.scss +++ b/style/base.scss @@ -62,6 +62,13 @@ } } + &.disabled { + opacity: 0.5; + &, & * { + pointer-events: none !important; + } + } + // "Theme" properties // ------------------------------------------------------------------------- From 2466b0bca104e5263232d5c19289bed96dc5141a Mon Sep 17 00:00:00 2001 From: Degubi Date: Tue, 20 Jun 2023 17:40:35 +0200 Subject: [PATCH 2/5] Share some code between Controller.js & GUI.js This commit adds a new file: utils/guiUtils.js It contains 2 functions: disableGui & showGui Previously these 2 functions were copy pasted between Controller.js & GUI.js. Now they share the implementation. --- src/Controller.js | 21 ++++----------------- src/GUI.js | 22 ++++------------------ src/utils/guiUtils.js | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 35 deletions(-) create mode 100644 src/utils/guiUtils.js diff --git a/src/Controller.js b/src/Controller.js index c196471..67fe3ba 100644 --- a/src/Controller.js +++ b/src/Controller.js @@ -1,5 +1,7 @@ /** @module Controller */ +import { disableGui, showGui } from './utils/guiUtils'; + /** * Base class for all controllers. */ @@ -227,16 +229,7 @@ export default class Controller { * controller.disable( !controller._disabled ); // toggle */ disable( disabled = true ) { - - if ( disabled === this._disabled ) return this; - - this._disabled = disabled; - - this.domElement.classList.toggle( 'disabled', disabled ); - this.$disable.toggleAttribute( 'disabled', disabled ); - - return this; - + return disableGui( this, disabled ); } /** @@ -249,13 +242,7 @@ export default class Controller { * controller.show( controller._hidden ); // toggle */ show( show = true ) { - - this._hidden = !show; - - this.domElement.style.display = this._hidden ? 'none' : ''; - - return this; - + return showGui( this, show ); } /** diff --git a/src/GUI.js b/src/GUI.js index 449d68c..6d10b22 100644 --- a/src/GUI.js +++ b/src/GUI.js @@ -10,6 +10,7 @@ import StringController from './StringController'; import stylesheet from 'stylesheet'; import _injectStyles from './utils/injectStyles'; +import { disableGui, showGui } from './utils/guiUtils'; let stylesInjected = false; @@ -423,18 +424,9 @@ export default class GUI { * gui.disable( !gui._disabled ); // toggle */ disable( disabled = true ) { + if ( disabled ) this.close(); - if ( disabled === this._disabled ) return this; - - this._disabled = disabled; - - this.domElement.classList.toggle( 'disabled', disabled ); - this.domElement.toggleAttribute( 'disabled', disabled ); - - if ( !disabled ) this.close(); - - return this; - + return disableGui( this, disabled ); } /** @@ -461,13 +453,7 @@ export default class GUI { * gui.show( gui._hidden ); // toggle */ show( show = true ) { - - this._hidden = !show; - - this.domElement.style.display = this._hidden ? 'none' : ''; - - return this; - + return showGui( this, show ); } /** diff --git a/src/utils/guiUtils.js b/src/utils/guiUtils.js new file mode 100644 index 0000000..c3e05d6 --- /dev/null +++ b/src/utils/guiUtils.js @@ -0,0 +1,33 @@ + +/** + * Helper for disabling a GUI or a Controller + * @template {{ _disabled: boolean, domElement: HTMLElement }} GUI + * @param { GUI } gui + * @param { boolean } disabled + * @returns { GUI } + */ +export function disableGui( gui, disabled ) { + if ( disabled === gui._disabled ) return gui; + + gui._disabled = disabled; + + gui.domElement.classList.toggle( 'disabled', disabled ); + gui.domElement.toggleAttribute( 'disabled', disabled ); + + return gui; +} + +/** + * Helper for showing a GUI or a Controller + * @template {{ _hidden: boolean, domElement: HTMLElement }} GUI + * @param { GUI } gui + * @param { boolean } show + * @returns { GUI } + */ +export function showGui( gui, show ) { + gui._hidden = !show; + + gui.domElement.style.display = gui._hidden ? 'none' : ''; + + return gui; +} From 0edbc93188ee02af08463e7dd8d72e32bd1ef7de Mon Sep 17 00:00:00 2001 From: Degubi Date: Mon, 31 Jul 2023 09:37:02 +0200 Subject: [PATCH 3/5] Share disabled styles between base & controller.scss --- style/base.scss | 9 +++------ style/controllers.scss | 9 ++------- style/hierarchy.scss | 2 +- style/inputs.scss | 2 +- style/{hover.scss => shared.scss} | 9 +++++++++ 5 files changed, 16 insertions(+), 15 deletions(-) rename style/{hover.scss => shared.scss} (58%) diff --git a/style/base.scss b/style/base.scss index 2c0c7b5..0c8fcd8 100644 --- a/style/base.scss +++ b/style/base.scss @@ -1,3 +1,5 @@ +@import 'shared'; + @mixin touch-vars { @media (pointer: coarse) { @@ -62,12 +64,7 @@ } } - &.disabled { - opacity: 0.5; - &, & * { - pointer-events: none !important; - } - } + @include disabled; // "Theme" properties // ------------------------------------------------------------------------- diff --git a/style/controllers.scss b/style/controllers.scss index ff5df27..0b03a2f 100644 --- a/style/controllers.scss +++ b/style/controllers.scss @@ -1,4 +1,4 @@ -@import 'hover'; +@import 'shared'; .lil-gui { .controller { @@ -7,12 +7,7 @@ padding: 0 var(--padding); margin: var(--spacing) 0; - &.disabled { - opacity: 0.5; - &, & * { - pointer-events: none !important; - } - } + @include disabled; // > is used here to avoid styling FunctionController's .name, // which gets put inside of its widget. diff --git a/style/hierarchy.scss b/style/hierarchy.scss index f865da8..9d2ea0c 100644 --- a/style/hierarchy.scss +++ b/style/hierarchy.scss @@ -1,4 +1,4 @@ -@import 'hover'; +@import 'shared'; .lil-gui { .title { diff --git a/style/inputs.scss b/style/inputs.scss index 8291151..6e6c08d 100644 --- a/style/inputs.scss +++ b/style/inputs.scss @@ -1,4 +1,4 @@ -@import 'hover'; +@import 'shared'; .lil-gui { input { diff --git a/style/hover.scss b/style/shared.scss similarity index 58% rename from style/hover.scss rename to style/shared.scss index 5d65957..8c68d06 100644 --- a/style/hover.scss +++ b/style/shared.scss @@ -13,3 +13,12 @@ } } } + +@mixin disabled { + &.disabled { + opacity: 0.5; + &, & * { + pointer-events: none !important; + } + } +} From f74323cc6e46502178b8e24eef135913ca865ca1 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Sun, 13 Aug 2023 09:49:13 -0400 Subject: [PATCH 4/5] kitchen sink test for gui.disable --- examples/kitchen-sink/kitchen-sink.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/examples/kitchen-sink/kitchen-sink.js b/examples/kitchen-sink/kitchen-sink.js index d4346f2..e1adab7 100644 --- a/examples/kitchen-sink/kitchen-sink.js +++ b/examples/kitchen-sink/kitchen-sink.js @@ -176,7 +176,7 @@ function getDepth( g ) { return depth; } -make( { title: 'Disable' }, gui => { +make( { title: 'Disable Controllers' }, gui => { gui.add( { Number: 0 }, 'Number' ).disable().enable(); gui.add( { Number: 0 }, 'Number' ).disable(); @@ -199,6 +199,15 @@ make( { title: 'Disable' }, gui => { gui.addColor( { Color: 0xaa00ff }, 'Color' ).disable().enable(); gui.addColor( { Color: 0xaa00ff }, 'Color' ).disable(); + const folder = gui.addFolder( 'Disable Folders' ); + folder.add( { Number: 0 }, 'Number' ); + folder.disable(); + +} ); + +make( { title: 'Disable Root' }, gui => { + gui.add( { Number: 0 }, 'Number' ); + gui.disable(); } ); make( { title: 'Listen' }, gui => { From 1a6cc13e8b6badd102b13190eaafdc71967a24dc Mon Sep 17 00:00:00 2001 From: Degubi Date: Wed, 13 Sep 2023 09:41:43 +0200 Subject: [PATCH 5/5] Some changes based on feedback --- src/Controller.js | 6 +++--- src/GUI.js | 6 +++--- src/utils/guiUtils.js | 33 --------------------------------- src/utils/itemUtils.js | 18 ++++++++++++++++++ style/base.scss | 2 +- style/controllers.scss | 2 +- style/shared.scss | 2 +- 7 files changed, 27 insertions(+), 42 deletions(-) delete mode 100644 src/utils/guiUtils.js create mode 100644 src/utils/itemUtils.js diff --git a/src/Controller.js b/src/Controller.js index 67fe3ba..2ff1dee 100644 --- a/src/Controller.js +++ b/src/Controller.js @@ -1,6 +1,6 @@ /** @module Controller */ -import { disableGui, showGui } from './utils/guiUtils'; +import { disableItem, showItem } from './utils/itemUtils'; /** * Base class for all controllers. @@ -229,7 +229,7 @@ export default class Controller { * controller.disable( !controller._disabled ); // toggle */ disable( disabled = true ) { - return disableGui( this, disabled ); + return disableItem( this, disabled ); } /** @@ -242,7 +242,7 @@ export default class Controller { * controller.show( controller._hidden ); // toggle */ show( show = true ) { - return showGui( this, show ); + return showItem( this, show ); } /** diff --git a/src/GUI.js b/src/GUI.js index 6d10b22..d4589ec 100644 --- a/src/GUI.js +++ b/src/GUI.js @@ -10,7 +10,7 @@ import StringController from './StringController'; import stylesheet from 'stylesheet'; import _injectStyles from './utils/injectStyles'; -import { disableGui, showGui } from './utils/guiUtils'; +import { disableItem, showItem } from './utils/itemUtils'; let stylesInjected = false; @@ -426,7 +426,7 @@ export default class GUI { disable( disabled = true ) { if ( disabled ) this.close(); - return disableGui( this, disabled ); + return disableItem( this, disabled ); } /** @@ -453,7 +453,7 @@ export default class GUI { * gui.show( gui._hidden ); // toggle */ show( show = true ) { - return showGui( this, show ); + return showItem( this, show ); } /** diff --git a/src/utils/guiUtils.js b/src/utils/guiUtils.js deleted file mode 100644 index c3e05d6..0000000 --- a/src/utils/guiUtils.js +++ /dev/null @@ -1,33 +0,0 @@ - -/** - * Helper for disabling a GUI or a Controller - * @template {{ _disabled: boolean, domElement: HTMLElement }} GUI - * @param { GUI } gui - * @param { boolean } disabled - * @returns { GUI } - */ -export function disableGui( gui, disabled ) { - if ( disabled === gui._disabled ) return gui; - - gui._disabled = disabled; - - gui.domElement.classList.toggle( 'disabled', disabled ); - gui.domElement.toggleAttribute( 'disabled', disabled ); - - return gui; -} - -/** - * Helper for showing a GUI or a Controller - * @template {{ _hidden: boolean, domElement: HTMLElement }} GUI - * @param { GUI } gui - * @param { boolean } show - * @returns { GUI } - */ -export function showGui( gui, show ) { - gui._hidden = !show; - - gui.domElement.style.display = gui._hidden ? 'none' : ''; - - return gui; -} diff --git a/src/utils/itemUtils.js b/src/utils/itemUtils.js new file mode 100644 index 0000000..3674bbd --- /dev/null +++ b/src/utils/itemUtils.js @@ -0,0 +1,18 @@ +export function disableItem( item, disabled ) { + if ( disabled === item._disabled ) return item; + + item._disabled = disabled; + + item.domElement.classList.toggle( 'disabled', disabled ); + item.domElement.toggleAttribute( 'disabled', disabled ); + + return item; +} + +export function showItem( item, show ) { + item._hidden = !show; + + item.domElement.style.display = item._hidden ? 'none' : ''; + + return item; +} diff --git a/style/base.scss b/style/base.scss index 0c8fcd8..d55abc9 100644 --- a/style/base.scss +++ b/style/base.scss @@ -64,7 +64,7 @@ } } - @include disabled; + @include can-disable; // "Theme" properties // ------------------------------------------------------------------------- diff --git a/style/controllers.scss b/style/controllers.scss index 0b03a2f..3f122ab 100644 --- a/style/controllers.scss +++ b/style/controllers.scss @@ -7,7 +7,7 @@ padding: 0 var(--padding); margin: var(--spacing) 0; - @include disabled; + @include can-disable; // > is used here to avoid styling FunctionController's .name, // which gets put inside of its widget. diff --git a/style/shared.scss b/style/shared.scss index 8c68d06..0fe9d62 100644 --- a/style/shared.scss +++ b/style/shared.scss @@ -14,7 +14,7 @@ } } -@mixin disabled { +@mixin can-disable { &.disabled { opacity: 0.5; &, & * {