From b4dd3e269b9de188e015f4cfac29c70a684f4c4f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 18:25:15 -0800 Subject: Fix problem with resizer set to capture all webkitTransitionEnd events. Update collapser to use namespaced webkitTransitionEnd events for forward compatibility. Signed-off-by: Jonathan Duran --- js/panels/Resizer.js | 4 ++-- js/panels/Timeline/Collapser.js | 5 +++-- js/panels/Timeline/Style.reel/Style.html | 2 +- js/panels/Timeline/Style.reel/Style.js | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js index 69efd6ac..3afe5d5b 100644 --- a/js/panels/Resizer.js +++ b/js/panels/Resizer.js @@ -92,7 +92,7 @@ exports.Resizer = Montage.create(Component, { handleDblclick: { value : function() { - this.panel.addEventListener("webkitTransitionEnd", this, true); + this.panel.addEventListener("webkitTransitionEnd", this, false); if (this.isVertical) { this.panel.style.height = ""; } else { @@ -102,7 +102,7 @@ exports.Resizer = Montage.create(Component, { } }, - captureWebkitTransitionEnd: { + handleWebkitTransitionEnd: { value: function() { if(this.redrawStage) { this.application.ninja.stage.resizeCanvases = true; diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 2fbe8e83..d286d84c 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -206,6 +206,7 @@ var Montage = require("montage/core/core").Montage, // Add a handler for the end of the transition, so we can tidy things up after // the transition completes + this.myContent.identifier = "myContent"; this.myContent.addEventListener("webkitTransitionEnd", this, false); this.myContent.style.overflow = "hidden"; @@ -236,7 +237,7 @@ var Montage = require("montage/core/core").Montage, // Special cases: If transition does not happen (in the case of a contentHeight of 0 // or isAnimated = false) we need to manually fire it here to do the cleanup. if ((this.contentHeight < 3) || (!this.isAnimated)) { - this.handleWebkitTransitionEnd(); + this.handleMyContentWebkitTransitionEnd(); } } } @@ -284,7 +285,7 @@ var Montage = require("montage/core/core").Montage, // This handler is bound to the transitionEnd event. If transitions // are disabled, it is called manually. - handleWebkitTransitionEnd: { + handleMyContentWebkitTransitionEnd: { value: function(event) { // Are we animating the transitions? diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html index f10ad842..c6f29626 100644 --- a/js/panels/Timeline/Style.reel/Style.html +++ b/js/panels/Timeline/Style.reel/Style.html @@ -33,7 +33,7 @@ } }, "hottextunit" : { - "module" : "montage/ui/hottextunit.reel", + "module" : "js/components/hottextunit.reel", "name" : "HotTextUnit", "properties" : { "element" : {"#":"value-editor-hottext"} diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 13a5db3e..796385d0 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -521,7 +521,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { "property" : "text-indent", "tweener" : "hottext", "units" : "px", - "min" : 0, + "min" : -9999, "max" : 9999, "default" : 0 }, -- cgit v1.2.3 From ac75834c5e23a41d7e52304fb24610cafd7d7e09 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 18:38:26 -0800 Subject: Timeline: add new layers to top of stack instead of bottom. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 2db0c18a..a0e2376a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -314,8 +314,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrTracks.splice(myIndex, 0, newTrack); this.layerRepetition.selectedIndexes = [myIndex]; } else { - this.arrLayers.push(thingToPush); - this.arrTracks.push(newTrack); + this.arrLayers.splice(0, 0, thingToPush); + this.arrTracks.splice(0, 0, newTrack); thingToPush.layerPosition=this.arrLayers.length-1; newTrack.trackPosition=this.arrTracks.length-1; this.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition); -- cgit v1.2.3 From 7a3af25c3d54fc980fd85b77f5da509d288efb44 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 19:10:00 -0800 Subject: Fix Timeline layer resizer from being inversed layer resizer now works in the correct direction when dragging Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 35f348c7..9ed69f4a 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -34,7 +34,8 @@ "element": {"#": "layer_resizer"}, "panel" : {"#" : "timeline_leftpane"}, "isVertical" : false, - "isInversed" : false + "isInversed" : false, + "isPanel" : false } }, -- cgit v1.2.3 From 7e83bb2ac681eb1340dea0f6efaaddfcf0f2b52a Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 19:27:53 -0800 Subject: Change keyframe to use element mediator when repositioning animated elements on stage Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 1259fa63..4bb73514 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -1,5 +1,6 @@ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; +var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; var Keyframe = exports.Keyframe = Montage.create(Component, { @@ -82,6 +83,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { this.tweenkeyframe.addEventListener("click", this, false); this.animatedProperties = new Array(); + // should element mediator be used here? this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; } @@ -96,7 +98,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { handleElementChange:{ value:function (event) { - if(event.detail.source && event.detail.source !== "pi") { + if(event.detail.source && event.detail.source !== "keyframe") { var items = this.application.ninja.selectedElements; @@ -131,8 +133,8 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { var currentTop = this.animatedProperties["top"] + "px"; var currentLeft = this.animatedProperties["left"] + "px"; - this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop); - this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft); + ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe"); + ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe"); // turn on element change event listener this.eventManager.addEventListener("elementChange", this, false); -- cgit v1.2.3 From 68f6af70818652821507881daf0abd2e8b6d5d27 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 6 Feb 2012 21:09:25 -0800 Subject: Fix resized going off screen by giving layer gutter a max width of 500 Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 0a73705a..f5fb9378 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -27,6 +27,7 @@ } .tl_leftpane{ min-width: 200px; + max-width: 500px; position: relative; overflow: hidden; -webkit-box-flex: 0; -- cgit v1.2.3 From 7303780d92bce267eafd3793476674edf17816c9 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 07:29:32 -0800 Subject: Change DOM/layer handling workflow Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 152 +++++++++++++-------- 1 file changed, 95 insertions(+), 57 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a0e2376a..67081cda 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -108,6 +108,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.initTimelineView(); } }, + _isLayer: { value: false }, @@ -120,6 +121,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:true }, + _firstLayerDraw:{ + value:false, + writable:true + }, + willDraw: { value: function() { if (this._isLayer) { @@ -155,7 +161,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Default to one layer for new doc // this.newLayer(); - NJevent('newLayer'); + this._hashKey="123"; + _firstLayerDraw = false; + NJevent('newLayer',this._hashKey); + _firstLayerDraw = true; + // TODO - add condition for existing doc and parse DOM for top level elements } }, @@ -190,6 +200,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function(event){ event.stopPropagation(); this._deleteKeyDown=false; + if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ + this._hashKey="123"; + } NJevent('deleteLayer') } }, @@ -201,11 +214,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid; this.currentElement= event.detail.element; - while(this.arrLayers.pop()){ - } - while(this.arrTracks.pop()){ - } - +// if(this._firstLayerDraw===false){ +// while(this.arrLayers.pop()){ +// } +// while(this.arrTracks.pop()){ +// } +// } this._hashKey = event.detail.element.uuid; if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){ @@ -237,39 +251,39 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return; } - if(this._isElementAdded){ - if(this.addButtonClicked){ - layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); - trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); - if(layerObject!==undefined){ - while(layerObject[hashVariable]){ - if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){ - dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].element===event.detail){ - dLayer[hashVariable].deleted=true; - parentNode=dLayer[hashVariable].parentElement; - break; - } - hashVariable++; - } - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); - } - else if(layerObject[hashVariable].element===event.detail){ - this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]); - this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]); - this._isLayerAdded=true; - break; - } - hashVariable++; - this._isLayerAdded=false; - } - } - } +// if(this.addButtonClicked){ +// layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); +// trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); +// if(layerObject!==undefined){ +// while(layerObject[hashVariable]){ +// if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){ +// dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid); +// while(dLayer[hashVariable]){ +// if(dLayer[hashVariable].element===event.detail){ +// dLayer[hashVariable].deleted=true; +// parentNode=dLayer[hashVariable].parentElement; +// break; +// } +// hashVariable++; +// } +// this._setBreadCrumb=true; +// NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); +// +// } +// else if(layerObject[hashVariable].element===event.detail){ +// this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]); +// this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]); +// this._isLayerAdded=true; +// break; +// } +// hashVariable++; +// this._isLayerAdded=false; +// } +// } +// } + - if(this._isLayerAdded===false){ var newLayerName = "", //thingToPush = Layer.create(), thingToPush = {}, @@ -278,6 +292,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { myIndex = 0; // Build the thingToPush object + if(_firstLayerDraw){ + if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ + this._hashKey="123"; + } + } this.currentLayerNumber = this.currentLayerNumber +1; newLayerName = "Layer " + this.currentLayerNumber; @@ -288,10 +307,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.isTransformCollapsed = true; thingToPush.isStyleCollapsed = false; thingToPush.arrLayerStyles = []; - thingToPush.element=this.layerElement; + thingToPush.element=[]; thingToPush.deleted=false; thingToPush.parentElement=this.application.ninja.currentSelectedContainer; - this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; + // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; newTrack.trackID = this.currentLayerNumber; newTrack.isMainCollapsed = true; @@ -300,7 +319,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newTrack.isStyleCollapsed = false; newTrack.tweens = []; - // If a layer is selcted, splice the new layer on top // Otherwise, just push the new layer in at the bottom. @@ -312,20 +330,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newTrack.trackPosition=myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); + this.currentLayerSelected= this.arrLayers[myIndex]; this.layerRepetition.selectedIndexes = [myIndex]; } else { - this.arrLayers.splice(0, 0, thingToPush); - this.arrTracks.splice(0, 0, newTrack); + this.arrLayers.push(thingToPush); + this.arrTracks.push(newTrack); thingToPush.layerPosition=this.arrLayers.length-1; newTrack.trackPosition=this.arrTracks.length-1; + this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; + this.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition); this.hashTrackInstance.setItem(this._hashKey,newTrack,newTrack.trackPosition); } - } - } + + } }, @@ -469,25 +490,41 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: function(event) { this.layerElement=event.detail; this._isElementAdded=true; - NJevent('newLayer',event.detail); + this.currentLayerSelected.element.push(event.detail); this._isElementAdded=false; } }, - handleDeleteSelection:{ - value:function(event){ - this._deleteKeyDown=true; - this.deleteElement = event.detail[0]; - NJevent('deleteLayer',event.detail); - } - }, + + +// handleDeleteSelection:{ +// value:function(event){ +// var length; +// this._deleteKeyDown=true; +// this.deleteElement = event.detail[0]; +// length =this.currentLayerSelected.element.length-1; +// while(length >= 0){ +// if(this.currentLayerSelected.element[length]===this.deleteElement){ +// this.currentLayerSelected.element.splice(length,0); +// } +// } +// +// } +// }, handleElementDeleted: { value: function(event) { - this._undoElementDeleted=true; - this.deleteElement = event.detail[0]; - NJevent('deleteLayer',event.detail); - this._undoElementDeleted=false; + var length; + this._deleteKeyDown=true; + this.deleteElement = event.detail; + length =this.currentLayerSelected.element.length-1; + while(length >= 0){ + if(this.currentLayerSelected.element[length]===this.deleteElement){ + this.currentLayerSelected.element.splice(length,1); + break; + } + length--; + } } }, drawTimeMarkers:{ @@ -549,7 +586,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { setItem: { value: function(key,value,index) { - +// console.log(this.application.ninja.currentSelectedContainer) if(hashLayerObject[key]===undefined){ hashLayerObject[key]={}; } @@ -612,6 +649,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } hashTrackObject[key][index] = value; this.counter=0; +// console.log(hashTrackObject) } }, -- cgit v1.2.3 From fd26b97aa192ef74d21f7517a2608bb9b8a35265 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 07:39:39 -0800 Subject: Fix timeline time markers Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 67081cda..0dbcfa16 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -530,7 +530,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { drawTimeMarkers:{ value:function(){ var i; - var totalMarkers = Math.floor(this.track_container.offsetWidth / 80); + var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); for(i=0;i --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 13529115..5b1354d2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -199,11 +199,16 @@ 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 if (ev.shiftKey) { - if (this.tweens.length < 1) { - this.addAnimationRuleToElement(); - this.insertTween(0); + if(this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1){ + if (this.tweens.length < 1) { + this.addAnimationRuleToElement(); + this.insertTween(0); + } + this.handleNewTween(ev); + } else { + alert("There much be only one element in an animated layer.") } - this.handleNewTween(ev); + } } }, @@ -268,7 +273,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { addAnimationRuleToElement:{ value: function(){ - var theElement = this.application.ninja.currentDocument._document.getElementById(this.application.ninja.timeline.arrLayers[this.trackID - 1].layerName); + var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]; this.animatedElement = theElement; var initAnimatedProperties = new Array(); -- cgit v1.2.3 From 8cb53b7ec3b4f34fd77945256ad80bc1ae54b887 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 21:28:14 -0800 Subject: Add Span color highlight for animated spans and restyle keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 ++++++++++++---------- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 ++++++-- js/panels/Timeline/Span.reel/Span.js | 6 ++++++ js/panels/Timeline/Span.reel/css/Span.css | 4 ++++ .../TimelinePanel.reel/css/TimelinePanel.css | 1 + js/panels/Timeline/Tween.reel/Tween.html | 3 ++- 6 files changed, 32 insertions(+), 13 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 4bb73514..b6623dcd 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } }, + containingSpan:{ + value: null + }, + prepareForDraw:{ value:function(){ this.tweenkeyframe.addEventListener("click", this, false); @@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.tweenkeyframe.style.left = (this.position - 2) + "px"; + this.tweenkeyframe.style.left = (this.position - 3) + "px"; } }, @@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { if(event.detail.source && event.detail.source !== "keyframe") { var items = this.application.ninja.selectedElements; - - // update this keyframe's animated properties from the item[0] element props - this.animatedProperties["top"] = items[0]._element.offsetTop; - this.animatedProperties["left"] = items[0]._element.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - - this.containingTrack.updateKeyframeRule(); + this.containingSpan.highlightSpan(); + if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ + // update this keyframe's animated properties from the item[0] element props + this.animatedProperties["top"] = items[0]._element.offsetTop; + this.animatedProperties["left"] = items[0]._element.offsetLeft; + this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; + this.containingTrack.updateKeyframeRule(); + } } - - } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index e66bcf10..4afc1180 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -1,11 +1,15 @@ .tween_keyframe{ position: absolute; height: 16px; - width: 4px; + width: 5px; background-color: white; z-index: 23; + border-radius: 3px; } .tween_keyframe.keyframeSelected{ - background-color: blue; + background-color: #570e19; + border-style: solid; + border-width: thin; + border-color: #d6d1cf; } \ No newline at end of file diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 05f56a32..f7bd4ff0 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, { value: function(){ this.tweenspan.style.width = this.spanWidth + "px"; } + }, + + highlightSpan:{ + value: function(){ + this.tweenspan.classList.add("spanHighlight"); + } } }); diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 1583c20f..1e988c6c 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -3,4 +3,8 @@ height: 16px; opacity: 0.3; background-color: white; +} + +.tween_span.spanHighlight{ + background-color: #a0c8ff; } \ No newline at end of file diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f5fb9378..cbae49c8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -143,6 +143,7 @@ left: 0px; height: 20px; width: 100%; + border-bottom-style: solid; } .masterlayer{ diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index 3e72acc0..307dcd02 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -28,7 +28,8 @@ "module": "js/panels/Timeline/Keyframe.reel", "name": "Keyframe", "properties": { - "element": {"#": "keyframe_container"} + "element": {"#": "keyframe_container"}, + "containingSpan": {"@": "span"} } } } -- cgit v1.2.3 From 43a8db67a808bf42220203484db192faeb8e21cb Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 21:39:09 -0800 Subject: Layer Undo enhancements Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 478 +++++++++++++-------- 1 file changed, 304 insertions(+), 174 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 0dbcfa16..5bae14d4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -113,12 +113,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: false }, - _isLayerAdded:{ - value:false - }, - - addButtonClicked:{ - value:true + _firstTimeLoaded:{ + value:true, + writable:true }, _firstLayerDraw:{ @@ -129,11 +126,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { willDraw: { value: function() { if (this._isLayer) { - this.addButtonClicked=false; - this._isElementAdded=true; - NJevent('newLayer',this) - this._isLayer = false; - this.addButtonClicked=true; + this.insertLayer(); + this._isLayer = false;; } } }, @@ -203,7 +197,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ this._hashKey="123"; } - NJevent('deleteLayer') + this.removeLayer(); } }, @@ -211,23 +205,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function(event){ var i=0; this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode; - this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid; - this.currentElement= event.detail.element; - -// if(this._firstLayerDraw===false){ -// while(this.arrLayers.pop()){ -// } -// while(this.arrTracks.pop()){ -// } -// } - - this._hashKey = event.detail.element.uuid; - if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){ - this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey); - this._hashFind = true; - NJevent('newLayer'); - } + if(this._firstTimeLoaded){ + this._firstTimeLoaded=false; + }else{ + while(this.arrLayers.pop()){ + } + while(this.arrTracks.pop()){ + } + + if(event.detail.element.id==="UserContent"){ + this._hashKey= "123"; + }else{ + this._hashKey = event.detail.element.uuid; + } + + if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){ + this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey); + this._hashFind = true; + } + NJevent('newLayer',event.detail); + + } } }, @@ -250,40 +249,52 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._hashFind=false; return; } + if(event.detail._undoStatus){ + if(this.application.ninja.currentSelectedContainer.id==="UserContent" && event.detail._el.parentElementUUID===123 ){ + dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); + while(dLayer[hashVariable]){ + if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ + dLayer[hashVariable].deleted=false; + this.arrLayers.splice(event.detail._layerPosition,1,event.detail._el); + this.arrTracks.splice(event.detail._layerPosition,1,event.detail._track); + break; + + } + hashVariable++; + } + } + + else if(event.detail._el.parentElementUUID!==this.application.ninja.currentSelectedContainer.uuid){ + dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); + while(dLayer[hashVariable]){ + if(dLayer[hashVariable]._layerID===event.detail._el._layerID){ + dLayer[hashVariable].deleted=false; + parentNode=dLayer[hashVariable].parentElement; + break; + } + hashVariable++; + } + this._setBreadCrumb=true; + NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); + }else{ + dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); + while(dLayer[hashVariable]){ + if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ + dLayer[hashVariable].deleted=false; + this.arrLayers.splice(event.detail._layerPosition,1,event.detail._el); + this.arrTracks.splice(event.detail._layerPosition,1,event.detail._track); + break; + + } + hashVariable++; + } + } + } -// if(this.addButtonClicked){ -// layerObject = this.hashInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); -// trackObject = this.hashTrackInstance.getItem(this.application.ninja.currentSelectedContainer.uuid); -// if(layerObject!==undefined){ -// while(layerObject[hashVariable]){ -// if(event.detail.parentElement!==this.application.ninja.currentSelectedContainer){ -// dLayer=this.hashInstance.getItem(event.detail.parentNode.uuid); -// while(dLayer[hashVariable]){ -// if(dLayer[hashVariable].element===event.detail){ -// dLayer[hashVariable].deleted=true; -// parentNode=dLayer[hashVariable].parentElement; -// break; -// } -// hashVariable++; -// } -// this._setBreadCrumb=true; -// NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); -// -// } -// else if(layerObject[hashVariable].element===event.detail){ -// this.arrLayers.splice(layerObject[hashVariable].layerPosition,0,layerObject[hashVariable]); -// this.arrTracks.splice(trackObject[hashVariable].trackPosition,0,trackObject[hashVariable]); -// this._isLayerAdded=true; -// break; -// } -// hashVariable++; -// this._isLayerAdded=false; -// } -// } -// } + else{ var newLayerName = "", //thingToPush = Layer.create(), thingToPush = {}, @@ -292,11 +303,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { myIndex = 0; // Build the thingToPush object - if(_firstLayerDraw){ - if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ - this._hashKey="123"; - } - } this.currentLayerNumber = this.currentLayerNumber +1; newLayerName = "Layer " + this.currentLayerNumber; @@ -309,8 +315,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.arrLayerStyles = []; thingToPush.element=[]; thingToPush.deleted=false; + if(_firstLayerDraw){ + thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid; thingToPush.parentElement=this.application.ninja.currentSelectedContainer; - // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid; + } + newTrack.trackID = this.currentLayerNumber; newTrack.isMainCollapsed = true; @@ -319,32 +328,44 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newTrack.isStyleCollapsed = false; newTrack.tweens = []; + if(_firstLayerDraw){ + if(this.application.ninja.currentSelectedContainer.id==="UserContent"){ + this._hashKey="123"; + thingToPush.parentElementUUID = 123; + } + } + // If a layer is selcted, splice the new layer on top // Otherwise, just push the new layer in at the bottom. if (!!this.layerRepetition.selectedIndexes) { myIndex = this.layerRepetition.selectedIndexes[0]; - this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); - this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); thingToPush.layerPosition=myIndex; newTrack.trackPosition=myIndex; this.arrLayers.splice(myIndex, 0, thingToPush); this.arrTracks.splice(myIndex, 0, newTrack); + this._LayerUndoPosition = myIndex; this.currentLayerSelected= this.arrLayers[myIndex]; this.layerRepetition.selectedIndexes = [myIndex]; + this.hashInstance.setItem(this._hashKey,thingToPush,myIndex); + this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex); } else { this.arrLayers.push(thingToPush); this.arrTracks.push(newTrack); thingToPush.layerPosition=this.arrLayers.length-1; newTrack.trackPosition=this.arrTracks.length-1; this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1]; - + this._LayerUndoPosition = this.arrLayers.length-1; this.hashInstance.setItem(this._hashKey,thingToPush,thingToPush.layerPosition); this.hashTrackInstance.setItem(this._hashKey,newTrack,newTrack.trackPosition); } + this._LayerUndoObject = thingToPush; + this._LayerUndoIndex = thingToPush.layerID ; + this._LayerUndoStatus = true; + this._TrackUndoObject = newTrack; - + } } @@ -355,27 +376,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var dLayer,dTrack,parentNode,hashVariable=0,k=0,index=0,j=0; if (this.arrLayers.length > 0) { - if(this._undoElementDeleted){ - if(event.detail.dataset.parentUUID!==this.application.ninja.currentSelectedContainer.uuid){ - dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].element===event.detail){ - dLayer[hashVariable].deleted=true; - parentNode=dLayer[hashVariable].parentElement; - break; - } - hashVariable++; - } - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); - }else{ - dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID) - while(dLayer[hashVariable]){ + if(event.detail._undoStatus){ + if(this.application.ninja.currentSelectedContainer.id==="UserContent" && event.detail._el.parentElementUUID===123 ){ + dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); + while(dLayer[hashVariable]){ if(dLayer[hashVariable].deleted===true){ - }else if(dLayer[hashVariable].element.uuid === event.detail.uuid){ + }else if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ while(this.arrLayers.length){ - if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ + if(dLayer[hashVariable]._layerID===this.arrLayers[k]._layerID){ dLayer[hashVariable].deleted=true; this.arrLayers.splice(k,1); this.arrTracks.splice(k,1); @@ -385,113 +394,134 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } hashVariable++; + } + + }else if(event.detail._el.parentElementUUID!==this.application.ninja.currentSelectedContainer.uuid){ + dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); + while(dLayer[hashVariable]){ + if(dLayer[hashVariable]._layerID===event.detail._el._layerID){ + dLayer[hashVariable].deleted=true; + parentNode=dLayer[hashVariable].parentElement; + break; + } + hashVariable++; + } + this._setBreadCrumb=true; + NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); + } + else{ + dLayer=this.hashInstance.getItem(event.detail._el.parentElementUUID); + while(dLayer[hashVariable]){ + if(dLayer[hashVariable].deleted===true){ + + }else if(dLayer[hashVariable]._layerID === event.detail._el._layerID){ + while(this.arrLayers.length){ + if(dLayer[hashVariable]._layerID===this.arrLayers[k]._layerID){ + dLayer[hashVariable].deleted=true; + this.arrLayers.splice(k,1); + this.arrTracks.splice(k,1); + break; + } + k++; + } + } + hashVariable++; } } - } + + + + } else{ if (!!this.layerRepetition.selectedIndexes) { var myIndex = this.layerRepetition.selectedIndexes[0]; + this._LayerUndoObject=this.arrLayers[myIndex]; + this._TrackUndoObject=this.arrTracks[myIndex]; + dLayer = this.hashInstance.getItem(this._hashKey); dTrack = this.hashTrackInstance.getItem(this._hashKey); dLayer[myIndex].deleted=true; this.arrLayers.splice(myIndex, 1); this.arrTracks.splice(myIndex, 1); - - } else if(this._deleteKeyDown) { - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - - if(this.deleteElement === this.application.ninja.currentSelectedContainer){ - while(dLayer[hashVariable]){ - dLayer[hashVariable].deleted=true; - hashVariable++; - } - - this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); - hashVariable=0; - while(this.dObject[hashVariable]){ - if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ - this.dObject[hashVariable].deleted=true; - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); - this._setBreadCrumb=false; - break; - } - hashVariable++; - } - this._deleteKeyDown=false; - } else if(this.deleteElement!== this.application.ninja.currentSelectedContainer){ - - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].deleted===true){ - - }else if(dLayer[hashVariable].element.uuid === this.deleteElement.uuid){ - while(this.arrLayers.length){ - if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ - dLayer[hashVariable].deleted=true; - this.arrLayers.splice(k,1); - this.arrTracks.splice(k,1); - break; - } - k++; - } - } - hashVariable++; - } - } + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._LayerUndoPosition = myIndex; + }else{ + dLayer = this.hashInstance.getItem(this._hashKey); + dTrack = this.hashTrackInstance.getItem(this._hashKey); + dLayer[this.arrLayers.length-1].deleted=true; + this._LayerUndoPosition = this.arrLayers.length-1; + this._LayerUndoObject = this.arrLayers.pop(); + this._LayerUndoIndex = this._LayerUndoObject.layerID; + this._TrackUndoObject = this.arrTracks.pop(); } - else{ - dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); - dLayer[this.arrLayers.length-1].deleted=true; - this.arrLayers.pop(); - this.arrTracks.pop(); - } - } - }else if (this.arrLayers.length <= 0) { - if(this._undoElementDeleted){ - if(event.detail.dataset.parentUUID!==this.application.ninja.currentSelectedContainer.uuid){ - dLayer=this.hashInstance.getItem(event.detail.dataset.parentUUID); - while(dLayer[hashVariable]){ - if(dLayer[hashVariable].element===event.detail){ - dLayer[hashVariable].deleted=true; - parentNode=dLayer[hashVariable].parentElement; - break; - } - hashVariable++; - } - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":parentNode,"setFlag":this._setBreadCrumb}); - } - }else - if(this._deleteKeyDown) { - this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); - hashVariable=0; - while(this.dObject[hashVariable]){ - if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ - this.dObject[hashVariable].deleted=true; - this._setBreadCrumb=true; - NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); - this._setBreadCrumb=false; - break; - } - hashVariable++; - } - } - } - // TODO: actually remove the selected style from the layer. (Maybe by publishing an event?) +// else if(this._deleteKeyDown) { +// dLayer = this.hashInstance.getItem(this._hashKey); +// dTrack = this.hashTrackInstance.getItem(this._hashKey); +// +// if(this.deleteElement === this.application.ninja.currentSelectedContainer){ +// while(dLayer[hashVariable]){ +// dLayer[hashVariable].deleted=true; +// hashVariable++; +// } +// +// this.dObject=this.hashInstance.getItem(this.removeLayerFromParentUUid); +// hashVariable=0; +// while(this.dObject[hashVariable]){ +// if(this.application.ninja.currentSelectedContainer===this.dObject[hashVariable].element){ +// this.dObject[hashVariable].deleted=true; +// this._setBreadCrumb=true; +// NJevent('breadCrumbTrail',{"element":this.currentParentNode,"setFlag":this._setBreadCrumb}); +// this._setBreadCrumb=false; +// break; +// } +// hashVariable++; +// } +// this._deleteKeyDown=false; +// } else if(this.deleteElement!== this.application.ninja.currentSelectedContainer){ +// +// while(dLayer[hashVariable]){ +// if(dLayer[hashVariable].deleted===true){ +// +// }else if(dLayer[hashVariable].element.uuid === this.deleteElement.uuid){ +// while(this.arrLayers.length){ +// if(dLayer[hashVariable].layerID===this.arrLayers[k].layerID){ +// dLayer[hashVariable].deleted=true; +// this.arrLayers.splice(k,1); +// this.arrTracks.splice(k,1); +// break; +// } +// k++; +// } +// } +// hashVariable++; +// } +// } +// } +// else{ +// dLayer = this.hashInstance.getItem(this._hashKey); +// dTrack = this.hashTrackInstance.getItem(this._hashKey); +// dLayer[this.arrLayers.length-1].deleted=true; +// this.arrLayers.pop(); +// this.arrTracks.pop(); +// } + } + } } }, handleElementAdded: { value: function(event) { this.layerElement=event.detail; - this._isElementAdded=true; - this.currentLayerSelected.element.push(event.detail); - this._isElementAdded=false; + if(!!this.layerRepetition.selectedIndexes){ + this.currentLayerSelected = this.arrLayers[this.layerRepetition.selectedIndexes]; + this.currentLayerSelected.element.push(event.detail) + } + else{ + this.currentLayerSelected.element.push(event.detail); + } } }, @@ -515,8 +545,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementDeleted: { value: function(event) { var length; - this._deleteKeyDown=true; this.deleteElement = event.detail; + + if(!!this.layerRepetition.selectedIndexes){ + this.currentLayerSelected = this.arrLayers[this.layerRepetition.selectedIndexes]; + } length =this.currentLayerSelected.element.length-1; while(length >= 0){ if(this.currentLayerSelected.element[length]===this.deleteElement){ @@ -604,6 +637,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } hashLayerObject[key][index] = value; this.counter=0; +// console.log(hashLayerObject) } }, @@ -663,6 +697,102 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { return hashTrackObject; } + }, + + insertLayer: { + value: function() { + + var cmd = this.addLayerCommand(); + cmd.execute(); + cmd._el=this._LayerUndoObject; + cmd._layerID = this._LayerUndoIndex; + cmd._layerPosition = this._LayerUndoPosition + cmd._undoStatus = this._LayerUndoStatus; + cmd._track = this._TrackUndoObject; + + NJevent("sendToUndo", cmd); + + + + } + }, + + removeLayer: { + value: function() { + + var cmd = this.deleteLayerCommand(); + cmd.execute(); + cmd._el=this._LayerUndoObject; + cmd._layerID = this._LayerUndoIndex; + cmd._layerPosition = this._LayerUndoPosition + cmd._undoStatus = this._LayerUndoStatus; + cmd._track = this._TrackUndoObject; + + NJevent("sendToUndo", cmd); + + + } + }, + + addLayerCommand: { + value : function(){ + var command; + + command = Object.create(Object.prototype, { + + _el:{value:null,writable:true}, + _layerID:{value:null,writable:true}, + _layerPosition:{value:null,writable:true}, + _undoStatus:{value:false,writable:true}, + _track:{value:null,writable:true}, + + + description: { value: "Add Layer"}, + receiver : {value: TimelinePanel}, + + execute: { + value: function() { + NJevent('newLayer',this) + + } + }, + + unexecute: { + value: function() { + NJevent('deleteLayer',this) + + } + } + }); + + return command; + } + }, + + deleteLayerCommand: { + value : function(){ + var command; + command = Obje