diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 72 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 24 |
2 files changed, 40 insertions, 56 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index eabe1a7a..55c7162d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -355,9 +355,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
355 | 355 | ||
356 | draw: { | 356 | draw: { |
357 | value: function() { | 357 | value: function() { |
358 | |||
359 | |||
360 | |||
361 | // Drag and Drop: | 358 | // Drag and Drop: |
362 | // Do we have a helper to append? | 359 | // Do we have a helper to append? |
363 | if (this._appendHelper === true) { | 360 | if (this._appendHelper === true) { |
@@ -393,8 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
393 | this._dragAndDropHelper = null; | 390 | this._dragAndDropHelper = null; |
394 | this._deleteHelper = false; | 391 | this._deleteHelper = false; |
395 | } | 392 | } |
396 | } | 393 | } |
397 | |||
398 | } | 394 | } |
399 | } | 395 | } |
400 | }, | 396 | }, |
@@ -619,7 +615,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
619 | this.selectedTweens = []; | 615 | this.selectedTweens = []; |
620 | this._captureSelection = false; | 616 | this._captureSelection = false; |
621 | this._openDoc = false; | 617 | this._openDoc = false; |
622 | // this._firstTimeLoaded = true; | ||
623 | this.end_hottext.value = 25; | 618 | this.end_hottext.value = 25; |
624 | this.updateTrackContainerWidth(); | 619 | this.updateTrackContainerWidth(); |
625 | this.masterDuration = 0; | 620 | this.masterDuration = 0; |
@@ -645,7 +640,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
645 | if (this.application.ninja.documentController._documents.length > 0) { | 640 | if (this.application.ninja.documentController._documents.length > 0) { |
646 | this.enablePanel(true); | 641 | this.enablePanel(true); |
647 | this.initTimelineForDocument(); | 642 | this.initTimelineForDocument(); |
648 | |||
649 | } else { | 643 | } else { |
650 | this.enablePanel(false); | 644 | this.enablePanel(false); |
651 | } | 645 | } |
@@ -689,9 +683,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
689 | var clickedPosition = event.target.offsetLeft + event.offsetX; | 683 | var clickedPosition = event.target.offsetLeft + event.offsetX; |
690 | this.playhead.style.left = (clickedPosition - 2) + "px"; | 684 | this.playhead.style.left = (clickedPosition - 2) + "px"; |
691 | this.playheadmarker.style.left = clickedPosition + "px"; | 685 | this.playheadmarker.style.left = clickedPosition + "px"; |
692 | |||
693 | |||
694 | |||
695 | var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80); | 686 | var currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80); |
696 | var currentMillisec = currentMillisecPerPixel * clickedPosition; | 687 | var currentMillisec = currentMillisecPerPixel * clickedPosition; |
697 | this.updateTimeText(currentMillisec); | 688 | this.updateTimeText(currentMillisec); |
@@ -793,50 +784,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
793 | thingToPush.layerData.layerPosition = myIndex; | 784 | thingToPush.layerData.layerPosition = myIndex; |
794 | thingToPush.layerData.trackPosition = myIndex; | 785 | thingToPush.layerData.trackPosition = myIndex; |
795 | this.arrLayers.splice(myIndex, 0, thingToPush); | 786 | this.arrLayers.splice(myIndex, 0, thingToPush); |
796 | |||
797 | } else { | 787 | } else { |
798 | thingToPush.layerData.layerPosition = myIndex; | 788 | thingToPush.layerData.layerPosition = myIndex; |
799 | this.arrLayers.splice(myIndex, 0, thingToPush); | 789 | this.arrLayers.splice(myIndex, 0, thingToPush); |
800 | 790 | ||
801 | } | 791 | } |
802 | |||
803 | this.selectLayer(myIndex); | 792 | this.selectLayer(myIndex); |
804 | |||
805 | } | 793 | } |
806 | }, | 794 | }, |
807 | 795 | ||
808 | restoreLayer:{ | 796 | restoreLayer:{ |
809 | value:function (ele) { | 797 | value:function (ele) { |
810 | 798 | ||
811 | var newLayerName, thingToPush = this.createLayerTemplate(); | 799 | var newLayerName, thingToPush = this.createLayerTemplate(); |
812 | 800 | ||
813 | this.currentLayerNumber = this.currentLayerNumber + 1; | 801 | this.currentLayerNumber = this.currentLayerNumber + 1; |
814 | newLayerName = "Layer " + this.currentLayerNumber; | 802 | newLayerName = "Layer " + this.currentLayerNumber; |
815 | 803 | ||
816 | if(ele.dataset.storedLayerName){ | 804 | if (ele.dataset.storedLayerName) { |
817 | newLayerName = ele.dataset.storedLayerName; | 805 | newLayerName = ele.dataset.storedLayerName; |
818 | } | 806 | } |
819 | thingToPush.layerData.layerName = newLayerName; | 807 | thingToPush.layerData.layerName = newLayerName; |
820 | thingToPush.layerData.layerID = this.currentLayerNumber; | 808 | thingToPush.layerData.layerID = this.currentLayerNumber; |
821 | thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; | 809 | thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">"; |
822 | thingToPush.parentElementUUID = this.hashKey; | 810 | thingToPush.parentElementUUID = this.hashKey; |
823 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; | 811 | thingToPush.parentElement = this.application.ninja.currentSelectedContainer; |
824 | |||
825 | // Are there styles to add? | ||
826 | thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); | ||
827 | thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); | ||
828 | 812 | ||
829 | if (this._openDoc) { | 813 | // Are there styles to add? |
830 | thingToPush.layerData.elementsList.push(ele); | 814 | thingToPush.layerData.arrLayerStyles = this.createLayerStyles(); |
831 | } | 815 | thingToPush.layerData.arrStyleTracks = this.createStyleTracks(); |
832 | 816 | ||
833 | this.temparrLayers.splice(0, 0, thingToPush); | 817 | if (this._openDoc) { |
834 | thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; | 818 | thingToPush.layerData.elementsList.push(ele); |
835 | thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; | 819 | } |
836 | 820 | ||
837 | this._openDoc = false; | 821 | this.temparrLayers.splice(0, 0, thingToPush); |
822 | thingToPush.layerData.trackPosition = this.temparrLayers.length - 1; | ||
823 | thingToPush.layerData.layerPosition = this.temparrLayers.length - 1; | ||
838 | 824 | ||
839 | // } | 825 | this._openDoc = false; |
840 | } | 826 | } |
841 | }, | 827 | }, |
842 | 828 | ||
@@ -862,22 +848,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
862 | }, | 848 | }, |
863 | 849 | ||
864 | searchHighestTrackDuration:{ | 850 | searchHighestTrackDuration:{ |
865 | value:function(){ | 851 | value:function () { |
866 | 852 | ||
867 | var trackDuration; | 853 | var trackDuration; |
868 | var length = this.arrLayers.length; | 854 | var length = this.arrLayers.length; |
869 | if(length > 0){ | 855 | if (length > 0) { |
870 | trackDuration = this.arrLayers[length-1].layerData.trackDuration; | 856 | trackDuration = this.arrLayers[length - 1].layerData.trackDuration; |
871 | length--; | 857 | length--; |
872 | while(length >=0){ | 858 | while (length >= 0) { |
873 | if(this.arrLayers[length].layerData.trackDuration > trackDuration){ | 859 | if (this.arrLayers[length].layerData.trackDuration > trackDuration) { |
874 | trackDuration = this.arrLayers[length].layerData.trackDuration; | 860 | trackDuration = this.arrLayers[length].layerData.trackDuration; |
875 | } | 861 | } |
876 | length--; | 862 | length--; |
877 | } | 863 | } |
878 | this.masterDuration = trackDuration; | 864 | this.masterDuration = trackDuration; |
879 | }else{ | 865 | } else { |
880 | this.masterDuration = 0 ; | 866 | this.masterDuration = 0; |
881 | } | 867 | } |
882 | } | 868 | } |
883 | }, | 869 | }, |
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 0a67df43..e4fb42b3 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js | |||
@@ -166,29 +166,27 @@ var Tween = exports.Tween = Montage.create(Component, { | |||
166 | 166 | ||
167 | handleElementChange:{ | 167 | handleElementChange:{ |
168 | value:function (event) { | 168 | value:function (event) { |
169 | 169 | // temp - testing var | |
170 | var useAbsolute = true; | ||
171 | |||
170 | if (event.detail.source && event.detail.source !== "tween") { | 172 | if (event.detail.source && event.detail.source !== "tween") { |
171 | // check for correct element selection | 173 | // check for correct element selection |
172 | if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) { | 174 | if (this.application.ninja.selectedElements[0] != this.parentComponent.parentComponent.animatedElement) { |
173 | console.log("Wrong element selected for this keyframe track"); | 175 | console.log("Wrong element selected for this keyframe track"); |
174 | } else { | 176 | } else { |
175 | // update tweenedProperties and tell containing track to update CSS rule | 177 | if(useAbsolute){ |
176 | // temp read only top and left. need to change to loop over event details for prop changes generically | 178 | this.setAbsoluteTweenProperties(event.detail); |
177 | if (this.parentComponent.parentComponent.animatedElement.offsetTop != this.tweenedProperties["top"] && this.parentComponent.parentComponent.animatedElement.offsetLeft != this.tweenedProperties["left"]) { | 179 | } else { |
178 | this.tweenedProperties["top"] = this.parentComponent.parentComponent.animatedElement.offsetTop; | 180 | this.setRelativeTweenProperties(event.detail); |
179 | this.tweenedProperties["left"] = this.parentComponent.parentComponent.animatedElement.offsetLeft; | ||
180 | this.parentComponent.parentComponent.updateKeyframeRule(); | ||
181 | } |