@shopify/react-native-skia 2.5.4 → 2.6.0

package/src/skia/web/JsiSkPathBuilder.ts

@@ -0,0 +1,293 @@
+import type { CanvasKit, PathBuilder as CKPathBuilder } from "canvaskit-wasm";
+
+import type {
+  FillType,
+  InputMatrix,
+  InputRRect,
+  SkMatrix,
+  SkPath,
+  SkPathBuilder,
+  SkPoint,
+  SkRect,
+} from "../types";
+
+import { getEnum, HostObject } from "./Host";
+import { JsiSkPath, toMatrix3x3 } from "./JsiSkPath";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkPoint } from "./JsiSkPoint";
+import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkRRect } from "./JsiSkRRect";
+
+/**
+ * Web implementation of SkPathBuilder using CanvasKit's native PathBuilder.
+ */
+export class JsiSkPathBuilder
+  extends HostObject<CKPathBuilder, "PathBuilder">
+  implements SkPathBuilder
+{
+  constructor(CanvasKit: CanvasKit, ref: CKPathBuilder) {
+    super(CanvasKit, ref, "PathBuilder");
+  }
+
+  // Movement methods
+  moveTo(x: number, y: number) {
+    this.ref.moveTo(x, y);
+    return this;
+  }
+
+  rMoveTo(x: number, y: number) {
+    this.ref.rMoveTo(x, y);
+    return this;
+  }
+
+  lineTo(x: number, y: number) {
+    this.ref.lineTo(x, y);
+    return this;
+  }
+
+  rLineTo(x: number, y: number) {
+    this.ref.rLineTo(x, y);
+    return this;
+  }
+
+  // Curve methods
+  quadTo(x1: number, y1: number, x2: number, y2: number) {
+    this.ref.quadTo(x1, y1, x2, y2);
+    return this;
+  }
+
+  rQuadTo(x1: number, y1: number, x2: number, y2: number) {
+    this.ref.rQuadTo(x1, y1, x2, y2);
+    return this;
+  }
+
+  conicTo(x1: number, y1: number, x2: number, y2: number, w: number) {
+    this.ref.conicTo(x1, y1, x2, y2, w);
+    return this;
+  }
+
+  rConicTo(x1: number, y1: number, x2: number, y2: number, w: number) {
+    this.ref.rConicTo(x1, y1, x2, y2, w);
+    return this;
+  }
+
+  cubicTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number
+  ) {
+    this.ref.cubicTo(x1, y1, x2, y2, x3, y3);
+    return this;
+  }
+
+  rCubicTo(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number
+  ) {
+    this.ref.rCubicTo(x1, y1, x2, y2, x3, y3);
+    return this;
+  }
+
+  close() {
+    this.ref.close();
+    return this;
+  }
+
+  // Arc methods
+  arcToOval(
+    oval: SkRect,
+    startAngleInDegrees: number,
+    sweepAngleInDegrees: number,
+    forceMoveTo: boolean
+  ) {
+    this.ref.arcToOval(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      startAngleInDegrees,
+      sweepAngleInDegrees,
+      forceMoveTo
+    );
+    return this;
+  }
+
+  arcToRotated(
+    rx: number,
+    ry: number,
+    xAxisRotateInDegrees: number,
+    useSmallArc: boolean,
+    isCCW: boolean,
+    x: number,
+    y: number
+  ) {
+    this.ref.arcToRotated(
+      rx,
+      ry,
+      xAxisRotateInDegrees,
+      useSmallArc,
+      isCCW,
+      x,
+      y
+    );
+    return this;
+  }
+
+  rArcTo(
+    rx: number,
+    ry: number,
+    xAxisRotateInDegrees: number,
+    useSmallArc: boolean,
+    isCCW: boolean,
+    dx: number,
+    dy: number
+  ) {
+    this.ref.rArcTo(rx, ry, xAxisRotateInDegrees, useSmallArc, isCCW, dx, dy);
+    return this;
+  }
+
+  arcToTangent(x1: number, y1: number, x2: number, y2: number, radius: number) {
+    this.ref.arcToTangent(x1, y1, x2, y2, radius);
+    return this;
+  }
+
+  // Shape methods
+  addRect(rect: SkRect, isCCW?: boolean) {
+    this.ref.addRect(JsiSkRect.fromValue(this.CanvasKit, rect), isCCW);
+    return this;
+  }
+
+  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number) {
+    this.ref.addOval(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      isCCW,
+      startIndex
+    );
+    return this;
+  }
+
+  addArc(
+    oval: SkRect,
+    startAngleInDegrees: number,
+    sweepAngleInDegrees: number
+  ) {
+    this.ref.addArc(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      startAngleInDegrees,
+      sweepAngleInDegrees
+    );
+    return this;
+  }
+
+  addRRect(rrect: InputRRect, isCCW?: boolean) {
+    this.ref.addRRect(JsiSkRRect.fromValue(this.CanvasKit, rrect), isCCW);
+    return this;
+  }
+
+  addCircle(x: number, y: number, r: number, _isCCW?: boolean) {
+    this.ref.addCircle(x, y, r);
+    return this;
+  }
+
+  addPoly(points: SkPoint[], close: boolean) {
+    this.ref.addPolygon(
+      points.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
+      close
+    );
+    return this;
+  }
+
+  addPath(src: SkPath, matrix?: SkMatrix, extend = false) {
+    const srcPath = JsiSkPath.pathFromValue(src);
+    const args = [
+      srcPath,
+      ...(matrix ? JsiSkMatrix.fromValue<Float32Array>(matrix) : []),
+      extend,
+    ];
+    this.ref.addPath(...args);
+    srcPath.delete();
+    return this;
+  }
+
+  // Configuration methods
+  setFillType(fill: FillType) {
+    this.ref.setFillType(getEnum(this.CanvasKit, "FillType", fill));
+    return this;
+  }
+
+  setIsVolatile(_isVolatile: boolean) {
+    // Not supported in CanvasKit PathBuilder - no-op
+    return this;
+  }
+
+  reset() {
+    // CanvasKit PathBuilder doesn't have reset - recreate
+    const newBuilder = new this.CanvasKit.PathBuilder();
+    // Swap the ref - delete old one
+    if (
+      this.ref !== null &&
+      typeof this.ref === "object" &&
+      "delete" in this.ref &&
+      typeof this.ref.delete === "function"
+    ) {
+      this.ref.delete();
+    }
+    this.ref = newBuilder;
+    return this;
+  }
+
+  offset(dx: number, dy: number) {
+    this.ref.offset(dx, dy);
+    return this;
+  }
+
+  transform(m: InputMatrix) {
+    const matrix = toMatrix3x3(m);
+    this.ref.transform(matrix);
+    return this;
+  }
+
+  // Query methods
+  computeBounds(): SkRect {
+    return new JsiSkRect(this.CanvasKit, this.ref.getBounds());
+  }
+
+  isEmpty(): boolean {
+    return this.ref.isEmpty();
+  }
+
+  getLastPt(): { x: number; y: number } {
+    const count = this.ref.countPoints();
+    if (count === 0) {
+      return { x: 0, y: 0 };
+    }
+    // PathBuilder doesn't have getPoint - snapshot to get it
+    const path = this.ref.snapshot();
+    const pt = path.getPoint(count - 1);
+    path.delete();
+    return { x: pt[0], y: pt[1] };
+  }
+
+  countPoints(): number {
+    return this.ref.countPoints();
+  }
+
+  // Build methods
+  build(): SkPath {
+    const path = this.ref.snapshot();
+    const builder = new this.CanvasKit.PathBuilder(path);
+    path.delete();
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  detach(): SkPath {
+    const path = this.ref.detach();
+    const builder = new this.CanvasKit.PathBuilder(path);
+    path.delete();
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+}

package/src/skia/web/JsiSkPathBuilderFactory.ts

@@ -0,0 +1,32 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { PathBuilderFactory, SkPath } from "../types";
+
+import { Host } from "./Host";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPathBuilder } from "./JsiSkPathBuilder";
+
+export class JsiSkPathBuilderFactory
+  extends Host
+  implements PathBuilderFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make() {
+    return new JsiSkPathBuilder(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder()
+    );
+  }
+
+  MakeFromPath(path: SkPath) {
+    const srcBuilder =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(path);
+    const srcPath = srcBuilder.snapshot();
+    const builder = new this.CanvasKit.PathBuilder(srcPath);
+    srcPath.delete();
+    return new JsiSkPathBuilder(this.CanvasKit, builder);
+  }
+}

