Allow the path stroke width to be changed without causing a drift in the canvas position

AND
some code cleanup (remove canvas left and top tracking for each subpath)
AND
add flags for the specifying in what coordinate space we're sampling the subpath

2 files changed, 110 insertions, 82 deletions

diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 761391b7..31bf4632 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -43,10 +43,6 @@ var GLSubpath = function GLSubpath() {
     //initially set the _dirty bit so we will re-construct _Anchors and _Samples
     this._dirty = true;
 
-    //the top left location of this subpath's canvas in screen space (used to identify cases when location changes)
-    this._canvasLeft = 0;
-    this._canvasTop = 0;
-
     //stroke information
     this._strokeWidth = 1.0;
     this._strokeColor = [0.4, 0.4, 0.4, 1.0];
@@ -97,7 +93,7 @@ var GLSubpath = function GLSubpath() {
         if (numAnchors === 0) {
             return; //nothing to do for empty paths
         }
-        this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
+        this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation
 
         //figure the size of the area we will draw into
         var bboxWidth=0, bboxHeight=0;
@@ -123,6 +119,8 @@ var GLSubpath = function GLSubpath() {
         }
         var lineCap = ['butt','round','square'];
         ctx.lineCap = lineCap[1];
+        var lineJoin = ['round','bevel','miter'];
+        ctx.lineJoin = lineJoin[0];
 
         /*
         commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered
@@ -649,73 +647,100 @@ GLSubpath.prototype.getStrokeWidth = function () {
     return this._strokeWidth;
 };
 
-GLSubpath.prototype.setCanvasLeft = function(cl){
-    this._canvasLeft = cl;
-};
-GLSubpath.prototype.setCanvasTop = function(ct){
-    this._canvasTop = ct;
-};
-GLSubpath.prototype.setCanvasLeftTopPerElementMediator = function(elemMediator){
-    if (!this._canvas){
-        if (!this.getWorld())
-            return; //cannot do anything if there is no world
-        //set the canvas by querying the world
-        this._canvas = this.getWorld().getCanvas();
-    }
-    //check if the canvas was translated
-    var penCanvasCurrentLeft = parseInt(elemMediator.getProperty(this._canvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left"));
-    var penCanvasCurrentTop = parseInt(elemMediator.getProperty(this._canvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top"));
 
-    var translateCanvasX = Math.round(penCanvasCurrentLeft - this._canvasLeft);
-    var translateCanvasY = Math.round(penCanvasCurrentTop - this._canvasTop);
+GLSubpath.prototype.setStrokeWidth = function (w) {
+    var diffStrokeWidth = w-this._strokeWidth;//if positive, then stroke width grew, else shrunk
+    if (diffStrokeWidth === 0){
+        return;//nothing to do
+    }
 
-    //update the left and top parameters for this subpath and also translate the subpath points (since they're stored in stage world space)
-    if (Math.abs(translateCanvasX)>=1 || Math.abs(translateCanvasY)>=1){
-        this.setCanvasLeft(penCanvasCurrentLeft);
-        this.setCanvasTop(penCanvasCurrentTop);
+    //only allow to increase the stroke width with even increments (this avoids floating point round-off problems)
+    diffStrokeWidth = Math.round(diffStrokeWidth);
+    if (diffStrokeWidth%2){
+        diffStrokeWidth+=1;
     }
-    this._dirty=true;
-};
 
-GLSubpath.prototype.computeLeftTopWidthHeight = function() {
-    //build the width and height of this canvas by looking at local coordinates
-    var bboxMin = this.getLocalBBoxMin();
-    var bboxMax = this.getLocalBBoxMax();
-    var bboxWidth = bboxMax[0] - bboxMin[0];
-    var bboxHeight = bboxMax[1] - bboxMin[1];
+    //update the stroke width by the delta
+    this._strokeWidth += diffStrokeWidth;
 
-    //build the 3D position of the plane center of this canvas by looking at midpoint of the bounding box in stage world coords
-    bboxMin = this.getBBoxMin();
-    bboxMax = this.getBBoxMax();
-    //var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
-    //var left = Math.round(bboxMid[0] - 0.5 * bboxWidth);
-    //var top = Math.round(bboxMid[1] - 0.5 * bboxHeight);
-    var left = this._canvasLeft;
-    var top = this._canvasTop;
-    return [left, top, bboxWidth, bboxHeight];
-};
+    //if we have no path yet, return
+    if (this.getNumAnchors()<2 || this._canvas===null){
+        return;
+    }
 
-GLSubpath.prototype.setStrokeWidth = function (w) {
-    var diffStrokeWidth = w-Math.floor(this._strokeWidth);//if positive, then stroke width grew, else shrunk
-    if (diffStrokeWidth === 0)
-        return;//nothing to do
+    if (this._dirty){
+        this.createSamples(false); //this will also update the bounding box
+    } else{
+        this.computeBoundingBox(false);
+    }
+    this.offsetPerBBoxMin(); //this will shift the local coordinates such that the bbox min point is at (0,0)
 
-    this._strokeWidth = w;
-    this._dirty=true;
+    //figure out the adjustment to the canvas position and size
+    var delta = Math.round(diffStrokeWidth*0.5);
 
+    //update the width, height, left and top
     var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
+    var penCanvasCurrentWidth = parseInt(ElementMediator.getProperty(this._canvas, "width"));
+    var penCanvasNewWidth = penCanvasCurrentWidth + diffStrokeWidth;
+    var penCanvasCurrentHeight = parseInt(ElementMediator.getProperty(this._canvas, "height"));
+    var penCanvasNewHeight = penCanvasCurrentHeight + diffStrokeWidth;
+    var penCanvasCurrentLeft = parseInt(ElementMediator.getProperty(this._canvas, "left"));
+    var penCanvasNewLeft = penCanvasCurrentLeft - delta;
+    var penCanvasCurrentTop = parseInt(ElementMediator.getProperty(this._canvas, "top"));
+    var penCanvasNewTop = penCanvasCurrentTop - delta;
+    var canvasArray=[this._canvas];
+    ElementMediator.setProperty(canvasArray, "width", [penCanvasNewWidth+"px"], "Changing", "penTool");
+    ElementMediator.setProperty(canvasArray, "height", [penCanvasNewHeight+"px"], "Changing", "penTool");
+    ElementMediator.setProperty(canvasArray, "left", [penCanvasNewLeft+"px"],"Changing", "penTool");
+    ElementMediator.setProperty(canvasArray, "top", [penCanvasNewTop+ "px"],"Changing", "penTool");
+
+    /*
+    //compute the current location of the canvas for this subpath
+    this.createSamples(); //this will also update the bounding box
+    var bboxMin = this.getBBoxMin();
+    var bboxMax = this.getBBoxMax();
+    var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0]; //ignore the Z coord. for local coordinates
+
+    //go from local coordinates to stage world
+    var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+    var SnapManager = require("js/helper-classes/3D/snap-manager").SnapManager;
+    var localToStageWorldMat = ViewUtils.getLocalToStageWorldMatrix(this._canvas, true, true);
+    var bboxMidSW = MathUtils.transformAndDivideHomogeneousPoint(bboxMid, localToStageWorldMat);
+    bboxMidSW[0]+=SnapManager.getStageWidth()*0.5;
+    bboxMidSW[1]+=SnapManager.getStageHeight()*0.5;
+
+    this._strokeWidth = Math.round(w);
+    this._dirty=true;
+
+    // **** adjust the local coordinates to account for the change in stroke width ****
+    this.computeBoundingBox(); //this will take the new strokewidth into account
+    this.offsetPerBBoxMin(); //this will shift the local coordinates such that the bbox min point is at (0,0)
 
-    //translate the subpath in case the actual canvas location does not match where subpath thinks the canvas should be
-    this.setCanvasLeftTopPerElementMediator(ElementMediator);
+    // **** adjust the canvas position to account for the change in stroke width
+    var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
+    //build the width and height of this canvas by looking at local coordinates
+    bboxMin = this.getBBoxMin();
+    bboxMax = this.getBBoxMax();
+    var width = Math.round(bboxMax[0] - bboxMin[0]);
+    var height = Math.round(bboxMax[1] - bboxMin[1]);
+    var left = Math.round(bboxMidSW[0] - 0.5 * width);
+    var top = Math.round(bboxMidSW[1] - 0.5 * height);
 
-    // **** adjust the left, top, width, and height to adjust for the change in stroke width ****
-    this.createSamples(); //dirty bit is checked here
-    var ltwh = this.computeLeftTopWidthHeight();
     var canvasArray=[this._canvas];
-    ElementMediator.setProperty(canvasArray, "width", [ltwh[2]+"px"], "Changing", "penTool");//canvas.width = w;
-    ElementMediator.setProperty(canvasArray, "height", [ltwh[3]+"px"], "Changing", "penTool");//canvas.height = h;
-    ElementMediator.setProperty(canvasArray, "left", [ltwh[0]+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px");
-    ElementMediator.setProperty(canvasArray, "top", [ltwh[1]+ "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px");
+    ElementMediator.setProperty(canvasArray, "width", [width+"px"], "Changing", "penTool");
+    ElementMediator.setProperty(canvasArray, "height", [height+"px"], "Changing", "penTool");
+
+    //check if the canvas was translated
+    var penCanvasCurrentLeft = parseInt(ElementMediator.getProperty(this._canvas, "left"));
+    var penCanvasCurrentTop = parseInt(ElementMediator.getProperty(this._canvas, "top"));
+    left =  Math.round(penCanvasCurrentLeft - diffStrokeWidth*0.5);
+    top =  Math.round(penCanvasCurrentTop - diffStrokeWidth*0.5);
+
+    //left = Math.round(bboxMidSW[0] - 0.5 * width);
+    //top = Math.round(bboxMidSW[1] - 0.5 * height);
+    ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");
+    ElementMediator.setProperty(canvasArray, "top", [top+ "px"],"Changing", "penTool");
+    */
 };
 
 GLSubpath.prototype.getStrokeColor = function () {
@@ -866,7 +891,7 @@ GLSubpath.prototype._unprojectPt = function(pt, pespectiveDist) {
 
 //  createSamples
 //  stores samples of the subpath in _samples
-GLSubpath.prototype.createSamples = function () {
+GLSubpath.prototype.createSamples = function (isStageWorldCoord) {
     if (this._dirty) {
         //clear any previously computed samples
         this._Samples = [];
@@ -928,7 +953,7 @@ GLSubpath.prototype.createSamples = function () {
         } //if (numAnchors >== 2) {
 
         //re-compute the bounding box (this also accounts for stroke width, so assume the stroke width is set)
-        this.computeBoundingBox(true);
+        this.computeBoundingBox(true, isStageWorldCoord);
     } //if (this._dirty)
     this._dirty = false;
 };
@@ -938,13 +963,14 @@ GLSubpath.prototype.offsetPerBBoxMin = function()
     //offset the anchor and sample coordinates such that the min point of the bbox is at [0,0,0]
     this.translateAnchors(-this._BBoxMin[0], -this._BBoxMin[1], -this._BBoxMin[2]);