From 36e1991c9436aa3e8428357a8a1c4ad4266a4802 Mon Sep 17 00:00:00 2001 From: AARON WELLES Date: Thu, 20 Jun 2019 22:23:29 -0400 Subject: [PATCH] Implement .add( controller ) & its use for custom Controllers. See example of a custom controller in example.html. --- example.html | 133 +++++++++++++++++++++++++++++++-------------- src/dat/gui/GUI.js | 31 +++++++---- 2 files changed, 112 insertions(+), 52 deletions(-) diff --git a/example.html b/example.html index 2c3d7c3f..f1a2f770 100644 --- a/example.html +++ b/example.html @@ -1,63 +1,112 @@ + - + + - - + + const api = { + + color: '#ffffff', + value: 0.5, + + }; + + gui.add(new KnobController(api, 'value', 0.5, 25), { + liClass: 'knobby' + }); + - + + \ No newline at end of file diff --git a/src/dat/gui/GUI.js b/src/dat/gui/GUI.js index 972c3073..c88139db 100644 --- a/src/dat/gui/GUI.js +++ b/src/dat/gui/GUI.js @@ -1131,23 +1131,30 @@ function recallSavedValue(gui, controller) { } function add(gui, object, property, params) { - if (object[property] === undefined) { - throw new Error(`Object "${object}" has no property "${property}"`); - } - let controller; + + if (object instanceof Controller) { + controller = object; + params = property || { }; + } else { + + if (object[property] === undefined) { + throw new Error(`Object "${object}" has no property "${property}"`); + } + + if (params.color) { + controller = new ColorController(object, property); + } else { + const factoryArgs = [object, property].concat(params.factoryArgs); + controller = ControllerFactory.apply(gui, factoryArgs); + } - if (params.color) { - controller = new ColorController(object, property); - } else { - const factoryArgs = [object, property].concat(params.factoryArgs); - controller = ControllerFactory.apply(gui, factoryArgs); } if (params.before instanceof Controller) { params.before = params.before.__li; } - + recallSavedValue(gui, controller); dom.addClass(controller.domElement, 'c'); @@ -1165,6 +1172,10 @@ function add(gui, object, property, params) { dom.addClass(li, GUI.CLASS_CONTROLLER_ROW); if (controller instanceof ColorController) { dom.addClass(li, 'color'); + } else if ( params.liClass ) { + dom.addClass(li, params.liClass); + } else if ( controller.liClass ) { + dom.addClass(li, controller.liClass); } else { dom.addClass(li, typeof controller.getValue()); }