From 7fc185cc08b2ba912dbc7bce96f6a465c1dd6dbf Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 3 May 2012 18:06:06 -0700 Subject: Timeline: More work on tween drag-and-drop --- js/panels/Timeline/Tween.reel/Tween.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 8b6826ed..b4c3bd86 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -136,6 +136,7 @@ var Tween = exports.Tween = Montage.create(Component, { draw:{ value:function () { + console.log("Tween.draw") this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; this.tweenspan.spanWidth = this.spanWidth; @@ -147,6 +148,7 @@ var Tween = exports.Tween = Montage.create(Component, { setData:{ value:function(){ + console.log("Tween.setData") this.spanWidth = this.tweenData.spanWidth; this.keyFramePosition = this.tweenData.keyFramePosition; this.spanPosition = this.tweenData.spanPosition; -- cgit v1.2.3 From 0e12f00d6afffabd370347335a56d0ddd17c0232 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 4 May 2012 11:00:12 -0700 Subject: Fix subproperty keyframe selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 8b6826ed..45714079 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -225,6 +225,8 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ + console.log("tween select"); + // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); @@ -243,13 +245,17 @@ var Tween = exports.Tween = Montage.create(Component, { var currentMillisec = currentMillisecPerPixel * this.keyFramePosition; this.application.ninja.timeline.updateTimeText(currentMillisec); - // move animated element to correct position on stage - var currentTop = this.tweenedProperties["top"] + "px"; - var currentLeft = this.tweenedProperties["left"] + "px"; - - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); - this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); + if(this.parentComponent.parentComponent.isSubproperty){ + console.log("sub prop tween selection"); + // set property specific style on element + } else { + // move animated element to correct position on stage + var currentTop = this.tweenedProperties["top"] + "px"; + var currentLeft = this.tweenedProperties["left"] + "px"; + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); + } } }, -- cgit v1.2.3 From 2ea8a62835f4c20efff2623306e7205e6f5bf0ba Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 4 May 2012 16:59:07 -0700 Subject: Timeline: True drag-and-drop of keyframes --- js/panels/Timeline/Tween.reel/Tween.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b4c3bd86..c21b5f91 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -132,11 +132,24 @@ var Tween = exports.Tween = Montage.create(Component, { this._isTweenAnimated = value; } }, + + _isDragging: { + value: false + }, + isDragging: { + serializable: true, + get:function () { + return this._isDragging; + }, + set:function (newVal) { + this._isDragging = newVal; + } + + }, draw:{ value:function () { - console.log("Tween.draw") this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; this.tweenspan.spanWidth = this.spanWidth; @@ -148,7 +161,6 @@ var Tween = exports.Tween = Montage.create(Component, { setData:{ value:function(){ - console.log("Tween.setData") this.spanWidth = this.tweenData.spanWidth; this.keyFramePosition = this.tweenData.keyFramePosition; this.spanPosition = this.tweenData.spanPosition; -- cgit v1.2.3 From 4f1693b953befabf4495df668f542c7f52270864 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 8 May 2012 13:42:04 -0700 Subject: Change sub property track arrays Remove transform section and move width and height into Position section. rename position section Position and Size. additional support for generic prop tweens Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index c733b8d7..6c273a49 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -239,8 +239,6 @@ var Tween = exports.Tween = Montage.create(Component, { selectTween:{ value: function(){ - console.log("tween select"); - // turn on event listener for element change this.eventManager.addEventListener("elementChange", this, false); @@ -248,7 +246,7 @@ var Tween = exports.Tween = Montage.create(Component, { var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID); this.application.ninja.timeline.selectLayer(selectIndex, true); - // tell timeline to deselect all other tweens and push this one as the currentSelectedTweens in timeline + // tell timeline to deselect all other tweens and push this one into the selectedTweens in timeline this.application.ninja.timeline.deselectTweens(); this.application.ninja.timeline.selectedTweens.push(this); -- cgit v1.2.3 From 675dfa5057e118dac694b8fb9b960cfed48e1d52 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 00:51:17 -0700 Subject: allow splitting existing spans with new keyframe Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 6c273a49..48b41023 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -216,12 +216,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; } - // skewX - - // skewY - - // rotation - // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); -- cgit v1.2.3 From eb7c3c8db304bdfb01f747a50e932665d9ec03fa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:09:35 -0700 Subject: style keyframe rule addition Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 50 +++++++++++++++++++++++++++++----- 1 file changed, 43 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 48b41023..b8cc4a07 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -178,16 +178,23 @@ var Tween = exports.Tween = Montage.create(Component, { var useAbsolute = true; if (event.detail.source && event.detail.source !== "tween") { - // check for correct element selection - if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { - console.log("Wrong element selected for this keyframe track"); + + if(this.parentComponent.parentComponent.isSubproperty){ + this.setStyleTweenProperty(event.detail); } else { - if(useAbsolute){ - this.setAbsoluteTweenProperties(event.detail); + // check for correct element selection + if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { + console.log("Wrong element selected for this keyframe track"); } else { - this.setRelativeTweenProperties(event.detail); + if (useAbsolute) { + this.setAbsoluteTweenProperties(event.detail); + } else { + this.setRelativeTweenProperties(event.detail); + } } } + + } } }, @@ -231,6 +238,36 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setStyleTweenProperty:{ + value:function (eventDetail) { + console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); + console.log(eventDetail); + + if(eventDetail.type == "setProperties"){ + // ignore top, left, width, and height + console.log(eventDetail.data.value[0]); + this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; + console.log(this.tweenedProperties); + + } else if(eventDetail.type == "setColor"){ + console.log(eventDetail.data.value.color.css); + var prop = this.parentComponent.parentComponent.trackEditorProperty; + this.tweenedProperties[prop] = eventDetail.data.value.color.css; + console.log(this.tweenedProperties[prop]); + + } else if(eventDetail.type == "setProperty"){ + // ignore top, left, width, and height + console.log(eventDetail.data.value[0]); + this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; + console.log(this.tweenedProperties); + }else { + console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); + } + + + } + }, + selectTween:{ value: function(){ // turn on event listener for element change @@ -252,7 +289,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.timeline.updateTimeText(currentMillisec); if(this.parentComponent.parentComponent.isSubproperty){ - console.log("sub prop tween selection"); // set property specific style on element } else { // move animated element to correct position on stage -- cgit v1.2.3 From b38e020fb5e64c7d9a1d42c97393a0a84f9841a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 22:30:27 -0700 Subject: handle style changes on keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b8cc4a07..bcd3d75f 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -254,6 +254,7 @@ var Tween = exports.Tween = Montage.create(Component, { var prop = this.parentComponent.parentComponent.trackEditorProperty; this.tweenedProperties[prop] = eventDetail.data.value.color.css; console.log(this.tweenedProperties[prop]); + this.parentComponent.parentComponent.updatePropKeyframeRule(); } else if(eventDetail.type == "setProperty"){ // ignore top, left, width, and height -- cgit v1.2.3 From 13ebb58be961e92ba7c109298ef73daa7dea79c7 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:08:24 -0700 Subject: fix keyframe bug when adding keyframes to sub properties Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index bcd3d75f..846c2f1c 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -240,22 +240,18 @@ var Tween = exports.Tween = Montage.create(Component, { setStyleTweenProperty:{ value:function (eventDetail) { - console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); - console.log(eventDetail); + //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); + //console.log(eventDetail); if(eventDetail.type == "setProperties"){ // ignore top, left, width, and height console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; console.log(this.tweenedProperties); - } else if(eventDetail.type == "setColor"){ - console.log(eventDetail.data.value.color.css); var prop = this.parentComponent.parentComponent.trackEditorProperty; this.tweenedProperties[prop] = eventDetail.data.value.color.css; - console.log(this.tweenedProperties[prop]); this.parentComponent.parentComponent.updatePropKeyframeRule(); - } else if(eventDetail.type == "setProperty"){ // ignore top, left, width, and height console.log(eventDetail.data.value[0]); -- cgit v1.2.3 From 4438dae53bb528d94b9f21272f7c240dd546b0a8 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 14 May 2012 23:51:34 -0700 Subject: handle more prop types in subgroup keyframe rules Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 846c2f1c..63dabefe 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -201,28 +201,18 @@ var Tween = exports.Tween = Montage.create(Component, { setAbsoluteTweenProperties:{ value:function (eventDetail) { - //console.log(eventDetail); - - // top if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; } - - // left if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; } - - // width if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; } - - // height if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; } - // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); @@ -247,21 +237,22 @@ var Tween = exports.Tween = Montage.create(Component, { // ignore top, left, width, and height console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; - console.log(this.tweenedProperties); + this.parentComponent.parentComponent.updatePropKeyframeRule(); + } else if(eventDetail.type == "setColor"){ var prop = this.parentComponent.parentComponent.trackEditorProperty; this.tweenedProperties[prop] = eventDetail.data.value.color.css; this.parentComponent.parentComponent.updatePropKeyframeRule(); + } else if(eventDetail.type == "setProperty"){ // ignore top, left, width, and height console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; - console.log(this.tweenedProperties); + this.parentComponent.parentComponent.updatePropKeyframeRule(); + }else { console.log("TWEEN Unhandled type - setStyleTweenProperty : " + eventDetail.type); } - - } }, -- cgit v1.2.3 From 847276c1e62d55c10d059683e7180635aa994890 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 00:47:52 -0700 Subject: support width and height tween prop on re-opening saved doc Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 63dabefe..3c0223c1 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -282,9 +282,14 @@ var Tween = exports.Tween = Montage.create(Component, { // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"] + "px"; var currentLeft = this.tweenedProperties["left"] + "px"; + var currentWidth = this.tweenedProperties["width"] + "px"; + var currentHeight = this.tweenedProperties["height"] + "px"; this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); + this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); + } } }, -- cgit v1.2.3 From 7cf24d4adf741deae04728f9c091e11c2876a8df Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 01:22:47 -0700 Subject: update stage element on sub prop keyframe select Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 3c0223c1..30678beb 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -278,6 +278,12 @@ 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"); + } else { // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"] + "px"; -- cgit v1.2.3 From b7adc6f1ec09edcad523b1ddd32856ddf27c6724 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 10:02:26 -0700 Subject: remove console logs. add retrieve tweens method for prop tracks Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 30678beb..fb2ce4b4 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -234,8 +234,8 @@ var Tween = exports.Tween = Montage.create(Component, { //console.log(eventDetail); if(eventDetail.type == "setProperties"){ - // ignore top, left, width, and height - console.log(eventDetail.data.value[0]); + // need to ignore top, left, width, and height + //console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; this.parentComponent.parentComponent.updatePropKeyframeRule(); @@ -245,8 +245,8 @@ var Tween = exports.Tween = Montage.create(Component, { this.parentComponent.parentComponent.updatePropKeyframeRule(); } else if(eventDetail.type == "setProperty"){ - // ignore top, left, width, and height - console.log(eventDetail.data.value[0]); + // need to ignore top, left, width, and height + //console.log(eventDetail.data.value[0]); this.tweenedProperties[this.parentComponent.parentComponent.trackEditorProperty] = eventDetail.data.value[0]; this.parentComponent.parentComponent.updatePropKeyframeRule(); @@ -279,9 +279,6 @@ 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"); } else { -- cgit v1.2.3 From e9995c973acadc507b802fdefdb22b4c4bf82325 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 11:27:51 -0700 Subject: fix keyframe splitting Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index fb2ce4b4..33fed17a 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -280,7 +280,7 @@ var Tween = exports.Tween = Montage.create(Component, { // 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"); - + //console.log(currentValue); } else { // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"] + "px"; -- cgit v1.2.3 From a065e1394e45bc7a58c861efd0912e60e8b37a03 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 15 May 2012 14:23:22 -0700 Subject: remove old method Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 33fed17a..bb7ce735 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -147,7 +147,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, - draw:{ value:function () { this.element.style.left = this.spanPosition + "px"; @@ -186,20 +185,14 @@ var Tween = exports.Tween = Montage.create(Component, { if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { console.log("Wrong element selected for this keyframe track"); } else { - if (useAbsolute) { - this.setAbsoluteTweenProperties(event.detail); - } else { - this.setRelativeTweenProperties(event.detail); - } + this.setTweenProperties(event.detail); } } - - } } }, - setAbsoluteTweenProperties:{ + setTweenProperties:{ value:function (eventDetail) { if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; @@ -222,17 +215,10 @@ var Tween = exports.Tween = Montage.create(Component, { } }, - setRelativeTweenProperties:{ - value:function(eventDetail){ - //console.log(eventDetail); - } - }, - setStyleTweenProperty:{ value:function (eventDetail) { //console.log("Setting style tween properties for: " + this.parentComponent.parentComponent.trackEditorProperty); //console.log(eventDetail); - if(eventDetail.type == "setProperties"){ // need to ignore top, left, width, and height //console.log(eventDetail.data.value[0]); @@ -292,7 +278,6 @@ var Tween = exports.Tween = Montage.create(Component, { this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "width", [currentWidth], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "height", [currentHeight], "Change", "tween"); - } } }, @@ -301,10 +286,8 @@ var Tween = exports.Tween = Montage.create(Component, { value:function(){ // turn off event listener for element change this.eventManager.removeEventListener("elementChange", this, false); - // deselect the keyframe for this tween this.keyframe.deselectKeyframe(); } } - }); -- cgit v1.2.3 From e5830f3424c7db84f0e76b237616cbf59fe9ed1c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 08:58:03 -0700 Subject: Remove span highlighting and start syncing pos tracks and main track keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index bb7ce735..f857ebd4 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -208,9 +208,6 @@ var Tween = exports.Tween = Montage.create(Component, { } // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); - - // highlight the tween's span - this.tweenspan.highlightSpan(); this.isTweenAnimated = true; } }, -- cgit v1.2.3 From a5e3eb0cec55858cf911bffc429ce1de817a60ef Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 11:20:13 -0700 Subject: methods for setting simple ease and splitting sub prop spans Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index f857ebd4..b61b0ca9 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -239,6 +239,14 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + setKeyframeEase:{ + value:function(easeType){ + // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) + this.tweenedProperties["-webkit-animation-timing-function"] = easeType; + this.parentComponent.parentComponent.updatePropKeyframeRule(); + } + }, + selectTween:{ value: function(){ // turn on event listener for element change -- cgit v1.2.3 From 6f86dcc9df20727155f7507f4998baee38b8d01a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 16 May 2012 14:02:58 -0700 Subject: Fix restore tween for main layer track with multiple animation names Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b61b0ca9..de6a8d56 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -271,7 +271,7 @@ var Tween = exports.Tween = Montage.create(Component, { // 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"); - //console.log(currentValue); + console.log(currentValue); } else { // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"] + "px"; -- cgit v1.2.3 From 38aed3f1068dcd06089619f3b5278e01c42b0512 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 22 May 2012 11:04:57 -0700 Subject: update ease method to distinguish between main animation and prop animations Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index de6a8d56..2a21c330 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -243,7 +243,12 @@ var Tween = exports.Tween = Montage.create(Component, { value:function(easeType){ // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) this.tweenedProperties["-webkit-animation-timing-function"] = easeType; - this.parentComponent.parentComponent.updatePropKeyframeRule(); + if(this.parentComponent.parentComponent.isSubproperty){ + this.parentComponent.parentComponent.updatePropKeyframeRule(); + } else { + this.parentComponent.parentComponent.updateKeyframeRule(); + } + } }, -- cgit v1.2.3 From f92838b6ec33e2eb0f8eb06f3cbc7419f38143a1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 23 May 2012 11:43:43 -0700 Subject: Diamond keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 2a21c330..414c0535 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -248,7 +248,6 @@ var Tween = exports.Tween = Montage.create(Component, { } else { this.parentComponent.parentComponent.updateKeyframeRule(); } - } }, -- cgit v1.2.3 From 003d08198368d93078049ee879aaac4275ac4817 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 24 May 2012 10:49:09 -0700 Subject: collapse fix for restored style layers Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 414c0535..e5288ad9 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -195,16 +195,16 @@ var Tween = exports.Tween = Montage.create(Component, { setTweenProperties:{ value:function (eventDetail) { if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ - this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; + this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; } if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ - this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; + this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; } if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ - this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth; + this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; } if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ - this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight; + this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; } // tell track to update css rule this.parentComponent.parentComponent.updateKeyframeRule(); @@ -278,10 +278,10 @@ var Tween = exports.Tween = Montage.create(Component, { console.log(currentValue); } else { // move animated element to correct position on stage - var currentTop = this.tweenedProperties["top"] + "px"; - var currentLeft = this.tweenedProperties["left"] + "px"; - var currentWidth = this.tweenedProperties["width"] + "px"; - var currentHeight = this.tweenedProperties["height"] + "px"; + var currentTop = this.tweenedProperties["top"]; + var currentLeft = this.tweenedProperties["left"]; + var currentWidth = this.tweenedProperties["width"]; + var currentHeight = this.tweenedProperties["height"]; this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "top", [currentTop], "Change", "tween"); this.application.ninja.elementMediator.setProperty([this.parentComponent.parentComponent.animatedElement], "left", [currentLeft], "Change", "tween"); -- cgit v1.2.3 From bedb38e14887b29eae3cdf1c8d435259c920257c Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 12 Jun 2012 13:05:12 -0700 Subject: Sub Props Signed-off-by: Kruti Shah --- js/panels/Timeline/Tween.reel/Tween.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index e5288ad9..e2d152e9 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -6,6 +6,8 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; + var Tween = exports.Tween = Montage.create(Component, { @@ -275,7 +277,6 @@ var Tween = exports.Tween = Montage.create(Component, { // 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"); - console.log(currentValue); } else { // move animated element to correct position on stage var currentTop = this.tweenedProperties["top"]; -- cgit v1.2.3 From 0b41d5c873b25461e2217782af1c410b89cb56de Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 15 Jun 2012 14:03:03 -0700 Subject: Timeline: Bug fix IKNINJA 1716, "Ease options are not correctly displayed in Timeline after a file is saved and re-opened." --- js/panels/Timeline/Tween.reel/Tween.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 49cfa9c9..d96cc932 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -154,12 +154,27 @@ var Tween = exports.Tween = Montage.create(Component, { } }, + + _easing: { + value: false + }, + easing: { + serializable: true, + get:function () { + return this._easing; + }, + set:function (newVal) { + this._easing = newVal; + } + + }, draw:{ value:function () { this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; this.tweenspan.spanWidth = this.spanWidth; + this.tweenspan.easing = this.easing; if(this.isTweenAnimated){ this.tweenspan.highlightSpan(); } @@ -175,6 +190,7 @@ var Tween = exports.Tween = Montage.create(Component, { this.tweenID = this.tweenData.tweenID; this.tweenedProperties = this.tweenData.tweenedProperties; this.isTweenAnimated = this.tweenData.isTweenAnimated; + this.easing = this.tweenData.easing; this.needsDraw = true; } }, -- cgit v1.2.3 From 0639b36bd4dc9c4c7659b87c05a22a08a4c49221 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 15 Jun 2012 14:10:36 -0700 Subject: Timeline: Bug fix: When adding a new keyframe, easing is set to "undefined". --- js/panels/Timeline/Tween.reel/Tween.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index d96cc932..51a9e215 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -156,7 +156,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, _easing: { - value: false + value: "ease-in" }, easing: { serializable: true, -- cgit v1.2.3 From 730389f72b1f2949e74b4ce8f8625bfd8bc4fa39 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 18 Jun 2012 16:12:49 -0700 Subject: Timeline: Bug Fixes - Splitting tweens now works again for shift-click interaction - Fixed visual "jump" in keyframes and spans when splitting tweens - Set default easing to "none" to match CSS standard. --- js/panels/Timeline/Tween.reel/Tween.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 51a9e215..dcc139a5 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -110,6 +110,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._tweenID = value; + this.tweenData.tweenID = value; } }, @@ -156,7 +157,7 @@ var Tween = exports.Tween = Montage.create(Component, { }, _easing: { - value: "ease-in" + value: "none" }, easing: { serializable: true, @@ -171,9 +172,11 @@ var Tween = exports.Tween = Montage.create(Component, { draw:{ value:function () { + this.tweenspan.element.style.width = this.spanWidth + "px"; + this.keyframe.element.style.left = (this.spanWidth -5) + "px"; + this.tweenspan.spanWidth = this.spanWidth; this.element.style.left = this.spanPosition + "px"; this.keyframe.position = this.spanWidth; - this.tweenspan.spanWidth = this.spanWidth; this.tweenspan.easing = this.easing; if(this.isTweenAnimated){ this.tweenspan.highlightSpan(); -- cgit v1.2.3 From 8e2dda460526735b4db2949656aa2e8ac041ad3c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 19 Jun 2012 14:39:30 -0700 Subject: prop tween splitting Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index dcc139a5..db368caf 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -271,6 +271,9 @@ var Tween = exports.Tween = Montage.create(Component, { // easeTypes - ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) this.tweenedProperties["-webkit-animation-timing-function"] = easeType; if(this.parentComponent.parentComponent.isSubproperty){ + if(this.parentComponent.parentComponent.trackType == "position"){ + return; + } this.parentComponent.parentComponent.updatePropKeyframeRule(); } else { this.parentComponent.parentComponent.updateKeyframeRule(); -- cgit v1.2.3 From 2e3f55d4e7964e4e6cdccb969a85142f7ea68784 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 20 Jun 2012 15:08:08 -0700 Subject: Timeline: Bug fix: Keyframe animation now works with 3D elements. --- js/panels/Timeline/Tween.reel/Tween.js | 42 ++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 15 deletions(-) (limited to 'js/panels/Timeline/Tween.reel/Tween.js') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index db368caf..c0949f93 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -206,6 +206,7 @@ var Tween = exports.Tween = Montage.create(Component, { if (event.detail.source && event.detail.source !== "tween") { if(this.parentComponent.parentComponent.isSubproperty){ + console.log("setting style tween property") this.setStyleTweenProperty(event.detail); } else { // check for correct element selection @@ -221,21 +222,32 @@ var Tween = exports.Tween = Montage.create(Component, { setTweenProperties:{ value:function (eventDetail) { - if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ - this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; - } - if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ - this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; - } - if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ - this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; - } - if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ - this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; - } - // tell track to update css rule - this.parentComponent.parentComponent.updateKeyframeRule(); - this.isTweenAnimated = true; + if (eventDetail.source === "SelectionTool") { + if(this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"]){ + this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop + "px"; + } + if(this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]){ + this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft + "px"; + } + if (this.parentComponent.parentComponent.animatedElement.offsetWidth != this.tweenedProperties["width"]){ + this.tweenedProperties["width"] = this.parentComponent.parentComponent.animatedElement.offsetWidth + "px"; + } + if (this.parentComponent.parentComponent.animatedElement.offsetHeight != this.tweenedProperties["height"]){ + this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight + "px"; + } + // tell track to update css rule + this.parentComponent.parentComponent.updateKeyframeRule(); + this.isTweenAnimated = true; + } + + if (eventDetail.source === "translateTool") { + var arrMat = eventDetail.data.value[0].properties.mat, + strTweenProperty = "perspective(1400) matrix3d(" + arrMat.join() + ")"; + + this.tweenedProperties["-webkit-transform"] = strTweenProperty; + this.parentComponent.parentComponent.updateKeyframeRule(); + this.isTweenAnimated = true; + } } }, -- cgit v1.2.3