mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
add documentation generator, update JSDoc.
This commit is contained in:
Don McCurdy
Don McCurdy
parent
454e2dc524
commit
05c85ecf7d
423
API.md
Normal file
423
API.md
Normal 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 "abstract" 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 --->
|
||||
@ -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).
|
||||
|
||||
|
||||
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
"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-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": {
|
||||
@ -58,7 +59,9 @@
|
||||
"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.14.x"
|
||||
},
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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,10 +628,16 @@ common.extend(
|
||||
return gui;
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens the GUI.
|
||||
*/
|
||||
open: function() {
|
||||
this.closed = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Closes the GUI.
|
||||
*/
|
||||
close: function() {
|
||||
this.closed = true;
|
||||
},
|
||||
@ -632,9 +683,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)) {
|
||||
@ -775,6 +827,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');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user