From fd300fb9ea25e18a6d18f4e0fa6d87fabbcd4fcd Mon Sep 17 00:00:00 2001
From: George Michael Brower <georgebrower@google.com>
Date: Mon, 14 Feb 2011 16:04:20 -0500
Subject: [PATCH] Improved rendering on number curves

---
 index.html       |  5 ++--
 time/scrubber.js | 61 +++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 9394aaf..0c5cddc 100644
--- a/index.html
+++ b/index.html
@@ -23,8 +23,7 @@
 	//<![CDATA[
 				var timer;
                 window.onload = function() {
-                GUI.loadJSON({"guis":[{"open":true,"width":280,"openHeight":319,"scroll":1,"values":["time",1.35,8.5602,0.2792,0.0871,46.3269,false,null,0,null],"timer":{"windowMin":8617.568021757952,"windowWidth":11596,"playhead":10000,"snapIncrement":250,"useSnap":true,"scrubbers":[{"points":[{"value":"gui-dat","time":-3250},{"value":"over","time":5500},{"value":"time","time":9750}]},{"points":[{"value":1.3499999999999999,"time":644.1387},{"value":1.3499999999999999,"time":9750,"tween":"CircularEaseIn"}]},{"points":[{"value":0,"time":-2750,"tween":"SinusoidalEaseInOut"},{"value":7,"time":659.1556},{"value":7,"time":2211.2348},{"value":5.525,"time":5500},{"value":8.955,"time":6413.8663},{"value":8.339963195382083,"time":12000,"tween":"SinusoidalEaseInOut"},{"value":0,"time":16500}]},{"points":[{"value":0.5049,"time":-532.8902,"tween":"Hold"},{"value":0.5544,"time":1666.4321},{"value":0.01,"time":3382.0743,"tween":"Hold"},{"value":0.9900000000000001,"time":5500},{"value":0.18810000000000002,"time":9500,"tween":"Hold"},{"value":0.3069,"time":9750},{"value":0.1683,"time":11000},{"value":0.0495,"time":11750}]},{"points":[{"value":0.39899999999999997,"time":1652.5592,"tween":"SinusoidalEaseInOut"},{"value":7.6000000000000005,"time":3471.5432,"tween":"Hold"},{"value":0.8,"time":5500},{"value":1.3,"time":6000},{"value":0.1,"time":9750},{"value":0.01,"time":11500,"tween":"SinusoidalEaseInOut"},{"value":1.9000000000000001,"time":15250}]},{"points":[{"value":10,"time":795.5192,"tween":"Hold"},{"value":10,"time":5500},{"value":75,"time":5500,"tween":"CircularEaseOut"},{"value":45,"time":9750}]},{"points":[]},{"points":[{"time":9750}]},{"points":[{"value":0,"time":250,"tween":"Hold"}]},{"points":[{"time":18250}]}]}},{"open":true,"width":280,"openHeight":127,"scroll":0,"values":[null,true,250,null]}]});
-                
+                GUI.loadJSON({"guis":[{"open":true,"width":280,"openHeight":319,"scroll":0,"values":["gui-dat",1.35,7,0.5425,0.4132,10,false,null,0,null],"timer":{"windowMin":-4225.189783755155,"windowWidth":11596,"playhead":1704,"snapIncrement":250,"useSnap":true,"scrubbers":[{"points":[{"value":"gui-dat","time":-3250},{"value":"over","time":5500},{"value":"time","time":9750}]},{"points":[{"value":1.3499999999999999,"time":644.1387},{"value":1.3499999999999999,"time":9750,"tween":"CircularEaseIn"}]},{"points":[{"value":0,"time":-2750,"tween":"SinusoidalEaseInOut"},{"value":7,"time":659.1556},{"value":7,"time":2211.2348},{"value":5.525,"time":5500},{"value":8.955,"time":6413.8663},{"value":8.339963195382083,"time":12000,"tween":"SinusoidalEaseInOut"},{"value":0,"time":16500}]},{"points":[{"value":0.5049,"time":-532.8902,"tween":"Hold"},{"value":0.5544,"time":1666.4321},{"value":0.01,"time":3382.0743,"tween":"Hold"},{"value":0.9900000000000001,"time":5500},{"value":0.18810000000000002,"time":9500,"tween":"Hold"},{"value":0.3069,"time":9750},{"value":0.1683,"time":11000},{"value":0.0495,"time":11750}]},{"points":[{"value":0.39899999999999997,"time":1652.5592,"tween":"SinusoidalEaseInOut"},{"value":7.6000000000000005,"time":3471.5432,"tween":"Hold"},{"value":0.8,"time":5500},{"value":1.3,"time":6000},{"value":0.1,"time":9750},{"value":0.01,"time":11500,"tween":"SinusoidalEaseInOut"},{"value":1.9000000000000001,"time":15250}]},{"points":[{"value":10,"time":795.5192,"tween":"Hold"},{"value":10,"time":5500},{"value":75,"time":5500,"tween":"CircularEaseOut"},{"value":45,"time":9750}]},{"points":[]},{"points":[{"time":9750}]},{"points":[{"value":0,"time":250,"tween":"Hold"}]},{"points":[{"time":18250}]}]}},{"open":true,"width":280,"openHeight":127,"scroll":0,"values":[null,true,250,null]}]});
                         var fizzyText = new FizzyText("gui-dat");
 					
                         var gui = new GUI();
@@ -75,7 +74,7 @@
 						
 						gui.add(thing, 'loop');
 
-GUI.hide();
+						//GUI.hide();
 						timer.playhead = 0;
 						timer.play();
 						
diff --git a/time/scrubber.js b/time/scrubber.js
index 926ade1..a801974 100644
--- a/time/scrubber.js
+++ b/time/scrubber.js
@@ -443,8 +443,14 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 		if (type == 'number') {
 		
 			timer.showTweenSelector();
-			timer.tweenSelector.value = 'al';
 			positionTweenSelector();
+			var tweenName;
+			for (var i in GUI.Easing) {
+				if (this.tween == GUI.Easing[i]) {
+					tweenName = i;
+				}
+			}
+			timer.tweenSelector.value = tweenName;
 		
 		}
 		
@@ -510,6 +516,20 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 		
 	});
 	
