Merge branch 'refs/heads/TimelineUber' into TimelineProps

author: Jonathan Duran 2012-05-11 14:13:07 -0700
committer: Jonathan Duran 2012-05-11 14:13:07 -0700
commit: 1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2 (patch)
tree: 2563aa7694c3caaf813ca71ef3250b2a76ee0041 /js/panels/Timeline/TimelineTrack.reel
parent: 32257ac142f872d3c1f6c07504bae77ae884ed93 (diff)
parent: 6fcaa4e923a19672b5860b4c6f67d836680e7e99 (diff)
download: ninja-1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2.tar.gz
2 files changed, 40 insertions, 105 deletions
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index b666f921..35afd1b9 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 1731213b..83aef230 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -355,6 +355,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
    _dragAndDropHelperCoords: {
        value: false
    },
+    dragAndDropHelperCoords: {
+        get: function() {
+                return this._dragAndDropHelperCoords;
+        },
+        set: function(newVal) {
+                this._dragAndDropHelperCoords = newVal;
+        }
+    },
+    _draggingIndex: {
+        value: false
+    },
+    draggingIndex: {
+        get: function() {
+                return this._draggingIndex;
+        },
+        set: function(newVal) {
+                this._draggingIndex = newVal;
+        }
+    },
    _dragAndDropHelperOffset : {
        value: false
    },
@@ -443,10 +462,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
            this.eventManager.addEventListener("tlZoomSlider", this, false);
            
            // Drag and Drop event handlers 
-                        this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+                        //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
                        this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
                        this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
-                        this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
+                        //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
        }
    },
@@ -937,127 +956,43 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
            
            //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
            this._dragAndDropHelper.classList.add("track-dnd-helper");
