Allow rectangle and oval shapes to be created with 0 px stroke size. Line shapes' stroke size will still be restricted to a minimum of 1 px.v0.7.2

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

5 files changed, 53 insertions, 49 deletions

diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 7503f257..959feec6 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -66,7 +66,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                 "properties": {
                     "element": {"#": "strokeControl"},
-                    "minValue": 1,
+                    "minValue": 0,
                     "maxValue": 100,
                     "value": 1,
                     "decimalPlace": 10,
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index 40ad0dd0..c5b22188 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -209,12 +209,14 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, {
                     this._fillColorCtrlIcon.style["display"] = "none";
                     this._fillColorCtrlIcon.visible = false;
                     this.endDivider.style["display"] = "none";
+                    this._strokeSize.minValue = 1;
                 } else {
                     this._fillColorCtrlContainer.style["display"] = "";
                     this._fillColorCtrlContainer.visible = true;
                     this._fillColorCtrlIcon.style["display"] = "";
                     this._fillColorCtrlIcon.visible = true;
                     this.endDivider.style["display"] = "";
+                    this._strokeSize.minValue = 0;
                 }
 
                 if (this._useWebGL.checked) {
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index f36f11e6..489938d5 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -499,7 +499,7 @@ exports.PiData = Montage.create( Montage, {
                             prop : "strokeSize",
                             label : "Stroke",
                             inputFunction: parseFloat,
-                            min :   0,
+                            min :   1,
                             max :   100,
                             value : 1,
                             unit : "px",
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 4995c2cb..28a99956 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -669,53 +669,33 @@ exports.Circle = Object.create(GeomObj, {
                 mat[5] = yScale;
 
                 // set up the stroke style
-                ctx.beginPath();
-                ctx.lineWidth   = lineWidth;
-                if (this._strokeColor) {
-                    if(this._strokeColor.gradientMode) {
-                        if(this._strokeColor.gradientMode === "radial") {
-                            gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
-                                                                xCtr, yCtr, 0.5*Math.max(this._height, this._width));
-                        } else {
-                            gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
-                        }
-                        colors = this._strokeColor.color;
-
-                        len = colors.length;
-
-                        for(j=0; j<len; j++) {
-                            position = colors[j].position/100;
-                            cs = colors[j].value;
-                            gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                        }
-
-                        ctx.strokeStyle = gradient;
+                if(lineWidth > 0) {
+                    ctx.beginPath();
+                    ctx.lineWidth   = lineWidth;
+                    if (this._strokeColor) {
+                        if(this._strokeColor.gradientMode) {
+                            if(this._strokeColor.gradientMode === "radial") {
+                                gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
+                                                                    xCtr, yCtr, 0.5*Math.max(this._height, this._width));
+                            } else {
+                                gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
+                            }
+                            colors = this._strokeColor.color;
 
-                    } else {
-                        c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                        ctx.strokeStyle = c;
-                    }
-                    // draw the stroke
-                    p = MathUtils.transformPoint( bezPts[0],   mat );
-                    ctx.moveTo( p[0],  p[1] );
-                    index = 1;
-                    while (index < n) {
-                        var p0   = MathUtils.transformPoint( bezPts[index],  mat );
-                        var p1 = MathUtils.transformPoint( bezPts[index+1],  mat );
+                            len = colors.length;
 
-                        var x0 = p0[0],  y0 = p0[1],
-                            x1 = p1[0],  y1 = p1[1];
-                        ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
-                        index += 2;
-                    }
+                            for(j=0; j<len; j++) {
+                                position = colors[j].position/100;
+                                cs = colors[j].value;
+                                gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                            }
 
-                    if (MathUtils.fpSign(innerRad) > 0) {
-                        // calculate the stroke matrix
-                        xScale = 0.5*innerRad*this._width  - 0.5*lineWidth;
-                        yScale = 0.5*innerRad*this._height - 0.5*lineWidth;
-                        mat[0] = xScale;
-                        mat[5] = yScale;
+                            ctx.strokeStyle = gradient;
 
+                        } else {
+                            c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                            ctx.strokeStyle = c;
+                        }
                         // draw the stroke
                         p = MathUtils.transformPoint( bezPts[0],   mat );
                         ctx.moveTo( p[0],  p[1] );
@@ -729,10 +709,32 @@ exports.Circle = Object.create(GeomObj, {
                             ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
                             index += 2;
                         }
-                    }
 
-                    // render the stroke
-                    ctx.stroke();
+                        if (MathUtils.fpSign(innerRad) > 0) {
+                            // calculate the stroke matrix
+                            xScale = 0.5*innerRad*this._width  - 0.5*lineWidth;
+                            yScale = 0.5*innerRad*this._height - 0.5*lineWidth;
+                            mat[0] = xScale;
+                            mat[5] = yScale;
+
+                            // draw the stroke
+                            p = MathUtils.transformPoint( bezPts[0],   mat );
+                            ctx.moveTo( p[0],  p[1] );
+                            index = 1;
+                            while (index < n) {
+                                var p0   = MathUtils.transformPoint( bezPts[index],  mat );
+                                var p1 = MathUtils.transformPoint( bezPts[index+1],  mat );
+
+                                var x0 = p0[0],  y0 = p0[1],
+                                    x1 = p1[0],  y1 = p1[1];
+                                ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
+                                index += 2;
+                            }
+                        }
+
+                        // render the stroke
+                        ctx.stroke();
+                    }
                 }
             }
         }
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index f3db92af..b34a97ab 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -603,7 +603,7 @@ exports.Rectangle = Object.create(GeomObj, {
 
             // render the stroke
             ctx.beginPath();
-            if (this._strokeColor) {
+            if (this._strokeColor && (lw > 0)) {
                 inset = Math.ceil( 0.5*lw ) - 0.5;
 
                 if(this._strokeColor.gradientMode) {