display the anchor point to be selected on mouse hover

1 files changed, 60 insertions, 159 deletions

diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 3b03e0e7..46465be0 100644
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -13,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils;
 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;
+
+//todo remove this global var
+var g_DoPenToolMouseMove = true;
 
 exports.PenTool = Montage.create(ShapeTool, {
 
@@ -38,9 +42,6 @@ exports.PenTool = Montage.create(ShapeTool, {
     _makeMultipleSubpaths: { value: true, writable: true },    //set this to true if you want to keep making subpaths after closing current subpath
 
 
-    //whether or not to display the guides for debugging
-    _showGuides: { value: true, writable: true },
-
     //whether the user has held down the Alt key
     _isAltDown: { value: false, writable: true },
 
@@ -65,6 +66,9 @@ 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 },
 
+    //index of the anchor point that the user has hovered over
+    _hoveredAnchorIndex: {value: null, writable: true},
+
     //constants used for picking points --- NOTE: these should be user-settable parameters
     _PICK_POINT_RADIUS: { value: 10, writable: false },
     _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false },
@@ -262,7 +266,9 @@ exports.PenTool = Montage.create(ShapeTool, {
             } //if (mouseDownPos) { i.e. if mouse down yielded a valid position
 
 
-            NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove();
+            if (!g_DoPenToolMouseMove){
+                NJevent("enableStageMove");
+            }
         } //value: function (event) {
     }, //HandleLeftButtonDown
 
@@ -279,18 +285,15 @@ exports.PenTool = Montage.create(ShapeTool, {
                 return;
             }
 
-            if (this._isDrawing) {
-                if (!this._isAltDown)
-                    this.doDraw(event); //if Alt was down, doDraw prevents this.mouseUpHitRec from being written to
-                else{
-                    var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
-                    this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec);
-                }
-
+            //clear the canvas before we draw anything else
+            this.application.ninja.stage.clearDrawingCanvas();
+            this._hoveredAnchorIndex = -1;
 
-                // ******* begin new code *********
-                //get the current mouse position from the drawing-tool knowing that the mouse up position is set to current mouse pos in this.doDraw above
-                var currMousePos = this.getMouseUpPos();
+            if (this._isDrawing) {
+                this.application.ninja.stage.clearDrawingCanvas();
+                var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
+                //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())) {
                     //var scoord = this._getScreenCoord(this._mouseUpHitRec);
                     var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
@@ -345,20 +348,27 @@ exports.PenTool = Montage.create(ShapeTool, {
 
                     //make the subpath dirty so it will get re-drawn
                     this._selectedSubpath.makeDirty();
-                    //clear the canvas before we draw anything else
-                    this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas();
-                    this.DrawSubpathAnchors(this._selectedSubpath);
+                    this.DrawSubpathsSVG();
                 }
-                // ********* end new code ***********
 
-            } else {
-                this.doSnap(event);
-                this.DrawHandles();
+            } else { //if mouse is not down:
+                //this.doSnap(event);
+                //this.DrawHandles();
+                var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
+                var currMousePos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
+                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;
+                    }
+                }
             } //else of if (this._isDrawing) {
 
-            this.drawLastSnap();        // Required cleanup for both Draw/Feedbacks
+            //this.drawLastSnap();        // Required cleanup for both Draw/Feedbacks
+            if (this._selectedSubpath){
+                this.DrawSubpathAnchors(this._selectedSubpath);
+            }
 
-            this.DrawSubpathsSVG();
         }//value: function(event)
     },
 
@@ -482,7 +492,9 @@ exports.PenTool = Montage.create(ShapeTool, {
                 this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL)
             }
 
-            NJevent("disableStageMove");//stageManagerModule.stageManager.disableMouseMove();
+            if (!g_DoPenToolMouseMove){
+                NJevent("disableStageMove");
+            }
         }
     },
 
