aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-02 10:48:41 -0800
committerNivesh Rajbhandari2012-03-02 10:48:41 -0800
commit1760bac1da9218315ad1bacdcf3a157495a049e8 (patch)
tree2a35f1b50af9f7452203b0693d9ac511e435ac7d
parent2c04935f0ccb1cb7c98371fc10b43155f2d956c4 (diff)
downloadninja-1760bac1da9218315ad1bacdcf3a157495a049e8.tar.gz
Fix for jumping issue when moving items that have any 3d on them.
We can't translate 3d moves into 2d space due to perspective, so we must update the matrix3d values instead of the top-left values if items have 3d. Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rwxr-xr-xjs/helper-classes/3D/math-utils.js33
-rwxr-xr-xjs/tools/SelectionTool.js277
2 files changed, 249 insertions, 61 deletions
diff --git a/js/helper-classes/3D/math-utils.js b/js/helper-classes/3D/math-utils.js
index 37044763..de63f880 100755
--- a/js/helper-classes/3D/math-utils.js
+++ b/js/helper-classes/3D/math-utils.js
@@ -538,6 +538,39 @@ var MathUtilsClass = exports.MathUtilsClass = Object.create(Object.prototype, {
538 } 538 }
539 }, 539 },
540 540
541 isIdentityMatrix: {
542 value: function( mat )
543 {
544 if(!mat)
545 {
546 return false;
547 }
548 else
549 {
550 if(mat[0] !== 1) return false;
551 if(mat[1] !== 0) return false;
552 if(mat[2] !== 0) return false;
553 if(mat[3] !== 0) return false;
554
555 if(mat[4] !== 0) return false;
556 if(mat[5] !== 1) return false;
557 if(mat[6] !== 0) return false;
558 if(mat[7] !== 0) return false;
559
560 if(mat[8] !== 0) return false;
561 if(mat[9] !== 0) return false;
562 if(mat[10] !== 1) return false;
563 if(mat[11] !== 0) return false;
564
565 if(mat[12] !== 0) return false;
566 if(mat[13] !== 0) return false;
567 if(mat[14] !== 0) return false;
568 if(mat[15] !== 1) return false;
569 }
570 return true;
571 }
572 },
573
541 rectsOverlap: 574 rectsOverlap:
542 { 575 {
543 value: function( pt, width, height, elt ) 576 value: function( pt, width, height, elt )
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index 3df9a532..1a6bee55 100755
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -19,6 +19,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
19 _canOperateOnStage: { value: true}, 19 _canOperateOnStage: { value: true},
20 _isSelecting: {value: false, writable:true}, 20 _isSelecting: {value: false, writable:true},
21 _shiftMove: { value: 10}, 21 _shiftMove: { value: 10},
22 _use3DMode: { value: false },
22 23
23 _showTransformHandles: { value: false, enumerable: true }, 24 _showTransformHandles: { value: false, enumerable: true },
24 25
@@ -29,6 +30,27 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
29 } 30 }
30 }, 31 },
31 32
33 _areElementsOnSamePlane : {
34 value: function () {
35 if(this._targets && this._targets.length)
36 {
37 // TODO - drawUtils's elementPlanes check in drawSelectionBounds doesn't seem to work,
38 // so temporary workaround to simply check if all elements have identity matrix
39 // TODO - Eventually, this should instead check if all the selected items are on the view plane
40 var len = this._targets.length;
41 for(var i = 0; i < len; i++)
42 {
43 var mat = this._targets[i].mat;
44 if(!MathUtils.isIdentityMatrix(mat))
45 {
46 return false;
47 }
48 }
49 }
50 return true;
51 }
52 },
53
32 startDraw: { 54 startDraw: {
33 value: function(event) { 55 value: function(event) {
34 if(!this.application.ninja.selectedElements.length) 56 if(!this.application.ninja.selectedElements.length)
@@ -44,9 +66,13 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
44 this.isDrawing = true; 66 this.isDrawing = true;
45 this.application.ninja.stage.showSelectionBounds = false; 67 this.application.ninja.stage.showSelectionBounds = false;
46 68
69 this._use3DMode = false;
70
47 if(this._canSnap) 71 if(this._canSnap)
48 { 72 {
49 this.initializeSnapping(event); 73 this.initializeSnapping(event);
74 this._use3DMode = !this._areElementsOnSamePlane();
75// console.log("use3DMode = " + this._use3DMode);
50 } 76 }
51 else 77 else
52 { 78 {
@@ -123,6 +149,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
123 this._escape = false; 149 this._escape = false;
124 this._isSelecting = false; 150 this._isSelecting = false;
125 this._canSnap = true; 151 this._canSnap = true;
152 this._use3DMode = false;
126 return; 153 return;
127 } 154 }
128 155
@@ -155,6 +182,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
155 182
156 this.endDraw(event); 183 this.endDraw(event);
157 this._canSnap = true; 184 this._canSnap = true;
185 this._use3DMode = false;
158 return; 186 return;
159 } 187 }
160 188
@@ -183,6 +211,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
183 211
184 this.endDraw(event); 212 this.endDraw(event);
185 this._canSnap = true; 213 this._canSnap = true;
214 this._use3DMode = false;
186 } 215 }
187 }, 216 },
188 217
@@ -214,7 +243,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
214 case Keyboard.LEFT: 243 case Keyboard.LEFT:
215 var newLeft = []; 244 var newLeft = [];
216 var leftArr = this.application.ninja.selectedElements.map(function(item) { 245 var leftArr = this.application.ninja.selectedElements.map(function(item) {
217 newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) - inc) + "px" ); 246 newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) - inc) + "px" );
218 return ElementsMediator.getProperty(item._element, "left"); 247 return ElementsMediator.getProperty(item._element, "left");
219 }); 248 });
220 249
@@ -223,7 +252,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
223 case Keyboard.UP: 252 case Keyboard.UP:
224 var newTop = []; 253 var newTop = [];
225 var topArr = this.application.ninja.selectedElements.map(function(item) { 254 var topArr = this.application.ninja.selectedElements.map(function(item) {
226 newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) - inc) + "px" ); 255 newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) - inc) + "px" );
227 return ElementsMediator.getProperty(item._element, "top"); 256 return ElementsMediator.getProperty(item._element, "top");
228 }); 257 });
229 258
@@ -232,7 +261,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
232 case Keyboard.RIGHT: 261 case Keyboard.RIGHT:
233 var newLeft = []; 262 var newLeft = [];
234 var leftArr = this.application.ninja.selectedElements.map(function(item) { 263 var leftArr = this.application.ninja.selectedElements.map(function(item) {
235 newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) + inc) + "px" ); 264 newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) + inc) + "px" );
236 return ElementsMediator.getProperty(item._element, "left"); 265 return ElementsMediator.getProperty(item._element, "left");
237 }); 266 });
238 267
@@ -241,7 +270,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
241 case Keyboard.DOWN: 270 case Keyboard.DOWN:
242 var newTop = []; 271 var newTop = [];
243 var topArr = this.application.ninja.selectedElements.map(function(item) { 272 var topArr = this.application.ninja.selectedElements.map(function(item) {
244 newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) + inc) + "px" ); 273 newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) + inc) + "px" );
245 return ElementsMediator.getProperty(item._element, "top"); 274 return ElementsMediator.getProperty(item._element, "top");
246 }); 275 });
247 276
@@ -272,10 +301,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
272 newTop = [], 301 newTop = [],
273 newWidth = [], 302 newWidth = [],
274 newHeight = [], 303 newHeight = [],
304 newStyles = [],
275 previousLeft = [], 305 previousLeft = [],
276 previousTop = [], 306 previousTop = [],
277 previousWidth = [], 307 previousWidth = [],
278 previousHeight = []; 308 previousHeight = [],
309 previousStyles = [];
279 var len = this.application.ninja.selectedElements.length; 310 var len = this.application.ninja.selectedElements.length;
280 this._targets = []; 311 this._targets = [];
281 for(var i = 0; i < len; i++) 312 for(var i = 0; i < len; i++)
@@ -288,52 +319,97 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
288 this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); 319 this._targets.push({elt:elt, mat:curMat, matInv:curMatInv});
289 if(addToUndoStack) 320 if(addToUndoStack)
290 { 321 {
291 var previousMat = this._undoArray[i].mat.slice(0);
292 var prevX = this._undoArray[i]._x;
293 var prevY = this._undoArray[i]._y;
294 var prevW = this._undoArray[i]._w;
295 var prevH = this._undoArray[i]._h;
296 var _x = parseFloat(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12];
297 var _y = parseFloat(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13];
298 var _w = parseFloat(ElementsMediator.getProperty(elt, "width"));
299 var _h = parseFloat(ElementsMediator.getProperty(elt, "height"));
300
301 previousLeft.push(prevX + "px");
302 previousTop.push(prevY + "px");
303 previousWidth.push(prevW + "px");
304 previousHeight.push(prevH + "px");
305 newLeft.push(_x + "px");
306 newTop.push(_y + "px");
307 newWidth.push(_w + "px");
308 newHeight.push(_h + "px");
309
310 viewUtils.setMatrixForElement(elt, previousMat);
311 322
312 this._targets[i].mat = previousMat; 323 if(!this._use3DMode)
313 this._targets[i].matInv = glmat4.inverse(previousMat, []); 324 {
325 var previousMat = this._undoArray[i].mat.slice(0);