gui.add

use gui.add for CustomController

build/dat.gui.js

@@ -1536,6 +1536,17 @@ function hueGradient(elem) {
     elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
 }
 
+var CustomController = function (_Controller) {
+  inherits(CustomController, _Controller);
+  function CustomController(object, property) {
+    classCallCheck(this, CustomController);
+    var _this = possibleConstructorReturn(this, (CustomController.__proto__ || Object.getPrototypeOf(CustomController)).call(this, object, property));
+    object.constructor(_this);
+    return _this;
+  }
+  return CustomController;
+}(Controller);
+
 var css = {
   load: function load(url, indoc) {
     var doc = indoc || document;
@@ -1913,6 +1924,7 @@ var GUI = function GUI(pars) {
     resetWidth();
   }
 };
+GUI.CustomController = CustomController;
 GUI.toggleHide = function () {
   hide = !hide;
   Common.each(hideableGuis, function (gui) {
@@ -1942,6 +1954,7 @@ Common.extend(GUI.prototype,
 {
   add: function add(object, property) {
     return _add(this, object, property, {
+      custom: object instanceof CustomController,
       factoryArgs: Array.prototype.slice.call(arguments, 2)
     });
   },
@@ -1950,6 +1963,12 @@ Common.extend(GUI.prototype,
       color: true
     });
   },
+  addCustomController: function addCustomController(object, property) {
+    return _add(this, object, property, {
+      custom: true,
+      factoryArgs: Array.prototype.slice.call(arguments, 2)
+    });
+  },
   remove: function remove(controller) {
     this.__ul.removeChild(controller.__li);
     this.__controllers.splice(this.__controllers.indexOf(controller), 1);
@@ -2299,14 +2318,18 @@ function recallSavedValue(gui, controller) {
   }
 }
 function _add(gui, object, property, params) {
-  if (object[property] === undefined) {
+  if (!object instanceof CustomController && !params.custom && object[property] === undefined) {
     throw new Error('Object "' + object + '" has no property "' + property + '"');
   }
   var controller = void 0;
   if (params.color) {
     controller = new ColorController(object, property);
+  } else if (object instanceof CustomController && property === undefined) {
+    controller = object;
+  } else if (!(object instanceof CustomController) && params.custom && object[property] === undefined) {
+    controller = new CustomController(object, property);
   } else {
-    var factoryArgs = [object, property].concat(params.factoryArgs);
+    var factoryArgs = object instanceof CustomController ? [property].concat(params.factoryArgs) : [object, property].concat(params.factoryArgs);
     controller = ControllerFactory.apply(gui, factoryArgs);
   }
   if (params.before instanceof Controller) {
@@ -2314,10 +2337,10 @@ function _add(gui, object, property, params) {
   }
   recallSavedValue(gui, controller);
   dom.addClass(controller.domElement, 'c');
-  var name = document.createElement('span');
-  dom.addClass(name, 'property-name');
-  name.innerHTML = controller.property;
   var container = document.createElement('div');
+  var name = params.custom && controller instanceof CustomController === false ? object instanceof CustomController ? object.domElement : new CustomController(object).domElement : document.createElement('span');
+  if (!params.custom) name.innerHTML = controller.property;
+  dom.addClass(name, 'property-name');
   container.appendChild(name);
   container.appendChild(controller.domElement);
   var li = addRow(gui, container, params.before);
@@ -2511,7 +2534,8 @@ var controllers = {
   NumberControllerBox: NumberControllerBox,
   NumberControllerSlider: NumberControllerSlider,
   FunctionController: FunctionController,
-  ColorController: ColorController
+  ColorController: ColorController,
+  CustomController: CustomController
 };
 var dom$1 = { dom: dom };
 var gui = { GUI: GUI };

build/dat.gui.module.js

@@ -1530,6 +1530,17 @@ function hueGradient(elem) {
     elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
 }
 
+var CustomController = function (_Controller) {
+  inherits(CustomController, _Controller);
+  function CustomController(object, property) {
+    classCallCheck(this, CustomController);
+    var _this = possibleConstructorReturn(this, (CustomController.__proto__ || Object.getPrototypeOf(CustomController)).call(this, object, property));
+    object.constructor(_this);
+    return _this;
+  }
+  return CustomController;
+}(Controller);
+
 var css = {
   load: function load(url, indoc) {
     var doc = indoc || document;
@@ -1907,6 +1918,7 @@ var GUI = function GUI(pars) {
     resetWidth();
   }
 };
+GUI.CustomController = CustomController;
 GUI.toggleHide = function () {
   hide = !hide;
   Common.each(hideableGuis, function (gui) {
@@ -1936,6 +1948,7 @@ Common.extend(GUI.prototype,
 {
   add: function add(object, property) {
     return _add(this, object, property, {
+      custom: object instanceof CustomController,
       factoryArgs: Array.prototype.slice.call(arguments, 2)
     });
   },
@@ -1944,6 +1957,12 @@ Common.extend(GUI.prototype,
       color: true
     });
   },
+  addCustomController: function addCustomController(object, property) {
+    return _add(this, object, property, {
+      custom: true,
+      factoryArgs: Array.prototype.slice.call(arguments, 2)
+    });
+  },
   remove: function remove(controller) {
     this.__ul.removeChild(controller.__li);
     this.__controllers.splice(this.__controllers.indexOf(controller), 1);
@@ -2293,14 +2312,18 @@ function recallSavedValue(gui, controller) {
   }
 }
 function _add(gui, object, property, params) {
-  if (object[property] === undefined) {
+  if (!object instanceof CustomController && !params.custom && object[property] === undefined) {
     throw new Error('Object "' + object + '" has no property "' + property + '"');
   }
   var controller = void 0;
   if (params.color) {
     controller = new ColorController(object, property);
+  } else if (object instanceof CustomController && property === undefined) {
+    controller = object;
+  } else if (!(object instanceof CustomController) && params.custom && object[property] === undefined) {
+    controller = new CustomController(object, property);
   } else {
-    var factoryArgs = [object, property].concat(params.factoryArgs);
+    var factoryArgs = object instanceof CustomController ? [property].concat(params.factoryArgs) : [object, property].concat(params.factoryArgs);
     controller = ControllerFactory.apply(gui, factoryArgs);
   }
   if (params.before instanceof Controller) {
@@ -2308,10 +2331,10 @@ function _add(gui, object, property, params) {
   }
   recallSavedValue(gui, controller);
   dom.addClass(controller.domElement, 'c');
-  var name = document.createElement('span');
-  dom.addClass(name, 'property-name');
-  name.innerHTML = controller.property;
   var container = document.createElement('div');
+  var name = params.custom && controller instanceof CustomController === false ? object instanceof CustomController ? object.domElement : new CustomController(object).domElement : document.createElement('span');
+  if (!params.custom) name.innerHTML = controller.property;
+  dom.addClass(name, 'property-name');
   container.appendChild(name);
   container.appendChild(controller.domElement);
   var li = addRow(gui, container, params.before);
@@ -2505,7 +2528,8 @@ var controllers = {
   NumberControllerBox: NumberControllerBox,
   NumberControllerSlider: NumberControllerSlider,
   FunctionController: FunctionController,
-  ColorController: ColorController
+  ColorController: ColorController,
+  CustomController: CustomController
 };
 var dom$1 = { dom: dom };
 var gui = { GUI: GUI };

src/dat/gui/GUI.js

@@ -456,6 +456,8 @@ const GUI = function(pars) {
   }
 };
 
+GUI.CustomController = CustomController;
+
 GUI.toggleHide = function() {
   hide = !hide;
   common.each(hideableGuis, function(gui) {
@@ -521,6 +523,7 @@ common.extend(
         object,
         property,
         {
+          custom: object instanceof CustomController,
           factoryArgs: Array.prototype.slice.call(arguments, 2)
         }
       );
@@ -1153,7 +1156,7 @@ function recallSavedValue(gui, controller) {
 }
 
 function add(gui, object, property, params) {
-  if (!params.custom && (object[property] === undefined)) {
+  if (!object instanceof CustomController && !params.custom && (object[property] === undefined)) {
     throw new Error(`Object "${object}" has no property "${property}"`);
   }
 
@@ -1161,10 +1164,13 @@ function add(gui, object, property, params) {
 
   if (params.color) {
     controller = new ColorController(object, property);
-  } else if (params.custom && (object[property] === undefined)) {
+  } else if(object instanceof CustomController && ( property === undefined )){
+  	controller = object;
+  } else if (!(object instanceof CustomController) && params.custom && (object[property] === undefined)) {
   	controller = new CustomController(object, property);
-  } else {
+  }else {
-    const factoryArgs = [object, property].concat(params.factoryArgs);
+  	const factoryArgs = object instanceof CustomController ?
+      [property].concat(params.factoryArgs) : [object, property].concat(params.factoryArgs);
     controller = ControllerFactory.apply(gui, factoryArgs);
   }
 
@@ -1178,7 +1184,8 @@ function add(gui, object, property, params) {
 
   const container = document.createElement('div');
 
-  const name = params.custom && ( controller instanceof CustomController === false ) ? new CustomController(object).domElement : document.createElement('span');
+  const name = params.custom && ( controller instanceof CustomController === false ) ?
+    ( object instanceof CustomController ? object.domElement : new CustomController(object).domElement ) : document.createElement('span');
   if (!params.custom)
   	name.innerHTML = controller.property;
   dom.addClass(name, 'property-name');