diff options
author | Valerio Virgillito | 2012-06-26 13:15:26 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-06-26 13:15:26 -0700 |
commit | 87a8b62f71bb72274c3dd1fa389e88c12d482ebb (patch) | |
tree | bf9f995e2972c0a61355f24e64231cdf0b2c86b5 /js/stage/binding-view.reel/binding-view.js | |
parent | 8821e662484aedb027e26a873883e6ca3fb55a51 (diff) | |
parent | a95bba25c3ba6e31784a452e9b94748cc870ba5d (diff) | |
download | ninja-87a8b62f71bb72274c3dd1fa389e88c12d482ebb.tar.gz |
Merge pull request #323 from dhg637/binding
Binding View - Binding Tool & Binding Panel
Diffstat (limited to 'js/stage/binding-view.reel/binding-view.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 440 |
1 files changed, 440 insertions, 0 deletions
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js new file mode 100755 index 00000000..1fc4d583 --- /dev/null +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -0,0 +1,440 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | /** | ||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage/core/core").Montage, | ||
12 | Component = require("montage/ui/component").Component; | ||
13 | |||
14 | exports.BindingView = Montage.create(Component, { | ||
15 | //private Properties | ||
16 | _canvas: { value:null }, | ||
17 | _context : { value: null }, | ||
18 | _targetedElement: {value: null}, | ||
19 | componentsList: { value: {} }, | ||
20 | |||
21 | hudRepeater: { value: null }, | ||
22 | |||
23 | //Public Properties | ||
24 | _width :{ value: 0 }, | ||
25 | width: { | ||
26 | get:function() { | ||
27 | return this._width; | ||
28 | }, | ||
29 | set: function(val) { | ||
30 | if(this._width !== val) { | ||
31 | this._width = val; | ||
32 | this.needsDraw = true; | ||
33 | } | ||
34 | } | ||
35 | }, | ||
36 | |||
37 | _height :{ value: 0 }, | ||
38 | height: { | ||
39 | get:function() { | ||
40 | return this._height; | ||
41 | }, | ||
42 | set: function(val) { | ||
43 | if(this._height !== val) { | ||
44 | this._height = val; | ||
45 | this.needsDraw = true; | ||
46 | } | ||
47 | } | ||
48 | }, | ||
49 | |||
50 | _connectionElementStart: { value: null }, | ||
51 | connectionElementStart: { | ||
52 | get: function() { | ||
53 | return this._connectionElementStart; | ||
54 | }, | ||
55 | set: function(val) { | ||
56 | this._connectionElementStart = val; | ||
57 | } | ||
58 | }, | ||
59 | |||
60 | _connectionElementEnd: { value: null }, | ||
61 | connectionElementEnd: { | ||
62 | get: function() { | ||
63 | return this._connectionElementEnd; | ||
64 | }, | ||
65 | set: function(val) { | ||
66 | this._connectionElementEnd = val; | ||
67 | } | ||
68 | }, | ||
69 | |||
70 | _connectionPropertyStart: { value: null }, | ||
71 | connectionPropertyStart: { | ||
72 | get: function() { | ||
73 | return this._connectionPropertyStart; | ||
74 | }, | ||
75 | set: function(val) { | ||
76 | this._connectionPropertyStart = val; | ||
77 | } | ||
78 | }, | ||
79 | |||
80 | _connectionPropertyEnd: { value: null }, | ||
81 | connectionPropertyEnd: { | ||
82 | get: function() { | ||
83 | return this._connectionPropertyEnd; | ||
84 | }, | ||
85 | set: function(val) { | ||
86 | this._connectionPropertyEnd = val; | ||
87 | } | ||
88 | }, | ||
89 | |||
90 | _boundComponents: { value: [] }, | ||
91 | boundComponents: { | ||
92 | get: function() { | ||
93 | return this._boundComponents; | ||
94 | }, | ||
95 | set: function(val) { | ||
96 | this._boundComponents = val; | ||
97 | } | ||
98 | }, | ||
99 | |||
100 | _selectedComponent: { value: null }, | ||
101 | selectedComponent: { | ||
102 | get: function() { | ||
103 | return this._selectedComponent; | ||
104 | }, | ||
105 | set: function(val) { | ||
106 | this.boundComponents = []; | ||
107 | if(this._selectedComponent !== val) { | ||
108 | this.clearCanvas(); | ||
109 | this._selectedComponent = val; | ||
110 | if(this._selectedComponent !== null) { | ||
111 | this.application.ninja.objectsController.currentObject = this.selectedComponent; | ||
112 | if (this.selectedComponent !== null) { | ||
113 | this.boundComponents.push(this.selectedComponent); | ||
114 | } | ||
115 | } | ||
116 | this.needsDraw = true; | ||
117 | } | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | handleShowBinding: { | ||
122 | value: function(bindingMeta) { | ||
123 | if(bindingMeta === null) return; | ||
124 | for(var j=0; j< bindingMeta.length; j++) { | ||
125 | var bindingExists = false; | ||
126 | for(var i =0; i < this.boundComponents; i++) { | ||
127 | if(this.boundComponents[i] === bindingMeta[j].boundObject) { | ||
128 | bindingExists = true; | ||
129 | } | ||
130 | } | ||
131 | if(!bindingExists) { | ||
132 | //this.boundComponents.push(bindingMeta[j].boundObject); | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | }, | ||
137 | |||
138 | _nonVisualComponents: { value:[] }, | ||
139 | nonVisualComponents: { | ||
140 | get: function() { | ||
141 | return this._nonVisualComponents; | ||
142 | }, | ||
143 | set: function(val) { | ||
144 | this._nonVisualComponents = val; | ||
145 | } | ||
146 | }, | ||
147 | |||
148 | bindingViewCanvas: { | ||
149 | get: function() { | ||
150 | return this._bindingViewCanvas; | ||
151 | }, | ||
152 | set: function(val) { | ||
153 | this._bindingViewCanvas = val; | ||
154 | } | ||
155 | }, | ||
156 | |||
157 | //Methods | ||
158 | canvas: { | ||
159 | get: function() { | ||
160 | return this._canvas; | ||
161 | }, | ||
162 | set: function(val) { | ||
163 | this._canvas = val; | ||
164 | } | ||
165 | }, | ||
166 | |||
167 | //Montage Draw Cycle | ||
168 | prepareForDraw: { | ||
169 | value: function() { | ||
170 | this._canvas = this.application.ninja.stage.drawingCanvas; | ||
171 | this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); | ||
172 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); | ||
173 | this.element.addEventListener("mousedown", this, false); | ||
174 | this.element.addEventListener("mousemove", this, false); | ||
175 | |||
176 | Object.defineBinding(this, 'currentDocument', { | ||
177 | boundObject : this.application.ninja, | ||
178 | boundObjectPropertyPath : "documentList.selectedObjects.0", | ||
179 | oneway: true | ||
180 | }); | ||
181 | |||
182 | } | ||
183 | }, | ||
184 | |||
185 | _currentDocument : { value: null }, | ||
186 | currentDocument : { | ||
187 | get : function() { return this._currentDocument; }, | ||
188 | set : function(value) { | ||
189 | if(value === this._currentDocument) { return; } | ||
190 | |||
191 | |||
192 | this._currentDocument = value; | ||
193 | if(value) { | ||
194 | this.hide = (value.currentView === 'code'); | ||
195 | } | ||
196 | |||
197 | this.needsDraw = true; | ||
198 | } | ||
199 | }, | ||
200 | |||
201 | _hide : { value: null }, | ||
202 | hide : { | ||
203 | get : function() { return this._hide; }, | ||
204 | set : function(value) { | ||
205 | if(value === this._hide) { return; } | ||
206 | |||
207 | this._hide = value; | ||
208 | |||
209 | this.needsDraw = true; | ||
210 | } | ||
211 | }, | ||
212 | |||
213 | draw: { | ||
214 | value: function() { | ||
215 | |||
216 | if(this.hide) { | ||
217 | this.element.style.setProperty('display', 'none'); | ||
218 | } else { | ||
219 | this.element.style.removeProperty('display'); | ||
220 | this.element.style.width = this.width + "px"; | ||
221 | this.element.style.height = this.height + "px"; | ||
222 | if(this.selectedComponent !== null && typeof(this.selectedComponent) !== "undefined") { | ||
223 | this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; | ||
224 | this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; | ||
225 | this.clearCanvas(); | ||