From 205d869d94005cb214fd838879d4f5e81d763311 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 1 Mar 2012 18:01:08 -0800 Subject: Timeline: Merge arrlayers and arrtracks into one object. Redefine collapser to use property binding instead of events. --- js/panels/Timeline/Collapser.js | 26 +++- js/panels/Timeline/Layer.reel/Layer.js | 138 ++++++++++++++++++--- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 19 ++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 43 +++++-- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 95 +++++++++++++- 5 files changed, 288 insertions(+), 33 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index ad490c2e..d161cdd7 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage, }, _bypassAnimation : { - value: false + value: true }, bypassAnimation: { get: function() { @@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage, } }, + _isToggling: { + serializable: true, + value: true + }, + isToggling: { + serializable: true, + get: function() { + return this._isToggling; + }, + set: function(newVal) { + if (newVal !== this._isToggling) { + this._isToggling = newVal; + + if (this.bypassAnimation) { + this.isAnimated = false; + } + this.myContent.classList.remove(this.transitionClass); + this.handleCollapserLabelClick(); + } + } + }, + /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -321,7 +343,7 @@ var Montage = require("montage/core/core").Montage, } if (this.bypassAnimation) { - this.bypassAnimation = false; + this.bypassAnimation = true; this.isAnimated = true; } } diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 94d1f7e9..f9bba499 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, { // Are the various collapsers collapsed or not _isMainCollapsed : { - value: "" + serializable: true, + value: true }, isMainCollapsed : { + serializable: true, get: function() { return this._isMainCollapsed; }, set: function(newVal) { + this.log('layer.js: isMainCollapsed: ' + newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; - this.needsDraw = true; } } }, _isTransformCollapsed : { + serializable: true, value: true }, isTransformCollapsed : { + serializable: true, get: function() { return this._isTransformCollapsed; }, @@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isPositionCollapsed : { + serializable: true, value: true }, isPositionCollapsed : { + serializable: true, get: function() { return this._isPositionCollapsed; }, @@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isStyleCollapsed : { + serializable: true, value: true }, isStyleCollapsed : { + serializable: true, get: function() { return this._isStyleCollapsed; }, @@ -364,6 +372,19 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, + _animateCollapser : { + serializable: true, + value: false + }, + animateCollapser : { + serializable: true, + get: function() { + return this._animateCollapser; + }, + set: function(newVal) { + this._animateCollapser = newVal; + } + }, /* END: Models */ @@ -404,10 +425,19 @@ var Layer = exports.Layer = Montage.create(Component, { this.mainCollapser.contentHeight = 60; this.myContent.style.height = "0px"; this.mainCollapser.element = this.myContent; - //this.mainCollapser.isCollapsedAtStart = true; this.mainCollapser.isCollapsed = this.isMainCollapsed; this.mainCollapser.isAnimated = true; this.element.setAttribute("data-layerid", this.layerID); + // Bind the collapser's isToggling property to the isMainCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.mainCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isMainCollapsed", + oneway: false + }); + this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); + + /* this.mainCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isMainCollapsed = that.mainCollapser.isCollapsed; } + */ //this.mainCollapser.needsDraw = true; this.positionCollapser.clicker = this.clickerPosition; this.positionCollapser.myContent = this.contentPosition; this.positionCollapser.element = this.contentPosition; this.positionCollapser.contentHeight = 40; - // this.positionCollapser.isCollapsedAtStart = true; this.positionCollapser.isCollapsed = this.isPositionCollapsed; - this.positionCollapser.isAnimated = true; + this.positionCollapser.isAnimated = false; + // Bind the collapser's isToggling property to the isPositionCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.positionCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isPositionCollapsed", + oneway: false + }); + this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); + + /* this.positionCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -437,15 +477,26 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isPositionCollapsed = that.positionCollapser.isCollapsed; } + */ //this.positionCollapser.needsDraw = true; this.transformCollapser.clicker = this.clickerTransform; this.transformCollapser.myContent = this.contentTransform; this.transformCollapser.element = this.contentTransform; this.transformCollapser.contentHeight = 100; - // this.transformCollapser.isCollapsedAtStart = true; this.transformCollapser.isCollapsed = this.isTransformCollapsed; - this.transformCollapser.isAnimated = true; + this.transformCollapser.isAnimated = false; + // Bind the collapser's isToggling property to the isTransformCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.transformCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isTransformCollapsed", + oneway: false + }); + this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); + + + /* this.transformCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -456,6 +507,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isTransformCollapsed = that.transformCollapser.isCollapsed; } + */ //this.transformCollapser.needsDraw = true; this.styleCollapser.clicker = this.clickerStyle; @@ -463,7 +515,18 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.element = this.contentStyle; this.styleCollapser.isCollapsed = this.isStyleCollapsed; this.styleCollapser.contentHeight = 0; - this.styleCollapser.isAnimated = true; + this.styleCollapser.isAnimated = false; + // Bind the collapser's isToggling property to the isStyleCollapsed property, + // so a change in one will affect the other. + Object.defineBinding(this.styleCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isStyleCollapsed", + oneway: false + }); + this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); + + + /* this.styleCollapser.labelClickEvent = function(boolBypass) { var newEvent = document.createEvent("CustomEvent"); newEvent.initCustomEvent("layerEvent", false, true); @@ -474,6 +537,7 @@ var Layer = exports.Layer = Montage.create(Component, { defaultEventManager.dispatchEvent(newEvent); that.isStyleCollapsed = that.styleCollapser.isCollapsed; } + */ //this.styleCollapser.needsDraw = true; // Add event listeners to add and delete style buttons @@ -493,20 +557,22 @@ var Layer = exports.Layer = Montage.create(Component, { value: function() { // Coordinate the collapsers + this.log('layer.js draw') if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { - this.mainCollapser.bypassAnimation = true; + this.log('layer.js draw: this.animateCollapser ' + this.animateCollapser) + this.mainCollapser.bypassAnimation = this.animateCollapser; this.mainCollapser.toggle(); } if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) { - this.positionCollapser.bypassAnimation = true; + this.positionCollapser.bypassAnimation = this.animateCollapser; this.positionCollapser.toggle(); } if (this.transformCollapser.isCollapsed !== this.isTransformCollapsed) { - this.transformCollapser.bypassAnimation = true; + this.transformCollapser.bypassAnimation = this.animateCollapser; this.transformCollapser.toggle(); } if (this.styleCollapser.isCollapsed !== this.isStyleCollapsed) { - this.styleCollapser.bypassAnimation = true; + this.styleCollapser.bypassAnimation = this.animateCollapser; this.styleCollapser.toggle(); } if (this.isSelected) { @@ -597,7 +663,7 @@ var Layer = exports.Layer = Montage.create(Component, { // Set up the event info and dispatch the event newEvent.styleSelection = mySelection; - defaultEventManager.dispatchEvent(newEvent); + //defaultEventManager.dispatchEvent(newEvent); } }, @@ -617,7 +683,7 @@ var Layer = exports.Layer = Montage.create(Component, { newEvent.layerID = this.layerID; newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID; newEvent.styleSelection = selectedIndex; - defaultEventManager.dispatchEvent(newEvent); + //defaultEventManager.dispatchEvent(newEvent); // Delete the style from the view this.arrLayerStyles.splice(selectedIndex, 1); @@ -724,6 +790,50 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, + handleMainCollapserClick : { + value: function(event) { + this.mainCollapser.bypassAnimation = false; + this.animateCollapser = true; + if (this.isMainCollapsed) { + this.isMainCollapsed = false; + } else { + this.isMainCollapsed = true; + } + } + }, + handlePositionCollapserClick : { + value: function(event) { + this.positionCollapser.bypassAnimation = false; + //this.animateCollapser = true; + if (this.isPositionCollapsed) { + this.isPositionCollapsed = false; + } else { + this.isPositionCollapsed = true; + } + } + }, + handleTransformCollapserClick : { + value: function(event) { + this.transformCollapser.bypassAnimation = false; + //this.animateCollapser = true; + if (this.isTransformCollapsed) { + this.isTransformCollapsed = false; + } else { + this.isTransformCollapsed = true; + } + } + }, + handleStyleCollapserClick : { + value: function(event) { + this.styleCollapser.bypassAnimation = false; + //this.animateCollapser = true; + if (this.isStyleCollapsed) { + this.isStyleCollapsed = false; + } else { + this.isStyleCollapsed = true; + } + } + }, /* End: Event handlers */ /* Begin: Logging routines */ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 92adee05..77481ac0 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -101,6 +101,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", "oneway" : false }, + "animateCollapser" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.animateCollapser", + "oneway" : false + }, "isSelected" : { "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected", @@ -116,6 +121,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", "oneway" : false }, + "animateCollapser" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.animateCollapser", + "oneway" : false + }, "dtextPositionX" : { "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextPositionX", @@ -164,7 +174,7 @@ "bindings": { "objects": { "boundObject": {"@": "owner"}, - "boundObjectPropertyPath": "arrTracks", + "boundObjectPropertyPath": "arrLayers", "oneway": false } } @@ -178,7 +188,7 @@ "bindings" : { "trackID" : { "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.trackID", + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerID", "oneway" : false }, "tweens" : { @@ -231,6 +241,11 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", "oneway" : false }, + "animateCollapser" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.animateCollapser", + "oneway" : false + }, "isStyleCollapsed" : { "boundObject" : {"@" : "repetition2"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 59306705..49f044d7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -47,11 +47,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _cacheArrays : { value: function() { // Cache this.arrLayers and this.arrTracks. - this.log('cacheArrays ' + this._boolCacheArrays) + //this.log('cacheArrays ' + this._boolCacheArrays) if (this._boolCacheArrays) { - this.log('caching arrays for ', this.application.ninja.currentDocument.name); + //this.log('caching arrays for ', this.application.ninja.currentDocument.name); this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; + //this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; } } }, @@ -530,6 +530,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (layerResult = this.returnedObject[hashIndex]) { trackResult = this.returnedTrack[hashIndex]; if (layerResult.deleted !== true) { + + // TODO: Help from Kruti this.arrTracks.push(trackResult); this.arrLayers.push(layerResult); @@ -545,6 +547,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (dLayer[hashVariable]) { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = false; + + // TODO: Help from Kruti this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el); this.selectLayer(event.detail._layerPosition); @@ -572,6 +576,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while (dLayer[hashVariable]) { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = false; + + // TODO: Help from Kruti this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el); this.selectLayer(event.detail._layerPosition); @@ -608,6 +614,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.deleted = false; thingToPush.isSelected = false; thingToPush.created=false; + thingToPush.isTrackAnimated = false; + thingToPush.currentKeyframeRule = null; + thingToPush.trackPosition = 0; + thingToPush.arrStyleTracks = []; + thingToPush.tweens = []; if (_firstLayerDraw) { this.application.ninja.currentSelectedContainer.uuid=this._hashKey; @@ -619,7 +630,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { event.detail.ele.uuid =nj.generateRandom(); thingToPush.elementsList.push(event.detail.ele); } - + /* newTrack.trackID = this.currentLayerNumber; newTrack.isMainCollapsed = true; newTrack.isPositionCollapsed = true; @@ -630,6 +641,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newTrack.trackPosition = 0; newTrack.arrStyleTracks = []; newTrack.tweens = []; + */ if (_firstLayerDraw) { if (this.application.ninja.currentSelectedContainer.id === "UserContent") { @@ -643,18 +655,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { myIndex = this.layerRepetition.selectedIndexes[0]; thingToPush.layerPosition = myIndex; thingToPush.isSelected = true; - newTrack.trackPosition = myIndex; - this.arrTracks.splice(myIndex, 0, newTrack); + //newTrack.trackPosition = myIndex; + thingToPush.trackPosition = myIndex; + //this.arrTracks.splice(myIndex, 0, newTrack); this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; this.selectLayer(myIndex); this.hashLayerNumber.setItem(this._hashKey, thingToPush); this.hashInstance.setItem(this._hashKey, thingToPush, myIndex); + + // TODO: Help from Kruti this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); } else { - this.arrTracks.splice(0, 0, newTrack); + //this.arrTracks.splice(0, 0, newTrack); this.arrLayers.splice(0, 0, thingToPush); thingToPush.layerPosition = this.arrLayers.length - 1; + + // TODO: Help from Kruti newTrack.trackPosition = this.arrTracks.length - 1; this._LayerUndoPosition = this.arrLayers.length - 1; this.hashLayerNumber.setItem(this._hashKey, thingToPush); @@ -697,7 +714,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { dLayer[hashVariable].deleted = true; // ElementMediator.deleteElements(dLayer[myIndex].element); this.arrLayers.splice(k, 1); - this.arrTracks.splice(k, 1); + //this.arrTracks.splice(k, 1); if(k>0){ this.selectLayer(k-1); }else{ @@ -735,7 +752,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { dLayer[hashVariable].deleted = true; // ElementMediator.deleteElements(dLayer[myIndex].element); this.arrLayers.splice(k, 1); - this.arrTracks.splice(k, 1); + //this.arrTracks.splice(k, 1); if(k>0){ this.selectLayer(k-1); }else{ @@ -754,6 +771,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (!!this.layerRepetition.selectedIndexes) { var myIndex = this.layerRepetition.selectedIndexes[0]; this._LayerUndoObject = this.arrLayers[myIndex]; + + // TODO: Help from Kruti this._TrackUndoObject = this.arrTracks[myIndex]; dLayer = this.hashInstance.getItem(this._hashKey); @@ -761,7 +780,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { dLayer[myIndex].deleted = true; this.arrLayers.splice(myIndex, 1); - this.arrTracks.splice(myIndex, 1); + //this.arrTracks.splice(myIndex, 1); this._LayerUndoIndex = this._LayerUndoObject.layerID; this._LayerUndoPosition = myIndex; @@ -781,6 +800,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoPosition = this.arrLayers.length - 1; this._LayerUndoObject = this.arrLayers.pop(); this._LayerUndoIndex = this._LayerUndoObject.layerID; + + // TODO: Help from Kruti this._TrackUndoObject = this.arrTracks.pop(); } } @@ -1025,7 +1046,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layerRepetition.selectedIndexes = [layerIndex]; this.trackRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; - this.currentTrackSelected = this.arrTracks[layerIndex]; + //this.currentTrackSelected = this.arrTracks[layerIndex]; if(!this._openDoc){ if(this._captureSelection){ if(this.currentLayerSelected.elementsList.length >= 1){ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 74a7f962..a10cb4d8 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Are the various collapsers collapsed or not _isMainCollapsed:{ - value:"" + value: true }, isMainCollapsed:{ get:function () { return this._isMainCollapsed; }, set:function (newVal) { + this.log('TimelineTrack.js: isMainCollapsed: ', newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; - this.needsDraw = true; } } @@ -89,6 +89,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + _animateCollapser : { + serializable: true, + value: false + }, + animateCollapser : { + serializable: true, + get: function() { + return this._animateCollapser; + }, + set: function(newVal) { + this._animateCollapser = newVal; + } + }, _arrStyleTracks : { serializable:true, @@ -345,6 +358,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { draw:{ value:function () { this.ninjaStylesContoller = this.application.ninja.stylesController; + return; if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) { this._mainCollapser.toggle(false); } @@ -450,7 +464,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { alert("Splitting an existing span with a new keyframe is not yet supported."); - //console.log("splitting tween at span offsetX: " + ev.offsetX); + //this.log("splitting tween at span offsetX: " + ev.offsetX); } }, @@ -589,9 +603,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._mainCollapser.element = this.myContent; this._mainCollapser.isCollapsed = this.isMainCollapsed; this._mainCollapser.isAnimated = true; + Object.defineBinding(this._mainCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isMainCollapsed", + oneway: false + }); + Object.defineBinding(this._mainCollapser, "bypassAnimation", { + boundObject: this, + boundObjectPropertyPath: "animateCollapser", + oneway: false, + boundValueMutator: function(value) { + return !value; + } + }); + + /* this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; + */ //this._mainCollapser.needsDraw = true; this._positionCollapser = Collapser.create(); @@ -602,9 +632,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._positionCollapser.element = this.contentPosition; this._positionCollapser.isCollapsed = this.isPositionCollapsed; this._positionCollapser.isAnimated = true; + Object.defineBinding(this._positionCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isPositionCollapsed", + oneway: false + }); + + + /* this._positionCollapser.labelClickEvent = function () { that.isPositionCollapsed = that._positionCollapser.isCollapsed; }; + */ //this._positionCollapser.needsDraw = true; this._transformCollapser = Collapser.create(); @@ -615,9 +654,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._transformCollapser.element = this.contentTransform; this._transformCollapser.isCollapsed = this.isTransformCollapsed; this._transformCollapser.isAnimated = true; + Object.defineBinding(this._transformCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isTransformCollapsed", + oneway: false + }); + + + /* this._transformCollapser.labelClickEvent = function () { that.isTransformCollapsed = that._transformCollapser.isCollapsed; }; + */ //this._transformCollapser.needsDraw = true; this._styleCollapser = Collapser.create(); @@ -628,13 +676,22 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.element = this.contentStyles; this._styleCollapser.isCollapsed = this.isStyleCollapsed; this._styleCollapser.isAnimated = true; + Object.defineBinding(this._styleCollapser, "isToggling", { + boundObject: this, + boundObjectPropertyPath: "isStyleCollapsed", + oneway: false + }); + + + /* this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; }; + */ //this._styleCollapser.needsDraw = true; // Register event handler for layer events. - defaultEventManager.addEventListener("layerEvent", this, false); + //defaultEventManager.addEventListener("layerEvent", this, false); } }, @@ -668,5 +725,35 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrStyleTracks.pop(); } } + }, + /* Begin: Logging routines */ + _boolDebug: { + enumerable: false, + value: false // set to true to enable debugging to console; false for turning off all debugging. + }, + boolDebug: { + get: function() { + return this._boolDebug; + }, + set: function(boolDebugSwitch) { + this._boolDebug = boolDebugSwitch; + } + }, + log: { + value: function(strMessage) { + if (this.boolDebug) { + console.log(this.getLineNumber() + ": " + strMessage); + } + } + }, + getLineNumber: { + value: function() { + try { + throw new Error('bazinga') + }catch(e){ + return e.stack.split("at")[3].split(":")[2]; + } + } } + /* End: Logging routines */ }); -- cgit v1.2.3 From 8b08cbf68180187fe3913ea853adc0f65895fde5 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 21:54:35 -0800 Subject: Fix for selection change event handler event handler wasn't being executed because of incorrect handler function name Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 3 +-- 1 file changed, 1 insertion(+), 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 49f044d7..9819d7e1 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -405,7 +405,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - captureSelectionChange:{ + handleSelectionChange:{ value:function(){ var key , switchSelectedLayer,layerIndex; if(this.application.ninja.selectedElements[0]){ @@ -416,7 +416,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._captureSelection=false; this.selectLayer(layerIndex); this._captureSelection=true; - } } } -- cgit v1.2.3 From ef41a2897809d768e066ee3b4bfbb436ab20175c Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 1 Mar 2012 23:58:41 -0800 Subject: Timeline bug fixes and cleanup Deselect tweens on every selection change. Replace JS alerts with console logs. Cleanup obsolete models and references. Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 90 +++++----------------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 10 +-- js/panels/Timeline/Tween.reel/Tween.js | 8 +- 3 files changed, 23 insertions(+), 85 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9819d7e1..93fd170e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -44,14 +44,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._layerRepetition = newVal; } }, + _cacheArrays : { value: function() { - // Cache this.arrLayers and this.arrTracks. - //this.log('cacheArrays ' + this._boolCacheArrays) if (this._boolCacheArrays) { - //this.log('caching arrays for ', this.application.ninja.currentDocument.name); this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; - //this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; } } }, @@ -80,10 +77,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: null }, - currentTrackSelected:{ - value: null - }, - millisecondsOffset:{ value:1000 }, @@ -181,22 +174,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:false, writable:true }, + timeMarkerHolder:{ value: null }, /* === END: Models === */ - /* === BEGIN: Draw cycle === */ prepareForDraw:{ - value:function () { - this.initTimeline(); - this.eventManager.addEventListener("onOpenDocument", this, false); - this.eventManager.addEventListener("closeDocument", this, false); - this.eventManager.addEventListener("switchDocument", this, false); - } - }, + value:function () { + this.initTimeline(); + this.eventManager.addEventListener("onOpenDocument", this, false); + this.eventManager.addEventListener("closeDocument", this, false); + this.eventManager.addEventListener("switchDocument", this, false); + } + }, - willDraw:{ value:function () { if (this._isLayer) { @@ -206,9 +198,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, /* === END: Draw cycle === */ - /* === BEGIN: Controllers === */ - // Bind all document-specific events (pass in true to unbind) _bindDocumentEvents : { value: function(boolUnbind) { @@ -259,7 +249,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.drawTimeMarkers(); this._hashKey = "123"; - // Document switching // Check to see if we have saved timeline information in the currentDocument. if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { @@ -300,7 +289,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // we do have information stored. Use it. - this.log('oldfile ' + this.application.ninja.currentDocument.name) this._boolCacheArrays = false; this.arrLayers = []; this.arrTracks = []; @@ -313,8 +301,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layerRepetition.needsDraw = true; this.trackRepetition.needsDraw = true; this.needsDraw = true; - - } }, @@ -323,7 +309,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Remove events this._bindDocumentEvents(true); - // Remove every event listener for every tween in TimelineTrack + // Remove every event listener for every selected tween in the timeline this.deselectTweens(); // Reset visual appearance @@ -342,21 +328,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerNumber = 0; this.currentLayerSelected = false; - this.currentTrackSelected = false; this.selectedKeyframes = []; this.selectedTweens = []; this._captureSelection = false; this._openDoc = false; this.end_hottext.value = 25; this.updateTrackContainerWidth(); - } }, - handleOnOpenDocument:{ value:function(){ - this._boolCacheArrays = false; this.clearTimelinePanel(); this._boolCacheArrays = true; @@ -367,8 +349,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashLayerNumber = this.createLayerNumberHash(); this.hashElementMapToLayer = this.createElementMapToLayer(); this.initTimelineForDocument(); - - } }, @@ -393,7 +373,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (this.timeMarkerHolder) { this.time_markers.removeChild(this.timeMarkerHolder); } - this.drawTimeMarkers(); } }, @@ -408,6 +387,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleSelectionChange:{ value:function(){ var key , switchSelectedLayer,layerIndex; + this.deselectTweens(); if(this.application.ninja.selectedElements[0]){ key = this.application.ninja.selectedElements[0].uuid; switchSelectedLayer = this.hashElementMapToLayer.getItem(key); @@ -468,7 +448,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayerClick:{ value:function (event) { - this.log('handleDeleteLayerClick called') if (this.arrLayers.length === 1) { // do not delete last layer return; @@ -488,7 +467,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleLayerBinding:{ value:function (event) { var i = 0; - if (this._firstTimeLoaded) { this._firstTimeLoaded = false; } else { @@ -524,7 +502,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleNewLayer:{ value:function (event) { var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode; - if (this._hashFind) { while (layerResult = this.returnedObject[hashIndex]) { trackResult = this.returnedTrack[hashIndex]; @@ -556,10 +533,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } hashVariable++; } - - } - - else if (event.detail._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { + } 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) { @@ -618,6 +592,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.trackPosition = 0; thingToPush.arrStyleTracks = []; thingToPush.tweens = []; + if (_firstLayerDraw) { this.application.ninja.currentSelectedContainer.uuid=this._hashKey; @@ -629,18 +604,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { event.detail.ele.uuid =nj.generateRandom(); thingToPush.elementsList.push(event.detail.ele); } - /* - newTrack.trackID = this.currentLayerNumber; - newTrack.isMainCollapsed = true; - newTrack.isPositionCollapsed = true; - newTrack.isTransformCollapsed = true; - newTrack.isStyleCollapsed = true; - newTrack.isTrackAnimated = false; - newTrack.currentKeyframeRule = null; - newTrack.trackPosition = 0; - newTrack.arrStyleTracks = []; - newTrack.tweens = []; - */ if (_firstLayerDraw) { if (this.application.ninja.currentSelectedContainer.id === "UserContent") { @@ -654,9 +617,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { myIndex = this.layerRepetition.selectedIndexes[0]; thingToPush.layerPosition = myIndex; thingToPush.isSelected = true; - //newTrack.trackPosition = myIndex; thingToPush.trackPosition = myIndex; - //this.arrTracks.splice(myIndex, 0, newTrack); this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; this.selectLayer(myIndex); @@ -666,7 +627,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // TODO: Help from Kruti this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); } else { - //this.arrTracks.splice(0, 0, newTrack); this.arrLayers.splice(0, 0, thingToPush); thingToPush.layerPosition = this.arrLayers.length - 1; @@ -689,9 +649,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoIndex = thingToPush.layerID; this._LayerUndoStatus = true; this._TrackUndoObject = newTrack; - - - } } }, @@ -699,7 +656,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDeleteLayer:{ value:function (event) { var dLayer, dTrack, parentNode, hashVariable = 0, k = 0, index = 0, j = 0; - if (this.arrLayers.length > 0) { if (event.detail._undoStatus) { if (this.application.ninja.currentSelectedContainer.id === "UserContent" && event.detail._el.parentElementUUID === 123) { @@ -810,13 +766,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementAdded:{ value:function (event) { - event.detail.uuid=nj.generateRandom(); if(this.currentLayerSelected.elementsList[0]!==undefined){ - if(this.currentTrackSelected.isTrackAnimated){ - this.application.ninja.stage.clearDrawingCanvas(); - this.log("cannot add elements to a layer with animated element"); - return; + if(this.currentLayerSelected.isTrackAnimated){ + // need to prevent element adding to dom, not just clear the drawing canvas + //this.application.ninja.stage.clearDrawingCanvas(); + console.log("cannot add elements to a layer with animated element"); }else{ this.hashElementMapToLayer.setItem(event.detail.uuid, event.detail,this.currentLayerSelected); this.currentLayerSelected.elementsList.push(event.detail); @@ -830,7 +785,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleElementDeleted:{ value:function (event) { - var length; this.deleteElement = event.detail; length = this.currentLayerSelected.elementsList.length - 1; @@ -891,7 +845,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { createLayerHashTable:{ value:function (key, value) { var hashLayerObject; - hashLayerObject = Object.create(Object.prototype, { counter:{ value:0, @@ -1026,13 +979,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayer:{ value:function (layerIndex) { - var i = 0, - arrLayersLength = this.arrLayers.length; + var i = 0; + var arrLayersLength = this.arrLayers.length; if(this.selectedKeyframes){ this.deselectTweens(); } - for (i = 0; i < arrLayersLength; i++) { if (i === layerIndex) { this.arrLayers[i].isSelected = true; @@ -1040,12 +992,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrLayers[i].isSelected = false; } } - if (layerIndex !== false) { this.layerRepetition.selectedIndexes = [layerIndex]; this.trackRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; - //this.currentTrackSelected = this.arrTracks[layerIndex]; if(!this._openDoc){ if(this._captureSelection){ if(this.currentLayerSelected.elementsList.length >= 1){ @@ -1060,9 +1010,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.layerRepetition.selectedIndexes = null; this.trackRepetition.selectedIndexes = null; this.currentLayerSelected = null; - this.currentTrackSelected = null; } - } }, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a10cb4d8..d35f59d3 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -404,7 +404,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.handleNewTween(ev); } } else { - alert("There must be exactly one element in an animated layer.") + console.log("There must be exactly one element in an animated layer."); } } } @@ -463,14 +463,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { splitTween:{ value:function (ev) { - alert("Splitting an existing span with a new keyframe is not yet supported."); - //this.log("splitting tween at span offsetX: " + ev.offsetX); + console.log("Splitting an existing span with a new keyframe is not yet supported."); } }, retrieveStoredTweens:{ value:function () { - var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute + var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute; var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); @@ -504,7 +503,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenedProperties["top"] = tempTopOffset; newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); - } else { tempTiming = trackTiming.split("s"); @@ -525,8 +523,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenedProperties["top"] = tempTopOffset; newTween.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); - - } this.nextKeyframe += 1; } diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 729abd64..3a195f47 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -134,12 +134,6 @@ var Tween = exports.Tween = Montage.create(Component, { } }, - prepareForDraw:{ - value:function () { - - } - }, - draw:{ value:function () { this.element.style.left = this.spanPosition + "px"; @@ -157,7 +151,7 @@ var Tween = exports.Tween = Montage.create(Component, { if (event.detail.source && event.detail.source !== "tween") { // check for correct element selection if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { - alert("Wrong element selected for this keyframe track"); + console.log("Wrong element selected for this keyframe track"); } else { // update tweenedProperties and tell containing track to update CSS rule // temp read only top and left. need to change to loop over event details for prop changes generically -- cgit v1.2.3 From 40c1d9df5b28d37facc10ee6de4d742caed59a6f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 09:02:52 -0800 Subject: Start looping over tweened properties generically No longer hard coding for top and left properties. Instead, looping over all tweened properties generically and building keyframe strings. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d35f59d3..1521f0fd 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -562,8 +562,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var trackDur = parseInt(this.trackDuration); var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; - keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; - keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;"; + + for(var prop in this.tweens[i].tweenedProperties){ + console.log(prop); + keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; + } + + //keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; + //keyframePropertyString += "left: " + this.tweens[i].tweenedProperties["left"] + "px;"; + keyframePropertyString += "}"; keyframeString += keyframePropertyString; } -- cgit v1.2.3 From ab5558ea89e7c9ef94b608b568b5fb345bd5adaa Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 09:03:36 -0800 Subject: Cleanup remove commented lines Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 5 ----- 1 file changed, 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 1521f0fd..529b5625 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -562,15 +562,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var trackDur = parseInt(this.trackDuration); var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; - for(var prop in this.tweens[i].tweenedProperties){ console.log(prop); keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; } - - //keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;"; - //keyframePropertyString += "left: " + this.tweens[i].tweenedProperties["left"] + "px;"; - keyframePropertyString += "}"; keyframeString += keyframePropertyString; } -- cgit v1.2.3 From 395c4df4be16c663e6b51075441cbe0a826b2cd3 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 09:07:38 -0800 Subject: Remove console log Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 529b5625..420be0c9 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -563,7 +563,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; for(var prop in this.tweens[i].tweenedProperties){ - console.log(prop); keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; } keyframePropertyString += "}"; -- cgit v1.2.3 From e2f581a20a365113d7b9a5126df3660d6d0644b5 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 2 Mar 2012 10:34:57 -0800 Subject: Timeline: Fix TODOs for consolidating repetition objects. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 33 +++++++++++----------- 1 file changed, 16 insertions(+), 17 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 93fd170e..2001c3fb 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -501,14 +501,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleNewLayer:{ value:function (event) { - var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode; + var hashIndex = 0 , hashVariable = 0, layerResult, layerObject, trackObject, dLayer, parentNode; if (this._hashFind) { while (layerResult = this.returnedObject[hashIndex]) { - trackResult = this.returnedTrack[hashIndex]; + // trackResult = this.returnedTrack[hashIndex]; if (layerResult.deleted !== true) { - // TODO: Help from Kruti - this.arrTracks.push(trackResult); + + //this.arrTracks.push(trackResult); this.arrLayers.push(layerResult); } @@ -524,8 +524,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = false; - // TODO: Help from Kruti - this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); + + //this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el); this.selectLayer(event.detail._layerPosition); break; @@ -550,8 +550,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { dLayer[hashVariable].deleted = false; - // TODO: Help from Kruti - this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); + + //this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track); this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el); this.selectLayer(event.detail._layerPosition); break; @@ -624,18 +624,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashLayerNumber.setItem(this._hashKey, thingToPush); this.hashInstance.setItem(this._hashKey, thingToPush, myIndex); - // TODO: Help from Kruti - this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); + + //this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); } else { this.arrLayers.splice(0, 0, thingToPush); thingToPush.layerPosition = this.arrLayers.length - 1; - // TODO: Help from Kruti - newTrack.trackPosition = this.arrTracks.length - 1; + //newTrack.trackPosition = this.arrTracks.length - 1; this._LayerUndoPosition = this.arrLayers.length - 1; this.hashLayerNumber.setItem(this._hashKey, thingToPush); this.hashInstance.setItem(this._hashKey, thingToPush, thingToPush.layerPosition); - this.hashTrackInstance.setItem(this._hashKey, newTrack, newTrack.trackPosition); + //this.hashTrackInstance.setItem(this._hashKey, newTrack, newTrack.trackPosition); this.selectLayer(0); } @@ -727,8 +726,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var myIndex = this.layerRepetition.selectedIndexes[0]; this._LayerUndoObject = this.arrLayers[myIndex]; - // TODO: Help from Kruti - this._TrackUndoObject = this.arrTracks[myIndex]; + + //this._TrackUndoObject = this.arrTracks[myIndex]; dLayer = this.hashInstance.getItem(this._hashKey); dTrack = this.hashTrackInstance.getItem(this._hashKey); @@ -756,8 +755,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = this.arrLayers.pop(); this._LayerUndoIndex = this._LayerUndoObject.layerID; - // TODO: Help from Kruti - this._TrackUndoObject = this.arrTracks.pop(); + + //this._TrackUndoObject = this.arrTracks.pop(); } } } -- cgit v1.2.3 From f7594082c808276306342a9a44c0b55de3be5c03 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:09:04 -0800 Subject: Timeline: Fix for animation iteration count Add default webkit css properties to allow animations with integer iteration counts. Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 420be0c9..cc1dac5d 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -540,7 +540,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.animationName = "animation_" + this.animatedElement.classList[0]; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); - this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }"; this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule); this.insertTween(tweenEvent.offsetX); -- cgit v1.2.3 From 239bb2d2a690ca24296749e7d0c2daa6fc4633f4 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Fri, 2 Mar 2012 11:34:37 -0800 Subject: Timeline Fix timing function Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index cc1dac5d..051d56c2 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -542,6 +542,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1); this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both"); + this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear"); var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {