@shopify/react-native-skia 0.1.146 → 0.1.148

package/src/renderer/components/Group.tsx

@@ -1,83 +1,8 @@
 import React from "react";
-import type { RefObject } from "react";
 
-import type { SkPaint } from "../../skia/types";
-import { ClipOp } from "../../skia/types";
-import {
-  processCanvasTransform,
-  processPaint,
-  processClip,
-} from "../processors";
-import type {
-  CustomPaintProps,
-  TransformProps,
-  AnimatedProps,
-  ClipDef,
-} from "../processors";
-import { createDrawing, DrawingNode } from "../nodes";
-import { isDeclarationNode } from "../nodes/Declaration";
+import type { SkiaProps } from "../processors";
+import type { GroupProps } from "../../dom/types";
 
-const isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>
-  "__typename__" in obj && obj.__typename__ === "Paint";
-
-export interface GroupProps extends CustomPaintProps, TransformProps {
-  clip?: ClipDef;
-  invertClip?: boolean;
-  layer?: RefObject<SkPaint> | SkPaint | boolean;
-}
-
-const onDraw = createDrawing<GroupProps>(
-  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
-    const { canvas, opacity, Skia } = ctx;
-    const declarations = node.children
-      .filter(isDeclarationNode)
-      .map((child) => child.draw(ctx));
-
-    const drawings = node.children.filter(
-      (child) => child instanceof DrawingNode
-    );
-    const paint = processPaint(
-      ctx.Skia,
-      ctx.paint.copy(),
-      opacity,
-      groupProps,
-      declarations
-    );
-    const hasTransform = !!groupProps.transform || !!groupProps.matrix;
-    const hasClip = !!clip;
-    const shouldSave = hasTransform || hasClip || !!layer;
-    if (shouldSave) {
-      if (layer) {
-        if (typeof layer === "boolean") {
-          canvas.saveLayer();
-        } else if (isSkPaint(layer)) {
-          canvas.saveLayer(layer);
-        } else {
-          canvas.saveLayer(layer.current ?? undefined);
-        }
-      } else {
-        canvas.save();
-      }
-      processCanvasTransform(canvas, groupProps);
-      if (clip) {
-        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-        processClip(Skia, canvas, clip, op);
-      }
-    }
-    node.visit(
-      {
-        ...ctx,
-        paint,
-        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
-      },
-      drawings
-    );
-    if (shouldSave) {
-      canvas.restore();
-    }
-  }
-);
-
-export const Group = (props: AnimatedProps<GroupProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+export const Group = (props: SkiaProps<GroupProps>) => {
+  return <skGroup {...props} />;
 };

package/src/renderer/components/Paint.tsx

@@ -1,30 +1,13 @@
-import type { ReactNode } from "react";
-import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, forwardRef } from "react";
 
-import type { SkPaint } from "../../skia/types";
-import type { CustomPaintProps, AnimatedProps } from "../processors";
-import { processPaint } from "../processors";
-import { createDeclaration } from "../nodes";
-import { useCanvas } from "../useCanvas";
+import type { SkiaProps } from "../processors";
+import type { DrawingNodeProps } from "../../dom/types";
+import type { PaintNode } from "../../dom/nodes/PaintNode";
 
-export const usePaintRef = () => useRef<SkPaint>(null);
+export const usePaintRef = () => useRef<PaintNode>(null);
 
-export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
-  children?: ReactNode | ReactNode[];
-}
-
-export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
+export const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(
   (props, ref) => {
-    const { Skia } = useCanvas();
-    const paint = useMemo(() => Skia.Paint(), [Skia]);
-    useImperativeHandle(ref, () => paint, [paint]);
-    const onDeclare = useMemo(
-      () =>
-        createDeclaration<PaintProps>((paintProps, children, ctx) =>
-          processPaint(ctx.Skia, paint, ctx.opacity, paintProps, children)
-        ),
-      [paint]
-    );
-    return <skDeclaration onDeclare={onDeclare} {...props} />;
+    return <skPaint ref={ref} {...props} />;
   }
 );

package/src/renderer/components/Picture.tsx

@@ -1,17 +1,8 @@
 import React from "react";
 
