diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Collapser.js | 2 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 30 | ||||
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 31 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 1 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 16 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 3 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 208 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 2 |
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; |