diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 1269 |
1 files changed, 591 insertions, 678 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c21fa22b..6f0b0b58 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -4,51 +4,49 @@ 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 | var nj = require("js/lib/NJUtils").NJUtils; | 5 | var nj = require("js/lib/NJUtils").NJUtils; |
6 | 6 | ||
7 | // var Track = require("js/panels/Timeline/Track.reel").Track; | ||
8 | |||
9 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | 7 | var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { |
10 | 8 | ||
11 | hasTemplate: { | 9 | hasTemplate:{ |
12 | value: true | 10 | value:true |
13 | }, | 11 | }, |
14 | 12 | ||
15 | /* === BEGIN: Models === */ | 13 | /* === BEGIN: Models === */ |
16 | 14 | ||
17 | // Layer models: arrays for the data and repetition, current layer number, | 15 | // Layer models: arrays for the data and repetition, current layer number, |
18 | _arrLayers : { | 16 | _arrLayers:{ |
19 | value: [] | 17 | value:[] |
20 | }, | 18 | }, |
21 | arrLayers: { | 19 | arrLayers:{ |
22 | get: function() { | 20 | get:function () { |
23 | return this._arrLayers; | 21 | return this._arrLayers; |
24 | }, | 22 | }, |
25 | set: function(newVal) { | 23 | set:function (newVal) { |
26 | this._arrLayers = newVal; | 24 | this._arrLayers = newVal; |
27 | } | 25 | } |
28 | }, | 26 | }, |
29 | 27 | ||
30 | _layerRepetition: { | 28 | _layerRepetition:{ |
31 | value: null | 29 | value:null |
32 | }, | 30 | }, |
33 | layerRepetition: { | 31 | layerRepetition:{ |
34 | get: function() { | 32 | get:function () { |
35 | return this._layerRepetition; | 33 | return this._layerRepetition; |
36 | }, | 34 | }, |
37 | set: function(newVal) { | 35 | set:function (newVal) { |
38 | this._layerRepetition = newVal; | 36 | this._layerRepetition = newVal; |
39 | } | 37 | } |
40 | }, | 38 | }, |
41 | _currentLayerNumber: { | 39 | _currentLayerNumber:{ |
42 | value: 0 | 40 | value:0 |
43 | }, | 41 | }, |
44 | currentLayerNumber:{ | 42 | currentLayerNumber:{ |
45 | get: function() { | 43 | get:function () { |
46 | return this._currentLayerNumber; | 44 | return this._currentLayerNumber; |
47 | }, | 45 | }, |
48 | set: function(newVal) { | 46 | set:function (newVal) { |
49 | if (newVal !== this._currentLayerNumber) { | 47 | if (newVal !== this._currentLayerNumber) { |
50 | this._currentLayerNumber = newVal; | 48 | this._currentLayerNumber = newVal; |
51 | } | 49 | } |
52 | } | 50 | } |
53 | }, | 51 | }, |
54 | 52 | ||
@@ -57,29 +55,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
57 | }, | 55 | }, |
58 | 56 | ||
59 | // Track model | 57 | // Track model |
60 | _arrTracks: { | 58 | _arrTracks:{ |
61 | serializable: true, | 59 | serializable:true, |
62 | value: [] | 60 | value:[] |
63 | }, | 61 | }, |
64 | arrTracks: { | 62 | arrTracks:{ |
65 | serializable: true, | 63 | serializable:true, |
66 | get: function() { | 64 | get:function () { |
67 | return this._arrTracks; | 65 | return this._arrTracks; |
68 | }, | 66 | }, |
69 | set: function(newVal) { | 67 | set:function (newVal) { |
70 | this._arrTracks = newVal; | 68 | this._arrTracks = newVal; |
71 | } | 69 | } |
72 | }, | 70 | }, |
73 | _trackRepetition: { | 71 | _trackRepetition:{ |
74 | serializable: true, | 72 | serializable:true, |
75 | value: null | 73 | value:null |
76 | }, | 74 | }, |
77 | trackRepetition : { | 75 | trackRepetition:{ |
78 | serializable: true, | 76 | serializable:true, |
79 | get: function() { | 77 | get:function () { |
80 | return this._trackRepetition; | 78 | return this._trackRepetition; |
81 | }, | 79 | }, |
82 | set: function(newVal) { | 80 | set:function (newVal) { |
83 | this._trackRepetition = newVal; | 81 | this._trackRepetition = newVal; |
84 | } | 82 | } |
85 | }, | 83 | }, |
@@ -100,28 +98,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
100 | 98 | ||
101 | 99 | ||
102 | /* === END: Models === */ | 100 | /* === END: Models === */ |
103 | 101 | ||
104 | /* === BEGIN: Draw cycle === */ | 102 | /* === BEGIN: Draw cycle === */ |
105 | 103 | ||
106 | prepareForDraw: { | 104 | prepareForDraw:{ |
107 | value: function() { | 105 | value:function () { |
108 | 106 | ||
109 | this.eventManager.addEventListener("deleteLayerClick", this, false); | 107 | this.eventManager.addEventListener("deleteLayerClick", this, false); |
110 | this.eventManager.addEventListener("newLayer", this, false); | 108 | this.eventManager.addEventListener("newLayer", this, false); |
111 | this.eventManager.addEventListener("deleteLayer", this, false); | 109 | this.eventManager.addEventListener("deleteLayer", this, false); |
112 | this.eventManager.addEventListener( "layerBinding", this, false); | 110 | this.eventManager.addEventListener("layerBinding", this, false); |
113 | this.eventManager.addEventListener("elementAdded", this, false); | 111 | this.eventManager.addEventListener("elementAdded", this, false); |
114 | this.eventManager.addEventListener("elementDeleted", this, false); | 112 | this.eventManager.addEventListener("elementDeleted", this, false); |
115 | this.eventManager.addEventListener("deleteSelection", this, false); | 113 | this.eventManager.addEventListener("deleteSelection", this, false); |
116 | this.hashInstance=this.createLayerHashTable(); | 114 | this.hashInstance = this.createLayerHashTable(); |
117 | this.hashTrackInstance=this.createTrackHashTable(); | 115 | this.hashTrackInstance = this.createTrackHashTable(); |
118 | this.hashLayerNumber = this.createLayerNumberHash(); | 116 | this.hashLayerNumber = this.createLayerNumberHash(); |
119 | this.initTimelineView(); | 117 | this.initTimelineView(); |
120 | } | 118 | } |
121 | }, | 119 | }, |
122 | 120 | ||
123 | _isLayer: { | 121 | _isLayer:{ |
124 | value: false | 122 | value:false |
125 | }, | 123 | }, |
126 | 124 | ||
127 | _firstTimeLoaded:{ | 125 | _firstTimeLoaded:{ |
@@ -134,11 +132,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
134 | writable:true | 132 | writable:true |
135 | }, | 133 | }, |
136 | 134 | ||
137 | willDraw: { | 135 | willDraw:{ |
138 | value: function() { | 136 | value:function () { |
139 | if (this._isLayer) { | 137 | if (this._isLayer) { |
140 | this.insertLayer(); | 138 | this.insertLayer(); |
141 | this._isLayer = false;; | 139 | this._isLayer = false; |
142 | } | 140 | } |
143 | } | 141 | } |
144 | }, | 142 | }, |
@@ -146,21 +144,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
146 | /* === END: Draw cycle === */ | 144 | /* === END: Draw cycle === */ |
147 | 145 | ||
148 | /* === BEGIN: Controllers === */ | 146 | /* === BEGIN: Controllers === */ |
149 | 147 | ||
150 | // Initialize the timeline | 148 | initTimelineView:{ |
151 | initTimelineView : { | 149 | value:function () { |
152 | value:function(){ | 150 | |
153 | 151 | // Get some selectors to make life easier. | |
154 | // Get some selectors to make life easier. | 152 | this.layout_tracks = this.element.querySelector(".layout-tracks"); |
155 | this.layout_tracks = this.element.querySelector(".layout-tracks"); | 153 | this.layout_markers = this.element.querySelector(".layout_markers"); |
156 | this.layout_markers = this.element.querySelector(".layout_markers"); | ||
157 | 154 | ||
158 | // Add event handlers on the buttons. | 155 | // Add event handlers on the buttons. |
159 | this.newlayer_button.identifier = "addLayer"; | 156 | this.newlayer_button.identifier = "addLayer"; |
160 | this.newlayer_button.addEventListener("click", this, false); | 157 | this.newlayer_button.addEventListener("click", this, false); |
161 | this.deletelayer_button.identifier = "deleteLayer"; | 158 | this.deletelayer_button.identifier = "deleteLayer"; |