-import type { SkPicture } from "../../skia/types";
-import { createDrawing } from "../nodes/Drawing";
+import type { PictureProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
 
-export interface PictureProps {
-  picture: SkPicture;
-}
-
-const onDraw = createDrawing<PictureProps>((ctx, { picture }) => {
-  const { canvas } = ctx;
-  canvas.drawPicture(picture);
-});
-
-export const Picture = (props: PictureProps) => {
-  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+export const Picture = (props: SkiaProps<PictureProps>) => {
+  return <skPicture {...props} />;
 };

package/src/renderer/components/backdrop/BackdropBlur.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
 import { Blur } from "../imageFilters";
-import type { AnimatedProps, Radius } from "../../processors";
+import type { AnimatedProps } from "../../processors";
+import type { Radius } from "../../../dom/types";
 
 import type { BackdropFilterProps } from "./BackdropFilter";
 import { BackdropFilter } from "./BackdropFilter";

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -1,46 +1,22 @@
 import type { ReactNode } from "react";
 import React from "react";
 
-import type { AnimatedProps } from "../../processors";
-import { createDrawing } from "../../nodes";
-import type { Node } from "../../nodes";
-import { getInput } from "../imageFilters/getInput";
-import type { GroupProps } from "../Group";
+import type { GroupProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 import { Group } from "../Group";
 
-const disableFilterMemoization = (children: Node[]) => {
-  children.forEach((child) => {
-    child.memoizable = false;
-    disableFilterMemoization(child.children);
-  });
-};
-
 export interface BackdropFilterProps extends GroupProps {
   filter: ReactNode | ReactNode[];
 }
 
-const onDraw = createDrawing<BackdropFilterProps>((ctx, _, node) => {
-  disableFilterMemoization(node.children);
-  const toFilter = node.visit(ctx);
-  const filter = getInput(ctx.Skia, toFilter);
-  if (!filter) {
-    throw new Error("No image filter provided to the background");
-  }
-  const { canvas } = ctx;
-  canvas.saveLayer(undefined, null, filter);
-  canvas.restore();
-});
-
 export const BackdropFilter = ({
-  filter: filterChild,
+  filter,
   children: groupChildren,
   ...props
-}: AnimatedProps<BackdropFilterProps>) => {
+}: SkiaProps<BackdropFilterProps>) => {
   return (
     <Group {...props}>
-      <skDrawing onDraw={onDraw} skipProcessing>
-        {filterChild}
-      </skDrawing>
+      <skBackdropFilter>{filter}</skBackdropFilter>
       {groupChildren}
     </Group>
   );

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

@@ -1,30 +1,8 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import type { Color } from "../../../skia/types";
-import { BlendMode } from "../../../skia/types";
-import { createDeclaration } from "../../nodes";
-import type { SkEnum, AnimatedProps } from "../../processors";
-import { enumKey } from "../../processors";
+import type { SkiaProps } from "../../processors";
+import type { BlendColorFilterProps } from "../../../dom/types";
 
-import { composeColorFilter } from "./Compose";
-
-export interface BlendColorProps {
-  mode: SkEnum<typeof BlendMode>;
-  color: Color;
-  children?: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration<BlendColorProps>(
-  ({ mode, color }, children, { Skia }) => {
-    const cf = Skia.ColorFilter.MakeBlend(
-      Skia.Color(color),
-      BlendMode[enumKey(mode)]
-    );
-    return composeColorFilter(Skia, cf, children);
-  }
-);
-
-export const BlendColor = (props: AnimatedProps<BlendColorProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const BlendColor = (props: SkiaProps<BlendColorFilterProps>) => {
+  return <skBlendColorFilter {...props} />;
 };

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

@@ -1,27 +1,8 @@
 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 type { SkiaProps } from "../../processors/Animations/Animations";
+import type { LerpColorFilterProps } from "../../../dom/types";
 
-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} />;
+export const Lerp = (props: SkiaProps<LerpColorFilterProps>) => {
+  return <skLerpColorFilter {...props} />;
 };

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

@@ -1,20 +1,8 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { ChildrenProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-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} />;
+export const LinearToSRGBGamma = (props: SkiaProps<ChildrenProps>) => {
+  return <skLinearToSRGBGammaColorFilter {...props} />;
 };

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

@@ -1,18 +1,8 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { ChildrenProps } from "../../../dom/types";
+import type { SkiaProps } 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} />;
+export const LumaColorFilter = (props: SkiaProps<ChildrenProps>) => {
+  return <skLumaColorFilter {...props} />;
 };

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

@@ -1,25 +1,10 @@
 import React from "react";
-import type { ReactNode } from "react";
 
-import { createDeclaration } from "../../nodes";
-import type { AnimatedProps } from "../../processors";
+import type { SkiaProps } from "../../processors";
+import type { MatrixColorFilterProps } from "../../../dom/types";
 
-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 ColorMatrix = (props: SkiaProps<MatrixColorFilterProps>) => {
+  return <skMatrixColorFilter {...props} />;
 };
 
 export const OpacityMatrix = (opacity: number) => [

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

@@ -1,20 +1,8 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { ChildrenProps } from "../../../dom/types";
+import type { SkiaProps } 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} />;
+export const SRGBToLinearGamma = (props: SkiaProps<ChildrenProps>) => {
+  return <skSRGBToLinearGammaColorFilter {...props} />;
 };

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

@@ -1,46 +1,10 @@
 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 { SkiaProps } from "../../processors";
+import type { ImageProps } from "../../../dom/types";
 
-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} />;
+export const Image = (props: SkiaProps<ImageProps>) => {
+  return <skImage {...props} />;
 };
 
 Image.defaultProps = {

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

@@ -1,24 +1,8 @@
 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();
-  }
-);
+import type { ImageSVGProps } from "../../../dom/types";
+import type { AnimatedProps } from "../../processors";
 
 export const ImageSVG = (props: AnimatedProps<ImageSVGProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+  return <skImageSVG {...props} />;
 };

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

@@ -1,75 +1,10 @@
 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 { ImageShaderProps } from "../../../dom/types";
+import type { SkiaProps } 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} />;
+export const ImageShader = (props: SkiaProps<ImageShaderProps>) => {
+  return <skImageShader {...props} />;
 };
 
 ImageShader.defaultProps = {

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

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

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

@@ -1,35 +1,10 @@
 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 type { SkiaProps } from "../../processors/Animations/Animations";
+import type { BlurImageFilterProps } from "../../../dom/types";
 
-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} />;
+export const Blur = (props: SkiaProps<BlurImageFilterProps>) => {
+  return <skBlurImageFilter {...props} />;
 };
 
 Blur.defaultProps = {

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

@@ -1,34 +1,10 @@
 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 type { SkiaProps } from "../../processors";
+import type { DisplacementMapImageFilterProps } from "../../../dom/types";
 
-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} />;
+export const DisplacementMap = (
+  props: SkiaProps<DisplacementMapImageFilterProps>
+) => {
+  return <skDisplacementMapImageFilter {...props} />;
 };