diff options
author | Eric Guzman | 2012-06-19 01:20:36 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-19 01:20:36 -0700 |
commit | 2ef72cdf0e59fb3623a2c13251ac707522f3dc5a (patch) | |
tree | f69f4e3de7e4441311ef2b38770e0ce26067aac4 /js/stage | |
parent | 5260d3dfd99d79924c4aaa3ab798e90c7d328d7d (diff) | |
parent | 1007cbf983ad0f2460a4122a492a96023fdb4439 (diff) | |
download | ninja-2ef72cdf0e59fb3623a2c13251ac707522f3dc5a.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Conflicts:
js/stage/binding-view.reel/binding-view.js
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 12 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 68 | ||||
-rwxr-xr-x | js/stage/layout.js | 17 | ||||
-rwxr-xr-x | js/stage/stage-deps.js | 5 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.css | 3 | ||||
-rwxr-xr-x | js/stage/stage.reel/stage.js | 265 |
6 files changed, 316 insertions, 54 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 799c5866..a8c3ae68 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | |||
@@ -20,6 +20,17 @@ exports.BindingHud = Montage.create(Component, { | |||
20 | value: null | 20 | value: null |
21 | }, | 21 | }, |
22 | 22 | ||
23 | _userComponent: { value: null }, | ||
24 | userComponent: { | ||
25 | get: function() { | ||
26 | return this._userComponent; | ||
27 | }, | ||
28 | set: function(val) { | ||
29 | this._userComponent = val; | ||
30 | } | ||
31 | }, | ||
32 | |||
33 | |||
23 | bindingArgs: { | 34 | bindingArgs: { |
24 | get: function() { | 35 | get: function() { |
25 | return this._bindingArgs; | 36 | return this._bindingArgs; |
@@ -27,6 +38,7 @@ exports.BindingHud = Montage.create(Component, { | |||
27 | set: function(val) { | 38 | set: function(val) { |
28 | if (typeof(val) !== "undefined") { | 39 | if (typeof(val) !== "undefined") { |
29 | this._bindingArgs = val; | 40 | this._bindingArgs = val; |
41 | this.userComponent = this.bindingArgs.component; | ||
30 | this.title = this.bindingArgs.component.identifier; | 42 | this.title = this.bindingArgs.component.identifier; |
31 | this.x = this._bindingArgs.component.element.offsetLeft; | 43 | this.x = this._bindingArgs.component.element.offsetLeft; |
32 | this.y = this._bindingArgs.component.element.offsetTop; | 44 | this.y = this._bindingArgs.component.element.offsetTop; |
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index c1e0fcbb..8c201ba1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -84,6 +84,46 @@ exports.BindingView = Montage.create(Component, { | |||
84 | value: {} | 84 | value: {} |
85 | }, | 85 | }, |
86 | 86 | ||
87 | _connectionElementStart: { value: null }, | ||
88 | connectionElementStart: { | ||
89 | get: function() { | ||
90 | return this._connectionElementStart; | ||
91 | }, | ||
92 | set: function(val) { | ||
93 | this._connectionElementStart = val; | ||
94 | } | ||
95 | }, | ||
96 | |||
97 | _connectionElementEnd: { value: null }, | ||
98 | connectionElementEnd: { | ||
99 | get: function() { | ||
100 | return this._connectionElementEnd; | ||
101 | }, | ||
102 | set: function(val) { | ||
103 | this._connectionElementEnd = val; | ||
104 | } | ||
105 | }, | ||
106 | |||
107 | _connectionPropertyStart: { value: null }, | ||
108 | connectionPropertyStart: { | ||
109 | get: function() { | ||
110 | return this._connectionPropertyStart; | ||
111 | }, | ||
112 | set: function(val) { | ||
113 | this._connectionPropertyStart = val; | ||
114 | } | ||
115 | }, | ||
116 | |||
117 | _connectionPropertyEnd: { value: null }, | ||
118 | connectionPropertyEnd: { | ||
119 | get: function() { | ||
120 | return this._connectionPropertyEnd; | ||
121 | }, | ||
122 | set: function(val) { | ||
123 | this._connectionPropertyEnd = val; | ||
124 | } | ||
125 | }, | ||
126 | |||
87 | _bindables: { | 127 | _bindables: { |
88 | value: [] | 128 | value: [] |
89 | }, | 129 | }, |
@@ -223,6 +263,9 @@ exports.BindingView = Montage.create(Component, { | |||
223 | } | 263 | } |
224 | 264 | ||
225 | if(this._isDrawingConnection) { | 265 | if(this._isDrawingConnection) { |
266 | if (this.hudRepeater.childComponents.length > 1) { | ||
267 | //this.object | ||
268 | } | ||
226 | this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); | 269 | this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4); |
227 | } | 270 | } |
228 | 271 | ||
@@ -335,16 +378,27 @@ exports.BindingView = Montage.create(Component, { | |||
335 | } | 378 | } |
336 | }, | 379 | }, |
337 | 380 | ||
381 | |||
338 | handleMouseup: { | 382 | handleMouseup: { |
339 | value: function(e) { | 383 | value: function(e) { |
340 | window.removeEventListener("mouseup", this); | 384 | window.removeEventListener("mouseup", this); |
341 | // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); | ||
342 | // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); | ||
343 | this.element.style.zIndex = "12"; | 385 | this.element.style.zIndex = "12"; |
344 | var nodeEl = document.elementFromPoint(e.pageX, e.pageY); | 386 | var nodeEl = document.elementFromPoint(e.pageX, e.pageY); |
345 | //alert(nodeEl.parentElement.controller.title); | ||
346 | debugger; | ||
347 | this.element.style.zIndex = null; | 387 | this.element.style.zIndex = null; |
388 | if(nodeEl.classList.contains("connectorBubble")) { | ||
389 | // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); | ||
390 | // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); | ||
391 | //debugger; | ||
392 | this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent; | ||
393 | this.connectionPropertyEnd = nodeEl.parentElement.controller.title; | ||
394 | //console.log(this.connectionElementStart, this.connectionPropertyStart, this.connectionElementEnd, this.connectionPropertyEnd); | ||
395 | this.application.ninja.objectsController.addBinding({ | ||
396 | sourceObject: this.connectionElementStart, | ||
397 | sourceObjectPropertyPath: this.connectionPropertyStart, | ||
398 | boundObject: this.connectionElementEnd, | ||
399 | boundObjectPropertyPath: this.connectionPropertyEnd | ||
400 | }); | ||
401 | } | ||
348 | this._isDrawingConnection = false; | 402 | this._isDrawingConnection = false; |
349 | this.needsDraw = true; | 403 | this.needsDraw = true; |
350 | } | 404 | } |
@@ -354,10 +408,12 @@ exports.BindingView = Montage.create(Component, { | |||
354 | value: function(e) { | 408 | value: function(e) { |
355 | // We are looking for a mouse down on an option to start the connection visual | 409 | // We are looking for a mouse down on an option to start the connection visual |
356 | if(e._event.target.classList.contains("connectorBubble")) { | 410 | if(e._event.target.classList.contains("connectorBubble")) { |
357 | //NOTE: Test Code Please Clean Up | 411 | //console.log(e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent); |
358 | //alert(event._event.target.controller.title); | 412 | this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent; |
413 | this.connectionPropertyStart = e._event.target.parentElement.controller.title; | ||
359 | this._isDrawingConnection = true; | 414 | this._isDrawingConnection = true; |
360 | this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); | 415 | this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); |
416 | |||
361 | window.addEventListener("mouseup", this); | 417 | window.addEventListener("mouseup", this); |
362 | } | 418 | } |
363 | } | 419 | } |
diff --git a/js/stage/layout.js b/js/stage/layout.js index 71296405..28484b71 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js | |||
@@ -17,7 +17,16 @@ var Montage = require("montage/core/core").Montage, | |||
17 | 17 | ||
18 | exports.Layout = Montage.create(Component, { | 18 | exports.Layout = Montage.create(Component, { |
19 | 19 | ||
20 | canvas: { value: null }, | 20 | canvas: { |
21 | value: null, | ||
22 | serializable: true | ||
23 | }, | ||
24 | |||
25 | stage: { | ||
26 | value: null, | ||
27 | serializable: true | ||
28 | }, | ||
29 | |||
21 | ctx: { value: null }, | 30 | ctx: { value: null }, |
22 | 31 | ||
23 | drawFillColor: { value: 'rgba(255,255,255,1)' }, | 32 | drawFillColor: { value: 'rgba(255,255,255,1)' }, |
@@ -102,11 +111,11 @@ exports.Layout = Montage.create(Component, { | |||
102 | // Make an array copy of the line node list which is not an array like object | 111 | // Make an array copy of the line node list which is not an array like object |
103 | this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); | 112 | this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true); |
104 | // Index of the current container | 113 | // Index of the current container |
105 | containerIndex = this.domTree.indexOf(this.application.ninja.currentSelectedContainer); | 114 | containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer); |
106 | 115 | ||
107 | if(containerIndex < 0) { | 116 | if(containerIndex < 0) { |
108 | // Stage is the container. | 117 | // Stage is the container. |
109 | this.domTree = Array.prototype.slice.call(this.application.ninja.currentSelectedContainer.childNodes, 0); | 118 | this.domTree = Array.prototype.slice.call(this.currentDocument.model.domContainer.childNodes, 0); |
110 | } else { | 119 | } else { |
111 | // Child nodes of the container | 120 | // Child nodes of the container |
112 | this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); | 121 | this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0); |
@@ -204,7 +213,7 @@ exports.Layout = Montage.create(Component, { | |||
204 | bounds3D[j] = tmpPt; | 213 | bounds3D[j] = tmpPt; |
205 | } | 214 | } |
206 | 215 | ||
207 | if(item.uuid === this.application.ninja.currentSelectedContainer.uuid) { | 216 | if(item.uuid === this.currentDocument.model.domContainer.uuid) { |
208 | this.ctx.save(); | 217 | this.ctx.save(); |
209 | this.ctx.strokeStyle = "#C61F00"; | 218 | this.ctx.strokeStyle = "#C61F00"; |
210 | 219 | ||
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js index 762c2529..462f7ca5 100755 --- a/js/stage/stage-deps.js +++ b/js/stage/stage-deps.js | |||
@@ -15,6 +15,11 @@ var Montage = require("montage/core/core").Montage, | |||
15 | 15 | ||
16 | exports.StageDeps = Montage.create(Component, { | 16 | exports.StageDeps = Montage.create(Component, { |
17 | 17 | ||