From 3a1821d6c14f9f06c81f7e74b3da27bf998c4b6f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 14:06:12 -0800 Subject: Move element selection to click handler Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 62ae625f..89d14c17 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -312,6 +312,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:function (event) { this._isLayer = true; this.needsDraw = true; + this.application.ninja.selectionController.executeSelectElement(); } }, @@ -513,9 +514,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoIndex = thingToPush.layerID; this._LayerUndoStatus = true; this._TrackUndoObject = newTrack; -// if(_firstLayerDraw){ -// this.application.ninja.selectionController.executeSelectElement(); -// } + } } @@ -840,9 +839,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.trackRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; this.currentTrackSelected = this.arrTracks[layerIndex]; - /*if(this._captureSelection){ - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.elementsList) - }*/ + if(this._captureSelection){ + this.application.ninja.selectionController.selectElements(this.currentLayerSelected.elementsList) + } this._captureSelection = true; } else { this.layerRepetition.selectedIndexes = null; -- cgit v1.2.3 From 19ac6739162c6ad007429ec34204f0589b4e11cc Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 14:11:36 -0800 Subject: Remove unneeded selection code Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 89d14c17..2ca32de9 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -839,10 +839,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.trackRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; this.currentTrackSelected = this.arrTracks[layerIndex]; - if(this._captureSelection){ - this.application.ninja.selectionController.selectElements(this.currentLayerSelected.elementsList) - } - this._captureSelection = true; } else { this.layerRepetition.selectedIndexes = null; this.trackRepetition.selectedIndexes = null; -- cgit v1.2.3 From 0327073eff62d4b800206ba0f3ba2140ae5da8bc Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 14:11:53 -0800 Subject: add back layer selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 2ca32de9..3171cf3c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -494,7 +494,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.arrTracks.splice(myIndex, 0, newTrack); this.arrLayers.splice(myIndex, 0, thingToPush); this._LayerUndoPosition = myIndex; -// this.selectLayer(myIndex); + this.selectLayer(myIndex); this.hashLayerNumber.setItem(this._hashKey, thingToPush); this.hashInstance.setItem(this._hashKey, thingToPush, myIndex); this.hashTrackInstance.setItem(this._hashKey, newTrack, myIndex); @@ -507,7 +507,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 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); + this.selectLayer(0); } this._LayerUndoObject = thingToPush; -- cgit v1.2.3 From 0b18fb2fef124a26204d5dba90cd82c975b69df3 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 23 Feb 2012 17:06:48 -0800 Subject: Timeline: Add hottext fields to layers and serialize them throughout. --- js/panels/Timeline/Layer.reel/Layer.html | 153 +++++++++++++++++++-- js/panels/Timeline/Layer.reel/Layer.js | 134 ++++++++++++++++++ js/panels/Timeline/Layer.reel/css/Layer.css | 29 ++-- js/panels/Timeline/Layer.reel/scss/Layer.scss | 6 + .../Timeline/TimelinePanel.reel/TimelinePanel.html | 35 +++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 12 +- 6 files changed, 336 insertions(+), 33 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index e262afe2..df03cbb3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -87,7 +87,140 @@ "oneway" : false } } - } + }, + "dtext-position-x" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "position-x"}, + "maxValue" : 100000, + "minValue" : -100000, + "acceptableUnits" : "px", + "units" : "px", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextPositionX", + "oneway": false + } + } + }, + "dtext-position-y" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "position-y"}, + "maxValue" : 100000, + "minValue" : -100000, + "acceptableUnits" : "px", + "units" : "px", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextPositionY", + "oneway": false + } + } + }, + "dtext-scale-x" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "scale-x"}, + "maxValue" : 100, + "minValue" : 0, + "acceptableUnits" : "%", + "units" : "%", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextScaleX", + "oneway": false + } + } + }, + "dtext-scale-y" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "scale-y"}, + "maxValue" : 100, + "minValue" : 0, + "acceptableUnits" : "%", + "units" : "%", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextScaleY", + "oneway": false + } + } + }, + "dtext-skew-x" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "skew-x"}, + "maxValue" : 100, + "minValue" : 0, + "acceptableUnits" : "%", + "units" : "%", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextSkewX", + "oneway": false + } + } + }, + "dtext-skew-y" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "skew-y"}, + "maxValue" : 100, + "minValue" : 0, + "acceptableUnits" : "%", + "units" : "%", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextSkewY", + "oneway": false + } + } + }, + "dtext-rotate" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "rotation"}, + "maxValue" : 360, + "minValue" : -360, + "acceptableUnits" : "degrees", + "units" : "degrees", + "value" : 0 + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "dtextRotate", + "oneway": false + } + } + } } @@ -109,15 +242,11 @@
X
-
100px
+
Y
-
100px
-
-
-
Z
-
100px
+
@@ -129,23 +258,23 @@
Scale X
-
100px
+
Scale Y
-
100px
+
Skew X
-
100px
+
Skew Y
-
100px
+
Rotation
-
100px
+
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 2e9a8f1a..bc1dfb7f 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -101,6 +101,140 @@ var Layer = exports.Layer = Montage.create(Component, { } }, + /* Position and Transform hottext values */ + _dtextPositionX : { + value:null, + serializable: true, + }, + + dtextPositionX:{ + serializable: true, + get:function(){ + return this._dtextPositionX; + }, + set:function(value){ + if (this._dtextPositionX !== value) { + this._dtextPositionX = value; + this.needsDraw = true; + } + + } + }, + + _dtextPositionY : { + value:null, + serializable: true, + }, + + dtextPositionY:{ + serializable: true, + get:function(){ + return this._dtextPositionY; + }, + set:function(value){ + if (this._dtextPositionY !== value) { + this._dtextPositionY = value; + this.needsDraw = true; + } + + } + }, + + _dtextScaleX : { + value:null, + serializable: true, + }, + + dtextScaleX:{ + serializable: true, + get:function(){ + return this._dtextScaleX; + }, + set:function(value){ + if (this._dtextScaleX !== value) { + this._dtextScaleX = value; + this.needsDraw = true; + } + + } + }, + + _dtextScaleY : { + value:null, + serializable: true, + }, + + dtextScaleY:{ + serializable: true, + get:function(){ + return this._dtextScaleY; + }, + set:function(value){ + if (this._dtextScaleY !== value) { + this._dtextScaleY = value; + this.needsDraw = true; + } + + } + }, + + _dtextSkewX : { + value:null, + serializable: true, + }, + + dtextSkewX:{ + serializable: true, + get:function(){ + return this._dtextSkewX; + }, + set:function(value){ + if (this._dtextSkewX !== value) { + this._dtextSkewX = value; + this.needsDraw = true; + } + + } + }, + + _dtextSkewY : { + value:null, + serializable: true, + }, + + dtextSkewY:{ + serializable: true, + get:function(){ + return this._dtextSkewY; + }, + set:function(value){ + if (this._dtextSkewY !== value) { + this._dtextSkewY = value; + this.needsDraw = true; + } + + } + }, + + _dtextRotate : { + value:null, + serializable: true, + }, + + dtextRotate:{ + serializable: true, + get:function(){ + return this._dtextRotate; + }, + set:function(value){ + if (this._dtextRotate !== value) { + this._dtextRotate = value; + this.needsDraw = true; + } + + } + }, + /* isSelected: whether or not the layer is currently selected. */ _isSelected:{ value: false, diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css index 3547a15e..3d7ba963 100644 --- a/js/panels/Timeline/Layer.reel/css/Layer.css +++ b/js/panels/Timeline/Layer.reel/css/Layer.css @@ -229,14 +229,19 @@ border-top: 1px solid #505050; } -/* line 194, ../scss/Layer.scss */ +/* line 195, ../scss/Layer.scss */ +.collapsible-content .hottextunit { + width: auto; +} + +/* line 198, ../scss/Layer.scss */ .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } -/* line 200, ../scss/Layer.scss */ +/* line 206, ../scss/Layer.scss */ .editable2 { height: 20px; background-color: #242424 !important; @@ -248,32 +253,24 @@ text-overflow: clip; } -<<<<<<< .mine=======/* line 210, ../scss/Layer.scss */ -.label-style .disabled { - cursor: default; -} - -/* styles elements */ ->>>>>>> .theirs/* line 215, ../scss/Layer.scss */ +/* line 217, ../scss/Layer.scss */ .label-style .disabled { cursor: default; } /* styles elements */ -/* line 216, ../scss/Layer.scss */ +/* line 222, ../scss/Layer.scss */ .content-style .item-template { display: none; } -<<<<<<< .mine/* line 219, ../scss/Layer.scss */ -=======/* line 218, ../scss/Layer.scss */ ->>>>>>> .theirs.content-style .layout-row.selected .layout-cell { +/* line 225, ../scss/Layer.scss */ +.content-style .layout-row.selected .layout-cell { background-color: #b2b2b2; color: #242424; } -<<<<<<< .mine/* line 223, ../scss/Layer.scss */ -=======/* line 222, ../scss/Layer.scss */ ->>>>>>> .theirs.style-row { +/* line 229, ../scss/Layer.scss */ +.style-row { height: 20px; } diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index c66a6267..0a83028b 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -191,12 +191,18 @@ .collapsible-content .layout-table:first-child { border-top: 1px solid $color-menu-divider; } + +.collapsible-content .hottextunit { + width: auto; +} .collapsible-transition { -webkit-transition-property: height; -webkit-transition-duration: 200ms; -webkit-transition-timing-function: ease-in; } + + .editable2 { height: 20px; background-color: $color-panel-hilite-text !IMPORTANT; diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 33145028..c964936c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -110,6 +110,41 @@ "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed", "oneway" : false + }, + "dtextPositionX" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextPositionX", + "oneway" : false + }, + "dtextPositionY" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextPositionY", + "oneway" : false + }, + "dtextSkewX" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextSkewX", + "oneway" : false + }, + "dtextSkewY" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextSkewY", + "oneway" : false + }, + "dtextScaleX" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextScaleX", + "oneway" : false + }, + "dtextScaleY" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextScaleY", + "oneway" : false + }, + "dtextRotate" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.dtextRotate", + "oneway" : false } } }, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index fddfd170..67dbbced 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -358,10 +358,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if (this._openDocRedrawCheck) { - this.retrieveStoredTweens(); - this._openDocRedrawCheck = false; - } + if(this.application.ninja.currentDocument.documentRoot.children[0]){ + if (this._openDocRedrawCheck) { + this.retrieveStoredTweens(); + this._openDocRedrawCheck = false; + } + } } }, @@ -542,7 +544,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { var that = this; - this.arrPositionTracks = [0, 1, 2]; + this.arrPositionTracks = [0, 1]; this.arrTransformTracks = [0, 1, 2, 3, 4]; this.label = this.element.querySelector(".label-main"); -- cgit v1.2.3 From f97080989ee988c1e613915c2d246dc17b104b3b Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 24 Feb 2012 13:27:33 -0800 Subject: clearing the old local setting and using the new version/prefix local settings. Signed-off-by: Valerio Virgillito --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 0c302436..0fd5b05d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -264,7 +264,7 @@ -
+
-- cgit v1.2.3 From 1c4e8fbab587e589f348223847d6aac5c2df416b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 24 Feb 2012 14:06:57 -0800 Subject: Timeline: Bug fixes: Delete corresponding track when a style is deleted from a layer, and fix serialization variable problem. --- js/panels/Timeline/Layer.reel/Layer.html | 14 +++++++------- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 2 ++ 2 files changed, 9 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html index d30ef0e3..0bd448f7 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html @@ -93,7 +93,7 @@ } } }, - "dtext-position-x" : { + "dtext_position_x" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { @@ -112,7 +112,7 @@ } } }, - "dtext-position-y" : { + "dtext_position_y" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { @@ -131,7 +131,7 @@ } } }, - "dtext-scale-x" : { + "dtext_scale_x" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { @@ -150,7 +150,7 @@ } } }, - "dtext-scale-y" : { + "dtext_scale_y" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { @@ -169,7 +169,7 @@ } } }, - "dtext-skew-x" : { + "dtext_skew_x" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { @@ -188,7 +188,7 @@ } } }, - "dtext-skew-y" : { + "dtext_skew_y" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { @@ -207,7 +207,7 @@ } } }, - "dtext-rotate" : { + "dtext_rotate" : { "module": "js/components/hottextunit.reel", "name": "HotTextUnit", "properties": { diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 27177a69..30280727 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -652,6 +652,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._styleCollapser.bypassAnimation = layerEvent.bypassAnimation; this._styleCollapser.handleCollapserLabelClick(); } + } else if (layerEvent.layerEventType === "deleteStyle") { + this.arrStyleTracks.pop(); } } } -- cgit v1.2.3 From f14bc1ace048e46cbcb7148dbe37a5d2065a3779 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 24 Feb 2012 17:26:08 -0800 Subject: Timeline: Add grids to property tracks. First take on clearTimeline method on TimelinePanel class. --- .../Timeline/PropertyTrack.reel/css/PropertyTrack.css | 6 +++--- .../Timeline/PropertyTrack.reel/images/gridline.jpg | Bin 0 -> 724 bytes .../PropertyTrack.reel/scss/PropertyTrack.scss | 1 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 18 ++++++++++++++++++ 4 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 js/panels/Timeline/PropertyTrack.reel/images/gridline.jpg (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css index 8e45305a..cb119a14 100644 --- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css @@ -3,17 +3,17 @@ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - /* PropertyTrack.scss * Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css. */ -/* line 13, ../scss/PropertyTrack.scss */ +/* line 19, ../scss/PropertyTrack.scss */ .content-main .collapsible-content .timeline-track { height: 20px; border-bottom: 1px solid #505050; + background-image: url("../images/gridline.jpg"); } -/* line 19, ../scss/PropertyTrack.scss */ +/* line 26, ../scss/PropertyTrack.scss */ .timeline-track .content-main { background-color: #474747; } diff --git a/js/panels/Timeline/PropertyTrack.reel/images/gridline.jpg b/js/panels/Timeline/PropertyTrack.reel/images/gridline.jpg new file mode 100644 index 00000000..9f451b0a Binary files /dev/null and b/js/panels/Timeline/PropertyTrack.reel/images/gridline.jpg differ diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss index 273e3d77..c7ae6f0c 100644 --- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss @@ -19,6 +19,7 @@ .content-main .collapsible-content .timeline-track { height: 20px; border-bottom: 1px solid $color-menu-divider; + background-image: url("../images/gridline.jpg"); } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 5f484cdb..2143dafd 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -242,6 +242,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _firstLayerDraw = true; } }, + + clearTimelinePanel : { + value: function() { + console.log('clearing timeline...') + this.arrTracks = null; + this.arrLayers = null; + this.currentLayerNumber = 0; + this.currentLayerSelected = null; + this.currentTrackSelected = null; + this.selectedKeyframes = []; + this.selectedTweens = []; + this._captureSelection = false; + this._openDoc = false; + this.end_hottext.value = 25; + this.updateTrackContainerWidth(); + this.needsDraw = true; + } + }, updateTrackContainerWidth:{ value: function(){ -- cgit v1.2.3 From 47b025b90af2a5d43dddf3b41f8c96fd26c3e4f1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Sat, 25 Feb 2012 16:26:31 -0800 Subject: Timeline : Adding Tweens Properties Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 30280727..d837997a 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -462,7 +462,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { retrieveStoredTweens:{ value:function () { - var percentValue, fraction, splitValue, i = 0; + var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); @@ -478,12 +478,22 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { while (this.currentKeyframeRule[i]) { var newTween = {}; + offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); + topOffSetAttribute = offsetAttribute[3].split("px"); + leftOffsetAttribute = offsetAttribute[5].split("px"); + + parseInt(topOffSetAttribute[0]); + parseInt(leftOffsetAttribute[0]); + if (this.currentKeyframeRule[i].keyText === "0%") { newTween.spanWidth = 0; newTween.keyFramePosition = 0; newTween.keyFrameMillisec = 0; newTween.tweenID = 0; newTween.spanPosition = 0; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = topOffSetAttribute[0]; + newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; this.tweens.push(newTween); } @@ -499,6 +509,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.keyFrameMillisec = this.currentMilliSec; newTween.tweenID = this.nextKeyframe; newTween.spanPosition = this.clickPos - newTween.spanWidth; + newTween.tweenedProperties=[]; + newTween.tweenedProperties["top"] = topOffSetAttribute[0]; + newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; this.tweens.push(newTween); -- cgit v1.2.3 From 7965d1e56ee6e02d049f4e1a8eb5dad291967015 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Sat, 25 Feb 2012 16:29:33 -0800 Subject: Timeline: Order of tweens and corresponding layers taken care over Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index d837997a..a36e666b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -464,7 +464,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { value:function () { var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; - this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); if(this.animationDuration){ -- cgit v1.2.3 From fb8aacbadba8dffb9619eb16e4626c197dc9264d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 27 Feb 2012 10:23:05 -0800 Subject: Timeline : Selection Fix Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 2143dafd..797a7cbf 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -230,8 +230,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { { this._openDoc=true; NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) -// this.selectLayer(myIndex); -// TimelineTrack.retrieveStoredTweens(); myIndex++; } }else{ @@ -488,7 +486,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this._openDoc){ event.detail.ele.uuid =nj.generateRandom(); thingToPush.elementsList.push(event.detail.ele); - this._openDoc=false; } newTrack.trackID = this.currentLayerNumber; @@ -534,6 +531,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.selectLayer(0); } + + if(this._openDoc){ + this.hashElementMapToLayer.setItem(event.detail.ele.uuid, event.detail.ele,this.currentLayerSelected); + this._openDoc=false; + } this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerID; this._LayerUndoStatus = true; @@ -733,6 +735,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } hashLayerObject[key][index] = value; + console.log(hashLayerObject) this.counter = 0; } }, @@ -827,6 +830,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this.mappingArray[key]["ele"] = value; this.mappingArray[key].layerID = layer.layerID; + console.log(this.mappingArray) } }, @@ -863,6 +867,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.trackRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; this.currentTrackSelected = this.arrTracks[layerIndex]; + if(this._captureSelection){ + this.application.ninja.selectionController.selectElements(this.currentLayerSelected.elementsList) + } + this._captureSelection = true; } else { this.layerRepetition.selectedIndexes = null; this.trackRepetition.selectedIndexes = null; -- cgit v1.2.3 From 125723cf19cf70121bc694909d09a301ca2fc2d6 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 27 Feb 2012 11:40:52 -0800 Subject: Timeline: RetrieveStoredTweens calling fixed Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 19 ++-- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 121 +++++++++++---------- 2 files changed, 71 insertions(+), 69 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 797a7cbf..92bb3405 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -224,13 +224,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._hashKey = "123"; _firstLayerDraw = false; - if(this.application.ninja.currentDocument.documentRoot.children[0]){ - myIndex=0; - while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) - { - this._openDoc=true; - NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) - myIndex++; + if(!this.application.ninja.documentController.creatingNewFile){ + if(this.application.ninja.currentDocument.documentRoot.children[0]){ + myIndex=0; + while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) + { + this._openDoc=true; + NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) + myIndex++; + } } }else{ NJevent('newLayer', this._hashKey); @@ -476,6 +478,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.elementsList = []; thingToPush.deleted = false; thingToPush.isSelected = false; + thingToPush.created=false; if (_firstLayerDraw) { this.application.ninja.currentSelectedContainer.uuid=this._hashKey; @@ -735,7 +738,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } hashLayerObject[key][index] = value; - console.log(hashLayerObject) this.counter = 0; } }, @@ -830,7 +832,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this.mappingArray[key]["ele"] = value; this.mappingArray[key].layerID = layer.layerID; - console.log(this.mappingArray) } }, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index a36e666b..55c84dce 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -331,10 +331,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _styleCollapser:{ value:null }, - _openDocRedrawCheck:{ - value:true, - writable:true - }, prepareForDraw:{ value:function () { this.init(); @@ -364,10 +360,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { didDraw:{ value:function () { - if(this.application.ninja.currentDocument.documentRoot.children[0]){ - if (this._openDocRedrawCheck) { - this.retrieveStoredTweens(); - this._openDocRedrawCheck = false; + if(!this.application.ninja.documentController.creatingNewFile){ + if(this.application.ninja.currentDocument.documentRoot.children[0]){ + var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){ + this.retrieveStoredTweens(); + } } } } @@ -465,60 +463,63 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); + this.application.ninja.timeline.arrLayers[selectedIndex].created=true; this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; - this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); - this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); - if(this.animationDuration){ - this.trackDuration = this.animationDuration.split("s"); - this.currentMilliSec = this.trackDuration[0] * 1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - this.nextKeyframe = 0; - - this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); - while (this.currentKeyframeRule[i]) { - var newTween = {}; - - offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); - topOffSetAttribute = offsetAttribute[3].split("px"); - leftOffsetAttribute = offsetAttribute[5].split("px"); - - parseInt(topOffSetAttribute[0]); - parseInt(leftOffsetAttribute[0]); - - if (this.currentKeyframeRule[i].keyText === "0%") { - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = topOffSetAttribute[0]; - newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; - this.tweens.push(newTween); - - } - else { - percentValue = this.currentKeyframeRule[i].keyText; - splitValue = percentValue.split("%"); - fraction = splitValue[0] / 100; - this.currentMilliSec = fraction * this.trackDuration[0] * 1000; - this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); - this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; - newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = this.clickPos; - newTween.keyFrameMillisec = this.currentMilliSec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = this.clickPos - newTween.spanWidth; - newTween.tweenedProperties=[]; - newTween.tweenedProperties["top"] = topOffSetAttribute[0]; - newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; - this.tweens.push(newTween); - - + if(this.animatedElement!==undefined){ + this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); + if(this.animationName){ + this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); + this.trackDuration = this.animationDuration.split("s"); + this.currentMilliSec = this.trackDuration[0] * 1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + this.nextKeyframe = 0; + + this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); + while (this.currentKeyframeRule[i]) { + var newTween = {}; + + offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); + topOffSetAttribute = offsetAttribute[3].split("px"); + leftOffsetAttribute = offsetAttribute[5].split("px"); + + parseInt(topOffSetAttribute[0]); + parseInt(leftOffsetAttribute[0]); + + if (this.currentKeyframeRule[i].keyText === "0%") { + newTween.spanWidth = 0; + newTween.keyFramePosition = 0; + newTween.keyFrameMillisec = 0; + newTween.tweenID = 0; + newTween.spanPosition = 0; + newTween.tweenedProperties = []; + newTween.tweenedProperties["top"] = topOffSetAttribute[0]; + newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; + this.tweens.push(newTween); + + } + else { + percentValue = this.currentKeyframeRule[i].keyText; + splitValue = percentValue.split("%"); + fraction = splitValue[0] / 100; + this.currentMilliSec = fraction * this.trackDuration[0] * 1000; + this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); + this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; + newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; + newTween.keyFramePosition = this.clickPos; + newTween.keyFrameMillisec = this.currentMilliSec; + newTween.tweenID = this.nextKeyframe; + newTween.spanPosition = this.clickPos - newTween.spanWidth; + newTween.tweenedProperties=[]; + newTween.tweenedProperties["top"] = topOffSetAttribute[0]; + newTween.tweenedProperties["left"] = leftOffsetAttribute[0]; + this.tweens.push(newTween); + + + } + i++; + this.nextKeyframe += 1; } - i++; - this.nextKeyframe += 1; } } else{ -- cgit v1.2.3 From cf9e9b711ba3d77a2a0888f8ab763383f53a1619 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Mon, 27 Feb 2012 11:49:34 -0800 Subject: Timeline : Reopening Doc has layer 1 default fix Signed-off-by: Kruti Shah Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 92bb3405..d7d5328e 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -234,6 +234,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { myIndex++; } } + else{ + NJevent('newLayer', this._hashKey); + this.selectLayer(0); + } }else{ NJevent('newLayer', this._hashKey); this.selectLayer(0); -- cgit v1.2.3