aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js5
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css11
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.html3
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js191
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js.orig1057
-rw-r--r--js/panels/Timeline/Layer.reel/css/Layer.css75
-rw-r--r--js/panels/Timeline/Layer.reel/scss/Layer.scss5
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js39
-rw-r--r--js/panels/Timeline/Span.reel/Span.html18
-rw-r--r--js/panels/Timeline/Span.reel/Span.js127
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css107
-rw-r--r--js/panels/Timeline/Span.reel/scss/Span.scss101
-rw-r--r--js/panels/Timeline/Span.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/Style.reel/Style.js5
-rw-r--r--js/panels/Timeline/Style.reel/css/Style.css79
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss7
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js906
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js168
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss2
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js22
21 files changed, 2227 insertions, 712 deletions
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index a4f957cf..b91027b6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
42 42
43 draw:{ 43 draw:{
44 value:function(){ 44 value:function(){
45 this.element.style.left = (this.position - 3) + "px"; 45 this.element.style.left = (this.position - 5) + "px";
46 } 46 }
47 }, 47 },
48 48
49 deselectKeyframe:{ 49 deselectKeyframe:{
50 value:function(){ 50 value:function(){
51 this.element.classList.remove("keyframeSelected"); 51 this.element.classList.remove("keyframeSelected");
52 this.element.style.left = (this.position - 5) + "px";
52 } 53 }
53 }, 54 },
54 55
55 selectKeyframe:{ 56 selectKeyframe:{
56 value:function(){ 57 value:function(){
57 this.element.classList.add("keyframeSelected"); 58 this.element.classList.add("keyframeSelected");
59 this.element.style.left = (this.position - 6) + "px";
58 this.parentComponent.selectTween(); 60 this.parentComponent.selectTween();
59 } 61 }
60 }, 62 },
@@ -91,6 +93,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
91 } 93 }
92 } 94 }
93 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; 95 this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
96 this.selectKeyframe();
94 } 97 }
95 }, 98 },
96 handleDragend: { 99 handleDragend: {
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index ff5dae7a..5ea236e9 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,14 +6,19 @@
6 6
7.tween_keyframe{ 7.tween_keyframe{
8 position: absolute; 8 position: absolute;
9 height: 16px; 9 height: 8px;
10 width: 5px; 10 width: 8px;
11 top: 4px;
11 background-color: white; 12 background-color: white;
12 z-index: 23; 13 z-index: 23;
13 border-radius: 3px; 14 border-radius: 2px;
15 -webkit-transform: rotate(45deg);
14} 16}
15 17
16.tween_keyframe.keyframeSelected{ 18.tween_keyframe.keyframeSelected{
19 height: 10px;
20 width: 10px;
21 top: 3px;
17 background-color: #570e19; 22 background-color: #570e19;
18 border-style: solid; 23 border-style: solid;
19 border-width: thin; 24 border-width: thin;
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c4aa6e29..717306a0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,6 +17,7 @@
17 "styleRepetition" : {"@":"repetition1"}, 17 "styleRepetition" : {"@":"repetition1"},
18 "dynamicLayerName" : {"@":"dtext1"}, 18 "dynamicLayerName" : {"@":"dtext1"},
19 "dynamicLayerTag" : {"@": "dtext2"}, 19 "dynamicLayerTag" : {"@": "dtext2"},
20 "layer_label_text" : {"#": "layer-label-text"},
20 "mainCollapser" : {"@" : "mainCollapser"}, 21 "mainCollapser" : {"@" : "mainCollapser"},
21 "positionCollapser" : {"@" : "positionCollapser"}, 22 "positionCollapser" : {"@" : "positionCollapser"},
22 "styleCollapser" : {"@" : "styleCollapser"}, 23 "styleCollapser" : {"@" : "styleCollapser"},
@@ -38,7 +39,7 @@
38 "value" : { 39 "value" : {
39 "boundObject" : {"@": "owner"}, 40 "boundObject" : {"@": "owner"},
40 "boundObjectPropertyPath" : "layerName", 41 "boundObjectPropertyPath" : "layerName",
41 "oneway" : false 42 "oneway" : true
42 } 43 }
43 } 44 }
44 }, 45 },
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2df11f18..77db9b64 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -72,10 +72,28 @@ var Layer = exports.Layer = Montage.create(Component, {
72 this._styleCounter = newVal; 72 this._styleCounter = newVal;
73 } 73 }
74 }, 74 },
75 _selectedStyleIndex: {
76 value: false
77 },
78 selectedStyleIndex: {
79 get: function() {
80 return this._selectedStyleIndex;
81 },
82 set: function(newVal) {
83 if (typeof(newVal) === "undefined") {
84 return;
85 }
86 if (newVal !== this._selectedStyleIndex) {
87 this._selectedStyleIndex = newVal;
88 this.layerData.selectedStyleIndex = newVal;
89 this.needsDraw = true;
90 }
91 }
92 },
75 93
76 /* Layer models: the name, ID, and selected and animation booleans for the layer */ 94 /* Layer models: the name, ID, and selected and animation booleans for the layer */
77 _layerName:{ 95 _layerName:{
78 value: "Default Layer Name" 96 value: ""
79 }, 97 },
80 98
81 layerName:{ 99 layerName:{
@@ -84,13 +102,22 @@ var Layer = exports.Layer = Montage.create(Component, {
84 return this._layerName; 102 return this._layerName;
85 }, 103 },
86 set:function(newVal){ 104 set:function(newVal){
87 this._layerEditable.value = newVal; 105 if (this._layerEditable.value !== newVal) {
88 this._layerName = newVal; 106 this._layerEditable.value = newVal;
89 this.layerData.layerName = newVal; 107 }
108 if (this._layerName !== newVal) {
109 this._layerName = newVal;
110 }
111 if (this.layerData.layerName !== newVal) {
112 this.layerData.layerName = newVal;
113 }
114
90 if (typeof(this.dynamicLayerName) !== "undefined") { 115 if (typeof(this.dynamicLayerName) !== "undefined") {
91 this.dynamicLayerName.value = newVal; 116 if (this.dynamicLayerName.value !== newVal) {
117 this.dynamicLayerName.value = newVal;
118 }
92 } 119 }
93 120 this.needsDraw = true;
94 } 121 }
95 }, 122 },
96 _layerID:{ 123 _layerID:{
@@ -134,6 +161,20 @@ var Layer = exports.Layer = Montage.create(Component, {
134 } 161 }
135 }, 162 },
136 163
164 _stageElement: {
165 value: null
166 },
167
168 stageElement: {
169 get: function() {
170 return this._stageElement;
171 },
172 set: function(newVal) {
173 this._stageElement = newVal;
174 this.layerData.stageElement = newVal;
175 }
176 },
177
137 178
138 _elementsList : { 179 _elementsList : {
139 value: [] 180 value: []
@@ -398,6 +439,7 @@ var Layer = exports.Layer = Montage.create(Component, {
398 439
399 this.layerName = this.layerData.layerName; 440 this.layerName = this.layerData.layerName;
400 this.layerID = this.layerData.layerID; 441 this.layerID = this.layerData.layerID;
442 this.stageElement = this.layerData.stageElement
401 this.arrLayerStyles = this.layerData.arrLayerStyles; 443 this.arrLayerStyles = this.layerData.arrLayerStyles;
402 this.isMainCollapsed = this.layerData.isMai