@shopify/react-native-skia 2.5.4 → 2.6.0

package/src/skia/types/Path/PathFactory.ts

@@ -1,6 +1,9 @@
 import type { SkFont } from "../Font";
+import type { SkRect } from "../Rect";
+import type { SkPoint } from "../Point";
+import type { InputRRect } from "../RRect";
 
-import type { SkPath, PathOp, PathCommand } from "./Path";
+import type { SkPath, PathOp, PathCommand, StrokeOpts } from "./Path";
 
 export interface PathFactory {
   Make(): SkPath;
@@ -31,4 +34,108 @@ export interface PathFactory {
    * Converts the text to a path with the given font at location x / y.
    */
   MakeFromText(text: string, x: number, y: number, font: SkFont): SkPath | null;
+
+  // Static shape factories
+
+  /**
+   * Creates a path containing a rectangle.
+   * @param rect - the rectangle
+   * @param isCCW - if true, draws counter-clockwise
+   */
+  Rect(rect: SkRect, isCCW?: boolean): SkPath;
+
+  /**
+   * Creates a path containing an oval (ellipse).
+   * @param rect - bounds of the oval
+   * @param isCCW - if true, draws counter-clockwise
+   * @param startIndex - index of initial point
+   */
+  Oval(rect: SkRect, isCCW?: boolean, startIndex?: number): SkPath;
+
+  /**
+   * Creates a path containing a circle.
+   * @param x - center x
+   * @param y - center y
+   * @param r - radius
+   */
+  Circle(x: number, y: number, r: number): SkPath;
+
+  /**
+   * Creates a path containing a rounded rectangle.
+   * @param rrect - the rounded rectangle
+   * @param isCCW - if true, draws counter-clockwise
+   */
+  RRect(rrect: InputRRect, isCCW?: boolean): SkPath;
+
+  /**
+   * Creates a path containing a line segment.
+   * @param p1 - start point
+   * @param p2 - end point
+   */
+  Line(p1: SkPoint, p2: SkPoint): SkPath;
+
+  /**
+   * Creates a path containing a polygon from the given points.
+   * @param points - array of points
+   * @param close - if true, close the polygon
+   */
+  Polygon(points: SkPoint[], close: boolean): SkPath;
+
+  // Static path operations
+
+  /**
+   * Creates a new stroked path from the input path.
+   * @param path - source path to stroke
+   * @param opts - stroke options (width, cap, join, miter_limit, precision)
+   * @returns stroked path or null if operation fails
+   */
+  Stroke(path: SkPath, opts?: StrokeOpts): SkPath | null;
+
+  /**
+   * Creates a trimmed path from the input path.
+   * @param path - source path
+   * @param start - start of trim (0-1)
+   * @param end - end of trim (0-1)
+   * @param isComplement - if true, returns the complement
+   * @returns trimmed path or null if operation fails
+   */
+  Trim(
+    path: SkPath,
+    start: number,
+    end: number,
+    isComplement: boolean
+  ): SkPath | null;
+
+  /**
+   * Simplifies the path to non-overlapping contours.
+   * @param path - source path
+   * @returns simplified path or null if operation fails
+   */
+  Simplify(path: SkPath): SkPath | null;
+
+  /**
+   * Creates a dashed version of the path.
+   * @param path - source path
+   * @param on - length of dash
+   * @param off - length of gap
+   * @param phase - offset into dash pattern
+   * @returns dashed path or null if operation fails
+   */
+  Dash(path: SkPath, on: number, off: number, phase: number): SkPath | null;
+
+  /**
+   * Creates a path with Winding fill type.
+   * @param path - source path
+   * @returns path with winding fill or null if operation fails
+   */
+  AsWinding(path: SkPath): SkPath | null;
+
+  /**
+   * Interpolates between two paths.
+   * @param start - starting path
+   * @param end - ending path
+   * @param weight - interpolation weight (0 = start, 1 = end)
+   * @returns interpolated path or null if paths are not interpolatable
+   */
+  Interpolate(start: SkPath, end: SkPath, weight: number): SkPath | null;
 }

package/src/skia/types/Path/index.ts

@@ -1,2 +1,4 @@
 export * from "./Path";
+export * from "./PathBuilder";
+export * from "./PathBuilderFactory";
 export * from "./PathFactory";

package/src/skia/types/Skia.ts

@@ -1,5 +1,5 @@
 import type { ImageFilterFactory } from "./ImageFilter";
-import type { PathFactory } from "./Path";
+import type { PathFactory, PathBuilderFactory } from "./Path";
 import type { ColorFilterFactory } from "./ColorFilter";
 import type { SkFont, FontMgrFactory } from "./Font";
 import type { SkTypeface, TypefaceFactory } from "./Typeface";
@@ -67,6 +67,7 @@ export interface Skia {
   PictureRecorder: () => SkPictureRecorder;
   Picture: PictureFactory;
   Path: PathFactory;
+  PathBuilder: PathBuilderFactory;
   Matrix: (matrix?: readonly number[]) => SkMatrix;
   ColorFilter: ColorFilterFactory;
   Font: (typeface?: SkTypeface, size?: number) => SkFont;

package/src/skia/web/Host.ts

@@ -64,7 +64,13 @@ export const getEnum = (
   if (typeof e !== "function") {
     throw new Error(`${name} is not an number`);
   }
-  const result = Object.values(e).find(({ value }) => value === v);
+  const result = Object.values(e).find(
+    (entry) =>
+      entry !== null &&
+      typeof entry === "object" &&
+      "value" in entry &&
+      entry.value === v
+  );
   if (!result) {
     throw new Error(
       `Enum ${name} does not have value ${v} on React Native Web`

package/src/skia/web/JsiSkCanvas.ts

@@ -272,7 +272,9 @@ export class JsiSkCanvas
   }
 
   drawPath(path: SkPath, paint: SkPaint) {
-    this.ref.drawPath(JsiSkPath.fromValue(path), JsiSkPaint.fromValue(paint));
+    const p = JsiSkPath.pathFromValue(path);
+    this.ref.drawPath(p, JsiSkPaint.fromValue(paint));
+    p.delete();
   }
 
   drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont) {
@@ -369,11 +371,9 @@ export class JsiSkCanvas
   }
 
   clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipPath(
-      JsiSkPath.fromValue(path),
-      getEnum(this.CanvasKit, "PathOp", op),
-      doAntiAlias
-    );
+    const p = JsiSkPath.pathFromValue(path);
+    this.ref.clipPath(p, getEnum(this.CanvasKit, "PathOp", op), doAntiAlias);
+    p.delete();
   }
 
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {

package/src/skia/web/JsiSkContourMeasure.ts

@@ -23,10 +23,10 @@ export class JsiSkContourMeasure
   }
 
   getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {
-    return new JsiSkPath(
-      this.CanvasKit,
-      this.ref.getSegment(startD, stopD, startWithMoveTo)
-    );
+    const segment = this.ref.getSegment(startD, stopD, startWithMoveTo);
+    const builder = new this.CanvasKit.PathBuilder(segment);
+    segment.delete();
+    return new JsiSkPath(this.CanvasKit, builder);
   }
 
   isClosed() {