diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-view.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 136 |
1 files changed, 109 insertions, 27 deletions
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index a0ca0c4f..8ffc45c1 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -13,7 +13,7 @@ var Montage = require("montage/core/core").Montage, | |||
13 | 13 | ||
14 | exports.BindingView = Montage.create(Component, { | 14 | exports.BindingView = Montage.create(Component, { |
15 | //private Properties | 15 | //private Properties |
16 | _selectedElement: { | 16 | _selectedComponent: { |
17 | value: null | 17 | value: null |
18 | }, | 18 | }, |
19 | _bindables: { | 19 | _bindables: { |
@@ -23,17 +23,37 @@ 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 | ||
29 | 39 | ||
30 | //Public Properties | 40 | //Public Properties |
31 | selectedElement: { | 41 | selectedComponent: { |
32 | get: function() { | 42 | get: function() { |
33 | return this._selectedElement; | 43 | return this._selectedComponent; |
34 | }, | 44 | }, |
35 | set: function(val) { | 45 | set: function(val) { |
36 | this._selectedElement = val; | 46 | this._selectedComponent = val; |
47 | this.application.ninja.objectsController.currentObject = this.selectedComponent; | ||
48 | var arrBindings = this.application.ninja.objectsController.currentObjectBindings; | ||
49 | arrBindings.forEach(function(obj) { | ||
50 | |||
51 | }.bind(this)); | ||
52 | // Get Bindings that exist; | ||
53 | |||
54 | |||
55 | //Get Properties of Elements in bindings; | ||
56 | |||
37 | this.needsDraw = true; | 57 | this.needsDraw = true; |
38 | } | 58 | } |
39 | }, | 59 | }, |
@@ -53,42 +73,104 @@ exports.BindingView = Montage.create(Component, { | |||
53 | this._nonVisualComponents = val; | 73 | this._nonVisualComponents = val; |
54 | } | 74 | } |
55 | }, | 75 | }, |
76 | bindingViewCanvas: { | ||
77 | get: function() { | ||
78 | return this._bindingViewCanvas; | ||
79 | }, | ||
80 | set: function(val) { | ||
81 | this._bindingViewCanvas = val; | ||
82 | } | ||
83 | }, | ||
56 | 84 | ||
57 | //Methods | 85 | //Methods |
86 | canvas: { | ||
87 | get: function() { | ||
88 | return this._canvas; | ||
89 | }, | ||
90 | set: function(val) { | ||
91 | this._canvas = val; | ||
92 | } | ||
93 | }, | ||
58 | 94 | ||
59 | //Montage Draw Cycle | 95 | //Montage Draw Cycle |
60 | prepareForDraw: { | 96 | prepareForDraw: { |
61 | value: function() { | 97 | value: function() { |
62 | 98 | //this._canvas = this.application.ninja.stage.drawingCanvas; | |
99 | this._context = this._canvas.getContext('2d'); | ||
100 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); | ||
63 | } | 101 | } |
64 | }, | 102 | }, |
65 | 103 | ||
66 | draw: { | 104 | draw: { |
67 | value: function() { | 105 | value: function() { |
68 | if(this.selectedElement !== null) { | 106 | if(this.selectedComponent !== null) { |
69 | this.bindables = [ | 107 | // this.bindables = [ |
70 | { | 108 | // { |
71 | "title": "Input1", | 109 | // "title": "Input1", |
72 | "properties": [ | 110 | // "properties": [ |
73 | {"title":"Value"}, | 111 | // {"title":"Value", |
74 | {"title": "Width"} | 112 | // "bindings": [ |
75 | ], | 113 | // {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"} |
76 | "x": 20, | 114 | // ] |
77 | "y": 20 | 115 | // }, |
78 | }, | 116 | // {"title": "Width", "bindings": []} |
79 | { | 117 | // ], |
80 | "title": "Checkbox1", | 118 | // "x": 20, |
81 | "properties": [ | 119 | // "y": 20 |
82 | {"title":"Group"}, | 120 | // }, |
83 | {"title": "Value"} | 121 | // { |
84 | ], | 122 | // "title": "Checkbox1", |
85 | "x": 120, | 123 | // "properties": [ |
86 | "y": 120 | 124 | // {"title":"Group" , "bindings": []}, |
87 | } | 125 | // {"title":"Value", |
88 | ]; | 126 | // "bindings": [ |
127 | // {"direction": "->", "boundObject":"Input1", "boundProperty": "Value"} | ||
128 | // ] | ||
129 | // } | ||
130 | // ], | ||
131 | // "x": 120, | ||
132 | // "y": 120 | ||
133 | // } | ||
134 | // ]; | ||
135 | this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; | ||
136 | this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; | ||
137 | this.clearCanvas(); | ||
138 | this.drawBlueLine(110,53,210,173); | ||
139 | |||
89 | } else { | 140 | } else { |
90 | this.bindables = []; | 141 | //this.bindables = []; |
91 | } | 142 | } |
143 | |||
144 | } | ||
145 | }, | ||
146 | |||
147 | drawBlueLine: { | ||
148 | value: function(fromX,fromY,toX,toY) { | ||
149 | this._context.lineWidth = 4; // Set Line Thickness | ||
150 | this._context.strokeStyle = "#5e9eff" | ||
151 | |||
152 | this._context.beginPath(); // Start Drawing Line | ||
153 | this._context.moveTo(fromX, fromY); | ||
154 | this._context.lineTo(toX, toY); | ||
155 | this._context.stroke(); | ||
156 | } | ||
157 | }, | ||
158 | |||
159 | clearCanvas: { | ||
160 | value: function() { | ||
161 | this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight); | ||
162 | } | ||
163 | }, | ||
164 | |||
165 | handleMousedown: { | ||
166 | value: function(event) { | ||
167 | |||
168 | } | ||
169 | }, | ||
170 | |||
171 | handleScroll: { | ||
172 | value: function() { | ||
173 | this.needsDraw = true; | ||
92 | } | 174 | } |
93 | }, | 175 | }, |
94 | 176 | ||