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 + 4 files changed, 294 insertions(+), 28 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') 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; -- 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 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'js/panels/Timeline/Layer.reel') 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": { -- cgit v1.2.3