render the pen path with local coordinates, but use stage world coordinates to position the canvas on which the path is rendered

AND
add data-montage- to the ids in the pen and brush reels
AND
fix a bug with pen stroke transparency not working

2 files changed, 239 insertions, 27 deletions

diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 22209815..e93c9382 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -413,7 +413,7 @@ var BrushStroke = function GLBrushStroke() {
             this._LocalPoints[i][1]+= halfheight;
 
             //store the original points
-            this._OrigLocalPoints   .push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);
+            this._OrigLocalPoints.push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);
         }
         //update the bbox with the same adjustment as was made for the local points above
         this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth;
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 9bd9ad9a..19a1da3b 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -12,6 +12,7 @@ var AnchorPoint =   require("js/lib/geom/anchor-point").AnchorPoint;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 // TODO Those function do not seems to be used. We should remove them
+/*
 function SubpathOffsetPoint(pos, mapPos) {
     this.Pos = [pos[0],pos[1],pos[2]];
     this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]];
@@ -33,7 +34,7 @@ function sortNumberDescending(a,b){
 function SegmentIntersections(){
     this.paramArray = [];
 }
-
+*/
 ///////////////////////////////////////////////////////////////////////
 // Class GLSubpath
 //      representation a sequence of cubic bezier curves.
@@ -49,15 +50,22 @@ var GLSubpath = function GLSubpath() {
     this._BBoxMax = [0, 0, 0];
     this._isClosed = false;
 
-    this._samples = [];                 //polyline representation of this curve
-    this._sampleParam = [];            //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)
+    this._samples = [];                 //polyline representation of this curve in stage world space
+    this._sampleParam = [];             //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)
     this._anchorSampleIndex = [];       //index within _samples corresponding to anchor points
-    
+
+    this._LocalPoints = [];             //polyline representation of this curve in canvas space
+    this._LocalBBoxMin = [0,0,0];       //bbox min point of _LocalPoints
+    this._LocalBBoxMax = [0,0,0];       //bbox max point of _LocalPoints
+
     this._UnprojectedAnchors = [];
 
     //initially set the _dirty bit so we will construct samples
     this._dirty = true;
 
+    //initially set the local dirty bit so we will construct local coordinates
+    this._isLocalDirty = true;
+
     //whether or not to use the canvas drawing to stroke/fill
     this._useCanvasDrawing = true;
 
@@ -69,7 +77,7 @@ var GLSubpath = function GLSubpath() {
     this._canvasY = 0;
 
     //stroke information
-    this._strokeWidth = 0.0;
+    this._strokeWidth = 1.0;
     this._strokeColor = [0.4, 0.4, 0.4, 1.0];
     this._strokeMaterial = null
     this._strokeStyle = "Solid";
@@ -109,6 +117,13 @@ var GLSubpath = function GLSubpath() {
         // return; //no need to do anything for now
     };
 
+    this._offsetLocalCoord = function(deltaW, deltaH){
+        var numPoints = this._LocalPoints.length;
+        for (var i=0;i<numPoints;i++) {
+            this._LocalPoints[i][0]+= deltaW;
+            this._LocalPoints[i][1]+= deltaH;
+        }
+    };
     //render
     //  specify how to render the subpath in Canvas2D
     this.render = function () {
@@ -116,35 +131,65 @@ var GLSubpath = function GLSubpath() {
         var world = this.getWorld();
         if (!world)  throw( "null world in subpath render" );
 
-         // get the context
+        // get the context
         var ctx = world.get2DContext();
-        if (!ctx)  throw ("null context in subpath render")
+        if (!ctx)  throw ("null context in subpath render");
 
         var numAnchors = this.getNumAnchors();
         if (numAnchors === 0) {
             return; //nothing to do for empty paths
         }
+        var useLocalCoord = true;
+        this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
 
-        ctx.save();
+        //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord
+        this.buildLocalCoord();
 
-        this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
-        var bboxMin = this.getBBoxMin();
-        var bboxMax = this.getBBoxMax();
-        var bboxWidth = bboxMax[0] - bboxMin[0];
-        var bboxHeight = bboxMax[1] - bboxMin[1];
-        var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
+        //
+        var bboxWidth=0, bboxHeight=0;
+        //var bboxMid=[0,0,0];
+        if (useLocalCoord){
+            bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0];
+            bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1];
+            //bboxMid = [0.5 * (this._LocalBBoxMax[0] + this._LocalBBoxMin[0]), 0.5 * (this._LocalBBoxMax[1] + this._LocalBBoxMin[1]), 0.5 * (this._LocalBBoxMax[2] + this._LocalBBoxMin[2])];
+        }
+        else {
+            var bboxMin = this.getBBoxMin();
+            var bboxMax = this.getBBoxMax();
+            bboxWidth = bboxMax[0] - bboxMin[0];
+            bboxHeight = bboxMax[1] - bboxMin[1];
+            //bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
+        }
 
         if (this._canvas) {
+            /*
+            var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+            //compute the plane center as the midpoint of the local bbox converted to stage world space
+            var planeCenter =  ViewUtils.localToStageWorld(bboxMid, this._canvas);
+            planeCenter[0]+=400; planeCenter[1]+=300; //todo replace these lines with the correct call for the offset
+            console.log("PEN: local bboxMid: "+ bboxMid +", stage-world bboxMid: "+ planeCenter);
+            var newLeft = planeCenter[0] - 0.5*bboxWidth;
+            console.log("PEN: newLeft: "+ newLeft +", bboxWidth: "+bboxWidth);
+            newLeft = Math.round(newLeft);//Math.round(this._planeCenter[0] - 0.5 * bboxWidth);
+            console.log("PEN: newLeft rounded: "+ newLeft);
+            var newTop = Math.round(planeCenter[1] - 0.5 * bboxHeight);//Math.round(this._planeCenter[1] - 0.5 * bboxHeight);
+            //assign the new position, width, and height as the canvas dimensions through the canvas controller
+            CanvasController.setProperty(this._canvas, "left", newLeft+"px");
+            CanvasController.setProperty(this._canvas, "top", newTop+"px");
             CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
             CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
             this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
+            */
         }
+        ctx.save();
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
 
         ctx.lineWidth = this._strokeWidth;
         ctx.strokeStyle = "black";
         if (this._strokeColor) {
-            ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
+            //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
+            var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
+            ctx.strokeStyle = strokeColorStr;
         }
 
         ctx.fillStyle = "white";
@@ -152,14 +197,13 @@ var GLSubpath = function GLSubpath() {
             //ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
             var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
             ctx.fillStyle = fillColorStr;
-            console.log("Fill color:" + fillColorStr);
         }
         var lineCap = ['butt','round','square'];
         ctx.lineCap = lineCap[1];
-        ctx.beginPath();
 
         /*
         commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered
+        ctx.beginPath();
         var prevAnchor = this.getAnchor(0);
         ctx.moveTo(prevAnchor.getPosX()-bboxMin[0],prevAnchor.getPosY()-bboxMin[1]);
         for (var i = 1; i < numAnchors; i++) {
@@ -176,16 +220,33 @@ var GLSubpath = function GLSubpath() {
         */
 
 
-        var numPoints = this._samples.length/3;
-        ctx.moveTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
-        for (var i=0;i<numPoints;i++){
-            ctx.lineTo(this._samples[3*i]-bboxMin[0],this._samples[3*i + 1]-bboxMin[1]);
+        var numPoints=0, i=0;
+        ctx.beginPath();
+        if (!useLocalCoord){
+            numPoints = this._samples.length/3;
+            ctx.moveTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
+            for (i=0;i<numPoints;i++){
+                ctx.lineTo(this._samples[3*i]-bboxMin[0],this._samples[3*i + 1]-bboxMin[1]);
+            }
+            if (this._isClosed === true) {
+                ctx.lineTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
+            }
+            ctx.fill();
+            ctx.stroke();
         }
-        if (this._isClosed === true) {
-            ctx.lineTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
+        else {
+            //render using the local coords
+            numPoints = this._LocalPoints.length;
+            ctx.