aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorPushkar Joshi2012-04-02 15:25:00 -0700
committerPushkar Joshi2012-04-02 15:25:00 -0700
commit878743cbbb75f2fc84855ca27779597b67ab1a95 (patch)
tree3744a6bc9ee21fde57dd3b3a1d348d070c5a74c0 /js/tools
parentdefde265799bb8d6826bb368f04168612e7feb5a (diff)
downloadninja-878743cbbb75f2fc84855ca27779597b67ab1a95.tar.gz
render the pen path with local coordinates, but use stage world coordinates to position the canvas on which the path is rendered
AND add data-montage- to the ids in the pen and brush reels AND fix a bug with pen stroke transparency not working
Diffstat (limited to 'js/tools')
-rwxr-xr-xjs/tools/PenTool.js44
1 files changed, 28 insertions, 16 deletions
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index 31dadb80..98423113 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -416,18 +416,30 @@ exports.PenTool = Montage.create(ShapeTool, {
416 ShowSelectedSubpath:{ 416 ShowSelectedSubpath:{
417 value: function() { 417 value: function() {
418 if (this._selectedSubpath){ 418 if (this._selectedSubpath){
419 this._selectedSubpath.setPlaneMatrix(this._penPlaneMat);
420 var planeMatInv = glmat4.inverse( this._penPlaneMat, [] );
421 this._selectedSubpath.setPlaneMatrixInverse(planeMatInv);
422
419 this._selectedSubpath.createSamples(); //dirty bit is checked here 423 this._selectedSubpath.createSamples(); //dirty bit is checked here
420 var bboxMin = this._selectedSubpath.getBBoxMin(); 424 this._selectedSubpath.buildLocalCoord(); //local dirty bit is checked here
421 var bboxMax = this._selectedSubpath.getBBoxMax(); 425
426 //build the width and height of this canvas by looking at local coordinates (X and Y needed only)
427 var bboxMin = this._selectedSubpath.getLocalBBoxMin();
428 var bboxMax = this._selectedSubpath.getLocalBBoxMax();
422 var bboxWidth = bboxMax[0] - bboxMin[0]; 429 var bboxWidth = bboxMax[0] - bboxMin[0];
423 var bboxHeight = bboxMax[1] - bboxMin[1]; 430 var bboxHeight = bboxMax[1] - bboxMin[1];
431
432 //build the 3D position of the plane center of this canvas by looking at midpoint of the bounding box in stage world coords
433 bboxMin = this._selectedSubpath.getBBoxMin();
434 bboxMax = this._selectedSubpath.getBBoxMax();
424 var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; 435 var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
425 436
437 this._selectedSubpath.setPlaneCenter(bboxMid);
426 this._selectedSubpath.setCanvasX(bboxMid[0]); 438 this._selectedSubpath.setCanvasX(bboxMid[0]);
427 this._selectedSubpath.setCanvasY(bboxMid[1]); 439 this._selectedSubpath.setCanvasY(bboxMid[1]);
428 440
429 //call render shape with the bbox width and height 441 //call render shape with the bbox width and height
430 this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); 442 this.RenderShape(bboxWidth, bboxHeight, bboxMid, this._penPlaneMat, this._penCanvas);
431 } 443 }
432 } 444 }
433 }, 445 },
@@ -592,7 +604,7 @@ exports.PenTool = Montage.create(ShapeTool, {
592 }, 604 },
593 605
594 RenderShape: { 606 RenderShape: {
595 value: function (w, h, planeMat, midPt, canvas) { 607 value: function (w, h, midPt, planeMat, canvas) {
596 if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { 608 if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) {
597 return; 609 return;
598 } 610 }
@@ -614,10 +626,6 @@ exports.PenTool = Montage.create(ShapeTool, {
614 var subpath = this._selectedSubpath; //new GLSubpath(); 626 var subpath = this._selectedSubpath; //new GLSubpath();
615 subpath.setWorld(world); 627 subpath.setWorld(world);
616 subpath.setCanvas(newCanvas); 628 subpath.setCanvas(newCanvas);
617 subpath.setPlaneMatrix(planeMat);
618 var planeMatInv = glmat4.inverse( planeMat, [] );
619 subpath.setPlaneMatrixInverse(planeMatInv);
620 subpath.setPlaneCenter(midPt);
621 629
622 world.addObject(subpath); 630 world.addObject(subpath);
623 world.render(); 631 world.render();
@@ -662,11 +670,19 @@ exports.PenTool = Montage.create(ShapeTool, {
662 if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ 670 if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){
663 //update the left and top of the canvas element 671 //update the left and top of the canvas element
664 var canvasArray=[canvas]; 672 var canvasArray=[canvas];
665 ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); 673 w= Math.round(w);
666 ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); 674 h = Math.round(h);
667 ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; 675 ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w;
668 ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; 676 ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h;
669 //update the viewport and projection to reflect the new canvas width and height 677
678 //var bboxMid = this._selectedSubpath.getLocalBBoxMidInStageWorld();
679 //left = Math.round(bboxMid[0] - 0.5 * w);
680 //top = Math.round(bboxMid[1] - 0.5 * h);
681
682 ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px");
683 ElementMediator.setProperty(canvasArray, "top", [top + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px");
684
685 //update the viewport and projection to reflect the new canvas width and height (todo might be unnecessary since we don't use RDGE for now)
670 world.setViewportFromCanvas(canvas); 686 world.setViewportFromCanvas(canvas);
671 if (this._useWebGL){ 687 if (this._useWebGL){
672 var cam = world.renderer.cameraManager().getActiveCamera(); 688 var cam = world.renderer.cameraManager().getActiveCamera();
@@ -677,10 +693,6 @@ exports.PenTool = Montage.create(ShapeTool, {
677 var subpath = this._selectedSubpath; 693 var subpath = this._selectedSubpath;
678 694
679 subpath.setDrawingTool(this); 695 subpath.setDrawingTool(this);
680 subpath.setPlaneMatrix(planeMat);
681 var planeMatInv = glmat4.inverse( planeMat, [] );
682 subpath.setPlaneMatrixInverse(planeMatInv);
683 subpath.setPlaneCenter(midPt);
684 subpath.setWorld(world); 696 subpath.setWorld(world);
685 697
686 world.addIfNewObject(subpath); 698 world.addIfNewObject(subpath);
@@ -829,6 +841,7 @@ exports.PenTool = Montage.create(ShapeTool, {
829 ctx.strokeStyle = "green"; 841 ctx.strokeStyle = "green";
830 //if (subpath.getStrokeColor()) 842 //if (subpath.getStrokeColor())
831 // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); 843 // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() );
844
832 ctx.beginPath(); 845 ctx.beginPath();
833 var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset; 846 var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset;
834 var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset; 847 var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset;
@@ -881,7 +894,6 @@ exports.PenTool = Montage.create(ShapeTool, {
881 ctx.strokeStyle = "green"; 894 ctx.strokeStyle = "green";
882 var anchorDelta = 2; 895 var anchorDelta = 2;
883 var selAnchorDelta = 4; 896 var selAnchorDelta = 4;
884
885 for (var i = 0; i < numAnchors; i++) { 897 for (var i = 0; i < numAnchors; i++) {
886 var px = subpath.getAnchor(i).getPosX(); 898 var px = subpath.getAnchor(i).getPosX();
887 var py = subpath.getAnchor(i).getPosY(); 899 var py = subpath.getAnchor(i).getPosY();