diff options
Diffstat (limited to 'js/stage/binding-view.reel')
6 files changed, 103 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, | |||
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.html b/js/stage/binding-view.reel/binding-view.html index 39704e25..0f01e9ff 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html | |||
@@ -15,7 +15,8 @@ | |||
15 | "prototype": "js/stage/binding-view.reel", | 15 | "prototype": "js/stage/binding-view.reel", |
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "bindingView"}, | 17 | "element": {"#": "bindingView"}, |
18 | "hudRepeater": {"@": "hudRepeater"} | 18 | "hudRepeater": {"@": "hudRepeater"}, |
19 | "bindingViewCanvas": {"#": "bindingViewCanvas"} | ||
19 | } | 20 | } |
20 | }, | 21 | }, |
21 | "hudRepeater": { | 22 | "hudRepeater": { |
@@ -76,6 +77,7 @@ | |||
76 | 77 | ||
77 | </div> | 78 | </div> |
78 | </div> | 79 | </div> |
80 | <canvas data-montage-id="bindingViewCanvas" class="bindingViewCanvas"></canvas> | ||
79 | </section> | 81 | </section> |
80 | 82 | ||
81 | </body> | 83 | </body> |
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index a0ca0c4f..d17735b2 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -23,6 +23,16 @@ exports.BindingView = Montage.create(Component, { | |||
23 | value:[] | 23 | value:[] |
24 | }, | 24 | }, |
25 | 25 | ||
26 | _bindingViewCanvas: { | ||
27 | value:null | ||
28 | }, | ||
29 | _canvas: { | ||
30 | value:null | ||
31 | }, | ||
32 | _context : { | ||
33 | value: null | ||
34 | }, | ||
35 | |||
26 | //Public Objects | 36 | //Public Objects |
27 | hudRepeater: { value: null }, | 37 | hudRepeater: { value: null }, |
28 | 38 | ||
@@ -53,13 +63,25 @@ exports.BindingView = Montage.create(Component, { | |||
53 | this._nonVisualComponents = val; | 63 | this._nonVisualComponents = val; |
54 | } | 64 | } |
55 | }, | 65 | }, |
66 | bindingViewCanvas: { | ||
67 | get: function() { | ||
68 | return this._bindingViewCanvas; | ||
69 | }, | ||
70 | set: function(val) { | ||
71 | this._bindingViewCanvas = val; | ||
72 | } | ||
73 | }, | ||
56 | 74 | ||
57 | //Methods | 75 | //Methods |
58 | 76 | ||
77 | |||
78 | |||
59 | //Montage Draw Cycle | 79 | //Montage Draw Cycle |
60 | prepareForDraw: { | 80 | prepareForDraw: { |
61 | value: function() { | 81 | value: function() { |
62 | 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); | ||
63 | } | 85 | } |
64 | }, | 86 | }, |
65 | 87 | ||
@@ -70,8 +92,12 @@ exports.BindingView = Montage.create(Component, { | |||
70 | { | 92 | { |
71 | "title": "Input1", | 93 | "title": "Input1", |
72 | "properties": [ | 94 | "properties": [ |
73 | {"title":"Value"}, | 95 | {"title":"Value", |
74 | {"title": "Width"} | 96 | "bindings": [ |
97 | {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} | ||
98 | ] | ||
99 | }, | ||
100 | {"title": "Width", "bindings": []} | ||
75 | ], | 101 | ], |
76 | "x": 20, | 102 | "x": 20, |
77 | "y": 20 | 103 | "y": 20 |
@@ -79,16 +105,47 @@ exports.BindingView = Montage.create(Component, { | |||
79 | { | 105 | { |
80 | "title": "Checkbox1", | 106 | "title": "Checkbox1", |
81 | "properties": [ | 107 | "properties": [ |
82 | {"title":"Group"}, | 108 | {"title":"Group" , "bindings": []}, |
83 | {"title": "Value"} | 109 | {"title":"Value", |
110 | "bindings": [ | ||