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

Using classses

Browse Source
This commit is contained in:
Tomas Korcak 2015-08-14 18:27:54 +02:00
parent 78e84d8c3b
commit 075e499065
33 changed files with 2360 additions and 6914 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.editorconfig Normal file
View File

@ -0,0 +1,17 @@
# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
max_line_length = 80
trim_trailing_whitespace = true
[*.md]
max_line_length = 0
trim_trailing_whitespace = false
[COMMIT_EDITMSG]
max_line_length = 0

4405
build/dat.gui.js
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

69
example.html
View File

@ -3,11 +3,74 @@
<head> <head>
</head> </head>
<body> <body>
<script type="text/javascript" src="build/dat.gui.min.js"></script> <script type="text/javascript" src="build/dat.gui.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var obj = { x: 5 }; var obj = {
example: {
message: 'Hello World',
speed: 42,
displayOutline: false,
explode: function () {
console.log('Bang!');
},
},
noiseStrength: 10,
growthSpeed: 0.2,
maxSize: 6,
message: null,
speed: null,
flow: {
speed: 0.4,
noiseStrength: 10
},
letters: {
growthSpeed: 0.2,
maxSize: 10,
message: 'folders'
},
colors: {
color0: "#ffae23", // CSS string
color1: [ 0, 128, 255 ], // RGB array
color2: [ 0, 128, 255, 0.3 ], // RGB with alpha
color3: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
}
};
var gui = new dat.gui.GUI(); var gui = new dat.gui.GUI();
gui.add(obj, 'x'); gui.add(obj.example, 'message');
gui.add(obj.example, 'speed', -5, 5);
gui.add(obj.example, 'displayOutline');
gui.add(obj.example, 'explode');
gui.add(obj, 'noiseStrength').step(5); // Increment amount
gui.add(obj, 'growthSpeed', -5, 5); // Min and max
gui.add(obj, 'maxSize').min(0).step(0.25); // Mix and match
// Choose from accepted values
gui.add(obj, 'message', [ 'pizza', 'chrome', 'hooray' ] );
// Choose from named values
gui.add(obj, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
var f1 = gui.addFolder('Flow Field');
f1.add(obj.flow, 'speed');
f1.add(obj.flow, 'noiseStrength');
var f2 = gui.addFolder('Letters');
f2.add(obj.letters, 'growthSpeed');
f2.add(obj.letters, 'maxSize');
f2.add(obj.letters, 'message');
gui.addColor(obj.colors, 'color0');
gui.addColor(obj.colors, 'color1');
gui.addColor(obj.colors, 'color2');
gui.addColor(obj.colors, 'color3');
</script> </script>
</body> </body>
</html> </html>

15
package.json
View File

@ -7,23 +7,32 @@
"test": "tests" "test": "tests"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "node ./node_modules/eslint/bin/eslint.js src/",
"build": "webpack && webpack --config ./webpack.config.min.js" "build": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
"dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/dataarts/dat.gui.git" "url": "git+https://github.com/dataarts/dat.gui.git"
}, },
"author": "Data Arts Team, Google Creative Lab", "author": "Data Arts Team, Google Creative Lab",
"license": "Apache 2.0", "license": "Apache-2.0",
"bugs": { "bugs": {
"url": "https://github.com/dataarts/dat.gui/issues" "url": "https://github.com/dataarts/dat.gui/issues"
}, },
"homepage": "https://github.com/dataarts/dat.gui#readme", "homepage": "https://github.com/dataarts/dat.gui#readme",
"devDependencies": { "devDependencies": {
"babel-core": "^5.8.22",
"babel-eslint": "^4.0.5",
"babel-loader": "^5.3.2",
"css-loader": "^0.16.0", "css-loader": "^0.16.0",
"eslint": "^1.1.0",
"eslint-config-airbnb": "0.0.7",
"eslint-plugin-react": "^3.2.2",
"extend": "^3.0.0", "extend": "^3.0.0",
"html-loader": "^0.3.0", "html-loader": "^0.3.0",
"node-sass": "^3.2.0",
"sass-loader": "^2.0.0",
"style-loader": "^0.12.3", "style-loader": "^0.12.3",
"webpack": "^1.11.0" "webpack": "^1.11.0"
} }

119
src/dat/color/Color.js
View File

@ -13,11 +13,11 @@
import interpret from './interpret'; import interpret from './interpret';
import math from './math'; import math from './math';
import toString from './toString'; import colorToString from './toString';
import common from '../utils/common'; import common from '../utils/common';
var Color = function () { class Color {
constructor() {
this.__state = interpret.apply(this, arguments); this.__state = interpret.apply(this, arguments);
if (this.__state === false) { if (this.__state === false) {
@ -25,22 +25,46 @@ var Color = function () {
} }
this.__state.a = this.__state.a || 1; this.__state.a = this.__state.a || 1;
}
toString() {
return colorToString(this);
}
toOriginal() {
return this.__state.conversion.write(this);
}
}
Color.recalculateRGB = function(color, component, componentHexIndex) {
if (color.__state.space === 'HEX') {
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
} else if (color.__state.space === 'HSV') {
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
} else {
throw 'Corrupted color state';
}
};
Color.recalculateHSV = function(color) {
var result = math.rgb_to_hsv(color.r, color.g, color.b);
common.extend(color.__state,
{
s: result.s,
v: result.v
}
);
if (!common.isNaN(result.h)) {
color.__state.h = result.h;
} else if (common.isUndefined(color.__state.h)) {
color.__state.h = 0;
}
}; };
Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a']; Color.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];
common.extend(Color.prototype, {
toString: function () {
return toString(this);
},
toOriginal: function () {
return this.__state.conversion.write(this);
}
});
defineRGBComponent(Color.prototype, 'r', 2); defineRGBComponent(Color.prototype, 'r', 2);
defineRGBComponent(Color.prototype, 'g', 1); defineRGBComponent(Color.prototype, 'g', 1);
defineRGBComponent(Color.prototype, 'b', 0); defineRGBComponent(Color.prototype, 'b', 0);
@ -61,122 +85,65 @@ Object.defineProperty(Color.prototype, 'a', {
}); });
Object.defineProperty(Color.prototype, 'hex', { Object.defineProperty(Color.prototype, 'hex', {
get: function () { get: function () {
if (!this.__state.space !== 'HEX') { if (!this.__state.space !== 'HEX') {
this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b); this.__state.hex = math.rgb_to_hex(this.r, this.g, this.b);
} }
return this.__state.hex; return this.__state.hex;
}, },
set: function (v) { set: function (v) {
this.__state.space = 'HEX'; this.__state.space = 'HEX';
this.__state.hex = v; this.__state.hex = v;
} }
}); });
function defineRGBComponent(target, component, componentHexIndex) { function defineRGBComponent(target, component, componentHexIndex) {
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function () { get: function () {
if (this.__state.space === 'RGB') { if (this.__state.space === 'RGB') {
return this.__state[component]; return this.__state[component];
} }
recalculateRGB(this, component, componentHexIndex); Color.recalculateRGB(this, component, componentHexIndex);
return this.__state[component]; return this.__state[component];
}, },
set: function (v) { set: function (v) {
if (this.__state.space !== 'RGB') { if (this.__state.space !== 'RGB') {
recalculateRGB(this, component, componentHexIndex); Color.recalculateRGB(this, component, componentHexIndex);
this.__state.space = 'RGB'; this.__state.space = 'RGB';
} }
this.__state[component] = v; this.__state[component] = v;
} }
}); });
} }
function defineHSVComponent(target, component) { function defineHSVComponent(target, component) {
Object.defineProperty(target, component, { Object.defineProperty(target, component, {
get: function () { get: function () {
if (this.__state.space === 'HSV') if (this.__state.space === 'HSV')
return this.__state[component]; return this.__state[component];
recalculateHSV(this); Color.recalculateHSV(this);
return this.__state[component]; return this.__state[component];
}, },
set: function (v) { set: function (v) {
if (this.__state.space !== 'HSV') { if (this.__state.space !== 'HSV') {
recalculateHSV(this); Color.recalculateHSV(this);
this.__state.space = 'HSV'; this.__state.space = 'HSV';
} }
this.__state[component] = v; this.__state[component] = v;
} }
}); });
}
function recalculateRGB(color, component, componentHexIndex) {
if (color.__state.space === 'HEX') {
color.__state[component] = math.component_from_hex(color.__state.hex, componentHexIndex);
} else if (color.__state.space === 'HSV') {
common.extend(color.__state, math.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));
} else {
throw 'Corrupted color state';
}
}
function recalculateHSV(color) {
var result = math.rgb_to_hsv(color.r, color.g, color.b);
common.extend(color.__state,
{
s: result.s,
v: result.v
}
);
if (!common.isNaN(result.h)) {
color.__state.h = result.h;
} else if (common.isUndefined(color.__state.h)) {
color.__state.h = 0;
}
} }
export default Color; export default Color;

