diff options
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r-- | js/tools/PenTool.js | 127 |
1 files changed, 46 insertions, 81 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 78344d18..3b03e0e7 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; |
@@ -187,6 +188,8 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
187 | //we have picked the endpoint of this path...reverse the path if necessary | 188 | //we have picked the endpoint of this path...reverse the path if necessary |
188 | if (selAnchorIndex ===0){ | 189 | if (selAnchorIndex ===0){ |
189 | //reverse this path | 190 | //reverse this path |
191 | this._selectedSubpath.reversePath(); | ||
192 | selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex(); | ||
190 | } | 193 | } |
191 | this._isPickedEndPointInSelectPathMode = true; | 194 | this._isPickedEndPointInSelectPathMode = true; |
192 | } | 195 | } |
@@ -219,6 +222,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
219 | } | 222 | } |
220 | } | 223 | } |
221 | } | 224 | } |
225 | //else if (whichPoint === this._selectedSubpath.SEL_NONE) { | ||
222 | if (whichPoint === this._selectedSubpath.SEL_NONE) { | 226 | if (whichPoint === this._selectedSubpath.SEL_NONE) { |
223 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { | 227 | if (this._entryEditMode !== this.ENTRY_SELECT_PATH) { |
224 | //add an anchor point to end of the subpath, and make it the selected anchor point | 228 | //add an anchor point to end of the subpath, and make it the selected anchor point |
@@ -234,7 +238,18 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
234 | } | 238 | } |
235 | } else { | 239 | } else { |
236 | if (this._isPickedEndPointInSelectPathMode){ | 240 | if (this._isPickedEndPointInSelectPathMode){ |
237 | 241 | //if (0){ | |
242 | //TODO clean up this code...very similar to the code block above | ||
243 | if (!this._selectedSubpath.getIsClosed()) { | ||
244 | this._selectedSubpath.addAnchor(new GLAnchorPoint()); | ||
245 | var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | ||
246 | newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); | ||
247 | newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); | ||
248 | newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]); | ||
249 | |||
250 | //set the mode so that dragging will update the next and previous locations | ||
251 | this._editMode = this.EDIT_PREV_NEXT; | ||
252 | } | ||
238 | } | 253 | } |
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 | 254 | //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 | 255 | //this._entryEditMode = this.ENTRY_SELECT_NONE; //TODO revisit this after implementing code for adding points to any end of selected path |
@@ -352,10 +367,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
352 | value: function() { | 367 | value: function() { |
353 | if (this._penCanvas!==null) { | 368 | if (this._penCanvas!==null) { |
354 | //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure | 369 | //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")); | 370 | 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")); | 371 | var penCanvasTop = parseFloat(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); |
357 | var penCanvasWidth = this._penCanvas.width; | 372 | var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width; |
358 | var penCanvasHeight = this._penCanvas.height; | 373 | var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height; |
359 | var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; | 374 | var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth; |
360 | var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; | 375 | var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight; |
361 | 376 | ||
@@ -373,17 +388,20 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
373 | 388 | ||
374 | ShowSelectedSubpath:{ | 389 | ShowSelectedSubpath:{ |
375 | value: function() { | 390 | value: function() { |
376 | var bboxMin = this._selectedSubpath.getBBoxMin(); | 391 | if (this._selectedSubpath){ |
377 | var bboxMax = this._selectedSubpath.getBBoxMax(); | 392 | this._selectedSubpath.createSamples(); //dirty bit is checked here |
378 | var bboxWidth = bboxMax[0] - bboxMin[0]; | 393 | var bboxMin = this._selectedSubpath.getBBoxMin(); |
379 | var bboxHeight = bboxMax[1] - bboxMin[1]; | 394 | 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])]); | 395 | var bboxWidth = bboxMax[0] - bboxMin[0]; |
381 | 396 | var bboxHeight = bboxMax[1] - bboxMin[1]; | |
382 | this._selectedSubpath.setCanvasX(bboxMid[0]); | 397 | 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]); | 398 | |
384 | 399 | this._selectedSubpath.setCanvasX(bboxMid[0]); | |
385 | //call render shape with the bbox width and height | 400 | this._selectedSubpath.setCanvasY(bboxMid[1]); |
386 | this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); | 401 | |
402 | //call render shape with the bbox width and height | ||
403 | this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); | ||
404 | } | ||
387 | } | 405 | } |
388 | }, | 406 | }, |
389 | 407 | ||
@@ -429,11 +447,17 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
429 | } | 447 | } |
430 | 448 | ||
431 | if (this._isNewPath) { | 449 | if (this._isNewPath) { |
432 | var strokeSize = 10.0; | 450 | var strokeSize = 1.0;//default stroke width |
433 | if (this.options.strokeSize) { | 451 | if (this.options.strokeSize) { |
434 | strokeSize = this.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); | 452 | strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); |
435 | } | 453 | } |
436 | this._selectedSubpath.setStrokeWidth(strokeSize); | 454 | this._selectedSubpath.setStrokeWidth(strokeSize); |
455 | if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ | ||
456 | this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); | ||
457 | } | ||
458 | if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ | ||
459 | this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); | ||
460 | } | ||
437 | } | 461 | } |
438 | 462 | ||
439 | this._selectedSubpath.makeDirty(); | 463 | this._selectedSubpath.makeDirty(); |
@@ -541,55 +565,10 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
541 | var left = Math.round(midPt[0] - 0.5 * w); | 565 | var left = Math.round(midPt[0] - 0.5 * w); |
542 | var top = Math.round(midPt[1] - 0.5 * h); | 566 | var top = Math.round(midPt[1] - 0.5 * h); |
543 | 567 | ||
544 | |||
545 | var strokeStyle = this.options.strokeStyle; | ||
546 | var strokeSize = 4.0; | ||
547 | if (this.options.strokeSize) { | ||
548 | strokeSize = this.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, h); | ||
549 | } | ||
550 | var strokeColor = [1.0, 0.3, 0.3, 1.0]; | ||
551 | var fillColor = [1, .2, .5, 1.0]; | ||
552 | //var s = ColorPanelModule.ColorPanel.strokeToolbar.webGlColor; | ||
553 | var s = strokeColor; | ||
554 | if(s) | ||
555 | { | ||
556 | strokeColor = [s.r/255, s.g/255, s.b/255, s.a]; | ||
557 | } | ||
558 | |||
559 | |||
560 | //var f = ColorPanelModule.ColorPanel.fillToolbar.webGlColor; | ||
561 | var f = fillColor; | ||
562 | if(f) | ||
563 | { | ||
564 | fillColor = [f.r/255, f.g/255, f.b/255, f.a]; | ||
565 | } | ||
566 | |||
567 | // for default stroke and fill/no materials | ||
568 | var strokeMaterial = null; | ||
569 | var fillMaterial = null; | ||
570 | |||
571 | var strokeIndex = parseInt(this.options.strokeMaterial); | ||
572 | if(strokeIndex > 0) | ||
573 | { | ||
574 | strokeMaterial = Object.create(MaterialsLibrary.getMaterialAt(strokeIndex-1)); | ||
575 | } | ||
576 | |||
577 | var fillIndex = parseInt(this.options.fillMaterial); | ||
578 | if(fillIndex > 0) | ||
579 | { | ||
580 | fillMaterial = Object.create(MaterialsLibrary.getMaterialAt(fillIndex-1)); | ||
581 | } | ||
582 | |||
583 | if (!canvas) { | 568 | if (!canvas) { |
584 | var newCanvas = null; | 569 | var newCanvas = null; |
585 | //if (this._useExistingCanvas()) { | ||
586 | // newCanvas = this._targetedCanvas; //TODO...when is this condition true? I would like to reuse canvas when continuing path or when drawing on div tool canvas | ||
587 | //}else { | ||
588 | //newCanvas = this.createCanvas(left, top, w, h,"Subpath"); | ||
589 | //} | ||
590 | |||
591 | newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", null, true); | 570 | newCanvas = NJUtils.makeNJElement("canvas", "Subpath", "shape", null, true); |
592 | var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); | 571 | var elementModel = TagTool.makeElement(parseInt(w), parseInt(h), planeMat, midPt, newCanvas); |
593 | ElementMediator.addElement(newCanvas, elementModel.data, true); | 572 | ElementMediator.addElement(newCanvas, elementModel.data, true); |
594 | 573 | ||
595 | // create all the GL stuff | 574 | // create all the GL stuff |
@@ -599,12 +578,6 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
599 | 578 | ||
600 | var subpath = this._selectedSubpath; //new GLSubpath(); | 579 | var subpath = this._selectedSubpath; //new GLSubpath(); |
601 | subpath.setWorld(world); | 580 | subpath.setWorld(world); |
602 | subpath.setStrokeMaterial(strokeMaterial); | ||
603 | subpath.setFillMaterial(fillMaterial); | ||
604 | subpath.setFillColor(fillColor); | ||
605 | subpath.setStrokeColor(strokeColor); | ||
606 | subpath.setStrokeStyle(strokeStyle); | ||
607 | |||
608 | subpath.setPlaneMatrix(planeMat); | 581 | subpath.setPlaneMatrix(planeMat); |
609 | var planeMatInv = glmat4.inverse( planeMat, [] ); | 582 | var planeMatInv = glmat4.inverse( planeMat, [] ); |
610 | subpath.setPlaneMatrixInverse(planeMatInv); | 583 | subpath.setPlaneMatrixInverse(planeMatInv); |
@@ -628,8 +601,8 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
628 | var canvasArray=[canvas]; | 601 | var canvasArray=[canvas]; |
629 | ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); | 602 | ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); |
630 | ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); | 603 | ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); |
631 | canvas.width = w; | 604 | ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; |
632 | canvas.height = h; | 605 | ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; |
633 | //update the viewport and projection to reflect the new canvas width and height | 606 | //update the viewport and projection to reflect the new canvas width and height |
634 | world.setViewportFromCanvas(canvas); | 607 | world.setViewportFromCanvas(canvas); |
635 | if (this._useWebGL){ | 608 | if (this._useWebGL){ |
@@ -645,16 +618,9 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
645 | var planeMatInv = glmat4.inverse( planeMat, [] ); | 618 | var planeMatInv = glmat4.inverse( planeMat, [] ); |
646 | subpath.setPlaneMatrixInverse(planeMatInv); | 619 | subpath.setPlaneMatrixInverse(planeMatInv); |
647 | subpath.setPlaneCenter(midPt); | 620 | subpath.setPlaneCenter(midPt); |
648 | |||
649 | subpath.setWorld(world); | 621 | subpath.setWorld(world); |
650 | subpath.setStrokeMaterial(strokeMaterial); | 622 | |
651 | subpath.setStrokeColor(strokeColor); | ||
652 | subpath.setStrokeStyle(strokeStyle); | ||
653 | subpath.setFillMate |