diff options
-rwxr-xr-x | js/helper-classes/3D/view-utils.js | 71 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 216 |
2 files changed, 237 insertions, 50 deletions
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index f60b953a..35f4a568 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js | |||
@@ -787,6 +787,7 @@ exports.ViewUtils = Montage.create(Component, { | |||
787 | } | 787 | } |
788 | }, | 788 | }, |
789 | 789 | ||
790 | /* | ||
790 | getStageWorldToGlobalMatrix: { | 791 | getStageWorldToGlobalMatrix: { |
791 | value: function() { | 792 | value: function() { |
792 | var stage = this.application.ninja.currentDocument.documentRoot; | 793 | var stage = this.application.ninja.currentDocument.documentRoot; |
@@ -820,6 +821,26 @@ exports.ViewUtils = Montage.create(Component, { | |||
820 | return mat; | 821 | return mat; |
821 | } | 822 | } |
822 | }, | 823 | }, |
824 | */ | ||
825 | getStageWorldToGlobalMatrix: | ||
826 | { | ||
827 | value: function() | ||
828 | { | ||
829 | var stage = this.application.ninja.currentDocument.documentRoot; | ||
830 | |||
831 | this.pushViewportObj( stage ); | ||
832 | // put the point into screen space of the stage - requires | ||
833 | // a translation to the top/left only | ||
834 | var cop = this.getCenterOfProjection(); | ||
835 | var v2s = Matrix.Translation([cop[0], cop[1], 0]); | ||
836 | this.popViewportObj(); | ||
837 | |||
838 | // append the localToGlobal matrix of the stage. | ||
839 | var mat = this.getLocalToGlobalMatrix( stage ); | ||
840 | glmat4.multiply( mat, v2s ); | ||
841 | return mat; | ||
842 | } | ||
843 | }, | ||
823 | 844 | ||
824 | localScreenToLocalWorld: { | 845 | localScreenToLocalWorld: { |
825 | value: function( objPt, elt ) { | 846 | value: function( objPt, elt ) { |
@@ -967,6 +988,56 @@ exports.ViewUtils = Montage.create(Component, { | |||
967 | } | 988 | } |
968 | }, | 989 | }, |
969 | 990 | ||
991 | getLocalToStageWorldMatrix: { | ||
992 | value: function( elt, shouldProject, shouldLocalTransform ) { | ||
993 | var mat = Matrix.I(4); | ||
994 | while (elt) | ||
995 | { | ||
996 | this.pushViewportObj( elt ); | ||
997 | var cop = this.getCenterOfProjection(); | ||
998 | var s2v = Matrix.Translation([-cop[0], -cop[1], 0]); | ||
999 | var objMat = this.getMatrixFromElement( elt ); | ||
1000 | var projMat; | ||
1001 | if(shouldProject) | ||
1002 | { | ||
1003 | //projMat = Matrix.I(4).multiply( this.getPerspectiveDistFromElement(elt) ); | ||
1004 | var pDist = this.getPerspectiveDistFromElement(elt); | ||
1005 | var projMat = glmat4.scale(Matrix.I(4), [pDist,pDist,pDist], []); | ||
1006 | projMat[11] = -1; | ||
1007 | projMat[15] = 1400; | ||
1008 | } | ||
1009 | var v2s = Matrix.Translation([cop[0], cop[1], 0]); | ||
1010 | this.popViewportObj(); | ||
1011 | |||
1012 | // multiply all the matrices together | ||
1013 | //mat = s2v.multiply( mat ); | ||
1014 | glmat4.multiply( s2v, mat, mat ); | ||
1015 | if (elt === this._stageElement) break; | ||
1016 | //mat = objMat.multiply( mat ); | ||
1017 | if (shouldLocalTransform) { | ||
1018 | glmat4.multiply( objMat, mat, mat ); | ||
1019 | } | ||
1020 | if(shouldProject) | ||
1021 | { | ||
1022 | //mat = projMat.multiply( mat ); | ||
1023 | glmat4.multiply( projMat, mat, mat ); | ||
1024 | } | ||
1025 | //mat = v2s.multiply( mat ); | ||
1026 | glmat4.multiply( v2s, mat, mat ); | ||
1027 | |||
1028 | // offset to the parent | ||
1029 | var offset = this.getElementOffset( elt ); | ||
1030 | var offMat = Matrix.Translation([offset[0], offset[1], 0]); | ||
1031 | //mat = offMat.multiply( mat ); | ||
1032 | glmat4.multiply( offMat, mat, mat ); | ||
1033 | |||
1034 | elt = elt.parentElement; | ||
1035 | } | ||
1036 | |||
1037 | return mat; | ||
1038 | } | ||
1039 | }, | ||
1040 | |||
970 | getUpVectorFromMatrix: { | 1041 | getUpVectorFromMatrix: { |
971 | value: function( mat ) { | 1042 | value: function( mat ) { |
972 | //var inv = mat.inverse(); | 1043 | //var inv = mat.inverse(); |
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 | ||