object[property]
1083 | *
1084 | * @param {Object} newValue The new value of object[property]
1085 | */
1086 |
1087 |
1088 | Controller.prototype.setValue = function setValue(newValue) {
1089 | this.object[this.property] = newValue;
1090 | if (this.__onChange) {
1091 | this.__onChange.call(this, newValue);
1092 | }
1093 |
1094 | this.updateDisplay();
1095 | return this;
1096 | };
1097 |
1098 | /**
1099 | * Gets the value of object[property]
1100 | *
1101 | * @returns {Object} The current value of object[property]
1102 | */
1103 |
1104 |
1105 | Controller.prototype.getValue = function getValue() {
1106 | return this.object[this.property];
1107 | };
1108 |
1109 | /**
1110 | * Refreshes the visual display of a Controller in order to keep sync
1111 | * with the object's current value.
1112 | * @returns {Controller} this
1113 | */
1114 |
1115 |
1116 | Controller.prototype.updateDisplay = function updateDisplay() {
1117 | return this;
1118 | };
1119 |
1120 | /**
1121 | * @returns {Boolean} true if the value has deviated from initialValue
1122 | */
1123 |
1124 |
1125 | Controller.prototype.isModified = function isModified() {
1126 | return this.initialValue !== this.getValue();
1127 | };
1128 |
1129 | return Controller;
1130 | }();
1131 |
1132 | exports.default = Controller;
1133 |
1134 | /***/ },
1135 | /* 8 */
1136 | /***/ function(module, exports, __webpack_require__) {
1137 |
1138 | 'use strict';
1139 |
1140 | exports.__esModule = true;
1141 |
1142 | var _Controller2 = __webpack_require__(7);
1143 |
1144 | var _Controller3 = _interopRequireDefault(_Controller2);
1145 |
1146 | var _dom = __webpack_require__(9);
1147 |
1148 | var _dom2 = _interopRequireDefault(_dom);
1149 |
1150 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1151 |
1152 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1153 |
1154 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1155 |
1156 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
1157 | * dat-gui JavaScript Controller Library
1158 | * http://code.google.com/p/dat-gui
1159 | *
1160 | * Copyright 2011 Data Arts Team, Google Creative Lab
1161 | *
1162 | * Licensed under the Apache License, Version 2.0 (the "License");
1163 | * you may not use this file except in compliance with the License.
1164 | * You may obtain a copy of the License at
1165 | *
1166 | * http://www.apache.org/licenses/LICENSE-2.0
1167 | */
1168 |
1169 | /**
1170 | * @class Provides a checkbox input to alter the boolean property of an object.
1171 | * @extends dat.controllers.Controller
1172 | *
1173 | * @param {Object} object The object to be manipulated
1174 | * @param {string} property The name of the property to be manipulated
1175 | *
1176 | * @member dat.controllers
1177 | */
1178 | var BooleanController = function (_Controller) {
1179 | _inherits(BooleanController, _Controller);
1180 |
1181 | function BooleanController(object, property) {
1182 | _classCallCheck(this, BooleanController);
1183 |
1184 | var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property));
1185 |
1186 | var _this = _this2;
1187 | _this2.__prev = _this2.getValue();
1188 |
1189 | _this2.__checkbox = document.createElement('input');
1190 | _this2.__checkbox.setAttribute('type', 'checkbox');
1191 |
1192 | function onChange() {
1193 | _this.setValue(!_this.__prev);
1194 | }
1195 |
1196 | _dom2.default.bind(_this2.__checkbox, 'change', onChange, false);
1197 |
1198 | _this2.domElement.appendChild(_this2.__checkbox);
1199 |
1200 | // Match original value
1201 | _this2.updateDisplay();
1202 | return _this2;
1203 | }
1204 |
1205 | BooleanController.prototype.setValue = function setValue(v) {
1206 | var toReturn = _Controller.prototype.setValue.call(this, v);
1207 | if (this.__onFinishChange) {
1208 | this.__onFinishChange.call(this, this.getValue());
1209 | }
1210 | this.__prev = this.getValue();
1211 | return toReturn;
1212 | };
1213 |
1214 | BooleanController.prototype.updateDisplay = function updateDisplay() {
1215 | if (this.getValue() === true) {
1216 | this.__checkbox.setAttribute('checked', 'checked');
1217 | this.__checkbox.checked = true;
1218 | } else {
1219 | this.__checkbox.checked = false;
1220 | }
1221 |
1222 | return _Controller.prototype.updateDisplay.call(this);
1223 | };
1224 |
1225 | return BooleanController;
1226 | }(_Controller3.default);
1227 |
1228 | exports.default = BooleanController;
1229 |
1230 | /***/ },
1231 | /* 9 */
1232 | /***/ function(module, exports, __webpack_require__) {
1233 |
1234 | 'use strict';
1235 |
1236 | exports.__esModule = true;
1237 |
1238 | var _common = __webpack_require__(5);
1239 |
1240 | var _common2 = _interopRequireDefault(_common);
1241 |
1242 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1243 |
1244 | var EVENT_MAP = {
1245 | HTMLEvents: ['change'],
1246 | MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],
1247 | KeyboardEvents: ['keydown']
1248 | }; /**
1249 | * dat-gui JavaScript Controller Library
1250 | * http://code.google.com/p/dat-gui
1251 | *
1252 | * Copyright 2011 Data Arts Team, Google Creative Lab
1253 | *
1254 | * Licensed under the Apache License, Version 2.0 (the "License");
1255 | * you may not use this file except in compliance with the License.
1256 | * You may obtain a copy of the License at
1257 | *
1258 | * http://www.apache.org/licenses/LICENSE-2.0
1259 | */
1260 |
1261 | var EVENT_MAP_INV = {};
1262 | _common2.default.each(EVENT_MAP, function (v, k) {
1263 | _common2.default.each(v, function (e) {
1264 | EVENT_MAP_INV[e] = k;
1265 | });
1266 | });
1267 |
1268 | var CSS_VALUE_PIXELS = /(\d+(\.\d+)?)px/;
1269 |
1270 | function cssValueToPixels(val) {
1271 | if (val === '0' || _common2.default.isUndefined(val)) {
1272 | return 0;
1273 | }
1274 |
1275 | var match = val.match(CSS_VALUE_PIXELS);
1276 |
1277 | if (!_common2.default.isNull(match)) {
1278 | return parseFloat(match[1]);
1279 | }
1280 |
1281 | // TODO ...ems? %?
1282 |
1283 | return 0;
1284 | }
1285 |
1286 | /**
1287 | * @namespace
1288 | * @member dat.dom
1289 | */
1290 | var dom = {
1291 |
1292 | /**
1293 | *
1294 | * @param elem
1295 | * @param selectable
1296 | */
1297 | makeSelectable: function makeSelectable(elem, selectable) {
1298 | if (elem === undefined || elem.style === undefined) return;
1299 |
1300 | elem.onselectstart = selectable ? function () {
1301 | return false;
1302 | } : function () {};
1303 |
1304 | elem.style.MozUserSelect = selectable ? 'auto' : 'none';
1305 | elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';
1306 | elem.unselectable = selectable ? 'on' : 'off';
1307 | },
1308 |
1309 | /**
1310 | *
1311 | * @param elem
1312 | * @param horizontal
1313 | * @param vert
1314 | */
1315 | makeFullscreen: function makeFullscreen(elem, hor, vert) {
1316 | var vertical = vert;
1317 | var horizontal = hor;
1318 |
1319 | if (_common2.default.isUndefined(horizontal)) {
1320 | horizontal = true;
1321 | }
1322 |
1323 | if (_common2.default.isUndefined(vertical)) {
1324 | vertical = true;
1325 | }
1326 |
1327 | elem.style.position = 'absolute';
1328 |
1329 | if (horizontal) {
1330 | elem.style.left = 0;
1331 | elem.style.right = 0;
1332 | }
1333 | if (vertical) {
1334 | elem.style.top = 0;
1335 | elem.style.bottom = 0;
1336 | }
1337 | },
1338 |
1339 | /**
1340 | *
1341 | * @param elem
1342 | * @param eventType
1343 | * @param params
1344 | */
1345 | fakeEvent: function fakeEvent(elem, eventType, pars, aux) {
1346 | var params = pars || {};
1347 | var className = EVENT_MAP_INV[eventType];
1348 | if (!className) {
1349 | throw new Error('Event type ' + eventType + ' not supported.');
1350 | }
1351 | var evt = document.createEvent(className);
1352 | switch (className) {
1353 | case 'MouseEvents':
1354 | {
1355 | var clientX = params.x || params.clientX || 0;
1356 | var clientY = params.y || params.clientY || 0;
1357 | evt.initMouseEvent(eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, 0, // screen X
1358 | 0, // screen Y
1359 | clientX, // client X
1360 | clientY, // client Y
1361 | false, false, false, false, 0, null);
1362 | break;
1363 | }
1364 | case 'KeyboardEvents':
1365 | {
1366 | var init = evt.initKeyboardEvent || evt.initKeyEvent; // webkit || moz
1367 | _common2.default.defaults(params, {
1368 | cancelable: true,
1369 | ctrlKey: false,
1370 | altKey: false,
1371 | shiftKey: false,
1372 | metaKey: false,
1373 | keyCode: undefined,
1374 | charCode: undefined
1375 | });
1376 | init(eventType, params.bubbles || false, params.cancelable, window, params.ctrlKey, params.altKey, params.shiftKey, params.metaKey, params.keyCode, params.charCode);
1377 | break;
1378 | }
1379 | default:
1380 | {
1381 | evt.initEvent(eventType, params.bubbles || false, params.cancelable || true);
1382 | break;
1383 | }
1384 | }
1385 | _common2.default.defaults(evt, aux);
1386 | elem.dispatchEvent(evt);
1387 | },
1388 |
1389 | /**
1390 | *
1391 | * @param elem
1392 | * @param event
1393 | * @param func
1394 | * @param bool
1395 | */
1396 | bind: function bind(elem, event, func, newBool) {
1397 | var bool = newBool || false;
1398 | if (elem.addEventListener) {
1399 | elem.addEventListener(event, func, bool);
1400 | } else if (elem.attachEvent) {
1401 | elem.attachEvent('on' + event, func);
1402 | }
1403 | return dom;
1404 | },
1405 |
1406 | /**
1407 | *
1408 | * @param elem
1409 | * @param event
1410 | * @param func
1411 | * @param bool
1412 | */
1413 | unbind: function unbind(elem, event, func, newBool) {
1414 | var bool = newBool || false;
1415 | if (elem.removeEventListener) {
1416 | elem.removeEventListener(event, func, bool);
1417 | } else if (elem.detachEvent) {
1418 | elem.detachEvent('on' + event, func);
1419 | }
1420 | return dom;
1421 | },
1422 |
1423 | /**
1424 | *
1425 | * @param elem
1426 | * @param className
1427 | */
1428 | addClass: function addClass(elem, className) {
1429 | if (elem.className === undefined) {
1430 | elem.className = className;
1431 | } else if (elem.className !== className) {
1432 | var classes = elem.className.split(/ +/);
1433 | if (classes.indexOf(className) === -1) {
1434 | classes.push(className);
1435 | elem.className = classes.join(' ').replace(/^\s+/, '').replace(/\s+$/, '');
1436 | }
1437 | }
1438 | return dom;
1439 | },
1440 |
1441 | /**
1442 | *
1443 | * @param elem
1444 | * @param className
1445 | */
1446 | removeClass: function removeClass(elem, className) {
1447 | if (className) {
1448 | if (elem.className === className) {
1449 | elem.removeAttribute('class');
1450 | } else {
1451 | var classes = elem.className.split(/ +/);
1452 | var index = classes.indexOf(className);
1453 | if (index !== -1) {
1454 | classes.splice(index, 1);
1455 | elem.className = classes.join(' ');
1456 | }
1457 | }
1458 | } else {
1459 | elem.className = undefined;
1460 | }
1461 | return dom;
1462 | },
1463 |
1464 | hasClass: function hasClass(elem, className) {
1465 | return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(elem.className) || false;
1466 | },
1467 |
1468 | /**
1469 | *
1470 | * @param elem
1471 | */
1472 | getWidth: function getWidth(elem) {
1473 | var style = getComputedStyle(elem);
1474 |
1475 | return cssValueToPixels(style['border-left-width']) + cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-right']) + cssValueToPixels(style.width);
1476 | },
1477 |
1478 | /**
1479 | *
1480 | * @param elem
1481 | */
1482 | getHeight: function getHeight(elem) {
1483 | var style = getComputedStyle(elem);
1484 |
1485 | return cssValueToPixels(style['border-top-width']) + cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-bottom']) + cssValueToPixels(style.height);
1486 | },
1487 |
1488 | /**
1489 | *
1490 | * @param el
1491 | */
1492 | getOffset: function getOffset(el) {
1493 | var elem = el;
1494 | var offset = { left: 0, top: 0 };
1495 | if (elem.offsetParent) {
1496 | do {
1497 | offset.left += elem.offsetLeft;
1498 | offset.top += elem.offsetTop;
1499 | elem = elem.offsetParent;
1500 | } while (elem);
1501 | }
1502 | return offset;
1503 | },
1504 |
1505 | // http://stackoverflow.com/posts/2684561/revisions
1506 | /**
1507 | *
1508 | * @param elem
1509 | */
1510 | isActive: function isActive(elem) {
1511 | return elem === document.activeElement && (elem.type || elem.href);
1512 | }
1513 |
1514 | };
1515 |
1516 | exports.default = dom;
1517 |
1518 | /***/ },
1519 | /* 10 */
1520 | /***/ function(module, exports, __webpack_require__) {
1521 |
1522 | 'use strict';
1523 |
1524 | exports.__esModule = true;
1525 |
1526 | var _Controller2 = __webpack_require__(7);
1527 |
1528 | var _Controller3 = _interopRequireDefault(_Controller2);
1529 |
1530 | var _dom = __webpack_require__(9);
1531 |
1532 | var _dom2 = _interopRequireDefault(_dom);
1533 |
1534 | var _common = __webpack_require__(5);
1535 |
1536 | var _common2 = _interopRequireDefault(_common);
1537 |
1538 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1539 |
1540 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1541 |
1542 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1543 |
1544 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
1545 | * dat-gui JavaScript Controller Library
1546 | * http://code.google.com/p/dat-gui
1547 | *
1548 | * Copyright 2011 Data Arts Team, Google Creative Lab
1549 | *
1550 | * Licensed under the Apache License, Version 2.0 (the "License");
1551 | * you may not use this file except in compliance with the License.
1552 | * You may obtain a copy of the License at
1553 | *
1554 | * http://www.apache.org/licenses/LICENSE-2.0
1555 | */
1556 |
1557 | /**
1558 | * @class Provides a select input to alter the property of an object, using a
1559 | * list of accepted values.
1560 | *
1561 | * @extends dat.controllers.Controller
1562 | *
1563 | * @param {Object} object The object to be manipulated
1564 | * @param {string} property The name of the property to be manipulated
1565 | * @param {Object|string[]} options A map of labels to acceptable values, or
1566 | * a list of acceptable string values.
1567 | *
1568 | * @member dat.controllers
1569 | */
1570 | var OptionController = function (_Controller) {
1571 | _inherits(OptionController, _Controller);
1572 |
1573 | function OptionController(object, property, opts) {
1574 | _classCallCheck(this, OptionController);
1575 |
1576 | var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property));
1577 |
1578 | var options = opts;
1579 |
1580 | var _this = _this2;
1581 |
1582 | /**
1583 | * The drop down menu
1584 | * @ignore
1585 | */
1586 | _this2.__select = document.createElement('select');
1587 |
1588 | if (_common2.default.isArray(options)) {
1589 | (function () {
1590 | var map = {};
1591 | _common2.default.each(options, function (element) {
1592 | map[element] = element;
1593 | });
1594 | options = map;
1595 | })();
1596 | }
1597 |
1598 | _common2.default.each(options, function (value, key) {
1599 | var opt = document.createElement('option');
1600 | opt.innerHTML = key;
1601 | opt.setAttribute('value', value);
1602 | _this.__select.appendChild(opt);
1603 | });
1604 |
1605 | // Acknowledge original value
1606 | _this2.updateDisplay();
1607 |
1608 | _dom2.default.bind(_this2.__select, 'change', function () {
1609 | var desiredValue = this.options[this.selectedIndex].value;
1610 | _this.setValue(desiredValue);
1611 | });
1612 |
1613 | _this2.domElement.appendChild(_this2.__select);
1614 | return _this2;
1615 | }
1616 |
1617 | OptionController.prototype.setValue = function setValue(v) {
1618 | var toReturn = _Controller.prototype.setValue.call(this, v);
1619 |
1620 | if (this.__onFinishChange) {
1621 | this.__onFinishChange.call(this, this.getValue());
1622 | }
1623 | return toReturn;
1624 | };
1625 |
1626 | OptionController.prototype.updateDisplay = function updateDisplay() {
1627 | if (_dom2.default.isActive(this.__select)) return this; // prevent number from updating if user is trying to manually update
1628 | this.__select.value = this.getValue();
1629 | return _Controller.prototype.updateDisplay.call(this);
1630 | };
1631 |
1632 | return OptionController;
1633 | }(_Controller3.default);
1634 |
1635 | exports.default = OptionController;
1636 |
1637 | /***/ },
1638 | /* 11 */
1639 | /***/ function(module, exports, __webpack_require__) {
1640 |
1641 | 'use strict';
1642 |
1643 | exports.__esModule = true;
1644 |
1645 | var _Controller2 = __webpack_require__(7);
1646 |
1647 | var _Controller3 = _interopRequireDefault(_Controller2);
1648 |
1649 | var _dom = __webpack_require__(9);
1650 |
1651 | var _dom2 = _interopRequireDefault(_dom);
1652 |
1653 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1654 |
1655 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1656 |
1657 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1658 |
1659 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
1660 | * dat-gui JavaScript Controller Library
1661 | * http://code.google.com/p/dat-gui
1662 | *
1663 | * Copyright 2011 Data Arts Team, Google Creative Lab
1664 | *
1665 | * Licensed under the Apache License, Version 2.0 (the "License");
1666 | * you may not use this file except in compliance with the License.
1667 | * You may obtain a copy of the License at
1668 | *
1669 | * http://www.apache.org/licenses/LICENSE-2.0
1670 | */
1671 |
1672 | /**
1673 | * @class Provides a text input to alter the string property of an object.
1674 | *
1675 | * @extends dat.controllers.Controller
1676 | *
1677 | * @param {Object} object The object to be manipulated
1678 | * @param {string} property The name of the property to be manipulated
1679 | *
1680 | * @member dat.controllers
1681 | */
1682 | var StringController = function (_Controller) {
1683 | _inherits(StringController, _Controller);
1684 |
1685 | function StringController(object, property) {
1686 | _classCallCheck(this, StringController);
1687 |
1688 | var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property));
1689 |
1690 | var _this = _this2;
1691 |
1692 | function onChange() {
1693 | _this.setValue(_this.__input.value);
1694 | }
1695 |
1696 | function onBlur() {
1697 | if (_this.__onFinishChange) {
1698 | _this.__onFinishChange.call(_this, _this.getValue());
1699 | }
1700 | }
1701 |
1702 | _this2.__input = document.createElement('input');
1703 | _this2.__input.setAttribute('type', 'text');
1704 |
1705 | _dom2.default.bind(_this2.__input, 'keyup', onChange);
1706 | _dom2.default.bind(_this2.__input, 'change', onChange);
1707 | _dom2.default.bind(_this2.__input, 'blur', onBlur);
1708 | _dom2.default.bind(_this2.__input, 'keydown', function (e) {
1709 | if (e.keyCode === 13) {
1710 | this.blur();
1711 | }
1712 | });
1713 |
1714 | _this2.updateDisplay();
1715 |
1716 | _this2.domElement.appendChild(_this2.__input);
1717 | return _this2;
1718 | }
1719 |
1720 | StringController.prototype.updateDisplay = function updateDisplay() {
1721 | // Stops the caret from moving on account of:
1722 | // keyup -> setValue -> updateDisplay
1723 | if (!_dom2.default.isActive(this.__input)) {
1724 | this.__input.value = this.getValue();
1725 | }
1726 | return _Controller.prototype.updateDisplay.call(this);
1727 | };
1728 |
1729 | return StringController;
1730 | }(_Controller3.default);
1731 |
1732 | exports.default = StringController;
1733 |
1734 | /***/ },
1735 | /* 12 */
1736 | /***/ function(module, exports, __webpack_require__) {
1737 |
1738 | 'use strict';
1739 |
1740 | exports.__esModule = true;
1741 |
1742 | var _Controller2 = __webpack_require__(7);
1743 |
1744 | var _Controller3 = _interopRequireDefault(_Controller2);
1745 |
1746 | var _common = __webpack_require__(5);
1747 |
1748 | var _common2 = _interopRequireDefault(_common);
1749 |
1750 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1751 |
1752 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1753 |
1754 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1755 |
1756 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
1757 | * dat-gui JavaScript Controller Library
1758 | * http://code.google.com/p/dat-gui
1759 | *
1760 | * Copyright 2011 Data Arts Team, Google Creative Lab
1761 | *
1762 | * Licensed under the Apache License, Version 2.0 (the "License");
1763 | * you may not use this file except in compliance with the License.
1764 | * You may obtain a copy of the License at
1765 | *
1766 | * http://www.apache.org/licenses/LICENSE-2.0
1767 | */
1768 |
1769 | function numDecimals(x) {
1770 | var _x = x.toString();
1771 | if (_x.indexOf('.') > -1) {
1772 | return _x.length - _x.indexOf('.') - 1;
1773 | }
1774 |
1775 | return 0;
1776 | }
1777 |
1778 | /**
1779 | * @class Represents a given property of an object that is a number.
1780 | *
1781 | * @extends dat.controllers.Controller
1782 | *
1783 | * @param {Object} object The object to be manipulated
1784 | * @param {string} property The name of the property to be manipulated
1785 | * @param {Object} [params] Optional parameters
1786 | * @param {Number} [params.min] Minimum allowed value
1787 | * @param {Number} [params.max] Maximum allowed value
1788 | * @param {Number} [params.step] Increment by which to change value
1789 | *
1790 | * @member dat.controllers
1791 | */
1792 |
1793 | var NumberController = function (_Controller) {
1794 | _inherits(NumberController, _Controller);
1795 |
1796 | function NumberController(object, property, params) {
1797 | _classCallCheck(this, NumberController);
1798 |
1799 | var _this = _possibleConstructorReturn(this, _Controller.call(this, object, property));
1800 |
1801 | var _params = params || {};
1802 |
1803 | _this.__min = _params.min;
1804 | _this.__max = _params.max;
1805 | _this.__step = _params.step;
1806 |
1807 | if (_common2.default.isUndefined(_this.__step)) {
1808 | if (_this.initialValue === 0) {
1809 | _this.__impliedStep = 1; // What are we, psychics?
1810 | } else {
1811 | // Hey Doug, check this out.
1812 | _this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(_this.initialValue)) / Math.LN10)) / 10;
1813 | }
1814 | } else {
1815 | _this.__impliedStep = _this.__step;
1816 | }
1817 |
1818 | _this.__precision = numDecimals(_this.__impliedStep);
1819 | return _this;
1820 | }
1821 |
1822 | NumberController.prototype.setValue = function setValue(v) {
1823 | var _v = v;
1824 |
1825 | if (this.__min !== undefined && _v < this.__min) {
1826 | _v = this.__min;
1827 | } else if (this.__max !== undefined && _v > this.__max) {
1828 | _v = this.__max;
1829 | }
1830 |
1831 | if (this.__step !== undefined && _v % this.__step !== 0) {
1832 | _v = Math.round(_v / this.__step) * this.__step;
1833 | }
1834 |
1835 | return _Controller.prototype.setValue.call(this, _v);
1836 | };
1837 |
1838 | /**
1839 | * Specify a minimum value for object[property].
1840 | *
1841 | * @param {Number} minValue The minimum value for
1842 | * object[property]
1843 | * @returns {dat.controllers.NumberController} this
1844 | */
1845 |
1846 |
1847 | NumberController.prototype.min = function min(v) {
1848 | this.__min = v;
1849 | return this;
1850 | };
1851 |
1852 | /**
1853 | * Specify a maximum value for object[property].
1854 | *
1855 | * @param {Number} maxValue The maximum value for
1856 | * object[property]
1857 | * @returns {dat.controllers.NumberController} this
1858 | */
1859 |
1860 |
1861 | NumberController.prototype.max = function max(v) {
1862 | this.__max = v;
1863 | return this;
1864 | };
1865 |
1866 | /**
1867 | * Specify a step value that dat.controllers.NumberController
1868 | * increments by.
1869 | *
1870 | * @param {Number} stepValue The step value for
1871 | * dat.controllers.NumberController
1872 | * @default if minimum and maximum specified increment is 1% of the
1873 | * difference otherwise stepValue is 1
1874 | * @returns {dat.controllers.NumberController} this
1875 | */
1876 |
1877 |
1878 | NumberController.prototype.step = function step(v) {
1879 | this.__step = v;
1880 | this.__impliedStep = v;
1881 | this.__precision = numDecimals(v);
1882 | return this;
1883 | };
1884 |
1885 | return NumberController;
1886 | }(_Controller3.default);
1887 |
1888 | exports.default = NumberController;
1889 |
1890 | /***/ },
1891 | /* 13 */
1892 | /***/ function(module, exports, __webpack_require__) {
1893 |
1894 | 'use strict';
1895 |
1896 | exports.__esModule = true;
1897 |
1898 | var _NumberController2 = __webpack_require__(12);
1899 |
1900 | var _NumberController3 = _interopRequireDefault(_NumberController2);
1901 |
1902 | var _dom = __webpack_require__(9);
1903 |
1904 | var _dom2 = _interopRequireDefault(_dom);
1905 |
1906 | var _common = __webpack_require__(5);
1907 |
1908 | var _common2 = _interopRequireDefault(_common);
1909 |
1910 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1911 |
1912 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1913 |
1914 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1915 |
1916 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
1917 | * dat-gui JavaScript Controller Library
1918 | * http://code.google.com/p/dat-gui
1919 | *
1920 | * Copyright 2011 Data Arts Team, Google Creative Lab
1921 | *
1922 | * Licensed under the Apache License, Version 2.0 (the "License");
1923 | * you may not use this file except in compliance with the License.
1924 | * You may obtain a copy of the License at
1925 | *
1926 | * http://www.apache.org/licenses/LICENSE-2.0
1927 | */
1928 |
1929 | function roundToDecimal(value, decimals) {
1930 | var tenTo = Math.pow(10, decimals);
1931 | return Math.round(value * tenTo) / tenTo;
1932 | }
1933 |
1934 | /**
1935 | * @class Represents a given property of an object that is a number and
1936 | * provides an input element with which to manipulate it.
1937 | *
1938 | * @extends dat.controllers.Controller
1939 | * @extends dat.controllers.NumberController
1940 | *
1941 | * @param {Object} object The object to be manipulated
1942 | * @param {string} property The name of the property to be manipulated
1943 | * @param {Object} [params] Optional parameters
1944 | * @param {Number} [params.min] Minimum allowed value
1945 | * @param {Number} [params.max] Maximum allowed value
1946 | * @param {Number} [params.step] Increment by which to change value
1947 | *
1948 | * @member dat.controllers
1949 | */
1950 |
1951 | var NumberControllerBox = function (_NumberController) {
1952 | _inherits(NumberControllerBox, _NumberController);
1953 |
1954 | function NumberControllerBox(object, property, params) {
1955 | _classCallCheck(this, NumberControllerBox);
1956 |
1957 | var _this2 = _possibleConstructorReturn(this, _NumberController.call(this, object, property, params));
1958 |
1959 | _this2.__truncationSuspended = false;
1960 |
1961 | var _this = _this2;
1962 |
1963 | /**
1964 | * {Number} Previous mouse y position
1965 | * @ignore
1966 | */
1967 | var prevY = void 0;
1968 |
1969 | function onChange() {
1970 | var attempted = parseFloat(_this.__input.value);
1971 | if (!_common2.default.isNaN(attempted)) {
1972 | _this.setValue(attempted);
1973 | }
1974 | }
1975 |
1976 | function onFinish() {
1977 | if (_this.__onFinishChange) {
1978 | _this.__onFinishChange.call(_this, _this.getValue());
1979 | }
1980 | }
1981 |
1982 | function onBlur() {
1983 | onFinish();
1984 | }
1985 |
1986 | function onMouseDrag(e) {
1987 | var diff = prevY - e.clientY;
1988 | _this.setValue(_this.getValue() + diff * _this.__impliedStep);
1989 |
1990 | prevY = e.clientY;
1991 | }
1992 |
1993 | function onMouseUp() {
1994 | _dom2.default.unbind(window, 'mousemove', onMouseDrag);
1995 | _dom2.default.unbind(window, 'mouseup', onMouseUp);
1996 | onFinish();
1997 | }
1998 |
1999 | function onMouseDown(e) {
2000 | _dom2.default.bind(window, 'mousemove', onMouseDrag);
2001 | _dom2.default.bind(window, 'mouseup', onMouseUp);
2002 | prevY = e.clientY;
2003 | }
2004 |
2005 | _this2.__input = document.createElement('input');
2006 | _this2.__input.setAttribute('type', 'text');
2007 |
2008 | // Makes it so manually specified values are not truncated.
2009 |
2010 | _dom2.default.bind(_this2.__input, 'change', onChange);
2011 | _dom2.default.bind(_this2.__input, 'blur', onBlur);
2012 | _dom2.default.bind(_this2.__input, 'mousedown', onMouseDown);
2013 | _dom2.default.bind(_this2.__input, 'keydown', function (e) {
2014 | // When pressing enter, you can be as precise as you want.
2015 | if (e.keyCode === 13) {
2016 | _this.__truncationSuspended = true;
2017 | this.blur();
2018 | _this.__truncationSuspended = false;
2019 | onFinish();
2020 | }
2021 | });
2022 |
2023 | _this2.updateDisplay();
2024 |
2025 | _this2.domElement.appendChild(_this2.__input);
2026 | return _this2;
2027 | }
2028 |
2029 | NumberControllerBox.prototype.updateDisplay = function updateDisplay() {
2030 | this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);
2031 | return _NumberController.prototype.updateDisplay.call(this);
2032 | };
2033 |
2034 | return NumberControllerBox;
2035 | }(_NumberController3.default);
2036 |
2037 | exports.default = NumberControllerBox;
2038 |
2039 | /***/ },
2040 | /* 14 */
2041 | /***/ function(module, exports, __webpack_require__) {
2042 |
2043 | 'use strict';
2044 |
2045 | exports.__esModule = true;
2046 |
2047 | var _NumberController2 = __webpack_require__(12);
2048 |
2049 | var _NumberController3 = _interopRequireDefault(_NumberController2);
2050 |
2051 | var _dom = __webpack_require__(9);
2052 |
2053 | var _dom2 = _interopRequireDefault(_dom);
2054 |
2055 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2056 |
2057 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2058 |
2059 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
2060 |
2061 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
2062 | * dat-gui JavaScript Controller Library
2063 | * http://code.google.com/p/dat-gui
2064 | *
2065 | * Copyright 2011 Data Arts Team, Google Creative Lab
2066 | *
2067 | * Licensed under the Apache License, Version 2.0 (the "License");
2068 | * you may not use this file except in compliance with the License.
2069 | * You may obtain a copy of the License at
2070 | *
2071 | * http://www.apache.org/licenses/LICENSE-2.0
2072 | */
2073 |
2074 | function map(v, i1, i2, o1, o2) {
2075 | return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
2076 | }
2077 |
2078 | /**
2079 | * @class Represents a given property of an object that is a number, contains
2080 | * a minimum and maximum, and provides a slider element with which to
2081 | * manipulate it. It should be noted that the slider element is made up of
2082 | * <div> tags, not the html5
2083 | * <slider> element.
2084 | *
2085 | * @extends dat.controllers.Controller
2086 | * @extends dat.controllers.NumberController
2087 | *
2088 | * @param {Object} object The object to be manipulated
2089 | * @param {string} property The name of the property to be manipulated
2090 | * @param {Number} minValue Minimum allowed value
2091 | * @param {Number} maxValue Maximum allowed value
2092 | * @param {Number} stepValue Increment by which to change value
2093 | *
2094 | * @member dat.controllers
2095 | */
2096 |
2097 | var NumberControllerSlider = function (_NumberController) {
2098 | _inherits(NumberControllerSlider, _NumberController);
2099 |
2100 | function NumberControllerSlider(object, property, min, max, step) {
2101 | _classCallCheck(this, NumberControllerSlider);
2102 |
2103 | var _this2 = _possibleConstructorReturn(this, _NumberController.call(this, object, property, { min: min, max: max, step: step }));
2104 |
2105 | var _this = _this2;
2106 |
2107 | _this2.__background = document.createElement('div');
2108 | _this2.__foreground = document.createElement('div');
2109 |
2110 | _dom2.default.bind(_this2.__background, 'mousedown', onMouseDown);
2111 |
2112 | _dom2.default.addClass(_this2.__background, 'slider');
2113 | _dom2.default.addClass(_this2.__foreground, 'slider-fg');
2114 |
2115 | function onMouseDown(e) {
2116 | document.activeElement.blur();
2117 |
2118 | _dom2.default.bind(window, 'mousemove', onMouseDrag);
2119 | _dom2.default.bind(window, 'mouseup', onMouseUp);
2120 |
2121 | onMouseDrag(e);
2122 | }
2123 |
2124 | function onMouseDrag(e) {
2125 | e.preventDefault();
2126 |
2127 | var bgRect = _this.__background.getBoundingClientRect();
2128 |
2129 | _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));
2130 |
2131 | return false;
2132 | }
2133 |
2134 | function onMouseUp() {
2135 | _dom2.default.unbind(window, 'mousemove', onMouseDrag);
2136 | _dom2.default.unbind(window, 'mouseup', onMouseUp);
2137 | if (_this.__onFinishChange) {
2138 | _this.__onFinishChange.call(_this, _this.getValue());
2139 | }
2140 | }
2141 |
2142 | _this2.updateDisplay();
2143 |
2144 | _this2.__background.appendChild(_this2.__foreground);
2145 | _this2.domElement.appendChild(_this2.__background);
2146 | return _this2;
2147 | }
2148 |
2149 | NumberControllerSlider.prototype.updateDisplay = function updateDisplay() {
2150 | var pct = (this.getValue() - this.__min) / (this.__max - this.__min);
2151 | this.__foreground.style.width = pct * 100 + '%';
2152 | return _NumberController.prototype.updateDisplay.call(this);
2153 | };
2154 |
2155 | return NumberControllerSlider;
2156 | }(_NumberController3.default);
2157 |
2158 | exports.default = NumberControllerSlider;
2159 |
2160 | /***/ },
2161 | /* 15 */
2162 | /***/ function(module, exports, __webpack_require__) {
2163 |
2164 | 'use strict';
2165 |
2166 | exports.__esModule = true;
2167 |
2168 | var _Controller2 = __webpack_require__(7);
2169 |
2170 | var _Controller3 = _interopRequireDefault(_Controller2);
2171 |
2172 | var _dom = __webpack_require__(9);
2173 |
2174 | var _dom2 = _interopRequireDefault(_dom);
2175 |
2176 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2177 |
2178 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2179 |
2180 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
2181 |
2182 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
2183 | * dat-gui JavaScript Controller Library
2184 | * http://code.google.com/p/dat-gui
2185 | *
2186 | * Copyright 2011 Data Arts Team, Google Creative Lab
2187 | *
2188 | * Licensed under the Apache License, Version 2.0 (the "License");
2189 | * you may not use this file except in compliance with the License.
2190 | * You may obtain a copy of the License at
2191 | *
2192 | * http://www.apache.org/licenses/LICENSE-2.0
2193 | */
2194 |
2195 | /**
2196 | * @class Provides a GUI interface to fire a specified method, a property of an object.
2197 | *
2198 | * @extends dat.controllers.Controller
2199 | *
2200 | * @param {Object} object The object to be manipulated
2201 | * @param {string} property The name of the property to be manipulated
2202 | *
2203 | * @member dat.controllers
2204 | */
2205 | var FunctionController = function (_Controller) {
2206 | _inherits(FunctionController, _Controller);
2207 |
2208 | function FunctionController(object, property, text) {
2209 | _classCallCheck(this, FunctionController);
2210 |
2211 | var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property));
2212 |
2213 | var _this = _this2;
2214 |
2215 | _this2.__button = document.createElement('div');
2216 | _this2.__button.innerHTML = text === undefined ? 'Fire' : text;
2217 |
2218 | _dom2.default.bind(_this2.__button, 'click', function (e) {
2219 | e.preventDefault();
2220 | _this.fire();
2221 | return false;
2222 | });
2223 |
2224 | _dom2.default.addClass(_this2.__button, 'button');
2225 |
2226 | _this2.domElement.appendChild(_this2.__button);
2227 | return _this2;
2228 | }
2229 |
2230 | FunctionController.prototype.fire = function fire() {
2231 | if (this.__onChange) {
2232 | this.__onChange.call(this);
2233 | }
2234 | this.getValue().call(this.object);
2235 | if (this.__onFinishChange) {
2236 | this.__onFinishChange.call(this, this.getValue());
2237 | }
2238 | };
2239 |
2240 | return FunctionController;
2241 | }(_Controller3.default);
2242 |
2243 | exports.default = FunctionController;
2244 |
2245 | /***/ },
2246 | /* 16 */
2247 | /***/ function(module, exports, __webpack_require__) {
2248 |
2249 | 'use strict';
2250 |
2251 | exports.__esModule = true;
2252 |
2253 | var _Controller2 = __webpack_require__(7);
2254 |
2255 | var _Controller3 = _interopRequireDefault(_Controller2);
2256 |
2257 | var _dom = __webpack_require__(9);
2258 |
2259 | var _dom2 = _interopRequireDefault(_dom);
2260 |
2261 | var _Color = __webpack_require__(2);
2262 |
2263 | var _Color2 = _interopRequireDefault(_Color);
2264 |
2265 | var _interpret = __webpack_require__(3);
2266 |
2267 | var _interpret2 = _interopRequireDefault(_interpret);
2268 |
2269 | var _common = __webpack_require__(5);
2270 |
2271 | var _common2 = _interopRequireDefault(_common);
2272 |
2273 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2274 |
2275 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
2276 |
2277 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
2278 |
2279 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
2280 | * dat-gui JavaScript Controller Library
2281 | * http://code.google.com/p/dat-gui
2282 | *
2283 | * Copyright 2011 Data Arts Team, Google Creative Lab
2284 | *
2285 | * Licensed under the Apache License, Version 2.0 (the "License");
2286 | * you may not use this file except in compliance with the License.
2287 | * You may obtain a copy of the License at
2288 | *
2289 | * http://www.apache.org/licenses/LICENSE-2.0
2290 | */
2291 |
2292 | var ColorController = function (_Controller) {
2293 | _inherits(ColorController, _Controller);
2294 |
2295 | function ColorController(object, property) {
2296 | _classCallCheck(this, ColorController);
2297 |
2298 | var _this2 = _possibleConstructorReturn(this, _Controller.call(this, object, property));
2299 |
2300 | _this2.__color = new _Color2.default(_this2.getValue());
2301 | _this2.__temp = new _Color2.default(0);
2302 |
2303 | var _this = _this2;
2304 |
2305 | _this2.domElement = document.createElement('div');
2306 |
2307 | _dom2.default.makeSelectable(_this2.domElement, false);
2308 |
2309 | _this2.__selector = document.createElement('div');
2310 | _this2.__selector.className = 'selector';
2311 |
2312 | _this2.__saturation_field = document.createElement('div');
2313 | _this2.__saturation_field.className = 'saturation-field';
2314 |
2315 | _this2.__field_knob = document.createElement('div');
2316 | _this2.__field_knob.className = 'field-knob';
2317 | _this2.__field_knob_border = '2px solid ';
2318 |
2319 | _this2.__hue_knob = document.createElement('div');
2320 | _this2.__hue_knob.className = 'hue-knob';
2321 |
2322 | _this2.__hue_field = document.createElement('div');
2323 | _this2.__hue_field.className = 'hue-field';
2324 |
2325 | _this2.__input = document.createElement('input');
2326 | _this2.__input.type = 'text';
2327 | _this2.__input_textShadow = '0 1px 1px ';
2328 |
2329 | _dom2.default.bind(_this2.__input, 'keydown', function (e) {
2330 | if (e.keyCode === 13) {
2331 | // on enter
2332 | onBlur.call(this);
2333 | }
2334 | });
2335 |
2336 | _dom2.default.bind(_this2.__input, 'blur', onBlur);
2337 |
2338 | _dom2.default.bind(_this2.__selector, 'mousedown', function () /* e */{
2339 | _dom2.default.addClass(this, 'drag').bind(window, 'mouseup', function () /* e */{
2340 | _dom2.default.removeClass(_this.__selector, 'drag');
2341 | });
2342 | });
2343 |
2344 | var valueField = document.createElement('div');
2345 |
2346 | _common2.default.extend(_this2.__selector.style, {
2347 | width: '122px',
2348 | height: '102px',
2349 | padding: '3px',
2350 | backgroundColor: '#222',
2351 | boxShadow: '0px 1px 3px rgba(0,0,0,0.3)'
2352 | });
2353 |
2354 | _common2.default.extend(_this2.__field_knob.style, {
2355 | position: 'absolute',
2356 | width: '12px',
2357 | height: '12px',
2358 | border: _this2.__field_knob_border + (_this2.__color.v < 0.5 ? '#fff' : '#000'),
2359 | boxShadow: '0px 1px 3px rgba(0,0,0,0.5)',
2360 | borderRadius: '12px',
2361 | zIndex: 1
2362 | });
2363 |
2364 | _common2.default.extend(_this2.__hue_knob.style, {
2365 | position: 'absolute',
2366 | width: '15px',
2367 | height: '2px',
2368 | borderRight: '4px solid #fff',
2369 | zIndex: 1
2370 | });
2371 |
2372 | _common2.default.extend(_this2.__saturation_field.style, {
2373 | width: '100px',
2374 | height: '100px',
2375 | border: '1px solid #555',
2376 | marginRight: '3px',
2377 | display: 'inline-block',
2378 | cursor: 'pointer'
2379 | });
2380 |
2381 | _common2.default.extend(valueField.style, {
2382 | width: '100%',
2383 | height: '100%',
2384 | background: 'none'
2385 | });
2386 |
2387 | linearGradient(valueField, 'top', 'rgba(0,0,0,0)', '#000');
2388 |
2389 | _common2.default.extend(_this2.__hue_field.style, {
2390 | width: '15px',
2391 | height: '100px',
2392 | border: '1px solid #555',
2393 | cursor: 'ns-resize',
2394 | position: 'absolute',
2395 | top: '3px',
2396 | right: '3px'
2397 | });
2398 |
2399 | hueGradient(_this2.__hue_field);
2400 |
2401 | _common2.default.extend(_this2.__input.style, {
2402 | outline: 'none',
2403 | // width: '120px',
2404 | textAlign: 'center',
2405 | // padding: '4px',
2406 | // marginBottom: '6px',
2407 | color: '#fff',
2408 | border: 0,
2409 | fontWeight: 'bold',
2410 | textShadow: _this2.__input_textShadow + 'rgba(0,0,0,0.7)'
2411 | });
2412 |
2413 | _dom2.default.bind(_this2.__saturation_field, 'mousedown', fieldDown);
2414 | _dom2.default.bind(_this2.__field_knob, 'mousedown', fieldDown);
2415 |
2416 | _dom2.default.bind(_this2.__hue_field, 'mousedown', function (e) {
2417 | setH(e);
2418 | _dom2.default.bind(window, 'mousemove', setH);
2419 | _dom2.default.bind(window, 'mouseup', fieldUpH);
2420 | });
2421 |
2422 | function fieldDown(e) {
2423 | setSV(e);
2424 | // document.body.style.cursor = 'none';
2425 | _dom2.default.bind(window, 'mousemove', setSV);
2426 | _dom2.default.bind(window, 'mouseup', fieldUpSV);
2427 | }
2428 |
2429 | function fieldUpSV() {
2430 | _dom2.default.unbind(window, 'mousemove', setSV);
2431 | _dom2.default.unbind(window, 'mouseup', fieldUpSV);
2432 | // document.body.style.cursor = 'default';
2433 | onFinish();
2434 | }
2435 |
2436 | function onBlur() {
2437 | var i = (0, _interpret2.default)(this.value);
2438 | if (i !== false) {
2439 | _this.__color.__state = i;
2440 | _this.setValue(_this.__color.toOriginal());
2441 | } else {
2442 | this.value = _this.__color.toString();
2443 | }
2444 | }
2445 |
2446 | function fieldUpH() {
2447 | _dom2.default.unbind(window, 'mousemove', setH);
2448 | _dom2.default.unbind(window, 'mouseup', fieldUpH);
2449 | onFinish();
2450 | }
2451 |
2452 | function onFinish() {
2453 | if (_this.__onFinishChange) {
2454 | _this.__onFinishChange.call(_this, _this.__color.toOriginal());
2455 | }
2456 | }
2457 |
2458 | _this2.__saturation_field.appendChild(valueField);
2459 | _this2.__selector.appendChild(_this2.__field_knob);
2460 | _this2.__selector.appendChild(_this2.__saturation_field);
2461 | _this2.__selector.appendChild(_this2.__hue_field);
2462 | _this2.__hue_field.appendChild(_this2.__hue_knob);
2463 |
2464 | _this2.domElement.appendChild(_this2.__input);
2465 | _this2.domElement.appendChild(_this2.__selector);
2466 |
2467 | _this2.updateDisplay();
2468 |
2469 | function setSV(e) {
2470 | e.preventDefault();
2471 |
2472 | var fieldRect = _this.__saturation_field.getBoundingClientRect();
2473 | var s = (e.clientX - fieldRect.left) / (fieldRect.right - fieldRect.left);
2474 | var v = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
2475 |
2476 | if (v > 1) {
2477 | v = 1;
2478 | } else if (v < 0) {
2479 | v = 0;
2480 | }
2481 |
2482 | if (s > 1) {
2483 | s = 1;
2484 | } else if (s < 0) {
2485 | s = 0;
2486 | }
2487 |
2488 | _this.__color.v = v;
2489 | _this.__color.s = s;
2490 |
2491 | _this.setValue(_this.__color.toOriginal());
2492 |
2493 | return false;
2494 | }
2495 |
2496 | function setH(e) {
2497 | e.preventDefault();
2498 |
2499 | var fieldRect = _this.__hue_field.getBoundingClientRect();
2500 | var h = 1 - (e.clientY - fieldRect.top) / (fieldRect.bottom - fieldRect.top);
2501 |
2502 | if (h > 1) {
2503 | h = 1;
2504 | } else if (h < 0) {
2505 | h = 0;
2506 | }
2507 |
2508 | _this.__color.h = h * 360;
2509 |
2510 | _this.setValue(_this.__color.toOriginal());
2511 |
2512 | return false;
2513 | }
2514 | return _this2;
2515 | }
2516 |
2517 | ColorController.prototype.updateDisplay = function updateDisplay() {
2518 | var i = (0, _interpret2.default)(this.getValue());
2519 |
2520 | if (i !== false) {
2521 | var mismatch = false;
2522 |
2523 | // Check for mismatch on the interpreted value.
2524 |
2525 | _common2.default.each(_Color2.default.COMPONENTS, function (component) {
2526 | if (!_common2.default.isUndefined(i[component]) && !_common2.default.isUndefined(this.__color.__state[component]) && i[component] !== this.__color.__state[component]) {
2527 | mismatch = true;
2528 | return {}; // break
2529 | }
2530 | }, this);
2531 |
2532 | // If nothing diverges, we keep our previous values
2533 | // for statefulness, otherwise we recalculate fresh
2534 | if (mismatch) {
2535 | _common2.default.extend(this.__color.__state, i);
2536 | }
2537 | }
2538 |
2539 | _common2.default.extend(this.__temp.__state, this.__color.__state);
2540 |
2541 | this.__temp.a = 1;
2542 |
2543 | var flip = this.__color.v < 0.5 || this.__color.s > 0.5 ? 255 : 0;
2544 | var _flip = 255 - flip;
2545 |
2546 | _common2.default.extend(this.__field_knob.style, {
2547 | marginLeft: 100 * this.__color.s - 7 + 'px',
2548 | marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
2549 | backgroundColor: this.__temp.toHexString(),
2550 | border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
2551 | });
2552 |
2553 | this.__hue_knob.style.marginTop = (1 - this.__color.h / 360) * 100 + 'px';
2554 |
2555 | this.__temp.s = 1;
2556 | this.__temp.v = 1;
2557 |
2558 | linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
2559 |
2560 | this.__input.value = this.__color.toString();
2561 |
2562 | _common2.default.extend(this.__input.style, {
2563 | backgroundColor: this.__color.toHexString(),
2564 | color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
2565 | textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
2566 | });
2567 | };
2568 |
2569 | return ColorController;
2570 | }(_Controller3.default);
2571 |
2572 | var vendors = ['-moz-', '-o-', '-webkit-', '-ms-', ''];
2573 |
2574 | function linearGradient(elem, x, a, b) {
2575 | elem.style.background = '';
2576 | _common2.default.each(vendors, function (vendor) {
2577 | elem.style.cssText += 'background: ' + vendor + 'linear-gradient(' + x + ', ' + a + ' 0%, ' + b + ' 100%); ';
2578 | });
2579 | }
2580 |
2581 | function hueGradient(elem) {
2582 | elem.style.background = '';
2583 | elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
2584 | elem.style.cssText += 'background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
2585 | elem.style.cssText += 'background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
2586 | elem.style.cssText += 'background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
2587 | elem.style.cssText += 'background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
2588 | }
2589 |
2590 | exports.default = ColorController;
2591 |
2592 | /***/ },
2593 | /* 17 */
2594 | /***/ function(module, exports, __webpack_require__) {
2595 |
2596 | 'use strict';
2597 |
2598 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; /**
2599 | * dat-gui JavaScript Controller Library
2600 | * http://code.google.com/p/dat-gui
2601 | *
2602 | * Copyright 2011 Data Arts Team, Google Creative Lab
2603 | *
2604 | * Licensed under the Apache License, Version 2.0 (the "License");
2605 | * you may not use this file except in compliance with the License.
2606 | * You may obtain a copy of the License at
2607 | *
2608 | * http://www.apache.org/licenses/LICENSE-2.0
2609 | */
2610 |
2611 | var _css = __webpack_require__(18);
2612 |
2613 | var _css2 = _interopRequireDefault(_css);
2614 |
2615 | var _saveDialogue = __webpack_require__(19);
2616 |
2617 | var _saveDialogue2 = _interopRequireDefault(_saveDialogue);
2618 |
2619 | var _ControllerFactory = __webpack_require__(20);
2620 |
2621 | var _ControllerFactory2 = _interopRequireDefault(_ControllerFactory);
2622 |
2623 | var _Controller = __webpack_require__(7);
2624 |
2625 | var _Controller2 = _interopRequireDefault(_Controller);
2626 |
2627 | var _BooleanController = __webpack_require__(8);
2628 |
2629 | var _BooleanController2 = _interopRequireDefault(_BooleanController);
2630 |
2631 | var _FunctionController = __webpack_require__(15);
2632 |
2633 | var _FunctionController2 = _interopRequireDefault(_FunctionController);
2634 |
2635 | var _NumberControllerBox = __webpack_require__(13);
2636 |
2637 | var _NumberControllerBox2 = _interopRequireDefault(_NumberControllerBox);
2638 |
2639 | var _NumberControllerSlider = __webpack_require__(14);
2640 |
2641 | var _NumberControllerSlider2 = _interopRequireDefault(_NumberControllerSlider);
2642 |
2643 | var _ColorController = __webpack_require__(16);
2644 |
2645 | var _ColorController2 = _interopRequireDefault(_ColorController);
2646 |
2647 | var _requestAnimationFrame = __webpack_require__(21);
2648 |
2649 | var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame);
2650 |
2651 | var _CenteredDiv = __webpack_require__(22);
2652 |
2653 | var _CenteredDiv2 = _interopRequireDefault(_CenteredDiv);
2654 |
2655 | var _dom = __webpack_require__(9);
2656 |
2657 | var _dom2 = _interopRequireDefault(_dom);
2658 |
2659 | var _common = __webpack_require__(5);
2660 |
2661 | var _common2 = _interopRequireDefault(_common);
2662 |
2663 | var _style = __webpack_require__(23);
2664 |
2665 | var _style2 = _interopRequireDefault(_style);
2666 |
2667 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2668 |
2669 | // CSS to embed in build
2670 |
2671 | _css2.default.inject(_style2.default);
2672 |
2673 | /** Outer-most className for GUI's */
2674 | var CSS_NAMESPACE = 'dg';
2675 |
2676 | var HIDE_KEY_CODE = 72;
2677 |
2678 | /** The only value shared between the JS and SCSS. Use caution. */
2679 | var CLOSE_BUTTON_HEIGHT = 20;
2680 |
2681 | var DEFAULT_DEFAULT_PRESET_NAME = 'Default';
2682 |
2683 | var SUPPORTS_LOCAL_STORAGE = function () {
2684 | try {
2685 | return 'localStorage' in window && window.localStorage !== null;
2686 | } catch (e) {
2687 | return false;
2688 | }
2689 | }();
2690 |
2691 | var SAVE_DIALOGUE = void 0;
2692 |
2693 | /** Have we yet to create an autoPlace GUI? */
2694 | var autoPlaceVirgin = true;
2695 |
2696 | /** Fixed position div that auto place GUI's go inside */
2697 | var autoPlaceContainer = void 0;
2698 |
2699 | /** Are we hiding the GUI's ? */
2700 | var hide = false;
2701 |
2702 | /** GUI's which should be hidden */
2703 | var hideableGuis = [];
2704 |
2705 | /**
2706 | * A lightweight controller library for JavaScript. It allows you to easily
2707 | * manipulate variables and fire functions on the fly.
2708 | * @class
2709 | *
2710 | * @member dat.gui
2711 | *
2712 | * @param {Object} [params]
2713 | * @param {String} [params.name] The name of this GUI.
2714 | * @param {Object} [params.load] JSON object representing the saved state of
2715 | * this GUI.
2716 | * @param {Boolean} [params.auto=true]
2717 | * @param {dat.gui.GUI} [params.parent] The GUI I'm nested in.
2718 | * @param {Boolean} [params.closed] If true, starts closed
2719 | */
2720 | var GUI = function GUI(pars) {
2721 | var _this = this;
2722 |
2723 | var params = pars || {};
2724 |
2725 | /**
2726 | * Outermost DOM Element
2727 | * @type DOMElement
2728 | */
2729 | this.domElement = document.createElement('div');
2730 | this.__ul = document.createElement('ul');
2731 | this.domElement.appendChild(this.__ul);
2732 |
2733 | _dom2.default.addClass(this.domElement, CSS_NAMESPACE);
2734 |
2735 | /**
2736 | * Nested GUI's by name
2737 | * @ignore
2738 | */
2739 | this.__folders = {};
2740 |
2741 | this.__controllers = [];
2742 |
2743 | /**
2744 | * List of objects I'm remembering for save, only used in top level GUI
2745 | * @ignore
2746 | */
2747 | this.__rememberedObjects = [];
2748 |
2749 | /**
2750 | * Maps the index of remembered objects to a map of controllers, only used
2751 | * in top level GUI.
2752 | *
2753 | * @private
2754 | * @ignore
2755 | *
2756 | * @example
2757 | * [
2758 | * {
2759 | * propertyName: Controller,
2760 | * anotherPropertyName: Controller
2761 | * },
2762 | * {
2763 | * propertyName: Controller
2764 | * }
2765 | * ]
2766 | */
2767 | this.__rememberedObjectIndecesToControllers = [];
2768 |
2769 | this.__listening = [];
2770 |
2771 | // Default parameters
2772 | params = _common2.default.defaults(params, {
2773 | autoPlace: true,
2774 | width: GUI.DEFAULT_WIDTH
2775 | });
2776 |
2777 | params = _common2.default.defaults(params, {
2778 | resizable: params.autoPlace,
2779 | hideable: params.autoPlace
2780 | });
2781 |
2782 | if (!_common2.default.isUndefined(params.load)) {
2783 | // Explicit preset
2784 | if (params.preset) {
2785 | params.load.preset = params.preset;
2786 | }
2787 | } else {
2788 | params.load = { preset: DEFAULT_DEFAULT_PRESET_NAME };
2789 | }
2790 |
2791 | if (_common2.default.isUndefined(params.parent) && params.hideable) {
2792 | hideableGuis.push(this);
2793 | }
2794 |
2795 | // Only root level GUI's are resizable.
2796 | params.resizable = _common2.default.isUndefined(params.parent) && params.resizable;
2797 |
2798 | if (params.autoPlace && _common2.default.isUndefined(params.scrollable)) {
2799 | params.scrollable = true;
2800 | }
2801 | // params.scrollable = common.isUndefined(params.parent) && params.scrollable === true;
2802 |
2803 | // Not part of params because I don't want people passing this in via
2804 | // constructor. Should be a 'remembered' value.
2805 | var useLocalStorage = SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(this, 'isLocal')) === 'true';
2806 |
2807 | var saveToLocalStorage = void 0;
2808 |
2809 | Object.defineProperties(this,
2810 | /** @lends dat.gui.GUI.prototype */
2811 | {
2812 | /**
2813 | * The parent GUI
2814 | * @type dat.gui.GUI
2815 | */
2816 | parent: {
2817 | get: function get() {
2818 | return params.parent;
2819 | }
2820 | },
2821 |
2822 | scrollable: {
2823 | get: function get() {
2824 | return params.scrollable;
2825 | }
2826 | },
2827 |
2828 | /**
2829 | * Handles GUI's element placement for you
2830 | * @type Boolean
2831 | */
2832 | autoPlace: {
2833 | get: function get() {
2834 | return params.autoPlace;
2835 | }
2836 | },
2837 |
2838 | /**
2839 | * The identifier for a set of saved values
2840 | * @type String
2841 | */
2842 | preset: {
2843 | get: function get() {
2844 | if (_this.parent) {
2845 | return _this.getRoot().preset;
2846 | }
2847 |
2848 | return params.load.preset;
2849 | },
2850 |
2851 | set: function set(v) {
2852 | if (_this.parent) {
2853 | _this.getRoot().preset = v;
2854 | } else {
2855 | params.load.preset = v;
2856 | }
2857 | setPresetSelectIndex(this);
2858 | _this.revert();
2859 | }
2860 | },
2861 |
2862 | /**
2863 | * The width of GUI element
2864 | * @type Number
2865 | */
2866 | width: {
2867 | get: function get() {
2868 | return params.width;
2869 | },
2870 | set: function set(v) {
2871 | params.width = v;
2872 | setWidth(_this, v);
2873 | }
2874 | },
2875 |
2876 | /**
2877 | * The name of GUI. Used for folders. i.e
2878 | * a folder's name
2879 | * @type String
2880 | */
2881 | name: {
2882 | get: function get() {
2883 | return params.name;
2884 | },
2885 | set: function set(v) {
2886 | // TODO Check for collisions among sibling folders
2887 | params.name = v;
2888 | if (titleRowName) {
2889 | titleRowName.innerHTML = params.name;
2890 | }
2891 | }
2892 | },
2893 |
2894 | /**
2895 | * Whether the GUI is collapsed or not
2896 | * @type Boolean
2897 | */
2898 | closed: {
2899 | get: function get() {
2900 | return params.closed;
2901 | },
2902 | set: function set(v) {
2903 | params.closed = v;
2904 | if (params.closed) {
2905 | _dom2.default.addClass(_this.__ul, GUI.CLASS_CLOSED);
2906 | } else {
2907 | _dom2.default.removeClass(_this.__ul, GUI.CLASS_CLOSED);
2908 | }
2909 | // For browsers that aren't going to respect the CSS transition,
2910 | // Lets just check our height against the window height right off
2911 | // the bat.
2912 | this.onResize();
2913 |
2914 | if (_this.__closeButton) {
2915 | _this.__closeButton.innerHTML = v ? GUI.TEXT_OPEN : GUI.TEXT_CLOSED;
2916 | }
2917 | }
2918 | },
2919 |
2920 | /**
2921 | * Contains all presets
2922 | * @type Object
2923 | */
2924 | load: {
2925 | get: function get() {
2926 | return params.load;
2927 | }
2928 | },
2929 |
2930 | /**
2931 | * Determines whether or not to use localStorage as the means for
2932 | * remembering
2933 | * @type Boolean
2934 | */
2935 | useLocalStorage: {
2936 |
2937 | get: function get() {
2938 | return useLocalStorage;
2939 | },
2940 | set: function set(bool) {
2941 | if (SUPPORTS_LOCAL_STORAGE) {
2942 | useLocalStorage = bool;
2943 | if (bool) {
2944 | _dom2.default.bind(window, 'unload', saveToLocalStorage);
2945 | } else {
2946 | _dom2.default.unbind(window, 'unload', saveToLocalStorage);
2947 | }
2948 | localStorage.setItem(getLocalStorageHash(_this, 'isLocal'), bool);
2949 | }
2950 | }
2951 | }
2952 | });
2953 |
2954 | // Are we a root level GUI?
2955 | if (_common2.default.isUndefined(params.parent)) {
2956 | params.closed = false;
2957 |
2958 | _dom2.default.addClass(this.domElement, GUI.CLASS_MAIN);
2959 | _dom2.default.makeSelectable(this.domElement, false);
2960 |
2961 | // Are we supposed to be loading locally?
2962 | if (SUPPORTS_LOCAL_STORAGE) {
2963 | if (useLocalStorage) {
2964 | _this.useLocalStorage = true;
2965 |
2966 | var savedGui = localStorage.getItem(getLocalStorageHash(this, 'gui'));
2967 |
2968 | if (savedGui) {
2969 | params.load = JSON.parse(savedGui);
2970 | }
2971 | }
2972 | }
2973 |
2974 | this.__closeButton = document.createElement('div');
2975 | this.__closeButton.innerHTML = GUI.TEXT_CLOSED;
2976 | _dom2.default.addClass(this.__closeButton, GUI.CLASS_CLOSE_BUTTON);
2977 | this.domElement.appendChild(this.__closeButton);
2978 |
2979 | _dom2.default.bind(this.__closeButton, 'click', function () {
2980 | _this.closed = !_this.closed;
2981 | });
2982 | // Oh, you're a nested GUI!
2983 | } else {
2984 | if (params.closed === undefined) {
2985 | params.closed = true;
2986 | }
2987 |
2988 | var _titleRowName = document.createTextNode(params.name);
2989 | _dom2.default.addClass(_titleRowName, 'controller-name');
2990 |
2991 | var titleRow = addRow(_this, _titleRowName);
2992 |
2993 | var onClickTitle = function onClickTitle(e) {
2994 | e.preventDefault();
2995 | _this.closed = !_this.closed;
2996 | return false;
2997 | };
2998 |
2999 | _dom2.default.addClass(this.__ul, GUI.CLASS_CLOSED);
3000 |
3001 | _dom2.default.addClass(titleRow, 'title');
3002 | _dom2.default.bind(titleRow, 'click', onClickTitle);
3003 |
3004 | if (!params.closed) {
3005 | this.closed = false;
3006 | }
3007 | }
3008 |
3009 | if (params.autoPlace) {
3010 | if (_common2.default.isUndefined(params.parent)) {
3011 | if (autoPlaceVirgin) {
3012 | autoPlaceContainer = document.createElement('div');
3013 | _dom2.default.addClass(autoPlaceContainer, CSS_NAMESPACE);
3014 | _dom2.default.addClass(autoPlaceContainer, GUI.CLASS_AUTO_PLACE_CONTAINER);
3015 | document.body.appendChild(autoPlaceContainer);
3016 | autoPlaceVirgin = false;
3017 | }
3018 |
3019 | // Put it in the dom for you.
3020 | autoPlaceContainer.appendChild(this.domElement);
3021 |
3022 | // Apply the auto styles
3023 | _dom2.default.addClass(this.domElement, GUI.CLASS_AUTO_PLACE);
3024 | }
3025 |
3026 | // Make it not elastic.
3027 | if (!this.parent) {
3028 | setWidth(_this, params.width);
3029 | }
3030 | }
3031 |
3032 | this.__resizeHandler = function () {
3033 | _this.onResizeDebounced();
3034 | };
3035 |
3036 | _dom2.default.bind(window, 'resize', this.__resizeHandler);
3037 | _dom2.default.bind(this.__ul, 'webkitTransitionEnd', this.__resizeHandler);
3038 | _dom2.default.bind(this.__ul, 'transitionend', this.__resizeHandler);
3039 | _dom2.default.bind(this.__ul, 'oTransitionEnd', this.__resizeHandler);
3040 | this.onResize();
3041 |
3042 | if (params.resizable) {
3043 | addResizeHandle(this);
3044 | }
3045 |
3046 | saveToLocalStorage = function saveToLocalStorage() {
3047 | if (SUPPORTS_LOCAL_STORAGE && localStorage.getItem(getLocalStorageHash(_this, 'isLocal')) === 'true') {
3048 | localStorage.setItem(getLocalStorageHash(_this, 'gui'), JSON.stringify(_this.getSaveObject()));
3049 | }
3050 | };
3051 |
3052 | // expose this method publicly
3053 | this.saveToLocalStorageIfPossible = saveToLocalStorage;
3054 |
3055 | function resetWidth() {
3056 | var root = _this.getRoot();
3057 | root.width += 1;
3058 | _common2.default.defer(function () {
3059 | root.width -= 1;
3060 | });
3061 | }
3062 |
3063 | if (!params.parent) {
3064 | resetWidth();
3065 | }
3066 | };
3067 |
3068 | GUI.toggleHide = function () {
3069 | hide = !hide;
3070 | _common2.default.each(hideableGuis, function (gui) {
3071 | gui.domElement.style.display = hide ? 'none' : '';
3072 | });
3073 | };
3074 |
3075 | GUI.CLASS_AUTO_PLACE = 'a';
3076 | GUI.CLASS_AUTO_PLACE_CONTAINER = 'ac';
3077 | GUI.CLASS_MAIN = 'main';
3078 | GUI.CLASS_CONTROLLER_ROW = 'cr';
3079 | GUI.CLASS_TOO_TALL = 'taller-than-window';
3080 | GUI.CLASS_CLOSED = 'closed';
3081 | GUI.CLASS_CLOSE_BUTTON = 'close-button';
3082 | GUI.CLASS_DRAG = 'drag';
3083 |
3084 | GUI.DEFAULT_WIDTH = 245;
3085 | GUI.TEXT_CLOSED = 'Close Controls';
3086 | GUI.TEXT_OPEN = 'Open Controls';
3087 |
3088 | GUI._keydownHandler = function (e) {
3089 | if (document.activeElement.type !== 'text' && (e.which === HIDE_KEY_CODE || e.keyCode === HIDE_KEY_CODE)) {
3090 | GUI.toggleHide();
3091 | }
3092 | };
3093 | _dom2.default.bind(window, 'keydown', GUI._keydownHandler, false);
3094 |
3095 | _common2.default.extend(GUI.prototype,
3096 |
3097 | /** @lends dat.gui.GUI */
3098 | {
3099 |
3100 | /**
3101 | * @param object
3102 | * @param property
3103 | * @returns {dat.controllers.Controller} The new controller that was added.
3104 | * @instance
3105 | */
3106 | add: function add(object, property) {
3107 | return _add(this, object, property, {
3108 | factoryArgs: Array.prototype.slice.call(arguments, 2)
3109 | });
3110 | },
3111 |
3112 | /**
3113 | * @param object
3114 | * @param property
3115 | * @returns {dat.controllers.ColorController} The new controller that was added.
3116 | * @instance
3117 | */
3118 | addColor: function addColor(object, property) {
3119 | return _add(this, object, property, {
3120 | color: true
3121 | });
3122 | },
3123 |
3124 | /**
3125 | * @param controller
3126 | * @instance
3127 | */
3128 | remove: function remove(controller) {
3129 | // TODO listening?
3130 | this.__ul.removeChild(controller.__li);
3131 | this.__controllers.splice(this.__controllers.indexOf(controller), 1);
3132 | var _this = this;
3133 | _common2.default.defer(function () {
3134 | _this.onResize();
3135 | });
3136 | },
3137 |
3138 | destroy: function destroy() {
3139 | if (this.autoPlace) {
3140 | autoPlaceContainer.removeChild(this.domElement);
3141 | }
3142 |
3143 | _dom2.default.unbind(window, 'keydown', GUI._keydownHandler, false);
3144 | _dom2.default.unbind(window, 'resize', this.__resizeHandler);
3145 |
3146 | if (this.saveToLocalStorageIfPossible) {
3147 | _dom2.default.unbind(window, 'unload', this.saveToLocalStorageIfPossible);
3148 | }
3149 | },
3150 |
3151 | /**
3152 | * @param name
3153 | * @returns {dat.gui.GUI} The new folder.
3154 | * @throws {Error} if this GUI already has a folder by the specified
3155 | * name
3156 | * @instance
3157 | */
3158 | addFolder: function addFolder(name) {
3159 | // We have to prevent collisions on names in order to have a key
3160 | // by which to remember saved values
3161 | if (this.__folders[name] !== undefined) {
3162 | throw new Error('You already have a folder in this GUI by the' + ' name "' + name + '"');
3163 | }
3164 |
3165 | var newGuiParams = { name: name, parent: this };
3166 |
3167 | // We need to pass down the autoPlace trait so that we can
3168 | // attach event listeners to open/close folder actions to
3169 | // ensure that a scrollbar appears if the window is too short.
3170 | newGuiParams.autoPlace = this.autoPlace;
3171 |
3172 | // Do we have saved appearance data for this folder?
3173 | if (this.load && // Anything loaded?
3174 | this.load.folders && // Was my parent a dead-end?
3175 | this.load.folders[name]) {
3176 | // Did daddy remember me?
3177 | // Start me closed if I was closed
3178 | newGuiParams.closed = this.load.folders[name].closed;
3179 |
3180 | // Pass down the loaded data
3181 | newGuiParams.load = this.load.folders[name];
3182 | }
3183 |
3184 | var gui = new GUI(newGuiParams);
3185 | this.__folders[name] = gui;
3186 |
3187 | var li = addRow(this, gui.domElement);
3188 | _dom2.default.addClass(li, 'folder');
3189 | return gui;
3190 | },
3191 |
3192 | open: function open() {
3193 | this.closed = false;
3194 | },
3195 |
3196 | close: function close() {
3197 | this.closed = true;
3198 | },
3199 |
3200 | onResize: function onResize() {
3201 | // we debounce this function to prevent performance issues when rotating on tablet/mobile
3202 | var root = this.getRoot();
3203 | if (root.scrollable) {
3204 | var top = _dom2.default.getOffset(root.__ul).top;
3205 | var h = 0;
3206 |
3207 | _common2.default.each(root.__ul.childNodes, function (node) {
3208 | if (!(root.autoPlace && node === root.__save_row)) {
3209 | h += _dom2.default.getHeight(node);
3210 | }
3211 | });
3212 |
3213 | if (window.innerHeight - top - CLOSE_BUTTON_HEIGHT < h) {
3214 | _dom2.default.addClass(root.domElement, GUI.CLASS_TOO_TALL);
3215 | root.__ul.style.height = window.innerHeight - top - CLOSE_BUTTON_HEIGHT + 'px';
3216 | } else {
3217 | _dom2.default.removeClass(root.domElement, GUI.CLASS_TOO_TALL);
3218 | root.__ul.style.height = 'auto';
3219 | }
3220 | }
3221 |
3222 | if (root.__resize_handle) {
3223 | _common2.default.defer(function () {
3224 | root.__resize_handle.style.height = root.__ul.offsetHeight + 'px';
3225 | });
3226 | }
3227 |
3228 | if (root.__closeButton) {
3229 | root.__closeButton.style.width = root.width + 'px';
3230 | }
3231 | },
3232 |
3233 | onResizeDebounced: _common2.default.debounce(function () {
3234 | this.onResize();
3235 | }, 200),
3236 |
3237 | /**
3238 | * Mark objects for saving. The order of these objects cannot change as
3239 | * the GUI grows. When remembering new objects, append them to the end
3240 | * of the list.
3241 | *
3242 | * @param {Object...} objects
3243 | * @throws {Error} if not called on a top level GUI.
3244 | * @instance
3245 | */
3246 | remember: function remember() {
3247 | if (_common2.default.isUndefined(SAVE_DIALOGUE)) {
3248 | SAVE_DIALOGUE = new _CenteredDiv2.default();
3249 | SAVE_DIALOGUE.domElement.innerHTML = _saveDialogue2.default;
3250 | }
3251 |
3252 | if (this.parent) {
3253 | throw new Error('You can only call remember on a top level GUI.');
3254 | }
3255 |
3256 | var _this = this;
3257 |
3258 | _common2.default.each(Array.prototype.slice.call(arguments), function (object) {
3259 | if (_this.__rememberedObjects.length === 0) {
3260 | addSaveMenu(_this);
3261 | }
3262 | if (_this.__rememberedObjects.indexOf(object) === -1) {
3263 | _this.__rememberedObjects.push(object);
3264 | }
3265 | });
3266 |
3267 | if (this.autoPlace) {
3268 | // Set save row width
3269 | setWidth(this, this.width);
3270 | }
3271 | },
3272 |
3273 | /**
3274 | * @returns {dat.gui.GUI} the topmost parent GUI of a nested GUI.
3275 | * @instance
3276 | */
3277 | getRoot: function getRoot() {
3278 | var gui = this;
3279 | while (gui.parent) {
3280 | gui = gui.parent;
3281 | }
3282 | return gui;
3283 | },
3284 |
3285 | /**
3286 | * @returns {Object} a JSON object representing the current state of
3287 | * this GUI as well as its remembered properties.
3288 | * @instance
3289 | */
3290 | getSaveObject: function getSaveObject() {
3291 | var toReturn = this.load;
3292 | toReturn.closed = this.closed;
3293 |
3294 | // Am I remembering any values?
3295 | if (this.__rememberedObjects.length > 0) {
3296 | toReturn.preset = this.preset;
3297 |
3298 | if (!toReturn.remembered) {
3299 | toReturn.remembered = {};
3300 | }
3301 |
3302 | toReturn.remembered[this.preset] = getCurrentPreset(this);
3303 | }
3304 |
3305 | toReturn.folders = {};
3306 | _common2.default.each(this.__folders, function (element, key) {
3307 | toReturn.folders[key] = element.getSaveObject();
3308 | });
3309 |
3310 | return toReturn;
3311 | },
3312 |
3313 | save: function save() {
3314 | if (!this.load.remembered) {
3315 | this.load.remembered = {};
3316 | }
3317 |
3318 | this.load.remembered[this.preset] = getCurrentPreset(this);
3319 | markPresetModified(this, false);
3320 | this.saveToLocalStorageIfPossible();
3321 | },
3322 |
3323 | saveAs: function saveAs(presetName) {
3324 | if (!this.load.remembered) {
3325 | // Retain default values upon first save
3326 | this.load.remembered = {};
3327 | this.load.remembered[DEFAULT_DEFAULT_PRESET_NAME] = getCurrentPreset(this, true);
3328 | }
3329 |
3330 | this.load.remembered[presetName] = getCurrentPreset(this);
3331 | this.preset = presetName;
3332 | addPresetOption(this, presetName, true);
3333 | this.saveToLocalStorageIfPossible();
3334 | },
3335 |
3336 | revert: function revert(gui) {
3337 | _common2.default.each(this.__controllers, function (controller) {
3338 | // Make revert work on Default.
3339 | if (!this.getRoot().load.remembered) {
3340 | controller.setValue(controller.initialValue);
3341 | } else {
3342 | recallSavedValue(gui || this.getRoot(), controller);
3343 | }
3344 |
3345 | // fire onFinishChange callback
3346 | if (controller.__onFinishChange) {
3347 | controller.__onFinishChange.call(controller, controller.getValue());
3348 | }
3349 | }, this);
3350 |
3351 | _common2.default.each(this.__folders, function (folder) {
3352 | folder.revert(folder);
3353 | });
3354 |
3355 | if (!gui) {
3356 | markPresetModified(this.getRoot(), false);
3357 | }
3358 | },
3359 |
3360 | listen: function listen(controller) {
3361 | var init = this.__listening.length === 0;
3362 | this.__listening.push(controller);
3363 | if (init) {
3364 | updateDisplays(this.__listening);
3365 | }
3366 | },
3367 |
3368 | updateDisplay: function updateDisplay() {
3369 | _common2.default.each(this.__controllers, function (controller) {
3370 | controller.updateDisplay();
3371 | });
3372 | _common2.default.each(this.__folders, function (folder) {
3373 | folder.updateDisplay();
3374 | });
3375 | }
3376 | });
3377 |
3378 | /**
3379 | * Add a row to the end of the GUI or before another row.
3380 | *
3381 | * @param gui
3382 | * @param [newDom] If specified, inserts the dom content in the new row
3383 | * @param [liBefore] If specified, places the new row before another row
3384 | */
3385 | function addRow(gui, newDom, liBefore) {
3386 | var li = document.createElement('li');
3387 | if (newDom) {
3388 | li.appendChild(newDom);
3389 | }
3390 |
3391 | if (liBefore) {
3392 | gui.__ul.insertBefore(li, liBefore);
3393 | } else {
3394 | gui.__ul.appendChild(li);
3395 | }
3396 | gui.onResize();
3397 | return li;
3398 | }
3399 |
3400 | function markPresetModified(gui, modified) {
3401 | var opt = gui.__preset_select[gui.__preset_select.selectedIndex];
3402 |
3403 | // console.log('mark', modified, opt);
3404 | if (modified) {
3405 | opt.innerHTML = opt.value + '*';
3406 | } else {
3407 | opt.innerHTML = opt.value;
3408 | }
3409 | }
3410 |
3411 | function augmentController(gui, li, controller) {
3412 | controller.__li = li;
3413 | controller.__gui = gui;
3414 |
3415 | _common2.default.extend(controller, {
3416 | options: function options(_options) {
3417 | if (arguments.length > 1) {
3418 | var nextSibling = controller.__li.nextElementSibling;
3419 | controller.remove();
3420 |
3421 | return _add(gui, controller.object, controller.property, {
3422 | before: nextSibling,
3423 | factoryArgs: [_common2.default.toArray(arguments)]
3424 | });
3425 | }
3426 |
3427 | if (_common2.default.isArray(_options) || _common2.default.isObject(_options)) {
3428 | var _nextSibling = controller.__li.nextElementSibling;
3429 | controller.remove();
3430 |
3431 | return _add(gui, controller.object, controller.property, {
3432 | before: _nextSibling,
3433 | factoryArgs: [_options]
3434 | });
3435 | }
3436 | },
3437 |
3438 | name: function name(v) {
3439 | controller.__li.firstElementChild.firstElementChild.innerHTML = v;
3440 | return controller;
3441 | },
3442 |
3443 | listen: function listen() {
3444 | controller.__gui.listen(controller);
3445 | return controller;
3446 | },
3447 |
3448 | remove: function remove() {
3449 | controller.__gui.remove(controller);
3450 | return controller;
3451 | }
3452 | });
3453 |
3454 | // All sliders should be accompanied by a box.
3455 | if (controller instanceof _NumberControllerSlider2.default) {
3456 | (function () {
3457 | var box = new _NumberControllerBox2.default(controller.object, controller.property, { min: controller.__min, max: controller.__max, step: controller.__step });
3458 |
3459 | _common2.default.each(['updateDisplay', 'onChange', 'onFinishChange', 'step'], function (method) {
3460 | var pc = controller[method];
3461 | var pb = box[method];
3462 | controller[method] = box[method] = function () {
3463 | var args = Array.prototype.slice.call(arguments);
3464 | pb.apply(box, args);
3465 | return pc.apply(controller, args);
3466 | };
3467 | });
3468 |
3469 | _dom2.default.addClass(li, 'has-slider');
3470 | controller.domElement.insertBefore(box.domElement, controller.domElement.firstElementChild);
3471 | })();
3472 | } else if (controller instanceof _NumberControllerBox2.default) {
3473 | var r = function r(returned) {
3474 | // Have we defined both boundaries?
3475 | if (_common2.default.isNumber(controller.__min) && _common2.default.isNumber(controller.__max)) {
3476 | // Well, then lets just replace this with a slider.
3477 |
3478 | // lets remember if the old controller had a specific name or was listening
3479 | var oldName = controller.__li.firstElementChild.firstElementChild.innerHTML;
3480 | var wasListening = controller.__gui.__listening.indexOf(controller) > -1;
3481 |
3482 | controller.remove();
3483 | var newController = _add(gui, controller.object, controller.property, {
3484 | before: controller.__li.nextElementSibling,
3485 | factoryArgs: [controller.__min, controller.__max, controller.__step]
3486 | });
3487 |
3488 | newController.name(oldName);
3489 | if (wasListening) newController.listen();
3490 |
3491 | return newController;
3492 | }
3493 |
3494 | return returned;
3495 | };
3496 |
3497 | controller.min = _common2.default.compose(r, controller.min);
3498 | controller.max = _common2.default.compose(r, controller.max);
3499 | } else if (controller instanceof _BooleanController2.default) {
3500 | _dom2.default.bind(li, 'click', function () {
3501 | _dom2.default.fakeEvent(controller.__checkbox, 'click');
3502 | });
3503 |
3504 | _dom2.default.bind(controller.__checkbox, 'click', function (e) {
3505 | e.stopPropagation(); // Prevents double-toggle
3506 | });
3507 | } else if (controller instanceof _FunctionController2.default) {
3508 | _dom2.default.bind(li, 'click', function () {
3509 | _dom2.default.fakeEvent(controller.__button, 'click');
3510 | });
3511 |
3512 | _dom2.default.bind(li, 'mouseover', function () {
3513 | _dom2.default.addClass(controller.__button, 'hover');
3514 | });
3515 |
3516 | _dom2.default.bind(li, 'mouseout', function () {
3517 | _dom2.default.removeClass(controller.__button, 'hover');
3518 | });
3519 | } else if (controller instanceof _ColorController2.default) {
3520 | _dom2.default.addClass(li, 'color');
3521 | controller.updateDisplay = _common2.default.compose(function (val) {
3522 | li.style.borderLeftColor = controller.__color.toString();
3523 | return val;
3524 | }, controller.updateDisplay);
3525 |
3526 | controller.updateDisplay();
3527 | }
3528 |
3529 | controller.setValue = _common2.default.compose(function (val) {
3530 | if (gui.getRoot().__preset_select && controller.isModified()) {
3531 | markPresetModified(gui.getRoot(), true);
3532 | }
3533 |
3534 | return val;
3535 | }, controller.setValue);
3536 | }
3537 |
3538 | function recallSavedValue(gui, controller) {
3539 | // Find the topmost GUI, that's where remembered objects live.
3540 | var root = gui.getRoot();
3541 |
3542 | // Does the object we're controlling match anything we've been told to
3543 | // remember?
3544 | var matchedIndex = root.__rememberedObjects.indexOf(controller.object);
3545 |
3546 | // Why yes, it does!
3547 | if (matchedIndex !== -1) {
3548 | // Let me fetch a map of controllers for thcommon.isObject.
3549 | var controllerMap = root.__rememberedObjectIndecesToControllers[matchedIndex];
3550 |
3551 | // Ohp, I believe this is the first controller we've created for this
3552 | // object. Lets make the map fresh.
3553 | if (controllerMap === undefined) {
3554 | controllerMap = {};
3555 | root.__rememberedObjectIndecesToControllers[matchedIndex] = controllerMap;
3556 | }
3557 |
3558 | // Keep track of this controller
3559 | controllerMap[controller.property] = controller;
3560 |
3561 | // Okay, now have we saved any values for this controller?
3562 | if (root.load && root.load.remembered) {
3563 | var presetMap = root.load.remembered;
3564 |
3565 | // Which preset are we trying to load?
3566 | var preset = void 0;
3567 |
3568 | if (presetMap[gui.preset]) {
3569 | preset = presetMap[gui.preset];
3570 | } else if (presetMap[DEFAULT_DEFAULT_PRESET_NAME]) {
3571 | // Uhh, you can have the default instead?
3572 | preset = presetMap[DEFAULT_DEFAULT_PRESET_NAME];
3573 | } else {
3574 | // Nada.
3575 | return;
3576 | }
3577 |
3578 | // Did the loaded object remember thcommon.isObject? && Did we remember this particular property?
3579 | if (preset[matchedIndex] && preset[matchedIndex][controller.property] !== undefined) {
3580 | // We did remember something for this guy ...
3581 | var value = preset[matchedIndex][controller.property];
3582 |
3583 | // And that's what it is.
3584 | controller.initialValue = value;
3585 | controller.setValue(value);
3586 | }
3587 | }
3588 | }
3589 | }
3590 |
3591 | function _add(gui, object, property, params) {
3592 | if (object[property] === undefined) {
3593 | throw new Error('Object "' + object + '" has no property "' + property + '"');
3594 | }
3595 |
3596 | var controller = void 0;
3597 |
3598 | if (params.color) {
3599 | controller = new _ColorController2.default(object, property);
3600 | } else {
3601 | var factoryArgs = [object, property].concat(params.factoryArgs);
3602 | controller = _ControllerFactory2.default.apply(gui, factoryArgs);
3603 | }
3604 |
3605 | if (params.before instanceof _Controller2.default) {
3606 | params.before = params.before.__li;
3607 | }
3608 |
3609 | recallSavedValue(gui, controller);
3610 |
3611 | _dom2.default.addClass(controller.domElement, 'c');
3612 |
3613 | var name = document.createElement('span');
3614 | _dom2.default.addClass(name, 'property-name');
3615 | name.innerHTML = controller.property;
3616 |
3617 | var container = document.createElement('div');
3618 | container.appendChild(name);
3619 | container.appendChild(controller.domElement);
3620 |
3621 | var li = addRow(gui, container, params.before);
3622 |
3623 | _dom2.default.addClass(li, GUI.CLASS_CONTROLLER_ROW);
3624 | if (controller instanceof _ColorController2.default) {
3625 | _dom2.default.addClass(li, 'color');
3626 | } else {
3627 | _dom2.default.addClass(li, _typeof(controller.getValue()));
3628 | }
3629 |
3630 | augmentController(gui, li, controller);
3631 |
3632 | gui.__controllers.push(controller);
3633 |
3634 | return controller;
3635 | }
3636 |
3637 | function getLocalStorageHash(gui, key) {
3638 | // TODO how does this deal with multiple GUI's?
3639 | return document.location.href + '.' + key;
3640 | }
3641 |
3642 | function addPresetOption(gui, name, setSelected) {
3643 | var opt = document.createElement('option');
3644 | opt.innerHTML = name;
3645 | opt.value = name;
3646 | gui.__preset_select.appendChild(opt);
3647 | if (setSelected) {
3648 | gui.__preset_select.selectedIndex = gui.__preset_select.length - 1;
3649 | }
3650 | }
3651 |
3652 | function showHideExplain(gui, explain) {
3653 | explain.style.display = gui.useLocalStorage ? 'block' : 'none';
3654 | }
3655 |
3656 | function addSaveMenu(gui) {
3657 | var div = gui.__save_row = document.createElement('li');
3658 |
3659 | _dom2.default.addClass(gui.domElement, 'has-save');
3660 |
3661 | gui.__ul.insertBefore(div, gui.__ul.firstChild);
3662 |
3663 | _dom2.default.addClass(div, 'save-row');
3664 |
3665 | var gears = document.createElement('span');
3666 | gears.innerHTML = ' ';
3667 | _dom2.default.addClass(gears, 'button gears');
3668 |
3669 | // TODO replace with FunctionController
3670 | var button = document.createElement('span');
3671 | button.innerHTML = 'Save';
3672 | _dom2.default.addClass(button, 'button');
3673 | _dom2.default.addClass(button, 'save');
3674 |
3675 | var button2 = document.createElement('span');
3676 | button2.innerHTML = 'New';
3677 | _dom2.default.addClass(button2, 'button');
3678 | _dom2.default.addClass(button2, 'save-as');
3679 |
3680 | var button3 = document.createElement('span');
3681 | button3.innerHTML = 'Revert';
3682 | _dom2.default.addClass(button3, 'button');
3683 | _dom2.default.addClass(button3, 'revert');
3684 |
3685 | var select = gui.__preset_select = document.createElement('select');
3686 |
3687 | if (gui.load && gui.load.remembered) {
3688 | _common2.default.each(gui.load.remembered, function (value, key) {
3689 | addPresetOption(gui, key, key === gui.preset);
3690 | });
3691 | } else {
3692 | addPresetOption(gui, DEFAULT_DEFAULT_PRESET_NAME, false);
3693 | }
3694 |
3695 | _dom2.default.bind(select, 'change', function () {
3696 | for (var index = 0; index < gui.__preset_select.length; index++) {
3697 | gui.__preset_select[index].innerHTML = gui.__preset_select[index].value;
3698 | }
3699 |
3700 | gui.preset = this.value;
3701 | });
3702 |
3703 | div.appendChild(select);
3704 | div.appendChild(gears);
3705 | div.appendChild(button);
3706 | div.appendChild(button2);
3707 | div.appendChild(button3);
3708 |
3709 | if (SUPPORTS_LOCAL_STORAGE) {
3710 | (function () {
3711 | var explain = document.getElementById('dg-local-explain');
3712 | var localStorageCheckBox = document.getElementById('dg-local-storage');
3713 | var saveLocally = document.getElementById('dg-save-locally');
3714 |
3715 | saveLocally.style.display = 'block';
3716 |
3717 | if (localStorage.getItem(getLocalStorageHash(gui, 'isLocal')) === 'true') {
3718 | localStorageCheckBox.setAttribute('checked', 'checked');
3719 | }
3720 |
3721 | showHideExplain(gui, explain);
3722 |
3723 | // TODO: Use a boolean controller, fool!
3724 | _dom2.default.bind(localStorageCheckBox, 'change', function () {
3725 | gui.useLocalStorage = !gui.useLocalStorage;
3726 | showHideExplain(gui, explain);
3727 | });
3728 | })();
3729 | }
3730 |
3731 | var newConstructorTextArea = document.getElementById('dg-new-constructor');
3732 |
3733 | _dom2.default.bind(newConstructorTextArea, 'keydown', function (e) {
3734 | if (e.metaKey && (e.which === 67 || e.keyCode === 67)) {
3735 | SAVE_DIALOGUE.hide();
3736 | }
3737 | });
3738 |
3739 | _dom2.default.bind(gears, 'click', function () {
3740 | newConstructorTextArea.innerHTML = JSON.stringify(gui.getSaveObject(), undefined, 2);
3741 | SAVE_DIALOGUE.show();
3742 | newConstructorTextArea.focus();
3743 | newConstructorTextArea.select();
3744 | });
3745 |
3746 | _dom2.default.bind(button, 'click', function () {
3747 | gui.save();
3748 | });
3749 |
3750 | _dom2.default.bind(button2, 'click', function () {
3751 | var presetName = prompt('Enter a new preset name.');
3752 | if (presetName) {
3753 | gui.saveAs(presetName);
3754 | }
3755 | });
3756 |
3757 | _dom2.default.bind(button3, 'click', function () {
3758 | gui.revert();
3759 | });
3760 |
3761 | // div.appendChild(button2);
3762 | }
3763 |
3764 | function addResizeHandle(gui) {
3765 | var pmouseX = void 0;
3766 |
3767 | gui.__resize_handle = document.createElement('div');
3768 |
3769 | _common2.default.extend(gui.__resize_handle.style, {
3770 |
3771 | width: '6px',
3772 | marginLeft: '-3px',
3773 | height: '200px',
3774 | cursor: 'ew-resize',
3775 | position: 'absolute'
3776 | // border: '1px solid blue'
3777 |
3778 | });
3779 |
3780 | function drag(e) {
3781 | e.preventDefault();
3782 |
3783 | gui.width += pmouseX - e.clientX;
3784 | gui.onResize();
3785 | pmouseX = e.clientX;
3786 |
3787 | return false;
3788 | }
3789 |
3790 | function dragStop() {
3791 | _dom2.default.removeClass(gui.__closeButton, GUI.CLASS_DRAG);
3792 | _dom2.default.unbind(window, 'mousemove', drag);
3793 | _dom2.default.unbind(window, 'mouseup', dragStop);
3794 | }
3795 |
3796 | function dragStart(e) {
3797 | e.preventDefault();
3798 |
3799 | pmouseX = e.clientX;
3800 |
3801 | _dom2.default.addClass(gui.__closeButton, GUI.CLASS_DRAG);
3802 | _dom2.default.bind(window, 'mousemove', drag);
3803 | _dom2.default.bind(window, 'mouseup', dragStop);
3804 |
3805 | return false;
3806 | }
3807 |
3808 | _dom2.default.bind(gui.__resize_handle, 'mousedown', dragStart);
3809 | _dom2.default.bind(gui.__closeButton, 'mousedown', dragStart);
3810 |
3811 | gui.domElement.insertBefore(gui.__resize_handle, gui.domElement.firstElementChild);
3812 | }
3813 |
3814 | function setWidth(gui, w) {
3815 | gui.domElement.style.width = w + 'px';
3816 | // Auto placed save-rows are position fixed, so we have to
3817 | // set the width manually if we want it to bleed to the edge
3818 | if (gui.__save_row && gui.autoPlace) {
3819 | gui.__save_row.style.width = w + 'px';
3820 | }
3821 | if (gui.__closeButton) {
3822 | gui.__closeButton.style.width = w + 'px';
3823 | }
3824 | }
3825 |
3826 | function getCurrentPreset(gui, useInitialValues) {
3827 | var toReturn = {};
3828 |
3829 | // For each object I'm remembering
3830 | _common2.default.each(gui.__rememberedObjects, function (val, index) {
3831 | var savedValues = {};
3832 |
3833 | // The controllers I've made for thcommon.isObject by property
3834 | var controllerMap = gui.__rememberedObjectIndecesToControllers[index];
3835 |
3836 | // Remember each value for each property
3837 | _common2.default.each(controllerMap, function (controller, property) {
3838 | savedValues[property] = useInitialValues ? controller.initialValue : controller.getValue();
3839 | });
3840 |
3841 | // Save the values for thcommon.isObject
3842 | toReturn[index] = savedValues;
3843 | });
3844 |
3845 | return toReturn;
3846 | }
3847 |
3848 | function setPresetSelectIndex(gui) {
3849 | for (var index = 0; index < gui.__preset_select.length; index++) {
3850 | if (gui.__preset_select[index].value === gui.preset) {
3851 | gui.__preset_select.selectedIndex = index;
3852 | }
3853 | }
3854 | }
3855 |
3856 | function updateDisplays(controllerArray) {
3857 | if (controllerArray.length !== 0) {
3858 | _requestAnimationFrame2.default.call(window, function () {
3859 | updateDisplays(controllerArray);
3860 | });
3861 | }
3862 |
3863 | _common2.default.each(controllerArray, function (c) {
3864 | c.updateDisplay();
3865 | });
3866 | }
3867 |
3868 | module.exports = GUI;
3869 |
3870 | /***/ },
3871 | /* 18 */
3872 | /***/ function(module, exports) {
3873 |
3874 | 'use strict';
3875 |
3876 | /**
3877 | * dat-gui JavaScript Controller Library
3878 | * http://code.google.com/p/dat-gui
3879 | *
3880 | * Copyright 2011 Data Arts Team, Google Creative Lab
3881 | *
3882 | * Licensed under the Apache License, Version 2.0 (the "License");
3883 | * you may not use this file except in compliance with the License.
3884 | * You may obtain a copy of the License at
3885 | *
3886 | * http://www.apache.org/licenses/LICENSE-2.0
3887 | */
3888 |
3889 | module.exports = {
3890 | load: function load(url, indoc) {
3891 | var doc = indoc || document;
3892 | var link = doc.createElement('link');
3893 | link.type = 'text/css';
3894 | link.rel = 'stylesheet';
3895 | link.href = url;
3896 | doc.getElementsByTagName('head')[0].appendChild(link);
3897 | },
3898 |
3899 | inject: function inject(css, indoc) {
3900 | var doc = indoc || document;
3901 | var injected = document.createElement('style');
3902 | injected.type = 'text/css';
3903 | injected.innerHTML = css;
3904 | var head = doc.getElementsByTagName('head')[0];
3905 | try {
3906 | head.appendChild(injected);
3907 | } catch (e) {// Unable to inject CSS, probably because of a Content Security Policy
3908 | }
3909 | }
3910 | };
3911 |
3912 | /***/ },
3913 | /* 19 */
3914 | /***/ function(module, exports) {
3915 |
3916 | module.exports = "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 14 | Phaser Game GUI plugin 15 | | 16 | NPM 17 | | 18 | CDN 19 | Sound effects by Eric Matyas www.soundimage.org 20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // Generated by CoffeeScript 1.10.0 2 | (function() { 3 | "use strict"; 4 | var Arcade, PROPS, Phaser, ScaleManager, addArcadeSortDirection, addScaleMode, clickTrampolineChoices, dat, isArray, saveNumericValue, scaleModes, windowConstraintChoices, 5 | extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, 6 | hasProp = {}.hasOwnProperty; 7 | 8 | dat = dat || (typeof window !== "undefined" && window !== null ? window.dat : void 0) || this.dat || (typeof require === "function" ? require("dat.gui") : void 0); 9 | 10 | if (!dat) { 11 | throw new Error("Can't find `dat`"); 12 | } 13 | 14 | Phaser = Phaser || (typeof window !== "undefined" && window !== null ? window.Phaser : void 0) || this.Phaser || (typeof require === "function" ? require("phaser") : void 0); 15 | 16 | if (!Phaser) { 17 | throw new Error("Can't find `Phaser`"); 18 | } 19 | 20 | ScaleManager = Phaser.ScaleManager; 21 | 22 | Arcade = Phaser.Physics.Arcade; 23 | 24 | isArray = Array.isArray; 25 | 26 | clickTrampolineChoices = ["", "when-not-mouse"]; 27 | 28 | windowConstraintChoices = ["", "layout", "visual"]; 29 | 30 | if (ScaleManager) { 31 | scaleModes = { 32 | "exact fit": ScaleManager.EXACT_FIT, 33 | "no scale": ScaleManager.NO_SCALE, 34 | "resize": ScaleManager.RESIZE, 35 | "show all": ScaleManager.SHOW_ALL, 36 | "user scale": ScaleManager.USER_SCALE 37 | }; 38 | } 39 | 40 | addArcadeSortDirection = function(cn, arcade, name) { 41 | var controller; 42 | controller = cn.add(arcade, name, { 43 | "bottom top": Arcade.BOTTOM_TOP, 44 | "left right": Arcade.LEFT_RIGHT, 45 | "right left": Arcade.RIGHT_LEFT, 46 | "top bottom": Arcade.TOP_BOTTOM, 47 | "sort none": Arcade.SORT_NONE 48 | }); 49 | controller.onChange(saveNumericValue); 50 | return controller; 51 | }; 52 | 53 | addScaleMode = function(cn, scaleManager, name) { 54 | var controller; 55 | controller = cn.add(scaleManager, name, scaleModes); 56 | controller.onChange(saveNumericValue); 57 | return controller; 58 | }; 59 | 60 | saveNumericValue = function(newValue) { 61 | this.object[this.property] = Number(newValue); 62 | }; 63 | 64 | PROPS = Object.freeze({ 65 | game: { 66 | clearBeforeRender: true, 67 | disableStep: true, 68 | enableStep: true, 69 | forceSingleUpdate: true, 70 | lockRender: true, 71 | paused: true, 72 | step: true, 73 | camera: { 74 | fade: true, 75 | flash: true, 76 | reset: true, 77 | resetFX: true, 78 | roundPx: true, 79 | shake: true, 80 | unfollow: true, 81 | x: function(cn, camera) { 82 | return [camera.bounds.left, camera.bounds.right - camera.view.width, 10]; 83 | }, 84 | y: function(cn, camera) { 85 | return [camera.bounds.top, camera.bounds.bottom - camera.view.height, 10]; 86 | }, 87 | lerp: { 88 | x: [0, 1, 0.05], 89 | y: [0, 1, 0.05] 90 | } 91 | }, 92 | debug: { 93 | font: true, 94 | lineHeight: [10, 50, 2], 95 | renderShadow: true, 96 | sprite: { 97 | visible: true 98 | } 99 | }, 100 | input: { 101 | enabled: true, 102 | maxPointers: [-1, 10, 1], 103 | keyboard: { 104 | enabled: true 105 | }, 106 | mouse: { 107 | capture: true, 108 | enabled: true 109 | }, 110 | mspointer: { 111 | capture: true, 112 | enabled: true 113 | }, 114 | touch: { 115 | enabled: true, 116 | preventDefault: true 117 | } 118 | }, 119 | physics: { 120 | arcade: { 121 | OVERLAP_BIAS: [-16, 16, 1], 122 | TILE_BIAS: [-16, 16, 1], 123 | checkCollision: { 124 | down: true, 125 | left: true, 126 | right: true, 127 | up: true 128 | }, 129 | forceX: true, 130 | gravity: { 131 | x: [-1000, 1000, 10], 132 | y: [-1000, 1000, 10] 133 | }, 134 | isPaused: true, 135 | skipQuadTree: true, 136 | sortDirection: addArcadeSortDirection 137 | } 138 | }, 139 | scale: { 140 | compatibility: { 141 | canExpandParent: true, 142 | clickTrampoline: [clickTrampolineChoices], 143 | forceMinimumDocumentHeight: true, 144 | noMargins: true, 145 | orientationFallback: true, 146 | supportsFullScreen: true 147 | }, 148 | fullScreenScaleMode: addScaleMode, 149 | pageAlignHorizontally: true, 150 | pageAlignVertically: true, 151 | parentIsWindow: true, 152 | refresh: true, 153 | scaleMode: addScaleMode, 154 | startFullScreen: true, 155 | stopFullScreen: true, 156 | windowConstraints: { 157 | bottom: [windowConstraintChoices], 158 | right: [windowConstraintChoices] 159 | } 160 | }, 161 | sound: { 162 | mute: true, 163 | volume: [0, 1, 0.1] 164 | }, 165 | stage: { 166 | backgroundColor: function(cn, stage, name) { 167 | return cn.addColor(stage, name); 168 | }, 169 | disableVisibilityChange: true, 170 | smoothed: true 171 | }, 172 | state: { 173 | restart: true 174 | }, 175 | time: { 176 | desiredFps: [10, 120, 5], 177 | slowMotion: [0.1, 10, 0.1] 178 | }, 179 | tweens: { 180 | frameBased: true, 181 | pauseAll: true, 182 | resumeAll: true 183 | }, 184 | world: { 185 | alpha: [0, 1, 0.1], 186 | visible: true 187 | } 188 | } 189 | }); 190 | 191 | Phaser.Plugin.GameGui = (function(superClass) { 192 | extend(GameGui, superClass); 193 | 194 | function GameGui() { 195 | return GameGui.__super__.constructor.apply(this, arguments); 196 | } 197 | 198 | GameGui.prototype.gui = null; 199 | 200 | GameGui.prototype.init = function(options) { 201 | this.createGui(options); 202 | }; 203 | 204 | GameGui.prototype.destroy = function() { 205 | this.gui.destroy(); 206 | }; 207 | 208 | GameGui.prototype.add = function(guiContainer, obj, props) { 209 | var args, name; 210 | for (name in props) { 211 | args = props[name]; 212 | this.addProp(guiContainer, obj, name, args); 213 | } 214 | return guiContainer; 215 | }; 216 | 217 | GameGui.prototype.addProp = function(guiContainer, obj, name, args) { 218 | var addArgs, field, result, val; 219 | val = obj[name]; 220 | if (val == null) { 221 | console.warn("Skipped '" + name + "' (" + val + ")"); 222 | return; 223 | } 224 | if (typeof args === "function") { 225 | result = args.call(null, guiContainer, obj, name); 226 | args = isArray(result) ? result : false; 227 | } 228 | switch (false) { 229 | case args !== false: 230 | return; 231 | case args !== true: 232 | field = guiContainer.add(obj, name); 233 | if (typeof val !== "function") { 234 | field.listen(); 235 | } 236 | break; 237 | case !isArray(args): 238 | addArgs = [obj, name].concat(args); 239 | guiContainer.add.apply(guiContainer, addArgs).listen(); 240 | break; 241 | case typeof args !== "object": 242 | this.add(guiContainer.addFolder(name), obj[name], args); 243 | break; 244 | default: 245 | console.warn("Nothing to do: " + args); 246 | } 247 | return guiContainer; 248 | }; 249 | 250 | GameGui.prototype.createGui = function(options) { 251 | this.gui = new dat.GUI(options); 252 | this.add(this.gui, this.game, PROPS.game); 253 | return this.gui; 254 | }; 255 | 256 | return GameGui; 257 | 258 | })(Phaser.Plugin); 259 | 260 | }).call(this); 261 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-plugin-game-gui", 3 | "version": "0.1.14", 4 | "description": "Inspect and manipulate some common game settings", 5 | "main": "index.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "prestart": "cp -v ./node_modules/dat.gui/build/dat.gui.js{,.map} ./node_modules/phaser/build/phaser.js ./example; open index.html", 11 | "start": "coffeebar --watch *.coffee example/*.coffee", 12 | "preversion": "eslint index.js example/index.js", 13 | "pub": "np --no-cleanup" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/samme/phaser-plugin-game-gui.git" 18 | }, 19 | "keywords": [ 20 | "phaser" 21 | ], 22 | "author": "samme", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/samme/phaser-plugin-game-gui/issues" 26 | }, 27 | "homepage": "https://github.com/samme/phaser-plugin-game-gui#readme", 28 | "dependencies": { 29 | "dat.gui": "github:dataarts/dat.gui", 30 | "phaser": "^2.6.2" 31 | }, 32 | "devDependencies": { 33 | "coffeebar": "^1.0.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samme/phaser-plugin-game-gui/2983881abc7931c6f923f133c16b97c3b1a771a9/screenshot.png --------------------------------------------------------------------------------