Use local coordinates for rendering and hit testing only when the path canvas exists....AND...good state for code that works in 3D as long as the path was originally created in XY plane of the stage

2 files changed, 67 insertions, 16 deletions

diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 87840bdc..765316b1 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -1354,6 +1354,7 @@ GLSubpath.prototype.buildLocalCoord = function () {
         var localPoint = [this._samples[3*i],this._samples[3*i+1],this._samples[3*i+2]];
         localPoint[0]-= stageWorldCenter[0];
         localPoint[1]-= stageWorldCenter[1];
+        localPoint[2]-= stageWorldCenter[2];
 
         // ***** unproject all the centered points and convert them to 2D (plane space)*****
         // (undo the projection step performed by the browser)
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 22172193..5145eb39 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -184,23 +184,60 @@ exports.PenTool = Montage.create(ShapeTool, {
                     }
                 }
 
-                //build the mouse down position in local coordinates
+
+                // ****** build the mouse down position in local coordinates *******
+
+                var localMousePos = null; //local mouse position
+                var swFromLocalMousePos = null; //
+                var swMousePos = null;
+
                 var drawingCanvas = this._selectedSubpath.getCanvas();
+                var useLocal = true;
                 if (!drawingCanvas){
+                    //if the subpath has no canvas, it means we should not use local coordinates, and use stage-world coordinates only
+                    useLocal = false;
                     drawingCanvas = ViewUtils.getStageElement();
+
+                    var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas); //this should just be the
+                    snapManager.pushWorkingPlane(contentPlane);
+                    var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
+                    var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false);
+                    swMousePos = hitRec.calculateStageWorldPoint();
+                                //DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
+                    this._dragPlane = snapManager.getDragPlane();
+                    snapManager.popWorkingPlane();
+                    swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5;
+
+                    this._penPlaneMat = hitRec.getPlaneMatrix();
+                    this._selectedSubpath.setPlaneMatrix(this._penPlaneMat);
+                    var planeMatInv = glmat4.inverse( this._penPlaneMat, [] );
+                    this._selectedSubpath.setPlaneMatrixInverse(planeMatInv);
+                    this._selectedSubpath.setDragPlane(this._dragPlane);
+
+                } else {
+                    //build the local coordinates of the screen point
+                    var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY);
+                    localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas);
+
+                    //now build the stage world coordinates (without taking the canvas transformation into account) of the local coordinates
+                    var localToStageWorldNoTransform = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false);
+                    var swFromLocalMousePos = MathUtils.transformAndDivideHomogeneousPoint(localMousePos,localToStageWorldNoTransform);
+                    swFromLocalMousePos[0]+= snapManager.getStageWidth()*0.5; swFromLocalMousePos[1]+= snapManager.getStageHeight()*0.5;
                 }
-                var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY);
-                var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas);
-                var localToStageWorldNoTransform = ViewUtils.getLocalToStageWorldMatrix(drawingCanvas, true, false);
-                var swMousePos = MathUtils.transformAndDivideHomogeneousPoint(localMousePos,localToStageWorldNoTransform);
-                swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5;
+
+
                 var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
                 // ************* Add/Select Anchor Point *************
                 //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else
                 // BUT if the anchor point selected is the first anchor point, check if the previous selected anchor was the last anchor point...in that case, close the path
 
                 //var selParam = this._selectedSubpath.pickPath(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2], this._PICK_POINT_RADIUS);
-                var selParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true);
+                var selParam = null;
+                if (useLocal) {
+                    selParam = this._selectedSubpath.pickPath(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true);
+                } else {
+                    selParam = this._selectedSubpath.pickPath(swMousePos[0], swMousePos[1], swMousePos[2], this._PICK_POINT_RADIUS, false);
+                }
                 var whichPoint = this._selectedSubpath.getSelectedMode();
                 if (whichPoint & this._selectedSubpath.SEL_ANCHOR) {
                     //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint
@@ -262,9 +299,15 @@ exports.PenTool = Montage.create(ShapeTool, {
                         if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) {
                             this._selectedSubpath.addAnchor(new AnchorPoint());
                             var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
-                            newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]);
-                            newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]);
-                            newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                            if (useLocal) {
+                                newAnchor.setPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
+                                newAnchor.setPrevPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
+                                newAnchor.setNextPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
+                            } else {
+                                newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                                newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                                newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                            }
 
                             //set the mode so that dragging will update the next and previous locations
                             this._editMode = this.EDIT_PREV_NEXT;
@@ -275,9 +318,15 @@ exports.PenTool = Montage.create(ShapeTool, {
                             if (!this._selectedSubpath.getIsClosed()) {
                                 this._selectedSubpath.addAnchor(new AnchorPoint());
                                 var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
-                                newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]);
-                                newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]);
-                                newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                                if (useLocal) {
+                                    newAnchor.setPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
+                                    newAnchor.setPrevPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
+                                    newAnchor.setNextPos(swFromLocalMousePos[0], swFromLocalMousePos[1], swFromLocalMousePos[2]);
+                                } else {
+                                    newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                                    newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                                    newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]);
+                                }
 
                                 //set the mode so that dragging will update the next and previous locations
                                 this._editMode = this.EDIT_PREV_NEXT;
@@ -329,7 +378,6 @@ exports.PenTool = Montage.create(ShapeTool, {
                 //go through the drawing toolbase to get the position of the mouse 
                 var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec));
                 if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) {
-
                     // BEGIN NEW LOCAL COORD BLOCK
                     //build the mouse position in local coordinates
                     var drawingCanvas = this._selectedSubpath.getCanvas();
@@ -473,6 +521,7 @@ exports.PenTool = Montage.create(ShapeTool, {
                     var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY);
                     var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas);
 
+
                     //var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS, false);
                     var selAnchorRetCode = this._selectedSubpath.pickAnchor(localMousePos[0], localMousePos[1], localMousePos[2], this._PICK_POINT_RADIUS, true);
                     if (selAnchorRetCode[0] >=0) {
@@ -553,6 +602,8 @@ exports.PenTool = Montage.create(ShapeTool, {
                 return;
             }
 
+            w= Math.round(w);
+            h = Math.round(h);
             var left = Math.round(midPt[0] - 0.5 * w);
             var top = Math.round(midPt[1] - 0.5 * h);
             this._selectedSubpath.setPlaneCenter(midPt);
@@ -617,8 +668,7 @@ exports.PenTool = Montage.create(ShapeTool, {
                 if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){
                     //update the left and top of the canvas element
                     var canvasArray=[canvas];
-                    w= Math.round(w);
-                    h = Math.round(h);
+
                     ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w;
                     ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h;
                     ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px");