diff options
author | Eric Guzman | 2012-06-15 16:25:38 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-15 16:25:38 -0700 |
commit | 057afac9e7b99a3c4339003cca19ec3962d5fa13 (patch) | |
tree | 951a3814b8b9303163271d76c53d213ac0487481 /js/stage/binding-view.reel | |
parent | 592bbb7e47d14528c1c9b034877a38f90db5649b (diff) | |
parent | d7456b5d8f5231b7cb6df31081474cfcd5900a84 (diff) | |
download | ninja-057afac9e7b99a3c4339003cca19ec3962d5fa13.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Diffstat (limited to 'js/stage/binding-view.reel')
5 files changed, 67 insertions, 30 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..c53c82e2 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,27 +38,31 @@ | |||
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 | .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover { |
44 | background: #5e9eff; | 44 | box-shadow: inset 0px 0px 6px #5e9eff; |
45 | display:block; | 45 | display:block; |
46 | } | 46 | } |
47 | 47 | ||
48 | .hudOption.bound, .bindingHud .hudOption.bound { | ||
49 | background: #5e9eff; | ||
50 | } | ||
51 | |||
48 | .bindingHud .hudOption:last-child { | 52 | .bindingHud .hudOption:last-child { |
49 | border-bottom: 0px; | 53 | border-bottom: 0px; |
50 | } | 54 | } |
51 | 55 | ||
52 | .bindingHud .hudOption .connectorBubble { | 56 | .bindingHud .hudOption .connectorBubble { |
53 | position: absolute; | 57 | position: absolute; |
54 | right: -10px; | 58 | right: 3px; |
55 | top: 1px; | 59 | top: 3px; |
56 | background: rgba(0, 0, 0, 0.3); | ||
57 | border-radius: 50%; | 60 | border-radius: 50%; |
58 | width: 16px; | 61 | width: 12px; |
59 | height: 16px; | 62 | height: 12px; |
60 | border-left: 0px; | 63 | border-left: 0px; |
61 | display: none; | 64 | display: block; |
65 | box-shadow: inset 0px 0px 6px #5e9eff; | ||
62 | /*border-bottom-right-radius: 50%; | 66 | /*border-bottom-right-radius: 50%; |
63 | border-top-right-radius: 50%;*/ | 67 | border-top-right-radius: 50%;*/ |
64 | 68 | ||
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.css b/js/stage/binding-view.reel/binding-view.css index 7ec31edf..a08def8a 100755 --- a/js/stage/binding-view.reel/binding-view.css +++ b/js/stage/binding-view.reel/binding-view.css | |||
@@ -14,8 +14,7 @@ | |||
14 | .hudRepeater { | 14 | .hudRepeater { |
15 | position: absolute; | 15 | position: absolute; |
16 | width:100%; | 16 | width:100%; |
17 | height:100%; | 17 | z-index: 3; |
18 | z-index: 2; | ||
19 | } | 18 | } |
20 | 19 | ||
21 | .bindingViewCanvas { | 20 | .bindingViewCanvas { |
@@ -33,4 +32,5 @@ | |||
33 | -webkit-box-orient: horizontal; | 32 | -webkit-box-orient: horizontal; |
34 | -webkit-box-pack: center; | 33 | -webkit-box-pack: center; |
35 | -webkit-box-align: center; | 34 | -webkit-box-align: center; |
35 | z-index: 2; | ||
36 | } \ No newline at end of file | 36 | } \ No newline at end of file |
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 5fb7affd..9a127618 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html | |||
@@ -15,8 +15,7 @@ | |||
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 | "canvas": {"#": "bindingViewCanvas"} | ||
20 | } | 19 | } |
21 | }, | 20 | }, |
22 | "hudRepeater": { | 21 | "hudRepeater": { |
@@ -66,8 +65,6 @@ | |||
66 | <div class="objects-tray-container"> | 65 | <div class="objects-tray-container"> |
67 | <div data-montage-id="objects-tray" ></div> | 66 | <div data-montage-id="objects-tray" ></div> |
68 | </div> | 67 | </div> |
69 | |||
70 | <canvas data-montage-id="bindingViewCanvas" class="bindingViewCanvas"></canvas> | ||
71 | </section> | 68 | </section> |
72 | 69 | ||
73 | </body> | 70 | </body> |
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 | } | ||