diff options
author | Pushkar Joshi | 2012-02-08 15:39:47 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-02-08 15:39:47 -0800 |
commit | 802e92eb70b00849dadacf2c6590d27edbe65d99 (patch) | |
tree | 5ecc1e6eef0bb69820af500595fa22f6a68debaf /js/tools | |
parent | 9b6b228524f14bf65ba60aaf3d0993c8ec5bff2d (diff) | |
download | ninja-802e92eb70b00849dadacf2c6590d27edbe65d99.tar.gz |
bug fixes for better anchor point rotation and removing snapping on hover and mouse down
Diffstat (limited to 'js/tools')
-rw-r--r-- | js/tools/PenTool.js | 182 |
1 files changed, 46 insertions, 136 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 5b48d3c9..9a69b53d 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -37,7 +37,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
37 | _currentY: { value: 0, writable: true }, | 37 | _currentY: { value: 0, writable: true }, |
38 | 38 | ||
39 | //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited | 39 | //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited |
40 | _subpaths: { value: [], writable: true }, | ||
41 | _selectedSubpath: { value: null, writable: true }, | 40 | _selectedSubpath: { value: null, writable: true }, |
42 | _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath | 41 | _makeMultipleSubpaths: { value: true, writable: true }, //set this to true if you want to keep making subpaths after closing current subpath |
43 | 42 | ||
@@ -90,39 +89,29 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
90 | ENTRY_SELECT_PATH: { value: 2, writable: false}, | 89 | ENTRY_SELECT_PATH: { value: 2, writable: false}, |
91 | _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, | 90 | _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, |
92 | 91 | ||
93 | // ******** Logic for selection ******* | ||
94 | // (update if you change functionality!) | ||
95 | // NOTE: this is out of date...needs to be updated | ||
96 | // | ||
97 | // Start by setting edit mode to EDIT_NONE | ||
98 | // | ||
99 | // DOUBLE_CLICK (Left mouse button only): | ||
100 | // | ||
101 | // | ||
102 | // SINGLE_CLICK (Left mouse button only): | ||
103 | // If LeftClick selects an anchor point | ||
104 | // append EDIT_ANCHOR mode | ||
105 | // If LeftClick selects a previous point of selected anchor | ||
106 | // append EDIT_PREV mode | ||
107 | // If LeftClick selects a next point of selected anchor | ||
108 | // append EDIT_NEXT mode | ||
109 | // | ||
110 | |||
111 | // ********* Logic for editing ******* | ||
112 | // (update if you change functionality!) | ||
113 | // NOTE: this is out of date...needs to be updated | ||
114 | // | ||
115 | // Start by computing mouse disp | ||
116 | // | ||
117 | // If EDIT_PREV_NEXT mode | ||
118 | // add disp to next and mirror it to prev | ||
119 | // ELSE | ||
120 | // If EDIT_ANCHOR (or _PREV, _NEXT) | ||
121 | // map displacement to anchor (similarly to prev and next) | ||
122 | // | ||
123 | // | ||
124 | 92 | ||
125 | 93 | ||
94 | _getUnsnappedPosition: { | ||
95 | value: function(x,y){ | ||
96 | var elemSnap = snapManager.elementSnapEnabled(); | ||
97 | var gridSnap = snapManager.gridSnapEnabled(); | ||
98 | var alignSnap = snapManager.snapAlignEnabled(); | ||
99 | |||
100 | snapManager.enableElementSnap(false); | ||
101 | snapManager.enableGridSnap(false); | ||
102 | snapManager.enableSnapAlign(false); | ||
103 | |||
104 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | ||
105 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | ||
106 | |||
107 | snapManager.enableElementSnap(elemSnap); | ||
108 | snapManager.enableGridSnap(gridSnap); | ||
109 | snapManager.enableSnapAlign(alignSnap); | ||
110 | |||
111 | return unsnappedpos; | ||
112 | } | ||
113 | }, | ||
114 | |||
126 | ShowToolProperties: { | 115 | ShowToolProperties: { |
127 | value: function () { | 116 | value: function () { |
128 | this._penView = PenView.create(); | 117 | this._penView = PenView.create(); |
@@ -153,7 +142,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
153 | this._isNewPath = false; | 142 | this._isNewPath = false; |
154 | 143 | ||
155 | //add an anchor point by computing position of mouse down | 144 | //add an anchor point by computing position of mouse down |
156 | var mouseDownPos = this.getMouseDownPos(); | 145 | var mouseDownPos = this._getUnsnappedPosition(event.pageX, event.pageY); //this.getMouseDownPos(); |
157 | if (mouseDownPos) { | 146 | if (mouseDownPos) { |
158 | //if we had closed the selected subpath previously, or if we have not yet started anything, create a subpath | 147 | //if we had closed the selected subpath previously, or if we have not yet started anything, create a subpath |
159 | if (this._selectedSubpath === null) { | 148 | if (this._selectedSubpath === null) { |
@@ -162,19 +151,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
162 | if (this._entryEditMode === this.ENTRY_SELECT_PATH){ | 151 | if (this._entryEditMode === this.ENTRY_SELECT_PATH){ |
163 | //this should not happen, as ENTRY_SELECT_PATH implies there was a selected subpath | 152 | //this should not happen, as ENTRY_SELECT_PATH implies there was a selected subpath |
164 | this._entryEditMode = this.ENTRY_SELECT_NONE; | 153 | this._entryEditMode = this.ENTRY_SELECT_NONE; |
165 | } | 154 | console.log("Warning...PenTool handleMouseDown: changing from SELECT_PATH to SELECT_NONE"); |
166 | } else if (this._selectedSubpath.getIsClosed() && this._entryEditMode !== this.ENTRY_SELECT_PATH) { | ||
167 | //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path regardless of where we clicked | ||
168 | if (this._makeMultipleSubpaths) { | ||
169 | this._subpaths.push(this._selectedSubpath); | ||
170 | this._penCanvas = null; | ||
171 | this._penPlaneMat = null; | ||
172 | this._snapTarget = null; | ||
173 | this._selectedSubpath = new GLSubpath(); | ||
174 | this._isNewPath = true; | ||
175 | } | 155 | } |
176 | } | 156 | } |
177 | 157 | ||
178 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | 158 | var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); |
179 | // ************* Add/Select Anchor Point ************* | 159 | // ************* Add/Select Anchor Point ************* |
180 | //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else | 160 | //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else |
@@ -223,9 +203,19 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
223 | } | 203 | } |
224 | } | 204 | } |
225 | } | 205 | } |
226 | //else if (whichPoint === this._selectedSubpath.SEL_NONE) { | 206 | |
207 | //the clicked location is not close to the path or any anchor point | ||
227 | if (whichPoint === this._selectedSubpath.SEL_NONE) { | 208 | if (whichPoint === this._selectedSubpath.SEL_NONE) { |
228 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { | 209 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { |
210 | //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path if we clicked far away from selected path | ||
211 | if (this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) { | ||
212 | this._penCanvas = null; | ||
213 | this._penPlaneMat = null; | ||
214 | this._snapTarget = null; | ||
215 | this._selectedSubpath = new GLSubpath(); | ||
216 | this._isNewPath = true; | ||
217 | } | ||
218 | |||
229 | //add an anchor point to end of the subpath, and make it the selected anchor point | 219 | //add an anchor point to end of the subpath, and make it the selected anchor point |
230 | if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { | 220 | if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) { |
231 | this._selectedSubpath.addAnchor(new GLAnchorPoint()); | 221 | this._selectedSubpath.addAnchor(new GLAnchorPoint()); |
@@ -239,7 +229,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
239 | } | 229 | } |
240 | } else { | 230 | } else { |
241 | if (this._isPickedEndPointInSelectPathMode){ | 231 | if (this._isPickedEndPointInSelectPathMode){ |
242 | //if (0){ | ||
243 | //TODO clean up this code...very similar to the code block above | 232 | //TODO clean up this code...very similar to the code block above |
244 | if (!this._selectedSubpath.getIsClosed()) { | 233 | if (!this._selectedSubpath.getIsClosed()) { |
245 | this._selectedSubpath.addAnchor(new GLAnchorPoint()); | 234 | this._selectedSubpath.addAnchor(new GLAnchorPoint()); |
@@ -252,14 +241,12 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
252 | this._editMode = this.EDIT_PREV_NEXT; | 241 | this._editMode = this.EDIT_PREV_NEXT; |
253 | } | 242 | } |
254 | } | 243 | } |
255 | //if the edit mode was ENTRY_SELECT_PATH and no anchor point was selected, so we should de-select this path and revert to ENTRY_SELECT_NONE | ||
256 | //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path | ||
257 | } | 244 | } |
258 | } //if (whichPoint === this._selectedSubpath.SEL_NONE) (i.e. no anchor point was selected) | 245 | } //if (whichPoint === this._selectedSubpath.SEL_NONE) (i.e. no anchor point was selected) |
259 | 246 | ||
260 | //display the curve overlay | 247 | //display the curve overlay |
261 | this.DrawSubpathAnchors(this._selectedSubpath); | 248 | this.DrawSubpathAnchors(this._selectedSubpath); |
262 | this.DrawSubpathsSVG(); | 249 | this.DrawSubpathSVG(this._selectedSubpath); |
263 | } //if (mouseDownPos) { i.e. if mouse down yielded a valid position | 250 | } //if (mouseDownPos) { i.e. if mouse down yielded a valid position |
264 | 251 | ||
265 | 252 | ||
@@ -289,7 +276,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
289 | this._hoveredAnchorIndex = -1; | 276 | this._hoveredAnchorIndex = -1; |
290 | 277 | ||
291 | if (this._isDrawing) { | 278 | if (this._isDrawing) { |
292 | this.application.ninja.stage.clearDrawingCanvas(); | ||
293 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | 279 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); |
294 | //go through the drawing toolbase to get the position of the mouse | 280 | //go through the drawing toolbase to get the position of the mouse |
295 | var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); | 281 | var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec)); |
@@ -347,14 +333,14 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
347 | 333 | ||
348 | //make the subpath dirty so it will get re-drawn | 334 | //make the subpath dirty so it will get re-drawn |
349 | this._selectedSubpath.makeDirty(); | 335 | this._selectedSubpath.makeDirty(); |
350 | this.DrawSubpathsSVG(); | 336 | this.DrawSubpathSVG(this._selectedSubpath); |
351 | } | 337 | } |
352 | 338 | ||
353 | } else { //if mouse is not down: | 339 | } else { //if mouse is not down: |
354 | //this.doSnap(event); | 340 | //this.doSnap(event); |
355 | //this.DrawHandles(); | 341 | //this.DrawHandles(); |
356 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | 342 | |
357 | var currMousePos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | 343 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); |
358 | if (currMousePos && this._selectedSubpath ){ | 344 | if (currMousePos && this._selectedSubpath ){ |
359 | var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); | 345 | var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS); |
360 | if (selAnchor >=0) { | 346 | if (selAnchor >=0) { |
@@ -371,7 +357,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
371 | }//value: function(event) | 357 | }//value: function(event) |
372 | },//HandleMouseMove | 358 | },//HandleMouseMove |
373 | 359 | ||
374 | //TODO Optimize! This function is probably no longer needed | 360 | |
375 | TranslateSelectedSubpathPerPenCanvas:{ | 361 | TranslateSelectedSubpathPerPenCanvas:{ |
376 | value: function() { | 362 | value: function() { |
377 | if (this._penCanvas!==null) { | 363 | if (this._penCanvas!==null) { |
@@ -491,9 +477,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
491 | this._editMode = this.EDIT_NONE; | 477 | this._editMode = this.EDIT_NONE; |
492 | 478 | ||
493 | this.DrawHandles(); | 479 | this.DrawHandles(); |
494 | if (this._entryEditMode === this.ENTRY_SELECT_PATH || !this._selectedSubpath.getIsClosed()){ | 480 | //if (this._entryEditMode === this.ENTRY_SELECT_PATH || !this._selectedSubpath.getIsClosed()){ |
481 | if (this._selectedSubpath){ | ||
495 | this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) | 482 | this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL) |
496 | } | 483 | } |
484 | //} | ||
497 | 485 | ||
498 | if (!g_DoPenToolMouseMove){ | 486 | if (!g_DoPenToolMouseMove){ |
499 | NJevent(" |