diff options
Diffstat (limited to 'js/panels/Timeline')
29 files changed, 2251 insertions, 963 deletions
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, | |||
151 | 151 | ||
152 | // isToggling: Bindable property. Set this (to anything) to trigger a toggle. | 152 | // isToggling: Bindable property. Set this (to anything) to trigger a toggle. |
153 | _isToggling: { | 153 | _isToggling: { |
154 | serializable: true, | ||
155 | value: true | 154 | value: true |
156 | }, | 155 | }, |
157 | isToggling: { | 156 | isToggling: { |
@@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage, | |||
179 | 178 | ||
180 | prepareForDraw: { | 179 | prepareForDraw: { |
181 | value: function() { | 180 | value: function() { |
182 | |||
183 | // Get the original value of the overflow property: | 181 | // Get the original value of the overflow property: |
184 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); | 182 | this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow"); |
185 | if (this.isCollapsed === false) { | 183 | if (this.isCollapsed === false) { |
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 859cdfb1..b91027b6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -31,24 +31,32 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
31 | prepareForDraw:{ | 31 | prepareForDraw:{ |
32 | value:function(){ | 32 | value:function(){ |
33 | this.element.addEventListener("click", this, false); | 33 | this.element.addEventListener("click", this, false); |
34 | |||
35 | // Drag and drop event handlers | ||
36 | this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false); | ||
37 | this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false); | ||
38 | this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); | ||
39 | this.element.addEventListener("dragend", this.handleDragend.bind(this), false); | ||
34 | } | 40 | } |
35 | }, | 41 | }, |
36 | 42 | ||
37 | draw:{ | 43 | draw:{ |
38 | value:function(){ | 44 | value:function(){ |
39 | this.element.style.left = (this.position - 3) + "px"; | 45 | this.element.style.left = (this.position - 5) + "px"; |
40 | } | 46 | } |
41 | }, | 47 | }, |
42 | 48 | ||
43 | deselectKeyframe:{ | 49 | deselectKeyframe:{ |
44 | value:function(){ | 50 | value:function(){ |
45 | this.element.classList.remove("keyframeSelected"); | 51 | this.element.classList.remove("keyframeSelected"); |
52 | this.element.style.left = (this.position - 5) + "px"; | ||
46 | } | 53 | } |
47 | }, | 54 | }, |
48 | 55 | ||
49 | selectKeyframe:{ | 56 | selectKeyframe:{ |
50 | value:function(){ | 57 | value:function(){ |
51 | this.element.classList.add("keyframeSelected"); | 58 | this.element.classList.add("keyframeSelected"); |
59 | this.element.style.left = (this.position - 6) + "px"; | ||
52 | this.parentComponent.selectTween(); | 60 | this.parentComponent.selectTween(); |
53 | } | 61 | } |
54 | }, | 62 | }, |
@@ -56,6 +64,42 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
56 | handleClick:{ | 64 | handleClick:{ |
57 | value:function(ev){ | 65 | value:function(ev){ |
58 | this.selectKeyframe(); | 66 | this.selectKeyframe(); |
67 | ev.stopPropagation(); | ||
59 | } | 68 | } |
60 | } | 69 | }, |
70 | |||
71 | handleMouseover: { | ||
72 | value: function(event) { | ||
73 | this.element.draggable = true; | ||
74 | } | ||
75 | }, | ||
76 | handleMouseout: { | ||
77 | value: function(event) { | ||
78 | this.element.draggable = false; | ||
79 | } | ||
80 | }, | ||
81 | handleDragstart: { | ||
82 | value: function(event) { | ||
83 | //this.parentComponent.parentComponent.dragLayerID = this.layerID; | ||
84 | event.dataTransfer.setData('Text', 'Keyframe'); | ||
85 | |||
86 | // Get my index in my track's tween array | ||
87 | var i = 0, | ||
88 | tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, | ||
89 | myIndex = null; | ||
90 | for (i = 0; i < tweenRepetitionLength; i++) { | ||
91 | if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) { | ||
92 | myIndex = i; | ||
93 | } | ||
94 | } | ||
95 | this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; | ||
96 | this.selectKeyframe(); | ||
97 | } | ||
98 | }, | ||
99 | handleDragend: { | ||
100 | value: function(event) { | ||
101 | this.parentComponent.isDragging = false; | ||
102 | } | ||
103 | } | ||
104 | |||
61 | }); | 105 | }); |
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 9288d718..44022211 100644 --- a/js/panels/Timeline/Layer.reel/Layer.html +++ b/js/panels/Timeline/Layer.reel/Layer.html | |||
@@ -17,9 +17,9 @@ | |||
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 | "transformCollapser" : {"@" : "transformCollapser"}, | ||
23 | "styleCollapser" : {"@" : "styleCollapser"}, | 23 | "styleCollapser" : {"@" : "styleCollapser"}, |
24 | "clickerMain" : {"#" : "clicker-main"}, | 24 | "clickerMain" : {"#" : "clicker-main"}, |
25 | "myLabel" : {"#" : "myLabel"} | 25 | "myLabel" : {"#" : "myLabel"} |
@@ -34,7 +34,7 @@ | |||
34 | "value" : { | 34 | "value" : { |
35 | "boundObject" : {"@": "owner"}, | 35 | "boundObject" : {"@": "owner"}, |
36 | "boundObjectPropertyPath" : "layerName", | 36 | "bou |