aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js1269
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;
4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack; 4var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
5var nj = require("js/lib/NJUtils").NJUtils; 5var nj = require("js/lib/NJUtils").NJUtils;
6 6
7// var Track = require("js/panels/Timeline/Track.reel").Track;
8
9var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 7var 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";