aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/helper-classes/RDGE/GLAnchorPoint.js7
-rwxr-xr-xjs/helper-classes/RDGE/GLSubpath.js66
-rwxr-xr-xjs/mediators/keyboard-mediator.js7
-rwxr-xr-xjs/tools/PenTool.js160
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) {
133} 133}
134 134
135 135
136GLAnchorPoint.prototype.scaleAll = function(sx,sy,sz){
137 this._x *= sx;this._prevX *= sx;this._nextX *= sx;
138 this._y *= sy;this._prevY *= sy;this._nextY *= sy;
139 this._z *= sz;this._prevZ *= sz;this._nextZ *= sz;
140}
141
142
136// ********* getters ********** 143// ********* getters **********
137GLAnchorPoint.prototype.getPosX = function () { return this._x; } 144GLAnchorPoint.prototype.getPosX = function () { return this._x; }
138GLAnchorPoint.prototype.getPosY = function () { return this._y; } 145GLAnchorPoint.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() {
178 } //render() 178 } //render()
179 179
180 this.geomType = function () { return this.GEOM_TYPE_CUBIC_BEZIER; } 180 this.geomType = function () { return this.GEOM_TYPE_CUBIC_BEZIER; }
181
182
183 this.setWidth = function (newW) {
184 if (newW<1)
185 newW=1; //clamp minimum width to 1
186 //scale the contents of this subpath to lie within this width
187 //determine the scale factor by comparing with the old width
188 var oldWidth = this._BBoxMax[0]-this._BBoxMin[0];
189 if (oldWidth<1){
190 oldWidth=1;
191 }
192 var scaleX = newW/oldWidth;
193 if (scaleX===1){
194 return; //no need to do anything
195 }
196
197 //scale the anchor point positions such that the width of the bbox is the newW
198 var origX = this._BBoxMin[0];
199 var numAnchors = this._Anchors.length;
200 for (var i=0;i<numAnchors;i++){
201 //compute the distance from the bboxMin
202 var oldW = this._Anchors[i].getPosX() - origX;
203 var prevW = this._Anchors[i].getPrevX() - origX;
204 var nextW = this._Anchors[i].getNextX() - origX;
205
206 this._Anchors[i].setPos(origX + oldW*scaleX,this._Anchors[i].getPosY(),this._Anchors[i].getPosZ());
207 this._Anchors[i].setPrevPos(origX + prevW*scaleX,this._Anchors[i].getPrevY(),this._Anchors[i].getPrevZ());
208 this._Anchors[i].setNextPos(origX + nextW*scaleX,this._Anchors[i].getNextY(),this._Anchors[i].getNextZ());
209 }
210 this.makeDirty();
211 }
212 this.setHeight = function (newH) {
213 if (newH<1)
214 newH=1; //clamp minimum width to 1
215 //scale the contents of this subpath to lie within this height
216 //determine the scale factor by comparing with the old height
217 var oldHeight = this._BBoxMax[1]-this._BBoxMin[1];
218 if (oldHeight<1){
219 oldHeight=1;
220 }
221 var scaleY = newH/oldHeight;
222 if (scaleY===1){
223 return; //no need to do anything
224 }
225
226 //scale the anchor point positions such that the height of the bbox is the newH
227 var origY = this._BBoxMin[1];
228 var numAnchors = this._Anchors.length;
229 for (var i=0;i<numAnchors;i++){
230 //compute the distance from the bboxMin
231 var oldW = this._Anchors[i].getPosY() - origY;
232 var prevW = this._Anchors[i].getPrevY() - origY;
233 var nextW = this._Anchors[i].getNextY() - origY;
234
235 this._Anchors[i].setPos(this._Anchors[i].getPosX(), origY + oldW*scaleY,this._Anchors[i].getPosZ());
236 this._Anchors[i].setPrevPos(this._Anchors[i].getPrevX(), origY + prevW*scaleY,this._Anchors[i].getPrevZ());
237 this._Anchors[i].setNextPos(this._Anchors[i].getNextX(), origY + nextW*scaleY,this._Anchors[i].getNextZ());
238 }
239 this.makeDirty();
240 }
241
181} //function GLSubpath ...class definition 242} //function GLSubpath ...class definition
182 243
183 244
@@ -573,11 +634,6 @@ GLSubpath.prototype.setFillMaterial = function(m){ this._fillMaterial = m;}
573GLSubpath.prototype.getFillColor = function() {return this._fillColor;} 634GLSubpath.prototype.getFillColor = function() {return this._fillColor;}
574GLSubpath.prototype.setFillColor = function(c){this._fillColor = c;} 635GLSubpath.prototype.setFillColor = function(c){this._fillColor = c;}
575 636
576GLSubpath.prototype.setWidth = function () {//NO-OP for now
577}
578GLSubpath.prototype.setHeight = function () {//NO-OP for now
579}
580
581GLSubpath.prototype.copyFromSubpath = function (subpath) { 637GLSubpath.prototype.copyFromSubpath = function (subpath) {
582 this.clearAllAnchors(); 638 this.clearAllAnchors();
583 for (var i = 0; i < subpath.getNumAnchors(); i++) { 639 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, {
136 return; 136 return;
137 } 137 }
138 138
139 // shortcut for Pen tool is P
140 if (evt.keyCode === Keyboard.P){
141 evt.preventDefault();
142 this.application.ninja.handleSelectTool({"detail": this.application.ninja.toolsData.defaultToolsData[5]});
143 return;
144 }
145
139 // Shortcut for Rectangle Tool is R 146 // Shortcut for Rectangle Tool is R
140 // unless the user is pressing the command key. 147 // unless the user is pressing the command key.
141 // If the user is pressing the command key, they want to refresh the browser. 148 // 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, {
66 _penPlaneMat: { value: null, writable: true }, 66 _penPlaneMat: { value: null, writable: true },
67 67
68 //index of the anchor point that the user has hovered over 68 //index of the anchor point that the user has hovered over
69 _hoveredAnchorIndex: {value: null, writable: true}, 69 _hoveredAnchorIndex: {value: -1, writable: true},
70 70
71 //constants used for picking points --- NOTE: these should be user-settable parameters 71 //constants used for picking points --- NOTE: these should be user-settable parameters
72 _PICK_POINT_RADIUS: { value: 10, writable: false }, 72 _PICK_POINT_RADIUS: { value: 10, writable: false },
73 _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, 73 _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false },
74 _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false }, 74 _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false },
75 _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 5, writable: false }, 75 _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 2, writable: false },
76 _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 5, writable: false }, 76 _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 2, writable: false },
77 77
78 //constants used for editing modes (can be OR-ed) 78 //constants used for editing modes (can be OR-ed)
79 EDIT_NONE: { value: 0, writable: false }, 79 EDIT_NONE: { value: 0, writable: false },
@@ -760,9 +760,7 @@ exports.PenTool = Montage.create(ShapeTool, {
760 var verticalOffset = this.application.ninja.stage.userContentTop; 760 var verticalOffset = this.application.ninja.stage.userContentTop;
761 //display the subpath as a sequence of cubic beziers 761 //display the subpath as a sequence of cubic beziers
762 ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) 762 ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width)
763 if (ctx.lineWidth == subpath.getStrokeWidth()) 763 ctx.strokeStyle = "green";
764 ctx.lineWidth = 3;
765 ctx.strokeStyle = "black";
766 //if (subpath.getStrokeColor()) 764 //if (subpath.getStrokeColor())
767 // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); 765 // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() );
768 ctx.beginPath(); 766 ctx.beginPath();
@@ -812,34 +810,53 @@ exports.PenTool = Montage.create(ShapeTool, {
812 var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; 810 var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop;
813 811
814 //display circles and squares near all control points 812 //display circles and squares near all control points
815 ctx.fillStyle = "#FF4444"; 813 ctx.fillStyle = "#FFFFFF";
816 ctx.lineWidth = 2; 814 ctx.lineWidth = 1;
817 ctx.strokeStyle = "black"; 815 ctx.strokeStyle = "green";
816 var anchorDelta = 2;
817 var selAnchorDelta = 4;
818
818 for (var i = 0; i < numAnchors; i++) { 819 for (var i = 0; i < numAnchors; i++) {
819 var px = subpath.getAnchor(i).getPosX(); 820 var px = subpath.getAnchor(i).getPosX();
820 var py = subpath.getAnchor(i).getPosY(); 821 var py = subpath.getAnchor(i).getPosY();
821 ctx.beginPath(); 822 ctx.beginPath();
822 ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); 823 //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false);
824 ctx.moveTo(px-anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset);
825 ctx.lineTo(px+anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset);
826 ctx.lineTo(px+anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset);
827 ctx.lineTo(px-anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset);
828 ctx.closePath();
823 ctx.fill(); 829 ctx.fill();
824 ctx.stroke(); 830 ctx.stroke();
825 } 831 }
826 832
827 //display the hovered over anchor point 833 //display the hovered over anchor point
828 ctx.lineWidth = 2; 834 ctx.lineWidth = 2;
829 ctx.strokeStyle = "black"; 835 if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) {
830 if (this._hoveredAnchorIndex && this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) {
831 var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX(); 836 var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX();
832 var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY(); 837 var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY();
833 ctx.beginPath(); 838 ctx.beginPath();
834 ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); 839 //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false);
840 ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset);
841 ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset);
842 ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset);
843 ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset);
844 ctx.closePath();
835 ctx.stroke(); 845 ctx.stroke();
836 } 846 }
837 847
848
838 //display selected anchor and its prev. and next points 849 //display selected anchor and its prev. and next points
839 if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) { 850 if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) {
840 ctx.lineWidth = 2; 851 ctx.lineWidth = 1;
841 ctx.strokeStyle = "black"; 852 var defFill = "#FFFFFF";
853 var defStroke = "green";
854</