@shopify/react-native-skia 0.1.124 → 0.1.125

package/src/{values/animation → animation}/timing/createTiming.ts

@@ -3,8 +3,8 @@ import type {
   RequiredAnimationParams,
   AnimationCallback,
 } from "../types";
-import type { AnimationState, SkiaValue } from "../../types";
-import { ValueApi } from "../../api";
+import type { AnimationState, SkiaValue } from "../../values/types";
+import { ValueApi } from "../../values/api";
 
 import { timing } from "./functions";
 

package/src/{values/animation → animation}/timing/functions/timing.ts

@@ -1,4 +1,4 @@
-import type { AnimationState } from "../../../types";
+import type { AnimationState } from "../../../values/types";
 
 /**
  * Calculates and returns a timing value based on the

package/src/{values/animation → animation}/timing/runTiming.ts

@@ -1,4 +1,4 @@
-import type { SkiaValue, SkiaAnimation } from "../../types";
+import type { SkiaValue, SkiaAnimation } from "../../values/types";
 import type {
   AnimationParams,
   TimingConfig,

package/src/{values/animation → animation}/timing/useTiming.ts

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useRef } from "react";
 
-import type { SkiaReadonlyValue, SkiaAnimation } from "../../types";
+import type { SkiaReadonlyValue, SkiaAnimation } from "../../values/types";
 import type {
   AnimationParams,
   TimingConfig,
   AnimationCallback,
 } from "../types";
-import { useValue } from "../../hooks/useValue";
+import { useValue } from "../../values/hooks/useValue";
 
 import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";

package/src/index.ts

@@ -5,3 +5,4 @@ export * from "./views";
 export * from "./skia";
 export * from "./external";
 export * from "./values";
+export * from "./animation";

package/src/renderer/components/colorFilters/BlendColor.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import type { ReactNode } from "react";
 
+import type { Color } from "../../../skia";
 import { BlendMode, Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes";
 import type { SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
-import type { Color } from "../../../skia";
 
 import { composeColorFilter } from "./Compose";
 

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -2,6 +2,8 @@ import type { SkColor } from "../../../skia";
 import { BlendMode, Skia, TileMode } from "../../../skia";
 import type { SkImageFilter } from "../../../skia/ImageFilter/ImageFilter";
 
+const Black = Skia.Color("black");
+
 export const MakeInnerShadow = (
   shadowOnly: boolean | undefined,
   dx: number,
@@ -12,11 +14,11 @@ export const MakeInnerShadow = (
   input: SkImageFilter | null
 ) => {
   const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
     null
   );
   const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
     null
   );
   const f1 = Skia.ImageFilter.MakeColorFilter(

package/src/renderer/components/imageFilters/RuntimeShader.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { SkRuntimeEffect } from "../../../skia/RuntimeEffect/RuntimeEffect";
+
+import { getInput } from "./getInput";
+
+export interface RuntimeShaderProps {
+  source: SkRuntimeEffect;
+}
+
+const onDeclare = createDeclaration<RuntimeShaderProps>(
+  ({ source }, children) => {
+    const rtb = Skia.RuntimeShaderBuilder(source);
+    return Skia.ImageFilter.MakeRuntimeShader(rtb, null, getInput(children));
+  }
+);
+
+export const RuntimeShader = (props: AnimatedProps<RuntimeShaderProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/imageFilters/index.ts

@@ -3,3 +3,4 @@ export * from "./Offset";
 export * from "./DisplacementMap";
 export * from "./Shadow";
 export * from "./Morphology";
+export * from "./RuntimeShader";

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,7 +2,7 @@ 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";
@@ -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/processors/Rects.ts

@@ -1,24 +1,18 @@
 /* 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));

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/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]);