aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-06 10:53:27 -0700
committerPushkar Joshi2012-04-06 10:53:27 -0700
commitf492c816575f990429f4540c9a3eb60c28a89623 (patch)
treeeef2eab16c4d99d2c67f542b454bf0251548b57e /js/tools
parent0681b34b506767b6caf2816b9096bc1a57a17a2d (diff)
downloadninja-f492c816575f990429f4540c9a3eb60c28a89623.tar.gz
complete version of the code for rendering selected subpath anchor points and path overlay (code needs cleanup)...still buggy if creating new paths
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/PenTool.js216
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);