aboutsummaryrefslogtreecommitdiff
path: root/js/tools/PenTool.js
diff options
context:
space:
mode:
authorPushkar Joshi2012-01-30 13:56:33 -0800
committerPushkar Joshi2012-01-30 13:56:33 -0800
commit76abbaafb0d90bb1dc9c63a5a5a78ab95bb00420 (patch)
treec572db40a8f9b24eab3d6a4db56f28c62aa83136 /js/tools/PenTool.js
parentf71ddd22ca313b8f4d3dd01720b6544b57c96505 (diff)
downloadninja-76abbaafb0d90bb1dc9c63a5a5a78ab95bb00420.tar.gz
Merge pushkar branch on gerritt with github version
Diffstat (limited to 'js/tools/PenTool.js')
-rw-r--r--js/tools/PenTool.js127
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
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;
@@ -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);