allow the realtime drawing of brush strokes drawn off the standard XY plane by passing in the transformation matrix

1 files changed, 409 insertions, 335 deletions

diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index 6cd6858c..01350d1c 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -13,7 +13,7 @@ var NJUtils = require("js/lib/NJUtils").NJUtils;
 var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
 var TagTool = require("js/tools/TagTool").TagTool;
 var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
-
+var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
 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
@@ -21,396 +21,470 @@ var g_DoBrushToolMouseMove = true;
 
 exports.BrushTool = Montage.create(ShapeTool, {
     hasReel: { value: false },
-        _toolID: { value: "brushTool" },
-        _imageID: { value: "brushToolImg" },
-        _toolImageClass: { value: "brushToolUp" },
-        _selectedToolImageClass: { value: "brushToolDown" },
-        _toolTipText: { value: "Brush Tool" },
-        _brushView: { value: null, writable: true },
-
-        _selectedToolClass: { value: "brushToolSpecificProperties" },
-        _penToolProperties: { enumerable: false, value: null, writable: true },
-        _parentNode: { enumerable: false, value: null, writable: true },
-        _toolsPropertiesContainer: { enumerable: false, value: null, writable: true },
-
-        //config options
-        _useWebGL: {value: false, writable: false},
-
-        //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},
-
-        ShowToolProperties: {
-            value: function () {
-                this._brushView = PenView.create();
-                this._brushView.element = document.getElementById('topPanelContainer').children[0];
-                this._brushView.needsDraw = true;
-                this._brushView.addEventListener(ToolEvents.TOOL_OPTION_CHANGE, this, false);
-            }
-        },
-
-        HandleLeftButtonDown: {
-            value: function (event) {
-                //ignore any right or middle clicks
-                if (event.button !== 0) {
-                   //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
-                   return;
-                }
-                if (this._canDraw) {
-                   this._isDrawing = true;
-                }
+    _toolID: { value: "brushTool" },
+    _imageID: { value: "brushToolImg" },
+    _toolImageClass: { value: "brushToolUp" },
+    _selectedToolImageClass: { value: "brushToolDown" },
+    _toolTipText: { value: "Brush Tool" },
+    _brushView: { value: null, writable: true },
+
+    _selectedToolClass: { value: "brushToolSpecificProperties" },
+    _penToolProperties: { enumerable: false, value: null, writable: true },
+    _parentNode: { enumerable: false, value: null, writable: true },
+    _toolsPropertiesContainer: { enumerable: false, value: null, writable: true },
+
+    //config options
+    _useWebGL: {value: false, writable: false},
+
+    //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},
+
+    ShowToolProperties: {
+        value: function () {
+            this._brushView = PenView.create();
+            this._brushView.element = document.getElementById('topPanelContainer').children[0];
+            this._brushView.needsDraw = true;
+            this._brushView.addEventListener(ToolEvents.TOOL_OPTION_CHANGE, this, false);
+        }
+    },
 
-                this.startDraw(event);
-                this._brushStrokePlaneMat = this.mouseDownHitRec.getPlaneMatrix();
 
-                //start a new brush stroke
-                if (this._selectedBrushStroke === null){
-                    this._selectedBrushStroke = new BrushStroke();
-                    if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){
-                        this._selectedBrushStroke.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor);
-                    }
-                    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);
-
-                    var strokeSize = 1;
-                    if (this.options.strokeSize) {
-                        strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units);
-                    }
-                    this._selectedBrushStroke.setStrokeWidth(strokeSize);
+    /*
+    _getUnsnappedPosition: {
+        value: function(x,y){
+            var elemSnap = snapManager.elementSnapEnabled();
+            var gridSnap = snapManager.gridSnapEnabled();
+            var alignSnap = snapManager.snapAlignEnabled();
 
-                    var strokeHardness = 100;
-                    if (this.options.strokeHardness){
-                        strokeHardness = this.options.strokeHardness.value;
-                    }
-                    this._selectedBrushStroke.setStrokeHardness(strokeHardness);
+            snapManager.enableElementSnap(false);
+            snapManager.enableGridSnap(false);
+            snapManager.enableSnapAlign(false);
 
-                    var doSmoothing = false;
-                    if (this.options.doSmoothing){
-                        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;
-                    }
-                    if (useCalligraphic) {
-                        this._selectedBrushStroke.setStrokeUseCalligraphic(true);
-                        var strokeAngle = 0;
-                        if (this.options.strokeAngle){
-                            strokeAngle= this.options.strokeAngle.value;
-                        }
-                        this._selectedBrushStroke.setStrokeAngle(Math.PI * strokeAngle/180);
-                    } else {
-                        this._selectedBrushStroke.setStrokeUseCalligraphic(false);
-                    }
-                    
-                }
-                if (!g_DoBrushToolMouseMove)
-                    NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove();
-            } //value: function (event) {
-        }, //HandleLeftButtonDown
+            var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
+            var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));
+            this._draggingPlane = snapManager.getDragPlane();
 
-        _getUnsnappedPosition: {
-            value: function(x,y){
-                var elemSnap = snapManager.elementSnapEnabled();
-                var gridSnap = snapManager.gridSnapEnabled();
-                var alignSnap = snapManager.snapAlignEnabled();
+            snapManager.enableElementSnap(elemSnap);
+            snapManager.enableGridSnap(gridSnap);
+            snapManager.enableSnapAlign(alignSnap);
 
+            return unsnappedpos;
+        }
+    },
+    */
+
+    //use the snap manager to build a hit record corresponding to the screen X, Y position
+    // will use the plane of the selected path as the working plane if available, else use stage
+    getHitRecord:{
+        value: function(x,y, doSnap){
+            var elemSnap = snapManager.elementSnapEnabled();
+            var gridSnap = snapManager.gridSnapEnabled();
+            var alignSnap = snapManager.snapAlignEnabled();
+
+            if (!doSnap){
                 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));
-                this._draggingPlane = snapManager.getDragPlane();
+            if (this._selectedSubpathCanvas){
+                var drawingCanvas = this._selectedSubpathCanvas;
+                var contentPlane = ViewUtils.getUnprojectedElementPlane(drawingCanvas);
+                snapManager.pushWorkingPlane(contentPlane);
 
+            }
+            var tmpPoint = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
+            var hitRec = snapManager.snap(tmpPoint.x, tmpPoint.y, false);
+            if (this._selectedSubpathCanvas){
+                snapManager.popWorkingPlane();
+            }
+
+            if (!doSnap){
                 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
-        HandleMouseMove:
-        {
-            value: function (event) {
-                //ignore any right or middle clicks
-                if (event.button !== 0) {
-                   //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
-                   return;
-                }
+            return hitRec;
+        }
+    },
+
+    HandleLeftButtonDown: {
+         value: function (event) {
+             //ignore any right or middle clicks
+             if (event.button !== 0) {
+                //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
+                return;
+             }
+             if (this._canDraw) {
+                this._isDrawing = true;
+             }
+
+             var hitRec = this.getHitRecord(event.pageX, event.pageY, false);
+             this._brushStrokePlaneMat = hitRec.getPlaneMatrix();
+
+             //start a new brush stroke
+             if (this._selectedBrushStroke === null){
+                 this._selectedBrushStroke = new BrushStroke();
+                 var colorArray=[0,0,0,0];
+                 var color = this.application.ninja.colorController.colorToolbar.fill.color;
+                 if (color){
+                     colorArray = [color.r/255, color.g/255, color.b/255, color.a];
+                 } else {
+                     colorArray = [1,1,1,0];