diff options
-rwxr-xr-x | js/lib/geom/sub-path.js | 55 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 81 |
2 files changed, 49 insertions, 87 deletions
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 31bf4632..62937461 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -614,13 +614,14 @@ GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius, testOnly) | |||
614 | }//if is within bbox | 614 | }//if is within bbox |
615 | } | 615 | } |
616 | 616 | ||
617 | if (retCode!== this.SEL_NONE) | ||
618 | retCode = retCode | this.SEL_PATH; //ensure that path is also selected if anything else is selected | ||
619 | |||
617 | if (!testOnly){ | 620 | if (!testOnly){ |
618 | if (retCode!== this.SEL_NONE) | ||
619 | retCode = retCode | this.SEL_PATH; //ensure that path is also selected if anything else is selected | ||
620 | this._selectMode = retCode; | 621 | this._selectMode = retCode; |
621 | this._selectedAnchorIndex = selAnchorIndex; | 622 | this._selectedAnchorIndex = selAnchorIndex; |
622 | } | 623 | } |
623 | return [selAnchorIndex,retParam]; | 624 | return [selAnchorIndex,retParam, retCode]; |
624 | }; //GLSubpath.pickPath function | 625 | }; //GLSubpath.pickPath function |
625 | 626 | ||
626 | GLSubpath.prototype.getSelectedAnchorIndex = function () { | 627 | GLSubpath.prototype.getSelectedAnchorIndex = function () { |
@@ -693,54 +694,6 @@ GLSubpath.prototype.setStrokeWidth = function (w) { | |||
693 | ElementMediator.setProperty(canvasArray, "height", [penCanvasNewHeight+"px"], "Changing", "penTool"); | 694 | ElementMediator.setProperty(canvasArray, "height", [penCanvasNewHeight+"px"], "Changing", "penTool"); |
694 | ElementMediator.setProperty(canvasArray, "left", [penCanvasNewLeft+"px"],"Changing", "penTool"); | 695 | ElementMediator.setProperty(canvasArray, "left", [penCanvasNewLeft+"px"],"Changing", "penTool"); |
695 | ElementMediator.setProperty(canvasArray, "top", [penCanvasNewTop+ "px"],"Changing", "penTool"); | 696 | ElementMediator.setProperty(canvasArray, "top", [penCanvasNewTop+ "px"],"Changing", "penTool"); |
696 | |||
697 | /* | ||
698 | //compute the current location of the canvas for this subpath | ||
699 | this.createSamples(); //this will also update the bounding box | ||
700 | var bboxMin = this.getBBoxMin(); | ||
701 | var bboxMax = this.getBBoxMax(); | ||
702 | var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0]; //ignore the Z coord. for local coordinates | ||
703 | |||
704 | //go from local coordinates to stage world | ||
705 | var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; | ||
706 | var SnapManager = require("js/helper-classes/3D/snap-manager").SnapManager; | ||
707 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(this._canvas, true, true); | ||
708 | var bboxMidSW = MathUtils.transformAndDivideHomogeneousPoint(bboxMid, localToStageWorldMat); | ||
709 | bboxMidSW[0]+=SnapManager.getStageWidth()*0.5; | ||
710 | bboxMidSW[1]+=SnapManager.getStageHeight()*0.5; | ||
711 | |||
712 | this._strokeWidth = Math.round(w); | ||
713 | this._dirty=true; | ||
714 | |||
715 | // **** adjust the local coordinates to account for the change in stroke width **** | ||
716 | this.computeBoundingBox(); //this will take the new strokewidth into account | ||
717 | this.offsetPerBBoxMin(); //this will shift the local coordinates such that the bbox min point is at (0,0) | ||
718 | |||
719 | // **** adjust the canvas position to account for the change in stroke width | ||
720 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | ||
721 | //build the width and height of this canvas by looking at local coordinates | ||
722 | bboxMin = this.getBBoxMin(); | ||
723 | bboxMax = this.getBBoxMax(); | ||
724 | var width = Math.round(bboxMax[0] - bboxMin[0]); | ||
725 | var height = Math.round(bboxMax[1] - bboxMin[1]); | ||
726 | var left = Math.round(bboxMidSW[0] - 0.5 * width); | ||
727 | var top = Math.round(bboxMidSW[1] - 0.5 * height); | ||
728 | |||
729 | var canvasArray=[this._canvas]; | ||
730 | ElementMediator.setProperty(canvasArray, "width", [width+"px"], "Changing", "penTool"); | ||
731 | ElementMediator.setProperty(canvasArray, "height", [height+"px"], "Changing", "penTool"); | ||
732 | |||
733 | //check if the canvas was translated | ||
734 | var penCanvasCurrentLeft = parseInt(ElementMediator.getProperty(this._canvas, "left")); | ||
735 | var penCanvasCurrentTop = parseInt(ElementMediator.getProperty(this._canvas, "top")); | ||
736 | left = Math.round(penCanvasCurrentLeft - diffStrokeWidth*0.5); | ||
737 | top = Math.round(penCanvasCurrentTop - diffStrokeWidth*0.5); | ||
738 | |||
739 | //left = Math.round(bboxMidSW[0] - 0.5 * width); | ||
740 | //top = Math.round(bboxMidSW[1] - 0.5 * height); | ||
741 | ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool"); | ||
742 | ElementMediator.setProperty(canvasArray, "top", [top+ "px"],"Changing", "penTool"); | ||
743 | */ | ||
744 | }; | 697 | }; |
745 | 698 | ||
746 | GLSubpath.prototype.getStrokeColor = function () { | 699 | GLSubpath.prototype.getStrokeColor = function () { |
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 7e97a8a1..50fd97d7 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -98,6 +98,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
98 | //constants used for limiting size of the subpath canvas | 98 | //constants used for limiting size of the subpath canvas |
99 | _MAX_CANVAS_DIMENSION: {value: 3000, writable: false}, | 99 | _MAX_CANVAS_DIMENSION: {value: 3000, writable: false}, |
100 | 100 | ||
101 | /* | ||
101 | // get the stage world position corresponding to the (x,y) mouse event position by querying the snap manager | 102 | // get the stage world position corresponding to the (x,y) mouse event position by querying the snap manager |
102 | // but temporarily turning off all snapping | 103 | // but temporarily turning off all snapping |
103 | _getMouseEventPosition : { | 104 | _getMouseEventPosition : { |
@@ -130,6 +131,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
130 | return [pos, dragPlane]; | 131 | return [pos, dragPlane]; |
131 | } | 132 | } |
132 | }, | 133 | }, |
134 | */ | ||
133 | 135 | ||
134 | ShowToolProperties: { | 136 | ShowToolProperties: { |
135 | value: function () { | 137 | value: function () { |
@@ -146,15 +148,17 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
146 | // will use the plane of the selected path as the working plane if available, else use stage | 148 | // will use the plane of the selected path as the working plane if available, else use stage |
147 | getHitRecord:{ | 149 | getHitRecord:{ |
148 | value: function(x,y){ | 150 | value: function(x,y){ |
149 | var drawingCanvas = ViewUtils.getStageElement(); | ||
150 | if (this._selectedSubpathCanvas){ | 151 | if (this._selectedSubpathCanvas){ |
151 | drawingCanvas = this._selectedSubpathCanvas; | 152 | var drawingCanvas = this._selectedSubpathCanvas; |
153 | var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas); | ||
154 | snapManager.pushWorkingPlane(contentPlane); | ||
155 | |||
152 | } | 156 | } |
153 | var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas); | ||
154 | snapManager.pushWorkingPlane(contentPlane); | ||
155 | var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | 157 | var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); |
156 | var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false); | 158 | var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false); |
157 | snapManager.popWorkingPlane(); | 159 | if (this._selectedSubpathCanvas){ |
160 | snapManager.popWorkingPlane(); | ||
161 | } | ||
158 | return hitRec; | 162 | return hitRec; |
159 | } | 163 | } |
160 | }, | 164 | }, |
@@ -281,8 +285,8 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
281 | 285 | ||
282 | //now perform the hit testing | 286 | //now perform the hit testing |
283 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | 287 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); |
284 | var selAnchorAndParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, false); | 288 | var selAnchorAndParamAndCode = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, false); |
285 | var selParam = selAnchorAndParam[1]; | 289 | var selParam = selAnchorAndParamAndCode[1]; |
286 | var whichPoint = this._selectedSubpath.getSelectedMode(); | 290 | var whichPoint = this._selectedSubpath.getSelectedMode(); |
287 | 291 | ||
288 | 292 | ||
@@ -383,8 +387,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
383 | //clear the canvas before we draw anything else | 387 | //clear the canvas before we draw anything else |
384 | this.application.ninja.stage.clearDrawingCanvas(); | 388 | this.application.ninja.stage.clearDrawingCanvas(); |
385 | this._hoveredAnchorIndex = -1; | 389 | this._hoveredAnchorIndex = -1; |
386 | return; | 390 | |
387 | /* | ||
388 | //set the cursor to be the default cursor (depending on whether the selected subpath has any points yet) | 391 | //set the cursor to be the default cursor (depending on whether the selected subpath has any points yet) |
389 | if (this._selectedSubpath && this._selectedSubpath.getNumAnchors()>0){ | 392 | if (this._selectedSubpath && this._selectedSubpath.getNumAnchors()>0){ |
390 | this.application.ninja.stage.drawingCanvas.style.cursor = //"auto"; | 393 | this.application.ninja.stage.drawingCanvas.style.cursor = //"auto"; |
@@ -395,11 +398,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
395 | "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default"; | 398 | "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default"; |
396 | } | 399 | } |
397 | 400 | ||
398 | var posInfo = this._getMouseEventPosition (event.pageX, event.pageY, true, false); | 401 | var hitRec = this.getHitRecord(event.pageX, event.pageY); |
399 | var currMousePos = posInfo[0]; | ||
400 | 402 | ||
401 | if (this._isDrawing) { | 403 | if (this._isDrawing) { |
402 | if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { | 404 | if (0){ |
405 | //if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { | ||
403 | // BEGIN NEW LOCAL COORD BLOCK | 406 | // BEGIN NEW LOCAL COORD BLOCK |
404 | //build the mouse position in local coordinates | 407 | //build the mouse position in local coordinates |
405 | var drawingCanvas = this._selectedSubpath.getCanvas(); | 408 | var drawingCanvas = this._selectedSubpath.getCanvas(); |
@@ -472,7 +475,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
472 | //this.doSnap(event); | 475 | //this.doSnap(event); |
473 | //this.DrawHandles(); | 476 | //this.DrawHandles(); |
474 | 477 | ||
475 | if (currMousePos && this._selectedSubpath ){ | 478 | if (this._selectedSubpath ){ |
476 | 479 | ||
477 | //convert the mouse pos. to local space of the canvas | 480 | //convert the mouse pos. to local space of the canvas |
478 | //var widthAdjustment = -snapManager.getStageWidth()*0.5; | 481 | //var widthAdjustment = -snapManager.getStageWidth()*0.5; |
@@ -483,36 +486,38 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
483 | if (!drawingCanvas){ | 486 | if (!drawingCanvas){ |
484 | drawingCanvas = ViewUtils.getStageElement(); | 487 | drawingCanvas = ViewUtils.getStageElement(); |
485 | } | 488 | } |
486 | posInfo = this._getMouseEventPosition (event.pageX, event.pageY, false, false); | 489 | var globalMousePos = hitRec.getScreenPoint(); |
487 | var globalMousePos = posInfo[0]; | ||
488 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); | 490 | var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas); |
489 | 491 | ||
490 | 492 | ||
491 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false); | 493 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false); |
492 | var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); | 494 | //var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS); |
493 | if (selAnchorRetCode[0] >=0) { | 495 | var selAnchorAndParamAndCode = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true); |
494 | this._hoveredAnchorIndex = selAnchorRetCode[0]; | 496 | if (selAnchorAndParamAndCode[0] >=0){ //something on the path was hit |
495 | var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1; | 497 | if ((selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_ANCHOR) |
496 | var cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default"; | 498 | || (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_PREV) |
497 | if (this._selectedSubpath.getIsClosed()===false){ | 499 | || (selAnchorAndParamAndCode[2] & this._selectedSubpath.SEL_NEXT)) |
498 | if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){ | 500 | { //the anchor was hit |
499 | //if we're in SELECT_PATH mode, have not yet clicked on the end anchors, AND we hovered over one of the end anchors | 501 | this._hoveredAnchorIndex = selAnchorAndParamAndCode[0]; |
500 | cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default"; | 502 | var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1; |
501 | } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0) { | 503 | var cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default"; |
502 | //if we've selected the last anchor and hover over the first anchor | 504 | if (this._selectedSubpath.getIsClosed()===false){ |
503 | cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default"; | 505 | if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){ |
504 | } | 506 | //if we're in SELECT_PATH mode, have not yet clicked on the end anchors, AND we hovered over one of the end anchors |
505 | } //if path is not closed | 507 | cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default"; |
506 | this.application.ninja.stage.drawingCanvas.style.cursor = cursor; | 508 | } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0) { |
507 | } else { | 509 | //if we've selected the last anchor and hover over the first anchor |
508 | //detect if the current mouse position will hit the path (such that clicking here will insert a new anchor) | 510 | cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default"; |
509 | var pathHitTestData = this._selectedSubpath.pathSamplesLocalHitTest(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS*0.5); |