diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/components/ui/property-control.reel/property-control.js | 8 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 15 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 20 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 25 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 13 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 17 | ||||
-rwxr-xr-x | js/lib/rdge/materials/linear-gradient-material.js | 50 | ||||
-rwxr-xr-x | js/lib/rdge/materials/material.js | 69 | ||||
-rwxr-xr-x | js/lib/rdge/materials/radial-gradient-material.js | 43 | ||||
-rwxr-xr-x | js/panels/Materials/materials-popup.reel/materials-popup.css | 10 | ||||
-rwxr-xr-x | js/panels/Materials/materials-popup.reel/materials-popup.js | 76 | ||||
-rwxr-xr-x | js/tools/LineTool.js | 6 | ||||
-rwxr-xr-x | js/tools/OvalTool.js | 12 | ||||
-rwxr-xr-x | js/tools/RectTool.js | 12 |
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 | ||
20 | var PropertyControl = exports.PropertyControl = Montage.create(Component, { | 21 | var 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, | ||