diff options
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.css | 4 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.html | 3 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 78 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.html | 2 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 12 |
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 | ||
25 | _iframeContainer: { value: null }, | 28 | _iframeContainer: { value: null }, |
26 | 29 | ||
@@ -237,9 +240,8 @@ exports.Stage = Montage.create(Component, { | |||