diff options
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 | 1 | ||||
-rwxr-xr-x | js/controllers/elements/stage-controller.js | 16 | ||||
-rwxr-xr-x | js/controllers/styles-controller.js | 66 |
5 files changed, 87 insertions, 57 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 f9b63942..b97d04b0 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js | |||
@@ -627,6 +627,7 @@ exports.ShapesController = Montage.create(CanvasController, { | |||
627 | world = new World(el, true); | 627 | world = new World(el, true); |
628 | el.elementModel.shapeModel.GLWorld = world; | 628 | el.elementModel.shapeModel.GLWorld = world; |
629 | el.elementModel.shapeModel.useWebGl = true; | 629 | el.elementModel.shapeModel.useWebGl = true; |
630 | el.elementModel.controller.setProperty(el, "-webkit-transform-style", "preserve-3d"); | ||
630 | world.importJSON(worldData); | 631 | world.importJSON(worldData); |
631 | el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); | 632 | el.elementModel.shapeModel.GLGeomObj = world.getGeomRoot(); |
632 | } | 633 | } |
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index 97ea3aa5..dc916b1a 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js | |||
@@ -83,6 +83,12 @@ exports.StageController = Montage.create(ElementController, { | |||
83 | return el.elementModel.stageDimension.style.getProperty(p); | 83 | return el.elementModel.stageDimension.style.getProperty(p); |
84 | case "width": | 84 | case "width": |
85 | return el.elementModel.stageDimension.style.getProperty(p); | 85 | return el.elementModel.stageDimension.style.getProperty(p); |
86 | case "-webkit-transform-style": | ||
87 | if(el.id === "Viewport") { | ||
88 | return this.application.ninja.stylesController.getElementStyle(el, p, false, true); | ||
89 | } else { | ||
90 | return el.elementModel.stageView.style.getProperty(p); | ||
91 | } | ||
86 | default: | 92 | default: |
87 | return ElementController.getProperty(el, p, false, true); | 93 | return ElementController.getProperty(el, p, false, true); |
88 | //console.log("Undefined Stage property ", p); | 94 | //console.log("Undefined Stage property ", p); |
@@ -111,6 +117,9 @@ exports.StageController = Montage.create(ElementController, { | |||
111 | this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400; | 117 | this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400; |
112 | el.elementModel.stageDimension.style.setProperty(p, value); | 118 | el.elementModel.stageDimension.style.setProperty(p, value); |
113 | break; | 119 | break; |
120 | case "-webkit-transform-style": | ||
121 | el.elementModel.stageView.style.setProperty(p, value); | ||
122 | break; | ||
114 | default: | 123 | default: |
115 | console.log("Undefined property ", p, "for the Stage Controller"); | 124 | console.log("Undefined property ", p, "for the Stage Controller"); |
116 | } | 125 | } |
@@ -143,11 +152,10 @@ exports.StageController = Montage.create(ElementController, { | |||
143 | 152 | ||
144 | if (el) | 153 | if (el) |
145 | { | 154 | { |
146 | var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); | 155 | mat = this.application.ninja.stylesController.getMatrixFromElement(el, true); |
147 | if (xformStr) | 156 | if (!mat) { |
148 | mat = this.transformStringToMat( xformStr ); | ||
149 | if (!mat) | ||
150 | mat = Matrix.I(4); | 157 | mat = Matrix.I(4); |
158 | } | ||
151 | 159 | ||
152 | var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); | 160 | var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); |
153 | if (zoom) | 161 | if (zoom) |
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index addfc24e..5d5f27ba 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -836,7 +836,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
836 | ///// For a given CSSKeyframesRule, we may add styles to the keyframe at | 836 | ///// For a given CSSKeyframesRule, we may add styles to the keyframe at |
837 | ///// given index. | 837 | ///// given index. |
838 | 838 | ||
839 | setKeyframeStyle : { | 839 | setKeyframeStyles : { |
840 | value : function(rule, keyframeIndex, property, value, useImportant) { | 840 | value : function(rule, keyframeIndex, property, value, useImportant) { |
841 | return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant); | 841 | return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant); |
842 | } | 842 | } |
@@ -1124,6 +1124,70 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1124 | } | 1124 | } |
1125 | }, | 1125 | }, |
1126 | 1126 | ||
1127 | ///// Get Matrix From Element | ||
1128 | ///// Returns the matrix from an element's -webkit-transform | ||
1129 | //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc. | ||
1130 | |||
1131 | getMatrixFromElement : { | ||
1132 | value: function(element, isStage) { | ||
1133 | var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), | ||
1134 | mat; | ||
1135 | |||
1136 | if (xformStr) { | ||
1137 | var index1 = xformStr.indexOf( "matrix3d("); | ||
1138 | if (index1 >= 0) { | ||
1139 | index1 += 9; // do not include 'matrix3d(' | ||
1140 | var index2 = xformStr.indexOf( ")", index1 ); | ||
1141 | if (index2 >= 0) { | ||
1142 | var substr = xformStr.substr( index1, (index2-index1)); | ||
1143 | if (substr && (substr.length > 0)) { | ||
1144 | var numArray = substr.split(','); | ||
1145 | var nNums = numArray.length; | ||
1146 | if (nNums == 16) { | ||
1147 |