From 38d8d4ea7d033b35f95e38ebb7d6abfd81bd2c69 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 29 Feb 2012 09:56:56 -0800 Subject: Timeline: document switching + new document. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 98 +++++++++++++++------- 1 file changed, 68 insertions(+), 30 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 01b03531..6a9e0140 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -28,7 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, set:function (newVal) { this._arrLayers = newVal; - this.application.ninja.currentDocument.tlArrLayers = newVal; + this.updateLayers(); } }, @@ -44,6 +44,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._layerRepetition = newVal; } }, + updateLayers : { + value: function() { + this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; + // this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; + console.log('inside of updateLayers '); + console.log(this.application.ninja.currentDocument.tlArrTracks); + + } + }, + boolUpdateLayers : { + value: true + }, _currentLayerNumber:{ value:0 @@ -100,7 +112,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, set:function (newVal) { this._arrTracks = newVal; - this.application.ninja.currentDocument.tlArrTracks = newVal; + this.updateLayers(); } }, @@ -182,7 +194,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleOnOpenDocument:{ value:function(){ + this.boolUpdateLayers = false; this.clearTimelinePanel(); + this.boolUpdateLayers = true; this.eventManager.addEventListener("deleteLayerClick", this, false); this.eventManager.addEventListener("newLayer", this, false); this.eventManager.addEventListener("deleteLayer", this, false); @@ -204,6 +218,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleCloseDocument: { value: function(event) { this.clearTimelinePanel(); + this.arrTracks = []; + this.arrLayers = []; } }, @@ -245,31 +261,55 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { initTimelineView:{ value:function () { var myIndex; - this.drawTimeMarkers(); + this._hashKey = "123"; + + + // Document switching + // Check to see if we have saved timeline information in the currentDocument. + if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { + // No, we have no information stored. Create it. + console.log('newfile!') + this.application.ninja.currentDocument.isTimelineInitialized = true; + this.application.ninja.currentDocument.tlArrLayers = []; + this.application.ninja.currentDocument.tlArrTracks = []; + _firstLayerDraw = false; + if(!this.application.ninja.documentController.creatingNewFile){ + if(this.application.ninja.currentDocument.documentRoot.children[0]){ + myIndex=0; + while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) + { + this._openDoc=true; + NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) + myIndex++; + } + } + else{ + NJevent('newLayer', this._hashKey); + this.selectLayer(0); + } + }else{ + NJevent('newLayer', this._hashKey); + this.selectLayer(0); + + } + _firstLayerDraw = true; + this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; + } else { + // we do have information stored. Use it. + console.log('oldfile!') + console.log("tlArrLayers: " , this.application.ninja.currentDocument.tlArrLayers); + console.log("tlArrTracks: " , this.application.ninja.currentDocument.tlArrTracks); + this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; + this.arrTracks = this.application.ninja.currentDocument.tlArrTracks; + } + + // Redraw all the things + this.layerRepetition.needsDraw = true; + this.trackRepetition.needsDraw = true; + this.needsDraw = true; - this._hashKey = "123"; - _firstLayerDraw = false; - if(!this.application.ninja.documentController.creatingNewFile){ - if(this.application.ninja.currentDocument.documentRoot.children[0]){ - myIndex=0; - while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) - { - this._openDoc=true; - NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) - myIndex++; - } - } - else{ - NJevent('newLayer', this._hashKey); - this.selectLayer(0); - } - }else{ - NJevent('newLayer', this._hashKey); - this.selectLayer(0); - } - _firstLayerDraw = true; } }, @@ -299,8 +339,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashTrackInstance = null; this.hashLayerNumber = null; this.hashElementMapToLayer = null; - this.arrTracks = []; - this.arrLayers = []; + if (!this.boolUpdateLayers) { + + } + this.currentLayerNumber = 0; this.currentLayerSelected = false; this.currentTrackSelected = false; @@ -311,10 +353,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.end_hottext.value = 25; this.updateTrackContainerWidth(); - // Redraw all the things - this.layerRepetition.needsDraw = true; - this.trackRepetition.needsDraw = true; - this.needsDraw = true; } }, -- cgit v1.2.3 From 8ccc989388bfbcb0d5713c44b9c97ef5ce45d31c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Wed, 29 Feb 2012 12:30:12 -0800 Subject: Timeline: Changed the variables names to resolve issues.And removed the alert. Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 4 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 45 ++++++++++------------ 2 files changed, 23 insertions(+), 26 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 81415951..e92c83db 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -728,7 +728,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this.currentLayerSelected.elementsList[0]!==undefined){ if(this.currentTrackSelected.isTrackAnimated){ this.application.ninja.stage.clearDrawingCanvas(); - alert("cannot add elements to a layer with animated element");/* check how to clear the canvas*/ + console.log("cannot add elements to a layer with animated element"); return; }else{ this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); @@ -738,12 +738,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); this.currentLayerSelected.elementsList.push(event.detail); } - } }, handleElementDeleted:{ value:function (event) { + var length; this.deleteElement = event.detail; length = this.currentLayerSelected.elementsList.length - 1; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bf97c0fd..a2aaa550 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -459,7 +459,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { - var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; + var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute + var animationTiming,trackTiming,currentMilliSec,currentMilliSecPerPixel,clickPosition,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.arrLayers[selectedIndex].created=true; @@ -467,23 +468,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(this.animatedElement!==undefined){ this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); if(this.animationName){ - this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - this.trackDuration = this.animationDuration.split("s"); - this.currentMilliSec = this.trackDuration[0] * 1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + animationTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + trackTiming = animationTiming.split("s"); + currentMilliSec = trackTiming[0] * 1000; + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPosition = currentMilliSec / currentMilliSecPerPixel; this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - while (this.currentKeyframeRule[i]) { + for (i =0; this.currentKeyframeRule[i] ;i++) { var newTween = {}; offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); topOffSetAttribute = offsetAttribute[3].split("px"); leftOffsetAttribute = offsetAttribute[5].split("px"); - parseInt(topOffSetAttribute[0]); - parseInt(leftOffsetAttribute[0]); + var tempTopOffset = parseInt(topOffSetAttribute[0]); + var tempLeftOffset =parseInt(leftOffsetAttribute[0]); if (this.currentKeyframeRule[i].keyText === "0%") { newTween.spanWidth = 0; @@ -492,8 +493,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenID = 0; newTween.spanPosition = 0; newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = topOffSetAttribute[0]; - newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; + newTween.tweenedProperties["top"] = tempTopOffset; + newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } @@ -501,30 +502,26 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { percentValue = this.currentKeyframeRule[i].keyText; splitValue = percentValue.split("%"); fraction = splitValue[0] / 100; - this.currentMilliSec = fraction * this.trackDuration[0] * 1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = this.clickPos; - newTween.keyFrameMillisec = this.currentMilliSec; + currentMilliSec = fraction * trackTiming[0] * 1000; + currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + clickPosition = currentMilliSec / currentMilliSecPerPixel; + newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = clickPosition; + newTween.keyFrameMillisec = currentMilliSec; newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = this.clickPos - newTween.spanWidth; + newTween.spanPosition =clickPosition - newTween.spanWidth; newTween.tweenedProperties=[]; - newTween.tweenedProperties["top"] = topOffSetAttribute[0]; - newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; + newTween.tweenedProperties["top"] = tempTopOffset; + newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } - i++; this.nextKeyframe += 1; } this.isTrackAnimated = true; } } - else{ - return; - } } }, -- cgit v1.2.3 From 6e28beaca4ebc740fdc637d65f0b966c59fd05d2 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Wed, 29 Feb 2012 12:36:46 -0800 Subject: TImeline: Cleanup Signed-off-by: Kruti Shah --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a2aaa550..7394d42e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -476,7 +476,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - for (i =0; this.currentKeyframeRule[i] ;i++) { + var currentKeyFrameRuleLength = this.currentKeyframeRule.length; + + for (i =0; i --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 7394d42e..f8f4f6b8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -476,9 +476,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - var currentKeyFrameRuleLength = this.currentKeyframeRule.length; - - for (i =0; i
-
Master Layer
+
Master Layer
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 67ff3c02..6d23453d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -28,7 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, set:function (newVal) { this._arrLayers = newVal; - this.updateLayers(); + this._cacheArrays(); } }, @@ -44,16 +44,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._layerRepetition = newVal; } }, - updateLayers : { + _cacheArrays : { value: function() { - this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - // this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; - console.log('inside of updateLayers '); - console.log(this.application.ninja.currentDocument.tlArrTracks); - + // Cache this.arrLayers and this.arrTracks. + console.log('cacheArrays ' + this._boolCacheArrays) + if (this._boolCacheArrays) { + console.log('caching arrays for ', this.application.ninja.currentDocument.name); + this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; + this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; + } } }, - boolUpdateLayers : { + + // Set to false to skip array caching array sets in current document + _boolCacheArrays : { value: true }, @@ -112,7 +116,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, set:function (newVal) { this._arrTracks = newVal; - this.updateLayers(); + this._cacheArrays(); } }, @@ -192,43 +196,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - handleOnOpenDocument:{ - value:function(){ - this.boolUpdateLayers = false; - this.clearTimelinePanel(); - this.boolUpdateLayers = true; - this.eventManager.addEventListener("deleteLayerClick", this, false); - this.eventManager.addEventListener("newLayer", this, false); - this.eventManager.addEventListener("deleteLayer", this, false); - this.eventManager.addEventListener("layerBinding", this, false); - this.eventManager.addEventListener("elementAdded", this, false); - this.eventManager.addEventListener("elementDeleted", this, false); - this.eventManager.addEventListener("deleteSelection", this, false); - this.eventManager.addEventListener("selectionChange", this, true); - this.hashInstance = this.createLayerHashTable(); - this.hashTrackInstance = this.createTrackHashTable(); - this.hashLayerNumber = this.createLayerNumberHash(); - this.hashElementMapToLayer = this.createElementMapToLayer(); - this.initTimelineView(); - - - } - }, - - handleCloseDocument: { - value: function(event) { - this.clearTimelinePanel(); - this.arrTracks = []; - this.arrLayers = []; - } - }, - - handleSwitchDocument : { - value: function(event) { - // Handle document change. - this.handleOnOpenDocument(); - } - }, willDraw:{ value:function () { @@ -241,6 +208,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === END: Draw cycle === */ /* === BEGIN: Controllers === */ + + // Bind all document-specific events (pass in true to unbind) + _bindDocumentEvents : { + value: function(boolUnbind) { + var arrEvents = ["deleteLayerClick", + "newLayer", + "deleteLayer", + "layerBinding", + "elementAdded", + "elementDeleted", + "deleteSelection", + "selectionChange"], + i, + arrEventsLength = arrEvents.length; + + if (boolUnbind) { + for (i = 0; i < arrEventsLength; i++) { + this.eventManager.removeEventListener(arrEvents[i], this, false); + } + } else { + for (i = 0; i < arrEventsLength; i++) { + this.eventManager.addEventListener(arrEvents[i], this, false); + } + } + } + }, + initTimeline : { value: function() { // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. @@ -258,7 +252,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - initTimelineView:{ + + initTimelineForDocument:{ value:function () { var myIndex; this.drawTimeMarkers(); @@ -269,10 +264,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Check to see if we have saved timeline information in the currentDocument. if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { // No, we have no information stored. Create it. - console.log('newfile!') + console.log('newfile ' + this.application.ninja.currentDocument.name) this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; this.application.ninja.currentDocument.tlArrTracks = []; + + + // Loop through the DOM of the document to find layers and animations. + // Fire off events as they are found. _firstLayerDraw = false; if(!this.application.ninja.documentController.creatingNewFile){ if(this.application.ninja.currentDocument.documentRoot.children[0]){ @@ -282,7 +281,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._openDoc=true; NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) myIndex++; - } + k } } else{ NJevent('newLayer', this._hashKey); @@ -294,14 +293,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } _firstLayerDraw = true; + + // After recreating the tracks and layers, store the result in the currentDocument. this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; + this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; + } else { // we do have information stored. Use it. - console.log('oldfile!') - console.log("tlArrLayers: " , this.application.ninja.currentDocument.tlArrLayers); - console.log("tlArrTracks: " , this.application.ninja.currentDocument.tlArrTracks); + console.log('oldfile ' + this.application.ninja.currentDocument.name) + this._boolCacheArrays = false; + this.arrLayers = []; + this.arrTracks = []; this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.arrTracks = this.application.ninja.currentDocument.tlArrTracks; + this._boolCacheArrays = true; } // Redraw all the things @@ -316,14 +321,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { clearTimelinePanel : { value: function() { // Remove events - this.eventManager.removeEventListener("deleteLayerClick", this, false); - this.eventManager.removeEventListener("newLayer", this, false); - this.eventManager.removeEventListener("deleteLayer", this, false); - this.eventManager.removeEventListener("layerBinding", this, false); - this.eventManager.removeEventListener("elementAdded", this, false); - this.eventManager.removeEventListener("elementDeleted", this, false); - this.eventManager.removeEventListener("deleteSelection", this, false); - this.eventManager.removeEventListener("selectionChange", this, true); + this._bindDocumentEvents(true); // Remove every event listener for every tween in TimelineTrack this.deselectTweens(); @@ -339,9 +337,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashTrackInstance = null; this.hashLayerNumber = null; this.hashElementMapToLayer = null; - if (!this.boolUpdateLayers) { - - } + this.arrTracks = []; + this.arrLayers = []; this.currentLayerNumber = 0; this.currentLayerSelected = false; @@ -356,6 +353,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + + handleOnOpenDocument:{ + value:function(){ + + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + this._bindDocumentEvents(); + + this.hashInstance = this.createLayerHashTable(); + this.hashTrackInstance = this.createTrackHashTable(); + this.hashLayerNumber = this.createLayerNumberHash(); + this.hashElementMapToLayer = this.createElementMapToLayer(); + this.initTimelineForDocument(); + + + } + }, + + handleCloseDocument: { + value: function(event) { + this.clearTimelinePanel(); + } + }, + + handleSwitchDocument : { + value: function(event) { + // Handle document change. + this.handleOnOpenDocument(); + } + }, + updateTrackContainerWidth:{ value: function(){ this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; @@ -440,6 +469,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayerClick:{ value:function (event) { + console.log('handleDeleteLayerClick called') if (this.arrLayers.length === 1) { // do not delete last layer return; -- cgit v1.2.3 From a725643eba157b3c37d9acd13c6fdd48379bb0df Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 10:38:47 -0800 Subject: Timeline: Merge. Set collapser heights. --- js/panels/Timeline/Layer.reel/Layer.html | 2 + js/panels/Timeline/Layer.reel/Layer.js | 12 +++--- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 47 ++++++++++++++++++---- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 2 +- 4 files changed, 48 insertions(+), 15 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 0bd448f7..cba963b6 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -226,6 +226,8 @@ } } } + + } diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index d50360e6..3e016c0c 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -418,7 +418,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isMainCollapsed = that.mainCollapser.isCollapsed; } - this.mainCollapser.needsDraw = true; + //this.mainCollapser.needsDraw = true; this.positionCollapser.clicker = this.clickerPosition; this.positionCollapser.myContent = this.contentPosition; @@ -437,7 +437,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isPositionCollapsed = that.positionCollapser.isCollapsed; } - this.positionCollapser.needsDraw = true; + //this.positionCollapser.needsDraw = true; this.transformCollapser.clicker = this.clickerTransform; this.transformCollapser.myContent = this.contentTransform; @@ -456,13 +456,13 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isTransformCollapsed = that.transformCollapser.isCollapsed; } - this.transformCollapser.needsDraw = true; + //this.transformCollapser.needsDraw = true; this.styleCollapser.clicker = this.clickerStyle; this.styleCollapser.myContent = this.contentStyle; this.styleCollapser.element = this.element; this.styleCollapser.isCollapsed = this.isStyleCollapsed; - this.styleCollapser.contentHeight = 20; + this.styleCollapser.contentHeight = 0; this.styleCollapser.isAnimated = true; this.styleCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); @@ -474,7 +474,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isStyleCollapsed = that.styleCollapser.isCollapsed; } - this.styleCollapser.needsDraw = true; + //this.styleCollapser.needsDraw = true; // Add event listeners to add and delete style buttons this.buttonAddStyle.identifier = "addStyle"; @@ -485,7 +485,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Add mousedown listener to set isActive this.element.addEventListener("mousedown", this, false); - //this.element.addEventListener("click", this, false); + this.element.addEventListener("click", this, false); } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index ec9555fe..59306705 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -47,9 +47,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _cacheArrays : { value: function() { // Cache this.arrLayers and this.arrTracks. - console.log('cacheArrays ' + this._boolCacheArrays) + this.log('cacheArrays ' + this._boolCacheArrays) if (this._boolCacheArrays) { - console.log('caching arrays for ', this.application.ninja.currentDocument.name); + this.log('caching arrays for ', this.application.ninja.currentDocument.name); this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; } @@ -264,7 +264,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Check to see if we have saved timeline information in the currentDocument. if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { // No, we have no information stored. Create it. - console.log('newfile ' + this.application.ninja.currentDocument.name) + this.log('newfile ' + this.application.ninja.currentDocument.name) this.application.ninja.currentDocument.isTimelineInitialized = true; this.application.ninja.currentDocument.tlArrLayers = []; this.application.ninja.currentDocument.tlArrTracks = []; @@ -281,7 +281,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._openDoc=true; NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) myIndex++; - k } + } } else{ NJevent('newLayer', this._hashKey); @@ -300,7 +300,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // we do have information stored. Use it. - console.log('oldfile ' + this.application.ninja.currentDocument.name) + this.log('oldfile ' + this.application.ninja.currentDocument.name) this._boolCacheArrays = false; this.arrLayers = []; this.arrTracks = []; @@ -469,7 +469,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayerClick:{ value:function (event) { - console.log('handleDeleteLayerClick called') + this.log('handleDeleteLayerClick called') if (this.arrLayers.length === 1) { // do not delete last layer return; @@ -795,7 +795,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this.currentLayerSelected.elementsList[0]!==undefined){ if(this.currentTrackSelected.isTrackAnimated){ this.application.ninja.stage.clearDrawingCanvas(); - console.log("cannot add elements to a layer with animated element"); + this.log("cannot add elements to a layer with animated element"); return; }else{ this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); @@ -1167,7 +1167,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }); return command; } - } + }, /* === END: Controllers === */ + + /* === BEGIN: Logging routines === */ + _boolDebug: { + enumerable: false, + value: false // set to true to enable debugging to console; false for turning off all debugging. + }, + boolDebug: { + get: function() { + return this._boolDebug; + }, + set: function(boolDebugSwitch) { + this._boolDebug = boolDebugSwitch; + } + }, + log: { + value: function(strMessage) { + if (this.boolDebug) { + console.log(this.getLineNumber() + ": " + strMessage); + } + } + }, + getLineNumber: { + value: function() { + try { + throw new Error('bazinga') + }catch(e){ + return e.stack.split("at")[3].split(":")[2]; + } + } + } + /* === END: Logging routines === */ }); diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f8f4f6b8..90b685dc 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -626,7 +626,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; - this._styleCollapser.contentHeight = 20; + this._styleCollapser.contentHeight = 0; this._styleCollapser.isLabelClickable = false; this._styleCollapser.element = this.element; this._styleCollapser.isCollapsed = this.isStyleCollapsed; -- cgit v1.2.3 From b66fb719d358383f9401ba8502061f792dee34dc Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 10:51:01 -0800 Subject: Timeline: Track Duration Fix Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index f8f4f6b8..8f867d35 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -460,7 +460,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute - var animationTiming,trackTiming,currentMilliSec,currentMilliSecPerPixel,clickPosition,i = 0; + var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); this.application.ninja.timeline.arrLayers[selectedIndex].created=true; @@ -468,11 +468,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(this.animatedElement!==undefined){ this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); if(this.animationName){ - animationTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - trackTiming = animationTiming.split("s"); - currentMilliSec = trackTiming[0] * 1000; - currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - clickPosition = currentMilliSec / currentMilliSecPerPixel; + trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); this.nextKeyframe = 0; this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); @@ -500,10 +496,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } else { + tempTiming = trackTiming.split("s"); + tempTimingInt = parseInt(tempTiming[0]); + this.trackDuration = tempTimingInt *1000; percentValue = this.currentKeyframeRule[i].keyText; splitValue = percentValue.split("%"); fraction = splitValue[0] / 100; - currentMilliSec = fraction * trackTiming[0] * 1000; + currentMilliSec = fraction * this.trackDuration; currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); clickPosition = currentMilliSec / currentMilliSecPerPixel; newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; -- cgit v1.2.3 From 219f3a05e8a0fa994e301bb548d0d623c0208e81 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 11:00:18 -0800 Subject: Update master track on duration change instead of tween add. Adds support for updating the master track duration on file open as well as when adding tweens to already opened files. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 8f867d35..1edc04ba 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -229,6 +229,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function (val) { this._trackDuration = val; + if(this._trackDuration > this.application.ninja.timeline.masterDuration){ + this.application.ninja.timeline.masterDuration = this._trackDuration; + } } }, @@ -413,9 +416,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; - if(this.trackDuration > this.application.ninja.timeline.masterDuration){ - this.application.ninja.timeline.masterDuration = this.trackDuration; - } + var newTween = {}; -- cgit v1.2.3 From 51206a5b16e299f7ec8291d899277f7e4c95bb25 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 11:46:36 -0800 Subject: Set doc dirty flag when adding tweens or modifying animations Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 1edc04ba..88c78411 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -408,16 +408,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { insertTween:{ value:function (clickPos) { - // calculate new tween's keyframe milliseconds by clickPos var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); var currentMillisec = currentMillisecPerPixel * clickPos; // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; - - - var newTween = {}; if (clickPos == 0) { @@ -445,9 +441,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // update the animation duration var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); - this.nextKeyframe += 1; } + this.application.ninja.documentController.activeDocument.needsSave = true; } }, @@ -564,6 +560,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { keyframeString += " }"; // set the keyframe string as the new rule this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString); + this.application.ninja.documentController.activeDocument.needsSave = true; } }, -- cgit v1.2.3 From 4a4b4e69ce101b22a85d16ece2dd8034c242654c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 12:01:44 -0800 Subject: Timeline: efficiency improvements to collapser. Document switching. --- js/panels/Timeline/Collapser.js | 5 ++ js/panels/Timeline/Layer.reel/Layer.html | 12 ++-- js/panels/Timeline/Layer.reel/Layer.js | 10 +-- js/panels/Timeline/Layer.reel/css/Layer.css | 73 +++++++++++----------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 2 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 19 +++--- 6 files changed, 62 insertions(+), 59 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 5de884a9..ad490c2e 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -184,6 +184,10 @@ var Montage = require("montage/core/core").Montage, // Get the original value of the overflow property: this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); + /* + * Removed because of expense. This disables the feature of having the + * component dynamically expand/collapse the content on init based on properties; + * Now default state of component must be set in CSS. // If the content area is supposed to start out collapsed: if (this.isCollapsed) { this.myContent.style.height = "0px"; @@ -198,6 +202,7 @@ var Montage = require("montage/core/core").Montage, this.myContent.classList.remove(this.collapsedClass); this.clicker.classList.remove(this.collapsedClass); } + */ } }, draw: { diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index cba963b6..14315f8d 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -243,9 +243,9 @@
Position - +
-
+
X
@@ -259,9 +259,9 @@
Transform - +
-
+
Scale X
@@ -288,11 +288,11 @@
Style - +
-
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 3e016c0c..94d1f7e9 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -403,7 +403,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.mainCollapser.myContent = this.myContent; this.mainCollapser.contentHeight = 60; this.myContent.style.height = "0px"; - this.mainCollapser.element = this.element; + this.mainCollapser.element = this.myContent; //this.mainCollapser.isCollapsedAtStart = true; this.mainCollapser.isCollapsed = this.isMainCollapsed; this.mainCollapser.isAnimated = true; @@ -422,8 +422,8 @@ var Layer = exports.Layer = Montage.create(Component, { this.positionCollapser.clicker = this.clickerPosition; this.positionCollapser.myContent = this.contentPosition; - this.positionCollapser.element = this.element; - this.positionCollapser.contentHeight = 60; + this.positionCollapser.element = this.contentPosition; + this.positionCollapser.contentHeight = 40; // this.positionCollapser.isCollapsedAtStart = true; this.positionCollapser.isCollapsed = this.isPositionCollapsed; this.positionCollapser.isAnimated = true; @@ -441,7 +441,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.transformCollapser.clicker = this.clickerTransform; this.transformCollapser.myContent = this.contentTransform; - this.transformCollapser.element = this.element; + this.transformCollapser.element = this.contentTransform; this.transformCollapser.contentHeight = 100; // this.transformCollapser.isCollapsedAtStart = true; this.transformCollapser.isCollapsed = this.isTransformCollapsed; @@ -460,7 +460,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.clicker = this.clickerStyle; this.styleCollapser.myContent = this.contentStyle; - this.styleCollapser.element = this.element; + this.styleCollapser.element = this.contentStyle; this.styleCollapser.isCollapsed = this.isStyleCollapsed; this.styleCollapser.contentHeight = 0; this.styleCollapser.isAnimated = true; diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 18d0a5e3..8e36c2db 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -4,11 +4,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - /* Layer.scss * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css. */ -/* line 16, ../scss/Layer.scss */ +/* line 22, ../scss/Layer.scss */ .layerLabel { width: 100%; color: white; @@ -20,13 +19,13 @@ -webkit-box-orient: horizontal; } -/* line 26, ../scss/Layer.scss */ +/* line 32, ../scss/Layer.scss */ .layerLabel.layerSelected { background-color: #b2b2b2; color: #242424; } -/* line 30, ../scss/Layer.scss */ +/* line 36, ../scss/Layer.scss */ .layerLabel { width: 100%; height: 18px; @@ -35,7 +34,7 @@ -webkit-box-flex: 1; } -/* line 37, ../scss/Layer.scss */ +/* line 43, ../scss/Layer.scss */ .layerDisclosure { background-image: url("../images/panelDisclosureIcon.png"); background-repeat: no-repeat; @@ -49,7 +48,7 @@ -webkit-box-flex: 0; } -/* line 50, ../scss/Layer.scss */ +/* line 56, ../scss/Layer.scss */ .layerHide { background-image: url("../images/eye.png"); background-repeat: no-repeat; @@ -60,7 +59,7 @@ -webkit-box-flex: 0; } -/* line 59, ../scss/Layer.scss */ +/* line 65, ../scss/Layer.scss */ .layerLock { background-image: url("../images/lock_open.png"); background-repeat: no-repeat; @@ -72,7 +71,7 @@ } /******************************************/ -/* line 71, ../scss/Layer.scss */ +/* line 77, ../scss/Layer.scss */ .container-layer { background-color: #474747; color: white; @@ -80,18 +79,18 @@ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } -/* line 77, ../scss/Layer.scss */ +/* line 83, ../scss/Layer.scss */ .selected .container-layer { background-color: #474747; } -/* line 80, ../scss/Layer.scss */ +/* line 86, ../scss/Layer.scss */ .selected .container-layer .label-layer { background-color: #b2b2b2; color: #242424; } -/* line 85, ../scss/Layer.scss */ +/* line 91, ../scss/Layer.scss */ .userlayers .collapsible-label { display: block; width: 100px; @@ -105,25 +104,25 @@ text-overflow: ellipsis; } -/* line 97, ../scss/Layer.scss */ +/* line 103, ../scss/Layer.scss */ .layerSelected .label-layer { background-color: #b2b2b2; color: #242424; } -/* line 101, ../scss/Layer.scss */ +/* line 107, ../scss/Layer.scss */ .content-layer { background-color: #474747; color: white; } -/* line 105, ../scss/Layer.scss */ +/* line 111, ../scss/Layer.scss */ .content-layer .collapsible-label { background-position: 14px 5px; border-width: 0px; } -/* line 113, ../scss/Layer.scss */ +/* line 119, ../scss/Layer.scss */ .label-layer, .label-position, .label-transform, @@ -134,13 +133,13 @@ cursor: pointer; } -/* line 120, ../scss/Layer.scss */ +/* line 126, ../scss/Layer.scss */ .content-layer .collapsible-label, .content-layer .collapsible-content { font-size: 11px; } -/* line 124, ../scss/Layer.scss */ +/* line 130, ../scss/Layer.scss */ .collapsible-clicker { position: absolute; width: 10px; @@ -153,23 +152,23 @@ background-repeat: no-repeat; } -/* line 135, ../scss/Layer.scss */ +/* line 141, ../scss/Layer.scss */ .collapsible-clicker.collapsible-collapsed { background-image: url(../images/icon-collapsed.png); } -/* line 138, ../scss/Layer.scss */ +/* line 144, ../scss/Layer.scss */ .collapsible-content .collapsible-clicker { left: 12px; } -/* line 141, ../scss/Layer.scss */ -.content-layer.collapsible-collapsed { +/* line 147, ../scss/Layer.scss */ +.container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } -/* line 147, ../scss/Layer.scss */ +/* line 153, ../scss/Layer.scss */ .label-layer .cssbutton, .label-style .cssbutton { width: 14px; @@ -179,21 +178,21 @@ background-repeat: no-repeat; } -/* line 154, ../scss/Layer.scss */ +/* line 160, ../scss/Layer.scss */ .label-layer .button-lock { background-image: url(../images/icon-lock.png); top: 3px; right: 27px; } -/* line 159, ../scss/Layer.scss */ +/* line 165, ../scss/Layer.scss */ .label-layer .button-visible { background-image: url(../images/icon-eye.png); top: 3px; right: 7px; } -/* line 164, ../scss/Layer.scss */ +/* line 170, ../scss/Layer.scss */ .label-style .button-add { background-image: url(../images/icon-plus.png); width: 15px; @@ -202,7 +201,7 @@ right: 11px; } -/* line 171, ../scss/Layer.scss */ +/* line 177, ../scss/Layer.scss */ .label-style .button-delete { background-image: url(../images/icon-minus.png); width: 15px; @@ -211,17 +210,17 @@ right: 31px; } -/* line 178, ../scss/Layer.scss */ +/* line 184, ../scss/Layer.scss */ .collapsible-content .layout-table { width: 99.9%; } -/* line 181, ../scss/Layer.scss */ +/* line 187, ../scss/Layer.scss */ .content-layer .collapsible-content { padding-left: 30px; } -/* line 184, ../scss/Layer.scss */ +/* line 190, ../scss/Layer.scss */ .collapsible-content .collapsible-content .layout-table .layout-row .layout-cell { width: 40%; height: 20px; @@ -230,24 +229,24 @@ text-align: left; } -/* line 191, ../scss/Layer.scss */ +/* line 197, ../scss/Layer.scss */ .collapsible-content .layout-table:first-child { border-top: 1px solid #505050; } -/* line 195, ../scss/Layer.scss */ +/* line 201, ../scss/Layer.scss */ .collapsible-content .hottextunit { width: auto; } -/* line 198, ../scss/Layer.scss */ +/* line 204, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 206, ../scss/Layer.scss */ +/* line 212, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -259,24 +258,24 @@ text-overflow: clip; } -/* line 217, ../scss/Layer.scss */ +/* line 223, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 222, ../scss/Layer.scss */ +/* line 228, ../scss/Layer.scss */ .content-style .item-template { display: none; } -/* line 225, ../scss/Layer.scss */ +/* line 231, ../scss/Layer.scss */ .content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -/* line 229, ../scss/Layer.scss */ +/* line 235, ../scss/Layer.scss */ .style-row { height: 20px; } diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index 1e574cc0..12b6e599 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -144,7 +144,7 @@ .collapsible-content .collapsible-clicker { left: 12px; } -.content-layer.collapsible-collapsed { +.container-layer .collapsible-content.collapsible-collapsed { height: 0px; overflow: hidden; } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 90b685dc..4a3d7a44 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -589,55 +589,54 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.myContent = this.myContent; this._mainCollapser.contentHeight = 60; this._mainCollapser.isLabelClickable = false; - this._mainCollapser.element = this.element; + this._mainCollapser.element = this.myContent; this._mainCollapser.isCollapsed = this.isMainCollapsed; this._mainCollapser.isAnimated = true; this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; - this._mainCollapser.needsDraw = true; + //this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); this._positionCollapser.clicker = this.labelPosition; this._positionCollapser.myContent = this.contentPosition; - this._positionCollapser.contentHeight = 60; + this._positionCollapser.contentHeight = 40; this._positionCollapser.isLabelClickable = true; - this._positionCollapser.element = this.element; + this._positionCollapser.element = this.contentPosition; this._positionCollapser.isCollapsed = this.isPositionCollapsed; this._positionCollapser.isAnimated = true; this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; }; - this._positionCollapser.needsDraw = true; + //this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); this._transformCollapser.clicker = this.labelTransform; this._transformCollapser.myContent = this.contentTransform; this._transformCollapser.contentHeight = 100; this._transformCollapser.isLabelClickable = false; - this._transformCollapser.element = this.element; + this._transformCollapser.element = this.contentTransform; this._transformCollapser.isCollapsed = this.isTransformCollapsed; this._transformCollapser.isAnimated = true; this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; }; - this._transformCollapser.needsDraw = true; + //this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; this._styleCollapser.contentHeight = 0; this._styleCollapser.isLabelClickable = false; - this._styleCollapser.element = this.element; + this._styleCollapser.element = this.contentStyles; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; }; - this._styleCollapser.needsDraw = true; + //this._styleCollapser.needsDraw = true; // Register event handler for layer events. - var that = this; defaultEventManager.addEventListener("layerEvent", this, false); } -- cgit v1.2.3 From 5425be91e7125c22955b4459a62412ff574e49a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:11:48 -0800 Subject: Timeline: Fix for animation iteration count Add default webkit css properties to allow animations with integer iteration counts. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 74a7f962..296af8f8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -530,7 +530,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animationName = "animation_" + this.animatedElement.classList[0]; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertTween(tweenEvent.offsetX