aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-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.html4
-rwxr-xr-xjs/stage/binding-view.reel/binding-view.js67
-rw-r--r--js/tools/bindingTool.js26
7 files changed, 123 insertions, 16 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.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": [
111 {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"}