snapping feedback for pen tool, correct for subpaths that may lie on rotated canvas, and with a rotated view

3 files changed, 97 insertions, 14 deletions

diff --git a/js/helper-classes/3D/vec-utils.js b/js/helper-classes/3D/vec-utils.js
index 4eacd856..0916c840 100755
--- a/js/helper-classes/3D/vec-utils.js
+++ b/js/helper-classes/3D/vec-utils.js
@@ -113,6 +113,25 @@ var VecUtils = exports.VecUtils = Object.create(Object.prototype,
         }
     },
 
+    vecDistSq : {
+            value: function( dimen,  a, b ) {
+                var sum;
+
+                if ((a.length < dimen) || (b.length < dimen))
+                {
+                    throw new Error( "dimension error in VecUtils.vecDistSq" );
+                }
+
+                var sum = 0.0;
+                for (var i=0;  i<dimen;  i++)
+                {
+                    var d = a[i] - b[i];
+                    sum += d*d;
+                }
+                return sum;
+            }
+        },
+
     vecDot : {
         value: function( dimen,  v0, v1 ) {
             if ((v0.length < dimen) || (v1.length < dimen))
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index d784fbc6..33bcfc9a 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -620,7 +620,28 @@ GLSubpath.prototype._isWithinBoundingBox = function(point, ctrlPts, radius) {
     return true;
 };
 
-GLSubpath.prototype._checkAnchorIntersection = function(pickX, pickY, pickZ, radSq, anchorIndex, minDistance) {
+GLSubpath.prototype._checkAnchorIntersection = function(pickX, pickY, pickZ, radSq, anchorIndex, minDistance, useLocal) {
+    //if we are asked to use the local coordinate and the local coordinate for this anchor exists
+    if (useLocal && this._anchorSampleIndex.length>anchorIndex && this._LocalPoints.length > this._anchorSampleIndex[anchorIndex]) {
+        var localCoord = this._LocalPoints[this._anchorSampleIndex[anchorIndex]]
+        var distSq = VecUtils.vecDistSq(3, [pickX, pickY, pickZ], localCoord);
+        //check the anchor point
+        if (distSq < radSq && distSq<minDistance) {
+            return this.SEL_ANCHOR;
+        }
+        /*
+        //check the prev. and next of the selected anchor point
+        distSq = this._Anchors[anchorIndex].getPrevDistanceSq(pickX, pickY, pickZ);
+        if (distSq<radSq && distSq<minDistance){
+            return this.SEL_PREV;
+        }
+        distSq = this._Anchors[anchorIndex].getNextDistanceSq(pickX, pickY, pickZ);
+        if (distSq<radSq && distSq<minDistance){
+            return this.SEL_NEXT;
+        }*/
+        return this.SEL_NONE;
+    }
+
     var distSq = this._Anchors[anchorIndex].getDistanceSq(pickX, pickY, pickZ);
     //check the anchor point
     if (distSq < radSq && distSq<minDistance) {
@@ -638,7 +659,7 @@ GLSubpath.prototype._checkAnchorIntersection = function(pickX, pickY, pickZ, rad
     return this.SEL_NONE;
 };
 
-GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) {
+GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius, useLocal) {
     var numAnchors = this._Anchors.length;
     var selAnchorIndex = -1;
     var retCode = this.SEL_NONE;
@@ -646,14 +667,14 @@ GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) {
     var radSq = radius * radius;
     //check if the clicked location is close to the currently selected anchor position
     if (this._selectedAnchorIndex>=0 && this._selectedAnchorIndex<this._Anchors.length){
-        retCode = this._checkAnchorIntersection(pickX, pickY, pickZ, radSq, this._selectedAnchorIndex, minDistance);
+        retCode = this._checkAnchorIntersection(pickX, pickY, pickZ, radSq, this._selectedAnchorIndex, minDistance, useLocal);
         if (retCode!==this.SEL_NONE){
             return [this._selectedAnchorIndex, retCode];
         }
     }
     //now check if the click location is close to any anchor position
     for (var i = 0; i < numAnchors; i++) {
-        retCode = this._checkAnchorIntersection(pickX, pickY, pickZ, radSq, i, minDistance);
+        retCode = this._checkAnchorIntersection(pickX, pickY, pickZ, radSq, i, minDistance, useLocal);
         if (retCode!==this.SEL_NONE){
             selAnchorIndex=i;
             break;
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 61a254ea..6c016cab 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -119,6 +119,27 @@ exports.PenTool = Montage.create(ShapeTool, {
         }
     },
 
+    _getUnsnappedScreenPosition: {
+        value: function(x,y){
+            var elemSnap = snapManager.elementSnapEnabled();
+            var gridSnap = snapManager.gridSnapEnabled();
+            var alignSnap = snapManager.snapAlignEnabled();
+
+            snapManager.enableElementSnap(false);
+            snapManager.enableGridSnap(false);
+            snapManager.enableSnapAlign(false);
+
+            var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
+            var unsnappedpos = (snapManager.snap(point.x, point.y, false)).getScreenPoint();
+            this._dragPlane = snapManager.getDragPlane();
+
+            snapManager.enableElementSnap(elemSnap);
+            snapManager.enableGridSnap(gridSnap);
+            snapManager.enableSnapAlign(alignSnap);
+
+            return unsnappedpos;
+        }
+    },
     ShowToolProperties: {
         value: function () {
             this._penView = PenView.create();
@@ -351,20 +372,31 @@ 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);
                 }
-
             } else { //if mouse is not down:
                 //this.doSnap(event);
                 //this.DrawHandles();
 
                 var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
                 if (currMousePos && this._selectedSubpath ){
-                    var selAnchorRetCode = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
+                    /*
+                    //convert the mouse pos. to local space of the canvas
+                    var widthAdjustment = -snapManager.getStageWidth()*0.5;
+                    var heightAdjustment = -snapManager.getStageHeight()*0.5; */
+
+
+                    var drawingCanvas = this._selectedSubpath.getCanvas();
+                    if (!drawingCanvas){
+                        drawingCanvas = ViewUtils.getStageElement();
+                    }
+                    /*var stageWorldToGlobalMatrix = ViewUtils.getStageWorldToGlobalMatrix();
+                    var globalMousePos = MathUtils.transformAndDivideHomogeneousPoint([currMousePos[0]+widthAdjustment, currMousePos[1]+heightAdjustment, currMousePos[2]], stageWorldToGlobalMatrix);*/
+                    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) {
                         this._hoveredAnchorIndex = selAnchorRetCode[0];
                         var lastAnchorIndex = this._selectedSubpath.getNumAnchors()-1;
@@ -599,12 +631,23 @@ exports.PenTool = Montage.create(ShapeTool, {
                         strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units);
                     }
                     this._selectedSubpath.setStrokeWidth(strokeSize);
-                    if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){
-                        this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor);
+
+                    var colorArray=[];
+                    var color = this.application.ninja.colorController.colorToolbar.stroke.color;
+                    if (color){
+                        colorArray = [color.r/255, color.g/255, color.b/255, color.a];
+                    }else {
+                        colorArray = [1,1,1,0];
                     }
-                    if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){
-                        this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor);
+                    this._selectedSubpath.setStrokeColor(colorArray);
+
+                    color = this.application.ninja.colorController.colorToolbar.fill.color;
+                    if (color){
+                        colorArray = [color.r/255, color.g/255, color.b/255, color.a];
+                    } else {
+                        colorArray = [1,1,1,0];
                     }
+                    this._selectedSubpath.setFillColor(colorArray);
                 } //if this is a new path being rendered
 
                 this._selectedSubpath.makeDirty();