diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-view.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 124 |
1 files changed, 105 insertions, 19 deletions
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index ac9751e8..0a663a4e 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -36,7 +36,6 @@ exports.BindingView = Montage.create(Component, { | |||
36 | }, | 36 | }, |
37 | set: function(val) { | 37 | set: function(val) { |
38 | this._translateX = val; | 38 | this._translateX = val; |
39 | console.log("x", this._translateX); | ||
40 | } | 39 | } |
41 | }, | 40 | }, |
42 | 41 | ||
@@ -46,7 +45,32 @@ exports.BindingView = Montage.create(Component, { | |||
46 | }, | 45 | }, |
47 | set: function(val) { | 46 | set: function(val) { |
48 | this._translateY = val; | 47 | this._translateY = val; |
49 | console.log("y", this._translateY); | 48 | } |
49 | }, | ||
50 | |||
51 | _width :{ value: 0 }, | ||
52 | width: { | ||
53 | get:function() { | ||
54 | return this._width; | ||
55 | }, | ||
56 | set: function(val) { | ||
57 | if(this._width !== val) { | ||
58 | this._width = val; | ||
59 | this.needsDraw = true; | ||
60 | } | ||
61 | } | ||
62 | }, | ||
63 | |||
64 | _height :{ value: 0 }, | ||
65 | height: { | ||
66 | get:function() { | ||
67 | return this._height; | ||
68 | }, | ||
69 | set: function(val) { | ||
70 | if(this._height !== val) { | ||
71 | this._height = val; | ||
72 | this.needsDraw = true; | ||
73 | } | ||
50 | } | 74 | } |
51 | }, | 75 | }, |
52 | 76 | ||
@@ -78,6 +102,10 @@ exports.BindingView = Montage.create(Component, { | |||
78 | value: null | 102 | value: null |
79 | }, | 103 | }, |
80 | 104 | ||
105 | startConnector: { | ||
106 | value: null | ||
107 | }, | ||
108 | |||
81 | //Public Objects | 109 | //Public Objects |
82 | hudRepeater: { value: null }, | 110 | hudRepeater: { value: null }, |
83 | 111 | ||
@@ -103,7 +131,6 @@ exports.BindingView = Montage.create(Component, { | |||
103 | this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { | 131 | this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { |
104 | this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) | 132 | this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) |
105 | }.bind(this)); | 133 | }.bind(this)); |
106 | console.log("components:",this.componentsList); | ||
107 | //Go through the loop and find every interacted object by bindings | 134 | //Go through the loop and find every interacted object by bindings |
108 | arrBindings.forEach(function(obj) { | 135 | arrBindings.forEach(function(obj) { |
109 | if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { | 136 | if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { |
@@ -119,7 +146,6 @@ exports.BindingView = Montage.create(Component, { | |||
119 | for(var key in this.componentsList){ | 146 | for(var key in this.componentsList){ |
120 | this.bindables.push(this.componentsList[key]); | 147 | this.bindables.push(this.componentsList[key]); |
121 | } | 148 | } |
122 | console.log(this.bindables); | ||
123 | // Get Bindings that exist; | 149 | // Get Bindings that exist; |
124 | 150 | ||
125 | 151 | ||
@@ -178,23 +204,39 @@ 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 | |||
192 | } | 223 | } |
224 | |||
225 | if(this._isDrawingConnection) { | ||
226 | this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); | ||
227 | } | ||
228 | |||
193 | } else { | 229 | } else { |
194 | this.bindables = []; | 230 | this.bindables = []; |
195 | this.clearCanvas(); | 231 | this.clearCanvas(); |
196 | } | 232 | } |
197 | 233 | ||
234 | if(this.mouseOverHud && !this._isDrawingConnection) { | ||
235 | if(!this.element.classList.contains("mousedOverHud")) { this.element.classList.add("mousedOverHud"); } | ||
236 | } else { | ||
237 | if(this.element.classList.contains("mousedOverHud")) { this.element.classList.remove("mousedOverHud"); } | ||
238 | } | ||
239 | |||
198 | } | 240 | } |
199 | }, | 241 | }, |
200 | 242 | ||
@@ -205,12 +247,11 @@ exports.BindingView = Montage.create(Component, { | |||
205 | }, | 247 | }, |
206 | 248 | ||
207 | drawLine: { | 249 | drawLine: { |
208 | value: function(fromX,fromY,toX,toY, color) { | 250 | value: function(fromX,fromY,toX,toY, color, width) { |
209 | this._context.lineWidth = 1; // Set Line Thickness | 251 | if(width === null) width = 1; |
210 | if (color === null) { | 252 | if (color === null) color = "#CCC"; |
211 | this._context.strokeStyle = "#CCCCCC"; | 253 | this._context.lineWidth = width; // Set Line Thickness |
212 | } | 254 | this._context.strokeStyle = color; // Set Color |
213 | |||
214 | this._context.beginPath(); // Start Drawing Line | 255 | this._context.beginPath(); // Start Drawing Line |
215 | this._context.moveTo(fromX, fromY); | 256 | this._context.moveTo(fromX, fromY); |
216 | this._context.lineTo(toX, toY); | 257 | this._context.lineTo(toX, toY); |
@@ -244,11 +285,50 @@ exports.BindingView = Montage.create(Component, { | |||
244 | value: {x: 0, y:0} | 285 | value: {x: 0, y:0} |
245 | }, | 286 | }, |
246 | 287 | ||
288 | objectsTray: { | ||
289 | value:null | ||
290 | }, | ||
291 | |||
292 | |||
293 | // When mouse pointer is on a hud this value will be set to true | ||
294 | _mouseOverHud: { value: false }, | ||
295 | mouseOverHud: { | ||
296 | get: function() { | ||
297 | return this._mouseOverHud; | ||
298 | }, | ||
299 | set: function(val) { | ||
300 | if(this._mouseOverHud !== val) { | ||
301 | this._mouseOverHud = val; | ||
302 | this.needsDraw = true; | ||
303 | } | ||
304 | } | ||
305 | }, | ||
306 | |||
307 | |||
308 | |||
247 | handleMousemove: { | 309 | handleMousemove: { |
248 | value: function(e) { | 310 | value: function(e) { |
311 | var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); | ||
312 | var overHud = false; | ||
313 | this.hudRepeater.childComponents.forEach(function(obj) { | ||
314 | if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) { | ||
315 | if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) { | ||
316 | overHud = true; | ||
317 | } | ||
318 | } | ||
319 | }.bind(this)); | ||
320 | if(typeof (this.objectsTray.element) !== "undefined") { | ||
321 | if (this.objectsTray.element.offsetLeft < mousePoint.x && (this.objectsTray.element.offsetLeft + this.objectsTray.element.offsetWidth) > mousePoint.x ) { | ||
322 | //console.log(this.objectsTray.element.offsetTop, (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) ); | ||
323 | if(this.objectsTray.element.parentElement.offsetTop < mousePoint.y && (this.objectsTray.element.parentElement.offsetTop + this.objectsTray.element.offsetHeight) > mousePoint.y) { | ||
324 | overHud = true; | ||
325 | } | ||
326 | } | ||
327 | } | ||
328 | this.mouseOverHud = overHud; | ||
329 | |||
249 | if(this._isDrawingConnection) { | 330 | if(this._isDrawingConnection) { |
250 | this._currentMousePosition.x = e.clientX; | 331 | this._currentMousePosition = mousePoint; |
251 | this._currentMousePosition.y = e.clientY; | ||
252 | this.needsDraw = true; | 332 | this.needsDraw = true; |
253 | } | 333 | } |
254 | 334 | ||
@@ -256,22 +336,28 @@ exports.BindingView = Montage.create(Component, { | |||
256 | }, | 336 | }, |
257 | 337 | ||
258 | handleMouseup: { | 338 | handleMouseup: { |
259 | value: function() { | 339 | value: function(e) { |
260 | this.element.removeEventListener("mousemove", this); | 340 | window.removeEventListener("mouseup", this); |
261 | this.element.removeEventListener("mouseup", this); | 341 | // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); |
342 | // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); | ||