diff options
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 371 |
1 files changed, 242 insertions, 129 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index e792c646..f9b63942 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -13,12 +13,62 @@ 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 | // Changing stroke size should grow/shrink the shape from the center. | ||
26 | var delta = ~~(val - el.elementModel.shapeModel.GLGeomObj.getStrokeWidth()), | ||
27 | l = this.application.ninja.elementMediator.getProperty(el, "left", parseInt), | ||
28 | t = this.application.ninja.elementMediator.getProperty(el, "top", parseInt), | ||
29 | w = this.application.ninja.elementMediator.getProperty(el, "width", parseInt), | ||
30 | h = this.application.ninja.elementMediator.getProperty(el, "height", parseInt); | ||
31 | |||
32 | if(el.elementModel.selection === "Line") | ||
33 | { | ||
34 | var slope = el.elementModel.shapeModel.slope; | ||
35 | // set the dimensions | ||
36 | if(slope === "horizontal") | ||
37 | { | ||
38 | h = Math.max(val, 1); | ||
39 | } | ||
40 | else if(slope === "vertical") | ||
41 | { | ||
42 | w = Math.max(val, 1); | ||
43 | } | ||
44 | else | ||
45 | { | ||
46 | var oldXAdj = el.elementModel.shapeModel.GLGeomObj.getXAdj(); | ||
47 | var oldYAdj = el.elementModel.shapeModel.GLGeomObj.getYAdj(); | ||
48 | var theta = Math.atan(el.elementModel.shapeModel.slope); | ||
49 | var xAdj = Math.abs((val/2)*Math.sin(theta)); | ||
50 | var yAdj = Math.abs((val/2)*Math.cos(theta)); | ||
51 | var dX = ~~(xAdj*2 - oldXAdj*2); | ||
52 | var dY = ~~(yAdj*2 - oldYAdj*2); | ||
53 | |||
54 | if(delta > 0) | ||
55 | { | ||
56 | l -= dX*2; | ||
57 | t -= dY*2; | ||
58 | w += dX*2; | ||
59 | h += dY*2; | ||
60 | } | ||
61 | |||
62 | el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj); | ||
63 | el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj); | ||
64 | |||
65 | } | ||
66 | } | ||
67 | this.application.ninja.elementMediator.setProperties([el], | ||
68 | { "left": [l + "px"], | ||
69 | "top": [t + "px"], | ||
70 | "width": [w + "px"], | ||
71 | "height": [h + "px"] }, eventType, source ); | ||
22 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); | 72 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); |
23 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 73 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
24 | el.elementModel.shapeModel.GLWorld.render(); | 74 | el.elementModel.shapeModel.GLWorld.render(); |
@@ -68,39 +118,47 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
68 | el.elementModel.shapeModel.GLWorld.render(); | 118 | el.elementModel.shapeModel.GLWorld.render(); |
69 | break; | 119 | break; |
70 | case "useWebGl": | 120 | case "useWebGl": |
71 | var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); | 121 | canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); |
72 | canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); | 122 | canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); |
73 | canvas.width = el.width; | 123 | canvas.width = el.width; |
74 | canvas.height = el.height; | 124 | canvas.height = el.height; |
75 | canvas.elementModel = el.elementModel; | 125 | canvas.elementModel = el.elementModel; |
76 | this.toggleWebGlMode(canvas, value); | 126 | this.toggleWebGlMode(canvas, value); |
77 | this.application.ninja.elementMediator.replaceElement(canvas, el); | 127 | this.application.ninja.elementMediator.replaceElement(canvas, el); |
78 | return; | 128 | break; |
79 | case "strokeMaterial": | 129 | case "strokeMaterial": |
80 | var sm = Object.create(MaterialsModel.getMaterial(value)); | 130 | m = Object.create(MaterialsModel.getMaterial(value)); |
81 | if(sm) | 131 | if(m) |
82 | { | 132 | { |
83 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); | 133 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); |
84 | el.elementModel.shapeModel.strokeMaterial = sm; | 134 | color = this.getMaterialColor(value); |
135 | if(color) | ||
136 | { | ||
137 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); | ||
138 | } | ||
85 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 139 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
86 | el.elementModel.shapeModel.GLWorld.render(); | 140 | el.elementModel.shapeModel.GLWorld.render(); |
87 | } | 141 | } |
88 | break; | 142 | break; |
89 | case "fillMaterial": | 143 | case "fillMaterial": |
90 | var fm = Object.create(MaterialsModel.getMaterial(value)); | 144 | m = Object.create(MaterialsModel.getMaterial(value)); |
91 | if(fm) | 145 | if(m) |
92 | { | 146 | { |
93 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | 147 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); |
94 | el.elementModel.shapeModel.fillMaterial = fm; | 148 | color = this.getMaterialColor(value); |
149 | if(color) | ||
150 | { | ||
151 | el.elementModel.shapeModel.GLGeomObj.setFillColor(color); | ||
152 | } | ||
95 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 153 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
96 | el.elementModel.shapeModel.GLWorld.render(); | 154 | el.elementModel.shapeModel.GLWorld.render(); |
97 | } | 155 | } |
98 | break; | 156 | break; |
99 | case "editStrokeMaterial": | 157 | case "editStrokeMaterial": |
100 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); | 158 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")}); |
101 | break; | 159 | break; |
102 | case "editFillMaterial": | 160 | case "editFillMaterial": |
103 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); | 161 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")}); |
104 | break; | 162 | break; |
105 | case "animate": | 163 | case "animate": |
106 | if(value) | 164 | if(value) |
@@ -144,6 +202,7 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
144 | default: | 202 | default: |
145 | CanvasController.setProperty(el, p, value); | 203 | CanvasController.setProperty(el, p, value); |
146 | } | 204 | } |
205 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
147 | } | 206 | } |
148 | }, | 207 | }, |
149 | 208 | ||
@@ -156,11 +215,13 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
156 | case "trRadius": | 215 | case "trRadius": |
157 | case "blRadius": | 216 | case "blRadius": |
158 | case "brRadius": | 217 | case "brRadius": |
159 | case "border": | ||
160 | case "background": | ||
161 | case "useWebGl": | 218 | case "useWebGl": |
162 | case "animate": | 219 | case "animate": |
163 | return this.getShapeProperty(el, p); | 220 | return this.getShapeProperty(el, p); |
221 | case "border": | ||
222 | return this.getColor(el, false); | ||
223 | case "background": | ||
224 | return this.getColor(el, true); | ||
164 | case "strokeHardness": | 225 | case "strokeHardness": |
165 | if (el.elementModel && el.elementModel.shapeModel){ | 226 | if (el.elementModel && el.elementModel.shapeModel){ |
166 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); | 227 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); |
@@ -199,11 +260,20 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
199 | 260 | ||
200 | 261 | ||
201 | case "strokeMaterial": | 262 | case "strokeMaterial": |
263 | var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); | ||
264 | if(sm) | ||
265 | { | ||
266 | return sm.getName(); | ||
267 | } | ||
268 | else | ||
269 | { | ||
270 | return "FlatMaterial"; | ||
271 | } | ||
202 | case "fillMaterial": | 272 | case "fillMaterial": |
203 | var m = this.getShapeProperty(el, p); | 273 | var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial(); |
204 | if(m) | 274 | if(fm) |
205 | { | 275 | { |
206 | return this.getShapeProperty(el, p).getName(); | 276 | return fm.getName(); |
207 | } | 277 | } |
208 | else | 278 | else |
209 | { | 279 | { |
@@ -314,70 +384,97 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
314 | // Routines to get/set color properties | 384 | // Routines to get/set color properties |
315 | getColor: { | 385 | getColor: { |
316 | value: function(el, isFill) { | 386 | value: function(el, isFill) { |
317 | var color, | ||
318 | css; | ||
319 | if(isFill) | 387 | if(isFill) |
320 | { | 388 | { |
321 | if(el.elementModel.shapeModel.ba |