aboutsummaryrefslogtreecommitdiff
path: root/js/tools/PenTool.js
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-12 15:47:04 -0700
committerPushkar Joshi2012-04-12 15:47:04 -0700
commit276926133022577344d0e4934d1ff44da2ac18aa (patch)
tree43e768ffc102219b644a6c4ae39f628da903bf05 /js/tools/PenTool.js
parent9a518896ed98022f589f06276197c160431bdda0 (diff)
downloadninja-276926133022577344d0e4934d1ff44da2ac18aa.tar.gz
Use local coordinates for rendering and hit testing only when the path canvas exists....AND...good state for code that works in 3D as long as the path was originally created in XY plane of the stage
Diffstat (limited to 'js/tools/PenTool.js')
-rwxr-xr-xjs/tools/PenTool.js82
1 files changed, 66 insertions, 16 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 22172193..5145eb39 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -184,23 +184,60 @@ exports.PenTool = Montage.create(ShapeTool, {
184 } 184 }
185 } 185 }
186 186
187 //build the mouse down position in local coordinates 187
188 // ****** build the mouse down position in local coordinates *******
189
190 var localMousePos = null; //local mouse position
191 var swFromLocalMousePos = null; //
192 var swMousePos = null;
193
188 var drawingCanvas = this._selectedSubpath.getCanvas(); 194 var drawingCanvas = this._selectedSubpath.getCanvas();
195 var useLocal = true;
189 if (!drawingCanvas){ 196 if (!drawingCanvas){
197 //if the subpath has no canvas, it means we should not use local coordinates, and use stage-world coordinates only
198 useLocal = false;
190 drawingCanvas = ViewUtils.getStageElement(); 199 drawingCanvas = ViewUtils.getStageElement();
200
201 var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas); //this should just be the
202 snapManager.pushWorkingPlane(contentPlane);
203 var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
204 var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false);
205 swMousePos = hitRec.calculateStageWorldPoint();
206 //DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
207 this._dragPlane = snapManager.getDragPlane();
208 snapManager.popWorkingPlane();
209 swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5;
210
211 this._penPlaneMat = hitRec.getPlaneMatrix();
212 this._selectedSubpath.setPlaneMatrix(this._penPlaneMat);
213 var planeMatInv = glmat4.inverse( this._penPlaneMat, [] );
214 this._selectedSubpath.setPlaneMatrixInverse(planeMatInv);
215 this._selectedSubpath.setDragPlane(this._dragPlane);
216
217 } else {
218 //build the local coordinates of the screen point
219 var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY);
220 localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas);
221
222 //now build the stage world coordinates (without taking the canvas transformation into account) of the local coordinates
223 var localToStageWorldNoTransform = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false);
224 var swFromLocalMousePos = MathUtils.transformAndDivideHomogeneousPoint(localMousePos,localToStageWorldNoTransform);
225 swFromLocalMousePos[0]+= snapManager.getStageWidth()*0.5; swFromLocalMousePos[1]+= snapManager.getStageHeight()*0.5;
191 } 226 }
192 var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY); 227
193 var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); 228
194 var localToStageWorldNoTransform = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false);
195 var swMousePos = MathUtils.transformAndDivideHomogeneousPoint(localMousePos,localToStageWorldNoTransform);
196 swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5;
197 var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); 229 var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
198 // ************* Add/Select Anchor Point ************* 230 // ************* Add/Select Anchor Point *************
199 //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else 231 //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else
200 // BUT if the anchor point selected is the first anchor point, check if the previous selected anchor was the last anchor point...in that case, close the path 232 // BUT if the anchor point selected is the first anchor point, check if the previous selected anchor was the last anchor point...in that case, close the path
201 233
202 //var selParam = this._selectedSubpath.pickPath(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2], this._PICK_POINT_RADIUS); 234 //var selParam = this._selectedSubpath.pickPath(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2], this._PICK_POINT_RADIUS);
203 var selParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); 235 var selParam = null;
236 if (useLocal) {
237 selParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true);
238 } else {
239 selParam = this._selectedSubpath.pickPath(swMousePos[0], swMousePos[1], swMousePos[2], this._PICK_POINT_RADIUS, false);
240 }
204 var whichPoint = this._selectedSubpath.getSelectedMode(); 241 var whichPoint = this._selectedSubpath.getSelectedMode();
205 if (whichPoint & this._selectedSubpath.SEL_ANCHOR) { 242 if (whichPoint & this._selectedSubpath.SEL_ANCHOR) {
206 //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint 243 //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint
@@ -262,9 +299,15 @@ exports.PenTool = Montage.create(ShapeTool, {
262 if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { 299 if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) {
263 this._selectedSubpath.addAnchor(new AnchorPoint()); 300 this._selectedSubpath.addAnchor(new AnchorPoint());
264 var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); 301 var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
265 newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); 302 if (useLocal) {
266 newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); 303 newAnchor.setPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
267 newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); 304 newAnchor.setPrevPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
305 newAnchor.setNextPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
306 } else {
307 newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]);
308 newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]);
309 newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]);
310 }
268 311
269 //set the mode so that dragging will update the next and previous locations 312 //set the mode so that dragging will update the next and previous locations
270 this._editMode = this.EDIT_PREV_NEXT; 313 this._editMode = this.EDIT_PREV_NEXT;
@@ -275,9 +318,15 @@ exports.PenTool = Montage.create(ShapeTool, {
275 if (!this._selectedSubpath.getIsClosed()) { 318 if (!this._selectedSubpath.getIsClosed()) {
276 this._selectedSubpath.addAnchor(new AnchorPoint()); 319 this._selectedSubpath.addAnchor(new AnchorPoint());
277 var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); 320 var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
278 newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); 321 if (useLocal) {
279 newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); 322 newAnchor.setPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
280 newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); 323 newAnchor.setPrevPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
324 newAnchor.setNextPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
325 } else {
326 newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]);
327 newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]);
328 newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]);
329 }
281 330
282 //set the mode so that dragging will update the next and previous locations 331 //set the mode so that dragging will update the next and previous locations
283 this._editMode = this.EDIT_PREV_NEXT; 332 this._editMode = this.EDIT_PREV_NEXT;
@@ -329,7 +378,6 @@ exports.PenTool = Montage.create(ShapeTool, {
329 //go through the drawing toolbase to get the position of the mouse 378 //go through the drawing toolbase to get the position of the mouse
330 var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); 379 var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec));
331 if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { 380 if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) {
332
333 // BEGIN NEW LOCAL COORD BLOCK 381 // BEGIN NEW LOCAL COORD BLOCK
334 //build the mouse position in local coordinates 382 //build the mouse position in local coordinates
335 var drawingCanvas = this._selectedSubpath.getCanvas(); 383 var drawingCanvas = this._selectedSubpath.getCanvas();
@@ -473,6 +521,7 @@ exports.PenTool = Montage.create(ShapeTool, {
473 var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY); 521 var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY);
474 var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); 522 var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas);
475 523
524
476 //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false); 525 //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false);
477 var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); 526 var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true);
478 if (selAnchorRetCode[0] >=0) { 527 if (selAnchorRetCode[0] >=0) {
@@ -553,6 +602,8 @@ exports.PenTool = Montage.create(ShapeTool, {
553 return; 602 return;
554 } 603 }
555 604
605 w= Math.round(w);
606 h = Math.round(h);
556 var left = Math.round(midPt[0] - 0.5 * w); 607 var left = Math.round(midPt[0] - 0.5 * w);
557 var top = Math.round(midPt[1] - 0.5 * h); 608 var top = Math.round(midPt[1] - 0.5 * h);
558 this._selectedSubpath.setPlaneCenter(midPt); 609 this._selectedSubpath.setPlaneCenter(midPt);
@@ -617,8 +668,7 @@ exports.PenTool = Montage.create(ShapeTool, {
617 if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ 668 if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){
618 //update the left and top of the canvas element 669 //update the left and top of the canvas element
619 var canvasArray=[canvas]; 670 var canvasArray=[canvas];
620 w= Math.round(w); 671
621 h = Math.round(h);
622 ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; 672 ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w;
623 ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; 673 ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h;
624 ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); 674 ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px");