diff options
author | Pushkar Joshi | 2012-03-05 14:49:05 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-03-05 14:49:05 -0800 |
commit | db82be91f767a07b7cb8c97ca3d9f4c4d75bc9ae (patch) | |
tree | 21e0ee213e24de67eb9c4cddfc5f3069c2257aae /js/tools/SelectionTool.js | |
parent | 4419209a1fd850ab468209b562b66b0242b42a9c (diff) | |
parent | 13f52cf0c74f53a919fa864f86669e8155f82961 (diff) | |
download | ninja-db82be91f767a07b7cb8c97ca3d9f4c4d75bc9ae.tar.gz |
Merge branch 'master' into brushtool
Diffstat (limited to 'js/tools/SelectionTool.js')
-rwxr-xr-x | js/tools/SelectionTool.js | 282 |
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.getPerspectiveDistFromElemen |