diff options
Diffstat (limited to 'js/controllers/elements/shapes-controller.js')
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 262 |
1 files changed, 243 insertions, 19 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index 3423a5a7..ef453bea 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
6 | 6 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | CanvasController = require("js/controllers/elements/canvas-controller").CanvasController, | 8 | CanvasController = require("js/controllers/elements/canvas-controller").CanvasController, |
9 | njModule = require("js/lib/NJUtils"); | 9 | njModule = require("js/lib/NJUtils"), |
10 | 10 | World = require("js/lib/drawing/world").World, | |
11 | var World = require("js/lib/drawing/world").World; | 11 | MaterialsModel = require("js/models/materials-model").MaterialsModel; |
12 | var MaterialsModel = require("js/models/materials-model").MaterialsModel; | ||
13 | 12 | ||
14 | exports.ShapesController = Montage.create(CanvasController, { | 13 | exports.ShapesController = Montage.create(CanvasController, { |
15 | 14 | ||
@@ -100,6 +99,51 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
100 | el.elementModel.shapeModel.GLWorld.render(); | 99 | el.elementModel.shapeModel.GLWorld.render(); |
101 | } | 100 | } |
102 | break; | 101 | break; |
102 | case "editStrokeMaterial": | ||
103 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); | ||
104 | break; | ||
105 | case "editFillMaterial": | ||
106 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); | ||
107 | break; | ||
108 | case "animate": | ||
109 | if(value) | ||
110 | { | ||
111 | el.elementModel.shapeModel.animate = true; | ||
112 | el.elementModel.shapeModel.GLWorld._previewAnimation = true; | ||
113 | el.elementModel.shapeModel.GLWorld.restartRenderLoop(); | ||
114 | } | ||
115 | else | ||
116 | { | ||
117 | el.elementModel.shapeModel.animate = false; | ||
118 | el.elementModel.shapeModel.GLWorld._previewAnimation = false; | ||
119 | el.elementModel.shapeModel.GLWorld._canvas.task.stop(); | ||
120 | } | ||
121 | break; | ||
122 | case "strokeHardness": | ||
123 | this.setShapeProperty(el, "strokeHardness", value); | ||
124 | el.elementModel.shapeModel.GLGeomObj.setStrokeHardness(val); | ||
125 | el.elementModel.shapeModel.GLWorld.render(); | ||
126 | break; | ||
127 | case "strokeSmoothing": | ||
128 | this.setShapeProperty(el, "strokeSmoothing", value); | ||
129 | el.elementModel.shapeModel.GLGeomObj.setSmoothingAmount(val); | ||
130 | el.elementModel.shapeModel.GLWorld.render(); | ||
131 | break; | ||
132 | case "doSmoothing": | ||
133 | this.setShapeProperty(el, "doSmoothing", value); | ||
134 | el.elementModel.shapeModel.GLGeomObj.setDoSmoothing(value); | ||
135 | el.elementModel.shapeModel.GLWorld.render(); | ||
136 | break; | ||
137 | case "isCalligraphic": | ||
138 | this.setShapeProperty(el, "isCalligraphic", value); | ||
139 | el.elementModel.shapeModel.GLGeomObj.setStrokeUseCalligraphic(value); | ||
140 | el.elementModel.shapeModel.GLWorld.render(); | ||
141 | break; | ||
142 | case "strokeAngle": | ||
143 | this.setShapeProperty(el, "strokeAngle", value); | ||
144 | el.elementModel.shapeModel.GLGeomObj.setStrokeAngle(Math.PI * val/180); | ||
145 | el.elementModel.shapeModel.GLWorld.render(); | ||
146 | break; | ||
103 | default: | 147 | default: |
104 | CanvasController.setProperty(el, p, value); | 148 | CanvasController.setProperty(el, p, value); |
105 | } | 149 | } |
@@ -118,7 +162,45 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
118 | case "border": | 162 | case "border": |
119 | case "background": | 163 | case "background": |
120 | case "useWebGl": | 164 | case "useWebGl": |
165 | case "animate": | ||
121 | return this.getShapeProperty(el, p); | 166 | return this.getShapeProperty(el, p); |
167 | case "strokeHardness": | ||
168 | if (el.elementModel && el.elementModel.shapeModel){ | ||
169 | return el.elementModel.shapeModel.GLGeomObj.getStrokeHardness(); | ||
170 | } else { | ||
171 | return null; | ||
172 | } | ||
173 | break; | ||
174 | case "doSmoothing": | ||
175 | if (el.elementModel && el.elementModel.shapeModel){ | ||
176 | return el.elementModel.shapeModel.GLGeomObj.getDoSmoothing(); | ||
177 | } else { | ||
178 | return null; | ||
179 | } | ||
180 | break; | ||
181 | case "strokeSmoothing": | ||
182 | if (el.elementModel && el.elementModel.shapeModel){ | ||
183 | return el.elementModel.shapeModel.GLGeomObj.getSmoothingAmount(); | ||
184 | } else { | ||
185 | return null; | ||
186 | } | ||
187 | break; | ||
188 | case "isCalligraphic": | ||
189 | if (el.elementModel && el.elementModel.shapeModel){ | ||
190 | return el.elementModel.shapeModel.GLGeomObj.getStrokeUseCalligraphic(); | ||
191 | } else { | ||
192 | return null; | ||
193 | } | ||
194 | break; | ||
195 | case "strokeAngle": | ||
196 | if (el.elementModel && el.elementModel.shapeModel){ | ||
197 | return 180*el.elementModel.shapeModel.GLGeomObj.getStrokeAngle()/Math.PI; | ||
198 | } else { | ||
199 | return null; | ||
200 | } | ||
201 | break; | ||
202 | |||
203 | |||
122 | case "strokeMaterial": | 204 | case "strokeMaterial": |
123 | case "fillMaterial": | 205 | case "fillMaterial": |
124 | var m = this.getShapeProperty(el, p); | 206 | var m = this.getShapeProperty(el, p); |
@@ -254,29 +336,91 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
254 | color = this.getShapeProperty(el, "stroke"); | 336 | color = this.getShapeProperty(el, "stroke"); |
255 | } | 337 | } |
256 | 338 | ||
339 | if(!css) { | ||
340 | return null; | ||
341 | } | ||
342 | |||
257 | css = this.application.ninja.colorController.colorModel.webGlToCss(color); | 343 | css = this.application.ninja.colorController.colorModel.webGlToCss(color); |
258 | return this.application.ninja.colorController.getColorObjFromCss(css); | 344 | return this.application.ninja.colorController.getColorObjFromCss(css); |
259 | } | 345 | } |
260 | }, | 346 | }, |
261 | 347 | ||
262 | setColor: { | 348 | _setGradientMaterial: { |
263 | value: function(el, color, isFill) { | 349 | value: function(el, gradientMode, isFill) { |
264 | var webGl = color.webGlColor || color.color.webGlColor; | 350 | var m = "LinearGradientMaterial", |
265 | if(!webGl) | 351 | fm; |
352 | if(gradientMode === "radial") | ||
266 | { | 353 | { |
267 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | 354 | m = "RadialGradientMaterial"; |
268 | } | 355 | } |
356 | |||
269 | if(isFill) | 357 | if(isFill) |
270 | { | 358 | { |
271 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | 359 | if(el.elementModel.shapeModel.fillMaterial.getName() !== m) |
272 | this.setShapeProperty(el, "fill", webGl); | 360 | { |
273 | this.setShapeProperty(el, "background", color); | 361 | fm = Object.create(MaterialsModel.getMaterial(m)); |
362 | if(fm) | ||
363 | { | ||
364 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | ||
365 | el.elementModel.shapeModel.fillMaterial = fm; | ||
366 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
367 | } | ||
368 | } | ||
369 | } | ||
370 | else | ||
371 | { | ||
372 | if(el.elementModel.shapeModel.strokeMaterial.getName() !== m) | ||
373 | { | ||
374 | fm = Object.create(MaterialsModel.getMaterial(m)); | ||
375 | if(fm) | ||
376 | { | ||
377 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm); | ||
378 | el.elementModel.shapeModel.strokeMaterial = fm; | ||
379 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
380 | } | ||
381 | } | ||
382 | } | ||
383 | } | ||
384 | }, | ||
385 | |||
386 | setColor: { | ||
387 | value: function(el, color, isFill) { | ||
388 | var mode = color.mode, | ||
389 | webGl; | ||
390 | if(isFill) | ||
391 | { | ||
392 | if(mode) | ||
393 | { | ||
394 | switch (mode) { | ||
395 | case 'nocolor': | ||
396 | el.elementModel.shapeModel.GLGeomObj.setFillColor(null); | ||
397 | this.setShapeProperty(el, "fill", null); | ||
398 | this.setShapeProperty(el, "background", color); | ||
399 | el.elementModel.fill = null; | ||
400 | return; | ||
401 | case 'gradient': | ||
402 | if(el.elementModel.shapeModel.useWebGl) | ||
403 | { | ||
404 | this._setGradientMaterial(el, color.color.gradientMode, isFill); | ||
405 | } | ||
406 | el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops}); | ||
407 | el.elementModel.shapeModel.GLWorld.render(); | ||
408 | this.setShapeProperty(el, "fill", color.color.css); | ||
409 | this.setShapeProperty(el, "background", color); | ||
410 | el.elementModel.fill = color; | ||
411 | break; | ||
412 | default: | ||
413 | webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color); | ||
414 | el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl); | ||
415 | this.setShapeProperty(el, "fill", webGl); | ||
416 | this.setShapeProperty(el, "background", color); | ||