build

build/dat.gui.js

@@ -1536,42 +1536,6 @@ 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(init) {
-    classCallCheck(this, CustomController);
-    var _this = possibleConstructorReturn(this, (CustomController.__proto__ || Object.getPrototypeOf(CustomController)).call(this, {}));
-    init(_this);
-    _this.custom = true;
-    return _this;
-  }
-  return CustomController;
-}(Controller);
-
-var css = {
-  load: function load(url, indoc) {
-    var doc = indoc || document;
-    var link = doc.createElement('link');
-    link.type = 'text/css';
-    link.rel = 'stylesheet';
-    link.href = url;
-    doc.getElementsByTagName('head')[0].appendChild(link);
-  },
-  inject: function inject(cssContent, indoc) {
-    var doc = indoc || document;
-    var injected = document.createElement('style');
-    injected.type = 'text/css';
-    injected.innerHTML = cssContent;
-    var head = doc.getElementsByTagName('head')[0];
-    try {
-      head.appendChild(injected);
-    } catch (e) {
-    }
-  }
-};
-
-var saveDialogContents = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n  Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n  <textarea id=\"dg-new-constructor\"></textarea>\n\n  <div id=\"dg-save-locally\">\n\n    <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n    values to <code>localStorage</code> on exit.\n\n    <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n      override those passed to <code>dat.GUI</code>'s constructor. This makes it\n      easier to work incrementally, but <code>localStorage</code> is fragile,\n      and your friends may not see the same values you do.\n\n    </div>\n\n  </div>\n\n</div>";
-
 var ControllerFactory = function ControllerFactory(object, property) {
   var initialValue = object[property];
   if (Common.isArray(arguments[2]) || Common.isObject(arguments[2])) {
@@ -1601,6 +1565,53 @@ var ControllerFactory = function ControllerFactory(object, property) {
   return null;
 };
 
+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));
+    _this.arguments = {
+      object: object, property: property, opts: Array.prototype.slice.call(arguments, 2)
+    };
+    if (object.property) _this.property = object.property(_this);
+    return _this;
+  }
+  createClass(CustomController, [{
+    key: 'controller',
+    set: function set$$1(newController) {
+      this._controller = newController;
+    },
+    get: function get$$1() {
+      return this._controller;
+    }
+  }]);
+  return CustomController;
+}(Controller);
+
+var css = {
+  load: function load(url, indoc) {
+    var doc = indoc || document;
+    var link = doc.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.href = url;
+    doc.getElementsByTagName('head')[0].appendChild(link);
+  },
+  inject: function inject(cssContent, indoc) {
+    var doc = indoc || document;
+    var injected = document.createElement('style');
+    injected.type = 'text/css';
+    injected.innerHTML = cssContent;
+    var head = doc.getElementsByTagName('head')[0];
+    try {
+      head.appendChild(injected);
+    } catch (e) {
+    }
+  }
+};
+
+var saveDialogContents = "<div id=\"dg-save\" class=\"dg dialogue\">\n\n  Here's the new load parameter for your <code>GUI</code>'s constructor:\n\n  <textarea id=\"dg-new-constructor\"></textarea>\n\n  <div id=\"dg-save-locally\">\n\n    <input id=\"dg-local-storage\" type=\"checkbox\"/> Automatically save\n    values to <code>localStorage</code> on exit.\n\n    <div id=\"dg-local-explain\">The values saved to <code>localStorage</code> will\n      override those passed to <code>dat.GUI</code>'s constructor. This makes it\n      easier to work incrementally, but <code>localStorage</code> is fragile,\n      and your friends may not see the same values you do.\n\n    </div>\n\n  </div>\n\n</div>";
+
 function requestAnimationFrame(callback) {
   setTimeout(callback, 1000 / 60);
 }
@@ -1954,7 +1965,6 @@ Common.extend(GUI.prototype,
 {
   add: function add(object, property) {
     return _add(this, object, property, {
-      custom: object.custom,
       factoryArgs: Array.prototype.slice.call(arguments, 2)
     });
   },
@@ -1963,11 +1973,6 @@ Common.extend(GUI.prototype,
       color: true
     });
   },
-  addCustomController: function addCustomController(init, property) {
-    return _add(this, new dat.controllers.CustomController(init), property, {
-      factoryArgs: Array.prototype.slice.call(arguments, 2)
-    });
-  },
   remove: function remove(controller) {
     this.__ul.removeChild(controller.__li);
     this.__controllers.splice(this.__controllers.indexOf(controller), 1);
@@ -2317,28 +2322,41 @@ 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) {
+    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 + '"');
   }
   var controller = void 0;
   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 {
-    var factoryArgs = customObject ? [property].concat(params.factoryArgs) : [object, property].concat(params.factoryArgs);
+    var factoryArgs = [object, property].concat(params.factoryArgs);
     controller = ControllerFactory.apply(gui, factoryArgs);
   }
+  if (controller === null) controller = customObject;else if (customObject !== undefined) customObject.controller = controller;
   if (params.before instanceof Controller) {
     params.before = params.before.__li;
   }
   recallSavedValue(gui, controller);
   dom.addClass(controller.domElement, 'c');
-  var container = document.createElement('div');
+  var name = document.createElement('span');
-  var name = customObject ? object.domElement : document.createElement('span');
-  if (!customObject) name.innerHTML = controller.property;
   dom.addClass(name, 'property-name');
+  if (customObject !== undefined && _typeof(customObject.property) === "object") {
+    for (var propertyName in customObject.property) {
+      name.appendChild(customObject.property[propertyName]);
+    }
+  } else name.innerHTML = controller.property;
+  var container = document.createElement('div');
   container.appendChild(name);
   container.appendChild(controller.domElement);
   var li = addRow(gui, container, params.before);

src/dat/controllers/CustomController.js

@@ -22,14 +22,14 @@ import ControllerFactory from './ControllerFactory';
  *
  */
 class CustomController extends Controller{
-    /**
+  /**
-     * Represents a custom controller.
+  * Represents a custom controller.
-     * @param {Object} object The object to be manipulated
+  * @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 {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 {string} property The name of the property to be manipulated
-     * @param {Object} [params] Optional parameters
+  * @param {Object} [params] Optional parameters
-     */
+  */
-    constructor(object, property) {
+  constructor(object, property) {
     super(object, property);
 
     this.arguments = {