diff options
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r-- | js/tools/PenTool.js | 219 |
1 files changed, 60 insertions, 159 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 3b03e0e7..46465be0 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -13,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils; | |||
13 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | 13 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; |
14 | var TagTool = require("js/tools/TagTool").TagTool; | 14 | var TagTool = require("js/tools/TagTool").TagTool; |
15 | var ElementController = require("js/controllers/elements/element-controller").ElementController; | 15 | var ElementController = require("js/controllers/elements/element-controller").ElementController; |
16 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; | ||
17 | |||
18 | //todo remove this global var | ||
19 | var g_DoPenToolMouseMove = true; | ||
16 | 20 | ||
17 | exports.PenTool = Montage.create(ShapeTool, { | 21 | exports.PenTool = Montage.create(ShapeTool, { |
18 | 22 | ||
@@ -38,9 +42,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
38 | _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath | 42 | _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath |
39 | 43 | ||
40 | 44 | ||
41 | //whether or not to display the guides for debugging | ||
42 | _showGuides: { value: true, writable: true }, | ||
43 | |||
44 | //whether the user has held down the Alt key | 45 | //whether the user has held down the Alt key |
45 | _isAltDown: { value: false, writable: true }, | 46 | _isAltDown: { value: false, writable: true }, |
46 | 47 | ||
@@ -65,6 +66,9 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
65 | //the plane matrix for the first click...so the entire path is on the same plane | 66 | //the plane matrix for the first click...so the entire path is on the same plane |
66 | _penPlaneMat: { value: null, writable: true }, | 67 | _penPlaneMat: { value: null, writable: true }, |
67 | 68 | ||
69 | //index of the anchor point that the user has hovered over | ||
70 | _hoveredAnchorIndex: {value: null, writable: true}, | ||
71 | |||
68 | //constants used for picking points --- NOTE: these should be user-settable parameters | 72 | //constants used for picking points --- NOTE: these should be user-settable parameters |
69 | _PICK_POINT_RADIUS: { value: 10, writable: false }, | 73 | _PICK_POINT_RADIUS: { value: 10, writable: false }, |
70 | _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, | 74 | _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, |
@@ -262,7 +266,9 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
262 | } //if (mouseDownPos) { i.e. if mouse down yielded a valid position | 266 | } //if (mouseDownPos) { i.e. if mouse down yielded a valid position |
263 | 267 | ||
264 | 268 | ||
265 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); | 269 | if (!g_DoPenToolMouseMove){ |
270 | NJevent("enableStageMove"); | ||
271 | } | ||
266 | } //value: function (event) { | 272 | } //value: function (event) { |
267 | }, //HandleLeftButtonDown | 273 | }, //HandleLeftButtonDown |
268 | 274 | ||
@@ -279,18 +285,15 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
279 | return; | 285 | return; |
280 | } | 286 | } |
281 | 287 | ||
282 | if (this._isDrawing) { | 288 | //clear the canvas before we draw anything else |
283 | if (!this._isAltDown) | 289 | this.application.ninja.stage.clearDrawingCanvas(); |
284 | this.doDraw(event); //if Alt was down, doDraw prevents this.mouseUpHitRec from being written to | 290 | this._hoveredAnchorIndex = -1; |
285 | else{ | ||
286 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | ||
287 | this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); | ||
288 | } | ||
289 | |||
290 | 291 | ||
291 | // ******* begin new code ********* | 292 | if (this._isDrawing) { |
292 | //get the current mouse position from the drawing-tool knowing that the mouse up position is set to current mouse pos in this.doDraw above | 293 | this.application.ninja.stage.clearDrawingCanvas(); |
293 | var currMousePos = this.getMouseUpPos(); | 294 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); |
295 | //go through the drawing toolbase to get the position of the mouse | ||
296 | var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); | ||
294 | if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { | 297 | if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { |
295 | //var scoord = this._getScreenCoord(this._mouseUpHitRec); | 298 | //var scoord = this._getScreenCoord(this._mouseUpHitRec); |
296 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 299 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); |
@@ -345,20 +348,27 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
345 | 348 | ||
346 | //make the subpath dirty so it will get re-drawn | 349 | //make the subpath dirty so it will get re-drawn |
347 | this._selectedSubpath.makeDirty(); | 350 | this._selectedSubpath.makeDirty(); |
348 | //clear the canvas before we draw anything else | 351 | this.DrawSubpathsSVG(); |
349 | this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); | ||
350 | this.DrawSubpathAnchors(this._selectedSubpath); | ||
351 | } | 352 | } |
352 | // ********* end new code *********** | ||
353 | 353 | ||
354 | } else { | 354 | } else { //if mouse is not down: |
355 | this.doSnap(event); | 355 | //this.doSnap(event); |
356 | this.DrawHandles(); | 356 | //this.DrawHandles(); |
357 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | ||
358 | var currMousePos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | ||
359 | if (currMousePos && this._selectedSubpath ){ | ||
360 | var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); | ||
361 | if (selAnchor >=0) { | ||
362 | this._hoveredAnchorIndex = selAnchor; | ||
363 | } | ||
364 | } | ||
357 | } //else of if (this._isDrawing) { | 365 | } //else of if (this._isDrawing) { |
358 | 366 | ||
359 | this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks | 367 | //this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks |
368 | if (this._selectedSubpath){ | ||
369 | this.DrawSubpathAnchors(this._selectedSubpath); | ||
370 | } | ||
360 | 371 | ||
361 | this.DrawSubpathsSVG(); | ||
362 | }//value: function(event) | 372 | }//value: function(event) |
363 | }, | 373 | }, |
364 | 374 | ||
@@ -482,7 +492,9 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
482 | this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) | 492 | this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) |
483 | } | 493 | } |
484 | 494 | ||
485 | NJevent("disableStageMove");//stageManagerModule.stageManager.disableMouseMove(); | 495 | if (!g_DoPenToolMouseMove){ |
496 | NJevent("disableStageMove"); | ||
497 | } | ||
486 | } | 498 | } |
487 | }, | 499 | }, |
488 | 500 | ||
@@ -797,102 +809,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
797 | throw ("null drawing context in Pentool::DrawSubpathSVG"); | 809 | throw ("null drawing context in Pentool::DrawSubpathSVG"); |
798 | ctx.save(); | 810 | ctx.save(); |
799 | 811 | ||
800 | var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; | 812 | var horizontalOffset = this.application.ninja.stage.userContentLeft; |
801 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; | 813 | var verticalOffset = this.application.ninja.stage.userContentTop; |
802 | |||
803 | |||
804 | if (this._showGuides) { | ||
805 | var leftOffsetSamples = subpath.getLeftOffsetPoints(); | ||
806 | var rightOffsetSamples = subpath.getRightOffsetPoints(); | ||
807 | /* | ||
808 | //display the subpath samples as a sequence of circles | ||
809 | ctx.lineWidth = 2; | ||
810 | ctx.fillStyle = "pink"; | ||
811 | ctx.strokeStyle = "black"; | ||
812 | for (var i = 0; i < samples.length; i += 3) { | ||
813 | ctx.beginPath(); | ||
814 | ctx.arc(samples[i], samples[i + 1], this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); | ||
815 | ctx.fill(); | ||
816 | ctx.stroke(); | ||
817 | } | ||
818 | */ | ||
819 | |||
820 | /* | ||
821 | //display circles near all offset sample points | ||
822 | ctx.fillStyle = "#44FF44"; | ||
823 | ctx.lineWidth = 2; | ||
824 | ctx.strokeStyle = "black"; | ||
825 | for (var i = 0; i < leftOffsetSamples.length; i++) { | ||
826 | var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset; | ||
827 | var py = leftOffsetSamples[i].Pos[1]+ verticalOffset; | ||
828 | ctx.beginPath(); | ||
829 | ctx.arc(px, py, this._DISPLAY_ANCHOR_RADIUS * 0.75, 0, 2 * Math.PI, false); | ||
830 | ctx.fill(); | ||
831 | ctx.stroke(); | ||
832 | } | ||
833 | */ | ||
834 | |||
835 | /* | ||
836 | //display mapping of subpath samples to offset samples | ||
837 | |||
838 | ctx.strokeStyle = "black"; | ||
839 | ctx.lineWidth = 1; | ||
840 | ctx.beginPath(); | ||
841 | for (var i = 0; i < leftOffsetSamples.length; i++) { | ||
842 | var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset; | ||
843 | var py = leftOffsetSamples[i].Pos[1]+ verticalOffset; | ||
844 | var ox = leftOffsetSamples[i].CurveMapPos[0] + horizontalOffset; | ||
845 | var oy = leftOffsetSamples[i].CurveMapPos[1] + verticalOffset; | ||
846 | |||
847 | ctx.moveTo(px, py); | ||
848 | ctx.lineTo(ox,oy); | ||
849 | } | ||
850 | ctx.stroke(); | ||
851 | ctx.strokeStyle = "black"; | ||
852 | ctx.lineWidth = 1; | ||
853 | ctx.beginPath(); | ||
854 | for (var i = 0; i < rightOffsetSamples.length; i++) { | ||
855 | var px = rightOffsetSamples[i].Pos[0]+ horizontalOffset; | ||
856 | var py = rightOffsetSamples[i].Pos[1]+ verticalOffset; | ||
857 | var ox = rightOffsetSamples[i].CurveMapPos[0] + horizontalOffset; | ||
858 | var oy = rightOffsetSamples[i].CurveMapPos[1] + verticalOffset; | ||
859 | |||
860 | ctx.moveTo(px, py); | ||
861 | ctx.lineTo(ox,oy); | ||
862 | } | ||
863 | ctx.stroke(); | ||
864 | */ | ||
865 | |||
866 | /* | ||
867 | //display triangles generated | ||
868 | var leftOffsetTriangles = subpath.getLeftOffsetTriangles(); | ||
869 | ctx.strokeStyle = "black"; | ||
870 | ctx.lineWidth = 1; | ||
871 | ctx.beginPath(); | ||
872 | for (var i = 0; i < leftOffsetTriangles.length; i++) { | ||
873 | ctx.moveTo(leftOffsetTriangles[i].v0[0] + horizontalOffset, leftOffsetTriangles[i].v0[1] + verticalOffset); | ||
874 | ctx.lineTo(leftOffsetTriangles[i].v1[0] + horizontalOffset, leftOffsetTriangles[i].v1[1] + verticalOffset); | ||
875 | ctx.lineTo(leftOffsetTriangles[i].v2[0] + horizontalOffset, leftOffsetTriangles[i].v2[1] + verticalOffset); | ||
876 | } | ||
877 | ctx.stroke(); | ||
878 | |||
879 | var rightOffsetTriangles = subpath.getRightOffsetTriangles(); | ||
880 | ctx.strokeStyle = "black"; | ||
881 | ctx.lineWidth = 1; | ||
882 | ctx.beginPath(); | ||
883 | for (var i = 0; i < rightOffsetTriangles.length; i++) { | ||
884 | ctx.moveTo(rightOffsetTriangles[i].v0[0] + horizontalOffset, rightOffsetTriangles[i].v0[1] + verticalOffset); | ||
885 | ctx.lineTo(rightOffsetTriangles[i].v1[0] + horizontalOffset, rightOffsetTriangles[i].v1[1] + verticalOffset); | ||
886 | ctx.lineTo(rightOffsetTriangles[i].v2[0] + horizontalOffset, rightOffsetTriangles[i].v2[1] + verticalOffset); | ||
887 | } | ||
888 | ctx.stroke(); | ||
889 | */ | ||
890 | } //if this._showGuides | ||
891 | |||
892 | |||
893 | |||
894 | //display the subpath as a sequence of cubic beziers |