diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-view.js')
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.js | 401 |
1 files changed, 401 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..73d25824 --- /dev/null +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -0,0 +1,401 @@ | |||
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 | this.boundComponents.push(this.selectedComponent); | ||
113 | } | ||
114 | this.needsDraw = true; | ||
115 | } | ||
116 | } | ||
117 | }, | ||
118 | |||
119 | handleShowBinding: { | ||
120 | value: function(bindingMeta) { | ||
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 | } | ||
133 | } | ||
134 | }, | ||
135 | |||
136 | _nonVisualComponents: { value:[] }, | ||
137 | nonVisualComponents: { | ||
138 | get: function() { | ||
139 | return this._nonVisualComponents; | ||
140 | }, | ||
141 | set: function(val) { | ||
142 | this._nonVisualComponents = val; | ||
143 | } | ||
144 | }, | ||
145 | |||
146 | bindingViewCanvas: { | ||
147 | get: function() { | ||
148 | return this._bindingViewCanvas; | ||
149 | }, | ||
150 | set: function(val) { | ||
151 | this._bindingViewCanvas = val; | ||
152 | } | ||
153 | }, | ||
154 | |||
155 | //Methods | ||
156 | canvas: { | ||
157 | get: function() { | ||
158 | return this._canvas; | ||
159 | }, | ||
160 | set: function(val) { | ||
161 | this._canvas = val; | ||
162 | } | ||
163 | }, | ||
164 | |||
165 | //Montage Draw Cycle | ||
166 | prepareForDraw: { | ||
167 | value: function() { | ||
168 | this._canvas = this.application.ninja.stage.drawingCanvas; | ||
169 | this._context = this.application.ninja.stage.drawingCanvas.getContext('2d'); | ||
170 | this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false); | ||
171 | this.element.addEventListener("mousedown", this, false); | ||
172 | this.element.addEventListener("mousemove", this, false); | ||
173 | } | ||
174 | }, | ||
175 | |||
176 | draw: { | ||
177 | value: function() { | ||
178 | |||
179 | this.element.style.width = this.width + "px"; | ||
180 | this.element.style.height = this.height + "px"; | ||
181 | if(this.selectedComponent !== null) { | ||
182 | this.canvas.width = this.application.ninja.stage.drawingCanvas.offsetWidth; | ||
183 | this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight; | ||
184 | this.clearCanvas(); | ||
185 | for(var i= 0; i < this.hudRepeater.childComponents.length; i++) { | ||
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, "#CCC", 2); | ||
187 | } | ||
188 | if(this._isDrawingConnection) { | ||
189 | if (this.hudRepeater.childComponents.length > 1) { | ||
190 | // Make things disappear | ||
191 | } | ||
192 | this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#5e9eff", 4); | ||
193 | } | ||
194 | } else { | ||
195 | this.bindables = []; | ||
196 | this.clearCanvas(); | ||
197 | } | ||
198 | |||
199 | if(this.mouseOverHud && !this._isDrawingConnection) { | ||
200 | if(!this.element.classList.contains("mousedOverHud")) { this.element.classList.add("mousedOverHud"); } | ||
201 | } else { | ||
202 | if(this.element.classList.contains("mousedOverHud")) { this.element.classList.remove("mousedOverHud"); } | ||
203 | } | ||
204 | |||
205 | } | ||
206 | }, | ||
207 | |||
208 | didDraw: { | ||
209 | value: function() { | ||
210 | |||
211 | } | ||
212 | }, | ||
213 | |||
214 | drawLine: { | ||
215 | value: function(fromX,fromY,toX,toY, color, width) { | ||
216 | if(width === null) width = 1; | ||
217 | if (color === null) color = "#CCC"; | ||
218 | this._context.lineWidth = width; // Set Line Thickness | ||
219 | this._context.lineCap = "round"; | ||
220 | this._context.strokeStyle = color; // Set Color | ||
221 | this._context.beginPath(); // Start Drawing Line | ||
222 | this._context.moveTo(fromX, fromY); | ||
223 | this._context.lineTo(toX, toY); | ||
224 | this._context.stroke(); | ||
225 | } | ||
226 | }, | ||
227 | |||
228 | clearCanvas: { | ||
229 | value: function() { | ||