From aabd9b98341308cd0d276e6e788b7a3f9531c394 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 11:32:20 -0700 Subject: Timeline: Bug Fix: Document switching was doubling position tracks. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 89389469..b8ba5feb 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -595,7 +595,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { prepareForDraw:{ value:function () { this.initTimeline(); - } }, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index bf380e00..3cf754b8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -1051,6 +1051,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { createPositionTracks:{ value:function(){ // create track objects for position and transform tracks and push into arrays + + // ... but only do it if we haven't already. + if (this.arrPositionTracks.length > 0) { + return; + } // create 'left' track var newLeftTrack = {}; -- cgit v1.2.3 From 403d0834a23760c2481be050a8be925c1ba64a1b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 12:14:59 -0700 Subject: Timeline: Bug fix IKNINJA-1783, Timeline panel is disabled when CSS file is open in another tab. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 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 b8ba5feb..1ba9f067 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -118,9 +118,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return; } - if(!this._currentDocument && value.currentView === "design") { - this.enablePanel(true); - } + // Should we enable the panel? + if (typeof(this._currentDocument) !== "undefined") { + // We have a document, or at least we have initialized the panel. + // What view are we in? + if (typeof(value) !== "undefined") { + if (value.currentView === "design") { + // We are in design view, so enable the panel. + this.enablePanel(true); + } + } + } this._currentDocument = value; @@ -893,7 +901,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.drawTimeMarkers(); // Document switching // Check to see if we have saved timeline information in the currentDocument. - //console.log("TimelinePanel.initTimelineForDocument"); + // console.log("TimelinePanel.initTimelineForDocument"); if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { // console.log('TimelinePanel.initTimelineForDocument: new Document'); -- cgit v1.2.3 From 2a9c33a46eb33bb4f25623217c781e9bf16221d9 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 12:48:11 -0700 Subject: Timeline: Bug fix IKNINJA-1755 Can't insert keyframes in a CSS style property of an object on top layer --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1ba9f067..c8caf50e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1975,7 +1975,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { returnVal = false, arrLayersLength = this.arrLayers.length; for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].isSelected === true) { + if (this.arrLayers[i].layerData.isSelected === true) { returnVal = i; } } -- cgit v1.2.3 From b154a6e287dcc2aec57e49ca569ee8004675eb42 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 17:46:46 -0700 Subject: Timeline: Bug fix IKNINJA-1791 Double-clicking to go in a child level and coming back up to Body will collapse its layer and wipe out all the sub property keyframes. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 50 ++++++++++++++++++---- 1 file changed, 41 insertions(+), 9 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 c8caf50e..96be66e8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -733,11 +733,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this._boolCacheArrays) { // ... but only if we're supposed to. if(this.currentDocument) { + var i = 0, + hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length, + boolHash = false; + this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer; this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected; this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; + for (i = 0; i < hashLength; i++ ) { + if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { + boolHash = true; + } + } + if (boolHash === false) { + var newHash = {}; + newHash.containerUuid = this.currentDocument.model.domContainer.uuid; + newHash.arrLayers = this.arrLayers; + this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash); + } } this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected; } @@ -754,6 +769,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.tlCurrentLayerSelected = false; this.application.ninja.currentDocument.tlCurrentLayersSelected = false; this.application.ninja.currentDocument.tlCurrentElementsSelected = []; + this.application.ninja.currentDocument.tlBreadcrumbHash = []; } }, @@ -934,20 +950,36 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else if (this.application.ninja.currentDocument.setLevel) { // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); // Information stored, but we're moving up or down in the breadcrumb. - // Get the current selection and restore timeline info for its children. - var parentNode = this.currentDocument.model.domContainer, + + var i = 0, + hash = this.application.ninja.currentDocument.tlBreadcrumbHash, + hashLength = hash.length, + boolHashed = false, + parentNode = this.currentDocument.model.domContainer, storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; - this.temparrLayers = []; - - for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { - this._openDoc = true; - this.restoreLayer(parentNode.children[myIndex]); - - } + this.temparrLayers = []; + + // It's possible there is something stored in the breadcrumb hash in currentdocument, so check there first. + for (i = 0; i < hashLength; i++ ) { + if (hash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { + this.temparrLayers = hash[i].arrLayers + boolHashed = true; + } + } + + // Possibly nothing was in the hash, so check and if so fall back to old restoreLayer method. + if (boolHashed === false) { + for (myIndex = 0; parentNode.children[myIndex]; myIndex++) { + this._openDoc = true; + this.restoreLayer(parentNode.children[myIndex]); + } + } + // Draw the repetition. this.arrLayers = this.temparrLayers; this.currentLayerNumber = storedCurrentLayerNumber; this.application.ninja.currentDocument.setLevel = false; + this.resetMasterDuration(); } else { // console.log('TimelinePanel.initTimelineForDocument: else fallback'); -- cgit v1.2.3 From fff4cd20a23b95519333daec564f309be7d7d4ec Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 18:01:39 -0700 Subject: Timeline: Bug fix: When creating a new file, Timeline was disabled. (Injection from fix of IKNINJA-1783) --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 48 ++++++++++++---------- 1 file changed, 27 insertions(+), 21 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 96be66e8..0d0be721 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -117,36 +117,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (value === this._currentDocument) { return; } - + this._currentDocument = value; + + var boolDoc = false, + boolView = false; + // Should we enable the panel? + // Only if we have both a document and we're in design view. + if (typeof(value) !== "undefined") { + if (value.currentView === "design") { + // We are in design view. + boolView = true; + } + } if (typeof(this._currentDocument) !== "undefined") { // We have a document, or at least we have initialized the panel. - // What view are we in? - if (typeof(value) !== "undefined") { - if (value.currentView === "design") { - // We are in design view, so enable the panel. - this.enablePanel(true); - } - } + boolDoc = true; } - this._currentDocument = value; - - if(!value) { + if(boolDoc === false) { this._boolCacheArrays = false; this.clearTimelinePanel(); this._boolCacheArrays = true; this.enablePanel(false); - } else if(this._currentDocument.currentView === "design") { - this._boolCacheArrays = false; - this.clearTimelinePanel(); - this._boolCacheArrays = true; - - // Rebind the document events for the new document context - this._bindDocumentEvents(); - - // Initialize the timeline for the document. - this.initTimelineForDocument(); + } else { + if(boolView === true) { + this._boolCacheArrays = false; + this.clearTimelinePanel(); + this._boolCacheArrays = true; + + // Rebind the document events for the new document context + this._bindDocumentEvents(); + + // Initialize the timeline for the document. + this.initTimelineForDocument(); + this.enablePanel(true); + } } } }, -- cgit v1.2.3 From 82638621ed793fcb37438798363dba151efd9cd2 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 21 Jun 2012 23:27:15 -0700 Subject: Timeline: Breadcrumb hash in currentDocument will now update as changes are made to the DOM. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 0d0be721..29d19c4f 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -750,6 +750,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected; for (i = 0; i < hashLength; i++ ) { if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) { + this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers; boolHash = true; } } -- cgit v1.2.3 From d021013f6ffb691127229116ed961cb5f4acaf2c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 25 Jun 2012 11:59:50 -0700 Subject: Timeline: CSS fixes. --- .../TimelinePanel.reel/css/TimelinePanel.css | 36 +++++++++++----------- .../TimelinePanel.reel/scss/TimelinePanel.scss | 3 +- 2 files changed, 20 insertions(+), 19 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 7f61074e..6daedde8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -86,53 +86,53 @@ .timemark { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; width: 76px; color: gray; float: left; padding-top: 6px; padding-left: 4px; text-align: left; } /* line 255, ../scss/TimelinePanel.scss */ -.playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; } +.playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; } -/* line 265, ../scss/TimelinePanel.scss */ +/* line 266, ../scss/TimelinePanel.scss */ .playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; } -/* line 275, ../scss/TimelinePanel.scss */ +/* line 276, ../scss/TimelinePanel.scss */ .timebar { height: 3px; width: 0; background-color: #ff0003; opacity: 0.3; top: 10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; } -/* line 285, ../scss/TimelinePanel.scss */ -.endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } +/* line 286, ../scss/TimelinePanel.scss */ +.timelinegutter .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } -/* line 293, ../scss/TimelinePanel.scss */ +/* line 294, ../scss/TimelinePanel.scss */ .timeline-disabled { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(30, 30, 30, 0.796); z-index: 100; display: none; box-shadow: #111111 0px 0px 14px inset; } -/* line 304, ../scss/TimelinePanel.scss */ +/* line 305, ../scss/TimelinePanel.scss */ .timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } -/* line 307, ../scss/TimelinePanel.scss */ +/* line 308, ../scss/TimelinePanel.scss */ .tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; visibility: hidden; } /* Configuration menu */ -/* line 317, ../scss/TimelinePanel.scss */ +/* line 318, ../scss/TimelinePanel.scss */ .layer-master { position: relative; } -/* line 320, ../scss/TimelinePanel.scss */ +/* line 321, ../scss/TimelinePanel.scss */ .tl-configbutton { position: absolute; top: 0px; right: 2px; width: 20px; height: 20px; background-image: url(../images/icon-gear.png); background-repeat: no-repeat; cursor: pointer; z-index: 100; background-position: 100% 0px; } -/* line 332, ../scss/TimelinePanel.scss */ +/* line 333, ../scss/TimelinePanel.scss */ .tl-configbutton:hover { width: 180px; } -/* line 336, ../scss/TimelinePanel.scss */ +/* line 337, ../scss/TimelinePanel.scss */ .tl-configbutton .tl-dropdown { position: absolute; border: 1px solid black; top: 16px; right: 2px; width: 180px; padding-bottom: 7px; background-color: #474747; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); display: none; } -/* line 347, ../scss/TimelinePanel.scss */ +/* line 348, ../scss/TimelinePanel.scss */ .tl-configbutton.checked .tl-dropdown { display: block; } -/* line 351, ../scss/TimelinePanel.scss */ +/* line 352, ../scss/TimelinePanel.scss */ .tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; } -/* line 357, ../scss/TimelinePanel.scss */ +/* line 358, ../scss/TimelinePanel.scss */ .tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; } -/* line 362, ../scss/TimelinePanel.scss */ +/* line 363, ../scss/TimelinePanel.scss */ .tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; } -/* line 368, ../scss/TimelinePanel.scss */ +/* line 369, ../scss/TimelinePanel.scss */ .tl-configbutton .nj-divider { margin-top: 7px; } -/* line 372, ../scss/TimelinePanel.scss */ +/* line 373, ../scss/TimelinePanel.scss */ .layer-hidden { display: none; } diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index d4789d65..86e22779 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss @@ -261,6 +261,7 @@ z-index: 92; background-color: #b50003; opacity: 0.5; + visibility: hidden; } .playheadmarker{ height: 100%; @@ -282,7 +283,7 @@ border-top: #c7a19f thin solid; border-right: #ffffff thin solid; } -.endhottext{ +.timelinegutter .endhottext{ float: right; font-family: 'Droid Sans'; font-size: 12px; -- cgit v1.2.3 From 8e3e8fce5d052ea69c6a4e26b63d3f443e7907d3 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 25 Jun 2012 16:08:46 -0700 Subject: Timeline: Bug fix IKNINJA-1812, "Easing option switches to None automatically when moving a keyframe" --- js/panels/Timeline/Span.reel/Span.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 91ce1cfb..3c491a53 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -71,6 +71,8 @@ var Span = exports.Span = Montage.create(Component, { newVal = "none"; } this._easing = newVal; + this.parentComponent.easing = this.easing; + this.parentComponent.tweenData.easing = this.easing; this.parentComponent.setKeyframeEase(newVal); this.needsDraw = true; } @@ -180,7 +182,7 @@ var Span = exports.Span = Montage.create(Component, { handleEasingChoicesClick: { value: function(event) { event.stopPropagation(); - + // Remove the pointer to ourselves //this.application.ninja.timeline.currentOpenSpanMenu = false; @@ -190,6 +192,8 @@ var Span = exports.Span = Montage.create(Component, { // Set the easing this.easing = event.target.dataset.ninjaEase; + this.parentComponent.easing = this.easing; + this.parentComponent.tweenData.easing = this.easing; // Unbind the event handler this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); -- cgit v1.2.3 From 874c3f17deb946a576d2cbefffe189e51ca7cb9a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 25 Jun 2012 16:59:40 -0700 Subject: Timeline: bug fix: command-click now works for multi selecting layers on Macs. Also disabled control-click on macs. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 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 e613d4d7..470062ba 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1401,27 +1401,43 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { timelineLeftPaneKeydown: { value: function(event) { + var ua = navigator.userAgent.toLowerCase(), + boolIsMac = false; + if (ua.indexOf("mac") > -1) { + boolIsMac = true; + } if (event.keyCode === 16) { // Shift key has been pressed this._isShiftPressed = true; } - if (event.keyCode === 17) { + if ((event.keyCode === 17) && !boolIsMac) { // Control key has been pressed this._isControlPressed = true; } + if (event.metaKey === true) { + this._isControlPressed = true; + } } }, timelineLeftPaneKeyup: { value: function(event) { + var ua = navigator.userAgent.toLowerCase(), + boolIsMac = false; + if (ua.indexOf("mac") > -1) { + boolIsMac = true; + } if (event.keyCode === 16) { // Shift key has been released this._isShiftPressed = false; } - if (event.keyCode === 17) { + if ((event.keyCode === 17) && !boolIsMac) { // Control key has been released this._isControlPressed = false; } + if (event.metaKey === false) { + this._isControlPressed = false; + } } }, createstageElement:{ -- cgit v1.2.3 From 616ade06c8f669d18c27d27c3ee46a9c844a54ca Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 08:12:33 -0700 Subject: Timeline Bug fixes Fix keyframe selection updating stage for sub props. Fix tween 0 for sub props on re-open. Fix repetition mismatch for styles and position tracks. Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.js | 8 ++------ .../Timeline/TimelineTrack.reel/TimelineTrack.html | 21 +++++++++++---------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + js/panels/Timeline/Tween.reel/Tween.js | 4 +++- 4 files changed, 17 insertions(+), 17 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 66f39b5a..c18d6eff 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -16,8 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); - this.trackID = this.parentComponent.parentComponent.parentComponent.trackID; - this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement; + this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; + this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; this.ninjaStylesContoller = this.application.ninja.stylesController; } }, @@ -465,11 +465,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { if (currentStyleValue == null) { currentStyleValue = "1px"; } - console.log(currentStyleValue); this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue; - this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty; var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString; var newAnimationNames = currentAnimationNameString + "," + this.animationName; @@ -486,9 +484,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }"; - console.log(initRule); this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); - this.insertPropTween(tweenEvent.offsetX); } } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 79014ae6..658764c8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -56,7 +56,7 @@ "styleTrackRepetition": { "prototype": "montage/ui/repetition.reel", "properties": { - "element": {"#": "content-styles"}, + "element": {"#": "content_style_tracks"}, "isSelectionEnabled" : false }, "bindings": { @@ -195,22 +195,23 @@
-
-
-
+
+ +
-
- -
-
-
+
+ +
+
+
+
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index dc1a5d99..7576b33f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -969,6 +969,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; this.tweens.push(newTween); + this.createMatchingPositionSizeTween(newTween); } else { tempTiming = trackTiming.split("s"); diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index c0949f93..682a8619 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -316,7 +316,9 @@ var Tween = exports.Tween = Montage.create(Component, { if(this.parentComponent.parentComponent.isSubproperty){ // set property specific style on element var currentValue = this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty]; - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], this.parentComponent.parentComponent.trackEditorProperty, [currentValue], "Change", "tween"); + var el = this.parentComponent.parentComponent.animatedElement; + var prop = this.parentComponent.parentComponent.trackEditorProperty; + this.application.ninja.elementMediator.setProperty([el], prop, [currentValue], "Change", "tween"); } else { // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"]; -- cgit v1.2.3 From e1d35d82d144d51a107a4facd47b47cffde79bcf Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 08:59:32 -0700 Subject: Move time marker when clicking anywhere in timeline tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 7576b33f..e6b773c9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -682,6 +682,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span // This needs to move to a keyboard shortcut that is TBD var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + + this.application.ninja.timeline.playheadmarker.style.left = ev.offsetX + "px"; + var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + var currentMillisec = currentMillisecPerPixel * ev.offsetX; + this.application.ninja.timeline.updateTimeText(currentMillisec); + if (ev.shiftKey) { if (this.tweens.length < 1) { this.insertTween(0); @@ -1051,6 +1057,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // build the new keyframe string var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; + console.log(this.animationName); + for (var i = 0; i < this.tweens.length; i++) { var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); // TODO - trackDur should be parseFloat rounded to significant digits -- cgit v1.2.3 From f0d4d89d856b99da1ca8dd3366c48bb76ba6b1f6 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 26 Jun 2012 09:08:47 -0700 Subject: Fix play marker appearing in wrong position when clicking on a tween Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 35 ++++++++++++---------- 1 file changed, 20 insertions(+), 15 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 e6b773c9..3a8d1ff3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -683,9 +683,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // This needs to move to a keyboard shortcut that is TBD var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.playheadmarker.style.left = ev.offsetX + "px"; + var targetElementOffset = this.findXOffset(ev.currentTarget), + position = (event.pageX - targetElementOffset) - 18; + + this.application.ninja.timeline.playheadmarker.style.left = position + "px"; var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - var currentMillisec = currentMillisecPerPixel * ev.offsetX; + var currentMillisec = currentMillisecPerPixel * position; this.application.ninja.timeline.updateTimeText(currentMillisec); if (ev.shiftKey) { @@ -733,19 +736,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } 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) { - do { - curleft += (obj.offsetLeft-obj.scrollLeft); - - } while (obj = obj.offsetParent); - } - return curleft; - } - var targetElementOffset = findXOffset(ev.currentTarget), + var targetElementOffset = this.findXOffset(ev.currentTarget), position = event.pageX - targetElementOffset; this.splitTweenAt(position-18); @@ -753,6 +744,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, + findXOffset:{ + value:function (obj) { + // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element + var curleft = 0; + if (obj.offsetParent) { + do { + curleft += (obj.offsetLeft - obj.scrollLeft); + + } while (obj = obj.offsetParent); + } + return curleft; + } + }, + insertTween:{ value:function (clickPos) { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); -- cgit v1.2.3 From b64821534abbbf9e0cc44f5c84da1e37a14d756b Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 26 Jun 2012 10:18:21 -0700 Subject: BugFix - Color Chip Positioning & Checking for null value of the current color Signed-off-by: Kruti Shah --- js/panels/Timeline/Style.reel/Style.html | 2 +- js/panels/Timeline/Style.reel/Style.js | 6 ++-- js/panels/Timeline/Style.reel/css/Style.css | 51 ++++++++------------------- js/panels/Timeline/Style.reel/scss/Style.scss | 4 +++ 4 files changed, 24 insertions(+), 39 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html index cdc355e7..f141fc1c 100644 --- a/js/panels/Timeline/Style.reel/Style.html +++ b/js/panels/Timeline/Style.reel/Style.html @@ -80,7 +80,7 @@