adding round() to rectangle shapes

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Adding `Rune.Image` to draw images in a SVG element
 - `strokeWidth` is now scaled when calling `.scale()` on a shape
+- Adding `round()` function to rectangles
 
 ## 0.2.13
 

TODO.md

@@ -1,8 +1,5 @@
 # TODO
 
-- [ ] Strokeweight scale
-- [ ] Rounded rect
-
 - [ ] Rewrite with react and redux. Prevent re-drawing all the time.
 - [ ] Text layout with bounds, lineHeight, etc
 - [ ] Ability to pass vectors into x,y functions

src/render.js

@@ -58,6 +58,8 @@ class Render {
       width: this.s(rect.vars.width),
       height: this.s(rect.vars.height)
     }
+    if(rect.vars.rx)  attr.rx = this.s(rect.vars.rx);
+    if(rect.vars.ry)  attr.ry = this.s(rect.vars.ry);
     this.transformAttribute(attr, rect);
     this.styleableAttributes(rect, attr);
     return svg('rect', attr);

src/shapes/rectangle.js

@@ -15,6 +15,12 @@ class Rectangle {
     this.vars.height = height;
   }
 
+  round(rx, ry) {
+    if(!ry) ry = rx;
+    this.vars.rx = rx;
+    this.vars.ry = ry;
+  }
+
   toPolygon(opts, parent) {
     var poly =  new Polygon(this.vars.x, this.vars.y)
       .lineTo(0, 0)

test/shared/render.js

@@ -64,10 +64,19 @@ describe("Rune.Render", function() {
         width: s.vars.width,
         height: s.vars.height
       });
+      expect(rect).toNotHaveAttr("rx");
+      expect(rect).toNotHaveAttr("ry");
       expect(rect).not.toHaveTranslation(100, 105);
       expectShared(rect);
     });
 
+    it("should render rounded corners", function() {
+      var s = r.rect(100, 105, 300, 400).round(25, 15);
+      r.draw();
+      var rect = el.childNodes[0];
+      expect(rect).toHaveAttrs({ rx: 25, ry: 15 });
+    });
+
   });
 
   describe("Rune.Ellipse", function() {

test/shared/shapes/rect.js

@@ -72,6 +72,22 @@ describe("Rune.Rectangle", function() {
 
   });
 
+  describe("round()", function() {
+
+    it('sets uniform round corners', function() {
+      s.round(25);
+      expect(s.vars.rx).toEqual(25);
+      expect(s.vars.ry).toEqual(25);
+    });
+
+    it('sets roundness for both x and y', function() {
+      s.round(25, 15);
+      expect(s.vars.rx).toEqual(25);
+      expect(s.vars.ry).toEqual(15);
+    });
+
+  });
+
   describe("scale()", function() {
 
     it("scales the rectangle", function() {