package/src/skia/web/JsiSkPathEffectFactory.ts

@@ -65,12 +65,14 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
     phase: number,
     style: Path1DEffectStyle
   ) {
+    const p = JsiSkPath.pathFromValue(path);
     const pe = this.CanvasKit.PathEffect.MakePath1D(
-      JsiSkPath.fromValue(path),
+      p,
       advance,
       phase,
       getEnum(this.CanvasKit, "Path1DEffect", style)
     );
+    p.delete();
     if (pe === null) {
       return null;
     }
@@ -78,10 +80,12 @@ export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
   }
 
   MakePath2D(matrix: SkMatrix, path: SkPath) {
+    const p = JsiSkPath.pathFromValue(path);
     const pe = this.CanvasKit.PathEffect.MakePath2D(
       JsiSkMatrix.fromValue(matrix),
-      JsiSkPath.fromValue(path)
+      p
     );
+    p.delete();
     if (pe === null) {
       return null;
     }

package/src/skia/web/JsiSkPathFactory.ts

@@ -1,10 +1,24 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
-import type { PathCommand, PathOp, SkFont, SkPath } from "../types";
+import type {
+  InputRRect,
+  PathCommand,
+  PathOp,
+  SkFont,
+  SkPath,
+  SkPoint,
+  SkRect,
+  StrokeOpts,
+} from "../types";
 import type { PathFactory } from "../types/Path/PathFactory";
 
-import { Host, getEnum, throwNotImplementedOnRNWeb } from "./Host";
+import { Host, getEnum, optEnum, throwNotImplementedOnRNWeb } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
+import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkRRect } from "./JsiSkRRect";
+
+const pinT = (t: number) => Math.min(Math.max(t, 0), 1);
 
 export class JsiSkPathFactory extends Host implements PathFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -12,7 +26,7 @@ export class JsiSkPathFactory extends Host implements PathFactory {
   }
 
   Make() {
-    return new JsiSkPath(this.CanvasKit, new this.CanvasKit.Path());
+    return new JsiSkPath(this.CanvasKit, new this.CanvasKit.PathBuilder());
   }
 
   MakeFromSVGString(str: string) {
@@ -20,19 +34,39 @@ export class JsiSkPathFactory extends Host implements PathFactory {
     if (path === null) {
       return null;
     }
-    return new JsiSkPath(this.CanvasKit, path);
+    const result = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(path)
+    );
+    path.delete();
+    return result;
   }
 
   MakeFromOp(one: SkPath, two: SkPath, op: PathOp) {
+    const p1 =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        one
+      ).snapshot();
+    const p2 =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        two
+      ).snapshot();
     const path = this.CanvasKit.Path.MakeFromOp(
-      JsiSkPath.fromValue(one),
-      JsiSkPath.fromValue(two),
+      p1,
+      p2,
       getEnum(this.CanvasKit, "PathOp", op)
     );
