mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-10-10 06:54:18 +00:00
624 lines
14 KiB
JavaScript
624 lines
14 KiB
JavaScript
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);
|
|
|
|
};
|
|
|
|
// Static members
|
|
|
|
GUI.autoPlace = true;
|
|
GUI.autoPlaceContainer = null;
|
|
GUI.allControllers = [];
|
|
GUI.allGuis = [];
|
|
|
|
GUI.saveURL = function() {
|
|
title = window.location;
|
|
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 = [];
|
|
|
|
vals.push(GUI.allGuis.length);
|
|
vals.push(document.body.scrollTop);
|
|
|
|
|
|
for (var i in GUI.allGuis) {
|
|
var av = GUI.allGuis[i].appearanceVars();
|
|
for (var j = 0; j < av.length; j++) {
|
|
vals.push(av[j]);
|
|
}
|
|
}
|
|
|
|
for (var 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) {
|
|
var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
|
return v;
|
|
}
|
|
|
|
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')); |