Made backwards scrubbing better, weird bug on last string point

controllers/controller.boolean.js

@@ -8,13 +8,14 @@ GUI.BooleanController = function() {
     input.setAttribute('type', 'checkbox');
     
     this.domElement.addEventListener('click', function(e) {
-    	input.checked = !input.checked;
+    //	input.checked = !input.checked;
-    	e.preventDefault();
+//    	e.preventDefault();
-    	_this.setValue(input.checked);
+//    	_this.setValue(input.checked);
     }, false);
     
     input.addEventListener('mouseup', function(e) {
-    	input.checked = !input.checked; // counteracts default.
+    	//input.checked = !input.checked; // counteracts default.
+    	_this.setValue(this.checked);
     }, false);
     
     this.domElement.style.cursor = "pointer";

controllers/scrubber.js

@@ -27,8 +27,9 @@ GUI.Scrubber = function(controller, timer) {
 		this.sort();
 	}
 	
-	this.controller.addChangeListener(function(newVal) {
+	var lastDown = 0;
 	
+	this.controller.addChangeListener(function(newVal) {
 	
 		if (!_this.playing) {
 			if (_this.timer.activePoint == null) {
@@ -39,6 +40,7 @@ GUI.Scrubber = function(controller, timer) {
 				_this.timer.activePoint.value = newVal;
 			}
 		}
+		
 	});
 
 	this.domElement = document.createElement('div');
@@ -101,20 +103,30 @@ GUI.Scrubber = function(controller, timer) {
 		onResize();
 	}, false);
 	
+	
+	var scrubPan = function() {
+		var t = _this.timer.playhead;
+		var tmin = _this.timer.windowMin + _this.timer.windowWidth/5;
+		var tmax = _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5;
+		
+		if (t < tmin) {
+			_this.timer.windowMin += GUI.map(t, _this.timer.windowMin, tmin, -_this.timer.windowWidth/50, 0);
+		}
+		
+		if (t > tmax) {
+			_this.timer.windowMin += 0;
+			
+			_this.timer.windowMin += GUI.map(t, tmax, _this.timer.windowMin+_this.timer.windowWidth, 0,_this.timer.windowWidth/50);
+		}
+		
+	}
 	var scrub = function(e) {
 		var t = GUI.map(e.pageX, position.left, position.left+width, _this.timer.windowMin, _this.timer.windowMin+_this.timer.windowWidth);
 
 		
 		_this.timer.playhead = t;
 		
-		/*
+		scrubPan();
-		if (t < _this.timer.windowMin + _this.timer.windowWidth/5) {
-			_this.timer.windowMin = _this.timer.playhead -_this.timer.windowWidth/5;
-		}
-		
-		if (t > _this.timer.windowMin + _this.timer.windowWidth - _this.timer.windowWidth/5) {
-			_this.timer.windowMin = _this.timer.playhead +_this.timer.windowWidth/5-_this.timer.windowWidth;
-		}*/
 		
 	}
 	
@@ -130,7 +142,16 @@ GUI.Scrubber = function(controller, timer) {
 	}
 	
 	canvas.addEventListener('mousedown', function(e) {
-		if (_this.timer.hoverPoint != null) {
+	
+		var thisDown = GUI.millis();
+	
+		if (thisDown - lastDown < 300) {
+
+			_this.timer.activePoint = new GUI.ScrubberPoint(_this, _this.timer.playhead, _this.controller.getValue());
+			_this.add(_this.timer.activePoint);
+			_this.render();
+				
+		} else if (_this.timer.hoverPoint != null ) {
 
 			_this.timer.activePoint = _this.timer.hoverPoint;
 			_this.timer.playhead = _this.timer.activePoint.time;
@@ -143,11 +164,14 @@ GUI.Scrubber = function(controller, timer) {
 			_this.timer.hoverPoint = null;
 			scrub(e);
 			document.body.style.cursor = "text";
+			_this.timer.pause();
 			document.addEventListener('mousemove', scrub, false);
 			_this.render();
 			
 		}
 		
+		lastDown = thisDown;
+		
 	}, false);
 	
 	canvas.addEventListener('mousemove', function(e) {
@@ -185,7 +209,8 @@ GUI.Scrubber = function(controller, timer) {
 		// This assumes a SORTED point array
 		// And a PROGRESSING/INCREASING/GROWING playhead
 		
-		if (_this.controller.type == "number") {
+		if (_this.controller.type == "number" || 
+			_this.controller.type == "string") {
 		
 			var closestToLeft = null;
 			for (var i = 0; i < _this.points.length; i++) {
@@ -196,7 +221,8 @@ GUI.Scrubber = function(controller, timer) {
 				}
 			}
 			
-			if (closestToLeft != null && closestToLeft.time <= curTime) {
+			if (closestToLeft != null && closestToLeft.time <= curTime &&
+			    _this.controller.type == "number") {
 				
 				var n = closestToLeft.next;
 				if (n != null) {
@@ -209,12 +235,20 @@ GUI.Scrubber = function(controller, timer) {
 					
 				}
 				
+			} else if (closestToLeft != null) { 
+				_this.controller.setValue(closestToLeft.value);
+			
 			}
 				
+			
 		} else { 
 			
 			for (var i = 0; i < _this.points.length; i++) {
+				
+				
 					var cur = _this.points[i];
+				if (prevTime < curTime) {
+				
 					
 					if (cur.time < prevTime) {
 						continue;
@@ -228,6 +262,8 @@ GUI.Scrubber = function(controller, timer) {
 						
 			}	
 		
+		}
+		
 		_this.playing = false;
 		
 	};

controllers/slider.js

@@ -25,8 +25,7 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
 	var onDrag = function(e) {
 		if (!clicked) return;
 		var pos = GUI.getOffset(_this.domElement);
-		console.log(pos.left + " " + pos.top);
+		var val = GUI.map(e.pageX, pos.left, pos.left + _this.domElement.offsetWidth, min, max);
-		var val = GUI.map(e.pageX, pos.left, pos.top + _this.domElement.offsetWidth, min, max);
 		val = Math.round(val/step)*step;
 		numberController.setValue(val);
 	}

controllers/timer.js

@@ -1,3 +1,8 @@
+GUI.millis = function() {
+	var d = new Date();
+	return d.getTime();
+}
+	
 GUI.Timer = function(gui) {
 	
 	var _this = this;
@@ -13,8 +18,8 @@ GUI.Timer = function(gui) {
 	var playListeners = [];
 	var windowListeners = [];
 	
-	var windowMin = 0;
 	var windowWidth = 10000;
+	var windowMin = -windowWidth/4;
 	
 	var thisTime;
 	var lastTime;
@@ -24,11 +29,6 @@ GUI.Timer = function(gui) {
 	
 	var playing = false;
 	
-	var millis = function() {
-		var d = new Date();
-		return d.getTime();
-	}
-	
 	window.addEventListener("keyup", function(e) {
 		switch (e.keyCode) {
 			case 32:
@@ -91,14 +91,14 @@ GUI.Timer = function(gui) {
 	
 	this.play = function() {
 		playing = true;
-		lastTime = millis();
+		lastTime = GUI.millis();
 		if (playInterval == -1) {
 			playInterval = setInterval(this.update, playResolution);
 		}
 	};
 	
 	this.update = function() {
-		thisTime = millis();
+		thisTime = GUI.millis();
 		_this.playhead = _this.playhead + (thisTime - lastTime);
 		lastTime = thisTime;
 	};
@@ -120,7 +120,7 @@ GUI.Timer = function(gui) {
 	this.stop = function() {
 		this.pause();
 		this.playhead = 0;
-		this.windowMin = 0;	
+		this.windowMin = -windowWidth/4;
 	};
 	
 	this.addPlayListener = function(fnc) {

index.html

@@ -44,7 +44,7 @@
 
                         // Text field
                         gui.add(fizzyText, "message")
-                           .at(-1000, "gui-dat")
+                           .at(1, "gui-dat")
                            .at(1000, "is")
                            .at(2000, "getting")
                            .at(3000, "pretty")