2 files changed, 416 insertions, 208 deletions

diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 4c42539a..70429ca9 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -4,9 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-// Todo: This entire class should be converted to a module
 var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
+var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
+var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+
+// Todo: This entire class should be converted to a module
 
 ///////////////////////////////////////////////////////////////////////
 // Class GLBrushStroke
@@ -17,20 +20,20 @@ var BrushStroke = function GLBrushStroke() {
     ///////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////
-    this._Points = [];
+    this._Points = [];          //current state of points in stage-world space (may be different from input)
+    this._OrigPoints = [];      //copy of input points without any smoothing
+    this._LocalPoints = [];     //_Points in local coordinates...do this before rendering the points in the canvas
+    this._stageWorldCenter  = [0,0,0];   //coordinate for the canvas midPoint: a 3D vector in stage world space
     this._BBoxMin = [0, 0, 0];
     this._BBoxMax = [0, 0, 0];
-    this._dirty = true;
-
-    //whether or not to use the canvas drawing to stroke/fill
-    this._useCanvasDrawing = true;
-
-    //the X and Y location of this subpath's canvas in stage world space of Ninja
-    this._canvasX = 0;
-    this._canvasY = 0;
+    this._isDirty = true;
+    this._isInit = false;
+    
+    //the HTML5 canvas that holds this brush stroke
+    this._canvas = null;
 
     //stroke information
-    this._strokeWidth = 0.0;
+    this._strokeWidth = 1.0;
     this._strokeColor = [0.4, 0.4, 0.4, 1.0];
     this._secondStrokeColor = [1, 0.4, 0.4, 1.0];
     this._strokeHardness = 100;
@@ -39,10 +42,7 @@ var BrushStroke = function GLBrushStroke() {
     this._strokeDoSmoothing = false;
     this._strokeUseCalligraphic = false;
     this._strokeAngle = 0;
-
-    //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely
-    //smaller value means more samples for the path
-    this._WETNESS_FACTOR = 0.25;
+    this._strokeAmountSmoothing = 0;
 
     //threshold that tells us whether two samples are too far apart
     this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5;
@@ -51,7 +51,7 @@ var BrushStroke = function GLBrushStroke() {
     this._MIN_SAMPLE_DISTANCE_THRESHOLD = 2;
 
     //prevent extremely long paths that can take a long time to render
-    this._MAX_ALLOWED_SAMPLES = 500;
+    this._MAX_ALLOWED_SAMPLES = 5000;
 
     //drawing context
     this._world = null;
@@ -61,10 +61,15 @@ var BrushStroke = function GLBrushStroke() {
     this._planeMat = null;
     this._planeMatInv = null;
     this._planeCenter = null;
+    this._dragPlane = null;
 
     /////////////////////////////////////////////////////////
     // Property Accessors/Setters
     /////////////////////////////////////////////////////////
+    this.setCanvas = function(c) {
+        this._canvas = c;
+    }
+
     this.setWorld = function (world) {
         this._world = world;
     };
@@ -97,20 +102,8 @@ var BrushStroke = function GLBrushStroke() {
         this._planeCenter = pc;
     };
 
-    this.getCanvasX = function(){
-        return this._canvasX;
-    };
-
-    this.getCanvasY = function(){
-        return this._canvasY;
-    };
-
-    this.setCanvasX = function(cx){
-        this._canvasX=cx;
-    };
-
-    this.setCanvasY = function(cy){
-        this._canvasY=cy;
+    this.setDragPlane = function(p){
+        this._dragPlane = p;
     };
 
     this.getNumPoints = function () {
@@ -125,30 +118,38 @@ var BrushStroke = function GLBrushStroke() {
         //add the point only if it is some epsilon away from the previous point
         var numPoints = this._Points.length;
         if (numPoints>0) {
-            var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth;
+            var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;
             var prevPt = this._Points[numPoints-1];
             var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]];
             var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]);
             if (diffPtMag>threshold){
                 this._Points.push(pt);
-                this._dirty=true;
+                this._isDirty=true;
+                this._isInit = false;
             }
         } else {
             this._Points.push(pt);
-            this._dirty=true;
+            this._isDirty=true;
+            this._isInit = false;
         }
     };
     
     this.insertPoint = function(pt, index){
-        this._Points.splice(index, 0, pt); this._dirty=true;
+        this._Points.splice(index, 0, pt);
+        this._isDirty=true;
+        this._isInit = false;
     };
 
     this.isDirty = function(){
-        return this._dirty;
+        return this._isDirty;
     };
 
     this.makeDirty = function(){
-        this._dirty=true;
+        this._isDirty=true;
+    };
+
+    this.getStageWorldCenter = function() {
+        return this._stageWorldCenter;
     };
 
     this.getBBoxMin = function () {
@@ -165,7 +166,10 @@ var BrushStroke = function GLBrushStroke() {
 
     this.setStrokeWidth = function (w) {
         this._strokeWidth = w;
-        this._dirty=true;
+        if (this._strokeWidth<1) {
+            this._strokeWidth = 1;
+        }
+        this._isDirty=true;
     };
 
     this.getStrokeMaterial = function () {
@@ -173,7 +177,7 @@ var BrushStroke = function GLBrushStroke() {
     };
 
     this.setStrokeMaterial = function (m) {
-        this._strokeMaterial = m;
+        this._strokeMaterial = m; this._isDirty = true;
     };
 
     this.getStrokeColor = function () {
@@ -181,27 +185,65 @@ var BrushStroke = function GLBrushStroke() {
     };
 
     this.setStrokeColor = function (c) {
-        this._strokeColor = c;
+        this._strokeColor = c; this._isDirty = true;
     };
 
     this.setSecondStrokeColor = function(c){
-        this._secondStrokeColor=c;
+        this._secondStrokeColor=c; this._isDirty = true;
     }
 
     this.setStrokeHardness = function(h){
-        this._strokeHardness=h;
+        if (this._strokeHardness!==h){
+            this._strokeHardness=h;
+            this._isDirty = true;
+        }
+    }
+    this.getStrokeHardness = function(){
+        return this._strokeHardness;
     }
 
     this.setDoSmoothing = function(s){
-        this._strokeDoSmoothing = s;
+        if (this._strokeDoSmoothing!==s) {
+            this._strokeDoSmoothing = s;
+            this._isDirty = true;
+        }
+    }
+
+    this.getDoSmoothing = function(){
+        return this._strokeDoSmoothing;
+    }
+
+    this.setSmoothingAmount = function(a){