mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Fixed loop issue. Now watched controllers don't set the value after updating.
This commit is contained in:
parent
46b5d1ff24
commit
d47e5662d8
@ -1,24 +1,25 @@
|
||||
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');
|
||||
var that = 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);
|
||||
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);
|
||||
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.domElement.style.cursor = "pointer";
|
||||
this.propertyNameElement.style.cursor = "pointer";
|
||||
this.domElement.appendChild(input);
|
||||
|
||||
};
|
||||
BooleanController.prototype = new Controller();
|
||||
|
@ -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;
|
@ -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);
|
||||
|
@ -3,122 +3,128 @@ var NumberController = function() {
|
||||
|
||||
this.type = "number";
|
||||
|
||||
Controller.apply(this, arguments);
|
||||
Controller.apply(this, arguments);
|
||||
|
||||
var _this = this;
|
||||
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;
|
||||
// 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 clickedNumberField = false;
|
||||
var min = arguments[2], max = arguments[3], step = arguments[4];
|
||||
|
||||
var y = py = 0;
|
||||
if (!step) {
|
||||
step = min != undefined && max != undefined ? (max-min)*0.01: 1;
|
||||
}
|
||||
|
||||
var min = arguments[2];
|
||||
var max = arguments[3];
|
||||
var step = arguments[4];
|
||||
var numberField = document.createElement('input');
|
||||
numberField.setAttribute('id', this.propertyName);
|
||||
|
||||
if (!step) {
|
||||
step = min != undefined && max != undefined ? (max-min)*0.01: 1;
|
||||
}
|
||||
this.value = this.getTargetValue();
|
||||
|
||||
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.value);
|
||||
|
||||
// Little up and down arrows are pissing me off.
|
||||
numberField.setAttribute('type', 'text');
|
||||
numberField.setAttribute('value', this.getValue());
|
||||
if (step) numberField.setAttribute('step', step);
|
||||
|
||||
if (step) numberField.setAttribute('step', step);
|
||||
this.domElement.appendChild(numberField);
|
||||
|
||||
this.domElement.appendChild(numberField);
|
||||
var slider;
|
||||
|
||||
var slider;
|
||||
if (min != undefined && max != undefined) {
|
||||
slider = new Slider(this, min, max, step, this.value);
|
||||
this.domElement.appendChild(slider.domElement);
|
||||
}
|
||||
|
||||
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)) {
|
||||
that.updateValue(val);
|
||||
that.setTargetValue(that.value);
|
||||
} else {
|
||||
this.value = that.value;
|
||||
}
|
||||
}, false);
|
||||
|
||||
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();
|
||||
that.updateValue(that.value + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
|
||||
that.setTargetValue(that.value);
|
||||
return false;
|
||||
}, 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;
|
||||
numberField.addEventListener('mousedown', function(e) {
|
||||
py = y = e.pageY;
|
||||
clickedNumberField = true;
|
||||
document.addEventListener('mousemove', dragNumberField, false);
|
||||
}, false);
|
||||
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);
|
||||
document.addEventListener('mouseup', function(e) {
|
||||
document.removeEventListener('mousemove', dragNumberField, false);
|
||||
that.makeSelectable(that.parent.domElement);
|
||||
that.makeSelectable(numberField);
|
||||
|
||||
// Kinda nast
|
||||
if (navigator.appVersion.indexOf('chrome') != -1) {
|
||||
document.addEventListener('mouseout', function(e) {
|
||||
document.removeEventListener('mousemove', dragNumberField, false);
|
||||
}, false);
|
||||
}
|
||||
if (clickedNumberField && !draggedNumberField) {
|
||||
numberField.focus();
|
||||
numberField.select();
|
||||
}
|
||||
|
||||
var dragNumberField = function(e) {
|
||||
draggedNumberField = true;
|
||||
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 ...
|
||||
// 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) {
|
||||
|
||||
val = parseFloat(val);
|
||||
if (that.value != val) {
|
||||
|
||||
if (min != undefined && val <= min) {
|
||||
val = min;
|
||||
} else if (max != undefined && val >= max) {
|
||||
val = max;
|
||||
}
|
||||
val = parseFloat(val);
|
||||
|
||||
_this.setValue(val);
|
||||
if (min != undefined && val <= min) {
|
||||
val = min;
|
||||
} else if (max != undefined && val >= max) {
|
||||
val = max;
|
||||
}
|
||||
|
||||
numberField.value = roundToDecimal(_this.getValue(), 4);
|
||||
if (slider) slider.value = _this.getValue();
|
||||
}
|
||||
that.value = val;
|
||||
|
||||
var roundToDecimal = function(n, decimals) {
|
||||
var t = Math.pow(10, decimals);
|
||||
return Math.round(n*t)/t;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
};
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user