diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-view.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 189 |
1 files changed, 72 insertions, 117 deletions
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index 8c201ba1..aa690ee6 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -13,42 +13,15 @@ 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 | _canvas: { value:null }, | ||
17 | _context : { value: null }, | ||
18 | _targetedElement: {value: null}, | ||
19 | componentsList: { value: {} }, | ||
16 | 20 | ||
17 | hudRepeater: { | 21 | hudRepeater: { value: null }, |
18 | value: null | ||
19 | }, | ||
20 | _selectedComponent: { | ||
21 | value: null | ||
22 | }, | ||
23 | |||
24 | //Move variables | ||
25 | _translateX : { | ||
26 | value: 0 | ||
27 | }, | ||
28 | |||
29 | _translateY: { | ||
30 | value: 0 | ||
31 | }, | ||
32 | |||
33 | translateX : { | ||
34 | get: function() { | ||
35 | return this._translateX; | ||
36 | }, | ||
37 | set: function(val) { | ||
38 | this._translateX = val; | ||
39 | } | ||
40 | }, | ||
41 | |||
42 | translateY: { | ||
43 | get: function() { | ||
44 | return this._translateY; | ||
45 | }, | ||
46 | set: function(val) { | ||
47 | this._translateY = val; | ||
48 | } | ||
49 | }, | ||
50 | 22 | ||
51 | _width :{ value: 0 }, | 23 | //Public Properties |
24 | _width :{ value: 0 }, | ||
52 | width: { | 25 | width: { |
53 | get:function() { | 26 | get:function() { |
54 | return this._width; | 27 | return this._width; |
@@ -74,16 +47,6 @@ exports.BindingView = Montage.create(Component, { | |||
74 | } | 47 | } |
75 | }, | 48 | }, |
76 | 49 | ||
77 | validateOverHud: { | ||
78 | value: function() { | ||
79 | |||
80 | } | ||
81 | }, | ||
82 | |||
83 | componentsList: { | ||
84 | value: {} | ||
85 | }, | ||
86 | |||
87 | _connectionElementStart: { value: null }, | 50 | _connectionElementStart: { value: null }, |
88 | connectionElementStart: { | 51 | connectionElementStart: { |
89 | get: function() { | 52 | get: function() { |
@@ -124,92 +87,53 @@ exports.BindingView = Montage.create(Component, { | |||
124 | } | 87 | } |
125 | }, | 88 | }, |
126 | 89 | ||
127 | _bindables: { | 90 | _boundComponents: { value: [] }, |
128 | value: [] | 91 | boundComponents: { |
129 | }, | 92 | get: function() { |
130 | 93 | return this._boundComponents; | |
131 | _nonVisualComponents: { | 94 | }, |
132 | value:[] | 95 | set: function(val) { |
133 | }, | 96 | this._boundComponents = val; |
134 | 97 | } | |
135 | _bindingViewCanvas: { | ||
136 | value:null | ||
137 | }, | ||
138 | _canvas: { | ||
139 | value:null | ||
140 | }, | ||
141 | _context : { | ||
142 | value: null | ||
143 | }, | ||
144 | |||
145 | startConnector: { | ||
146 | value: null | ||
147 | }, | 98 | }, |
148 | 99 | ||
149 | //Public Objects | 100 | _selectedComponent: { value: null }, |
150 | hudRepeater: { value: null }, | ||
151 | |||
152 | |||
153 | //Public Properties | ||
154 | selectedComponent: { | 101 | selectedComponent: { |
155 | get: function() { | 102 | get: function() { |
156 | return this._selectedComponent; | 103 | return this._selectedComponent; |
157 | }, | 104 | }, |
158 | set: function(val) { | 105 | set: function(val) { |
106 | this.boundComponents = []; | ||
159 | if(this._selectedComponent !== val) { | 107 | if(this._selectedComponent !== val) { |
160 | this.bindables = []; | ||
161 | this.clearCanvas(); | 108 | this.clearCanvas(); |
162 | this._selectedComponent = val; | 109 | this._selectedComponent = val; |
163 | if(this._selectedComponent !== null) { | 110 | if(this._selectedComponent !== null) { |
164 | this.application.ninja.objectsController.currentObject = this.selectedComponent; | 111 | this.application.ninja.objectsController.currentObject = this.selectedComponent; |
165 | var arrBindings = this.application.ninja.objectsController.currentObjectBindings; | 112 | this.boundComponents.push(this.selectedComponent); |
166 | var arrProperties = this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true); | ||
167 | |||
168 | //Add the first component which is the selected one to have a hud | ||
169 | |||
170 | this.componentsList[this.selectedComponent.identifier] = {"component": this.selectedComponent, properties:[] }; | ||
171 | this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) { | ||
172 | this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj}) | ||
173 | }.bind(this)); | ||
174 | //Go through the loop and find every interacted object by bindings | ||
175 | arrBindings.forEach(function(obj) { | ||
176 | if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") { | ||
177 | var componentListItem = {} | ||
178 | componentListItem.component = obj.boundObject; | ||
179 | componentListItem.properties = []; | ||
180 | this.application.ninja.objectsController.getPropertiesFromObject(obj.boundObject, true).forEach(function(obj) { | ||
181 | componentListItem.properties.push({"title":obj}) | ||
182 | }.bind(this)); | ||
183 | this.componentsList[obj.boundObject.identifier] = componentListItem; | ||
184 | } | ||
185 | }.bind(this)); | ||
186 | for(var key in this.componentsList){ | ||
187 | this.bindables.push(this.componentsList[key]); | ||
188 | } | ||
189 | // Get Bindings that exist; | ||
190 | |||
191 | |||
192 | //Get Properties of Elements in bindings; | ||
193 | } | 113 | } |
194 | this.needsDraw = true; | 114 | this.needsDraw = true; |
195 | } | 115 | } |
196 | } | 116 | } |
197 | }, | 117 | }, |
198 | 118 | ||
199 | handleResizeMove: { | 119 | handleShowBinding: { |
200 | value: function(e) { | 120 | value: function(bindingMeta) { |
201 | console.log(e); | 121 | if(bindingMeta === null) return; |
122 | for(var j=0; j< bindingMeta.length; j++) { | ||
123 | var bindingExists = false; | ||
124 | for(var i =0; i < this.boundComponents; i++) { | ||
125 | if(this.boundComponents[i] === bindingMeta[j].boundObject) { | ||
126 | bindingExists = true; | ||
127 | } | ||
128 | } | ||
129 | if(!bindingExists) { | ||
130 | //this.boundComponents.push(bindingMeta[j].boundObject); | ||
131 | } | ||
132 | } | ||
202 | } | 133 | } |
203 | }, | 134 | }, |
204 | 135 | ||
205 | bindables: { | 136 | _nonVisualComponents: { value:[] }, |
206 | get: function() { | ||
207 | return this._bindables; | ||
208 | }, | ||
209 | set: function(val) { | ||
210 | this._bindables = val; | ||
211 | } | ||
212 | }, | ||
213 | nonVisualComponents: { | 137 | nonVisualComponents: { |
214 | get: function() { | 138 | get: function() { |
215 | return this._nonVisualComponents; | 139 | return this._nonVisualComponents; |
@@ -218,6 +142,7 @@ exports.BindingView = Montage.create(Component, { | |||
218 | this._nonVisualComponents = val; | 142 | this._nonVisualComponents = val; |
219 | } | 143 | } |
220 | }, | 144 | }, |
145 | |||
221 | bindingViewCanvas: { | 146 | bindingViewCanvas: { |
222 | get: function() { | 147 | get: function() { |
223 | return this._bindingViewCanvas; | 148 | return this._bindingViewCanvas; |
@@ -258,17 +183,14 @@ exports.BindingView = Montage.create(Component, { | |||
258 | this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; | 183 | this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; |
259 | this.clearCanvas(); | 184 | this.clearCanvas(); |
260 | for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { | 185 | for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { |
261 | this.drawLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3); | 186 | this.drawLine(this.hudRepeater.objects[i].element.offsetLeft,this.hudRepeater.objects[i].element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3); |
262 | |||
263 | } | 187 | } |
264 | |||
265 | if(this._isDrawingConnection) { | 188 | if(this._isDrawingConnection) { |
266 | if (this.hudRepeater.childComponents.length > 1) { | 189 | if (this.hudRepeater.childComponents.length > 1) { |
267 | //this.object |