diff options
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-x | js/controllers/elements/component-controller.js | 2 | ||||
-rwxr-xr-x | js/controllers/elements/element-controller.js | 69 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 395 | ||||
-rwxr-xr-x | js/controllers/elements/stage-controller.js | 36 |
4 files changed, 305 insertions, 197 deletions
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 260ee8a0..d902e4a1 100755 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js | |||
@@ -16,6 +16,7 @@ exports.ComponentController = Montage.create(ElementController, { | |||
16 | switch(prop) { | 16 | switch(prop) { |
17 | case "id": | 17 | case "id": |
18 | case "class": | 18 | case "class": |
19 | case "-webkit-transform-style": | ||
19 | case "left": | 20 | case "left": |
20 | case "top": | 21 | case "top": |
21 | case "width": | 22 | case "width": |
@@ -38,6 +39,7 @@ exports.ComponentController = Montage.create(ElementController, { | |||
38 | switch(p) { | 39 | switch(p) { |
39 | case "id": | 40 | case "id": |
40 | case "class": | 41 | case "class": |
42 | case "-webkit-transform-style": | ||
41 | case "left": | 43 | case "left": |
42 | case "top": | 44 | case "top": |
43 | case "width": | 45 | case "width": |
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index efb33292..2ac84452 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -228,11 +228,10 @@ exports.ElementController = Montage.create(Component, { | |||
228 | 228 | ||
229 | if (el) | 229 | if (el) |
230 | { | 230 | { |
231 | var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); | 231 | mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); |
232 | if (xformStr) | 232 | if (!mat) { |
233 | mat = this.transformStringToMat( xformStr ); | ||
234 | if (!mat) | ||
235 | mat = Matrix.I(4); | 233 | mat = Matrix.I(4); |
234 | } | ||
236 | } | 235 | } |
237 | 236 | ||
238 | el.elementModel.props3D.matrix3d = mat; | 237 | el.elementModel.props3D.matrix3d = mat; |
@@ -249,25 +248,7 @@ exports.ElementController = Montage.create(Component, { | |||
249 | } | 248 | } |
250 | else | 249 | else |
251 | { | 250 | { |
252 | var dist = 1400; | 251 | var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); |
253 | |||
254 | var str = this.getProperty(el, "-webkit-transform"); | ||
255 | if (str) | ||
256 | { | ||
257 | var index1 = str.indexOf( "perspective("); | ||
258 | if (index1 >= 0) | ||
259 | { | ||
260 | index1 += 12; // do not include 'perspective(' | ||
261 | var index2 = str.indexOf( ")", index1 ); | ||
262 | if (index2 >= 0) | ||
263 | { | ||
264 | var substr = str.substr( index1, (index2-index1)); | ||
265 | if (substr && (substr.length > 0)) | ||
266 | dist = MathUtils.styleToNumber( substr ); | ||
267 | } | ||
268 | } | ||
269 | } | ||
270 | |||
271 | el.elementModel.props3D.perspectiveDist = dist; | 252 | el.elementModel.props3D.perspectiveDist = dist; |
272 | return dist; | 253 | return dist; |
273 | } | 254 | } |
@@ -281,9 +262,17 @@ exports.ElementController = Montage.create(Component, { | |||
281 | mat = props[index]["mat"]; | 262 | mat = props[index]["mat"]; |
282 | this.application.ninja.stylesController.setElementStyle(el, | 263 | this.application.ninja.stylesController.setElementStyle(el, |
283 | "-webkit-transform", | 264 | "-webkit-transform", |
284 | "perspective(" + dist + ") " + | ||
285 | "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); | 265 | "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); |
286 | 266 | ||
267 | this.application.ninja.stylesController.setElementStyle(el, | ||
268 | "-webkit-transform-style", | ||
269 | "preserve-3d"); | ||
270 | |||
271 | // TODO - We don't support perspective on individual elements yet | ||
272 | // this.application.ninja.stylesController.setElementStyle(el, | ||
273 | // "-webkit-perspective", | ||
274 | // dist); | ||
275 | |||
287 | el.elementModel.props3D.matrix3d = mat; | 276 | el.elementModel.props3D.matrix3d = mat; |
288 | el.elementModel.props3D.perspectiveDist = dist; | 277 | el.elementModel.props3D.perspectiveDist = dist; |
289 | 278 | ||
@@ -308,36 +297,6 @@ exports.ElementController = Montage.create(Component, { | |||
308 | elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); | 297 | elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); |
309 | } | 298 | } |
310 | } | 299 | } |
311 | }, | ||
312 | |||
313 | transformStringToMat: { | ||
314 | value: function( str ) { | ||
315 | var rtnMat; | ||
316 | |||
317 | var index1 = str.indexOf( "matrix3d("); | ||
318 | if (index1 >= 0) | ||
319 | { | ||
320 | index1 += 9; // do not include 'matrix3d(' | ||
321 | var index2 = str.indexOf( ")", index1 ); | ||
322 | if (index2 >= 0) | ||
323 | { | ||
324 | var substr = str.substr( index1, (index2-index1)); | ||
325 | if (substr && (substr.length > 0)) | ||
326 | { | ||
327 | var numArray = substr.split(','); | ||
328 | var nNums = numArray.length; | ||
329 | if (nNums == 16) | ||
330 | { | ||
331 | // gl-matrix wants row order | ||
332 | rtnMat = numArray; | ||
333 | for (var i=0; i<16; i++) | ||
334 | rtnMat[i] = Number( rtnMat[i] ); | ||
335 | } | ||
336 | } | ||
337 | } | ||
338 | } | ||
339 | |||
340 | return rtnMat; | ||
341 | } | ||
342 | } | 300 | } |
301 | |||
343 | }); \ No newline at end of file | 302 | }); \ No newline at end of file |
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index c9164e3e..14cdc473 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -13,12 +13,74 @@ 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 | // TODO - For now, just handle Line, Rectangle and Oval. Eventually, move this into each class's | ||
26 | // setStrokeWidth code like SubPath and BrushStroke do. | ||
27 | var geomType = el.elementModel.shapeModel.GLGeomObj.geomType(); | ||
28 | if( (geomType > 0) && (geomType < 4) ) | ||
29 | { | ||
30 | // Changing stroke size should grow/shrink the shape from the center. | ||
31 | var delta = ~~(val - el.elementModel.shapeModel.GLGeomObj.getStrokeWidth()), | ||
32 | l = this.application.ninja.elementMediator.getProperty(el, "left", parseInt), | ||
33 | t = this.application.ninja.elementMediator.getProperty(el, "top", parseInt), | ||
34 | w = this.application.ninja.elementMediator.getProperty(el, "width", parseInt), | ||
35 | h = this.application.ninja.elementMediator.getProperty(el, "height", parseInt); | ||
36 | |||
37 | if(geomType === 3) | ||
38 | { | ||
39 | var slope = el.elementModel.shapeModel.slope; | ||
40 | // set the dimensions | ||
41 | if(slope === "horizontal") | ||
42 | { | ||
43 | h = Math.max(val, 1); | ||
44 | t -= ~~(delta/2); | ||
45 | } | ||
46 | else if(slope === "vertical") | ||
47 | { | ||
48 | w = Math.max(val, 1); | ||
49 | l -= ~~(delta/2); | ||
50 | } | ||
51 | else | ||
52 | { | ||
53 | var oldXAdj = el.elementModel.shapeModel.GLGeomObj.getXAdj(); | ||
54 | var oldYAdj = el.elementModel.shapeModel.GLGeomObj.getYAdj(); | ||
55 | var theta = Math.atan(el.elementModel.shapeModel.slope); | ||
56 | var xAdj = Math.abs((val/2)*Math.sin(theta)); | ||
57 | var yAdj = Math.abs((val/2)*Math.cos(theta)); | ||
58 | var dX = ~~(xAdj*2 - oldXAdj*2); | ||
59 | var dY = ~~(yAdj*2 - oldYAdj*2); | ||
60 | |||
61 | l -= dX; | ||
62 | t -= dY; | ||
63 | w += dX*2; | ||
64 | h += dY*2; | ||
65 | |||
66 | el.elementModel.shapeModel.GLGeomObj.setXAdj(xAdj); | ||
67 | el.elementModel.shapeModel.GLGeomObj.setYAdj(yAdj); | ||
68 | } | ||
69 | } | ||
70 | else | ||
71 | { | ||
72 | l -= ~~(delta/2); | ||
73 | t -= ~~(delta/2); | ||
74 | w += delta; | ||
75 | h += delta; | ||
76 | } | ||
77 | this.application.ninja.elementMediator.setProperties([el], | ||
78 | { "left": [l + "px"], | ||
79 | "top": [t + "px"], | ||
80 | "width": [w + "px"], | ||
81 | "height": [h + "px"] }, | ||
82 | eventType |