@shopify/react-native-skia 0.0.135

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

@@ -0,0 +1,27 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { isColorFilter } from "../../../skia/types";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+
+import { composeColorFilter } from "./Compose";
+
+export interface LerpProps {
+  t: number;
+  children: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<LerpProps>(({ t }, children, { Skia }) => {
+  const [src, dst] = children.filter(isColorFilter);
+  const cf = Skia.ColorFilter.MakeLerp(t, src, dst);
+  return composeColorFilter(
+    Skia,
+    cf,
+    children.filter((c) => c !== src && c !== dst)
+  );
+});
+
+export const Lerp = (props: AnimatedProps<LerpProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+
+import { composeColorFilter } from "./Compose";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LinearToSRGBGammaProps {}
+
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
+  const cf = Skia.ColorFilter.MakeLinearToSRGBGamma();
+  return composeColorFilter(Skia, cf, children);
+});
+
+export const LinearToSRGBGamma = (
+  props: AnimatedProps<LinearToSRGBGammaProps>
+) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+
+import { composeColorFilter } from "./Compose";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LumaColorFilterProps {}
+
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
+  const cf = Skia.ColorFilter.MakeLumaColorFilter();
+  return composeColorFilter(Skia, cf, children);
+});
+
+export const LumaColorFilter = (props: AnimatedProps<LumaColorFilterProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,46 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { createDeclaration } from "../../nodes";
+import type { AnimatedProps } from "../../processors";
+
+import { composeColorFilter } from "./Compose";
+
+interface ColorMatrixProps {
+  matrix: number[];
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<ColorMatrixProps>(
+  ({ matrix }, children, { Skia }) => {
+    const cf = Skia.ColorFilter.MakeMatrix(matrix);
+    return composeColorFilter(Skia, cf, children);
+  }
+);
+
+export const ColorMatrix = (props: AnimatedProps<ColorMatrixProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+export const OpacityMatrix = (opacity: number) => [
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  opacity,
+  0,
+];

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

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+
+import { composeColorFilter } from "./Compose";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SRGBToLinearGammaProps {}
+
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
+  const cf = Skia.ColorFilter.MakeSRGBToLinearGamma();
+  return composeColorFilter(Skia, cf, children);
+});
+
+export const SRGBToLinearGamma = (
+  props: AnimatedProps<SRGBToLinearGammaProps>
+) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,6 @@
+export * from "./Matrix";
+export * from "./BlendColor";
+export * from "./Lerp";
+export * from "./LinearToSRGBGamma";
+export * from "./SRGBToLinearGamma";
+export * from "./LumaColorFilter";

package/src/renderer/components/image/BoxFit.ts

@@ -0,0 +1,125 @@
+import { exhaustiveCheck } from "../../typeddash";
+import type { SkRect } from "../../../skia/types";
+
+// https://api.flutter.dev/flutter/painting/BoxFit-class.html
+export type Fit =
+  | "cover"
+  | "contain"
+  | "fill"
+  | "fitHeight"
+  | "fitWidth"
+  | "none"
+  | "scaleDown";
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export const size = (width = 0, height = 0) => ({ width, height });
+
+export const rect2rect = (src: SkRect, dst: SkRect) => {
+  const scaleX = dst.width / src.width;
+  const scaleY = dst.height / src.height;
+  const translateX = dst.x - src.x * scaleX;
+  const translateY = dst.y - src.y * scaleY;
+  return [{ translateX }, { translateY }, { scaleX }, { scaleY }] as const;
+};
+
+export const fitRects = (
+  fit: Fit,
+  rect: SkRect,
+  { x, y, width, height }: SkRect
+) => {
+  const sizes = applyBoxFit(
+    fit,
+    { width: rect.width, height: rect.height },
+    { width, height }
+  );
+  const src = inscribe(sizes.src, rect);
+  const dst = inscribe(sizes.dst, {
+    x,
+    y,
+    width,
+    height,
+  });
+  return { src, dst };
+};
+
+const inscribe = (
+  { width, height }: Size,
+  rect: { x: number; y: number; width: number; height: number }
+) => {
+  const halfWidthDelta = (rect.width - width) / 2.0;
+  const halfHeightDelta = (rect.height - height) / 2.0;
+  return {
+    x: rect.x + halfWidthDelta,
+    y: rect.y + halfHeightDelta,
+    width,
+    height,
+  };
+};
+
+const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
+  let src = size(),
+    dst = size();
+  if (
+    input.height <= 0.0 ||
+    input.width <= 0.0 ||
+    output.height <= 0.0 ||
+    output.width <= 0.0
+  ) {
+    return { src, dst };
+  }
+  switch (fit) {
+    case "fill":
+      src = input;
+      dst = output;
+      break;
+    case "contain":
+      src = input;
+      if (output.width / output.height > src.width / src.height) {
+        dst = size((src.width * output.height) / src.height, output.height);
+      } else {
+        dst = size(output.width, (src.height * output.width) / src.width);
+      }
+      break;
+    case "cover":
+      if (output.width / output.height > input.width / input.height) {
+        src = size(input.width, (input.width * output.height) / output.width);
+      } else {
+        src = size((input.height * output.width) / output.height, input.height);
+      }
+      dst = output;
+      break;
+    case "fitWidth":
+      src = size(input.width, (input.width * output.height) / output.width);
+      dst = size(output.width, (src.height * output.width) / src.width);
+      break;
+    case "fitHeight":
+      src = size((input.height * output.width) / output.height, input.height);
+      dst = size((src.width * output.height) / src.height, output.height);
+      break;
+    case "none":
+      src = size(
+        Math.min(input.width, output.width),
+        Math.min(input.height, output.height)
+      );
+      dst = src;
+      break;
+    case "scaleDown":
+      src = input;
+      dst = input;
+      const aspectRatio = input.width / input.height;
+      if (dst.height > output.height) {
+        dst = size(output.height * aspectRatio, output.height);
+      }
+      if (dst.width > output.width) {
+        dst = size(output.width, output.width / aspectRatio);
+      }
+      break;
+    default:
+      exhaustiveCheck(fit);
+  }
+  return { src, dst };
+};

