@shopify/react-native-skia 0.1.166 → 0.1.167

package/src/renderer/DrawingContext.ts

@@ -1,13 +1,9 @@
-import type { RefObject } from "react";
-
-import type { DrawingInfo, SkiaView } from "../views";
-import type { Skia, Vector } from "../skia/types";
+import type { DrawingInfo } from "../views";
+import type { Skia } from "../skia/types";
 import type { DrawingContext as DOMDrawingContext } from "../dom/types";
 
 export interface DrawingContext
   extends Omit<DrawingInfo, "touches">,
     DOMDrawingContext {
-  center: Vector;
-  ref: RefObject<SkiaView>;
   Skia: Skia;
 }

package/src/renderer/Reconciler.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import type { OpaqueRoot } from "react-reconciler";
+import ReactReconciler from "react-reconciler";
+
+import type { Skia } from "../skia/types";
+import type { SkiaValue } from "../values/types";
+
+import { DependencyManager } from "./DependencyManager";
+import { skHostConfig, debug as hostDebug } from "./HostConfig";
+import { Container } from "./Container";
+
+const skiaReconciler = ReactReconciler(skHostConfig);
+
+type RegisterValues = (values: Array<SkiaValue<unknown>>) => () => void;
+
+const createDependencyManager = (registerValues: RegisterValues) =>
+  global.SkiaDomApi && global.SkiaDomApi.DependencyManager
+    ? global.SkiaDomApi.DependencyManager(registerValues)
+    : new DependencyManager(registerValues);
+
+skiaReconciler.injectIntoDevTools({
+  bundleType: 1,
+  version: "0.0.1",
+  rendererPackageName: "react-native-skia",
+});
+
+export class SkiaRoot {
+  private root: OpaqueRoot;
+  private container: Container;
+
+  constructor(
+    Skia: Skia,
+    registerValues: RegisterValues = () => () => {},
+    redraw: () => void = () => {}
+  ) {
+    const depMgr = createDependencyManager(registerValues);
+    this.container = new Container(Skia, depMgr, redraw);
+    this.root = skiaReconciler.createContainer(
+      this.container,
+      0,
+      null,
+      true,
+      null,
+      "",
+      console.error,
+      null
+    );
+  }
+
+  render(element: ReactNode) {
+    skiaReconciler.updateContainer(element, this.root, null, () => {
+      hostDebug("updateContainer");
+      this.container.depMgr.update();
+    });
+  }
+
+  unmount() {
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      this.container.depMgr.remove();
+    });
+  }
+
+  get dom() {
+    return this.container.root;
+  }
+}

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

@@ -441,6 +441,20 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    */
   addRRect(rrect: SkRRect, isCCW?: boolean): SkPath;
 
+  /** Appends src to SkPath, transformed by matrix. Transformed curves may have
+     different verbs, SkPoint, and conic weights.
+
+      If mode is kAppend_AddPathMode, src verb array, SkPoint array, and conic
+     weights are added unaltered. If mode is kExtend_AddPathMode, add line
+     before appending verbs, SkPoint, and conic weights.
+
+      @param src     SkPath verbs, SkPoint, and conic weights to add
+      @param matrix  transform applied to src
+      @param extend  extends path with line if true
+      @return        reference to SkPath
+  */
+  addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): SkPath;
+
   /**
    * Returns the Point at index in Point array. Valid range for index is
    * 0 to countPoints() - 1.

package/src/skia/web/JsiSkPath.ts

@@ -33,6 +33,16 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     super(CanvasKit, ref, "Path");
   }
 
+  addPath(src: SkPath, matrix?: SkMatrix, extend = false) {
+    const args = [
+      JsiSkPath.fromValue(src),
+      ...(matrix ? JsiSkMatrix.fromValue<Float32Array>(matrix) : []),
+      extend,
+    ];
+    this.ref.addPath(...args);
+    return this;
+  }
+
   addArc(
     oval: SkRect,
     startAngleInDegrees: number,

package/src/skia/web/JsiSkRRect.ts

@@ -1,6 +1,6 @@
 import type { CanvasKit, RRect } from "canvaskit-wasm";
 
-import type { SkRRect } from "../types";
+import type { SkRect, SkRRect } from "../types";
 
 import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
@@ -20,7 +20,18 @@ export class JsiSkRRect
     );
   }
 
-  constructor(CanvasKit: CanvasKit, ref: RRect) {
+  constructor(CanvasKit: CanvasKit, rect: SkRect, rx: number, ry: number) {
+    // based on https://github.com/google/skia/blob/main/src/core/SkRRect.cpp#L51
+    if (rx === Infinity || ry === Infinity) {
+      rx = ry = 0;
+    }
+    if (rect.width < rx + rx || rect.height < ry + ry) {
+      // At most one of these two divides will be by zero, and neither numerator is zero.
+      const scale = Math.min(rect.width / (rx + rx), rect.height / (ry + ry));
+      rx *= scale;
+      ry *= scale;
+    }
+    const ref = CanvasKit.RRectXY(JsiSkRect.fromValue(CanvasKit, rect), rx, ry);
     super(CanvasKit, ref, "RRect");
   }
 

package/src/skia/web/JsiSkia.ts

@@ -45,10 +45,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     throw new Error("Not implemented on React Native Web");
   },
   RRectXY: (rect: SkRect, rx: number, ry: number) =>
-    new JsiSkRRect(
-      CanvasKit,
-      CanvasKit.RRectXY(JsiSkRect.fromValue(CanvasKit, rect), rx, ry)
-    ),
+    new JsiSkRRect(CanvasKit, rect, rx, ry),
   RSXform: (scos: number, ssin: number, tx: number, ty: number) =>
     new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
   Color,