From 73c4f7f449ba58e70f7335ef932b23dd450c925b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 17:46:09 -0700 Subject: Timeline: Initial keyframe drag-and-drop interaction. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 30 +++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 859cdfb1..df5bdd67 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -31,6 +31,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); + + // Drag and drop event handlers + this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); + this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); + this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); + + + + + } }, @@ -57,5 +67,23 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value:function(ev){ this.selectKeyframe(); } - } + }, + + handleMouseover: { + value: function(event) { + this.element.draggable = true; + } + }, + handleMouseout: { + value: function(event) { + this.element.draggable = false; + } + }, + handleDragstart: { + value: function(event) { + //this.parentComponent.parentComponent.dragLayerID = this.layerID; + event.dataTransfer.setData('Text', 'Keyframe'); + } + }, + }); -- 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/Keyframe.reel/Keyframe.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index df5bdd67..f7259d29 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -36,6 +36,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); + this.element.addEventListener("dragend", this.handleDragend.bind(this), false); @@ -83,7 +84,13 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value: function(event) { //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Keyframe'); + this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID; } }, + handleDragend: { + value: function(event) { + this.parentComponent.isDragging = false; + } + } }); -- cgit v1.2.3 From 778d417d2f800b91d960849c75c0e4ee128044d1 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 9 May 2012 13:33:45 -0700 Subject: Timeline: Bug fixes for keyframe drag and drop. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7259d29..5afff6e6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -84,7 +84,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value: function(event) { //this.parentComponent.parentComponent.dragLayerID = this.layerID; event.dataTransfer.setData('Text', 'Keyframe'); - this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID; + + // Get my index in my track's tween array + var i = 0, + tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, + myIndex = null; + for (i = 0; i < tweenRepetitionLength; i++) { + if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) { + myIndex = i; + } + } + this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; } }, handleDragend: { -- 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/Keyframe.reel/Keyframe.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7259d29..e5fa71d3 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -67,6 +67,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { handleClick:{ value:function(ev){ this.selectKeyframe(); + ev.stopPropagation(); } }, -- cgit v1.2.3 From 32257ac142f872d3c1f6c07504bae77ae884ed93 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 11 May 2012 02:34:26 -0700 Subject: Fix a bug in span splitting interaction and remove console logs Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 5 ----- 1 file changed, 5 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index e5fa71d3..2d3ab72f 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -37,11 +37,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); this.element.addEventListener("dragend", this.handleDragend.bind(this), false); - - - - - } }, -- 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/Keyframe.reel/Keyframe.js | 2 +- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index a4f957cf..52302319 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -42,7 +42,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.element.style.left = (this.position - 3) + "px"; + this.element.style.left = (this.position - 6) + "px"; } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index ff5dae7a..36166c1c 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -6,11 +6,13 @@ .tween_keyframe{ position: absolute; - height: 16px; - width: 5px; + height: 10px; + width: 10px; + top: 3px; background-color: white; z-index: 23; - border-radius: 3px; + border-radius: 2px; + -webkit-transform: rotate(45deg); } .tween_keyframe.keyframeSelected{ -- cgit v1.2.3 From a8dff9f5cb9dec84e6805118d49903710b361275 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 23 May 2012 15:44:41 -0700 Subject: Timeline: Easing selection per keyframe. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 52302319..41eb6ef1 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -91,6 +91,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } } this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; + this.selectKeyframe(); } }, handleDragend: { -- cgit v1.2.3 From 41754c04c5c5f3c372dc2b38a122144f8d9e1d18 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 30 May 2012 09:29:49 -0700 Subject: fancy keyframe selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 4 +++- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 9 ++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 41eb6ef1..b91027b6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.element.style.left = (this.position - 6) + "px"; + this.element.style.left = (this.position - 5) + "px"; } }, deselectKeyframe:{ value:function(){ this.element.classList.remove("keyframeSelected"); + this.element.style.left = (this.position - 5) + "px"; } }, selectKeyframe:{ value:function(){ this.element.classList.add("keyframeSelected"); + this.element.style.left = (this.position - 6) + "px"; this.parentComponent.selectTween(); } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index 36166c1c..5ea236e9 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -6,9 +6,9 @@ .tween_keyframe{ position: absolute; - height: 10px; - width: 10px; - top: 3px; + height: 8px; + width: 8px; + top: 4px; background-color: white; z-index: 23; border-radius: 2px; @@ -16,6 +16,9 @@ } .tween_keyframe.keyframeSelected{ + height: 10px; + width: 10px; + top: 3px; background-color: #570e19; border-style: solid; border-width: thin; -- cgit v1.2.3 From c1cd060be878d30fda71140dc850b8d1ac68c6ad Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Fri, 8 Jun 2012 11:27:40 -0700 Subject: Color chip in TP Signed-off-by: Kruti Shah --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index b91027b6..c8255cc0 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -28,6 +28,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } }, + _isSelected:{ + value:false + }, + + isSelected:{ + serializable:true, + get:function(){ + return this._isSelected; + }, + set:function(value){ + this._isSelected = value; + this.needsDraw = true; + } + }, + prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); @@ -42,20 +57,29 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ + if(this.isSelected){ + this.element.classList.add("keyframeSelected"); + this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; + }else{ + this.element.classList.remove("keyframeSelected"); + this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty); + } this.element.style.left = (this.position - 5) + "px"; } }, deselectKeyframe:{ value:function(){ - this.element.classList.remove("keyframeSelected"); + debugger; + this.isSelected=false; this.element.style.left = (this.position - 5) + "px"; } }, selectKeyframe:{ value:function(){ - this.element.classList.add("keyframeSelected"); + debugger; + this.isSelected=true; this.element.style.left = (this.position - 6) + "px"; this.parentComponent.selectTween(); } -- 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/Keyframe.reel/Keyframe.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index c8255cc0..f450dd8a 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -60,6 +60,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { if(this.isSelected){ this.element.classList.add("keyframeSelected"); this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; + console.log(this.application.ninja.timeline.selectedStyle) }else{ this.element.classList.remove("keyframeSelected"); this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty); @@ -70,17 +71,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { deselectKeyframe:{ value:function(){ - debugger; this.isSelected=false; this.element.style.left = (this.position - 5) + "px"; + this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty) } }, selectKeyframe:{ value:function(){ - debugger; this.isSelected=true; this.element.style.left = (this.position - 6) + "px"; + this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty this.parentComponent.selectTween(); } }, -- cgit v1.2.3 From 7887aafbff794e9c5f918c667e73a8386c38cf02 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Tue, 12 Jun 2012 13:18:02 -0700 Subject: Clean up Signed-off-by: Kruti Shah --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'js/panels/Timeline/Keyframe.reel') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f450dd8a..ba6952aa 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -60,10 +60,8 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { if(this.isSelected){ this.element.classList.add("keyframeSelected"); this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; - console.log(this.application.ninja.timeline.selectedStyle) }else{ this.element.classList.remove("keyframeSelected"); - this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty); } this.element.style.left = (this.position - 5) + "px"; } @@ -73,7 +71,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value:function(){ this.isSelected=false; this.element.style.left = (this.position - 5) + "px"; - this.application.ninja.timeline.selectedStyle = !(this.parentComponent.parentComponent.parentComponent.trackEditorProperty) } }, -- cgit v1.2.3