diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/io/system/ninjalibrary.json | 2 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 71 | ||||
-rw-r--r-- | js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 120 | ||||
-rw-r--r-- | js/panels/Timeline/Tween.reel/Tween.js | 69 |
4 files changed, 106 insertions, 156 deletions
diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json index c5ccbc82..86134b97 100644 --- a/js/io/system/ninjalibrary.json +++ b/js/io/system/ninjalibrary.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "libraries": [ | 2 | "libraries": [ |
3 | {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.11.1.0"}, | 3 | {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.11.2.0"}, |
4 | {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.6.0.3"} | 4 | {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.6.0.3"} |
5 | ] | 5 | ] |
6 | } \ No newline at end of file | 6 | } \ No newline at end of file |
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7c936f7..45a2afd3 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component; | |||
9 | 9 | ||
10 | var Keyframe = exports.Keyframe = Montage.create(Component, { | 10 | var Keyframe = exports.Keyframe = Montage.create(Component, { |
11 | 11 | ||
12 | // ==== Begin models | ||
12 | hasTemplate:{ | 13 | hasTemplate:{ |
13 | value: true | 14 | value: true |
14 | }, | 15 | }, |
@@ -42,7 +43,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
42 | this.needsDraw = true; | 43 | this.needsDraw = true; |
43 | } | 44 | } |
44 | }, | 45 | }, |
46 | // ==== End Models | ||
45 | 47 | ||
48 | // ==== Begin Draw cycle methods | ||
46 | prepareForDraw:{ | 49 | prepareForDraw:{ |
47 | value:function(){ | 50 | value:function(){ |
48 | this.element.addEventListener("click", this, false); | 51 | this.element.addEventListener("click", this, false); |
@@ -66,57 +69,31 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
66 | this.element.style.left = (this.position - 5) + "px"; | 69 | this.element.style.left = (this.position - 5) + "px"; |
67 | } | 70 | } |
68 | }, | 71 | }, |
72 | // ==== End Draw cycle methods | ||
69 | 73 | ||
70 | deselectKeyframe:{ | 74 | // ==== Begin Event handlers |
71 | value:function(){ | ||
72 | this.isSelected=false; | ||
73 | this.element.style.left = (this.position - 5) + "px"; | ||
74 | } | ||
75 | }, | ||
76 | |||
77 | selectKeyframe:{ | ||
78 | value:function(){ | ||
79 | if(this.isSelected){ | ||
80 | return; | ||
81 | } | ||
82 | |||
83 | if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ | ||
84 | var tweenID = this.parentComponent.tweenID; | ||
85 | var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent; | ||
86 | mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe(); | ||
87 | return; | ||
88 | } | ||
89 | |||
90 | this.isSelected=true; | ||
91 | this.element.style.left = (this.position - 6) + "px"; | ||
92 | this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; | ||
93 | this.parentComponent.selectTween(); | ||
94 | } | ||
95 | }, | ||
96 | |||
97 | handleClick:{ | 75 | handleClick:{ |
98 | value:function(ev){ | 76 | value:function(ev){ |
99 | this.selectKeyframe(); | 77 | this.selectKeyframe(); |
100 | ev.stopPropagation(); | 78 | ev.stopPropagation(); |
101 | } | 79 | } |
102 | }, | 80 | }, |
103 | 81 | ||
104 | handleMouseover: { | 82 | handleMouseover: { |
105 | value: function(event) { | 83 | value: function(event) { |
106 | this.element.draggable = true; | 84 | this.element.draggable = true; |
107 | } | 85 | } |
108 | }, | 86 | }, |
87 | |||
109 | handleMouseout: { | 88 | handleMouseout: { |
110 | value: function(event) { | 89 | value: function(event) { |
111 | this.element.draggable = false; | 90 | this.element.draggable = false; |
112 | } | 91 | } |
113 | }, | 92 | }, |
93 | |||
114 | handleDragstart: { | 94 | handleDragstart: { |
115 | value: function(event) { | 95 | value: function(event) { |
116 | //this.parentComponent.parentComponent.dragLayerID = this.layerID; | ||
117 | event.dataTransfer.setData('Text', 'Keyframe'); | 96 | event.dataTransfer.setData('Text', 'Keyframe'); |
118 | |||
119 | // Get my index in my track's tween array | ||
120 | var i = 0, | 97 | var i = 0, |
121 | tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, | 98 | tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, |
122 | myIndex = null; | 99 | myIndex = null; |
@@ -129,10 +106,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
129 | this.selectKeyframe(); | 106 | this.selectKeyframe(); |
130 | } | 107 | } |
131 | }, | 108 | }, |
109 | |||
132 | handleDragend: { | 110 | handleDragend: { |
133 | value: function(event) { | 111 | value: function(event) { |
134 | this.parentComponent.isDragging = false; | 112 | this.parentComponent.isDragging = false; |
135 | } | 113 | } |
136 | } | 114 | }, |
137 | 115 | // ==== End Event handlers | |
116 | |||
117 | // === Begin Controllers | ||
118 | selectKeyframe:{ | ||
119 | value:function(){ | ||
120 | if(this.isSelected){ | ||
121 | return; | ||
122 | } | ||
123 | if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){ | ||
124 | var tweenID = this.parentComponent.tweenID; | ||
125 | var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent; | ||
126 | mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe(); | ||
127 | return; | ||
128 | } | ||
129 | this.isSelected=true; | ||
130 | this.element.style.left = (this.position - 6) + "px"; | ||
131 | this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty; | ||
132 | this.parentComponent.selectTween(); | ||
133 | } | ||
134 | }, | ||
135 | |||
136 | deselectKeyframe:{ | ||
137 | value:function () { | ||
138 | this.isSelected = false; | ||
139 | this.element.style.left = (this.position - 5) + "px"; | ||
140 | } | ||
141 | } | ||
142 | // ==== End Controllers | ||
138 | }); | 143 | }); |
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index 72d26e78..c4571e9d 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | |||
@@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component; | |||
9 | 9 | ||
10 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | 10 | var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { |
11 | 11 | ||
12 | /* ===- Begin Models ==== */ | ||
12 | hasTemplate:{ | 13 | hasTemplate:{ |
13 | value: true | 14 | value: true |
14 | }, | 15 | }, |
15 | 16 | ||
16 | prepareForDraw:{ | ||
17 | value:function(){ | ||
18 | this.element.addEventListener("click", this, false); | ||
19 | this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID; | ||
20 | this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement; | ||
21 | this.ninjaStylesContoller = this.application.ninja.stylesController; | ||
22 | } | ||
23 | }, | ||
24 | |||
25 | draw:{ | ||
26 | value:function(){ | ||
27 | |||
28 | } | ||
29 | }, | ||
30 | |||
31 | didDraw:{ | ||
32 | value:function () { | ||
33 | if(this.currentKeyframeRule){ | ||
34 | this.retrieveStoredStyleTweens(); | ||
35 | } | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | trackEditorProperty:{ | 17 | trackEditorProperty:{ |
40 | value:"" | 18 | value:"" |
41 | }, | 19 | }, |
@@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
51 | _propTweenRepetition:{ | 29 | _propTweenRepetition:{ |
52 | value:null | 30 | value:null |
53 | }, | 31 | }, |
54 | |||
55 | propTweenRepetition:{ | 32 | propTweenRepetition:{ |
56 | get:function () { | 33 | get:function () { |
57 | return this._propTweenRepetition; | 34 | return this._propTweenRepetition; |
@@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
64 | _propTweens:{ | 41 | _propTweens:{ |
65 | value:[] | 42 | value:[] |
66 | }, | 43 | }, |
67 | |||
68 | propTweens:{ | 44 | propTweens:{ |
69 | serializable:true, | 45 | serializable:true, |
70 | get:function () { | 46 | get:function () { |
@@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
78 | _propTrackData:{ | 54 | _propTrackData:{ |
79 | value:false | 55 | value:false |
80 | }, | 56 |