aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-20 23:03:48 -0800
committerValerio Virgillito2012-02-20 23:03:48 -0800
commitf9d34a54baf61ccdf77732b1aaedb29d296b8c2e (patch)
tree52821ec87e002b8a704a1355ce70ac65872c5568 /js
parent9e566515f7e3a4ae26b39a2581008a15cf662c95 (diff)
downloadninja-f9d34a54baf61ccdf77732b1aaedb29d296b8c2e.tar.gz
enabling nested selection
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'js')
-rwxr-xr-xjs/controllers/elements/element-controller.js3
-rwxr-xr-xjs/controllers/selection-controller.js37
-rwxr-xr-xjs/ninja.reel/ninja.html10
-rwxr-xr-xjs/stage/layout.js29
-rwxr-xr-xjs/tools/SelectionTool.js23
5 files changed, 80 insertions, 22 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 65d26bdd..ac14def4 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -12,6 +12,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
12 addElement: { 12 addElement: {
13 value: function(el, styles) { 13 value: function(el, styles) {
14 this.application.ninja.currentDocument.documentRoot.appendChild(el); 14 this.application.ninja.currentDocument.documentRoot.appendChild(el);
15 // Nested elements -
16 // TODO make sure the CSS is correct before nesting elements
17 // this.application.ninja.currentSelectedContainer.appendChild(el);
15 this.application.ninja.stylesController.setElementStyles(el, styles); 18 this.application.ninja.stylesController.setElementStyles(el, styles);
16 } 19 }
17 }, 20 },
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 833e6f04..fed9affd 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -20,6 +20,27 @@ exports.SelectionController = Montage.create(Component, {
20 } 20 }
21 }, 21 },
22 22
23 /*
24 * Bound property to the ninja currentSelectedContainer
25 */
26 _selectionContainer: {
27 value: null
28 },
29
30 selectionContainer: {
31 get: function() {
32 return this._selectionContainer
33 },
34 set: function(value) {
35 if(this._selectionContainer && this._selectionContainer !== value) {
36 console.log("setting container in the selection tool");
37 this.executeSelectElement();
38 }
39
40 this._selectionContainer = value;
41 }
42 },
43
23 deserializedFromTemplate: { 44 deserializedFromTemplate: {
24 value: function() { 45 value: function() {
25 this.eventManager.addEventListener("openDocument", this, false); 46 this.eventManager.addEventListener("openDocument", this, false);
@@ -53,7 +74,9 @@ exports.SelectionController = Montage.create(Component, {
53 } 74 }
54 } 75 }
55 76
56 this.dispatchEvent(selectionEvent.event); 77 //
78 this._selectionContainer = this.application.ninja.currentSelectedContainer;
79
57 } 80 }
58 }, 81 },
59 82
@@ -66,13 +89,10 @@ exports.SelectionController = Montage.create(Component, {
66 handleElementDeleted: { 89 handleElementDeleted: {
67 value: function(event) { 90 value: function(event) {
68 if(!this._isDocument) { 91 if(!this._isDocument) {
69
70 if(this.findSelectedElement(event.detail) !== -1) { 92 if(this.findSelectedElement(event.detail) !== -1) {
71 this.executeSelectElement(); 93 this.executeSelectElement();
72 } 94 }
73
74 } 95 }
75
76 } 96 }
77 }, 97 },
78 98
@@ -130,12 +150,17 @@ exports.SelectionController = Montage.create(Component, {
130 this.executeSelectElement(); // Else execute selection with no item 150 this.executeSelectElement(); // Else execute selection with no item
131 } else { 151 } else {
132 152
133 if(item.parentNode.id == "UserContent") { 153// if(item.parentNode.id === "UserContent") {
154 if(item.parentNode.uuid === this.selectionContainer.uuid) {
134 this.executeSelectElement(item); 155 this.executeSelectElement(item);
135 } else { 156 } else {
136 var outerElement = item.parentNode; 157 var outerElement = item.parentNode;
137 158
138 while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") { 159 while(outerElement.parentNode && outerElement.parentNode.uuid !== this.selectionContainer.uuid) {
160 //while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") {
161 // If element is higher up than current container then return
162 if(outerElement.id === "UserContent") return;
163 // else keep going up the chain
139 outerElement = outerElement.parentNode; 164 outerElement = outerElement.parentNode;
140 } 165 }
141 166
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index c9f17e3b..65cbfc28 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -228,7 +228,15 @@
228 228
229 "selectionController1": { 229 "selectionController1": {
230 "module": "js/controllers/selection-controller", 230 "module": "js/controllers/selection-controller",
231 "name": "SelectionController" 231 "name": "SelectionController",
232 "bindings" : {
233 "selectionContainer": {
234 "boundObject": {"@": "owner"},
235 "boundObjectPropertyPath": "currentSelectedContainer",
236 "oneway": true
237 }
238 }
239
232 }, 240 },
233 241
234 "documentController1": { 242 "documentController1": {
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 1a491210..56bb70bf 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -195,11 +195,30 @@ exports.Layout = Montage.create(Component, {
195 bounds3D[j] = tmpPt; 195 bounds3D[j] = tmpPt;
196 } 196 }
197 197
198 // Draw the Item ouline 198 if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) {
199 this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]); 199 this.ctx.save();
200 this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] ); 200 this.ctx.strokeStyle = "#C61F00";
201 this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] ); 201
202 this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] ); 202 this.ctx.beginPath();
203
204 this.ctx.moveTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] - 0.5 );
205
206 this.ctx.lineTo( bounds3D[0][0] - 0.5 , bounds3D[0][1] - 0.5 );
207 this.ctx.lineTo( bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5 );
208 this.ctx.lineTo( bounds3D[2][0] + 0.5 , bounds3D[2][1] + 0.5 );
209 this.ctx.lineTo( bounds3D[3][0] + 0.5 , bounds3D[3][1] + 0.5 );
210
211 this.ctx.closePath();
212 this.ctx.stroke();
213
214 this.ctx.restore();
215 } else {
216 // Draw the Item ouline
217 this._dashedLine(bounds3D[3][0] - 0.5,bounds3D[3][1]- 0.5,bounds3D[0][0] + 2.5, bounds3D[0][1] - 0.5,[5,5]);
218 this._dashedLine(bounds3D[0][0] - 0.5, bounds3D[0][1] - 0.5, bounds3D[1][0]- 0.5, bounds3D[1][1] + 0.5, [5,5] );
219 this._dashedLine(bounds3D[1][0] - 0.5 , bounds3D[1][1] + 0.5, bounds3D[2][0]+ 0.5, bounds3D[2][1] + 0.5, [5,5] );
220 this._dashedLine(bounds3D[2][0] + 0.5, bounds3D[2][1] + 0.5, bounds3D[3][0] + 0.5, bounds3D[3][1] - 0.5, [5,5] );
221 }
203 222
204 // Draw the Label is all mode 223 // Draw the Label is all mode
205 if(this.layoutView === "layoutAll") { 224 if(this.layoutView === "layoutAll") {
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index f76a6d85..37029e8c 100755
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -183,18 +183,21 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
183 } 183 }
184 }, 184 },
185 185
186 /**
187 * Double click handler
188 *
189 * Sets the currentSelectionContainer to the current selected element. If no elements are selected set the
190 * currentSelectionContainer to the userDocument div.
191 */
186 HandleDoubleClick: { 192 HandleDoubleClick: {
187 value: function(event) { 193 value: function(event) {
188 194 if(this.application.ninja.selectedElements.length > 0) {
189 // Temporary Code for Breadcrumb 195 this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]._element;
190 if(this.application.ninja.selectedElements.length > 0) { 196 } else {
191 this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0]._element; 197 this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
192 } else {
193 this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
194 }
195
196 } 198 }
197 }, 199 }
200 },
198 201
199 HandleKeyPress: { 202 HandleKeyPress: {
200 value: function(event){ 203 value: function(event){