diff options
Diffstat (limited to 'js/tools')
-rw-r--r--[-rwxr-xr-x] | js/tools/BrushTool.js | 194 |
1 files changed, 102 insertions, 92 deletions
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 4d44326f..fec89eb2 100755..100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -64,13 +64,40 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
64 | //start a new brush stroke | 64 | //start a new brush stroke |
65 | if (this._selectedBrushStroke === null){ | 65 | if (this._selectedBrushStroke === null){ |
66 | this._selectedBrushStroke = new GLBrushStroke(); | 66 | this._selectedBrushStroke = new GLBrushStroke(); |
67 | if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ | ||
68 | this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); | ||
69 | } | ||
70 | //add this point to the brush stroke in case the user does a mouse up before doing a mouse move | ||
71 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); | ||
72 | this._selectedBrushStroke.addPoint(currMousePos); | ||
73 | |||
74 | //TODO get these values from the options | ||
75 | this._selectedBrushStroke.setStrokeWidth(20); | ||
67 | } | 76 | } |
68 | console.log("BrushTool Start"); | ||
69 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); | 77 | NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); |
70 | } //value: function (event) { | 78 | } //value: function (event) { |
71 | }, //HandleLeftButtonDown | 79 | }, //HandleLeftButtonDown |
72 | 80 | ||
81 | _getUnsnappedPosition: { | ||
82 | value: function(x,y){ | ||
83 | var elemSnap = snapManager.elementSnapEnabled(); | ||
84 | var gridSnap = snapManager.gridSnapEnabled(); | ||
85 | var alignSnap = snapManager.snapAlignEnabled(); | ||
86 | |||
87 | snapManager.enableElementSnap(false); | ||
88 | snapManager.enableGridSnap(false); | ||
89 | snapManager.enableSnapAlign(false); | ||
73 | 90 | ||
91 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); | ||
92 | var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); | ||
93 | |||
94 | snapManager.enableElementSnap(elemSnap); | ||
95 | snapManager.enableGridSnap(gridSnap); | ||
96 | snapManager.enableSnapAlign(alignSnap); | ||
97 | |||
98 | return unsnappedpos; | ||
99 | } | ||
100 | }, | ||
74 | //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call - Pushkar | 101 | //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call - Pushkar |
75 | // might not need to override once we draw using OpenGL instead of SVG | 102 | // might not need to override once we draw using OpenGL instead of SVG |
76 | // Also took out all the snapping code for now...need to add that back | 103 | // Also took out all the snapping code for now...need to add that back |
@@ -84,20 +111,10 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
84 | } | 111 | } |
85 | 112 | ||
86 | if (this._isDrawing) { | 113 | if (this._isDrawing) { |
87 | snapManager.enableElementSnap(false); | 114 | var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); |
88 | snapManager.enableGridSnap(false); | 115 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){ |
89 | snapManager.enableSnapAlign(false); | ||
90 | //this.doDraw(event); | ||
91 | //var currMousePos = this.getMouseUpPos(); | ||
92 | //instead of doDraw call own DrawingTool | ||
93 | var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); | ||
94 | var hitRecSnapPoint = DrawingToolBase.getUpdatedSnapPointNoAppLevelEnabling(point.x, point.y, true, this.mouseDownHitRec); | ||
95 | var currMousePos = DrawingToolBase.getHitRecPos(hitRecSnapPoint); | ||
96 | |||
97 | if (this._selectedBrushStroke){ | ||
98 | this._selectedBrushStroke.addPoint(currMousePos); | 116 | this._selectedBrushStroke.addPoint(currMousePos); |
99 | } | 117 | } |
100 | |||
101 | this.ShowCurrentBrushStrokeOnStage(); | 118 | this.ShowCurrentBrushStrokeOnStage(); |
102 | } //if (this._isDrawing) { | 119 | } //if (this._isDrawing) { |
103 | 120 | ||
@@ -123,12 +140,8 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
123 | 140 | ||
124 | this._isDrawing = false; | 141 | this._isDrawing = false; |
125 | this._hasDraw = false; | 142 | this._hasDraw = false; |
126 | console.log("BrushTool Stop"); | ||
127 | 143 | ||
128 | //TODO get these values from the options | 144 | |
129 | if (this._selectedBrushStroke){ | ||
130 | this._selectedBrushStroke.setStrokeWidth(20); | ||
131 | } | ||
132 | //display the previously drawn stroke in a separate canvas | 145 | //display the previously drawn stroke in a separate canvas |
133 | this.RenderCurrentBrushStroke(); | 146 | this.RenderCurrentBrushStroke(); |
134 | 147 | ||
@@ -143,7 +156,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
143 | //clear the canvas before we draw anything else | 156 | //clear the canvas before we draw anything else |
144 | this.application.ninja.stage.clearDrawingCanvas(); | 157 | this.application.ninja.stage.clearDrawingCanvas(); |
145 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()>0){ | 158 | if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()>0){ |
146 | this._selectedBrushStroke.computeMetaGeometry(); | 159 | //this._selectedBrushStroke.computeMetaGeometry(); |
147 | var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; | 160 | var ctx = this.application.ninja.stage.drawingContext;//stageManagerModule.stageManager.drawingContext; |
148 | if (ctx === null) | 161 | if (ctx === null) |
149 | throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); | 162 | throw ("null drawing context in Brushtool::ShowCurrentBrushStrokeOnStage"); |
@@ -192,92 +205,89 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
192 | 205 | ||
193 | 206 | ||
194 | RenderShape: { | 207 | RenderShape: { |
195 | value: function (w, h, planeMat, midPt, canvas) { | 208 | value: function (w, h, planeMat, midPt, canvas) { |
196 | if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { | 209 | if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { |
197 | return; | 210 | return; |
198 | } | 211 | } |
199 | 212 | ||
200 | var left = Math.round(midPt[0] - 0.5 * w); | 213 | var left = Math.round(midPt[0] - 0.5 * w); |
201 | var top = Math.round(midPt[1] - 0.5 * h); | 214 | var top = Math.round(midPt[1] - 0.5 * h); |
202 | 215 | ||
203 | if (!canvas) { | 216 | if (!canvas) { |
204 | var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); | 217 | var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true); |
205 | var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); | 218 | var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); |
206 | ElementMediator.addElement(newCanvas, elementModel.data, true); | 219 | ElementMediator.addElement(newCanvas, elementModel.data, true); |
207 | 220 | ||
208 | // create all the GL stuff | 221 | // create all the GL stuff |
209 | var world = this.getGLWorld(newCanvas, this._useWebGL); | 222 | var world = this.getGLWorld(newCanvas, this._useWebGL); |
210 | //store a reference to this newly created canvas | 223 | //store a reference to this newly created canvas |
211 | this._brushStrokeCanvas = newCanvas; | 224 | this._brushStrokeCanvas = newCanvas; |
212 | 225 | ||
213 | var brushStroke = this._selectedBrushStroke; | 226 | var brushStroke = this._selectedBrushStroke; |
214 | if (brushStroke){ | 227 | if (brushStroke){ |
215 | brushStroke.setWorld(world); | 228 | brushStroke.setWorld(world); |
216 | 229 | ||
217 | brushStroke.setPlaneMatrix(planeMat); | 230 | brushStroke.setPlaneMatrix(planeMat); |
218 | var planeMatInv = glmat4.inverse( planeMat, [] ); | 231 | var planeMatInv = glmat4.inverse( planeMat, [] ); |
219 | brushStroke.setPlaneMatrixInverse(planeMatInv); | 232 | brushStroke.setPlaneMatrixInverse(planeMatInv); |
220 | brushStroke.setPlaneCenter(midPt); | 233 | brushStroke.setPlaneCenter(midPt); |
221 | 234 | ||
222 | world.addObject(brushStroke); | 235 | world.addObject(brushStroke); |
223 | world.render(); | 236 | world.render(); |
224 | //TODO this will not work if there are multiple shapes in the same canvas | 237 | //TODO this will not work if there are multiple shapes in the same canvas |
225 | newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; | 238 | newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; |
226 | } | 239 | } |
227 | } //if (!canvas) { | 240 | } //if (!canvas) { |
228 | else { | 241 | else { |
229 | 242 | ||
230 | var world = null; | 243 | var world = null; |
231 | if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { | 244 | if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { |
232 | world = canvas.elementModel.shapeModel.GLWorld; | 245 | world = canvas.elementModel.shapeModel.GLWorld; |
233 | } else { | 246 | } else { |
234 | world = this.getGLWorld(canvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, canvas, this._useWebGL);//fillMaterial, strokeMaterial); | 247 | world = this.getGLWorld(canvas, this._useWebGL); |
235 | } | 248 | } |
236 | 249 | ||
237 | 250 | ||
238 | if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ | 251 | if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ |
239 | //update the left and top of the canvas element | 252 | //update the left and top of the canvas element |
240 | var canvasArray=[canvas]; | 253 | var canvasArray=[canvas]; |
241 | ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); | 254 | ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); |
242 | ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); | 255 | ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); |
243 | canvas.width = w; | 256 | canvas.width = w; |
244 | canvas.height = h; | 257 | canvas.height = h; |
245 | //update the viewport and projection to reflect the new canvas width and height | 258 | //update the viewport and projection to reflect the new canvas width and height |
246 | world.setViewportFromCanvas(canvas); | 259 | world.setViewportFromCanvas(canvas); |
247 | if (this._useWebGL){ | 260 | if (this._useWebGL){ |
248 | var cam = world.renderer.cameraManager().getActiveCamera(); | 261 | var cam = world.renderer.cameraManager().getActiveCamera(); |
249 | cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); | 262 | cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); |
263 | } | ||
250 | } | 264 | } |
251 | } | ||
252 | 265 | ||
253 | var brushStroke = this._selectedBrushStroke; | 266 | var brushStroke = this._selectedBrushStroke; |
254 | 267 | ||
255 | if (brushStroke){ | 268 | if (brushStroke){ |
256 | brushStroke.setDrawingTool(this); | 269 | brushStroke.setDrawingTool(this); |
257 | 270 | ||
258 | brushStroke.setPlaneMatrix(planeMat); | 271 | brushStroke.setPlaneMatrix(planeMat); |
259 | var planeMatInv = glmat4.inverse( planeMat, [] ); | 272 | var planeMatInv = glmat4.inverse( planeMat, [] ); |
260 | brushStroke.setPlaneMatrixInverse(planeMatInv); | 273 | brushStroke.setPlaneMatrixInverse(planeMatInv); |
261 | brushStroke.setPlaneCenter(midPt); | 274 | brushStroke.setPlaneCenter(midPt); |
262 | 275 | ||
263 | brushStroke.setWorld(world); | 276 | brushStroke.setWorld(world); |
264 | world.addIfNewObject(brushStroke); | 277 | world.addIfNewObject(brushStroke); |
265 | //world.addObject(subpath); | 278 | //world.addObject(subpath); |
266 | world.render(); | 279 | world.render(); |
267 | //TODO this will not work if there are multiple shapes in the same canvas | 280 | //TODO this will not work if there are multiple shapes in the same canvas |
268 | canvas.elementModel.shapeModel.GLGeomObj = brushStroke; | 281 | canvas.elementModel.shapeModel.GLGeomObj = brushStroke; |
269 | } | 282 | } |
270 | } //else of if (!canvas) { | 283 | } //else of if (!canvas) { |
271 | } //value: function (w, h, planeMat, midPt, canvas) { | 284 | } //value: function (w, h, planeMat, midPt, canvas) { |