From 9cd3ae740b67e192f06ee000eba759ca68bdea52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 3 Jul 2012 11:54:05 -0700 Subject: Cleanup PropertyTrack.js Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 120 ++++++++------------- 1 file changed, 42 insertions(+), 78 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..c4571e9d 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { + /* ===- Begin Models ==== */ hasTemplate:{ value: true }, - prepareForDraw:{ - value:function(){ - this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - draw:{ - value:function(){ - - } - }, - - didDraw:{ - value:function () { - if(this.currentKeyframeRule){ - this.retrieveStoredStyleTweens(); - } - } - }, - trackEditorProperty:{ value:"" }, @@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTweenRepetition:{ value:null }, - propTweenRepetition:{ get:function () { return this._propTweenRepetition; @@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTweens:{ value:[] }, - propTweens:{ serializable:true, get:function () { @@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _propTrackData:{ value:false }, - propTrackData:{ serializable:true, get:function () { @@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _trackID:{ value:null }, - trackID:{ serializable:true, get:function () { @@ -131,7 +105,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _trackType:{ value:null }, - trackType:{ serializable:true, get:function () { @@ -147,7 +120,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { _styleIndex:{ value:null }, - styleIndex:{ serializable:true, get:function () { @@ -174,36 +146,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.needsDraw = true; } }, + /* ===- End Models ==== */ + + /* ===- Begin Draw Cycle ==== */ + prepareForDraw:{ + value:function () { + this.element.addEventListener("click", this, false); + this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; + this.ninjaStylesContoller = this.application.ninja.stylesController; + } + }, + + didDraw:{ + value:function () { + if (this.currentKeyframeRule) { + this.retrieveStoredStyleTweens(); + } + } + }, + /* ===- End Draw Cycle ==== */ + /* ===- Begin Event Handlers ==== */ handleClick:{ value:function (ev) { if (ev.shiftKey) { - if (this.trackType == "position") { this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); } - if (this.propTweens.length < 1) { - - // check if there is an editor property assigned yet - // get this property track's editor prop name from layer data arrays var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); if (this.trackType == "style") { - //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) - if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { + if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); } else if (this.trackType == "position") { - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); + } } else { this.handleNewPropTween(ev); @@ -214,31 +200,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; - for (i = 0; i < arrLayerStylesLength; i++) { - var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, handleNewPropTween:{ value:function (ev) { if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. - // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. - - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element var findXOffset = function (obj) { var curleft = 0; if (obj.offsetParent) { @@ -256,6 +223,23 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, + /* ===- End Event Handlers ==== */ + + /* ===- Begin Controllers ==== */ + getCurrentSelectedStyleIndex: { + value: function(layerIndex) { + var returnVal = false, + i = 0, + arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; + for (i = 0; i < arrLayerStylesLength; i++) { + var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; + if (currItem.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, insertPropTween:{ value:function(clickPos){ @@ -310,24 +294,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { nextTween, splitTweenIndex; - // Search through the tweens and find the pair whose keyframes bracket position. for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { - // We will insert a new tween at this index splitTweenIndex = i + 1; - // Update the next tween to have new span position and width. this.propTweens[i + 1].tweenData.spanPosition = position; this.propTweens[i + 1].spanPosition = position; this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; - // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? - // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. - // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. for (j = 0; j < tweensLength + 1; j++) { if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { nextComponentIndex = j; @@ -335,7 +313,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); - // Create the new tween and splice it into the model var newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; @@ -347,15 +324,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); - // We are done, so end the loop. i = tweensLength; } } - - // We've made a change, so set the needsSave flag this.application.ninja.currentDocument.model.needsSave = true; - - // Our tween IDs are now all messed up. Fix them. for (i = 0; i <= tweensLength + 1; i++) { this.propTweens[i].tweenID = i; this.propTweens[i].tweenData.tweenID = i; @@ -382,7 +354,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; for (j = 0; j < styleLength; j++) { - // check for vendor prefixes and skip them for now var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); if (firstChar === "-") { @@ -394,7 +365,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } - // recreate tween properties array for timeline tween newTween.tweenData.tweenedProperties = []; for (var k in keyframeStyles) { newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; @@ -434,12 +404,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ - // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); - - // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.propTweens.length; i++) { var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); // trackDur should be parseFloat rounded to significant digits @@ -453,7 +419,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { keyframeString += keyframePropertyString; } keyframeString += " }"; - // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); this.application.ninja.currentDocument.model.needsSave = true; } @@ -465,9 +430,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (currentStyleValue == null) { currentStyleValue = "1px"; } - this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = ""; @@ -493,4 +456,5 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.insertPropTween(tweenEvent.offsetX); } } + /* ===- End Controllers ==== */ }); -- cgit v1.2.3 From f9c592ac8284cace4daed6f2ac87fe15dfad873c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 3 Jul 2012 12:47:26 -0700 Subject: Refactoring PropertyTrack.js & Span.js Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 236 ++++++++++----------- 1 file changed, 112 insertions(+), 124 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..752340bb 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -13,41 +13,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { value: true }, - prepareForDraw:{ - value:function(){ - this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; - this.ninjaStylesContoller = this.application.ninja.stylesController; - } - }, - - draw:{ - value:function(){ - - } - }, - - didDraw:{ - value:function () { - if(this.currentKeyframeRule){ - this.retrieveStoredStyleTweens(); - } - } - }, - - trackEditorProperty:{ - value:"" - }, - - animatedElement:{ - value:null - }, - - isSubproperty:{ - value:true - }, - _propTweenRepetition:{ value:null }, @@ -91,27 +56,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - nextKeyframe:{ - value:1 - }, - - ninjaStylesContoller:{ - value:null - }, - - animationName:{ - value:null - }, - - currentKeyframeRule:{ - value:null - }, - - trackDuration:{ - value:0 - }, - _trackID:{ value:null }, @@ -160,6 +104,42 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + trackEditorProperty:{ + value:"" + }, + + animatedElement:{ + value:null + }, + + isSubproperty:{ + value:true + }, + + nextKeyframe:{ + value:1 + }, + + ninjaStylesContoller:{ + value:null + }, + + animationName:{ + value:null + }, + + currentKeyframeRule:{ + value:null + }, + + trackDuration:{ + value:0 + }, + + timelineTrack:{ + value:null + }, + setData:{ value:function () { if (typeof(this.propTrackData) === "undefined") { @@ -175,35 +155,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + prepareForDraw:{ + value:function(){ + this.element.addEventListener("click", this, false); + this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent; + this.trackID = this.timelineTrack.trackID; + this.animatedElement = this.timelineTrack.animatedElement; + this.ninjaStylesContoller = this.application.ninja.stylesController; + } + }, + + didDraw:{ + value:function () { + if(this.currentKeyframeRule){ + this.retrieveStoredStyleTweens(); + } + } + }, + handleClick:{ value:function (ev) { + + var selectIndex , currentSelectedStyleIndex; if (ev.shiftKey) { if (this.trackType == "position") { - this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev); + this.timelineTrack.handleNewTween(ev); } if (this.propTweens.length < 1) { - // check if there is an editor property assigned yet - // get this property track's editor prop name from layer data arrays - var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), - currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); + selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), + currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); if (this.trackType == "style") { - //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex) if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) { console.log("Please enter a style property for this track before adding keyframes."); return; } else { this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty; - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } this.insertPropTween(0); this.addPropAnimationRuleToElement(ev); this.updatePropKeyframeRule(); } else if (this.trackType == "position") { - //console.log("Property track editorProperty set to: " + this.trackEditorProperty); } } else { this.handleNewPropTween(ev); @@ -214,32 +209,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } } }, - - getCurrentSelectedStyleIndex: { - value: function(layerIndex) { - var returnVal = false, - i = 0, - arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length; - for (i = 0; i < arrLayerStylesLength; i++) { - var currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; - if (currItem.isSelected === true) { - returnVal = i; - } - } - return returnVal; - } - }, handleNewPropTween:{ value:function (ev) { + var findXOffset, targetElementOffset, position; if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { - // We will be splitting a tween. Get the x-coordinate of the mouse click within the target element. - // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling. - - // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element - var findXOffset = function (obj) { + // An easy function that adds up offsets and scrolls and returns the page x value of an element + findXOffset = function (obj) { var curleft = 0; if (obj.offsetParent) { do { @@ -249,29 +227,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } return curleft; } - var targetElementOffset = findXOffset(ev.currentTarget), - position = event.pageX - targetElementOffset; + targetElementOffset = findXOffset(ev.currentTarget), + position = event.pageX - targetElementOffset; this.splitPropTweenAt(position - 18); } } }, + getCurrentSelectedStyleIndex: { + value: function(layerIndex) { + var returnVal = false, + i = 0, + arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length, + currItem; + for (i = 0; i < arrLayerStylesLength; i++) { + currItem = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i]; + if (currItem.isSelected === true) { + returnVal = i; + } + } + return returnVal; + } + }, + insertPropTween:{ value:function(clickPos){ - var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + var selectedIndex, currentMillisecPerPixel, currentMillisec, propVal + selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, true); - var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * clickPos; + currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; var newTween = {}; newTween.tweenData = {}; newTween.tweenData.tweenedProperties = []; - // TODO - check for color values vs px values and set the correct default - var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if(propVal == null){ propVal = "1px"; } @@ -310,13 +304,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { nextTween, splitTweenIndex; - // Search through the tweens and find the pair whose keyframes bracket position. for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { - // We will insert a new tween at this index splitTweenIndex = i + 1; // Update the next tween to have new span position and width. @@ -325,9 +317,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; this.propTweens[i + 1].spanWidth = this.propTweens[i + 1].keyFramePosition - position; - // You'd think that would be enough to make the component associated with that part of the array redraw, wouldn't you? - // Turns out we have to manually poke the desired childComponent in the repetition to register its new changes. - // So we have to get the index of the actual componentin the repetition, which may not match our iteration index. for (j = 0; j < tweensLength + 1; j++) { if (this.propTweenRepetition.childComponents[j].keyFramePosition === nextTween) { nextComponentIndex = j; @@ -347,15 +336,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert); - // We are done, so end the loop. i = tweensLength; } } - // We've made a change, so set the needsSave flag this.application.ninja.currentDocument.model.needsSave = true; - // Our tween IDs are now all messed up. Fix them. for (i = 0; i <= tweensLength + 1; i++) { this.propTweens[i].tweenID = i; this.propTweens[i].tweenData.tweenID = i; @@ -365,8 +351,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - var percentValue, fraction, splitValue; - var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, i = 0; + var percentValue, fraction, splitValue, styleLength, firstChar, currProp, propVal ; + var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, j, k, i = 0; if (this.animatedElement !== undefined) { this.animationName = this.currentKeyframeRule.name; @@ -379,24 +365,22 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var newTween = {}; newTween.tweenData = {}; - var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; + styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; for (j = 0; j < styleLength; j++) { - // check for vendor prefixes and skip them for now - var firstChar = this.currentKeyframeRule[i].style[j].charAt(0); + firstChar = this.currentKeyframeRule[i].style[j].charAt(0); if (firstChar === "-") { break; } else { - var currProp = this.currentKeyframeRule[i].style[j]; - var propVal = this.currentKeyframeRule[i].style[currProp]; + currProp = this.currentKeyframeRule[i].style[j]; + propVal = this.currentKeyframeRule[i].style[currProp]; keyframeStyles.push([currProp, propVal]); } } - // recreate tween properties array for timeline tween newTween.tweenData.tweenedProperties = []; - for (var k in keyframeStyles) { + for (k in keyframeStyles) { newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1]; } @@ -434,19 +418,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ + var keyframeString, keyMill, trackDur, keyframePercent, keyframePropertyString, prop, i; // delete the current rule this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string - var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + keyframeString = "@-webkit-keyframes " + this.animationName + " {"; - for (var i = 0; i < this.propTweens.length; i++) { - var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); + for (i = 0; i < this.propTweens.length; i++) { + keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); // trackDur should be parseFloat rounded to significant digits - var trackDur = parseInt(this.trackDuration); - var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; - var keyframePropertyString = " " + keyframePercent + " {"; - for(var prop in this.propTweens[i].tweenData.tweenedProperties){ + trackDur = parseInt(this.trackDuration); + keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; + keyframePropertyString = " " + keyframePercent + " {"; + for(prop in this.propTweens[i].tweenData.tweenedProperties){ keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";"; } keyframePropertyString += "}"; @@ -461,7 +446,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ - var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + var currentStyleValue, currentAnimationNameString, newAnimationNames, currentAnimationDuration, newAnimationDuration, currentIterationCount; + var newIterationCount, initRule; + + currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if (currentStyleValue == null) { currentStyleValue = "1px"; } @@ -469,26 +457,26 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; - var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString; - var newAnimationNames = ""; + currentAnimationNameString = this.timelineTrack.animationNamesString; + newAnimationNames = ""; if(currentAnimationNameString.length == 0){ newAnimationNames = this.animationName; } else { newAnimationNames = currentAnimationNameString + "," + this.animationName; } - var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; - var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); - var newIterationCount = currentIterationCount + ",1"; + currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration; + currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count"); + newIterationCount = currentIterationCount + ",1"; - this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames; + this.timelineTrack.animationNamesString = newAnimationNames; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); - var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; + initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); } -- cgit v1.2.3 From 028e0a2ccde5458303d90a9dd6c4fde09b1b6565 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 3 Jul 2012 15:16:51 -0700 Subject: Remove Comment Signed-off-by: Kruti Shah --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index de2e5bb5..6463e396 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -421,7 +421,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { for (i = 0; i < this.propTweens.length; i++) { keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec); - // trackDur should be parseFloat rounded to significant digits trackDur = parseInt(this.trackDuration); keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; keyframePropertyString = " " + keyframePercent + " {"; -- cgit v1.2.3 From 8c087f7c13a2bd72e1640e99e339a74fc2250901 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 3 Jul 2012 15:47:50 -0700 Subject: Timeline: First pass at cleaning up TimelineTrack code. Changes propagated to PropertyTrack, TimelineTrack, and Tween classes. --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index c4571e9d..5c674c27 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -244,7 +244,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ 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); // Deprecated. + this.application.ninja.timeline.selectLayers([selectedIndex]); + this.application.ninja.timeline.updateStageSelection(); var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From 8a2a9cf8d43a1ba7e40c41619e7db9675f4cb195 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 9 Jul 2012 10:53:35 -0700 Subject: Refactoring Code Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 73 ++++++++++++++++++---- 1 file changed, 61 insertions(+), 12 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 6463e396..b46a6242 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { + /* Begin: Models */ hasTemplate:{ value: true }, @@ -155,6 +156,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + /* End: Models */ + + /* Begin: Draw Cycle */ prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); @@ -173,10 +177,16 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + /* End: Draw Cycle */ + + /* Begin: Event Handlers */ + handleClick:{ value:function (ev) { - var selectIndex , currentSelectedStyleIndex; + var selectIndex , + currentSelectedStyleIndex; + if (ev.shiftKey) { if (this.trackType == "position") { @@ -212,7 +222,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { handleNewPropTween:{ value:function (ev) { - var findXOffset, targetElementOffset, position; + var findXOffset, + targetElementOffset, + position; + if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) { this.insertPropTween(ev.offsetX); } else { @@ -235,6 +248,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + /* End: Event Handlers */ + + /* Begin: Controllers */ + getCurrentSelectedStyleIndex: { value: function(layerIndex) { var returnVal = false, @@ -253,7 +270,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { insertPropTween:{ value:function(clickPos){ - var selectedIndex, currentMillisecPerPixel, currentMillisec, propVal + var selectedIndex, + currentMillisecPerPixel, + currentMillisec, + propVal, + newTween; + selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.selectLayer(selectedIndex, true); @@ -261,7 +283,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; - var newTween = {}; + newTween = {}; newTween.tweenData = {}; newTween.tweenData.tweenedProperties = []; @@ -302,7 +324,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { tweensLength = this.propTweens.length - 1, prevTween, nextTween, - splitTweenIndex; + splitTweenIndex, + newTweenToInsert; for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; @@ -323,7 +346,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); - var newTweenToInsert = {}; + newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; newTweenToInsert.tweenData.keyFramePosition = position; @@ -347,8 +370,21 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { retrieveStoredStyleTweens:{ value:function(){ - var percentValue, fraction, splitValue, styleLength, firstChar, currProp, propVal ; - var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, j, k, i = 0; + var j,k,i,percentValue, + fraction, + splitValue, + styleLength, + firstChar, + currProp, + propVal , + currentMilliSec, + currentMilliSecPerPixel, + clickPosition, + tempTiming, + tempTimingFloat, + trackTiming, + keyframeStyles, + newTween; if (this.animatedElement !== undefined) { this.animationName = this.currentKeyframeRule.name; @@ -358,7 +394,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.nextKeyframe = 0; for (i = 0; this.currentKeyframeRule[i]; i++) { - var newTween = {}; + newTween = {}; newTween.tweenData = {}; styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; @@ -414,6 +450,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { updatePropKeyframeRule:{ value:function(){ + var keyframeString, + keyMill, + trackDur, + keyframePercent, + keyframePropertyString, + prop; + this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule); // build the new keyframe string @@ -438,8 +481,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ - var currentStyleValue, currentAnimationNameString, newAnimationNames, currentAnimationDuration, newAnimationDuration, currentIterationCount; - var newIterationCount, initRule; + var currentStyleValue, + currentAnimationNameString, + newAnimationNames, + currentAnimationDuration, + newAnimationDuration, + currentIterationCount, + newIterationCount, + initRule; currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if (currentStyleValue == null) { @@ -471,5 +520,5 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.insertPropTween(tweenEvent.offsetX); } } - /* ===- End Controllers ==== */ + /* End: Controllers */ }); -- cgit v1.2.3 From 6e29c88846e12757f127f0ce8e8cbb737ab8c880 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 9 Jul 2012 11:14:55 -0700 Subject: Adding comments Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 27 +++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b46a6242..dd440d9e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -9,11 +9,13 @@ var Component = require("montage/ui/component").Component; var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { - /* Begin: Models */ + hasTemplate:{ value: true }, + /* Begin: Models */ + _propTweenRepetition:{ value:null }, @@ -283,10 +285,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { currentMillisec = currentMillisecPerPixel * clickPos; this.trackDuration = currentMillisec; + /* Creating a newTween Object */ newTween = {}; newTween.tweenData = {}; newTween.tweenData.tweenedProperties = []; + /* Getting the Property Style for the animatedElement */ + propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if(propVal == null){ propVal = "1px"; @@ -294,6 +299,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; if (clickPos == 0) { + + /* Setting the tweenData Properties for the first Keyframe */ + newTween.tweenData.spanWidth = 0; newTween.tweenData.keyFramePosition = 0; newTween.tweenData.keyFrameMillisec = 0; @@ -327,13 +335,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { splitTweenIndex, newTweenToInsert; + /* Traverse through the property tweens array */ + for (i = 0; i < tweensLength; i++) { prevTween = this.propTweens[i].tweenData.keyFramePosition; nextTween = this.propTweens[i + 1].tweenData.keyFramePosition; if (position > prevTween && position < nextTween) { + /* Insert a new tween at this index */ splitTweenIndex = i + 1; + /* Update the next tween to have new span position and width */ + this.propTweens[i + 1].tweenData.spanPosition = position; this.propTweens[i + 1].spanPosition = position; this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - position; @@ -346,6 +359,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } this.propTweenRepetition.childComponents[nextComponentIndex].setData(); + /* Create a new Tween and splice it into the model */ newTweenToInsert = {}; newTweenToInsert.tweenData = {}; newTweenToInsert.tweenData.spanWidth = position - prevTween; @@ -393,12 +407,15 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); this.nextKeyframe = 0; + /* Traverse through the currentKeyFrameRule for the animatedElement */ + for (i = 0; this.currentKeyframeRule[i]; i++) { newTween = {}; newTween.tweenData = {}; styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; + /* Traversering through the style of the currentKeyFrameRule of the animatedElement */ for (j = 0; j < styleLength; j++) { firstChar = this.currentKeyframeRule[i].style[j].charAt(0); @@ -417,6 +434,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } if (this.currentKeyframeRule[i].keyText === "0%") { + + /* Setting the tweenData Property for only the first Keyframe */ newTween.tweenData.spanWidth = 0; newTween.tweenData.keyFramePosition = 0; newTween.tweenData.keyFrameMillisec = 0; @@ -425,6 +444,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.propTweens.push(newTween); } else { + tempTiming = trackTiming.split("s"); tempTimingFloat = parseFloat(tempTiming[0]); this.trackDuration = tempTimingFloat * 1000; @@ -481,6 +501,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { addPropAnimationRuleToElement:{ value:function(tweenEvent){ + + /* Adding the style property as an animation rule to the animatedElement */ + var currentStyleValue, currentAnimationNameString, newAnimationNames, @@ -490,6 +513,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newIterationCount, initRule; + /* Retrieveing the current style value on the animatedElement */ currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); if (currentStyleValue == null) { currentStyleValue = "1px"; @@ -515,6 +539,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards"); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); + /* Creating the animation rule */ initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertPropTween(tweenEvent.offsetX); -- cgit v1.2.3 From d874dda445a3baa2dd24b9554b6fc7f620dd5e89 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 9 Jul 2012 11:55:23 -0700 Subject: remove commas from var lines Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 5de49cd6..b2683d30 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -221,7 +221,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (this.propTweens.length < 1) { - selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID), + selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex); if (this.trackType == "style") { @@ -265,8 +265,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } while (obj = obj.offsetParent); } return curleft; - } - targetElementOffset = findXOffset(ev.currentTarget), + }; + targetElementOffset = findXOffset(ev.currentTarget); position = event.pageX - targetElementOffset; this.splitPropTweenAt(position - 18); @@ -437,7 +437,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween = {}; newTween.tweenData = {}; - styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = []; + styleLength = this.currentKeyframeRule[i].style.length; + keyframeStyles = []; /* Traversering through the style of the currentKeyFrameRule of the animatedElement */ for (j = 0; j < styleLength; j++) { -- cgit v1.2.3 From 7b32af1ebeec13f4186ba0a88a6d33362178d60f Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 10 Jul 2012 09:55:55 -0700 Subject: Adding Zoom Control to Property Tracks Signed-off-by: Kruti Shah --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 42 +++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b2683d30..8c8112ad 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -192,6 +192,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackID = this.timelineTrack.trackID; this.animatedElement = this.timelineTrack.animatedElement; this.ninjaStylesContoller = this.application.ninja.stylesController; + this.eventManager.addEventListener("tlZoomSlider", this, false); } }, @@ -274,6 +275,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { } }, + handleTlZoomSlider: { + value: function(event) { + + var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush; + var i = 0, + tweensLength = this.propTweens.length; + + for (i = 0; i < tweensLength; i++) { + + if (i === 0) { + // Exception: 0th item does not depend on anything + // If 0th tween is draggable, this will need to be fixed. + this.propTweens[i].tweenData.spanWidth=0; + this.propTweens[i].tweenData.spanPosition=0; + this.propTweens[i].tweenData.keyFramePosition=0; + this.propTweens[i].tweenData.keyFrameMillisec=0; + + } else { + var prevKeyFramePosition = this.propTweens[i - 1].tweenData.keyFramePosition, + myObj = {}, + thing = {}; + + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + currentMilliSec = this.propTweens[i].tweenData.keyFrameMillisec; + clickPos = currentMilliSec / currentMilliSecPerPixel; + + for (thing in this.propTweens[i].tweenData) { + myObj[thing] = this.propTweens[i].tweenData[thing]; + } + myObj.spanWidth = clickPos - prevKeyFramePosition; + myObj.keyFramePosition = clickPos; + myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); + + this.propTweens[i].tweenData = myObj; + } + } + } + }, + /* End: Event Handlers */ /* Begin: Controllers */ @@ -303,7 +343,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween; selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + this.application.ninja.timeline.selectLayers([selectedIndex]); currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From b3a1e8f3e71d5d2d13dbe52ad377eab391bf8a26 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 10 Jul 2012 11:14:48 -0700 Subject: Fix more missing char Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index b2683d30..4ff6a17a 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -303,7 +303,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween; selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayer(selectedIndex, true); + this.application.ninja.timeline.selectLayers(selectedIndex, true); currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From f4c9d9360918f41a8a067bd1d93d59982819938b Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 10 Jul 2012 11:29:49 -0700 Subject: Fix layer array Signed-off-by: Jonathan Duran --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 4ff6a17a..12e87636 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -303,7 +303,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween; selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.selectLayers(selectedIndex, true); + this.application.ninja.timeline.selectLayers([selectedIndex]); currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); currentMillisec = currentMillisecPerPixel * clickPos; -- cgit v1.2.3 From 15edcb5fe22793aab024c1ef7dde109b36977dd8 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 16 Jul 2012 09:20:10 -0700 Subject: Timeline: Disable drag-and-drop on subproperty keyframes. Better error handling. Fix some minor bugs. --- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 12e87636..9ee9b922 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -192,6 +192,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.trackID = this.timelineTrack.trackID; this.animatedElement = this.timelineTrack.animatedElement; this.ninjaStylesContoller = this.application.ninja.stylesController; + + // Drag and Drop event handlers + this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false); + this.element.addEventListener("dragend", this.handleKeyframeDragstart.bind(this), false); + this.element.addEventListener("drop", this.handleKeyframeDragstart.bind(this), false); } }, @@ -206,6 +211,13 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { /* End: Draw Cycle */ /* Begin: Event Handlers */ + + handleKeyframeDragstart: { + value: function(event) { + event.stopPropagation(); + return false; + } + }, handleClick:{ value:function (ev) { -- cgit v1.2.3