3 files changed, 325 insertions, 231 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 2171d2c6..620376ab 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -134,7 +134,6 @@ exports.BrushTool = Montage.create(ShapeTool, {
                 snapManager.enableSnapAlign(false);
 
                 var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
-                //todo fix this function to allow us to get the correct location (in 3D) for the mouse position
                 var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
                 this._draggingPlane = snapManager.getDragPlane();
 
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 4a16a491..61a254ea 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -14,7 +14,7 @@ var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
 var TagTool = require("js/tools/TagTool").TagTool;
 var ElementController = require("js/controllers/elements/element-controller").ElementController;
 var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
-
+var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
 var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint;
 var SubPath = require("js/lib/geom/sub-path").SubPath;
 
@@ -68,11 +68,14 @@ exports.PenTool = Montage.create(ShapeTool, {
     //the plane matrix for the first click...so the entire path is on the same plane
     _penPlaneMat: { value: null, writable: true },
 
+    //the plane equation (in stage world space) for the current path being drawn
+    _dragPlane: {value: null, writable: true},
+
     //index of the anchor point that the user has hovered over
     _hoveredAnchorIndex: {value: -1, writable: true},
 
     //constants used for picking points --- NOTE: these should be user-settable parameters
-    _PICK_POINT_RADIUS: { value: 10, writable: false },
+    _PICK_POINT_RADIUS: { value: 4, writable: false },
     _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false },
     _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false },
     _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 2, writable: false },
@@ -106,6 +109,7 @@ exports.PenTool = Montage.create(ShapeTool, {
 
             var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
             var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
+            this._dragPlane = snapManager.getDragPlane();
 
             snapManager.enableElementSnap(elemSnap);
             snapManager.enableGridSnap(gridSnap);
@@ -214,6 +218,7 @@ exports.PenTool = Montage.create(ShapeTool, {
                         if (this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) {
                             this._penCanvas = null;
                             this._penPlaneMat = null;
+                            this._dragPlane = null;
                             this._snapTarget = null;
                             this._selectedSubpath = new SubPath();
                             this._isNewPath = true;
@@ -278,8 +283,15 @@ exports.PenTool = Montage.create(ShapeTool, {
             this.application.ninja.stage.clearDrawingCanvas();
             this._hoveredAnchorIndex = -1;
 
-            //set the cursor to be the default cursor
-            this.application.ninja.stage.drawingCanvas.style.cursor = "auto";
+            //set the cursor to be the default cursor (depending on whether the selected subpath has any points yet)
+            if (this._selectedSubpath && this._selectedSubpath.getNumAnchors()>0){
+                this.application.ninja.stage.drawingCanvas.style.cursor = //"auto";
+                    "url('images/cursors/penCursors/Pen_.png') 5 1, default";
+            }
+            else {
+                this.application.ninja.stage.drawingCanvas.style.cursor = //"auto";
+                    "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default";
+            }
 
             if (this._isDrawing) {
                 var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
@@ -339,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);
                 }
 
@@ -348,15 +364,27 @@ exports.PenTool = Montage.create(ShapeTool, {
 
                 var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
                 if (currMousePos && this._selectedSubpath ){
-                    var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
-                    if (selAnchor >=0) {
-                        this._hoveredAnchorIndex = selAnchor;
+                    var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
+                    if (selAnchorRetCode[0] >=0) {
+                        this._hoveredAnchorIndex = selAnchorRetCode[0];
+                        var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1;
+                        var cursor = "url('images/cursors/penCursors/Pen_anchorSelect.png') 5 1, default";
+                        if (this._selectedSubpath.getIsClosed()===false){
+                            if (this._entryEditMode === this.ENTRY_SELECT_PATH && !this._isPickedEndPointInSelectPathMode && (this._hoveredAnchorIndex===0 || this._hoveredAnchorIndex===lastAnchorIndex)){
+                                //if we're in SELECT_PATH mode, have not yet clicked on the end anchors,  AND we hovered over one of the end anchors
+                                cursor = "url('images/cursors/penCursors/Pen_append.png') 5 1, default";
+                            } else if ( this._selectedSubpath.getSelectedAnchorIndex()===lastAnchorIndex && this._hoveredAnchorIndex===0)  {
+                                //if we've selected the last anchor and hover over the first anchor
+                                cursor = "url('images/cursors/penCursors/Pen_closePath.png') 5 1, default";
+                            }
+                        } //if path is not closed
+                        this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
                     } else {
-                        //detect if the current mouse position will hit the path
-                        var pathHitTestData = this._selectedSubpath.pathHitTest(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
+                        //detect if the current mouse position will hit the path (such that clicking here will insert a new anchor)
+                        var pathHitTestData = this._selectedSubpath.pathHitTest(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS*0.5);
                         if (pathHitTestData[0]!==-1){
                             //change the cursor
-                            var cursor = "url('images/cursors/penAdd.png') 10 10,default";
+                            var cursor = "url('images/cursors/penCursors/Pen_plus.png') 5 1, default";
                             this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
                         }
                     }
@@ -374,22 +402,7 @@ exports.PenTool = Montage.create(ShapeTool, {
     TranslateSelectedSubpathPerPenCanvas:{
         value: function() {
             if (this._penCanvas!==null) {
-                //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure
-                var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left"));
-                var penCanvasTop = parseInt(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top"));
-                var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width;
-                var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height;
-                var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth;
-                var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight;
-
-                var translateCanvasX = penCanvasOldX - this._selectedSubpath.getCanvasX();
-                var translateCanvasY = penCanvasOldY - this._selectedSubpath.getCanvasY();
-
-                //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space)
-                this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX());
-                this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY());
-                this._selectedSubpath.translateAnchors(translateCanvasX, translateCanvasY, 0);
-                this._selectedSubpath.createSamples(); //updates the bounding box
+                this._selectedSubpath.translateSubpathPerCanvas(ElementMediator); 
             }
         }
     },
@@ -397,22 +410,143 @@ exports.PenTool = Montage.create(ShapeTool, {
     ShowSelectedSubpath:{
         value: function() {
             if (this._selectedSubpath){
+                if (!this._selectedSubpath.getPlaneMatrix()) {
+                    this._selectedSubpath.setPlaneMatrix(this._penPlaneMat);
+                    var planeMatInv = glmat4.inverse( this._penPlaneMat, [] );
+                    this._selectedSubpath.setPlaneMatrixInverse(planeMatInv);
+                    this._selectedSubpath.setDragPlane(this._dragPlane);
+                }
+                
                 this._selectedSubpath.createSamples(); //dirty bit is checked here
-                var bboxMin = this._selectedSubpath.getBBoxMin();
-                var bboxMax = this._selectedSubpath.getBBoxMax();
+                this._selectedSubpath.buildLocalCoord(); //local dirty bit is checked here
+
+                //build the width and height of this canvas by looking at local coordinates (X and Y needed only)
+                var bboxMin = this._selectedSubpath.getLocalBBoxMin();
+                var bboxMax = this._selectedSubpath.getLocalBBoxMax();
                 var bboxWidth = bboxMax[0] - bboxMin[0];
                 var bboxHeight = bboxMax[1] - bboxMin[1];
-                var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
 
-                this._selectedSubpath.setCanvasX(bboxMid[0]);
-                this._selectedSubpath.setCanvasY(bboxMid[1]);
+                //build the 3D position of the plane center of this canvas by looking at midpoint of the bounding box in stage world coords
+                bboxMin = this._selectedSubpath.getBBoxMin();
+                bboxMax = this._selectedSubpath.getBBoxMax();
+                var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
 
                 //call render shape with the bbox width and height
-                this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas);
+                this.RenderShape(bboxWidth, bboxHeight, bboxMid, this._penPlaneMat, this._penCanvas);
             }
         }
     },
 
+    RenderShape: {
+        value: function (w, h, midPt, planeMat, canvas) {
+            if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) {
+                return;
+            }
+
+            var left = Math.round(midPt[0] - 0.5 * w);
+            var top = Math.round(midPt[1] - 0.5 * h);
+            this._selectedSubpath.setPlaneCenter(midPt);
+            this._selectedSubpath.setCanvasLeft(left);
+            this._selectedSubpath.setCanvasTop(top);
+
+            if (!canvas) {
+                var newCanvas = null;
+                newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
+                var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas);