aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js746
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;
2var Component = require("montage/ui/component").Component; 2var Component = require("montage/ui/component").Component;
3var Layer = require("js/panels/Timeline/Layer.reel").Layer; 3var 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;
5
5// var Track = require("js/panels/Timeline/Track.reel").Track; 6// var Track = require("js/panels/Timeline/Track.reel").Track;
6 7
7var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { 8var 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";