diff options
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/LineTool.js | 5 | ||||
-rwxr-xr-x | js/tools/PanTool.js | 23 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 160 | ||||
-rwxr-xr-x | js/tools/Rotate3DToolBase.js | 11 | ||||
-rwxr-xr-x | js/tools/Translate3DToolBase.js | 1 |
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 { | ||
< |