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 | 37 | ||||
-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 | 57 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html | 6 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 248 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 14 |
8 files changed, 379 insertions, 17 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 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 d1cab096..1ce627b7 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. | 595 | // Check to see if we have saved timeline information in the currentDocument. |