aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-18 13:22:08 -0700
committerArmen Kesablyan2012-06-18 13:22:08 -0700
commitf5e70ca6204f78c395458d39f14ddaf45308edf7 (patch)
tree0dc063f18941b421f29d9d65106aed078cdda279 /js/stage
parent2fcb74d0b204ce2999b70fa9a46fc58a558344d8 (diff)
downloadninja-f5e70ca6204f78c395458d39f14ddaf45308edf7.tar.gz
Binding View - validate over huds
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.css4
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html3
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js78
-rwxr-xr-xjs/stage/stage.reel/stage.html2
-rwxr-xr-xjs/stage/stage.reel/stage.js12
5 files changed, 75 insertions, 24 deletions
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index a08def8a..fbd1b2b6 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -5,10 +5,8 @@
5 </copyright> */ 5 </copyright> */
6 6
7.bindingView { 7.bindingView {
8 height: 100%;
9 position: absolute; 8 position: absolute;
10 width:100%; 9 z-index: 2;
11 z-index: 12;
12} 10}
13 11
14.hudRepeater { 12.hudRepeater {
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 9a127618..5532d61a 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -15,7 +15,8 @@
15 "prototype": "js/stage/binding-view.reel", 15 "prototype": "js/stage/binding-view.reel",
16 "properties": { 16 "properties": {
17 "element": {"#": "bindingView"}, 17 "element": {"#": "bindingView"},
18 "hudRepeater": {"@": "hudRepeater"} 18 "hudRepeater": {"@": "hudRepeater"},
19 "objectsTray": {"@": "objectsTray"}
19 } 20 }
20 }, 21 },
21 "hudRepeater": { 22 "hudRepeater": {
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index ac9751e8..682c0827 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -50,6 +50,32 @@ exports.BindingView = Montage.create(Component, {
50 } 50 }
51 }, 51 },
52 52
53 _width :{ value: 0 },
54 width: {
55 get:function() {
56 return this._width;
57 },
58 set: function(val) {
59 if(this._width !== val) {
60 this._width = val;
61 this.needsDraw = true;
62 }
63 }
64 },
65
66 _height :{ value: 0 },
67 height: {
68 get:function() {
69 return this._height;
70 },
71 set: function(val) {
72 if(this._height !== val) {
73 this._height = val;
74 this.needsDraw = true;
75 }
76 }
77 },
78
53 validateOverHud: { 79 validateOverHud: {
54 value: function() { 80 value: function() {
55 81
@@ -178,18 +204,28 @@ exports.BindingView = Montage.create(Component, {
178 this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); 204 this._context = this.application.ninja.stage.drawingCanvas.getContext('2d');
179 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); 205 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
180 this.element.addEventListener("mousedown", this, false); 206 this.element.addEventListener("mousedown", this, false);
207 this.element.addEventListener("mousemove", this, false);
181 } 208 }
182 }, 209 },
183 210
184 draw: { 211 draw: {
185 value: function() { 212 value: function() {
213
214 this.element.style.width = this.width + "px";
215 this.element.style.height = this.height + "px";
186 if(this.selectedComponent !== null) { 216 if(this.selectedComponent !== null) {
187 this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; 217 this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth;
188 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; 218 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
189 this.clearCanvas(); 219 this.clearCanvas();
190 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { 220 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) {
191 this.drawLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3); 221 this.drawLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3);
222
223 }
224
225 if(this._isDrawingConnection) {
226 this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4);
192 } 227 }
228
193 } else { 229 } else {
194 this.bindables = []; 230 this.bindables = [];
195 this.clearCanvas(); 231 this.clearCanvas();
@@ -205,12 +241,11 @@ exports.BindingView = Montage.create(Component, {
205 }, 241 },
206 242
207 drawLine: { 243 drawLine: {
208 value: function(fromX,fromY,toX,toY, color) { 244 value: function(fromX,fromY,toX,toY, color, width) {
209 this._context.lineWidth = 1; // Set Line Thickness 245 if(width === null) width = 1;
210 if (color === null) { 246 if (color === null) color = "#CCC";
211 this._context.strokeStyle = "#CCCCCC"; 247 this._context.lineWidth = width; // Set Line Thickness
212 } 248 this._context.strokeStyle = color; // Set Color
213
214 this._context.beginPath(); // Start Drawing Line 249 this._context.beginPath(); // Start Drawing Line
215 this._context.moveTo(fromX, fromY); 250 this._context.moveTo(fromX, fromY);
216 this._context.lineTo(toX, toY); 251 this._context.lineTo(toX, toY);
@@ -246,9 +281,24 @@ exports.BindingView = Montage.create(Component, {
246 281
247 handleMousemove: { 282 handleMousemove: {
248 value: function(e) { 283 value: function(e) {
284 var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
285 var overHud = false;
286 this.hudRepeater.childComponents.forEach(function(obj) {
287 if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) {
288 if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) {
289 overHud = true;
290 console.log(overHud);
291 }
292 }
293 }.bind(this));
294 if(overHud) {
295 this.element.style.zIndex = "12";
296 } else {
297 this.element.style.zIndex = "2";
298 }
299
249 if(this._isDrawingConnection) { 300 if(this._isDrawingConnection) {
250 this._currentMousePosition.x = e.clientX; 301 this._currentMousePosition = mousePoint;
251 this._currentMousePosition.y = e.clientY;
252 this.needsDraw = true; 302 this.needsDraw = true;
253 } 303 }
254 304
@@ -257,21 +307,21 @@ exports.BindingView = Montage.create(Component, {
257 307
258 handleMouseup: { 308 handleMouseup: {
259 value: function() { 309 value: function() {
260 this.element.removeEventListener("mousemove", this); 310 window.removeEventListener("mouseup", this);
261 this.element.removeEventListener("mouseup", this);
262 this._isDrawingConnection = false; 311 this._isDrawingConnection = false;
263 this.needsDraw = true; 312 this.needsDraw = true;
264 } 313 }
265 }, 314 },
266 315
267 handleMousedown: { 316 handleMousedown: {
268 value: function(event) { 317 value: function(e) {
269 // We are looking for a mouse down on an option to start the connection visual 318 // We are looking for a mouse down on an option to start the connection visual
270 if(event._event.target.classList.contains("hudOption")) { 319 if(e._event.target.classList.contains("hudOption")) {
271 //NOTE: Test Code Please Clean Up 320 //NOTE: Test Code Please Clean Up
321 //alert(event._event.target.controller.title);
272 this._isDrawingConnection = true; 322 this._isDrawingConnection = true;
273 this.element.addEventListener("mousemove", this); 323 this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
274 this.element.addEventListener("mouseup", this); 324 window.addEventListener("mouseup", this);
275 } 325 }
276 } 326 }
277 }, 327 },
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 397af0b6..215f8f2e 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -84,7 +84,7 @@
84 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas> 84 <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
85 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas> 85 <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
86 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas> 86 <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
87 <section data-montage-id="bindingView" class="bindingView"></section> 87 <section data-montage-id="bindingView"></section>
88 </section> 88 </section>
89 89
90</body> 90</body>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 30ee1e40..63339c57 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -21,6 +21,9 @@ exports.Stage = Montage.create(Component, {
21 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } }, 21 _canvasSelectionPrefs: { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
22 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } }, 22 _canvasDrawingPrefs: { value: { "thickness" : 1.0, "color" : "#000" } },
23 drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } }, 23 drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
24 bindingView: {
25 value: null
26 },
24 27