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 From c5d8780c797315d4bb40982770cf792a274f8932 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 18 Jul 2012 11:35:44 -0700 Subject: fixing the copyrights on the timeline branch pull request. Signed-off-by: Valerio Virgillito --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 23 +++++++++++----------- 1 file changed, 12 insertions(+), 11 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 e5ff1e95..35aa1dc5 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -1,24 +1,25 @@ /* -Copyright (c) 2012, Motorola Mobility, Inc +Copyright (c) 2012, Motorola Mobility LLC. All Rights Reserved. -BSD License. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - - Redistributions of source code must retain the above copyright notice, - this list of conditions and the following disclaimer. - - Redistributions in binary form must reproduce the above copyright - notice, this list of conditions and the following disclaimer in the - documentation and/or other materials provided with the distribution. - - Neither the name of Motorola Mobility nor the names of its contributors - may be used to endorse or promote products derived from this software - without specific prior written permission. +* Redistributions of source code must retain the above copyright notice, + this list of conditions and the following disclaimer. + +* Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +* Neither the name of Motorola Mobility LLC nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE -ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE +ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS -- cgit v1.2.3