1 files changed, 227 insertions, 68 deletions

diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js
index 2899e476..e34532d2 100644
--- a/js/helper-classes/RDGE/GLRectangle.js
+++ b/js/helper-classes/RDGE/GLRectangle.js
@@ -210,8 +210,11 @@ function GLRectangle()
                 // get the world
                 var world = this.getWorld();
                 if (!world)  throw( "null world in buildBuffers" );
-
+                //console.log( "GLRectangle.buildBuffers " + world._worldCount );
                 if (!world._useWebGL)  return;
+                
+                // make sure RDGE has the correct context
+                g_Engine.setContext( world.getCanvas().uuid );
 
                 // create the gl buffer
                 var gl = world.getGLContext();
@@ -284,6 +287,7 @@ function GLRectangle()
                 xFill -= strokeSize;
                 yFill -= strokeSize;
                 var fillMaterial = this.makeFillMaterial();
+                //console.log( "fillMaterial: " + fillMaterial.getName() );
                 var fillPrim = this.createFill([x,y],  2*xFill,  2*yFill,  tlRadius, blRadius, brRadius, trRadius, fillMaterial);
         this._primArray.push( fillPrim );
                 this._materialNodeArray.push( fillMaterial.getMaterialNode() );
@@ -313,71 +317,72 @@ function GLRectangle()
                 var width  = Math.round(this.getWidth()),
                         height = Math.round(this.getHeight());
 
+                // get the top left point
                 pt = [inset, inset];    // top left corner
+                rad = this.getTLRadius() - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] += rad;
+                if (MathUtils.fpSign(rad) == 0)  pt[1] = 0;
+                ctx.moveTo( pt[0],  pt[1] );
+
+                // get the bottom left point
+                pt = [inset, height - inset];
+                rad = this.getBLRadius() - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] -= rad;
+                ctx.lineTo( pt[0],  pt[1] );
+
+                // get the bottom left arc
+                if (MathUtils.fpSign(rad) > 0)
+                {
+                        ctr = [ this.getBLRadius(),  height - this.getBLRadius() ];
+                        //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx  );
+                        ctx.arc( ctr[0], ctr[1],    rad,    Math.PI,   0.5*Math.PI,  true );
+                }
 
-                var tlRad = this._tlRadius; //top-left radius
-                var trRad = this._trRadius;
-                var blRad = this._blRadius;
-                var brRad = this._brRadius;
+                // do the bottom of the rectangle
+                pt = [width - inset,  height - inset];
+                rad = this.getBRRadius() - inset;
+                if (rad < 0)  rad = 0;
+                pt[0] -= rad;
+                ctx.lineTo( pt[0], pt[1] );
 
-                if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
+                // get the bottom right arc
+                if (MathUtils.fpSign(rad) > 0)
                 {
-                        ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset);
+                        ctr = [width - this.getBRRadius(),  height - this.getBRRadius()];
+                        //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx  );
+                        ctx.arc( ctr[0], ctr[1],   rad,   0.5*Math.PI,  0.0,  true );
                 }
