diff options
Diffstat (limited to 'js/tools')
-rw-r--r-- | js/tools/BrushTool.js | 8 | ||||
-rwxr-xr-x | js/tools/PenTool.js | 257 |
2 files changed, 201 insertions, 64 deletions
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 5c334b92..5d4e8288 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -225,9 +225,11 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
225 | this._hasDraw = false; | 225 | this._hasDraw = false; |
226 | 226 | ||
227 | //finish giving enough info. to the brush stroke | 227 | //finish giving enough info. to the brush stroke |
228 | this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat); | 228 | if (this._selectedBrushStroke){ |
229 | this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[])); | 229 | this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat); |
230 | this._selectedBrushStroke.setDragPlane(this._draggingPlane); | 230 | this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[])); |
231 | this._selectedBrushStroke.setDragPlane(this._draggingPlane); | ||
232 | } | ||
231 | 233 | ||
232 | //display the previously drawn stroke in a separate canvas | 234 | //display the previously drawn stroke in a separate canvas |
233 | this.RenderCurrentBrushStroke(); | 235 | this.RenderCurrentBrushStroke(); |
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 16990ca7..d5cf6439 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -33,10 +33,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
33 | _parentNode: { enumerable: false, value: null, writable: true }, | 33 | _parentNode: { enumerable: false, value: null, writable: true }, |
34 | _toolsPropertiesContainer: { enumerable: false, value: null, writable: true }, | 34 | _toolsPropertiesContainer: { enumerable: false, value: null, writable: true }, |
35 | 35 | ||
36 | //set this to true if you want to keep making subpaths after closing current subpath (debugging only) | 36 | //set this to true if you want to keep making subpaths after closing current subpath (debugging only...should always be true) |
37 | _makeMultipleSubpaths: { value: true, writable: true }, | 37 | _makeMultipleSubpaths: { value: true, writable: true }, |
38 | 38 | ||
39 | //set this to false if you don't want the mouse move handler being called when the mouse is not down (debugging only) | 39 | //set this to false if you don't want the mouse move handler being called when the mouse is not down (debugging only...should always be true) |
40 | _trackMouseMoveWhenUp: {value: true, writable: false}, | 40 | _trackMouseMoveWhenUp: {value: true, writable: false}, |
41 | 41 | ||
42 | //whether the user has held down the Alt key | 42 | //whether the user has held down the Alt key |
@@ -95,6 +95,12 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
95 | ENTRY_SELECT_PATH: { value: 2, writable: false}, | 95 | ENTRY_SELECT_PATH: { value: 2, writable: false}, |
96 | _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, | 96 | _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true}, |
97 | 97 | ||
98 | //constants used for determining whether a subtool has been selected (mutually exclusive i.e. cannot be OR-ed) | ||
99 | SUBTOOL_NONE: {value: 0, writable: false}, | ||
100 | SUBTOOL_PENPLUS: {value: 1, writable: false}, | ||
101 | SUBTOOL_PENMINUS: {value: 2, writable: false}, | ||
102 | _subtool: {value: this.SUBTOOL_NONE, writable: true}, | ||
103 | |||
98 | //constants used for limiting size of the subpath canvas | 104 | //constants used for limiting size of the subpath canvas |
99 | _MAX_CANVAS_DIMENSION: {value: 3000, writable: false}, | 105 | _MAX_CANVAS_DIMENSION: {value: 3000, writable: false}, |
100 | 106 | ||
@@ -179,6 +185,57 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
179 | } | 185 | } |
180 | }, | 186 | }, |
181 | 187 | ||
188 | _removeSelectedSubpathAndCanvas:{ | ||
189 | value: function(removeSelectedSubpath, removeSelectedSubpathCanvas){ | ||
190 | if (removeSelectedSubpathCanvas) { | ||
191 | if (removeSelectedSubpath){ | ||
192 | this._selectedSubpath.clearAllAnchors(); //perhaps unnecessary | ||
193 | this._selectedSubpath = null; | ||
194 | if (this._entryEditMode === this.ENTRY_SELECT_PATH){ | ||
195 | this._entryEditMode = this.ENTRY_SELECT_NONE; | ||
196 | } | ||
197 | this._subtool = this.SUBTOOL_NONE; | ||
198 | } | ||
199 | //clear the canvas | ||
200 | this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); | ||
201 | |||
202 | //undo/redo...go through ElementController and NJEvent | ||
203 | var els = []; | ||
204 | ElementController.removeElement(this._selectedSubpathCanvas); | ||
205 | els.push(this._selectedSubpathCanvas); | ||
206 | NJevent( "elementsRemoved", els ); | ||
207 | this._selectedSubpathCanvas = null; | ||
208 | } | ||
209 | } | ||
210 | }, | ||
211 | |||
212 | _removeSelectedAnchorPoint:{ | ||
213 | value: function(){ | ||
214 | this._hoveredAnchorIndex=-1; | ||
215 | this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | ||
216 | this._selectedSubpath.createSamples(false); | ||
217 | //clear the canvas | ||
218 | this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); | ||
219 | this.PrepareSelectedSubpathForRendering(); | ||
220 | this.DrawSubpathAnchors(this._selectedSubpath); | ||
221 | var removeSelectedSubpath=true; | ||
222 | var removeSelectedSubpathCanvas=false; | ||
223 | var newNumAnchors = this._selectedSubpath.getNumAnchors(); | ||
224 | if (newNumAnchors>1) { | ||
225 | this.ShowSelectedSubpath(); | ||
226 | } | ||
227 | else { | ||
228 | if (newNumAnchors===0){ | ||
229 | removeSelectedSubpath = true; | ||
230 | } else{ | ||
231 | removeSelectedSubpath = false; //don't remove the selected subpath if there is still one anchor | ||
232 | } | ||
233 | removeSelectedSubpathCanvas = true; | ||
234 | } | ||
235 | this._removeSelectedSubpathAndCanvas(removeSelectedSubpath, removeSelectedSubpathCanvas); | ||
236 | } | ||
237 | }, | ||
238 | |||
182 | // ********************************************************************************************************** | 239 | // ********************************************************************************************************** |
183 | // Mouse down handler | 240 | // Mouse down handler |
184 | // IF the selected subpath is null, it means we're going to start a new subpath | 241 | // IF the selected subpath is null, it means we're going to start a new subpath |
@@ -220,6 +277,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
220 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH && this._selectedSubpath && this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) { | 277 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH && this._selectedSubpath && this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) { |
221 | this._selectedSubpath = null; | 278 | this._selectedSubpath = null; |
222 | } | 279 | } |
280 | |||
281 | if (this._subtool !== this.SUBTOOL_NONE && this._selectedSubpath===null) { | ||
282 | //do nothing because the pen plus and pen minus subtools need a selected subpath | ||
283 | return; | ||
284 | } | ||
223 | if (this._selectedSubpath === null) { | 285 | if (this._selectedSubpath === null) { |
224 | this._selectedSubpath = new SubPath(); | 286 | this._selectedSubpath = new SubPath(); |
225 | this._selectedSubpathCanvas = null; | 287 | this._selectedSubpathCanvas = null; |
@@ -255,7 +317,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
255 | colorArray = [1,1,1,0]; | 317 | colorArray = [1,1,1,0]; |
256 | } | 318 | } |
257 | this._selectedSubpath.setFillColor(colorArray); | 319 | this._selectedSubpath.setFillColor(colorArray); |
258 | } | 320 | } //if the selectedSubpath was null and needed to be constructed |
259 | 321 | ||
260 | //build the hit record for the current mouse position (on the stage or the plane of the path canvas) | 322 | //build the hit record for the current mouse position (on the stage or the plane of the path canvas) |
261 | var hitRec = this.getHitRecord(event.pageX, event.pageY, false); | 323 | var hitRec = this.getHitRecord(event.pageX, event.pageY, false); |
@@ -273,14 +335,36 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
273 | var swMousePos = hitRec.calculateStageWorldPoint(); | 335 | var swMousePos = hitRec.calculateStageWorldPoint(); |
274 | swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5; | 336 | swMousePos[0]+= snapManager.getStageWidth()*0.5; swMousePos[1]+= snapManager.getStageHeight()*0.5; |
275 | 337 | ||
276 | this._selectedSubpath.addAnchor(new AnchorPoint()); | 338 | //check if the mouse click location is close to the existing anchor |
277 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 339 | var indexAndCode = this._selectedSubpath.pickAnchor(swMousePos[0], swMousePos[1], swMousePos[2], this._PICK_POINT_RADIUS); |
278 | newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 340 | if (indexAndCode[0]>=0){ |
279 | newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 341 | //the anchor point was hit, so we do not add another anchor |
280 | newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); | 342 | switch(indexAndCode[1]){ |
281 | //set the mode so that dragging will update the next and previous locations | 343 | case this._selectedSubpath.SEL_ANCHOR: |
282 | this._editMode = this.EDIT_PREV_NEXT; | 344 | this._editMode = this.EDIT_ANCHOR; |
283 | } | 345 | break; |
346 | case this._selectedSubpath.SEL_PREV: | ||
347 | this._editMode = this.EDIT_PREV; | ||
348 | break; | ||
349 | case this._selectedSubpath.SEL_NEXT: | ||
350 | this._editMode = this.EDIT_NEXT; | ||
351 | break; | ||
352 | default: | ||
353 | this._editMode = this.EDIT_ANCHOR; | ||
354 | console.log("WARNING picked anchor point with incorrect mode"); | ||
355 | break; | ||
356 | } | ||
357 | |||
358 | } else { | ||
359 | this._selectedSubpath.addAnchor(new AnchorPoint()); | ||
360 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | ||
361 | newAnchor.setPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
362 | newAnchor.setPrevPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
363 | newAnchor.setNextPos(swMousePos[0], swMousePos[1], swMousePos[2]); | ||
364 | //set the mode so that dragging will update the next and previous locations | ||
365 | this._editMode = this.EDIT_PREV_NEXT; | ||
366 | } | ||
367 | } //if we have not yet created a canvas for this path | ||
284 | 368 | ||
285 | //the selected subpath has a canvas, so test within that canvas' space | 369 | //the selected subpath has a canvas, so test within that canvas' space |
286 | else | 370 | else |
@@ -311,6 +395,11 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
311 | if (whichPoint !== this._selectedSubpath.SEL_NONE){ | 395 | if (whichPoint !== this._selectedSubpath.SEL_NONE){ |
312 | //if we hit the anchor point itself | 396 | //if we hit the anchor point itself |
313 | if (whichPoint & this._selectedSubpath.SEL_ANCHOR) { | 397 | if (whichPoint & this._selectedSubpath.SEL_ANCHOR) { |
398 | if (this._subtool===this.SUBTOOL_PENMINUS){ | ||
399 | //remove the selected anchor, similar to HandleDelete | ||
400 | this._removeSelectedAnchorPoint(); | ||
401 | return; | ||
402 | } | ||
314 | //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint | 403 | //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint |
315 | if (this._entryEditMode === this.ENTRY_SELECT_PATH && this._isPickedEndPointInSelectPathMode === false){ | 404 | if (this._entryEditMode === this.ENTRY_SELECT_PATH && this._isPickedEndPointInSelectPathMode === false){ |
316 | var selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | 405 | var selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); |
@@ -416,6 +505,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
416 | "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default"; | 505 | "url('images/cursors/penCursors/Pen_newPath.png') 5 1, default"; |
417 | } | 506 | } |
418 | 507 | ||
508 | |||
419 | if (!this._selectedSubpath ){ | 509 | if (!this._selectedSubpath ){ |
420 | return; //nothing to do in case no subpath is selected | 510 | return; //nothing to do in case no subpath is selected |
421 | } | 511 | } |
@@ -454,19 +544,18 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
454 | else if (this._editMode & this.EDIT_PREV) { | 544 | else if (this._editMode & this.EDIT_PREV) { |
455 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[0]); | 545 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[0]); |
456 | selAnchor.translatePrev(localTranslation[0], localTranslation[1], localTranslation[2]); | 546 | selAnchor.translatePrev(localTranslation[0], localTranslation[1], localTranslation[2]); |
457 | 547 | if (!this._isAltDown){ | |
458 | //move the next point if Alt key is down to ensure relative angle between prev and next | 548 | //selAnchor.translateNextFromPrev(localTranslation[0], localTranslation[1], localTranslation[2]); |
459 | if (this._isAltDown) { | 549 | selAnchor.setNextFromPrev(); |
460 | selAnchor.translateNextFromPrev(localTranslation[0], localTranslation[1], localTranslation[2]); | ||
461 | } | 550 | } |
462 | } | 551 | } |
463 | else if (this._editMode & this.EDIT_NEXT) { | 552 | else if (this._editMode & this.EDIT_NEXT) { |
464 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[2]); | 553 | localTranslation = VecUtils.vecSubtract(3, localMousePos, selAnchorPos[2]); |
465 | selAnchor.translateNext(localTranslation[0], localTranslation[1], localTranslation[2]); | ||
466 | |||
467 |