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(-)
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 @@
@@ -129,23 +258,23 @@
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 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(-)
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
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