diff options
author | Nivesh Rajbhandari | 2012-04-04 17:24:27 -0700 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-04-04 17:24:27 -0700 |
commit | 01cf259da7aaa7d70789d9a7c32111d88b477463 (patch) | |
tree | 0bff3395ac681e5f685d2267f7dbc03a8e32bc4a /js/controllers/elements/shapes-controller.js | |
parent | 331ea08655245e3532e48bf160d5f68a04d8723f (diff) | |
parent | 13368ca6ebbc13adeafccd898dfffd7ce37cb28a (diff) | |
download | ninja-01cf259da7aaa7d70789d9a7c32111d88b477463.tar.gz |
Merge branch 'refs/heads/ToolFixes' into WebGLMaterials
Conflicts:
js/document/templates/montage-html/default_html.css
js/mediators/element-mediator.js
js/panels/properties.reel/properties.js
js/tools/BrushTool.js
js/tools/LineTool.js
js/tools/PenTool.js
js/tools/SelectionTool.js
js/tools/ShapeTool.js
js/tools/TranslateObject3DTool.js
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js/controllers/elements/shapes-controller.js')
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 442 |
1 files changed, 307 insertions, 135 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index f18801fd..b97d04b0 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,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 | this.application.ninja.elementMediator.replaceElement(el, canvas); | 125 | canvas.elementModel = el.elementModel; |
76 | NJevent("elementDeleted", el); | 126 | this.toggleWebGlMode(canvas, value); |
77 | el = canvas; | 127 | this.application.ninja.elementMediator.replaceElement(canvas, el); |
78 | this.toggleWebGlMode(el, value); | 128 | break; |
79 | el.elementModel.shapeModel.GLWorld.render(); | ||
80 | this.application.ninja.selectionController.selectElement(el); | ||
81 | return; | ||
82 | case "strokeMaterial": | 129 | case "strokeMaterial": |
83 | var sm = Object.create(MaterialsModel.getMaterial(value)); | 130 | m = Object.create(MaterialsModel.getMaterial(value)); |
84 | if(sm) | 131 | if(m) |
85 | { | 132 | { |
86 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm); | 133 | el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(m); |
87 | el.elementModel.shapeModel.strokeMaterial = sm; | 134 | color = this.getMaterialColor(value); |
135 | if(color) | ||
136 | { | ||
137 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); | ||
138 | } | ||
88 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 139 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
89 | el.elementModel.shapeModel.GLWorld.render(); | 140 | el.elementModel.shapeModel.GLWorld.render(); |
90 | } | 141 | } |
91 | break; | 142 | break; |
92 | case "fillMaterial": | 143 | case "fillMaterial": |
93 | var fm = Object.create(MaterialsModel.getMaterial(value)); | 144 | m = Object.create(MaterialsModel.getMaterial(value)); |
94 | if(fm) | 145 | if(m) |
95 | { | 146 | { |
96 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm); | 147 | el.elementModel.shapeModel.GLGeomObj.setFillMaterial(m); |
97 | el.elementModel.shapeModel.fillMaterial = fm; | 148 | color = this.getMaterialColor(value); |
149 | if(color) | ||
150 | { | ||
151 | el.elementModel.shapeModel.GLGeomObj.setFillColor(color); | ||
152 | } | ||
98 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 153 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
99 | el.elementModel.shapeModel.GLWorld.render(); | 154 | el.elementModel.shapeModel.GLWorld.render(); |
100 | } | 155 | } |
101 | break; | 156 | break; |
102 | case "editStrokeMaterial": | 157 | case "editStrokeMaterial": |
103 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()}); | 158 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")}); |
104 | break; | 159 | break; |
105 | case "editFillMaterial": | 160 | case "editFillMaterial": |
106 | NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()}); | 161 | NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")}); |
107 | break; | 162 | break; |
108 | case "animate": | 163 | case "animate": |
109 | if(value) | 164 | if(value) |
@@ -119,9 +174,35 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
119 | el.elementModel.shapeModel.GLWorld._canvas.task.stop(); | 174 | el.elementModel.shapeModel.GLWorld._canvas.task.stop(); |
120 | } | 175 | } |
121 | break; | 176 | break; |
177 | case "strokeHardness": | ||
178 | this.setShapeProperty(el, "strokeHardness", value); | ||
179 | el.elementModel.shapeModel.GLGeomObj.setStrokeHardness(val); | ||
180 | el.elementModel.shapeModel.GLWorld.render(); | ||
181 | break; | ||
182 | case "strokeSmoothing": | ||
183 | this.setShapeProperty(el, "strokeSmoothing", value); | ||
184 | el.elementModel.shapeModel.GLGeomObj.setSmoothingAmount(val); | ||
185 | el.elementModel.shapeModel.GLWorld.render(); | ||
186 | break; | ||
187 | case "doSmoothing": | ||
188 | this.setShapeProperty(el, "doSmoothing", value); | ||
189 | el.elementModel.shapeModel.GLGeomObj.setDoSmoothing(value); | ||
190 | el.elementModel.shapeModel.GLWorld.render(); | ||
191 | break; | ||
192 | case "isCalligraphic": | ||
193 | this.setShapeProperty(el, "isCalligraphic", value); | ||
194 | el.elementModel.shapeModel.GLGeomObj.setStrokeUseCalligraphic(value); | ||
195 | el.elementModel.shapeModel.GLWorld.render(); | ||
196 | break; | ||
197 | case "strokeAngle": | ||
198 | this.setShapeProperty(el, "strokeAngle", value); | ||
199 | el.elementModel.shapeModel.GLGeomObj.setStrokeAngle(Math.PI * val/180); | ||
200 | el.elementModel.shapeModel.GLWorld.render(); | ||
201 | break; | ||
122 | default: | 202 | default: |
123 | CanvasController.setProperty(el, p, value); | 203 | CanvasController.setProperty(el, p, value); |
124 | } | 204 | } |
205 | this.application.ninja.documentController.activeDocument.needsSave = true; | ||
125 | } | 206 | } |
126 | }, | 207 | }, |
127 | 208 | ||
@@ -134,17 +215,65 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
134 | case "trRadius": | 215 | case "trRadius": |
135 | case "blRadius": | 216 | case "blRadius": |
136 | case "brRadius": | 217 | case "brRadius": |
137 | case "border": | ||
138 | case "background": | ||
139 | case "useWebGl": | 218 | case "useWebGl": |
140 | case "animate": | 219 | case "animate": |
141 | 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); | ||
225 | case "strokeHardness": | ||
226 |