Fix keyframe values inserted between tween

src/layer_cabinet.js

@@ -230,9 +230,6 @@ function LayerCabinet(layers, dispatcher) {
 	// var eye_close = new IconButton(16, 'eye_close', 'eye_close', dispatcher);
 	// operations_div.appendChild(eye_close.dom);
 
-	// add layer
-	var plus = new IconButton(16, 'plus', 'plus', dispatcher);
-	operations_div.appendChild(plus.dom);
 
 	// remove layer
 	var minus = new IconButton(16, 'minus', 'minus', dispatcher);

src/timeliner.js

@@ -131,7 +131,7 @@ function Timeliner(target) {
 	});
 
 	// dispatcher.fire('value.change', layer, me.value);
-	dispatcher.on('value.change', function(layer, value) {
+	dispatcher.on('value.change', function(layer, value, dont_save) {
 		var t = timeline.current_frame;
 
 		var v = utils.findTimeinLayer(layer, t);
@@ -143,12 +143,13 @@ function Timeliner(target) {
 				value: value,
 				_color: '#' + (Math.random() * 0xffffff | 0).toString(16)
 			});
-			undo_manager.save(new UndoState(data, 'Add value'));
+			if (!dont_save) undo_manager.save(new UndoState(data, 'Add value'));
 		} else {
 			v.object.value = value;
-			undo_manager.save(new UndoState(data, 'Update value'));
+			if (!dont_save) undo_manager.save(new UndoState(data, 'Update value'));
 		}
 
+		// 
 		layer_panel.repaint(t);
 		timeline.repaint();
 	});
