diff options
Diffstat (limited to 'js')
24 files changed, 857 insertions, 484 deletions
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index 0282060f..a4bf9baa 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js | |||
@@ -162,15 +162,17 @@ exports.KeyboardMediator = Montage.create(Component, { | |||
162 | return; | 162 | return; |
163 | } | 163 | } |
164 | 164 | ||
165 | // Hand tool | ||
165 | if(evt.keyCode === Keyboard.H ) { | 166 | if(evt.keyCode === Keyboard.H ) { |
166 | evt.preventDefault(); | 167 | evt.preventDefault(); |
167 | this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[15]}); | 168 | this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[13]}); |
168 | return; | 169 | return; |
169 | } | 170 | } |
170 | 171 | ||
172 | // Zoom tool | ||
171 | if(evt.keyCode === Keyboard.Z ) { | 173 | if(evt.keyCode === Keyboard.Z ) { |
172 | evt.preventDefault(); | 174 | evt.preventDefault(); |
173 | this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[16]}); | 175 | this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[14]}); |
174 | return; | 176 | return; |
175 | } | 177 | } |
176 | 178 | ||
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html index bf21994b..72da49d5 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.html +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html | |||
@@ -9,8 +9,7 @@ | |||
9 | "module": "js/panels/Timeline/Keyframe.reel", | 9 | "module": "js/panels/Timeline/Keyframe.reel", |
10 | "name": "Keyframe", | 10 | "name": "Keyframe", |
11 | "properties": { | 11 | "properties": { |
12 | "element": {"#": "keyframespace"}, | 12 | "element": {"#": "keyframespace"} |
13 | "tweenkeyframe": {"#": "tweenkeyframe"} | ||
14 | } | 13 | } |
15 | } | 14 | } |
16 | 15 | ||
@@ -19,8 +18,7 @@ | |||
19 | </head> | 18 | </head> |
20 | <body> | 19 | <body> |
21 | 20 | ||
22 | <div id="keyframespace"> | 21 | <div id="keyframespace" class="tween_keyframe"> |
23 | <div id="tweenkeyframe" class="tween_keyframe"></div> | ||
24 | </div> | 22 | </div> |
25 | 23 | ||
26 | </body> | 24 | </body> |
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index c82a9086..bb2acee0 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js | |||
@@ -1,6 +1,5 @@ | |||
1 | var Montage = require("montage/core/core").Montage; | 1 | 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 ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
4 | 3 | ||
5 | var Keyframe = exports.Keyframe = Montage.create(Component, { | 4 | var Keyframe = exports.Keyframe = Montage.create(Component, { |
6 | 5 | ||
@@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
19 | }, | 18 | }, |
20 | set:function(value){ | 19 | set:function(value){ |
21 | this._position = value; | 20 | this._position = value; |
21 | this.needsDraw = true; | ||
22 | } | 22 | } |
23 | }, | 23 | }, |
24 | 24 | ||
25 | _id:{ | ||
26 | value:0 | ||
27 | }, | ||
28 | |||
29 | id:{ | ||
30 | serializable:true, | ||
31 | get:function () { | ||
32 | return this._id; | ||
33 | }, | ||
34 | set:function (value) { | ||
35 | this._id = value; | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | _timelinePosition:{ | ||
40 | value:0 | ||
41 | }, | ||
42 | |||
43 | timelinePosition:{ | ||
44 | serializable:true, | ||
45 | get:function () { | ||
46 | return this._timelinePosition; | ||
47 | }, | ||
48 | set:function (value) { | ||
49 | this._timelinePosition = value; | ||
50 | } | ||
51 | }, | ||
52 | |||
53 | _containingTrack:{ | ||
54 | value:{} | ||
55 | }, | ||
56 | |||
57 | containingTrack:{ | ||
58 | serializable:true, | ||
59 | get:function () { | ||
60 | return this._containingTrack; | ||
61 | }, | ||
62 | set:function (value) { | ||
63 | this._containingTrack = value; | ||
64 | } | ||
65 | }, | ||
66 | |||
67 | _animatedProperties:{ | ||
68 | value:[] | ||
69 | }, | ||
70 | |||
71 | animatedProperties:{ | ||
72 | serializable:true, | ||
73 | get:function () { | ||
74 | return this._animatedProperties; | ||
75 | }, | ||
76 | set:function (value) { | ||
77 | this._animatedProperties = value; | ||
78 | } | ||
79 | }, | ||
80 | |||
81 | containingSpan:{ | ||
82 | value: null | ||
83 | }, | ||
84 | |||
85 | prepareForDraw:{ | 25 | prepareForDraw:{ |
86 | value:function(){ | 26 | value:function(){ |
87 | this.tweenkeyframe.addEventListener("click", this, false); | 27 | this.element.addEventListener("click", this, false); |
88 | this.animatedProperties = new Array(); | ||
89 | this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; | ||
90 | this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; | ||
91 | } | 28 | } |
92 | }, | 29 | }, |
93 | 30 | ||
94 | draw:{ | 31 | draw:{ |
95 | value:function(){ | 32 | value:function(){ |
96 | this.tweenkeyframe.style.left = (this.position - 3) + "px"; | 33 | this.element.style.left = (this.position - 3) + "px"; |
97 | } | ||
98 | }, | ||
99 | |||
100 | handleElementChange:{ | ||
101 | value:function (event) { | ||
102 | if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){ | ||
103 | alert("Wrong element selected for this keyframe track"); | ||
104 | return; | ||
105 | } | ||
106 | |||
107 | if(event.detail.source && event.detail.source !== "keyframe") { | ||
108 | this.containingSpan.highlightSpan(); | ||
109 | if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){ | ||
110 | this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop; | ||
111 | this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft; | ||
112 | this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; | ||
113 | this.containingTrack.updateKeyframeRule(); | ||
114 | } | ||
115 | } | ||
116 | } | 34 | } |
117 | }, | 35 | }, |
118 | 36 | ||
119 | deselect:{ | 37 | deselectKeyframe:{ |
120 | value:function(){ | 38 | value:function(){ |
121 | this.tweenkeyframe.classList.remove("keyframeSelected"); | 39 | this.element.classList.remove("keyframeSelected"); |
122 | this.eventManager.removeEventListener("elementChange", this, false); | ||
123 | } | 40 | } |
124 | }, | 41 | }, |
125 | 42 | ||
126 | select:{ | 43 | selectKeyframe:{ |
127 | value:function(){ | 44 | value:function(){ |
128 | this.application.ninja.timeline.deselectKeyframes(); | 45< |