aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.js12
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js68
-rwxr-xr-xjs/stage/layout.js17
-rwxr-xr-xjs/stage/stage-deps.js5
-rwxr-xr-xjs/stage/stage.reel/stage.css3
-rwxr-xr-xjs/stage/stage.reel/stage.js265
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
18exports.Layout = Montage.create(Component, { 18exports.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
16exports.StageDeps = Montage.create(Component, { 16exports.StageDeps = Montage.create(Component, {
17 17
18 stage: {
19 value: null,
20 serializable: true
21 },
22
18 viewUtils: { 23 viewUtils: {
19 value: viewUtils