package/src/renderer/components/image/Image.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import type { SkImage } from "../../../skia/types";
+import type {
+  CustomPaintProps,
+  RectDef,
+  AnimatedProps,
+} from "../../processors";
+import { createDrawing } from "../../nodes/Drawing";
+import { processRect } from "../../processors";
+
+import type { Fit } from "./BoxFit";
+import { fitRects } from "./BoxFit";
+
+export type SourceImageProps = {
+  image: SkImage;
+};
+
+export type BaseImageProps = RectDef &
+  SourceImageProps & {
+    fit: Fit;
+  };
+
+export type ImageProps = CustomPaintProps & BaseImageProps;
+
+const onDraw = createDrawing<ImageProps>(
+  ({ canvas, paint, Skia }, { fit, image, ...rectProps }) => {
+    const rect = processRect(Skia, rectProps);
+    const { src, dst } = fitRects(
+      fit,
+      {
+        x: 0,
+        y: 0,
+        width: image.width(),
+        height: image.height(),
+      },
+      rect
+    );
+    canvas.drawImageRect(image, src, dst, paint);
+  }
+);
+export const Image = (props: AnimatedProps<ImageProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} />;
+};
+
+Image.defaultProps = {
+  x: 0,
+  y: 0,
+  fit: "contain",
+};

package/src/renderer/components/image/ImageSVG.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { SkSVG } from "../../../skia/types";
+import { createDrawing } from "../../nodes";
+import type { AnimatedProps, RectDef } from "../../processors";
+import { processRect } from "../../processors";
+
+export type ImageSVGProps = RectDef & {
+  svg: SkSVG;
+};
+
+const onDraw = createDrawing<ImageSVGProps>(
+  ({ canvas, Skia }, { svg, ...rectProps }) => {
+    const { x, y, width, height } = processRect(Skia, rectProps);
+    canvas.save();
+    canvas.translate(x, y);
+    canvas.drawSvg(svg, width, height);
+    canvas.restore();
+  }
+);
+
+export const ImageSVG = (props: AnimatedProps<ImageSVGProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} />;
+};

