library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed loop issue. Now watched controllers don't set the value after updating.

Browse Source
This commit is contained in:
Mr.doob 2011-01-29 03:56:32 +00:00
parent fe172c75fb
commit a378d33bae
7 changed files with 167 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
controllers/controller.boolean.js
View File

@ -1,25 +1,26 @@
var BooleanController = function() {
this.type = "boolean";
Controller.apply(this, arguments);
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);
var that = this;
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
this.domElement.addEventListener('click', function(e) {
e.preventDefault();
input.checked = !input.checked;
that.value = input.checked;
that.setTargetValue(that.value);
}, 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);
};
BooleanController.prototype = new Controller();
BooleanController.prototype.constructor = BooleanController;
BooleanController.prototype.constructor = BooleanController;

16
controllers/controller.function.js
View File

@ -1,12 +1,12 @@
var FunctionController = function() {
this.type = "function";
var _this = this;
Controller.apply(this, arguments);
this.domElement.addEventListener('click', function() {
_this.object[_this.propertyName].call(_this.object);
}, false);
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
var that = this;
Controller.apply(this, arguments);
this.domElement.addEventListener('click', function() {
that.object[that.propertyName].call(that.object);
}, false);
this.domElement.style.cursor = "pointer";
this.propertyNameElement.style.cursor = "pointer";
};
FunctionController.prototype = new Controller();
FunctionController.prototype.constructor = FunctionController;
FunctionController.prototype.constructor = FunctionController;

23
controllers/controller.js
View File

@ -3,51 +3,52 @@ var Controller = function() {
var onChange = null;
this.parent = null;
this.value = null;
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
return this;
}
};
this.setWatched = function() {
this.parent.watchController(this);
return this;
}
};
this.getValue = function() {
this.getTargetValue = function() {
return this.object[this.propertyName];
}
};
this.setValue = function(n) {
this.setTargetValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
return this;
}
};
this.watchValue = function() {
this.watchTargetValue = function() {
this.updateValue(this.object[this.propertyName]);
}
};
this.onChange = function(fnc) {
onChange = fnc;
return this;
}
};
this.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on";
}
};
this.makeSelectable = function(elem) {
elem.onselectstart = function() { };
elem.style.MozUserSelect = "auto";
elem.style.KhtmlUserSelect = "auto";
elem.unselectable = "off";
}
};
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);

226
controllers/controller.number.js
View File