78
src/dat/color/interpret.js
View File

@ -16,18 +16,14 @@ import common from '../utils/common';
var result, toReturn; var result, toReturn;
var interpret = function() { var interpret = function () {
toReturn = false; toReturn = false;
var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0]; var original = arguments.length > 1 ? common.toArray(arguments) : arguments[0];
common.each(INTERPRETATIONS, function (family) {
common.each(INTERPRETATIONS, function(family) {
if (family.litmus(original)) { if (family.litmus(original)) {
common.each(family.conversions, function (conversion, conversionName) {
common.each(family.conversions, function(conversion, conversionName) {
result = conversion.read(original); result = conversion.read(original);
if (toReturn === false && result !== false) { if (toReturn === false && result !== false) {
@ -35,33 +31,23 @@ var interpret = function() {
result.conversionName = conversionName; result.conversionName = conversionName;
result.conversion = conversion; result.conversion = conversion;
return common.BREAK; return common.BREAK;
} }
}); });
return common.BREAK; return common.BREAK;
} }
}); });
return toReturn; return toReturn;
}; };
var INTERPRETATIONS = [ var INTERPRETATIONS = [
// Strings // Strings
{ {
litmus: common.isString, litmus: common.isString,
conversions: { conversions: {
THREE_CHAR_HEX: { THREE_CHAR_HEX: {
read: function (original) {
read: function(original) {
var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i); var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);
if (test === null) return false; if (test === null) return false;
@ -78,12 +64,10 @@ var INTERPRETATIONS = [
}, },
write: toString write: toString
}, },
SIX_CHAR_HEX: { SIX_CHAR_HEX: {
read: function (original) {
read: function(original) {
var test = original.match(/^#([A-F0-9]{6})$/i); var test = original.match(/^#([A-F0-9]{6})$/i);
if (test === null) return false; if (test === null) return false;
@ -96,12 +80,10 @@ var INTERPRETATIONS = [
}, },
write: toString write: toString
}, },
CSS_RGB: { CSS_RGB: {
read: function (original) {
read: function(original) {
var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); var test = original.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/);
if (test === null) return false; if (test === null) return false;
@ -116,12 +98,10 @@ var INTERPRETATIONS = [
}, },
write: toString write: toString
}, },
CSS_RGBA: { CSS_RGBA: {
read: function (original) {
read: function(original) {
var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/); var test = original.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);
if (test === null) return false; if (test === null) return false;
@ -133,26 +113,21 @@ var INTERPRETATIONS = [
b: parseFloat(test[3]), b: parseFloat(test[3]),
a: parseFloat(test[4]) a: parseFloat(test[4])
}; };
}, },
write: toString write: toString
} }
} }
}, },
// Numbers // Numbers
{ {
litmus: common.isNumber, litmus: common.isNumber,
conversions: { conversions: {
HEX: { HEX: {
read: function(original) { read: function (original) {
return { return {
space: 'HEX', space: 'HEX',
hex: original, hex: original,
@ -160,7 +135,7 @@ var INTERPRETATIONS = [
} }
}, },
write: function(color) { write: function (color) {
return color.hex; return color.hex;
} }
} }
@ -171,13 +146,11 @@ var INTERPRETATIONS = [
// Arrays // Arrays
{ {
litmus: common.isArray, litmus: common.isArray,
conversions: { conversions: {
RGB_ARRAY: { RGB_ARRAY: {
read: function(original) { read: function (original) {
if (original.length != 3) return false; if (original.length != 3) return false;
return { return {
space: 'RGB', space: 'RGB',
@ -187,14 +160,13 @@ var INTERPRETATIONS = [
}; };
}, },
write: function(color) { write: function (color) {
return [color.r, color.g, color.b]; return [color.r, color.g, color.b];
} }
}, },
RGBA_ARRAY: { RGBA_ARRAY: {
read: function(original) { read: function (original) {
if (original.length != 4) return false; if (original.length != 4) return false;
return { return {
space: 'RGB', space: 'RGB',
@ -205,14 +177,11 @@ var INTERPRETATIONS = [
}; };
}, },
write: function(color) { write: function (color) {
return [color.r, color.g, color.b, color.a]; return [color.r, color.g, color.b, color.a];
} }
} }
} }
}, },
// Objects // Objects
@ -223,7 +192,7 @@ var INTERPRETATIONS = [
conversions: { conversions: {
RGBA_OBJ: { RGBA_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.r) && if (common.isNumber(original.r) &&
common.isNumber(original.g) && common.isNumber(original.g) &&
common.isNumber(original.b) && common.isNumber(original.b) &&
@ -239,7 +208,7 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
r: color.r, r: color.r,
g: color.g, g: color.g,
@ -250,7 +219,7 @@ var INTERPRETATIONS = [
}, },
RGB_OBJ: { RGB_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.r) && if (common.isNumber(original.r) &&
common.isNumber(original.g) && common.isNumber(original.g) &&
common.isNumber(original.b)) { common.isNumber(original.b)) {
@ -264,7 +233,7 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
r: color.r, r: color.r,
g: color.g, g: color.g,
@ -274,7 +243,7 @@ var INTERPRETATIONS = [
}, },
HSVA_OBJ: { HSVA_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.h) && if (common.isNumber(original.h) &&
common.isNumber(original.s) && common.isNumber(original.s) &&
common.isNumber(original.v) && common.isNumber(original.v) &&
@ -290,7 +259,7 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
h: color.h, h: color.h,
s: color.s, s: color.s,
@ -301,7 +270,7 @@ var INTERPRETATIONS = [
}, },
HSV_OBJ: { HSV_OBJ: {
read: function(original) { read: function (original) {
if (common.isNumber(original.h) && if (common.isNumber(original.h) &&
common.isNumber(original.s) && common.isNumber(original.s) &&
common.isNumber(original.v)) { common.isNumber(original.v)) {
@ -315,21 +284,16 @@ var INTERPRETATIONS = [
return false; return false;
}, },
write: function(color) { write: function (color) {
return { return {
h: color.h, h: color.h,
s: color.s, s: color.s,
v: color.v v: color.v
} }
} }
} }
} }
} }
]; ];
export default interpret; export default interpret;

12
src/dat/color/math.js
View File

@ -15,7 +15,7 @@ var tmpComponent;
var ColorMath = { var ColorMath = {
hsv_to_rgb: function(h, s, v) { hsv_to_rgb: function (h, s, v) {
var hi = Math.floor(h / 60) % 6; var hi = Math.floor(h / 60) % 6;
@ -40,7 +40,7 @@ var ColorMath = {
}, },
rgb_to_hsv: function(r, g, b) { rgb_to_hsv: function (r, g, b) {
var min = Math.min(r, g, b), var min = Math.min(r, g, b),
max = Math.max(r, g, b), max = Math.max(r, g, b),
@ -76,19 +76,19 @@ var ColorMath = {
}; };
}, },
rgb_to_hex: function(r, g, b) { rgb_to_hex: function (r, g, b) {
var hex = this.hex_with_component(0, 2, r); var hex = this.hex_with_component(0, 2, r);
hex = this.hex_with_component(hex, 1, g); hex = this.hex_with_component(hex, 1, g);
hex = this.hex_with_component(hex, 0, b); hex = this.hex_with_component(hex, 0, b);
return hex; return hex;
}, },
component_from_hex: function(hex, componentIndex) { component_from_hex: function (hex, componentIndex) {
return (hex >> (componentIndex * 8)) & 0xFF; return (hex >> (componentIndex * 8)) & 0xFF;
}, },
hex_with_component: function(hex, componentIndex, value) { hex_with_component: function (hex, componentIndex, value) {
return value << (tmpComponent = componentIndex * 8) | (hex & ~ (0xFF << tmpComponent)); return value << (tmpComponent = componentIndex * 8) | (hex & ~(0xFF << tmpComponent));
} }
} }

4
src/dat/color/toString.js
View File

@ -13,7 +13,7 @@
import common from '../utils/common'; import common from '../utils/common';
var toString = function (color) { var colorToString = function (color) {
if (color.a == 1 || common.isUndefined(color.a)) { if (color.a == 1 || common.isUndefined(color.a)) {
var s = color.hex.toString(16); var s = color.hex.toString(16);
while (s.length < 6) { while (s.length < 6) {
@ -26,4 +26,4 @@ var toString = function (color) {
} }
}; };
export default toString; export default colorToString;

41
src/dat/controllers/BooleanController.js
View File

@ -24,9 +24,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var BooleanController = function(object, property) { class BooleanController extends Controller {
constructor(object, property) {
BooleanController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
this.__prev = this.getValue(); this.__prev = this.getValue();
@ -34,6 +34,9 @@ var BooleanController = function(object, property) {
this.__checkbox = document.createElement('input'); this.__checkbox = document.createElement('input');
this.__checkbox.setAttribute('type', 'checkbox'); this.__checkbox.setAttribute('type', 'checkbox');
function onChange() {
_this.setValue(!_this.__prev);
}
dom.bind(this.__checkbox, 'change', onChange, false); dom.bind(this.__checkbox, 'change', onChange, false);
@ -41,33 +44,18 @@ var BooleanController = function(object, property) {
// Match original value // Match original value
this.updateDisplay(); this.updateDisplay();
function onChange() {
_this.setValue(!_this.__prev);
} }
}; setValue(v) {
var toReturn = super.setValue(v);
BooleanController.superclass = Controller;
common.extend(
BooleanController.prototype,
Controller.prototype,
{
setValue: function(v) {
var toReturn = BooleanController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
} }
this.__prev = this.getValue(); this.__prev = this.getValue();
return toReturn; return toReturn;
}, }
updateDisplay: function() {
updateDisplay() {
if (this.getValue() === true) { if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked'); this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true; this.__checkbox.checked = true;
@ -75,13 +63,8 @@ common.extend(
this.__checkbox.checked = false; this.__checkbox.checked = false;
} }
return BooleanController.superclass.prototype.updateDisplay.call(this); return super.updateDisplay();
} }
}
}
);
export default BooleanController; export default BooleanController;

48
src/dat/controllers/ColorController.js
View File

@ -17,8 +17,9 @@ import Color from '../color/Color';
import interpret from '../color/interpret'; import interpret from '../color/interpret';
import common from '../utils/common'; import common from '../utils/common';
var ColorController = function(object, property) { class ColorController extends Controller {
ColorController.superclass.call(this, object, property); constructor(object, property) {
super(object, property);
this.__color = new Color(this.getValue()); this.__color = new Color(this.getValue());
this.__temp = new Color(0); this.__temp = new Color(0);
@ -49,7 +50,7 @@ var ColorController = function(object, property) {
this.__input.type = 'text'; this.__input.type = 'text';
this.__input_textShadow = '0 1px 1px '; this.__input_textShadow = '0 1px 1px ';
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
if (e.keyCode === 13) { // on enter if (e.keyCode === 13) { // on enter
onBlur.call(this); onBlur.call(this);
} }
@ -61,7 +62,7 @@ var ColorController = function(object, property) {
dom dom
.addClass(this, 'drag') .addClass(this, 'drag')
.bind(window, 'mouseup', function(e) { .bind(window, 'mouseup', function (e) {
dom.removeClass(_this.__selector, 'drag'); dom.removeClass(_this.__selector, 'drag');
}); });
@ -137,7 +138,7 @@ var ColorController = function(object, property) {
dom.bind(this.__saturation_field, 'mousedown', fieldDown); dom.bind(this.__saturation_field, 'mousedown', fieldDown);
dom.bind(this.__field_knob, 'mousedown', fieldDown); dom.bind(this.__field_knob, 'mousedown', fieldDown);
dom.bind(this.__hue_field, 'mousedown', function(e) { dom.bind(this.__hue_field, 'mousedown', function (e) {
setH(e); setH(e);
dom.bind(window, 'mousemove', setH); dom.bind(window, 'mousemove', setH);
dom.bind(window, 'mouseup', unbindH); dom.bind(window, 'mouseup', unbindH);
@ -225,20 +226,9 @@ var ColorController = function(object, property) {
return false; return false;
} }
}
}; updateDisplay() {
ColorController.superclass = Controller;
common.extend(
ColorController.prototype,
Controller.prototype,
{
updateDisplay: function() {
var i = interpret(this.getValue()); var i = interpret(this.getValue());
if (i !== false) { if (i !== false) {
@ -247,9 +237,8 @@ common.extend(
// Check for mismatch on the interpreted value. // Check for mismatch on the interpreted value.
common.each(Color.COMPONENTS, function(component) { common.each(Color.COMPONENTS, function (component) {
if (!common.isUndefined(i[component]) && if (!common.isUndefined(i[component]) && !common.isUndefined(this.__color.__state[component]) &&
!common.isUndefined(this.__color.__state[component]) &&
i[component] !== this.__color.__state[component]) { i[component] !== this.__color.__state[component]) {
mismatch = true; mismatch = true;
return {}; // break return {}; // break
@ -275,7 +264,7 @@ common.extend(
marginLeft: 100 * this.__color.s - 7 + 'px', marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px', marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toString(), backgroundColor: this.__temp.toString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip +')' border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
}); });
this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px' this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px'
@ -287,22 +276,19 @@ common.extend(
common.extend(this.__input.style, { common.extend(this.__input.style, {
backgroundColor: this.__input.value = this.__color.toString(), backgroundColor: this.__input.value = this.__color.toString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip +')', color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip +',.7)' textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
}); });
} }
}
} 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%); ';
}); });
} }

39
src/dat/controllers/Controller.js
View File

@ -21,8 +21,8 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var Controller = function(object, property) { class Controller {
constructor(object, property) {
this.initialValue = object[property]; this.initialValue = object[property];
/** /**
@ -56,15 +56,7 @@ var Controller = function(object, property) {
* @ignore * @ignore
*/ */
this.__onFinishChange = undefined; this.__onFinishChange = undefined;
}
};
common.extend(
Controller.prototype,
/** @lends dat.controllers.Controller.prototype */
{
/** /**
* Specify that a function fire every time someone changes the value with * Specify that a function fire every time someone changes the value with
@ -74,10 +66,10 @@ common.extend(
* is modified via this Controller. * is modified via this Controller.
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
onChange: function(fnc) { onChange(fnc) {
this.__onChange = fnc; this.__onChange = fnc;
return this; return this;
}, }
/** /**
* Specify that a function fire every time someone "finishes" changing * Specify that a function fire every time someone "finishes" changing
@ -88,50 +80,49 @@ common.extend(
* someone "finishes" changing the value via this Controller. * someone "finishes" changing the value via this Controller.
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
onFinishChange: function(fnc) { onFinishChange(fnc) {
this.__onFinishChange = fnc; this.__onFinishChange = fnc;
return this; return this;
}, }
/** /**
* Change the value of <code>object[property]</code> * Change the value of <code>object[property]</code>
* *
* @param {Object} newValue The new value of <code>object[property]</code> * @param {Object} newValue The new value of <code>object[property]</code>
*/ */
setValue: function(newValue) { setValue(newValue) {
this.object[this.property] = newValue; this.object[this.property] = newValue;
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this, newValue); this.__onChange.call(this, newValue);
} }
this.updateDisplay(); this.updateDisplay();
return this; return this;
}, }
/** /**
* Gets the value of <code>object[property]</code> * Gets the value of <code>object[property]</code>
* *
* @returns {Object} The current value of <code>object[property]</code> * @returns {Object} The current value of <code>object[property]</code>
*/ */
getValue: function() { getValue() {
return this.object[this.property]; return this.object[this.property];
}, }
/** /**
* Refreshes the visual display of a Controller in order to keep sync * Refreshes the visual display of a Controller in order to keep sync
* with the object's current value. * with the object's current value.
* @returns {dat.controllers.Controller} this * @returns {dat.controllers.Controller} this
*/ */
updateDisplay: function() { updateDisplay() {
return this; return this;
}, }
/** /**
* @returns {Boolean} true if the value has deviated from initialValue * @returns {Boolean} true if the value has deviated from initialValue
*/ */
isModified: function() { isModified() {
return this.initialValue !== this.getValue() return this.initialValue !== this.getValue()
} }
} }
);
export default Controller; export default Controller;

26
src/dat/controllers/FunctionController.js
View File

@ -25,15 +25,15 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var FunctionController = function(object, property, text) { class FunctionController extends Controller{
constructor(object, property, text) {
FunctionController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
this.__button = document.createElement('div'); this.__button = document.createElement('div');
this.__button.innerHTML = text === undefined ? 'Fire' : text; this.__button.innerHTML = text === undefined ? 'Fire' : text;
dom.bind(this.__button, 'click', function(e) { dom.bind(this.__button, 'click', function (e) {
e.preventDefault(); e.preventDefault();
_this.fire(); _this.fire();
return false; return false;
@ -42,19 +42,9 @@ var FunctionController = function(object, property, text) {
dom.addClass(this.__button, 'button'); dom.addClass(this.__button, 'button');
this.domElement.appendChild(this.__button); this.domElement.appendChild(this.__button);
}
fire() {
};
FunctionController.superclass = Controller;
common.extend(
FunctionController.prototype,
Controller.prototype,
{
fire: function() {
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this); this.__onChange.call(this);
} }
@ -63,8 +53,6 @@ common.extend(
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
} }
} }
} }
);
export default FunctionController; export default FunctionController;

58
src/dat/controllers/NumberController.js
View File

@ -14,6 +14,15 @@
import Controller from './Controller'; import Controller from './Controller';
import common from '../utils/common'; import common from '../utils/common';
function numDecimals(x) {
x = x.toString();
if (x.indexOf('.') > -1) {
return x.length - x.indexOf('.') - 1;
} else {
return 0;
}
}
/** /**
* @class Represents a given property of an object that is a number. * @class Represents a given property of an object that is a number.
* *
@ -28,9 +37,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberController = function(object, property, params) { class NumberController extends Controller {
constructor(object, property, params) {
NumberController.superclass.call(this, object, property); super(object, property);
params = params || {}; params = params || {};
@ -44,7 +53,7 @@ var NumberController = function(object, property, params) {
this.__impliedStep = 1; // What are we, psychics? this.__impliedStep = 1; // What are we, psychics?
} else { } else {
// Hey Doug, check this out. // Hey Doug, check this out.
this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue))/Math.LN10))/10; this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;
} }
} else { } else {
@ -53,20 +62,9 @@ var NumberController = function(object, property, params) {
} }
this.__precision = numDecimals(this.__impliedStep); this.__precision = numDecimals(this.__impliedStep);
}; }
NumberController.superclass = Controller;
common.extend(
NumberController.prototype,
Controller.prototype,
/** @lends dat.controllers.NumberController.prototype */
{
setValue: function(v) {
setValue(v) {
if (this.__min !== undefined && v < this.__min) { if (this.__min !== undefined && v < this.__min) {
v = this.__min; v = this.__min;
} else if (this.__max !== undefined && v > this.__max) { } else if (this.__max !== undefined && v > this.__max) {
@ -77,9 +75,9 @@ common.extend(
v = Math.round(v / this.__step) * this.__step; v = Math.round(v / this.__step) * this.__step;
} }
return NumberController.superclass.prototype.setValue.call(this, v); return super.setValue(v);
}, }
/** /**
* Specify a minimum value for <code>object[property]</code>. * Specify a minimum value for <code>object[property]</code>.
@ -88,10 +86,10 @@ common.extend(
* <code>object[property]</code> * <code>object[property]</code>
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
min: function(v) { min(v) {
this.__min = v; this.__min = v;
return this; return this;
}, }
/** /**
* Specify a maximum value for <code>object[property]</code>. * Specify a maximum value for <code>object[property]</code>.
@ -100,10 +98,10 @@ common.extend(
* <code>object[property]</code> * <code>object[property]</code>
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
max: function(v) { max(v) {
this.__max = v; this.__max = v;
return this; return this;
}, }
/** /**
* Specify a step value that dat.controllers.NumberController * Specify a step value that dat.controllers.NumberController
@ -115,24 +113,12 @@ common.extend(
* difference otherwise stepValue is 1 * difference otherwise stepValue is 1
* @returns {dat.controllers.NumberController} this * @returns {dat.controllers.NumberController} this
*/ */
step: function(v) { step(v) {
this.__step = v; this.__step = v;
this.__impliedStep = v; this.__impliedStep = v;
this.__precision = numDecimals(v); this.__precision = numDecimals(v);
return this; return this;
} }
}
);
function numDecimals(x) {
x = x.toString();
if (x.indexOf('.') > -1) {
return x.length - x.indexOf('.') - 1;
} else {
return 0;
}
} }
export default NumberController; export default NumberController;

37
src/dat/controllers/NumberControllerBox.js
View File

@ -15,6 +15,11 @@ import NumberController from './NumberController';
import dom from '../dom/dom'; import dom from '../dom/dom';
import common from '../utils/common'; import common from '../utils/common';
function roundToDecimal(value, decimals) {
var tenTo = Math.pow(10, decimals);
return Math.round(value * tenTo) / tenTo;
}
/** /**
* @class Represents a given property of an object that is a number and * @class Represents a given property of an object that is a number and
* provides an input element with which to manipulate it. * provides an input element with which to manipulate it.
@ -31,12 +36,12 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberControllerBox = function(object, property, params) { class NumberControllerBox extends NumberController {
constructor(object, property, params) {
super(object, property, params);
this.__truncationSuspended = false; this.__truncationSuspended = false;
NumberControllerBox.superclass.call(this, object, property, params);
var _this = this; var _this = this;
/** /**
@ -53,7 +58,7 @@ var NumberControllerBox = function(object, property, params) {
dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'change', onChange);
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'mousedown', onMouseDown); dom.bind(this.__input, 'mousedown', onMouseDown);
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
// When pressing entire, you can be as precise as you want. // When pressing entire, you can be as precise as you want.
if (e.keyCode === 13) { if (e.keyCode === 13) {
@ -99,31 +104,13 @@ var NumberControllerBox = function(object, property, params) {
this.updateDisplay(); this.updateDisplay();
this.domElement.appendChild(this.__input); this.domElement.appendChild(this.__input);
}
}; updateDisplay() {
NumberControllerBox.superclass = NumberController;
common.extend(
NumberControllerBox.prototype,
NumberController.prototype,
{
updateDisplay: function() {
this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision); this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
return NumberControllerBox.superclass.prototype.updateDisplay.call(this); return super.updateDisplay();
} }
}
);
function roundToDecimal(value, decimals) {
var tenTo = Math.pow(10, decimals);
return Math.round(value * tenTo) / tenTo;
} }
export default NumberControllerBox; export default NumberControllerBox;

46
src/dat/controllers/NumberControllerSlider.js
View File

@ -17,6 +17,10 @@ import css from '../utils/css';
import common from '../utils/common'; import common from '../utils/common';
import styleSheet from '!style!css!sass!./NumberControllerSlider.scss'; import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
function map(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}
/** /**
* @class Represents a given property of an object that is a number, contains * @class Represents a given property of an object that is a number, contains
* a minimum and maximum, and provides a slider element with which to * a minimum and maximum, and provides a slider element with which to
@ -35,9 +39,9 @@ import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var NumberControllerSlider = function(object, property, min, max, step) { class NumberControllerSlider extends NumberController {
constructor(object, property, min, max, step) {
NumberControllerSlider.superclass.call(this, object, property, { min: min, max: max, step: step }); super(object, property, {min: min, max: max, step: step});
var _this = this; var _this = this;
@ -45,7 +49,6 @@ var NumberControllerSlider = function(object, property, min, max, step) {
this.__foreground = document.createElement('div'); this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown); dom.bind(this.__background, 'mousedown', onMouseDown);
dom.addClass(this.__background, 'slider'); dom.addClass(this.__background, 'slider');
@ -86,39 +89,20 @@ var NumberControllerSlider = function(object, property, min, max, step) {
this.__background.appendChild(this.__foreground); this.__background.appendChild(this.__foreground);
this.domElement.appendChild(this.__background); this.domElement.appendChild(this.__background);
}
}; updateDisplay() {
var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
NumberControllerSlider.superclass = NumberController; this.__foreground.style.width = pct * 100 + '%';
return super.updateDisplay();
}
}
/** /**
* Injects default stylesheet for slider elements. * Injects default stylesheet for slider elements.
*/ */
NumberControllerSlider.useDefaultStyles = function() { NumberControllerSlider.useDefaultStyles = function () {
css.inject(styleSheet); css.inject(styleSheet);
}; };
common.extend(
NumberControllerSlider.prototype,
NumberController.prototype,
{
updateDisplay: function() {
var pct = (this.getValue() - this.__min)/(this.__max - this.__min);
this.__foreground.style.width = pct*100+'%';
return NumberControllerSlider.superclass.prototype.updateDisplay.call(this);
}
}
);
function map(v, i1, i2, o1, o2) {
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}
export default NumberControllerSlider; export default NumberControllerSlider;

2
src/dat/controllers/NumberControllerSlider.scss
View File

@ -12,7 +12,7 @@
*/ */
.slider { .slider {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
height: 1em; height: 1em;
border-radius: 1em; border-radius: 1em;
background-color: #eee; background-color: #eee;

38
src/dat/controllers/OptionController.js
View File

@ -28,9 +28,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var OptionController = function(object, property, options) { class OptionController extends Controller{
constructor(object, property, options) {
OptionController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
@ -42,13 +42,13 @@ var OptionController = function(object, property, options) {
if (common.isArray(options)) { if (common.isArray(options)) {
var map = {}; var map = {};
common.each(options, function(element) { common.each(options, function (element) {
map[element] = element; map[element] = element;
}); });
options = map; options = map;
} }
common.each(options, function(value, key) { common.each(options, function (value, key) {
var opt = document.createElement('option'); var opt = document.createElement('option');
opt.innerHTML = key; opt.innerHTML = key;
@ -60,39 +60,27 @@ var OptionController = function(object, property, options) {
// Acknowledge original value // Acknowledge original value
this.updateDisplay(); this.updateDisplay();
dom.bind(this.__select, 'change', function() { dom.bind(this.__select, 'change', function () {
var desiredValue = this.options[this.selectedIndex].value; var desiredValue = this.options[this.selectedIndex].value;
_this.setValue(desiredValue); _this.setValue(desiredValue);
}); });
this.domElement.appendChild(this.__select); this.domElement.appendChild(this.__select);
}
}; setValue (v) {
var toReturn = super.setValue(v);
OptionController.superclass = Controller;
common.extend(
OptionController.prototype,
Controller.prototype,
{
setValue: function(v) {
var toReturn = OptionController.superclass.prototype.setValue.call(this, v);
if (this.__onFinishChange) { if (this.__onFinishChange) {
this.__onFinishChange.call(this, this.getValue()); this.__onFinishChange.call(this, this.getValue());
} }
return toReturn; return toReturn;
}, }
updateDisplay: function() { updateDisplay() {
this.__select.value = this.getValue(); this.__select.value = this.getValue();
return OptionController.superclass.prototype.updateDisplay.call(this); return super.updateDisplay();
} }
}
}
);
export default OptionController; export default OptionController;

29
src/dat/controllers/StringController.js
View File

@ -25,9 +25,9 @@ import common from '../utils/common';
* *
* @member dat.controllers * @member dat.controllers
*/ */
var StringController = function(object, property) { class StringController extends Controller {
constructor(object, property) {
StringController.superclass.call(this, object, property); super(object, property);
var _this = this; var _this = this;
@ -37,7 +37,7 @@ var StringController = function(object, property) {
dom.bind(this.__input, 'keyup', onChange); dom.bind(this.__input, 'keyup', onChange);
dom.bind(this.__input, 'change', onChange); dom.bind(this.__input, 'change', onChange);
dom.bind(this.__input, 'blur', onBlur); dom.bind(this.__input, 'blur', onBlur);
dom.bind(this.__input, 'keydown', function(e) { dom.bind(this.__input, 'keydown', function (e) {
if (e.keyCode === 13) { if (e.keyCode === 13) {
this.blur(); this.blur();
} }
@ -57,29 +57,16 @@ var StringController = function(object, property) {
this.updateDisplay(); this.updateDisplay();
this.domElement.appendChild(this.__input); this.domElement.appendChild(this.__input);
}
}; updateDisplay() {
StringController.superclass = Controller;
common.extend(
StringController.prototype,
Controller.prototype,
{
updateDisplay: function() {
// Stops the caret from moving on account of: // Stops the caret from moving on account of:
// keyup -> setValue -> updateDisplay // keyup -> setValue -> updateDisplay
if (!dom.isActive(this.__input)) { if (!dom.isActive(this.__input)) {
this.__input.value = this.getValue(); this.__input.value = this.getValue();
} }
return StringController.superclass.prototype.updateDisplay.call(this); return super.updateDisplay();
} }
}
}
);
export default StringController; export default StringController;

18
src/dat/dom/CenteredDiv.js
View File

@ -14,7 +14,7 @@
import dom from '../dom/dom'; import dom from '../dom/dom';
import common from '../utils/common'; import common from '../utils/common';
var CenteredDiv = function() { var CenteredDiv = function () {
this.backgroundElement = document.createElement('div'); this.backgroundElement = document.createElement('div');
common.extend(this.backgroundElement.style, { common.extend(this.backgroundElement.style, {
@ -46,14 +46,14 @@ var CenteredDiv = function() {
document.body.appendChild(this.domElement); document.body.appendChild(this.domElement);
var _this = this; var _this = this;
dom.bind(this.backgroundElement, 'click', function() { dom.bind(this.backgroundElement, 'click', function () {
_this.hide(); _this.hide();
}); });
}; };
CenteredDiv.prototype.show = function() { CenteredDiv.prototype.show = function () {
var _this = this; var _this = this;
@ -66,7 +66,7 @@ CenteredDiv.prototype.show = function() {
this.layout(); this.layout();
common.defer(function() { common.defer(function () {
_this.backgroundElement.style.opacity = 1; _this.backgroundElement.style.opacity = 1;
_this.domElement.style.opacity = 1; _this.domElement.style.opacity = 1;
_this.domElement.style.webkitTransform = 'scale(1)'; _this.domElement.style.webkitTransform = 'scale(1)';
@ -74,11 +74,11 @@ CenteredDiv.prototype.show = function() {
}; };
CenteredDiv.prototype.hide = function() { CenteredDiv.prototype.hide = function () {
var _this = this; var _this = this;
var hide = function() { var hide = function () {
_this.domElement.style.display = 'none'; _this.domElement.style.display = 'none';
_this.backgroundElement.style.display = 'none'; _this.backgroundElement.style.display = 'none';
@ -100,9 +100,9 @@ CenteredDiv.prototype.hide = function() {
}; };
CenteredDiv.prototype.layout = function() { CenteredDiv.prototype.layout = function () {
this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px'; this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';
this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px'; this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';
}; };
function lockScroll(e) { function lockScroll(e) {

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

@ -39,7 +39,7 @@ var CLOSE_BUTTON_HEIGHT = 20;
var DEFAULT_DEFAULT_PRESET_NAME = 'Default'; var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
var SUPPORTS_LOCAL_STORAGE = (function() { var SUPPORTS_LOCAL_STORAGE = (function () {
try { try {
return 'localStorage' in window && window['localStorage'] !== null; return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) { } catch (e) {
@ -76,7 +76,7 @@ var hideable_guis = [];
* @param {dat.gui.GUI} [params.parent] The GUI I'm nested in. * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.
* @param {Boolean} [params.closed] If true, starts closed * @param {Boolean} [params.closed] If true, starts closed
*/ */
var GUI = function(params) { var GUI = function (params) {
var _this = this; var _this = this;
@ -147,7 +147,7 @@ var GUI = function(params) {
} else { } else {
params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME }; params.load = {preset: DEFAULT_DEFAULT_PRESET_NAME};
} }
@ -182,13 +182,13 @@ var GUI = function(params) {
* @type dat.gui.GUI * @type dat.gui.GUI
*/ */
parent: { parent: {
get: function() { get: function () {
return params.parent; return params.parent;
} }
}, },
scrollable: { scrollable: {
get: function() { get: function () {
return params.scrollable; return params.scrollable;
} }
}, },
@ -198,7 +198,7 @@ var GUI = function(params) {
* @type Boolean * @type Boolean
*/ */
autoPlace: { autoPlace: {
get: function() { get: function () {
return params.autoPlace; return params.autoPlace;
} }
}, },
@ -209,7 +209,7 @@ var GUI = function(params) {
*/ */
preset: { preset: {
get: function() { get: function () {
if (_this.parent) { if (_this.parent) {
return _this.getRoot().preset; return _this.getRoot().preset;
} else { } else {
@ -217,7 +217,7 @@ var GUI = function(params) {
} }
}, },
set: function(v) { set: function (v) {
if (_this.parent) { if (_this.parent) {
_this.getRoot().preset = v; _this.getRoot().preset = v;
} else { } else {
@ -234,10 +234,10 @@ var GUI = function(params) {
* @type Number * @type Number
*/ */
width: { width: {
get: function() { get: function () {
return params.width; return params.width;
}, },
set: function(v) { set: function (v) {
params.width = v; params.width = v;
setWidth(_this, v); setWidth(_this, v);
} }
@ -249,10 +249,10 @@ var GUI = function(params) {
* @type String * @type String
*/ */
name: { name: {
get: function() { get: function () {
return params.name; return params.name;
}, },
set: function(v) { set: function (v) {
// TODO Check for collisions among sibling folders // TODO Check for collisions among sibling folders
params.name = v; params.name = v;
if (title_row_name) { if (title_row_name) {
@ -266,10 +266,10 @@ var GUI = function(params) {
* @type Boolean * @type Boolean
*/ */
closed: { closed: {
get: function() { get: function () {
return params.closed; return params.closed;
}, },
set: function(v) { set: function (v) {
params.closed = v; params.closed = v;
if (params.closed) { if (params.closed) {
dom.addClass(_this.__ul, GUI.CLASS_CLOSED); dom.addClass(_this.__ul, GUI.CLASS_CLOSED);
@ -292,7 +292,7 @@ var GUI = function(params) {
* @type Object * @type Object
*/ */
load: { load: {
get: function() { get: function () {
return params.load; return params.load;
} }
}, },
@ -304,10 +304,10 @@ var GUI = function(params) {
*/ */
useLocalStorage: { useLocalStorage: {
get: function() { get: function () {
return use_local_storage; return use_local_storage;
}, },
set: function(bool) { set: function (bool) {
if (SUPPORTS_LOCAL_STORAGE) { if (SUPPORTS_LOCAL_STORAGE) {
use_local_storage = bool; use_local_storage = bool;
if (bool) { if (bool) {
@ -353,7 +353,7 @@ var GUI = function(params) {
dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON); dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
this.domElement.appendChild(this.__closeButton); this.domElement.appendChild(this.__closeButton);
dom.bind(this.__closeButton, 'click', function() { dom.bind(this.__closeButton, 'click', function () {
_this.closed = !_this.closed; _this.closed = !_this.closed;
@ -373,7 +373,7 @@ var GUI = function(params) {
var title_row = addRow(_this, title_row_name); var title_row = addRow(_this, title_row_name);
var on_click_title = function(e) { var on_click_title = function (e) {
e.preventDefault(); e.preventDefault();
_this.closed = !_this.closed; _this.closed = !_this.closed;
return false; return false;
@ -416,10 +416,18 @@ var GUI = function(params) {
} }
dom.bind(window, 'resize', function() { _this.onResize() }); dom.bind(window, 'resize', function () {
dom.bind(this.__ul, 'webkitTransitionEnd', function() { _this.onResize(); }); _this.onResize()
dom.bind(this.__ul, 'transitionend', function() { _this.onResize() }); });
dom.bind(this.__ul, 'oTransitionEnd', function() { _this.onResize() }); dom.bind(this.__ul, 'webkitTransitionEnd', function () {
_this.onResize();
});
dom.bind(this.__ul, 'transitionend', function () {
_this.onResize()
});
dom.bind(this.__ul, 'oTransitionEnd', function () {
_this.onResize()
});
this.onResize(); this.onResize();
@ -437,10 +445,11 @@ var GUI = function(params) {
this.saveToLocalStorageIfPossible = saveToLocalStorage; this.saveToLocalStorageIfPossible = saveToLocalStorage;
var root = _this.getRoot(); var root = _this.getRoot();
function resetWidth() { function resetWidth() {
var root = _this.getRoot(); var root = _this.getRoot();
root.width += 1; root.width += 1;
common.defer(function() { common.defer(function () {
root.width -= 1; root.width -= 1;
}); });
} }
@ -451,10 +460,10 @@ var GUI = function(params) {
}; };
GUI.toggleHide = function() { GUI.toggleHide = function () {
hide = !hide; hide = !hide;
common.each(hideable_guis, function(gui) { common.each(hideable_guis, function (gui) {
gui.domElement.style.zIndex = hide ? -999 : 999; gui.domElement.style.zIndex = hide ? -999 : 999;
gui.domElement.style.opacity = hide ? 0 : 1; gui.domElement.style.opacity = hide ? 0 : 1;
}); });
@ -473,7 +482,7 @@ GUI.DEFAULT_WIDTH = 245;
GUI.TEXT_CLOSED = 'Close Controls'; GUI.TEXT_CLOSED = 'Close Controls';
GUI.TEXT_OPEN = 'Open Controls'; GUI.TEXT_OPEN = 'Open Controls';
dom.bind(window, 'keydown', function(e) { dom.bind(window, 'keydown', function (e) {
if (document.activeElement.type !== 'text' && if (document.activeElement.type !== 'text' &&
(e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) { (e.which === HIDE_KEY_CODE || e.keyCode == HIDE_KEY_CODE)) {
@ -483,7 +492,6 @@ dom.bind(window, 'keydown', function(e) {
}, false); }, false);
common.extend( common.extend(
GUI.prototype, GUI.prototype,
/** @lends dat.gui.GUI */ /** @lends dat.gui.GUI */
@ -495,7 +503,7 @@ common.extend(
* @returns {dat.controllers.Controller} The new controller that was added. * @returns {dat.controllers.Controller} The new controller that was added.
* @instance * @instance
*/ */
add: function(object, property) { add: function (object, property) {
return add( return add(
this, this,
@ -514,7 +522,7 @@ common.extend(
* @returns {dat.controllers.ColorController} The new controller that was added. * @returns {dat.controllers.ColorController} The new controller that was added.
* @instance * @instance
*/ */
addColor: function(object, property) { addColor: function (object, property) {
return add( return add(
this, this,
@ -531,19 +539,19 @@ common.extend(
* @param controller * @param controller
* @instance * @instance
*/ */
remove: function(controller) { remove: function (controller) {
// TODO listening? // TODO listening?
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);
var _this = this; var _this = this;
common.defer(function() { common.defer(function () {
_this.onResize(); _this.onResize();
}); });
}, },
destroy: function() { destroy: function () {
if (this.autoPlace) { if (this.autoPlace) {
auto_place_container.removeChild(this.domElement); auto_place_container.removeChild(this.domElement);
@ -558,7 +566,7 @@ common.extend(
* name * name
* @instance * @instance
*/ */
addFolder: function(name) { addFolder: function (name) {
// We have to prevent collisions on names in order to have a key // We have to prevent collisions on names in order to have a key
// by which to remember saved values // by which to remember saved values
@ -567,7 +575,7 @@ common.extend(
' name "' + name + '"'); ' name "' + name + '"');
} }
var new_gui_params = { name: name, parent: this }; var new_gui_params = {name: name, parent: this};
// We need to pass down the autoPlace trait so that we can // We need to pass down the autoPlace trait so that we can
// attach event listeners to open/close folder actions to // attach event listeners to open/close folder actions to
@ -597,15 +605,15 @@ common.extend(
}, },
open: function() { open: function () {
this.closed = false; this.closed = false;
}, },
close: function() { close: function () {
this.closed = true; this.closed = true;
}, },
onResize: function() { onResize: function () {
var root = this.getRoot(); var root = this.getRoot();
@ -614,8 +622,8 @@ common.extend(
var top = dom.getOffset(root.__ul).top; var top = dom.getOffset(root.__ul).top;
var h = 0; var h = 0;
common.each(root.__ul.childNodes, function(node) { common.each(root.__ul.childNodes, function (node) {
if (! (root.autoPlace && node === root.__save_row)) if (!(root.autoPlace && node === root.__save_row))
h += dom.getHeight(node); h += dom.getHeight(node);
}); });
@ -630,7 +638,7 @@ common.extend(
} }
if (root.__resize_handle) { if (root.__resize_handle) {
common.defer(function() { common.defer(function () {
root.__resize_handle.style.height = root.__ul.offsetHeight + 'px'; root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';
}); });
} }
@ -650,7 +658,7 @@ common.extend(
* @throws {Error} if not called on a top level GUI. * @throws {Error} if not called on a top level GUI.
* @instance * @instance
*/ */
remember: function() { remember: function () {
if (common.isUndefined(SAVE_DIALOGUE)) { if (common.isUndefined(SAVE_DIALOGUE)) {
SAVE_DIALOGUE = new CenteredDiv(); SAVE_DIALOGUE = new CenteredDiv();
@ -663,7 +671,7 @@ common.extend(
var _this = this; var _this = this;
common.each(Array.prototype.slice.call(arguments), function(object) { common.each(Array.prototype.slice.call(arguments), function (object) {
if (_this.__rememberedObjects.length == 0) { if (_this.__rememberedObjects.length == 0) {
addSaveMenu(_this); addSaveMenu(_this);
} }
@ -683,7 +691,7 @@ common.extend(
* @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI. * @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI.
* @instance * @instance
*/ */
getRoot: function() { getRoot: function () {
var gui = this; var gui = this;
while (gui.parent) { while (gui.parent) {
gui = gui.parent; gui = gui.parent;
@ -696,7 +704,7 @@ common.extend(
* this GUI as well as its remembered properties. * this GUI as well as its remembered properties.
* @instance * @instance
*/ */
getSaveObject: function() { getSaveObject: function () {
var toReturn = this.load; var toReturn = this.load;
@ -716,7 +724,7 @@ common.extend(
} }
toReturn.folders = {}; toReturn.folders = {};
common.each(this.__folders, function(element, key) { common.each(this.__folders, function (element, key) {
toReturn.folders[key] = element.getSaveObject(); toReturn.folders[key] = element.getSaveObject();
}); });
@ -724,7 +732,7 @@ common.extend(
}, },
save: function() { save: function () {
if (!this.load.remembered) { if (!this.load.remembered) {
this.load.remembered = {}; this.load.remembered = {};
@ -736,7 +744,7 @@ common.extend(
}, },
saveAs: function(presetName) { saveAs: function (presetName) {
if (!this.load.remembered) { if (!this.load.remembered) {
@ -753,9 +761,9 @@ common.extend(
}, },
revert: function(gui) { revert: function (gui) {
common.each(this.__controllers, function(controller) { common.each(this.__controllers, function (controller) {
// Make revert work on Default. // Make revert work on Default.
if (!this.getRoot().load.remembered) { if (!this.getRoot().load.remembered) {
controller.setValue(controller.initialValue); controller.setValue(controller.initialValue);
@ -764,7 +772,7 @@ common.extend(
} }
}, this); }, this);
common.each(this.__folders, function(folder) { common.each(this.__folders, function (folder) {
folder.revert(folder); folder.revert(folder);
}); });
@ -775,7 +783,7 @@ common.extend(
}, },
listen: function(controller) { listen: function (controller) {
var init = this.__listening.length == 0; var init = this.__listening.length == 0;
this.__listening.push(controller); this.__listening.push(controller);
@ -784,7 +792,6 @@ common.extend(
} }
} }
); );
function add(gui, object, property, params) { function add(gui, object, property, params) {
@ -801,7 +808,7 @@ function add(gui, object, property, params) {
} else { } else {
var factoryArgs = [object,property].concat(params.factoryArgs); var factoryArgs = [object, property].concat(params.factoryArgs);
controller = ControllerFactory.apply(gui, factoryArgs); controller = ControllerFactory.apply(gui, factoryArgs);
} }
@ -865,7 +872,7 @@ function augmentController(gui, li, controller) {
common.extend(controller, { common.extend(controller, {
options: function(options) { options: function (options) {
if (arguments.length > 1) { if (arguments.length > 1) {
controller.remove(); controller.remove();
@ -899,17 +906,17 @@ function augmentController(gui, li, controller) {
}, },
name: function(v) { name: function (v) {
controller.__li.firstElementChild.firstElementChild.innerHTML = v; controller.__li.firstElementChild.firstElementChild.innerHTML = v;
return controller; return controller;
}, },
listen: function() { listen: function () {
controller.__gui.listen(controller); controller.__gui.listen(controller);
return controller; return controller;
}, },
remove: function() { remove: function () {
controller.__gui.remove(controller); controller.__gui.remove(controller);
return controller; return controller;
} }
@ -920,12 +927,12 @@ function augmentController(gui, li, controller) {
if (controller instanceof NumberControllerSlider) { if (controller instanceof NumberControllerSlider) {
var box = new NumberControllerBox(controller.object, controller.property, var box = new NumberControllerBox(controller.object, controller.property,
{ min: controller.__min, max: controller.__max, step: controller.__step }); {min: controller.__min, max: controller.__max, step: controller.__step});
common.each(['updateDisplay', 'onChange', 'onFinishChange'], function(method) { common.each(['updateDisplay', 'onChange', 'onFinishChange'], function (method) {
var pc = controller[method]; var pc = controller[method];
var pb = box[method]; var pb = box[method];
controller[method] = box[method] = function() { controller[method] = box[method] = function () {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
pc.apply(controller, args); pc.apply(controller, args);
return pb.apply(box, args); return pb.apply(box, args);
@ -938,7 +945,7 @@ function augmentController(gui, li, controller) {
} }
else if (controller instanceof NumberControllerBox) { else if (controller instanceof NumberControllerBox) {
var r = function(returned) { var r = function (returned) {
// Have we defined both boundaries? // Have we defined both boundaries?
if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) { if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) {
@ -966,26 +973,26 @@ function augmentController(gui, li, controller) {
} }
else if (controller instanceof BooleanController) { else if (controller instanceof BooleanController) {
dom.bind(li, 'click', function() { dom.bind(li, 'click', function () {
dom.fakeEvent(controller.__checkbox, 'click'); dom.fakeEvent(controller.__checkbox, 'click');
}); });
dom.bind(controller.__checkbox, 'click', function(e) { dom.bind(controller.__checkbox, 'click', function (e) {
e.stopPropagation(); // Prevents double-toggle e.stopPropagation(); // Prevents double-toggle
}) })
} }
else if (controller instanceof FunctionController) { else if (controller instanceof FunctionController) {
dom.bind(li, 'click', function() { dom.bind(li, 'click', function () {
dom.fakeEvent(controller.__button, 'click'); dom.fakeEvent(controller.__button, 'click');
}); });
dom.bind(li, 'mouseover', function() { dom.bind(li, 'mouseover', function () {
dom.addClass(controller.__button, 'hover'); dom.addClass(controller.__button, 'hover');
}); });
dom.bind(li, 'mouseout', function() { dom.bind(li, 'mouseout', function () {
dom.removeClass(controller.__button, 'hover'); dom.removeClass(controller.__button, 'hover');
}); });
@ -993,7 +1000,7 @@ function augmentController(gui, li, controller) {
else if (controller instanceof ColorController) { else if (controller instanceof ColorController) {
dom.addClass(li, 'color'); dom.addClass(li, 'color');
controller.updateDisplay = common.compose(function(r) { controller.updateDisplay = common.compose(function (r) {
li.style.borderLeftColor = controller.__color.toString(); li.style.borderLeftColor = controller.__color.toString();
return r; return r;
}, controller.updateDisplay); }, controller.updateDisplay);
@ -1002,7 +1009,7 @@ function augmentController(gui, li, controller) {
} }
controller.setValue = common.compose(function(r) { controller.setValue = common.compose(function (r) {
if (gui.getRoot().__preset_select && controller.isModified()) { if (gui.getRoot().__preset_select && controller.isModified()) {
markPresetModified(gui.getRoot(), true); markPresetModified(gui.getRoot(), true);
} }
@ -1125,7 +1132,7 @@ function addSaveMenu(gui) {
if (gui.load && gui.load.remembered) { if (gui.load && gui.load.remembered) {
common.each(gui.load.remembered, function(value, key) { common.each(gui.load.remembered, function (value, key) {
addPresetOption(gui, key, key == gui.preset); addPresetOption(gui, key, key == gui.preset);
}); });
@ -1133,7 +1140,7 @@ function addSaveMenu(gui) {
addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false); addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false);
} }
dom.bind(select, 'change', function() { dom.bind(select, 'change', function () {
for (var index = 0; index < gui.__preset_select.length; index++) { for (var index = 0; index < gui.__preset_select.length; index++) {
@ -1170,7 +1177,7 @@ function addSaveMenu(gui) {
showHideExplain(); showHideExplain();
// TODO: Use a boolean controller, fool! // TODO: Use a boolean controller, fool!
dom.bind(localStorageCheckBox, 'change', function() { dom.bind(localStorageCheckBox, 'change', function () {
gui.useLocalStorage = !gui.useLocalStorage; gui.useLocalStorage = !gui.useLocalStorage;
showHideExplain(); showHideExplain();
}); });
@ -1179,29 +1186,29 @@ function addSaveMenu(gui) {
var newConstructorTextArea = document.getElementById('dg-new-constructor'); var newConstructorTextArea = document.getElementById('dg-new-constructor');
dom.bind(newConstructorTextArea, 'keydown', function(e) { dom.bind(newConstructorTextArea, 'keydown', function (e) {
if (e.metaKey && (e.which === 67 || e.keyCode == 67)) { if (e.metaKey && (e.which === 67 || e.keyCode == 67)) {
SAVE_DIALOGUE.hide(); SAVE_DIALOGUE.hide();
} }
}); });
dom.bind(gears, 'click', function() { dom.bind(gears, 'click', function () {
newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2); newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2);
SAVE_DIALOGUE.show(); SAVE_DIALOGUE.show();
newConstructorTextArea.focus(); newConstructorTextArea.focus();
newConstructorTextArea.select(); newConstructorTextArea.select();
}); });
dom.bind(button, 'click', function() { dom.bind(button, 'click', function () {
gui.save(); gui.save();
}); });
dom.bind(button2, 'click', function() { dom.bind(button2, 'click', function () {
var presetName = prompt('Enter a new preset name.'); var presetName = prompt('Enter a new preset name.');
if (presetName) gui.saveAs(presetName); if (presetName) gui.saveAs(presetName);
}); });
dom.bind(button3, 'click', function() { dom.bind(button3, 'click', function () {
gui.revert(); gui.revert();
}); });
@ -1273,7 +1280,8 @@ function setWidth(gui, w) {
// set the width manually if we want it to bleed to the edge // set the width manually if we want it to bleed to the edge
if (gui.__save_row && gui.autoPlace) { if (gui.__save_row && gui.autoPlace) {
gui.__save_row.style.width = w + 'px'; gui.__save_row.style.width = w + 'px';
}if (gui.__closeButton) { }
if (gui.__closeButton) {
gui.__closeButton.style.width = w + 'px'; gui.__closeButton.style.width = w + 'px';
} }
} }
@ -1283,7 +1291,7 @@ function getCurrentPreset(gui, useInitialValues) {
var toReturn = {}; var toReturn = {};
// For each object I'm remembering // For each object I'm remembering
common.each(gui.__rememberedObjects, function(val, index) { common.each(gui.__rememberedObjects, function (val, index) {
var saved_values = {}; var saved_values = {};
@ -1292,7 +1300,7 @@ function getCurrentPreset(gui, useInitialValues) {
gui.__rememberedObjectIndecesToControllers[index]; gui.__rememberedObjectIndecesToControllers[index];
// Remember each value for each property // Remember each value for each property
common.each(controller_map, function(controller, property) { common.each(controller_map, function (controller, property) {
saved_values[property] = useInitialValues ? controller.initialValue : controller.getValue(); saved_values[property] = useInitialValues ? controller.initialValue : controller.getValue();
}); });
@ -1338,13 +1346,13 @@ function updateDisplays(controllerArray) {
if (controllerArray.length != 0) { if (controllerArray.length != 0) {
requestAnimationFrame(function() { requestAnimationFrame(function () {
updateDisplays(controllerArray); updateDisplays(controllerArray);
}); });
} }
common.each(controllerArray, function(c) { common.each(controllerArray, function (c) {
c.updateDisplay(); c.updateDisplay();
}); });

9
src/dat/gui/_structure.scss
View File

@ -53,7 +53,6 @@ $button-height: 20px;
opacity: 1 !important; opacity: 1 !important;
} }
&:hover .close-button, &:hover .close-button,
.close-button.drag { .close-button.drag {
opacity: 1; opacity: 1;
@ -94,8 +93,6 @@ $button-height: 20px;
} }
} }
.save-row { .save-row {
position: fixed; position: fixed;
top: 0; top: 0;
@ -119,7 +116,7 @@ $button-height: 20px;
li.folder { li.folder {
padding: 0; padding: 0;
border-left: $nest-margin solid rgba(0,0,0,0); border-left: $nest-margin solid rgba(0, 0, 0, 0);
} }
@ -207,7 +204,6 @@ $button-height: 20px;
cursor: pointer; cursor: pointer;
} }
.selector { .selector {
display: none; display: none;
position: absolute; position: absolute;
@ -216,13 +212,11 @@ $button-height: 20px;
z-index: 10; z-index: 10;
} }
.c:hover .selector, .c:hover .selector,
.selector.drag { .selector.drag {
display: block; display: block;
} }
li.save-row { li.save-row {
padding: 0; padding: 0;
@ -242,7 +236,6 @@ $button-height: 20px;
line-height: 15px; line-height: 15px;
} }
} }
/* TODO Separate style and structure */ /* TODO Separate style and structure */

7
src/dat/gui/style.scss
View File

@ -51,7 +51,6 @@ $input-color: lighten($background-color, 8.5%);
/** Main type */ /** Main type */
.dg { .dg {
color: #eee; color: #eee;
font: 11px 'Lucida Grande', sans-serif; font: 11px 'Lucida Grande', sans-serif;
text-shadow: 0 -1px 0 #111; text-shadow: 0 -1px 0 #111;
@ -157,19 +156,16 @@ $input-color: lighten($background-color, 8.5%);
} }
} }
&.function:hover , &.function:hover,
&.boolean:hover { &.boolean:hover {
background: #111; background: #111;
} }
} }
/** Controllers */ /** Controllers */
.c { .c {
input[type=text] { input[type=text] {
background: $input-color; background: $input-color;
@ -184,7 +180,6 @@ $input-color: lighten($background-color, 8.5%);
} }
.slider { .slider {
background: $input-color; background: $input-color;
cursor: ew-resize; cursor: ew-resize;

2
tests/index.html
View File

@ -12,8 +12,6 @@
$.noConflict(); $.noConflict();
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// var dat = this['dat.gui'];
var math = dat.color.math; var math = dat.color.math;
var interpret = dat.color.interpret; var interpret = dat.color.interpret;
var Color = dat.color.Color; var Color = dat.color.Color;

26
webpack.config.js
View File

@ -1,26 +0,0 @@
var path = require("path");
module.exports = {
target: 'web',
context: path.resolve(__dirname, 'src'),
entry: {
main: '../index'
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }
]
},
output: {
path: path.join(__dirname, 'build'),
filename: 'dat.gui.js',
library: ['dat'],
libraryTarget: 'umd'
}
};

15
webpack.config.min.js vendored
View File

@ -1,15 +0,0 @@
var extend = require('extend'),
webpack = require('webpack'),
webpackConfig = require('./webpack.config');
var config = {
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
],
output: {
filename: 'dat.gui.min.js'
}
}
module.exports = extend(true, webpackConfig, config);