diff options
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r-- | js/tools/PenTool.js | 358 |
1 files changed, 114 insertions, 244 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 78344d18..cb2ea85a 100644 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js | |||
@@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | var ShapeTool = require("js/tools/ShapeTool").ShapeTool; | 7 | var ShapeTool = require("js/tools/ShapeTool").ShapeTool; |
8 | var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController; | ||
8 | var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; | 9 | var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; |
9 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; | 10 | var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; |
10 | var Montage = require("montage/core/core").Montage; | 11 | var Montage = require("montage/core/core").Montage; |
@@ -12,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils; | |||
12 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; | 13 | var ElementMediator = require("js/mediators/element-mediator").ElementMediator; |
13 | var TagTool = require("js/tools/TagTool").TagTool; | 14 | var TagTool = require("js/tools/TagTool").TagTool; |
14 | var ElementController = require("js/controllers/elements/element-controller").ElementController; | 15 | var ElementController = require("js/controllers/elements/element-controller").ElementController; |
16 | var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; | ||
17 | |||
18 | //todo remove this global var | ||
19 | var g_DoPenToolMouseMove = true; | ||
15 | 20 | ||
16 | exports.PenTool = Montage.create(ShapeTool, { | 21 | exports.PenTool = Montage.create(ShapeTool, { |
17 | 22 | ||
@@ -37,9 +42,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
37 | _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 |
38 | 43 | ||
39 | 44 | ||
40 | //whether or not to display the guides for debugging | ||
41 | _showGuides: { value: true, writable: true }, | ||
42 | |||
43 | //whether the user has held down the Alt key | 45 | //whether the user has held down the Alt key |
44 | _isAltDown: { value: false, writable: true }, | 46 | _isAltDown: { value: false, writable: true }, |
45 | 47 | ||
@@ -64,6 +66,9 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
64 | //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 |
65 | _penPlaneMat: { value: null, writable: true }, | 67 | _penPlaneMat: { value: null, writable: true }, |
66 | 68 | ||
69 | //index of the anchor point that the user has hovered over | ||
70 | _hoveredAnchorIndex: {value: null, writable: true}, | ||
71 | |||
67 | //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 |
68 | _PICK_POINT_RADIUS: { value: 10, writable: false }, | 73 | _PICK_POINT_RADIUS: { value: 10, writable: false }, |
69 | _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, | 74 | _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, |
@@ -187,6 +192,8 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
187 | //we have picked the endpoint of this path...reverse the path if necessary | 192 | //we have picked the endpoint of this path...reverse the path if necessary |
188 | if (selAnchorIndex ===0){ | 193 | if (selAnchorIndex ===0){ |
189 | //reverse this path | 194 | //reverse this path |
195 | this._selectedSubpath.reversePath(); | ||
196 | selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | ||
190 | } | 197 | } |
191 | this._isPickedEndPointInSelectPathMode = true; | 198 | this._isPickedEndPointInSelectPathMode = true; |
192 | } | 199 | } |
@@ -219,6 +226,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
219 | } | 226 | } |
220 | } | 227 | } |
221 | } | 228 | } |
229 | //else if (whichPoint === this._selectedSubpath.SEL_NONE) { | ||
222 | if (whichPoint === this._selectedSubpath.SEL_NONE) { | 230 | if (whichPoint === this._selectedSubpath.SEL_NONE) { |
223 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { | 231 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { |
224 | //add an anchor point to end of the subpath, and make it the selected anchor point | 232 | //add an anchor point to end of the subpath, and make it the selected anchor point |
@@ -234,7 +242,18 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
234 | } | 242 | } |
235 | } else { | 243 | } else { |
236 | if (this._isPickedEndPointInSelectPathMode){ | 244 | if (this._isPickedEndPointInSelectPathMode){ |
237 | 245 | //if (0){ | |
246 | //TODO clean up this code...very similar to the code block above | ||
247 | if (!this._selectedSubpath.getIsClosed()) { | ||
248 | this._selectedSubpath.addAnchor(new GLAnchorPoint()); | ||
249 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | ||
250 | newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); | ||
251 | newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); | ||
252 | newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); | ||
253 | |||
254 | //set the mode so that dragging will update the next and previous locations | ||
255 | this._editMode = this.EDIT_PREV_NEXT; | ||
256 | } | ||
238 | } | 257 | } |
239 | //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 | 258 | //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 |
240 | //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path | 259 | //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path |
@@ -247,7 +266,9 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
247 | } //if (mouseDownPos) { i.e. if mouse down yielded a valid position | 266 | } //if (mouseDownPos) { i.e. if mouse down yielded a valid position |
248 | 267 | ||
249 | 268 | ||
250 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); | 269 | if (!g_DoPenToolMouseMove){ |
270 | NJevent("enableStageMove"); | ||
271 | } | ||
251 | } //value: function (event) { | 272 | } //value: function (event) { |
252 | }, //HandleLeftButtonDown | 273 | }, //HandleLeftButtonDown |
253 | 274 | ||
@@ -264,18 +285,15 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
264 | return; | 285 | return; |
265 | } | 286 | } |
266 | 287 | ||
267 | if (this._isDrawing) { | 288 | //clear the canvas before we draw anything else |
268 | if (!this._isAltDown) | 289 | this.application.ninja.stage.clearDrawingCanvas(); |
269 | this.doDraw(event); //if Alt was down, doDraw prevents this.mouseUpHitRec from being written to | 290 | this._hoveredAnchorIndex = -1; |
270 | else{ | ||
271 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | ||
272 | this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec); | ||
273 | } | ||
274 | |||
275 | 291 | ||
276 | // ******* begin new code ********* | 292 | if (this._isDrawing) { |
277 | //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(); |
278 | 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)); | ||
279 | 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())) { |
280 | //var scoord = this._getScreenCoord(this._mouseUpHitRec); | 298 | //var scoord = this._getScreenCoord(this._mouseUpHitRec); |
281 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 299 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); |
@@ -330,20 +348,27 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
330 | 348 | ||
331 | //make the subpath dirty so it will get re-drawn | 349 | //make the subpath dirty so it will get re-drawn |
332 | this._selectedSubpath.makeDirty(); | 350 | this._selectedSubpath.makeDirty(); |
333 | //clear the canvas before we draw anything else | 351 | this.DrawSubpathsSVG(); |
334 | this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); | ||
335 | this.DrawSubpathAnchors(this._selectedSubpath); | ||
336 | } | 352 | } |
337 | // ********* end new code *********** | ||
338 | 353 | ||
339 | } else { | 354 | } else { //if mouse is not down: |
340 | this.doSnap(event); | 355 | //this.doSnap(event); |
341 | 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 | } | ||
342 | } //else of if (this._isDrawing) { | 365 | } //else of if (this._isDrawing) { |
343 | 366 | ||
344 | 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 | } | ||
345 | 371 | ||
346 | this.DrawSubpathsSVG(); | ||
347 | }//value: function(event) | 372 | }//value: function(event) |
348 | }, | 373 | }, |
349 | 374 | ||
@@ -352,10 +377,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
352 | value: function() { | 377 | value: function() { |
353 | if (this._penCanvas!==null) { | 378 | if (this._penCanvas!==null) { |
354 | //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure | 379 | //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure |
355 | var penCanvasLeft = parseFloat(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); | 380 | var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); |
356 | var penCanvasTop = parseFloat(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); | 381 | var penCanvasTop = parseInt(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); |
357 | var penCanvasWidth = this._penCanvas.width; | 382 | var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width; |
358 | var penCanvasHeight = this._penCanvas.height; | 383 | var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height; |
359 | var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; | 384 | var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; |
360 | var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; | 385 | var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; |
361 | 386 | ||
@@ -365,7 +390,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
365 | //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space) | 390 | //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space) |
366 | this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX()); | 391 | this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX()); |
367 | this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY()); | 392 | this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY()); |
368 | this._selectedSubpath.translate(translateCanvasX, translateCanvasY, 0); | 393 | this._selectedSubpath.translateAnchors(translateCanvasX, translateCanvasY, 0); |
369 | this._selectedSubpath.createSamples(); //updates the bounding box | 394 | this._selectedSubpath.createSamples(); //updates the bounding box |
370 | } | 395 | } |
371 | } | 396 | } |
@@ -373,23 +398,30 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
373 | 398 | ||
374 | ShowSelectedSubpath:{ | 399 | ShowSelectedSubpath:{ |
375 | value: function() { | 400 | value: function() { |
376 | var bboxMin = this._selectedSubpath.getBBoxMin(); | 401 | if (this._selectedSubpath){ |
377 | var bboxMax = this._selectedSubpath.getBBoxMax(); | 402 | this._selectedSubpath.createSamples(); //dirty bit is checked here |
378 | var bboxWidth = bboxMax[0] - bboxMin[0]; | 403 | var bboxMin = this._selectedSubpath.getBBoxMin(); |
379 | var bboxHeight = bboxMax[1] - bboxMin[1]; | 404 | var bboxMax = this._selectedSubpath.getBBoxMax(); |
380 | var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]); | 405 | var bboxWidth = bboxMax[0] - bboxMin[0]; |
381 | 406 | var bboxHeight = bboxMax[1] - bboxMin[1]; | |
382 | this._selectedSubpath.setCanvasX(bboxMid[0]); | 407 | var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]); |
383 | this._selectedSubpath.setCanvasY(bboxMid[1]); | 408 | |
384 | 409 | this._selectedSubpath.setCanvasX(bboxMid[0]); | |
385 | //call render shape with the bbox width and height |