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 5689e3e2deda1b1f7ba32f6007ddab20f6c1fe64 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 2 Mar 2012 18:17:14 -0800 Subject: Timeline: Serialization of all Collapser components --- js/panels/Timeline/Collapser.js | 55 +++------ js/panels/Timeline/Layer.reel/Layer.html | 129 ++++++++++++++++--- js/panels/Timeline/Layer.reel/Layer.js | 44 ++++--- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 8 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 30 +---- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 136 ++++++++++++++++++--- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 32 ++--- 7 files changed, 303 insertions(+), 131 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index d161cdd7..32733b0a 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -22,7 +22,7 @@ * the transition will not work. Subsequent collapses (and expansions) will transition as expected. * isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to * false for collapsers that will only be operated remotely. - * toggle(): Manually toggle the expand/collapse of the content. + * isToggling: Set this anually toggle the expand/collapse of the content. * */ var Montage = require("montage/core/core").Montage, @@ -76,8 +76,12 @@ var Montage = require("montage/core/core").Montage, }, set: function(newVal) { this._bypassAnimation= newVal; + //console.log('bypassAnimation setter ' + newVal) } }, + _oldAnimated : { + value: false + }, // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition. // Note that this CSS class must be defined in your style sheet with the desired transitions. @@ -104,7 +108,7 @@ var Montage = require("montage/core/core").Montage, set: function(newVal) { if (newVal !== this._isCollapsed) { this._isCollapsed = newVal; - this.needsDraw = true; + //this.needsDraw = true; } } @@ -144,31 +148,8 @@ var Montage = require("montage/core/core").Montage, this._isLabelClickable = newVal; } }, - - // labelClickEvent: an event to fire when the label is clicked. - _labelClickEvent: { - value: false - }, - labelClickEvent: { - get: function() { - return this._labelClickEvent; - }, - set: function(newVal) { - this._labelClickEvent = newVal; - } - }, - - // toggle: manually toggle the collapser. - toggle: { - value: function() { - if (this.bypassAnimation) { - this.isAnimated = false; - } - this.myContent.classList.remove(this.transitionClass); - this.handleCollapserLabelClick(); - } - }, - + + // isToggling: Bindable property. Set this (to anything) to trigger a toggle. _isToggling: { serializable: true, value: true @@ -182,7 +163,8 @@ var Montage = require("montage/core/core").Montage, if (newVal !== this._isToggling) { this._isToggling = newVal; - if (this.bypassAnimation) { + if (this.bypassAnimation === true) { + this._oldAnimated = this.isAnimated; this.isAnimated = false; } this.myContent.classList.remove(this.transitionClass); @@ -198,13 +180,18 @@ var Montage = require("montage/core/core").Montage, prepareForDraw: { value: function() { // Add a click listener to the label for expand/collapse + /* if (this.isLabelClickable) { this.clicker.identifier = "collapserLabel"; this.clicker.addEventListener("click", this, false); } - + */ // Get the original value of the overflow property: this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); + console.log("collapser: this.isCollapsed " + this.isCollapsed) + if (this.isCollapsed === false) { + this.myContent.style.height = "auto"; + } /* * Removed because of expense. This disables the feature of having the @@ -307,11 +294,6 @@ var Montage = require("montage/core/core").Montage, // Set the component to run its draw cycle. this.needsDraw = true; - - // Dispatch my labelClick event - if (this.labelClickEvent) { - this.labelClickEvent(this.bypassAnimation); - } } }, @@ -342,9 +324,10 @@ var Montage = require("montage/core/core").Montage, } - if (this.bypassAnimation) { + if (this.bypassAnimation === true) { + this.isAnimated = this._oldAnimated; + } else { this.bypassAnimation = true; - this.isAnimated = true; } } } diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index 14315f8d..79b522ee 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -17,7 +17,12 @@ "element": {"#": "layer"}, "styleRepetition" : {"@":"repetition1"}, "dynamicLayerName" : {"@":"dtext1"}, - "slotStyle" : {"@":"slot1"} + "slotStyle" : {"@":"slot1"}, + "mainCollapser" : {"@" : "mainCollapser"}, + "positionCollapser" : {"@" : "positionCollapser"}, + "transformCollapser" : {"@" : "transformCollapser"}, + "styleCollapser" : {"@" : "styleCollapser"}, + "clickerMain" : {"#" : "clicker-main"} } }, "dtext1" : { @@ -225,6 +230,90 @@ "oneway": false } } + }, + + "mainCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-main"}, + "myContent" : {"#" : "content-main"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-main"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isMainCollapsed", + "oneway" : false + } + } + }, + + "positionCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-position"}, + "myContent" : {"#":"content-position"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-position"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isPositionCollapsed", + "oneway" : false + } + } + }, + + "transformCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-transform"}, + "myContent" : {"#":"content-transform"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-transform"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isTransformCollapsed", + "oneway" : false + } + } + }, + + "styleCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-style"}, + "myContent" : {"#":"content-style"}, + "contentHeight" : 60, + "isLabelClickable" : true, + "clicker" : {"#" : "clicker-style"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isStyleCollapsed", + "oneway" : false + } + } } @@ -233,68 +322,68 @@ -
+
- Label - + Label +
-
+
Position - +
-
+
X
-
+
Y
-
+
Transform - +
-
+
Scale X
-
+
Scale Y
-
+
Skew X
-
+
Skew Y
-
+
Rotation
-
+
Style - +
-
-
-
+
+
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2980842f..158eac00 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -372,17 +372,18 @@ var Layer = exports.Layer = Montage.create(Component, { } } }, - _animateCollapser : { + _bypassAnimation : { serializable: true, value: false }, - animateCollapser : { + bypassAnimation : { serializable: true, get: function() { - return this._animateCollapser; + return this._bypassAnimation; }, set: function(newVal) { - this._animateCollapser = newVal; + //console.log("layer.js _bypassAnimation setter " + newVal) + this._bypassAnimation = newVal; } }, @@ -398,9 +399,9 @@ var Layer = exports.Layer = Montage.create(Component, { var that = this; - this.positionCollapser = Collapser.create(); - this.transformCollapser = Collapser.create(); - this.styleCollapser = Collapser.create(); + //this.positionCollapser = Collapser.create(); + //this.transformCollapser = Collapser.create(); + //this.styleCollapser = Collapser.create(); // Make it editable! this._layerEditable = Hintable.create(); @@ -419,6 +420,7 @@ var Layer = exports.Layer = Montage.create(Component, { this._layerEditable.needsDraw = true; // Change the markup into collapsible sections using the nifty Collapser component! + /* this.mainCollapser = Collapser.create(); this.mainCollapser.clicker = this.clicker; this.mainCollapser.myContent = this.myContent; @@ -435,6 +437,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isMainCollapsed", oneway: false }); + */ this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false); /* @@ -450,7 +453,7 @@ var Layer = exports.Layer = Montage.create(Component, { } */ //this.mainCollapser.needsDraw = true; - +/* this.positionCollapser.clicker = this.clickerPosition; this.positionCollapser.myContent = this.contentPosition; this.positionCollapser.element = this.contentPosition; @@ -464,6 +467,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isPositionCollapsed", oneway: false }); + */ this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false); /* @@ -479,7 +483,7 @@ var Layer = exports.Layer = Montage.create(Component, { } */ //this.positionCollapser.needsDraw = true; - + /* this.transformCollapser.clicker = this.clickerTransform; this.transformCollapser.myContent = this.contentTransform; this.transformCollapser.element = this.contentTransform; @@ -493,6 +497,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isTransformCollapsed", oneway: false }); + */ this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false); @@ -509,7 +514,7 @@ var Layer = exports.Layer = Montage.create(Component, { } */ //this.transformCollapser.needsDraw = true; - + /* this.styleCollapser.clicker = this.clickerStyle; this.styleCollapser.myContent = this.contentStyle; this.styleCollapser.element = this.contentStyle; @@ -523,6 +528,7 @@ var Layer = exports.Layer = Montage.create(Component, { boundObjectPropertyPath: "isStyleCollapsed", oneway: false }); + */ this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false); @@ -555,7 +561,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, draw: { value: function() { - +/* // Coordinate the collapsers this.log('layer.js draw') if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) { @@ -575,6 +581,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.styleCollapser.bypassAnimation = this.animateCollapser; this.styleCollapser.toggle(); } + */ if (this.isSelected) { this.element.classList.add("selected"); } else { @@ -595,6 +602,10 @@ var Layer = exports.Layer = Montage.create(Component, { // Get some selectors. this.label = this.element.querySelector(".label-layer"); this.titleSelector = this.label.querySelector(".collapsible-label"); + this.buttonAddStyle = this.element.querySelector(".button-add"); + this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + + /* this.clicker = this.element.querySelector(".collapsible-clicker"); this.myContent = this.element.querySelector(".content-layer"); this.clickerPosition = this.element.querySelector(".clicker-position"); @@ -603,8 +614,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.contentTransform = this.element.querySelector(".content-transform"); this.clickerStyle = this.element.querySelector(".clicker-style"); this.contentStyle = this.element.querySelector(".content-style"); - this.buttonAddStyle = this.element.querySelector(".button-add"); - this.buttonDeleteStyle = this.element.querySelector(".button-delete"); + */ } }, selectLayer:{ @@ -793,7 +803,7 @@ var Layer = exports.Layer = Montage.create(Component, { handleMainCollapserClick : { value: function(event) { this.mainCollapser.bypassAnimation = false; - this.animateCollapser = true; + this.bypassAnimation = false; if (this.isMainCollapsed) { this.isMainCollapsed = false; } else { @@ -804,7 +814,7 @@ var Layer = exports.Layer = Montage.create(Component, { handlePositionCollapserClick : { value: function(event) { this.positionCollapser.bypassAnimation = false; - //this.animateCollapser = true; + this.bypassAnimation = false; if (this.isPositionCollapsed) { this.isPositionCollapsed = false; } else { @@ -815,7 +825,7 @@ var Layer = exports.Layer = Montage.create(Component, { handleTransformCollapserClick : { value: function(event) { this.transformCollapser.bypassAnimation = false; - //this.animateCollapser = true; + this.bypassAnimation = false; if (this.isTransformCollapsed) { this.isTransformCollapsed = false; } else { @@ -826,7 +836,7 @@ var Layer = exports.Layer = Montage.create(Component, { handleStyleCollapserClick : { value: function(event) { this.styleCollapser.bypassAnimation = false; - //this.animateCollapser = true; + this.bypassAnimation = false; if (this.isStyleCollapsed) { this.isStyleCollapsed = false; } else { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 77481ac0..a6b7f9f1 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -121,9 +121,9 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", "oneway" : false }, - "animateCollapser" : { + "bypassAnimation" : { "boundObject" : {"@" : "repetition1"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.animateCollapser", + "boundObjectPropertyPath" : "objectAtCurrentIteration.bypassAnimation", "oneway" : false }, "dtextPositionX" : { @@ -241,9 +241,9 @@ "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed", "oneway" : false }, - "animateCollapser" : { + "bypassAnimation" : { "boundObject" : {"@" : "repetition2"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.animateCollapser", + "boundObjectPropertyPath" : "objectAtCurrentIteration.bypassAnimation", "oneway" : false }, "isStyleCollapsed" : { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 2001c3fb..7be34d74 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -97,22 +97,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - _arrTracks:{ - serializable:true, - value:[] - }, - - arrTracks:{ - serializable:true, - get:function () { - return this._arrTracks; - }, - set:function (newVal) { - this._arrTracks = newVal; - this._cacheArrays(); - } - }, - _trackRepetition:{ serializable:true, value:null @@ -284,23 +268,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _firstLayerDraw = true; // After recreating the tracks and layers, store the result in the currentDocument. - this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; } else { // we do have information stored. Use it. this._boolCacheArrays = false; - this.arrLayers = []; - this.arrTracks = []; + //this.arrLayers = []; this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; - this.arrTracks = this.application.ninja.currentDocument.tlArrTracks; this._boolCacheArrays = true; } // Redraw all the things - this.layerRepetition.needsDraw = true; - this.trackRepetition.needsDraw = true; - this.needsDraw = true; + //this.layerRepetition.needsDraw = true; + //this.trackRepetition.needsDraw = true; + //this.needsDraw = true; } }, @@ -323,7 +304,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashTrackInstance = null; this.hashLayerNumber = null; this.hashElementMapToLayer = null; - this.arrTracks = []; this.arrLayers = []; this.currentLayerNumber = 0; @@ -471,7 +451,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._firstTimeLoaded = false; } else { this.arrLayers.length = 0; - this.arrTracks.length = 0; if (event.detail.element.id === "UserContent") { this._hashKey = "123"; @@ -578,6 +557,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { newLayerName = "Layer " + this.currentLayerNumber; thingToPush.layerName = newLayerName; thingToPush.layerID = this.currentLayerNumber; + thingToPush.bypassAnimation = false; thingToPush.isMainCollapsed = true; thingToPush.isPositionCollapsed = true; thingToPush.isTransformCollapsed = true; diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 26d045d6..1cc05f4e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -17,7 +17,11 @@ "element": {"#": "track"}, "tweenRepetition" : {"@" : "tweenRepetition"}, "styleTracksRepetition" : {"@" : "styleTracksRepetition"}, - "tween": {"@" : "tween"} + "tween": {"@" : "tween"}, + "_mainCollapser" : {"@" : "mainCollapser"}, + "_positionCollapser" : {"@" : "positionCollapser"}, + "_transformCollapser" : {"@" : "transformCollapser"}, + "_styleCollapser" : {"@" : "styleCollapser"} } }, @@ -145,6 +149,110 @@ "properties" : { "element":{"#": "transform-track-base"} } + }, + + "mainCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-main"}, + "myContent" : {"#":"content-main"}, + "contentHeight" : 60, + "isLabelClickable" : false, + "clicker" : {"#" : "label-main"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isMainCollapsed", + "oneway" : false + }, + "bypassAnimation" : { + "boundObject" : {"@": "owner"}, + "boundObjectPropertyPath" : "bypassAnimation", + "oneway" : false + } + } + }, + + "positionCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-position-tracks"}, + "myContent" : {"#":"content-position-tracks"}, + "contentHeight" : 40, + "isLabelClickable" : false, + "clicker" : {"#" : "label-position"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isPositionCollapsed", + "oneway" : false + }, + "bypassAnimation" : { + "boundObject" : {"@": "owner"}, + "boundObjectPropertyPath" : "bypassAnimation", + "oneway" : false + } + } + }, + + "transformCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-transform-tracks"}, + "myContent" : {"#":"content-transform-tracks"}, + "contentHeight" : 40, + "isLabelClickable" : false, + "clicker" : {"#" : "label-transform"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isTransformCollapsed", + "oneway" : false + }, + "bypassAnimation" : { + "boundObject" : {"@": "owner"}, + "boundObjectPropertyPath" : "bypassAnimation", + "oneway" : false + } + } + }, + + "styleCollapser" : { + "module" : "js/panels/timeline/Collapser.js", + "name" : "Collapser", + "properties" : { + "element" : {"#" : "content-styles"}, + "myContent" : {"#":"content-styles"}, + "contentHeight" : 40, + "isLabelClickable" : false, + "clicker" : {"#" : "label-styles"}, + "isCollapsed" : true, + "isAnimated" : true + }, + "bindings" : { + "isToggling" : { + "boundObject" : {"@" : "owner" }, + "boundObjectPropertyPath" : "isStyleCollapsed", + "oneway" : false + }, + "bypassAnimation" : { + "boundObject" : {"@": "owner"}, + "boundObjectPropertyPath" : "bypassAnimation", + "oneway" : false + } + } } @@ -153,28 +261,28 @@ -
-
-
+
+
+
-
-
-
+
+
+
-
-
+
+
-
+
-
-
+
+
-
+
-
+
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 420be0c9..6e753b9f 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -57,7 +57,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isTransformCollapsed) { this._isTransformCollapsed = newVal; - this.needsDraw = true; } } }, @@ -71,7 +70,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isPositionCollapsed) { this._isPositionCollapsed = newVal; - this.needsDraw = true; } } }, @@ -85,21 +83,21 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function (newVal) { if (newVal !== this._isStyleCollapsed) { this._isStyleCollapsed = newVal; - this.needsDraw = true; } } }, - _animateCollapser : { + _bypassAnimation : { serializable: true, value: false }, - animateCollapser : { + bypassAnimation : { serializable: true, get: function() { - return this._animateCollapser; + return this._bypassAnimation; }, set: function(newVal) { - this._animateCollapser = newVal; + //console.log("timelinetrack bypassAnimation setter " + newVal) + this._bypassAnimation = newVal; } }, @@ -582,7 +580,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.arrPositionTracks = [0, 1]; this.arrTransformTracks = [0, 1, 2, 3, 4]; - + /* this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); @@ -605,22 +603,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { boundObjectPropertyPath: "isMainCollapsed", oneway: false }); + + Object.defineBinding(this._mainCollapser, "bypassAnimation", { boundObject: this, boundObjectPropertyPath: "animateCollapser", oneway: false, boundValueMutator: function(value) { - return !value; + console.log('mutating') + return !value } }); - + */ /* this._mainCollapser.labelClickEvent = function () { that.isMainCollapsed = that._mainCollapser.isCollapsed; }; */ //this._mainCollapser.needsDraw = true; - +/* this._positionCollapser = Collapser.create(); this._positionCollapser.clicker = this.labelPosition; this._positionCollapser.myContent = this.contentPosition; @@ -634,7 +635,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { boundObjectPropertyPath: "isPositionCollapsed", oneway: false }); - + */ /* this._positionCollapser.labelClickEvent = function () { @@ -642,7 +643,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }; */ //this._positionCollapser.needsDraw = true; - +/* this._transformCollapser = Collapser.create(); this._transformCollapser.clicker = this.labelTransform; this._transformCollapser.myContent = this.contentTransform; @@ -656,7 +657,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { boundObjectPropertyPath: "isTransformCollapsed", oneway: false }); - + */ /* this._transformCollapser.labelClickEvent = function () { @@ -665,6 +666,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { */ //this._transformCollapser.needsDraw = true; +/* this._styleCollapser = Collapser.create(); this._styleCollapser.clicker = this.labelStyles; this._styleCollapser.myContent = this.contentStyles; @@ -679,7 +681,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { oneway: false }); - + */ /* this._styleCollapser.labelClickEvent = function () { that.isStyleCollapsed = that._styleCollapser.isCollapsed; -- cgit v1.2.3 From 11f39321cf1f2b5f3790ed819051f56411e98261 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 5 Mar 2012 11:59:31 -0800 Subject: Timeline: Removing Events for Adding and Deleting Layer, Taking care of BreadCrumb Signed-off-by: Kruti Shah --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 326 +++++++++------------ 1 file changed, 141 insertions(+), 185 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..48181ae7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -156,6 +156,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _breadCrumbContainer:{ + value:null + }, + + breadCrumbContainer: { + set: function(value) { + if(this._breadCrumbContainer !== value) { + this._breadCrumbContainer = value; + this.LayerBinding(this.application.ninja.currentSelectedContainer); + } + }, + get: function() { + return this._breadCrumbContainer; + } + }, + _isLayer:{ value:false }, @@ -221,6 +237,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { for (i = 0; i < arrEventsLength; i++) { this.eventManager.addEventListener(arrEvents[i], this, false); } + Object.defineBinding(this, "breadCrumbContainer", { + boundObject: this.application.ninja, + boundObjectPropertyPath:"currentSelectedContainer", + oneway: true + }); } } }, @@ -247,8 +268,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function () { var myIndex; this.drawTimeMarkers(); - this._hashKey = "123"; - + this._hashKey = this.application.ninja.currentSelectedContainer.uuid; // Document switching // Check to see if we have saved timeline information in the currentDocument. if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { @@ -268,16 +288,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) { this._openDoc=true; - NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) + this.restoreLayer(this.application.ninja.currentDocument.documentRoot.children[myIndex]); myIndex++; } } else{ - NJevent('newLayer', this._hashKey); + this.restoreLayer(1); this.selectLayer(0); } }else{ - NJevent('newLayer', this._hashKey); + this.createNewLayer(1); this.selectLayer(0); } @@ -332,6 +352,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.selectedTweens = []; this._captureSelection = false; this._openDoc = false; + this._firstTimeLoaded=true; this.end_hottext.value = 25; this.updateTrackContainerWidth(); } @@ -345,7 +366,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._bindDocumentEvents(); this.hashInstance = this.createLayerHashTable(); - this.hashTrackInstance = this.createTrackHashTable(); this.hashLayerNumber = this.createLayerNumberHash(); this.hashElementMapToLayer = this.createElementMapToLayer(); this.initTimelineForDocument(); @@ -456,34 +476,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // nothing is selected, do not delete return; } - this._deleteKeyDown = false; - if (this.application.ninja.currentSelectedContainer.id === "UserContent") { - this._hashKey = "123"; - } this.removeLayer(); } }, - handleLayerBinding:{ - value:function (event) { + LayerBinding:{ + value:function (node) { var i = 0; + if (this._firstTimeLoaded) { this._firstTimeLoaded = false; } else { this.arrLayers.length = 0; this.arrTracks.length = 0; + this._hashKey = node.uuid; - 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; } this.currentLayerNumber = 0; - NJevent('newLayer', event.detail); + this.createNewLayer(1); this.selectLayer(0); } } @@ -499,44 +511,15 @@ 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]; - if (layerResult.deleted !== true) { - - // TODO: Help from Kruti - this.arrTracks.push(trackResult); - this.arrLayers.push(layerResult); - - } - hashIndex++; - } - 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; - - // 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); - break; + createNewLayer:{ + value:function(object){ + var hashVariable = 0; - } - hashVariable++; - } - } else if (event.detail._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + if (object._undoStatus) { + if (object._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { + dLayer = this.hashInstance.getItem(object._el.parentElementUUID); while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + if (dLayer[hashVariable]._layerID === object._el._layerID) { dLayer[hashVariable].deleted = false; parentNode = dLayer[hashVariable].parentElement; break; @@ -544,26 +527,97 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { hashVariable++; } this.application.ninja.currentSelectedContainer = parentNode; + this.LayerBinding(parentNode); } else { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + dLayer = this.hashInstance.getItem(object._el.parentElementUUID); while (dLayer[hashVariable]) { - if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + if (dLayer[hashVariable]._layerID === object._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); + + this.arrLayers.splice(object._layerPosition, 0, object._el); + this.selectLayer(object._layerPosition); break; } hashVariable++; } } + }else{ + + var newLayerName = "", + thingToPush = {}, + myIndex = 0; + + this.currentLayerNumber = this.hashLayerNumber.getItem(this._hashKey); + if (this.currentLayerNumber === undefined) { + this.currentLayerNumber = 0; } + this.currentLayerNumber = this.currentLayerNumber + 1; + newLayerName = "Layer " + this.currentLayerNumber; + thingToPush.layerName = newLayerName; + thingToPush.layerID = this.currentLayerNumber; + thingToPush.isMainCollapsed = true; + thingToPush.isPositionCollapsed = true; + thingToPush.isTransformCollapsed = true; + thingToPush.isStyleCollapsed = true; + thingToPush.arrLayerStyles = []; + thingToPush.elementsList = []; + thingToPush.deleted = false; + thingToPush.isSelected = false; + thingToPush.created=false; + thingToPush.isTrackAnimated = false; + thingToPush.currentKeyframeRule = null; + thingToPush.trackPosition = 0; + thingToPush.arrStyleTracks = []; + thingToPush.tweens = []; + + thingToPush.parentElementUUID = this._hashKey; + thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + + if (!!this.layerRepetition.selectedIndexes) { + myIndex = this.layerRepetition.selectedIndexes[0]; + thingToPush.layerPosition = myIndex; + thingToPush.isSelected = true; + thingToPush.trackPosition = myIndex; + 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); - else { + } else { + this.arrLayers.splice(0, 0, thingToPush); + thingToPush.layerPosition = this.arrLayers.length - 1; + this._LayerUndoPosition = this.arrLayers.length - 1; + this.hashLayerNumber.setItem(this._hashKey, thingToPush); + this.hashInstance.setItem(this._hashKey, thingToPush, thingToPush.layerPosition); + this.selectLayer(0); + + } + + this._LayerUndoObject = thingToPush; + this._LayerUndoIndex = thingToPush.layerID; + this._LayerUndoStatus = true; + } + + } + }, + + restoreLayer:{ + value:function (ele) { + var hashIndex = 0 ,layerResult + if (this._hashFind) { + while (layerResult = this.returnedObject[hashIndex]) { + if (layerResult.deleted !== true) { + this.arrLayers.push(layerResult); + + } + hashIndex++; + } + this._hashFind = false; + return; + }else { var newLayerName = "", thingToPush = {}, newTrack = {}, @@ -593,24 +647,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.arrStyleTracks = []; thingToPush.tweens = []; - if (_firstLayerDraw) { - - this.application.ninja.currentSelectedContainer.uuid=this._hashKey; - thingToPush.parentElementUUID = this._hashKey; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - } + thingToPush.parentElementUUID = this._hashKey; + thingToPush.parentElement = this.application.ninja.currentSelectedContainer; if(this._openDoc){ - event.detail.ele.uuid =nj.generateRandom(); - thingToPush.elementsList.push(event.detail.ele); - } - - if (_firstLayerDraw) { - if (this.application.ninja.currentSelectedContainer.id === "UserContent") { - this._hashKey = "123"; - this.application.ninja.currentSelectedContainer.uuid=this._hashKey; - thingToPush.parentElementUUID = 123; - } + ele.uuid =nj.generateRandom(); + thingToPush.elementsList.push(ele); } if (!!this.layerRepetition.selectedIndexes) { @@ -623,91 +665,58 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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.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); this.hashInstance.setItem(this._hashKey, thingToPush, thingToPush.layerPosition); - this.hashTrackInstance.setItem(this._hashKey, newTrack, newTrack.trackPosition); this.selectLayer(0); } if(this._openDoc){ var selectedIndex = this.getLayerIndexByID(thingToPush.layerID) - this.hashElementMapToLayer.setItem(event.detail.ele.uuid, event.detail.ele,this.arrLayers[selectedIndex]); + this.hashElementMapToLayer.setItem(ele.uuid,ele,this.arrLayers[selectedIndex]); this._openDoc=false; } this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerID; this._LayerUndoStatus = true; - this._TrackUndoObject = newTrack; + } } }, - handleDeleteLayer:{ - value:function (event) { - var dLayer, dTrack, parentNode, hashVariable = 0, k = 0, index = 0, j = 0; + deleteLayer:{ + value:function (object) { + var dLayer,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) { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + if (object._undoStatus) { + if (object._el.parentElementUUID !== this.application.ninja.currentSelectedContainer.uuid) { + dLayer = this.hashInstance.getItem(object._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; -// ElementMediator.deleteElements(dLayer[myIndex].element); - this.arrLayers.splice(k, 1); - //this.arrTracks.splice(k, 1); - if(k>0){ - this.selectLayer(k-1); - }else{ - this.selectLayer(k) - } - break; - } - k++; - } - } - 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) { + if (dLayer[hashVariable]._layerID === object._el._layerID) { dLayer[hashVariable].deleted = true; -// ElementMediator.deleteElements(dLayer[myIndex].element); parentNode = dLayer[hashVariable].parentElement; break; } hashVariable++; } this.application.ninja.currentSelectedContainer = parentNode; + this.LayerBinding(parentNode); } else { - dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID); + dLayer = this.hashInstance.getItem(object._el.parentElementUUID); while (dLayer[hashVariable]) { if (dLayer[hashVariable].deleted === true) { - } else if (dLayer[hashVariable]._layerID === event.detail._el._layerID) { + } else if (dLayer[hashVariable]._layerID === object._el._layerID) { while (this.arrLayers.length) { if (dLayer[hashVariable]._layerID === this.arrLayers[k]._layerID) { dLayer[hashVariable].deleted = true; -// ElementMediator.deleteElements(dLayer[myIndex].element); this.arrLayers.splice(k, 1); - //this.arrTracks.splice(k, 1); if(k>0){ this.selectLayer(k-1); }else{ @@ -726,16 +735,11 @@ 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); - dTrack = this.hashTrackInstance.getItem(this._hashKey); dLayer[myIndex].deleted = true; this.arrLayers.splice(myIndex, 1); - //this.arrTracks.splice(myIndex, 1); this._LayerUndoIndex = this._LayerUndoObject.layerID; this._LayerUndoPosition = myIndex; @@ -749,15 +753,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { dLayer = this.hashInstance.getItem(this._hashKey); - dTrack = this.hashTrackInstance.getItem(this._hashKey); dLayer[this.arrLayers.length - 1].deleted = true; ElementMediator.deleteElements(dLayer[this.arrLayers.length - 1].elementsList); 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(); + } } } @@ -883,46 +884,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, - createTrackHashTable:{ - value:function (key, value) { - var hashTrackObject; - hashTrackObject = Object.create(Object.prototype, { - counter:{ - value:0, - writable:true - }, - - setItem:{ - value:function (key, value, index) { - if (hashTrackObject[key] === undefined) { - hashTrackObject[key] = {}; - - } - if (hashTrackObject[key][index] !== undefined) { - this.counter = index; - while (hashTrackObject[key][this.counter]) { - this.counter++; - } - while (this.counter !== index) { - hashTrackObject[key][this.counter] = hashTrackObject[key][this.counter - 1]