package/src/renderer/components/image/ImageShader.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+import type { SkRect, SkImage, Skia } from "../../../skia/types";
+import { TileMode, FilterMode, MipmapMode } from "../../../skia/types";
+import { createDeclaration } from "../../nodes";
+import type {
+  TransformProps,
+  SkEnum,
+  AnimatedProps,
+  RectCtor,
+} from "../../processors";
+import { localMatrix, enumKey } from "../../processors";
+
+import type { Fit } from "./BoxFit";
+import { rect2rect, fitRects } from "./BoxFit";
+
+const getRect = (
+  Skia: Skia,
+  props: Omit<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "image">
+): SkRect | undefined => {
+  const { x, y, width, height } = props;
+  if (props.rect) {
+    return props.rect;
+  } else if (
+    x !== undefined &&
+    y !== undefined &&
+    width !== undefined &&
+    height !== undefined
+  ) {
+    return Skia.XYWHRect(x, y, width, height);
+  } else {
+    return undefined;
+  }
+};
+
+interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
+  tx: SkEnum<typeof TileMode>;
+  ty: SkEnum<typeof TileMode>;
+  fm: SkEnum<typeof FilterMode>;
+  mm: SkEnum<typeof MipmapMode>;
+  fit: Fit;
+  rect?: SkRect;
+  image: SkImage;
+}
+
+const onDeclare = createDeclaration<ImageShaderProps>(
+  ({ tx, ty, fm, mm, fit, image, ...imageShaderProps }, _, { Skia }) => {
+    const rct = getRect(Skia, imageShaderProps);
+    if (rct) {
+      const rects = fitRects(
+        fit,
+        { x: 0, y: 0, width: image.width(), height: image.height() },
+        rct
+      );
+      const m3 = rect2rect(rects.src, rects.dst);
+      imageShaderProps.transform = [
+        ...(imageShaderProps.transform ?? []),
+        ...m3,
+      ];
+    }
+    return image.makeShaderOptions(
+      TileMode[enumKey(tx)],
+      TileMode[enumKey(ty)],
+      FilterMode[enumKey(fm)],
+      MipmapMode[enumKey(mm)],
+      localMatrix(Skia.Matrix(), imageShaderProps)
+    );
+  }
+);
+
+export const ImageShader = (props: AnimatedProps<ImageShaderProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+ImageShader.defaultProps = {
+  tx: "decal",
+  ty: "decal",
+  fm: "nearest",
+  mm: "none",
+  fit: "none",
+  transform: [],
+} as const;

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

@@ -0,0 +1,4 @@
+export * from "./Image";
+export * from "./ImageShader";
+export * from "./ImageSVG";
+export * from "./BoxFit";

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

@@ -0,0 +1,37 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { TileMode } from "../../../skia/types";
+import type { Radius, SkEnum } from "../../processors";
+import { enumKey } from "../../processors";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import { processRadius } from "../../processors/Radius";
+import { createDeclaration } from "../../nodes";
+
+import { getInput } from "./getInput";
+
+export interface BlurProps {
+  blur: Radius;
+  mode: SkEnum<typeof TileMode>;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<BlurProps>(
+  ({ blur, mode }, children, { Skia }) => {
+    const sigma = processRadius(Skia, blur);
+    return Skia.ImageFilter.MakeBlur(
+      sigma.x,
+      sigma.y,
+      TileMode[enumKey(mode)],
+      getInput(Skia, children)
+    );
+  }
+);
+
+export const Blur = (props: AnimatedProps<BlurProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+Blur.defaultProps = {
+  mode: "decal",
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { ColorChannel } from "../../../skia/types";
+import { createDeclaration } from "../../nodes";
+import type { SkEnum, AnimatedProps } from "../../processors";
+import { enumKey } from "../../processors";
+
+import { getInput } from "./getInput";
+
+export interface DisplacementMapProps {
+  channelX: SkEnum<typeof ColorChannel>;
+  channelY: SkEnum<typeof ColorChannel>;
+  scale: number;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<DisplacementMapProps>(
+  ({ channelX, channelY, scale }, children, { Skia }) => {
+    const [in1, in2] = children.filter((c) => !!c);
+    const x = ColorChannel[enumKey(channelX)];
+    const y = ColorChannel[enumKey(channelY)];
+    const map = getInput(Skia, [in1]);
+    const input = in2 ? getInput(Skia, [in2]) : null;
+    if (!map) {
+      throw new Error("No DisplacementMap provided");
+    }
+    return Skia.ImageFilter.MakeDisplacementMap(x, y, scale, map, input);
+  }
+);
+
+export const DisplacementMap = (props: AnimatedProps<DisplacementMapProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,38 @@
+import type { SkColor, Skia, SkImageFilter } from "../../../skia/types";
+import { BlendMode, TileMode } from "../../../skia/types";
+
+const Black = Float32Array.of(0, 0, 0, 1);
+
+export const MakeInnerShadow = (
+  Skia: Skia,
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
+    null
+  );
+  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
+    null
+  );
+  const f1 = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
+    null
+  );
+  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
+  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
+  if (shadowOnly) {
+    return f4;
+  }
+  return Skia.ImageFilter.MakeCompose(
+    input,
+    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps, Radius } from "../../processors";
+import { processRadius } from "../../processors/Radius";
+
+import { getInput } from "./getInput";
+
+export interface MorphologyProps {
+  operator: "erode" | "dilate";
+  radius: Radius;
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+const onDeclare = createDeclaration<MorphologyProps>(
+  ({ radius, operator }, children, { Skia }) => {
+    const input = getInput(Skia, children);
+    const r = processRadius(Skia, radius);
+    const factory =
+      operator === "dilate"
+        ? Skia.ImageFilter.MakeDilate
+        : Skia.ImageFilter.MakeErode;
+    return factory(r.x, r.y, input);
+  }
+);
+
+export const Morphology = (props: AnimatedProps<MorphologyProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+Morphology.defaultProps = {
+  operator: "dilate",
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+
+import { getInput } from "./getInput";
+
+export interface OffsetProps {
+  x: number;
+  y: number;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDeclare = createDeclaration<OffsetProps>(
+  ({ x, y }, children, { Skia }) => {
+    return Skia.ImageFilter.MakeOffset(x, y, getInput(Skia, children));
+  }
+);
+
+export const Offset = (props: AnimatedProps<OffsetProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+Offset.defaultProps = {
+  x: 0,
+  y: 0,
+};

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

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

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

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { Color } from "../../../skia/types";
+import { processColor } from "../../processors/Color";
+
+import { getInput } from "./getInput";
+import { MakeInnerShadow } from "./InnerShadow";
+
+export interface ShadowProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  inner?: boolean;
+  shadowOnly?: boolean;
+}
+
+const onDeclare = createDeclaration<ShadowProps>(
+  (
+    { dx, dy, blur, color: cl, shadowOnly, inner },
+    children,
+    { opacity, Skia }
+  ) => {
+    const input = getInput(Skia, children);
+    const color = processColor(Skia, cl, opacity);
+    let factory;
+    if (inner) {
+      factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
+    } else {
+      factory = shadowOnly
+        ? Skia.ImageFilter.MakeDropShadowOnly
+        : Skia.ImageFilter.MakeDropShadow;
+    }
+    return factory(dx, dy, blur, blur, color, input);
+  }
+);
+
+export const Shadow = (props: AnimatedProps<ShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};