complete version of the code for rendering selected subpath anchor points and path overlay (code needs cleanup)...still buggy if creating new paths

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, {
 
                     //make the subpath dirty so it will get re-drawn
                     this._selectedSubpath.makeDirty();
+                    //this.DrawSubpathSVG(this._selectedSubpath);
+                }
+                //todo temp code only...remove this and uncomment the DrawSubpathSVG above
+                if (this._selectedSubpath){
                     this.DrawSubpathSVG(this._selectedSubpath);
                 }
 
@@ -825,6 +829,7 @@ exports.PenTool = Montage.create(ShapeTool, {
                 throw ("null drawing context in Pentool::DrawSubpathSVG");
             ctx.save();
 
+            /*
             var horizontalOffset = this.application.ninja.stage.userContentLeft;
             var verticalOffset = this.application.ninja.stage.userContentTop;
             //display the subpath as a sequence of cubic beziers
@@ -854,34 +859,84 @@ exports.PenTool = Montage.create(ShapeTool, {
                 var p3y = subpath.getAnchor(0).getPosY()+ verticalOffset;
                 ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y);
             }
-            ctx.stroke();
+            ctx.stroke();*/
 
 
             //draw the stage world points by projecting them to screen space
             //get the screen coords of this anchor from its stage world coord
-            ctx.beginPath();
-            ctx.strokeStyle = "red";
+            ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width)
+            ctx.strokeStyle = "green";
             var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas());
-            var currentLTWH = subpath.computeLeftTopWidthHeight();
+
+            /*var currentLTWH = subpath.computeLeftTopWidthHeight();
             var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left"));
-            var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top"));
+            var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top"));*/
 
-            var localCoord = subpath.getAnchorLocalCoord(0);
-            var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat);
+            //var localCoord = subpath.getAnchorLocalCoord(0);
+            //var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat);
             //add the difference between the current left and top and the canvas left and top
-            sp[0]+=deltaX; sp[1]+=deltaY;
+            //sp[0]+=deltaX; sp[1]+=deltaY;
+            //ctx.moveTo(sp[0], sp[1]);
+
+            var widthAdjustment = -snapManager.getStageWidth()*0.5;
+            var heightAdjustment = -snapManager.getStageHeight()*0.5;
+            /*var stageWorldToGlobalMatrix = ViewUtils.getStageWorldToGlobalMatrix();
+            var localToStageWorldMatrix = ViewUtils.getMatrixFromElement(subpath.getCanvas());
+            glmat4.multiply(localToStageWorldMatrix, stageWorldToGlobalMatrix, stageWorldToGlobalMatrix);*/
+            var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(subpath.getCanvas(), true, false);
+            var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []);
+
+            var c0=[0,0,0], c1=[0,0,0],c2=[0,0,0], c3=[0,0,0]; //screen coord of the bezier control points
+            c0 = MathUtils.transformAndDivideHomogeneousPoint(
+                [subpath.getAnchor(0).getPosX()+widthAdjustment,
+                subpath.getAnchor(0).getPosY()+heightAdjustment,
+                subpath.getAnchor(0).getPosZ()],
+                stageWorldToLocalMat);
+            c0 = MathUtils.transformAndDivideHomogeneousPoint(c0,localToGlobalMat); //convert from local coord to global (screen) coord
+            ctx.beginPath();
+            ctx.moveTo(c0[0],c0[1]);
+            var prevAnchor = subpath.getAnchor(0);
+            var currAnchor = null;
+            var numBezierCurves = numAnchors;
+            if (subpath.getIsClosed()){
+                numBezierCurves+=1;
+            }
 
