aboutsummaryrefslogtreecommitdiff
path: root/js/tools/PenTool.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r--js/tools/PenTool.js346
1 files changed, 106 insertions, 240 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 78344d18..46465be0 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
7var ShapeTool = require("js/tools/ShapeTool").ShapeTool; 7var ShapeTool = require("js/tools/ShapeTool").ShapeTool;
8var ShapesController = require("js/controllers/elements/shapes-controller").ShapesController;
8var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase; 9var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase;
9var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager; 10var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
10var Montage = require("montage/core/core").Montage; 11var Montage = require("montage/core/core").Montage;
@@ -12,6 +13,10 @@ var NJUtils = require("js/lib/NJUtils").NJUtils;
12var ElementMediator = require("js/mediators/element-mediator").ElementMediator; 13var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
13var TagTool = require("js/tools/TagTool").TagTool; 14var TagTool = require("js/tools/TagTool").TagTool;
14var ElementController = require("js/controllers/elements/element-controller").ElementController; 15var ElementController = require("js/controllers/elements/element-controller").ElementController;
16var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
17
18//todo remove this global var
19var g_DoPenToolMouseMove = true;
15 20
16exports.PenTool = Montage.create(ShapeTool, { 21exports.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 = parseFloat(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
@@ -373,17 +398,20 @@ 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 410 this._selectedSubpath.setCanvasY(bboxMid[1]);
386 this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); 411
412 //call render shape with the bbox width and height
413 this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas);
414 }
387 } 415 }
388 }, 416 },
389 417
@@ -429,11 +457,17 @@ exports.PenTool = Montage.create(ShapeTool, {
429 } 457 }
430 458
431 if (this._isNewPath) { 459