diff options
author | Jon Reid | 2012-04-10 14:52:23 -0700 |
---|---|---|
committer | Jon Reid | 2012-04-10 14:52:23 -0700 |
commit | c19987997758cf47ac9b93a2a767a0e2a9072745 (patch) | |
tree | eb68491c5d04a5cf5ab75bedf2d6bbed3c7a3603 /js/controllers | |
parent | 03a3b32b9b0fd2dc8e4b54bfd5282fd1f8fb6ed6 (diff) | |
parent | 422b14fc60be84c116115f2e71e3499e232f3f05 (diff) | |
download | ninja-c19987997758cf47ac9b93a2a767a0e2a9072745.tar.gz |
Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local
Diffstat (limited to 'js/controllers')
-rwxr-xr-x | js/controllers/elements/component-controller.js | 2 | ||||
-rwxr-xr-x | js/controllers/elements/element-controller.js | 59 | ||||
-rwxr-xr-x | js/controllers/elements/shapes-controller.js | 395 | ||||
-rwxr-xr-x | js/controllers/elements/stage-controller.js | 16 | ||||
-rwxr-xr-x | js/controllers/selection-controller.js | 7 | ||||
-rwxr-xr-x | js/controllers/styles-controller.js | 66 |
6 files changed, 352 insertions, 193 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..fda3a3c5 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,23 +248,9 @@ 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 | 252 | if(dist == null) { | |
254 | var str = this.getProperty(el, "-webkit-transform"); | 253 | dist = 1400; |
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 | } | 254 | } |
270 | 255 | ||
271 | el.elementModel.props3D.perspectiveDist = dist; | 256 | el.elementModel.props3D.perspectiveDist = dist; |
@@ -308,36 +293,6 @@ exports.ElementController = Montage.create(Component, { | |||
308 | elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); | 293 | elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); |
309 | } | 294 | } |
310 | } | 295 | } |
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 | } | 296 | } |
297 | |||
343 | }); \ No newline at end of file | 298 | }); \ 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, source ); | ||
83 | } | ||
22 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); | 84 | el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(val); |
23 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); | 85 | el.elementModel.shapeModel.GLGeomObj.buildBuffers(); |
24 | el.elementModel.shapeModel.GLWorld.render(); | 86 | el.elementModel.shapeModel.GLWorld.render(); |
@@ -68,43 +130,47 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
68 | el.elementModel.shapeModel.GLWorld.render(); | 130 | el.elementModel.shapeModel.GLWorld.render(); |
69 | break; | 131 | break; |
70 | case "useWebGl": | 132 | case "useWebGl": |
71 | var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); | 133 | canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true); |
72 | canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); | 134 | canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); |
73 | canv |