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

Merge branch 'master' into removefolder

Browse Source
This commit is contained in:
Don McCurdy 2017-12-23 11:46:11 -05:00 committed by GitHub
commit 1b7a6e2345
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 677 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

423
API.md Normal file
View File

@ -0,0 +1,423 @@
# dat.GUI API
Details about the classes, methods, and properties provided by dat.GUI. For more
hands-on examples, see the dat.GUI [tutorial](http://workshop.chromeexperiments.com/examples/gui).
<!--- API BEGIN --->
## Classes
<dl>
<dt><a href="#GUI">GUI</a></dt>
<dd><p>A lightweight controller library for JavaScript. It allows you to easily
manipulate variables and fire functions on the fly.</p>
</dd>
<dt><a href="#Controller">Controller</a></dt>
<dd><p>An &quot;abstract&quot; class that represents a given property of an object.</p>
</dd>
<dt><a href="#NumberController">NumberController</a> ⇐ <code>dat.controllers.Controller</code></dt>
<dd><p>Represents a given property of an object that is a number.</p>
</dd>
</dl>
<a name="GUI"></a>
## GUI
A lightweight controller library for JavaScript. It allows you to easily
manipulate variables and fire functions on the fly.
**Kind**: global class
* [GUI](#GUI)
* [new GUI([params])](#new_GUI_new)
* [.domElement](#GUI+domElement) : <code>DOMElement</code>
* [.parent](#GUI+parent) : <code>dat.gui.GUI</code>
* [.autoPlace](#GUI+autoPlace) : <code>Boolean</code>
* [.closeOnTop](#GUI+closeOnTop) : <code>Boolean</code>
* [.preset](#GUI+preset) : <code>String</code>
* [.width](#GUI+width) : <code>Number</code>
* [.name](#GUI+name) : <code>String</code>
* [.closed](#GUI+closed) : <code>Boolean</code>
* [.load](#GUI+load) : <code>Object</code>
* [.useLocalStorage](#GUI+useLocalStorage) : <code>Boolean</code>
* [.add(object, property, [min], [max], [step])](#GUI+add) ⇒ [<code>Controller</code>](#Controller)
* [.addColor(object, property)](#GUI+addColor) ⇒ [<code>Controller</code>](#Controller)
* [.remove(controller)](#GUI+remove)
* [.destroy()](#GUI+destroy)
* [.addFolder(name)](#GUI+addFolder) ⇒ <code>dat.gui.GUI</code>
* [.open()](#GUI+open)
* [.close()](#GUI+close)
* [.getRoot()](#GUI+getRoot) ⇒ <code>dat.gui.GUI</code>
* [.getSaveObject()](#GUI+getSaveObject) ⇒ <code>Object</code>
<a name="new_GUI_new"></a>
### new GUI([params])
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [params] | <code>Object</code> | | |
| [params.name] | <code>String</code> | | The name of this GUI. |
| [params.load] | <code>Object</code> | | JSON object representing the saved state of this GUI. |
| [params.auto] | <code>Boolean</code> | <code>true</code> | |
| [params.parent] | <code>dat.gui.GUI</code> | | The GUI I'm nested in. |
| [params.closed] | <code>Boolean</code> | | If true, starts closed |
| [params.closeOnTop] | <code>Boolean</code> | | If true, close/open button shows on top of the GUI |
**Example**
```js
// Creating a GUI with options.
var gui = new dat.GUI({name: 'My GUI'});
```
**Example**
```js
// Creating a GUI and a subfolder.
var gui = new dat.GUI();
var folder1 = gui.addFolder('Flow Field');
```
<a name="GUI+domElement"></a>
### gui.domElement : <code>DOMElement</code>
Outermost DOM Element
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+parent"></a>
### gui.parent : <code>dat.gui.GUI</code>
The parent <code>GUI</code>
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+autoPlace"></a>
### gui.autoPlace : <code>Boolean</code>
Handles <code>GUI</code>'s element placement for you
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+closeOnTop"></a>
### gui.closeOnTop : <code>Boolean</code>
Handles <code>GUI</code>'s position of open/close button
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+preset"></a>
### gui.preset : <code>String</code>
The identifier for a set of saved values
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+width"></a>
### gui.width : <code>Number</code>
The width of <code>GUI</code> element
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+name"></a>
### gui.name : <code>String</code>
The name of <code>GUI</code>. Used for folders. i.e
a folder's name
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+closed"></a>
### gui.closed : <code>Boolean</code>
Whether the <code>GUI</code> is collapsed or not
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+load"></a>
### gui.load : <code>Object</code>
Contains all presets
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+useLocalStorage"></a>
### gui.useLocalStorage : <code>Boolean</code>
Determines whether or not to use <a href="https://developer.mozilla.org/en/DOM/Storage#localStorage">localStorage</a> as the means for
<code>remember</code>ing
**Kind**: instance property of [<code>GUI</code>](#GUI)
<a name="GUI+add"></a>
### gui.add(object, property, [min], [max], [step]) ⇒ [<code>Controller</code>](#Controller)
Adds a new [Controller](#Controller) to the GUI. The type of controller created
is inferred from the initial value of <code>object[property]</code>. For
color properties, see [addColor](addColor).
**Kind**: instance method of [<code>GUI</code>](#GUI)
**Returns**: [<code>Controller</code>](#Controller) - The controller that was added to the GUI.
| Param | Type | Description |
| --- | --- | --- |
| object | <code>Object</code> | The object to be manipulated |
| property | <code>String</code> | The name of the property to be manipulated |
| [min] | <code>Number</code> | Minimum allowed value |
| [max] | <code>Number</code> | Maximum allowed value |
| [step] | <code>Number</code> | Increment by which to change value |
**Example**
```js
// Add a string controller.
var person = {name: 'Sam'};
gui.add(person, 'name');
```
**Example**
```js
// Add a number controller slider.
var person = {age: 45};
gui.add(person, 'age', 0, 100);
```
<a name="GUI+addColor"></a>
### gui.addColor(object, property) ⇒ [<code>Controller</code>](#Controller)
Adds a new color controller to the GUI.
**Kind**: instance method of [<code>GUI</code>](#GUI)
**Returns**: [<code>Controller</code>](#Controller) - The controller that was added to the GUI.
| Param |
| --- |
| object |
| property |
**Example**
```js
var palette = {
color1: '#FF0000', // CSS string
color2: [ 0, 128, 255 ], // RGB array
color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
gui.addColor(palette, 'color1');
gui.addColor(palette, 'color2');
gui.addColor(palette, 'color3');
gui.addColor(palette, 'color4');
```
<a name="GUI+remove"></a>
### gui.remove(controller)
Removes the given controller from the GUI.
**Kind**: instance method of [<code>GUI</code>](#GUI)
| Param | Type |
| --- | --- |
| controller | [<code>Controller</code>](#Controller) |
<a name="GUI+destroy"></a>
### gui.destroy()
Removes the GUI from the document and unbinds all event listeners.
**Kind**: instance method of [<code>GUI</code>](#GUI)
<a name="GUI+addFolder"></a>
### gui.addFolder(name) ⇒ <code>dat.gui.GUI</code>
Creates a new subfolder GUI instance.
**Kind**: instance method of [<code>GUI</code>](#GUI)
**Returns**: <code>dat.gui.GUI</code> - The new folder.
**Throws**:
- <code>Error</code> if this GUI already has a folder by the specified
name
| Param |
| --- |
| name |
<a name="GUI+open"></a>
### gui.open()
Opens the GUI.
**Kind**: instance method of [<code>GUI</code>](#GUI)
<a name="GUI+close"></a>
### gui.close()
Closes the GUI.
**Kind**: instance method of [<code>GUI</code>](#GUI)
<a name="GUI+getRoot"></a>
### gui.getRoot() ⇒ <code>dat.gui.GUI</code>
**Kind**: instance method of [<code>GUI</code>](#GUI)
**Returns**: <code>dat.gui.GUI</code> - the topmost parent GUI of a nested GUI.
<a name="GUI+getSaveObject"></a>
### gui.getSaveObject() ⇒ <code>Object</code>
**Kind**: instance method of [<code>GUI</code>](#GUI)
**Returns**: <code>Object</code> - a JSON object representing the current state of
this GUI as well as its remembered properties.
<a name="Controller"></a>
## Controller
An "abstract" class that represents a given property of an object.
**Kind**: global class
* [Controller](#Controller)
* [new Controller(object, property)](#new_Controller_new)
* [.domElement](#Controller+domElement) : <code>DOMElement</code>
* [.object](#Controller+object) : <code>Object</code>
* [.property](#Controller+property) : <code>String</code>
* [.onChange(fnc)](#Controller+onChange) ⇒ [<code>Controller</code>](#Controller)
* [.onFinishChange(fnc)](#Controller+onFinishChange) ⇒ [<code>Controller</code>](#Controller)
* [.setValue(newValue)](#Controller+setValue)
* [.getValue()](#Controller+getValue) ⇒ <code>Object</code>
* [.updateDisplay()](#Controller+updateDisplay) ⇒ [<code>Controller</code>](#Controller)
* [.isModified()](#Controller+isModified) ⇒ <code>Boolean</code>
<a name="new_Controller_new"></a>
### new Controller(object, property)
| Param | Type | Description |
| --- | --- | --- |
| object | <code>Object</code> | The object to be manipulated |
| property | <code>string</code> | The name of the property to be manipulated |
<a name="Controller+domElement"></a>
### controller.domElement : <code>DOMElement</code>
Those who extend this class will put their DOM elements in here.
**Kind**: instance property of [<code>Controller</code>](#Controller)
<a name="Controller+object"></a>
### controller.object : <code>Object</code>
The object to manipulate
**Kind**: instance property of [<code>Controller</code>](#Controller)
<a name="Controller+property"></a>
### controller.property : <code>String</code>
The name of the property to manipulate
**Kind**: instance property of [<code>Controller</code>](#Controller)
<a name="Controller+onChange"></a>
### controller.onChange(fnc) ⇒ [<code>Controller</code>](#Controller)
Specify that a function fire every time someone changes the value with
this Controller.
**Kind**: instance method of [<code>Controller</code>](#Controller)
**Returns**: [<code>Controller</code>](#Controller) - this
| Param | Type | Description |
| --- | --- | --- |
| fnc | <code>function</code> | This function will be called whenever the value is modified via this Controller. |
<a name="Controller+onFinishChange"></a>
### controller.onFinishChange(fnc) ⇒ [<code>Controller</code>](#Controller)
Specify that a function fire every time someone "finishes" changing
the value wih this Controller. Useful for values that change
incrementally like numbers or strings.
**Kind**: instance method of [<code>Controller</code>](#Controller)
**Returns**: [<code>Controller</code>](#Controller) - this
| Param | Type | Description |
| --- | --- | --- |
| fnc | <code>function</code> | This function will be called whenever someone "finishes" changing the value via this Controller. |
<a name="Controller+setValue"></a>
### controller.setValue(newValue)
Change the value of <code>object[property]</code>
**Kind**: instance method of [<code>Controller</code>](#Controller)
| Param | Type | Description |
| --- | --- | --- |
| newValue | <code>Object</code> | The new value of <code>object[property]</code> |
<a name="Controller+getValue"></a>
### controller.getValue() ⇒ <code>Object</code>
Gets the value of <code>object[property]</code>
**Kind**: instance method of [<code>Controller</code>](#Controller)
**Returns**: <code>Object</code> - The current value of <code>object[property]</code>
<a name="Controller+updateDisplay"></a>
### controller.updateDisplay() ⇒ [<code>Controller</code>](#Controller)
Refreshes the visual display of a Controller in order to keep sync
with the object's current value.
**Kind**: instance method of [<code>Controller</code>](#Controller)
**Returns**: [<code>Controller</code>](#Controller) - this
<a name="Controller+isModified"></a>
### controller.isModified() ⇒ <code>Boolean</code>
**Kind**: instance method of [<code>Controller</code>](#Controller)
**Returns**: <code>Boolean</code> - true if the value has deviated from initialValue
<a name="NumberController"></a>
## NumberController ⇐ <code>dat.controllers.Controller</code>
Represents a given property of an object that is a number.
**Kind**: global class
**Extends**: <code>dat.controllers.Controller</code>
* [NumberController](#NumberController) ⇐ <code>dat.controllers.Controller</code>
* [new NumberController(object, property, [params])](#new_NumberController_new)
* [.min(minValue)](#NumberController+min) ⇒ <code>dat.controllers.NumberController</code>
* [.max(maxValue)](#NumberController+max) ⇒ <code>dat.controllers.NumberController</code>
* [.step(stepValue)](#NumberController+step) ⇒ <code>dat.controllers.NumberController</code>
<a name="new_NumberController_new"></a>
### new NumberController(object, property, [params])
| Param | Type | Description |
| --- | --- | --- |
| object | <code>Object</code> | The object to be manipulated |
| property | <code>string</code> | The name of the property to be manipulated |
| [params] | <code>Object</code> | Optional parameters |
| [params.min] | <code>Number</code> | Minimum allowed value |
| [params.max] | <code>Number</code> | Maximum allowed value |
| [params.step] | <code>Number</code> | Increment by which to change value |
<a name="NumberController+min"></a>
### numberController.min(minValue) ⇒ <code>dat.controllers.NumberController</code>
Specify a minimum value for <code>object[property]</code>.
**Kind**: instance method of [<code>NumberController</code>](#NumberController)
**Returns**: <code>dat.controllers.NumberController</code> - this
| Param | Type | Description |
| --- | --- | --- |
| minValue | <code>Number</code> | The minimum value for <code>object[property]</code> |
<a name="NumberController+max"></a>
### numberController.max(maxValue) ⇒ <code>dat.controllers.NumberController</code>
Specify a maximum value for <code>object[property]</code>.
**Kind**: instance method of [<code>NumberController</code>](#NumberController)
**Returns**: <code>dat.controllers.NumberController</code> - this
| Param | Type | Description |
| --- | --- | --- |
| maxValue | <code>Number</code> | The maximum value for <code>object[property]</code> |
<a name="NumberController+step"></a>
### numberController.step(stepValue) ⇒ <code>dat.controllers.NumberController</code>
Specify a step value that dat.controllers.NumberController
increments by.
**Kind**: instance method of [<code>NumberController</code>](#NumberController)
**Default**: <code>if minimum and maximum specified increment is 1% of the
difference otherwise stepValue is 1</code>
**Returns**: <code>dat.controllers.NumberController</code> - this
| Param | Type | Description |
| --- | --- | --- |
| stepValue | <code>Number</code> | The step value for dat.controllers.NumberController |
<!--- API END --->

6
CHANGELOG.md
View File

@ -1,5 +1,11 @@
## Changelog
### 0.6.5
* Add browserify support. #137
### 0.6.4
* Fixed formatting issue on Windows. #136
* Fixed issue with color selector getting chopped off at bottom of gui. #136
### 0.6.3
* Added ability to put close button on top of the menu [ex: var gui = new dat.gui.GUI({closeOnTop:true})]. #106 #122

3
README.md
View File

@ -1,7 +1,8 @@
# dat.GUI
A lightweight graphical user interface for changing variables in JavaScript.
Get started with dat.GUI by reading the tutorial at http://workshop.chromeexperiments.com/examples/gui.
Get started with dat.GUI by reading the [tutorial](http://workshop.chromeexperiments.com/examples/gui)
or the [API documentation](API.md).

2
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "dat.gui",
"version": "0.6.3",
"version": "0.6.5",
"homepage": "https://github.com/dataarts/dat.gui.git",
"authors": [
"Google Data Arts Team <dataarts@google.com>"

11
build/dat.gui.css
View File

@ -10,7 +10,8 @@
/** Controller-half (right) */
/** Controller placement */
/** Shorter number boxes when slider is present. */
/** Ensure the entire boolean and function row shows a hand */ }
/** Ensure the entire boolean and function row shows a hand */
/** allow overflow for color selector */ }
.dg ul {
list-style: none;
margin: 0;
@ -66,7 +67,7 @@
.dg.a {
float: right;
margin-right: 15px;
overflow-x: hidden; }
overflow-y: visible; }
.dg.a.has-save > ul.close-top {
margin-top: 0; }
.dg.a.has-save > ul.close-bottom {
@ -93,7 +94,6 @@
cursor: auto;
height: 27px;
line-height: 27px;
overflow: visible;
padding: 0 4px 0 5px; }
.dg li.folder {
padding: 0;
@ -110,7 +110,8 @@
.dg .cr {
clear: both;
padding-left: 3px;
height: 27px; }
height: 27px;
overflow: hidden; }
.dg .property-name {
cursor: default;
float: left;
@ -151,6 +152,8 @@
.dg .cr.boolean,
.dg .cr.boolean * {
cursor: pointer; }
.dg .cr.color {
overflow: visible; }
.dg .selector {
display: none;
position: absolute;

52
build/dat.gui.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
index.js
View File

@ -13,4 +13,4 @@
import dat from './src/dat/index';
module.exports = dat;
export default dat;

46
package.json
View File

@ -1,16 +1,41 @@
{
"name": "dat.gui",
"version": "0.6.3",
"version": "0.6.5",
"description": "A lightweight graphical user interface for changing variables in JavaScript.",
"main": "index.js",
"directories": {
"test": "tests"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
],
[
"stringify",
{
"extensions": [
".html"
]
}
],
[
"sassify"
]
]
},
"scripts": {
"dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap",
"build": "npm run build-js && npm run build-css",
"build-js": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
"build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css"
"build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css",
"build-docs": "jsdoc2md -f src/dat/gui/GUI.js src/dat/controllers/Controller.js src/dat/controllers/NumberController.js | replace-between --target API.md --token API",
"postversion": "git push && git push --tags && npm publish"
},
"repository": {
"type": "git",
@ -25,7 +50,7 @@
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.25.0",
"eslint": "^3.5.0",
@ -34,17 +59,24 @@
"eslint-plugin-import": "^1.15.0",
"extend": "^3.0.0",
"html-loader": "^0.4.4",
"jsdoc-to-markdown": "^3.0.2",
"node-sass": "^3.10.0",
"replace-between": "0.0.8",
"sass-loader": "^4.0.2",
"webpack": "^1.13.2"
"webpack": "1.14.x"
},
"dependencies": {
"babel-preset-es2015": "^6.14.0",
"babelify": "^7.3.0",
"sassify": "^2.0.0",
"stringify": "^5.1.0"
},
"dependencies": {},
"eslintConfig": {
"extends": "airbnb-base",
"rules": {
"comma-dangle": 0,
"func-names": 0,
"no-alert": 1,
"no-alert": 0,
"no-console": 1,
"no-use-before-define": 0,
"prefer-rest-params": 0,
@ -59,7 +91,7 @@
"max-len": 0,
"no-param-reassign": 0,
"consistent-return": 0,
"no-restricted-syntax": 1,
"no-restricted-syntax": 0,
"no-bitwise": 0,
"no-plusplus": 0
}

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

@ -16,12 +16,11 @@ import dom from '../dom/dom';
/**
* @class Provides a checkbox input to alter the boolean property of an object.
*
* @extends dat.controllers.Controller
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
*
* @member dat.controllers
*/
class BooleanController extends Controller {
constructor(object, property) {

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

@ -17,6 +17,11 @@ import Color from '../color/Color';
import interpret from '../color/interpret';
import common from '../utils/common';
/**
* @class Represents a given property of an object that is a color.
* @param {Object} object
* @param {string} property
*/
class ColorController extends Controller {
constructor(object, property) {
super(object, property);

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

@ -16,8 +16,6 @@
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
*
* @member dat.controllers
*/
class Controller {
constructor(object, property) {

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

@ -21,8 +21,6 @@ import dom from '../dom/dom';
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
*
* @member dat.controllers
*/
class FunctionController extends Controller {
constructor(object, property, text) {

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

@ -34,8 +34,6 @@ function numDecimals(x) {
* @param {Number} [params.min] Minimum allowed value
* @param {Number} [params.max] Maximum allowed value
* @param {Number} [params.step] Increment by which to change value
*
* @member dat.controllers
*/
class NumberController extends Controller {
constructor(object, property, params) {
@ -84,8 +82,8 @@ class NumberController extends Controller {
* <code>object[property]</code>
* @returns {dat.controllers.NumberController} this
*/
min(v) {
this.__min = v;
min(minValue) {
this.__min = minValue;
return this;
}
@ -96,8 +94,8 @@ class NumberController extends Controller {
* <code>object[property]</code>
* @returns {dat.controllers.NumberController} this
*/
max(v) {
this.__max = v;
max(maxValue) {
this.__max = maxValue;
return this;
}
@ -111,10 +109,10 @@ class NumberController extends Controller {
* difference otherwise stepValue is 1
* @returns {dat.controllers.NumberController} this
*/
step(v) {
this.__step = v;
this.__impliedStep = v;
this.__precision = numDecimals(v);
step(stepValue) {
this.__step = stepValue;
this.__impliedStep = stepValue;
this.__precision = numDecimals(stepValue);
return this;
}
}

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

@ -33,8 +33,6 @@ function roundToDecimal(value, decimals) {
* @param {Number} [params.min] Minimum allowed value
* @param {Number} [params.max] Maximum allowed value
* @param {Number} [params.step] Increment by which to change value
*
* @member dat.controllers
*/
class NumberControllerBox extends NumberController {
constructor(object, property, params) {

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

@ -33,8 +33,6 @@ function map(v, i1, i2, o1, o2) {
* @param {Number} minValue Minimum allowed value
* @param {Number} maxValue Maximum allowed value
* @param {Number} stepValue Increment by which to change value
*
* @member dat.controllers
*/
class NumberControllerSlider extends NumberController {
constructor(object, property, min, max, step) {

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

@ -25,8 +25,6 @@ import common from '../utils/common';
* @param {string} property The name of the property to be manipulated
* @param {Object|string[]} options A map of labels to acceptable values, or
* a list of acceptable string values.
*
* @member dat.controllers
*/
class OptionController extends Controller {
constructor(object, property, opts) {

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

@ -21,8 +21,6 @@ import dom from '../dom/dom';
*
* @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated
*
* @member dat.controllers
*/
class StringController extends Controller {
constructor(object, property) {

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

@ -29,12 +29,12 @@ import styleSheet from './style.scss'; // CSS to embed in build
css.inject(styleSheet);
/** Outer-most className for GUI's */
/** @ignore Outer-most className for GUI's */
const CSS_NAMESPACE = 'dg';
const HIDE_KEY_CODE = 72;
/** The only value shared between the JS and SCSS. Use caution. */
/** @ignore The only value shared between the JS and SCSS. Use caution. */
const CLOSE_BUTTON_HEIGHT = 20;
const DEFAULT_DEFAULT_PRESET_NAME = 'Default';
@ -49,24 +49,32 @@ const SUPPORTS_LOCAL_STORAGE = (function() {
let SAVE_DIALOGUE;
/** Have we yet to create an autoPlace GUI? */
/** @ignore Have we yet to create an autoPlace GUI? */
let autoPlaceVirgin = true;
/** Fixed position div that auto place GUI's go inside */
/** @ignore Fixed position div that auto place GUI's go inside */
let autoPlaceContainer;
/** Are we hiding the GUI's ? */
/** @ignore Are we hiding the GUI's ? */
let hide = false;
/** GUI's which should be hidden */
/** @private GUI's which should be hidden */
const hideableGuis = [];
/**
* A lightweight controller library for JavaScript. It allows you to easily
* @class A lightweight controller library for JavaScript. It allows you to easily
* manipulate variables and fire functions on the fly.
* @class
*
* @member dat.gui
* @typicalname gui
*
* @example
* // Creating a GUI with options.
* var gui = new dat.GUI({name: 'My GUI'});
*
* @example
* // Creating a GUI and a subfolder.
* var gui = new dat.GUI();
* var folder1 = gui.addFolder('Flow Field');
*
* @param {Object} [params]
* @param {String} [params.name] The name of this GUI.
@ -84,7 +92,7 @@ const GUI = function(pars) {
/**
* Outermost DOM Element
* @type DOMElement
* @type {DOMElement}
*/
this.domElement = document.createElement('div');
this.__ul = document.createElement('ul');
@ -170,7 +178,7 @@ const GUI = function(pars) {
let saveToLocalStorage;
Object.defineProperties(this,
/** @lends dat.gui.GUI.prototype */
/** @lends GUI.prototype */
{
/**
* The parent <code>GUI</code>
@ -478,14 +486,31 @@ dom.bind(window, 'keydown', GUI._keydownHandler, false);
common.extend(
GUI.prototype,
/** @lends dat.gui.GUI */
/** @lends GUI.prototype */
{
/**
* @param object
* @param property
* @returns {dat.controllers.Controller} The new controller that was added.
* Adds a new {@link Controller} to the GUI. The type of controller created
* is inferred from the initial value of <code>object[property]</code>. For
* color properties, see {@link addColor}.
*
* @param {Object} object The object to be manipulated
* @param {String} property The name of the property to be manipulated
* @param {Number} [min] Minimum allowed value
* @param {Number} [max] Maximum allowed value
* @param {Number} [step] Increment by which to change value
* @returns {Controller} The controller that was added to the GUI.
* @instance
*
* @example
* // Add a string controller.
* var person = {name: 'Sam'};
* gui.add(person, 'name');
*
* @example
* // Add a number controller slider.
* var person = {age: 45};
* gui.add(person, 'age', 0, 100);
*/
add: function(object, property) {
return add(
@ -499,10 +524,24 @@ common.extend(
},
/**
* Adds a new color controller to the GUI.
*
* @param object
* @param property
* @returns {dat.controllers.ColorController} The new controller that was added.
* @returns {Controller} The controller that was added to the GUI.
* @instance
*
* @example
* var palette = {
* color1: '#FF0000', // CSS string
* color2: [ 0, 128, 255 ], // RGB array
* color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
* color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
* };
* gui.addColor(palette, 'color1');
* gui.addColor(palette, 'color2');
* gui.addColor(palette, 'color3');
* gui.addColor(palette, 'color4');
*/
addColor: function(object, property) {
return add(
@ -516,7 +555,8 @@ common.extend(
},
/**
* @param controller
* Removes the given controller from the GUI.
* @param {Controller} controller
* @instance
*/
remove: function(controller) {
@ -529,6 +569,10 @@ common.extend(
});
},
/**
* Removes the GUI from the document and unbinds all event listeners.
* @instance
*/
destroy: function() {
if (this.autoPlace) {
autoPlaceContainer.removeChild(this.domElement);
@ -543,6 +587,7 @@ common.extend(
},
/**
* Creates a new subfolder GUI instance.
* @param name
* @returns {dat.gui.GUI} The new folder.
* @throws {Error} if this GUI already has a folder by the specified
@ -583,6 +628,11 @@ common.extend(
return gui;
},
/**
* Removes a subfolder GUI instance.
* {dat.gui.GUI} folder The folder to remove.
* @instance
*/
removeFolder: function(folder) {
this.__ul.removeChild(folder.domElement.parentElement);
@ -601,10 +651,16 @@ common.extend(
});
},
/**
* Opens the GUI.
*/
open: function() {
this.closed = false;
},
/**
* Closes the GUI.
*/
close: function() {
this.closed = true;
},
@ -650,9 +706,10 @@ common.extend(
* the GUI grows. When remembering new objects, append them to the end
* of the list.
*
* @param {Object...} objects
* @param {...Object} objects
* @throws {Error} if not called on a top level GUI.
* @instance
* @ignore
*/
remember: function() {
if (common.isUndefined(SAVE_DIALOGUE)) {
@ -793,6 +850,8 @@ common.extend(
* @param gui
* @param [newDom] If specified, inserts the dom content in the new row
* @param [liBefore] If specified, places the new row before another row
*
* @ignore
*/
function addRow(gui, newDom, liBefore) {
const li = document.createElement('li');
@ -1290,4 +1349,4 @@ function updateDisplays(controllerArray) {
});
}
module.exports = GUI;
export default GUI;

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

@ -89,7 +89,7 @@ $button-height: 20px;
float: right;
margin-right: 15px;
overflow-x: hidden;
overflow-y:visible;
&.has-save > ul {
@ -130,7 +130,6 @@ $button-height: 20px;
cursor: auto;
height: $row-height;
line-height: $row-height;
overflow: visible;
padding: 0 4px 0 5px;
}
@ -160,6 +159,7 @@ $button-height: 20px;
clear: both;
padding-left: 3px;
height: $row-height;
overflow: hidden;
}
/** Name-half (left) */
@ -225,6 +225,11 @@ $button-height: 20px;
cursor: pointer;
}
/** allow overflow for color selector */
.cr.color {
overflow: visible;
}
.selector {
display: none;
position: absolute;

3
webpack/webpack.config.js
View File

@ -37,7 +37,8 @@ module.exports = {
loader: 'babel',
exclude: /(node_modules|bower_components)/,
query: {
presets: [["es2015", {"loose": true}], "stage-0"]
presets: [["es2015", {"loose": true}], "stage-0"],
plugins: ["add-module-exports"]
}
},
{