fix rounded rects when either rx or ry is omitted

- when rx===ry===0 write a regular rect instead of a rounded rect with 0 radius

fixes #82

Author: HackbrettXXX

src/nodes/rect.ts

@@ -16,29 +16,36 @@ export class Rect extends GeometryNode {
     if (!isFinite(w) || w <= 0 || !isFinite(h) || h <= 0) {
       return null
     }
-    const MyArc = (4 / 3) * (Math.SQRT2 - 1),
-      rx = Math.min(
-        parseFloat(getAttribute(this.element, context.styleSheets, 'rx') || '0'),
-        w * 0.5
-      ),
-      ry = Math.min(
-        parseFloat(getAttribute(this.element, context.styleSheets, 'ry') || '0'),
-        h * 0.5
-      )
-    let x = parseFloat(getAttribute(this.element, context.styleSheets, 'x') || '0'),
-      y = parseFloat(getAttribute(this.element, context.styleSheets, 'y') || '0')
 
-    return new Path()
-      .moveTo((x += rx), y)
-      .lineTo((x += w - 2 * rx), y)
-      .curveTo(x + rx * MyArc, y, x + rx, y + (ry - ry * MyArc), (x += rx), (y += ry))
-      .lineTo(x, (y += h - 2 * ry))
-      .curveTo(x, y + ry * MyArc, x - rx * MyArc, y + ry, (x -= rx), (y += ry))
-      .lineTo((x += -w + 2 * rx), y)
-      .curveTo(x - rx * MyArc, y, x - rx, y - ry * MyArc, (x -= rx), (y -= ry))
-      .lineTo(x, (y += -h + 2 * ry))
-      .curveTo(x, y - ry * MyArc, x + rx * MyArc, y - ry, (x += rx), (y -= ry))
-      .close()
+    const rxAttr = getAttribute(this.element, context.styleSheets, 'rx')
+    const ryAttr = getAttribute(this.element, context.styleSheets, 'ry')
+    const rx = Math.min(parseFloat(rxAttr || ryAttr || '0'), w * 0.5)
+    const ry = Math.min(parseFloat(ryAttr || rxAttr || '0'), h * 0.5)
+
+    let x = parseFloat(getAttribute(this.element, context.styleSheets, 'x') || '0')
+    let y = parseFloat(getAttribute(this.element, context.styleSheets, 'y') || '0')
+
+    const arc = (4 / 3) * (Math.SQRT2 - 1)
+    if (rx === 0 && ry === 0) {
+      return new Path()
+        .moveTo(x, y)
+        .lineTo(x + w, y)
+        .lineTo(x + w, y + h)
+        .lineTo(x, y + h)
+        .close()
+    } else {
+      return new Path()
+        .moveTo((x += rx), y)
+        .lineTo((x += w - 2 * rx), y)
+        .curveTo(x + rx * arc, y, x + rx, y + (ry - ry * arc), (x += rx), (y += ry))
+        .lineTo(x, (y += h - 2 * ry))
+        .curveTo(x, y + ry * arc, x - rx * arc, y + ry, (x -= rx), (y += ry))
+        .lineTo((x += -w + 2 * rx), y)
+        .curveTo(x - rx * arc, y, x - rx, y - ry * arc, (x -= rx), (y -= ry))
+        .lineTo(x, (y += -h + 2 * ry))
+        .curveTo(x, y - ry * arc, x + rx * arc, y - ry, (x += rx), (y -= ry))
+        .close()
+    }
   }
 
   protected computeNodeTransformCore(context: Context): Matrix {

test/common/tests.js

@@ -36,6 +36,7 @@ window.tests = [
   'pattern-units',
   'patterns',
   'polyline',
+  'rect',
   'references',
   'remote-images',
   'strokes-and-bounding-boxes',