From 9959a2416149bd04c95e5701313cb5a2be1cecad Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Mon, 18 Apr 2011 14:57:32 -0700 Subject: [PATCH] Number controllers not perfect, but dragging is infinitely more intuitive. --- index.html | 4 +++- src/DAT/ControllerNumber.js | 44 ++++++++++++++++++++++++++----------- src/DAT/Slider.js | 8 ++----- src/dat/gui.css | 17 +++++++------- src/dat/gui.js | 14 ++++++++++++ 5 files changed, 59 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index fd4f7a2..c6e9bb2 100644 --- a/index.html +++ b/index.html @@ -119,7 +119,9 @@

dat.gui is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.

diff --git a/src/DAT/ControllerNumber.js b/src/DAT/ControllerNumber.js index b737fe4..1bc61f6 100644 --- a/src/DAT/ControllerNumber.js +++ b/src/DAT/ControllerNumber.js @@ -12,6 +12,9 @@ DAT.GUI.ControllerNumber = function() { var clickedNumberField = false; + var draggingHorizontal = false; + var draggingVertical = false; + var y = 0, py = 0; var min = arguments[3]; @@ -45,8 +48,7 @@ DAT.GUI.ControllerNumber = function() { numberField.addEventListener('blur', function() { var val = parseFloat(this.value); if (slider) { - DAT.GUI.removeClass(slider.domElement, 'active'); - console.log(slider.domElement.className); + DAT.GUI.removeClass(_this.domElement, 'active'); } if (!isNaN(val)) { _this.setValue(val); @@ -64,7 +66,8 @@ DAT.GUI.ControllerNumber = function() { py = y = e.pageY; clickedNumberField = true; if (slider) { - DAT.GUI.addClass(slider.domElement, 'active'); + DAT.GUI.addClass(_this.domElement, 'active'); + console.log(_this.domElement.className); } document.addEventListener('mousemove', dragNumberField, false); document.addEventListener('mouseup', mouseup, false); @@ -91,7 +94,8 @@ DAT.GUI.ControllerNumber = function() { var mouseup = function(e) { document.removeEventListener('mousemove', dragNumberField, false); - DAT.GUI.makeSelectable(_this.parent.domElement); + + DAT.GUI.makeSelectable(numberField); if (clickedNumberField && !draggedNumberField) { numberField.focus(); numberField.select(); @@ -101,23 +105,37 @@ DAT.GUI.ControllerNumber = function() { if (_this.finishChangeFunction != null) { _this.finishChangeFunction.call(this, _this.getValue()); } + draggingHorizontal = false; + draggingVertical = false; 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. - - DAT.GUI.makeUnselectable(_this.parent.domElement); - py = y; y = e.pageY; var dy = py - y; + + + if (!draggingHorizontal && !draggingVertical) { + if (dy == 0) { + draggingHorizontal = true; + } else { + draggingVertical = true; + } + } + + if (draggingHorizontal) { + return true; + } + + DAT.GUI.makeUnselectable(_this.parent.domElement); + DAT.GUI.makeUnselectable(numberField); + + draggedNumberField = true; + e.preventDefault(); + + var newVal = _this.getValue() + dy * step; _this.setValue(newVal); return false; diff --git a/src/DAT/Slider.js b/src/DAT/Slider.js index fd8a51c..4c3ccba 100644 --- a/src/DAT/Slider.js +++ b/src/DAT/Slider.js @@ -25,17 +25,13 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) { this.domElement.addEventListener('mousedown', function(e) { clicked = true; x = px = e.pageX; - _this.domElement.className += ' active'; - _this.fg.className += ' active'; - numberController.domElement.className += ' active'; + DAT.GUI.addClass(numberController.domElement, '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', ''); + DAT.GUI.removeClass(numberController.domElement, 'active'); clicked = false; if (numberController.finishChangeFunction != null) { numberController.finishChangeFunction.call(this, numberController.getValue()); diff --git a/src/dat/gui.css b/src/dat/gui.css index 6fb6ad6..863780c 100644 --- a/src/dat/gui.css +++ b/src/dat/gui.css @@ -80,13 +80,14 @@ a.guidat-toggle:hover { float: right; } -.guidat-controller input:hover -.guidat-controller.number.active { +.guidat-controller input:hover { background-color: #444; } -.guidat-controller input:focus { +.guidat-controller input:focus, +.guidat-controller.active input { background-color: #555; + color: #fff; } .guidat-controller.number { @@ -139,13 +140,13 @@ a.guidat-toggle:hover { display: inline-block; } -.guidat-slider-bg:hover, -.guidat-slider-bg.active { +.guidat-controller .guidat-slider-bg:hover, +.guidat-controller.active .guidat-slider-bg { background-color: #444; } -.guidat-slider-bg:hover .guidat-slider-fg, -.guidat-slider-bg.active .guidat-slider-fg { +.guidat-controller .guidat-slider-bg .guidat-slider-fg:hover, +.guidat-controller.active .guidat-slider-bg .guidat-slider-fg { background-color: #52c8ff; } @@ -161,5 +162,5 @@ a.guidat-toggle:hover { .guidat-slider-fg { cursor: ew-resize; background-color: #00aeff; - height: 20px; + height: 21px; } diff --git a/src/dat/gui.js b/src/dat/gui.js index 9d388f3..4146b4b 100644 --- a/src/dat/gui.js +++ b/src/dat/gui.js @@ -605,20 +605,34 @@ DAT.GUI.showSaveString = function() { // Util functions DAT.GUI.makeUnselectable = function(elem) { + if (elem == undefined || elem.style == undefined) return; elem.onselectstart = function() { return false; }; elem.style.MozUserSelect = 'none'; elem.style.KhtmlUserSelect = 'none'; elem.unselectable = 'on'; + + var kids = elem.childNodes; + for (var i = 0; i < kids.length; i++) { + DAT.GUI.makeUnselectable(kids[i]); + } + }; DAT.GUI.makeSelectable = function(elem) { + if (elem == undefined || elem.style == undefined) return; elem.onselectstart = function() { }; elem.style.MozUserSelect = 'auto'; elem.style.KhtmlUserSelect = 'auto'; elem.unselectable = 'off'; + + var kids = elem.childNodes; + for (var i = 0; i < kids.length; i++) { + DAT.GUI.makeSelectable(kids[i]); + } + }; DAT.GUI.map = function(v, i1, i2, o1, o2) {