diff options
Diffstat (limited to 'js')
-rwxr-xr-x | js/lib/geom/sub-path.js | 57 | ||||
-rw-r--r-- | js/tools/BrushTool.js | 1 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 82 | ||||
-rwxr-xr-x | js/tools/drawing-tool-base.js | 2 |
4 files changed, 114 insertions, 28 deletions
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 35070915..bca4e1c5 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -310,6 +310,9 @@ GLSubpath.prototype = new GeomObj(); | |||
310 | GLSubpath.prototype.setCanvas = function (c) { | 310 | GLSubpath.prototype.setCanvas = function (c) { |
311 | this._canvas = c; | 311 | this._canvas = c; |
312 | }; | 312 | }; |
313 | GLSubpath.prototype.getCanvas = function() { | ||
314 | return this._canvas; | ||
315 | }; | ||
313 | 316 | ||
314 | GLSubpath.prototype.setWorld = function (world) { | 317 | GLSubpath.prototype.setWorld = function (world) { |
315 | this._world = world; | 318 | this._world = world; |
@@ -875,6 +878,22 @@ GLSubpath.prototype.translateSubpathPerCanvas = function(elemMediator){ | |||
875 | this._dirty=true; | 878 | this._dirty=true; |
876 | }; | 879 | }; |
877 | 880 | ||
881 | GLSubpath.prototype.computeLeftTopWidthHeight = function() { | ||
882 | //build the width and height of this canvas by looking at local coordinates | ||
883 | var bboxMin = this.getLocalBBoxMin(); | ||
884 | var bboxMax = this.getLocalBBoxMax(); | ||
885 | var bboxWidth = bboxMax[0] - bboxMin[0]; | ||
886 | var bboxHeight = bboxMax[1] - bboxMin[1]; | ||
887 | |||
888 | //build the 3D position of the plane center of this canvas by looking at midpoint of the bounding box in stage world coords | ||
889 | bboxMin = this.getBBoxMin(); | ||
890 | bboxMax = this.getBBoxMax(); | ||
891 | var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; | ||
892 | var left = Math.round(bboxMid[0] - 0.5 * bboxWidth); | ||
893 | var top = Math.round(bboxMid[1] - 0.5 * bboxHeight); | ||
894 | return [left, top, bboxWidth, bboxHeight]; | ||
895 | }; | ||
896 | |||
878 | GLSubpath.prototype.setStrokeWidth = function (w) { | 897 | GLSubpath.prototype.setStrokeWidth = function (w) { |
879 | var diffStrokeWidth = w-Math.floor(this._strokeWidth);//if positive, then stroke width grew, else shrunk | 898 | var diffStrokeWidth = w-Math.floor(this._strokeWidth);//if positive, then stroke width grew, else shrunk |
880 | if (diffStrokeWidth === 0) | 899 | if (diffStrokeWidth === 0) |
@@ -891,7 +910,7 @@ GLSubpath.prototype.setStrokeWidth = function (w) { | |||
891 | // **** adjust the left, top, width, and height to adjust for the change in stroke width **** | 910 | // **** adjust the left, top, width, and height to adjust for the change in stroke width **** |
892 | this.createSamples(); //dirty bit is checked here | 911 | this.createSamples(); //dirty bit is checked here |
893 | this.buildLocalCoord(); //local dirty bit is checked here | 912 | this.buildLocalCoord(); //local dirty bit is checked here |
894 | 913 | /* | |
895 | //build the width and height of this canvas by looking at local coordinates | 914 | //build the width and height of this canvas by looking at local coordinates |
896 | var bboxMin = this.getLocalBBoxMin(); | 915 | var bboxMin = this.getLocalBBoxMin(); |
897 | var bboxMax = this.getLocalBBoxMax(); | 916 | var bboxMax = this.getLocalBBoxMax(); |
@@ -904,14 +923,15 @@ GLSubpath.prototype.setStrokeWidth = function (w) { | |||
904 | var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; | 923 | var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; |
905 | var left = Math.round(bboxMid[0] - 0.5 * bboxWidth); | 924 | var left = Math.round(bboxMid[0] - 0.5 * bboxWidth); |
906 | var top = Math.round(bboxMid[1] - 0.5 * bboxHeight); | 925 | var top = Math.round(bboxMid[1] - 0.5 * bboxHeight); |
907 | 926 | */ | |
927 | var ltwh = this.computeLeftTopWidthHeight(); | ||
908 | var canvasArray=[this._canvas]; | 928 | var canvasArray=[this._canvas]; |
909 | ElementMediator.setProperty(canvasArray, "width", [bboxWidth+"px"], "Changing", "penTool");//canvas.width = w; | 929 | ElementMediator.setProperty(canvasArray, "width", [ltwh[2]+"px"], "Changing", "penTool");//canvas.width = w; |
910 | ElementMediator.setProperty(canvasArray, "height", [bboxHeight+"px"], "Changing", "penTool");//canvas.height = h; | 930 | ElementMediator.setProperty(canvasArray, "height", [ltwh[3]+"px"], "Changing", "penTool");//canvas.height = h; |
911 | ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); | 931 | ElementMediator.setProperty(canvasArray, "left", [ltwh[0]+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); |
912 | ElementMediator.setProperty(canvasArray, "top", [top + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); | 932 | ElementMediator.setProperty(canvasArray, "top", [ltwh[1]+ "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); |
913 | this.setCanvasLeft(left); | 933 | this.setCanvasLeft(ltwh[0]); |
914 | this.setCanvasTop(top); | 934 | this.setCanvasTop(ltwh[1]); |
915 | }; | 935 | }; |
916 | 936 | ||
917 | GLSubpath.prototype.getStrokeMaterial = function () { | 937 | GLSubpath.prototype.getStrokeMaterial = function () { |
@@ -1098,6 +1118,25 @@ GLSubpath.prototype._unprojectPt = function(pt, pespectiveDist) { | |||
1098 | return retPt; | 1118 | return retPt; |
1099 | }; | 1119 | }; |
1100 | 1120 | ||
1121 | //return the local coord. of the anchor at the specified index, null if the anchor does not have a local coord yet | ||
1122 | GLSubpath.prototype.getAnchorLocalCoord = function(index){ | ||
1123 | if (this._isDirty){ | ||
1124 | this.createSamples(); | ||
1125 | } | ||
1126 | if (this._isLocalDirty){ | ||
1127 | this.buildLocalCoord(); | ||
1128 | } | ||
1129 | if (index<0 || index>= this._Anchors.length || index>=this._anchorSampleIndex.length){ | ||
1130 | return null; | ||
1131 | } | ||
1132 | var anchorSampleIndex = this._anchorSampleIndex[index]; | ||
1133 | if (anchorSampleIndex>=this._LocalPoints.length){ | ||
1134 | return null; | ||
1135 | } | ||
1136 | var localCoord = this._LocalPoints[anchorSampleIndex].slice(0); | ||
1137 | return localCoord; | ||
1138 | }; | ||
1139 | |||
1101 | //buildLocalCoord | 1140 | //buildLocalCoord |
1102 | GLSubpath.prototype.buildLocalCoord = function () { | 1141 | GLSubpath.prototype.buildLocalCoord = function () { |
1103 | if (!this._isLocalDirty) { | 1142 | if (!this._isLocalDirty) { |
@@ -1435,6 +1474,8 @@ GLSubpath.prototype.makeFillMaterial = function() { | |||
1435 | }; | 1474 | }; |
1436 | 1475 | ||
1437 | GLSubpath.prototype.getNearVertex = function( eyePt, dir ){ | 1476 | GLSubpath.prototype.getNearVertex = function( eyePt, dir ){ |
1477 | //todo BUILD A BBOX USING LOCAL COORD. (NO z NEEDED) | ||
1478 | |||
1438 | //get the parameters used for computing perspective transformation | 1479 | //get the parameters used for computing perspective transformation |
1439 | var bboxDim = []; | 1480 | var bboxDim = []; |
1440 | var bboxMid = []; | 1481 | var bboxMid = []; |
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index f7f0e4bf..78d1e7e6 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -134,7 +134,6 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
134 | snapManager.enableSnapAlign(false); | 134 | snapManager.enableSnapAlign(false); |
135 | 135 | ||
136 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | 136 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); |
137 | //todo fix this function to allow us to get the correct location (in 3D) for the mouse position | ||
138 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | 137 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); |
139 | this._draggingPlane = snapManager.getDragPlane(); | 138 | this._draggingPlane = snapManager.getDragPlane(); |
140 | 139 | ||
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 2eae6adc..f1c79153 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -14,7 +14,7 @@ var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | |||
14 | var TagTool = require("js/tools/TagTool").TagTool; | 14 | var TagTool = require("js/tools/TagTool").TagTool; |
15 | var ElementController = require("js/controllers/elements/element-controller").ElementController; | 15 | var ElementController = require("js/controllers/elements/element-controller").ElementController; |
16 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; | 16 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; |
17 | 17 | var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; | |
18 | var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; | 18 | var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; |
19 | var SubPath = require("js/lib/geom/sub-path").SubPath; | 19 | var SubPath = require("js/lib/geom/sub-path").SubPath; |
20 | 20 | ||
@@ -108,7 +108,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
108 | snapManager.enableSnapAlign(false); | 108 | snapManager.enableSnapAlign(false); |
109 | 109 | ||
110 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | 110 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); |
111 | //todo fix this function to allow us to get the correct location (in 3D) for the mouse position | ||
112 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | 111 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); |
113 | this._dragPlane = snapManager.getDragPlane(); | 112 | this._dragPlane = snapManager.getDragPlane(); |
114 | 113 | ||
@@ -830,14 +829,12 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
830 | //display the subpath as a sequence of cubic beziers | 829 | //display the subpath as a sequence of cubic beziers |
831 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) | 830 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) |
832 | ctx.strokeStyle = "green"; | 831 | ctx.strokeStyle = "green"; |
833 | //if (subpath.getStrokeColor()) | 832 | var i=0; |
834 | // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); | ||
835 | |||
836 | ctx.beginPath(); | 833 | ctx.beginPath(); |
837 | var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset; | 834 | var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset; |
838 | var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset; | 835 | var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset; |
839 | ctx.moveTo(p0x, p0y); | 836 | ctx.moveTo(p0x, p0y); |
840 | for (var i = 1; i < numAnchors; i++) { | 837 | for (i = 1; i < numAnchors; i++) { |
841 | var p1x = subpath.getAnchor(i - 1).getNextX()+ horizontalOffset; | 838 | var p1x = subpath.getAnchor(i - 1).getNextX()+ horizontalOffset; |
842 | var p1y = subpath.getAnchor(i - 1).getNextY()+ verticalOffset; | 839 | var p1y = subpath.getAnchor(i - 1).getNextY()+ verticalOffset; |
843 | var p2x = subpath.getAnchor(i).getPrevX()+ horizontalOffset; | 840 | var p2x = subpath.getAnchor(i).getPrevX()+ horizontalOffset; |
@@ -858,6 +855,34 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
858 | } | 855 | } |
859 | ctx.stroke(); | 856 | ctx.stroke(); |
860 | 857 | ||
858 | |||
859 | //draw the stage world points by projecting them to screen space | ||
860 | //get the screen coords of this anchor from its stage world coord | ||
861 | ctx.beginPath(); | ||
862 | ctx.strokeStyle = "red"; | ||
863 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); | ||
864 | var currentLTWH = subpath.computeLeftTopWidthHeight(); | ||
865 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); | ||
866 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top")); | ||
867 | |||
868 | var localCoord = subpath.getAnchorLocalCoord(0); | ||
869 | var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); | ||
870 | //add the difference between the current left and top and the canvas left and top | ||
871 | sp[0]+=deltaX; sp[1]+=deltaY; | ||
872 | |||
873 | ctx.moveTo(sp[0],sp[1]); | ||
874 | for (i = 1; i < numAnchors; i++) { | ||
875 | localCoord = subpath.getAnchorLocalCoord(i); | ||
876 | 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.lineTo(sp[0],sp[1]); | ||
880 | } | ||
881 | if (subpath.getIsClosed()){ | ||
882 | ctx.closePath(); | ||
883 | } | ||
884 | ctx.stroke(); | ||
885 | |||
861 | ctx.restore(); | 886 | ctx.restore(); |
862 | } //function (subpath) | 887 | } //function (subpath) |
863 | }, //DrawSubpathSVG | 888 | }, //DrawSubpathSVG |
@@ -879,37 +904,56 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
879 | var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; | 904 | var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; |
880 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; | 905 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; |
881 | 906 | ||
882 | //display circles and squares near all control points | 907 | var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas()); |
908 | |||
909 | var currentLTWH = subpath.computeLeftTopWidthHeight(); | ||
910 | var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left")); | ||
911 | var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top")); | ||
912 | |||
913 | //display circles and squares near all control points | ||
883 | ctx.fillStyle = "#FFFFFF"; | 914 | ctx.fillStyle = "#FFFFFF"; |
884 | ctx.lineWidth = 1; | 915 | ctx.lineWidth = 1; |
885 | ctx.strokeStyle = "green"; | 916 | ctx.strokeStyle = "green"; |
886 | var anchorDelta = 2; | 917 | var anchorDelta = 2; |