@shopify/react-native-skia 0.1.227 → 0.1.229

package/lib/module/skia/web/JsiSkVerticesFactory.js

@@ -1,5 +1,5 @@
-import { ckEnum } from "./Host";
 import { JsiSkVertices } from "./JsiSkVertices";
+import { getEnum } from "./Host";
 
 const concat = function () {
   let totalLength = 0;
@@ -23,7 +23,7 @@ const concat = function () {
   return result;
 };
 
-export const MakeVertices = (CanvasKit, mode, positions, textureCoordinates, colors, indices, isVolatile) => new JsiSkVertices(CanvasKit, CanvasKit.MakeVertices(ckEnum(mode), positions.map(_ref => {
+export const MakeVertices = (CanvasKit, mode, positions, textureCoordinates, colors, indices, isVolatile) => new JsiSkVertices(CanvasKit, CanvasKit.MakeVertices(getEnum(CanvasKit.VertexMode, mode), positions.map(_ref => {
   let {
     x,
     y

package/lib/module/skia/web/JsiSkVerticesFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["ckEnum","JsiSkVertices","concat","totalLength","arrays","arr","length","result","Float32Array","offset","set","MakeVertices","CanvasKit","mode","positions","textureCoordinates","colors","indices","isVolatile","map","x","y","flat","reduce","a","c"],"sources":["JsiSkVerticesFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkColor, SkPoint, VertexMode } from \"../types\";\n\nimport { ckEnum } from \"./Host\";\nimport { JsiSkVertices } from \"./JsiSkVertices\";\n\nconst concat = (...arrays: Float32Array[]) => {\n  let totalLength = 0;\n  for (const arr of arrays) {\n    totalLength += arr.length;\n  }\n  const result = new Float32Array(totalLength);\n  let offset = 0;\n  for (const arr of arrays) {\n    result.set(arr, offset);\n    offset += arr.length;\n  }\n  return result;\n};\n\nexport const MakeVertices = (\n  CanvasKit: CanvasKit,\n  mode: VertexMode,\n  positions: SkPoint[],\n  textureCoordinates?: SkPoint[] | null,\n  colors?: SkColor[],\n  indices?: number[] | null,\n  isVolatile?: boolean\n) =>\n  new JsiSkVertices(\n    CanvasKit,\n    CanvasKit.MakeVertices(\n      ckEnum(mode),\n      positions.map(({ x, y }) => [x, y]).flat(),\n      (textureCoordinates || []).map(({ x, y }) => [x, y]).flat(),\n      !colors ? null : colors.reduce((a, c) => concat(a, c)),\n      indices,\n      isVolatile\n    )\n  );\n"],"mappings":"AAIA,SAASA,MAAT,QAAuB,QAAvB;AACA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,MAAMC,MAAM,GAAG,YAA+B;EAC5C,IAAIC,WAAW,GAAG,CAAlB;;EAD4C,kCAA3BC,MAA2B;IAA3BA,MAA2B;EAAA;;EAE5C,KAAK,MAAMC,GAAX,IAAkBD,MAAlB,EAA0B;IACxBD,WAAW,IAAIE,GAAG,CAACC,MAAnB;EACD;;EACD,MAAMC,MAAM,GAAG,IAAIC,YAAJ,CAAiBL,WAAjB,CAAf;EACA,IAAIM,MAAM,GAAG,CAAb;;EACA,KAAK,MAAMJ,GAAX,IAAkBD,MAAlB,EAA0B;IACxBG,MAAM,CAACG,GAAP,CAAWL,GAAX,EAAgBI,MAAhB;IACAA,MAAM,IAAIJ,GAAG,CAACC,MAAd;EACD;;EACD,OAAOC,MAAP;AACD,CAZD;;AAcA,OAAO,MAAMI,YAAY,GAAG,CAC1BC,SAD0B,EAE1BC,IAF0B,EAG1BC,SAH0B,EAI1BC,kBAJ0B,EAK1BC,MAL0B,EAM1BC,OAN0B,EAO1BC,UAP0B,KAS1B,IAAIjB,aAAJ,CACEW,SADF,EAEEA,SAAS,CAACD,YAAV,CACEX,MAAM,CAACa,IAAD,CADR,EAEEC,SAAS,CAACK,GAAV,CAAc;EAAA,IAAC;IAAEC,CAAF;IAAKC;EAAL,CAAD;EAAA,OAAc,CAACD,CAAD,EAAIC,CAAJ,CAAd;AAAA,CAAd,EAAoCC,IAApC,EAFF,EAGE,CAACP,kBAAkB,IAAI,EAAvB,EAA2BI,GAA3B,CAA+B;EAAA,IAAC;IAAEC,CAAF;IAAKC;EAAL,CAAD;EAAA,OAAc,CAACD,CAAD,EAAIC,CAAJ,CAAd;AAAA,CAA/B,EAAqDC,IAArD,EAHF,EAIE,CAACN,MAAD,GAAU,IAAV,GAAiBA,MAAM,CAACO,MAAP,CAAc,CAACC,CAAD,EAAIC,CAAJ,KAAUvB,MAAM,CAACsB,CAAD,EAAIC,CAAJ,CAA9B,CAJnB,EAKER,OALF,EAMEC,UANF,CAFF,CATK"}
+{"version":3,"names":["JsiSkVertices","getEnum","concat","totalLength","arrays","arr","length","result","Float32Array","offset","set","MakeVertices","CanvasKit","mode","positions","textureCoordinates","colors","indices","isVolatile","VertexMode","map","x","y","flat","reduce","a","c"],"sources":["JsiSkVerticesFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkColor, SkPoint, VertexMode } from \"../types\";\n\nimport { JsiSkVertices } from \"./JsiSkVertices\";\nimport { getEnum } from \"./Host\";\n\nconst concat = (...arrays: Float32Array[]) => {\n  let totalLength = 0;\n  for (const arr of arrays) {\n    totalLength += arr.length;\n  }\n  const result = new Float32Array(totalLength);\n  let offset = 0;\n  for (const arr of arrays) {\n    result.set(arr, offset);\n    offset += arr.length;\n  }\n  return result;\n};\n\nexport const MakeVertices = (\n  CanvasKit: CanvasKit,\n  mode: VertexMode,\n  positions: SkPoint[],\n  textureCoordinates?: SkPoint[] | null,\n  colors?: SkColor[],\n  indices?: number[] | null,\n  isVolatile?: boolean\n) =>\n  new JsiSkVertices(\n    CanvasKit,\n    CanvasKit.MakeVertices(\n      getEnum(CanvasKit.VertexMode, mode),\n      positions.map(({ x, y }) => [x, y]).flat(),\n      (textureCoordinates || []).map(({ x, y }) => [x, y]).flat(),\n      !colors ? null : colors.reduce((a, c) => concat(a, c)),\n      indices,\n      isVolatile\n    )\n  );\n"],"mappings":"AAIA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,OAAT,QAAwB,QAAxB;;AAEA,MAAMC,MAAM,GAAG,YAA+B;EAC5C,IAAIC,WAAW,GAAG,CAAlB;;EAD4C,kCAA3BC,MAA2B;IAA3BA,MAA2B;EAAA;;EAE5C,KAAK,MAAMC,GAAX,IAAkBD,MAAlB,EAA0B;IACxBD,WAAW,IAAIE,GAAG,CAACC,MAAnB;EACD;;EACD,MAAMC,MAAM,GAAG,IAAIC,YAAJ,CAAiBL,WAAjB,CAAf;EACA,IAAIM,MAAM,GAAG,CAAb;;EACA,KAAK,MAAMJ,GAAX,IAAkBD,MAAlB,EAA0B;IACxBG,MAAM,CAACG,GAAP,CAAWL,GAAX,EAAgBI,MAAhB;IACAA,MAAM,IAAIJ,GAAG,CAACC,MAAd;EACD;;EACD,OAAOC,MAAP;AACD,CAZD;;AAcA,OAAO,MAAMI,YAAY,GAAG,CAC1BC,SAD0B,EAE1BC,IAF0B,EAG1BC,SAH0B,EAI1BC,kBAJ0B,EAK1BC,MAL0B,EAM1BC,OAN0B,EAO1BC,UAP0B,KAS1B,IAAIlB,aAAJ,CACEY,SADF,EAEEA,SAAS,CAACD,YAAV,CACEV,OAAO,CAACW,SAAS,CAACO,UAAX,EAAuBN,IAAvB,CADT,EAEEC,SAAS,CAACM,GAAV,CAAc;EAAA,IAAC;IAAEC,CAAF;IAAKC;EAAL,CAAD;EAAA,OAAc,CAACD,CAAD,EAAIC,CAAJ,CAAd;AAAA,CAAd,EAAoCC,IAApC,EAFF,EAGE,CAACR,kBAAkB,IAAI,EAAvB,EAA2BK,GAA3B,CAA+B;EAAA,IAAC;IAAEC,CAAF;IAAKC;EAAL,CAAD;EAAA,OAAc,CAACD,CAAD,EAAIC,CAAJ,CAAd;AAAA,CAA/B,EAAqDC,IAArD,EAHF,EAIE,CAACP,MAAD,GAAU,IAAV,GAAiBA,MAAM,CAACQ,MAAP,CAAc,CAACC,CAAD,EAAIC,CAAJ,KAAUxB,MAAM,CAACuB,CAAD,EAAIC,CAAJ,CAA9B,CAJnB,EAKET,OALF,EAMEC,UANF,CAFF,CATK"}

package/lib/typescript/src/dom/types/Common.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms3d, Vector } from "../../skia/types";
+import type { BlendMode, Color, InputMatrix, PaintStyle, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms3d, Vector } from "../../skia/types";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export type PathDef = string | SkPath;
 export type ClipDef = SkRRect | SkRect | PathDef;
@@ -36,7 +36,7 @@ export type CircleDef = PointCircleDef | ScalarCircleDef;
 export interface TransformProps {
     transform?: Transforms3d;
     origin?: Vector;
-    matrix?: SkMatrix | number[];
+    matrix?: InputMatrix;
 }
 export interface PaintProps extends ChildrenProps {
     color?: Color;

package/lib/typescript/src/external/reanimated/interpolators.d.ts

@@ -1,6 +1,7 @@
 import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
 import type { SkPath, SkPoint } from "../../skia/types";
 export declare const notifyChange: (value: SharedValue<unknown>) => void;
+export declare const usePathValue: (cb: (path: SkPath) => void) => SharedValue<SkPath>;
 export declare const useClock: () => SharedValue<number>;
 export declare const usePathInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SharedValue<SkPath>;
 export declare const useVectorInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPoint[], options?: ExtrapolationType) => SharedValue<{

package/lib/typescript/src/external/reanimated/moduleWrapper.d.ts

@@ -1,9 +1,10 @@
 import type { DependencyList } from "react";
-import type { FrameCallback, FrameInfo, SharedValue } from "react-native-reanimated";
+import type { DerivedValue, FrameCallback, FrameInfo, SharedValue } from "react-native-reanimated";
 export declare const HAS_REANIMATED2: boolean;
 export declare const HAS_REANIMATED3: boolean;
 export declare function throwOnMissingReanimated(): void;
 export declare const useSharedValue: <T>(init: T, oneWayReadsOnly?: boolean) => SharedValue<T>;
+export declare const useDerivedValue: <T>(processor: () => T, dependencies?: DependencyList) => DerivedValue<T>;
 export declare const useFrameCallback: (callback: (frameInfo: FrameInfo) => void, autostart?: boolean) => FrameCallback;
 export declare const startMapper: (worklet: () => void, inputs?: unknown[], outputs?: unknown[]) => number;
 export declare const stopMapper: (mapperID: number) => void;

package/lib/typescript/src/skia/core/Vector.d.ts

@@ -5,8 +5,3 @@ export declare const neg: (a: Vector) => import("../types").SkPoint;
 export declare const add: (a: Vector, b: Vector) => import("../types").SkPoint;
 export declare const sub: (a: Vector, b: Vector) => import("../types").SkPoint;
 export declare const dist: (a: Vector, b: Vector) => number;
-export declare const translate: ({ x, y, }: Vector) => [{
-    translateX: number;
-}, {
-    translateY: number;
-}];

package/lib/typescript/src/skia/types/Canvas.d.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";
@@ -372,7 +372,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.
      * @param skp

package/lib/typescript/src/skia/types/Matrix.d.ts

@@ -1,20 +1,9 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
-import type { Transforms3d } from "./Matrix4";
-export declare enum MatrixIndex {
-    ScaleX = 0,
-    SkewX = 1,
-    TransX = 2,
-    SkewY = 3,
-    ScaleY = 4,
-    TransY = 5,
-    Persp0 = 6,
-    Persp1 = 7,
-    Persp2 = 8
-}
+import type { Matrix3, Matrix4, Transforms3d } from "./Matrix4";
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-    concat: (matrix: SkMatrix | number[]) => SkMatrix;
+    concat: (matrix: InputMatrix) => SkMatrix;
     translate: (x: number, y: number) => SkMatrix;
     scale: (x: number, y?: number) => SkMatrix;
     skew: (x: number, y: number) => SkMatrix;
@@ -26,6 +15,7 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     identity: () => SkMatrix;
     get: () => number[];
 }
+export type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];
 export interface TransformProp {
     transform?: Transforms3d;
 }

package/lib/typescript/src/skia/types/Matrix4.d.ts

@@ -1,5 +1,20 @@
+type Point = {
+    x: number;
+    y: number;
+};
 type Vec2 = readonly [number, number];
 type Vec3 = readonly [number, number, number];
+export type Matrix3 = readonly [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
 export type Matrix4 = readonly [
     number,
     number,
@@ -28,6 +43,14 @@ export type Transforms3d = Transform3d[];
  * @worklet
  */
 export declare const Matrix4: () => Matrix4;
+/**
+ * @worklet
+ */
+export declare const translate: (x: number, y: number, z?: number) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const perspective: (p: number) => Matrix4;
 /**
  * @worklet
  */
@@ -35,5 +58,41 @@ export declare const mapPoint3d: (m: Matrix4, v: Vec3) => readonly [number, numb
 /**
  * @worklet
  */
-export declare const processTransform3d: (transforms: Transforms3d) => number[];
+export declare const multiply4: (a: Matrix4, b: Matrix4) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const toMatrix3: (m: Matrix4) => number[];
+/**
+ * @worklet
+ */
+export declare const pivot: (m: Matrix4, p: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const scale: (sx: number, sy: number, sz?: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const rotateZ: (value: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const rotateX: (value: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const rotateY: (value: number, p?: Point) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const processTransform3d: (transforms: Transforms3d) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const convertToColumnMajor: (rowMajorMatrix: Matrix4) => number[];
+/**
+ * @worklet
+ */
+export declare const convertToAffineMatrix: (m4: number[]) => number[];
 export {};

package/lib/typescript/src/skia/types/Path/Path.d.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";
 /**
  * Options used for Path.stroke(). If an option is omitted, a sensible default will be used.
@@ -440,7 +440,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.
      * Copy verb array and weights to result, and set result path to a weighted

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

@@ -16,6 +16,5 @@ export declare abstract class BaseHostObject<T, N extends string> extends Host i
 export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
     static fromValue<T>(value: SkJSIInstance<string>): T;
 }
-export declare const getCkEnum: (e: EmbindEnum, v: number) => EmbindEnumEntity;
-export declare const ckEnum: (value: number) => EmbindEnumEntity;
-export declare const optEnum: (value: number | undefined) => EmbindEnumEntity | undefined;
+export declare const getEnum: (e: EmbindEnum, v: number) => EmbindEnumEntity;
+export declare const optEnum: (e: EmbindEnum, value: number | undefined) => EmbindEnumEntity | undefined;

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

@@ -1,12 +1,12 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
-import type { SkMatrix } from "../types";
+import type { SkMatrix, InputMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
     private preMultiply;
     private postMultiply;
     dispose: () => void;
-    concat(matrix: SkMatrix | number[]): this;
+    concat(matrix: InputMatrix): this;
     translate(x: number, y: number): this;
     postTranslate(x: number, y: number): this;
     scale(x: number, y?: number): this;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.227",
+  "version": "0.1.229",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -94,6 +94,7 @@
     "eslint-config-react-native-wcandillon": "3.10.2",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "29.6.4",
+    "jest-diff": "^29.7.0",
     "merge-dirs": "^0.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",

package/src/dom/types/Common.ts

@@ -3,8 +3,8 @@ import type { ReactNode } from "react";
 import type {
   BlendMode,
   Color,
+  InputMatrix,
   PaintStyle,
-  SkMatrix,
   SkPaint,
   SkPath,
   SkRect,
@@ -66,7 +66,7 @@ export type CircleDef = PointCircleDef | ScalarCircleDef;
 export interface TransformProps {
   transform?: Transforms3d;
   origin?: Vector;
-  matrix?: SkMatrix | number[];
+  matrix?: InputMatrix;
 }
 
 export interface PaintProps extends ChildrenProps {

package/src/external/reanimated/interpolators.ts

@@ -3,7 +3,7 @@ import type {
   FrameInfo,
   SharedValue,
 } from "react-native-reanimated";
-import { useMemo, useRef } from "react";
+import { useCallback, useMemo } from "react";
 
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
@@ -13,6 +13,7 @@ import {
   useAnimatedReaction,
   useFrameCallback,
   useSharedValue,
+  useDerivedValue,
 } from "./moduleWrapper";
 
 export const notifyChange = (value: SharedValue<unknown>) => {
@@ -23,12 +24,26 @@ export const notifyChange = (value: SharedValue<unknown>) => {
   }
 };
 
+export const usePathValue = (cb: (path: SkPath) => void) => {
+  const pathInit = useMemo(() => Skia.Path.Make(), []);
+  const path = useSharedValue(pathInit);
+  useDerivedValue(() => {
+    path.value.reset();
+    cb(path.value);
+    notifyChange(path);
+  });
+  return path;
+};
+
 export const useClock = () => {
   const clock = useSharedValue(0);
-  const callback = useRef((info: FrameInfo) => {
-    "worklet";
-    clock.value = info.timeSinceFirstFrame;
-  }).current;
+  const callback = useCallback(
+    (info: FrameInfo) => {
+      "worklet";
+      clock.value = info.timeSinceFirstFrame;
+    },
+    [clock]
+  );
   useFrameCallback(callback);
   return clock;
 };

package/src/external/reanimated/moduleWrapper.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DependencyList } from "react";
 import type {
+  DerivedValue,
   FrameCallback,
   FrameInfo,
   SharedValue,
@@ -42,6 +43,11 @@ export const useSharedValue: <T>(
   oneWayReadsOnly?: boolean
 ) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;
 
+export const useDerivedValue: <T>(
+  processor: () => T,
+  dependencies?: DependencyList
+) => DerivedValue<T> = Reanimated2?.useDerivedValue || throwOnMissingReanimated;
+
 export const useFrameCallback: (
   callback: (frameInfo: FrameInfo) => void,
   autostart?: boolean

package/src/renderer/Canvas.tsx

@@ -14,11 +14,11 @@ import type {
 } from "react";
 import type { LayoutChangeEvent } from "react-native";
 
-import { SkiaDomView, SkiaPictureView } from "../views";
+import { SkiaDomView } from "../views";
+import { SkiaDomView as SkiaDomViewWeb } from "../views/SkiaDomView.web";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
-import { JsiDrawingContext } from "../dom/types";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -116,23 +116,16 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
         />
       );
     } else {
-      // This is for debugging
-      const recorder = Skia.PictureRecorder();
-      const canvas = recorder.beginRecording(
-        Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
-      );
-      const ctx = new JsiDrawingContext(Skia, canvas);
-      root.dom.render(ctx);
-      const picture = recorder.finishRecordingAsPicture();
       return (
-        <SkiaPictureView
+        <SkiaDomViewWeb
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}
+          root={root.dom}
+          onTouch={onTouch}
+          onLayout={onLayout}
           mode={mode}
           debug={debug}
-          picture={picture}
-          onLayout={onLayout}
           {...props}
         />
       );

package/src/skia/core/Vector.ts

@@ -22,10 +22,3 @@ export const dist = (a: Vector, b: Vector) => {
   "worklet";
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
-export const translate = ({
-  x,
-  y,
-}: Vector): [{ translateX: number }, { translateY: number }] => {
-  "worklet";
-  return [{ translateX: x }, { translateY: y }];
-};

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

@@ -1,24 +1,13 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
-import type { Transforms3d } from "./Matrix4";
+import type { Matrix3, Matrix4, Transforms3d } from "./Matrix4";
 import { processTransform3d } from "./Matrix4";
-export enum MatrixIndex {
-  ScaleX = 0,
-  SkewX = 1,
-  TransX = 2,
-  SkewY = 3,
-  ScaleY = 4,
-  TransY = 5,
-  Persp0 = 6,
-  Persp1 = 7,
-  Persp2 = 8,
-}
 
 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 | number[]) => SkMatrix;
+  concat: (matrix: InputMatrix) => SkMatrix;
   translate: (x: number, y: number) => SkMatrix;
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
@@ -31,6 +20,8 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   get: () => number[];
 }
 
+export type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];
+
 export interface TransformProp {
   transform?: Transforms3d;
 }