-            ctx.moveTo(sp[0],sp[1]);
-            for (i = 1; i < numAnchors; i++) {
-                localCoord = subpath.getAnchorLocalCoord(i);
+            for (i = 1; i < numBezierCurves; i++) {
+                currAnchor = subpath.getAnchor(i%numAnchors);
+                /*localCoord = subpath.getAnchorLocalCoord(i);
                 sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat);
                 //add the difference between the current left and top and the canvas left and top
-                sp[0]+=deltaX; sp[1]+=deltaY;
-                ctx.lineTo(sp[0],sp[1]);
-            }
-            if (subpath.getIsClosed()){
-                ctx.closePath();
+                sp[0]+=deltaX; sp[1]+=deltaY;*/
+
+                //ctx.lineTo(sp[0], sp[1]);
+
+                c1 = MathUtils.transformAndDivideHomogeneousPoint(
+                                    [prevAnchor.getNextX()+widthAdjustment,
+                                    prevAnchor.getNextY()+heightAdjustment,
+                                    prevAnchor.getNextZ()],
+                                    stageWorldToLocalMat);
+                c1 = MathUtils.transformAndDivideHomogeneousPoint(c1,localToGlobalMat); //convert from local coord to global (screen) coord
+
+                c2 = MathUtils.transformAndDivideHomogeneousPoint(
+                                    [currAnchor.getPrevX()+widthAdjustment,
+                                    currAnchor.getPrevY()+heightAdjustment,
+                                    currAnchor.getPrevZ()],
+                                    stageWorldToLocalMat);
+                c2 = MathUtils.transformAndDivideHomogeneousPoint(c2,localToGlobalMat); //convert from local coord to global (screen) coord
+
+                c3 = MathUtils.transformAndDivideHomogeneousPoint(
+                                    [currAnchor.getPosX()+widthAdjustment,
+                                    currAnchor.getPosY()+heightAdjustment,
+                                    currAnchor.getPosZ()],
+                                    stageWorldToLocalMat);
+                c3 = MathUtils.transformAndDivideHomogeneousPoint(c3,localToGlobalMat); //convert from local coord to global (screen) coord
+
+                ctx.bezierCurveTo(c1[0], c1[1], c2[0], c2[1], c3[0], c3[1]);
+                prevAnchor = currAnchor;
             }
+
+
             ctx.stroke();
 
             ctx.restore();
@@ -905,27 +960,43 @@ exports.PenTool = Montage.create(ShapeTool, {
             var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft;
             var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop;
 
+            var widthAdjustment = -snapManager.getStageWidth()*0.5;
+            var heightAdjustment = -snapManager.getStageHeight()*0.5;
+
             var localToGlobalMat = ViewUtils.getLocalToGlobalMatrix(subpath.getCanvas());
 
-            var currentLTWH = subpath.computeLeftTopWidthHeight();
+            /*var currentLTWH = subpath.computeLeftTopWidthHeight();
             var deltaX = currentLTWH[0] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "left"));
             var deltaY = currentLTWH[1] - parseInt(ElementMediator.getProperty(subpath.getCanvas(), "top"));
+            */
 
+            var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(subpath.getCanvas(), true, false);
+            var stageWorldToLocalMat = glmat4.inverse(localToStageWorldMat, []);
+
+            
             //display circles and squares near all control points
             ctx.fillStyle = "#FFFFFF";
             ctx.lineWidth = 1;
             ctx.strokeStyle = "green";
             var anchorDelta = 2;
             var selAnchorDelta = 4;
+            var px=0,py=0;
+            var localCoord = null;
+            var sp=[0,0,0];
+            var currAnchor = null;
             for (var i = 0; i < numAnchors; i++) {
-                var px = subpath.getAnchor(i).getPosX()+horizontalOffset;
-                var py = subpath.getAnchor(i).getPosY()+verticalOffset;
-                var localCoord = subpath.getAnchorLocalCoord(i);
-                if (localCoord) {
-                    var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat);
-                    px = sp[0]; py=sp[1];
-                    sp[0]+=deltaX; sp[1]+=deltaY;
-                }
+                currAnchor = subpath.getAnchor(i);
+                //px = currAnchor.getPosX()+horizontalOffset;
+                //py = currAnchor.getPosY()+verticalOffset;
+                //var localCoordOld = subpath.getAnchorLocalCoord(i);
+                localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord
+                //localCoord[0]-=snapManager.getStageWidth()*0.5;
+                //localCoord[1]-=snapManager.getStageHeight()*0.5;
+                //sp = MathUtils.transformAndDivideHomogeneousPoint(localCoordOld,localToGlobalMat); //convert from local coord to global (screen) coord
+                sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat); //convert from local coord to global (screen) coord
+                //sp[0]+=deltaX; sp[1]+=deltaY;
+                px = sp[0]; py=sp[1];
+
                 ctx.beginPath();
                 //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false);
                 ctx.moveTo(px-anchorDelta, py-anchorDelta);
@@ -935,20 +1006,22 @@ exports.PenTool = Montage.create(ShapeTool, {
                 ctx.closePath();
                 ctx.fill();
                 ctx.stroke();
-
             }
 
             //display the hovered over anchor point
             ctx.lineWidth = 2;
             if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) {
-                var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX() +horizontalOffset;
-                var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY() +verticalOffset;
-                var localCoord = subpath.getAnchorLocalCoord(this._hoveredAnchorIndex);
-                if (localCoord) {
-                    var sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat);
-                    px = sp[0]; py=sp[1];
-                    sp[0]+=deltaX; sp[1]+=deltaY;
-                }
+                currAnchor = subpath.getAnchor(this._hoveredAnchorIndex);
+                px = currAnchor.getPosX() +horizontalOffset;
+                py = currAnchor.getPosY() +verticalOffset;
+                //localCoord = subpath.getAnchorLocalCoord(this._hoveredAnchorIndex);
+                localCoord = MathUtils.transformAndDivideHomogeneousPoint([currAnchor.getPosX()+widthAdjustment, currAnchor.getPosY()+heightAdjustment, currAnchor.getPosZ()], stageWorldToLocalMat); //convert from stage world to local coord
+                //localCoord[0]-=snapManager.getStageWidth()*0.5;
+                //localCoord[1]-=snapManager.getStageHeight()*0.5;
+                sp = MathUtils.transformAndDivideHomogeneousPoint(localCoord,localToGlobalMat);
+                //sp[0]+=deltaX; sp[1]+=deltaY;
+                px = sp[0]; py=sp[1];
+
                 ctx.beginPath();
                 //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false);