@@ -797,102 +809,10 @@ exports.PenTool = Montage.create(ShapeTool, {
                 throw ("null drawing context in Pentool::DrawSubpathSVG");
             ctx.save();
 
-            var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft;
-            var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop;
-
-
-            if (this._showGuides) {
-                var leftOffsetSamples = subpath.getLeftOffsetPoints();
-                var rightOffsetSamples = subpath.getRightOffsetPoints();
-                /*
-                //display the subpath samples as a sequence of circles
-                ctx.lineWidth = 2;
-                ctx.fillStyle = "pink";
-                ctx.strokeStyle = "black";
-                for (var i = 0; i < samples.length; i += 3) {
-                ctx.beginPath();
-                ctx.arc(samples[i], samples[i + 1], this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false);
-                ctx.fill();
-                ctx.stroke();
-                }
-                */
-
-                /*
-                //display circles near all offset sample points
-                ctx.fillStyle = "#44FF44";
-                ctx.lineWidth = 2;
-                ctx.strokeStyle = "black";
-                for (var i = 0; i < leftOffsetSamples.length; i++) {
-                    var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset;
-                    var py = leftOffsetSamples[i].Pos[1]+ verticalOffset;
-                    ctx.beginPath();
-                    ctx.arc(px, py, this._DISPLAY_ANCHOR_RADIUS * 0.75, 0, 2 * Math.PI, false);
-                    ctx.fill();
-                    ctx.stroke();
-                }
-                */
-
-                /*
-                //display mapping of subpath samples to offset samples
-
-                ctx.strokeStyle = "black";
-                ctx.lineWidth = 1;
-                ctx.beginPath();
-                for (var i = 0; i < leftOffsetSamples.length; i++) {
-                    var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset;
-                    var py = leftOffsetSamples[i].Pos[1]+ verticalOffset;
-                    var ox = leftOffsetSamples[i].CurveMapPos[0] + horizontalOffset;
-                    var oy = leftOffsetSamples[i].CurveMapPos[1] + verticalOffset;
-
-                    ctx.moveTo(px, py);
-                    ctx.lineTo(ox,oy);
-                }
-                ctx.stroke();
-                ctx.strokeStyle = "black";
-                ctx.lineWidth = 1;
-                ctx.beginPath();
-                for (var i = 0; i < rightOffsetSamples.length; i++) {
-                    var px = rightOffsetSamples[i].Pos[0]+ horizontalOffset;
-                    var py = rightOffsetSamples[i].Pos[1]+ verticalOffset;
-                    var ox = rightOffsetSamples[i].CurveMapPos[0] + horizontalOffset;
-                    var oy = rightOffsetSamples[i].CurveMapPos[1] + verticalOffset;
-
-                    ctx.moveTo(px, py);
-                    ctx.lineTo(ox,oy);
-                }
-                ctx.stroke();
-                 */
-
-                /*
-                //display triangles generated
-                var leftOffsetTriangles = subpath.getLeftOffsetTriangles();
-                ctx.strokeStyle = "black";
-                ctx.lineWidth = 1;
-                ctx.beginPath();
-                for (var i = 0; i < leftOffsetTriangles.length; i++) {
-                    ctx.moveTo(leftOffsetTriangles[i].v0[0] + horizontalOffset, leftOffsetTriangles[i].v0[1] + verticalOffset);
-                    ctx.lineTo(leftOffsetTriangles[i].v1[0] + horizontalOffset, leftOffsetTriangles[i].v1[1] + verticalOffset);
-                    ctx.lineTo(leftOffsetTriangles[i].v2[0] + horizontalOffset, leftOffsetTriangles[i].v2[1] + verticalOffset);
-                }
-                ctx.stroke();
-
-                var rightOffsetTriangles = subpath.getRightOffsetTriangles();
-                ctx.strokeStyle = "black";
-                ctx.lineWidth = 1;
-                ctx.beginPath();
-                for (var i = 0; i < rightOffsetTriangles.length; i++) {
-                    ctx.moveTo(rightOffsetTriangles[i].v0[0] + horizontalOffset, rightOffsetTriangles[i].v0[1] + verticalOffset);
-                    ctx.lineTo(rightOffsetTriangles[i].v1[0] + horizontalOffset, rightOffsetTriangles[i].v1[1] + verticalOffset);
-                    ctx.lineTo(rightOffsetTriangles[i].v2[0] + horizontalOffset, rightOffsetTriangles[i].v2[1] + verticalOffset);
-                }
-                ctx.stroke();
+            var horizontalOffset = this.application.ninja.stage.userContentLeft;
+            var verticalOffset = this.application.ninja.stage.userContentTop;