@shopify/react-native-skia 0.1.122 → 0.1.125

package/src/renderer/components/shaders/Gradient.ts

@@ -1,4 +1,4 @@
-import { TileMode, Skia } from "../../../skia";
+import { Skia, TileMode } from "../../../skia";
 import type { SkEnum } from "../../processors/Paint";
 import type { TransformProps } from "../../processors/Transform";
 import { enumKey } from "../../processors/Paint";
@@ -19,9 +19,7 @@ export const processGradientProps = ({
   flags,
   ...transform
 }: GradientProps) => ({
-  colors: colors.map((color) =>
-    typeof color === "string" ? Skia.Color(color) : color
-  ),
+  colors: colors.map((color) => Skia.Color(color)),
   positions: positions ?? null,
   mode: TileMode[enumKey(mode ?? "clamp")],
   flags,

package/src/renderer/components/shaders/Shader.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import type { ReactNode } from "react";
 
 import { isShader } from "../../../skia";
-import type { IRuntimeEffect } from "../../../skia";
+import type { SkRuntimeEffect } from "../../../skia";
 import type { Vector, AnimatedProps, TransformProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
 import { localMatrix } from "../../processors";
 
-// We need to use any here because hasOwnProperty doesn't work on JSI instances
 const isVector = (obj: unknown): obj is Vector =>
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (obj as any).x !== undefined && (obj as any).y !== undefined;
 
@@ -28,7 +28,7 @@ const processValue = (value: UniformValue): number | readonly number[] => {
 };
 
 export interface ShaderProps extends TransformProps {
-  source: IRuntimeEffect;
+  source: SkRuntimeEffect;
   uniforms: Uniforms;
   opaque?: boolean;
   children?: ReactNode | ReactNode[];

package/src/renderer/components/shapes/Path.tsx

@@ -4,9 +4,11 @@ import type {
   CustomPaintProps,
   AnimatedProps,
   PathDef,
+  SkEnum,
 } from "../../processors";
 import { createDrawing } from "../../nodes";
-import { processPath } from "../../processors";
+import { processPath, enumKey } from "../../processors";
+import { FillType } from "../../../skia";
 
 interface StrokeOpts {
   width?: number;
@@ -19,16 +21,22 @@ export interface PathProps extends CustomPaintProps {
   start: number;
   end: number;
   stroke?: StrokeOpts;
+  fillType?: SkEnum<typeof FillType>;
 }
 
 const onDraw = createDrawing<PathProps>(
-  ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {
+  ({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {
     const hasStartOffset = start !== 0;
     const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;
-    const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
+    const hasFillType = !!fillType;
+    const willMutatePath =
+      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
     const pristinePath = processPath(pathProps.path);
     const path = willMutatePath ? pristinePath.copy() : pristinePath;
+    if (hasFillType) {
+      path.setFillType(FillType[enumKey(fillType)]);
+    }
     if (hasStrokeOptions) {
       path.stroke(stroke);
     }

package/src/renderer/processors/Circles.ts

@@ -15,8 +15,9 @@ interface ScalarCircleDef {
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 
 const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).cx;
+  (def as any).cx !== undefined;
 export const processCircle = (def: CircleDef) => {
   if (isCircleScalarDef(def)) {
     return { c: vec(def.cx, def.cy), r: def.r };

package/src/renderer/processors/Font.ts

@@ -5,7 +5,7 @@ import type { FontMgr } from "../../skia/FontMgr/FontMgr";
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 
 export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
-  // We use any here for safety (JSI instances don't have hasProperty working properly);
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
 

package/src/renderer/processors/Paint.ts

@@ -32,6 +32,7 @@ export interface CustomPaintProps extends ChildrenProps {
   strokeCap?: SkEnum<typeof StrokeCap>;
   strokeMiter?: number;
   opacity?: number;
+  antiAlias?: boolean;
 }
 
 export const enumKey = <K extends string>(k: K) =>
@@ -50,6 +51,7 @@ export const processPaint = (
     strokeCap,
     strokeMiter,
     opacity,
+    antiAlias,
   }: CustomPaintProps,
   children: DeclarationResult[]
 ) => {
@@ -85,6 +87,9 @@ export const processPaint = (
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
   children.forEach((child) => {
     if (isShader(child)) {
       paint.setShader(child);

package/src/renderer/processors/Rects.ts

@@ -1,26 +1,18 @@
-// Here we use any because hasOwnProperty doesn't work on JSI instances not does the (key in obj) syntax
-// And using Object.keys for such use-case is incredibly slow
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SkRect, SkRRect } from "../../skia";
+import { Skia } from "../../skia";
 
 import { vec } from "./math/Vector";
 import type { Radius } from "./Radius";
 import { processRadius } from "./Radius";
 
-export const point = (x: number, y: number) => ({ x, y });
+export const point = (x: number, y: number) => Skia.Point(x, y);
 
-export const rect = (x: number, y: number, width: number, height: number) => ({
-  x,
-  y,
-  width,
-  height,
-});
+export const rect = (x: number, y: number, width: number, height: number) =>
+  Skia.XYWHRect(x, y, width, height);
 
-export const rrect = (r: SkRect, rx: number, ry: number) => ({
-  rect: r,
-  rx,
-  ry,
-});
+export const rrect = (r: SkRect, rx: number, ry: number) =>
+  Skia.RRectXY(r, rx, ry);
 
 export const bounds = (rects: SkRect[]) => {
   const x = Math.min(...rects.map((r) => r.x));
@@ -47,10 +39,13 @@ export const center = (r: SkRect | SkRRect) =>
     ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
     : vec(r.x + r.width / 2, r.y + r.height / 2);
 
+// We have an issue to check property existence on JSI backed instances
 const isRRectCtor = (def: RRectDef): def is RRectCtor =>
   (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
 const isRectCtor = (def: RectDef): def is RectCtor =>
   (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
 export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
   (def as any).rect !== undefined;
 

package/src/renderer/processors/math/Matrix3.ts

@@ -1,9 +1,5 @@
 import { exhaustiveCheck } from "../../typeddash";
-import type { SkMatrix } from "../../../skia/Matrix";
-
-export type Vec3 = readonly [number, number, number];
-
-export type Matrix3 = readonly [Vec3, Vec3, Vec3];
+import { Skia } from "../../../skia";
 
 type Transform2dName =
   | "translateX"
@@ -34,121 +30,44 @@ export type Transforms2d = readonly (
   | Pick<Transformations, "rotate">
 )[];
 
-const identityMatrix: Matrix3 = [
-  [1, 0, 0],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const translateXMatrix = (x: number): Matrix3 => [
-  [1, 0, x],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const translateYMatrix = (y: number): Matrix3 => [
-  [1, 0, 0],
-  [0, 1, y],
-  [0, 0, 1],
-];
-
-const scaleMatrix = (s: number): Matrix3 => [
-  [s, 0, 0],
-  [0, s, 0],
-  [0, 0, 1],
-];
-
-const scaleXMatrix = (s: number): Matrix3 => [
-  [s, 0, 0],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const scaleYMatrix = (s: number): Matrix3 => [
-  [1, 0, 0],
-  [0, s, 0],
-  [0, 0, 1],
-];
-
-const skewXMatrix = (s: number): Matrix3 => [
-  [1, Math.tan(s), 0],
-  [0, 1, 0],
-  [0, 0, 1],
-];
-
-const skewYMatrix = (s: number): Matrix3 => [
-  [1, 0, 0],
-  [Math.tan(s), 1, 0],
-  [0, 0, 1],
-];
-
-const rotateZMatrix = (r: number): Matrix3 => [
-  [Math.cos(r), -1 * Math.sin(r), 0],
-  [Math.sin(r), Math.cos(r), 0],
-  [0, 0, 1],
-];
-
-const dot3 = (row: Vec3, col: Vec3) =>
-  row[0] * col[0] + row[1] * col[1] + row[2] * col[2];
-
-const multiply3 = (m1: Matrix3, m2: Matrix3) => {
-  const col0 = [m2[0][0], m2[1][0], m2[2][0]] as const;
-  const col1 = [m2[0][1], m2[1][1], m2[2][1]] as const;
-  const col2 = [m2[0][2], m2[1][2], m2[2][2]] as const;
-  return [
-    [dot3(m1[0], col0), dot3(m1[0], col1), dot3(m1[0], col2)],
-    [dot3(m1[1], col0), dot3(m1[1], col1), dot3(m1[1], col2)],
-    [dot3(m1[2], col0), dot3(m1[2], col1), dot3(m1[2], col2)],
-  ] as const;
-};
-
-export const matrixVecMul3 = (m: Matrix3, v: Vec3) =>
-  [dot3(m[0], v), dot3(m[1], v), dot3(m[2], v)] as const;
-
-const skiaMatrix3 = (m: Matrix3): SkMatrix => {
-  return [
-    m[0][0],
-    m[0][1],
-    m[0][2],
-    m[1][0],
-    m[1][1],
-    m[1][2],
-    m[2][0],
-    m[2][1],
-    m[2][2],
-  ];
-};
-
-export const processTransform2d = (transforms: Transforms2d) =>
-  skiaMatrix3(processTransform(transforms));
-
-const processTransform = (transforms: Transforms2d) =>
-  transforms.reduce((acc, transform) => {
+export const processTransform2d = (transforms: Transforms2d) => {
+  const m = Skia.Matrix();
+  for (const transform of transforms) {
     const key = Object.keys(transform)[0] as Transform2dName;
     const value = (transform as Pick<Transformations, typeof key>)[key];
     if (key === "translateX") {
-      return multiply3(acc, translateXMatrix(value));
+      m.preTranslate(value, 0);
+      continue;
     }
     if (key === "translateY") {
-      return multiply3(acc, translateYMatrix(value));
+      m.preTranslate(0, value);
+      continue;
     }
     if (key === "scale") {
-      return multiply3(acc, scaleMatrix(value));
+      m.preScale(value, value);
+      continue;
     }
     if (key === "scaleX") {
-      return multiply3(acc, scaleXMatrix(value));
+      m.preScale(value, 0);
+      continue;
     }
     if (key === "scaleY") {
-      return multiply3(acc, scaleYMatrix(value));
+      m.preScale(0, value);
+      continue;
     }
     if (key === "skewX") {
-      return multiply3(acc, skewXMatrix(value));
+      m.preSkew(value, 0);
+      continue;
     }
     if (key === "skewY") {
-      return multiply3(acc, skewYMatrix(value));
+      m.preSkew(0, value);
+      continue;
     }
     if (key === "rotate" || key === "rotateZ") {
-      return multiply3(acc, rotateZMatrix(value));
+      m.preRotate((value * 180) / Math.PI);
+      continue;
     }
-    return exhaustiveCheck(key);
-  }, identityMatrix);
+    exhaustiveCheck(key);
+  }
+  return m;
+};

package/src/renderer/processors/math/Vector.ts

@@ -1,11 +1,12 @@
-import { interpolate } from "../../../values/animation/functions/interpolate";
+import { interpolate } from "../../../animation/functions/interpolate";
+import { Skia } from "../../../skia";
 
 export interface Vector {
   x: number;
   y: number;
 }
 
-export const vec = (x = 0, y?: number) => ({ x, y: y ?? x });
+export const vec = (x = 0, y?: number) => Skia.Point(x, y ?? x);
 export const neg = (a: Vector) => vec(-a.x, -a.y);
 export const add = (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y);
 export const sub = (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y);

package/src/skia/Color.ts

@@ -1,34 +1,20 @@
 import { Skia } from "./Skia";
 
-// This is the JSI color. Currently a number. This may change.
-export type SkColor = number;
-// Input colors can be string or number
-export type Color = string | number;
+// This is the JSI color
+export type SkColor = Float32Array;
+// Input colors can be string, number or Float32Array
+export type Color = string | Float32Array | number;
 
-export const alphaf = (c: number) => ((c >> 24) & 255) / 255;
-export const red = (c: number) => (c >> 16) & 255;
-export const green = (c: number) => (c >> 8) & 255;
-export const blue = (c: number) => c & 255;
-export const rgbaColor = (r: number, g: number, b: number, af: number) => {
-  const a = Math.round(af * 255);
-  return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
-};
+export const RED = 0;
+export const GREEN = 1;
+export const BLUE = 2;
+export const ALPHA = 3;
 
-const processColorAsArray = (cl: Color) => {
-  const icl = typeof cl === "string" ? Skia.Color(cl) : cl;
-  const r = red(icl);
-  const g = green(icl);
-  const b = blue(icl);
-  const a = alphaf(icl);
-  return [r, g, b, a] as const;
-};
+export const rgbaColor = (r: number, g: number, b: number, a: number) =>
+  new Float32Array([r, g, b, a]);
 
 export const processColor = (cl: Color, currentOpacity: number) => {
-  const [r, g, b, a] = processColorAsArray(cl);
-  return rgbaColor(r, g, b, a * currentOpacity);
-};
-
-export const processColorAsUnitArray = (cl: Color, currentOpacity: number) => {
-  const [r, g, b, a] = processColorAsArray(cl);
-  return [r / 255, g / 255, b / 255, a * currentOpacity] as const;
+  const color = Skia.Color(cl);
+  color[ALPHA] *= currentOpacity;
+  return color;
 };

package/src/skia/ImageFilter/ImageFilterFactory.ts

@@ -3,6 +3,7 @@ import type { SkColorFilter } from "../ColorFilter/ColorFilter";
 import type { SkShader } from "../Shader/Shader";
 import type { SkRect } from "../Rect";
 import type { BlendMode } from "../Paint/BlendMode";
+import type { SkRuntimeShaderBuilder } from "../RuntimeEffect";
 
 import type { SkImageFilter, TileMode } from "./ImageFilter";
 
@@ -169,4 +170,23 @@ export interface ImageFilterFactory {
     foreground: SkImageFilter | null,
     cropRect?: SkRect
   ) => SkImageFilter;
+  /**
+   *  Create a filter that fills the output with the per-pixel evaluation of the SkShader produced
+   *  by the SkRuntimeShaderBuilder. The shader is defined in the image filter's local coordinate
+   *  system, so it will automatically be affected by SkCanvas' transform.
+   *
+   *  @param builder         The builder used to produce the runtime shader, that will in turn
+   *                         fill the result image
+   *  @param childShaderName The name of the child shader defined in the builder that will be
+   *                         bound to the input param (or the source image if the input param
+   *                         is null).  If null the builder can have exactly one child shader,
+   *                         which automatically binds the input param.
+   *  @param input           The image filter that will be provided as input to the runtime
+   *                         shader. If null the implicit source image is used instead
+   */
+  MakeRuntimeShader: (
+    builder: SkRuntimeShaderBuilder,
+    childShaderName: string | null,
+    input: SkImageFilter | null
+  ) => SkImageFilter;
 }

package/src/skia/Matrix.ts

@@ -1,3 +1,4 @@
+import type { SkJSIInstance } from "./JsiInstance";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -10,7 +11,7 @@ export enum MatrixIndex {
   persp2 = 8,
 }
 
-export interface SkMatrix {
+export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   0: number;
   1: number;
   2: number;
@@ -20,4 +21,10 @@ export interface SkMatrix {
   6: number;
   7: number;
   8: number;
+
+  preConcat: (matrix: SkMatrix) => void;
+  preTranslate: (x: number, y: number) => void;
+  preScale: (x: number, y: number) => void;
+  preSkew: (x: number, y: number) => void;
+  preRotate: (theta: number) => void;
 }

package/src/skia/Paint/Paint.ts

@@ -5,6 +5,7 @@ import type { SkShader } from "../Shader";
 import type { SkColor } from "../Color";
 import type { IPathEffect } from "../PathEffect";
 import type { SkJSIInstance } from "../JsiInstance";
+import { Skia } from "../Skia";
 
 import type { BlendMode } from "./BlendMode";
 
@@ -25,6 +26,12 @@ export enum StrokeJoin {
   Round,
 }
 
+export const SkiaPaint = () => {
+  const paint = Skia.Paint();
+  paint.setAntiAlias(true);
+  return paint;
+};
+
 export const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>
   obj !== null && obj.__typename__ === "Paint";
 

package/src/skia/Paint/usePaint.ts

@@ -1,8 +1,7 @@
 import type { DependencyList } from "react";
 import { useMemo } from "react";
 
-import { Skia } from "../Skia";
-
+import { SkiaPaint } from "./Paint";
 import type { SkPaint } from "./Paint";
 
 /**
@@ -13,8 +12,7 @@ export const usePaint = (
   deps?: DependencyList
 ) =>
   useMemo(() => {
-    const p = Skia.Paint();
-    p.setAntiAlias(true);
+    const p = SkiaPaint();
     if (initializer) {
       initializer(p);
     }

package/src/skia/RuntimeEffect/RuntimeEffect.ts

@@ -10,7 +10,9 @@ export interface SkSLUniform {
   isInteger: boolean;
 }
 
-export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
+export type SkRuntimeShaderBuilder = SkJSIInstance<"RuntimeShaderBuilder">;
+
+export interface SkRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
   /**
    * Returns a shader executed using the given uniform data.
    * @param uniforms

package/src/skia/RuntimeEffect/RuntimeEffectFactory.ts

@@ -1,4 +1,4 @@
-import type { IRuntimeEffect } from "./RuntimeEffect";
+import type { SkRuntimeEffect } from "./RuntimeEffect";
 
 export interface RuntimeEffectFactory {
   /**
@@ -7,6 +7,6 @@ export interface RuntimeEffectFactory {
    * @param callback - will be called with any compilation error. If not provided, errors will
    *                   be printed to console.log().
    */
-  Make: (sksl: string) => IRuntimeEffect | null;
+  Make: (sksl: string) => SkRuntimeEffect | null;
   //Make(sksl: string, callback?: (err: string) => void): RuntimeEffect | null;
 }

package/src/skia/Shader/useShader.ts

@@ -3,4 +3,7 @@ import { useMemo } from "react";
 import { Skia } from "../Skia";
 
 export const useShader = (sksl: string) =>
-  useMemo(() => Skia.RuntimeEffect.Make(sksl), [sksl]);
+  useMemo(() => {
+    console.warn("Use shader will be deprecated.");
+    return Skia.RuntimeEffect.Make(sksl);
+  }, [sksl]);