API

API where custom controllers can be used more similarly to the builtin
controller types.
https://github.com/dataarts/dat.gui/pull/232#discussion_r289620635

src/dat/controllers/CustomController.js

@@ -2,6 +2,8 @@
  * dat-gui JavaScript Controller Library
  * http://code.google.com/p/dat-gui
  *
+ * @author Andrej Hristoliubov https://anhr.github.io/AboutMe/
+ *
  * Copyright 2011 Data Arts Team, Google Creative Lab
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -11,17 +13,27 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import Controller from './Controller';
+import ControllerFactory from './ControllerFactory';
 
 /**
  * @class Represents a custom controller.
- * @param {Function} init callback function for adding of elements into this.domElement
+ *
+ * @extends dat.controllers.Controller
+ *
+ * @param {Object} object The object to be manipulated
+ * @param {Function} [object.property] Returns an object with elements for adding into "property-name" class element.
+ * @param {string} property The name of the property to be manipulated
+ * @param {Object} [params] Optional parameters
  */
 class CustomController extends Controller{
-    constructor(init) {
+	constructor(object, property) {
-    super({});
+    super(object, property);
 
-    init( this );
+    this.arguments = {
-    this.custom = true;
+      object: object, property: property, opts: Array.prototype.slice.call(arguments, 2)
+    }
+    if(object.property)
+      this.property = object.property();
   }
 }
 

src/dat/gui/GUI.js

@@ -521,7 +521,6 @@ common.extend(
         object,
         property,
         {
-          custom: object.custom,
           factoryArgs: Array.prototype.slice.call(arguments, 2)
         }
       );
@@ -559,26 +558,6 @@ common.extend(
     },
 
     /**
-     * Adds a new custom controller to the GUI.
-     *
-     * @param init
-     * @param property
-     * @returns {Controller} The controller that was added to the GUI.
-     * @instance
-     *
-     */
-    addCustomController: function(init, property) {
-    	return add(
-		  this,
-		  new dat.controllers.CustomController( init ),
-		  property,
-		  {
-		  	factoryArgs: Array.prototype.slice.call(arguments, 2)
-		  }
-		);
-    },
-
-  	/**
      * Removes the given controller from the GUI.
      * @param {Controller} controller
      * @instance
@@ -1153,8 +1132,17 @@ function recallSavedValue(gui, controller) {
 }
 
 function add(gui, object, property, params) {
-  var customObject = object.custom;
+  var customObject;
-  if (!customObject && !params.custom && (object[property] === undefined)) {
+  if( object.arguments ){
+    //custom controller
+    customObject = object;
+    object = customObject.arguments.object;
+    property = customObject.arguments.property;
+    params = {
+      factoryArgs: customObject.arguments.opts
+    }
+  }
+  if ( ( customObject === undefined ) && ( object[property] === undefined ) ) {
     throw new Error(`Object "${object}" has no property "${property}"`);
   }
 
@@ -1162,13 +1150,14 @@ function add(gui, object, property, params) {
 
   if (params.color) {
     controller = new ColorController(object, property);
-  } else if(customObject && ( property === undefined )){
+  } else if ( ( customObject !== undefined ) && ( typeof customObject.property === "string" ) ) {
-  	controller = object;
+    controller = customObject;
   } else {
-  	const factoryArgs = customObject ?
+    const factoryArgs = [object, property].concat(params.factoryArgs);
-      [property].concat(params.factoryArgs) : [object, property].concat(params.factoryArgs);
     controller = ControllerFactory.apply(gui, factoryArgs);
   }
+  if ( controller === null )
+    controller = customObject;
 
   if (params.before instanceof Controller) {
     params.before = params.before.__li;
@@ -1178,14 +1167,16 @@ function add(gui, object, property, params) {
 
   dom.addClass(controller.domElement, 'c');
 
-  const container = document.createElement('div');
+  const name = document.createElement('span');
-
-  const name = customObject ? object.domElement : document.createElement('span');
-  if (!customObject)
-  	name.innerHTML = controller.property;
   dom.addClass(name, 'property-name');
-  container.appendChild(name);
+  if( ( customObject !== undefined ) && typeof customObject.property === "object" ){
+    for(var propertyName in customObject.property)
+      name.appendChild(customObject.property[propertyName]);
+  }
+  else name.innerHTML = controller.property;
 
+  const container = document.createElement('div');
+  container.appendChild(name);
   container.appendChild(controller.domElement);
 
   const li = addRow(gui, container, params.before);