From 76f2021618c0a6a99a1b855233e353e84ca99467 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 13 Mar 2012 11:23:32 -0700 Subject: Add a smoothing amount parameter, and hide options based on checkboxes --- js/tools/BrushTool.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 4ce9976a..d45d108e 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -85,7 +85,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var strokeHardness = 100; if (this.options.strokeHardness){ - strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); + strokeHardness = this.options.strokeHardness.value; } this._selectedBrushStroke.setStrokeHardness(strokeHardness); @@ -94,7 +94,10 @@ exports.BrushTool = Montage.create(ShapeTool, { doSmoothing = this.options.doSmoothing; } this._selectedBrushStroke.setDoSmoothing(doSmoothing); - + if (doSmoothing){ + this._selectedBrushStroke.setSmoothingAmount(this.options.smoothingAmount.value); + } + var useCalligraphic = false; if (this.options.useCalligraphic){ useCalligraphic = this.options.useCalligraphic; @@ -103,7 +106,7 @@ exports.BrushTool = Montage.create(ShapeTool, { this._selectedBrushStroke.setStrokeUseCalligraphic(true); var strokeAngle = 0; if (this.options.strokeAngle){ - strokeAngle= ShapesController.GetValueInPixels(this.options.strokeAngle.value, this.options.strokeAngle.units); + strokeAngle= this.options.strokeAngle.value; } this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180); } else { -- cgit v1.2.3 From 23baa44e0bc7bfb24e42702c1ef58bf62da083d8 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 14 Mar 2012 15:37:09 -0700 Subject: PI for pen and brush strokes --- js/tools/BrushTool.js | 31 ++++++++++++++++++++++++++++++- js/tools/PenTool.js | 26 ++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index d45d108e..c93672a9 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -254,7 +254,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var top = Math.round(midPt[1] - 0.5 * h); if (!canvas) { - var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); + var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); ElementMediator.addElement(newCanvas, elementModel.data, true); @@ -276,10 +276,37 @@ exports.BrushTool = Montage.create(ShapeTool, { world.render(); //TODO this will not work if there are multiple shapes in the same canvas newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + + newCanvas.elementModel.shapeModel.shapeCount++; + if(newCanvas.elementModel.shapeModel.shapeCount === 1) + { + newCanvas.elementModel.selection = "BrushStroke"; + newCanvas.elementModel.pi = "BrushStrokePi"; + newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; + var strokeColor = this._selectedBrushStroke.getStrokeColor(); + newCanvas.elementModel.shapeModel.stroke = strokeColor; + if(strokeColor) { + newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } + newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + + newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; + } + else + { + // TODO - update the shape's info only. shapeModel will likely need an array of shapes. + } + + if(newCanvas.elementModel.isShape) + { + this.application.ninja.selectionController.selectElement(canvas); + } } } //if (!canvas) { else { + /* var world = null; if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { world = canvas.elementModel.shapeModel.GLWorld; @@ -320,6 +347,8 @@ exports.BrushTool = Montage.create(ShapeTool, { //TODO this will not work if there are multiple shapes in the same canvas canvas.elementModel.shapeModel.GLGeomObj = brushStroke; } + */ + alert("BrushStroke cannot edit existing canvas"); } //else of if (!canvas) { } //value: function (w, h, planeMat, midPt, canvas) { }, //RenderShape: { diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 60ef4f92..e239b3f1 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -601,7 +601,33 @@ exports.PenTool = Montage.create(ShapeTool, { world.addObject(subpath); world.render(); + //TODO this will not work if there are multiple shapes in the same canvas newCanvas.elementModel.shapeModel.GLGeomObj = subpath; + newCanvas.elementModel.shapeModel.shapeCount++; + if(newCanvas.elementModel.shapeModel.shapeCount === 1) + { + newCanvas.elementModel.selection = "Subpath"; + newCanvas.elementModel.pi = "SubpathPi"; + newCanvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; + var strokeColor = subpath.getStrokeColor(); + newCanvas.elementModel.shapeModel.stroke = strokeColor; + if(strokeColor) { + newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; + } + newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + + newCanvas.elementModel.shapeModel.GLGeomObj = subpath; + newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; + } + else + { + // TODO - update the shape's info only. shapeModel will likely need an array of shapes. + } + + if(newCanvas.elementModel.isShape) + { + this.application.ninja.selectionController.selectElement(newCanvas); + } } //if (!canvas) { else { -- cgit v1.2.3 From e574f722864a246bad40d3f5a4e59f7ccb206ea9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 15 Mar 2012 14:33:48 -0700 Subject: update values in the PI from values of the selected brush stroke or pen tool path --- js/tools/BrushTool.js | 1 + js/tools/PenTool.js | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index c93672a9..90010cdf 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -266,6 +266,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var brushStroke = this._selectedBrushStroke; if (brushStroke){ brushStroke.setWorld(world); + brushStroke.setCanvas(newCanvas); brushStroke.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index e239b3f1..779b7f16 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -467,9 +467,9 @@ exports.PenTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); } - //if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ - // this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); - //} + if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ + this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); + } } //if this is a new path being rendered this._selectedSubpath.makeDirty(); @@ -594,6 +594,7 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); + subpath.setCanvas(newCanvas); subpath.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); @@ -614,7 +615,7 @@ exports.PenTool = Montage.create(ShapeTool, { if(strokeColor) { newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; } - newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial(); newCanvas.elementModel.shapeModel.GLGeomObj = subpath; newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; -- cgit v1.2.3 From c0bd8d8efcc501d4efa116a7cc0e802fd4e9f3e9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 19 Mar 2012 11:05:05 -0700 Subject: draw the brush stroke in realtime --- js/tools/BrushTool.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 90010cdf..93020318 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -204,20 +204,10 @@ exports.BrushTool = Montage.create(ShapeTool, { var horizontalOffset = this.application.ninja.stage.userContentLeft; var verticalOffset = this.application.ninja.stage.userContentTop; + var origX = -horizontalOffset; + var origY = -verticalOffset; + this._selectedBrushStroke.drawToContext(ctx, origX, origY); - var numPoints = this._selectedBrushStroke.getNumPoints(); - ctx.lineWidth = 1; - ctx.strokeStyle = "black"; - ctx.beginPath(); - var pt = this._selectedBrushStroke.getPoint(0); - ctx.moveTo(pt[0]+ horizontalOffset,pt[1]+ verticalOffset); - for (var i = 1; i < numPoints; i++) { - pt = this._selectedBrushStroke.getPoint(i); - var x = pt[0]+ horizontalOffset; - var y = pt[1]+ verticalOffset; - ctx.lineTo(x,y); - } - ctx.stroke(); ctx.restore(); } -- cgit v1.2.3 From 92bc54df4acfec849568ab619150a5da49c087fa Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 20 Mar 2012 10:24:15 -0700 Subject: revert to using the angle without flipping its sign...fixing some minor bugs and code cleanup GOOD status before doing 3D unprojection step --- js/tools/BrushTool.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 93020318..a135c1e5 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -108,7 +108,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.options.strokeAngle){ strokeAngle= this.options.strokeAngle.value; } - this._selectedBrushStroke.setStrokeAngle(Math.PI * -strokeAngle/180); + this._selectedBrushStroke.setStrokeAngle(Math.PI * strokeAngle/180); } else { this._selectedBrushStroke.setStrokeUseCalligraphic(false); } -- cgit v1.2.3 From 9b7dac9215fbd7c0fe7a80d3e8f1ff378332fec3 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 23 Mar 2012 14:32:46 -0700 Subject: Almost working version of brush tool that uses only local coordinates to store the brush stroke points. Current version does not yet update the width and height of the brush stroke canvas upon changing the brush stroke through the PI. Also, current version does not obtain 3D position of points properly from the drawing tool base (see BrushTool _getUnsnappedPosition) --- js/tools/BrushTool.js | 116 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 90 insertions(+), 26 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index a135c1e5..f3c6773d 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -16,6 +16,9 @@ var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager; var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke; +//whether or not we want the mouse move to be handled all the time (not just while drawing) inside the brush tool +var g_DoBrushToolMouseMove = true; + exports.BrushTool = Montage.create(ShapeTool, { hasReel: { value: false }, _toolID: { value: "brushTool" }, @@ -36,6 +39,7 @@ exports.BrushTool = Montage.create(ShapeTool, { //view options _brushStrokeCanvas: {value: null, writable: true}, _brushStrokePlaneMat: {value: null, writable: true}, + _draggingPlane: {value: null, writable: true}, //the current brush stroke _selectedBrushStroke: {value: null, writable: true}, @@ -61,9 +65,8 @@ exports.BrushTool = Montage.create(ShapeTool, { } this.startDraw(event); - if (this._brushStrokePlaneMat === null) { - this._brushStrokePlaneMat = this.mouseDownHitRec.getPlaneMatrix(); - } + this._brushStrokePlaneMat = this.mouseDownHitRec.getPlaneMatrix(); + //start a new brush stroke if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new BrushStroke(); @@ -73,6 +76,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ this._selectedBrushStroke.setSecondStrokeColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); } + //add this point to the brush stroke in case the user does a mouse up before doing a mouse move var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); this._selectedBrushStroke.addPoint(currMousePos); @@ -114,7 +118,8 @@ exports.BrushTool = Montage.create(ShapeTool, { } } - NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); + if (!g_DoBrushToolMouseMove) + NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { }, //HandleLeftButtonDown @@ -129,7 +134,9 @@ exports.BrushTool = Montage.create(ShapeTool, { snapManager.enableSnapAlign(false); var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); + //todo fix this function to allow us to get the correct location (in 3D) for the mouse position var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + this._draggingPlane = snapManager.getDragPlane(); snapManager.enableElementSnap(elemSnap); snapManager.enableGridSnap(gridSnap); @@ -150,13 +157,15 @@ exports.BrushTool = Montage.create(ShapeTool, { return; } + var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._isDrawing) { - var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){ this._selectedBrushStroke.addPoint(currMousePos); } this.ShowCurrentBrushStrokeOnStage(); - } //if (this._isDrawing) { + } else { + this.ShowCurrentBrushIconOnStage(currMousePos); + } //this.drawLastSnap(); //TODO.. is this line necessary if we're not snapping? // Required cleanup for both Draw/Feedbacks @@ -167,27 +176,69 @@ exports.BrushTool = Montage.create(ShapeTool, { HandleLeftButtonUp: { value: function (event) { - /*var drawData = this.getDrawingData(); - if (drawData) { - if (this._brushStrokePlaneMat === null) { - this._brushStrokePlaneMat = drawData.planeMat; - } - } - if (this._isDrawing) { - this.doDraw(event); - }*/ this.endDraw(event); this._isDrawing = false; this._hasDraw = false; - + //finish giving enough info. to the brush stroke + this._selectedBrushStroke.setPlaneMatrix(this._brushStrokePlaneMat); + this._selectedBrushStroke.setPlaneMatrixInverse(glmat4.inverse(this._brushStrokePlaneMat,[])); + this._selectedBrushStroke.setDragPlane(this._draggingPlane); + //display the previously drawn stroke in a separate canvas this.RenderCurrentBrushStroke(); this._selectedBrushStroke = null; this._brushStrokeCanvas = null; - NJevent("disableStageMove"); + if (!g_DoBrushToolMouseMove) + NJevent("disableStageMove"); + } + }, + + ShowCurrentBrushIconOnStage:{ + value: function(currMousePos) { + //clear the canvas before we draw anything else + this.application.ninja.stage.clearDrawingCanvas(); + //display the brush icon of proper size (query the options bar) + var strokeSize = 1; + if (this.options.strokeSize) { + strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units); + } + var useCalligraphic = false; + if (this.options.useCalligraphic){ + useCalligraphic = this.options.useCalligraphic; + } + var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; + if (ctx === null) + throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); + ctx.save(); + + var horizontalOffset = this.application.ninja.stage.userContentLeft; + var verticalOffset = this.application.ninja.stage.userContentTop; + var halfStrokeWidth = 0.5*strokeSize; + ctx.beginPath(); + if (!useCalligraphic) { + //for round brushes, draw a circle at the current mouse position + ctx.arc(currMousePos[0] + horizontalOffset, currMousePos[1]+ verticalOffset, halfStrokeWidth, 0, 2 * Math.PI, false); + } else { + //draw an angled stroke to represent the brush tip + var strokeAngle = 0; + if (this.options.strokeAngle){ + strokeAngle= this.options.strokeAngle.value; + } + strokeAngle = Math.PI * strokeAngle/180; + var deltaDisplacement = [Math.cos(strokeAngle),Math.sin(strokeAngle)]; + deltaDisplacement = VecUtils.vecNormalize(2, deltaDisplacement, 1); + var startPos = VecUtils.vecSubtract(2, currMousePos, [-horizontalOffset+halfStrokeWidth*deltaDisplacement[0],-verticalOffset+halfStrokeWidth*deltaDisplacement[1]]); + ctx.moveTo(startPos[0], startPos[1]); + var endPos = VecUtils.vecAdd(2, startPos, [strokeSize*deltaDisplacement[0], strokeSize*deltaDisplacement[1]]); + ctx.lineTo(endPos[0], endPos[1]); + ctx.lineWidth = 2; + } + ctx.strokeStyle = "black"; + ctx.stroke(); + ctx.restore(); } }, @@ -196,20 +247,16 @@ exports.BrushTool = Montage.create(ShapeTool, { //clear the canvas before we draw anything else this.application.ninja.stage.clearDrawingCanvas(); if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()>0){ - //this._selectedBrushStroke.computeMetaGeometry(); var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; if (ctx === null) throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); ctx.save(); - var horizontalOffset = this.application.ninja.stage.userContentLeft; var verticalOffset = this.application.ninja.stage.userContentTop; var origX = -horizontalOffset; var origY = -verticalOffset; - this._selectedBrushStroke.drawToContext(ctx, origX, origY); - + this._selectedBrushStroke.drawToContext(ctx, origX, origY, true); ctx.restore(); - } } }, @@ -217,7 +264,20 @@ exports.BrushTool = Montage.create(ShapeTool, { RenderCurrentBrushStroke:{ value: function() { if (this._selectedBrushStroke){ - this._selectedBrushStroke.computeMetaGeometry(); + //DEBUGGING + /*var localData = this._selectedBrushStroke.buildLocalDataFromStageWorldCoord(); + var bboxWidth = localData[1]; + var bboxHeight = localData[2]; + var bboxMid = localData[0];*/ + this._selectedBrushStroke.init(); + var bboxWidth = this._selectedBrushStroke.getWidth(); + var bboxHeight = this._selectedBrushStroke.getHeight(); + var bboxMid = this._selectedBrushStroke.getStageWorldCenter(); + //end DEBUGGING + //call render shape with the bbox width and height + this.RenderShape(bboxWidth, bboxHeight, this._brushStrokePlaneMat, bboxMid, this._brushStrokeCanvas); + + /*this._selectedBrushStroke.computeMetaGeometry(); var bboxMin = this._selectedBrushStroke.getBBoxMin(); var bboxMax = this._selectedBrushStroke.getBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; @@ -226,9 +286,9 @@ exports.BrushTool = Montage.create(ShapeTool, { this._selectedBrushStroke.setCanvasX(bboxMid[0]); this._selectedBrushStroke.setCanvasY(bboxMid[1]); - //call render shape with the bbox width and height this.RenderShape(bboxWidth, bboxHeight, this._brushStrokePlaneMat, bboxMid, this._brushStrokeCanvas); + */ } } }, @@ -347,10 +407,14 @@ exports.BrushTool = Montage.create(ShapeTool, { Configure: { value: function (wasSelected) { if (wasSelected) { - console.log("Entered BrushTool"); + if (g_DoBrushToolMouseMove){ + NJevent("enableStageMove"); + } } else { - console.log("Left BrushTool"); + if (g_DoBrushToolMouseMove){ + NJevent("disbleStageMove"); + } } } } -- cgit v1.2.3 From 591812255e0e85e52825b1269f29f86fbd0f6182 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 23 Mar 2012 17:37:19 -0700 Subject: correctly update the brush stroke canvas size and position when the stroke size is changed (does not yet work when smoothing is applied) AND select the newly created brush stroke by default --- js/tools/BrushTool.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index f3c6773d..f7f0e4bf 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -349,9 +349,10 @@ exports.BrushTool = Montage.create(ShapeTool, { // TODO - update the shape's info only. shapeModel will likely need an array of shapes. } - if(newCanvas.elementModel.isShape) + //if(newCanvas.elementModel.isShape) + if (true) { - this.application.ninja.selectionController.selectElement(canvas); + this.application.ninja.selectionController.selectElement(newCanvas); } } } //if (!canvas) { -- cgit v1.2.3