Timeline: Bug Fixes

- Splitting tweens now works again for shift-click interaction - Fixed visual "jump" in keyframes and spans when splitting tweens - Set default easing to "none" to match CSS standard.
author: Jon Reid 2012-06-18 16:12:49 -0700
committer: Jon Reid 2012-06-18 16:12:49 -0700
commit: 730389f72b1f2949e74b4ce8f8625bfd8bc4fa39 (patch)
tree: 5613be2e03a88cf76d80602b4210801a107fa895 /js
parent: b51c9448bc187f9bfa3ab39c366657ec2bb9e2fb (diff)
download: ninja-730389f72b1f2949e74b4ce8f8625bfd8bc4fa39.tar.gz
4 files changed, 115 insertions, 13 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
index 82218b45..1c8f808f 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -23,8 +23,9 @@
        <body>
                <div data-montage-id="container-easing-menu" class="container-easing-choices">
                        <ul data-montage-id="easing_choices" class="easing-choices">
+                                <li data-ninja-ease="none">none</li>
                                <li data-ninja-ease="ease">ease</li>
-                                <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
+                                <li data-ninja-ease="ease-out">ease-out</li>
                                <li data-ninja-ease="ease-in">ease-in</li>
                                <li data-ninja-ease="ease-in-out">ease-in-out</li>
                                <li data-ninja-ease="linear">linear</li>
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index f0547e31..ced3ae6a 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
    
    // currentChoice: The data attribute of the current choice
    _currentChoice: {
-        value: null
+        value: "none"
    },
    currentChoice: {
        get: function() {
@@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
    draw: {
        value: function() {
                // Update the selection classes.
-            this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+                        var easingSelected = this.element.querySelector(".easing-selected");
-            this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
+                        if (easingSelected !== null) {
+                                easingSelected.classList.remove("easing-selected");
+                        }
+            var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
+            if (dataEl !== null) {
+                dataEl.classList.add("easing-selected");
+            }
        }
    },
    didDraw: {
@@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
                event.stopPropagation();
                        // Un-highlight the old choice and highlight the new choice
-                this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+                        var easingSelected = this.element.querySelector(".easing-selected");
+                        if (easingSelected !== null) {
+                                easingSelected.classList.remove("easing-selected");
+                        }
                event.target.classList.add("easing-selected");
                
                // Set the easing in the span that called us
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3db57a3a..74dd1ca1 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                    if (ev.target.className === "tracklane") {
                        this.handleNewTween(ev);
                        this.updateKeyframeRule();
-                    } else if (ev.target.className === "tween_span" && ev.target.parentElement.parentElement.className === "tracklane") {
+                    } else if (ev.target.className === "tween_span_bar" && ev.target.parentElement.parentElement.parentElement.className === "tracklane") {
                        this.handleNewTween(ev);
                        this.updateKeyframeRule();
                    }
@@ -703,6 +703,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                this.addAnimationRuleToElement(ev);
                this.updateKeyframeRule();
            } else {
+                
+                
                this.handleNewTween(ev);
                this.updateKeyframeRule();
            }
@@ -716,7 +718,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                this.application.ninja.timeline.selectLayer(selectedIndex, false);
                this.insertTween(ev.offsetX);
            } else {
-                this.splitTween(ev);
+                // We will be splitting a tween.  Get the x-coordinate of the mouse click within the target element.
+                // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
+                // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
+                                var findXOffset = function(obj) {
+                                        var curleft = 0;
+                                        if (obj.offsetParent) {
+                                                do {
+                                                                curleft += (obj.offsetLeft-obj.scrollLeft);
+                                        
+                                                        } while (obj = obj.offsetParent);
+                                        }
+                                        return curleft;
+                                }
+                                var targetElementOffset = findXOffset(ev.currentTarget),
+                                        position = event.pageX - targetElementOffset;
+                this.splitTweenAt(position-18);
            }
        }
    },
