aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-02 20:54:30 -0700
committerArmen Kesablyan2012-06-02 20:54:30 -0700
commit7655e32da5bcdf7b205afc1908c9b7bcc661b0d4 (patch)
treec5192853a61480a7e2957349a3d5b5021ff0036e /js/stage
parent10d97af27fca224752ad04551ca5c41982222d1f (diff)
downloadninja-7655e32da5bcdf7b205afc1908c9b7bcc661b0d4.tar.gz
binding canvas
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js23
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css9
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html3
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.css7
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js40
5 files changed, 72 insertions, 10 deletions
diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
index 58f4175e..07cbff11 100755
--- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
+++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
@@ -14,5 +14,28 @@ var Montage = require("montage/core/core").Montage,
14exports.BindingHudOption = Montage.create(Component, { 14exports.BindingHudOption = Montage.create(Component, {
15 title: { 15 title: {
16 value: "value" 16 value: "value"
17 },
18 _bindings: {
19 value: []
20 },
21
22 bindings: {
23 get: function() {
24 return this._bindings;
25 },
26 set: function(val) {
27 this._bindings = val;
28 this.needsDraw = true;
29 }
30 },
31
32 draw: {
33 value:function() {
34 if(this.bindings.length > 0) {
35 this.element.classList.add("bound");
36 } else {
37 this.element.classList.remove("bound");
38 }
39 }
17 } 40 }
18}); \ No newline at end of file 41}); \ No newline at end of file
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 626706ed..34f14a5a 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
@@ -28,17 +28,20 @@
28 28
29.bindingHud .hudRepetition { 29.bindingHud .hudRepetition {
30 background: #555; 30 background: #555;
31 padding:1px 9px;
32 line-height:16px; 31 line-height:16px;
33 border:1px solid #000; 32 border:1px solid #000;
34 box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; 33 box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;
35 min-width: 65px; 34 min-width: 80px;
36} 35}
37 36
38.bindingHud .hudOption { 37.bindingHud .hudOption {
39 position:relative; 38 position:relative;
40 border-bottom:1px solid #505050; 39 border-bottom:1px solid #505050;
41 line-height:16px; 40 line-height:16px;
41 padding:1px 9px;
42}
43.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble {
44 background-color:#44F;
42} 45}
43 46
44.bindingHud .hudOption:last-child { 47.bindingHud .hudOption:last-child {
@@ -47,7 +50,7 @@
47 50
48.bindingHud .hudOption .connectorBubble { 51.bindingHud .hudOption .connectorBubble {
49 position: absolute; 52 position: absolute;
50 right: -20px; 53 right: -11px;
51 top: 2px; 54 top: 2px;
52 background: #555; 55 background: #555;
53 border: 1px solid black; 56 border: 1px solid black;
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 1f3b181c..5e37cfc9 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
@@ -32,7 +32,8 @@
32 "element": {"#" : "hudOption"} 32 "element": {"#" : "hudOption"}
33 }, 33 },
34 "bindings": { 34 "bindings": {
35 "title": {"<-": "@repeater.objectAtCurrentIteration.title"} 35 "title": {"<-": "@repeater.objectAtCurrentIteration.title"},
36 "bindings": {"<-": "@repeater.objectAtCurrentIteration.bindings"}
36 } 37 }
37 }, 38 },
38 "Title": { 39 "Title": {
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index 4fa7e10c..41514d7b 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -8,5 +8,12 @@
8 position: absolute; 8 position: absolute;
9 width:100%; 9 width:100%;
10 height:100%; 10 height:100%;
11 z-index: 1;
12}
13
14.bindingViewCanvas {
15 width:100%;
16 height:100%;
17 position:absolute;
11 z-index: 2; 18 z-index: 2;
12} \ No newline at end of file 19} \ No newline at end of file
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 90e6a5e3..d17735b2 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -26,6 +26,12 @@ exports.BindingView = Montage.create(Component, {
26 _bindingViewCanvas: { 26 _bindingViewCanvas: {
27 value:null 27 value:null
28 }, 28 },
29 _canvas: {
30 value:null
31 },
32 _context : {
33 value: null
34 },
29 35
30 //Public Objects 36 //Public Objects
31 hudRepeater: { value: null }, 37 hudRepeater: { value: null },
@@ -73,7 +79,9 @@ exports.BindingView = Montage.create(Component, {
73 //Montage Draw Cycle 79 //Montage Draw Cycle
74 prepareForDraw: { 80 prepareForDraw: {
75 value: function() { 81 value: function() {
76 82 this._canvas = this.application.ninja.stage.drawingCanvas;
83 this._context = this._canvas.getContext('2d');
84 this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
77 } 85 }
78 }, 86 },
79 87
@@ -87,8 +95,9 @@ exports.BindingView = Montage.create(Component, {
87 {"title":"Value", 95 {"title":"Value",
88 "bindings": [ 96 "bindings": [
89 {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} 97 {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"}
90 ]}, 98 ]
91 {"title": "Width"} 99 },
100 {"title": "Width", "bindings": []}
92 ], 101 ],
93 "x": 20, 102 "x": 20,
94 "y": 20 103 "y": 20
@@ -96,28 +105,47 @@ exports.BindingView = Montage.create(Component, {
96 { 105 {
97 "title": "Checkbox1", 106 "title": "Checkbox1",
98 "properties": [ 107 "properties": [
99 {"title":"Group"}, 108 {"title":"Group" , "bindings": []},
100 {"title": "Value"} 109 {"title":"Value",
110 "bindings": [
111 {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"}
112 ]
113 }
101 ], 114 ],
102 "x": 120, 115 "x": 120,
103 "y": 120 116 "y": 120
104 } 117 }
105 ]; 118 ];
119 this.drawBlueLine(100,100,200,200)
120
106 } else { 121 } else {
107 this.bindables = []; 122 this.bindables = [];
108 } 123 }
124
109 } 125 }
110 }, 126 },
111 127
112 drawBlueLine: { 128 drawBlueLine: {
113 value: function(fromX,fromY,toX,toY) { 129 value: function(fromX,fromY,toX,toY) {
130 this._context.lineWidth = 4; // Set Line Thickness
131 this._context.strokeStyle = "#00F"
114 132
133 this._context.beginPath(); // Start Drawing Line
134 this._context.moveTo(fromX, fromY);
135 this._context.lineTo(toX, toY);
136 this._context.stroke();
115 } 137 }
116 }, 138 },
117 139
118 handleMousedown: { 140 handleMousedown: {
119 value: function(event) { 141 value: function(event) {
120 debugger; 142
143 }
144 },
145
146 handleScroll: {
147 value: function() {
148 this.needsDraw = true;
121 } 149 }
122 },