From dc93269cfa7c315d22d85c8217e2412749643f28 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 22:51:10 -0700 Subject: Removing unused components references Signed-off-by: Valerio Virgillito --- js/panels/Timeline/Layer.reel/Layer.html | 4 +--- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 10334b31..9288d718 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,14 +17,12 @@ "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, "dynamicLayerTag" : {"@": "dtext2"}, - "slotStyle" : {"@":"slot1"}, "mainCollapser" : {"@" : "mainCollapser"}, "positionCollapser" : {"@" : "positionCollapser"}, "transformCollapser" : {"@" : "transformCollapser"}, "styleCollapser" : {"@" : "styleCollapser"}, "clickerMain" : {"#" : "clicker-main"}, - "myLabel" : {"#" : "myLabel"}, - "dragDrop" : {"@" : "DragDrop"} + "myLabel" : {"#" : "myLabel"} } }, "dtext1" : { diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 44ad9abb..5c5a8b76 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -15,7 +15,6 @@ "properties": { "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, - "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, "tween": {"@" : "tween"}, "_mainCollapser" : {"@" : "mainCollapser"}, "_positionCollapser" : {"@" : "positionCollapser"}, -- cgit v1.2.3 From 22af7613f36f3a30653060284e144830f9164c45 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 4 May 2012 00:18:33 -0700 Subject: temporary commenting a timeline bug preventing nested selection Signed-off-by: Valerio Virgillito --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 48818e44..d1cab096 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -654,7 +654,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { //debugger; if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") { - this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; +// this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer; } // Are we only showing animated layers? -- cgit v1.2.3 From 4ef8ec674695fb60c9ef6668206243471a0fe347 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 7 May 2012 17:17:17 -0700 Subject: Timeline: Move keyframe dragover and drop listeners to TimelinePanel for interaction improvements. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 111 +++++++++++++++++++-- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 99 ++---------------- 2 files changed, 116 insertions(+), 94 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 03db7880..4b82814b 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { timeMarkerHolder:{ value:null }, + + // Drag and Drop properties _dragAndDropHelper : { value: false }, @@ -328,6 +330,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _scrollTracks: { value: false }, + + // Keyframe drag and drop properties + _draggingTrackId: { + value: false + }, + draggingTrackId: { + get: function() { + return this._draggingTrackId; + }, + set: function(newVal) { + this._draggingTrackId = newVal; + } + }, + + useAbsolutePosition:{ value:true }, @@ -352,8 +369,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); - //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); + this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); + this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); // Bind the handlers for the config menu this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); @@ -1501,11 +1519,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.needsDraw = true; } }, - handleKeyframeDragover: { - value: function(event) { - - } - }, handleLayerDragEnd : { value: function(event) { this._deleteHelper = true; @@ -1521,6 +1534,92 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.needsDraw = true; } }, + + // Keyframe drag-and-drop + 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? + if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; + } + if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; + } + //debugger; + this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; + this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; + return false; + } + }, + 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.millisecondsOffset / 80), + currentMillisec = 0, + i = 0, + tweenIndex = this.trackRepetition.childComponents[this.draggingTrackId-1].draggingIndex; + + // too much or too little? + if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition + 3; + } + if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition + 3; + } + + currentMillisec = currentMillisecPerPixel * currPos; + + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex - 1].tweenData.keyFramePosition; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFramePosition = currPos; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanPosition = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].setData(); + if (tweenIndex < this.trackRepetition.childComponents[this.draggingTrackId-1].tweens.length -1) { + var spanWidth = this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos; + var spanPosition = currPos; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanPosition = currPos; + this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex+1].setData(); + } + this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].selectTween(); + this.trackRepetition.childComponents[this.draggingTrackId-1].updateKeyframeRule(); + return false; + } + }, /* === END: Controllers === */ /* === BEGIN: Logging routines === */ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 836bb60f..76d52036 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -355,6 +355,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _dragAndDropHelperCoords: { value: false }, + dragAndDropHelperCoords: { + get: function() { + return this._dragAndDropHelperCoords; + }, + set: function(newVal) { + this._dragAndDropHelperCoords = newVal; + } + }, _dragAndDropHelperOffset : { value: false }, @@ -443,10 +451,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); } }, @@ -881,45 +889,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._keyframeMaxPosition = maxPosition-9; this._appendHelper = true; this._deleteHelper = false; + this.parentComponent.parentComponent.draggingTrackId = this.trackID; } }, - 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? - if (currPos < this._keyframeMinPosition) { - currPos = this._keyframeMinPosition; - } - if (currPos > this._keyframeMaxPosition) { - currPos = this._keyframeMaxPosition; - } - - this._dragAndDropHelperCoords = currPos + "px"; - this.needsDraw = true; - return false; - } - }, - handleKeyframeDragend : { value: function(event) { this._deleteHelper = true; @@ -928,55 +900,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - 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[tweenIndex +1].tweenData.spanWidth = spanWidth; - this.tweens[tweenIndex +1].tweenData.spanPosition = currPos; - this.tweenRepetition.childComponents[tweenIndex+1].setData(); - } - this.tweenRepetition.childComponents[tweenIndex].selectTween(); - this.updateKeyframeRule(); - return false; - } - }, - /* Begin: Logging routines */ _boolDebug: { -- cgit v1.2.3 From 307d339e45b209dab80ff88196a9f85f8d58f425 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 11:48:29 -0700 Subject: Timeline: Update drag and drop handlers to be unique for drag and drop type. --- js/panels/Timeline/Layer.reel/Layer.js | 10 +++++++++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 26 ++++++++++++++++++++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 3 files changed, 40 insertions(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 34c300df..c213cb70 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -868,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDragleave: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } this.element.classList.remove("dragOver"); } }, @@ -875,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Layer'); + this.parentComponent.parentComponent.draggingType = "layer"; } }, handleDragover: { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.preventDefault(); this.element.classList.add("dragOver"); event.dataTransfer.dropEffect = "move"; @@ -888,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, { handleDrop : { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "layer") { + return; + } event.stopPropagation(); this.element.classList.remove("dragOver"); if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 4b82814b..41472359 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -273,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _dragLayerID : { value: null }, + _draggingType: { + value: false + }, + draggingType: { + get: function() { + return this._draggingType; + }, + set: function(newVal) { + this._draggingType = newVal; + } + }, layersDragged:{ value:[], @@ -1499,6 +1510,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragover: { value: function(event) { + if (this.draggingType !== "layer") { + return; + } 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)) { @@ -1521,6 +1535,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragEnd : { value: function(event) { + if (this.draggingType !== "layer") { + return; + } this._deleteHelper = true; this.needsDraw = true; @@ -1528,6 +1545,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDrop : { value: function(event) { + if (this.draggingType !== "layer") { + return; + } event.stopPropagation(); event.preventDefault(); this._deleteHelper = true; @@ -1538,6 +1558,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Keyframe drag-and-drop handleKeyframeDragover: { value: function(event) { + if (this.draggingType !== "keyframe") { + return; + } event.preventDefault(); var currPos = 0; /* @@ -1574,6 +1597,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleKeyframeDrop: { value: function(event) { + if (this.draggingType !== "keyframe") { + return; + } event.stopPropagation(); //this.element.classList.remove("dragOver"); //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) { diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 76d52036..03e3b01e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -890,10 +890,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._appendHelper = true; this._deleteHelper = false; this.parentComponent.parentComponent.draggingTrackId = this.trackID; + this.parentComponent.parentComponent.draggingType = "keyframe"; } }, handleKeyframeDragend : { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "keyframe") { + return; + } this._deleteHelper = true; this.needsDraw = true; -- cgit v1.2.3 From bafa105c753a139847ef5e0bc8070ce0e8d16f77 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 12:04:57 -0700 Subject: Timeline: Bug fix: Account for horizontal scroll when dragging keyframes. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 3 ++- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 8ddc81cd..5c957619 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -20,6 +20,7 @@ "track_container": {"#": "right_inside"}, "timeline_leftpane" : {"#" : "leftpane_inside"}, "layer_tracks": {"#": "layer_tracks"}, + "layout_tracks": {"#": "layout_tracks"}, "master_track": {"#": "master_track"}, "time_markers" : {"#": "timeline_markers"}, "layerRepetition" : {"@": "repetition1"}, @@ -211,7 +212,7 @@
-
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 41472359..933ed9cc 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1580,7 +1580,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } */ //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; - currPos = event.x - 277; + + currPos = (event.x + this.layout_tracks.scrollLeft) - 277; // too much or too little? if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { @@ -1613,7 +1614,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { * */ - var currPos = event.x - 274, + var currPos = (event.x + this.layout_tracks.scrollLeft) - 277, currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), currentMillisec = 0, i = 0, -- cgit v1.2.3 From 88c7e0abba3349531450efbcecfa1b71fbf5134a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 13:59:17 -0700 Subject: Timeline: Automatic scrolling during dragging of keyframes. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 184 +++++++++++---------- 1 file changed, 98 insertions(+), 86 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 933ed9cc..80525056 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -404,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { draw: { value: function() { + // Drag and Drop: - // Do we have a helper to append? - if (this._appendHelper === true) { - this.container_layers.appendChild(this._dragAndDropHelper); - this._appendHelper = false; - } - // Do we need to move the helper? - if (this._dragAndDropHelperCoords !== false) { - if (this._dragAndDropHelper !== null) { - this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; - } - this._dragAndDropHelperCoords = false; - } - // Do we need to scroll the tracks? - if (this._scrollTracks !== false) { - this.layout_tracks.scrollTop = this._scrollTracks; - this._scrollTracks = false; - } - // Do we have a helper to delete? - if (this._deleteHelper === true) { - if (this._dragAndDropHelper === null) { - // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. - // Try and recover the helper so we can delete it. - var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); - if (myHelper != null) { - this._dragAndDropHelper = myHelper; - } - } - if (this._dragAndDropHelper !== null) { - // We need to delete the helper. Can we delete it from container_layers? - if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; - this._deleteHelper = false; - } + if (this.draggingType === "layer") { + + // Do we have a helper to append? + if (this._appendHelper === true) { + this.container_layers.appendChild(this._dragAndDropHelper); + this._appendHelper = false; } - this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); - this.layersDragged =[]; + // Do we need to move the helper? + if (this._dragAndDropHelperCoords !== false) { + if (this._dragAndDropHelper !== null) { + this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords; + } + this._dragAndDropHelperCoords = false; + } + // Do we need to scroll the tracks? + if (this._scrollTracks !== false) { + this.layout_tracks.scrollTop = this._scrollTracks; + this._scrollTracks = false; + } + // Do we have a helper to delete? + if (this._deleteHelper === true) { + if (this._dragAndDropHelper === null) { + // Problem....maybe a helper didn't get appended, or maybe it didn't get stored. + // Try and recover the helper so we can delete it. + var myHelper = this.container_layers.querySelector(".timeline-dnd-helper"); + if (myHelper != null) { + this._dragAndDropHelper = myHelper; + } + } + if (this._dragAndDropHelper !== null) { + // We need to delete the helper. Can we delete it from container_layers? + if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { + this.container_layers.removeChild(this._dragAndDropHelper); + this._dragAndDropHelper = null; + this._deleteHelper = false; + } + } + this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace); + this.layersDragged =[]; + } + } else if (this.draggingType === "keyframe") { + // Do we need to scroll the tracks? + if (this._scrollTracks !== false) { + this.layout_tracks.scrollLeft = this._scrollTracks; + this._scrollTracks = false; + } } + } }, /* === END: Draw cycle === */ @@ -1510,6 +1521,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragover: { value: function(event) { + + // If this isn't a layer event we don't do anything. if (this.draggingType !== "layer") { return; } @@ -1535,6 +1548,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragEnd : { value: function(event) { + + // If this isn't a layer event we don't do anything. if (this.draggingType !== "layer") { return; } @@ -1545,6 +1560,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDrop : { value: function(event) { + + // If this isn't a layer event we don't do anything. if (this.draggingType !== "layer") { return; } @@ -1558,39 +1575,35 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Keyframe drag-and-drop handleKeyframeDragover: { value: function(event) { + + // If this isn't a keyframe drag and drop event, we don't want to do anything. if (this.draggingType !== "keyframe") { return; } 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 + this.layout_tracks.scrollLeft) - 277; - // too much or too little? + // Prevent dragging beyond previous or next keyframe, if any if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; } if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; } - //debugger; + + // Automatic scrolling when dragged to edge of window + if (currPos < (this.layout_tracks.scrollLeft + 10)) { + this._scrollTracks = (this.layout_tracks.scrollLeft -10); + this.needsDraw = true; + } + if (currPos > (this.layout_tracks.offsetWidth + this.layout_tracks.scrollLeft - 20)) { + this._scrollTracks = (this.layout_tracks.scrollLeft +10); + this.needsDraw = true; + } + + // Set up values in appropriate track and set that track to draw. this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; return false; @@ -1598,52 +1611,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleKeyframeDrop: { value: function(event) { + + // If this isn't a keyframe drop event, we don't want to do anything. if (this.draggingType !== "keyframe") { return; } 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 + this.layout_tracks.scrollLeft) - 277, currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), currentMillisec = 0, - i = 0, - tweenIndex = this.trackRepetition.childComponents[this.draggingTrackId-1].draggingIndex; + i = 0, + trackIndex = this.draggingTrackId -1, + tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex; - // too much or too little? - if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { - currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition + 3; + // Make sure drop happens between previous and next keyframe, if any. + if (currPos < this.trackRepetition.childComponents[trackIndex]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[trackIndex]._keyframeMinPosition + 3; } - if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { - currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition + 3; + if (currPos > this.trackRepetition.childComponents[trackIndex]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[trackIndex]._keyframeMaxPosition + 3; } + // Calculate the millisecond values, set repetitions, and update the rule. currentMillisec = currentMillisecPerPixel * currPos; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex - 1].tweenData.keyFramePosition; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFramePosition = currPos; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanPosition = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].setData(); - if (tweenIndex < this.trackRepetition.childComponents[this.draggingTrackId-1].tweens.length -1) { - var spanWidth = this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos; - var spanPosition = currPos; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanPosition = currPos; - this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex+1].setData(); + this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.spanWidth = + currPos - this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex - 1].tweenData.keyFramePosition; + + this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.keyFramePosition = currPos; + this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec; + + this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.spanPosition = + currPos - this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.spanWidth; + + this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].setData(); + + if (tweenIndex < this.trackRepetition.childComponents[trackIndex].tweens.length -1) { + var spanWidth = this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos, + spanPosition = currPos; + this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth; + this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex +1].tweenData.spanPosition = currPos; + this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex+1].setData(); } - this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].selectTween(); - this.trackRepetition.childComponents[this.draggingTrackId-1].updateKeyframeRule(); + this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween(); + this.trackRepetition.childComponents[trackIndex].updateKeyframeRule(); return false; } }, -- cgit v1.2.3 From 778d417d2f800b91d960849c75c0e4ee128044d1 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 9 May 2012 13:33:45 -0700 Subject: Timeline: Bug fixes for keyframe drag and drop. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 12 +++++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 22 +++++++---- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 46 +++++++++++++--------- 3 files changed, 52 insertions(+), 28 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7259d29..5afff6e6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -84,7 +84,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value: function(event) { //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Keyframe'); - this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID; + + // Get my index in my track's tween array + var i = 0, + tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, + myIndex = null; + for (i = 0; i < tweenRepetitionLength; i++) { + if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) { + myIndex = i; + } + } + this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; } }, handleDragend: { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3a961b51..8859e115 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1586,11 +1586,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { currPos = (event.x + this.layout_tracks.scrollLeft) - 277; // Prevent dragging beyond previous or next keyframe, if any - if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { - currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; + if (currPos < this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition; } - if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { - currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; + if (currPos > this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition; } // Automatic scrolling when dragged to edge of window @@ -1604,8 +1604,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } // Set up values in appropriate track and set that track to draw. - this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; - this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; + this.trackRepetition.childComponents[this.draggingTrackId].dragAndDropHelperCoords = currPos + "px"; + this.trackRepetition.childComponents[this.draggingTrackId].needsDraw = true; return false; } }, @@ -1622,7 +1622,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), currentMillisec = 0, i = 0, - trackIndex = this.draggingTrackId -1, + trackIndex = this.draggingTrackId, tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex; // Make sure drop happens between previous and next keyframe, if any. @@ -1656,11 +1656,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween(); this.trackRepetition.childComponents[trackIndex].updateKeyframeRule(); + + // If this is the last keyframe, we'll need to update the track duration + if (tweenIndex === (this.trackRepetition.childComponents[trackIndex].tweens.length-1)) { + this.arrLayers[trackIndex].layerData.trackDuration = currentMillisec; + this.resetMasterDuration(); + } return false; } }, /* === END: Controllers === */ - + /* === BEGIN: Logging routines === */ _boolDebug:{ enumerable:false, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 03e3b01e..1e918c6e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -363,6 +363,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._dragAndDropHelperCoords = newVal; } }, + _draggingIndex: { + value: false + }, + draggingIndex: { + get: function() { + return this._draggingIndex; + }, + set: function(newVal) { + this._draggingIndex = newVal; + } + }, _dragAndDropHelperOffset : { value: false }, @@ -864,32 +875,29 @@ 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 - var findYOffset = function(obj) { - 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 < (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; - this.parentComponent.parentComponent.draggingTrackId = this.trackID; + + // Get my index in the track array + var i = 0, + arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, + myId = null; + for (i = 0; i < arrLayersLength; i++) { + var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid; + if ( currUuid === this.uuid) { + myId = i; + } + } + this.parentComponent.parentComponent.draggingTrackId = myId; this.parentComponent.parentComponent.draggingType = "keyframe"; } }, -- cgit v1.2.3