@shopify/react-native-skia 0.1.230 → 0.1.232

package/lib/typescript/src/skia/web/JsiSkPath.d.ts

@@ -1,5 +1,5 @@
 import type { CanvasKit, Path } from "canvaskit-wasm";
-import type { FillType, PathCommand, PathOp, SkMatrix, SkPath, SkPoint, SkRect, SkRRect, StrokeOpts } from "../types";
+import type { FillType, PathCommand, PathOp, SkMatrix, SkPath, SkPoint, SkRect, InputRRect, StrokeOpts } from "../types";
 import { HostObject } from "./Host";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -41,7 +41,7 @@ export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPat
     getFillType(): number;
     quadTo(x1: number, y1: number, x2: number, y2: number): this;
     addRect(rect: SkRect, isCCW?: boolean): this;
-    addRRect(rrect: SkRRect, isCCW?: boolean): this;
+    addRRect(rrect: InputRRect, isCCW?: boolean): this;
     getPoint(index: number): JsiSkPoint;
     isEmpty(): boolean;
     isVolatile(): boolean;

package/lib/typescript/src/skia/web/JsiSkRRect.d.ts

@@ -1,10 +1,10 @@
 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";
 export declare class JsiSkRRect extends BaseHostObject<RRect, "RRect"> implements SkRRect {
     dispose: () => void;
-    static fromValue(CanvasKit: CanvasKit, rect: SkRRect): Float32Array;
+    static fromValue(CanvasKit: CanvasKit, rect: InputRRect): Float32Array;
     constructor(CanvasKit: CanvasKit, rect: SkRect, rx: number, ry: number);
     get rx(): number;
     get ry(): number;

package/libs/ios/libskottie.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskshaper.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.230",
+  "version": "0.1.232",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/drawings/RRectNode.ts

@@ -1,11 +1,11 @@
-import type { SkRRect } from "../../../skia/types";
+import type { InputRRect, SkRRect } from "../../../skia/types";
 import type { DrawingContext, RoundedRectProps } from "../../types";
 import { NodeType } from "../../types";
 import { processRRect } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
-export class RRectNode extends JsiDrawingNode<RoundedRectProps, SkRRect> {
+export class RRectNode extends JsiDrawingNode<RoundedRectProps, InputRRect> {
   rect?: SkRRect;
 
   constructor(ctx: NodeContext, props: RoundedRectProps) {

package/src/dom/nodes/drawings/Text.ts

@@ -23,21 +23,8 @@ export class TextNode extends JsiDrawingNode<TextProps, SkFont | null> {
 
   protected deriveProps() {
     const { font } = this.props;
-    if (font === null) {
-      return null;
-    } else if (font === undefined) {
-      console.warn(
-        "<Text />: the font property is mandatory on React Native Web"
-      );
+    if (!font) {
       return null;
-      // return this.Skia.Font(
-      //   this.Skia.FontMgr.System().matchFamilyStyle("System", {
-      //     width: 5,
-      //     weight: 400,
-      //     slant: 0,
-      //   }),
-      //   14
-      // );
     }
     return font;
   }

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;

package/src/dom/types/Drawings.ts

@@ -109,7 +109,7 @@ export interface DiffRectProps extends DrawingNodeProps {
 }
 
 export interface TextProps extends DrawingNodeProps {
-  font?: SkFont | null;
+  font: SkFont | null;
   text: string;
   x: number;
   y: number;

package/src/headless/index.ts

@@ -6,13 +6,14 @@ import type { ReactNode } from "react";
 import { JsiSkApi } from "../skia/web";
 import { SkiaRoot } from "../renderer/Reconciler";
 import { JsiDrawingContext } from "../dom/types";
+import type { SkSurface } from "../skia";
 
 export * from "../renderer/components";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let Skia: any;
 
-export const draw = (element: ReactNode, width: number, height: number) => {
+export const makeOffscreenSurface = (width: number, height: number) => {
   if (!Skia) {
     Skia = JsiSkApi(CanvasKit);
   }
@@ -20,12 +21,15 @@ export const draw = (element: ReactNode, width: number, height: number) => {
   if (surface === null) {
     throw new Error("Couldn't create surface!");
   }
+  return surface;
+};
+
+export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaRoot(Skia);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
   surface.flush();
-  const image = surface.makeImageSnapshot();
-  return image;
+  return surface.makeImageSnapshot();
 };

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.

package/src/skia/types/Matrix4.ts

@@ -150,14 +150,16 @@ const rotatedUnitSinCos = (
   ];
 };
 
-const matrixVecMul4 = (m: Matrix4, v: Vec4) => {
+/**
+ * @worklet
+ */
+export const matrixVecMul4 = (m: Matrix4, v: Vec4): Vec4 => {
   "worklet";
-  const [vx, vy, vz, vw] = v;
   return [
-    vx * m[0] + vy * m[4] + vz * m[8] + vw * m[12],
-    vx * m[1] + vy * m[5] + vz * m[9] + vw * m[13],
-    vx * m[2] + vy * m[6] + vz * m[10] + vw * m[14],
-    vx * m[3] + vy * m[7] + vz * m[11] + vw * m[15],
+    m[0] * v[0] + m[1] * v[1] + m[2] * v[2] + m[3] * v[3],
+    m[4] * v[0] + m[5] * v[1] + m[6] * v[2] + m[7] * v[3],
+    m[8] * v[0] + m[9] * v[1] + m[10] * v[2] + m[11] * v[3],
+    m[12] * v[0] + m[13] * v[1] + m[14] * v[2] + m[15] * v[3],
   ];
 };
 

package/src/skia/types/Paragraph/Paragraph.ts

@@ -2,11 +2,11 @@ import type { SkCanvas } from "../Canvas";
 import type { SkJSIInstance } from "../JsiInstance";
 import type { SkRect } from "../Rect";
 
-import type { SkTextDirection } from "./ParagraphStyle";
+import type { TextDirection } from "./ParagraphStyle";
 
 export interface SkRectWithDirection {
   rect: SkRect;
-  direction: SkTextDirection;
+  direction: TextDirection;
 }
 
 export interface SkParagraph extends SkJSIInstance<"Paragraph"> {

package/src/skia/types/Paragraph/ParagraphStyle.ts

@@ -1,10 +1,10 @@
 import type { SkTextFontStyle, SkTextStyle } from "./TextStyle";
 
-export enum SkTextDirection {
+export enum TextDirection {
   RTL = 0,
   LTR = 1,
 }
-export enum SkTextAlign {
+export enum TextAlign {
   Left = 0,
   Right,
   Center,
@@ -24,7 +24,7 @@ export interface SkStrutStyle {
   forceStrutHeight?: boolean;
 }
 
-export enum SkTextHeightBehavior {
+export enum TextHeightBehavior {
   All = 0x0,
   DisableFirstAscent = 0x1,
   DisableLastDescent = 0x2,
@@ -38,8 +38,8 @@ export interface SkParagraphStyle {
   maxLines?: number;
   replaceTabCharacters?: boolean;
   strutStyle?: SkStrutStyle;
-  textAlign?: SkTextAlign;
-  textDirection?: SkTextDirection;
-  textHeightBehavior?: SkTextHeightBehavior;
+  textAlign?: TextAlign;
+  textDirection?: TextDirection;
+  textHeightBehavior?: TextHeightBehavior;
   textStyle?: SkTextStyle;
 }

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.

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

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),

package/src/skia/web/JsiSkParagraphStyle.ts

@@ -1,6 +1,6 @@
 import type { CanvasKit, ParagraphStyle } from "canvaskit-wasm";
 
-import { SkTextDirection, type SkParagraphStyle } from "../types";
+import { TextDirection, type SkParagraphStyle } from "../types";
 
 export class JsiSkParagraphStyle {
   static toParagraphStyle(
@@ -23,7 +23,7 @@ export class JsiSkParagraphStyle {
         : undefined ?? ps.textAlign;
     ps.textDirection =
       value.textDirection !== undefined
-        ? { value: value.textDirection === SkTextDirection.LTR ? 1 : 0 }
+        ? { value: value.textDirection === TextDirection.LTR ? 1 : 0 }
         : ps.textDirection;
     ps.textHeightBehavior =
       value.textHeightBehavior !== undefined

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;
   }

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,

package/src/web/LoadSkiaWeb.tsx

@@ -10,11 +10,14 @@ declare global {
   var CanvasKit: CanvasKitType;
 }
 
+let ckSharedPromise: Promise<CanvasKitType>;
+
 export const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {
   if (global.CanvasKit !== undefined) {
     return;
   }
-  const CanvasKit = await CanvasKitInit(opts);
+  ckSharedPromise = ckSharedPromise ?? CanvasKitInit(opts);
+  const CanvasKit = await ckSharedPromise;
   // The CanvasKit API is stored on the global object and used
   // to create the JsiSKApi in the Skia.web.ts file.
   global.CanvasKit = CanvasKit;