@shopify/react-native-skia 0.1.115

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

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

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

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+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) => {
+  const cf = Skia.ColorFilter.MakeLumaColorFilter();
+  return composeColorFilter(cf, children);
+});
+
+export const LumaColorFilter = (props: AnimatedProps<LumaColorFilterProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,47 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { Skia } from "../../../skia";
+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) => {
+    const cf = Skia.ColorFilter.MakeMatrix(matrix);
+    return composeColorFilter(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,21 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+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) => {
+  const cf = Skia.ColorFilter.MakeSRGBToLinearGamma();
+  return composeColorFilter(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,131 @@
+import { exhaustiveCheck } from "../../typeddash";
+import { Skia } from "../../../skia";
+import type { SkRect } from "../../../skia";
+
+// 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, {
+    x: 0,
+    y: 0,
+    width: rect.width,
+    height: rect.height,
+  });
+  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 Skia.XYWHRect(
+    rect.x + halfWidthDelta,
+    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";
+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 }, { fit, image, ...rectProps }) => {
+    const rect = processRect(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";
+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 }, { svg, ...rectProps }) => {
+    const { x, y, width, height } = processRect(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,81 @@
+import React from "react";
+
+import type { SkRect, SkImage } from "../../../skia";
+import { TileMode, FilterMode, MipmapMode } from "../../../skia";
+import { createDeclaration } from "../../nodes";
+import type {
+  TransformProps,
+  SkEnum,
+  AnimatedProps,
+  RectCtor,
+} from "../../processors";
+import { localMatrix, enumKey, rect } from "../../processors";
+
+import type { Fit } from "./BoxFit";
+import { rect2rect, fitRects } from "./BoxFit";
+
+const getRect = (
+  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 rect(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 }) => {
+    const rct = getRect(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(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,35 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { Skia, TileMode } from "../../../skia";
+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) => {
+  const sigma = processRadius(blur);
+  return Skia.ImageFilter.MakeBlur(
+    sigma.x,
+    sigma.y,
+    TileMode[enumKey(mode)],
+    getInput(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,35 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes";
+import type { SkEnum, AnimatedProps } from "../../processors";
+import { enumKey } from "../../processors";
+import { ColorChannel } from "../../../skia/ImageFilter/ImageFilterFactory";
+
+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) => {
+    const [in1, in2] = children.filter((c) => !!c);
+    const x = ColorChannel[enumKey(channelX)];
+    const y = ColorChannel[enumKey(channelY)];
+    const map = getInput([in1]);
+    const input = in2 ? getInput([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/DropShadow.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { Color } from "../../../skia/Color";
+import { processColor } from "../../../skia/Color";
+
+import { getInput } from "./getInput";
+
+export interface DropShadowProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  shadowOnly?: boolean;
+}
+
+const onDeclare = createDeclaration<DropShadowProps>(
+  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
+    const input = getInput(children);
+    const factory = shadowOnly
+      ? Skia.ImageFilter.MakeDropShadowOnly
+      : Skia.ImageFilter.MakeDropShadow;
+    return factory(dx, dy, blur, blur, processColor(color, opacity), input);
+  }
+);
+
+export const DropShadow = (props: AnimatedProps<DropShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { BlendMode, Skia, TileMode, processColor } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors";
+import type { Color } from "../../../skia";
+
+import { getInput } from "./getInput";
+
+export interface InnerShadowProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  shadowOnly?: boolean;
+  inner?: boolean;
+}
+
+const onDeclare = createDeclaration<InnerShadowProps>(
+  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
+    const input = getInput(children);
+    const cl = processColor(color, opacity);
+    const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
+      null
+    );
+    const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
+      null
+    );
+    const f1 = Skia.ImageFilter.MakeColorFilter(
+      Skia.ColorFilter.MakeBlend(cl, BlendMode.SrcOut),
+      null
+    );
+    const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+    const f3 = Skia.ImageFilter.MakeBlur(blur, blur, 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)
+    );
+  }
+);
+
+export const InnerShadow = (props: AnimatedProps<InnerShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+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) => {
+    const input = getInput(children);
+    const r = processRadius(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,27 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { Skia } from "../../../skia";
+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) => {
+  return Skia.ImageFilter.MakeOffset(x, y, getInput(children));
+});
+
+export const Offset = (props: AnimatedProps<OffsetProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+Offset.defaultProps = {
+  x: 0,
+  y: 0,
+};

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

@@ -0,0 +1,19 @@
+import type { DeclarationResult } from "../../nodes";
+import { isImageFilter, isColorFilter, isShader, Skia } from "../../../skia";
+
+export const getInput = (children: DeclarationResult[]) => {
+  const [child] = children.filter((c) => c);
+  if (!child) {
+    return null;
+  }
+  if (isImageFilter(child)) {
+    return child;
+  }
+  if (isColorFilter(child)) {
+    return Skia.ImageFilter.MakeColorFilter(child, null);
+  }
+  if (isShader(child)) {
+    return Skia.ImageFilter.MakeShader(child, null);
+  }
+  throw new Error("Invalid image filter child: " + child);
+};

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

@@ -0,0 +1,6 @@
+export * from "./Blur";
+export * from "./Offset";
+export * from "./DisplacementMap";
+export * from "./DropShadow";
+export * from "./InnerShadow";
+export * from "./Morphology";