diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 746 |
1 files changed, 450 insertions, 296 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 45899648..1c44c89f 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -2,43 +2,44 @@ var Montage = require("montage/core/core").Montage; | |||
2 | var Component = require("montage/ui/component").Component; | 2 | var Component = require("montage/ui/component").Component; |
3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; | 3 | var Layer = require("js/panels/Timeline/Layer.reel").Layer; |
4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; | 4 | var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; |
5 | |||
5 | // var Track = require("js/panels/Timeline/Track.reel").Track; | 6 | // var Track = require("js/panels/Timeline/Track.reel").Track; |
6 | 7 | ||
7 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 8 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { |
8 | 9 | ||
9 | hasTemplate: { | 10 | hasTemplate: { |
10 | value: true | 11 | value: true |
11 | }, | 12 | }, |
12 | 13 | ||
13 | /* === BEGIN: Models === */ | 14 | /* === BEGIN: Models === */ |
14 | 15 | ||
15 | // Layer models: arrays for the data and repetition, current layer number, | 16 | // Layer models: arrays for the data and repetition, current layer number, |
16 | _arrLayers : { | 17 | _arrLayers : { |
17 | value: [] | 18 | value: [] |
18 | }, | 19 | }, |
19 | arrLayers: { | 20 | arrLayers: { |
20 | get: function() { | 21 | get: function() { |
21 | return this._arrLayers; | 22 | return this._arrLayers; |
22 | }, | 23 | }, |
23 | set: function(newVal) { | 24 | set: function(newVal) { |
24 | this._arrLayers = newVal; | 25 | this._arrLayers = newVal; |
25 | } | 26 | } |
26 | }, | 27 | }, |
27 | 28 | ||
28 | _layerRepetition: { | 29 | _layerRepetition: { |
29 | value: null | 30 | value: null |
30 | }, | 31 | }, |
31 | layerRepetition: { | 32 | layerRepetition: { |
32 | get: function() { | 33 | get: function() { |
33 | return this._layerRepetition; | 34 | return this._layerRepetition; |
34 | }, | 35 | }, |
35 | set: function(newVal) { | 36 | set: function(newVal) { |
36 | this._layerRepetition = newVal; | 37 | this._layerRepetition = newVal; |
37 | } | 38 | } |
38 | }, | 39 | }, |
39 | 40 | ||
40 | currentLayerNumber:{ | 41 | currentLayerNumber:{ |
41 | value:0 | 42 | value:0 |
42 | }, | 43 | }, |
43 | 44 | ||
44 | millisecondsOffset:{ | 45 | millisecondsOffset:{ |
@@ -47,50 +48,36 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
47 | 48 | ||
48 | // Track model | 49 | // Track model |
49 | _arrTracks: { | 50 | _arrTracks: { |
50 | serializable: true, | 51 | serializable: true, |
51 | value: [] | 52 | value: [] |
52 | }, | 53 | }, |
53 | arrTracks: { | 54 | arrTracks: { |
54 | serializable: true, | 55 | serializable: true, |
55 | get: function() { | 56 | get: function() { |
56 | return this._arrTracks; | 57 | return this._arrTracks; |
57 | }, | 58 | }, |
58 | set: function(newVal) { | 59 | set: function(newVal) { |
59 | this._arrTracks = newVal; | 60 | this._arrTracks = newVal; |
60 | } | 61 | } |
61 | }, | 62 | }, |
62 | _trackRepetition: { | 63 | _trackRepetition: { |
63 | serializable: true, | 64 | serializable: true, |
64 | value: null | 65 | value: null |
65 | }, | 66 | }, |
66 | trackRepetition : { | 67 | trackRepetition : { |
67 | serializable: true, | ||
68 | get: function() { | ||
69 | return this._trackRepetition; | ||
70 | }, | ||
71 | set: function(newVal) { | ||
72 | this._trackRepetition = newVal; | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | _selectedKeyframes:{ | ||
77 | value:[] | ||
78 | }, | ||
79 | |||
80 | selectedKeyframes:{ | ||
81 | serializable: true, | 68 | serializable: true, |
82 | get: function() { | 69 | get: function() { |
83 | return this._selectedKeyframes; | 70 | return this._trackRepetition; |
84 | }, | 71 | }, |
85 | set: function(value){ | 72 | set: function(newVal) { |
86 | this._selectedKeyframes = value; | 73 | this._trackRepetition = newVal; |
87 | } | 74 | } |
88 | }, | 75 | }, |
89 | 76 | ||
90 | 77 | ||
91 | /* === END: Models === */ | 78 | /* === END: Models === */ |
92 | 79 | ||
93 | /* === BEGIN: Draw cycle === */ | 80 | /* === BEGIN: Draw cycle === */ |
94 | 81 | ||
95 | prepareForDraw: { | 82 | prepareForDraw: { |
96 | value: function() { | 83 | value: function() { |
@@ -98,46 +85,55 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
98 | this.eventManager.addEventListener("deleteLayerClick", this, false); | 85 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
99 | this.eventManager.addEventListener("newLayer", this, false); | 86 | this.eventManager.addEventListener("newLayer", this, false); |
100 | this.eventManager.addEventListener("deleteLayer", this, false); | 87 | this.eventManager.addEventListener("deleteLayer", this, false); |
101 | 88 | this.eventManager.addEventListener( "layerBinding", this, false); | |
89 | this.eventManager.addEventListener("elementAdded", this, false); | ||
90 | this.eventManager.addEventListener("elementDeleted", this, false); | ||
91 | this.eventManager.addEventListener("deleteSelection", this, false); | ||
92 | this.hashInstance=this.createLayerHashTable(); | ||
93 | this.hashTrackInstance=this.createTrackHashTable(); | ||
102 | this.initTimelineView(); | 94 | this.initTimelineView(); |
103 | } | 95 | } |
104 | }, | 96 | }, |
105 | _isLayer: { | 97 | _isLayer: { |
106 | value: false | 98 | value: false |
107 | }, | 99 | }, |
108 | 100 | ||
109 | willDraw: { | 101 | _isLayerAdded:{ |
110 | value: function() { | 102 | value:false |
111 | if (this._isLayer) { | 103 | }, |
112 | 104 | ||
113 | this.insertLayer(); | 105 | addButtonClicked:{ |
114 | this._isLayer = false; | 106 | value:true |
115 | } | ||
116 | } | ||
117 | }, | 107 | }, |
118 | 108 | ||
109 | willDraw: { | ||
110 | value: function() { | ||
111 | if (this._isLayer) { | ||
112 | this.addButtonClicked=false; | ||
113 | this._isElementAdded=true; | ||
114 | NJevent('newLayer',this) | ||
115 | this._isLayer = false; | ||
116 | this.addButtonClicked=true; | ||
117 | } | ||
118 | } | ||
119 | }, | ||
119 | 120 | ||
120 | |||
121 | /* === END: Draw cycle === */ | 121 | /* === END: Draw cycle === */ |
122 | 122 | ||
123 | /* === BEGIN: Controllers === */ | 123 | /* === BEGIN: Controllers === */ |
124 | 124 | ||
125 | // Initialize the timeline | 125 | // Initialize the timeline |
126 | initTimelineView : { | 126 | initTimelineView : { |
127 | value:function(){ | 127 | value:function(){ |
128 | 128 | ||
129 | // Get some selectors for future use | 129 | // Add event handlers on the buttons. |
130 | this.layout_tracks = this.layer_tracks.querySelector(".layout-tracks"); | 130 | this.newlayer_button.identifier = "addLayer"; |
131 | this.layout_markers = this.element.querySelector(".layout_markers"); | 131 | this.newlayer_button.addEventListener("click", this, false); |
132 | 132 | this.deletelayer_button.identifier = "deleteLayer"; | |
133 | // Add event handlers on the buttons. | 133 | this.deletelayer_button.addEventListener("click", this, false); |
134 | this.newlayer_button.identifier = "addLayer"; | 134 | |
135 | this.newlayer_button.addEventListener("click", this, false); | 135 | // Simultaneous scrolling of the layer and tracks |
136 | this.deletelayer_button.identifier = "deleteLayer"; | 136 | this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); |
137 | this.deletelayer_button.addEventListener("click", this, false); | ||
138 | |||