diff options
-rwxr-xr-x | js/tools/PenTool.js | 127 |
1 files changed, 17 insertions, 110 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 32902cea..f310208e 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -402,7 +402,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
402 | TranslateSelectedSubpathPerPenCanvas:{ | 402 | TranslateSelectedSubpathPerPenCanvas:{ |
403 | value: function() { | 403 | value: function() { |
404 | if (this._penCanvas!==null) { | 404 | if (this._penCanvas!==null) { |
405 | this._selectedSubpath.translateSubpathPerCanvas(ElementMediator); | 405 | this._selectedSubpath.translateSubpathPerCanvas(ElementMediator); |
406 | } | 406 | } |
407 | } | 407 | } |
408 | }, | 408 | }, |
@@ -586,6 +586,8 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
586 | 586 | ||
587 | var drawData = this.getDrawingData(); | 587 | var drawData = this.getDrawingData(); |
588 | if (drawData) { | 588 | if (drawData) { |
589 | //todo handle the case when the user does not click a point on the path canvas | ||
590 | // (we don't want to set the plane mat. to be set to some plane not on the canvas of the path) | ||
589 | if (!this._penPlaneMat) { | 591 | if (!this._penPlaneMat) { |
590 | this._penPlaneMat = drawData.planeMat; | 592 | this._penPlaneMat = drawData.planeMat; |
591 | } | 593 | } |
@@ -829,61 +831,18 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
829 | throw ("null drawing context in Pentool::DrawSubpathSVG"); | 831 | throw ("null drawing context in Pentool::DrawSubpathSVG"); |
830 | ctx.save(); | 832 | ctx.save(); |
831 | 833 | ||
832 | /* | 834 | var drawingCanvas = subpath.getCanvas(); |
833 | var horizontalOffset = this.application.ninja.stage.userContentLeft; | 835 | if (!drawingCanvas){ |
834 | var verticalOffset = this.application.ninja.stage.userContentTop; | 836 | drawingCanvas = ViewUtils.getStageElement(); |
835 | //display the subpath as a sequence of cubic beziers | ||
836 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) | ||
837 | ctx.strokeStyle = "green"; | ||
838 | var i=0; | ||
839 | ctx.beginPath(); | ||
840 | var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset; | ||
841 | var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset; | ||
842 | ctx.moveTo(p0x, p0y); | ||
843 | for (i = 1; i < numAnchors; i++) { | ||
844 | var p1x = subpath.getAnchor(i - 1).getNextX()+ horizontalOffset; | ||
845 | var p1y = subpath.getAnchor(i - 1).getNextY()+ verticalOffset; | ||
846 | var p2x = subpath.getAnchor(i).getPrevX()+ horizontalOffset; | ||
847 | var p2y = subpath.getAnchor(i).getPrevY()+ verticalOffset; | ||
848 | var p3x = subpath.getAnchor(i).getPosX()+ horizontalOffset; | ||
849 | var p3y = subpath.getAnchor(i).getPosY()+ verticalOffset; | ||
850 | ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y); | ||
851 | } | 837 | } |
852 | if (subpath.getIsClosed()) { | ||
853 | var i = numAnchors - 1; | ||
854 | var p1x = subpath.getAnchor(i).getNextX()+ horizontalOffset; | ||
855 | var p1y = subpath.getAnchor(i).getNextY()+ verticalOffset; | ||
856 | var p2x = subpath.getAnchor(0).getPrevX()+ horizontalOffset; | ||
857 | var p2y = subpath.getAnchor(0).getPrevY()+ verticalOffset; | ||
858 | var p3x = subpath.getAnchor(0).getPosX()+ horizontalOffset; | ||
859 | var p3y = subpath.getAnchor(0).getPosY()+ verticalOffset; | ||
860 | ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y); | ||
861 | } | ||
862 | ctx.stroke();*/ | ||
863 | |||
864 | |||
865 | //draw the stage world points by projecting them to screen space | 838 | //draw the stage world points by projecting them to screen space |
866 | //get the screen coords of this anchor from its stage world coord | 839 | //get the screen coords of this anchor from its stage world coord |
867 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) | 840 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) |
868 | ctx.strokeStyle = "green"; | 841 | ctx.strokeStyle = "green"; |
869 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); | 842 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(drawingCanvas); |
870 | |||
871 | /*var currentLTWH = subpath.computeLeftTopWidthHeight(); | ||
872 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); | ||
873 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top"));*/ | ||
874 | |||
875 | //var localCoord = subpath.getAnchorLocalCoord(0); | ||
876 | //var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | ||
877 | //add the difference between the current left and top and the canvas left and top | ||
878 | //sp[0]+=deltaX; sp[1]+=deltaY; | ||
879 | //ctx.moveTo(sp[0], sp[1]); | ||
880 | |||
881 | var widthAdjustment = -snapManager.getStageWidth()*0.5; | 843 | var widthAdjustment = -snapManager.getStageWidth()*0.5; |
882 | var heightAdjustment = -snapManager.getStageHeight()*0.5; | 844 | var heightAdjustment = -snapManager.getStageHeight()*0.5; |
883 | /*var stageWorldToGlobalMatrix = ViewUtils.getStageWorldToGlobalMatrix(); | 845 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false); |
884 | var localToStageWorldMatrix = ViewUtils.getMatrixFromElement(subpath.getCanvas()); | ||
885 | glmat4.multiply(localToStageWorldMatrix, stageWorldToGlobalMatrix, stageWorldToGlobalMatrix);*/ | ||
886 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(subpath.getCanvas(), true, false); | ||
887 | var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []); | 846 | var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []); |
888 | 847 | ||
889 | var c0=[0,0,0], c1=[0,0,0],c2=[0,0,0], c3=[0,0,0]; //screen coord of the bezier control points | 848 | var c0=[0,0,0], c1=[0,0,0],c2=[0,0,0], c3=[0,0,0]; //screen coord of the bezier control points |
@@ -904,12 +863,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
904 | 863 | ||
905 | for (i = 1; i < numBezierCurves; i++) { | 864 | for (i = 1; i < numBezierCurves; i++) { |
906 | currAnchor = subpath.getAnchor(i%numAnchors); | 865 | currAnchor = subpath.getAnchor(i%numAnchors); |
907 | /*localCoord = subpath.getAnchorLocalCoord(i); | ||
908 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | ||
909 | //add the difference between the current left and top and the canvas left and top | ||
910 | sp[0]+=deltaX; sp[1]+=deltaY;*/ | ||
911 | |||
912 | //ctx.lineTo(sp[0], sp[1]); | ||
913 | 866 | ||
914 | c1 = MathUtils.transformAndDivideHomogeneousPoint( | 867 | c1 = MathUtils.transformAndDivideHomogeneousPoint( |
915 | [prevAnchor.getNextX()+widthAdjustment, | 868 | [prevAnchor.getNextX()+widthAdjustment, |
@@ -957,20 +910,15 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
957 | throw ("null drawing context in Pentool::DrawSelectedSubpathAnchors"); | 910 | throw ("null drawing context in Pentool::DrawSelectedSubpathAnchors"); |
958 | ctx.save(); | 911 | ctx.save(); |
959 | 912 | ||
960 | var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; | ||
961 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; | ||
962 | |||
963 | var widthAdjustment = -snapManager.getStageWidth()*0.5; | 913 | var widthAdjustment = -snapManager.getStageWidth()*0.5; |
964 | var heightAdjustment = -snapManager.getStageHeight()*0.5; | 914 | var heightAdjustment = -snapManager.getStageHeight()*0.5; |
965 | 915 | ||
966 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); | 916 | var drawingCanvas = subpath.getCanvas(); |
967 | 917 | if (!drawingCanvas){ | |
968 | /*var currentLTWH = subpath.computeLeftTopWidthHeight(); | 918 | drawingCanvas = ViewUtils.getStageElement(); |
969 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); | 919 | } |
970 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top")); | 920 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(drawingCanvas); |
971 | */ | 921 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false); |
972 | |||
973 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(subpath.getCanvas(), true, false); | ||
974 | var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []); | 922 | var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []); |
975 | 923 | ||
976 | 924 | ||
@@ -986,19 +934,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
986 | var currAnchor = null; | 934 | var currAnchor = null; |
987 | for (var i = 0; i < numAnchors; i++) { | 935 | for (var i = 0; i < numAnchors; i++) { |
988 | currAnchor = subpath.getAnchor(i); | 936 | currAnchor = subpath.getAnchor(i); |
989 | //px = currAnchor.getPosX()+horizontalOffset; | ||
990 | //py = currAnchor.getPosY()+verticalOffset; | ||
991 | //var localCoordOld = subpath.getAnchorLocalCoord(i); | ||
992 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord | 937 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord |
993 | //localCoord[0]-=snapManager.getStageWidth()*0.5; | ||
994 | //localCoord[1]-=snapManager.getStageHeight()*0.5; | ||
995 | //sp = MathUtils.transformAndDivideHomogeneousPoint(localCoordOld,localToGlobalMat); //convert from local coord to global (screen) coord | ||
996 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); //convert from local coord to global (screen) coord | 938 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); //convert from local coord to global (screen) coord |
997 | //sp[0]+=deltaX; sp[1]+=deltaY; | ||
998 | px = sp[0]; py=sp[1]; | 939 | px = sp[0]; py=sp[1]; |
999 | 940 | ||
1000 | ctx.beginPath(); | 941 | ctx.beginPath(); |
1001 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); | ||
1002 | ctx.moveTo(px-anchorDelta, py-anchorDelta); | 942 | ctx.moveTo(px-anchorDelta, py-anchorDelta); |
1003 | ctx.lineTo(px+anchorDelta, py-anchorDelta); | 943 | ctx.lineTo(px+anchorDelta, py-anchorDelta); |
1004 | ctx.lineTo(px+anchorDelta, py+anchorDelta); | 944 | ctx.lineTo(px+anchorDelta, py+anchorDelta); |
@@ -1012,18 +952,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
1012 | ctx.lineWidth = 2; | 952 | ctx.lineWidth = 2; |
1013 | if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { | 953 | if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { |
1014 | currAnchor = subpath.getAnchor(this._hoveredAnchorIndex); | 954 | currAnchor = subpath.getAnchor(this._hoveredAnchorIndex); |
1015 | px = currAnchor.getPosX() +horizontalOffset; | ||
1016 | py = currAnchor.getPosY() +verticalOffset; | ||
1017 | //localCoord = subpath.getAnchorLocalCoord(this._hoveredAnchorIndex); | ||
1018 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord | 955 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord |
1019 | //localCoord[0]-=snapManager.getStageWidth()*0.5; | ||
1020 | //localCoord[1]-=snapManager.getStageHeight()*0.5; | ||
1021 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | 956 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); |
1022 | //sp[0]+=deltaX; sp[1]+=deltaY; | ||
1023 | px = sp[0]; py=sp[1]; | 957 | px = sp[0]; py=sp[1]; |
1024 | 958 | ||
1025 | ctx.beginPath(); | 959 | ctx.beginPath(); |
1026 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); | ||
1027 | ctx.moveTo(px-selAnchorDelta, py-selAnchorDelta); | 960 | ctx.moveTo(px-selAnchorDelta, py-selAnchorDelta); |
1028 | ctx.lineTo(px+selAnchorDelta, py-selAnchorDelta); | 961 | ctx.lineTo(px+selAnchorDelta, py-selAnchorDelta); |
1029 | ctx.lineTo(px+selAnchorDelta, py+selAnchorDelta); | 962 | ctx.lineTo(px+selAnchorDelta, py+selAnchorDelta); |
@@ -1046,34 +979,17 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
1046 | var whichPoint = this._selectedSubpath.getSelectedMode(); //which of the selected handles to highlight | 979 | var whichPoint = this._selectedSubpath.getSelectedMode(); //which of the selected handles to highlight |
1047 | 980 | ||
1048 | //compute the screen (global) coord. of the selected anchor | 981 | //compute the screen (global) coord. of the selected anchor |
1049 | var posX=selAnchor.getPosX()+horizontalOffset, posY=selAnchor.getPosY()+verticalOffset; | ||
1050 | //localCoord = subpath.getAnchorLocalCoord(subpath.getSelectedAnchorIndex()); | ||
1051 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([selAnchor.getPosX()+widthAdjustment, selAnchor.getPosY()+heightAdjustment, selAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord | 982 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([selAnchor.getPosX()+widthAdjustment, selAnchor.getPosY()+heightAdjustment, selAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord |
1052 | //localCoord[0]-=snapManager.getStageWidth()*0.5; | ||
1053 | //localCoord[1]-=snapManager.getStageHeight()*0.5; | ||
1054 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | 983 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); |
1055 | //sp[0]+=deltaX; sp[1]+=deltaY; | 984 | var posX = sp[0]; var posY=sp[1]; |
1056 | posX = sp[0]; posY=sp[1]; | ||
1057 | 985 | ||
1058 | //compute the screen (global) coord. of the selected anchor prev and next points | 986 | //compute the screen (global) coord. of the selected anchor prev and next points |
1059 | var prevX=selAnchor.getPrevX() + horizontalOffset, prevY = selAnchor.getPrevY() + verticalOffset, | ||
1060 | nextX=selAnchor.getNextX() + horizontalOffset, nextY=selAnchor.getNextY() + verticalOffset; | ||
1061 | var prevLocalCoord = MathUtils.transformAndDivideHomogeneousPoint([selAnchor.getPrevX()+widthAdjustment, selAnchor.getPrevY()+heightAdjustment, selAnchor.getPrevZ()], stageWorldToLocalMat); | 987 | var prevLocalCoord = MathUtils.transformAndDivideHomogeneousPoint([selAnchor.getPrevX()+widthAdjustment, selAnchor.getPrevY()+heightAdjustment, selAnchor.getPrevZ()], stageWorldToLocalMat); |
1062 | //prevLocalCoord[0]-=snapManager.getStageWidth()*0.5; | ||
1063 | //prevLocalCoord[1]-=snapManager.getStageHeight()*0.5; | ||
1064 | sp = MathUtils.transformAndDivideHomogeneousPoint(prevLocalCoord, localToGlobalMat); | 988 | sp = MathUtils.transformAndDivideHomogeneousPoint(prevLocalCoord, localToGlobalMat); |
1065 | if (sp){ | 989 | var prevX = sp[0]; var prevY=sp[1]; |
1066 | //sp[0]+=deltaX; sp[1]+=deltaY; | ||
1067 | prevX = sp[0], prevY=sp[1]; | ||
1068 | } | ||
1069 | var nextLocalCoord = MathUtils.transformAndDivideHomogeneousPoint([selAnchor.getNextX()+widthAdjustment, selAnchor.getNextY()+heightAdjustment, selAnchor.getNextZ()], stageWorldToLocalMat); | 990 | var nextLocalCoord = MathUtils.transformAndDivideHomogeneousPoint([selAnchor.getNextX()+widthAdjustment, selAnchor.getNextY()+heightAdjustment, selAnchor.getNextZ()], stageWorldToLocalMat); |
1070 |