A lightweight controller library for JavaScript. It allows you to easily\nmanipulate variables and fire functions on the fly.
\nAn "abstract" class that represents a given property of an object.
\ndat.controllers.ControllerRepresents a given property of an object that is a number.
\nDOMElement\n * [.parent](#GUI+parent) : dat.gui.GUI\n * [.autoPlace](#GUI+autoPlace) : Boolean\n * [.closeOnTop](#GUI+closeOnTop) : Boolean\n * [.preset](#GUI+preset) : String\n * [.width](#GUI+width) : Number\n * [.name](#GUI+name) : String\n * [.closed](#GUI+closed) : Boolean\n * [.load](#GUI+load) : Object\n * [.useLocalStorage](#GUI+useLocalStorage) : Boolean\n * [.add(object, property, [min], [max], [step])](#GUI+add) ⇒ [Controller](#Controller)\n * [.addColor(object, property)](#GUI+addColor) ⇒ [Controller](#Controller)\n * [.remove(controller)](#GUI+remove)\n * [.destroy()](#GUI+destroy)\n * [.addFolder(name)](#GUI+addFolder) ⇒ dat.gui.GUI\n * [.removeFolder(folder)](#GUI+removeFolder)\n * [.open()](#GUI+open)\n * [.close()](#GUI+close)\n * [.hide()](#GUI+hide)\n * [.show()](#GUI+show)\n * [.getRoot()](#GUI+getRoot) ⇒ dat.gui.GUI\n * [.getSaveObject()](#GUI+getSaveObject) ⇒ Object\n\n\n\n### new GUI([params])\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| [params] | Object | | |\n| [params.name] | String | | The name of this GUI. |\n| [params.load] | Object | | JSON object representing the saved state of this GUI. |\n| [params.parent] | dat.gui.GUI | | The GUI I'm nested in. |\n| [params.autoPlace] | Boolean | true | |\n| [params.hideable] | Boolean | true | If true, GUI is shown/hidden by h keypress. |\n| [params.closed] | Boolean | false | If true, starts closed |\n| [params.closeOnTop] | Boolean | false | If true, close/open button shows on top of the GUI |\n\n**Example** \n```js\n// Creating a GUI with options.\nvar gui = new dat.GUI({name: 'My GUI'});\n```\n**Example** \n```js\n// Creating a GUI and a subfolder.\nvar gui = new dat.GUI();\nvar folder1 = gui.addFolder('Flow Field');\n```\n\n\n### gui.domElement : DOMElement\nOutermost DOM Element\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.parent : dat.gui.GUI\nThe parent GUI\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.autoPlace : Boolean\nHandles GUI's element placement for you\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.closeOnTop : Boolean\nHandles GUI's position of open/close button\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.preset : String\nThe identifier for a set of saved values\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.width : Number\nThe width of GUI element\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.name : String\nThe name of GUI. Used for folders. i.e\na folder's name\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.closed : Boolean\nWhether the GUI is collapsed or not\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.load : Object\nContains all presets\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.useLocalStorage : Boolean\nDetermines whether or not to use localStorage as the means for\nremembering\n\n**Kind**: instance property of [GUI](#GUI) \n\n\n### gui.add(object, property, [min], [max], [step]) ⇒ [Controller](#Controller)\nAdds a new [Controller](#Controller) to the GUI. The type of controller created\nis inferred from the initial value of object[property]. For\ncolor properties, see [addColor](addColor).\n\n**Kind**: instance method of [GUI](#GUI) \n**Returns**: [Controller](#Controller) - The controller that was added to the GUI. \n\n| Param | Type | Description |\n| --- | --- | --- |\n| object | Object | The object to be manipulated |\n| property | String | The name of the property to be manipulated |\n| [min] | Number | Minimum allowed value |\n| [max] | Number | Maximum allowed value |\n| [step] | Number | Increment by which to change value |\n\n**Example** \n```js\n// Add a string controller.\nvar person = {name: 'Sam'};\ngui.add(person, 'name');\n```\n**Example** \n```js\n// Add a number controller slider.\nvar person = {age: 45};\ngui.add(person, 'age', 0, 100);\n```\n\n\n### gui.addColor(object, property) ⇒ [Controller](#Controller)\nAdds a new color controller to the GUI.\n\n**Kind**: instance method of [GUI](#GUI) \n**Returns**: [Controller](#Controller) - The controller that was added to the GUI. \n\n| Param |\n| --- |\n| object | \n| property | \n\n**Example** \n```js\nvar palette = {\n color1: '#FF0000', // CSS string\n color2: [ 0, 128, 255 ], // RGB array\n color3: [ 0, 128, 255, 0.3 ], // RGB with alpha\n color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value\n};\ngui.addColor(palette, 'color1');\ngui.addColor(palette, 'color2');\ngui.addColor(palette, 'color3');\ngui.addColor(palette, 'color4');\n```\n\n\n### gui.remove(controller)\nRemoves the given controller from the GUI.\n\n**Kind**: instance method of [GUI](#GUI) \n\n| Param | Type |\n| --- | --- |\n| controller | [Controller](#Controller) | \n\n\n\n### gui.destroy()\nRemoves the root GUI from the document and unbinds all event listeners.\nFor subfolders, use `gui.removeFolder(folder)` instead.\n\n**Kind**: instance method of [GUI](#GUI) \n\n\n### gui.addFolder(name) ⇒ dat.gui.GUI\nCreates a new subfolder GUI instance.\n\n**Kind**: instance method of [GUI](#GUI) \n**Returns**: dat.gui.GUI - The new folder. \n**Throws**:\n\n- Error if this GUI already has a folder by the specified\nname\n\n\n| Param |\n| --- |\n| name | \n\n\n\n### gui.removeFolder(folder)\nRemoves a subfolder GUI instance.\n\n**Kind**: instance method of [GUI](#GUI) \n\n| Param | Type | Description |\n| --- | --- | --- |\n| folder | dat.gui.GUI | The folder to remove. |\n\n\n\n### gui.open()\nOpens the GUI.\n\n**Kind**: instance method of [GUI](#GUI) \n\n\n### gui.close()\nCloses the GUI.\n\n**Kind**: instance method of [GUI](#GUI) \n\n\n### gui.hide()\nHides the GUI.\n\n**Kind**: instance method of [GUI](#GUI) \n\n\n### gui.show()\nShows the GUI.\n\n**Kind**: instance method of [GUI](#GUI) \n\n\n### gui.getRoot() ⇒ dat.gui.GUI\n**Kind**: instance method of [GUI](#GUI) \n**Returns**: dat.gui.GUI - the topmost parent GUI of a nested GUI. \n\n\n### gui.getSaveObject() ⇒ Object\n**Kind**: instance method of [GUI](#GUI) \n**Returns**: Object - a JSON object representing the current state of\nthis GUI as well as its remembered properties. \n\n\n## Controller\nAn \"abstract\" class that represents a given property of an object.\n\n**Kind**: global class \n\n* [Controller](#Controller)\n * [new Controller(object, property)](#new_Controller_new)\n * [.domElement](#Controller+domElement) : DOMElement\n * [.object](#Controller+object) : Object\n * [.property](#Controller+property) : String\n * [.options(options)](#Controller+options) ⇒ [Controller](#Controller)\n * [.name(name)](#Controller+name) ⇒ [Controller](#Controller)\n * [.listen()](#Controller+listen) ⇒ [Controller](#Controller)\n * [.remove()](#Controller+remove) ⇒ [Controller](#Controller)\n * [.onChange(fnc)](#Controller+onChange) ⇒ [Controller](#Controller)\n * [.onFinishChange(fnc)](#Controller+onFinishChange) ⇒ [Controller](#Controller)\n * [.setValue(newValue)](#Controller+setValue)\n * [.getValue()](#Controller+getValue) ⇒ Object\n * [.updateDisplay()](#Controller+updateDisplay) ⇒ [Controller](#Controller)\n * [.isModified()](#Controller+isModified) ⇒ Boolean\n\n\n\n### new Controller(object, property)\n\n| Param | Type | Description |\n| --- | --- | --- |\n| object | Object | The object to be manipulated |\n| property | string | The name of the property to be manipulated |\n\n\n\n### controller.domElement : DOMElement\nThose who extend this class will put their DOM elements in here.\n\n**Kind**: instance property of [Controller](#Controller) \n\n\n### controller.object : Object\nThe object to manipulate\n\n**Kind**: instance property of [Controller](#Controller) \n\n\n### controller.property : String\nThe name of the property to manipulate\n\n**Kind**: instance property of [Controller](#Controller) \n\n\n### controller.options(options) ⇒ [Controller](#Controller)\n**Kind**: instance method of [Controller](#Controller) \n\n| Param | Type |\n| --- | --- |\n| options | Array \\| Object | \n\n\n\n### controller.name(name) ⇒ [Controller](#Controller)\nSets the name of the controller.\n\n**Kind**: instance method of [Controller](#Controller) \n\n| Param | Type |\n| --- | --- |\n| name | string | \n\n\n\n### controller.listen() ⇒ [Controller](#Controller)\nSets controller to listen for changes on its underlying object.\n\n**Kind**: instance method of [Controller](#Controller) \n\n\n### controller.remove() ⇒ [Controller](#Controller)\nRemoves the controller from its parent GUI.\n\n**Kind**: instance method of [Controller](#Controller) \n\n\n### controller.onChange(fnc) ⇒ [Controller](#Controller)\nSpecify that a function fire every time someone changes the value with\nthis Controller.\n\n**Kind**: instance method of [Controller](#Controller) \n**Returns**: [Controller](#Controller) - this \n\n| Param | Type | Description |\n| --- | --- | --- |\n| fnc | function | This function will be called whenever the value is modified via this Controller. |\n\n\n\n### controller.onFinishChange(fnc) ⇒ [Controller](#Controller)\nSpecify that a function fire every time someone \"finishes\" changing\nthe value wih this Controller. Useful for values that change\nincrementally like numbers or strings.\n\n**Kind**: instance method of [Controller](#Controller) \n**Returns**: [Controller](#Controller) - this \n\n| Param | Type | Description |\n| --- | --- | --- |\n| fnc | function | This function will be called whenever someone \"finishes\" changing the value via this Controller. |\n\n\n\n### controller.setValue(newValue)\nChange the value of object[property]\n\n**Kind**: instance method of [Controller](#Controller) \n\n| Param | Type | Description |\n| --- | --- | --- |\n| newValue | Object | The new value of object[property] |\n\n\n\n### controller.getValue() ⇒ Object\nGets the value of object[property]\n\n**Kind**: instance method of [Controller](#Controller) \n**Returns**: Object - The current value of object[property] \n\n\n### controller.updateDisplay() ⇒ [Controller](#Controller)\nRefreshes the visual display of a Controller in order to keep sync\nwith the object's current value.\n\n**Kind**: instance method of [Controller](#Controller) \n**Returns**: [Controller](#Controller) - this \n\n\n### controller.isModified() ⇒ Boolean\n**Kind**: instance method of [Controller](#Controller) \n**Returns**: Boolean - true if the value has deviated from initialValue \n\n\n## NumberController ⇐ dat.controllers.Controller\nRepresents a given property of an object that is a number.\n\n**Kind**: global class \n**Extends**: dat.controllers.Controller \n\n* [NumberController](#NumberController) ⇐ dat.controllers.Controller\n * [new NumberController(object, property, [params])](#new_NumberController_new)\n * [.min(minValue)](#NumberController+min) ⇒ dat.controllers.NumberController\n * [.max(maxValue)](#NumberController+max) ⇒ dat.controllers.NumberController\n * [.step(stepValue)](#NumberController+step) ⇒ dat.controllers.NumberController\n\n\n\n### new NumberController(object, property, [params])\n\n| Param | Type | Description |\n| --- | --- | --- |\n| object | Object | The object to be manipulated |\n| property | string | The name of the property to be manipulated |\n| [params] | Object | Optional parameters |\n| [params.min] | Number | Minimum allowed value |\n| [params.max] | Number | Maximum allowed value |\n| [params.step] | Number | Increment by which to change value |\n\n\n\n### numberController.min(minValue) ⇒ dat.controllers.NumberController\nSpecify a minimum value for object[property].\n\n**Kind**: instance method of [NumberController](#NumberController) \n**Returns**: dat.controllers.NumberController - this \n\n| Param | Type | Description |\n| --- | --- | --- |\n| minValue | Number | The minimum value for object[property] |\n\n\n\n### numberController.max(maxValue) ⇒ dat.controllers.NumberController\nSpecify a maximum value for object[property].\n\n**Kind**: instance method of [NumberController](#NumberController) \n**Returns**: dat.controllers.NumberController - this \n\n| Param | Type | Description |\n| --- | --- | --- |\n| maxValue | Number | The maximum value for object[property] |\n\n\n\n### numberController.step(stepValue) ⇒ dat.controllers.NumberController\nSpecify a step value that dat.controllers.NumberController\nincrements by.\n\n**Kind**: instance method of [NumberController](#NumberController) \n**Default**: if minimum and maximum specified increment is 1% of the\ndifference otherwise stepValue is 1 \n**Returns**: dat.controllers.NumberController - this \n\n| Param | Type | Description |\n| --- | --- | --- |\n| stepValue | Number | The step value for dat.controllers.NumberController |\n\n\n"
},
{
"path": "LICENSE",
"content": "\n Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2014, Google Inc.\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n"
},
{
"path": "README.md",
"content": "# dat.GUI\nA lightweight graphical user interface for changing variables in JavaScript.\n\nGet started with dat.GUI by reading the [API documentation](API.md).\n\n\n\n## Packaged Builds\nThe easiest way to use dat.GUI in your code is by using the built source at `build/dat.gui.min.js`. These built JavaScript files bundle all the necessary dependencies to run dat.GUI.\n\nIn your `head` tag, include the following code:\n```html\n\n```\n\n## Installing from npm\n\n```bash\n$ npm install --save dat.gui\n```\n\n```js\n// CommonJS:\nconst dat = require('dat.gui');\n\n// ES6:\nimport * as dat from 'dat.gui';\n\nconst gui = new dat.GUI();\n```\n\n## Directory Contents\n\n```\n├── build - Compiled source code.\n├── src - Source files.\n└── tests - Tests.\n```\n\n## Building your own dat.GUI\n\nIn the terminal, enter the following:\n\n```\n$ npm install\n$ npm run build\n```\n\n## npm scripts\n\n- npm run build - Build development and production version of scripts.\n- npm run dev - Build development version of script and watch for changes.\n\n\n## Working with Content Security Policy\nIf you're using a server with a Content Security Policy in place that blocks 'unsafe-inline', you will have problems when dat.gui.js tries to inject style information. To get around this, load 'build/dat.gui.css' as an external style sheet.\n\n## Changes\nView the [Change Log](https://github.com/dataarts/dat.gui)\n\n## Thanks\nThe following libraries / open-source projects were used in the development of dat.GUI:\n * [Rollup](https://rollupjs.org)\n * [Sass](http://sass-lang.com/)\n * [Node.js](http://nodejs.org/)\n * [QUnit](https://github.com/jquery/qunit) / [jquery](http://jquery.com/)\n"
},
{
"path": "bower.json",
"content": "{\n \"name\": \"dat.gui\",\n \"homepage\": \"https://github.com/dataarts/dat.gui.git\",\n \"authors\": [\n \"Google Data Arts Team GUI's constructor:\\n\\n \\n\\n localStorage on exit.\\n\\n localStorage will\\n override those passed to dat.GUI's constructor. This makes it\\n easier to work incrementally, but localStorage is fragile,\\n and your friends may not see the same values you do.\\n\\n GUI's constructor:\\n\\n \\n\\n localStorage on exit.\\n\\n localStorage will\\n override those passed to dat.GUI's constructor. This makes it\\n easier to work incrementally, but localStorage is fragile,\\n and your friends may not see the same values you do.\\n\\n object[property]\n *\n * @param {Object} newValue The new value of object[property]\n */\n setValue(newValue) {\n this.object[this.property] = newValue;\n if (this.__onChange) {\n this.__onChange.call(this, newValue);\n }\n\n this.updateDisplay();\n return this;\n }\n\n /**\n * Gets the value of object[property]\n *\n * @returns {Object} The current value of object[property]\n */\n getValue() {\n return this.object[this.property];\n }\n\n /**\n * Refreshes the visual display of a Controller in order to keep sync\n * with the object's current value.\n * @returns {Controller} this\n */\n updateDisplay() {\n return this;\n }\n\n /**\n * @returns {boolean} true if the value has deviated from initialValue\n */\n isModified() {\n return this.initialValue !== this.getValue();\n }\n}\n\nexport default Controller;\n"
},
{
"path": "src/dat/controllers/ControllerFactory.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport OptionController from './OptionController';\nimport NumberControllerBox from './NumberControllerBox';\nimport NumberControllerSlider from './NumberControllerSlider';\nimport StringController from './StringController';\nimport FunctionController from './FunctionController';\nimport BooleanController from './BooleanController';\nimport common from '../utils/common';\n\nconst ControllerFactory = function(object, property) {\n const initialValue = object[property];\n\n // Providing options?\n if (common.isArray(arguments[2]) || common.isObject(arguments[2])) {\n return new OptionController(object, property, arguments[2]);\n }\n\n // Providing a map?\n if (common.isNumber(initialValue)) {\n // Has min and max? (slider)\n if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {\n // has step?\n if (common.isNumber(arguments[4])) {\n return new NumberControllerSlider(object, property,\n arguments[2], arguments[3], arguments[4]);\n }\n\n return new NumberControllerSlider(object, property, arguments[2], arguments[3]);\n }\n\n // number box\n if (common.isNumber(arguments[4])) { // has step\n return new NumberControllerBox(object, property,\n { min: arguments[2], max: arguments[3], step: arguments[4] });\n }\n return new NumberControllerBox(object, property, { min: arguments[2], max: arguments[3] });\n }\n\n if (common.isString(initialValue)) {\n return new StringController(object, property);\n }\n\n if (common.isFunction(initialValue)) {\n return new FunctionController(object, property, '');\n }\n\n if (common.isBoolean(initialValue)) {\n return new BooleanController(object, property);\n }\n\n return null;\n};\n\nexport default ControllerFactory;\n"
},
{
"path": "src/dat/controllers/FunctionController.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport Controller from './Controller';\nimport dom from '../dom/dom';\n\n/**\n * @class Provides a GUI interface to fire a specified method, a property of an object.\n *\n * @extends dat.controllers.Controller\n *\n * @param {Object} object The object to be manipulated\n * @param {string} property The name of the property to be manipulated\n */\nclass FunctionController extends Controller {\n constructor(object, property, text) {\n super(object, property);\n\n const _this = this;\n\n this.__button = document.createElement('div');\n this.__button.innerHTML = text === undefined ? 'Fire' : text;\n\n dom.bind(this.__button, 'click', function(e) {\n e.preventDefault();\n _this.fire();\n return false;\n });\n\n dom.addClass(this.__button, 'button');\n\n this.domElement.appendChild(this.__button);\n }\n\n fire() {\n if (this.__onChange) {\n this.__onChange.call(this);\n }\n this.getValue().call(this.object);\n if (this.__onFinishChange) {\n this.__onFinishChange.call(this, this.getValue());\n }\n }\n}\n\nexport default FunctionController;\n"
},
{
"path": "src/dat/controllers/NumberController.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport Controller from './Controller';\nimport common from '../utils/common';\n\nfunction numDecimals(x) {\n const _x = x.toString();\n if (_x.indexOf('.') > -1) {\n return _x.length - _x.indexOf('.') - 1;\n }\n\n return 0;\n}\n\n/**\n * @class Represents a given property of an object that is a number.\n *\n * @extends dat.controllers.Controller\n *\n * @param {Object} object The object to be manipulated\n * @param {string} property The name of the property to be manipulated\n * @param {Object} [params] Optional parameters\n * @param {Number} [params.min] Minimum allowed value\n * @param {Number} [params.max] Maximum allowed value\n * @param {Number} [params.step] Increment by which to change value\n */\nclass NumberController extends Controller {\n constructor(object, property, params) {\n super(object, property);\n\n const _params = params || {};\n\n this.__min = _params.min;\n this.__max = _params.max;\n this.__step = _params.step;\n\n if (common.isUndefined(this.__step)) {\n if (this.initialValue === 0) {\n this.__impliedStep = 1; // What are we, psychics?\n } else {\n // Hey Doug, check this out.\n this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(this.initialValue)) / Math.LN10)) / 10;\n }\n } else {\n this.__impliedStep = this.__step;\n }\n\n this.__precision = numDecimals(this.__impliedStep);\n }\n\n setValue(v) {\n let _v = v;\n\n if (this.__min !== undefined && _v < this.__min) {\n _v = this.__min;\n } else if (this.__max !== undefined && _v > this.__max) {\n _v = this.__max;\n }\n\n if (this.__step !== undefined && _v % this.__step !== 0) {\n _v = Math.round(_v / this.__step) * this.__step;\n }\n\n return super.setValue(_v);\n }\n\n /**\n * Specify a minimum value for object[property].\n *\n * @param {Number} minValue The minimum value for\n * object[property]\n * @returns {dat.controllers.NumberController} this\n */\n min(minValue) {\n this.__min = minValue;\n return this;\n }\n\n /**\n * Specify a maximum value for object[property].\n *\n * @param {Number} maxValue The maximum value for\n * object[property]\n * @returns {dat.controllers.NumberController} this\n */\n max(maxValue) {\n this.__max = maxValue;\n return this;\n }\n\n /**\n * Specify a step value that dat.controllers.NumberController\n * increments by.\n *\n * @param {Number} stepValue The step value for\n * dat.controllers.NumberController\n * @default if minimum and maximum specified increment is 1% of the\n * difference otherwise stepValue is 1\n * @returns {dat.controllers.NumberController} this\n */\n step(stepValue) {\n this.__step = stepValue;\n this.__impliedStep = stepValue;\n this.__precision = numDecimals(stepValue);\n return this;\n }\n}\n\nexport default NumberController;\n"
},
{
"path": "src/dat/controllers/NumberControllerBox.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport NumberController from './NumberController';\nimport dom from '../dom/dom';\nimport common from '../utils/common';\n\nfunction roundToDecimal(value, decimals) {\n const tenTo = Math.pow(10, decimals);\n return Math.round(value * tenTo) / tenTo;\n}\n\n/**\n * @class Represents a given property of an object that is a number and\n * provides an input element with which to manipulate it.\n *\n * @extends dat.controllers.Controller\n * @extends dat.controllers.NumberController\n *\n * @param {Object} object The object to be manipulated\n * @param {string} property The name of the property to be manipulated\n * @param {Object} [params] Optional parameters\n * @param {Number} [params.min] Minimum allowed value\n * @param {Number} [params.max] Maximum allowed value\n * @param {Number} [params.step] Increment by which to change value\n */\nclass NumberControllerBox extends NumberController {\n constructor(object, property, params) {\n super(object, property, params);\n\n this.__truncationSuspended = false;\n\n const _this = this;\n\n /**\n * {Number} Previous mouse y position\n * @ignore\n */\n let prevY;\n\n function onChange() {\n const attempted = parseFloat(_this.__input.value);\n if (!common.isNaN(attempted)) {\n _this.setValue(attempted);\n }\n }\n\n function onFinish() {\n if (_this.__onFinishChange) {\n _this.__onFinishChange.call(_this, _this.getValue());\n }\n }\n\n function onBlur() {\n onFinish();\n }\n\n function onMouseDrag(e) {\n const diff = prevY - e.clientY;\n _this.setValue(_this.getValue() + diff * _this.__impliedStep);\n\n prevY = e.clientY;\n }\n\n function onMouseUp() {\n dom.unbind(window, 'mousemove', onMouseDrag);\n dom.unbind(window, 'mouseup', onMouseUp);\n onFinish();\n }\n\n function onMouseDown(e) {\n dom.bind(window, 'mousemove', onMouseDrag);\n dom.bind(window, 'mouseup', onMouseUp);\n prevY = e.clientY;\n }\n\n this.__input = document.createElement('input');\n this.__input.setAttribute('type', 'text');\n\n // Makes it so manually specified values are not truncated.\n\n dom.bind(this.__input, 'change', onChange);\n dom.bind(this.__input, 'blur', onBlur);\n dom.bind(this.__input, 'mousedown', onMouseDown);\n dom.bind(this.__input, 'keydown', function(e) {\n // When pressing enter, you can be as precise as you want.\n if (e.keyCode === 13) {\n _this.__truncationSuspended = true;\n this.blur();\n _this.__truncationSuspended = false;\n onFinish();\n }\n });\n\n this.updateDisplay();\n\n this.domElement.appendChild(this.__input);\n }\n\n updateDisplay() {\n this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);\n return super.updateDisplay();\n }\n}\n\nexport default NumberControllerBox;\n"
},
{
"path": "src/dat/controllers/NumberControllerSlider.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport NumberController from './NumberController';\nimport dom from '../dom/dom';\n\nfunction map(v, i1, i2, o1, o2) {\n return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));\n}\n\n/**\n * @class Represents a given property of an object that is a number, contains\n * a minimum and maximum, and provides a slider element with which to\n * manipulate it. It should be noted that the slider element is made up of\n * <div> tags, not the html5\n * <slider> element.\n *\n * @extends dat.controllers.Controller\n * @extends dat.controllers.NumberController\n *\n * @param {Object} object The object to be manipulated\n * @param {string} property The name of the property to be manipulated\n * @param {Number} minValue Minimum allowed value\n * @param {Number} maxValue Maximum allowed value\n * @param {Number} stepValue Increment by which to change value\n */\nclass NumberControllerSlider extends NumberController {\n constructor(object, property, min, max, step) {\n super(object, property, { min: min, max: max, step: step });\n\n const _this = this;\n\n this.__background = document.createElement('div');\n this.__foreground = document.createElement('div');\n\n dom.bind(this.__background, 'mousedown', onMouseDown);\n dom.bind(this.__background, 'touchstart', onTouchStart);\n\n dom.addClass(this.__background, 'slider');\n dom.addClass(this.__foreground, 'slider-fg');\n\n function onMouseDown(e) {\n document.activeElement.blur();\n\n dom.bind(window, 'mousemove', onMouseDrag);\n dom.bind(window, 'mouseup', onMouseUp);\n\n onMouseDrag(e);\n }\n\n function onMouseDrag(e) {\n e.preventDefault();\n\n const bgRect = _this.__background.getBoundingClientRect();\n\n _this.setValue(\n map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)\n );\n\n return false;\n }\n\n function onMouseUp() {\n dom.unbind(window, 'mousemove', onMouseDrag);\n dom.unbind(window, 'mouseup', onMouseUp);\n if (_this.__onFinishChange) {\n _this.__onFinishChange.call(_this, _this.getValue());\n }\n }\n\n function onTouchStart(e) {\n if (e.touches.length !== 1) { return; }\n dom.bind(window, 'touchmove', onTouchMove);\n dom.bind(window, 'touchend', onTouchEnd);\n onTouchMove(e);\n }\n\n function onTouchMove(e) {\n const clientX = e.touches[0].clientX;\n const bgRect = _this.__background.getBoundingClientRect();\n\n _this.setValue(\n map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max)\n );\n }\n\n function onTouchEnd() {\n dom.unbind(window, 'touchmove', onTouchMove);\n dom.unbind(window, 'touchend', onTouchEnd);\n if (_this.__onFinishChange) {\n _this.__onFinishChange.call(_this, _this.getValue());\n }\n }\n\n this.updateDisplay();\n\n this.__background.appendChild(this.__foreground);\n this.domElement.appendChild(this.__background);\n }\n\n updateDisplay() {\n const pct = (this.getValue() - this.__min) / (this.__max - this.__min);\n this.__foreground.style.width = pct * 100 + '%';\n return super.updateDisplay();\n }\n}\n\nexport default NumberControllerSlider;\n"
},
{
"path": "src/dat/controllers/OptionController.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport Controller from './Controller';\nimport dom from '../dom/dom';\nimport common from '../utils/common';\n\n/**\n * @class Provides a select input to alter the property of an object, using a\n * list of accepted values.\n *\n * @extends dat.controllers.Controller\n *\n * @param {Object} object The object to be manipulated\n * @param {string} property The name of the property to be manipulated\n * @param {Object|string[]} options A map of labels to acceptable values, or\n * a list of acceptable string values.\n */\nclass OptionController extends Controller {\n constructor(object, property, opts) {\n super(object, property);\n\n let options = opts;\n\n const _this = this;\n\n /**\n * The drop down menu\n * @ignore\n */\n this.__select = document.createElement('select');\n\n if (common.isArray(options)) {\n const map = {};\n common.each(options, function(element) {\n map[element] = element;\n });\n options = map;\n }\n\n common.each(options, function(value, key) {\n const opt = document.createElement('option');\n opt.innerHTML = key;\n opt.setAttribute('value', value);\n _this.__select.appendChild(opt);\n });\n\n // Acknowledge original value\n this.updateDisplay();\n\n dom.bind(this.__select, 'change', function() {\n const desiredValue = this.options[this.selectedIndex].value;\n _this.setValue(desiredValue);\n });\n\n this.domElement.appendChild(this.__select);\n }\n\n setValue(v) {\n const toReturn = super.setValue(v);\n\n if (this.__onFinishChange) {\n this.__onFinishChange.call(this, this.getValue());\n }\n return toReturn;\n }\n\n updateDisplay() {\n if (dom.isActive(this.__select)) return this; // prevent number from updating if user is trying to manually update\n this.__select.value = this.getValue();\n return super.updateDisplay();\n }\n}\n\nexport default OptionController;\n"
},
{
"path": "src/dat/controllers/StringController.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport Controller from './Controller';\nimport dom from '../dom/dom';\n\n/**\n * @class Provides a text input to alter the string property of an object.\n *\n * @extends dat.controllers.Controller\n *\n * @param {Object} object The object to be manipulated\n * @param {string} property The name of the property to be manipulated\n */\nclass StringController extends Controller {\n constructor(object, property) {\n super(object, property);\n\n const _this = this;\n\n function onChange() {\n _this.setValue(_this.__input.value);\n }\n\n function onBlur() {\n if (_this.__onFinishChange) {\n _this.__onFinishChange.call(_this, _this.getValue());\n }\n }\n\n this.__input = document.createElement('input');\n this.__input.setAttribute('type', 'text');\n\n dom.bind(this.__input, 'keyup', onChange);\n dom.bind(this.__input, 'change', onChange);\n dom.bind(this.__input, 'blur', onBlur);\n dom.bind(this.__input, 'keydown', function(e) {\n if (e.keyCode === 13) {\n this.blur();\n }\n });\n\n this.updateDisplay();\n\n this.domElement.appendChild(this.__input);\n }\n\n updateDisplay() {\n // Stops the caret from moving on account of:\n // keyup -> setValue -> updateDisplay\n if (!dom.isActive(this.__input)) {\n this.__input.value = this.getValue();\n }\n return super.updateDisplay();\n }\n}\n\nexport default StringController;\n"
},
{
"path": "src/dat/dom/CenteredDiv.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport dom from './dom';\nimport common from '../utils/common';\n\nclass CenteredDiv {\n constructor() {\n this.backgroundElement = document.createElement('div');\n common.extend(this.backgroundElement.style, {\n backgroundColor: 'rgba(0,0,0,0.8)',\n top: 0,\n left: 0,\n display: 'none',\n zIndex: '1000',\n opacity: 0,\n WebkitTransition: 'opacity 0.2s linear',\n transition: 'opacity 0.2s linear'\n });\n\n dom.makeFullscreen(this.backgroundElement);\n this.backgroundElement.style.position = 'fixed';\n\n this.domElement = document.createElement('div');\n common.extend(this.domElement.style, {\n position: 'fixed',\n display: 'none',\n zIndex: '1001',\n opacity: 0,\n WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',\n transition: 'transform 0.2s ease-out, opacity 0.2s linear'\n });\n\n\n document.body.appendChild(this.backgroundElement);\n document.body.appendChild(this.domElement);\n\n const _this = this;\n dom.bind(this.backgroundElement, 'click', function() {\n _this.hide();\n });\n }\n\n show() {\n const _this = this;\n\n this.backgroundElement.style.display = 'block';\n\n this.domElement.style.display = 'block';\n this.domElement.style.opacity = 0;\n // this.domElement.style.top = '52%';\n this.domElement.style.webkitTransform = 'scale(1.1)';\n\n this.layout();\n\n common.defer(function() {\n _this.backgroundElement.style.opacity = 1;\n _this.domElement.style.opacity = 1;\n _this.domElement.style.webkitTransform = 'scale(1)';\n });\n }\n\n /**\n * Hide centered div\n */\n hide() {\n const _this = this;\n\n const hide = function() {\n _this.domElement.style.display = 'none';\n _this.backgroundElement.style.display = 'none';\n\n dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);\n dom.unbind(_this.domElement, 'transitionend', hide);\n dom.unbind(_this.domElement, 'oTransitionEnd', hide);\n };\n\n dom.bind(this.domElement, 'webkitTransitionEnd', hide);\n dom.bind(this.domElement, 'transitionend', hide);\n dom.bind(this.domElement, 'oTransitionEnd', hide);\n\n this.backgroundElement.style.opacity = 0;\n // this.domElement.style.top = '48%';\n this.domElement.style.opacity = 0;\n this.domElement.style.webkitTransform = 'scale(1.1)';\n }\n\n layout() {\n this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';\n this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';\n }\n}\n\nexport default CenteredDiv;\n"
},
{
"path": "src/dat/dom/dom.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport common from '../utils/common';\n\nconst EVENT_MAP = {\n HTMLEvents: ['change'],\n MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],\n KeyboardEvents: ['keydown']\n};\n\nconst EVENT_MAP_INV = {};\ncommon.each(EVENT_MAP, function(v, k) {\n common.each(v, function(e) {\n EVENT_MAP_INV[e] = k;\n });\n});\n\nconst CSS_VALUE_PIXELS = /(\\d+(\\.\\d+)?)px/;\n\nfunction cssValueToPixels(val) {\n if (val === '0' || common.isUndefined(val)) {\n return 0;\n }\n\n const match = val.match(CSS_VALUE_PIXELS);\n\n if (!common.isNull(match)) {\n return parseFloat(match[1]);\n }\n\n // TODO ...ems? %?\n\n return 0;\n}\n\n/**\n * @namespace\n * @member dat.dom\n */\nconst dom = {\n\n /**\n *\n * @param elem\n * @param selectable\n */\n makeSelectable: function(elem, selectable) {\n if (elem === undefined || elem.style === undefined) return;\n\n elem.onselectstart = selectable ? function() {\n return false;\n } : function() {\n };\n\n elem.style.MozUserSelect = selectable ? 'auto' : 'none';\n elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';\n elem.unselectable = selectable ? 'on' : 'off';\n },\n\n /**\n *\n * @param elem\n * @param horizontal\n * @param vert\n */\n makeFullscreen: function(elem, hor, vert) {\n let vertical = vert;\n let horizontal = hor;\n\n if (common.isUndefined(horizontal)) {\n horizontal = true;\n }\n\n if (common.isUndefined(vertical)) {\n vertical = true;\n }\n\n elem.style.position = 'absolute';\n\n if (horizontal) {\n elem.style.left = 0;\n elem.style.right = 0;\n }\n if (vertical) {\n elem.style.top = 0;\n elem.style.bottom = 0;\n }\n },\n\n /**\n *\n * @param elem\n * @param eventType\n * @param params\n */\n fakeEvent: function(elem, eventType, pars, aux) {\n const params = pars || {};\n const className = EVENT_MAP_INV[eventType];\n if (!className) {\n throw new Error('Event type ' + eventType + ' not supported.');\n }\n const evt = document.createEvent(className);\n switch (className) {\n case 'MouseEvents':\n {\n const clientX = params.x || params.clientX || 0;\n const clientY = params.y || params.clientY || 0;\n evt.initMouseEvent(eventType, params.bubbles || false,\n params.cancelable || true, window, params.clickCount || 1,\n 0, // screen X\n 0, // screen Y\n clientX, // client X\n clientY, // client Y\n false, false, false, false, 0, null);\n break;\n }\n case 'KeyboardEvents':\n {\n const init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz\n common.defaults(params, {\n cancelable: true,\n ctrlKey: false,\n altKey: false,\n shiftKey: false,\n metaKey: false,\n keyCode: undefined,\n charCode: undefined\n });\n init(eventType, params.bubbles || false,\n params.cancelable, window,\n params.ctrlKey, params.altKey,\n params.shiftKey, params.metaKey,\n params.keyCode, params.charCode);\n break;\n }\n default:\n {\n evt.initEvent(eventType, params.bubbles || false, params.cancelable || true);\n break;\n }\n }\n common.defaults(evt, aux);\n elem.dispatchEvent(evt);\n },\n\n /**\n *\n * @param elem\n * @param event\n * @param func\n * @param bool\n */\n bind: function(elem, event, func, newBool) {\n const bool = newBool || false;\n if (elem.addEventListener) {\n elem.addEventListener(event, func, bool);\n } else if (elem.attachEvent) {\n elem.attachEvent('on' + event, func);\n }\n return dom;\n },\n\n /**\n *\n * @param elem\n * @param event\n * @param func\n * @param bool\n */\n unbind: function(elem, event, func, newBool) {\n const bool = newBool || false;\n if (elem.removeEventListener) {\n elem.removeEventListener(event, func, bool);\n } else if (elem.detachEvent) {\n elem.detachEvent('on' + event, func);\n }\n return dom;\n },\n\n /**\n *\n * @param elem\n * @param className\n */\n addClass: function(elem, className) {\n if (elem.className === undefined) {\n elem.className = className;\n } else if (elem.className !== className) {\n const classes = elem.className.split(/ +/);\n if (classes.indexOf(className) === -1) {\n classes.push(className);\n elem.className = classes.join(' ').replace(/^\\s+/, '').replace(/\\s+$/, '');\n }\n }\n return dom;\n },\n\n /**\n *\n * @param elem\n * @param className\n */\n removeClass: function(elem, className) {\n if (className) {\n if (elem.className === className) {\n elem.removeAttribute('class');\n } else {\n const classes = elem.className.split(/ +/);\n const index = classes.indexOf(className);\n if (index !== -1) {\n classes.splice(index, 1);\n elem.className = classes.join(' ');\n }\n }\n } else {\n elem.className = undefined;\n }\n return dom;\n },\n\n hasClass: function(elem, className) {\n return new RegExp('(?:^|\\\\s+)' + className + '(?:\\\\s+|$)').test(elem.className) || false;\n },\n\n /**\n *\n * @param elem\n */\n getWidth: function(elem) {\n const style = getComputedStyle(elem);\n\n return cssValueToPixels(style['border-left-width']) +\n cssValueToPixels(style['border-right-width']) +\n cssValueToPixels(style['padding-left']) +\n cssValueToPixels(style['padding-right']) +\n cssValueToPixels(style.width);\n },\n\n /**\n *\n * @param elem\n */\n getHeight: function(elem) {\n const style = getComputedStyle(elem);\n\n return cssValueToPixels(style['border-top-width']) +\n cssValueToPixels(style['border-bottom-width']) +\n cssValueToPixels(style['padding-top']) +\n cssValueToPixels(style['padding-bottom']) +\n cssValueToPixels(style.height);\n },\n\n /**\n *\n * @param el\n */\n getOffset: function(el) {\n let elem = el;\n const offset = { left: 0, top: 0 };\n if (elem.offsetParent) {\n do {\n offset.left += elem.offsetLeft;\n offset.top += elem.offsetTop;\n elem = elem.offsetParent;\n } while (elem);\n }\n return offset;\n },\n\n // http://stackoverflow.com/posts/2684561/revisions\n /**\n *\n * @param elem\n */\n isActive: function(elem) {\n return elem === document.activeElement && (elem.type || elem.href);\n }\n\n};\n\nexport default dom;\n"
},
{
"path": "src/dat/gui/GUI.js",
"content": "/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nimport css from '../utils/css';\nimport saveDialogueContents from './saveDialogue.html';\nimport ControllerFactory from '../controllers/ControllerFactory';\nimport Controller from '../controllers/Controller';\nimport BooleanController from '../controllers/BooleanController';\nimport FunctionController from '../controllers/FunctionController';\nimport NumberControllerBox from '../controllers/NumberControllerBox';\nimport NumberControllerSlider from '../controllers/NumberControllerSlider';\nimport ColorController from '../controllers/ColorController';\nimport requestAnimationFrame from '../utils/requestAnimationFrame';\nimport CenteredDiv from '../dom/CenteredDiv';\nimport dom from '../dom/dom';\nimport common from '../utils/common';\n\nimport styleSheet from './style.scss'; // CSS to embed in build\n\ncss.inject(styleSheet);\n\n/** @ignore Outer-most className for GUI's */\nconst CSS_NAMESPACE = 'dg';\n\nconst HIDE_KEY_CODE = 72;\n\n/** @ignore The only value shared between the JS and SCSS. Use caution. */\nconst CLOSE_BUTTON_HEIGHT = 20;\n\nconst DEFAULT_DEFAULT_PRESET_NAME = 'Default';\n\nconst SUPPORTS_LOCAL_STORAGE = (function() {\n try {\n return !!window.localStorage;\n } catch (e) {\n return false;\n }\n}());\n\nlet SAVE_DIALOGUE;\n\n/** @ignore Have we yet to create an autoPlace GUI? */\nlet autoPlaceVirgin = true;\n\n/** @ignore Fixed position div that auto place GUI's go inside */\nlet autoPlaceContainer;\n\n/** @ignore Are we hiding the GUI's ? */\nlet hide = false;\n\n/** @private GUI's which should be hidden */\nconst hideableGuis = [];\n\n/**\n * @class A lightweight controller library for JavaScript. It allows you to easily\n * manipulate variables and fire functions on the fly.\n *\n * @typicalname gui\n *\n * @example\n * // Creating a GUI with options.\n * var gui = new dat.GUI({name: 'My GUI'});\n *\n * @example\n * // Creating a GUI and a subfolder.\n * var gui = new dat.GUI();\n * var folder1 = gui.addFolder('Flow Field');\n *\n * @param {Object} [params]\n * @param {String} [params.name] The name of this GUI.\n * @param {Object} [params.load] JSON object representing the saved state of\n * this GUI.\n * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.\n * @param {Boolean} [params.autoPlace=true]\n * @param {Boolean} [params.hideable=true] If true, GUI is shown/hidden by h keypress.\n * @param {Boolean} [params.closed=false] If true, starts closed\n * @param {Boolean} [params.closeOnTop=false] If true, close/open button shows on top of the GUI\n */\nconst GUI = function(pars) {\n const _this = this;\n\n let params = pars || {};\n\n /**\n * Outermost DOM Element\n * @type {DOMElement}\n */\n this.domElement = document.createElement('div');\n this.__ul = document.createElement('ul');\n this.domElement.appendChild(this.__ul);\n\n dom.addClass(this.domElement, CSS_NAMESPACE);\n\n /**\n * Nested GUI's by name\n * @ignore\n */\n this.__folders = {};\n\n this.__controllers = [];\n\n /**\n * List of objects I'm remembering for save, only used in top level GUI\n * @ignore\n */\n this.__rememberedObjects = [];\n\n /**\n * Maps the index of remembered objects to a map of controllers, only used\n * in top level GUI.\n *\n * @private\n * @ignore\n *\n * @example\n * [\n * {\n * propertyName: Controller,\n * anotherPropertyName: Controller\n * },\n * {\n * propertyName: Controller\n * }\n * ]\n */\n this.__rememberedObjectIndecesToControllers = [];\n\n this.__listening = [];\n\n // Default parameters\n params = common.defaults(params, {\n closeOnTop: false,\n autoPlace: true,\n width: GUI.DEFAULT_WIDTH\n });\n\n params = common.defaults(params, {\n resizable: params.autoPlace,\n hideable: params.autoPlace\n });\n\n if (!common.isUndefined(params.load)) {\n // Explicit preset\n if (params.preset) {\n params.load.preset = params.preset;\n }\n } else {\n params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME };\n }\n\n if (common.isUndefined(params.parent) && params.hideable) {\n hideableGuis.push(this);\n }\n\n // Only root level GUI's are resizable.\n params.resizable = common.isUndefined(params.parent) && params.resizable;\n\n if (params.autoPlace && common.isUndefined(params.scrollable)) {\n params.scrollable = true;\n }\n // params.scrollable = common.isUndefined(params.parent) && params.scrollable === true;\n\n // Not part of params because I don't want people passing this in via\n // constructor. Should be a 'remembered' value.\n let useLocalStorage =\n SUPPORTS_LOCAL_STORAGE &&\n localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true';\n\n let saveToLocalStorage;\n let titleRow;\n\n Object.defineProperties(this,\n /** @lends GUI.prototype */\n {\n /**\n * The parent GUI\n * @type dat.gui.GUI\n */\n parent: {\n get: function() {\n return params.parent;\n }\n },\n\n scrollable: {\n get: function() {\n return params.scrollable;\n }\n },\n\n /**\n * Handles GUI's element placement for you\n * @type Boolean\n */\n autoPlace: {\n get: function() {\n return params.autoPlace;\n }\n },\n\n /**\n * Handles GUI's position of open/close button\n * @type Boolean\n */\n closeOnTop: {\n get: function() {\n return params.closeOnTop;\n }\n },\n\n /**\n * The identifier for a set of saved values\n * @type String\n */\n preset: {\n get: function() {\n if (_this.parent) {\n return _this.getRoot().preset;\n }\n\n return params.load.preset;\n },\n\n set: function(v) {\n if (_this.parent) {\n _this.getRoot().preset = v;\n } else {\n params.load.preset = v;\n }\n setPresetSelectIndex(this);\n _this.revert();\n }\n },\n\n /**\n * The width of GUI element\n * @type Number\n */\n width: {\n get: function() {\n return params.width;\n },\n set: function(v) {\n params.width = v;\n setWidth(_this, v);\n }\n },\n\n /**\n * The name of GUI. Used for folders. i.e\n * a folder's name\n * @type String\n */\n name: {\n get: function() {\n return params.name;\n },\n set: function(v) {\n // TODO Check for collisions among sibling folders\n params.name = v;\n if (titleRow) {\n titleRow.innerHTML = params.name;\n }\n }\n },\n\n /**\n * Whether the GUI is collapsed or not\n * @type Boolean\n */\n closed: {\n get: function() {\n return params.closed;\n },\n set: function(v) {\n params.closed = v;\n if (params.closed) {\n dom.addClass(_this.__ul, GUI.CLASS_CLOSED);\n } else {\n dom.removeClass(_this.__ul, GUI.CLASS_CLOSED);\n }\n // For browsers that aren't going to respect the CSS transition,\n // Lets just check our height against the window height right off\n // the bat.\n this.onResize();\n\n if (_this.__closeButton) {\n _this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED;\n }\n }\n },\n\n /**\n * Contains all presets\n * @type Object\n */\n load: {\n get: function() {\n return params.load;\n }\n },\n\n /**\n * Determines whether or not to use localStorage as the means for\n * remembering\n * @type Boolean\n */\n useLocalStorage: {\n\n get: function() {\n return useLocalStorage;\n },\n set: function(bool) {\n if (SUPPORTS_LOCAL_STORAGE) {\n useLocalStorage = bool;\n if (bool) {\n dom.bind(window, 'unload', saveToLocalStorage);\n } else {\n dom.unbind(window, 'unload', saveToLocalStorage);\n }\n localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool);\n }\n }\n }\n });\n\n // Are we a root level GUI?\n if (common.isUndefined(params.parent)) {\n this.closed = params.closed || false;\n\n dom.addClass(this.domElement, GUI.CLASS_MAIN);\n dom.makeSelectable(this.domElement, false);\n\n // Are we supposed to be loading locally?\n if (SUPPORTS_LOCAL_STORAGE) {\n if (useLocalStorage) {\n _this.useLocalStorage = true;\n\n const savedGui = localStorage.getItem(getLocalStorageHash(this, 'gui'));\n\n if (savedGui) {\n params.load = JSON.parse(savedGui);\n }\n }\n }\n\n this.__closeButton = document.createElement('div');\n this.__closeButton.innerHTML = GUI.TEXT_CLOSED;\n dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);\n if (params.closeOnTop) {\n dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_TOP);\n this.domElement.insertBefore(this.__closeButton, this.domElement.childNodes[0]);\n } else {\n dom.addClass(this.__closeButton, GUI.CLASS_CLOSE_BOTTOM);\n this.domElement.appendChild(this.__closeButton);\n }\n\n dom.bind(this.__closeButton, 'click', function() {\n _this.closed = !_this.closed;\n });\n // Oh, you're a nested GUI!\n } else {\n if (params.closed === undefined) {\n params.closed = true;\n }\n\n const titleRowName = document.createTextNode(params.name);\n dom.addClass(titleRowName, 'controller-name');\n\n titleRow = addRow(_this, titleRowName);\n\n const onClickTitle = function(e) {\n e.preventDefault();\n _this.closed = !_this.closed;\n return false;\n };\n\n dom.addClass(this.__ul, GUI.CLASS_CLOSED);\n\n dom.addClass(titleRow, 'title');\n dom.bind(titleRow, 'click', onClickTitle);\n\n if (!params.closed) {\n this.closed = false;\n }\n }\n\n if (params.autoPlace) {\n if (common.isUndefined(params.parent)) {\n if (autoPlaceVirgin) {\n autoPlaceContainer = document.createElement('div');\n dom.addClass(autoPlaceContainer, CSS_NAMESPACE);\n dom.addClass(autoPlaceContainer, GUI.CLASS_AUTO_PLACE_CONTAINER);\n document.body.appendChild(autoPlaceContainer);\n autoPlaceVirgin = false;\n }\n\n // Put it in the dom for you.\n autoPlaceContainer.appendChild(this.domElement);\n\n // Apply the auto styles\n dom.addClass(this.domElement, GUI.CLASS_AUTO_PLACE);\n }\n\n\n // Make it not elastic.\n if (!this.parent) {\n setWidth(_this, params.width);\n }\n }\n\n this.__resizeHandler = function() {\n _this.onResizeDebounced();\n };\n\n dom.bind(window, 'resize', this.__resizeHandler);\n dom.bind(this.__ul, 'webkitTransitionEnd', this.__resizeHandler);\n dom.bind(this.__ul, 'transitionend', this.__resizeHandler);\n dom.bind(this.__ul, 'oTransitionEnd', this.__resizeHandler);\n this.onResize();\n\n if (params.resizable) {\n addResizeHandle(this);\n }\n\n saveToLocalStorage = function() {\n if (SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(_this, 'isLocal')) === 'true') {\n localStorage.setItem(getLocalStorageHash(_this, 'gui'), JSON.stringify(_this.getSaveObject()));\n }\n };\n\n // expose this method publicly\n this.saveToLocalStorageIfPossible = saveToLocalStorage;\n\n function resetWidth() {\n const root = _this.getRoot();\n root.width += 1;\n common.defer(function() {\n root.width -= 1;\n });\n }\n\n if (!params.parent) {\n resetWidth();\n }\n};\n\nGUI.toggleHide = function() {\n hide = !hide;\n common.each(hideableGuis, function(gui) {\n gui.domElement.style.display = hide ? 'none' : '';\n });\n};\n\nGUI.CLASS_AUTO_PLACE = 'a';\nGUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';\nGUI.CLASS_MAIN = 'main';\nGUI.CLASS_CONTROLLER_ROW = 'cr';\nGUI.CLASS_TOO_TALL = 'taller-than-window';\nGUI.CLASS_CLOSED = 'closed';\nGUI.CLASS_CLOSE_BUTTON = 'close-button';\nGUI.CLASS_CLOSE_TOP = 'close-top';\nGUI.CLASS_CLOSE_BOTTOM = 'close-bottom';\nGUI.CLASS_DRAG = 'drag';\n\nGUI.DEFAULT_WIDTH = 245;\nGUI.TEXT_CLOSED = 'Close Controls';\nGUI.TEXT_OPEN = 'Open Controls';\n\nGUI._keydownHandler = function(e) {\n if (document.activeElement.type !== 'text' &&\n (e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE)) {\n GUI.toggleHide();\n }\n};\ndom.bind(window, 'keydown', GUI._keydownHandler, false);\n\ncommon.extend(\n GUI.prototype,\n\n /** @lends GUI.prototype */\n {\n\n /**\n * Adds a new {@link Controller} to the GUI. The type of controller created\n * is inferred from the initial value of object[property]. For\n * color properties, see {@link addColor}.\n *\n * @param {Object} object The object to be manipulated\n * @param {String} property The name of the property to be manipulated\n * @param {Number} [min] Minimum allowed value\n * @param {Number} [max] Maximum allowed value\n * @param {Number} [step] Increment by which to change value\n * @returns {Controller} The controller that was added to the GUI.\n * @instance\n *\n * @example\n * // Add a string controller.\n * var person = {name: 'Sam'};\n * gui.add(person, 'name');\n *\n * @example\n * // Add a number controller slider.\n * var person = {age: 45};\n * gui.add(person, 'age', 0, 100);\n */\n add: function(object, property) {\n return add(\n this,\n object,\n property,\n {\n factoryArgs: Array.prototype.slice.call(arguments, 2)\n }\n );\n },\n\n /**\n * Adds a new color controller to the GUI.\n *\n * @param object\n * @param property\n * @returns {Controller} The controller that was added to the GUI.\n * @instance\n *\n * @example\n * var palette = {\n * color1: '#FF0000', // CSS string\n * color2: [ 0, 128, 255 ], // RGB array\n * color3: [ 0, 128, 255, 0.3 ], // RGB with alpha\n * color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value\n * };\n * gui.addColor(palette, 'color1');\n * gui.addColor(palette, 'color2');\n * gui.addColor(palette, 'color3');\n * gui.addColor(palette, 'color4');\n */\n addColor: function(object, property) {\n return add(\n this,\n object,\n property,\n {\n color: true\n }\n );\n },\n\n /**\n * Removes the given controller from the GUI.\n * @param {Controller} controller\n * @instance\n */\n remove: function(controller) {\n // TODO listening?\n this.__ul.removeChild(controller.__li);\n this.__controllers.splice(this.__controllers.indexOf(controller), 1);\n const _this = this;\n common.defer(function() {\n _this.onResize();\n });\n },\n\n /**\n * Removes the root GUI from the document and unbinds all event listeners.\n * For subfolders, use `gui.removeFolder(folder)` instead.\n * @instance\n */\n destroy: function() {\n if (this.parent) {\n throw new Error(\n 'Only the root GUI should be removed with .destroy(). ' +\n 'For subfolders, use gui.removeFolder(folder) instead.'\n );\n }\n\n if (this.autoPlace) {\n autoPlaceContainer.removeChild(this.domElement);\n }\n\n const _this = this;\n common.each(this.__folders, function(subfolder) {\n _this.removeFolder(subfolder);\n });\n\n dom.unbind(window, 'keydown', GUI._keydownHandler, false);\n\n removeListeners(this);\n },\n\n /**\n * Creates a new subfolder GUI instance.\n * @param name\n * @returns {dat.gui.GUI} The new folder.\n * @throws {Error} if this GUI already has a folder by the specified\n * name\n * @instance\n */\n addFolder: function(name) {\n // We have to prevent collisions on names in order to have a key\n // by which to remember saved values\n if (this.__folders[name] !== undefined) {\n throw new Error('You already have a folder in this GUI by the' +\n ' name \"' + name + '\"');\n }\n\n const newGuiParams = { name: name, parent: this };\n\n // We need to pass down the autoPlace trait so that we can\n // attach event listeners to open/close folder actions to\n // ensure that a scrollbar appears if the window is too short.\n newGuiParams.autoPlace = this.autoPlace;\n\n // Do we have saved appearance data for this folder?\n if (this.load && // Anything loaded?\n this.load.folders && // Was my parent a dead-end?\n this.load.folders[name]) { // Did daddy remember me?\n // Start me closed if I was closed\n newGuiParams.closed = this.load.folders[name].closed;\n\n // Pass down the loaded data\n newGuiParams.load = this.load.folders[name];\n }\n\n const gui = new GUI(newGuiParams);\n this.__folders[name] = gui;\n\n const li = addRow(this, gui.domElement);\n dom.addClass(li, 'folder');\n return gui;\n },\n\n /**\n * Removes a subfolder GUI instance.\n * @param {dat.gui.GUI} folder The folder to remove.\n * @instance\n */\n removeFolder: function(folder) {\n this.__ul.removeChild(folder.domElement.parentElement);\n\n delete this.__folders[folder.name];\n\n // Do we have saved appearance data for this folder?\n if (this.load && // Anything loaded?\n this.load.folders && // Was my parent a dead-end?\n this.load.folders[folder.name]) {\n delete this.load.folders[folder.name];\n }\n\n removeListeners(folder);\n\n const _this = this;\n\n common.each(folder.__folders, function(subfolder) {\n folder.removeFolder(subfolder);\n });\n\n common.defer(function() {\n _this.onResize();\n });\n },\n\n /**\n * Opens the GUI.\n */\n open: function() {\n this.closed = false;\n },\n\n /**\n * Closes the GUI.\n */\n close: function() {\n this.closed = true;\n },\n\n /**\n * Hides the GUI.\n */\n hide: function() {\n this.domElement.style.display = 'none';\n },\n\n /**\n * Shows the GUI.\n */\n show: function() {\n this.domElement.style.display = '';\n },\n\n\n onResize: function() {\n // we debounce this function to prevent performance issues when rotating on tablet/mobile\n const root = this.getRoot();\n if (root.scrollable) {\n const top = dom.getOffset(root.__ul).top;\n let h = 0;\n\n common.each(root.__ul.childNodes, function(node) {\n if (!(root.autoPlace && node === root.__save_row)) {\n h += dom.getHeight(node);\n }\n });\n\n if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) {\n dom.addClass(root.domElement, GUI.CLASS_TOO_TALL);\n root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px';\n } else {\n dom.removeClass(root.domElement, GUI.CLASS_TOO_TALL);\n root.__ul.style.height = 'auto';\n }\n }\n\n if (root.__resize_handle) {\n common.defer(function() {\n root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';\n });\n }\n\n if (root.__closeButton) {\n root.__closeButton.style.width = root.width + 'px';\n }\n },\n\n onResizeDebounced: common.debounce(function() { this.onResize(); }, 50),\n\n /**\n * Mark objects for saving. The order of these objects cannot change as\n * the GUI grows. When remembering new objects, append them to the end\n * of the list.\n *\n * @param {...Object} objects\n * @throws {Error} if not called on a top level GUI.\n * @instance\n * @ignore\n */\n remember: function() {\n if (common.isUndefined(SAVE_DIALOGUE)) {\n SAVE_DIALOGUE = new CenteredDiv();\n SAVE_DIALOGUE.domElement.innerHTML = saveDialogueContents;\n }\n\n if (this.parent) {\n throw new Error('You can only call remember on a top level GUI.');\n }\n\n const _this = this;\n\n common.each(Array.prototype.slice.call(arguments), function(object) {\n if (_this.__rememberedObjects.length === 0) {\n addSaveMenu(_this);\n }\n if (_this.__rememberedObjects.indexOf(object) === -1) {\n _this.__rememberedObjects.push(object);\n }\n });\n\n if (this.autoPlace) {\n // Set save row width\n setWidth(this, this.width);\n }\n },\n\n /**\n * @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI.\n * @instance\n */\n getRoot: function() {\n let gui = this;\n while (gui.parent) {\n gui = gui.parent;\n }\n return gui;\n },\n\n /**\n * @returns {Object} a JSON object representing the current state of\n * this GUI as well as its remembered properties.\n * @instance\n */\n getSaveObject: function() {\n const toReturn = this.load;\n toReturn.closed = this.closed;\n\n // Am I remembering any values?\n if (this.__rememberedObjects.length > 0) {\n toReturn.preset = this.preset;\n\n if (!toReturn.remembered) {\n toReturn.remembered = {};\n }\n\n toReturn.remembered[this.preset] = getCurrentPreset(this);\n }\n\n toReturn.folders = {};\n common.each(this.__folders, function(element, key) {\n toReturn.folders[key] = element.getSaveObject();\n });\n\n return toReturn;\n },\n\n save: function() {\n if (!this.load.remembered) {\n this.load.remembered = {};\n }\n\n this.load.remembered[this.preset] = getCurrentPreset(this);\n markPresetModified(this, false);\n this.saveToLocalStorageIfPossible();\n },\n\n saveAs: function(presetName) {\n if (!this.load.remembered) {\n // Retain default values upon first save\n this.load.remembered = {};\n this.load.remembered[DEFAULT_DEFAULT_PRESET_NAME] = getCurrentPreset(this, true);\n }\n\n this.load.remembered[presetName] = getCurrentPreset(this);\n this.preset = presetName;\n addPresetOption(this, presetName, true);\n this.saveToLocalStorageIfPossible();\n },\n\n revert: function(gui) {\n common.each(this.__controllers, function(controller) {\n // Make revert work on Default.\n if (!this.getRoot().load.remembered) {\n controller.setValue(controller.initialValue);\n } else {\n recallSavedValue(gui || this.getRoot(), controller);\n }\n\n // fire onFinishChange callback\n if (controller.__onFinishChange) {\n controller.__onFinishChange.call(controller, controller.getValue());\n }\n }, this);\n\n common.each(this.__folders, function(folder) {\n folder.revert(folder);\n });\n\n if (!gui) {\n markPresetModified(this.getRoot(), false);\n }\n },\n\n listen: function(controller) {\n const init = this.__listening.length === 0;\n this.__listening.push(controller);\n if (init) {\n updateDisplays(this.__listening);\n }\n },\n\n updateDisplay: function() {\n common.each(this.__controllers, function(controller) {\n controller.updateDisplay();\n });\n common.each(this.__folders, function(folder) {\n folder.updateDisplay();\n });\n }\n }\n);\n\n/**\n * Add a row to the end of the GUI or before another row.\n *\n * @param gui\n * @param [newDom] If specified, inserts the dom content in the new row\n * @param [liBefore] If specified, places the new row before another row\n *\n * @ignore\n */\nfunction addRow(gui, newDom, liBefore) {\n const li = document.createElement('li');\n if (newDom) {\n li.appendChild(newDom);\n }\n\n if (liBefore) {\n gui.__ul.insertBefore(li, liBefore);\n } else {\n gui.__ul.appendChild(li);\n }\n gui.onResize();\n return li;\n}\n\nfunction removeListeners(gui) {\n dom.unbind(window, 'resize', gui.__resizeHandler);\n\n if (gui.saveToLocalStorageIfPossible) {\n dom.unbind(window, 'unload', gui.saveToLocalStorageIfPossible);\n }\n}\n\nfunction markPresetModified(gui, modified) {\n const opt = gui.__preset_select[gui.__preset_select.selectedIndex];\n\n if (modified) {\n opt.innerHTML = opt.value + '*';\n } else {\n opt.innerHTML = opt.value;\n }\n}\n\nfunction augmentController(gui, li, controller) {\n controller.__li = li;\n controller.__gui = gui;\n\n common.extend(controller, /** @lends Controller.prototype */ {\n /**\n * @param {Array|Object} options\n * @return {Controller}\n */\n options: function(options) {\n if (arguments.length > 1) {\n const nextSibling = controller.__li.nextElementSibling;\n controller.remove();\n\n return add(\n gui,\n controller.object,\n controller.property,\n {\n before: nextSibling,\n factoryArgs: [common.toArray(arguments)]\n }\n );\n }\n\n if (common.isArray(options) || common.isObject(options)) {\n const nextSibling = controller.__li.nextElementSibling;\n controller.remove();\n\n return add(\n gui,\n controller.object,\n controller.property,\n {\n before: nextSibling,\n factoryArgs: [options]\n }\n );\n }\n },\n\n /**\n * Sets the name of the controller.\n * @param {string} name\n * @return {Controller}\n */\n name: function(name) {\n controller.__li.firstElementChild.firstElementChild.innerHTML = name;\n return controller;\n },\n\n /**\n * Sets controller to listen for changes on its underlying object.\n * @return {Controller}\n */\n listen: function() {\n controller.__gui.listen(controller);\n return controller;\n },\n\n /**\n * Removes the controller from its parent GUI.\n * @return {Controller}\n */\n remove: function() {\n controller.__gui.remove(controller);\n return controller;\n }\n });\n\n // All sliders should be accompanied by a box.\n if (controller instanceof NumberControllerSlider) {\n const box = new NumberControllerBox(controller.object, controller.property,\n { min: controller.__min, max: controller.__max, step: controller.__step });\n\n common.each(['updateDisplay', 'onChange', 'onFinishChange', 'step', 'min', 'max'], function(method) {\n const pc = controller[method];\n const pb = box[method];\n controller[method] = box[method] = function() {\n const args = Array.prototype.slice.call(arguments);\n pb.apply(box, args);\n return pc.apply(controller, args);\n };\n });\n\n dom.addClass(li, 'has-slider');\n controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild);\n } else if (controller instanceof NumberControllerBox) {\n const r = function(returned) {\n // Have we defined both boundaries?\n if (common.isNumber(controller.__min) && common.isNumber(controller.__max)) {\n // Well, then lets just replace this with a slider.\n\n // lets remember if the old controller had a specific name or was listening\n const oldName = controller.__li.firstElementChild.firstElementChild.innerHTML;\n const wasListening = controller.__gui.__listening.indexOf(controller) > -1;\n\n controller.remove();\n const newController = add(\n gui,\n controller.object,\n controller.property,\n {\n before: controller.__li.nextElementSibling,\n factoryArgs: [controller.__min, controller.__max, controller.__step]\n }\n );\n\n newController.name(oldName);\n if (wasListening) newController.listen();\n\n return newController;\n }\n\n return returned;\n };\n\n controller.min = common.compose(r, controller.min);\n controller.max = common.compose(r, controller.max);\n } else if (controller instanceof BooleanController) {\n dom.bind(li, 'click', function() {\n dom.fakeEvent(controller.__checkbox, 'click');\n });\n\n dom.bind(controller.__checkbox, 'click', function(e) {\n e.stopPropagation(); // Prevents double-toggle\n });\n } else if (controller instanceof FunctionController) {\n dom.bind(li, 'click', function() {\n dom.fakeEvent(controller.__button, 'click');\n });\n\n dom.bind(li, 'mouseover', function() {\n dom.addClass(controller.__button, 'hover');\n });\n\n dom.bind(li, 'mouseout', function() {\n dom.removeClass(controller.__button, 'hover');\n });\n } else if (controller instanceof ColorController) {\n dom.addClass(li, 'color');\n controller.updateDisplay = common.compose(function(val) {\n li.style.borderLeftColor = controller.__color.toString();\n return val;\n }, controller.updateDisplay);\n\n controller.updateDisplay();\n }\n\n controller.setValue = common.compose(function(val) {\n if (gui.getRoot().__preset_select && controller.isModified()) {\n markPresetModified(gui.getRoot(), true);\n }\n\n return val;\n }, controller.setValue);\n}\n\nfunction recallSavedValue(gui, controller) {\n // Find the topmost GUI, that's where remembered objects live.\n const root = gui.getRoot();\n\n // Does the object we're controlling match anything we've been told to\n // remember?\n const matchedIndex = root.__rememberedObjects.indexOf(controller.object);\n\n // Why yes, it does!\n if (matchedIndex !== -1) {\n // Let me fetch a map of controllers for thcommon.isObject.\n let controllerMap = root.__rememberedObjectIndecesToControllers[matchedIndex];\n\n // Ohp, I believe this is the first controller we've created for this\n // object. Lets make the map fresh.\n if (controllerMap === undefined) {\n controllerMap = {};\n root.__rememberedObjectIndecesToControllers[matchedIndex] =\n controllerMap;\n }\n\n // Keep track of this controller\n controllerMap[controller.property] = controller;\n\n // Okay, now have we saved any values for this controller?\n if (root.load && root.load.remembered) {\n const presetMap = root.load.remembered;\n\n // Which preset are we trying to load?\n let preset;\n\n if (presetMap[gui.preset]) {\n preset = presetMap[gui.preset];\n } else if (presetMap[DEFAULT_DEFAULT_PRESET_NAME]) {\n // Uhh, you can have the default instead?\n preset = presetMap[DEFAULT_DEFAULT_PRESET_NAME];\n } else {\n // Nada.\n return;\n }\n\n // Did the loaded object remember thcommon.isObject? && Did we remember this particular property?\n if (preset[matchedIndex] && preset[matchedIndex][controller.property] !== undefined) {\n // We did remember something for this guy ...\n const value = preset[matchedIndex][controller.property];\n\n // And that's what it is.\n controller.initialValue = value;\n controller.setValue(value);\n }\n }\n }\n}\n\nfunction add(gui, object, property, params) {\n if (object[property] === undefined) {\n throw new Error(`Object \"${object}\" has no property \"${property}\"`);\n }\n\n let controller;\n\n if (params.color) {\n controller = new ColorController(object, property);\n } else {\n const factoryArgs = [object, property].concat(params.factoryArgs);\n controller = ControllerFactory.apply(gui, factoryArgs);\n }\n\n if (params.before instanceof Controller) {\n params.before = params.before.__li;\n }\n\n recallSavedValue(gui, controller);\n\n dom.addClass(controller.domElement, 'c');\n\n const name = document.createElement('span');\n dom.addClass(name, 'property-name');\n name.innerHTML = controller.property;\n\n const container = document.createElement('div');\n container.appendChild(name);\n container.appendChild(controller.domElement);\n\n const li = addRow(gui, container, params.before);\n\n dom.addClass(li, GUI.CLASS_CONTROLLER_ROW);\n if (controller instanceof ColorController) {\n dom.addClass(li, 'color');\n } else {\n dom.addClass(li, typeof controller.getValue());\n }\n\n augmentController(gui, li, controller);\n\n gui.__controllers.push(controller);\n\n return controller;\n}\n\nfunction getLocalStorageHash(gui, key) {\n // TODO how does this deal with multiple GUI's?\n return document.location.href + '.' + key;\n}\n\nfunction addPresetOption(gui, name, setSelected) {\n const opt = document.createElement('option');\n opt.innerHTML = name;\n opt.value = name;\n gui.__preset_select.appendChild(opt);\n if (setSelected) {\n gui.__preset_select.selectedIndex = gui.__preset_select.length - 1;\n }\n}\n\nfunction showHideExplain(gui, explain) {\n explain.style.display = gui.useLocalStorage ? 'block' : 'none';\n}\n\nfunction addSaveMenu(gui) {\n const div = gui.__save_row = document.createElement('li');\n\n dom.addClass(gui.domElement, 'has-save');\n\n gui.__ul.insertBefore(div, gui.__ul.firstChild);\n\n dom.addClass(div, 'save-row');\n\n const gears = document.createElement('span');\n gears.innerHTML = ' ';\n dom.addClass(gears, 'button gears');\n\n // TODO replace with FunctionController\n const button = document.createElement('span');\n button.innerHTML = 'Save';\n dom.addClass(button, 'button');\n dom.addClass(button, 'save');\n\n const button2 = document.createElement('span');\n button2.innerHTML = 'New';\n dom.addClass(button2, 'button');\n dom.addClass(button2, 'save-as');\n\n const button3 = document.createElement('span');\n button3.innerHTML = 'Revert';\n dom.addClass(button3, 'button');\n dom.addClass(button3, 'revert');\n\n const select = gui.__preset_select = document.createElement('select');\n\n if (gui.load && gui.load.remembered) {\n common.each(gui.load.remembered, function(value, key) {\n addPresetOption(gui, key, key === gui.preset);\n });\n } else {\n addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false);\n }\n\n dom.bind(select, 'change', function() {\n for (let index = 0; index < gui.__preset_select.length; index++) {\n gui.__preset_select[index].innerHTML = gui.__preset_select[index].value;\n }\n\n gui.preset = this.value;\n });\n\n div.appendChild(select);\n div.appendChild(gears);\n div.appendChild(button);\n div.appendChild(button2);\n div.appendChild(button3);\n\n if (SUPPORTS_LOCAL_STORAGE) {\n const explain = document.getElementById('dg-local-explain');\n const localStorageCheckBox = document.getElementById('dg-local-storage');\n const saveLocally = document.getElementById('dg-save-locally');\n\n saveLocally.style.display = 'block';\n\n if (localStorage.getItem(getLocalStorageHash(gui, 'isLocal')) === 'true') {\n localStorageCheckBox.setAttribute('checked', 'checked');\n }\n\n showHideExplain(gui, explain);\n\n // TODO: Use a boolean controller, fool!\n dom.bind(localStorageCheckBox, 'change', function() {\n gui.useLocalStorage = !gui.useLocalStorage;\n showHideExplain(gui, explain);\n });\n }\n\n const newConstructorTextArea = document.getElementById('dg-new-constructor');\n\n dom.bind(newConstructorTextArea, 'keydown', function(e) {\n if (e.metaKey && (e.which === 67 || e.keyCode === 67)) {\n SAVE_DIALOGUE.hide();\n }\n });\n\n dom.bind(gears, 'click', function() {\n newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2);\n SAVE_DIALOGUE.show();\n newConstructorTextArea.focus();\n newConstructorTextArea.select();\n });\n\n dom.bind(button, 'click', function() {\n gui.save();\n });\n\n dom.bind(button2, 'click', function() {\n const presetName = prompt('Enter a new preset name.');\n if (presetName) {\n gui.saveAs(presetName);\n }\n });\n\n dom.bind(button3, 'click', function() {\n gui.revert();\n });\n\n // div.appendChild(button2);\n}\n\nfunction addResizeHandle(gui) {\n let pmouseX;\n\n gui.__resize_handle = document.createElement('div');\n\n common.extend(gui.__resize_handle.style, {\n\n width: '6px',\n marginLeft: '-3px',\n height: '200px',\n cursor: 'ew-resize',\n position: 'absolute'\n // border: '1px solid blue'\n\n });\n\n function drag(e) {\n e.preventDefault();\n\n gui.width += pmouseX - e.clientX;\n gui.onResize();\n pmouseX = e.clientX;\n\n return false;\n }\n\n function dragStop() {\n dom.removeClass(gui.__closeButton, GUI.CLASS_DRAG);\n dom.unbind(window, 'mousemove', drag);\n dom.unbind(window, 'mouseup', dragStop);\n }\n\n function dragStart(e) {\n e.preventDefault();\n\n pmouseX = e.clientX;\n\n dom.addClass(gui.__closeButton, GUI.CLASS_DRAG);\n dom.bind(window, 'mousemove', drag);\n dom.bind(window, 'mouseup', dragStop);\n\n return false;\n }\n\n dom.bind(gui.__resize_handle, 'mousedown', dragStart);\n dom.bind(gui.__closeButton, 'mousedown', dragStart);\n\n gui.domElement.insertBefore(gui.__resize_handle, gui.domElement.firstElementChild);\n}\n\nfunction setWidth(gui, w) {\n gui.domElement.style.width = w + 'px';\n // Auto placed save-rows are position fixed, so we have to\n // set the width manually if we want it to bleed to the edge\n if (gui.__save_row && gui.autoPlace) {\n gui.__save_row.style.width = w + 'px';\n }\n if (gui.__closeButton) {\n gui.__closeButton.style.width = w + 'px';\n }\n}\n\nfunction getCurrentPreset(gui, useInitialValues) {\n const toReturn = {};\n\n // For each object I'm remembering\n common.each(gui.__rememberedObjects, function(val, index) {\n const savedValues = {};\n\n // The controllers I've made for thcommon.isObject by property\n const controllerMap =\n gui.__rememberedObjectIndecesToControllers[index];\n\n // Remember each value for each property\n common.each(controllerMap, function(controller, property) {\n savedValues[property] = useInitialValues ? controller.initialValue : controller.getValue();\n });\n\n // Save the values for thcommon.isObject\n toReturn[index] = savedValues;\n });\n\n return toReturn;\n}\n\nfunction setPresetSelectIndex(gui) {\n for (let index = 0; index < gui.__preset_select.length; index++) {\n if (gui.__preset_select[index].value === gui.preset) {\n gui.__preset_select.selectedIndex = index;\n }\n }\n}\n\nfunction updateDisplays(controllerArray) {\n if (controllerArray.length !== 0) {\n requestAnimationFrame.call(window, function() {\n updateDisplays(controllerArray);\n });\n }\n\n common.each(controllerArray, function(c) {\n c.updateDisplay();\n });\n}\n\nexport default GUI;\n"
},
{
"path": "src/dat/gui/_structure.scss",
"content": "$nest-margin: 4px;\n$row-height: 27px;\n\n$button-height: 20px;\n\n.dg {\n\n /** Clear list styles */\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n clear: both;\n }\n\n /* Auto-place container */\n &.ac {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n z-index: 0;\n }\n\n &:not(.ac) .main {\n /** Exclude mains in ac so that we don't hide close button */\n overflow: hidden;\n }\n\n &.main {\n\n @include transition(opacity, 0.1s, linear);\n\n &.taller-than-window {\n\n overflow-y: auto;\n\n .close-button {\n\n opacity: 1;\n\n /* TODO, these are style notes */\n margin-top: -1px;\n border-top: 1px solid $border-color;\n\n }\n\n }\n\n ul.closed .close-button {\n opacity: 1 !important;\n }\n\n &:hover .close-button,\n .close-button.drag {\n opacity: 1;\n }\n\n .close-button {\n /*opacity: 0;*/\n @include transition(opacity, 0.1s, linear);\n border: 0;\n\n line-height: $button-height - 1;\n height: $button-height;\n\n /* TODO, these are style notes */\n cursor: pointer;\n text-align: center;\n background-color: #000;\n &.close-top {\n position: relative;\n }\n &.close-bottom {\n position: absolute;\n }\n &:hover {\n background-color: #111;\n }\n\n }\n\n }\n\n /* Auto-placed GUI's */\n &.a {\n\n float: right;\n margin-right: 15px;\n overflow-y:visible;\n\n &.has-save > ul {\n\n &.close-top {\n margin-top: 0;\n }\n &.close-bottom {\n margin-top: $row-height;\n }\n\n &.closed {\n margin-top: 0;\n }\n }\n\n .save-row {\n top: 0;\n z-index: 1002;\n\n &.close-top {\n position: relative;\n }\n &.close-bottom {\n position: fixed;\n }\n\n }\n\n }\n\n li {\n @include transition(height, 0.1s, ease-out);\n @include transition(overflow, 0.1s, linear);\n }\n\n /* Line items that don't contain folders. */\n li:not(.folder) {\n cursor: auto;\n height: $row-height;\n line-height: $row-height;\n padding: 0 4px 0 5px;\n }\n\n li.folder {\n padding: 0;\n border-left: $nest-margin solid rgba(0, 0, 0, 0);\n\n }\n\n /** Folder names */\n li.title {\n cursor: pointer;\n margin-left: -$nest-margin;\n }\n\n /** Hides closed items */\n .closed li:not(.title),\n .closed ul li,\n .closed ul li > * {\n height: 0;\n overflow: hidden;\n border: 0;\n }\n\n /** Controller row */\n .cr {\n clear: both;\n padding-left: 3px;\n height: $row-height;\n overflow: hidden;\n }\n\n /** Name-half (left) */\n .property-name {\n cursor: default;\n float: left;\n clear: left;\n width: 40%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n /** Function controllers can use the entire width */\n .cr.function .property-name {\n width: 100%;\n }\n\n /** Controller-half (right) */\n .c {\n float: left;\n width: 60%;\n position: relative;\n }\n\n /** Controller placement */\n .c input[type=text] {\n border: 0;\n margin-top: 4px;\n padding: 3px;\n width: 100%;\n float: right;\n }\n\n /** Shorter number boxes when slider is present. */\n .has-slider input[type=text] {\n width: 30%;\n /*display: none;*/\n margin-left: 0;\n }\n\n .slider {\n float: left;\n width: 66%;\n margin-left: -5px;\n margin-right: 0;\n height: 19px;\n margin-top: 4px;\n }\n\n .slider-fg {\n height: 100%;\n }\n\n .c input[type=checkbox] {\n margin-top: 7px;\n }\n\n .c select {\n margin-top: 5px;\n }\n\n /** Ensure the entire boolean and function row shows a hand */\n .cr.function,\n .cr.function .property-name, /* Don't know why I need to be this explicit */\n .cr.function *,\n .cr.boolean,\n .cr.boolean * {\n cursor: pointer;\n }\n\n /** allow overflow for color selector */\n .cr.color {\n overflow: visible;\n }\n\n .selector {\n display: none;\n position: absolute;\n margin-left: -9px;\n margin-top: 23px;\n z-index: 10;\n }\n\n .c:hover .selector,\n .selector.drag {\n display: block;\n }\n\n li.save-row {\n\n padding: 0;\n\n .button {\n display: inline-block;\n padding: 0px 6px;\n }\n\n }\n\n &.dialogue {\n background-color: #222;\n width: 460px;\n padding: 15px;\n font-size: 13px;\n line-height: 15px;\n }\n\n}\n\n/* TODO Separate style and structure */\n#dg-new-constructor {\n padding: 10px;\n color: #222;\n font-family: Monaco, monospace;\n font-size: 10px;\n border: 0;\n resize: none;\n box-shadow: inset 1px 1px 1px #888;\n word-wrap: break-word;\n margin: 12px 0;\n display: block;\n width: 440px;\n overflow-y: scroll;\n height: 100px;\n position: relative;\n}\n\n#dg-local-explain {\n display: none;\n font-size: 11px;\n line-height: 17px;\n border-radius: 3px;\n background-color: #333;\n padding: 8px;\n margin-top: 10px;\n code {\n font-size: 10px;\n }\n}\n\n#dat-gui-save-locally {\n display: none;\n}\n"
},
{
"path": "src/dat/gui/saveDialogue.html.js",
"content": "const saveDialogContents = `GUI's constructor:\n\n \n\n localStorage on exit.\n\n localStorage will\n override those passed to dat.GUI's constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n\n | t |