Use local coordinates to pick a point within the path (works correctly even with canvas and/or stage transformation). Dragging does not yet work in case of canvas transformation

2 files changed, 75 insertions, 32 deletions

diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 64f27bd3..87840bdc 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -752,9 +752,9 @@ GLSubpath.prototype.pathSamplesLocalHitTest = function(pickX, pickY, pickZ, radi
         currAnchor = nextAnchor;
     }//for every anchor i
     return [selAnchorIndex,retParam];
-
 };
 
+
 //pick the path point closest to the specified location, return null if some anchor point (or its handles) is within radius, else return the parameter distance
 GLSubpath.prototype.pathHitTest = function (pickX, pickY, pickZ, radius) {
     var numAnchors = this._Anchors.length;
@@ -828,16 +828,27 @@ GLSubpath.prototype.pathHitTest = function (pickX, pickY, pickZ, radius) {
     return [selAnchorIndex,retParam];
 }     //GLSubpath.pathHitTest function
 
+
 //pick the path point closest to the specified location, return null if some anchor point (or its handles) is within radius, else return the parameter distance
-GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius) {
+GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius, useLocal) {
     var numAnchors = this._Anchors.length;
     var selAnchorIndex = -1;
     var retCode = this.SEL_NONE;
     var radSq = radius * radius;
     var minDistance = Infinity;
+
+    //ignore the useLocal flag if the anchor points are not in-sync. with the local coordinates
+    if (numAnchors != this._AnchorLocalCoords.length){
+        useLocal = false;
+    }
+
     //check if the clicked location is close to the currently selected anchor position
     if (this._selectedAnchorIndex>=0 && this._selectedAnchorIndex<this._Anchors.length){
-        var distSq = this._Anchors[this._selectedAnchorIndex].getDistanceSq(pickX, pickY, pickZ);
+        var distSq;
+        if (!useLocal)
+            distSq = this._Anchors[this._selectedAnchorIndex].getDistanceSq(pickX, pickY, pickZ);
+        else
+            distSq = VecUtils.vecDistSq(3, this._AnchorLocalCoords[this._selectedAnchorIndex][1], [pickX, pickY, pickZ]);
         //check the anchor point
         if (distSq < minDistance && distSq < radSq) {
             selAnchorIndex = this._selectedAnchorIndex;
@@ -845,10 +856,16 @@ GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius) {
             retCode = retCode | this.SEL_ANCHOR;
         }
     }
+
     //now check if the click location is close to any anchor position
     if (selAnchorIndex===-1) {
         for (var i = 0; i < numAnchors; i++) {
-            var distSq = this._Anchors[i].getDistanceSq(pickX, pickY, pickZ);
+            var distSq;
+            if (!useLocal)
+                distSq = this._Anchors[i].getDistanceSq(pickX, pickY, pickZ);
+            else
+                distSq = VecUtils.vecDistSq(3, this._AnchorLocalCoords[i][1], [pickX, pickY, pickZ]);
+            
             //check the anchor point
             if (distSq < minDistance && distSq < radSq) {
                 selAnchorIndex = i;
@@ -860,14 +877,23 @@ GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius) {
 
     //check the prev and next of the selected anchor if the above did not register a hit
     if (this._selectedAnchorIndex>=0 && selAnchorIndex === -1) {
-        var distSq = this._Anchors[this._selectedAnchorIndex].getPrevDistanceSq(pickX, pickY, pickZ);
+        var distSq;
+        if (!useLocal)
+            distSq = this._Anchors[this._selectedAnchorIndex].getPrevDistanceSq(pickX, pickY, pickZ);
+        else
+            distSq = VecUtils.vecDistSq(3, this._AnchorLocalCoords[this._selectedAnchorIndex][0], [pickX, pickY, pickZ]);
+
         if (distSq < minDistance && distSq < radSq){
             selAnchorIndex = this._selectedAnchorIndex;
             minDistance = distSq;
             retCode = retCode | this.SEL_PREV;
         } else {
             //check the next for this anchor point
-            distSq = this._Anchors[this._selectedAnchorIndex].getNextDistanceSq(pickX, pickY, pickZ);
+            if (!useLocal)
+                distSq = this._Anchors[this._selectedAnchorIndex].getNextDistanceSq(pickX, pickY, pickZ);
+            else
+                distSq = VecUtils.vecDistSq(3, this._AnchorLocalCoords[this._selectedAnchorIndex][2], [pickX, pickY, pickZ]);
+
             if (distSq<minDistance && distSq<radSq){
                 selAnchorIndex = this._selectedAnchorIndex;
                 minDistance = distSq;
@@ -881,27 +907,38 @@ GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius) {
         this._selectedAnchorIndex = selAnchorIndex;
     } else {
         this._selectedAnchorIndex = -1;
-        var numSegments = this._isClosed ? numAnchors : numAnchors-1;
-        for (var i = 0; i < numSegments; i++) {
-            var nextIndex = (i+1)%numAnchors;
-            //check if the point is close to the bezier segment between anchor i and anchor nextIndex
-            var controlPoints = [[this._Anchors[i].getPosX(),this._Anchors[i].getPosY(),this._Anchors[i].getPosZ()],
-                [this._Anchors[i].getNextX(),this._Anchors[i].getNextY(),this._Anchors[i].getNextZ()],
-                [this._Anchors[nextIndex].getPrevX(),this._Anchors[nextIndex].getPrevY(),this._Anchors[nextIndex].getPrevZ()],
-                [this._Anchors[nextIndex].getPosX(),this._Anchors[nextIndex].getPosY(),this._Anchors[nextIndex].getPosZ()]];
-            var point = [pickX, pickY, pickZ];
-            if (this._isWithinBoundingBox(point, controlPoints, radius)) {
-                //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius);
-                var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius);
-                console.log("intersectParam:"+intersectParam);
-                if (intersectParam){
-                    retCode = retCode | this.SEL_PATH;
-                    retParam = intersectParam-i; //make the retParam go from 0 to 1
-                    this._selectedAnchorIndex = i;
-                    break;
+        if (!useLocal){
+            var numSegments = this._isClosed ? numAnchors : numAnchors-1;
+            var currAnchor = this._AnchorLocalCoords[0];
+            var nextAnchor = null;
+            for (var i = 0; i < numSegments; i++) {
+                var nextIndex = (i+1)%numAnchors;
+                //check if the point is close to the bezier segment between anchor i and anchor nextIndex
+                var controlPoints = [[this._Anchors[i].getPosX(),this._Anchors[i].getPosY(),this._Anchors[i].getPosZ()],
+                    [this._Anchors[i].getNextX(),this._Anchors[i].getNextY(),this._Anchors[i].getNextZ()],
+                    [this._Anchors[nextIndex].getPrevX(),this._Anchors[nextIndex].getPrevY(),this._Anchors[nextIndex].getPrevZ()],
+                    [this._Anchors[nextIndex].getPosX(),this._Anchors[nextIndex].getPosY(),this._Anchors[nextIndex].getPosZ()]];
+                var point = [pickX, pickY, pickZ];
+                if (this._isWithinBoundingBox(point, controlPoints, radius)) {
+                    //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius);
+                    var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius);
+                    console.log("intersectParam:"+intersectParam);
+                    if (intersectParam){
+                        retCode = retCode | this.SEL_PATH;
+                        retParam = intersectParam-i; //make the retParam go from 0 to 1
+                        this._selectedAnchorIndex = i;
+                        break;
+                    }
                 }
+            }//for every anchor i
+        } else {
+            var selAnchorParam = this.pathSamplesLocalHitTest(pickX, pickY, pickZ, radius);
+            if (selAnchorParam[0]!== -1){
+                this._selectedAnchorIndex = selAnchorParam[0];
+                retParam = selAnchorParam[1];
+                retCode = retCode | this.SEL_PATH;
             }
-        }//for every anchor i
+        }
     }
     this._selectMode = retCode;
     return retParam;
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index cd15b36b..8065e1a6 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -182,12 +182,23 @@ exports.PenTool = Montage.create(ShapeTool, {
                         console.log("Warning...PenTool handleMouseDown: changing from SELECT_PATH to SELECT_NONE");
                     }
                 }
-                
+
+                //build the mouse down position in local coordinates
+                var drawingCanvas = this._selectedSubpath.getCanvas();
+                if (!drawingCanvas){
+                    drawingCanvas = ViewUtils.getStageElement();
+                }
+                var globalMousePos = this._getUnsnappedScreenPosition(event.pageX, event.pageY);
+                var localMousePos = ViewUtils.globalToLocal(globalMousePos, drawingCanvas);
+
+
                 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(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 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
@@ -288,9 +299,6 @@ exports.PenTool = Montage.create(ShapeTool, {
     }, //HandleLeftButtonDown
 
 
-    //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call  - Pushkar
-    //  might not need to override once we draw using OpenGL instead of SVG
-    // Also took out all the snapping code for now...need to add that back
     HandleMouseMove:
     {
         value: function (event) {
@@ -647,7 +655,6 @@ exports.PenTool = Montage.create(ShapeTool, {
                 } //if this is a new path being rendered
 
                 this._selectedSubpath.makeDirty();
-
                 this._selectedSubpath.createSamples();
                 //if we have some samples to render...
                 if (this._selectedSubpath.getNumAnchors() > 1) {
@@ -1011,7 +1018,6 @@ exports.PenTool = Montage.create(ShapeTool, {
                 ctx.stroke();
             }
 
-
             //display selected anchor and its prev. and next points