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

2 files changed, 433 insertions, 345 deletions

diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index efd21c4a..89ef79fb 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() {
     };
 
     this.getPoint = function (index) {
-        return this._Points[index];
+        return this._Points[index].slice(0);
     };
 
     this.addPoint = function (pt) {
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() {
 
             // ***** unproject all the centered points and convert them to 2D (plane space)*****
             // (undo the projection step performed by the browser)
-            localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
+            //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
             localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv);
 
             //add to the list of local points
@@ -572,13 +572,13 @@ var BrushStroke = function GLBrushStroke() {
         ctx.restore();
     } //this.render()
 
-    this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){
+    this.drawToContext = function(ctx, deltaX, deltaY, drawStageWorldPts, stageWorldToScreenMat){
         var points = this._LocalPoints;
-        if (drawStageWorldPts){
+        if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet)
             points = this._Points;
         }
         var numPoints = points.length;
-
+        var tempP, p;
         if (this._strokeUseCalligraphic) {
             //build the stamp for the brush stroke
             var t=0;
@@ -623,9 +623,9 @@ var BrushStroke = function GLBrushStroke() {
                 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
                 ctx.translate(disp[0],disp[1]);
                 ctx.beginPath();
-                ctx.moveTo(points[0][0]-origX, points[0][1]-origY);
+                ctx.moveTo(points[0][0]-deltaX, points[0][1]-deltaY);
                 for (var i=0;i<numPoints;i++){
-                    ctx.lineTo(points[i][0]-origX, points[i][1]-origY);
+                    ctx.lineTo(points[i][0]-deltaX, points[i][1]-deltaY);
                 }
                 ctx.stroke();
                 ctx.restore();
@@ -641,13 +641,27 @@ var BrushStroke = function GLBrushStroke() {
             ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
             for (var l=0;l<numlayers;l++){
                 ctx.beginPath();
-                ctx.moveTo(points[0][0]-origX, points[0][1]-origY);
+                if (drawStageWorldPts) {
+                    tempP = points[0].slice(0);
+                    tempP[0]+=deltaX; tempP[1]+=deltaY;
+                    p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                } else {
+                    p = points[0];
+                }
+                ctx.moveTo(p[0],p[1]);
                 if (numPoints===1){
                     //display a tiny segment as a single point
-                   ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01);
+                   ctx.lineTo(p[0],p[1]+0.01);
                 }
                 for (var i=1;i<numPoints;i++){
-                    ctx.lineTo(points[i][0]-origX, points[i][1]-origY);
+                    if (drawStageWorldPts) {
+                        tempP = points[i].slice(0);
+                        tempP[0]+=deltaX; tempP[1]+=deltaY;
+                        p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
+                    } else {
+                        p = points[i];
+                    }
+                    ctx.lineTo(p[0],p[1]);
                 }
                 ctx.lineWidth=2*l+minStrokeWidth;
                 ctx.stroke();
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){
+            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();