aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-03-02 10:48:41 -0800
committerNivesh Rajbhandari2012-03-02 10:48:41 -0800
commit1760bac1da9218315ad1bacdcf3a157495a049e8 (patch)
tree2a35f1b50af9f7452203b0693d9ac511e435ac7d /js/tools
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>
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/SelectionTool.js277
1 files changed, 216 insertions, 61 deletions
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);
326 var prevX = this._undoArray[i]._x;
327 var prevY = this._undoArray[i]._y;
328 var prevW = this._undoArray[i]._w;
329 var prevH = this._undoArray[i]._h;
330 var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12];
331 var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13];
332 var _w = parseInt(ElementsMediator.getProperty(elt, "width"));
333 var _h = parseInt(ElementsMediator.getProperty(elt, "height"));
334
335 previousLeft.push(prevX + "px");
336 previousTop.push(prevY + "px");
337 previousWidth.push(prevW + "px");
338 previousHeight.push(prevH + "px");
339 newLeft.push(_x + "px");
340 newTop.push(_y + "px");
341 newWidth.push(_w + "px");
342 newHeight.push(_h + "px");
343
344 viewUtils.setMatrixForElement(elt, previousMat);
345
346 this._targets[i].mat = previousMat;
347 this._targets[i].matInv = glmat4.inverse(previousMat, []);
348 }
349 else
350 {
351 var previousMat = this._undoArray[i].mat.slice(0);
352 var prevW = this._undoArray[i]._w;
353 var prevH = this._undoArray[i]._h;
354 var _w = parseInt(ElementsMediator.getProperty(elt, "width"));
355 var _h = parseInt(ElementsMediator.getProperty(elt, "height"));
356 previousWidth.push(prevW + "px");
357 previousHeight.push(prevH + "px");
358 newWidth.push(_w + "px");
359 newHeight.push(_h + "px");
360
361 var previousStyleStr = {dist:this._undoArray[i].dist,
362 mat:MathUtils.scientificToDecimal(previousMat, 5)};
363 var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt),
364 mat:MathUtils.scientificToDecimal(curMat, 5)};
365 previousStyles.push(previousStyleStr);