diff options
Diffstat (limited to 'js/controllers/elements/shapes-controller.js')
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 377 |
1 files changed, 244 insertions, 133 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index ef453bea..236e9caa 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,42 +118,48 @@ 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 | this.application.ninja.elementMediator.replaceElement(el, canvas); | 125 | this.application.ninja.elementMediator.replaceElement(el, canvas); |
76 | NJevent("elementDeleted", el); | 126 | NJevent("elementDeleted", el); |
77 | el = canvas; | 127 | this.toggleWebGlMode(canvas, value); |
78 | this.toggleWebGlMode(el, value); | 128 | NJevent("elementAdded", canvas); |
79 | el.elementModel.shapeModel.GLWorld.render(); | 129 | break; |
80 | this.application.ninja.selectionController.selectElement(el); | ||
81 | return; | ||
82 | case "strokeMaterial": | 130 | case "strokeMaterial": |
83 | var sm = Object.create(MaterialsModel.getMaterial(value)); | 131 | m = Object.create(MaterialsModel.getMaterial(value)); |
84 | if(sm) | 132 | if(m) |
85 | { | 133 | { |
86 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); | 134 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); |
87 | el.elementModel.shapeModel.strokeMaterial = sm; | 135 | color = this.getMaterialColor(value); |
136 | if(color) | ||
137 | { | ||
138 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); | ||
139 | } | ||
88 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 140 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
89 | el.elementModel.shapeModel.GLWorld.render(); | 141 | el.elementModel.shapeModel.GLWorld.render(); |
90 | } | 142 | } |
91 | break; | 143 | break; |
92 | case "fillMaterial": | 144 | case "fillMaterial": |
93 | var fm = Object.create(MaterialsModel.getMaterial(value)); | 145 | m = Object.create(MaterialsModel.getMaterial(value)); |
94 | if(fm) | 146 | if(m) |
95 | { | 147 | { |
96 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | 148 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); |
97 | el.elementModel.shapeModel.fillMaterial = fm; | 149 | color = this.getMaterialColor(value); |
150 | if(color) | ||
151 | { | ||
152 | el.elementModel.shapeModel.GLGeomObj.setFillColor(color); | ||
153 | } | ||
98 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 154 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
99 | el.elementModel.shapeModel.GLWorld.render(); | 155 | el.elementModel.shapeModel.GLWorld.render(); |
100 | } | 156 | } |
101 | break; | 157 | break; |
102 | case "editStrokeMaterial": | 158 | case "editStrokeMaterial": |
103 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); | 159 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")}); |
104 | break; | 160 | break; |
105 | case "editFillMaterial": | 161 | case "editFillMaterial": |
106 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); | 162 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")}); |
107 | break; | 163 | break; |
108 | case "animate": | 164 | case "animate": |
109 | if(value) | 165 | if(value) |
@@ -147,6 +203,7 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
147 | default: | 203 | default: |
148 | CanvasController.setProperty(el, p, value); | 204 | CanvasController.setProperty(el, p, value); |
149 | } | 205 | } |
206 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
150 | } | 207 | } |
151 | }, | 208 | }, |
152 | 209 | ||
@@ -159,11 +216,13 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
159 | case "trRadius": | 216 | case "trRadius": |
160 | case "blRadius": | 217 | case "blRadius": |
161 | case "brRadius": | 218 | case "brRadius": |
162 | case "border": | ||
163 | case "background": | ||
164 | case "useWebGl": | 219 | case "useWebGl": |
165 | case "animate": | 220 | case "animate": |
166 | return this.getShapeProperty(el, p); | 221 | return this.getShapeProperty(el, p); |
222 | case "border": | ||
223 | return this.getColor(el, false); | ||
224 | case "background": | ||
225 | return this.getColor(el, true); | ||
167 | case "strokeHardness": | 226 | case "strokeHardness": |
168 | if (el.elementModel && el.elementModel.shapeModel){ | 227 | if (el.elementModel && el.elementModel.shapeModel){ |
169 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); | 228 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); |
@@ -202,11 +261,20 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
202 | 261 | ||
203 | 262 | ||
204 | case "strokeMaterial": | 263 | case "strokeMaterial": |
264 | var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial(); | ||
265 | if(sm) | ||
266 | { | ||
267 | return sm.getName(); | ||
268 | } | ||
269 | else | ||
270 | { | ||
271 | return "FlatMaterial"; | ||
272 | } | ||
205 | case "fillMaterial": | 273 | case "fillMaterial": |
206 | var m = this.getShapeProperty(el, p); | 274 | var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial(); |
207 | if(m) | 275 | if(fm) |
208 | { | 276 | { |
209 | return this.getShapeProperty(el, p).getName(); | 277 | return fm.getName(); |
210 | } | 278 | } |
211 | else | 279 | else |
212 | { | 280 | { |
@@ -317,70 +385,97 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
317 | // Routines to get/set color properties | 385 | // Routines to get/set color properties |
318 | getColor: { | 386 | getColor: { |
319 | value: function(el, isFill) { | 387 | value: function(el, isFill) { |
320 | var color, | ||
321 | css; |