aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
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);
366 newStyles.push(newStyleStr);
367
368 this._targets[i].mat = curMat;
369 this._targets[i].matInv = curMatInv;
370 }