aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorPushkar Joshi2012-01-31 12:05:15 -0800
committerPushkar Joshi2012-01-31 12:05:15 -0800
commitf0e3fa691b3c042c9fc49a7a0cde8ddf8100c195 (patch)
tree182d61721570e49a304894d54f0f451077770ee9 /js/tools
parent972e0ce4df7b332601ad006ca8b7dd9e189a59ef (diff)
downloadninja-f0e3fa691b3c042c9fc49a7a0cde8ddf8100c195.tar.gz
display the anchor point to be selected on mouse hover
Diffstat (limited to 'js/tools')
-rw-r--r--js/tools/PenTool.js219
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;
13var ElementMediator = require("js/mediators/element-mediator").ElementMediator; 13var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
14var TagTool = require("js/tools/TagTool").TagTool; 14var TagTool = require("js/tools/TagTool").TagTool;
15var ElementController = require("js/controllers/elements/element-controller").ElementController; 15var ElementController = require("js/controllers/elements/element-controller").ElementController;
16var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
17
18//todo remove this global var
19var g_DoPenToolMouseMove = true;
16 20
17exports.PenTool = Montage.create(ShapeTool, { 21exports.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 */