+    p1.delete();
+    p2.delete();
     if (path === null) {
       return null;
     }
-    return new JsiSkPath(this.CanvasKit, path);
+    const result = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(path)
+    );
+    path.delete();
+    return result;
   }
 
   MakeFromCmds(cmds: PathCommand[]) {
@@ -40,10 +74,199 @@ export class JsiSkPathFactory extends Host implements PathFactory {
     if (path === null) {
       return null;
     }
-    return new JsiSkPath(this.CanvasKit, path);
+    const result = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(path)
+    );
+    path.delete();
+    return result;
   }
 
   MakeFromText(_text: string, _x: number, _y: number, _font: SkFont) {
     return throwNotImplementedOnRNWeb<SkPath>();
   }
+
+  // Static shape factories
+
+  Rect(rect: SkRect, isCCW?: boolean) {
+    const builder = new this.CanvasKit.PathBuilder();
+    builder.addRect(JsiSkRect.fromValue(this.CanvasKit, rect), isCCW);
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  Oval(rect: SkRect, isCCW?: boolean, startIndex?: number) {
+    const builder = new this.CanvasKit.PathBuilder();
+    builder.addOval(
+      JsiSkRect.fromValue(this.CanvasKit, rect),
+      isCCW,
+      startIndex
+    );
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  Circle(x: number, y: number, r: number) {
+    const builder = new this.CanvasKit.PathBuilder();
+    builder.addCircle(x, y, r);
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  RRect(rrect: InputRRect, isCCW?: boolean) {
+    const builder = new this.CanvasKit.PathBuilder();
+    builder.addRRect(JsiSkRRect.fromValue(this.CanvasKit, rrect), isCCW);
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  Line(p1: SkPoint, p2: SkPoint) {
+    const builder = new this.CanvasKit.PathBuilder();
+    const pt1 = JsiSkPoint.fromValue(p1);
+    const pt2 = JsiSkPoint.fromValue(p2);
+    builder.moveTo(pt1[0], pt1[1]);
+    builder.lineTo(pt2[0], pt2[1]);
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  Polygon(points: SkPoint[], close: boolean) {
+    const builder = new this.CanvasKit.PathBuilder();
+    builder.addPolygon(
+      points.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
+      close
+    );
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  // Static path operations
+
+  Stroke(srcPath: SkPath, opts?: StrokeOpts) {
+    const path =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        srcPath
+      ).snapshot();
+    const result = path.makeStroked(
+      opts === undefined
+        ? undefined
+        : {
+            width: opts.width,
+            // eslint-disable-next-line camelcase
+            miter_limit: opts.miter_limit,
+            precision: opts.precision,
+            join: optEnum(this.CanvasKit, "StrokeJoin", opts.join),
+            cap: optEnum(this.CanvasKit, "StrokeCap", opts.cap),
+          }
+    );
+    path.delete();
+    if (result === null) {
+      return null;
+    }
+    const r = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(result)
+    );
+    result.delete();
+    return r;
+  }
+
+  Trim(srcPath: SkPath, start: number, end: number, isComplement: boolean) {
+    const startT = pinT(start);
+    const stopT = pinT(end);
+    const path =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        srcPath
+      ).snapshot();
+    if (startT <= 0 && stopT >= 1 && !isComplement) {
+      const r = new JsiSkPath(
+        this.CanvasKit,
+        new this.CanvasKit.PathBuilder(path)
+      );
+      path.delete();
+      return r;
+    }
+    const result = path.makeTrimmed(startT, stopT, isComplement);
+    path.delete();
+    if (result === null) {
+      return null;
+    }
+    const r = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(result)
+    );
+    result.delete();
+    return r;
+  }
+
+  Simplify(srcPath: SkPath) {
+    const path =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        srcPath
+      ).snapshot();
+    const result = path.makeSimplified();
+    path.delete();
+    if (result === null) {
+      return null;
+    }
+    const r = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(result)
+    );
+    result.delete();
+    return r;
+  }
+
+  Dash(srcPath: SkPath, on: number, off: number, phase: number) {
+    const path =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        srcPath
+      ).snapshot();
+    const result = path.makeDashed(on, off, phase);
+    path.delete();
+    if (result === null) {
+      return null;
+    }
+    const r = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(result)
+    );
+    result.delete();
+    return r;
+  }
+
+  AsWinding(srcPath: SkPath) {
+    const path =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        srcPath
+      ).snapshot();
+    const result = path.makeAsWinding();
+    path.delete();
+    if (result === null) {
+      return null;
+    }
+    const r = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(result)
+    );
+    result.delete();
+    return r;
+  }
+
+  Interpolate(start: SkPath, end: SkPath, weight: number) {
+    const p1 =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        start
+      ).snapshot();
+    const p2 =
+      JsiSkPath.fromValue<CanvasKit["PathBuilder"]["prototype"]>(
+        end
+      ).snapshot();
+    const path = this.CanvasKit.Path.MakeFromPathInterpolation(p1, p2, weight);
+    p1.delete();
+    p2.delete();
+    if (path === null) {
+      return null;
+    }
+    const r = new JsiSkPath(
+      this.CanvasKit,
+      new this.CanvasKit.PathBuilder(path)
+    );
+    path.delete();
+    return r;
+  }
 }

