diff options
author | Valerio Virgillito | 2012-04-09 10:33:35 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-04-09 10:33:35 -0700 |
commit | bd43ce383b050d03b0f92cc923c517febc66ca28 (patch) | |
tree | 91b95c6c9aef779a743b710105546a8ae74bff12 /js/controllers/elements/shapes-controller.js | |
parent | 86b98ea086b133f4efb247c39fc6200dcf383a65 (diff) | |
parent | c62c5c4287a1ee8a276b32dc61f06abbc24818ec (diff) | |
download | ninja-bd43ce383b050d03b0f92cc923c517febc66ca28.tar.gz |
Merge pull request #159 from mqg734/WebGLMaterials
3D tools, eyedropper, fill, ink-bucket, gradients and shape fixes.
Diffstat (limited to 'js/controllers/elements/shapes-controller.js')
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 395 |
1 files changed, 259 insertions, 136 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index c9164e3e..14cdc473 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -13,12 +13,74 @@ var Montage = require("montage/core/core").Montage, | |||
13 | exports.ShapesController = Montage.create(CanvasController, { | 13 | exports.ShapesController = Montage.create(CanvasController, { |
14 | 14 | ||
15 | setProperty: { | 15 | setProperty: { |
16 | value: function(el, p, value) { | 16 | value: function(el, p, value, eventType, source) { |
17 | var val = parseInt(value); | 17 | var val = parseInt(value), |
18 | canvas, | ||
19 | m, | ||
20 | color; | ||
18 | switch(p) { | 21 | switch(p) { |
19 | case "strokeSize": | 22 | case "strokeSize": |
20 | // TODO - For now, just handling px units. | 23 | // TODO - For now, just handling px units. |
21 | this.setShapeProperty(el, "strokeSize", value); | 24 | this.setShapeProperty(el, "strokeSize", value); |
25 | // TODO - For now, just handle Line, Rectangle and Oval. Eventually, move this into each class's | ||
26 | // setStrokeWidth code like SubPath and BrushStroke do. | ||
27 | var geomType = el.elementModel.shapeModel.GLGeomObj.geomType(); | ||
28 | if( (geomType > 0) && (geomType < 4) ) | ||
29 | { | ||
30 | // Changing stroke size should grow/shrink the shape from the center. | ||
31 | var delta = ~~(val - el.elementModel.shapeModel.GLGeomObj.getStrokeWidth()), | ||
32 | l = this.application.ninja.elementMediator.getProperty(el, "left", parseInt), | ||
33 | t = this.application.ninja.elementMediator.getProperty(el, "top", parseInt), | ||
34 | w = this.application.ninja.elementMediator.getProperty(el, "width", parseInt), | ||
35 | h = this.application.ninja.elementMediator.getProperty(el, "height", parseInt); | ||
36 | |||
37 | if(geomType === 3) | ||
38 | { | ||
39 | var slope = el.elementModel.shapeModel.slope; | ||
40 | // set the dimensions | ||
41 | if(slope === "horizontal") | ||
42 | { | ||
43 | h = Math.max(val, 1); | ||
44 | t -= ~~(delta/2); | ||
45 | } | ||
46 | else if(slope === "vertical") | ||
47 | { | ||
48 | w = Math.max(val, 1); | ||
49 | l -= ~~(delta/2); | ||
50 | } | ||
51 | else | ||
52 | { | ||
53 | var oldXAdj = el.elementModel.shapeModel.GLGeomObj.getXAdj(); | ||
54 | var oldYAdj = el.elementModel.shapeModel.GLGeomObj.getYAdj(); | ||
55 | var theta = Math.atan(el.elementModel.shapeModel.slope); | ||
56 | var xAdj = Math.abs((val/2)*Math.sin(theta)); | ||
57 | var yAdj = Math.abs((val/2)*Math.cos(theta)); | ||
58 | var dX = ~~(xAdj*2 - oldXAdj*2); | ||
59 | var dY = ~~(yAdj*2 - oldYAdj*2); | ||
60 | |||
61 | l -= dX; | ||
62 | t -= dY; | ||
63 | w += dX*2; | ||
64 | h += dY*2; | ||
65 | |||
66 | el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj); | ||
67 | el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj); | ||
68 | } | ||
69 | } | ||
70 | else | ||
71 | { | ||
72 | l -= ~~(delta/2); | ||
73 | t -= ~~(delta/2); | ||
74 | w += delta; | ||
75 | h += delta; | ||
76 | } | ||
77 | this.application.ninja.elementMediator.setProperties([el], | ||
78 | { "left": [l + "px"], | ||
79 | "top": [t + "px"], | ||
80 | "width": [w + "px"], | ||
81 | "height": [h + "px"] }, | ||
82 | eventType, source ); | ||
83 | } | ||
22 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); | 84 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); |
23 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 85 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
24 | el.elementModel.shapeModel.GLWorld.render(); | 86 | el.elementModel.shapeModel.GLWorld.render(); |
@@ -68,43 +130,47 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
68 | el.elementModel.shapeModel.GLWorld.render(); | 130 | el.elementModel.shapeModel.GLWorld.render(); |
69 | break; | 131 | break; |
70 | case "useWebGl": | 132 | case "useWebGl": |
71 | var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); | 133 | canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); |
72 | canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); | 134 | canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); |
73 | canvas.width = el.width; | 135 | canvas.width = el.width; |
74 | canvas.height = el.height; | 136 | canvas.height = el.height; |
75 | canvas.elementModel = el.elementModel; | 137 | canvas.elementModel = el.elementModel; |
76 | this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el); | 138 | this.toggleWebGlMode(canvas, value); |
77 | NJevent("elementsRemoved", el); | 139 | this.application.ninja.elementMediator.replaceElement(canvas, el); |
78 | el = canvas; | 140 | break; |
79 | this.toggleWebGlMode(el, value); | ||
80 | el.elementModel.shapeModel.GLWorld.render(); | ||
81 | this.application.ninja.selectionController.selectElement(el); | ||
82 | return; | ||
83 | case "strokeMaterial": | 141 | case "strokeMaterial": |
84 | var sm = Object.create(MaterialsModel.getMaterial(value)); | 142 | m = Object.create(MaterialsModel.getMaterial(value)); |
85 | if(sm) | 143 | if(m) |
86 | { | 144 | { |
87 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); | 145 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); |
88 | el.elementModel.shapeModel.strokeMaterial = sm; | 146 | color = this.getMaterialColor(value); |
147 | if(color) | ||
148 | { | ||
149 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); | ||
150 | } | ||
89 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 151 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
90 | el.elementModel.shapeModel.GLWorld.render(); | 152 | el.elementModel.shapeModel.GLWorld.render(); |
91 | } | 153 | } |
92 | break; | 154 | break; |
93 | case "fillMaterial": | 155 | case "fillMaterial": |
94 | var fm = Object.create(MaterialsModel.getMaterial(value)); | 156 | m = Object.create(MaterialsModel.getMaterial(value)); |
95 | if(fm) | 157 | if(m) |
96 | { | 158 | { |
97 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | 159 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); |
98 | el.elementModel.shapeModel.fillMaterial = fm; | 160 | color = this.getMaterialColor(value); |
161 | if(color) | ||
162 | { | ||
163 | el.elementModel.shapeModel.GLGeomObj.setFillColor(color); | ||
164 | } | ||
99 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 165 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
100 | el.elementModel.shapeModel.GLWorld.render(); | 166 | el.elementModel.shapeModel.GLWorld.render(); |
101 | } | 167 | } |
102 | break; | 168 | break; |
103 | case "editStrokeMaterial": | 169 | case "editStrokeMaterial": |
104 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); | 170 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")}); |
105 | break; | 171 | break; |
106 | case "editFillMaterial": | 172 | case "editFillMaterial": |
107 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); | 173 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")}); |
108 | break; | 174 | break; |
109 | case "animate": | 175 | case "animate": |
110 | if(value) | 176 | if(value) |
@@ -148,6 +214,7 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
148 | default: | 214 | default: |
149 | CanvasController.setProperty(el, p, value); | 215 | CanvasController.setProperty(el, p, value); |
150 | } | 216 | } |
217 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
151 | } | 218 | } |
152 | }, | 219 | }, |
153 | 220 | ||
@@ -160,11 +227,13 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
160 | case "trRadius": | 227 | case "trRadius": |
161 | case "blRadius": | 228 | case "blRadius": |
162 | case "brRadius": | 229 | case "brRadius": |
163 | case "border": | ||
164 | case "background": | ||
165 | case "useWebGl": | 230 | case "useWebGl": |
166 | case "animate": | 231 | case "animate": |
167 | return this.getShapeProperty(el, p); | 232 | return this.getShapeProperty(el, p); |
233 | case "border": | ||
234 | return this.getColor(el, false); | ||
235 | case "background": | ||
236 | return this.getColor(el, true); | ||
168 | case "strokeHardness": | 237 | case "strokeHardness": |
169 | if (el.elementModel && el.elementModel.shapeModel){ | 238 | if (el.elementModel && el.elementModel.shapeModel){ |
170 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); | 239 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); |
@@ -203,11 +272,20 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
203 | 272 | ||
204 | 273 | ||
205 | case "strokeMaterial": | 274 | case "strokeMaterial": |
275 | var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); | ||
276 | if(sm) | ||
277 | { | ||
278 | return sm.getName(); | ||
279 | } | ||
280 | else | ||
281 | { | ||
282 | return "FlatMaterial"; | ||
283 | } | ||
206 | case "fillMaterial": | 284 | case "fillMaterial": |