@ -2,124 +2,130 @@
var NumberController = function() {
this.type = "number";
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 = py = 0;
var min = arguments[2];
var max = arguments[3];
var step = arguments[4];
if (!step) {
step = min != undefined && max != undefined ? (max-min)*0.01: 1;
}
var numberField = document.createElement('input');
numberField.setAttribute('id', this.propertyName);
// Little up and down arrows are pissing me off.
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 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.updateValue(val);
} else {
this.value = _this.getValue();
}
}, false);
numberField.addEventListener('mousewheel', function(e) {
e.preventDefault();
this.updateValue(_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);
}, false);
document.addEventListener('mouseup', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
_this.makeSelectable(_this.parent.domElement);
_this.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) {
numberField.focus();
numberField.select();
}
draggedNumberField = false;
clickedNumberField = false;
}, false);
// Kinda nast
if (navigator.appVersion.indexOf('chrome') != -1) {
document.addEventListener('mouseout', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
}, false);
}
var dragNumberField = function(e) {
draggedNumberField = true;
Controller.apply(this, arguments);
var that = 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, clickedNumberField = false,
y = 0, py = 0;
var min = arguments[2], max = arguments[3], step = arguments[4];
if (!step) {
step = min != undefined && max != undefined ? (max-min)*0.01: 1;
}
var numberField = document.createElement('input');
numberField.setAttribute('id', this.propertyName);
this.value = this.getTargetValue();
// Little up and down arrows are pissing me off.
numberField.setAttribute('type', 'text');
numberField.setAttribute('value', this.value);
if (step) numberField.setAttribute('step', step);
this.domElement.appendChild(numberField);
var slider;
if (min != undefined && max != undefined) {
slider = new Slider(this, min, max, step, this.value);
this.domElement.appendChild(slider.domElement);
}
numberField.addEventListener('blur', function(e) {
var val = parseFloat(this.value);
if (!isNaN(val)) {
that.updateValue(val);
that.setTargetValue(that.value);
} else {
this.value = that.value;
}
}, false);
numberField.addEventListener('mousewheel', function(e) {
e.preventDefault();
that.updateValue(that.value + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
that.setTargetValue(that.value);
return false;
}, false);
numberField.addEventListener('mousedown', function(e) {
py = y = e.pageY;
clickedNumberField = true;
document.addEventListener('mousemove', dragNumberField, false);
}, false);
document.addEventListener('mouseup', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
that.makeSelectable(that.parent.domElement);
that.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) {
numberField.focus();
numberField.select();
}
draggedNumberField = false;
clickedNumberField = false;
}, false);
// Kinda nast
if (navigator.appVersion.indexOf('chrome') != -1) {
document.addEventListener('mouseout', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
}, 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 ...
// Or any other fields in this gui for that matter ...
// TODO: Make makeUselectable go through each element and child element.
_this.makeUnselectable(_this.parent.domElement);
_this.makeUnselectable(numberField);
that.makeUnselectable(that.parent.domElement);
that.makeUnselectable(numberField);
py = y;
y = e.pageY;
var dy = py - y;
var newVal = _this.getValue() + dy*step;
_this.updateValue(newVal);
that.updateValue(that.value + dy*step);
that.setTargetValue(that.value);
return false;
}
this.updateValue = function(val) {
}
this.updateValue = function(val) {
if (that.value != val) {
val = parseFloat(val);
if (min != undefined && val <= min) {
val = min;
} else if (max != undefined && val >= max) {
val = max;
}
that.value = val;
numberField.value = roundToDecimal(val, 4);
if (slider) slider.value = val;
}
}
var roundToDecimal = function(n, decimals) {
var t = Math.pow(10, decimals);
return Math.round(n*t)/t;
}
val = parseFloat(val);
if (min != undefined && val <= min) {
val = min;
} else if (max != undefined && val >= max) {
val = max;
}
_this.setValue(val);
numberField.value = roundToDecimal(_this.getValue(), 4);
if (slider) slider.value = _this.getValue();
}
var roundToDecimal = function(n, decimals) {
var t = Math.pow(10, decimals);
return Math.round(n*t)/t;
}
};
NumberController.prototype = new Controller();

15
controllers/controller.string.js
View File

@ -2,15 +2,14 @@ var StringController = function() {
this.type = "string";
var _this = this;
var that = this;
Controller.apply(this, arguments);
this.value = this.getTargetValue();
var input = document.createElement('input');
var initialValue = this.getValue();
input.setAttribute('value', initialValue);
input.setAttribute('value', this.value);
input.setAttribute('spellcheck', 'false');
this.domElement.addEventListener('mouseup', function() {
@ -19,13 +18,15 @@ var StringController = function() {
}, false);
input.addEventListener('keyup', function() {
_this.setValue(input.value);
that.updateValue(input.value);
that.setTargetValue(that.value);
}, false);
this.domElement.appendChild(input);
this.updateValue = function(val) {
input.setAttribute('value', val);
that.value = val;
input.setAttribute('value', that.value);
}
};

3
controllers/slider.js
View File

@ -49,6 +49,7 @@ var Slider = function(numberController, min, max, step, initValue) {
var val = map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
val = Math.round(val/step)*step;
numberController.updateValue(val);
numberController.setTargetValue(numberController.value);
}
this.domElement.addEventListener('mousedown', function(e) {
@ -70,4 +71,4 @@ var Slider = function(numberController, min, max, step, initValue) {
this.value = initValue;
}
}

2
gui.js
View File

@ -25,7 +25,7 @@ var GUI = function () {
// Controllers Watcher
setInterval( function() {
for (var c in controllersWatched) {
controllersWatched[c].watchValue();
controllersWatched[c].watchTargetValue();
}
}, 1000 / 60 );