aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/elements
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-xjs/controllers/elements/element-controller.js32
-rwxr-xr-xjs/controllers/elements/shapes-controller.js140
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;
366 break;
367 default:
368 webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
369 el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
370 this.setShapeProperty(el, "stroke", webGl);
371 this.setShapeProperty(el, "border", color);
372 el.elementModel.fill = color;
373 }