+	this.__defineGetter__('prev', function() {	
+		if (scrubber.points.length <= 1) {
+			return null;
+		}
+		
+		var i = scrubber.points.indexOf(this);
+		if (i - 1 < 0) {
+			return null;
+		}
+		
+		return scrubber.points[i-1];
+		
+	});
+	
 	this.__defineGetter__('time', function() {
 		return time;
 	});
@@ -581,28 +601,57 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
 			case 'number':
 			
 				g.save();
+				
+				var p = this.prev;
+				
+				g.lineWidth = 3;
+				g.strokeStyle='#222';
+
+				if (p != null && p.time < timer.windowMin) {
+				console.log(p.time, timer.windowMin);					
+					var t = GUI.map(timer.windowMin, p.time, this.time, 0, 1);
+					var yy = GUI.map(p.tween(t), 0, 1, p.y, y);
+					
+					g.beginPath();
+					g.moveTo(0, yy);
+					
+					if (p.tween == GUI.Easing.Linear) {
+
+						g.lineTo(x, y);	
+
+					} else { 
+					
+						for (var i = t; i < 1; i+=0.01) {
+							var tx = GUI.map(i, 0, 1, p.x, x);
+							var ty = p.tween(i);
+							ty = GUI.map(ty, 0, 1, p.y, y);
+							g.lineTo(tx, ty);
+						}
+						
+					}
+					
+					g.stroke();
+					
+				}
+				
 				var n = this.next;
 				
 				if (n != null) {
 					
-					g.lineWidth = 2;
-					g.strokeStyle='#222';
 					g.beginPath();
 					
 					g.moveTo(x, y);
 						
-					// TODO: Lines from points that may be outside of the window's scope.
+
 					if (_this.tween == GUI.Easing.Linear) {
 						g.lineTo(n.x, n.y);
 					} else { 
-						
 						for (var i = 0; i < 1; i+=0.01) {
 							var tx = GUI.map(i, 0, 1, x, n.x);
 							var ty = _this.tween(i);
 							ty = GUI.map(ty, 0, 1, y, n.y);
 							g.lineTo(tx, ty);
 						}
-						
 					}
 					
 					g.stroke();