@shopify/react-native-skia 0.1.228 → 0.1.230

package/src/renderer/components/index.ts

@@ -14,6 +14,5 @@ export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
-export * from "./Drawing";
 
 export * from "./paragraph";

package/src/renderer/index.ts

@@ -1,2 +1 @@
 export * from "./components";
-export * from "./DependencyManager";

package/src/renderer/processors/Animations/Animations.ts

@@ -1,58 +1,8 @@
-import type { SkiaSelector, SkiaValue } from "../../../values";
-
 export type SharedValueType<T = number> = {
   value: T;
 };
 
-export const isValue = (value: unknown): value is SkiaValue<unknown> => {
-  if (value === undefined || value === null) {
-    return false;
-  }
-  try {
-    if (
-      typeof value === "object" &&
-      "__typename__" in value &&
-      (value as unknown as SkiaValue<unknown>).__typename__ === "RNSkValue"
-    ) {
-      return true;
-    }
-  } catch {}
-  return false;
-};
-
-export const isSelector = <T, R>(
-  value: unknown
-): value is {
-  selector: (v: T) => R;
-  value: SkiaValue<T>;
-} => {
-  if (value) {
-    return (
-      typeof value === "object" &&
-      "selector" in value &&
-      "value" in value &&
-      (value as Record<string, unknown>).selector !== undefined &&
-      (value as Record<string, unknown>).value !== undefined
-    );
-  }
-  return false;
-};
-
-export const isAnimated = <T>(props: AnimatedProps<T>) => {
-  for (const value of Object.values(props)) {
-    if (isValue(value) || isSelector(value)) {
-      return true;
-    }
-  }
-  return false;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnimatedProp<T, P = any> =
-  | T
-  | SkiaValue<T>
-  | SkiaSelector<T, P>
-  | SharedValueType<T>;
+export type AnimatedProp<T> = T | SharedValueType<T>;
 
 export type AnimatedProps<T, O extends keyof T | never = never> = {
   [K in keyof T]: K extends "children"

package/src/skia/types/Canvas.ts

@@ -8,7 +8,7 @@ import type { SkColor } from "./Color";
 import type { SkRRect } from "./RRect";
 import type { BlendMode } from "./Paint/BlendMode";
 import type { SkPoint, PointMode } from "./Point";
-import type { SkMatrix } from "./Matrix";
+import type { InputMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
@@ -485,7 +485,7 @@ export interface SkCanvas {
    * Replaces current matrix with m premultiplied with the existing matrix.
    * @param m
    */
-  concat(m: SkMatrix | number[]): void;
+  concat(m: InputMatrix): void;
 
   /**
    * Draws the given picture using the current clip, current matrix, and the provided paint.

package/src/skia/types/Matrix.ts

@@ -7,7 +7,7 @@ export const isMatrix = (obj: unknown): obj is SkMatrix =>
   obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
 
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-  concat: (matrix: SkMatrix | Matrix4 | Matrix3 | number[]) => SkMatrix;
+  concat: (matrix: InputMatrix) => SkMatrix;
   translate: (x: number, y: number) => SkMatrix;
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
@@ -20,6 +20,8 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   get: () => number[];
 }
 
+export type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];
+
 export interface TransformProp {
   transform?: Transforms3d;
 }

package/src/skia/types/Matrix4.ts

@@ -278,67 +278,98 @@ export const rotateY = (value: number, p?: Point) => {
  */
 export const processTransform3d = (transforms: Transforms3d) => {
   "worklet";
-  return toMatrix3(
-    transforms.reduce((acc, val) => {
-      const key = Object.keys(val)[0] as Transform3dName;
-      const transform = val as Pick<Transformations, typeof key>;
-      if (key === "translateX") {
-        const value = transform[key];
-        return multiply4(acc, translate(value, 0, 0));
-      }
-      if (key === "translate") {
-        const [x, y, z = 0] = transform[key];
-        return multiply4(acc, translate(x, y, z));
-      }
-      if (key === "translateY") {
-        const value = transform[key];
-        return multiply4(acc, translate(0, value, 0));
-      }
-      if (key === "translateZ") {
-        const value = transform[key];
-        return multiply4(acc, translate(0, 0, value));
-      }
-      if (key === "scale") {
-        const value = transform[key];
-        return multiply4(acc, scale(value, value, 1));
-      }
-      if (key === "scaleX") {
-        const value = transform[key];
-        return multiply4(acc, scale(value, 1, 1));
-      }
-      if (key === "scaleY") {
-        const value = transform[key];
-        return multiply4(acc, scale(1, value, 1));
-      }
-      if (key === "skewX") {
-        const value = transform[key];
-        return multiply4(acc, skewX(value));
-      }
-      if (key === "skewY") {
-        const value = transform[key];
-        return multiply4(acc, skewY(value));
-      }
-      if (key === "rotateX") {
-        const value = transform[key];
-        return multiply4(acc, rotate([1, 0, 0], value));
-      }
-      if (key === "rotateY") {
-        const value = transform[key];
-        return multiply4(acc, rotate([0, 1, 0], value));
-      }
-      if (key === "perspective") {
-        const value = transform[key];
-        return multiply4(acc, perspective(value));
-      }
-      if (key === "rotate" || key === "rotateZ") {
-        const value = transform[key];
-        return multiply4(acc, rotate([0, 0, 1], value));
-      }
-      if (key === "matrix") {
-        const value = transform[key];
-        return multiply4(acc, value);
-      }
-      return exhaustiveCheck(key);
-    }, Matrix4())
-  );
+  return transforms.reduce((acc, val) => {
+    const key = Object.keys(val)[0] as Transform3dName;
+    const transform = val as Pick<Transformations, typeof key>;
+    if (key === "translateX") {
+      const value = transform[key];
+      return multiply4(acc, translate(value, 0, 0));
+    }
+    if (key === "translate") {
+      const [x, y, z = 0] = transform[key];
+      return multiply4(acc, translate(x, y, z));
+    }
+    if (key === "translateY") {
+      const value = transform[key];
+      return multiply4(acc, translate(0, value, 0));
+    }
+    if (key === "translateZ") {
+      const value = transform[key];
+      return multiply4(acc, translate(0, 0, value));
+    }
+    if (key === "scale") {
+      const value = transform[key];
+      return multiply4(acc, scale(value, value, 1));
+    }
+    if (key === "scaleX") {
+      const value = transform[key];
+      return multiply4(acc, scale(value, 1, 1));
+    }
+    if (key === "scaleY") {
+      const value = transform[key];
+      return multiply4(acc, scale(1, value, 1));
+    }
+    if (key === "skewX") {
+      const value = transform[key];
+      return multiply4(acc, skewX(value));
+    }
+    if (key === "skewY") {
+      const value = transform[key];
+      return multiply4(acc, skewY(value));
+    }
+    if (key === "rotateX") {
+      const value = transform[key];
+      return multiply4(acc, rotate([1, 0, 0], value));
+    }
+    if (key === "rotateY") {
+      const value = transform[key];
+      return multiply4(acc, rotate([0, 1, 0], value));
+    }
+    if (key === "perspective") {
+      const value = transform[key];
+      return multiply4(acc, perspective(value));
+    }
+    if (key === "rotate" || key === "rotateZ") {
+      const value = transform[key];
+      return multiply4(acc, rotate([0, 0, 1], value));
+    }
+    if (key === "matrix") {
+      const value = transform[key];
+      return multiply4(acc, value);
+    }
+    return exhaustiveCheck(key);
+  }, Matrix4());
+};
+
+/**
+ * @worklet
+ */
+export const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
+  "worklet";
+
+  const colMajorMatrix = new Array<number>(16);
+  const size = 4;
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
+    }
+  }
+  return colMajorMatrix;
+};
+
+/**
+ * @worklet
+ */
+export const convertToAffineMatrix = (m4: number[]) => {
+  "worklet";
+  // Extracting the relevant components from the 4x4 matrix
+  const a = m4[0]; // Scale X
+  const b = m4[1]; // Skew Y
+  const c = m4[4]; // Skew X
+  const d = m4[5]; // Scale Y
+  const tx = m4[12]; // Translate X
+  const ty = m4[13]; // Translate Y
+
+  // Returning the 6-element affine transformation matrix
+  return [a, b, c, d, tx, ty];
 };

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

@@ -32,6 +32,31 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
    * method to have been called first.
    */
   getMaxWidth(): number;
+  /**
+   * Returns the minimum intrinsic width of the paragraph.
+   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph
+   * does not decrease the height. This is effectively the width at which the paragraph
+   * can no longer wrap lines and is forced to overflow.
+   * This method requires the layout method to have been called first.
+   * @returns {number} The minimum intrinsic width of the paragraph.
+   */
+  getMinIntrinsicWidth(): number;
+  /**
+   * Returns the maximum intrinsic width of the paragraph.
+   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,
+   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.
+   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.
+   * This method requires the layout method to have been called first.
+   * @returns {number} The maximum intrinsic width of the paragraph.
+   */
+  getMaxIntrinsicWidth(): number;
+
+  /**
+   * Returns the width of the longest line in the paragraph.
+   * This method requires the layout method to have been called first.
+   */
+  getLongestLine(): number;
+
   /**
    * Returns the index of the glyph at the given position. This method requires
    * the layout method to have been called first.

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

@@ -2,7 +2,7 @@ import type { SkRect } from "../Rect";
 import type { SkPoint } from "../Point";
 import type { SkRRect } from "../RRect";
 import type { StrokeJoin, StrokeCap } from "../Paint";
-import type { SkMatrix } from "../Matrix";
+import type { InputMatrix, SkMatrix } from "../Matrix";
 import type { SkJSIInstance } from "../JsiInstance";
 
 /**
@@ -540,7 +540,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
   /**
    * Transforms the path by the specified matrix.
    */
-  transform(m3: SkMatrix | number[]): SkPath;
+  transform(m3: InputMatrix): SkPath;
 
   /**
    * Interpolates between Path with point array of equal size.

package/src/skia/web/JsiSkMatrix.ts

@@ -1,12 +1,12 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
 
-import { toMatrix3, type Matrix3, type Matrix4, type SkMatrix } from "../types";
+import { toMatrix3 } from "../types";
+import type { SkMatrix, InputMatrix, Matrix4 } from "../types";
 
 import { HostObject } from "./Host";
 
-const isMatrixHostObject = (
-  obj: SkMatrix | number[] | Matrix4 | Matrix3
-): obj is SkMatrix => !Array.isArray(obj);
+const isMatrixHostObject = (obj: InputMatrix): obj is SkMatrix =>
+  !Array.isArray(obj);
 
 export class JsiSkMatrix
   extends HostObject<Matrix3x3, "Matrix">
@@ -28,7 +28,7 @@ export class JsiSkMatrix
     // Do nothing - the matrix is represenetd by a Float32Array
   };
 
-  concat(matrix: SkMatrix | number[] | Matrix4 | Matrix3) {
+  concat(matrix: InputMatrix) {
     this.preMultiply(
       // eslint-disable-next-line no-nested-ternary
       isMatrixHostObject(matrix)

package/src/skia/web/JsiSkParagraph.ts

@@ -12,6 +12,17 @@ export class JsiSkParagraph
   constructor(CanvasKit: CanvasKit, ref: Paragraph) {
     super(CanvasKit, ref, "Paragraph");
   }
+  getMinIntrinsicWidth(): number {
+    return this.ref.getMinIntrinsicWidth();
+  }
+
+  getMaxIntrinsicWidth(): number {
+    return this.ref.getMaxIntrinsicWidth();
+  }
+
+  getLongestLine(): number {
+    return this.ref.getLongestLine();
+  }
 
   layout(width: number): void {
     this.ref.layout(width);

package/src/skia/web/JsiSkParagraphBuilderFactory.ts

@@ -9,7 +9,7 @@ import type {
 import { Host } from "./Host";
 import { JsiSkParagraphBuilder } from "./JsiSkParagraphBuilder";
 import { JsiSkParagraphStyle } from "./JsiSkParagraphStyle";
-import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProvider } from "./JsiSkTypefaceFontProvider";
 
 export class JsiSkParagraphBuilderFactory
   extends Host
@@ -31,11 +31,17 @@ export class JsiSkParagraphBuilderFactory
         "SkTypefaceFontProvider is required on React Native Web."
       );
     }
+    const fontCollection = this.CanvasKit.FontCollection.Make();
+    fontCollection.setDefaultFontManager(
+      JsiSkTypefaceFontProvider.fromValue(typefaceProvider)
+    );
+    fontCollection.enableFontFallback();
+
     return new JsiSkParagraphBuilder(
       this.CanvasKit,
-      this.CanvasKit.ParagraphBuilder.MakeFromFontProvider(
+      this.CanvasKit.ParagraphBuilder.MakeFromFontCollection(
         style,
-        JsiSkTypeface.fromValue(typefaceProvider)
+        fontCollection
       )
     );
   }

package/src/views/SkiaBaseWebView.tsx

@@ -4,7 +4,6 @@ import type { PointerEvent } from "react";
 import type { LayoutChangeEvent } from "react-native";
 
 import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaValue } from "../values";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import { Platform } from "../Platform";
 
@@ -148,24 +147,6 @@ export abstract class SkiaBaseWebView<
     this.tick();
   }
 
-  /**
-   * Registers one or move values as a dependant value of the Skia View. The view will
-   * The view will redraw itself when any of the values change.
-   * @param values Values to register
-   */
-  public registerValues(_values: SkiaValue<unknown>[]) {
-    // Unsubscribe from dependency values
-    this.unsubscribeAll();
-    // Register redraw dependencies on values
-    _values.forEach((v) => {
-      this._unsubscriptions.push(
-        v.addListener(() => {
-          this.redraw();
-        })
-      );
-    });
-  }
-
   private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {
     this._touches.push({
       id: evt.pointerId,

package/src/views/SkiaDomView.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import type { HostComponent } from "react-native";
 
 import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
 import { Platform } from "../Platform";
 import SkiaDomViewNativeComponent from "../specs/SkiaDomViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import { SkiaViewNativeId } from "./SkiaView";
 import type { SkiaDomViewProps } from "./types";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
 const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
   Platform.OS !== "web"
@@ -75,16 +74,6 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
     SkiaViewApi.requestRedraw(this._nativeId);
   }
 
-  /**
-   * Registers one or move values as a dependant value of the Skia View. The view will
-   * The view will redraw itself when any of the values change.
-   * @param values Values to register
-   */
-  public registerValues(values: SkiaValue<unknown>[]): () => void {
-    assertSkiaViewApi();
-    return SkiaViewApi.registerValuesInView(this._nativeId, values);
-  }
-
   /**
    * Clear up the dom node when unmounting to release resources.
    */
@@ -112,7 +101,6 @@ const assertSkiaViewApi = () => {
     SkiaViewApi === null ||
     SkiaViewApi.setJsiProperty === null ||
     SkiaViewApi.callJsiMethod === null ||
-    SkiaViewApi.registerValuesInView === null ||
     SkiaViewApi.requestRedraw === null ||
     SkiaViewApi.makeImageSnapshot === null
   ) {

package/src/views/SkiaDomView.web.tsx

@@ -1,7 +1,6 @@
 import { Skia } from "../skia";
 import type { SkCanvas } from "../skia/types";
 import { JsiDrawingContext } from "../dom/types/DrawingContext";
-import { isValue } from "../renderer/processors/Animations/Animations";
 
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 import type { SkiaDomViewProps, TouchInfo } from "./types";
@@ -17,11 +16,7 @@ export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
     }
     if (this.props.onSize) {
       const { width, height } = this.getSize();
-      if (isValue(this.props.onSize)) {
-        this.props.onSize.current = { width, height };
-      } else {
-        this.props.onSize.value = { width, height };
-      }
+      this.props.onSize.value = { width, height };
     }
     if (this.props.root) {
       const ctx = new JsiDrawingContext(Skia, canvas);

package/src/views/SkiaPictureView.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 
 import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import { SkiaViewNativeId } from "./SkiaView";
 import type { SkiaPictureViewProps } from "./types";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
 const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
@@ -61,16 +60,6 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
     SkiaViewApi.requestRedraw(this._nativeId);
   }
 
-  /**
-   * Registers one or move values as a dependant value of the Skia View. The view will
-   * The view will redraw itself when any of the values change.
-   * @param values Values to register
-   */
-  public registerValues(values: SkiaValue<unknown>[]): () => void {
-    assertSkiaViewApi();
-    return SkiaViewApi.registerValuesInView(this._nativeId, values);
-  }
-
   render() {
     const { mode, debug = false, ...viewProps } = this.props;
     return (
@@ -90,7 +79,6 @@ const assertSkiaViewApi = () => {
     SkiaViewApi === null ||
     SkiaViewApi.setJsiProperty === null ||
     SkiaViewApi.callJsiMethod === null ||
-    SkiaViewApi.registerValuesInView === null ||
     SkiaViewApi.requestRedraw === null ||
     SkiaViewApi.makeImageSnapshot === null
   ) {

package/src/views/SkiaViewNativeId.ts

@@ -0,0 +1 @@
+export const SkiaViewNativeId = { current: 1000 };

package/src/views/index.ts

@@ -1,6 +1,4 @@
-export * from "./SkiaView";
 export * from "./SkiaPictureView";
 export * from "./SkiaDomView";
 export * from "./types";
-export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/src/views/types.ts

@@ -1,14 +1,7 @@
 import type { ViewProps } from "react-native";
 
 import type { GroupProps, RenderNode } from "../dom/types";
-import type {
-  SkCanvas,
-  SkImage,
-  SkPicture,
-  SkRect,
-  SkSize,
-} from "../skia/types";
-import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 
 export type DrawMode = "continuous" | "default";
@@ -55,8 +48,6 @@ export type TouchHandlers = {
 
 export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
 
-export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
-
 /**
  * Listener interface for value changes
  */
@@ -72,10 +63,6 @@ export interface ISkiaViewApi {
     name: string,
     ...args: T
   ) => void;
-  registerValuesInView: (
-    nativeId: number,
-    values: SkiaValue<unknown>[]
-  ) => () => void;
   requestRedraw: (nativeId: number) => void;
   makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
@@ -98,18 +85,7 @@ export interface SkiaBaseViewProps extends ViewProps {
    * Pass an animated value to the onSize property to get updates when
    * the Skia view is resized.
    */
-  onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
-}
-
-export interface SkiaDrawViewProps extends SkiaBaseViewProps {
-  /**
-   * Draw callback. Will be called whenever the view is invalidated and
-   * needs to redraw. This is either caused by a change in a react
-   * property, a touch event, or a call to redraw. If the view is in
-   * continuous mode the callback will be called 60 frames per second
-   * by the native view.
-   */
-  onDraw?: RNSkiaDrawCallback;
+  onSize?: SharedValueType<SkSize>;
 }
 
 export interface SkiaPictureViewProps extends SkiaBaseViewProps {

package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java

@@ -1,44 +0,0 @@
-package com.shopify.reactnative.skia;
-
-import android.content.Context;
-
-import com.facebook.jni.HybridData;
-import com.facebook.jni.annotations.DoNotStrip;
-import com.facebook.react.bridge.ReactContext;
-
-public class SkiaDrawView extends SkiaBaseView {
-    @DoNotStrip
-    private HybridData mHybridData;
-
-    public SkiaDrawView(Context context) {
-        super(context, false);
-        RNSkiaModule skiaModule = ((ReactContext) context).getNativeModule(RNSkiaModule.class);
-        mHybridData = initHybrid(skiaModule.getSkiaManager());
-    }
-
-    @Override
-    protected void finalize() throws Throwable {
-        super.finalize();
-        mHybridData.resetNative();
-    }
-
-    private native HybridData initHybrid(SkiaManager skiaManager);
-
-    protected native void surfaceAvailable(Object surface, int width, int height);
-
-    protected native void surfaceSizeChanged(int width, int height);
-
-    protected native void surfaceDestroyed();
-
-    protected native void setBgColor(int color);
-
-    protected native void setMode(String mode);
-
-    protected native void setDebugMode(boolean show);
-
-    protected native void updateTouchPoints(double[] points);
-
-    protected native void registerView(int nativeId);
-
-    protected native void unregisterView();
-}