|
|
@@ -1,1111 +0,0 @@
|
|
|
-var GUI = function() {
|
|
|
-
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- var MIN_WIDTH = 240;
|
|
|
- var MAX_WIDTH = 500;
|
|
|
-
|
|
|
- var controllers = [];
|
|
|
- var listening = [];
|
|
|
-
|
|
|
- var autoListen = true;
|
|
|
-
|
|
|
- var listenInterval;
|
|
|
-
|
|
|
- // Sum total of heights of controllers in this gui
|
|
|
- var controllerHeight;
|
|
|
-
|
|
|
- var curControllerContainerHeight = 0;
|
|
|
-
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- var open = false;
|
|
|
- var width = 280;
|
|
|
-
|
|
|
- // Prevents checkForOverflow bug in which loaded gui appearance
|
|
|
- // settings are not respected by presence of scrollbar.
|
|
|
- var explicitOpenHeight = false;
|
|
|
-
|
|
|
- // How big we get when we open
|
|
|
- var openHeight;
|
|
|
-
|
|
|
- var name;
|
|
|
-
|
|
|
- var resizeTo = 0;
|
|
|
- var resizeTimeout;
|
|
|
-
|
|
|
- this.domElement = document.createElement('div');
|
|
|
- this.domElement.setAttribute('class', 'guidat');
|
|
|
- this.domElement.style.width = width+'px';
|
|
|
-
|
|
|
- var controllerContainer = document.createElement('div');
|
|
|
- controllerContainer.setAttribute('class', 'guidat-controllers');
|
|
|
-
|
|
|
- // Firefox hack to prevent horizontal scrolling
|
|
|
- controllerContainer.addEventListener('DOMMouseScroll', function(e) {
|
|
|
-
|
|
|
- var scrollAmount = this.scrollTop;
|
|
|
-
|
|
|
- if (e.wheelDelta) {
|
|
|
- scrollAmount+=e.wheelDelta;
|
|
|
- } else if (e.detail) {
|
|
|
- scrollAmount+=e.detail;
|
|
|
- }
|
|
|
-
|
|
|
- if (e.preventDefault) {
|
|
|
- e.preventDefault();
|
|
|
- }
|
|
|
- e.returnValue = false;
|
|
|
-
|
|
|
- controllerContainer.scrollTop = scrollAmount;
|
|
|
-
|
|
|
- }, false);
|
|
|
-
|
|
|
- controllerContainer.style.height = '0px';
|
|
|
-
|
|
|
- var toggleButton = document.createElement('a');
|
|
|
- toggleButton.setAttribute('class', 'guidat-toggle');
|
|
|
- toggleButton.setAttribute('href', '#');
|
|
|
- toggleButton.innerHTML = "Show Controls";
|
|
|
-
|
|
|
- var toggleDragged = false;
|
|
|
- var dragDisplacementY = 0;
|
|
|
- var togglePressed = false;
|
|
|
-
|
|
|
- var my, pmy, mx, pmx;
|
|
|
-
|
|
|
- var resize = function(e) {
|
|
|
- pmy = my;
|
|
|
- pmx = mx;
|
|
|
- my = e.pageY;
|
|
|
- mx = e.pageX;
|
|
|
-
|
|
|
- var dmy = my - pmy;
|
|
|
-
|
|
|
- if (!open) {
|
|
|
- if (dmy > 0) {
|
|
|
- open = true;
|
|
|
- curControllerContainerHeight = openHeight = 1;
|
|
|
- toggleButton.innerHTML = name || "Hide Controls";
|
|
|
- } else {
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // TODO: Flip this if you want to resize to the left.
|
|
|
- var dmx = pmx - mx;
|
|
|
-
|
|
|
- if (dmy > 0 &&
|
|
|
- curControllerContainerHeight > controllerHeight) {
|
|
|
- var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
|
|
|
- dmy *= d;
|
|
|
- }
|
|
|
-
|
|
|
- toggleDragged = true;
|
|
|
- dragDisplacementY += dmy;
|
|
|
- dragDisplacementX += dmx;
|
|
|
- openHeight += dmy;
|
|
|
- width += dmx;
|
|
|
- curControllerContainerHeight += dmy;
|
|
|
- controllerContainer.style.height = openHeight+'px';
|
|
|
- width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
|
|
- _this.domElement.style.width = width+'px';
|
|
|
- checkForOverflow();
|
|
|
- };
|
|
|
-
|
|
|
- toggleButton.addEventListener('mousedown', function(e) {
|
|
|
- pmy = my = e.pageY;
|
|
|
- pmx = mx = e.pageX;
|
|
|
- togglePressed = true;
|
|
|
- e.preventDefault();
|
|
|
- dragDisplacementY = 0;
|
|
|
- dragDisplacementX = 0;
|
|
|
- document.addEventListener('mousemove', resize, false);
|
|
|
- return false;
|
|
|
-
|
|
|
- }, false);
|
|
|
-
|
|
|
- toggleButton.addEventListener('click', function(e) {
|
|
|
- e.preventDefault();
|
|
|
- return false;
|
|
|
- }, false);
|
|
|
-
|
|
|
- document.addEventListener('mouseup', function(e) {
|
|
|
-
|
|
|
- if (togglePressed && !toggleDragged) {
|
|
|
- _this.toggle();
|
|
|
- }
|
|
|
-
|
|
|
- if (togglePressed && toggleDragged) {
|
|
|
-
|
|
|
- if (dragDisplacementX == 0) {
|
|
|
- adaptToScrollbar();
|
|
|
- }
|
|
|
-
|
|
|
- if (openHeight > controllerHeight) {
|
|
|
-
|
|
|
- clearTimeout(resizeTimeout);
|
|
|
- openHeight = resizeTo = controllerHeight;
|
|
|
- beginResize();
|
|
|
-
|
|
|
- } else if (controllerContainer.children.length >= 1) {
|
|
|
-
|
|
|
- var singleControllerHeight = controllerContainer.children[0].offsetHeight;
|
|
|
- clearTimeout(resizeTimeout);
|
|
|
- var target = Math.round(curControllerContainerHeight/singleControllerHeight)*singleControllerHeight-1;
|
|
|
- resizeTo = target;
|
|
|
- if (resizeTo <= 0) {
|
|
|
- _this.hide();
|
|
|
- openHeight = singleControllerHeight*2;
|
|
|
- } else {
|
|
|
- openHeight = resizeTo;
|
|
|
- beginResize();
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- document.removeEventListener('mousemove', resize, false);
|
|
|
- e.preventDefault();
|
|
|
- toggleDragged = false;
|
|
|
- togglePressed = false;
|
|
|
-
|
|
|
- return false;
|
|
|
-
|
|
|
- }, false);
|
|
|
-
|
|
|
- this.domElement.appendChild(controllerContainer);
|
|
|
- this.domElement.appendChild(toggleButton);
|
|
|
-
|
|
|
- if (GUI.autoPlace) {
|
|
|
- if(GUI.autoPlaceContainer == null) {
|
|
|
- GUI.autoPlaceContainer = document.createElement('div');
|
|
|
- GUI.autoPlaceContainer.setAttribute("id", "guidat");
|
|
|
-
|
|
|
- document.body.appendChild(GUI.autoPlaceContainer);
|
|
|
- }
|
|
|
- GUI.autoPlaceContainer.appendChild(this.domElement);
|
|
|
- }
|
|
|
-
|
|
|
- this.autoListenIntervalTime = 1000/60;
|
|
|
-
|
|
|
- var createListenInterval = function() {
|
|
|
- listenInterval = setInterval(function() {
|
|
|
- _this.listen();
|
|
|
- }, this.autoListenIntervalTime);
|
|
|
- };
|
|
|
-
|
|
|
- this.__defineSetter__("autoListen", function(v) {
|
|
|
- autoListen = v;
|
|
|
- if (!autoListen) {
|
|
|
- clearInterval(listenInterval);
|
|
|
- } else {
|
|
|
- if (listening.length > 0) createListenInterval();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.__defineGetter__("autoListen", function(v) {
|
|
|
- return autoListen;
|
|
|
- });
|
|
|
-
|
|
|
- this.listenTo = function(controller) {
|
|
|
- // TODO: check for duplicates
|
|
|
- if (listening.length == 0) {
|
|
|
- createListenInterval();
|
|
|
- }
|
|
|
- listening.push(controller);
|
|
|
- };
|
|
|
-
|
|
|
- this.unlistenTo = function(controller) {
|
|
|
- // TODO: test this
|
|
|
- for(var i = 0; i < listening.length; i++) {
|
|
|
- if(listening[i] == controller) listening.splice(i, 1);
|
|
|
- }
|
|
|
- if(listening.length <= 0) {
|
|
|
- clearInterval(listenInterval);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- this.listen = function(whoToListenTo) {
|
|
|
- var arr = whoToListenTo || listening;
|
|
|
- for (var i in arr) {
|
|
|
- arr[i].updateDisplay();
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- this.listenAll = function() {
|
|
|
- this.listen(controllers);
|
|
|
- }
|
|
|
-
|
|
|
- this.autoListen = true;
|
|
|
-
|
|
|
- var alreadyControlled = function(object, propertyName) {
|
|
|
- for (var i in controllers) {
|
|
|
- if (controllers[i].object == object &&
|
|
|
- controllers[i].propertyName == propertyName) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- return false;
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- var construct = function(constructor, args) {
|
|
|
- function F() {
|
|
|
- return constructor.apply(this, args);
|
|
|
- }
|
|
|
- F.prototype = constructor.prototype;
|
|
|
- return new F();
|
|
|
- };
|
|
|
-
|
|
|
- this.add = function() {
|
|
|
-
|
|
|
- var object = arguments[0];
|
|
|
- var propertyName = arguments[1];
|
|
|
-
|
|
|
- // Have we already added this?
|
|
|
- if (alreadyControlled(object, propertyName)) {
|
|
|
- // GUI.error("Controller for \"" + propertyName+"\" already added.");
|
|
|
- // return;
|
|
|
- }
|
|
|
-
|
|
|
- var value = object[propertyName];
|
|
|
-
|
|
|
- // Does this value exist? Is it accessible?
|
|
|
- if (value == undefined) {
|
|
|
- GUI.error(object + " either has no property \""+propertyName+"\", or the property is inaccessible.");
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- var type = typeof value;
|
|
|
- var handler = handlerTypes[type];
|
|
|
-
|
|
|
- // Do we know how to deal with this data type?
|
|
|
- if (handler == undefined) {
|
|
|
- GUI.error("Cannot create controller for data type \""+type+"\"");
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- var args = [this]; // Set first arg (parent) to this
|
|
|
- for (var j = 0; j < arguments.length; j++) {
|
|
|
- args.push(arguments[j]);
|
|
|
- }
|
|
|
-
|
|
|
- var controllerObject = construct(handler, args);
|
|
|
-
|
|
|
- // Were we able to make the controller?
|
|
|
- if (!controllerObject) {
|
|
|
- GUI.error("Error creating controller for \""+propertyName+"\".");
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // Success.
|
|
|
- controllerContainer.appendChild(controllerObject.domElement);
|
|
|
- controllers.push(controllerObject);
|
|
|
- GUI.allControllers.push(controllerObject);
|
|
|
-
|
|
|
- // Do we have a saved value for this controller?
|
|
|
- if (type != "function" &&
|
|
|
- GUI.saveIndex < GUI.savedValues.length) {
|
|
|
- controllerObject.setValue(GUI.savedValues[GUI.saveIndex]);
|
|
|
- GUI.saveIndex++;
|
|
|
- }
|
|
|
-
|
|
|
- // Compute sum height of controllers.
|
|
|
- checkForOverflow();
|
|
|
-
|
|
|
- // Prevents checkForOverflow bug in which loaded gui appearance
|
|
|
- // settings are not respected by presence of scrollbar.
|
|
|
- if (!explicitOpenHeight) {
|
|
|
- openHeight = controllerHeight;
|
|
|
- }
|
|
|
-
|
|
|
- return controllerObject;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var checkForOverflow = function() {
|
|
|
- controllerHeight = 0;
|
|
|
- for (var i in controllers) {
|
|
|
- controllerHeight += controllers[i].domElement.offsetHeight;
|
|
|
- }
|
|
|
- if (controllerHeight - 1 > openHeight) {
|
|
|
- controllerContainer.style.overflowY = "auto";
|
|
|
- } else {
|
|
|
- controllerContainer.style.overflowY = "hidden";
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- var handlerTypes = {
|
|
|
- "number": GUI.NumberController,
|
|
|
- "string": GUI.StringController,
|
|
|
- "boolean": GUI.BooleanController,
|
|
|
- "function": GUI.FunctionController
|
|
|
- };
|
|
|
-
|
|
|
- var alreadyControlled = function(object, propertyName) {
|
|
|
- for (var i in controllers) {
|
|
|
- if (controllers[i].object == object &&
|
|
|
- controllers[i].propertyName == propertyName) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- return false;
|
|
|
- };
|
|
|
-
|
|
|
- var construct = function(constructor, args) {
|
|
|
-
|
|
|
- function F() {
|
|
|
- return constructor.apply(this, args);
|
|
|
- }
|
|
|
- F.prototype = constructor.prototype;
|
|
|
- return new F();
|
|
|
- };
|
|
|
-
|
|
|
- this.reset = function() {
|
|
|
- // TODO
|
|
|
- }
|
|
|
-
|
|
|
- // GUI ... GUI
|
|
|
-
|
|
|
- this.toggle = function() {
|
|
|
- open ? this.hide() : this.show();
|
|
|
- };
|
|
|
-
|
|
|
- this.show = function() {
|
|
|
- toggleButton.innerHTML = name || "Hide Controls";
|
|
|
- resizeTo = openHeight;
|
|
|
- clearTimeout(resizeTimeout);
|
|
|
- beginResize();
|
|
|
- open = true;
|
|
|
- }
|
|
|
-
|
|
|
- this.hide = function() {
|
|
|
- toggleButton.innerHTML = name || "Show Controls";
|
|
|
- resizeTo = 0;
|
|
|
- clearTimeout(resizeTimeout);
|
|
|
- beginResize();
|
|
|
- open = false;
|
|
|
- }
|
|
|
-
|
|
|
- this.name = function(n) {
|
|
|
- name = n;
|
|
|
- toggleButton.innerHTML = n;
|
|
|
- }
|
|
|
-
|
|
|
- // used in saveURL
|
|
|
- this.appearanceVars = function() {
|
|
|
- return [open, width, openHeight, controllerContainer.scrollTop]
|
|
|
- }
|
|
|
-
|
|
|
- var beginResize = function() {
|
|
|
- //console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
|
|
|
- curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
|
|
|
- if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
|
|
|
- curControllerContainerHeight = resizeTo;
|
|
|
- adaptToScrollbar();
|
|
|
-
|
|
|
- } else {
|
|
|
- resizeTimeout = setTimeout(beginResize, 1000/30);
|
|
|
- }
|
|
|
- controllerContainer.style.height = Math.round(curControllerContainerHeight)+'px';
|
|
|
- checkForOverflow();
|
|
|
- }
|
|
|
-
|
|
|
- var adaptToScrollbar = function() {
|
|
|
- // Clears lingering slider column
|
|
|
- _this.domElement.style.width = (width+1)+'px';
|
|
|
- setTimeout(function() {
|
|
|
- _this.domElement.style.width = width+'px';
|
|
|
- }, 1);
|
|
|
- };
|
|
|
-
|
|
|
- // Load saved appearance:
|
|
|
-
|
|
|
- if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
|
|
|
-
|
|
|
-
|
|
|
- width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
|
|
- _this.domElement.style.width = width+"px";
|
|
|
-
|
|
|
- openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
|
|
|
- explicitOpenHeight = true;
|
|
|
- if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
|
|
|
- curControllerContainerHeight = openHeight;
|
|
|
- var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
|
|
|
-
|
|
|
- // Hack.
|
|
|
- setTimeout(function() {
|
|
|
- controllerContainer.scrollTop = t;
|
|
|
- }, 0);
|
|
|
-
|
|
|
- if (GUI.scrollTop > -1) {
|
|
|
- document.body.scrollTop = GUI.scrollTop;
|
|
|
- }
|
|
|
- resizeTo = openHeight;
|
|
|
- this.show();
|
|
|
- }
|
|
|
-
|
|
|
- GUI.guiIndex++;
|
|
|
- }
|
|
|
-
|
|
|
- GUI.allGuis.push(this);
|
|
|
-
|
|
|
- // Add hide listener if this is the first GUI.
|
|
|
- if (GUI.allGuis.length == 1) {
|
|
|
- window.addEventListener('keyup', function(e) {
|
|
|
- // Hide on "H"
|
|
|
- if (e.keyCode == 72) {
|
|
|
- GUI.toggleHide();
|
|
|
- }
|
|
|
- }, false);
|
|
|
- }
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-// Do not set this directly.
|
|
|
-GUI.hidden = false;
|
|
|
-
|
|
|
-
|
|
|
-// Static members
|
|
|
-
|
|
|
-GUI.autoPlace = true;
|
|
|
-GUI.autoPlaceContainer = null;
|
|
|
-GUI.allControllers = [];
|
|
|
-GUI.allGuis = [];
|
|
|
-
|
|
|
-
|
|
|
-GUI.toggleHide = function() {
|
|
|
- if (GUI.hidden) {
|
|
|
- GUI.show();
|
|
|
- } else {
|
|
|
- GUI.hide();
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-GUI.show = function() {
|
|
|
- GUI.hidden = false;
|
|
|
- for (var i in GUI.allGuis) {
|
|
|
- GUI.allGuis[i].domElement.style.display = "block";
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-GUI.hide = function() {
|
|
|
- GUI.hidden = true;
|
|
|
- for (var i in GUI.allGuis) {
|
|
|
- GUI.allGuis[i].domElement.style.display = "none";
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-GUI.saveURL = function() {
|
|
|
- var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
|
|
|
- window.location = url;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.scrollTop = -1;
|
|
|
-
|
|
|
-GUI.load = function(saveString) {
|
|
|
-
|
|
|
- //GUI.savedAppearanceVars = [];
|
|
|
- var vals = saveString.split(",");
|
|
|
- var numGuis = parseInt(vals[0]);
|
|
|
- GUI.scrollTop = parseInt(vals[1]);
|
|
|
- for (var i = 0; i < numGuis; i++) {
|
|
|
- var appr = vals.splice(2, 4);
|
|
|
- GUI.savedAppearanceVars.push(appr);
|
|
|
- }
|
|
|
-
|
|
|
- GUI.savedValues = vals.splice(2, vals.length);
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-GUI.savedValues = [];
|
|
|
-GUI.savedAppearanceVars = [];
|
|
|
-
|
|
|
-GUI.getSaveString = function() {
|
|
|
-
|
|
|
- var vals = [],
|
|
|
- i;
|
|
|
-
|
|
|
- vals.push(GUI.allGuis.length);
|
|
|
- vals.push(document.body.scrollTop);
|
|
|
-
|
|
|
-
|
|
|
- for (i in GUI.allGuis) {
|
|
|
- var av = GUI.allGuis[i].appearanceVars();
|
|
|
- for (var j = 0; j < av.length; j++) {
|
|
|
- vals.push(av[j]);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- for (i in GUI.allControllers) {
|
|
|
-
|
|
|
- // We don't save values for functions.
|
|
|
- if (GUI.allControllers[i].type == "function") {
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- var v = GUI.allControllers[i].getValue();
|
|
|
-
|
|
|
- // Round numbers so they don't get enormous
|
|
|
- if (GUI.allControllers[i].type == "number") {
|
|
|
- v = GUI.roundToDecimal(v, 4);
|
|
|
- }
|
|
|
-
|
|
|
- vals.push(v);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- return vals.join(',');
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-GUI.getVarFromURL = function(v) {
|
|
|
-
|
|
|
- var vars = [], hash;
|
|
|
- var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
|
|
-
|
|
|
- for (var i = 0; i < hashes.length; i++) {
|
|
|
- hash = hashes[i].split("=");
|
|
|
- if (hash == undefined) continue;
|
|
|
- if (hash[0] == v) {
|
|
|
- return hash[1];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return null;
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-GUI.replaceGetVar = function(varName, val) {
|
|
|
-
|
|
|
- var vars = [], hash;
|
|
|
- var loc = window.location.href;
|
|
|
- var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
|
|
-
|
|
|
- for (var i = 0; i < hashes.length; i++) {
|
|
|
- hash = hashes[i].split("=");
|
|
|
- if (hash == undefined) continue;
|
|
|
- if (hash[0] == varName) {
|
|
|
- return loc.replace(hash[1], val);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (window.location.href.indexOf('?') != -1) {
|
|
|
- return loc + "&"+varName+"="+val;
|
|
|
- }
|
|
|
-
|
|
|
- return loc+"?"+varName+"="+val;
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-GUI.saveIndex = 0;
|
|
|
-GUI.guiIndex = 0;
|
|
|
-
|
|
|
-GUI.showSaveString = function() {
|
|
|
- alert(GUI.getSaveString());
|
|
|
-};
|
|
|
-
|
|
|
-// Util functions
|
|
|
-
|
|
|
-GUI.makeUnselectable = function(elem) {
|
|
|
- elem.onselectstart = function() { return false; };
|
|
|
- elem.style.MozUserSelect = "none";
|
|
|
- elem.style.KhtmlUserSelect = "none";
|
|
|
- elem.unselectable = "on";
|
|
|
-};
|
|
|
-
|
|
|
-GUI.makeSelectable = function(elem) {
|
|
|
- elem.onselectstart = function() { };
|
|
|
- elem.style.MozUserSelect = "auto";
|
|
|
- elem.style.KhtmlUserSelect = "auto";
|
|
|
- elem.unselectable = "off";
|
|
|
-};
|
|
|
-
|
|
|
-GUI.map = function(v, i1, i2, o1, o2) {
|
|
|
- return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
|
|
-};
|
|
|
-
|
|
|
-GUI.constrain = function (v, o1, o2) {
|
|
|
- if (v < o1) v = o1;
|
|
|
- else if (v > o2) v = o2;
|
|
|
- return v;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.error = function(str) {
|
|
|
- if (typeof console.error == 'function') {
|
|
|
- console.error("[GUI ERROR] " + str);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-GUI.roundToDecimal = function(n, decimals) {
|
|
|
- var t = Math.pow(10, decimals);
|
|
|
- return Math.round(n*t)/t;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.extendController = function(clazz) {
|
|
|
- clazz.prototype = new GUI.Controller();
|
|
|
- clazz.prototype.constructor = clazz;
|
|
|
-};
|
|
|
-
|
|
|
-if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));
|
|
|
-GUI.Slider = function(numberController, min, max, step, initValue) {
|
|
|
-
|
|
|
- var clicked = false;
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- var x, px;
|
|
|
-
|
|
|
- this.domElement = document.createElement('div');
|
|
|
- this.domElement.setAttribute('class', 'guidat-slider-bg');
|
|
|
-
|
|
|
- this.fg = document.createElement('div');
|
|
|
- this.fg.setAttribute('class', 'guidat-slider-fg');
|
|
|
-
|
|
|
- this.domElement.appendChild(this.fg);
|
|
|
-
|
|
|
- var onDrag = function(e) {
|
|
|
- if (!clicked) return;
|
|
|
- var pos = findPos(_this.domElement);
|
|
|
- var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
|
|
|
- val = Math.round(val/step)*step;
|
|
|
- numberController.setValue(val);
|
|
|
- };
|
|
|
-
|
|
|
- this.domElement.addEventListener('mousedown', function(e) {
|
|
|
- clicked = true;
|
|
|
- x = px = e.pageX;
|
|
|
- _this.domElement.className += ' active';
|
|
|
- _this.fg.className += ' active';
|
|
|
- numberController.domElement.className += ' active';
|
|
|
- onDrag(e);
|
|
|
- document.addEventListener('mouseup', mouseup, false);
|
|
|
- }, false);
|
|
|
-
|
|
|
- var mouseup = function(e) {
|
|
|
- _this.domElement.className = _this.domElement.className.replace(' active', '');
|
|
|
- _this.fg.className = _this.fg.className.replace(' active', '');
|
|
|
- numberController.domElement.className = numberController.domElement.className.replace(' active', '');
|
|
|
- clicked = false;
|
|
|
- if (numberController.finishChangeFunction != null) {
|
|
|
- numberController.finishChangeFunction.call(this, numberController.getValue());
|
|
|
- }
|
|
|
- document.removeEventListener('mouseup', mouseup, false);
|
|
|
- };
|
|
|
-
|
|
|
- var findPos = function(obj) {
|
|
|
- var curleft = 0, curtop = 0;
|
|
|
- if (obj.offsetParent) {
|
|
|
- do {
|
|
|
- curleft += obj.offsetLeft;
|
|
|
- curtop += obj.offsetTop;
|
|
|
- } while ((obj = obj.offsetParent));
|
|
|
- return [curleft,curtop];
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- this.__defineSetter__('value', function(e) {
|
|
|
- var pct = GUI.map(e, min, max, 0, 100);
|
|
|
- this.fg.style.width = pct+"%";
|
|
|
- });
|
|
|
-
|
|
|
- var onDrag = function(e) {
|
|
|
- if (!clicked) return;
|
|
|
- var pos = findPos(_this.domElement);
|
|
|
- var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
|
|
|
- val = Math.round(val/step)*step;
|
|
|
- numberController.setValue(val);
|
|
|
- };
|
|
|
-
|
|
|
- this.domElement.addEventListener('mousedown', function(e) {
|
|
|
- clicked = true;
|
|
|
- x = px = e.pageX;
|
|
|
- _this.domElement.setAttribute('class', 'guidat-slider-bg active');
|
|
|
- _this.fg.setAttribute('class', 'guidat-slider-fg active');
|
|
|
- onDrag(e);
|
|
|
- document.addEventListener('mouseup', mouseup, false);
|
|
|
- }, false);
|
|
|
-
|
|
|
- var mouseup = function(e) {
|
|
|
- _this.domElement.setAttribute('class', 'guidat-slider-bg');
|
|
|
- _this.fg.setAttribute('class', 'guidat-slider-fg');
|
|
|
- clicked = false;
|
|
|
- if (numberController.finishChangeFunction != null) {
|
|
|
- numberController.finishChangeFunction.call(this, numberController.getValue());
|
|
|
- }
|
|
|
- document.removeEventListener('mouseup', mouseup, false);
|
|
|
- };
|
|
|
-
|
|
|
- document.addEventListener('mousemove', onDrag, false);
|
|
|
-
|
|
|
- this.value = initValue;
|
|
|
-
|
|
|
-};
|
|
|
-GUI.Controller = function() {
|
|
|
-
|
|
|
- this.parent = arguments[0];
|
|
|
- this.object = arguments[1];
|
|
|
- this.propertyName = arguments[2];
|
|
|
-
|
|
|
- if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
|
|
|
-
|
|
|
- this.domElement = document.createElement('div');
|
|
|
- this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
|
|
|
-
|
|
|
- this.propertyNameElement = document.createElement('span');
|
|
|
- this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
|
|
|
- this.name(this.propertyName);
|
|
|
- this.domElement.appendChild(this.propertyNameElement);
|
|
|
-
|
|
|
- GUI.makeUnselectable(this.domElement);
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.changeFunction = null;
|
|
|
-GUI.Controller.prototype.finishChangeFunction = null;
|
|
|
-
|
|
|
-GUI.Controller.prototype.name = function(n) {
|
|
|
- this.propertyNameElement.innerHTML = n;
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.reset = function() {
|
|
|
- this.setValue(this.initialValue);
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.listen = function() {
|
|
|
- this.parent.listenTo(this);
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.unlisten = function() {
|
|
|
- this.parent.unlistenTo(this); // <--- hasn't been tested yet
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.setValue = function(n) {
|
|
|
- this.object[this.propertyName] = n;
|
|
|
- if (this.changeFunction != null) {
|
|
|
- this.changeFunction.call(this, n);
|
|
|
- }
|
|
|
- this.updateDisplay();
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.getValue = function() {
|
|
|
- return this.object[this.propertyName];
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.updateDisplay = function() {};
|
|
|
-
|
|
|
-GUI.Controller.prototype.onChange = function(fnc) {
|
|
|
- this.changeFunction = fnc;
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.onFinishChange = function(fnc) {
|
|
|
- this.finishChangeFunction = fnc;
|
|
|
- return this;
|
|
|
-};
|
|
|
-
|
|
|
-GUI.Controller.prototype.options = function() {
|
|
|
- var _this = this;
|
|
|
- var select = document.createElement('select');
|
|
|
- if (arguments.length == 1) {
|
|
|
- var arr = arguments[0];
|
|
|
- for (var i in arr) {
|
|
|
- var opt = document.createElement('option');
|
|
|
- opt.innerHTML = i;
|
|
|
- opt.setAttribute('value', arr[i]);
|
|
|
- select.appendChild(opt);
|
|
|
- }
|
|
|
- } else {
|
|
|
- for (var i = 0; i < arguments.length; i++) {
|
|
|
- var opt = document.createElement('option');
|
|
|
- opt.innerHTML = arguments[i];
|
|
|
- opt.setAttribute('value', arguments[i]);
|
|
|
- select.appendChild(opt);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- select.addEventListener('change', function() {
|
|
|
- _this.setValue(this.value);
|
|
|
- if (_this.finishChangeFunction != null) {
|
|
|
- _this.finishChangeFunction.call(this, _this.getValue());
|
|
|
- }
|
|
|
- }, false);
|
|
|
- _this.domElement.appendChild(select);
|
|
|
- return this;
|
|
|
-};
|
|
|
-GUI.BooleanController = function() {
|
|
|
-
|
|
|
- this.type = "boolean";
|
|
|
- GUI.Controller.apply(this, arguments);
|
|
|
-
|
|
|
- var _this = this;
|
|
|
- var input = document.createElement('input');
|
|
|
- input.setAttribute('type', 'checkbox');
|
|
|
-
|
|
|
- this.domElement.addEventListener('click', function(e) {
|
|
|
- input.checked = !input.checked;
|
|
|
- e.preventDefault();
|
|
|
- _this.setValue(input.checked);
|
|
|
- }, false);
|
|
|
-
|
|
|
- input.addEventListener('mouseup', function(e) {
|
|
|
- input.checked = !input.checked; // counteracts default.
|
|
|
- }, false);
|
|
|
-
|
|
|
- this.domElement.style.cursor = "pointer";
|
|
|
- this.propertyNameElement.style.cursor = "pointer";
|
|
|
- this.domElement.appendChild(input);
|
|
|
-
|
|
|
- this.updateDisplay = function() {
|
|
|
- input.checked = _this.getValue();
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- this.setValue = function(val) {
|
|
|
- if (typeof val != "boolean") {
|
|
|
- try {
|
|
|
- val = eval(val);
|
|
|
- } catch (e) {}
|
|
|
- }
|
|
|
- return GUI.Controller.prototype.setValue.call(this, val);
|
|
|
- };
|
|
|
-
|
|
|
-};
|
|
|
-GUI.extendController(GUI.BooleanController);
|
|
|
-GUI.FunctionController = function() {
|
|
|
-
|
|
|
- this.type = "function";
|
|
|
-
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- GUI.Controller.apply(this, arguments);
|
|
|
-
|
|
|
- this.domElement.addEventListener('click', function() {
|
|
|
- _this.fire();
|
|
|
- }, false);
|
|
|
-
|
|
|
- this.domElement.style.cursor = "pointer";
|
|
|
- this.propertyNameElement.style.cursor = "pointer";
|
|
|
-
|
|
|
- var fireFunction = null;
|
|
|
- this.onFire = function(fnc) {
|
|
|
- fireFunction = fnc;
|
|
|
- return this;
|
|
|
- }
|
|
|
-
|
|
|
- this.fire = function() {
|
|
|
- if (fireFunction != null) {
|
|
|
- fireFunction.call(this);
|
|
|
- }
|
|
|
- _this.object[_this.propertyName].call(_this.object);
|
|
|
- };
|
|
|
-};
|
|
|
-GUI.extendController(GUI.FunctionController);
|
|
|
-GUI.NumberController = function() {
|
|
|
-
|
|
|
- this.type = "number";
|
|
|
-
|
|
|
- GUI.Controller.apply(this, arguments);
|
|
|
-
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- // If we simply click and release a number field, we want to highlight it.
|
|
|
- // This variable keeps track of whether or not we've dragged
|
|
|
- var draggedNumberField = false;
|
|
|
-
|
|
|
- var clickedNumberField = false;
|
|
|
-
|
|
|
- var y = 0, py = 0;
|
|
|
-
|
|
|
- var min = arguments[3];
|
|
|
- var max = arguments[4];
|
|
|
- var step = arguments[5];
|
|
|
-
|
|
|
- if (!step) {
|
|
|
- if (min != undefined && max != undefined) {
|
|
|
- step = (max-min)*0.01;
|
|
|
- } else {
|
|
|
- step = 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- var numberField = document.createElement('input');
|
|
|
- numberField.setAttribute('id', this.propertyName);
|
|
|
- numberField.setAttribute('type', 'text');
|
|
|
- numberField.setAttribute('value', this.getValue());
|
|
|
-
|
|
|
- if (step) numberField.setAttribute('step', step);
|
|
|
-
|
|
|
- this.domElement.appendChild(numberField);
|
|
|
-
|
|
|
- var slider;
|
|
|
-
|
|
|
- if (min != undefined && max != undefined) {
|
|
|
- slider = new GUI.Slider(this, min, max, step, this.getValue());
|
|
|
- this.domElement.appendChild(slider.domElement);
|
|
|
- }
|
|
|
-
|
|
|
- numberField.addEventListener('blur', function(e) {
|
|
|
- var val = parseFloat(this.value);
|
|
|
- if (!isNaN(val)) {
|
|
|
- _this.setValue(val);
|
|
|
- }
|
|
|
- }, false);
|
|
|
-
|
|
|
- numberField.addEventListener('mousewheel', function(e) {
|
|
|
- e.preventDefault();
|
|
|
- _this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
|
|
|
- return false;
|
|
|
- }, false);
|
|
|
-
|
|
|
- numberField.addEventListener('mousedown', function(e) {
|
|
|
- py = y = e.pageY;
|
|
|
- clickedNumberField = true;
|
|
|
- document.addEventListener('mousemove', dragNumberField, false);
|
|
|
- document.addEventListener('mouseup', mouseup, false);
|
|
|
- }, false);
|
|
|
-
|
|
|
- // Handle up arrow and down arrow
|
|
|
- numberField.addEventListener('keydown', function(e) {
|
|
|
- var newVal;
|
|
|
- switch(e.keyCode) {
|
|
|
- case 13: // enter
|
|
|
- newVal = parseFloat(this.value);
|
|
|
- _this.setValue(newVal);
|
|
|
- break;
|
|
|
- case 38: // up
|
|
|
- newVal = _this.getValue() + step;
|
|
|
- _this.setValue(newVal);
|
|
|
- break;
|
|
|
- case 40: // down
|
|
|
- newVal = _this.getValue() - step;
|
|
|
- _this.setValue(newVal);
|
|
|
- break;
|
|
|
- }
|
|
|
- }, false);
|
|
|
-
|
|
|
- var mouseup = function(e) {
|
|
|
- document.removeEventListener('mousemove', dragNumberField, false);
|
|
|
- GUI.makeSelectable(_this.parent.domElement);
|
|
|
- GUI.makeSelectable(numberField);
|
|
|
- if (clickedNumberField && !draggedNumberField) {
|
|
|
- numberField.focus();
|
|
|
- numberField.select();
|
|
|
- }
|
|
|
- if(slider) slider.domElement.className = slider.domElement.className.replace(' active', '');
|
|
|
- draggedNumberField = false;
|
|
|
- clickedNumberField = false;
|
|
|
- if (_this.finishChangeFunction != null) {
|
|
|
- _this.finishChangeFunction.call(this, _this.getValue());
|
|
|
- }
|
|
|
- document.removeEventListener('mouseup', mouseup, false);
|
|
|
- };
|
|
|
-
|
|
|
- var dragNumberField = function(e) {
|
|
|
-
|
|
|
- draggedNumberField = true;
|
|
|
- e.preventDefault();
|
|
|
-
|
|
|
- // We don't want to be highlighting this field as we scroll.
|
|
|
- // Or any other fields in this gui for that matter ...
|
|
|
- // TODO: Make makeUselectable go through each element and child element.
|
|
|
-
|
|
|
- GUI.makeUnselectable(_this.parent.domElement);
|
|
|
- GUI.makeUnselectable(numberField);
|
|
|
-
|
|
|
- if(slider) slider.domElement.className += ' active';
|
|
|
-
|
|
|
- py = y;
|
|
|
- y = e.pageY;
|
|
|
- var dy = py - y;
|
|
|
- var newVal = _this.getValue() + dy*step;
|
|
|
- _this.setValue(newVal);
|
|
|
- return false;
|
|
|
- };
|
|
|
-
|
|
|
- this.options = function() {
|
|
|
- _this.noSlider();
|
|
|
- _this.domElement.removeChild(numberField);
|
|
|
- return GUI.Controller.prototype.options.apply(this, arguments);
|
|
|
- };
|
|
|
-
|
|
|
- this.noSlider = function() {
|
|
|
- if (slider) {
|
|
|
- _this.domElement.removeChild(slider.domElement);
|
|
|
- }
|
|
|
- return this;
|
|
|
- };
|
|
|
-
|
|
|
- this.setValue = function(val) {
|
|
|
-
|
|
|
- val = parseFloat(val);
|
|
|
-
|
|
|
- if (min != undefined && val <= min) {
|
|
|
- val = min;
|
|
|
- } else if (max != undefined && val >= max) {
|
|
|
- val = max;
|
|
|
- }
|
|
|
-
|
|
|
- return GUI.Controller.prototype.setValue.call(this, val);
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- this.updateDisplay = function() {
|
|
|
- numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
|
|
|
- if (slider) slider.value = _this.getValue();
|
|
|
- };
|
|
|
-};
|
|
|
-
|
|
|
-GUI.extendController(GUI.NumberController);
|
|
|
-GUI.StringController = function() {
|
|
|
-
|
|
|
- this.type = "string";
|
|
|
-
|
|
|
- var _this = this;
|
|
|
- GUI.Controller.apply(this, arguments);
|
|
|
-
|
|
|
- var input = document.createElement('input');
|
|
|
-
|
|
|
- var initialValue = this.getValue();
|
|
|
-
|
|
|
- input.setAttribute('value', initialValue);
|
|
|
- input.setAttribute('spellcheck', 'false');
|
|
|
-
|
|
|
- this.domElement.addEventListener('mouseup', function() {
|
|
|
- input.focus();
|
|
|
- input.select();
|
|
|
- }, false);
|
|
|
-
|
|
|
- // TODO: getting messed up on ctrl a
|
|
|
- input.addEventListener('keyup', function(e) {
|
|
|
- if (e.keyCode == 13 && _this.finishChangeFunction != null) {
|
|
|
- _this.finishChangeFunction.call(this, _this.getValue());
|
|
|
- }
|
|
|
- _this.setValue(input.value);
|
|
|
- }, false);
|
|
|
-
|
|
|
- input.addEventListener('blur', function() {
|
|
|
- if (_this.finishChangeFunction != null) {
|
|
|
- _this.finishChangeFunction.call(this, _this.getValue());
|
|
|
- }
|
|
|
- }, false);
|
|
|
-
|
|
|
- this.updateDisplay = function() {
|
|
|
- input.value = _this.getValue();
|
|
|
- };
|
|
|
-
|
|
|
- this.options = function() {
|
|
|
- _this.domElement.removeChild(input);
|
|
|
- return GUI.Controller.prototype.options.apply(this, arguments);
|
|
|
- };
|
|
|
-
|
|
|
- this.domElement.appendChild(input);
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-GUI.extendController(GUI.StringController);
|
Mr.doob