5 files changed, 146 insertions, 54 deletions

diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index 233316a5..0a7c0534 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -42,7 +42,10 @@ exports.LineTool = Montage.create(ShapeTool, {
             }
 
             this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null);
-            this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css;
+                        if (this.application.ninja.colorController.colorToolbar.stroke.color)
+                                this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css;
+                        else
+                                this._strokeColor = [0,0,0,1];
             this.startDraw(event);
         }
     },
diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js
index 71301d46..0537a27b 100755
--- a/js/tools/PanTool.js
+++ b/js/tools/PanTool.js
@@ -81,6 +81,14 @@ exports.PanTool = Montage.create(toolBase,
                         {
                 this._altKeyDown = true;
             }
+                        else if (event.shiftKey)
+                        {
+                                if (!this._shiftKeyDown)
+                                {
+                                                this._shiftKeyDown = true;
+                                                this._shiftPt = this._lastGPt.slice();
+                                }
+                        }
         }
     },
 
@@ -90,6 +98,10 @@ exports.PanTool = Montage.create(toolBase,
                         {
                 this._altKeyDown = false;
             }
+                        else if (event.keyCode === Keyboard.SHIFT)
+                        {
+                                this._shiftKeyDown = false;
+                        }
         }
     },
 
@@ -221,6 +233,7 @@ exports.PanTool = Montage.create(toolBase,
                                         var tmpLocal   = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat );
 
                                         this._lastGPt = this._globalPt.slice();
+                                        this._shiftPt = this._lastGPt.slice();
                                         this._lastY = this._lastGPt[1];
 
                                         // set up the matrices we will be needing
@@ -285,6 +298,16 @@ exports.PanTool = Montage.create(toolBase,
                                         this._globalPt[2] += dy;
                                         gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]];
                                 }
+                                else if (this._shiftKeyDown)
+                                {
+                                        var dx = Math.abs( this._shiftPt[0] - gPt[0] ),
+                                                dy = Math.abs( this._shiftPt[1] - gPt[1] );
+
+                                        if (dx >= dy)
+                                                gPt[1] = this._shiftPt[1];
+                                        else
+                                                gPt[0] = this._shiftPt[0];
+                                }
 
                                 // update the scrollbars
                                 var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt);
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 7749d525..ddc8bc04 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -66,14 +66,14 @@ exports.PenTool = Montage.create(ShapeTool, {
     _penPlaneMat: { value: null, writable: true },
 
     //index of the anchor point that the user has hovered over
-    _hoveredAnchorIndex: {value: null, writable: true},
+    _hoveredAnchorIndex: {value: -1, 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 },
     _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false },
-    _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 5, writable: false },
-    _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 5, writable: false },
+    _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 2, writable: false },
+    _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 2, writable: false },
 
     //constants used for editing modes (can be OR-ed)
     EDIT_NONE: { value: 0, writable: false },
@@ -760,9 +760,7 @@ exports.PenTool = Montage.create(ShapeTool, {
             var verticalOffset = this.application.ninja.stage.userContentTop;
             //display the subpath as a sequence of cubic beziers
             ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width)
-            if (ctx.lineWidth == subpath.getStrokeWidth())
-                ctx.lineWidth = 3;
-            ctx.strokeStyle = "black";
+            ctx.strokeStyle = "green";
             //if (subpath.getStrokeColor())
                         //    ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() );
             ctx.beginPath();
@@ -812,34 +810,53 @@ exports.PenTool = Montage.create(ShapeTool, {
             var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop;
 
             //display circles and squares near all control points 
-            ctx.fillStyle = "#FF4444";
-            ctx.lineWidth = 2;
-            ctx.strokeStyle = "black";
+            ctx.fillStyle = "#FFFFFF";
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = "green";
+            var anchorDelta = 2;
+            var selAnchorDelta = 4;
+
             for (var i = 0; i < numAnchors; i++) {
                 var px = subpath.getAnchor(i).getPosX();
                 var py = subpath.getAnchor(i).getPosY();
                 ctx.beginPath();
-                ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false);
+                //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false);
+                ctx.moveTo(px-anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset);
+                ctx.lineTo(px+anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset);
+                ctx.lineTo(px+anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset);
+                ctx.lineTo(px-anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset);
+                ctx.closePath();
                 ctx.fill();
                 ctx.stroke();
             }
 
             //display the hovered over anchor point
             ctx.lineWidth = 2;
-            ctx.strokeStyle = "black";
-            if (this._hoveredAnchorIndex && this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) {
+            if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) {
                 var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX();
                 var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY();
                 ctx.beginPath();
-                ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false);
+                //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false);
+                ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset);
+                ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset);
+                ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset);
+                ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset);
+                ctx.closePath();
                 ctx.stroke();
             }
 
+
             //display selected anchor and its prev. and next points
             if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) {
-                ctx.lineWidth = 2;
-                ctx.strokeStyle = "black";
+                ctx.lineWidth = 1;
+                var defFill = "#FFFFFF";
+                var defStroke = "green";
+                var selHandleFill = "#000000"
+
+                ctx.strokeStyle = defStroke;
+                ctx.fillStyle = defFill;
                 var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
+                var whichPoint = this._selectedSubpath.getSelectedMode(); //which of the selected handles to highlight
 
                 //line from prev to anchor
                 ctx.beginPath();
@@ -848,10 +865,16 @@ exports.PenTool = Montage.create(ShapeTool, {
                 ctx.stroke();
 
                 //selected anchor prev
-                ctx.fillStyle = "#AAAAAA";
                 ctx.beginPath();
                 ctx.arc(selAnchor.getPrevX() + horizontalOffset, selAnchor.getPrevY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_PREV_RADIUS, 0, 2 * Math.PI, false);
-                ctx.fill();
+                ctx.closePath();
+                if (whichPoint & this._selectedSubpath.SEL_PREV){
+                    ctx.fillStyle = selHandleFill;
+                    ctx.fill();
+                    ctx.fillStyle = defFill;
+                }else {
+                    ctx.fill();
+                }
                 ctx.stroke();
 
                 //line from next to anchor
@@ -861,16 +884,27 @@ exports.PenTool = Montage.create(ShapeTool, {
                 ctx.stroke();
 
                 //selected anchor next
-                ctx.fillStyle = "#666666";
                 ctx.beginPath();
                 ctx.arc(selAnchor.getNextX() + horizontalOffset, selAnchor.getNextY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS, 0, 2 * Math.PI, false);
-                ctx.fill();
+                if (whichPoint & this._selectedSubpath.SEL_NEXT){
+                    ctx.fillStyle = selHandleFill;
+                    ctx.fill();
+                    ctx.fillStyle = defFill;
+                }else {
+                    ctx.fill();