Add support for nonuniform rounded rects

wcandillon · wcandillon · commit be596c45cf9e · 2023-12-30T07:53:40.000+01:00
diff --git a/package/cpp/api/JsiSkRRect.h b/package/cpp/api/JsiSkRRect.h
@@ -61,9 +61,33 @@ class JsiSkRRect : public JsiSkWrappingSharedPtrHostObject<SkRRect> {
     } else {
       auto rect =
           JsiSkRect::fromValue(runtime, object.getProperty(runtime, "rect"));
-      auto rx = object.getProperty(runtime, "rx").asNumber();
-      auto ry = object.getProperty(runtime, "ry").asNumber();
-      return std::make_shared<SkRRect>(SkRRect::MakeRectXY(*rect, rx, ry));
+      if (!object.getProperty(runtime, "rx").isUndefined()) {
+        auto rx = object.getProperty(runtime, "rx").asNumber();
+        auto ry = object.getProperty(runtime, "ry").asNumber();
+        return std::make_shared<SkRRect>(SkRRect::MakeRectXY(*rect, rx, ry));
+      } else if (object.getProperty(runtime, "topLeft").isObject() &&
+                 object.getProperty(runtime, "topRight").isObject() &&
+                 object.getProperty(runtime, "bottomRight").isObject() &&
+                 object.getProperty(runtime, "bottomLeft").isObject()) {
+        std::vector<SkPoint> points;
+        std::shared_ptr<SkPoint> topLeft = JsiSkPoint::fromValue(
+            runtime, object.getProperty(runtime, "topLeft").asObject(runtime));
+		  std::shared_ptr<SkPoint> topRight = JsiSkPoint::fromValue(
+		runtime, object.getProperty(runtime, "topRight").asObject(runtime));
+		  std::shared_ptr<SkPoint> bottomRight = JsiSkPoint::fromValue(
+		runtime, object.getProperty(runtime, "bottomRight").asObject(runtime));
+		  std::shared_ptr<SkPoint> bottomLeft = JsiSkPoint::fromValue(
+		runtime, object.getProperty(runtime, "bottomLeft").asObject(runtime));
+	    points.push_back(*topLeft.get());
+		  points.push_back(*topRight.get());
+		  points.push_back(*bottomRight.get());
+		  points.push_back(*bottomLeft.get());
+        auto rrect = SkRRect::MakeEmpty();
+        rrect.setRectRadii(*rect, points.data());
+        return std::make_shared<SkRRect>(rrect);
+      } else {
+        throw jsi::JSError(runtime, "Invalid RRect object");
+      }
     }
   }
 
