library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

gui.add

Browse Source 
use gui.add for CustomController
This commit is contained in:
Andrej 2019-04-29 07:07:15 +07:00
parent ced2ce7880
commit 3f46a30943
8 changed files with 1566 additions and 1511 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

520
build/dat.gui.js
View File

@ -1285,257 +1285,268 @@ var FunctionController = function (_Controller) {
}(Controller); }(Controller);
var ColorController = function (_Controller) { var ColorController = function (_Controller) {
inherits(ColorController, _Controller); inherits(ColorController, _Controller);
function ColorController(object, property) { function ColorController(object, property) {
classCallCheck(this, ColorController); classCallCheck(this, ColorController);
var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property)); var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property));
_this2.__color = new Color(_this2.getValue()); _this2.__color = new Color(_this2.getValue());
_this2.__temp = new Color(0); _this2.__temp = new Color(0);
var _this = _this2; var _this = _this2;
_this2.domElement = document.createElement('div'); _this2.domElement = document.createElement('div');
dom.makeSelectable(_this2.domElement, false); dom.makeSelectable(_this2.domElement, false);
_this2.__selector = document.createElement('div'); _this2.__selector = document.createElement('div');
_this2.__selector.className = 'selector'; _this2.__selector.className = 'selector';
_this2.__saturation_field = document.createElement('div'); _this2.__saturation_field = document.createElement('div');
_this2.__saturation_field.className = 'saturation-field'; _this2.__saturation_field.className = 'saturation-field';
_this2.__field_knob = document.createElement('div'); _this2.__field_knob = document.createElement('div');
_this2.__field_knob.className = 'field-knob'; _this2.__field_knob.className = 'field-knob';
_this2.__field_knob_border = '2px solid '; _this2.__field_knob_border = '2px solid ';
_this2.__hue_knob = document.createElement('div'); _this2.__hue_knob = document.createElement('div');
_this2.__hue_knob.className = 'hue-knob'; _this2.__hue_knob.className = 'hue-knob';
_this2.__hue_field = document.createElement('div'); _this2.__hue_field = document.createElement('div');
_this2.__hue_field.className = 'hue-field'; _this2.__hue_field.className = 'hue-field';
_this2.__input = document.createElement('input'); _this2.__input = document.createElement('input');
_this2.__input.type = 'text'; _this2.__input.type = 'text';
_this2.__input_textShadow = '0 1px 1px '; _this2.__input_textShadow = '0 1px 1px ';
dom.bind(_this2.__input, 'keydown', function (e) { dom.bind(_this2.__input, 'keydown', function (e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
onBlur.call(this); onBlur.call(this);
} }
}); });
dom.bind(_this2.__input, 'blur', onBlur); dom.bind(_this2.__input, 'blur', onBlur);
dom.bind(_this2.__selector, 'mousedown', function () { dom.bind(_this2.__selector, 'mousedown', function () {
dom.addClass(this, 'drag').bind(window, 'mouseup', function () { dom.addClass(this, 'drag').bind(window, 'mouseup', function () {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
}); });
dom.bind(_this2.__selector, 'touchstart', function () { dom.bind(_this2.__selector, 'touchstart', function () {
dom.addClass(this, 'drag').bind(window, 'touchend', function () { dom.addClass(this, 'drag').bind(window, 'touchend', function () {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
}); });
var valueField = document.createElement('div'); var valueField = document.createElement('div');
Common.extend(_this2.__selector.style, { Common.extend(_this2.__selector.style, {
width: '122px', width: '122px',
height: '102px', height: '102px',
padding: '3px', padding: '3px',
backgroundColor: '#222', backgroundColor: '#222',
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)' boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
}); });
Common.extend(_this2.__field_knob.style, { Common.extend(_this2.__field_knob.style, {
position: 'absolute', position: 'absolute',
width: '12px', width: '12px',
height: '12px', height: '12px',
border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'), border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'),
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)', boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
borderRadius: '12px', borderRadius: '12px',
zIndex: 1 zIndex: 1
}); });
Common.extend(_this2.__hue_knob.style, { Common.extend(_this2.__hue_knob.style, {
position: 'absolute', position: 'absolute',
width: '15px', width: '15px',
height: '2px', height: '2px',
borderRight: '4px solid #fff', borderRight: '4px solid #fff',
zIndex: 1 zIndex: 1
}); });
Common.extend(_this2.__saturation_field.style, { Common.extend(_this2.__saturation_field.style, {
width: '100px', width: '100px',
height: '100px', height: '100px',
border: '1px solid #555', border: '1px solid #555',
marginRight: '3px', marginRight: '3px',
display: 'inline-block', display: 'inline-block',
cursor: 'pointer' cursor: 'pointer'
}); });
Common.extend(valueField.style, { Common.extend(valueField.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
background: 'none' background: 'none'
}); });
linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000'); linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
Common.extend(_this2.__hue_field.style, { Common.extend(_this2.__hue_field.style, {
width: '15px', width: '15px',
height: '100px', height: '100px',
border: '1px solid #555', border: '1px solid #555',
cursor: 'ns-resize', cursor: 'ns-resize',
position: 'absolute', position: 'absolute',
top: '3px', top: '3px',
right: '3px' right: '3px'
}); });
hueGradient(_this2.__hue_field); hueGradient(_this2.__hue_field);
Common.extend(_this2.__input.style, { Common.extend(_this2.__input.style, {
outline: 'none', outline: 'none',
textAlign: 'center', textAlign: 'center',
color: '#fff', color: '#fff',
border: 0, border: 0,
fontWeight: 'bold', fontWeight: 'bold',
textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)' textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)'
}); });
dom.bind(_this2.__saturation_field, 'mousedown', fieldDown); dom.bind(_this2.__saturation_field, 'mousedown', fieldDown);
dom.bind(_this2.__saturation_field, 'touchstart', fieldDown); dom.bind(_this2.__saturation_field, 'touchstart', fieldDown);
dom.bind(_this2.__field_knob, 'mousedown', fieldDown); dom.bind(_this2.__field_knob, 'mousedown', fieldDown);
dom.bind(_this2.__field_knob, 'touchstart', fieldDown); dom.bind(_this2.__field_knob, 'touchstart', fieldDown);
dom.bind(_this2.__hue_field, 'mousedown', fieldDownH); dom.bind(_this2.__hue_field, 'mousedown', fieldDownH);
dom.bind(_this2.__hue_field, 'touchstart', fieldDownH); dom.bind(_this2.__hue_field, 'touchstart', fieldDownH);
function fieldDown(e) { function fieldDown(e) {
setSV(e); setSV(e);
dom.bind(window, 'mousemove', setSV); dom.bind(window, 'mousemove', setSV);
dom.bind(window, 'touchmove', setSV); dom.bind(window, 'touchmove', setSV);
dom.bind(window, 'mouseup', fieldUpSV); dom.bind(window, 'mouseup', fieldUpSV);
dom.bind(window, 'touchend', fieldUpSV); dom.bind(window, 'touchend', fieldUpSV);
}
function fieldDownH(e) {
setH(e);
dom.bind(window, 'mousemove', setH);
dom.bind(window, 'touchmove', setH);
dom.bind(window, 'mouseup', fieldUpH);
dom.bind(window, 'touchend', fieldUpH);
}
function fieldUpSV() {
dom.unbind(window, 'mousemove', setSV);
dom.unbind(window, 'touchmove', setSV);
dom.unbind(window, 'mouseup', fieldUpSV);
dom.unbind(window, 'touchend', fieldUpSV);
onFinish();
}
function fieldUpH() {
dom.unbind(window, 'mousemove', setH);
dom.unbind(window, 'touchmove', setH);
dom.unbind(window, 'mouseup', fieldUpH);
dom.unbind(window, 'touchend', fieldUpH);
onFinish();
}
function onBlur() {
var i = interpret(this.value);
if (i !== false) {
_this.__color.__state = i;
_this.setValue(_this.__color.toOriginal());
} else {
this.value = _this.__color.toString();
}
}
function onFinish() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.__color.toOriginal());
}
}
_this2.__saturation_field.appendChild(valueField);
_this2.__selector.appendChild(_this2.__field_knob);
_this2.__selector.appendChild(_this2.__saturation_field);
_this2.__selector.appendChild(_this2.__hue_field);
_this2.__hue_field.appendChild(_this2.__hue_knob);
_this2.domElement.appendChild(_this2.__input);
_this2.domElement.appendChild(_this2.__selector);
_this2.updateDisplay();
function setSV(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__saturation_field.getBoundingClientRect();
var _ref = e.touches && e.touches[0] || e,
clientX = _ref.clientX,
clientY = _ref.clientY;
var s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
var v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (v > 1) {
v = 1;
} else if (v < 0) {
v = 0;
}
if (s > 1) {
s = 1;
} else if (s < 0) {
s = 0;
}
_this.__color.v = v;
_this.__color.s = s;
_this.setValue(_this.__color.toOriginal());
return false;
}
function setH(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__hue_field.getBoundingClientRect();
var _ref2 = e.touches && e.touches[0] || e,
clientY = _ref2.clientY;
var h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (h > 1) {
h = 1;
} else if (h < 0) {
h = 0;
}
_this.__color.h = h * 360;
_this.setValue(_this.__color.toOriginal());
return false;
}
return _this2;
}
createClass(ColorController, [{
key: 'updateDisplay',
value: function updateDisplay() {
var i = interpret(this.getValue());
if (i !== false) {
var mismatch = false;
Common.each(Color.COMPONENTS, function (component) {
if (!Common.isUndefined(i[component]) && !Common.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) {
mismatch = true;
return {};
}
}, this);
if (mismatch) {
Common.extend(this.__color.__state, i);
} }
} function fieldDownH(e) {
Common.extend(this.__temp.__state, this.__color.__state); setH(e);
this.__temp.a = 1; dom.bind(window, 'mousemove', setH);
var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0; dom.bind(window, 'touchmove', setH);
var _flip = 255 - flip; dom.bind(window, 'mouseup', fieldUpH);
Common.extend(this.__field_knob.style, { dom.bind(window, 'touchend', fieldUpH);
marginLeft: 100 * this.__color.s - 7 + 'px', }
marginTop: 100 * (1 - this.__color.v) - 7 + 'px', function fieldUpSV() {
backgroundColor: this.__temp.toHexString(), dom.unbind(window, 'mousemove', setSV);
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')' dom.unbind(window, 'touchmove', setSV);
}); dom.unbind(window, 'mouseup', fieldUpSV);
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'; dom.unbind(window, 'touchend', fieldUpSV);
this.__temp.s = 1; onFinish();
this.__temp.v = 1; }
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString()); function fieldUpH() {
this.__input.value = this.__color.toString(); dom.unbind(window, 'mousemove', setH);
Common.extend(this.__input.style, { dom.unbind(window, 'touchmove', setH);
backgroundColor: this.__color.toHexString(), dom.unbind(window, 'mouseup', fieldUpH);
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')', dom.unbind(window, 'touchend', fieldUpH);
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)' onFinish();
}); }
function onBlur() {
var i = interpret(this.value);
if (i !== false) {
_this.__color.__state = i;
_this.setValue(_this.__color.toOriginal());
} else {
this.value = _this.__color.toString();
}
}
function onFinish() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.__color.toOriginal());
}
}
_this2.__saturation_field.appendChild(valueField);
_this2.__selector.appendChild(_this2.__field_knob);
_this2.__selector.appendChild(_this2.__saturation_field);
_this2.__selector.appendChild(_this2.__hue_field);
_this2.__hue_field.appendChild(_this2.__hue_knob);
_this2.domElement.appendChild(_this2.__input);
_this2.domElement.appendChild(_this2.__selector);
_this2.updateDisplay();
function setSV(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__saturation_field.getBoundingClientRect();
var _ref = e.touches && e.touches[0] || e,
clientX = _ref.clientX,
clientY = _ref.clientY;
var s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
var v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (v > 1) {
v = 1;
} else if (v < 0) {
v = 0;
}
if (s > 1) {
s = 1;
} else if (s < 0) {
s = 0;
}
_this.__color.v = v;
_this.__color.s = s;
_this.setValue(_this.__color.toOriginal());
return false;
}
function setH(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__hue_field.getBoundingClientRect();
var _ref2 = e.touches && e.touches[0] || e,
clientY = _ref2.clientY;
var h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (h > 1) {
h = 1;
} else if (h < 0) {
h = 0;
}
_this.__color.h = h * 360;
_this.setValue(_this.__color.toOriginal());
return false;
}
return _this2;
} }
}]); createClass(ColorController, [{
return ColorController; key: 'updateDisplay',
value: function updateDisplay() {
var i = interpret(this.getValue());
if (i !== false) {
var mismatch = false;
Common.each(Color.COMPONENTS, function (component) {
if (!Common.isUndefined(i[component]) && !Common.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) {
mismatch = true;
return {};
}
}, this);
if (mismatch) {
Common.extend(this.__color.__state, i);
}
}
Common.extend(this.__temp.__state, this.__color.__state);
this.__temp.a = 1;
var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0;
var _flip = 255 - flip;
Common.extend(this.__field_knob.style, {
marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toHexString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
});
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
this.__temp.s = 1;
this.__temp.v = 1;
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
this.__input.value = this.__color.toString();
Common.extend(this.__input.style, {
backgroundColor: this.__color.toHexString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
});
}
}]);
return ColorController;
}(Controller); }(Controller);
var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', '']; var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
function linearGradient(elem, x, a, b) { function linearGradient(elem, x, a, b) {
elem.style.background = ''; elem.style.background = '';
Common.each(vendors, function (vendor) { Common.each(vendors, function (vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); '; elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
}); });
} }
function hueGradient(elem) { function hueGradient(elem) {
elem.style.background = ''; elem.style.background = '';
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'; elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; 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 = { var css = {
load: function load(url, indoc) { load: function load(url, indoc) {
var doc = indoc || document; var doc = indoc || document;
@ -1913,6 +1924,7 @@ var GUI = function GUI(pars) {
resetWidth(); resetWidth();
} }
}; };
GUI.CustomController = CustomController;
GUI.toggleHide = function () { GUI.toggleHide = function () {
hide = !hide; hide = !hide;
Common.each(hideableGuis, function (gui) { Common.each(hideableGuis, function (gui) {
@ -1942,6 +1954,7 @@ Common.extend(GUI.prototype,
{ {
add: function add(object, property) { add: function add(object, property) {
return _add(this, object, property, { return _add(this, object, property, {
custom: object instanceof CustomController,
factoryArgs: Array.prototype.slice.call(arguments, 2) factoryArgs: Array.prototype.slice.call(arguments, 2)
}); });
}, },
@ -1950,6 +1963,12 @@ Common.extend(GUI.prototype,
color: true 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) { remove: function remove(controller) {
this.__ul.removeChild(controller.__li); this.__ul.removeChild(controller.__li);
this.__controllers.splice(this.__controllers.indexOf(controller), 1); this.__controllers.splice(this.__controllers.indexOf(controller), 1);
@ -2299,14 +2318,18 @@ function recallSavedValue(gui, controller) {
} }
} }
function _add(gui, object, property, params) { 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 + '"'); throw new Error('Object "' + object + '" has no property "' + property + '"');
} }
var controller = void 0; var controller = void 0;
if (params.color) { if (params.color) {
controller = new ColorController(object, property); 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 { } 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); controller = ControllerFactory.apply(gui, factoryArgs);
} }
if (params.before instanceof Controller) { if (params.before instanceof Controller) {
@ -2314,10 +2337,10 @@ function _add(gui, object, property, params) {
} }
recallSavedValue(gui, controller); recallSavedValue(gui, controller);
dom.addClass(controller.domElement, 'c'); 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 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(name);
container.appendChild(controller.domElement); container.appendChild(controller.domElement);
var li = addRow(gui, container, params.before); var li = addRow(gui, container, params.before);
@ -2511,7 +2534,8 @@ var controllers = {
NumberControllerBox: NumberControllerBox, NumberControllerBox: NumberControllerBox,
NumberControllerSlider: NumberControllerSlider, NumberControllerSlider: NumberControllerSlider,
FunctionController: FunctionController, FunctionController: FunctionController,
ColorController: ColorController ColorController: ColorController,
CustomController: CustomController
}; };
var dom$1 = { dom: dom }; var dom$1 = { dom: dom };
var gui = { GUI: GUI }; var gui = { GUI: GUI };

2
build/dat.gui.js.map
View File

File diff suppressed because one or more lines are too long

2
build/dat.gui.min.js vendored
View File

File diff suppressed because one or more lines are too long

520
build/dat.gui.module.js
View File

@ -1279,257 +1279,268 @@ var FunctionController = function (_Controller) {
}(Controller); }(Controller);
var ColorController = function (_Controller) { var ColorController = function (_Controller) {
inherits(ColorController, _Controller); inherits(ColorController, _Controller);
function ColorController(object, property) { function ColorController(object, property) {
classCallCheck(this, ColorController); classCallCheck(this, ColorController);
var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property)); var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property));
_this2.__color = new Color(_this2.getValue()); _this2.__color = new Color(_this2.getValue());
_this2.__temp = new Color(0); _this2.__temp = new Color(0);
var _this = _this2; var _this = _this2;
_this2.domElement = document.createElement('div'); _this2.domElement = document.createElement('div');
dom.makeSelectable(_this2.domElement, false); dom.makeSelectable(_this2.domElement, false);
_this2.__selector = document.createElement('div'); _this2.__selector = document.createElement('div');
_this2.__selector.className = 'selector'; _this2.__selector.className = 'selector';
_this2.__saturation_field = document.createElement('div'); _this2.__saturation_field = document.createElement('div');
_this2.__saturation_field.className = 'saturation-field'; _this2.__saturation_field.className = 'saturation-field';
_this2.__field_knob = document.createElement('div'); _this2.__field_knob = document.createElement('div');
_this2.__field_knob.className = 'field-knob'; _this2.__field_knob.className = 'field-knob';
_this2.__field_knob_border = '2px solid '; _this2.__field_knob_border = '2px solid ';
_this2.__hue_knob = document.createElement('div'); _this2.__hue_knob = document.createElement('div');
_this2.__hue_knob.className = 'hue-knob'; _this2.__hue_knob.className = 'hue-knob';
_this2.__hue_field = document.createElement('div'); _this2.__hue_field = document.createElement('div');
_this2.__hue_field.className = 'hue-field'; _this2.__hue_field.className = 'hue-field';
_this2.__input = document.createElement('input'); _this2.__input = document.createElement('input');
_this2.__input.type = 'text'; _this2.__input.type = 'text';
_this2.__input_textShadow = '0 1px 1px '; _this2.__input_textShadow = '0 1px 1px ';
dom.bind(_this2.__input, 'keydown', function (e) { dom.bind(_this2.__input, 'keydown', function (e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
onBlur.call(this); onBlur.call(this);
} }
}); });
dom.bind(_this2.__input, 'blur', onBlur); dom.bind(_this2.__input, 'blur', onBlur);
dom.bind(_this2.__selector, 'mousedown', function () { dom.bind(_this2.__selector, 'mousedown', function () {
dom.addClass(this, 'drag').bind(window, 'mouseup', function () { dom.addClass(this, 'drag').bind(window, 'mouseup', function () {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
}); });
dom.bind(_this2.__selector, 'touchstart', function () { dom.bind(_this2.__selector, 'touchstart', function () {
dom.addClass(this, 'drag').bind(window, 'touchend', function () { dom.addClass(this, 'drag').bind(window, 'touchend', function () {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
}); });
var valueField = document.createElement('div'); var valueField = document.createElement('div');
Common.extend(_this2.__selector.style, { Common.extend(_this2.__selector.style, {
width: '122px', width: '122px',
height: '102px', height: '102px',
padding: '3px', padding: '3px',
backgroundColor: '#222', backgroundColor: '#222',
boxShadow: '0px 1px 3px rgba(0,0,0,0.3)' boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
}); });
Common.extend(_this2.__field_knob.style, { Common.extend(_this2.__field_knob.style, {
position: 'absolute', position: 'absolute',
width: '12px', width: '12px',
height: '12px', height: '12px',
border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'), border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'),
boxShadow: '0px 1px 3px rgba(0,0,0,0.5)', boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
borderRadius: '12px', borderRadius: '12px',
zIndex: 1 zIndex: 1
}); });
Common.extend(_this2.__hue_knob.style, { Common.extend(_this2.__hue_knob.style, {
position: 'absolute', position: 'absolute',
width: '15px', width: '15px',
height: '2px', height: '2px',
borderRight: '4px solid #fff', borderRight: '4px solid #fff',
zIndex: 1 zIndex: 1
}); });
Common.extend(_this2.__saturation_field.style, { Common.extend(_this2.__saturation_field.style, {
width: '100px', width: '100px',
height: '100px', height: '100px',
border: '1px solid #555', border: '1px solid #555',
marginRight: '3px', marginRight: '3px',
display: 'inline-block', display: 'inline-block',
cursor: 'pointer' cursor: 'pointer'
}); });
Common.extend(valueField.style, { Common.extend(valueField.style, {
width: '100%', width: '100%',
height: '100%', height: '100%',
background: 'none' background: 'none'
}); });
linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000'); linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
Common.extend(_this2.__hue_field.style, { Common.extend(_this2.__hue_field.style, {
width: '15px', width: '15px',
height: '100px', height: '100px',
border: '1px solid #555', border: '1px solid #555',
cursor: 'ns-resize', cursor: 'ns-resize',
position: 'absolute', position: 'absolute',
top: '3px', top: '3px',
right: '3px' right: '3px'
}); });
hueGradient(_this2.__hue_field); hueGradient(_this2.__hue_field);
Common.extend(_this2.__input.style, { Common.extend(_this2.__input.style, {
outline: 'none', outline: 'none',
textAlign: 'center', textAlign: 'center',
color: '#fff', color: '#fff',
border: 0, border: 0,
fontWeight: 'bold', fontWeight: 'bold',
textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)' textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)'
}); });
dom.bind(_this2.__saturation_field, 'mousedown', fieldDown); dom.bind(_this2.__saturation_field, 'mousedown', fieldDown);
dom.bind(_this2.__saturation_field, 'touchstart', fieldDown); dom.bind(_this2.__saturation_field, 'touchstart', fieldDown);
dom.bind(_this2.__field_knob, 'mousedown', fieldDown); dom.bind(_this2.__field_knob, 'mousedown', fieldDown);
dom.bind(_this2.__field_knob, 'touchstart', fieldDown); dom.bind(_this2.__field_knob, 'touchstart', fieldDown);
dom.bind(_this2.__hue_field, 'mousedown', fieldDownH); dom.bind(_this2.__hue_field, 'mousedown', fieldDownH);
dom.bind(_this2.__hue_field, 'touchstart', fieldDownH); dom.bind(_this2.__hue_field, 'touchstart', fieldDownH);
function fieldDown(e) { function fieldDown(e) {
setSV(e); setSV(e);
dom.bind(window, 'mousemove', setSV); dom.bind(window, 'mousemove', setSV);
dom.bind(window, 'touchmove', setSV); dom.bind(window, 'touchmove', setSV);
dom.bind(window, 'mouseup', fieldUpSV); dom.bind(window, 'mouseup', fieldUpSV);
dom.bind(window, 'touchend', fieldUpSV); dom.bind(window, 'touchend', fieldUpSV);
}
function fieldDownH(e) {
setH(e);
dom.bind(window, 'mousemove', setH);
dom.bind(window, 'touchmove', setH);
dom.bind(window, 'mouseup', fieldUpH);
dom.bind(window, 'touchend', fieldUpH);
}
function fieldUpSV() {
dom.unbind(window, 'mousemove', setSV);
dom.unbind(window, 'touchmove', setSV);
dom.unbind(window, 'mouseup', fieldUpSV);
dom.unbind(window, 'touchend', fieldUpSV);
onFinish();
}
function fieldUpH() {
dom.unbind(window, 'mousemove', setH);
dom.unbind(window, 'touchmove', setH);
dom.unbind(window, 'mouseup', fieldUpH);
dom.unbind(window, 'touchend', fieldUpH);
onFinish();
}
function onBlur() {
var i = interpret(this.value);
if (i !== false) {
_this.__color.__state = i;
_this.setValue(_this.__color.toOriginal());
} else {
this.value = _this.__color.toString();
}
}
function onFinish() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.__color.toOriginal());
}
}
_this2.__saturation_field.appendChild(valueField);
_this2.__selector.appendChild(_this2.__field_knob);
_this2.__selector.appendChild(_this2.__saturation_field);
_this2.__selector.appendChild(_this2.__hue_field);
_this2.__hue_field.appendChild(_this2.__hue_knob);
_this2.domElement.appendChild(_this2.__input);
_this2.domElement.appendChild(_this2.__selector);
_this2.updateDisplay();
function setSV(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__saturation_field.getBoundingClientRect();
var _ref = e.touches && e.touches[0] || e,
clientX = _ref.clientX,
clientY = _ref.clientY;
var s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
var v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (v > 1) {
v = 1;
} else if (v < 0) {
v = 0;
}
if (s > 1) {
s = 1;
} else if (s < 0) {
s = 0;
}
_this.__color.v = v;
_this.__color.s = s;
_this.setValue(_this.__color.toOriginal());
return false;
}
function setH(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__hue_field.getBoundingClientRect();
var _ref2 = e.touches && e.touches[0] || e,
clientY = _ref2.clientY;
var h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (h > 1) {
h = 1;
} else if (h < 0) {
h = 0;
}
_this.__color.h = h * 360;
_this.setValue(_this.__color.toOriginal());
return false;
}
return _this2;
}
createClass(ColorController, [{
key: 'updateDisplay',
value: function updateDisplay() {
var i = interpret(this.getValue());
if (i !== false) {
var mismatch = false;
Common.each(Color.COMPONENTS, function (component) {
if (!Common.isUndefined(i[component]) && !Common.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) {
mismatch = true;
return {};
}
}, this);
if (mismatch) {
Common.extend(this.__color.__state, i);
} }
} function fieldDownH(e) {
Common.extend(this.__temp.__state, this.__color.__state); setH(e);
this.__temp.a = 1; dom.bind(window, 'mousemove', setH);
var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0; dom.bind(window, 'touchmove', setH);
var _flip = 255 - flip; dom.bind(window, 'mouseup', fieldUpH);
Common.extend(this.__field_knob.style, { dom.bind(window, 'touchend', fieldUpH);
marginLeft: 100 * this.__color.s - 7 + 'px', }
marginTop: 100 * (1 - this.__color.v) - 7 + 'px', function fieldUpSV() {
backgroundColor: this.__temp.toHexString(), dom.unbind(window, 'mousemove', setSV);
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')' dom.unbind(window, 'touchmove', setSV);
}); dom.unbind(window, 'mouseup', fieldUpSV);
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'; dom.unbind(window, 'touchend', fieldUpSV);
this.__temp.s = 1; onFinish();
this.__temp.v = 1; }
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString()); function fieldUpH() {
this.__input.value = this.__color.toString(); dom.unbind(window, 'mousemove', setH);
Common.extend(this.__input.style, { dom.unbind(window, 'touchmove', setH);
backgroundColor: this.__color.toHexString(), dom.unbind(window, 'mouseup', fieldUpH);
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')', dom.unbind(window, 'touchend', fieldUpH);
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)' onFinish();
}); }
function onBlur() {
var i = interpret(this.value);
if (i !== false) {
_this.__color.__state = i;
_this.setValue(_this.__color.toOriginal());
} else {
this.value = _this.__color.toString();
}
}
function onFinish() {
if (_this.__onFinishChange) {
_this.__onFinishChange.call(_this, _this.__color.toOriginal());
}
}
_this2.__saturation_field.appendChild(valueField);
_this2.__selector.appendChild(_this2.__field_knob);
_this2.__selector.appendChild(_this2.__saturation_field);
_this2.__selector.appendChild(_this2.__hue_field);
_this2.__hue_field.appendChild(_this2.__hue_knob);
_this2.domElement.appendChild(_this2.__input);
_this2.domElement.appendChild(_this2.__selector);
_this2.updateDisplay();
function setSV(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__saturation_field.getBoundingClientRect();
var _ref = e.touches && e.touches[0] || e,
clientX = _ref.clientX,
clientY = _ref.clientY;
var s = (clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
var v = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (v > 1) {
v = 1;
} else if (v < 0) {
v = 0;
}
if (s > 1) {
s = 1;
} else if (s < 0) {
s = 0;
}
_this.__color.v = v;
_this.__color.s = s;
_this.setValue(_this.__color.toOriginal());
return false;
}
function setH(e) {
if (e.type.indexOf('touch') === -1) {
e.preventDefault();
}
var fieldRect = _this.__hue_field.getBoundingClientRect();
var _ref2 = e.touches && e.touches[0] || e,
clientY = _ref2.clientY;
var h = 1 - (clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
if (h > 1) {
h = 1;
} else if (h < 0) {
h = 0;
}
_this.__color.h = h * 360;
_this.setValue(_this.__color.toOriginal());
return false;
}
return _this2;
} }
}]); createClass(ColorController, [{
return ColorController; key: 'updateDisplay',
value: function updateDisplay() {
var i = interpret(this.getValue());
if (i !== false) {
var mismatch = false;
Common.each(Color.COMPONENTS, function (component) {
if (!Common.isUndefined(i[component]) && !Common.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) {
mismatch = true;
return {};
}
}, this);
if (mismatch) {
Common.extend(this.__color.__state, i);
}
}
Common.extend(this.__temp.__state, this.__color.__state);
this.__temp.a = 1;
var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0;
var _flip = 255 - flip;
Common.extend(this.__field_knob.style, {
marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toHexString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
});
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
this.__temp.s = 1;
this.__temp.v = 1;
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
this.__input.value = this.__color.toString();
Common.extend(this.__input.style, {
backgroundColor: this.__color.toHexString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
});
}
}]);
return ColorController;
}(Controller); }(Controller);
var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', '']; var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
function linearGradient(elem, x, a, b) { function linearGradient(elem, x, a, b) {
elem.style.background = ''; elem.style.background = '';
Common.each(vendors, function (vendor) { Common.each(vendors, function (vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); '; elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
}); });
} }
function hueGradient(elem) { function hueGradient(elem) {
elem.style.background = ''; elem.style.background = '';
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'; elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'; 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 = { var css = {
load: function load(url, indoc) { load: function load(url, indoc) {
var doc = indoc || document; var doc = indoc || document;
@ -1907,6 +1918,7 @@ var GUI = function GUI(pars) {
resetWidth(); resetWidth();
} }
}; };
GUI.CustomController = CustomController;
GUI.toggleHide = function () { GUI.toggleHide = function () {
hide = !hide; hide = !hide;
Common.each(hideableGuis, function (gui) { Common.each(hideableGuis, function (gui) {
@ -1936,6 +1948,7 @@ Common.extend(GUI.prototype,
{ {
add: function add(object, property) { add: function add(object, property) {
return _add(this, object, property, { return _add(this, object, property, {
custom: object instanceof CustomController,
factoryArgs: Array.prototype.slice.call(arguments, 2) factoryArgs: Array.prototype.slice.call(arguments, 2)
}); });
}, },
@ -1944,6 +1957,12 @@ Common.extend(GUI.prototype,
color: true 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) { remove: function remove(controller) {
this.__ul.removeChild(controller.__li); this.__ul.removeChild(controller.__li);
this.__controllers.splice(this.__controllers.indexOf(controller), 1); this.__controllers.splice(this.__controllers.indexOf(controller), 1);
@ -2293,14 +2312,18 @@ function recallSavedValue(gui, controller) {
} }
} }
function _add(gui, object, property, params) { 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 + '"'); throw new Error('Object "' + object + '" has no property "' + property + '"');
} }
var controller = void 0; var controller = void 0;
if (params.color) { if (params.color) {
controller = new ColorController(object, property); 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 { } 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); controller = ControllerFactory.apply(gui, factoryArgs);
} }
if (params.before instanceof Controller) { if (params.before instanceof Controller) {
@ -2308,10 +2331,10 @@ function _add(gui, object, property, params) {
} }
recallSavedValue(gui, controller); recallSavedValue(gui, controller);
dom.addClass(controller.domElement, 'c'); 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 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(name);
container.appendChild(controller.domElement); container.appendChild(controller.domElement);
var li = addRow(gui, container, params.before); var li = addRow(gui, container, params.before);
@ -2505,7 +2528,8 @@ var controllers = {
NumberControllerBox: NumberControllerBox, NumberControllerBox: NumberControllerBox,
NumberControllerSlider: NumberControllerSlider, NumberControllerSlider: NumberControllerSlider,
FunctionController: FunctionController, FunctionController: FunctionController,
ColorController: ColorController ColorController: ColorController,
CustomController: CustomController
}; };
var dom$1 = { dom: dom }; var dom$1 = { dom: dom };
var gui = { GUI: GUI }; var gui = { GUI: GUI };

2
build/dat.gui.module.js.map
View File

File diff suppressed because one or more lines are too long

2010
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
src/dat/controllers/CustomController.js
View File

@ -19,9 +19,9 @@ import Controller from './Controller';
*/ */
class CustomController extends Controller{ class CustomController extends Controller{
constructor(object, property) { constructor(object, property) {
super(object, property); super(object, property);
object.constructor( this ); object.constructor( this );
} }
} }

17
src/dat/gui/GUI.js
View File

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