Merge pull request #79 from pushkarjoshi/pentool

Pentool

4 files changed, 190 insertions, 50 deletions

diff --git a/js/helper-classes/RDGE/GLAnchorPoint.js b/js/helper-classes/RDGE/GLAnchorPoint.js
index 716f59d4..c3e95b34 100755
--- a/js/helper-classes/RDGE/GLAnchorPoint.js
+++ b/js/helper-classes/RDGE/GLAnchorPoint.js
@@ -133,6 +133,13 @@ GLAnchorPoint.prototype.translateAll = function (x, y, z) {
 }
 
 
+GLAnchorPoint.prototype.scaleAll = function(sx,sy,sz){
+    this._x *= sx;this._prevX *= sx;this._nextX *= sx;
+    this._y *= sy;this._prevY *= sy;this._nextY *= sy;
+    this._z *= sz;this._prevZ *= sz;this._nextZ *= sz;
+}
+
+
 // ********* getters **********
 GLAnchorPoint.prototype.getPosX = function () { return this._x; }
 GLAnchorPoint.prototype.getPosY = function () { return this._y; }
diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js
index 3200cf59..f3d8ad36 100755
--- a/js/helper-classes/RDGE/GLSubpath.js
+++ b/js/helper-classes/RDGE/GLSubpath.js
@@ -178,6 +178,67 @@ function GLSubpath() {
     } //render()
 
     this.geomType = function () { return this.GEOM_TYPE_CUBIC_BEZIER; }
+
+
+    this.setWidth = function (newW) {
+        if (newW<1)
+            newW=1; //clamp minimum width to 1
+        //scale the contents of this subpath to lie within this width
+        //determine the scale factor by comparing with the old width
+        var oldWidth = this._BBoxMax[0]-this._BBoxMin[0];
+        if (oldWidth<1){
+            oldWidth=1;
+        }
+        var scaleX = newW/oldWidth;
+        if (scaleX===1){
+            return; //no need to do anything
+        }
+
+        //scale the anchor point positions such that the width of the bbox is the newW
+        var origX = this._BBoxMin[0];
+        var numAnchors = this._Anchors.length;
+        for (var i=0;i<numAnchors;i++){
+            //compute the distance from the bboxMin
+            var oldW = this._Anchors[i].getPosX() - origX;
+            var prevW = this._Anchors[i].getPrevX() - origX;
+            var nextW = this._Anchors[i].getNextX() - origX;
+
+            this._Anchors[i].setPos(origX + oldW*scaleX,this._Anchors[i].getPosY(),this._Anchors[i].getPosZ());
+            this._Anchors[i].setPrevPos(origX + prevW*scaleX,this._Anchors[i].getPrevY(),this._Anchors[i].getPrevZ());
+            this._Anchors[i].setNextPos(origX + nextW*scaleX,this._Anchors[i].getNextY(),this._Anchors[i].getNextZ());
+        }
+        this.makeDirty();
+    }
+    this.setHeight = function (newH) {
+        if (newH<1)
+            newH=1; //clamp minimum width to 1
+        //scale the contents of this subpath to lie within this height
+        //determine the scale factor by comparing with the old height
+        var oldHeight = this._BBoxMax[1]-this._BBoxMin[1];
+        if (oldHeight<1){
+            oldHeight=1;
+        }
+        var scaleY = newH/oldHeight;
+        if (scaleY===1){
+            return; //no need to do anything
+        }
+
+        //scale the anchor point positions such that the height of the bbox is the newH
+        var origY = this._BBoxMin[1];
+        var numAnchors = this._Anchors.length;
+        for (var i=0;i<numAnchors;i++){
+            //compute the distance from the bboxMin
+            var oldW = this._Anchors[i].getPosY() - origY;
+            var prevW = this._Anchors[i].getPrevY() - origY;
+            var nextW = this._Anchors[i].getNextY() - origY;
+
+            this._Anchors[i].setPos(this._Anchors[i].getPosX(), origY + oldW*scaleY,this._Anchors[i].getPosZ());
+            this._Anchors[i].setPrevPos(this._Anchors[i].getPrevX(), origY + prevW*scaleY,this._Anchors[i].getPrevZ());
+            this._Anchors[i].setNextPos(this._Anchors[i].getNextX(), origY + nextW*scaleY,this._Anchors[i].getNextZ());
+        }
+        this.makeDirty();
+    }
+
 } //function GLSubpath ...class definition
 
 
@@ -573,11 +634,6 @@ GLSubpath.prototype.setFillMaterial = function(m){ this._fillMaterial = m;}
 GLSubpath.prototype.getFillColor = function() {return this._fillColor;}
 GLSubpath.prototype.setFillColor = function(c){this._fillColor = c;}
 
-GLSubpath.prototype.setWidth = function () {//NO-OP for now
-}
-GLSubpath.prototype.setHeight = function () {//NO-OP for now
-}
-
 GLSubpath.prototype.copyFromSubpath = function (subpath) {
     this.clearAllAnchors();
     for (var i = 0; i < subpath.getNumAnchors(); i++) {
diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js
index 1667dca8..65dd34cd 100755
--- a/js/mediators/keyboard-mediator.js
+++ b/js/mediators/keyboard-mediator.js
@@ -136,6 +136,13 @@ exports.KeyboardMediator = Montage.create(Component, {
                     return;
                 }
 
+                // shortcut for Pen tool is P
+                if (evt.keyCode === Keyboard.P){
+                    evt.preventDefault();
+                    this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[5]});
+                    return;
+                }
+
                 // Shortcut for Rectangle Tool is R
                 // unless the user is pressing the command key.
                 // If the user is pressing the command key, they want to refresh the browser.
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) {