aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css22
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html2
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.css4
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.html5
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js64
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 }
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 }