diff options
author | Pushkar Joshi | 2012-04-18 14:28:43 -0700 |
---|---|---|
committer | Pushkar Joshi | 2012-04-18 14:28:43 -0700 |
commit | 9b4f9a792f34b3c6ca291ad23da1efe4711687f4 (patch) | |
tree | ac5bd64ab0a8067489f7603bbf101ee8fb851f8f /js/tools | |
parent | 890d84a1078fae1f21a56e8be3ed181650afe9e1 (diff) | |
download | ninja-9b4f9a792f34b3c6ca291ad23da1efe4711687f4.tar.gz |
re-enable dragging and editing of anchor point handles for bezier path editing in 3D
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/PenTool.js | 227 |
1 files changed, 99 insertions, 128 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index ec63771a..127beacd 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -287,14 +287,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
287 | // Compute the mouse position in local (selected subpath canvas) space | 287 | // Compute the mouse position in local (selected subpath canvas) space |
288 | var globalPos = hitRec.getScreenPoint(); | 288 | var globalPos = hitRec.getScreenPoint(); |
289 | var localMousePos = ViewUtils.globalToLocal(globalPos, this._selectedSubpathCanvas); | 289 | var localMousePos = ViewUtils.globalToLocal(globalPos, this._selectedSubpathCanvas); |
290 | /* | 290 | |
291 | CHECK IF THIS IS CORRECT | ||
292 | ViewUtils.pushViewportObj | ||
293 | var temp ViewUtils.screenToView(localMousePos[0], localMousePos[1], 0) should return a point in view space of canvas | ||
294 | ViewUtils.popViewportObj | ||
295 | MathUtils.transformPoint(temp, this._selectedSubpathPlaneMat) | ||
296 | */ | ||
297 | |||
298 | //now perform the hit testing | 291 | //now perform the hit testing |
299 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | 292 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); |
300 | var selAnchorAndParamAndCode = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, false); | 293 | var selAnchorAndParamAndCode = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, false); |
@@ -417,29 +410,29 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
417 | 410 | ||
418 | var hitRec = this.getHitRecord(event.pageX, event.pageY); | 411 | var hitRec = this.getHitRecord(event.pageX, event.pageY); |
419 | 412 | ||
420 | if (this._isDrawing) { | 413 | var drawingCanvas=null, globalMousePos=null, localMousePos=null; |
421 | if (0){ | 414 | if (this._selectedSubpath ){ |
422 | //if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { | 415 | drawingCanvas = this._selectedSubpath.getCanvas(); |
423 | // BEGIN NEW LOCAL COORD BLOCK | 416 | if (!drawingCanvas){ |
424 | //build the mouse position in local coordinates | 417 | drawingCanvas = ViewUtils.getStageElement(); |
425 | var drawingCanvas = this._selectedSubpath.getCanvas(); | 418 | } |
426 | if (!drawingCanvas){ | 419 | globalMousePos = hitRec.getScreenPoint(); |
427 | drawingCanvas = ViewUtils.getStageElement(); | 420 | localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); |
428 | } | 421 | } |
429 | posInfo = this._getMouseEventPosition (event.pageX, event.pageY, false, false); | ||
430 | var globalMousePos = posInfo[0]; | ||
431 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); | ||
432 | 422 | ||
423 | if (this._isDrawing) { | ||
424 | //if there is a selected subpath with a selected anchor point | ||
425 | if (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors()) { | ||
433 | //compute the translation from the selected anchor | 426 | //compute the translation from the selected anchor |
434 | var selAnchorLocalPos = this._selectedSubpath.getAnchorLocalCoord(this._selectedSubpath.getSelectedAnchorIndex()); | ||
435 | var localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorLocalPos[1]); | ||
436 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 427 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); |
428 | var selAnchorPos = selAnchor.getAllPos(); | ||
429 | var localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[1]); | ||
437 | 430 | ||
438 | if (this._editMode & this.EDIT_ANCHOR) { | 431 | if (this._editMode & this.EDIT_ANCHOR) { |
439 | selAnchor.translateAll(localTranslation[0], localTranslation[1], localTranslation[2]); | 432 | selAnchor.translateAll(localTranslation[0], localTranslation[1], localTranslation[2]); |
440 | } | 433 | } |
441 | else if (this._editMode & this.EDIT_PREV) { | 434 | else if (this._editMode & this.EDIT_PREV) { |
442 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorLocalPos[0]); | 435 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[0]); |
443 | selAnchor.translatePrev(localTranslation[0], localTranslation[1], localTranslation[2]); | 436 | selAnchor.translatePrev(localTranslation[0], localTranslation[1], localTranslation[2]); |
444 | 437 | ||
445 | //move the next point if Alt key is down to ensure relative angle between prev and next | 438 | //move the next point if Alt key is down to ensure relative angle between prev and next |
@@ -448,7 +441,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
448 | } | 441 | } |
449 | } | 442 | } |
450 | else if (this._editMode & this.EDIT_NEXT) { | 443 | else if (this._editMode & this.EDIT_NEXT) { |
451 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorLocalPos[2]); | 444 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[2]); |
452 | selAnchor.translateNext(localTranslation[0], localTranslation[1], localTranslation[2]); | 445 | selAnchor.translateNext(localTranslation[0], localTranslation[1], localTranslation[2]); |
453 | 446 | ||
454 | //move the prev point if Alt key is down to ensure relative angle between prev and next | 447 | //move the prev point if Alt key is down to ensure relative angle between prev and next |
@@ -457,12 +450,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
457 | } | 450 | } |
458 | } | 451 | } |
459 | else if (this._editMode & this.EDIT_PREV_NEXT) { | 452 | else if (this._editMode & this.EDIT_PREV_NEXT) { |
460 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorLocalPos[2]); | 453 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[2]); |
461 | selAnchor.translateNext(localTranslation[0], localTranslation[1], localTranslation[2]); | 454 | selAnchor.translateNext(localTranslation[0], localTranslation[1], localTranslation[2]); |
462 | selAnchor.setPrevFromNext(); | 455 | selAnchor.setPrevFromNext(); |
463 | } | 456 | } |
464 | 457 | ||
465 | |||
466 | //snapping...check if the new location of the anchor point is close to another anchor point | 458 | //snapping...check if the new location of the anchor point is close to another anchor point |
467 | var selX = selAnchor.getPosX(); | 459 | var selX = selAnchor.getPosX(); |
468 | var selY = selAnchor.getPosY(); | 460 | var selY = selAnchor.getPosY(); |
@@ -482,59 +474,37 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
482 | } | 474 | } |
483 | } | 475 | } |
484 | 476 | ||
485 | // END NEW LOCAL COORD BLOCK | ||
486 | |||
487 | //make the subpath dirty so it will get re-drawn | 477 | //make the subpath dirty so it will get re-drawn |
488 | this._selectedSubpath.makeDirty(); | 478 | this._selectedSubpath.makeDirty(); |
489 | this.DrawSubpathOnStage(this._selectedSubpath); | 479 | this.DrawSubpathOnStage(this._selectedSubpath); |
490 | } | 480 | } |
491 | } else { //if mouse is not down: | 481 | } else { //if mouse is not down: |
492 | //this.doSnap(event); | 482 | var selAnchorAndParamAndCode = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); |
493 | //this.DrawHandles(); | 483 | if (selAnchorAndParamAndCode[0] >=0){ //something on the path was hit |
494 | 484 | if ((selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_ANCHOR) | |
495 | if (this._selectedSubpath ){ | 485 | || (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PREV) |
496 | 486 | || (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_NEXT)) | |
497 | //convert the mouse pos. to local space of the canvas | 487 | { //the anchor was hit |
498 | //var widthAdjustment = -snapManager.getStageWidth()*0.5; | 488 | this._hoveredAnchorIndex = selAnchorAndParamAndCode[0]; |
499 | //var heightAdjustment = -snapManager.getStageHeight()*0.5; | 489 | var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1; |
500 | 490 | var cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default"; | |
501 | 491 | if (this._selectedSubpath.getIsClosed()===false){ | |
502 | var drawingCanvas = this._selectedSubpath.getCanvas(); | 492 | if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){ |
503 | if (!drawingCanvas){ | 493 | //if we're in SELECT_PATH mode, have not yet clicked on the end anchors, AND we hovered over one of the end anchors |
504 | drawingCanvas = ViewUtils.getStageElement(); | 494 | cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default"; |
495 | } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0) { | ||
496 | //if we've selected the last anchor and hover over the first anchor | ||
497 | cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default"; | ||
498 | } | ||
499 | } //if path is not closed | ||
500 | this.application.ninja.stage.drawingCanvas.style.cursor = cursor; | ||
501 | } else if (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PATH) { | ||
502 | //change the cursor | ||
503 | var cursor = "url('images/cursors/penCursors/Pen_plus.png') 5 1, default"; | ||
504 | this.application.ninja.stage.drawingCanvas.style.cursor = cursor; | ||
505 | } | 505 | } |
506 | var globalMousePos = hitRec.getScreenPoint(); | 506 | } //something on the path was hit |
507 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); | 507 | } //mouse is not down |
508 | |||
509 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false); | ||
510 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS); | ||
511 | var selAnchorAndParamAndCode = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); | ||
512 | if (selAnchorAndParamAndCode[0] >=0){ //something on the path was hit | ||
513 | if ((selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_ANCHOR) | ||
514 | || (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PREV) | ||
515 | || (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_NEXT)) | ||
516 | { //the anchor was hit | ||
517 | this._hoveredAnchorIndex = selAnchorAndParamAndCode[0]; | ||
518 | var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1; | ||
519 | var cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default"; | ||
520 | if (this._selectedSubpath.getIsClosed()===false){ | ||
521 | if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){ | ||
522 | //if we're in SELECT_PATH mode, have not yet clicked on the end anchors, AND we hovered over one of the end anchors | ||
523 | cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default"; | ||
524 | } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0) { | ||
525 | //if we've selected the last anchor and hover over the first anchor | ||
526 | cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default"; | ||
527 | } | ||
528 | } //if path is not closed | ||
529 | this.application.ninja.stage.drawingCanvas.style.cursor = cursor; | ||
530 | } else if (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PATH) { | ||
531 | //change the cursor | ||
532 | var cursor = "url('images/cursors/penCursors/Pen_plus.png') 5 1, default"; | ||
533 | this.application.ninja.stage.drawingCanvas.style.cursor = cursor; | ||
534 | } | ||
535 | } //something on the path was hit | ||
536 | } | ||
537 | } //else of if (this._isDrawing) { | ||
538 | 508 | ||
539 | //this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks | 509 | //this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks |
540 | if (this._selectedSubpath){ | 510 | if (this._selectedSubpath){ |
@@ -781,24 +751,22 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
781 | var bboxMid = VecUtils.vecInterpolate(3, bboxMin, bboxMax, 0.5); | 751 | var bboxMid = VecUtils.vecInterpolate(3, bboxMin, bboxMax, 0.5); |
782 | 752 | ||
783 | //sandwich the planeMat between with the translation to the previous center of the canvas in local space and its inverse | 753 | //sandwich the planeMat between with the translation to the previous center of the canvas in local space and its inverse |
784 | var centerDisp = VecUtils.vecSubtract(3, bboxMid, this._selectedSubpathLocalCenter); | 754 | if (this._selectedSubpathLocalCenter) { |
785 | var tMat = Matrix.Translation([centerDisp[0], centerDisp[1],centerDisp[2]]); | 755 | var centerDisp = VecUtils.vecSubtract(3, bboxMid, this._selectedSubpathLocalCenter); |
786 | var tInvMat = Matrix.Translation([-centerDisp[0], -centerDisp[1], -centerDisp[2]]); | 756 | var tMat = Matrix.Translation([centerDisp[0], centerDisp[1],centerDisp[2]]); |
787 | var newMat = Matrix.I(4); | 757 | var tInvMat = Matrix.Translation([-centerDisp[0], -centerDisp[1], -centerDisp[2]]); |
788 | glmat4.multiply( tInvMat, this._selectedSubpathPlaneMat, newMat); | 758 | var newMat = Matrix.I(4); |
789 | glmat4.multiply( newMat, tMat, newMat); | 759 | glmat4.multiply( tInvMat, this._selectedSubpathPlaneMat, newMat); |
790 | this._selectedSubpathPlaneMat = newMat; | 760 | glmat4.multiply( newMat, tMat, newMat); |
791 | ViewUtils.setMatrixForElement(this._selectedSubpathCanvas, newMat, true); | 761 | this._selectedSubpathPlaneMat = newMat; |
792 | 762 | ViewUtils.setMatrixForElement(this._selectedSubpathCanvas, newMat, true); | |
763 | } | ||
793 | 764 | ||
794 | //this._selectedSubpathCanvasCenter = ViewUtils.localToStageWorld(bboxMid, this._selectedSubpathCanvas); | ||
795 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(this._selectedSubpathCanvas, false, false); | 765 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(this._selectedSubpathCanvas, false, false); |
796 | this._selectedSubpathCanvasCenter = MathUtils.transformAndDivideHomogeneousPoint(bboxMid, localToStageWorldMat); | 766 | this._selectedSubpathCanvasCenter = MathUtils.transformAndDivideHomogeneousPoint(bboxMid, localToStageWorldMat); |
797 | this._selectedSubpathCanvasCenter[0]+= xAdjustment; | 767 | this._selectedSubpathCanvasCenter[0]+= xAdjustment; |
798 | this._selectedSubpathCanvasCenter[1]+= yAdjustment; | 768 | this._selectedSubpathCanvasCenter[1]+= yAdjustment; |
799 |