aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/Collapser.js2
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js30
-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.js16
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html3
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js208
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js2
8 files changed, 284 insertions, 9 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..df5bdd67 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,16 @@ 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
40
41
42
43
34 } 44 }
35 }, 45 },
36 46
@@ -57,5 +67,23 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
57 value:function(ev){ 67 value:function(ev){
58 this.selectKeyframe(); 68 this.selectKeyframe();
59 } 69 }
60 } 70 },
71
72 handleMouseover: {
73 value: function(event) {
74 this.element.draggable = true;
75 }
76 },
77 handleMouseout: {
78 value: function(event) {
79 this.element.draggable = false;
80 }
81 },
82 handleDragstart: {
83 value: function(event) {
84 //this.parentComponent.parentComponent.dragLayerID = this.layerID;
85 event.dataTransfer.setData('Text', 'Keyframe');
86 }
87 },
88
61}); 89});
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b23da749..34c300df 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 cb4fbf07..3fc8eeaf 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
@@ -350,6 +352,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
350 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); 352 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
351 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); 353 this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
352 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);
353 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); 356 this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
354 357
355 // Bind the handlers for the config menu 358 // Bind the handlers for the config menu
@@ -530,8 +533,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
530 "deleteLayer", 533 "deleteLayer",
531 "elementAdded", 534 "elementAdded",
532 "elementsRemoved", 535 "elementsRemoved",
533 "elementReplaced", 536 "elementReplaced"],
534 "selectionChange"], 537 //"selectionChange"],
535 i, 538 i,
536 arrEventsLength = arrEvents.length; 539 arrEventsLength = arrEvents.length;
537 540
@@ -710,12 +713,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
710 this._openDoc = false; 713 this._openDoc = false;
711 this.end_hottext.value = 25; 714 this.end_hottext.value = 25;
712 this.updateTrackContainerWidth(); 715 this.updateTrackContainerWidth();
713 this.masterDuration = 0;
714 // Clear the repetitions 716 // Clear the repetitions
715 if (this.arrLayers.length > 0) { 717 if (this.arrLayers.length > 0) {
716 this.arrLayers = []; 718 this.arrLayers = [];
717 this.arrLayers.length = 0; 719 this.arrLayers.length = 0;
718 } 720 }
721 this.resetMasterDuration();
719 }