From a8ad82e6595b75838305eb4fa83385a42053ffd6 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 30 Apr 2012 16:00:41 -0700 Subject: Timeline: Change serialization parameters for some component properties. --- js/panels/Timeline/Tween.reel/Tween.js | 5 ----- 1 file changed, 5 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 b13a037f..8b6826ed 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -14,12 +14,10 @@ var Tween = exports.Tween = Montage.create(Component, { }, _tweenData:{ - serializable: true, value:{} }, tweenData:{ - serializable: true, get:function(){ return this._tweenData; }, @@ -32,7 +30,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, _spanWidth: { - serializable: true, value: 0 }, @@ -109,7 +106,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, _tweenedProperties:{ - serializable: true, value:[] }, @@ -124,7 +120,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, _isTweenAnimated:{ - serializable:true, value:false }, -- cgit v1.2.3 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