From bcfb200482c26b2bfc0d6577b1eb0de7a19a6762 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 26 Apr 2012 16:23:59 -0700 Subject: Removing all "module" declarations and replaced with "prototype" in preparation for montage converting to the new "prototype" format fully --- js/panels/Timeline/Keyframe.reel/Keyframe.html | 5 +-- js/panels/Timeline/Layer.reel/Layer.html | 47 ++++++++-------------- .../Timeline/PropertyTrack.reel/PropertyTrack.html | 5 +-- js/panels/Timeline/Span.reel/Span.html | 5 +-- js/panels/Timeline/Style.reel/Style.html | 14 +++---- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 23 ++++------- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 38 ++++++----------- js/panels/Timeline/Track.reel/Track.html | 11 ++--- .../Timeline/TrackSpacer.reel/TrackSpacer.html | 5 +-- js/panels/Timeline/Tween.reel/Tween.html | 11 ++--- 10 files changed, 58 insertions(+), 106 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html index 7e917b5a..6f9a6d05 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.html +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html @@ -1,4 +1,4 @@ - + + diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index f10e9ac9..19709ca7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -151,29 +151,29 @@ -
+
- +
-
+
-
-
-
-
-
-
-
-
-
00:00:00
+
+
+
+
+
+
+
+
+
00:00:00
-
-
+
+
Master Layer
@@ -187,36 +187,36 @@
-
-
+
+
-
-
- +
+
+
-
-
+
+
-
-
+
+
-
+
-
-
-
+
+
+
-
-
+
+
@@ -224,7 +224,7 @@
-
+
diff --git a/js/panels/Timeline/Track.reel/Track.html b/js/panels/Timeline/Track.reel/Track.html index 9c72f430..0f0c7c9c 100644 --- a/js/panels/Timeline/Track.reel/Track.html +++ b/js/panels/Timeline/Track.reel/Track.html @@ -53,9 +53,9 @@ -
-
-
+
+
+
diff --git a/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html b/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html index 47778b5d..54944e5d 100644 --- a/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html +++ b/js/panels/Timeline/TrackSpacer.reel/TrackSpacer.html @@ -22,8 +22,8 @@ -
-
+
+
diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index c161b3f8..aba42436 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -37,9 +37,9 @@ -
-
-
+
+
+
-- cgit v1.2.3 From a8ad82e6595b75838305eb4fa83385a42053ffd6 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 30 Apr 2012 16:00:41 -0700 Subject: Timeline: Change serialization parameters for some component properties. --- js/panels/Timeline/Layer.reel/Layer.js | 42 +++++----------------- js/panels/Timeline/Style.reel/Style.js | 6 ---- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 15 ++------ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 34 +----------------- js/panels/Timeline/Track.reel/Track.js | 12 ++----- js/panels/Timeline/Tween.reel/Tween.js | 5 --- 6 files changed, 16 insertions(+), 98 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index f2e20d41..0fb91634 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -36,13 +36,10 @@ var Layer = exports.Layer = Montage.create(Component, { /* Style models: the array of styles, and the repetition that uses them */ _arrLayerStyles : { - serializable: true, - enumerable: true, value: [] }, arrLayerStyles : { serializable: true, - enumerable: true, get: function() { return this._arrLayerStyles; }, @@ -142,8 +139,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* Position and Transform hottext values */ _dtextPositionX : { - value:null, - serializable: true + value:null }, dtextPositionX:{ @@ -161,8 +157,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, _dtextPositionY : { - value:null, - serializable: true + value:null }, dtextPositionY:{ @@ -180,8 +175,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, _dtextScaleX : { - value:null, - serializable: true + value:null }, dtextScaleX:{ @@ -199,8 +193,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, _dtextScaleY : { - value:null, - serializable: true + value:null }, dtextScaleY:{ @@ -218,8 +211,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, _dtextSkewX : { - value:null, - serializable: true + value:null }, dtextSkewX:{ @@ -237,8 +229,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, _dtextSkewY : { - value:null, - serializable: true + value:null }, dtextSkewY:{ @@ -256,8 +247,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, _dtextRotate : { - value:null, - serializable: true + value:null }, dtextRotate:{ @@ -276,10 +266,7 @@ var Layer = exports.Layer = Montage.create(Component, { /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ - value: false, - writable: true, - serializable: true, - enumerable: false + value: false }, isSelected:{ @@ -319,9 +306,7 @@ var Layer = exports.Layer = Montage.create(Component, { _isAnimated:{ - value: false, - writable: true, - enumerable: false + value: false }, isAnimated:{ @@ -363,7 +348,6 @@ var Layer = exports.Layer = Montage.create(Component, { // Are the various collapsers collapsed or not _isMainCollapsed : { - serializable: true, value: true }, isMainCollapsed : { @@ -379,7 +363,6 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isTransformCollapsed : { - serializable: true, value: true }, isTransformCollapsed : { @@ -394,7 +377,6 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isPositionCollapsed : { - serializable: true, value: true }, isPositionCollapsed : { @@ -409,7 +391,6 @@ var Layer = exports.Layer = Montage.create(Component, { }, _isStyleCollapsed : { - serializable: true, value: true }, isStyleCollapsed : { @@ -423,7 +404,6 @@ var Layer = exports.Layer = Montage.create(Component, { } }, _bypassAnimation : { - serializable: true, value: false }, bypassAnimation : { @@ -445,12 +425,10 @@ var Layer = exports.Layer = Montage.create(Component, { }, _layerData:{ - serializable:true, value:{} }, layerData:{ - serializable:true, get:function(){ return this._layerData; }, @@ -504,11 +482,9 @@ var Layer = exports.Layer = Montage.create(Component, { /* Data binding point and outgoing binding trigger method */ _bindingPoint : { - serializable: true, value : {} }, bindingPoint: { - serializable: true, get: function() { return this._bindingPoint; }, diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 027f3a40..c39f3a56 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js @@ -27,7 +27,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { /* === BEGIN: Models === */ // isSelected: whether or not the style is selected _isSelected: { - serializable: true, value: false }, isSelected: { @@ -60,7 +59,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // Property for this editor _editorProperty: { - serializable: true, value: "" }, editorProperty: { @@ -76,7 +74,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // Value for the property for this editor. _editorValue: { - serializable: true, value: "" }, editorValue: { @@ -92,7 +89,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // The tweener used to change the value for this property. _ruleTweener: { - serializable: true, value: false }, ruleTweener: { @@ -137,7 +133,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // whichView: which view should we show: hintable or propval _whichView : { - serializable: true, value: "hintable" }, whichView: { @@ -161,7 +156,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, { // styleID: the id for this style; // Used to publish events _styleID : { - serializable: true, value: null }, styleID: { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 70e04b4c..64303cef 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -16,7 +16,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { /* === BEGIN: Models === */ _arrLayers:{ - serializable:true, value:[] }, @@ -47,12 +46,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _layerRepetition:{ - serializable:true, value:null }, layerRepetition:{ - serializable:true, get:function () { return this._layerRepetition; }, @@ -170,7 +167,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _masterDuration:{ - serializable:true, value:0 }, @@ -186,12 +182,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _trackRepetition:{ - serializable:true, value:null }, trackRepetition:{ - serializable:true, get:function () { return this._trackRepetition; }, @@ -249,18 +243,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, _firstTimeLoaded:{ - value:true, - writable:true + value:true }, _captureSelection:{ - value:false, - writable:true + value:false }, _openDoc:{ - value:false, - writable:true + value:false }, timeMarkerHolder:{ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index e46a5eb0..efeeba00 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -16,7 +16,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackID:{ - serializable:true, value:null }, @@ -105,7 +104,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, _bypassAnimation : { - serializable: true, value: false }, bypassAnimation : { @@ -122,13 +120,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _arrStyleTracks : { - serializable:true, - enumerable:true, value: [] }, arrStyleTracks: { serializable:true, - enumerable:true, get: function() { return this._arrStyleTracks; }, @@ -138,11 +133,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, _styleTracksRepetition: { - serializable: true, value: null }, styleTracksRepetition : { - serializable: true, get: function() { return this._styleTracksRepetition; }, @@ -153,13 +146,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { /* Position Property Tracks */ _arrPositionTracks : { - serializable:true, - enumerable:true, value: [] }, arrPositionTracks: { serializable:true, - enumerable:true, get: function() { return this._arrPositionTracks; }, @@ -169,11 +159,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, _positionTracksRepetition: { - serializable: true, value: null }, positionTracksRepetition : { - serializable: true, get: function() { return this._positionTracksRepetition; }, @@ -185,13 +173,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { /* Transform Property Tracks */ _arrTransformTracks : { - serializable:true, - enumerable:true, value: [] }, arrTransformTracks: { serializable:true, - enumerable:true, get: function() { return this._arrTransformTracks; }, @@ -201,11 +186,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, _transformTracksRepetition: { - serializable: true, value: null }, transformTracksRepetition : { - serializable: true, get: function() { return this._transformTracksRepetition; }, @@ -215,12 +198,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _tweens:{ - enumerable: false, value:[] }, tweens:{ - serializable:true, + serializable: true, get:function () { return this._tweens; }, @@ -231,12 +213,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _tweenRepetition:{ - serializable:true, value:null }, tweenRepetition:{ - serializable:true, get:function () { return this._spanRepetition; }, @@ -246,7 +226,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackDuration:{ - serializable: true, value:0 }, @@ -265,7 +244,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackPosition:{ - serializable:true, value:0 }, @@ -281,7 +259,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _currentKeyframeRule:{ - serializable: true, value:null }, @@ -305,7 +282,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _isTrackAnimated:{ - serializable: true, value:null }, @@ -322,12 +298,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // should be unneeded with one element per layer restriction _animatedElement:{ - enumerable: true, - serializable:true, value:null }, animatedElement:{ - enumerable: true, serializable:true, get:function () { return this._animatedElement; @@ -339,7 +312,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _animationName:{ - serializable:true, value:null }, @@ -372,12 +344,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackData:{ - serializable: true, value: false }, trackData:{ - serializable:true, get:function(){ return this._trackData; }, @@ -419,11 +389,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // Data binding observation point and trigger method _bindingPoint : { - serializable: true, value : {} }, bindingPoint: { - serializable: true, get: function() { return this._bindingPoint; }, diff --git a/js/panels/Timeline/Track.reel/Track.js b/js/panels/Timeline/Track.reel/Track.js index cfc2541b..8c52199a 100644 --- a/js/panels/Timeline/Track.reel/Track.js +++ b/js/panels/Timeline/Track.reel/Track.js @@ -15,9 +15,7 @@ var Track = exports.Track = Montage.create(Component, { }, _trackID:{ - value:null, - writable:true, - enumerable:true + value:null }, trackID:{ @@ -30,7 +28,6 @@ var Track = exports.Track = Montage.create(Component, { }, _spans:{ - serializable:true, value:[] }, @@ -45,12 +42,10 @@ var Track = exports.Track = Montage.create(Component, { }, _spanRepetition:{ - serializable:true, value:null }, spanRepetition:{ - serializable:true, get:function () { return this._spanRepetition; }, @@ -85,9 +80,8 @@ var Track = exports.Track = Montage.create(Component, { //TEMP keyFrames:{ - value:[], - writable:true, - enumerable:true + serializable: true, + value:[] }, prepareForDraw: { diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index b13a037f..8b6826ed 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -14,12 +14,10 @@ var Tween = exports.Tween = Montage.create(Component, { }, _tweenData:{ - serializable: true, value:{} }, tweenData:{ - serializable: true, get:function(){ return this._tweenData; }, @@ -32,7 +30,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, _spanWidth: { - serializable: true, value: 0 }, @@ -109,7 +106,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, _tweenedProperties:{ - serializable: true, value:[] }, @@ -124,7 +120,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, _isTweenAnimated:{ - serializable:true, value:false }, -- cgit v1.2.3 From d917e865cbc7fd8929e068aeba967af1bd64c5e7 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 30 Apr 2012 17:34:11 -0700 Subject: Timeline: bug fix: disable bread crumb setlevel. --- js/panels/Timeline/Layer.reel/Layer.js | 1 + js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 0fb91634..b23da749 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -558,6 +558,7 @@ var Layer = exports.Layer = Montage.create(Component, { }, didDraw: { value: function() { + // console.log("Layer.didDraw: Layer "+ this.layerID ); if (this._isFirstDraw === true) { if (this.isSelected === true) { if (this.application.ninja.currentDocument._uuid === this._docUUID) { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 64303cef..6e64cde0 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -705,7 +705,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // there is a currentDocument. We don't do anything at that time. return; } - this.application.ninja.currentDocument.setLevel = true; + // this.application.ninja.currentDocument.setLevel = true; this._boolCacheArrays = false; this.clearTimelinePanel(); this._boolCacheArrays = true; -- cgit v1.2.3 From 8c1fda5e59b9d88b69e0b4a2bd57590ef451643c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 15:28:05 -0700 Subject: Timeline: Expand/collapse state of layers now mantained across document switching. --- js/panels/Timeline/Collapser.js | 2 -- js/panels/Timeline/Layer.reel/Layer.js | 31 ++++++++++++++++++++- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 32 ++++++++++++++++++++++ 3 files changed, 62 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js index 88314c8b..9c8d4434 100644 --- a/js/panels/Timeline/Collapser.js +++ b/js/panels/Timeline/Collapser.js @@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage, // isToggling: Bindable property. Set this (to anything) to trigger a toggle. _isToggling: { - serializable: true, value: true }, isToggling: { @@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage, prepareForDraw: { value: function() { - // Get the original value of the overflow property: this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); if (this.isCollapsed === false) { diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b23da749..34c300df 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleX = this.layerData.dtextScaleX; this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; - this._isFirstDraw = this.layerData._isFirstDraw; + //this._isFirstDraw = this.layerData._isFirstDraw; this.layerTag = this.layerData.layerTag; this.isVisible = this.layerData.isVisible; this.isAnimated = this.layerData.isAnimated; @@ -545,6 +545,9 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); this.element.addEventListener("drop", this.handleDrop.bind(this), false); + + + } }, draw: { @@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isFirstDraw = false; this.layerData._isFirstDraw = false; + + if (this.isMainCollapsed === false) { + this.mainCollapser.myContent.style.height = "auto"; + this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass); + this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass); + + } + if (this.isPositionCollapsed === false) { + this.positionCollapser.myContent.style.height = "auto"; + this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass); + this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass); + } + if (this.isTransformCollapsed === false) { + this.transformCollapser.myContent.style.height = "auto"; + this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass); + this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this.styleCollapser.myContent.style.height = "auto"; + this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass); + this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass); + } + } + + + } }, /* End: Draw cycle */ diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index efeeba00..f32592ed 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } }, + + _isFirstDraw: { + value: true + }, + _isVisible:{ value: true }, @@ -448,6 +453,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } } } + + + if (this._isFirstDraw === true) { + + if (this.isMainCollapsed === false) { + this._mainCollapser.myContent.style.height = "auto"; + this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass); + this._mainCollapser.clicker.classList.remove(this._mainCollapser.collapsedClass); + } + if (this.isPositionCollapsed === false) { + this._positionCollapser.myContent.style.height = "auto"; + this._positionCollapser.myContent.classList.remove(this._positionCollapser.collapsedClass); + this._positionCollapser.clicker.classList.remove(this._positionCollapser.collapsedClass); + } + if (this.isTransformCollapsed === false) { + this._transformCollapser.myContent.style.height = "auto"; + this._transformCollapser.myContent.classList.remove(this._transformCollapser.collapsedClass); + this._transformCollapser.clicker.classList.remove(this._transformCollapser.collapsedClass); + } + if (this.isStyleCollapsed === false) { + this._styleCollapser.myContent.style.height = "auto"; + this._styleCollapser.myContent.classList.remove(this._styleCollapser.collapsedClass); + this._styleCollapser.clicker.classList.remove(this._styleCollapser.collapsedClass); + } + this._isFirstDraw = false; + } + } }, -- cgit v1.2.3 From 73c4f7f449ba58e70f7335ef932b23dd450c925b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 17:46:09 -0700 Subject: Timeline: Initial keyframe drag-and-drop interaction. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 30 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 1 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 6 + .../Timeline/TimelineTrack.reel/TimelineTrack.html | 3 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 155 +++++++++++++++++++++ 5 files changed, 193 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 859cdfb1..df5bdd67 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -31,6 +31,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { prepareForDraw:{ value:function(){ this.element.addEventListener("click", this, false); + + // Drag and drop event handlers + this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); + this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); + this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); + + + + + } }, @@ -57,5 +67,23 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { value:function(ev){ this.selectKeyframe(); } - } + }, + + handleMouseover: { + value: function(event) { + this.element.draggable = true; + } + }, + handleMouseout: { + value: function(event) { + this.element.draggable = false; + } + }, + handleDragstart: { + value: function(event) { + //this.parentComponent.parentComponent.dragLayerID = this.layerID; + event.dataTransfer.setData('Text', 'Keyframe'); + } + }, + }); diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 19709ca7..8ddc81cd 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -31,6 +31,7 @@ "container_tracks" : {"#" : "container-tracks"}, "end_hottext" : {"@" : "endHottext"}, "container_layers" : {"#" : "container-layers"}, + "container_tracks" : {"#" : "container-tracks"}, "timeline_disabler" : {"#" : "timeline-disabler"}, "checkable_relative" : {"#" : "checkable_relative"}, "checkable_absolute" : {"#" : "checkable_absolute"}, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 6e64cde0..80baffc8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -336,6 +336,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); + //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false); this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);