aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/components/ui/property-control.reel/property-control.js8
-rwxr-xr-xjs/controllers/elements/shapes-controller.js15
-rwxr-xr-xjs/lib/geom/circle.js20
-rwxr-xr-xjs/lib/geom/geom-obj.js25
-rwxr-xr-xjs/lib/geom/line.js13
-rwxr-xr-xjs/lib/geom/rectangle.js17
-rwxr-xr-xjs/lib/rdge/materials/linear-gradient-material.js50
-rwxr-xr-xjs/lib/rdge/materials/material.js69
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js43
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.css10
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.js76
-rwxr-xr-xjs/tools/LineTool.js6
-rwxr-xr-xjs/tools/OvalTool.js12
-rwxr-xr-xjs/tools/RectTool.js12
14 files changed, 293 insertions, 83 deletions
diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 20ec173e..cd684168 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -15,7 +15,8 @@ var Montage = require("montage/core/core").Montage,
15 TextField = require("js/components/TextField.reel").TextField, 15 TextField = require("js/components/TextField.reel").TextField,
16 ColorChip = require("js/components/ui/color-chip.reel").ColorChip, 16 ColorChip = require("js/components/ui/color-chip.reel").ColorChip,
17 FileInput = require("js/components/ui/file-input.reel").FileInput, 17 FileInput = require("js/components/ui/file-input.reel").FileInput,
18 InputGroup = require("js/components/ui/input-group.reel").InputGroup; 18 InputGroup = require("js/components/ui/input-group.reel").InputGroup,
19 GradientPicker = require("js/components/gradientpicker.reel").GradientPicker;
19 20
20var PropertyControl = exports.PropertyControl = Montage.create(Component, { 21var PropertyControl = exports.PropertyControl = Montage.create(Component, {
21 22
@@ -237,6 +238,11 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, {
237 this._control.addEventListener("changing", this, false); 238 this._control.addEventListener("changing", this, false);
238 this._prop = "value"; 239 this._prop = "value";
239 break; 240 break;
241 case "GradientPicker":
242 this._control = GradientPicker.create();
243 this._control.addEventListener("change", this, false);
244 this._prop = "value";
245 break;
240 default: 246 default:
241 break; 247 break;
242 } 248 }
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index c3099459..636482f5 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -858,15 +858,12 @@ exports.ShapesController = Montage.create(CanvasController, {
858 value: function(m) 858 value: function(m)
859 { 859 {
860 var css, 860 var css,
861 colorObj; 861 colorObj,
862 if(m === "Linear Gradient") 862 material;
863 { 863
864 css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; 864 material = MaterialsModel.getMaterial(m);
865 } 865
866 else if(m === "Radial Gradient") 866 css = material.getGradientData();
867 {
868 css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)";
869 }
870 867
871 if(css) 868 if(css)
872 { 869 {
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 086c1058..848ae10d 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -61,14 +61,28 @@ exports.Circle = Object.create(GeomObj, {
61 } else { 61 } else {
62 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 62 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
63 } 63 }
64 if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); 64
65 if(strokeColor) {
66 if(this._strokeMaterial.hasProperty("color")) {
67 this._strokeMaterial.setProperty( "color", this._strokeColor );
68 } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
69 this._strokeMaterial.setGradientData(this._strokeColor.color);
70 }
71 }
65 72
66 if(fillMaterial) { 73 if(fillMaterial) {
67 this._fillMaterial = fillMaterial.dup(); 74 this._fillMaterial = fillMaterial.dup();
68 } else { 75 } else {
69 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 76 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
77 }
78
79 if(fillColor) {
80 if(this._fillMaterial.hasProperty("color")) {
81 this._fillMaterial.setProperty( "color", this._fillColor );
82 } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
83 this._fillMaterial.setGradientData(this._fillColor.color);
84 }
70 } 85 }
71 if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor );
72 } 86 }
73 }, 87 },
74 88
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 3a7a5619..66f557dd 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -191,27 +191,10 @@ exports.GeomObj = Object.create(Object.prototype, {
191 nMats = this._materialArray.length; 191 nMats = this._materialArray.length;
192 } 192 }
193 193
194 var stops = [], 194 if (nMats === this._materialTypeArray.length) {
195 colors = c.color; 195 for (i = 0; i < nMats; i++) {
196 196 if (this._materialTypeArray[i] == type) {
197 var len = colors.length; 197 this._materialArray[i].setGradientData(c.color);
198 // TODO - Current shaders only support 4 color stops
199 if (len > 4) {
200 len = 4;
201 }
202
203 for (var n = 0; n < len; n++) {
204 var position = colors[n].position / 100;
205 var cs = colors[n].value;
206 var stop = [cs.r / 255, cs.g / 255, cs.b / 255, cs.a];
207 stops.push(stop);
208
209 if (nMats === this._materialTypeArray.length) {
210 for (i = 0; i < nMats; i++) {
211 if (this._materialTypeArray[i] == type) {
212 this._materialArray[i].setProperty("color" + (n + 1), stop.slice(0));
213 this._materialArray[i].setProperty("colorStop" + (n + 1), position);
214 }
215 } 198 }
216 } 199 }
217 } 200 }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index a016d7a3..f782f2a8 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -63,8 +63,17 @@ exports.Line = Object.create(GeomObj, {
63 this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; 63 this._materialSpecular = [0.4, 0.4, 0.4, 1.0];
64 64
65 if(strokeMaterial) { 65 if(strokeMaterial) {
66 this._strokeMaterial = strokeMaterial; 66 this._strokeMaterial = strokeMaterial.dup();
67 if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); 67 } else {
68 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
69 }
70
71 if(strokeColor) {
72 if(this._strokeMaterial.hasProperty("color")) {
73 this._strokeMaterial.setProperty( "color", this._strokeColor );
74 } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
75 this._strokeMaterial.setGradientData(this._strokeColor.color);
76 }
68 } 77 }
69 } 78 }
70 }, 79 },
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81a8556d..3e4c469a 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -77,15 +77,28 @@ exports.Rectangle = Object.create(GeomObj, {
77 } else { 77 } else {
78 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 78 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
79 } 79 }
80 if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor );
81 80
81 if(strokeColor) {
82 if(this._strokeMaterial.hasProperty("color")) {
83 this._strokeMaterial.setProperty( "color", this._strokeColor );
84 } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
85 this._strokeMaterial.setGradientData(this._strokeColor.color);
86 }
87 }
82 88
83 if(fillMaterial) { 89 if(fillMaterial) {
84 this._fillMaterial = fillMaterial.dup(); 90 this._fillMaterial = fillMaterial.dup();
85 } else { 91 } else {
86 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 92 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
87 } 93 }
88 if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); 94
95 if(fillColor) {
96 if(this._fillMaterial.hasProperty("color")) {
97 this._fillMaterial.setProperty( "color", this._fillColor );
98 } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
99 this._fillMaterial.setGradientData(this._fillColor.color);
100 }
101 }
89 } 102 }
90 }, 103 },
91 104
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js
index 7e53db84..d26143de 100755
--- a/js/lib/rdge/materials/linear-gradient-material.js
+++ b/js/lib/rdge/materials/linear-gradient-material.js
@@ -79,6 +79,56 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
79 this.setShaderValues(); 79 this.setShaderValues();
80 this.update( 0 ); 80 this.update( 0 );
81 }; 81 };
82
83 // Only Linear Gradient and Radial Gradients support gradients;
84 this.gradientType = "linear";
85
86 this.getGradientData = function() {
87 var angle = Math.round(this._angle*180/Math.PI),
88 color,
89 colorStr,
90 css = "-webkit-gradient(linear, " + angle + "deg";
91
92 // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across:
93 css = '-webkit-gradient(linear, left top, right top';
94