aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-04 15:52:41 -0700
committerPushkar Joshi2012-04-04 15:52:41 -0700
commitf4eccf3e7cb76a14a3546a646575162dbd831538 (patch)
tree8beabf96fc3dcc08d1fdb5a6a016be8992260b58
parent12f988a32da12731ab35104128e396a6f388aeae (diff)
downloadninja-f4eccf3e7cb76a14a3546a646575162dbd831538.tar.gz
draw the path overlay (and anchor points) taking into account the transformation applied to the element canvas and the stage canvas. Still quite buggy.
-rwxr-xr-xjs/lib/geom/sub-path.js57
-rw-r--r--js/tools/BrushTool.js1
-rwxr-xr-xjs/tools/PenTool.js82
-rwxr-xr-xjs/tools/drawing-tool-base.js2
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();
310GLSubpath.prototype.setCanvas = function (c) { 310GLSubpath.prototype.setCanvas = function (c) {
311 this._canvas = c; 311 this._canvas = c;
312}; 312};
313GLSubpath.prototype.getCanvas = function() {
314 return this._canvas;
315};
313 316
314GLSubpath.prototype.setWorld = function (world) { 317GLSubpath.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
881GLSubpath.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
878GLSubpath.prototype.setStrokeWidth = function (w) { 897GLSubpath.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
917GLSubpath.prototype.getStrokeMaterial = function () { 937GLSubpath.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
1122GLSubpath.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
1102GLSubpath.prototype.buildLocalCoord = function () { 1141GLSubpath.prototype.buildLocalCoord = function () {
1103 if (!this._isLocalDirty) { 1142 if (!this._isLocalDirty) {
@@ -1435,6 +1474,8 @@ GLSubpath.prototype.makeFillMaterial = function() {
1435}; 1474};
1436 1475
1437GLSubpath.prototype.getNearVertex = function( eyePt, dir ){ 1476GLSubpath.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;
14var TagTool = require("js/tools/TagTool").TagTool; 14var TagTool = require("js/tools/TagTool").TagTool;
15var ElementController = require("js/controllers/elements/element-controller").ElementController; 15var ElementController = require("js/controllers/elements/element-controller").ElementController;
16var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; 16var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
17 17var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
18var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; 18var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint;
19var SubPath = require("js/lib/geom/sub-path").SubPath; 19var 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";