/*
This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
var Montage = require("montage/core/core").Montage,
viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils,
vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils,
toolHandleModule = require("js/stage/tool-handle"),
ElementsMediator = require("js/mediators/element-mediator").ElementMediator,
DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase,
Keyboard = require("js/mediators/keyboard-mediator").Keyboard,
ModifierToolBase = require("js/tools/modifier-tool-base").ModifierToolBase;
var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
drawingFeedback: { value: { mode: "Draw2D", type: "" } },
_inLocalMode: { value: false}, // This tool should always use global mode for translations
_canOperateOnStage: { value: true},
_isSelecting: {value: false, writable:true},
_shiftMove: { value: 10},
_use3DMode: { value: false },
_showTransformHandles: { value: false, enumerable: true },
_handleToolOptionsChange : {
value: function (event) {
this._showTransformHandles = event.detail.inTransformMode;
this.DrawHandles();
}
},
_areElementsOnSamePlane : {
value: function () {
if(this._targets && this._targets.length)
{
var len = this._targets.length;
var plane = this.application.ninja.stage.stageDeps.snapManager.getDragPlane();
for(var i = 0; i < len; i++)
{
var elt = this._targets[i].elt;
if(!this.application.ninja.stage.stageDeps.snapManager.elementIsOnPlane(elt, plane))
{
return false;
}
}
}
return true;
}
},
startDraw: {
value: function(event) {
if(!this.application.ninja.selectedElements.length)
{
this._isSelecting = true;
this._canSnap = false;
}
else
{
this._canSnap = true;
this._updateTargets();
}
this.isDrawing = true;
this.application.ninja.stage.showSelectionBounds = false;
this._use3DMode = false;
if(this._canSnap)
{
this.initializeSnapping(event);
this._use3DMode = !this._areElementsOnSamePlane();
// console.log("use3DMode = " + this._use3DMode);
}
else
{
this.drawWithoutSnapping(event);
}
}
},
drawSelectionMarquee: {
value: function(event) {
var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
new WebKitPoint(event.pageX, event.pageY));
if(this._isSpace) {
this._currentDX = point.x - this._currentX;
this._currentDY = point.y - this._currentY;
this.downPoint.x += this._currentDX;
this.downPoint.y += this._currentDY;
this.currentX += this._currentDX;
this.currentY += this._currentDY;
DrawingToolBase.draw2DRectangle(this.downPoint.x,this.downPoint.y,this.currentX - this.downPoint.x,this.currentY - this.downPoint.y);
} else {
this._currentX = point.x;
this._currentY = point.y;
DrawingToolBase.draw2DRectangle(this.downPoint.x,this.downPoint.y,point.x - this.downPoint.x,point.y - this.downPoint.y);
}
}
},
HandleMouseMove: {
value: function(event) {
if(this._escape) {
this._escape = false;
this.isDrawing = true;
}
if(this._isSelecting) {
// Draw the Selection Marquee
this.drawSelectionMarquee(event);
}
else
{
if(this.isDrawing) {
this._hasDraw = true; // Flag for position of element
this.doDraw(event);
} else {
this._showFeedbackOnMouseMove(event);
if(this._canSnap)
{
this.doSnap(event);
}
}
this.DrawHandles(this._delta);
if(this._canSnap)
{
this.application.ninja.stage.stageDeps.snapManager.drawLastHit();
}
}
}
},
HandleLeftButtonUp: {
value: function(event) {
var selectedItems,
point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
this.isDrawing = false;
this.application.ninja.stage.showSelectionBounds = true;
if(this._escape) {
this._escape = false;
this._isSelecting = false;
this._canSnap = true;
this._use3DMode = false;
return;
}
if(this._isSelecting) {
this._isSelecting = false;
// Don't do the marque selection if the mouse has not moved
if(this.downPoint.x != point.x && this.downPoint.y != point.y) {
var box = [];
selectedItems = [];
box[0] = this.downPoint.x;
box[1] = this.downPoint.y;
box[2] = point.x;
box[3] = point.y;
//selectionManagerModule.selectionManager.marqueeSelection(box);
var childNodes = this.application.ninja.currentDocument.documentRoot.childNodes;
childNodes = Array.prototype.slice.call(childNodes, 0);
childNodes.forEach(function(item) {
if(item.nodeType == 1 && SelectionTool._complicatedCollisionDetection(item, box)) {
selectedItems.push(item);
}
});
this.application.ninja.selectionController.selectElements(selectedItems);
}
this.endDraw(event);
this._canSnap = true;
this._use3DMode = false;
return;
}
if(this._hasDraw)
{
if(this._activateOriginHandle)
{
this._setTransformOrigin(true);
}
else if ( ((this.downPoint.x - point.x) !== 0) ||
((this.downPoint.y - point.y) !== 0) )
{
this._updateTargets(true);
}
this._hasDraw = false;
}
if(this._handleMode !== null)
{
this._handleMode = null;
this._delta = null;
}
this.endDraw(event);
this._canSnap = true;
this._use3DMode = false;
this.DrawHandles();
}
},
/**
* Double click handler
*
* Sets the currentSelectionContainer to the current selected element. If no elements are selected set the
* currentSelectionContainer to the userDocument div.
*/
HandleDoubleClick: {
value: function(event) {
if(this.application.ninja.selectedElements.length > 0) {
this.application.ninja.breadCrumbClick = true;
this.application.ninja.currentSelectedContainer = this.application.ninja.selectedElements[0];
} else {
this.application.ninja.breadCrumbClick = true;
this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
}
}
},
HandleKeyPress: {
value: function(event){
var inc;
if (!(event.target instanceof HTMLInputElement)) {
if(this.application.ninja.selectedElements.length !== 0) {
inc = (event.shiftKey) ? this._shiftMove : 1;
switch(event.keyCode) {
case Keyboard.LEFT:
var newLeft = [];
var leftArr = this.application.ninja.selectedElements.map(function(item) {
newLeft.push( (parseInt(ElementsMediator.getProperty(item, "left")) - inc) + "px" );
return ElementsMediator.getProperty(item, "left");
});
ElementsMediator.setProperty(this.application.ninja.selectedElements, "left", newLeft , "Change", "selectionTool", leftArr);
break;
case Keyboard.UP:
var newTop = [];
var topArr = this.application.ninja.selectedElements.map(function(item) {
newTop.push( (parseInt(ElementsMediator.getProperty(item, "top")) - inc) + "px" );
return ElementsMediator.getProperty(item, "top");
});
ElementsMediator.setProperty(this.application.ninja.selectedElements, "top", newTop , "Change", "selectionTool", topArr);
break;
case Keyboard.RIGHT:
var newLeft = [];
var leftArr = this.application.ninja.selectedElements.map(function(item) {
newLeft.push( (parseInt(ElementsMediator.getProperty(item, "left")) + inc) + "px" );
return ElementsMediator.getProperty(item, "left");
});
ElementsMediator.setProperty(this.application.ninja.selectedElements, "left", newLeft , "Change", "selectionTool", leftArr);
break;
case Keyboard.DOWN:
var newTop = [];
var topArr = this.application.ninja.selectedElements.map(function(item) {
newTop.push( (parseInt(ElementsMediator.getProperty(item, "top")) + inc) + "px" );
return ElementsMediator.getProperty(item, "top");
});
ElementsMediator.setProperty(this.application.ninja.selectedElements, "top", newTop , "Change", "selectionTool", topArr);
break;
default:
return false;
break;
}
} else {
// Try and capture the delete key so that the browser doesn't attempt an unwelcome history action.
if (event.keyCode == Keyboard.BACKSPACE) {
event.stopImmediatePropagation();
event.preventDefault();
}
}
}
// console.log("Unhandled key press:", event.keyCode);
}
},
_updateTargets: {
value: function(addToUndoStack) {
var newLeft = [],
newTop = [],
newWidth = [],
newHeight = [],
newStyles = [],
previousLeft = [],
previousTop = [],
previousWidth = [],
previousHeight = [],
previousStyles = [];
var len = this.application.ninja.selectedElements.length;
this._targets = [];
for(var i = 0; i < len; i++) {
var elt = this.application.ninja.selectedElements[i];
var curMat = viewUtils.getMatrixFromElement(elt);
var curMatInv = glmat4.inverse(curMat, []);
this._targets.push({elt:elt, mat:curMat, matInv:curMatInv});
if(addToUndoStack) {
var prevX,
prevY,
prevW,
prevH,
_x,
_y,
_w,
_h,
previousMat,
previousStyleStr,
newStyleStr;
if(!this._use3DMode) {
prevX = this._undoArray[i]._x;
prevY = this._undoArray[i]._y;
prevW = this._undoArray[i]._w;
prevH = this._undoArray[i]._h;
_x = parseInt(ElementsMediator.getProperty(elt, "left"));
_y = parseInt(ElementsMediator.getProperty(elt, "top"));
_w = parseInt(ElementsMediator.getProperty(elt, "width"));
_h = parseInt(ElementsMediator.getProperty(elt, "height"));
previousLeft.push(prevX + "px");
previousTop.push(prevY + "px");
previousWidth.push(prevW + "px");
previousHeight.push(prevH + "px");
newLeft.push(_x + "px");
newTop.push(_y + "px");
newWidth.push(_w + "px");
newHeight.push(_h + "px");
}
else
{
previousMat = this._undoArray[i].mat.slice(0);
prevW = this._undoArray[i]._w;
prevH = this._undoArray[i]._h;
_w = parseInt(ElementsMediator.getProperty(elt, "width"));
_h = parseInt(ElementsMediator.getProperty(elt, "height"));
previousWidth.push(prevW + "px");
previousHeight.push(prevH + "px");
newWidth.push(_w + "px");
newHeight.push(_h + "px");
previousStyleStr = {dist:this._undoArray[i].dist,
mat:MathUtils.scientificToDecimal(previousMat, 5)};
newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt),
mat:MathUtils.scientificToDecimal(curMat, 5)};
previousStyles.push(previousStyleStr);
newStyles.push(newStyleStr);
this._targets[i].mat = curMat;
this._targets[i].matInv = curMatInv;
}
}
}
if(addToUndoStack)
{
if(!this._use3DMode)
{
// if we have a delta, that means the transform handles were used and
// we should update the width and height too. Otherwise, just update left and top.
if(this._delta)
{
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "left": newLeft, "top": newTop, "width": newWidth, "height": newHeight },
"Change",
"selectionTool",
{ "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight}
);
}
else
{
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "left": newLeft, "top": newTop },
"Change",
"selectionTool",
{ "left" : previousLeft, "top" : previousTop }
);
}
}
else
{
// TODO - We don't support transform handles in 3d space for now
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "width": newWidth, "height": newHeight },
"Change",
"selectionTool",
{ "width": previousWidth, "height": previousHeight}
);
ElementsMediator.set3DProperties(this.application.ninja.selectedElements,
newStyles,
"Change",
"translateTool",
previousStyles
);
}
}
// Save previous value for undo/redo
this._undoArray = [];
for(i = 0, len = this._targets.length; i < len; i++)
{
var item = this._targets[i];
_x = parseInt(ElementsMediator.getProperty(item.elt, "left"));
_y = parseInt(ElementsMediator.getProperty(item.elt, "top"));
_w = parseInt(ElementsMediator.getProperty(item.elt, "width"));
_h = parseInt(ElementsMediator.getProperty(item.elt, "height"));
var _mat = viewUtils.getMatrixFromElement(item.elt);
var _dist = viewUtils.getPerspectiveDistFromElement(item.elt);
this._undoArray.push({_x:_x, _y:_y, _w:_w, _h:_h, mat:_mat, dist:_dist});
}
}
},
_moveElements: {
value: function (transMat) {
var len = this._targets.length,
i,
item,
elt,
curMat,
newLeft = [],
newTop = [];
var matInv = glmat4.inverse(this._startMat, []);
var nMat = glmat4.multiply(transMat, this._startMat, [] );
var qMat = glmat4.multiply(matInv, nMat, []);
this._startMat = nMat;
for(i = 0; i < len; i++)
{
item = this._targets[i];
elt = item.elt;
if(this._use3DMode)
{
curMat = item.mat;
curMat[12] += transMat[12];
curMat[13] += transMat[13];
curMat[14] += transMat[14];
viewUtils.setMatrixForElement( elt, curMat, true);
this._targets[i].mat = curMat;
}
else
{
var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + transMat[12];
var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + transMat[13];
newLeft.push(_x + "px");
newTop.push(_y + "px");
}
}
if(newLeft.length)
{
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "left": newLeft, "top": newTop }, "Changing", "SelectionTool" );
}
else
{
NJevent("elementChanging", {type : "Changing", redraw: false});
}
}
},
//-------------------------------------------------------------------------
//Routines to modify the selected objects
modifyElements : {
value : function(data, event)
{
var delta,
deltaH,
deltaW,
deltaL,
deltaT;
if(this._handleMode !== null)
{
// 0 7 6
// 1 5
// 2 3 4
switch(this._handleMode)
{
case 0:
// Resize North-West
delta = ~~(data.pt1[0] - data.pt0[0]);
deltaW = this._undoArray.map(function(item) { return item._w - delta + "px"});
deltaL = this._undoArray.map(function(item) { return item._x + delta + "px"});
delta = ~~(data.pt1[1] - data.pt0[1]);
deltaH = this._undoArray.map(function(item) { return item._h - delta + "px"});
deltaT = this._undoArray.map(function(item) { return item._y + delta + "px"});
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "left": deltaL, "top": deltaT, "width": deltaW, "height": deltaH }, "Changing", "SelectionTool" );
break;
case 1:
// Resize West
delta = ~~(data.pt1[0] - data.pt0[0]);
deltaW = this._undoArray.map(function(item) { return item._w - delta + "px"});
deltaL = this._undoArray.map(function(item) { return item._x + delta + "px"});
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "left": deltaL, "width": deltaW }, "Changing", "SelectionTool" );
break;
case 2:
// Resize South-West
delta = ~~(data.pt1[0] - data.pt0[0]);
deltaW = this._undoArray.map(function(item) { return item._w - delta + "px"});
deltaL = this._undoArray.map(function(item) { return item._x + delta + "px"});
delta = ~~(data.pt1[1] - data.pt0[1]);
deltaH = this._undoArray.map(function(item) { return item._h + delta + "px"});
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "left": deltaL, "width": deltaW, "height": deltaH }, "Changing", "SelectionTool" );
break;
case 3:
// Resize South
delta = ~~(data.pt1[1] - data.pt0[1]);
deltaH = this._undoArray.map(function(item) { return item._h + delta + "px"});
ElementsMediator.setProperty(this.application.ninja.selectedElements, "height", deltaH, "Changing", "SelectionTool" );
break;
case 4:
// Resize South-East
delta = ~~(data.pt1[0] - data.pt0[0]);
deltaW = this._undoArray.map(function(item) { return item._w + delta + "px"});
delta = ~~(data.pt1[1] - data.pt0[1]);
deltaH = this._undoArray.map(function(item) { return item._h + delta + "px"});
ElementsMediator.setProperties(this.application.ninja.selectedElements, { "width": deltaW, "height": deltaH }, "Changing", "SelectionTool" );
break;
case 5:
// Resize East
delta = ~~(data.pt1[0] - data.pt0[0]);
deltaW = this._undoArray.map(function(item) { return item._w + delta + "px"});
ElementsMediator.setProperty(this.application.ninja.selectedElements, "width", deltaW, "Changing", "SelectionTool" );
break;
case 6:
// Resize North-East
delta = ~~(data.pt1[0] - data.pt0[0]);
deltaW = this._undoArray.map(function(item) { return item._w + delta + "px"});
delta = ~~(data.pt1[1] - data.pt0[1]);
deltaH = this._undoArray.map(function(item) { return item._h - delta + "px"});
deltaT = this._undoArray.map(function(item) { return item._y + delta + "px"});
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "top": deltaT, "width": deltaW, "height": deltaH }, "Changing", "SelectionTool" );
break;
case 7:
// Resize North
delta = ~~(data.pt1[1] - data.pt0[1]);
deltaH = this._undoArray.map(function(item) { return item._h - delta + "px"});
deltaT = this._undoArray.map(function(item) { return item._y + delta + "px"});
ElementsMediator.setProperties(this.application.ninja.selectedElements,
{ "top": deltaT, "height": deltaH }, "Changing", "SelectionTool" );
break;
default:
break;
}
this._delta = delta;
}
else
{
// form the translation vector and post translate the matrix by it.
delta = vecUtils.vecSubtract( 3, data.pt1, data.pt0 );
delta[0] = ~~delta[0];
delta[1] = ~~delta[1];
delta[2] = 0;
var transMat = Matrix.Translation( delta );
this._moveElements(transMat);
}
}
},
updateUsingSnappingData: {
value: function(event) {
var data;
if(this._handleMode === null)
{
this.getUpdatedSnapPoint(event);
if (this._mouseDownHitRec && this._mouseUpHitRec)
{
data = this.getMousePoints();
if(data)
{
this.modifyElements(data, event);
}
}
}
else
{
var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
new WebKitPoint(event.pageX, event.pageY));
var do3DSnap = false;
do3DSnap = event.ctrlKey || event.metaKey;
this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, do3DSnap, this.mouseDownHitRec);
if (this._mouseDownHitRec && this._mouseUpHitRec)
{
data = this.getDrawingData(event);
if(data)
{
this.modifyElements({pt0:data.mouseDownPos, pt1:data.mouseUpPos}, event);
}
}
}
}
},
/*
* The parameterization is based on the position of the
* snap point in pre-transformed element screen space
*/
parameterizeSnap:
{
value: function( hitRec )
{
var paramPt = [0,0,0];
var elt = this._getObjectBeingTracked(hitRec);
if (elt)
{
this.clickedObject = elt;
if(this._handleMode === null)
{
var worldPt = hitRec.calculateStageWorldPoint();
MathUtils.makeDimension4( worldPt );
var mat = viewUtils.getObjToStageWorldMatrix( elt, true );
if(mat)
{
var invMat = glmat4.inverse(mat, []);
var scrPt = MathUtils.transformHomogeneousPoint( worldPt, invMat );
scrPt = MathUtils.applyHomogeneousCoordinate( scrPt );
var bounds = viewUtils.getElementViewBounds3D( elt );
var x0 = bounds[0][0], x1 = bounds[3][0],
y0 = bounds[0][1], y1 = bounds[1][1];
var dx = x1 - x0, dy = y1 - y0;
var u = 0, v = 0;
if (MathUtils.fpSign(dx) != 0)
u = (scrPt[0] - x0) / dx;
if (MathUtils.fpSign(dy) != 0)
v = (scrPt[1] - y0) / dy;
paramPt[0] = u;
paramPt[1] = v;
paramPt[2] = scrPt[2];
}
}
else
{
// 0 7 6
// 1 5
// 2 3 4
switch(this._handleMode)
{
case 0:
paramPt = [0,0,0];
break;
case 1:
paramPt = [0,0.5,0];
break;
case 2:
paramPt = [0,1,0];
break;
case 3:
paramPt = [0.5,1,0];
break;
case 4:
paramPt = [1,1,0];
break;
case 5:
paramPt = [1,0.5,0];
break;
case 6:
paramPt = [1,0,0];
break;
case 7:
paramPt = [0.5,0,0];
break;
}
}
}
return paramPt;
}
},
/**
* This function is for specifying custom feedback routine
* upon mouse over.
* For example, the drawing tools will add a glow when mousing
* over existing canvas elements to signal to the user that
* the drawing operation will act on the targeted canvas.
*/
_showFeedbackOnMouseMove : {
value: function (event) {
if(!this._showTransformHandles)
{
return;
}
if(this._target && this._handles && (this._targets.length === 1))
{
var len = this._handles.length;
var i = 0,
toolHandle,
c,
point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas,
new WebKitPoint(event.pageX, event.pageY));
for (i=0; i bottom2) return false;
if (right1 < left2) return false;
if (left1 > right2) return false;
return true;
}
}
});