diff options
author | Eric Guzman | 2012-06-11 13:28:42 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-11 13:28:42 -0700 |
commit | 3a4727ffc350216a434a7c6977b6a23653b77780 (patch) | |
tree | c5dff306f8803c36a16163ba5df1e7f492e762b5 /js/controllers/elements/element-controller.js | |
parent | d6b46ba496c9c8974ae39bb476aea35bcd1ddaf1 (diff) | |
parent | 337efc667372326ae2f9984d89a47bb151016774 (diff) | |
download | ninja-3a4727ffc350216a434a7c6977b6a23653b77780.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Diffstat (limited to 'js/controllers/elements/element-controller.js')
-rwxr-xr-x | js/controllers/elements/element-controller.js | 128 |
1 files changed, 99 insertions, 29 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 20225c61..4a02e9a3 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -5,12 +5,16 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | Component = require("montage/ui/component").Component; | 8 | Component = require("montage/ui/component").Component, |
9 | njModule = require("js/lib/NJUtils"); | ||
9 | 10 | ||
10 | exports.ElementController = Montage.create(Component, { | 11 | exports.ElementController = Montage.create(Component, { |
11 | 12 | ||
12 | addElement: { | 13 | addElement: { |
13 | value: function(el, styles) { | 14 | value: function(el, styles) { |
15 | |||
16 | if (el.getAttribute) el.setAttribute('data-ninja-node', 'true'); | ||
17 | |||
14 | if(this.application.ninja.timeline.currentLayerSelected) { | 18 | if(this.application.ninja.timeline.currentLayerSelected) { |
15 | var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); | 19 | var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID); |
16 | 20 | ||
@@ -33,7 +37,7 @@ exports.ElementController = Montage.create(Component, { | |||
33 | // Remove the element from the DOM and clear the GLWord. | 37 | // Remove the element from the DOM and clear the GLWord. |
34 | removeElement: { | 38 | removeElement: { |
35 | value: function(el) { | 39 | value: function(el) { |
36 | if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { | 40 | if(el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { |
37 | el.elementModel.shapeModel.GLWorld.clearTree(); | 41 | el.elementModel.shapeModel.GLWorld.clearTree(); |
38 | } | 42 | } |
39 | el.parentNode.removeChild(el); | 43 | el.parentNode.removeChild(el); |
@@ -159,28 +163,12 @@ exports.ElementController = Montage.create(Component, { | |||
159 | el.elementModel.stroke = null; | 163 | el.elementModel.stroke = null; |
160 | return; | 164 | return; |
161 | case 'gradient': | 165 | case 'gradient': |
162 | this.setProperty(el, "border-image", color.color.css); | 166 | this.setGradientBorder(el, color.color.gradientMode, color.color.css); |
163 | this.setProperty(el, "border-color", "none"); | ||
164 | if(color.borderInfo) { | ||
165 | if(color.borderInfo.borderWidth) { | ||
166 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); | ||
167 | } | ||
168 | if(color.borderInfo.borderStyle) { | ||
169 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | ||
170 | } | ||
171 | } | ||
172 | break; | 167 | break; |
173 | default: | 168 | default: |
174 | this.setProperty(el, "border-image", "none"); | 169 | this.setProperty(el, "border-image", "none"); |
170 | this.setProperty(el, "border-image-slice", ""); | ||
175 | this.setProperty(el, "border-color", color.color.css); | 171 | this.setProperty(el, "border-color", color.color.css); |
176 | if(color.borderInfo) { | ||
177 | if(color.borderInfo.borderWidth) { | ||
178 | this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); | ||
179 | } | ||
180 | if(color.borderInfo.borderStyle) { | ||
181 | this.setProperty(el, "border-style", color.borderInfo.borderStyle); | ||
182 | } | ||
183 | } | ||
184 | } | 172 | } |
185 | } | 173 | } |
186 | el.elementModel.stroke = color; | 174 | el.elementModel.stroke = color; |
@@ -188,26 +176,108 @@ exports.ElementController = Montage.create(Component, { | |||
188 | } | 176 | } |
189 | }, | 177 | }, |
190 | 178 | ||
179 | setGradientBorder: { | ||
180 | value: function(el, gradientMode, css) { | ||
181 | if(gradientMode === "radial") { | ||
182 | this.setProperty(el, "border-image", css.replace("ellipse", "circle")); | ||
183 | } else { | ||
184 | this.setProperty(el, "border-image", css); | ||
185 | } | ||
186 | this.setProperty(el, "border-color", "none"); | ||
187 | // gradient slice = borderWidth/totalWidth | ||
188 | var b = parseInt(this.getProperty(el, "border-left-width", true)), | ||
189 | w = parseInt(this.getProperty(el, "width", true)), | ||
190 | h = parseInt(this.getProperty(el, "height", true)); | ||
191 | if(h > w) { | ||
192 | w = h; | ||
193 | } | ||
194 | this.setProperty(el, "border-image-slice", Math.floor(b/(w+b+b) * 100) + "%"); | ||
195 | } | ||
196 | }, | ||
197 | |||
191 | getStroke: { | 198 | getStroke: { |
192 | value: function(el) { | 199 | value: function(el, stroke) { |
193 | // TODO - Need to figure out which border side user wants | 200 | var strokeInfo = {}, |
194 | return this.application.ninja.stylesController.getElementStyle(el, "border"); | 201 | color, |
202 | borderWidth, | ||
203 | border; | ||
204 | if(stroke.colorInfo) { | ||
205 | strokeInfo.colorInfo = {}; | ||
206 | color = this.getColor(el, false); | ||
207 | if(color && color.color) { | ||
208 | strokeInfo.colorInfo.mode = color.mode; | ||
209 | strokeInfo.colorInfo.color = color.color; | ||
210 | } else { | ||
211 | strokeInfo.colorInfo.mode = "nocolor"; | ||
212 | strokeInfo.colorInfo.color = null; | ||
213 | } | ||
214 | } | ||
215 | if(stroke.borderInfo) { | ||
216 | // TODO - Need to figure out which border side user wants | ||
217 | strokeInfo.borderInfo = {}; | ||
218 | if(stroke.borderInfo.borderWidth) { | ||
219 | borderWidth = this.getProperty(el, "border-width"); | ||
220 | if(borderWidth) { | ||
221 | border = njModule.NJUtils.getValueAndUnits(borderWidth); | ||
222 | strokeInfo.borderInfo.borderWidth = border[0]; | ||
223 | strokeInfo.borderInfo.borderUnits = border[1]; | ||
224 | } | ||
225 | } | ||
226 | if(stroke.borderInfo.borderStyle) { | ||
227 | strokeInfo.borderInfo.borderStyle = this.getProperty(el, "border-style"); | ||
228 | } | ||
229 | } | ||
230 | return strokeInfo; | ||
195 | } | 231 | } |
196 | }, | 232 | }, |
197 | 233 | ||
198 | setStroke: { | 234 | setStroke: { |
199 | value: function(el, stroke) { | 235 | value: function(el, stroke) { |
200 | this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits); | 236 | if(stroke.borderInfo) { |
201 | this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle); | 237 | if(stroke.borderInfo.borderWidth) { |
202 | this.setColor(el, stroke.color, false); | 238 | this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderInfo.borderWidth + stroke.borderInfo.borderUnits); |
239 | } | ||
240 | if(stroke.borderInfo.borderStyle) { | ||
241 | this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderInfo.borderStyle); | ||
242 | } | ||
243 | } | ||
244 | if(stroke.colorInfo) { | ||
245 | this.setColor(el, stroke.colorInfo, false); | ||
246 | } | ||
247 | } | ||
248 | }, | ||
249 | |||
250 | getFill: { | ||
251 | value: function(el, fill) { | ||
252 | var fillInfo = {}, | ||
253 | color; | ||
254 | if(fill.colorInfo) { | ||
255 | fillInfo.colorInfo = {}; | ||
256 | color = this.getColor(el, true); | ||
257 | if(color && color.color) { | ||
258 | fillInfo.colorInfo.mode = color.mode; | ||
259 | fillInfo.colorInfo.color = color.color; | ||
260 | } else { | ||
261 | fillInfo.colorInfo.mode = "nocolor"; | ||
262 | fillInfo.colorInfo.color = null; | ||
263 | } | ||
264 | } | ||
265 | return fillInfo; | ||
203 | } | 266 | } |
204 | }, | 267 | }, |
205 | 268 | ||
269 | setFill: { | ||
270 | value: function(el, fill) { | ||
271 | if(fill.colorInfo) { | ||
272 | this.setColor(el, fill.colorInfo, true); | ||
273 | } | ||
274 | } | ||
275 | }, | ||
206 | //-------------------------------------------------------------------------------------------------------- | 276 | //-------------------------------------------------------------------------------------------------------- |
207 | // Routines to get/set 3D properties | 277 | // Routines to get/set 3D properties |
208 | get3DProperty: { | 278 | get3DProperty: { |
209 | value: function(el, prop) { | 279 | value: function(el, prop) { |
210 | if(el.elementModel && el.elementModel.props3D) { | 280 | if(el.elementModel.props3D) { |
211 | return el.elementModel.props3D[prop]; | 281 | return el.elementModel.props3D[prop]; |
212 | } | 282 | } |
213 | } | 283 | } |
@@ -215,7 +285,7 @@ exports.ElementController = Montage.create(Component, { | |||
215 | 285 | ||
216 | getMatrix: { | 286 | getMatrix: { |
217 | value: function(el) { | 287 | value: function(el) { |
218 | if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) { | 288 | if(el.elementModel.props3D && el.elementModel.props3D.matrix3d) { |
219 | return el.elementModel.props3D.matrix3d.slice(0); | 289 | return el.elementModel.props3D.matrix3d.slice(0); |
220 | } else { | 290 | } else { |
221 | var mat; | 291 | var mat; |
@@ -235,7 +305,7 @@ exports.ElementController = Montage.create(Component, { | |||
235 | 305 | ||
236 | getPerspectiveDist: { | 306 | getPerspectiveDist: { |
237 | value: functi |