diff options
Diffstat (limited to 'js/panels/Timeline')
3 files changed, 85 insertions, 71 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 65d2fa7b..1aa9a725 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -300,7 +300,7 @@ | |||
300 | </div> | 300 | </div> |
301 | </div> | 301 | </div> |
302 | 302 | ||
303 | <div id="layer_resizer" class="layerresizer"></div> | 303 | <div data-montage-id="layer_resizer" class="layerresizer"></div> |
304 | 304 | ||
305 | <div id="timeline_rightpane" class="tl_rightpane"> | 305 | <div id="timeline_rightpane" class="tl_rightpane"> |
306 | <div id="right_inside" class="rightinside"> | 306 | <div id="right_inside" class="rightinside"> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9519730e..d7ce7079 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -228,15 +228,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
228 | 228 | ||
229 | this._hashKey = "123"; | 229 | this._hashKey = "123"; |
230 | _firstLayerDraw = false; | 230 | _firstLayerDraw = false; |
231 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 231 | if(!this.application.ninja.documentController.creatingNewFile){ |
232 | myIndex=0; | 232 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
233 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) | 233 | myIndex=0; |
234 | { | 234 | while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) |
235 | this._openDoc=true; | 235 | { |
236 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | 236 | this._openDoc=true; |
237 | // this.selectLayer(myIndex); | 237 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) |
238 | // TimelineTrack.retrieveStoredTweens(); | 238 | myIndex++; |
239 | myIndex++; | 239 | } |
240 | } | ||
241 | else{ | ||
242 | NJevent('newLayer', this._hashKey); | ||
243 | this.selectLayer(0); | ||
240 | } | 244 | } |
241 | }else{ | 245 | }else{ |
242 | NJevent('newLayer', this._hashKey); | 246 | NJevent('newLayer', this._hashKey); |
@@ -488,6 +492,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
488 | thingToPush.elementsList = []; | 492 | thingToPush.elementsList = []; |
489 | thingToPush.deleted = false; | 493 | thingToPush.deleted = false; |
490 | thingToPush.isSelected = false; | 494 | thingToPush.isSelected = false; |
495 | thingToPush.created=false; | ||
491 | if (_firstLayerDraw) { | 496 | if (_firstLayerDraw) { |
492 | 497 | ||
493 | this.application.ninja.currentSelectedContainer.uuid=this._hashKey; | 498 | this.application.ninja.currentSelectedContainer.uuid=this._hashKey; |
@@ -498,7 +503,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
498 | if(this._openDoc){ | 503 | if(this._openDoc){ |
499 | event.detail.ele.uuid =nj.generateRandom(); | 504 | event.detail.ele.uuid =nj.generateRandom(); |
500 | thingToPush.elementsList.push(event.detail.ele); | 505 | thingToPush.elementsList.push(event.detail.ele); |
501 | this._openDoc=false; | ||
502 | } | 506 | } |
503 | 507 | ||
504 | newTrack.trackID = this.currentLayerNumber; | 508 | newTrack.trackID = this.currentLayerNumber; |
@@ -544,6 +548,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
544 | this.selectLayer(0); | 548 | this.selectLayer(0); |
545 | 549 | ||
546 | } | 550 | } |
551 | |||
552 | if(this._openDoc){ | ||
553 | this.hashElementMapToLayer.setItem(event.detail.ele.uuid, event.detail.ele,this.currentLayerSelected); | ||
554 | this._openDoc=false; | ||
555 | } | ||
547 | this._LayerUndoObject = thingToPush; | 556 | this._LayerUndoObject = thingToPush; |
548 | this._LayerUndoIndex = thingToPush.layerID; | 557 | this._LayerUndoIndex = thingToPush.layerID; |
549 | this._LayerUndoStatus = true; | 558 | this._LayerUndoStatus = true; |
@@ -873,6 +882,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
873 | this.trackRepetition.selectedIndexes = [layerIndex]; | 882 | this.trackRepetition.selectedIndexes = [layerIndex]; |
874 | this.currentLayerSelected = this.arrLayers[layerIndex]; | 883 | this.currentLayerSelected = this.arrLayers[layerIndex]; |
875 | this.currentTrackSelected = this.arrTracks[layerIndex]; | 884 | this.currentTrackSelected = this.arrTracks[layerIndex]; |
885 | if(this._captureSelection){ | ||
886 | this.application.ninja.selectionController.selectElements(this.currentLayerSelected.elementsList) | ||
887 | } | ||
888 | this._captureSelection = true; | ||
876 | } else { | 889 | } else { |
877 | this.layerRepetition.selectedIndexes = null; | 890 | this.layerRepetition.selectedIndexes = null; |
878 | this.trackRepetition.selectedIndexes = null; | 891 | this.trackRepetition.selectedIndexes = null; |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a36e666b..55c84dce 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -331,10 +331,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
331 | _styleCollapser:{ | 331 | _styleCollapser:{ |
332 | value:null | 332 | value:null |
333 | }, | 333 | }, |
334 | _openDocRedrawCheck:{ | ||
335 | value:true, | ||
336 | writable:true | ||
337 | }, | ||
338 | prepareForDraw:{ | 334 | prepareForDraw:{ |
339 | value:function () { | 335 | value:function () { |
340 | this.init(); | 336 | this.init(); |
@@ -364,10 +360,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
364 | 360 | ||
365 | didDraw:{ | 361 | didDraw:{ |
366 | value:function () { | 362 | value:function () { |
367 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 363 | if(!this.application.ninja.documentController.creatingNewFile){ |
368 | if (this._openDocRedrawCheck) { | 364 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
369 | this.retrieveStoredTweens(); | 365 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
370 | this._openDocRedrawCheck = false; | 366 | if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){ |
367 | this.retrieveStoredTweens(); | ||
368 | } | ||
371 | } | 369 | } |
372 | } | 370 | } |
373 | } | 371 | } |
@@ -465,60 +463,63 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
465 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; | 463 | var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; |
466 | 464 | ||
467 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 465 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
466 | this.application.ninja.timeline.arrLayers[selectedIndex].created=true; | ||
468 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; | 467 | this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; |
469 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 468 | if(this.animatedElement!==undefined){ |
470 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 469 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
471 | if(this.animationDuration){ | 470 | if(this.animationName){ |
472 | this.trackDuration = this.animationDuration.split("s"); | 471 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
473 | this.currentMilliSec = this.trackDuration[0] * 1000; | 472 | this.trackDuration = this.animationDuration.split("s"); |
474 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 473 | this.currentMilliSec = this.trackDuration[0] * 1000; |
475 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 474 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
476 | this.nextKeyframe = 0; | 475 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; |
477 | 476 | this.nextKeyframe = 0; | |
478 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | 477 | |
479 | while (this.currentKeyframeRule[i]) { | 478 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); |
480 | var newTween = {}; | 479 | while (this.currentKeyframeRule[i]) { |
481 | 480 | var newTween = {}; | |
482 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); | 481 | |
483 | topOffSetAttribute = offsetAttribute[3].split("px"); | 482 | offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); |
484 | leftOffsetAttribute = offsetAttribute[5].split("px"); | 483 | topOffSetAttribute = offsetAttribute[3].split("px"); |
485 | 484 | leftOffsetAttribute = offsetAttribute[5].split("px"); | |
486 | parseInt(topOffSetAttribute[0]); | 485 | |
487 | parseInt(leftOffsetAttribute[0]); | 486 | parseInt(topOffSetAttribute[0]); |
488 | 487 | parseInt(leftOffsetAttribute[0]); | |
489 | if (this.currentKeyframeRule[i].keyText === "0%") { | 488 | |
490 | newTween.spanWidth = 0; | 489 | if (this.currentKeyframeRule[i].keyText === "0%") { |
491 | newTween.keyFramePosition = 0; | 490 | newTween.spanWidth = 0; |
492 | newTween.keyFrameMillisec = 0; | 491 | newTween.keyFramePosition = 0; |
493 | newTween.tweenID = 0; | 492 | newTween.keyFrameMillisec = 0; |
494 | newTween.spanPosition = 0; | 493 | newTween.tweenID = 0; |
495 | newTween.tweenedProperties = []; | 494 | newTween.spanPosition = 0; |
496 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; | 495 | newTween.tweenedProperties = []; |
497 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; | 496 | newTween.tweenedProperties["top"] = topOffSetAttribute[0]; |
498 | this.tweens.push(newTween); | 497 | newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; |
499 | 498 | this.tweens.push(newTween); | |
500 | } | 499 | |
501 | else { | 500 | } |
502 | percentValue = this.currentKeyframeRule[i].keyText; | 501 | else { |
503 | splitValue = percentValue.split("%"); | 502 | percentValue = this.currentKeyframeRule[i].keyText; |
504 | fraction = splitValue[0] / 100; | 503 | splitValue = percentValue.split("%"); |
505 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; | 504 | fraction = splitValue[0] / 100; |
506 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 505 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; |
507 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 506 |