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 From bfd796e47c856c6620dc4b32ac6c710d4a493d3a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 27 Mar 2012 15:24:30 -0700 Subject: Text Tool - Remove inline style from user document --- js/tools/TextTool.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/tools') diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js index 4c464173..d27a32bb 100755 --- a/js/tools/TextTool.js +++ b/js/tools/TextTool.js @@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, DrawingTool = require("js/tools/drawing-tool").DrawingTool; - RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor; + RichTextEditor = require("node_modules/labs/rich-text-editor.reel").RichTextEditor, + ElementsMediator = require("js/mediators/element-mediator").ElementMediator; exports.TextTool = Montage.create(DrawingTool, { @@ -21,7 +22,7 @@ exports.TextTool = Montage.create(DrawingTool, { this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value; this.application.ninja.stage.textTool.value = ""; this.application.ninja.stage.textTool.element.style.display = "none"; - this.applyElementStyles(this.application.ninja.stage.textTool.element.firstChild, this.selectedElement, ["color"]); + ElementsMediator.setProperty(this.application.ninja.selectedElements, "color", [window.getComputedStyle(this.application.ninja.stage.textTool.element.firstChild)["color"]], "Change", "textTool"); } //Set Selected Element this._selectedElement = val; -- cgit v1.2.3 From 6b61de58f0733b40f64ed996933ac89927e922a1 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 29 Mar 2012 12:01:21 -0700 Subject: We shouldn't set z to 0 for translate tool snapping because user may want to snap in 3d. Signed-off-by: Nivesh Rajbhandari --- js/tools/Translate3DToolBase.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'js/tools') diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 07b6d04d..005b9749 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -66,10 +66,6 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, delta[0] = 0; delta[1] = 0; } - else - { - delta[2] = 0; - } this._delta = delta.slice(0); } -- cgit v1.2.3 From 5b4f6b1618cf571a6bce5a631f976a008e04a64e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 29 Mar 2012 15:52:08 -0700 Subject: Updated shapes to always check for its stroke and fill colors and materials instead of relying on the shapeModel cache because it can get out of sync. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 7 ------- js/tools/OvalTool.js | 13 ------------- js/tools/RectTool.js | 13 ------------- 3 files changed, 33 deletions(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index a61f8f79..dd5a7c72 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -234,13 +234,6 @@ exports.LineTool = Montage.create(ShapeTool, { canvas.elementModel.selection = "Line"; canvas.elementModel.pi = "LinePi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; - canvas.elementModel.shapeModel.stroke = strokeColor; - if(strokeColor) - { - canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; - } - - canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index a10e0bb5..0ad74aa4 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -78,22 +78,9 @@ exports.OvalTool = Montage.create(ShapeTool, { canvas.elementModel.selection = "Oval"; canvas.elementModel.pi = "OvalPi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; - canvas.elementModel.shapeModel.stroke = strokeColor; - canvas.elementModel.shapeModel.fill = fillColor; - if(strokeColor) - { - canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; - } - if(fillColor) - { - canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill; - } canvas.elementModel.shapeModel.innerRadius = this.options.innerRadius.value + " " + this.options.innerRadius.units; - canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; - canvas.elementModel.shapeModel.fillMaterial = fillMaterial; - canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index 957afea9..c56e4424 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -98,25 +98,12 @@ exports.RectTool = Montage.create(ShapeTool, { canvas.elementModel.selection = "Rectangle"; canvas.elementModel.pi = "RectanglePi"; canvas.elementModel.shapeModel.strokeSize = this.options.strokeSize.value + " " + this.options.strokeSize.units; - canvas.elementModel.shapeModel.stroke = strokeColor; - canvas.elementModel.shapeModel.fill = fillColor; - if(strokeColor) - { - canvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; - } - if(fillColor) - { - canvas.elementModel.shapeModel.background = this.application.ninja.colorController.colorToolbar.fill; - } canvas.elementModel.shapeModel.tlRadius = this.options.TLRadiusControl.value + " " + this.options.TLRadiusControl.units; canvas.elementModel.shapeModel.trRadius = this.options.TRRadiusControl.value + " " + this.options.TRRadiusControl.units; canvas.elementModel.shapeModel.blRadius = this.options.BLRadiusControl.value + " " + this.options.BLRadiusControl.units; canvas.elementModel.shapeModel.brRadius = this.options.BRRadiusControl.value + " " + this.options.BRRadiusControl.units; - canvas.elementModel.shapeModel.strokeMaterial = strokeMaterial; - canvas.elementModel.shapeModel.fillMaterial = fillMaterial; - canvas.elementModel.shapeModel.strokeStyleIndex = strokeStyleIndex; canvas.elementModel.shapeModel.strokeStyle = strokeStyle; -- cgit v1.2.3 From eae317815e15a7ffc2dd1bd1e39b208eaa02fd2b Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 30 Mar 2012 13:53:47 -0700 Subject: Update PI and Color Panel to reflect default LinearGradient and RadialGradient materials' colors. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 1 + js/tools/OvalTool.js | 2 ++ js/tools/RectTool.js | 2 ++ js/tools/ShapeTool.js | 25 +++++++++++++++++++++++++ 4 files changed, 30 insertions(+) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index dd5a7c72..499a6b9d 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -216,6 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } + strokeColor = this._getMaterialColor(strokeM) || strokeColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index 0ad74aa4..c09c9bc7 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -53,12 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } + strokeColor = this._getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } + fillColor = this._getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index c56e4424..d69aa933 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -72,12 +72,14 @@ exports.RectTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } + strokeColor = this._getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } + fillColor = this._getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index d3a36163..1a12401f 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -206,7 +206,32 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, + _getMaterialColor: { + value: function(m) + { + var css, + colorObj; + if(m === "LinearGradientMaterial") + { + css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; + } + else if(m === "RadialGradientMaterial") + { + css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)"; + } + + if(css) + { + colorObj = this.application.ninja.colorController.getColorObjFromCss(css); + if(colorObj) + { + return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; + } + } + return null; + } + }, // We can draw on an existing canvas unless it has only a single shape object _useExistingCanvas: { -- cgit v1.2.3 From 5377e963c4413640cd3c04e0406384df04144568 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 2 Apr 2012 14:52:14 -0700 Subject: Switching to Linear/RadialGradient materials will set the corresponding color. Also, dispatching an addElement event when toggling shape from WebGL/canvas2d so timeline can draw correctly. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 2 +- js/tools/OvalTool.js | 4 ++-- js/tools/RectTool.js | 4 ++-- js/tools/ShapeTool.js | 27 --------------------------- 4 files changed, 5 insertions(+), 32 deletions(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 499a6b9d..9b22c629 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -216,7 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } - strokeColor = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js index c09c9bc7..e8e88d1d 100755 --- a/js/tools/OvalTool.js +++ b/js/tools/OvalTool.js @@ -53,14 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } - strokeColor = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } - fillColor = this._getMaterialColor(fillM) || fillColor; + fillColor = ShapesController.getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js index d69aa933..0c14a559 100755 --- a/js/tools/RectTool.js +++ b/js/tools/RectTool.js @@ -72,14 +72,14 @@ exports.RectTool = Montage.create(ShapeTool, { { strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM)); } - strokeColor = this._getMaterialColor(strokeM) || strokeColor; + strokeColor = ShapesController.getMaterialColor(strokeM) || strokeColor; var fillM = this.options.fillMaterial; if(fillM) { fillMaterial = Object.create(MaterialsModel.getMaterial(fillM)); } - fillColor = this._getMaterialColor(fillM) || fillColor; + fillColor = ShapesController.getMaterialColor(fillM) || fillColor; } var world = this.getGLWorld(canvas, this.options.use3D); diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 1a12401f..85009bc2 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -206,33 +206,6 @@ exports.ShapeTool = Montage.create(DrawingTool, { } }, - _getMaterialColor: { - value: function(m) - { - var css, - colorObj; - if(m === "LinearGradientMaterial") - { - css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))"; - } - else if(m === "RadialGradientMaterial") - { - css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)"; - } - - if(css) - { - colorObj = this.application.ninja.colorController.getColorObjFromCss(css); - if(colorObj) - { - return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops}; - } - } - - return null; - } - }, - // We can draw on an existing canvas unless it has only a single shape object _useExistingCanvas: { value: function() -- cgit v1.2.3 From dc9650af5760b1f93d6e93a383eabceacfdc0ad8 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 2 Apr 2012 15:40:25 -0700 Subject: Snapping fixes. --- js/tools/Translate3DToolBase.js | 25 +++++++++++++++++++------ js/tools/TranslateObject3DTool.js | 21 ++++++++++----------- js/tools/modifier-tool-base.js | 14 ++++++++++++-- 3 files changed, 41 insertions(+), 19 deletions(-) (limited to 'js/tools') diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index 07b6d04d..18e2b610 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -29,6 +29,8 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, modifyElements : { value : function(data, event) { + //console.log( "modifyElements, data: " + data.pt0 + " => " + data.pt1 ); + // form the translation vector and post translate the matrix by it. var delta = vecUtils.vecSubtract( 3, data.pt1, data.pt0 ); if(this._handleMode !== null) @@ -66,15 +68,12 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, delta[0] = 0; delta[1] = 0; } - else - { - delta[2] = 0; - } this._delta = delta.slice(0); } var transMat = Matrix.Translation( delta ); + //console.log( "Translate: " + delta ); if(this._inLocalMode && (this._targets.length === 1) ) { this._translateLocally(transMat); @@ -134,6 +133,9 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, // We will only translate single elements locally _translateLocally: { value: function (transMat) { + //console.log( "_translateLocally, startMat: " + this._startMat ); + //console.log( "_translateLocally, transMat: " + transMat ); + //console.log( "_translateLocally, startMat: " + this._startMat + ", transMat: " + transMat ); var mat = glmat4.multiply(this._startMat, transMat, []); viewUtils.setMatrixForElement( this._target, mat, true ); if(this._mode !== 1) @@ -145,14 +147,22 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, _translateGlobally: { value: function (transMat) { + //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); + //console.log( "_translateGlobally, transMat: " + transMat ); var len = this._targets.length, i = 0, item, elt, - curMat, + curMat = viewUtils.getMatrixFromElement( this._target ), matInv = glmat4.inverse(this._startMat, []), nMat = glmat4.multiply(transMat, this._startMat, [] ), qMat = glmat4.multiply(matInv, nMat, []); + + if (this._mode === 1) + { + var curInv = glmat4.inverse( curMat, [] ); + transMat = glmat4.multiply( nMat, curInv, [] ); + } var shouldUpdateStartMat = true; @@ -181,6 +191,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, if(shouldUpdateStartMat) { + //console.log( "\t\tshouldUpdateStartMat" ); this._targets[i].mat = curMat; } } @@ -188,7 +199,9 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, }, _updateTargets: { - value: function(addToUndoStack) { + value: function(addToUndoStack) + { + console.log( "_updateTargets" ); var newStyles = [], previousStyles = [], len = this.application.ninja.selectedElements.length; diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 60633e74..7163f005 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -16,6 +16,8 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { initializeSnapping : { value : function(event) { + console.log( "initializeSnapping" ); + this._mouseDownHitRec = null; this._mouseUpHitRec = null; @@ -37,8 +39,6 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { if(this._handleMode === null) { -// this.doSelection(event); - snapManager.enableElementSnap ( true ); snapManager.enableGridSnap ( true ); } @@ -107,16 +107,10 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } if(this._handleMode === 2) - { - // TODO - not sure how to parameterize point in z-translate mode this.clickedObject = this._target; - this._snapParam = [0, 0, 0]; - } - else - { - // parameterize the snap point on the target - this._snapParam = this.parameterizeSnap( hitRec ); - } + + // parameterize the snap point on the target + this._snapParam = this.parameterizeSnap( hitRec ); if(!this._dragPlane) { @@ -132,6 +126,11 @@ exports.TranslateObject3DTool = Object.create(Translate3DToolBase, { } + // only do quadrant snapping if the 4 corners of the element are in the drag plane + + var sign = MathUtils.fpSign( VecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); + this._shouldUseQuadPt = (sign == 0); + var wpHitRec = hitRec.convertToWorkingPlane( this._dragPlane ); this._mouseDownHitRec = wpHitRec; this._mouseUpHitRec = null; diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 94b806fd..07b28747 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -25,6 +25,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { _snapParam: { value: null }, _snapIndex: { value: -1 }, _useQuadPt: { value: false }, + _shouldUseQuadPt: { value: false }, // we set snapping capabilities depending on the tool. // The following variables are set in a tool's initializeSnapping method called on mouse down. @@ -175,6 +176,10 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // } } + // only do quadrant snapping if the 4 corners of the element are in the drag plane + var sign = MathUtils.fpSign( VecUtils.vecDot(3,this._dragPlane,[0,0,1]) + this._dragPlane[3] - 1.0); + this._shouldUseQuadPt = (sign == 0) + var wpHitRec = hitRec.convertToWorkingPlane( this._dragPlane ); this._mouseDownHitRec = wpHitRec; this._mouseUpHitRec = null; @@ -236,6 +241,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { } } + //console.log( "ParameterizeSnap: " + paramPt ); return paramPt; } }, @@ -284,14 +290,16 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { y = x0 + ty*dy, z = 0.0; var localPt = [x,y,z]; + globalPt = viewUtils.localToGlobal( localPt, elt ); // add in the delta var hitPt = this.GetObjectHitPoint(); var scrPt = viewUtils.localToGlobal( hitPt, this._clickedObject ); - var delta = [xEvent-scrPt[0], yEvent-scrPt[1]]; + var delta = [xEvent-scrPt[0], yEvent-scrPt[1], 0-scrPt[2]]; globalPt[0] += delta[0]; globalPt[1] += delta[1]; + globalPt[2] += delta[2]; } return globalPt; @@ -517,7 +525,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { // do the snap var quadPt; - if (mouseIsDown) + if (mouseIsDown && !do3DSnap && this._shouldUseQuadPt && (this._handleMode === null) && (this._mode === 0)) quadPt = this.GetQuadrantSnapPoint(x,y); var hitRec = snapManager.snap(x, y, do3DSnap, quadPt ); @@ -806,6 +814,8 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { HandleLeftButtonDown: { value: function(event) { + console.log( "modifier-tool-base.HandleLeftButtonDown" ); + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); this.downPoint.x = point.x; this.downPoint.y = point.y; -- cgit v1.2.3 From bf815cbda0f7a4f2b8ca9532745fa525ed60c8d3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 2 Apr 2012 16:58:54 -0700 Subject: IKNinja-1376 - 3D values reverted when using Selection tool to move the object. (Only happen when 3D values set in PI) We need to update the undo array for the tool if values are changed outside the active tool. I think this was the same bug causing IKNinja-1411. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 1 + js/tools/modifier-tool-base.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index f9411f48..c00a2929 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -60,6 +60,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { else { this._canSnap = true; + this._updateTargets(); } this.isDrawing = true; diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index 94b806fd..f58ecb53 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -448,6 +448,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { { this.isDrawing = true; this.application.ninja.stage.showSelectionBounds = false; + this._updateTargets(); if(this._canSnap) { @@ -785,7 +786,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { { this.target = this.application.ninja.currentDocument.documentRoot; } - this._updateTargets(); +// this._updateTargets(); } else { -- cgit v1.2.3 From 4d132fcbde4540c2cac6c0df613940353e2690f6 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 3 Apr 2012 12:03:16 -0700 Subject: Give user feedback about which element the Fill/InkBottle tools will act on. Signed-off-by: Nivesh Rajbhandari --- js/tools/FillTool.js | 20 +++++++++++++++++++- js/tools/InkBottleTool.js | 21 ++++++++++++++++++++- js/tools/ShapeTool.js | 11 +++++------ js/tools/modifier-tool-base.js | 5 +++++ 4 files changed, 49 insertions(+), 8 deletions(-) (limited to 'js/tools') diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js index 4b07ae83..746f20cf 100755 --- a/js/tools/FillTool.js +++ b/js/tools/FillTool.js @@ -17,11 +17,12 @@ var Montage = require("montage/core/core").Montage, exports.FillTool = Montage.create(ModifierToolBase, { _canSnap: { value: false }, _canColor: { value: true }, + _targetedElement: { value: null }, HandleMouseMove: { value : function (event) { - var obj = this.application.ninja.stage.GetElement(event); + var obj = this.application.ninja.stage.GetSelectableElement(event); var cursor = "url('images/cursors/fill.png') 14 14, default"; var canColor = true; if (obj) @@ -31,6 +32,23 @@ exports.FillTool = Montage.create(ModifierToolBase, { { cursor = "url('images/cursors/nofill.png') 14 14, default"; canColor = false; + if(this._targetedElement) + { + this._targetedElement.classList.remove("active-element-outline"); + this._targetedElement = null; + } + } + else + { + if (obj !== this._targetedElement) + { + if(this._targetedElement) + { + this._targetedElement.classList.remove("active-element-outline"); + } + } + this._targetedElement = obj; + this._targetedElement.classList.add("active-element-outline"); } } this.application.ninja.stage.drawingCanvas.style.cursor = cursor; diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js index 8340ef50..95c2e71d 100755 --- a/js/tools/InkBottleTool.js +++ b/js/tools/InkBottleTool.js @@ -11,11 +11,12 @@ var Montage = require("montage/core/core").Montage, exports.InkBottleTool = Montage.create(ModifierToolBase, { _canSnap: { value: false }, _canColor: { value: true }, + _targetedElement: { value: null }, HandleMouseMove: { value : function (event) { - var obj = this.application.ninja.stage.GetElement(event); + var obj = this.application.ninja.stage.GetSelectableElement(event); var cursor = "url('images/cursors/ink.png') 6 11, default"; var canColor = true; if (obj) @@ -25,7 +26,25 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, { { cursor = "url('images/cursors/ink_no.png') 6 11, default"; canColor = false; + if(this._targetedElement) + { + this._targetedElement.classList.remove("active-element-outline"); + this._targetedElement = null; + } } + else + { + if (obj !== this._targetedElement) + { + if(this._targetedElement) + { + this._targetedElement.classList.remove("active-element-outline"); + } + } + this._targetedElement = obj; + this._targetedElement.classList.add("active-element-outline"); + } + } this.application.ninja.stage.drawingCanvas.style.cursor = cursor; this._canColor = canColor; diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js index 85009bc2..92284d78 100755 --- a/js/tools/ShapeTool.js +++ b/js/tools/ShapeTool.js @@ -119,7 +119,7 @@ exports.ShapeTool = Montage.create(DrawingTool, { RemoveCustomFeedback: { value: function (event) { if (this._targetedElement) { - this._targetedElement.classList.remove("elem-red-outline"); + this._targetedElement.classList.remove("active-element-outline"); this._targetedElement = null; } @@ -136,23 +136,22 @@ exports.ShapeTool = Montage.create(DrawingTool, { _showFeedbackOnMouseMove: { value: function (event) { // TODO - This call is causing the canvas to redraw 3 times per mouse move - var targetedObject = this.application.ninja.stage.GetElement(event); + var targetedObject = this.application.ninja.stage.GetSelectableElement(event); if (targetedObject) { - // TODO - Clean this up if((targetedObject.nodeName === "CANVAS") && !ShapesController.isElementAShape(targetedObject)) { if (targetedObject !== this._targetedElement) { if(this._targetedElement) { - this._targetedElement.classList.remove("elem-red-outline"); + this._targetedElement.classList.remove("active-element-outline"); } this._targetedElement = targetedObject; - this._targetedElement.classList.add("elem-red-outline"); + this._targetedElement.classList.add("active-element-outline"); } } else if (this._targetedElement) { - this._targetedElement.classList.remove("elem-red-outline"); + this._targetedElement.classList.remove("active-element-outline"); this._targetedElement = null; } } diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js index f58ecb53..a1812650 100755 --- a/js/tools/modifier-tool-base.js +++ b/js/tools/modifier-tool-base.js @@ -758,6 +758,11 @@ exports.ModifierToolBase = Montage.create(DrawingTool, { snapManager.enableGridSnap( snapManager.gridSnapEnabledAppLevel() ); this.eventManager.removeEventListener( "toolOptionsChange", this, false); this.eventManager.removeEventListener( "toolDoubleClick", this, false); + + if (this._targetedElement) { + this._targetedElement.classList.remove("active-element-outline"); + this._targetedElement = null; + } } } }, -- cgit v1.2.3 From df0389e6a191ebbff4e4b5d6625007873c0737bd Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 4 Apr 2012 10:21:20 -0700 Subject: Adjusting line's width and height when changing stroke size. Signed-off-by: Nivesh Rajbhandari --- js/tools/LineTool.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 9b22c629..a43d4fb6 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -241,6 +241,7 @@ exports.LineTool = Montage.create(ShapeTool, { canvas.elementModel.shapeModel.GLGeomObj = line; canvas.elementModel.shapeModel.useWebGl = this.options.use3D; + canvas.elementModel.shapeModel.slope = slope; } else { -- cgit v1.2.3 From a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- js/tools/BrushTool.js | 2 +- js/tools/LineTool.js | 111 ++++++++++++++++++++++------------------ js/tools/PenTool.js | 12 ++--- js/tools/Rotate3DToolBase.js | 4 +- js/tools/SelectionTool.js | 34 +++++------- js/tools/ShapeTool.js | 37 ++++++++------ js/tools/TagTool.js | 6 +-- js/tools/TextTool.js | 4 +- js/tools/Translate3DToolBase.js | 2 +- js/tools/modifier-tool-base.js | 2 +- 10 files changed, 110 insertions(+), 104 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index f7f0e4bf..2171d2c6 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -306,7 +306,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (!canvas) { 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); + ElementMediator.addElements(newCanvas, elementModel.data, false); // create all the GL stuff var world = this.getGLWorld(newCanvas, this._useWebGL); diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index a61f8f79..455f519e 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -7,7 +7,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, ShapeTool = require("js/tools/ShapeTool").ShapeTool, DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase, - ElementMediator = require("js/mediators/element-mediator").ElementMediator, NJUtils = require("js/lib/NJUtils").NJUtils, TagTool = require("js/tools/TagTool").TagTool, ShapesController = require("js/controllers/elements/shapes-controller").ShapesController, @@ -53,59 +52,43 @@ exports.LineTool = Montage.create(ShapeTool, { } }, - HandleLeftButtonUp: - { - value: function (event) - { - var slope = this._getSlope(), - drawData = this.getDrawingData(); + HandleLeftButtonUp: { + value: function (event) { + var slope = this._getSlope(), drawData = this.getDrawingData(); if(drawData) { - var canvas, - xAdj = 0, - yAdj = 0, - w = ~~drawData.width, - h = ~~drawData.height; - if(!this._useExistingCanvas()) - { - // set the dimensions - if(slope === "horizontal") - { - h = Math.max(this._strokeSize, 1); - } - else if(slope === "vertical") - { - w = Math.max(this._strokeSize, 1); - } - else - { -