From abeb9f1e23679200bb2f4a3ccbcebfb37645975c Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 9 Feb 2012 10:45:50 -0800 Subject: first phase of simple resampling to prevent tiny segments --- js/tools/BrushTool.js | 170 ++++++++++++++++++++++++++------------------------ 1 file changed, 87 insertions(+), 83 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index ce8ffbb9..97df84a0 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -65,12 +65,30 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new GLBrushStroke(); } - console.log("BrushTool Start"); NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { }, //HandleLeftButtonDown + _getUnsnappedPosition: { + value: function(x,y){ + var elemSnap = snapManager.elementSnapEnabled(); + var gridSnap = snapManager.gridSnapEnabled(); + var alignSnap = snapManager.snapAlignEnabled(); + snapManager.enableElementSnap(false); + snapManager.enableGridSnap(false); + snapManager.enableSnapAlign(false); + + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); + var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + + snapManager.enableElementSnap(elemSnap); + snapManager.enableGridSnap(gridSnap); + snapManager.enableSnapAlign(alignSnap); + + return unsnappedpos; + } + }, //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call - Pushkar // might not need to override once we draw using OpenGL instead of SVG // Also took out all the snapping code for now...need to add that back @@ -84,20 +102,10 @@ exports.BrushTool = Montage.create(ShapeTool, { } if (this._isDrawing) { - snapManager.enableElementSnap(false); - snapManager.enableGridSnap(false); - snapManager.enableSnapAlign(false); - //this.doDraw(event); - //var currMousePos = this.getMouseUpPos(); - //instead of doDraw call own DrawingTool - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - var hitRecSnapPoint = DrawingToolBase.getUpdatedSnapPointNoAppLevelEnabling(point.x, point.y, true, this.mouseDownHitRec); - var currMousePos = DrawingToolBase.getHitRecPos(hitRecSnapPoint); - + var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._selectedBrushStroke){ this._selectedBrushStroke.addPoint(currMousePos); } - this.ShowCurrentBrushStrokeOnStage(); } //if (this._isDrawing) { @@ -123,7 +131,6 @@ exports.BrushTool = Montage.create(ShapeTool, { this._isDrawing = false; this._hasDraw = false; - console.log("BrushTool Stop"); //TODO get these values from the options if (this._selectedBrushStroke){ @@ -192,92 +199,89 @@ exports.BrushTool = Montage.create(ShapeTool, { RenderShape: { - value: function (w, h, planeMat, midPt, canvas) { - if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { - return; - } + value: function (w, h, planeMat, midPt, canvas) { + if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { + return; + } - var left = Math.round(midPt[0] - 0.5 * w); - var top = Math.round(midPt[1] - 0.5 * h); + var left = Math.round(midPt[0] - 0.5 * w); + var top = Math.round(midPt[1] - 0.5 * h); - if (!canvas) { - var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); - var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); - ElementMediator.addElement(newCanvas, elementModel.data, true); + if (!canvas) { + var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); + var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); + ElementMediator.addElement(newCanvas, elementModel.data, true); - // create all the GL stuff - var world = this.getGLWorld(newCanvas, this._useWebGL); - //store a reference to this newly created canvas - this._brushStrokeCanvas = newCanvas; + // create all the GL stuff + var world = this.getGLWorld(newCanvas, this._useWebGL); + //store a reference to this newly created canvas + this._brushStrokeCanvas = newCanvas; - var brushStroke = this._selectedBrushStroke; - if (brushStroke){ - brushStroke.setWorld(world); + var brushStroke = this._selectedBrushStroke; + if (brushStroke){ + brushStroke.setWorld(world); - brushStroke.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - brushStroke.setPlaneMatrixInverse(planeMatInv); - brushStroke.setPlaneCenter(midPt); + brushStroke.setPlaneMatrix(planeMat); + var planeMatInv = glmat4.inverse( planeMat, [] ); + brushStroke.setPlaneMatrixInverse(planeMatInv); + brushStroke.setPlaneCenter(midPt); - world.addObject(brushStroke); - world.render(); - //TODO this will not work if there are multiple shapes in the same canvas - newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; - } - } //if (!canvas) { - else { - - var world = null; - if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { - world = canvas.elementModel.shapeModel.GLWorld; - } else { - world = this.getGLWorld(canvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, canvas, this._useWebGL);//fillMaterial, strokeMaterial); - } + world.addObject(brushStroke); + world.render(); + //TODO this will not work if there are multiple shapes in the same canvas + newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + } + } //if (!canvas) { + else { + var world = null; + if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { + world = canvas.elementModel.shapeModel.GLWorld; + } else { + world = this.getGLWorld(canvas, this._useWebGL); + } - if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ - //update the left and top of the canvas element - var canvasArray=[canvas]; - ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); - ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); - canvas.width = w; - canvas.height = h; - //update the viewport and projection to reflect the new canvas width and height - world.setViewportFromCanvas(canvas); - if (this._useWebGL){ - var cam = world.renderer.cameraManager().getActiveCamera(); - cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); + + if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ + //update the left and top of the canvas element + var canvasArray=[canvas]; + ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); + ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); + canvas.width = w; + canvas.height = h; + //update the viewport and projection to reflect the new canvas width and height + world.setViewportFromCanvas(canvas); + if (this._useWebGL){ + var cam = world.renderer.cameraManager().getActiveCamera(); + cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); + } } - } - var brushStroke = this._selectedBrushStroke; + var brushStroke = this._selectedBrushStroke; - if (brushStroke){ - brushStroke.setDrawingTool(this); + if (brushStroke){ + brushStroke.setDrawingTool(this); - brushStroke.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - brushStroke.setPlaneMatrixInverse(planeMatInv); - brushStroke.setPlaneCenter(midPt); + brushStroke.setPlaneMatrix(planeMat); + var planeMatInv = glmat4.inverse( planeMat, [] ); + brushStroke.setPlaneMatrixInverse(planeMatInv); + brushStroke.setPlaneCenter(midPt); - brushStroke.setWorld(world); - world.addIfNewObject(brushStroke); - //world.addObject(subpath); - world.render(); - //TODO this will not work if there are multiple shapes in the same canvas - canvas.elementModel.shapeModel.GLGeomObj = brushStroke; - } - } //else of if (!canvas) { - } //value: function (w, h, planeMat, midPt, canvas) { - }, //RenderShape: { + brushStroke.setWorld(world); + world.addIfNewObject(brushStroke); + //world.addObject(subpath); + world.render(); + //TODO this will not work if there are multiple shapes in the same canvas + canvas.elementModel.shapeModel.GLGeomObj = brushStroke; + } + } //else of if (!canvas) { + } //value: function (w, h, planeMat, midPt, canvas) { + }, //RenderShape: { + Configure: { value: function (wasSelected) { if (wasSelected) { - console.log("Picked BrushTool"); - //todo these calls have no effect because the drawing-tool-base (in getInitialSnapPoint) overrides them with what's set at the application level - snapManager.enableElementSnap(false); - snapManager.enableGridSnap(false); - snapManager.enableSnapAlign(false); + console.log("Entered BrushTool"); } else { console.log("Left BrushTool"); -- cgit v1.2.3 From d0661d6c587aced68a68e36a5ec4e81f8a2096e8 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 23 Feb 2012 16:57:55 -0800 Subject: bug fixes for canvas 2d shape drawing. --- js/tools/LineTool.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js index 233316a5..0a7c0534 100755 --- a/js/tools/LineTool.js +++ b/js/tools/LineTool.js @@ -42,7 +42,10 @@ exports.LineTool = Montage.create(ShapeTool, { } this._strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units, null); - this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css; + if (this.application.ninja.colorController.colorToolbar.stroke.color) + this._strokeColor = this.application.ninja.colorController.colorToolbar.stroke.color.css; + else + this._strokeColor = [0,0,0,1]; this.startDraw(event); } }, -- cgit v1.2.3 From b194efa0556806593b29eb197250df462e89fcc4 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 14:03:11 -0800 Subject: Enable shift key constraint for Pan Tool. --- js/tools/PanTool.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'js/tools') diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js index 71301d46..0537a27b 100755 --- a/js/tools/PanTool.js +++ b/js/tools/PanTool.js @@ -81,6 +81,14 @@ exports.PanTool = Montage.create(toolBase, { this._altKeyDown = true; } + else if (event.shiftKey) + { + if (!this._shiftKeyDown) + { + this._shiftKeyDown = true; + this._shiftPt = this._lastGPt.slice(); + } + } } }, @@ -90,6 +98,10 @@ exports.PanTool = Montage.create(toolBase, { this._altKeyDown = false; } + else if (event.keyCode === Keyboard.SHIFT) + { + this._shiftKeyDown = false; + } } }, @@ -221,6 +233,7 @@ exports.PanTool = Montage.create(toolBase, var tmpLocal = MathUtils.transformAndDivideHomogeneousPoint( this._globalPt, globalToLocalMat ); this._lastGPt = this._globalPt.slice(); + this._shiftPt = this._lastGPt.slice(); this._lastY = this._lastGPt[1]; // set up the matrices we will be needing @@ -285,6 +298,16 @@ exports.PanTool = Montage.create(toolBase, this._globalPt[2] += dy; gPt = [this._lastGPt[0], this._lastGPt[1], this._globalPt[2]]; } + else if (this._shiftKeyDown) + { + var dx = Math.abs( this._shiftPt[0] - gPt[0] ), + dy = Math.abs( this._shiftPt[1] - gPt[1] ); + + if (dx >= dy) + gPt[1] = this._shiftPt[1]; + else + gPt[0] = this._shiftPt[0]; + } // update the scrollbars var deltaGPt = VecUtils.vecSubtract(2, gPt, this._lastGPt); -- cgit v1.2.3 From ef38731ae2769dcb2247db599cdfe62d38e34b28 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 27 Feb 2012 15:39:16 -0800 Subject: Reset translation values as well when double-clicking to reset the rotation values. Signed-off-by: Nivesh Rajbhandari --- js/tools/Rotate3DToolBase.js | 11 ++++------- js/tools/Translate3DToolBase.js | 1 - 2 files changed, 4 insertions(+), 8 deletions(-) (limited to 'js/tools') diff --git a/js/tools/Rotate3DToolBase.js b/js/tools/Rotate3DToolBase.js index aa91b2f4..b04e8b0a 100755 --- a/js/tools/Rotate3DToolBase.js +++ b/js/tools/Rotate3DToolBase.js @@ -447,16 +447,13 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { iMat; for(var i = 0; i < len; i++) { - // Reset to the identity matrix but retain the rotation values + // Reset to the identity matrix item = this._targets[i]; - elt = item.elt; - - // Reset to the identity matrix but retain the translation values iMat = Matrix.I(4); mat = item.mat; - iMat[12] = mat[12]; - iMat[13] = mat[13]; - iMat[14] = mat[14]; +// iMat[12] = mat[12]; +// iMat[13] = mat[13]; +// iMat[14] = mat[14]; dist = this._undoArray[i].dist; diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index cbf76830..3d9191da 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -85,7 +85,6 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, { // Reset to the identity matrix but retain the rotation values item = this._targets[i]; - elt = item.elt; mat = item.mat.slice(0); mat[12] = 0; mat[13] = 0; -- cgit v1.2.3 From 7cbd26d475eaad817042692f9116f9a24ae60997 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 28 Feb 2012 10:24:06 -0800 Subject: Bug fixes: 1152: allow deleting of multiple paths from inside pen tool 1128: keyboard hotkey shortcut 'P' for pen tool 941: changing width or height of the path scales the path --- js/tools/PenTool.js | 77 +++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 54 insertions(+), 23 deletions(-) (limited to 'js/tools') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 7749d525..bb9c71e7 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -955,33 +955,64 @@ exports.PenTool = Montage.create(ShapeTool, { handleDelete:{ value: function(event){ - //clear the selected subpath...the only new additions to this function w.r.t. ToolBase - if (this._selectedSubpath){ - if (this._selectedSubpath.getSelectedAnchorIndex()>=0){ - this._hoveredAnchorIndex=-1; - this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); - this._selectedSubpath.createSamples(); - //clear the canvas - this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); - this.DrawSubpathAnchors(this._selectedSubpath); - this.ShowSelectedSubpath(); + var len = this.application.ninja.selectedElements.length; + if (len===0) { + //clear the selected subpath...the only new additions to this function w.r.t. ToolBase + if (this._selectedSubpath){ + if (this._selectedSubpath.getSelectedAnchorIndex()>=0){ + this._hoveredAnchorIndex=-1; + this._selectedSubpath.removeAnchor(this._selectedSubpath.getSelectedAnchorIndex()); + this._selectedSubpath.createSamples(); + //clear the canvas + this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); + this.DrawSubpathAnchors(this._selectedSubpath); + this.ShowSelectedSubpath(); + } + else { + this._selectedSubpath.clearAllAnchors(); //perhaps unnecessary + this._selectedSubpath = null; + //clear the canvas + this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); + + //undo/redo...go through ElementController and NJEvent + var els = []; + ElementController.removeElement(this._penCanvas); + els.push(this._penCanvas); + NJevent( "deleteSelection", els ); + this._penCanvas = null; + } + } + //do nothing if there was no selected subpath and if there was no selection + } + else { + + //undo/redo...go through ElementMediator (see ElementMediator.handleDeleting() from where the much of this function is copied) + //clear the canvas + this.application.ninja.stage.clearDrawingCanvas();//stageManagerModule.stageManager.clearDrawingCanvas(); + var els = []; + for(var i = 0; i=0 && this._hoveredAnchorIndex=0 && this._hoveredAnchorIndex --- js/tools/SelectionTool.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 37029e8c..83d52d52 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -305,6 +305,9 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { newHeight.push(_h + "px"); viewUtils.setMatrixForElement(elt, previousMat); + + this._targets[i].mat = previousMat; + this._targets[i].matInv = glmat4.inverse(previousMat, []); } } if(addToUndoStack) -- cgit v1.2.3 From f931c48a7d0bcf1222cf05787e3294839ed0b9fb Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 29 Feb 2012 09:47:41 -0800 Subject: resample the brush stroke so we don't have gaps if the path is drawn rapidly, and, allow to change the stroke color, and, more efficient stroke rendering by drawing translated radial gradients (instead of creating new gradients for each stroke sample) --- js/tools/BrushTool.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 9a0ad583..776d914c 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -64,6 +64,11 @@ exports.BrushTool = Montage.create(ShapeTool, { //start a new brush stroke if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new GLBrushStroke(); + if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ + this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); + } + //TODO get these values from the options + this._selectedBrushStroke.setStrokeWidth(20); } NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { @@ -132,10 +137,7 @@ exports.BrushTool = Montage.create(ShapeTool, { this._isDrawing = false; this._hasDraw = false; - //TODO get these values from the options - if (this._selectedBrushStroke){ - this._selectedBrushStroke.setStrokeWidth(20); - } + //display the previously drawn stroke in a separate canvas this.RenderCurrentBrushStroke(); @@ -150,7 +152,7 @@ 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(); + //this._selectedBrushStroke.computeMetaGeometry(); var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; if (ctx === null) throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); -- cgit v1.2.3 From 46fb52be241dced940d46629c809a09c86ed4438 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 29 Feb 2012 11:38:33 -0800 Subject: changed the registration point of the brush tool icon and added a temporary check to prevent extremely long brush strokes --- js/tools/BrushTool.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 776d914c..fec89eb2 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -67,6 +67,10 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.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); + //TODO get these values from the options this._selectedBrushStroke.setStrokeWidth(20); } @@ -108,7 +112,7 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this._isDrawing) { var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); - if (this._selectedBrushStroke){ + if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){ this._selectedBrushStroke.addPoint(currMousePos); } this.ShowCurrentBrushStrokeOnStage(); -- cgit v1.2.3 From a89e30ab834a48be32b6122e0c8ac1e0c3ed43e8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 29 Feb 2012 11:58:28 -0800 Subject: Fix for performance issue when moving shapes. We don't need to call render except if the geometry and materials change. This is more easy to see with shapes like the brush tool. Signed-off-by: Nivesh Rajbhandari --- js/tools/SelectionTool.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) (limited to 'js/tools') diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 83d52d52..caa9e8d6 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -312,12 +312,26 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } if(addToUndoStack) { - ElementsMediator.setProperties(this.application.ninja.selectedElements, + // if we have a delta, that means the transform handles were used and + // we should update the width and height too. Otherwise, just update left and top. + if(this._delta) + { + ElementsMediator.setProperties(this.application.ninja.selectedElements, { "left": newLeft, "top": newTop, "width": newWidth, "height": newHeight }, "Change", "selectionTool", { "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight} ); + } + else + { + ElementsMediator.setProperties(this.application.ninja.selectedElements, + { "left": newLeft, "top": newTop }, + "Change", + "selectionTool", + { "left" : previousLeft, "top" : previousTop } + ); + } } // Save previous value for undo/redo this._undoArray = []; -- cgit v1.2.3