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, {
                    return;
                }
+                // Hand tool
                if(evt.keyCode === Keyboard.H ) {
                    evt.preventDefault();
-                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[15]});
+                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[13]});
                    return;
                }
+                // Zoom tool
                if(evt.keyCode === Keyboard.Z ) {
                    evt.preventDefault();
-                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[16]});
+                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[14]});
                    return;
                }
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 @@
                            "module": "js/panels/Timeline/Keyframe.reel",
                            "name": "Keyframe",
                            "properties": {
-                                "element": {"#": "keyframespace"},
+                                "element": {"#": "keyframespace"}
-                                "tweenkeyframe": {"#": "tweenkeyframe"}
                            }
                        }
@@ -19,8 +18,7 @@
        </head>
        <body>
-        <div id="keyframespace">
+        <div id="keyframespace" class="tween_keyframe">
-            <div id="tweenkeyframe" class="tween_keyframe"></div>
        </div>
    </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 @@
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 var Keyframe = exports.Keyframe = Montage.create(Component, {
@@ -19,136 +18,38 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
        },
        set:function(value){
            this._position = value;
+            this.needsDraw = true;
        }
    },
-    _id:{
-        value:0
-    },
-    id:{
-        serializable:true,
-        get:function () {
-            return this._id;
-        },
-        set:function (value) {
-            this._id = value;
-        }
-    },
-    _timelinePosition:{
-        value:0
-    },
-    timelinePosition:{
-        serializable:true,
-        get:function () {
-            return this._timelinePosition;
-        },
-        set:function (value) {
-            this._timelinePosition = value;
-        }
-    },
-    _containingTrack:{
-        value:{}
-    },
-    containingTrack:{
-        serializable:true,
-        get:function () {
-            return this._containingTrack;
-        },
-        set:function (value) {
-            this._containingTrack = value;
-        }
-    },
-    _animatedProperties:{
-        value:[]
-    },
-    animatedProperties:{
-        serializable:true,
-        get:function () {
-            return this._animatedProperties;
-        },
-        set:function (value) {
-            this._animatedProperties = value;
-        }
-    },
-    containingSpan:{
-        value: null
-    },
    prepareForDraw:{
        value:function(){
-            this.tweenkeyframe.addEventListener("click", this, false);
+            this.element.addEventListener("click", this, false);
-            this.animatedProperties = new Array();
-            this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
-            this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
        }
    },
    draw:{
        value:function(){
-            this.tweenkeyframe.style.left = (this.position - 3) + "px";
+            this.element.style.left = (this.position - 3) + "px";
-        }
-    },
-    handleElementChange:{
-        value:function (event) {
-            if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
-                alert("Wrong element selected for this keyframe track");
-                return;
-            }
-            if(event.detail.source && event.detail.source !== "keyframe") {
-                this.containingSpan.highlightSpan();
-                if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
-                    this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
-                    this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
-                    this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
-                    this.containingTrack.updateKeyframeRule();
-                }
-            }
        }
    },
-    deselect:{
+    deselectKeyframe:{
        value:function(){
-            this.tweenkeyframe.classList.remove("keyframeSelected");
+            this.element.classList.remove("keyframeSelected");
-            this.eventManager.removeEventListener("elementChange", this, false);
        }
    },
-    select:{
+    selectKeyframe:{
        value:function(){
-            this.application.ninja.timeline.deselectKeyframes();
+            this.element.classList.add("keyframeSelected")

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	this.element.classList.add("keyframeSelected")