From 7cbd26d475eaad817042692f9116f9a24ae60997 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 28 Feb 2012 10:24:06 -0800 Subject: Bug fixes: 1152: allow deleting of multiple paths from inside pen tool 1128: keyboard hotkey shortcut 'P' for pen tool 941: changing width or height of the path scales the path --- js/tools/PenTool.js | 77 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 54 insertions(+), 23 deletions(-) (limited to 'js/tools/PenTool.js') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 7749d525..bb9c71e7 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -955,33 +955,64 @@ exports.PenTool = Montage.create(ShapeTool, { handleDelete:{ value: function(event){ - //clear the selected subpath...the only new additions to this function w.r.t. ToolBase - if (this._selectedSubpath){ - if (this._selectedSubpath.getSelectedAnchorIndex()>=0){ - this._hoveredAnchorIndex=-1; - this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); - this._selectedSubpath.createSamples(); - //clear the canvas - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - this.DrawSubpathAnchors(this._selectedSubpath); - this.ShowSelectedSubpath(); + var len = this.application.ninja.selectedElements.length; + if (len===0) { + //clear the selected subpath...the only new additions to this function w.r.t. ToolBase + if (this._selectedSubpath){ + if (this._selectedSubpath.getSelectedAnchorIndex()>=0){ + this._hoveredAnchorIndex=-1; + this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); + this._selectedSubpath.createSamples(); + //clear the canvas + this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); + this.DrawSubpathAnchors(this._selectedSubpath); + this.ShowSelectedSubpath(); + } + else { + this._selectedSubpath.clearAllAnchors(); //perhaps unnecessary + this._selectedSubpath = null; + //clear the canvas + this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); + + //undo/redo...go through ElementController and NJEvent + var els = []; + ElementController.removeElement(this._penCanvas); + els.push(this._penCanvas); + NJevent( "deleteSelection", els ); + this._penCanvas = null; + } + } + //do nothing if there was no selected subpath and if there was no selection + } + else { + + //undo/redo...go through ElementMediator (see ElementMediator.handleDeleting() from where the much of this function is copied) + //clear the canvas + this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); + var els = []; + for(var i = 0; i<len; i++) { + els.push(this.application.ninja.selectedElements[i]); } - else { - this._selectedSubpath.clearAllAnchors(); //perhaps unnecessary - this._selectedSubpath = null; - //clear the canvas - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - - //undo/redo...go through ElementController and NJEvent - var els = []; - ElementController.removeElement(this._penCanvas); - els.push(this._penCanvas); - NJevent( "deleteSelection", els ); - this._penCanvas = null; + for(i=0; i<len; i++) { + ElementController.removeElement(els[i]._element); } - } + NJevent( "deleteSelection", els ); + + //clear out the selected path if it exists + if (this._selectedSubpath) { + this._selectedSubpath.clearAllAnchors(); + this._selectedSubpath = null; + if (this._entryEditMode === this.ENTRY_SELECT_PATH){ + this._entryEditMode = this.ENTRY_SELECT_NONE; + } + this._penCanvas = null; + } + } + //redraw the stage to update it + this.application.ninja.stage.draw(); } }, + handleResetPenTool: { value: function (event) { this.Reset(); -- cgit v1.2.3 From e1a65d0c2a13e12ee53be98c731616e35aa07a41 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 28 Feb 2012 13:58:34 -0800 Subject: new anchor control guide rendering (smaller handles) and clamp min. width and height to 1 while resizing subpaths --- js/tools/PenTool.js | 83 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 61 insertions(+), 22 deletions(-) (limited to 'js/tools/PenTool.js') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index bb9c71e7..ddc8bc04 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -66,14 +66,14 @@ exports.PenTool = Montage.create(ShapeTool, { _penPlaneMat: { value: null, writable: true }, //index of the anchor point that the user has hovered over - _hoveredAnchorIndex: {value: null, writable: true}, + _hoveredAnchorIndex: {value: -1, 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 }, _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false }, - _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 5, writable: false }, - _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 5, writable: false }, + _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 2, writable: false }, + _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 2, writable: false }, //constants used for editing modes (can be OR-ed) EDIT_NONE: { value: 0, writable: false }, @@ -760,9 +760,7 @@ exports.PenTool = Montage.create(ShapeTool, { var verticalOffset = this.application.ninja.stage.userContentTop; //display the subpath as a sequence of cubic beziers 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"; + ctx.strokeStyle = "green"; //if (subpath.getStrokeColor()) // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); ctx.beginPath(); @@ -812,34 +810,53 @@ exports.PenTool = Montage.create(ShapeTool, { var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; //display circles and squares near all control points - ctx.fillStyle = "#FF4444"; - ctx.lineWidth = 2; - ctx.strokeStyle = "black"; + ctx.fillStyle = "#FFFFFF"; + ctx.lineWidth = 1; + ctx.strokeStyle = "green"; + var anchorDelta = 2; + var selAnchorDelta = 4; + for (var i = 0; i < numAnchors; i++) { var px = subpath.getAnchor(i).getPosX(); var py = subpath.getAnchor(i).getPosY(); ctx.beginPath(); - ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); + //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); + ctx.moveTo(px-anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset); + ctx.lineTo(px+anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset); + ctx.lineTo(px+anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset); + ctx.lineTo(px-anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset); + ctx.closePath(); ctx.fill(); ctx.stroke(); } //display the hovered over anchor point ctx.lineWidth = 2; - ctx.strokeStyle = "black"; - if (this._hoveredAnchorIndex && this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { + if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { 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.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); + ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); + ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); + ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); + ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); + ctx.closePath(); ctx.stroke(); } + //display selected anchor and its prev. and next points if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) { - ctx.lineWidth = 2; - ctx.strokeStyle = "black"; + ctx.lineWidth = 1; + var defFill = "#FFFFFF"; + var defStroke = "green"; + var selHandleFill = "#000000" + + ctx.strokeStyle = defStroke; + ctx.fillStyle = defFill; var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); + var whichPoint = this._selectedSubpath.getSelectedMode(); //which of the selected handles to highlight //line from prev to anchor ctx.beginPath(); @@ -848,10 +865,16 @@ exports.PenTool = Montage.create(ShapeTool, { ctx.stroke(); //selected anchor prev - ctx.fillStyle = "#AAAAAA"; ctx.beginPath(); ctx.arc(selAnchor.getPrevX() + horizontalOffset, selAnchor.getPrevY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_PREV_RADIUS, 0, 2 * Math.PI, false); - ctx.fill(); + ctx.closePath(); + if (whichPoint & this._selectedSubpath.SEL_PREV){ + ctx.fillStyle = selHandleFill; + ctx.fill(); + ctx.fillStyle = defFill; + }else { + ctx.fill(); + } ctx.stroke(); //line from next to anchor @@ -861,16 +884,27 @@ exports.PenTool = Montage.create(ShapeTool, { ctx.stroke(); //selected anchor next - ctx.fillStyle = "#666666"; ctx.beginPath(); ctx.arc(selAnchor.getNextX() + horizontalOffset, selAnchor.getNextY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS, 0, 2 * Math.PI, false); - ctx.fill(); + if (whichPoint & this._selectedSubpath.SEL_NEXT){ + ctx.fillStyle = selHandleFill; + ctx.fill(); + ctx.fillStyle = defFill; + }else { + ctx.fill(); + } ctx.stroke(); //selected anchor point - ctx.fillStyle = "#8ED6FF"; + var px = selAnchor.getPosX(); + var py = selAnchor.getPosY(); ctx.beginPath(); - ctx.arc(selAnchor.getPosX() + horizontalOffset, selAnchor.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS, 0, 2 * Math.PI, false); + //ctx.arc(selAnchor.getPosX() + horizontalOffset, selAnchor.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS, 0, 2 * Math.PI, false); + ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); + ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); + ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); + ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); + ctx.closePath(); ctx.fill(); ctx.stroke(); @@ -879,7 +913,12 @@ exports.PenTool = Montage.create(ShapeTool, { ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.beginPath(); - ctx.arc(this._snapTarget.getPosX() + horizontalOffset, this._snapTarget.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS * 2, 0, 2 * Math.PI, false); + //ctx.arc(this._snapTarget.getPosX() + horizontalOffset, this._snapTarget.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS * 2, 0, 2 * Math.PI, false); + ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); + ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); + ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); + ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); + ctx.closePath(); ctx.stroke(); } } //if this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1 -- cgit v1.2.3