diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/gradientpicker.reel/gradientpicker.js | 3 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 125 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 65 |
3 files changed, 168 insertions, 25 deletions
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js index 0940be3c..cedeef50 100755 --- a/js/components/gradientpicker.reel/gradientpicker.js +++ b/js/components/gradientpicker.reel/gradientpicker.js | |||
@@ -397,7 +397,8 @@ exports.GradientPicker = Montage.create(Component, { | |||
397 | actionEvent.initEvent(type, true, true); | 397 | actionEvent.initEvent(type, true, true); |
398 | actionEvent.type = type; | 398 | actionEvent.type = type; |
399 | actionEvent.wasSetByCode = userInitiated; | 399 | actionEvent.wasSetByCode = userInitiated; |
400 | actionEvent.gradient = {stops: this.value, mode: this.mode, css: css}; | 400 | // TODO - mode seems to get reset to "rgb", so also setting a gradientMode property |
401 | actionEvent.gradient = {stops: this.value, mode: this.mode, gradientMode: this.mode, css: css}; | ||
401 | this.dispatchEvent(actionEvent); | 402 | this.dispatchEvent(actionEvent); |
402 | } | 403 | } |
403 | } | 404 | } |
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..7079fc7f 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -259,24 +259,70 @@ 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 | if(gradientMode === "radial") |
266 | { | 266 | { |
267 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | 267 | m = "RadialGradientMaterial"; |
268 | } | 268 | } |
269 | |||
270 | if(el.elementModel.shapeModel.fillMaterial.getName() !== m) | ||
271 | { | ||
272 | var fm = Object.create(MaterialsModel.getMaterial(m)); | ||
273 | if(fm) | ||
274 | { | ||
275 | if(isFill) | ||
276 | { | ||
277 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | ||
278 | el.elementModel.shapeModel.fillMaterial = fm; | ||
279 | } | ||
280 | else | ||
281 | { | ||
282 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); | ||
283 | el.elementModel.shapeModel.strokeMaterial = fm; | ||
284 | } | ||
285 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
286 | } | ||
287 | } | ||
288 | } | ||
289 | }, | ||
290 | |||
291 | setColor: { | ||
292 | value: function(el, color, isFill) { | ||
293 | var mode = color.mode, | ||
294 | webGl; | ||
269 | if(isFill) | 295 | if(isFill) |
270 | { | 296 | { |
271 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | 297 | if(mode) |
272 | this.setShapeProperty(el, "fill", webGl); | 298 | { |
273 | this.setShapeProperty(el, "background", color); | 299 | switch (mode) { |
300 | case 'nocolor': | ||
301 | el.elementModel.shapeModel.GLGeomObj.setFillColor(null); | ||
302 | this.setShapeProperty(el, "fill", null); | ||
303 | this.setShapeProperty(el, "background", color); | ||
304 | // el.elementModel.fill = null; | ||
305 | return; | ||
306 | case 'gradient': | ||
307 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
308 | el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | ||
309 | el.elementModel.shapeModel.GLWorld.render(); | ||
310 | this.setShapeProperty(el, "fill", color.color.css); | ||
311 | this.setShapeProperty(el, "background", color); | ||
312 | // el.elementModel.fill = color; | ||
313 | break; | ||
314 | default: | ||
315 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
316 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | ||
317 | this.setShapeProperty(el, "fill", webGl); | ||
318 | this.setShapeProperty(el, "background", color); | ||
319 | // el.elementModel.fill = color; | ||
320 | } | ||
321 | } | ||
274 | } | 322 | } |
275 | else | 323 | else |
276 | { | 324 | { |
277 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | 325 | // Support for ink-bottle tool |
278 | this.setShapeProperty(el, "stroke", webGl); | ||
279 | this.setShapeProperty(el, "border", color); | ||
280 | if(color.strokeInfo) | 326 | if(color.strokeInfo) |
281 | { | 327 | { |
282 | var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, | 328 | var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, |
@@ -285,7 +331,64 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
285 | this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " | 331 | this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " |
286 | + color.strokeInfo.strokeUnits); | 332 | + color.strokeInfo.strokeUnits); |
287 | } | 333 | } |
334 | |||
335 | if(mode) | ||
336 | { | ||
337 | switch (mode) { | ||
338 | case 'nocolor': | ||
339 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null); | ||
340 | this.setShapeProperty(el, "stroke", null); | ||
341 | this.setShapeProperty(el, "border", color); | ||
342 | // el.elementModel.fill = null; | ||
343 | return; | ||
344 | case 'gradient': | ||
345 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
346 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | ||
347 | el.elementModel.shapeModel.GLWorld.render(); | ||
348 | this.setShapeProperty(el, "stroke", color.color.css); | ||
349 | this.setShapeProperty(el, "border", color); | ||
350 | // el.elementModel.fill = color; | ||
351 | break; | ||
352 | default: | ||
353 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
354 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | ||
355 | this.setShapeProperty(el, "stroke", webGl); | ||
356 | this.setShapeProperty(el, "border", color); | ||
357 | // el.elementModel.fill = color; | ||
358 | } | ||
359 | } | ||
288 | } | 360 | } |
361 | |||
362 | |||
363 | |||
364 | |||
365 | |||
366 | |||
367 | // var webGl = color.webGlColor || color.color.webGlColor; | ||
368 | // if(!webGl) | ||
369 | // { | ||
370 | // webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
371 | // } | ||
372 | // if(isFill) | ||
373 | // { | ||
374 | // el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | ||
375 | // this.setShapeProperty(el, "fill", webGl); | ||
376 | // this.setShapeProperty(el, "background", color); | ||
377 | // } | ||
378 | // else | ||
379 | // { | ||
380 | // el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl); | ||
381 | // this.setShapeProperty(el, "stroke", webGl); | ||
382 | // this.setShapeProperty(el, "border", color); | ||
383 | // if(color.strokeInfo) | ||
384 | // { | ||
385 | // var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize, | ||
386 | // color.strokeInfo.strokeUnits); | ||
387 | // el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); | ||
388 | // this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " " | ||
389 | // + color.strokeInfo.strokeUnits); | ||
390 | // } | ||
391 | // } | ||
289 | el.elementModel.shapeModel.GLWorld.render(); | 392 | el.elementModel.shapeModel.GLWorld.render(); |
290 | } | 393 | } |
291 | }, | 394 | }, |
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..726c3595 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js | |||
@@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() { | |||
138 | // Methods | 138 | // Methods |
139 | /////////////////////////////////////////////////////////////////////// | 139 | /////////////////////////////////////////////////////////////////////// |
140 | this.setMaterialColor = function(c, type) { | 140 | this.setMaterialColor = function(c, type) { |
141 | if (type == "fill") { | 141 | if(c.gradientMode) { |
142 | this._fillColor = c.slice(0); | 142 | var nMats = 0; |
143 | if (this._materialArray && this._materialTypeArray) { | ||
144 | nMats = this._materialArray.length; | ||
145 | } | ||
146 | |||
147 | var stops = [], | ||
148 | colors = c.color; | ||
149 | |||
150 | var len = colors.length; | ||
151 | // TODO - Current shaders only support 4 color stops | ||
152 | if(len > 4) { | ||
153 | len = 4; | ||
154 | } | ||
155 | |||
156 | for(var n=0; n<len; n++) { | ||
157 | var position = colors[n].position/100; | ||
158 | var cs = colors[n].value; | ||
159 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
160 | stops.push(stop); | ||
161 | |||
162 | if (nMats === this._materialTypeArray.length) { | ||
163 | for (var i=0; i<nMats; i++) { | ||
164 | if (this._materialTypeArray[i] == type) { | ||
165 | this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) ); | ||
166 | this._materialArray[i].setProperty( "colorStop"+(n+1), position ); | ||
167 | } | ||
168 | } | ||
169 | } | ||
170 | } | ||
171 | // if (type == "fill") { | ||
172 | // this._fillColor = c.slice(0); | ||
173 | // } else { | ||
174 | // this._strokeColor = c.slice(0); | ||
175 | // } | ||
143 | } else { | 176 | } else { |
144 | this._strokeColor = c.slice(0); | 177 | if (type == "fill") { |
145 | } |