package/src/skia/web/JsiSkia.ts

@@ -23,6 +23,7 @@ import { JsiSkContourMeasureIter } from "./JsiSkContourMeasureIter";
 import { JsiSkPictureRecorder } from "./JsiSkPictureRecorder";
 import { JsiSkPictureFactory } from "./JsiSkPictureFactory";
 import { JsiSkPathFactory } from "./JsiSkPathFactory";
+import { JsiSkPathBuilderFactory } from "./JsiSkPathBuilderFactory";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkColorFilterFactory } from "./JsiSkColorFilterFactory";
 import { JsiSkTypefaceFactory } from "./JsiSkTypefaceFactory";
@@ -79,14 +80,15 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     forceClosed: boolean,
     resScale: number
   ): SkContourMeasureIter =>
-    new JsiSkContourMeasureIter(
-      CanvasKit,
-      new CanvasKit.ContourMeasureIter(
-        JsiSkPath.fromValue(path),
-        forceClosed,
-        resScale
-      )
-    ),
+    (() => {
+      const p = JsiSkPath.pathFromValue(path);
+      const iter = new JsiSkContourMeasureIter(
+        CanvasKit,
+        new CanvasKit.ContourMeasureIter(p, forceClosed, resScale)
+      );
+      p.delete();
+      return iter;
+    })(),
   Paint: () => {
     const paint = new JsiSkPaint(CanvasKit, new CanvasKit.Paint());
     paint.setAntiAlias(true);
@@ -96,6 +98,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
   Picture: new JsiSkPictureFactory(CanvasKit),
   Path: new JsiSkPathFactory(CanvasKit),
+  PathBuilder: new JsiSkPathBuilderFactory(CanvasKit),
   Matrix: (matrix?: readonly number[]) =>
     new JsiSkMatrix(
       CanvasKit,

package/src/sksg/Recorder/commands/Drawing.ts

@@ -214,19 +214,32 @@ export const drawPath = (ctx: DrawingContext, props: PathProps) => {
   const hasEndOffset = end !== 1;
   const hasStrokeOptions = stroke !== undefined;
   const hasFillType = !!fillType;
-  const willMutatePath =
-    hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
-  const pristinePath = processPath(ctx.Skia, pathProps.path);
-  const path = willMutatePath ? pristinePath.copy() : pristinePath;
+
+  let path = processPath(ctx.Skia, pathProps.path);
+
+  // Apply fill type using PathBuilder
   if (hasFillType) {
-    path.setFillType(FillType[enumKey(fillType)]);
+    const builder = ctx.Skia.PathBuilder.MakeFromPath(path);
+    builder.setFillType(FillType[enumKey(fillType)]);
+    path = builder.build();
   }
+
+  // Apply stroke using static Path.Stroke
   if (hasStrokeOptions) {
-    path.stroke(stroke);
+    const stroked = ctx.Skia.Path.Stroke(path, stroke);
+    if (stroked) {
+      path = stroked;
+    }
   }
+
+  // Apply trim using static Path.Trim
   if (hasStartOffset || hasEndOffset) {
-    path.trim(start, end, false);
+    const trimmed = ctx.Skia.Path.Trim(path, start, end, false);
+    if (trimmed) {
+      path = trimmed;
+    }
   }
+
   ctx.canvas.drawPath(path, ctx.paint);
 };