-                else
+
+                // get the right of the rectangle
+                pt = [width - inset,  inset];
+                rad = this.getTRRadius() - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] += rad;
+                ctx.lineTo( pt[0], pt[1] );
+
+                // do the top right corner
+                if (MathUtils.fpSign(rad) > 0)
+                {
+                        ctr = [width - this.getTRRadius(),  this.getTRRadius()];
+                        //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
+                        ctx.arc( ctr[0], ctr[1],   rad,   0.0,  -0.5*Math.PI,  true );
+                }
+
+                // do the top of the rectangle
+                pt = [inset, inset]
+                rad = this.getTLRadius() - inset;
+                if (rad < 0)  rad = 0;
+                pt[0] += rad;
+                ctx.lineTo( pt[0], pt[1] );
+
+                // do the top left corner
+                if (MathUtils.fpSign(rad) > 0)
                 {
-                        // get the top left point
-                        rad = tlRad - inset;
-                        if (rad < 0)  rad = 0;
-                        pt[1] += rad;
-                        if (MathUtils.fpSign(rad) == 0)  pt[1] = inset;
-                        ctx.moveTo( pt[0],  pt[1] );
-
-                        // get the bottom left point
-                        pt = [inset, height - inset];
-                        rad = blRad - inset;
-                        if (rad < 0)  rad = 0;
-                        pt[1] -= rad;
-                        ctx.lineTo( pt[0],  pt[1] );
-
-                        // get the bottom left curve
-                        if (MathUtils.fpSign(rad) > 0)
-                                ctx.quadraticCurveTo( inset, height-inset,  inset+rad, height-inset );
-
-                        // do the bottom of the rectangle
-                        pt = [width - inset,  height - inset];
-                        rad = brRad - inset;
-                        if (rad < 0)  rad = 0;
-                        pt[0] -= rad;
-                        ctx.lineTo( pt[0], pt[1] );
-
-                        // get the bottom right arc
-                        if (MathUtils.fpSign(rad) > 0)
-                                ctx.quadraticCurveTo( width-inset, height-inset,  width-inset, height-inset-rad );
-
-                        // get the right of the rectangle
-                        pt = [width - inset,  inset];
-                        rad = trRad - inset;
-                        if (rad < 0)  rad = 0;
-                        pt[1] += rad;
-                        ctx.lineTo( pt[0], pt[1] );
-
-                        // do the top right corner
-                        if (MathUtils.fpSign(rad) > 0)
-                                ctx.quadraticCurveTo( width-inset, inset,  width-inset-rad, inset );
-
-                        // do the top of the rectangle
-                        pt = [inset, inset]
-                        rad = tlRad - inset;
-                        if (rad < 0)  rad = 0;
-                        pt[0] += rad;
-                        ctx.lineTo( pt[0], pt[1] );
-
-                        // do the top left corner
-                        if (MathUtils.fpSign(rad) > 0)
-                                ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
-                        else
-                                ctx.lineTo( inset, 2*inset );
+                        ctr = [this.getTLRadius(),  this.getTLRadius()];
+                        //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx );
+                        ctx.arc( ctr[0], ctr[1],   rad,   -0.5*Math.PI,  Math.PI,  true );
                 }
         }
 
@@ -396,20 +401,32 @@ function GLRectangle()
                 var     w = world.getViewportWidth(),
                         h = world.getViewportHeight();
                 
-                // set the fill
+                // draw the fill
                 ctx.beginPath();
                 ctx.fillStyle   = "#990000";
+                //ctx.strokeStyle = "#0000ff";
                 if (this._fillColor)
                         ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
 
-                // set the stroke
+                //ctx.lineWidth = 0;
+                //ctx.rect( lw, lw,  w - 2*lw,  h- 2*lw );
+                //this.renderPath( lw, ctx )
+                //ctx.fill();
+                //ctx.closePath();
+
+                // draw the stroke
+                //ctx.beginPath();
+                //ctx.fillStyle   = "#990000";
                 ctx.strokeStyle = "#0000ff";
                 if (this._strokeColor)
                         ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
 
                 ctx.lineWidth   = lw;
+                //ctx.rect( 0.5*lw, 0.5*lw,  w-lw,  h-lw );
                 var inset = Math.ceil( 0.5*lw ) + 0.5;
+//              console.log( "linewidth: " + lw + ", inset: " + inset+ ", width: " + Math.round(this.getWidth()) + ", height: " + Math.round(this.getHeight()) );
                 this.renderPath( inset, ctx );
+                //this.renderPath( lw, ctx );
                 ctx.fill();
                 ctx.stroke();
                 ctx.closePath();
@@ -418,7 +435,7 @@ function GLRectangle()
         this.createStroke = function(ctr,  width,  height,  strokeWidth,  tlRad, blRad, brRad, trRad, material)
         {
                 // create the geometry
-                var prim = RectangleStroke.create( ctr,  width, height, strokeWidth,  tlRad, blRad,  brRad, trRad)
+                var prim = RectangleStroke.create( ctr,  width, height, strokeWidth,  tlRad, blRad,  brRad, trRad, material)
                 return prim;
         }
 
@@ -428,9 +445,9 @@ function GLRectangle()