diff options
author | Eric Guzman | 2012-03-13 13:12:43 -0700 |
---|---|---|
committer | Eric Guzman | 2012-03-13 13:12:43 -0700 |
commit | 61fd46cad105f0a52afa028e5301b96120f00ab4 (patch) | |
tree | d8a7e23e1ea7d9b5c64a288822b7797bb19e50d4 /js/controllers/elements | |
parent | 7e3161153b87b891875ac65368a19aed12909fa3 (diff) | |
parent | f56b8cf4d3316d250c0f0045fb78f0dbd5c56e94 (diff) | |
download | ninja-61fd46cad105f0a52afa028e5301b96120f00ab4.tar.gz |
Merge branch 'refs/heads/master' into CSSPanelUpdates
Conflicts:
js/controllers/styles-controller.js
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-x | js/controllers/elements/element-controller.js | 32 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 140 |
2 files changed, 151 insertions, 21 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index ec0335b4..9f00604f 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -74,8 +74,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
74 | 74 | ||
75 | //-------------------------------------------------------------------------------------------------------- | 75 | //-------------------------------------------------------------------------------------------------------- |
76 | // Routines to get/set color properties | 76 | // Routines to get/set color properties |
77 | // borderSide : "top", "right", "bottom", or "left" | ||
77 | getColor: { | 78 | getColor: { |
78 | value: function(el, isFill) { | 79 | value: function(el, isFill, borderSide) { |
79 | var colorObj, | 80 | var colorObj, |
80 | color, | 81 | color, |
81 | image; | 82 | image; |
@@ -87,22 +88,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
87 | { | 88 | { |
88 | return el.elementModel.fill; | 89 | return el.elementModel.fill; |
89 | } | 90 | } |
90 | // return this.application.ninja.stylesController.getElementStyle(el, "background-color"); | ||
91 | //TODO: Once logic for color and gradient is established, this needs to be revised | 91 | //TODO: Once logic for color and gradient is established, this needs to be revised |
92 | color = this.getProperty(el, "background-color"); | 92 | color = this.getProperty(el, "background-color"); |
93 | image = this.getProperty(el, "background-image"); | 93 | image = this.getProperty(el, "background-image"); |
94 | } | 94 | } |
95 | else | 95 | else |
96 | { | 96 | { |
97 | // TODO - Need to figure out which border side user wants | 97 | // Try getting border color from specific side first |
98 | if(el.elementModel.stroke) | 98 | if(borderSide) |
99 | { | 99 | { |
100 | return el.elementModel.stroke; | 100 | color = this.getProperty(el, "border-" + borderSide + "-color"); |
101 | image = this.getProperty(el, "border-" + borderSide + "-image"); | ||
102 | } | ||
103 | |||
104 | // If no color was found, look up the shared border color | ||
105 | if(!color && !image) | ||
106 | { | ||
107 | if(el.elementModel.stroke) | ||
108 | { | ||
109 | return el.elementModel.stroke; | ||
110 | } | ||
111 | color = this.getProperty(el, "border-color"); | ||
112 | image = this.getProperty(el, "border-image"); | ||
101 | } | 113 | } |
102 | // TODO - Need to figure out which border side user wants | ||
103 | // return this.application.ninja.stylesController.getElementStyle(el, "border-color"); | ||
104 | color = this.getProperty(el, "border-color"); | ||
105 | image = this.getProperty(el, "border-image"); | ||
106 | } | 114 | } |
107 | 115 | ||
108 | if(color || image) { | 116 | if(color || image) { |
@@ -120,11 +128,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
120 | { | 128 | { |
121 | el.elementModel.fill = colorObj; | 129 | el.elementModel.fill = colorObj; |
122 | } | 130 | } |
123 | else | 131 | else if(!borderSide) |
124 | { | 132 | { |
125 | // TODO - Need to update border style and width also | 133 | // TODO - Need to update border style and width also |
126 | el.elementModel.stroke = colorObj; | 134 | el.elementModel.stroke = colorObj; |
127 | } | 135 | } |
136 | else | ||
137 | { | ||
138 | // TODO - Should update specific border sides too | ||
139 | } | ||
128 | 140 | ||
129 | return colorObj; | 141 | return colorObj; |
130 | } | 142 | } |
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..d72d9c14 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -259,24 +259,82 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
259 | } | 259 | } |
260 | }, | 260 | }, |
261 | 261 | ||
262 | setColor: { | 262 | _setGradientMaterial: { |
263 | value: function(el, color, isFill) { | 263 | value: function(el, gradientMode, isFill) { |
264 | var webGl = color.webGlColor || color.color.webGlColor; | 264 | var m = "LinearGradientMaterial", |
265 | if(!webGl) | 265 | fm; |
266 | if(gradientMode === "radial") | ||
266 | { | 267 | { |
267 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | 268 | m = "RadialGradientMaterial"; |
268 | } | 269 | } |
270 | |||
269 | if(isFill) | 271 | if(isFill) |
270 | { | 272 | { |
271 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | 273 | if(el.elementModel.shapeModel.fillMaterial.getName() !== m) |
272 | this.setShapeProperty(el, "fill", webGl); | 274 | { |
273 | this.setShapeProperty(el, "background", color); | 275 | fm = Object.create(MaterialsModel.getMaterial(m)); |
276 | if(fm) | ||
277 | { | ||
278 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | ||
279 | el.elementModel.shapeModel.fillMaterial = fm; | ||
280 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
281 | } | ||
282 | } | ||
274 | } | 283 | } |
275 | else | 284 | else |
276 | { | 285 | { |
277 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | 286 | if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) |
278 | this.setShapeProperty(el, "stroke", webGl); | 287 | { |
279 | this.setShapeProperty(el, "border", color); | 288 | fm = Object.create(MaterialsModel.getMaterial(m)); |
289 | if(fm) | ||
290 | { | ||
291 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); | ||
292 | el.elementModel.shapeModel.strokeMaterial = fm; | ||
293 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
294 | } | ||
295 | } | ||
296 | } | ||
297 | } | ||
298 | }, | ||
299 | |||
300 | setColor: { | ||
301 | value: function(el, color, isFill) { | ||
302 | var mode = color.mode, | ||
303 | webGl; | ||
304 | if(isFill) | ||
305 | { | ||
306 | if(mode) | ||
307 | { | ||
308 | switch (mode) { | ||
309 | case 'nocolor': | ||
310 | el.elementModel.shapeModel.GLGeomObj.setFillColor(null); | ||
311 | this.setShapeProperty(el, "fill", null); | ||
312 | this.setShapeProperty(el, "background", color); | ||
313 | el.elementModel.fill = null; | ||
314 | return; | ||
315 | case 'gradient': | ||
316 | if(el.elementModel.shapeModel.useWebGl) | ||
317 | { | ||
318 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
319 | } | ||
320 | el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | ||
321 | el.elementModel.shapeModel.GLWorld.render(); | ||
322 | this.setShapeProperty(el, "fill", color.color.css); | ||
323 | this.setShapeProperty(el, "background", color); | ||
324 | el.elementModel.fill = color; | ||
325 | break; | ||
326 | default: | ||
327 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
328 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | ||
329 | this.setShapeProperty(el, "fill", webGl); | ||
330 | this.setShapeProperty(el, "background", color); | ||
331 | el.elementModel.fill = color; | ||
332 | } | ||
333 | } | ||
334 | } | ||
335 | else | ||
336 | { | ||
337 | // Support for ink-bottle tool | ||
280 | if(color.strokeInfo) | 338 | if(color.strokeInfo) |
281 | { | 339 | { |
282 | var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, | 340 | var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, |
@@ -285,7 +343,67 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
285 | this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " | 343 | this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " |
286 | + color.strokeInfo.strokeUnits); | 344 | + color.strokeInfo.strokeUnits); |
287 | } | 345 | } |
346 | |||
347 | if(mode) | ||
348 | { | ||
349 | switch (mode) { | ||
350 | case 'nocolor': | ||
351 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); | ||
352 | this.setShapeProperty(el, "stroke", null); | ||
353 | this.setShapeProperty(el, "border", color); | ||
354 | el.elementModel.fill = null; | ||
355 | return; | ||
356 | case 'gradient': | ||
357 | if(el.elementModel.shapeModel.useWebGl) | ||
358 | { | ||
359 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
360 | } | ||
361 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | ||
362 | el.elementModel.shapeModel.GLWorld.render(); | ||
363 | this.setShapeProperty(el, "stroke", color.color.css); | ||
364 | this.setShapeProperty(el, "border", color); | ||
365 | el.elementModel.fill = color; | ||