aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/elements
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers/elements')
-rwxr-xr-xjs/controllers/elements/component-controller.js2
-rwxr-xr-xjs/controllers/elements/element-controller.js59
-rwxr-xr-xjs/controllers/elements/shapes-controller.js395
-rwxr-xr-xjs/controllers/elements/stage-controller.js16
4 files changed, 280 insertions, 192 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,
13exports.ShapesController = Montage.create(CanvasController, { 13exports.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 canvas.width = el.width; 135 canvas.width = el.width;
74 canvas.height = el.height; 136 canvas.height = el.height;
75 canvas.elementModel = el.elementModel; 137 canvas.elementModel = el.elementModel;
76 this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el); 138 this.toggleWebGlMode(canvas, value);
77 NJevent("elementsRemoved", el); 139 this.application.ninja.elementMediator.replaceElement(canvas, el);
78 el = canvas; 140 break;
79 this.toggleWebGlMode(el, value);