From 8c1fda5e59b9d88b69e0b4a2bd57590ef451643c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 15:28:05 -0700 Subject: Timeline: Expand/collapse state of layers now mantained across document switching. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 32 ++++++++++++++++++++++ 1 file changed, 32 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..f32592ed 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + + _isFirstDraw: { + value: true + }, + _isVisible:{ value: true }, @@ -448,6 +453,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } } + + + if (this._isFirstDraw === true) { + + if (this.isMainCollapsed === false) { + this._mainCollapser.myContent.style.height = "auto"; + this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass); + this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass); + } + if (this.isPositionCollapsed === false) { + this._positionCollapser.myContent.style.height = "auto"; + this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass); + this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass); + } + if (this.isTransformCollapsed === false) { + this._transformCollapser.myContent.style.height = "auto"; + this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass); + this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this._styleCollapser.myContent.style.height = "auto"; + this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass); + this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass); + } + this._isFirstDraw = false; + } + } }, -- cgit v1.2.3 From 73c4f7f449ba58e70f7335ef932b23dd450c925b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 17:46:09 -0700 Subject: Timeline: Initial keyframe drag-and-drop interaction. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 155 +++++++++++++++++++++ 1 file changed, 155 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f32592ed..09378e65 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -348,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:null }, + // Drag and Drop properties + _dragAndDropHelper : { + value: false + }, + _dragAndDropHelperCoords: { + value: false + }, + _dragAndDropHelperOffset : { + value: false + }, + _appendHelper: { + value: false + }, + _deleteHelper: { + value: false + }, + _trackData:{ value: false }, @@ -424,6 +441,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller = this.application.ninja.stylesController; this.element.addEventListener("click", this, false); this.eventManager.addEventListener("tlZoomSlider", 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); } }, @@ -436,6 +458,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } + + + + + + + + + // Drag and Drop: + // Do we have a helper to append? + if (this._appendHelper === true) { + this.track_lanes.appendChild(this._dragAndDropHelper); + this._appendHelper = false; + } + // Do we need to move the helper? + if (this._dragAndDropHelperCoords !== false) { + if (this._dragAndDropHelper !== null) { + if (typeof(this._dragAndDropHelper.style) !== "undefined") { + this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords; + } + } + this._dragAndDropHelperCoords = 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.element.querySelector(".track-dnd-helper"); + if (myHelper != null) { + this._dragAndDropHelper = myHelper; + } + } + if (this._dragAndDropHelper !== null) { + // We need to delete the helper. Can we delete it from track_lanes? + if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) { + this.track_lanes.removeChild(this._dragAndDropHelper); + this._dragAndDropHelper = null; + this._deleteHelper = false; + } + } + } + + + + + } }, @@ -762,6 +831,92 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return returnVal; } }, + + // Drag and drop event handlers + handleKeyframeDragstart : { + value: function(event) { + var dragIcon = document.createElement("img"); + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('Text', this.identifier); + dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" + dragIcon.width = 1; + event.dataTransfer.setDragImage(dragIcon, 0, 0); + + // Clone the element we're dragging + this._dragAndDropHelper = event.target.cloneNode(true); + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "2px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + + //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); + this._appendHelper = true; + this._deleteHelper = false; + } + }, + handleKeyframeDragover: { + value: function(event) { + 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 - 280; + this._dragAndDropHelperCoords = currPos + "px"; + this.needsDraw = true; + } + }, + + handleKeyframeDragend : { + value: function(event) { + 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; + //} + return false; + } + }, + + /* Begin: Logging routines */ _boolDebug: { enumerable: false, -- cgit v1.2.3 From 7fc185cc08b2ba912dbc7bce96f6a465c1dd6dbf Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 3 May 2012 18:06:06 -0700 Subject: Timeline: More work on tween drag-and-drop --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 23 +++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 09378e65..d5571c3c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -442,6 +442,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.eventManager.addEventListener("tlZoomSlider", this, false); + // Drag and Drop event handlers 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); @@ -873,6 +874,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, handleKeyframeDragover: { value: function(event) { + event.preventDefault(); var currPos = 0; /* myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; @@ -891,9 +893,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } */ //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; - currPos = event.x - 280; + currPos = event.x - 277; this._dragAndDropHelperCoords = currPos + "px"; this.needsDraw = true; + return false; } }, @@ -912,6 +915,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { //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 - 277, + currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80), + currentMillisec = currentMillisecPerPixel * currPos; + console.log(this.tweens[1].tweenData); + this.tweens[1].tweenData.spanWidth = currPos - this.tweens[0].tweenData.keyFramePosition; + this.tweens[1].tweenData.keyFramePosition = currPos; + this.tweens[1].tweenData.keyFrameMillisec = currentMillisec; + this.tweens[1].tweenData.spanPosition = currPos - this.tweens[1].tweenData.spanWidth; + this.tweenRepetition.childComponents[1].setData(); + console.log(this.tweens[1].tweenData); return false; } }, -- cgit v1.2.3 From 54fd77320dcce93987c138923bcb8a9b9899c4c0 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 3 May 2012 23:09:48 -0700 Subject: apply old stash to new branch initial work and stubs for sub property support. serialization for property track components and classes Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..000c81e2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -218,10 +218,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { tweenRepetition:{ get:function () { - return this._spanRepetition; + return this._tweenRepetition; }, set:function (newVal) { - this._spanRepetition = newVal; + this._tweenRepetition = newVal; } }, @@ -371,7 +371,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.bypassAnimation = this.trackData.bypassAnimation; this.trackID = this.trackData.layerID; this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction + this.animatedElement = this.trackData.animatedElement; this.arrStyleTracks = this.trackData.arrStyleTracks; this.isTrackAnimated = this.trackData.isTrackAnimated; this.trackDuration = this.trackData.trackDuration; @@ -431,7 +431,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } - } }, @@ -443,7 +442,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { this.retrieveStoredTweens(); - } } } @@ -507,6 +505,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.updateKeyframeRule(); } } else { + // TEMP error check console.log("There must be exactly one element in an animated layer."); } } @@ -528,7 +527,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + this.application.ninja.timeline.selectLayer(selectedIndex, true); var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From 2ea8a62835f4c20efff2623306e7205e6f5bf0ba Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 4 May 2012 16:59:07 -0700 Subject: Timeline: True drag-and-drop of keyframes --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 60 ++++++++++++++++++---- 1 file changed, 50 insertions(+), 10 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d5571c3c..836bb60f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -836,7 +836,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Drag and drop event handlers handleKeyframeDragstart : { value: function(event) { - var dragIcon = document.createElement("img"); + var dragIcon = document.createElement("img"), + minPosition = 0, + maxPosition = 100000000000; + event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('Text', this.identifier); dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" @@ -868,6 +871,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { 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; + } + this._keyframeMinPosition = minPosition+2; + this._keyframeMaxPosition = maxPosition-9; this._appendHelper = true; this._deleteHelper = false; } @@ -894,6 +905,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { */ //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; @@ -923,16 +943,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { * */ - var currPos = event.x - 277, + var currPos = event.x - 274, currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80), - currentMillisec = currentMillisecPerPixel * currPos; - console.log(this.tweens[1].tweenData); - this.tweens[1].tweenData.spanWidth = currPos - this.tweens[0].tweenData.keyFramePosition; - this.tweens[1].tweenData.keyFramePosition = currPos; - this.tweens[1].tweenData.keyFrameMillisec = currentMillisec; - this.tweens[1].tweenData.spanPosition = currPos - this.tweens[1].tweenData.spanWidth; - this.tweenRepetition.childComponents[1].setData(); - console.log(this.tweens[1].tweenData); + 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; } }, -- cgit v1.2.3 From eaef072648eb539e648aabf7bc1aea8d02c21085 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 21:46:29 -0700 Subject: property track additions to serialization data object Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 000c81e2..8bb00990 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -710,7 +710,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } if (layerEvent.layerEventType === "newStyle") { // TODO: Add a real track of tweens. Probably need a method for that. - this.arrStyleTracks.push("1"); + + var newStyleTrack = {}; + newStyleTrack.propTrackData = {}; + newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; + newStyleTrack.propTrackData.propTweens = []; + newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; + console.log(layerEvent.styleSelection); + console.log(layerEvent.styleIndex); + + this.arrStyleTracks.push(newStyleTrack); + } else if (layerEvent.layerEventType === "deleteStyle") { // TODO: Delete the right track. Index can be passed in event object, use that for splice(). this.arrStyleTracks.pop(); -- cgit v1.2.3 From a831e11ef6ae97bbd90c896b5cb6f4306e9001dd Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 23:30:49 -0700 Subject: more sub prop additions Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 63f2f957..ddeb1449 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -819,7 +819,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; newStyleTrack.propTrackData.propTweens = []; newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - console.log(layerEvent.styleSelection); + console.log(layerEvent.styleIndex); this.arrStyleTracks.push(newStyleTrack); -- 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/TimelineTrack.reel/TimelineTrack.js | 99 +++------------------- 1 file changed, 11 insertions(+), 88 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') 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/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') 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 4f1693b953befabf4495df668f542c7f52270864 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 8 May 2012 13:42:04 -0700 Subject: Change sub property track arrays Remove transform section and move width and height into Position section. rename position section Position and Size. additional support for generic prop tweens Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index ddeb1449..891feada 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -771,6 +771,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); + // first combine all style track tween arrays with the main track tween array + // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; @@ -796,9 +798,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Init and event handler for layer expand/collapse init:{ value:function () { - - this.arrPositionTracks = [0, 1]; - this.arrTransformTracks = [0, 1, 2, 3, 4]; + + // create track objects for position and transform tracks and push into arrays instead of dummy arrays + + //this.createPositionTracks(); + this.arrPositionTracks = [0, 1, 2, 3]; + + // get rid of transform tracks + //this.arrTransformTracks = [0, 1, 2, 3, 4]; // Register event handler for layer events. defaultEventManager.addEventListener("layerEvent", this, false); @@ -806,6 +813,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + createPositionTracks:{ + value:function(){ + // create track objects for position and transform tracks and push into arrays + } + }, + handleLayerEvent:{ value:function (layerEvent) { if (layerEvent.layerID !== this.trackID) { -- cgit v1.2.3 From 40670fd9a723fe6f95fe6c1ceefa0d2435b83aa4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 9 May 2012 09:47:31 -0700 Subject: sub property additions Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 37 ++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 891feada..2ce1a637 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -801,8 +801,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // create track objects for position and transform tracks and push into arrays instead of dummy arrays - //this.createPositionTracks(); - this.arrPositionTracks = [0, 1, 2, 3]; + this.createPositionTracks(); + //this.arrPositionTracks = [0, 1, 2, 3]; // get rid of transform tracks //this.arrTransformTracks = [0, 1, 2, 3, 4]; @@ -816,6 +816,38 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { createPositionTracks:{ value:function(){ // create track objects for position and transform tracks and push into arrays + + // create 'top' track + var newTopTrack = {}; + newTopTrack.propTrackData = {}; + newTopTrack.propTrackData.propTweens = []; + newTopTrack.propTrackData.styleIndex = 0; + newTopTrack.propTrackData.trackType = "position"; + this.arrPositionTracks.push(newTopTrack); + + // create 'left' track + var newLeftTrack = {}; + newLeftTrack.propTrackData = {}; + newLeftTrack.propTrackData.propTweens = []; + newLeftTrack.propTrackData.styleIndex = 1; + newLeftTrack.propTrackData.trackType = "position"; + this.arrPositionTracks.push(newLeftTrack); + + // create 'width' track + var newWidthTrack = {}; + newWidthTrack.propTrackData = {}; + newWidthTrack.propTrackData.propTweens = []; + newWidthTrack.propTrackData.styleIndex = 2; + newWidthTrack.propTrackData.trackType = "position"; + this.arrPositionTracks.push(newWidthTrack); + + // create 'height' track + var newHeightTrack = {}; + newHeightTrack.propTrackData = {}; + newHeightTrack.propTrackData.propTweens = []; + newHeightTrack.propTrackData.styleIndex = 3; + newHeightTrack.propTrackData.trackType = "position"; + this.arrPositionTracks.push(newHeightTrack); } }, @@ -831,6 +863,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newStyleTrack.propTrackData = {}; newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; newStyleTrack.propTrackData.propTweens = []; + newStyleTrack.propTrackData.trackType = "style"; newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; console.log(layerEvent.styleIndex); -- 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. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 46 +++++++++++++--------- 1 file changed, 27 insertions(+), 19 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') 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 From b42e5dc5922fb427b9edc7af60e9fa4a5dfcbe0e Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 10 May 2012 10:43:49 -0700 Subject: Some sub prop updates Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 2ce1a637..a1b1ce74 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -501,11 +501,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } } - - - - - } }, @@ -798,18 +793,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Init and event handler for layer expand/collapse init:{ value:function () { - - // create track objects for position and transform tracks and push into arrays instead of dummy arrays - this.createPositionTracks(); - //this.arrPositionTracks = [0, 1, 2, 3]; - - // get rid of transform tracks - //this.arrTransformTracks = [0, 1, 2, 3, 4]; - // Register event handler for layer events. defaultEventManager.addEventListener("layerEvent", this, false); - } }, @@ -823,6 +809,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTopTrack.propTrackData.propTweens = []; newTopTrack.propTrackData.styleIndex = 0; newTopTrack.propTrackData.trackType = "position"; + newTopTrack.propTrackData.trackEditorProperty = "top"; this.arrPositionTracks.push(newTopTrack); // create 'left' track @@ -831,6 +818,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newLeftTrack.propTrackData.propTweens = []; newLeftTrack.propTrackData.styleIndex = 1; newLeftTrack.propTrackData.trackType = "position"; + newLeftTrack.propTrackData.trackEditorProperty = "left"; this.arrPositionTracks.push(newLeftTrack); // create 'width' track @@ -839,6 +827,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newWidthTrack.propTrackData.propTweens = []; newWidthTrack.propTrackData.styleIndex = 2; newWidthTrack.propTrackData.trackType = "position"; + newWidthTrack.propTrackData.trackEditorProperty = "width"; this.arrPositionTracks.push(newWidthTrack); // create 'height' track @@ -847,6 +836,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newHeightTrack.propTrackData.propTweens = []; newHeightTrack.propTrackData.styleIndex = 3; newHeightTrack.propTrackData.trackType = "position"; + newHeightTrack.propTrackData.trackEditorProperty = "height"; this.arrPositionTracks.push(newHeightTrack); } }, @@ -864,6 +854,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection; newStyleTrack.propTrackData.propTweens = []; newStyleTrack.propTrackData.trackType = "style"; + newStyleTrack.propTrackData.trackEditorProperty = ""; newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; console.log(layerEvent.styleIndex); -- cgit v1.2.3 From 675dfa5057e118dac694b8fb9b960cfed48e1d52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 00:51:17 -0700 Subject: allow splitting existing spans with new keyframe Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 39 +++++++++++++++++++--- 1 file changed, 35 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a1b1ce74..35440cc4 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -671,7 +671,40 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - console.log("Splitting an existing span with a new keyframe is not yet supported."); + console.log("Splitting an existing span with a new keyframe."); + var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; + var i; + var tweensLength = this.tweens.length-1; + var prevTween, nextTween, splitTweenIndex; + for(i=0; i prevTween && clickPos < nextTween){ + console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); + splitTweenIndex = this.tweens[i+1].tweenData.tweenID; + this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - clickPos; + this.tweens[i+1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; + ev.target.style.width = this.tweens[i+1].tweenData.spanWidth + "px"; + ev.target.parentElement.style.left = clickPos + "px"; + ev.target.parentElement.children[1].style.left = (this.tweens[i+1].tweenData.spanWidth - 3) + "px"; + + var newTweenToInsert = {}; + newTweenToInsert.tweenData = {}; + newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; + newTweenToInsert.tweenData.keyFramePosition = clickPos; + newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos; + newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1; + newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth; + newTweenToInsert.tweenData.tweenedProperties = []; + newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; + newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; + this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); + } + } + + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -746,7 +779,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; - this.animationName = "animation_" + this.animatedElement.classList[0]; + this.animationName = this.animatedElement.classList[0] + "_PositionSize"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); @@ -766,8 +799,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - // first combine all style track tween arrays with the main track tween array - // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; -- cgit v1.2.3 From 32257ac142f872d3c1f6c07504bae77ae884ed93 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 02:34:26 -0700 Subject: Fix a bug in span splitting interaction and remove console logs Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 35440cc4..1731213b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -617,6 +617,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(ev.offsetX); } else { + console.log(ev.target); this.splitTween(ev); } } @@ -671,7 +672,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - console.log("Splitting an existing span with a new keyframe."); var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX; var i; var tweensLength = this.tweens.length-1; @@ -680,14 +680,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { prevTween = this.tweens[i].tweenData.keyFramePosition; nextTween = this.tweens[i+1].tweenData.keyFramePosition; if(clickPos > prevTween && clickPos < nextTween){ - console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); + //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID); splitTweenIndex = this.tweens[i+1].tweenData.tweenID; this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - clickPos; this.tweens[i+1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX; - ev.target.style.width = this.tweens[i+1].tweenData.spanWidth + "px"; - ev.target.parentElement.style.left = clickPos + "px"; - ev.target.parentElement.children[1].style.left = (this.tweens[i+1].tweenData.spanWidth - 3) + "px"; - + if (ev.target.className != "tween-span") { + // don't set styles on timeline track if event is coming from the track + } else { + ev.target.style.width = this.tweens[i + 1].tweenData.spanWidth + "px"; + ev.target.parentElement.style.left = clickPos + "px"; + ev.target.parentElement.children[1].style.left = (this.tweens[i + 1].tweenData.spanWidth - 3) + "px"; + } var newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = clickPos - prevTween; @@ -701,9 +704,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth; newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight; this.tweens.splice(splitTweenIndex, 0, newTweenToInsert); + break; } } - this.application.ninja.documentController.activeDocument.needsSave = true; } }, -- cgit v1.2.3 From c16b2c6674a9170e1ef75a489e876808ba2f6c39 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 20:47:15 -0700 Subject: repetition fix Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 83aef230..8b3938f4 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -141,6 +141,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value: null }, styleTracksRepetition : { + serializable:true, get: function() { return this._styleTracksRepetition; }, @@ -190,17 +191,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.trackData.arrTransformTracks = newVal; } }, - _transformTracksRepetition: { - value: null - }, - transformTracksRepetition : { - get: function() { - return this._transformTracksRepetition; - }, - set: function(newVal) { - this._transformTracksRepetition = newVal; - } - }, _tweens:{ value:[] -- cgit v1.2.3 From eb7c3c8db304bdfb01f747a50e932665d9ec03fa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:09:35 -0700 Subject: style keyframe rule addition Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 25 +++++++++------------- 1 file changed, 10 insertions(+), 15 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8b3938f4..0e40e222 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -321,6 +321,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + animationNamesString:{ + value:"" + }, + ninjaStylesContoller:{ value:null }, @@ -468,14 +472,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; } } - - - - - - - - + // Drag and Drop: // Do we have a helper to append? if (this._appendHelper === true) { @@ -527,7 +524,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } - if (this._isFirstDraw === true) { if (this.isMainCollapsed === false) { @@ -591,11 +587,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[i].tweenData = myObj; } - - } } }, + handleClick:{ value:function (ev) { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span @@ -609,7 +604,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.updateKeyframeRule(); } else { this.handleNewTween(ev); - this.updateKeyframeRule(); + if (ev.target.className === "tracklane") { + this.updateKeyframeRule(); + } } } else { // TEMP error check @@ -626,7 +623,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.application.ninja.timeline.selectLayer(selectedIndex, false); this.insertTween(ev.offsetX); } else { - console.log(ev.target); this.splitTween(ev); } } @@ -792,6 +788,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.animationName = this.animatedElement.classList[0] + "_PositionSize"; + this.animationNamesString = this.animationName; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); @@ -900,8 +897,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newStyleTrack.propTrackData.trackEditorProperty = ""; newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex; - console.log(layerEvent.styleIndex); - this.arrStyleTracks.push(newStyleTrack); } else if (layerEvent.layerEventType === "deleteStyle") { -- cgit v1.2.3 From 13ebb58be961e92ba7c109298ef73daa7dea79c7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:08:24 -0700 Subject: fix keyframe bug when adding keyframes to sub properties Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 0e40e222..d8259281 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -603,8 +603,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.addAnimationRuleToElement(ev); this.updateKeyframeRule(); } else { - this.handleNewTween(ev); if (ev.target.className === "tracklane") { + this.handleNewTween(ev); this.updateKeyframeRule(); } } -- cgit v1.2.3 From 847276c1e62d55c10d059683e7180635aa994890 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 00:47:52 -0700 Subject: support width and height tween prop on re-opening saved doc Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d8259281..8693e828 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -718,7 +718,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { - var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; + var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute,widthOffsetAttribute,heightOffsetAttribute; var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); @@ -737,11 +737,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData = {}; offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); + topOffSetAttribute = offsetAttribute[3].split("px"); leftOffsetAttribute = offsetAttribute[5].split("px"); + widthOffsetAttribute = offsetAttribute[7].split("px"); + heightOffsetAttribute = offsetAttribute[9].split("px"); var tempTopOffset = parseInt(topOffSetAttribute[0]); - var tempLeftOffset =parseInt(leftOffsetAttribute[0]); + var tempLeftOffset = parseInt(leftOffsetAttribute[0]); + var tempWidthOffset = parseInt(widthOffsetAttribute[0]); + var tempHeightOffset = parseInt(heightOffsetAttribute[0]); if (this.currentKeyframeRule[i].keyText === "0%") { newTween.tweenData.spanWidth = 0; @@ -752,6 +757,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties = []; newTween.tweenData.tweenedProperties["top"] = tempTopOffset; newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; + newTween.tweenData.tweenedProperties["width"] = tempWidthOffset; + newTween.tweenData.tweenedProperties["height"] = tempHeightOffset; this.tweens.push(newTween); } else { @@ -772,6 +779,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties=[]; newTween.tweenData.tweenedProperties["top"] = tempTopOffset; newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; + newTween.tweenData.tweenedProperties["width"] = tempWidthOffset; + newTween.tweenData.tweenedProperties["height"] = tempHeightOffset; this.tweens.push(newTween); } this.nextKeyframe += 1; -- cgit v1.2.3 From 50211638adcff654194301ce5d5a6fd6f283c8e1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 01:10:31 -0700 Subject: fix bug with animation names string not reset on open doc Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8693e828..b55db18a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -726,6 +726,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; if(this.animatedElement!==undefined){ this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); + this.animationNamesString = this.animationName; if(this.animationName){ trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); this.nextKeyframe = 0; -- cgit v1.2.3 From e9995c973acadc507b802fdefdb22b4c4bf82325 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 11:27:51 -0700 Subject: fix keyframe splitting Signed-off-by: Jonathan Duran