From a378d33baeb2e78e77ed03e40c165d9fe29d2368 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Sat, 29 Jan 2011 03:56:32 +0000 Subject: [PATCH] Fixed loop issue. Now watched controllers don't set the value after updating. --- controllers/controller.boolean.js | 39 ++--- controllers/controller.function.js | 16 +- controllers/controller.js | 23 +-- controllers/controller.number.js | 226 +++++++++++++++-------------- controllers/controller.string.js | 15 +- controllers/slider.js | 3 +- gui.js | 2 +- 7 files changed, 167 insertions(+), 157 deletions(-) diff --git a/controllers/controller.boolean.js b/controllers/controller.boolean.js index 3acc78f..2287f19 100644 --- a/controllers/controller.boolean.js +++ b/controllers/controller.boolean.js @@ -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; \ No newline at end of file +BooleanController.prototype.constructor = BooleanController; diff --git a/controllers/controller.function.js b/controllers/controller.function.js index d523562..c95c5ec 100644 --- a/controllers/controller.function.js +++ b/controllers/controller.function.js @@ -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; \ No newline at end of file +FunctionController.prototype.constructor = FunctionController; diff --git a/controllers/controller.js b/controllers/controller.js index ab9ae44..80253dc 100644 --- a/controllers/controller.js +++ b/controllers/controller.js @@ -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); diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 0907c1c..30f2856 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -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(); diff --git a/controllers/controller.string.js b/controllers/controller.string.js index 835ba39..789d074 100644 --- a/controllers/controller.string.js +++ b/controllers/controller.string.js @@ -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); } }; diff --git a/controllers/slider.js b/controllers/slider.js index a45ea1a..55db279 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -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; -} \ No newline at end of file +} diff --git a/gui.js b/gui.js index c9f1e8c..0bfc4a9 100644 --- a/gui.js +++ b/gui.js @@ -25,7 +25,7 @@ var GUI = function () { // Controllers Watcher setInterval( function() { for (var c in controllersWatched) { - controllersWatched[c].watchValue(); + controllersWatched[c].watchTargetValue(); } }, 1000 / 60 );