diff options
author | Armen Kesablyan | 2012-06-02 20:54:30 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-02 20:54:30 -0700 |
commit | 7655e32da5bcdf7b205afc1908c9b7bcc661b0d4 (patch) | |
tree | c5192853a61480a7e2957349a3d5b5021ff0036e /js | |
parent | 10d97af27fca224752ad04551ca5c41982222d1f (diff) | |
download | ninja-7655e32da5bcdf7b205afc1908c9b7bcc661b0d4.tar.gz |
binding canvas
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js')
6 files changed, 92 insertions, 15 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, | |||
14 | exports.BindingHudOption = Montage.create(Component, { | 14 | exports.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 | }, | 150 | }, |
123 |