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 2c3d7c3..f1a2f77 100644 --- a/example.html +++ b/example.html @@ -1,63 +1,112 @@ + - + + - - + + // alternative StringController add + gui.add(new dat.controllers.StringController(obj, 'message')); + + // a custom controller + class KnobController extends dat.controllers.Controller { + constructor(object, property, a, b) { + super(object, property); + const _this = this; + this.__input = document.createElement('input'); + this.__input.setAttribute('type', 'number'); + this.__input.style.width = '40%'; + this.updateDisplay(); + this.domElement.appendChild(this.__input); + var button = document.createElement('input'); + button.setAttribute('type', 'button'); + button.value = 'Set ' + property; + button.style.width = '50%'; + button.onclick = function(e) { + object[property] = a + b; + _this.updateDisplay(); + }; + this.domElement.appendChild(button); + } + updateDisplay() { + this.__input.value = this.getValue(); + } + } + + 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 972c307..c88139d 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()); }