diff options
-rwxr-xr-x | js/controllers/elements/element-controller.js | 59 | ||||
-rwxr-xr-x | js/controllers/elements/stage-controller.js | 7 | ||||
-rwxr-xr-x | js/controllers/styles-controller.js | 66 | ||||
-rwxr-xr-x | js/helper-classes/3D/view-utils.js | 48 | ||||
-rwxr-xr-x | js/lib/NJUtils.js | 2 | ||||
-rwxr-xr-x | js/models/properties-3d.js | 50 |
6 files changed, 100 insertions, 132 deletions
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..4f360bb9 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js | |||
@@ -223,11 +223,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
223 | 223 | ||
224 | if (el) | 224 | if (el) |
225 | { | 225 | { |
226 | var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); | 226 | mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); |
227 | if (xformStr) | 227 | if (!mat) { |
228 | mat = this.transformStringToMat( xformStr ); | ||
229 | if (!mat) | ||
230 | mat = Matrix.I(4); | 228 | mat = Matrix.I(4); |
229 | } | ||
231 | } | 230 | } |
232 | 231 | ||
233 | el.elementModel.props3D.matrix3d = mat; | 232 | el.elementModel.props3D.matrix3d = mat; |
@@ -244,23 +243,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
244 | } | 243 | } |
245 | else | 244 | else |
246 | { | 245 | { |
247 | var dist = 1400; | 246 | var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); |
248 | 247 | if(dist === null) { | |
249 | var str = this.getProperty(el, "-webkit-transform"); | 248 | dist = 1400; |
250 | if (str) | ||
251 | { | ||
252 | var index1 = str.indexOf( "perspective("); | ||
253 | if (index1 >= 0) | ||
254 | { | ||
255 | index1 += 12; // do not include 'perspective(' | ||
256 | var index2 = str.indexOf( ")", index1 ); | ||
257 | if (index2 >= 0) | ||
258 | { | ||
259 | var substr = str.substr( index1, (index2-index1)); | ||
260 | if (substr && (substr.length > 0)) | ||
261 | dist = MathUtils.styleToNumber( substr ); | ||
262 | } | ||
263 | } | ||
264 | } | 249 | } |
265 | 250 | ||
266 | el.elementModel.props3D.perspectiveDist = dist; | 251 | el.elementModel.props3D.perspectiveDist = dist; |
@@ -303,36 +288,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, | |||
303 | elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); | 288 | elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); |
304 | } | 289 | } |
305 | } | 290 | } |
306 | }, | ||
307 | |||
308 | transformStringToMat: { | ||
309 | value: function( str ) { | ||
310 | var rtnMat; | ||
311 | |||
312 | var index1 = str.indexOf( "matrix3d("); | ||
313 | if (index1 >= 0) | ||
314 | { | ||
315 | index1 += 9; // do not include 'matrix3d(' | ||
316 | var index2 = str.indexOf( ")", index1 ); | ||
317 | if (index2 >= 0) | ||
318 | { | ||
319 | var substr = str.substr( index1, (index2-index1)); | ||
320 | if (substr && (substr.length > 0)) | ||
321 | { | ||
322 | var numArray = substr.split(','); | ||
323 | var nNums = numArray.length; | ||
324 | if (nNums == 16) | ||
325 | { | ||
326 | // gl-matrix wants row order | ||
327 | rtnMat = numArray; | ||
328 | for (var i=0; i<16; i++) | ||
329 | rtnMat[i] = Number( rtnMat[i] ); | ||
330 | } | ||
331 | } | ||
332 | } | ||
333 | } | ||
334 | |||
335 | return rtnMat; | ||
336 | } | ||
337 | } | 291 | } |
292 | |||
338 | }); \ No newline at end of file | 293 | }); \ No newline at end of file |
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index 97ea3aa5..2734e226 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js | |||
@@ -143,11 +143,10 @@ exports.StageController = Montage.create(ElementController, { | |||
143 | 143 | ||
144 | if (el) | 144 | if (el) |
145 | { | 145 | { |
146 | var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); | 146 | mat = this.application.ninja.stylesController.getMatrixFromElement(el, true); |
147 | if (xformStr) | 147 | if (!mat) { |
148 | mat = this.transformStringToMat( xformStr ); | ||
149 | if (!mat) | ||
150 | mat = Matrix.I(4); | 148 | mat = Matrix.I(4); |
149 | } | ||
151 | 150 | ||
152 | var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); | 151 | var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); |
153 | if (zoom) | 152 | 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 | // gl-matrix wants row order | ||
1148 | mat = numArray; | ||
1149 | for (var i=0; i<16; i++) { | ||
1150 | mat[i] = Number( mat[i] ); | ||
1151 | } | ||
1152 | } | ||
1153 | } | ||
1154 | } | ||
1155 | } | ||
1156 | } | ||
1157 | return mat; | ||
1158 | } | ||
1159 | }, | ||
1160 | |||
1161 | ///// Get Perspective Distance From Element | ||
1162 | ///// Returns the perspective from an element's -webkit-transform | ||
1163 | |||
1164 | getPerspectiveDistFromElement : { | ||
1165 | value: function(element, isStage) { | ||
1166 | var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), | ||
1167 | dist; | ||
1168 | |||
1169 | if (xformStr) { | ||
1170 | var index1 = xformStr.indexOf( "perspective("); | ||
1171 | if (index1 >= 0) { | ||
1172 | index1 += 12; // do not include 'perspective(' | ||
1173 | var index2 = xformStr.indexOf( ")", index1 ); | ||
1174 | if (index2 >= 0) { | ||
1175 | var substr = xformStr.substr( index1, (index2-index1)); | ||
1176 | if (substr && (substr.length > 0)) { | ||
1177 | dist = parseInt( substr ); | ||
1178 | } | ||
1179 | } | ||
1180 | } | ||
1181 | } else { | ||
1182 | xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage); | ||
1183 | if(xformStr) { | ||
1184 | dist = parseInt(xformStr); | ||
1185 | } | ||
1186 | } | ||
1187 | return dist; | ||
1188 | } | ||
1189 | }, | ||
1190 | |||
1127 | ///// Create Rule From Inline Style | 1191 | ///// Create Rule From Inline Style |
1128 | ///// Creates a rule for an inline style with a specified, or partially random selector. | 1192 | ///// Creates a rule for an inline style with a specified, or partially random selector. |
1129 | 1193 | ||
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 5a820fc2..41fb8d20 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js | |||
@@ -1099,54 +1099,6 @@ exports.ViewUtils = Montage.create(Component, { | |||
1099 | } | 1099 | } |
1100 | }, | 1100 | }, |
1101 | 1101 | ||
1102 | transformStringToMat: { | ||
1103 | value: function( str ) { | ||
1104 | var rtnMat; | ||
1105 | |||
1106 | var index1 = str.indexOf( "matrix3d("); | ||
1107 | if (index1 >= 0) | ||
1108 | { | ||
1109 | index1 += 9; // do not include 'matrix3d(' | ||
1110 | var index2 = str.indexOf( ")", index1 ); | ||
1111 | if (index2 >= 0) | ||
1112 | { | ||
1113 | var substr = str.substr( index1, (index2-index1)); | ||
1114 | if (substr && (substr.length > 0)) | ||
1115 | { | ||
1116 | var numArray = substr.split(','); | ||
1117 | var nNums = numArray.length; | ||
1118 |