aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-15 15:03:13 -0700
committerArmen Kesablyan2012-06-15 15:03:13 -0700
commit5bf62b3dacfff71d906286716dc0d73e2cb05bb8 (patch)
treefb69afbc206536359fca350a793e746fb4a0933d /js/stage
parent60e9ea67e0f6d0cf167b6d5068e2e01db5f67966 (diff)
downloadninja-5bf62b3dacfff71d906286716dc0d73e2cb05bb8.tar.gz
Binding Hud: Calling Option Selection to view
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css14
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html2
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js64
3 files changed, 58 insertions, 22 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index e177963f..f7e926cb 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -38,7 +38,7 @@
38 position:relative; 38 position:relative;
39 border-bottom:1px solid #505050; 39 border-bottom:1px solid #505050;
40 line-height:16px; 40 line-height:16px;
41 padding:1px 9px; 41 padding:1px 9px 1px 15px;
42} 42}
43.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble { 43.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble {
44 background: #5e9eff; 44 background: #5e9eff;
@@ -51,14 +51,14 @@
51 51
52.bindingHud .hudOption .connectorBubble { 52.bindingHud .hudOption .connectorBubble {
53 position: absolute; 53 position: absolute;
54 right: -10px; 54 right: 3px;
55 top: 1px; 55 top: 3px;
56 background: rgba(0, 0, 0, 0.3);
57 border-radius: 50%; 56 border-radius: 50%;
58 width: 16px; 57 width: 12px;
59 height: 16px; 58 height: 12px;
60 border-left: 0px; 59 border-left: 0px;
61 display: none; 60 display: block;
61 box-shadow: inset 0px 0px 6px #5e9eff;
62 /*border-bottom-right-radius: 50%; 62 /*border-bottom-right-radius: 50%;
63 border-top-right-radius: 50%;*/ 63 border-top-right-radius: 50%;*/
64 64
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
index 38d2a2ec..b8410f9b 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -65,7 +65,7 @@
65 <section data-montage-id="bindingHud" class="bindingHud"> 65 <section data-montage-id="bindingHud" class="bindingHud">
66 <div data-montage-id="title" class="bindingTitle"></div> 66 <div data-montage-id="title" class="bindingTitle"></div>
67 <div data-montage-id="hudRepetition" class="hudRepetition"> 67 <div data-montage-id="hudRepetition" class="hudRepetition">
68 <div data-montage-id="hudOption" class="hudOption"></div> 68 <div data-montage-id="hudOption"></div>
69 </div> 69 </div>
70 </section> 70 </section>
71 71
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 58a4cf06..ac9751e8 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -50,12 +50,6 @@ exports.BindingView = Montage.create(Component, {
50 } 50 }
51 }, 51 },
52 52
53 handleMousedown: {
54 value: function(e) {
55 validateOverHud(e.clientX, e.clientY);
56 }
57 },
58
59 validateOverHud: { 53 validateOverHud: {
60 value: function() { 54 value: function() {
61 55
@@ -183,6 +177,7 @@ exports.BindingView = Montage.create(Component, {
183 this._canvas = this.application.ninja.stage.drawingCanvas; 177 this._canvas = this.application.ninja.stage.drawingCanvas;
184 this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); 178 this._context = this.application.ninja.stage.drawingCanvas.getContext('2d');
185 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); 179 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
180 this.element.addEventListener("mousedown", this, false);
186 } 181 }
187 }, 182 },
188 183
@@ -193,7 +188,7 @@ exports.BindingView = Montage.create(Component, {
193 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; 188 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
194 this.clearCanvas(); 189 this.clearCanvas();
195 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { 190 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) {
196 this.drawBlueLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft, this.hudRepeater.childComponents[i].element.offsetTop); 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);
197 } 192 }
198 } else { 193 } else {
199 this.bindables = []; 194 this.bindables = [];
@@ -209,10 +204,12 @@ exports.BindingView = Montage.create(Component, {
209 } 204 }
210 }, 205 },
211 206
212 drawBlueLine: { 207 drawLine: {
213 value: function(fromX,fromY,toX,toY) { 208 value: function(fromX,fromY,toX,toY, color) {
214 this._context.lineWidth = 4; // Set Line Thickness 209 this._context.lineWidth = 1; // Set Line Thickness
215 //this._context.strokeStyle = "#5e9eff"; 210 if (color === null) {
211 this._context.strokeStyle = "#CCCCCC";
212 }
216 213
217 this._context.beginPath(); // Start Drawing Line 214 this._context.beginPath(); // Start Drawing Line
218 this._context.moveTo(fromX, fromY); 215 this._context.moveTo(fromX, fromY);
@@ -223,20 +220,59 @@ exports.BindingView = Montage.create(Component, {
223 220
224 clearCanvas: { 221 clearCanvas: {
225 value: function() { 222 value: function() {
226 debugger;
227 this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight); 223 this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight);
228 } 224 }
229 }, 225 },
230 226
227 ///////////////////////////////////////////////////////
228 // Events & Functions to draw user selected options //
229 /////////////////////////////////////////////////////
230
231 // When a user selects a valid option this value will be switched to true and canvas
232 // will draw a line following the mouse and the start position
233 _isDrawingConnection: {
234 value: false
235 },
236
237 // When isDrawingConnection is set true this is the beginning position for the draw line
238 _connectionPositionStart: {
239 value: {x: 0, y:0}
240 },
241
242 // When isDrawingConnection is set true this is the end point for the draw line
243 _currentMousePosition: {
244 value: {x: 0, y:0}
245 },
246
231 handleMousemove: { 247 handleMousemove: {
232 value: function() { 248 value: function(e) {
249 if(this._isDrawingConnection) {
250 this._currentMousePosition.x = e.clientX;
251 this._currentMousePosition.y = e.clientY;
252 this.needsDraw = true;
253 }
254
255 }
256 },
233 257
258 handleMouseup: {
259 value: function() {
260 this.element.removeEventListener("mousemove", this);
261 this.element.removeEventListener("mouseup", this);
262 this._isDrawingConnection = false;
263 this.needsDraw = true;
234 } 264 }
235 }, 265 },
236 266
237 handleMousedown: { 267 handleMousedown: {
238 value: function(event) { 268 value: function(event) {
239 269 // We are looking for a mouse down on an option to start the connection visual
270 if(event._event.target.classList.contains("hudOption")) {
271 //NOTE: Test Code Please Clean Up
272 this._isDrawingConnection = true;
273 this.element.addEventListener("mousemove", this);
274 this.element.addEventListener("mouseup", this);
275 }
240 } 276 }
241 }, 277 },
242 278