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;

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

@ -17,17 +17,13 @@ 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,32 +31,22 @@ 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);
@ -78,11 +64,9 @@ 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);
@ -96,11 +80,9 @@ 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*\)/);
@ -116,11 +98,9 @@ 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*\)/);
@ -133,20 +113,15 @@ 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: {
@ -171,9 +146,7 @@ var INTERPRETATIONS = [
// Arrays // Arrays
{ {
litmus: common.isArray, litmus: common.isArray,
conversions: { conversions: {
RGB_ARRAY: { RGB_ARRAY: {
@ -190,7 +163,6 @@ 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: {
@ -208,11 +180,8 @@ 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
@ -322,14 +291,9 @@ var INTERPRETATIONS = [
v: color.v v: color.v
} }
} }
} }
} }
} }
]; ];
export default interpret; export default interpret;

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;

39
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;

26
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);
@ -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) {
@ -248,8 +238,7 @@ 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
@ -292,11 +281,8 @@ common.extend(
}); });
} }
} }
);
var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', '']; var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
function linearGradient(elem, x, a, b) { function linearGradient(elem, x, a, b) {

37
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;

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

@ -25,9 +25,9 @@ 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;
@ -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);
} }
@ -65,6 +55,4 @@ common.extend(
} }
} }
);
export default FunctionController; export default FunctionController;

56
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 || {};
@ -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;

35
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;
/** /**
@ -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;

44
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,10 +89,14 @@ 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.
@ -98,27 +105,4 @@ 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;

30
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;
@ -66,33 +66,21 @@ var OptionController = function(object, property, options) {
}); });
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;

25
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;
@ -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;

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

@ -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,6 +445,7 @@ 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;
@ -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 */
@ -784,7 +792,6 @@ common.extend(
} }
} }
); );
function add(gui, object, property, params) { function add(gui, object, property, params) {
@ -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';
} }
} }

7
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;
@ -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 */

5
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;
@ -164,12 +163,9 @@ $input-color: lighten($background-color, 8.5%);
} }
/** 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);