@@ -771,10 +790,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
    splitTween:{
        value:function (ev) {
-            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
+            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX,
-            var i;
+                i,
-            var tweensLength = this.tweens.length-1;
+                tweensLength = this.tweens.length-1,
-            var prevTween, nextTween, splitTweenIndex;
+                prevTween, nextTween, splitTweenIndex;
+            
+            consol.log(ev.target.className)
            for(i=0; i<tweensLength; i++){
                prevTween = this.tweens[i].tweenData.keyFramePosition;
                nextTween = this.tweens[i+1].tweenData.keyFramePosition;
@@ -810,6 +831,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        }
    },
+        // splitTweenAt: Split a tween at a particular position (x coordinate)
+    splitTweenAt: {
+        value:function (position) {
+            var i, j, nextComponentIndex,
+                tweensLength = this.tweens.length-1,
+                prevTween, 
+                nextTween, 
+                splitTweenIndex;
+                        // Search through the tweens and find the pair whose keyframes bracket position.
+            for(i=0; i<tweensLength; i++){
+                prevTween = this.tweens[i].tweenData.keyFramePosition;
+                nextTween = this.tweens[i+1].tweenData.keyFramePosition;
+                if(position > prevTween && position < nextTween) {
+                        
+                        // We will insert a new tween at this index
+                    splitTweenIndex = i+1;
+                                        // Update the next tween to have new span position and width.
+                    this.tweens[i+1].tweenData.spanPosition = position;
+                    this.tweens[i+1].spanPosition = position;
+                    this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - position;
+                    this.tweens[i+1].spanWidth = this.tweens[i+1].keyFramePosition - position;
+                    
+                    // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you?
+                    // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes.
+                    // So we have to get the index of the actual componentin the repetition, which may not match our iteration index.
+                    for (j = 0; j < tweensLength +1; j++) {
+                        if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) {
+                                nextComponentIndex = j;
+                        }
+                    }
+                    this.tweenRepetition.childComponents[nextComponentIndex].setData();
+                                        // Create the new tween and splice it into the model
+                    var newTweenToInsert = {};
+                    newTweenToInsert.tweenData = {};
+                    newTweenToInsert.tweenData.spanWidth = position - prevTween;
+                    newTweenToInsert.tweenData.keyFramePosition = position;
+                    newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position;
+                    newTweenToInsert.tweenData.tweenID = this.tweens.length;
+                    newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth;
+                    newTweenToInsert.tweenData.tweenedProperties = [];
+                    newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
+                    newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
+                    newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
+                    newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
+                    this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
+                    
+                    // We are done, so end the loop.
+                    i = tweensLength;
+                }
+            }
+
author	Jon Reid	2012-06-18 16:12:49 -0700
committer	Jon Reid	2012-06-18 16:12:49 -0700
commit	730389f72b1f2949e74b4ce8f8625bfd8bc4fa39 (patch)
tree	5613be2e03a88cf76d80602b4210801a107fa895 /js
parent	b51c9448bc187f9bfa3ab39c366657ec2bb9e2fb (diff)
download	ninja-730389f72b1f2949e74b4ce8f8625bfd8bc4fa39.tar.gz

diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html index 82218b45..1c8f808f 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -23,8 +23,9 @@
23	<body>	23	<body>
24	<div data-montage-id="container-easing-menu" class="container-easing-choices">	24	<div data-montage-id="container-easing-menu" class="container-easing-choices">
25	<ul data-montage-id="easing_choices" class="easing-choices">	25	<ul data-montage-id="easing_choices" class="easing-choices">
		26	<li data-ninja-ease="none">none</li>
26	<li data-ninja-ease="ease">ease</li>	27	<li data-ninja-ease="ease">ease</li>
27	<li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>	28	<li data-ninja-ease="ease-out">ease-out</li>
28	<li data-ninja-ease="ease-in">ease-in</li>	29	<li data-ninja-ease="ease-in">ease-in</li>
29	<li data-ninja-ease="ease-in-out">ease-in-out</li>	30	<li data-ninja-ease="ease-in-out">ease-in-out</li>
30	<li data-ninja-ease="linear">linear</li>	31	<li data-ninja-ease="linear">linear</li>


diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js index f0547e31..ced3ae6a 100644 --- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js +++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
81		81
82	// currentChoice: The data attribute of the current choice	82	// currentChoice: The data attribute of the current choice
83	_currentChoice: {	83	_currentChoice: {
84	value: null	84	value: "none"
85	},	85	},
86	currentChoice: {	86	currentChoice: {
87	get: function() {	87	get: function() {
@@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
109	draw: {	109	draw: {
110	value: function() {	110	value: function() {
111	// Update the selection classes.	111	// Update the selection classes.
112	this.element.querySelector(".easing-selected").classList.remove("easing-selected");	112	var easingSelected = this.element.querySelector(".easing-selected");
113	this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");	113	if (easingSelected !== null) {
		114	easingSelected.classList.remove("easing-selected");
		115	}
		116	var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
		117	if (dataEl !== null) {
		118	dataEl.classList.add("easing-selected");
		119	}
114	}	120	}
115	},	121	},
116	didDraw: {	122	didDraw: {
@@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
147	event.stopPropagation();	153	event.stopPropagation();
148		154
149	// Un-highlight the old choice and highlight the new choice	155	// Un-highlight the old choice and highlight the new choice
150	this.element.querySelector(".easing-selected").classList.remove("easing-selected");	156	var easingSelected = this.element.querySelector(".easing-selected");
		157	if (easingSelected !== null) {
		158	easingSelected.classList.remove("easing-selected");
		159	}
151	event.target.classList.add("easing-selected");	160	event.target.classList.add("easing-selected");
152		161
153	// Set the easing in the span that called us	162	// Set the easing in the span that called us


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 3db57a3a..74dd1ca1 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
687	if (ev.target.className === "tracklane") {	687	if (ev.target.className === "tracklane") {
688	this.handleNewTween(ev);	688	this.handleNewTween(ev);
689	this.updateKeyframeRule();	689	this.updateKeyframeRule();
690	} else if (ev.target.className === "tween_span" && ev.target.parentElement.parentElement.className === "tracklane") {	690	} else if (ev.target.className === "tween_span_bar" && ev.target.parentElement.parentElement.parentElement.className === "tracklane") {
691	this.handleNewTween(ev);	691	this.handleNewTween(ev);
692	this.updateKeyframeRule();	692	this.updateKeyframeRule();
693	}	693	}
@@ -703,6 +703,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
703	this.addAnimationRuleToElement(ev);	703	this.addAnimationRuleToElement(ev);
704	this.updateKeyframeRule();	704	this.updateKeyframeRule();
705	} else {	705	} else {
		706
		707
706	this.handleNewTween(ev);	708	this.handleNewTween(ev);
707	this.updateKeyframeRule();	709	this.updateKeyframeRule();
708	}	710	}
@@ -716,7 +718,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
716	this.application.ninja.timeline.selectLayer(selectedIndex, false);	718	this.application.ninja.timeline.selectLayer(selectedIndex, false);
717	this.insertTween(ev.offsetX);	719	this.insertTween(ev.offsetX);
718	} else {	720	} else {
719	this.splitTween(ev);	721	// We will be splitting a tween. Get the x-coordinate of the mouse click within the target element.
		722	// You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
		723
		724	// Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
		725	var findXOffset = function(obj) {
		726	var curleft = 0;
		727	if (obj.offsetParent) {
		728	do {
		729	curleft += (obj.offsetLeft-obj.scrollLeft);
		730
		731	} while (obj = obj.offsetParent);
		732	}
		733	return curleft;
		734	}
		735	var targetElementOffset = findXOffset(ev.currentTarget),
		736	position = event.pageX - targetElementOffset;
		737
		738	this.splitTweenAt(position-18);
720	}	739	}
721	}	740	}
722	},	741	},
@@ -771,10 +790,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
771		790
772	splitTween:{	791	splitTween:{
773	value:function (ev) {	792	value:function (ev) {
774	var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;	793	var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX,
775	var i;	794	i,
776	var tweensLength = this.tweens.length-1;	795	tweensLength = this.tweens.length-1,
777	var prevTween, nextTween, splitTweenIndex;	796	prevTween, nextTween, splitTweenIndex;
		797
		798	consol.log(ev.target.className)
778	for(i=0; i<tweensLength; i++){	799	for(i=0; i<tweensLength; i++){
779	prevTween = this.tweens[i].tweenData.keyFramePosition;	800	prevTween = this.tweens[i].tweenData.keyFramePosition;
780	nextTween = this.tweens[i+1].tweenData.keyFramePosition;	801	nextTween = this.tweens[i+1].tweenData.keyFramePosition;
@@ -810,6 +831,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
810	}	831	}
811	},	832	},
812		833
		834	// splitTweenAt: Split a tween at a particular position (x coordinate)
		835	splitTweenAt: {
		836	value:function (position) {
		837	var i, j, nextComponentIndex,
		838	tweensLength = this.tweens.length-1,
		839	prevTween,
		840	nextTween,
		841	splitTweenIndex;
		842
		843	// Search through the tweens and find the pair whose keyframes bracket position.
		844	for(i=0; i<tweensLength; i++){
		845	prevTween = this.tweens[i].tweenData.keyFramePosition;
		846	nextTween = this.tweens[i+1].tweenData.keyFramePosition;
		847	if(position > prevTween && position < nextTween) {
		848
		849	// We will insert a new tween at this index
		850	splitTweenIndex = i+1;
		851
		852	// Update the next tween to have new span position and width.
		853	this.tweens[i+1].tweenData.spanPosition = position;
		854	this.tweens[i+1].spanPosition = position;
		855	this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - position;
		856	this.tweens[i+1].spanWidth = this.tweens[i+1].keyFramePosition - position;
		857
		858	// You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you?
		859	// Turns out we have to manually poke the desired childComponent in the repetition to register its new changes.
		860	// So we have to get the index of the actual componentin the repetition, which may not match our iteration index.
		861	for (j = 0; j < tweensLength +1; j++) {
		862	if (this.tweenRepetition.childComponents[j].keyFramePosition === nextTween) {
		863	nextComponentIndex = j;
		864	}
		865	}
		866	this.tweenRepetition.childComponents[nextComponentIndex].setData();
		867
		868	// Create the new tween and splice it into the model
		869	var newTweenToInsert = {};
		870	newTweenToInsert.tweenData = {};
		871	newTweenToInsert.tweenData.spanWidth = position - prevTween;
		872	newTweenToInsert.tweenData.keyFramePosition = position;
		873	newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * position;
		874	newTweenToInsert.tweenData.tweenID = this.tweens.length;
		875	newTweenToInsert.tweenData.spanPosition = position - newTweenToInsert.tweenData.spanWidth;
		876	newTweenToInsert.tweenData.tweenedProperties = [];
		877	newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
		878	newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
		879	newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
		880	newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
		881	this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
		882
		883	// We are done, so end the loop.
		884	i = tweensLength;
		885	}
		886	}
		887
		888