aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/LineTool.js5
-rwxr-xr-xjs/tools/PanTool.js23
-rwxr-xr-xjs/tools/PenTool.js160
-rwxr-xr-xjs/tools/Rotate3DToolBase.js11
-rwxr-xr-xjs/tools/Translate3DToolBase.js1
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, {
42 } 42 }
43 43
44 this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null); 44 this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null);
45 this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css; 45 if (this.application.ninja.colorController.colorToolbar.stroke.color)
46 this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css;
47 else
48 this._strokeColor = [0,0,0,1];
46 this.startDraw(event); 49 this.startDraw(event);
47 } 50 }
48 }, 51 },
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,
81 { 81 {
82 this._altKeyDown = true; 82 this._altKeyDown = true;
83 } 83 }
84 else if (event.shiftKey)
85 {
86 if (!this._shiftKeyDown)
87 {
88 this._shiftKeyDown = true;
89 this._shiftPt = this._lastGPt.slice();
90 }
91 }
84 } 92 }
85 }, 93 },
86 94
@@ -90,6 +98,10 @@ exports.PanTool = Montage.create(toolBase,
90 { 98 {
91 this._altKeyDown = false; 99 this._altKeyDown = false;
92 } 100 }
101 else if (event.keyCode === Keyboard.SHIFT)
102 {
103 this._shiftKeyDown = false;
104 }
93 } 105 }
94 }, 106 },
95 107
@@ -221,6 +233,7 @@ exports.PanTool = Montage.create(toolBase,
221 var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat ); 233 var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat );
222 234
223 this._lastGPt = this._globalPt.slice(); 235 this._lastGPt = this._globalPt.slice();
236 this._shiftPt = this._lastGPt.slice();
224 this._lastY = this._lastGPt[1]; 237 this._lastY = this._lastGPt[1];
225 238
226 // set up the matrices we will be needing 239 // set up the matrices we will be needing
@@ -285,6 +298,16 @@ exports.PanTool = Montage.create(toolBase,
285 this._globalPt[2] += dy; 298 this._globalPt[2] += dy;
286 gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]]; 299 gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]];
287 } 300 }
301 else if (this._shiftKeyDown)
302 {
303 var dx = Math.abs( this._shiftPt[0] - gPt[0] ),
304 dy = Math.abs( this._shiftPt[1] - gPt[1] );
305
306 if (dx >= dy)
307 gPt[1] = this._shiftPt[1];
308 else
309 gPt[0] = this._shiftPt[0];
310 }
288 311
289 // update the scrollbars 312 // update the scrollbars
290 var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt); 313 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, {
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 var selHandleFill = "#000000"
855
856 ctx.strokeStyle = defStroke;
857 ctx.fillStyle = defFill;
842 var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); 858 var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
859 var whichPoint = this._selectedSubpath.getSelectedMode(); //which of the selected handles to highlight
843 860
844 //line from prev to anchor 861 //line from prev to anchor
845 ctx.beginPath(); 862 ctx.beginPath();
@@ -848,10 +865,16 @@ exports.PenTool = Montage.create(ShapeTool, {
848 ctx.stroke(); 865 ctx.stroke();
849 866
850 //selected anchor prev 867 //selected anchor prev
851 ctx.fillStyle = "#AAAAAA";
852 ctx.beginPath(); 868 ctx.beginPath();
853 ctx.arc(selAnchor.getPrevX() + horizontalOffset, selAnchor.getPrevY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_PREV_RADIUS, 0, 2 * Math.PI, false); 869 ctx.arc(selAnchor.getPrevX() + horizontalOffset, selAnchor.getPrevY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_PREV_RADIUS, 0, 2 * Math.PI, false);
854 ctx.fill(); 870 ctx.closePath();
871 if (whichPoint & this._selectedSubpath.SEL_PREV){
872 ctx.fillStyle = selHandleFill;
873 ctx.fill();
874 ctx.fillStyle = defFill;
875 }else {
876 ctx.fill();
877 }
855 ctx.stroke(); 878 ctx.stroke();
856 879
857 //line from next to anchor 880 //line from next to anchor
@@ -861,16 +884,27 @@ exports.PenTool = Montage.create(ShapeTool, {
861 ctx.stroke(); 884 ctx.stroke();
862 885
863 //selected anchor next 886 //selected anchor next
864 ctx.fillStyle = "#666666";
865 ctx.beginPath(); 887 ctx.beginPath();
866 ctx.arc(selAnchor.getNextX() + horizontalOffset, selAnchor.getNextY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS, 0, 2 * Math.PI, false); 888 ctx.arc(selAnchor.getNextX() + horizontalOffset, selAnchor.getNextY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS, 0, 2 * Math.PI, false);
867 ctx.fill(); 889 if (whichPoint & this._selectedSubpath.SEL_NEXT){
890 ctx.fillStyle = selHandleFill;
891 ctx.fill();
892 ctx.fillStyle = defFill;
893 }else {
894 ctx.fill();
895 }
868 ctx.stroke();