@@ -524,6 +525,18 @@ function Timeliner(target) {
 	// bottom_right.appendChild(zoom_out.dom);
 	// bottom_right.appendChild(cog.dom);
 
+	// add layer
+	var plus = new IconButton(12, 'plus', 'plus', dispatcher);
+	plus.onClick(function() {
+		var name = prompt('Layer name?');
+		addLayer(name);
+
+		layer_panel.repaint();
+		timeline.repaint();
+	});
+	bottom_right.appendChild(plus.dom);
+
+
 	// trash
 	var trash = new IconButton(12, 'trash', 'trash', dispatcher);
 	trash.onClick(function() {
@@ -652,20 +665,22 @@ function Timeliner(target) {
 		timeline = t;
 	};
 
-	function getValueRanges(prop) {
+	function getValueRanges(ranges, interval) {
+		interval = interval ? interval : 0.15;
+		ranges = ranges ? ranges : 2;
+
 		// not optimized!
 		var t = timeline.current_frame;
 
 		var values = [];
 
-		for (var u = -2; u <= 2; u++) {
+		for (var u = -ranges; u <= ranges; u++) {
 			// if (u == 0) continue;
 			var o = {};
 
 			for (var l = 0; l < layers.length; l++) {
 				var layer = layers[l];		
-				var m = utils.timeAtLayer(layer, t + u * 0.15);
-				// 0.05, 0.1, 0.2
+				var m = utils.timeAtLayer(layer, t + u * interval);
 				o[layer.name] = m.value;
 			}
 

src/ui/layer_view.js

@@ -34,8 +34,8 @@ function LayerView(layer, dispatcher) {
 	keyframe_button.style.cssText = 'background: none; font-size: 12px; padding: 0px; font-family: monospace; float: right; width: 20px; border-style:none; outline: none;'; //  border-style:inset;
 
 	keyframe_button.addEventListener('click', function(e) {
-		console.log('keyframing...');
-		dispatcher.fire('keyframe', layer, value.value);
+		console.log('clicked:keyframing...', value.getValue());
+		dispatcher.fire('keyframe', layer, value.getValue());
 	});
 
 	/*

src/ui/number.js

@@ -12,7 +12,7 @@ function NumberUI(layer, dispatcher) {
 
 	var me = this;
 
-	me.value = span.value = layer.tmpValue;
+	span.value = layer.tmpValue;
 
 	this.setState = function(l) {
 		layer = l;
@@ -23,15 +23,15 @@ function NumberUI(layer, dispatcher) {
 		fireChange();
 	});
 
-	this.value = layer.tmpValue;
-
-	var startx, starty, moved;
+	var startx, starty, moved, unchanged_value;
 
 	span.addEventListener('mousedown', function(e) {
 		e.preventDefault();
 		startx = e.clientX;
 		starty = e.clientY;
 		moved = false;
+		unchanged_value = me.getValue();
+		console.log(unchanged_value);
 
 		// 
 		document.addEventListener('mousemove', onMouseMove);
@@ -68,9 +68,13 @@ function NumberUI(layer, dispatcher) {
 		// console.log(e.clientX, e.clientY);
 		var dx = e.clientX - startx;
 		var dy = e.clientY - starty;
-		span.value = me.value + dx * 0.000001 + dy * -10 * 0.01;
-		dispatcher.fire('target.notify', layer.name, span.value);
+
+		var v = unchanged_value + dx * 0.000001 + dy * -10 * 0.01;
 
+		dispatcher.fire('target.notify', layer.name, v);
+		dispatcher.fire('value.change', layer, v, true);
+
+		// span.value = v;
 		moved = true;
 	}
 
@@ -86,16 +90,27 @@ function NumberUI(layer, dispatcher) {
 	}
 
 	function fireChange() {
-		layer.tmpValue = me.value = parseFloat(span.value, 10);
-		dispatcher.fire('value.change', layer, me.value);
-		dispatcher.fire('target.notify', layer.name, me.value);
+		var v = parseFloat(span.value, 10);
+		layer.tmpValue = v;
+		dispatcher.fire('value.change', layer, v);
+		dispatcher.fire('target.notify', layer.name, v);
 	}
 
 	this.dom = span;
 
+	// public
 	this.setValue = function(e) {
 		span.value = e;
+		// layer.tmpValue = e;
 	};
+
+	this.getValue = function() {
+		// return me.value;
+		return parseFloat(span.value, 10);
+		// return layer.tmpValue;
+	};
+
 }
 
+
 module.exports = NumberUI;

src/utils.js

@@ -124,7 +124,7 @@ function format_friendly_seconds(s, type) {
 	return str;	
 }
 
-
+// get object at time
 function findTimeinLayer(layer, time) {
 	var values = layer.values;
 	var i, il;

test_ghosts.html

@@ -15,7 +15,7 @@
 	width: 50px;
 	height: 50px;
 	background: red;
-	opacity: 0.2;
+	opacity: 0.1;
 }
 
 body {
@@ -25,13 +25,7 @@
 
 </style>
 
-<!-- <div id="ghost-3" class="ghost"></div> -->
-<div id="ghost_2" class="ghost"></div>
-<div id="ghost_1" class="ghost"></div>
 <div id="box"></div>
-<div id="ghost1" class="ghost"></div>
-<div id="ghost2" class="ghost"></div>
-<!-- <div id="ghost3" class="ghost"></div> -->
 
 
 <script src="timeliner.js"></script>
@@ -63,7 +57,20 @@
 	element.style.transform = 'translateX(' +  (target.x * 100 + w2) + 'px) translateY(' + (target.y * 100 + h2) + 'px) rotate(' + target.rotate * 50 + 'deg)';	
 } 
 
+var GHOSTS = 4;
+var ghosts = [];
 
+function init() {
+	for (var i = -GHOSTS; i <= GHOSTS; i++) {
+		var div = document.createElement('div');
+		div.className = 'ghost';
+		ghosts.push(div);
+		document.body.appendChild(div);
+	}	
+
+}
+
+init();
 
 
 function animate() {
@@ -89,12 +96,11 @@
 	}
 	*/
 
-	var ranges = timeliner.getValues();
-	style(ghost_2, ranges[0]);
-	style(ghost_1, ranges[1]);
-	// 
-	style(ghost1, ranges[3]);
-	style(ghost2, ranges[4]);
+	var ranges = timeliner.getValues(GHOSTS, 0.15);
+
+	for (var i = 0; i < ranges.length; i++) {
+		style(ghosts[i], ranges[i]);
+	}
 
 
 }