aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Collapser.js2
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js37
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js31
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html1
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js57
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js249
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js14
8 files changed, 378 insertions, 16 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..f7259d29 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,17 @@ 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);
40
41
42
43
44
34 } 45 }
35 }, 46 },
36 47
@@ -57,5 +68,29 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
57 value:function(ev){ 68 value:function(ev){
58 this.selectKeyframe(); 69 this.selectKeyframe();
59 } 70 }
60 } 71 },
72
73 handleMouseover: {
74 value: function(event) {
75 this.element.draggable = true;
76 }
77 },
78 handleMouseout: {
79 value: function(event) {
80 this.element.draggable = false;
81 }
82 },
83 handleDragstart: {
84 value: function(event) {
85 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
86 event.dataTransfer.setData('Text', 'Keyframe');
87 this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID;
88 }
89 },
90 handleDragend: {
91 value: function(event) {
92 this.parentComponent.isDragging = false;
93 }
94 }
95
61}); 96});
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index ef51886e..9edd2b35 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, {
471 this.dtextScaleX = this.layerData.dtextScaleX; 471 this.dtextScaleX = this.layerData.dtextScaleX;
472 this.dtextScaleY = this.layerData.dtextScaleY; 472 this.dtextScaleY = this.layerData.dtextScaleY;
473 this.dtextRotate = this.layerData.dtextRotate; 473 this.dtextRotate = this.layerData.dtextRotate;
474 this._isFirstDraw = this.layerData._isFirstDraw; 474 //this._isFirstDraw = this.layerData._isFirstDraw;
475 this.layerTag = this.layerData.layerTag; 475 this.layerTag = this.layerData.layerTag;
476 this.isVisible = this.layerData.isVisible; 476 this.isVisible = this.layerData.isVisible;
477 this.isAnimated = this.layerData.isAnimated; 477 this.isAnimated = this.layerData.isAnimated;
@@ -545,6 +545,9 @@ var Layer = exports.Layer = Montage.create(Component, {
545 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false); 545 this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
546 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false); 546 this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
547 this.element.addEventListener("drop", this.handleDrop.bind(this), false); 547 this.element.addEventListener("drop", this.handleDrop.bind(this), false);
548
549
550
548 } 551 }
549 }, 552 },
550 draw: { 553 draw: {
@@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, {
570 } 573 }
571 this._isFirstDraw = false; 574 this._isFirstDraw = false;
572 this.layerData._isFirstDraw = false; 575 this.layerData._isFirstDraw = false;
576
577 if (this.isMainCollapsed === false) {
578 this.mainCollapser.myContent.style.height = "auto";
579 this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass);
580 this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass);
581
582 }
583 if (this.isPositionCollapsed === false) {
584 this.positionCollapser.myContent.style.height = "auto";
585 this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass);
586 this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass);
587 }
588 if (this.isTransformCollapsed === false) {
589 this.transformCollapser.myContent.style.height = "auto";
590 this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass);
591 this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass);
592 }
593 if (this.isStyleCollapsed === false) {
594 this.styleCollapser.myContent.style.height = "auto";
595 this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass);
596 this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass);
597 }
598
573 } 599 }
600
601
602
574 } 603 }
575 }, 604 },
576 /* End: Draw cycle */ 605 /* End: Draw cycle */
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..8ddc81cd 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -31,6 +31,7 @@
31 "container_tracks" : {"#" : "container-tracks"}, 31 "container_tracks" : {"#" : "container-tracks"},
32 "end_hottext" : {"@" : "endHottext"}, 32 "end_hottext" : {"@" : "endHottext"},
33 "container_layers" : {"#" : "container-layers"}, 33 "container_layers" : {"#" : "container-layers"},
34 "container_tracks" : {"#" : "container-tracks"},
34 "timeline_disabler" : {"#" : "timeline-disabler"}, 35 "timeline_disabler" : {"#" : "timeline-disabler"},
35 "checkable_relative" : {"#" : "checkable_relative"}, 36 "checkable_relative" : {"#" : "checkable_relative"},
36 "checkable_absolute" : {"#" : "checkable_absolute"}, 37 "checkable_absolute" : {"#" : "checkable_absolute"},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 48818e44..03db7880 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -177,7 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
177 }, 177 },
178 set:function (val) { 178 set:function (val) {
179 this._masterDuration = val; 179 this._masterDuration = val;
180 this.timebar.style.width = (this._masterDuration / 12) + "px"; 180 var intDur = Math.round(val/12),
181 strWidth = intDur + "px";
182 this.timebar.style.width = strWidth;
181 } 183 }
182 }, 184 },
183 185
@@ -329,6 +331,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
329 useAbsolutePosition:{ 331 useAbsolutePosition:{
330 value:true 332 value:true
331 }, 333 },
334 _currentDocumentUuid: {
335 value: false
336 },
337 _ignoreSelectionChanges: {
338 value: false
339 },
332 /* === END: Models === */ 340 /* === END: Models === */
333 /* === BEGIN: Draw cycle === */ 341 /* === BEGIN: Draw cycle === */
334 prepareForDraw:{ 342 prepareForDraw:{
@@ -344,6 +352,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
344 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); 352 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
345 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); 353 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
346 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); 354 this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
355 //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
347 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); 356 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
348 357
349 // Bind the handlers for the config menu 358 // Bind the handlers for the config menu
@@ -584,6 +593,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
584 this.drawTimeMarkers(); 593 this.drawTimeMarkers();
585 // Document switching 594 // Document switching
586 // Check to see if we have saved timeline information in the currentDocument.