diff options
Diffstat (limited to 'js/tools/PenTool.js')
-rwxr-xr-x | js/tools/PenTool.js | 216 |
1 files changed, 166 insertions, 50 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 962f178d..32902cea 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -351,6 +351,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
351 | 351 | ||
352 | //make the subpath dirty so it will get re-drawn | 352 | //make the subpath dirty so it will get re-drawn |
353 | this._selectedSubpath.makeDirty(); | 353 | this._selectedSubpath.makeDirty(); |
354 | //this.DrawSubpathSVG(this._selectedSubpath); | ||
355 | } | ||
356 | //todo temp code only...remove this and uncomment the DrawSubpathSVG above | ||
357 | if (this._selectedSubpath){ | ||
354 | this.DrawSubpathSVG(this._selectedSubpath); | 358 | this.DrawSubpathSVG(this._selectedSubpath); |
355 | } | 359 | } |
356 | 360 | ||
@@ -825,6 +829,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
825 | throw ("null drawing context in Pentool::DrawSubpathSVG"); | 829 | throw ("null drawing context in Pentool::DrawSubpathSVG"); |
826 | ctx.save(); | 830 | ctx.save(); |
827 | 831 | ||
832 | /* | ||
828 | var horizontalOffset = this.application.ninja.stage.userContentLeft; | 833 | var horizontalOffset = this.application.ninja.stage.userContentLeft; |
829 | var verticalOffset = this.application.ninja.stage.userContentTop; | 834 | var verticalOffset = this.application.ninja.stage.userContentTop; |
830 | //display the subpath as a sequence of cubic beziers | 835 | //display the subpath as a sequence of cubic beziers |
@@ -854,34 +859,84 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
854 | var p3y = subpath.getAnchor(0).getPosY()+ verticalOffset; | 859 | var p3y = subpath.getAnchor(0).getPosY()+ verticalOffset; |
855 | ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y); | 860 | ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y); |
856 | } | 861 | } |
857 | ctx.stroke(); | 862 | ctx.stroke();*/ |
858 | 863 | ||
859 | 864 | ||
860 | //draw the stage world points by projecting them to screen space | 865 | //draw the stage world points by projecting them to screen space |
861 | //get the screen coords of this anchor from its stage world coord | 866 | //get the screen coords of this anchor from its stage world coord |
862 | ctx.beginPath(); | 867 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) |
863 | ctx.strokeStyle = "red"; | 868 | ctx.strokeStyle = "green"; |
864 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); | 869 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); |
865 | var currentLTWH = subpath.computeLeftTopWidthHeight(); | 870 | |
871 | /*var currentLTWH = subpath.computeLeftTopWidthHeight(); | ||
866 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); | 872 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); |
867 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top")); | 873 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top"));*/ |
868 | 874 | ||
869 | var localCoord = subpath.getAnchorLocalCoord(0); | 875 | //var localCoord = subpath.getAnchorLocalCoord(0); |
870 | var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | 876 | //var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); |
871 | //add the difference between the current left and top and the canvas left and top | 877 | //add the difference between the current left and top and the canvas left and top |
872 | sp[0]+=deltaX; sp[1]+=deltaY; | 878 | //sp[0]+=deltaX; sp[1]+=deltaY; |
879 | //ctx.moveTo(sp[0], sp[1]); | ||
880 | |||
881 | var widthAdjustment = -snapManager.getStageWidth()*0.5; | ||
882 | var heightAdjustment = -snapManager.getStageHeight()*0.5; | ||
883 | /*var stageWorldToGlobalMatrix = ViewUtils.getStageWorldToGlobalMatrix(); | ||
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, []); | ||
888 | |||
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 | ||
890 | c0 = MathUtils.transformAndDivideHomogeneousPoint( | ||
891 | [subpath.getAnchor(0).getPosX()+widthAdjustment, | ||
892 | subpath.getAnchor(0).getPosY()+heightAdjustment, | ||
893 | subpath.getAnchor(0).getPosZ()], | ||
894 | stageWorldToLocalMat); | ||
895 | c0 = MathUtils.transformAndDivideHomogeneousPoint(c0,localToGlobalMat); //convert from local coord to global (screen) coord | ||
896 | ctx.beginPath(); | ||
897 | ctx.moveTo(c0[0],c0[1]); | ||
898 | var prevAnchor = subpath.getAnchor(0); | ||
899 | var currAnchor = null; | ||
900 | var numBezierCurves = numAnchors; | ||
901 | if (subpath.getIsClosed()){ | ||
902 | numBezierCurves+=1; | ||
903 | } | ||
873 | 904 | ||
874 | ctx.moveTo(sp[0],sp[1]); | 905 | for (i = 1; i < numBezierCurves; i++) { |
875 | for (i = 1; i < numAnchors; i++) { | 906 | currAnchor = subpath.getAnchor(i%numAnchors); |
876 | localCoord = subpath.getAnchorLocalCoord(i); | 907 | /*localCoord = subpath.getAnchorLocalCoord(i); |
877 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | 908 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); |
878 | //add the difference between the current left and top and the canvas left and top | 909 | //add the difference between the current left and top and the canvas left and top |
879 | sp[0]+=deltaX; sp[1]+=deltaY; | 910 | sp[0]+=deltaX; sp[1]+=deltaY;*/ |
880 | ctx.lineTo(sp[0],sp[1]); | 911 | |
881 | } | 912 | //ctx.lineTo(sp[0], sp[1]); |
882 | if (subpath.getIsClosed()){ | 913 | |
883 | ctx.closePath(); | 914 | c1 = MathUtils.transformAndDivideHomogeneousPoint( |
915 | [prevAnchor.getNextX()+widthAdjustment, | ||
916 | prevAnchor.getNextY()+heightAdjustment, | ||
917 | prevAnchor.getNextZ()], | ||
918 | stageWorldToLocalMat); | ||
919 | c1 = MathUtils.transformAndDivideHomogeneousPoint(c1,localToGlobalMat); //convert from local coord to global (screen) coord | ||
920 | |||
921 | c2 = MathUtils.transformAndDivideHomogeneousPoint( | ||
922 | [currAnchor.getPrevX()+widthAdjustment, | ||
923 | currAnchor.getPrevY()+heightAdjustment, | ||
924 | currAnchor.getPrevZ()], | ||
925 | stageWorldToLocalMat); | ||
926 | c2 = MathUtils.transformAndDivideHomogeneousPoint(c2,localToGlobalMat); //convert from local coord to global (screen) coord | ||
927 | |||
928 | c3 = MathUtils.transformAndDivideHomogeneousPoint( | ||
929 | [currAnchor.getPosX()+widthAdjustment, | ||
930 | currAnchor.getPosY()+heightAdjustment, | ||
931 | currAnchor.getPosZ()], | ||
932 | stageWorldToLocalMat); | ||
933 | c3 = MathUtils.transformAndDivideHomogeneousPoint(c3,localToGlobalMat); //convert from local coord to global (screen) coord | ||
934 | |||
935 | ctx.bezierCurveTo(c1[0], c1[1], c2[0], c2[1], c3[0], c3[1]); | ||
936 | prevAnchor = currAnchor; | ||
884 | } | 937 | } |
938 | |||
939 | |||
885 | ctx.stroke(); | 940 | ctx.stroke(); |
886 | 941 | ||
887 | ctx.restore(); | 942 | ctx.restore(); |
@@ -905,27 +960,43 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
905 | var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; | 960 | var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; |
906 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; | 961 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; |
907 | 962 | ||
963 | var widthAdjustment = -snapManager.getStageWidth()*0.5; | ||
964 | var heightAdjustment = -snapManager.getStageHeight()*0.5; | ||
965 | |||
908 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); | 966 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); |
909 | 967 | ||
910 | var currentLTWH = subpath.computeLeftTopWidthHeight(); | 968 | /*var currentLTWH = subpath.computeLeftTopWidthHeight(); |
911 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); | 969 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); |
912 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top")); | 970 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top")); |
971 | */ | ||
913 | 972 | ||
973 | var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(subpath.getCanvas(), true, false); | ||
974 | var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []); | ||
975 | |||
976 | |||
914 | //display circles and squares near all control points | 977 | //display circles and squares near all control points |
915 | ctx.fillStyle = "#FFFFFF"; | 978 | ctx.fillStyle = "#FFFFFF"; |
916 | ctx.lineWidth = 1; | 979 | ctx.lineWidth = 1; |
917 | ctx.strokeStyle = "green"; | 980 | ctx.strokeStyle = "green"; |
918 | var anchorDelta = 2; | 981 | var anchorDelta = 2; |
919 | var selAnchorDelta = 4; | 982 | var selAnchorDelta = 4; |
983 | var px=0,py=0; | ||
984 | var localCoord = null; | ||
985 | var sp=[0,0,0]; | ||
986 | var currAnchor = null; | ||
920 | for (var i = 0; i < numAnchors; i++) { | 987 | for (var i = 0; i < numAnchors; i++) { |
921 | var px = subpath.getAnchor(i).getPosX()+horizontalOffset; | 988 | currAnchor = subpath.getAnchor(i); |
922 | var py = subpath.getAnchor(i).getPosY()+verticalOffset; | 989 | //px = currAnchor.getPosX()+horizontalOffset; |
923 | var localCoord = subpath.getAnchorLocalCoord(i); | 990 | //py = currAnchor.getPosY()+verticalOffset; |
924 | if (localCoord) { | 991 | //var localCoordOld = subpath.getAnchorLocalCoord(i); |
925 | var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | 992 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord |
926 | px = sp[0]; py=sp[1]; | 993 | //localCoord[0]-=snapManager.getStageWidth()*0.5; |
927 | sp[0]+=deltaX; sp[1]+=deltaY; | 994 | //localCoord[1]-=snapManager.getStageHeight()*0.5; |
928 | } | 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 | ||
997 | //sp[0]+=deltaX; sp[1]+=deltaY; | ||
998 | px = sp[0]; py=sp[1]; | ||
999 | |||
929 | ctx.beginPath(); | 1000 | ctx.beginPath(); |
930 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); | 1001 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); |
931 | ctx.moveTo(px-anchorDelta, py-anchorDelta); | 1002 | ctx.moveTo(px-anchorDelta, py-anchorDelta); |
@@ -935,20 +1006,22 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
935 | ctx.closePath(); | 1006 | ctx.closePath(); |
936 | ctx.fill(); | 1007 | ctx.fill(); |
937 | ctx.stroke(); | 1008 | ctx.stroke(); |
938 | |||
939 | } | 1009 | } |
940 | 1010 | ||
941 | //display the hovered over anchor point | 1011 | //display the hovered over anchor point |
942 | ctx.lineWidth = 2; | 1012 | ctx.lineWidth = 2; |
943 | if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { | 1013 | if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { |
944 | var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX() +horizontalOffset; | 1014 | currAnchor = subpath.getAnchor(this._hoveredAnchorIndex); |
945 | var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY() +verticalOffset; | 1015 | px = currAnchor.getPosX() +horizontalOffset; |
946 | var localCoord = subpath.getAnchorLocalCoord(this._hoveredAnchorIndex); | 1016 | py = currAnchor.getPosY() +verticalOffset; |
947 | if (localCoord) { | 1017 | //localCoord = subpath.getAnchorLocalCoord(this._hoveredAnchorIndex); |
948 | var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | 1018 | localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord |
949 | px = sp[0]; py=sp[1]; | 1019 | //localCoord[0]-=snapManager.getStageWidth()*0.5; |
950 | sp[0]+=deltaX; sp[1]+=deltaY; | 1020 | //localCoord[1]-=snapManager.getStageHeight()*0.5; |
951 | } | 1021 | sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); |
1022 | //sp[0]+=deltaX; sp[1]+=deltaY; | ||
1023 | px = sp[0]; py=sp[1]; | ||
1024 | |||
952 | ctx.beginPath(); | 1025 | ctx.beginPath(); |
953 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); | 1026 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); |
954 | ctx.moveTo(px-selAnchorDelta, py-selAnchorDelta); | 1027 | ctx.moveTo(px-selAnchorDelta, py-selAnchorDelta); |
@@ -972,15 +1045,45 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
972 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 1045 | var selAnchor |