From f0e3fa691b3c042c9fc49a7a0cde8ddf8100c195 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 31 Jan 2012 12:05:15 -0800 Subject: display the anchor point to be selected on mouse hover --- js/tools/PenTool.js | 219 ++++++++++++++-------------------------------------- 1 file changed, 60 insertions(+), 159 deletions(-) (limited to 'js/tools') 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; var ElementMediator = require("js/mediators/element-mediator").ElementMediator; var TagTool = require("js/tools/TagTool").TagTool; var ElementController = require("js/controllers/elements/element-controller").ElementController; +var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; + +//todo remove this global var +var g_DoPenToolMouseMove = true; exports.PenTool = Montage.create(ShapeTool, { @@ -38,9 +42,6 @@ exports.PenTool = Montage.create(ShapeTool, { _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath - //whether or not to display the guides for debugging - _showGuides: { value: true, writable: true }, - //whether the user has held down the Alt key _isAltDown: { value: false, writable: true }, @@ -65,6 +66,9 @@ exports.PenTool = Montage.create(ShapeTool, { //the plane matrix for the first click...so the entire path is on the same plane _penPlaneMat: { value: null, writable: true }, + //index of the anchor point that the user has hovered over + _hoveredAnchorIndex: {value: null, writable: true}, + //constants used for picking points --- NOTE: these should be user-settable parameters _PICK_POINT_RADIUS: { value: 10, writable: false }, _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, @@ -262,7 +266,9 @@ exports.PenTool = Montage.create(ShapeTool, { } //if (mouseDownPos) { i.e. if mouse down yielded a valid position - NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); + if (!g_DoPenToolMouseMove){ + NJevent("enableStageMove"); + } } //value: function (event) { }, //HandleLeftButtonDown @@ -279,18 +285,15 @@ exports.PenTool = Montage.create(ShapeTool, { return; } - if (this._isDrawing) { - if (!this._isAltDown) - this.doDraw(event); //if Alt was down, doDraw prevents this.mouseUpHitRec from being written to - else{ - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); - } - + //clear the canvas before we draw anything else + this.application.ninja.stage.clearDrawingCanvas(); + this._hoveredAnchorIndex = -1; - // ******* begin new code ********* - //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 - var currMousePos = this.getMouseUpPos(); + if (this._isDrawing) { + this.application.ninja.stage.clearDrawingCanvas(); + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); + //go through the drawing toolbase to get the position of the mouse + var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) { //var scoord = this._getScreenCoord(this._mouseUpHitRec); var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); @@ -345,20 +348,27 @@ exports.PenTool = Montage.create(ShapeTool, { //make the subpath dirty so it will get re-drawn this._selectedSubpath.makeDirty(); - //clear the canvas before we draw anything else - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - this.DrawSubpathAnchors(this._selectedSubpath); + this.DrawSubpathsSVG(); } - // ********* end new code *********** - } else { - this.doSnap(event); - this.DrawHandles(); + } else { //if mouse is not down: + //this.doSnap(event); + //this.DrawHandles(); + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); + var currMousePos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + if (currMousePos && this._selectedSubpath ){ + var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); + if (selAnchor >=0) { + this._hoveredAnchorIndex = selAnchor; + } + } } //else of if (this._isDrawing) { - this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks + //this.drawLastSnap(); // Required cleanup for both Draw/Feedbacks + if (this._selectedSubpath){ + this.DrawSubpathAnchors(this._selectedSubpath); + } - this.DrawSubpathsSVG(); }//value: function(event) }, @@ -482,7 +492,9 @@ exports.PenTool = Montage.create(ShapeTool, { this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) } - NJevent("disableStageMove");//stageManagerModule.stageManager.disableMouseMove(); + if (!g_DoPenToolMouseMove){ + NJevent("disableStageMove"); + } } }, @@ -797,102 +809,10 @@ exports.PenTool = Montage.create(ShapeTool, { throw ("null drawing context in Pentool::DrawSubpathSVG"); ctx.save(); - var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; - var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; - - - if (this._showGuides) { - var leftOffsetSamples = subpath.getLeftOffsetPoints(); - var rightOffsetSamples = subpath.getRightOffsetPoints(); - /* - //display the subpath samples as a sequence of circles - ctx.lineWidth = 2; - ctx.fillStyle = "pink"; - ctx.strokeStyle = "black"; - for (var i = 0; i < samples.length; i += 3) { - ctx.beginPath(); - ctx.arc(samples[i], samples[i + 1], this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); - ctx.fill(); - ctx.stroke(); - } - */ - - /* - //display circles near all offset sample points - ctx.fillStyle = "#44FF44"; - ctx.lineWidth = 2; - ctx.strokeStyle = "black"; - for (var i = 0; i < leftOffsetSamples.length; i++) { - var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset; - var py = leftOffsetSamples[i].Pos[1]+ verticalOffset; - ctx.beginPath(); - ctx.arc(px, py, this._DISPLAY_ANCHOR_RADIUS * 0.75, 0, 2 * Math.PI, false); - ctx.fill(); - ctx.stroke(); - } - */ - - /* - //display mapping of subpath samples to offset samples - - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < leftOffsetSamples.length; i++) { - var px = leftOffsetSamples[i].Pos[0]+ horizontalOffset; - var py = leftOffsetSamples[i].Pos[1]+ verticalOffset; - var ox = leftOffsetSamples[i].CurveMapPos[0] + horizontalOffset; - var oy = leftOffsetSamples[i].CurveMapPos[1] + verticalOffset; - - ctx.moveTo(px, py); - ctx.lineTo(ox,oy); - } - ctx.stroke(); - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < rightOffsetSamples.length; i++) { - var px = rightOffsetSamples[i].Pos[0]+ horizontalOffset; - var py = rightOffsetSamples[i].Pos[1]+ verticalOffset; - var ox = rightOffsetSamples[i].CurveMapPos[0] + horizontalOffset; - var oy = rightOffsetSamples[i].CurveMapPos[1] + verticalOffset; - - ctx.moveTo(px, py); - ctx.lineTo(ox,oy); - } - ctx.stroke(); - */ - - /* - //display triangles generated - var leftOffsetTriangles = subpath.getLeftOffsetTriangles(); - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < leftOffsetTriangles.length; i++) { - ctx.moveTo(leftOffsetTriangles[i].v0[0] + horizontalOffset, leftOffsetTriangles[i].v0[1] + verticalOffset); - ctx.lineTo(leftOffsetTriangles[i].v1[0] + horizontalOffset, leftOffsetTriangles[i].v1[1] + verticalOffset); - ctx.lineTo(leftOffsetTriangles[i].v2[0] + horizontalOffset, leftOffsetTriangles[i].v2[1] + verticalOffset); - } - ctx.stroke(); - - var rightOffsetTriangles = subpath.getRightOffsetTriangles(); - ctx.strokeStyle = "black"; - ctx.lineWidth = 1; - ctx.beginPath(); - for (var i = 0; i < rightOffsetTriangles.length; i++) { - ctx.moveTo(rightOffsetTriangles[i].v0[0] + horizontalOffset, rightOffsetTriangles[i].v0[1] + verticalOffset); - ctx.lineTo(rightOffsetTriangles[i].v1[0] + horizontalOffset, rightOffsetTriangles[i].v1[1] + verticalOffset); - ctx.lineTo(rightOffsetTriangles[i].v2[0] + horizontalOffset, rightOffsetTriangles[i].v2[1] + verticalOffset); - } - ctx.stroke(); - */ - } //if this._showGuides - - - + var horizontalOffset = this.application.ninja.stage.userContentLeft; + var verticalOffset = this.application.ninja.stage.userContentTop; //display the subpath as a sequence of cubic beziers - ctx.lineWidth = 1;//subpath.getStrokeWidth(); //TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) + ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) if (ctx.lineWidth == subpath.getStrokeWidth()) ctx.lineWidth = 3; ctx.strokeStyle = "black"; @@ -944,55 +864,29 @@ exports.PenTool = Montage.create(ShapeTool, { var horizontalOffset = this.application.ninja.stage.userContentLeft;//stageManagerModule.stageManager.userContentLeft; var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; - /* - //display the sampled left offset of subpath as a sequence of line segments - var leftOffsetSamples = subpath.getLeftOffsetPoints(); - if (leftOffsetSamples.length) { - ctx.strokeStyle = "blue"; - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.moveTo(leftOffsetSamples[0].Pos[0] + horizontalOffset, leftOffsetSamples[0].Pos[1] + verticalOffset); - for (var i = 0; i < leftOffsetSamples.length; i++) { - ctx.lineTo(leftOffsetSamples[i].Pos[0] + horizontalOffset, leftOffsetSamples[i].Pos[1] + verticalOffset); - } - ctx.stroke(); - } - - - //display the sampled right offset of subpath as a sequence of line segments - var rightOffsetSamples = subpath.getRightOffsetPoints(); - if (rightOffsetSamples.length) { - ctx.strokeStyle = "red"; - ctx.lineWidth = 1; - ctx.beginPath(); - ctx.moveTo(rightOffsetSamples[0].Pos[0] + horizontalOffset, rightOffsetSamples[0].Pos[1] + verticalOffset); - for (var i = 0; i < rightOffsetSamples.length; i++) { - ctx.lineTo(rightOffsetSamples[i].Pos[0] + horizontalOffset, rightOffsetSamples[i].Pos[1] + verticalOffset); - } - ctx.stroke(); - } - */ - //display circles and squares near all control points ctx.fillStyle = "#FF4444"; ctx.lineWidth = 2; ctx.strokeStyle = "black"; for (var i = 0; i < numAnchors; i++) { - //display the anchor point with its prev. and next var px = subpath.getAnchor(i).getPosX(); var py = subpath.getAnchor(i).getPosY(); - var prevx = subpath.getAnchor(i).getPrevX(); - var prevy = subpath.getAnchor(i).getPrevY(); - var nextx = subpath.getAnchor(i).getNextX(); - var nexty = subpath.getAnchor(i).getNextY(); - - //anchor point ctx.beginPath(); ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); ctx.fill(); ctx.stroke(); } - + + //display the hovered over anchor point + ctx.lineWidth = 2; + ctx.strokeStyle = "black"; + if (this._hoveredAnchorIndex>=0) { + var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX(); + var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY(); + ctx.beginPath(); + ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); + ctx.stroke(); + } //display selected anchor and its prev. and next points if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) { @@ -1136,8 +1030,15 @@ exports.PenTool = Montage.create(ShapeTool, { } } this._isPickedEndPointInSelectPathMode = false; //only applies to the ENTRY_SELECT_PATH mode - } + + if (g_DoPenToolMouseMove){ + NJevent("enableStageMove"); + } + } //if the pen tool was selected else { + if (g_DoPenToolMouseMove){ + NJevent("disableStageMove"); + } this._selectedSubpath = null; this._penCanvas = null; this._penPlaneMat = null; @@ -1147,7 +1048,7 @@ exports.PenTool = Montage.create(ShapeTool, { //ElementMediator.deleteDelegate = ""; this.application.ninja.elementMediator.deleteDelegate = null; //this._entryEditMode = this.ENTRY_SELECT_NONE; - } + } //if the pen tool was de-selected } }, -- cgit v1.2.3