aboutsummaryrefslogtreecommitdiff
path: root/js/tools
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-29 12:03:23 -0800
committerValerio Virgillito2012-02-29 12:03:23 -0800
commit1568367213e760463f3ee29a531aa345fda6bd6d (patch)
treeb95412b6c50685996082483e4e017ce6dd3b1408 /js/tools
parent3dbe798285f95dc63ae33739df5daadb8c432f24 (diff)
parent271a8f2b29d87d12c81d03e3f1e2c05b816a138d (diff)
downloadninja-1568367213e760463f3ee29a531aa345fda6bd6d.tar.gz
Merge pull request #85 from pushkarjoshi/brushtool
Brushtool
Diffstat (limited to 'js/tools')
-rw-r--r--[-rwxr-xr-x]js/tools/BrushTool.js194
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