New RoundedRect class

Author: plegner

src/draw-svg.ts

@@ -11,7 +11,7 @@ import {intersections} from './intersection';
 import {Line} from './line';
 import {Point} from './point';
 import {Rectangle} from './rectangle';
-import {isAngle, isArc, isCircle, isEllipse, isLine, isPolygon, isPolyline, isRay, isRectangle, isSector, isSegment} from './types';
+import {isAngle, isArc, isCircle, isEllipse, isLine, isPolygon, isPolyline, isRay, isRectangle, isRoundedRect, isSector, isSegment} from './types';
 import {GeoElement} from './utilities';
 
 
@@ -105,6 +105,15 @@ function drawArcArrows(x: Arc, type: LineArrow) {
   return path;
 }
 
+const p1 = 0.55192;
+const p2 = 1 - p1;
+export function drawRoundedRect(rect: Rectangle, radius: number[]) {
+  const [tl, tr, br, bl] = radius;  // top-left, top-right, btm-right, btm-left
+  const {p, w, h} = rect;
+  const wx = w - tl - tr;
+  return `M${p.x} ${p.y + tl}c0 ${-p1 * tl} ${p2 * tl} ${-tl} ${tl} ${-tl}h${wx}c${p1 * tr} 0 ${tr} ${p2 * tr} ${tr} ${tr}v${h - tr - br}c0 ${p1 * br} ${-p2 * br} ${br} ${-br} ${br}h${-wx}c${-p1 * bl} 0 ${-bl} ${-p2 * bl} ${-bl} ${-bl}Z`;
+}
+
 
 // -----------------------------------------------------------------------------
 // Draw Function
@@ -171,6 +180,12 @@ export function drawSVG(obj: GeoElement, options: SVGDrawingOptions = {}): strin
     return `${drawPath(...obj.points)}Z`;
   }
 
+  if (isRoundedRect(obj)) {
+    const rect = obj.unsigned;
+    const r = Math.min(obj.radius, rect.w / 2, rect.h / 2);
+    return drawRoundedRect(rect, [r, r, r, r]);
+  }
+
   if (isRectangle(obj)) {
     return `${drawPath(...obj.polygon.points)}Z`;
   }

src/rectangle.ts

@@ -14,7 +14,7 @@ import {GeoShape, SimplePoint, TransformMatrix} from './utilities';
 
 /** A rectangle, defined by its top left vertex, width and height. */
 export class Rectangle implements GeoShape {
-  readonly type = 'rectangle';
+  readonly type: string = 'rectangle';
 
   constructor(readonly p: Point, readonly w = 1, readonly h = w) {}
 
@@ -48,7 +48,11 @@ export class Rectangle implements GeoShape {
   }
 
   get area() {
-    return Math.abs(this.w * this.h);
+    return Math.abs(this.signedArea);
+  }
+
+  get signedArea() {
+    return this.w * this.h;
   }
 
   /** @returns {Segment[]} */
@@ -82,6 +86,16 @@ export class Rectangle implements GeoShape {
     return new Rectangle(this.p.shift(-left, -top), this.w + left + right, this.h + top + bottom);
   }
 
+  round(radius: number) {
+    return new RoundedRect(this.p, this.w, this.h, radius);
+  }
+
+  get unsigned(): Rectangle {
+    if (this.w > 0 && this.h > 0) return this;
+    const p = this.p.shift(this.w < 0 ? this.w : 0, this.h < 0 ? this.h : 0);
+    return new Rectangle(p, Math.abs(this.w), Math.abs(this.h));
+  }
+
   // ---------------------------------------------------------------------------
 
   contains(p: Point, tolerance?: number) {
@@ -145,3 +159,21 @@ export class Rectangle implements GeoShape {
     return `rectangle(${this.p},${this.w},${this.h})`;
   }
 }
+
+/** A triangle defined by its three vertices. */
+export class RoundedRect extends Rectangle {
+  readonly type = 'rounded-rect';
+
+  constructor(p: Point, w = 1, h = w, readonly radius = 0) {
+    super(p, w, h);
+  }
+
+  scale(sx: number, sy = sx) {
+    const r1 = this.radius * (sx + sy) / 2;
+    return super.scale(sx, sy).round(r1);
+  }
+
+  shift(x: number, y = x) {
+    return super.shift(x, y).round(this.radius);
+  }
+}

src/types.ts

@@ -11,12 +11,12 @@ import {Ellipse} from './ellipse';
 import {Line, Ray, Segment} from './line';
 import {Point} from './point';
 import {Polygon, Polyline} from './polygon';
-import {Rectangle} from './rectangle';
+import {Rectangle, RoundedRect} from './rectangle';
 import {GeoElement} from './utilities';
 
 
 export function isPolygonLike(shape: GeoElement): shape is Polygon|Rectangle {
-  return ['polygon', 'polyline', 'rectangle', 'triangle'].includes(shape.type);
+  return ['polygon', 'polyline', 'rectangle', 'rounded-rect', 'triangle'].includes(shape.type);
 }
 
 export function isPolygon(shape: GeoElement): shape is Polygon {
@@ -31,6 +31,10 @@ export function isRectangle(shape: GeoElement): shape is Rectangle {
   return shape.type === 'rectangle';
 }
 
+export function isRoundedRect(shape: GeoElement): shape is RoundedRect {
+  return shape.type === 'rounded-rect';
+}
+
 export function isLineLike(shape: GeoElement): shape is Line|Ray|Segment {
   return ['line', 'ray', 'segment'].includes(shape.type);
 }