diff --git a/package/src/dom/types/Common.ts b/package/src/dom/types/Common.ts
@@ -4,6 +4,7 @@ import type {
   BlendMode,
   Color,
   InputMatrix,
+  InputRRect,
   PaintStyle,
   SkPaint,
   SkPath,
@@ -48,7 +49,7 @@ export interface RRectCtor extends RectCtor {
 }
 
 export type RectDef = RectCtor | { rect: SkRect };
-export type RRectDef = RRectCtor | { rect: SkRRect };
+export type RRectDef = RRectCtor | { rect: InputRRect };
 
 export interface PointCircleDef {
   c?: Vector;
diff --git a/package/src/renderer/__tests__/e2e/Rect.spec.tsx b/package/src/renderer/__tests__/e2e/Rect.spec.tsx
@@ -1,4 +1,8 @@
-import { surface } from "../setup";
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { RoundedRect } from "../../components";
+import { importSkia, surface } from "../setup";
 
 describe("Rects and rounded rects", () => {
   it("The rounded rectangle radii should be scale to its maximum value", async () => {
@@ -26,4 +30,44 @@ describe("Rects and rounded rects", () => {
     });
     expect(result3).toEqual({ rx: 10, ry: 20 });
   });
+  it("Should draw a rounded rect with uniform values (1)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const image = await surface.draw(
+      <RoundedRect
+        x={0}
+        y={0}
+        width={width}
+        height={width}
+        r={r}
+        color="lightblue"
+      />
+    );
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with uniform values (2)", async () => {
+    const { Skia } = importSkia();
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = Skia.RRectXY(Skia.XYWHRect(0, 0, width, width), r, r);
+    const image = await surface.draw(
+      <RoundedRect rect={rrct} color="lightblue" />
+    );
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with uniform values (3)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = {
+      rect: { x: 0, y: 0, width, height: width },
+      topLeft: { x: r, y: r },
+      topRight: { x: r, y: r },
+      bottomRight: { x: r, y: r },
+      bottomLeft: { x: r, y: r },
+    };
+    const image = await surface.draw(
+      <RoundedRect rect={rrct} color="lightblue" />
+    );
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
 });
diff --git a/package/src/skia/types/Canvas.ts b/package/src/skia/types/Canvas.ts
@@ -5,7 +5,7 @@ import type { SkPath } from "./Path";
 import type { SkImage, MipmapMode, FilterMode, ImageInfo } from "./Image";
 import type { SkSVG } from "./SVG";
 import type { SkColor } from "./Color";
-import type { SkRRect } from "./RRect";
+import type { InputRRect } from "./RRect";
 import type { BlendMode } from "./Paint/BlendMode";
 import type { SkPoint, PointMode } from "./Point";
 import type { InputMatrix } from "./Matrix";
@@ -278,7 +278,7 @@ export interface SkCanvas {
    * @param rrect
    * @param paint
    */
-  drawRRect(rrect: SkRRect, paint: SkPaint): void;
+  drawRRect(rrect: InputRRect, paint: SkPaint): void;
 
   /**
    * Draws RRect outer and inner using clip, Matrix, and Paint paint.
@@ -287,7 +287,7 @@ export interface SkCanvas {
    * @param inner
    * @param paint
    */
-  drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint): void;
+  drawDRRect(outer: InputRRect, inner: InputRRect, paint: SkPaint): void;
 
   /**
    * Draws an oval bounded by the given rectangle using the current clip, current matrix,
@@ -479,7 +479,7 @@ export interface SkCanvas {
    * @param op
    * @param doAntiAlias
    */
-  clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean): void;
+  clipRRect(rrect: InputRRect, op: ClipOp, doAntiAlias: boolean): void;
 
   /**
    * Replaces current matrix with m premultiplied with the existing matrix.
diff --git a/package/src/skia/types/Path/Path.ts b/package/src/skia/types/Path/Path.ts
@@ -1,6 +1,6 @@
 import type { SkRect } from "../Rect";
 import type { SkPoint } from "../Point";
-import type { SkRRect } from "../RRect";
+import type { InputRRect } from "../RRect";
 import type { StrokeJoin, StrokeCap } from "../Paint";
 import type { InputMatrix, SkMatrix } from "../Matrix";
 import type { SkJSIInstance } from "../JsiInstance";
@@ -439,7 +439,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param rrect
    * @param isCCW
    */
-  addRRect(rrect: SkRRect, isCCW?: boolean): SkPath;
+  addRRect(rrect: InputRRect, isCCW?: boolean): SkPath;
 
   /** Appends src to SkPath, transformed by matrix. Transformed curves may have
      different verbs, SkPoint, and conic weights.
diff --git a/package/src/skia/types/RRect.ts b/package/src/skia/types/RRect.ts
@@ -1,3 +1,4 @@
+import type { SkPoint } from "./Point";
 import type { SkRect } from "./Rect";
 
 export interface SkRRect {
@@ -6,6 +7,16 @@ export interface SkRRect {
   readonly ry: number;
 }
 
+export interface NonUniformRRect {
+  readonly rect: SkRect;
+  readonly topLeft: SkPoint;
+  readonly topRight: SkPoint;
+  readonly bottomRight: SkPoint;
+  readonly bottomLeft: SkPoint;
+}
+
+export type InputRRect = SkRRect | NonUniformRRect;
+
 // We have an issue to check property existence on JSI backed instances
 export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/package/src/skia/web/JsiSkCanvas.ts b/package/src/skia/web/JsiSkCanvas.ts
@@ -19,7 +19,7 @@ import type {
   SkPicture,
   SkPoint,
   SkRect,
-  SkRRect,
+  InputRRect,
   SkSVG,
   SkTextBlob,
   SkVertices,
@@ -235,14 +235,14 @@ export class JsiSkCanvas
     );
   }
 
-  drawRRect(rrect: SkRRect, paint: SkPaint) {
+  drawRRect(rrect: InputRRect, paint: SkPaint) {
     this.ref.drawRRect(
       JsiSkRRect.fromValue(this.CanvasKit, rrect),
       JsiSkPaint.fromValue(paint)
     );
   }
 
-  drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
+  drawDRRect(outer: InputRRect, inner: InputRRect, paint: SkPaint) {
     this.ref.drawDRRect(
       JsiSkRRect.fromValue(this.CanvasKit, outer),
       JsiSkRRect.fromValue(this.CanvasKit, inner),
@@ -367,7 +367,7 @@ export class JsiSkCanvas
     );
   }
 
-  clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean) {
+  clipRRect(rrect: InputRRect, op: ClipOp, doAntiAlias: boolean) {
     this.ref.clipRRect(
       JsiSkRRect.fromValue(this.CanvasKit, rrect),
       getEnum(this.CanvasKit.PathOp, op),
diff --git a/package/src/skia/web/JsiSkPath.ts b/package/src/skia/web/JsiSkPath.ts
@@ -9,7 +9,7 @@ import type {
   SkPath,
   SkPoint,
   SkRect,
-  SkRRect,
+  InputRRect,
   StrokeOpts,
 } from "../types";
 
@@ -285,7 +285,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     return this;
   }
 
-  addRRect(rrect: SkRRect, isCCW?: boolean) {
+  addRRect(rrect: InputRRect, isCCW?: boolean) {
     this.ref.addRRect(JsiSkRRect.fromValue(this.CanvasKit, rrect), isCCW);
     return this;
   }
diff --git a/package/src/skia/web/JsiSkRRect.ts b/package/src/skia/web/JsiSkRRect.ts
@@ -1,6 +1,6 @@
 import type { CanvasKit, RRect } from "canvaskit-wasm";
 
-import type { SkRect, SkRRect } from "../types";
+import type { InputRRect, SkRect, SkRRect } from "../types";
 
 import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
@@ -13,10 +13,31 @@ export class JsiSkRRect
     // Float32Array
   };
 
-  static fromValue(CanvasKit: CanvasKit, rect: SkRRect) {
+  static fromValue(CanvasKit: CanvasKit, rect: InputRRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;
     }
+    if (
+      "topLeft" in rect &&
+      "topRight" in rect &&
+      "bottomRight" in rect &&
+      "bottomLeft" in rect
+    ) {
+      return Float32Array.of(
+        rect.rect.x,
+        rect.rect.y,
+        rect.rect.x + rect.rect.width,
+        rect.rect.y + rect.rect.height,
+        rect.topLeft.x,
+        rect.topLeft.y,
+        rect.topRight.x,
+        rect.topRight.y,
+        rect.bottomRight.x,
+        rect.bottomRight.y,
+        rect.bottomLeft.x,
+        rect.bottomLeft.y
+      );
+    }
     return CanvasKit.RRectXY(
       JsiSkRect.fromValue(CanvasKit, rect.rect),
       rect.rx,