-            
+ 
-            // Get the offset 
+                if (this.draggingIndex < (this.tweens.length -1)) {
-                var findYOffset = function(obj) {
+                        maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition;
-                                var curleft = curtop = 0;
-                                
-                                if (obj.offsetParent) {
-                                        do {
-                                                        curleft += obj.offsetLeft;
-                                                        curtop += obj.offsetTop;
-                                
-                                                } while (obj = obj.offsetParent);
-                                }
-                                return curtop;
-                }
-                //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
-                if (this.draggingIndex !== (this.tweens.length -1)) {
-                        maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition;
                }
                if (this.draggingIndex > 1) {
-                        minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition;
+                        minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition;
                }
                this._keyframeMinPosition = minPosition+2;
                this._keyframeMaxPosition = maxPosition-9;
                this._appendHelper = true;
                this._deleteHelper = false;
-        }
-    },
-    handleKeyframeDragover: {
-        value: function(event) {
-                event.preventDefault();
-                var currPos = 0;
-                /*
-                        myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
-                if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
-                        this._scrollTracks = (this.user_layers.scrollTop - 10)
-                }
-                if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
-                        this._scrollTracks = (this.user_layers.scrollTop - 20)
-                }
-                if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
-                        this._scrollTracks = (this.user_layers.scrollTop + 10)
-                }
-                if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
-                        this._scrollTracks = (this.user_layers.scrollTop + 20)
-                        
-                }
-                */
-                //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
-                currPos = event.x - 277;
                
-                // too much or too little?
+                // Get my index in the track array
-                if (currPos < this._keyframeMinPosition) {
+                var i = 0,
-                        currPos = this._keyframeMinPosition;
+                        arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
-                }
+                        myId = null;
-                if (currPos > this._keyframeMaxPosition) {
+                for (i = 0; i < arrLayersLength; i++) {
-                        currPos = this._keyframeMaxPosition;
+                        var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid;
+                        if ( currUuid === this.uuid) {
+                                myId = i;
+                        }
                }
-                
+                this.parentComponent.parentComponent.draggingTrackId = myId;
-                this._dragAndDropHelperCoords = currPos + "px";
+                this.parentComponent.parentComponent.draggingType = "keyframe";
-                this.needsDraw = true;
-                return false;
        }
    },
-        
    handleKeyframeDragend : {
        value: function(event) {
+                if (this.parentComponent.parentComponent.draggingType !== "keyframe") {
+                        return;
+                }
                this._deleteHelper = true;
                this.needsDraw = true;
           
        }
    },
    
-        handleKeyframeDrop : {
-                value: function(event) {
-                        event.stopPropagation();
-                        //this.element.classList.remove("dragOver");
-                        //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
-                                //this.parentComponent.parentComponent.dropLayerID = this.layerID;
-                        //}
-                        
-                        /*
-                         * First, what keyframe is it (get the index);
-                         * Limit keyframe position to between index-1 and index+1 keyFramePosition
-                         * On update, be sure to update index+1's information too
-                         * 
-                         */
-                        
-                        var currPos = event.x - 274,
-                                currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80),
-                                currentMillisec = 0,
-                                i = 0, 
-                                tweenIndex = this.draggingIndex;
-                                
-                        // too much or too little?
-                if (currPos < this._keyframeMinPosition) {
-                        currPos = this._keyframeMinPosition + 3;
-                }
-                if (currPos > this._keyframeMaxPosition) {
-                        currPos = this._keyframeMaxPosition + 3;
-                }
-                
-                currentMillisec = currentMillisecPerPixel * currPos;
-                        this.tweens[tweenIndex].tweenData.spanWidth = currPos - this.tweens[tweenIndex - 1].tweenData.keyFramePosition;
-                        this.tweens[tweenIndex].tweenData.keyFramePosition = currPos;
-                        this.tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
-                        this.tweens[tweenIndex].tweenData.spanPosition = currPos - this.tweens[tweenIndex].tweenData.spanWidth;
-                        this.tweenRepetition.childComponents[tweenIndex].setData();
-                        if (tweenIndex < this.tweens.length -1) {
-                                var spanWidth = this.tweens[tweenIndex +1].tweenData.keyFramePosition - currPos;
-                                var spanPosition = currPos; 
-                                this.tweens[tweenInd
author	Jonathan Duran	2012-05-11 14:13:07 -0700
committer	Jonathan Duran	2012-05-11 14:13:07 -0700
commit	1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2 (patch)
tree	2563aa7694c3caaf813ca71ef3250b2a76ee0041 /js/panels/Timeline/TimelineTrack.reel
parent	32257ac142f872d3c1f6c07504bae77ae884ed93 (diff)
parent	6fcaa4e923a19672b5860b4c6f67d836680e7e99 (diff)
download	ninja-1e2138fc7d0007b0ad3cb4807dc1c9101190f2f2.tar.gz

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index b666f921..35afd1b9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -1,4 +1,4 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<!-- <copyright>	2	<!-- <copyright>
3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 1731213b..83aef230 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -355,6 +355,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
355	_dragAndDropHelperCoords: {	355	_dragAndDropHelperCoords: {
356	value: false	356	value: false
357	},	357	},
		358	dragAndDropHelperCoords: {
		359	get: function() {
		360	return this._dragAndDropHelperCoords;
		361	},
		362	set: function(newVal) {
		363	this._dragAndDropHelperCoords = newVal;
		364	}
		365	},
		366	_draggingIndex: {
		367	value: false
		368	},
		369	draggingIndex: {
		370	get: function() {
		371	return this._draggingIndex;
		372	},
		373	set: function(newVal) {
		374	this._draggingIndex = newVal;
		375	}
		376	},
358	_dragAndDropHelperOffset : {	377	_dragAndDropHelperOffset : {
359	value: false	378	value: false
360	},	379	},
@@ -443,10 +462,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
443	this.eventManager.addEventListener("tlZoomSlider", this, false);	462	this.eventManager.addEventListener("tlZoomSlider", this, false);
444		463
445	// Drag and Drop event handlers	464	// Drag and Drop event handlers
446	this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);	465	//this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
447	this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);	466	this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
448	this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);	467	this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
449	this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);	468	//this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
450	}	469	}
451	},	470	},
452		471
@@ -937,127 +956,43 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
937		956
938	//this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");	957	//this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
939	this._dragAndDropHelper.classList.add("track-dnd-helper");	958	this._dragAndDropHelper.classList.add("track-dnd-helper");
940		959
941	// Get the offset	960	if (this.draggingIndex < (this.tweens.length -1)) {
942	var findYOffset = function(obj) {	961	maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition;
943	var curleft = curtop = 0;
944
945	if (obj.offsetParent) {
946	do {
947	curleft += obj.offsetLeft;
948	curtop += obj.offsetTop;
949
950	} while (obj = obj.offsetParent);
951	}
952	return curtop;
953	}
954	//this._dragAndDropHelperOffset = findYOffset(this.container_layers);
955	if (this.draggingIndex !== (this.tweens.length -1)) {
956	maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition;
957	}	962	}
958	if (this.draggingIndex > 1) {	963	if (this.draggingIndex > 1) {
959	minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition;	964	minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition;
960	}	965	}
961	this._keyframeMinPosition = minPosition+2;	966	this._keyframeMinPosition = minPosition+2;
962	this._keyframeMaxPosition = maxPosition-9;	967	this._keyframeMaxPosition = maxPosition-9;
963	this._appendHelper = true;	968	this._appendHelper = true;
964	this._deleteHelper = false;	969	this._deleteHelper = false;
965	}
966	},
967	handleKeyframeDragover: {
968	value: function(event) {
969	event.preventDefault();
970	var currPos = 0;
971	/*
972	myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
973	if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
974	this._scrollTracks = (this.user_layers.scrollTop - 10)
975	}
976	if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
977	this._scrollTracks = (this.user_layers.scrollTop - 20)
978	}
979	if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
980	this._scrollTracks = (this.user_layers.scrollTop + 10)
981	}
982	if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
983	this._scrollTracks = (this.user_layers.scrollTop + 20)
984
985	}
986	*/
987	//currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
988	currPos = event.x - 277;
989		970
990	// too much or too little?	971	// Get my index in the track array
991	if (currPos < this._keyframeMinPosition) {	972	var i = 0,
992	currPos = this._keyframeMinPosition;	973	arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
993	}	974	myId = null;
994	if (currPos > this._keyframeMaxPosition) {	975	for (i = 0; i < arrLayersLength; i++) {
995	currPos = this._keyframeMaxPosition;	976	var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid;
		977	if ( currUuid === this.uuid) {
		978	myId = i;
		979	}
996	}	980	}
997		981	this.parentComponent.parentComponent.draggingTrackId = myId;
998	this._dragAndDropHelperCoords = currPos + "px";	982	this.parentComponent.parentComponent.draggingType = "keyframe";
999	this.needsDraw = true;
1000	return false;
1001	}	983	}
1002	},	984	},
1003
1004	handleKeyframeDragend : {	985	handleKeyframeDragend : {
1005	value: function(event) {	986	value: function(event) {
		987	if (this.parentComponent.parentComponent.draggingType !== "keyframe") {
		988	return;
		989	}
1006	this._deleteHelper = true;	990	this._deleteHelper = true;
1007	this.needsDraw = true;	991	this.needsDraw = true;
1008		992
1009	}	993	}
1010	},	994	},
1011		995
1012	handleKeyframeDrop : {
1013	value: function(event) {
1014	event.stopPropagation();
1015	//this.element.classList.remove("dragOver");
1016	//if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
1017	//this.parentComponent.parentComponent.dropLayerID = this.layerID;
1018	//}
1019
1020	/*
1021	* First, what keyframe is it (get the index);
1022	* Limit keyframe position to between index-1 and index+1 keyFramePosition
1023	* On update, be sure to update index+1's information too
1024	*
1025	*/
1026
1027	var currPos = event.x - 274,
1028	currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80),
1029	currentMillisec = 0,
1030	i = 0,
1031	tweenIndex = this.draggingIndex;
1032
1033	// too much or too little?
1034	if (currPos < this._keyframeMinPosition) {
1035	currPos = this._keyframeMinPosition + 3;
1036	}
1037	if (currPos > this._keyframeMaxPosition) {
1038	currPos = this._keyframeMaxPosition + 3;
1039	}
1040
1041	currentMillisec = currentMillisecPerPixel * currPos;
1042
1043	this.tweens[tweenIndex].tweenData.spanWidth = currPos - this.tweens[tweenIndex - 1].tweenData.keyFramePosition;
1044	this.tweens[tweenIndex].tweenData.keyFramePosition = currPos;
1045	this.tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
1046	this.tweens[tweenIndex].tweenData.spanPosition = currPos - this.tweens[tweenIndex].tweenData.spanWidth;
1047	this.tweenRepetition.childComponents[tweenIndex].setData();
1048	if (tweenIndex < this.tweens.length -1) {
1049	var spanWidth = this.tweens[tweenIndex +1].tweenData.keyFramePosition - currPos;
1050	var spanPosition = currPos;
1051	this.tweens[tweenInd