aboutsummaryrefslogtreecommitdiff
path: root/js/tools/SelectionTool.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools/SelectionTool.js')
-rwxr-xr-xjs/tools/SelectionTool.js282
1 files changed, 220 insertions, 62 deletions
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index caa9e8d6..6d8ff175 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 {
@@ -122,6 +148,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
122 if(this._escape) { 148 if(this._escape) {
123 this._escape = false; 149 this._escape = false;
124 this._isSelecting = false; 150 this._isSelecting = false;
151 this._canSnap = true;
152 this._use3DMode = false;
125 return; 153 return;
126 } 154 }
127 155
@@ -153,6 +181,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
153 } 181 }
154 182
155 this.endDraw(event); 183 this.endDraw(event);
184 this._canSnap = true;
185 this._use3DMode = false;
156 return; 186 return;
157 } 187 }
158 188
@@ -180,6 +210,8 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
180 } 210 }
181 211
182 this.endDraw(event); 212 this.endDraw(event);
213 this._canSnap = true;
214 this._use3DMode = false;
183 } 215 }
184 }, 216 },
185 217
@@ -211,7 +243,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
211 case Keyboard.LEFT: 243 case Keyboard.LEFT:
212 var newLeft = []; 244 var newLeft = [];
213 var leftArr = this.application.ninja.selectedElements.map(function(item) { 245 var leftArr = this.application.ninja.selectedElements.map(function(item) {
214 newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) - inc) + "px" ); 246 newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) - inc) + "px" );
215 return ElementsMediator.getProperty(item._element, "left"); 247 return ElementsMediator.getProperty(item._element, "left");
216 }); 248 });
217 249
@@ -220,7 +252,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
220 case Keyboard.UP: 252 case Keyboard.UP:
221 var newTop = []; 253 var newTop = [];
222 var topArr = this.application.ninja.selectedElements.map(function(item) { 254 var topArr = this.application.ninja.selectedElements.map(function(item) {
223 newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) - inc) + "px" ); 255 newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) - inc) + "px" );
224 return ElementsMediator.getProperty(item._element, "top"); 256 return ElementsMediator.getProperty(item._element, "top");
225 }); 257 });
226 258
@@ -229,7 +261,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
229 case Keyboard.RIGHT: 261 case Keyboard.RIGHT:
230 var newLeft = []; 262 var newLeft = [];
231 var leftArr = this.application.ninja.selectedElements.map(function(item) { 263 var leftArr = this.application.ninja.selectedElements.map(function(item) {
232 newLeft.push( (parseFloat(ElementsMediator.getProperty(item._element, "left")) + inc) + "px" ); 264 newLeft.push( (parseInt(ElementsMediator.getProperty(item._element, "left")) + inc) + "px" );
233 return ElementsMediator.getProperty(item._element, "left"); 265 return ElementsMediator.getProperty(item._element, "left");
234 }); 266 });
235 267
@@ -238,7 +270,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
238 case Keyboard.DOWN: 270 case Keyboard.DOWN:
239 var newTop = []; 271 var newTop = [];
240 var topArr = this.application.ninja.selectedElements.map(function(item) { 272 var topArr = this.application.ninja.selectedElements.map(function(item) {
241 newTop.push( (parseFloat(ElementsMediator.getProperty(item._element, "top")) + inc) + "px" ); 273 newTop.push( (parseInt(ElementsMediator.getProperty(item._element, "top")) + inc) + "px" );
242 return ElementsMediator.getProperty(item._element, "top"); 274 return ElementsMediator.getProperty(item._element, "top");
243 }); 275 });
244 276
@@ -269,10 +301,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
269 newTop = [], 301 newTop = [],
270 newWidth = [], 302 newWidth = [],
271 newHeight = [], 303 newHeight = [],
304 newStyles = [],
272 previousLeft = [], 305 previousLeft = [],
273 previousTop = [], 306 previousTop = [],
274 previousWidth = [], 307 previousWidth = [],
275 previousHeight = []; 308 previousHeight = [],
309 previousStyles = [];
276 var len = this.application.ninja.selectedElements.length; 310 var len = this.application.ninja.selectedElements.length;
277 this._targets = []; 311 this._targets = [];
278 for(var i = 0; i < len; i++) 312 for(var i = 0; i < len; i++)
@@ -285,52 +319,97 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
285 this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); 319 this._targets.push({elt:elt, mat:curMat, matInv:curMatInv});
286 if(addToUndoStack) 320 if(addToUndoStack)
287 { 321 {
288 var previousMat = this._undoArray[i].mat.slice(0);
289 var prevX = this._undoArray[i]._x;
290 var prevY = this._undoArray[i]._y;
291 var prevW = this._undoArray[i]._w;
292 var prevH = this._undoArray[i]._h;
293 var _x = parseFloat(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12];
294 var _y = parseFloat(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13];
295 var _w = parseFloat(ElementsMediator.getProperty(elt, "width"));
296 var _h = parseFloat(ElementsMediator.getProperty(elt, "height"));
297
298 previousLeft.push(prevX + "px");
299 previousTop.push(prevY + "px");
300 previousWidth.push(prevW + "px");
301 previousHeight.push(prevH + "px");
302 newLeft.push(_x + "px");
303 newTop.push(_y + "px");
304 newWidth.push(_w + "px");
305 newHeight.push(_h + "px");
306
307 viewUtils.setMatrixForElement(elt, previousMat);
308 322
309 this._targets[i].mat = previousMat; 323 if(!this._use3DMode)
310 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