diff options
Diffstat (limited to 'js/controllers/elements/shapes-controller.js')
-rw-r--r-- | js/controllers/elements/shapes-controller.js | 238 |
1 files changed, 238 insertions, 0 deletions
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js new file mode 100644 index 00000000..d34644a7 --- /dev/null +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -0,0 +1,238 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; | ||
9 | |||
10 | exports.ShapesController = Montage.create(CanvasController, { | ||
11 | |||
12 | setProperty: { | ||
13 | value: function(el, p, value) { | ||
14 | var val = parseInt(value); | ||
15 | switch(p) { | ||
16 | case "strokeSize": | ||
17 | // TODO - For now, just handling px units. | ||
18 | this.setShapeProperty(el, "strokeSize", value); | ||
19 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); | ||
20 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
21 | break; | ||
22 | case "innerRadius": | ||
23 | this.setShapeProperty(el, "innerRadius", value); | ||
24 | el.elementModel.shapeModel.GLGeomObj.setInnerRadius(val/100); | ||
25 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
26 | break; | ||
27 | case "width": | ||
28 | el.elementModel.shapeModel.GLGeomObj.setWidth(val); | ||
29 | CanvasController.setProperty(el, p, value); | ||
30 | el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el); | ||
31 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
32 | break; | ||
33 | case "height": | ||
34 | el.elementModel.shapeModel.GLGeomObj.setHeight(val); | ||
35 | CanvasController.setProperty(el, p, value); | ||
36 | el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el); | ||
37 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
38 | break; | ||
39 | default: | ||
40 | CanvasController.setProperty(el, p, value); | ||
41 | } | ||
42 | el.elementModel.shapeModel.GLWorld.render(); | ||
43 | } | ||
44 | }, | ||
45 | |||
46 | getProperty: { | ||
47 | value: function(el, p) { | ||
48 | switch(p) { | ||
49 | case "strokeSize": | ||
50 | case "innerRadius": | ||
51 | return this.getShapeProperty(el, p); | ||
52 | default: | ||
53 | return CanvasController.getProperty(el, p); | ||
54 | } | ||
55 | } | ||
56 | }, | ||
57 | |||
58 | getShapeProperty: { | ||
59 | value: function(el, prop) { | ||
60 | if(el.elementModel && el.elementModel.shapeModel) | ||
61 | { | ||
62 | return el.elementModel.shapeModel[prop]; | ||
63 | } | ||
64 | else | ||
65 | { | ||
66 | console.log("No shapeModel, one should have been created already"); | ||
67 | return null; | ||
68 | } | ||
69 | } | ||
70 | }, | ||
71 | |||
72 | setShapeProperty: { | ||
73 | value: function(el, prop, value) { | ||
74 | if(el.elementModel && el.elementModel.shapeModel) | ||
75 | { | ||
76 | el.elementModel.shapeModel[prop] = value; | ||
77 | } | ||
78 | else | ||
79 | { | ||
80 | console.log("No shapeModel, one should have been created already"); | ||
81 | } | ||
82 | } | ||
83 | }, | ||
84 | |||
85 | GetValueInPixels: { | ||
86 | value: function(value, units, h) | ||
87 | { | ||
88 | switch(units) | ||
89 | { | ||
90 | case "px": | ||
91 | { | ||
92 | return value; | ||
93 | } | ||
94 | case "pt": | ||
95 | { | ||
96 | return ~~(value*4/3); | ||
97 | } | ||
98 | case "%": | ||
99 | { | ||
100 | if(h) | ||
101 | { | ||
102 | return ~~(value/100*h); | ||
103 | } | ||
104 | else | ||
105 | { | ||
106 | console.warn("Can't use % for a line's stroke size, using 10 for the value."); | ||
107 | return 10; | ||
108 | } | ||
109 | } | ||
110 | } | ||
111 | } | ||
112 | }, | ||
113 | |||
114 | CapWorldPercentFromValue: { | ||
115 | value: function(value, units, h) | ||
116 | { | ||
117 | return Math.min(this.GetWorldPercentFromValue(value, units, h), 2); | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | GetWorldPercentFromValue: { | ||
122 | value: function(value, units, h) | ||
123 | { | ||
124 | switch(units) | ||
125 | { | ||
126 | case "pt": | ||
127 | { | ||
128 | value = Math.round(value*4/3); | ||
129 | return 4*value/h; | ||
130 | } | ||
131 | case "px": | ||
132 | { | ||
133 | return 4*value/h; | ||
134 | } | ||
135 | case "%": | ||
136 | { | ||
137 | // Our calculations in GLWorld use 2 = 100%, so our calculations would usually be value/50, | ||
138 | // but in order to get values other than 0, 1, and 2, we need to multiply by 10, round that value, | ||
139 | // and then divide by 50*10 again. | ||
140 | // 100*10 = 1000/500 = 2 | ||
141 | // 20*10 = 200/500 = 0.4 | ||
142 | // 50*10 = 500/500 = 1 | ||
143 | return Math.round(value*10)/500; | ||
144 | } | ||
145 | default: | ||
146 | { | ||
147 | console.warn("Unhandled units " + units); | ||
148 | } | ||
149 | } | ||
150 | } | ||
151 | }, | ||
152 | |||
153 | //-------------------------------------------------------------------------------------------------------- | ||
154 | // Routines to get/set color properties | ||
155 | getColor: { | ||
156 | value: function(el, isFill) { | ||
157 | if(isFill) | ||
158 | { | ||
159 | return this.getShapeProperty(el, "fill"); | ||
160 | } | ||
161 | else | ||
162 | { | ||
163 | return this.getShapeProperty(el, "stroke"); | ||
164 | } | ||
165 | } | ||
166 | }, | ||
167 | |||
168 | setColor: { | ||
169 | value: function(el, color, isFill) { | ||
170 | // TODO - Format color for webGL before setting | ||
171 | color = color.webGlColor; | ||
172 | if(isFill) | ||
173 | { | ||
174 | el.elementModel.shapeModel.GLGeomObj.setFillColor(color); | ||
175 | this.setShapeProperty(el, "fill", color); | ||
176 | } | ||
177 | else | ||
178 | { | ||
179 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color); | ||
180 | this.setShapeProperty(el, "stroke", color); | ||
181 | } | ||
182 | el.elementModel.shapeModel.GLWorld.render(); | ||
183 | } | ||
184 | }, | ||
185 | |||
186 | getStroke: { | ||
187 | value: function(el) { | ||
188 | // TODO - Need to figure out which border side user wants | ||
189 | var size = this.getShapeProperty(el, "strokeSize"); | ||
190 | var color = this.getShapeProperty(el, "stroke"); | ||
191 | return {stroke:color, strokeSize:size}; | ||
192 | } | ||
193 | }, | ||
194 | |||
195 | setStroke: { | ||
196 | value: function(el, stroke) { | ||
197 | el.elementModel.shapeModel.GLGeomObj.setStrokeColor(stroke.color.webGlColor); | ||
198 | var strokeWidth = this.GetValueInPixels(stroke.strokeSize, stroke.strokeUnits); | ||
199 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth); | ||
200 | this.setShapeProperty(el, "stroke", stroke.color.webGlColor); | ||
201 | this.setShapeProperty(el, "strokeSize", stroke.strokeSize + " " + stroke.strokeUnits); | ||
202 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | ||
203 | el.elementModel.shapeModel.GLWorld.render(); | ||
204 | } | ||
205 | }, | ||
206 | |||
207 | DisplayMaterials: { | ||
208 | value: function (cb) | ||
209 | { | ||
210 | |||
211 | var optionItem = document.createElement("option"); | ||
212 | optionItem.value = 0; | ||
213 | optionItem.innerText = "Default"; | ||
214 | cb.appendChild(optionItem); | ||
215 | |||
216 | var materials = MaterialsLibrary.materials; | ||
217 | var len = materials.length; | ||
218 | |||
219 | var i; | ||
220 | for (i = 0; i < len; i++) | ||
221 | { | ||
222 | var current = materials[i]; | ||
223 | optionItem = document.createElement("option"); | ||
224 | optionItem.value = i+1; | ||
225 | optionItem.innerText = current.getName(); | ||
226 | cb.appendChild(optionItem); | ||
227 | } | ||
228 | } | ||