@shopify/react-native-skia 0.1.147 → 0.1.148

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

@@ -1,36 +1,8 @@
 import React from "react";
 
-import type { AnimatedProps } from "../../processors";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { Vector } from "../../../skia/types";
+import type { SweepGradientProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-import type { GradientProps } from "./Gradient";
-import { processGradientProps } from "./Gradient";
-
-export interface SweepGradientProps extends GradientProps {
-  c: Vector;
-  start?: number;
-  end?: number;
-}
-
-const onDeclare = createDeclaration<SweepGradientProps>(
-  ({ c, start, end, ...gradientProps }, _, { Skia }) => {
-    const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(Skia, gradientProps);
-    return Skia.Shader.MakeSweepGradient(
-      c.x,
-      c.y,
-      colors,
-      positions,
-      mode,
-      localMatrix,
-      flags,
-      start,
-      end
-    );
-  }
-);
-
-export const SweepGradient = (props: AnimatedProps<SweepGradientProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const SweepGradient = (props: SkiaProps<SweepGradientProps>) => {
+  return <skSweepGradient {...props} />;
 };

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

@@ -1,32 +1,10 @@
 import React from "react";
 
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { TurbulenceProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 
-export interface TurbulenceProps {
-  freqX: number;
-  freqY: number;
-  octaves: number;
-  seed: number;
-  tileWidth: number;
-  tileHeight: number;
-}
-
-const onDeclare = createDeclaration<TurbulenceProps>(
-  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }, _, { Skia }) => {
-    return Skia.Shader.MakeTurbulence(
-      freqX,
-      freqY,
-      octaves,
-      seed,
-      tileWidth,
-      tileHeight
-    );
-  }
-);
-
-export const Turbulence = (props: AnimatedProps<TurbulenceProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+export const Turbulence = (props: SkiaProps<TurbulenceProps>) => {
+  return <skTurbulence {...props} />;
 };
 
 Turbulence.defaultProps = {

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

@@ -1,39 +1,10 @@
 import React from "react";
 
-import type { AnimatedProps } from "../../processors";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { Vector } from "../../../skia/types";
-
-import type { GradientProps } from "./Gradient";
-import { processGradientProps } from "./Gradient";
-
-export interface TwoPointConicalGradientProps extends GradientProps {
-  start: Vector;
-  startR: number;
-  end: Vector;
-  endR: number;
-}
-
-const onDeclare = createDeclaration<TwoPointConicalGradientProps>(
-  ({ start, startR, end, endR, ...gradientProps }, _, { Skia }) => {
-    const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(Skia, gradientProps);
-    return Skia.Shader.MakeTwoPointConicalGradient(
-      start,
-      startR,
-      end,
-      endR,
-      colors,
-      positions,
-      mode,
-      localMatrix,
-      flags
-    );
-  }
-);
+import type { TwoPointConicalGradientProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
 export const TwoPointConicalGradient = (
-  props: AnimatedProps<TwoPointConicalGradientProps>
+  props: SkiaProps<TwoPointConicalGradientProps>
 ) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+  return <skTwoPointConicalGradient {...props} />;
 };

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

@@ -1,115 +1,12 @@
 import React from "react";
 
-import type {
-  Color,
-  SkRRect,
-  SkJSIInstance,
-  SkRect,
-  Skia,
-} from "../../../skia/types";
-import { ClipOp, BlurStyle } from "../../../skia/types";
-import { createDrawing } from "../../nodes";
-import type { AnimatedProps, CustomPaintProps } from "../../processors";
-import { createDeclaration } from "../../nodes/Declaration";
-import { processColor } from "../../processors/Color";
-import { isRRect } from "../../../skia/types/RRect";
+import type { BoxProps, BoxShadowProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-const inflate = (
-  Skia: Skia,
-  box: SkRRect,
-  dx: number,
-  dy: number,
-  tx = 0,
-  ty = 0
-) =>
-  Skia.RRectXY(
-    Skia.XYWHRect(
-      box.rect.x - dx + tx,
-      box.rect.y - dy + ty,
-      box.rect.width + 2 * dx,
-      box.rect.height + 2 * dy
-    ),
-    box.rx + dx,
-    box.ry + dy
-  );
-
-const deflate = (
-  Skia: Skia,
-  box: SkRRect,
-  dx: number,
-  dy: number,
-  tx = 0,
-  ty = 0
-) => inflate(Skia, box, -dx, -dy, tx, ty);
-
-interface BoxShadowProps {
-  dx?: number;
-  dy?: number;
-  spread?: number;
-  blur: number;
-  color?: Color;
-  inner?: boolean;
-}
-
-interface BoxShadowDecl extends BoxShadowProps, SkJSIInstance<"BoxShadow"> {}
-
-const onDeclare = createDeclaration<BoxShadowProps>(
-  ({ dx, dy, spread, blur, color, inner }) => {
-    return { dx, dy, spread, blur, color, inner, __typename__: "BoxShadow" };
-  }
-);
-
-export const BoxShadow = (props: AnimatedProps<BoxShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
-};
-
-const isBoxShadow = (s: SkJSIInstance<string>): s is BoxShadowDecl =>
-  s.__typename__ === "BoxShadow";
-
-interface BoxProps extends CustomPaintProps {
-  box: SkRRect | SkRect;
-}
-
-const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
-  const { canvas, paint, opacity, Skia } = ctx;
-  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
-  const shadows = node.visit(ctx).filter<BoxShadowDecl>(isBoxShadow);
-  shadows
-    .filter((shadow) => !shadow.inner)
-    .map((shadow) => {
-      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(Skia, color, opacity));
-      lPaint.setMaskFilter(
-        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
-      );
-      canvas.drawRRect(inflate(Skia, box, spread, spread, dx, dy), lPaint);
-    });
-  canvas.drawRRect(box, paint);
-
-  shadows
-    .filter((shadow) => shadow.inner)
-    .map((shadow) => {
-      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const delta = Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
-      canvas.save();
-      canvas.clipRRect(box, ClipOp.Intersect, false);
-      const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(Skia, color, opacity));
-      lPaint.setMaskFilter(
-        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
-      );
-      const inner = deflate(Skia, box, spread, spread, dx, dy);
-      const outer = inflate(Skia, box, delta.x, delta.y);
-      canvas.drawDRRect(outer, inner, lPaint);
-      canvas.restore();
-    });
-});
-
-export const Box = (props: AnimatedProps<BoxProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const BoxShadow = (props: SkiaProps<BoxShadowProps>) => {
+  return <skBoxShadow {...props} />;
 };
 
-Box.defaultProps = {
-  shadows: [],
+export const Box = (props: SkiaProps<BoxProps>) => {
+  return <skBox {...props} />;
 };

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

@@ -1,22 +1,10 @@
 import React from "react";
 
-import type {
-  CustomPaintProps,
-  AnimatedProps,
-  CircleDef,
-} from "../../processors";
-import { createDrawing } from "../../nodes/Drawing";
-import { processCircle } from "../../processors";
+import type { SkiaProps } from "../../processors";
+import type { CircleProps } from "../../../dom/types";
 
-export type CircleProps = CircleDef & CustomPaintProps;
-
-const onDraw = createDrawing<CircleProps>(({ canvas, paint, Skia }, def) => {
-  const { c, r } = processCircle(Skia, def);
-  canvas.drawCircle(c.x, c.y, r, paint);
-});
-
-export const Circle = (props: AnimatedProps<CircleProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Circle = (props: SkiaProps<CircleProps>) => {
+  return <skCircle {...props} />;
 };
 
 Circle.defaultProps = {

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

@@ -1,21 +1,8 @@
 import React from "react";
 
-import type { CustomPaintProps } from "../../processors";
-import type { SkRRect } from "../../../skia/types";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { createDrawing } from "../../nodes/Drawing";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { DiffRectProps } from "../../../dom/types";
 
-export interface DiffRectProps extends CustomPaintProps {
-  inner: SkRRect;
-  outer: SkRRect;
-}
-
-const onDraw = createDrawing<DiffRectProps>(
-  ({ canvas, paint }, { inner, outer }) => {
-    canvas.drawDRRect(outer, inner, paint);
-  }
-);
-
-export const DiffRect = (props: AnimatedProps<DiffRectProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const DiffRect = (props: SkiaProps<DiffRectProps>) => {
+  return <skDiffRect {...props} />;
 };

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

@@ -1,15 +1,8 @@
 import React from "react";
 
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { CustomPaintProps } from "../../processors/Paint";
-import { createDrawing } from "../../nodes/Drawing";
+import type { DrawingNodeProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 
-export type FillProps = CustomPaintProps;
-
-const onDraw = createDrawing(({ canvas, paint }) => {
-  canvas.drawPaint(paint);
-});
-
-export const Fill = (props: AnimatedProps<FillProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Fill = (props: SkiaProps<DrawingNodeProps>) => {
+  return <skFill {...props} />;
 };

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

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
-import type { Fit } from "../image";
-import { rect2rect, fitRects } from "../image";
+import type { Fit } from "../../../dom/nodes";
+import { fitRects, rect2rect } from "../../../dom/nodes";
 import type { SkRect } from "../../../skia/types";
 import { Group } from "../Group";
 

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

@@ -1,17 +1,8 @@
 import React from "react";
 
-import type { CustomPaintProps, AnimatedProps } from "../../processors";
-import { createDrawing } from "../../nodes/Drawing";
-import type { Vector } from "../../../skia/types";
+import type { SkiaProps } from "../../processors";
+import type { LineProps } from "../../../dom/types";
 
-export interface LineProps extends CustomPaintProps {
-  p1: Vector;
-  p2: Vector;
-}
-const onDraw = createDrawing<LineProps>(({ canvas, paint }, { p1, p2 }) => {
-  canvas.drawLine(p1.x, p1.y, p2.x, p2.y, paint);
-});
-
-export const Line = (props: AnimatedProps<LineProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Line = (props: SkiaProps<LineProps>) => {
+  return <skLine {...props} />;
 };

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

@@ -1,24 +1,10 @@
 import React from "react";
 
-import type {
-  CustomPaintProps,
-  RectDef,
-  AnimatedProps,
-} from "../../processors";
-import { processRect } from "../../processors";
-import { createDrawing } from "../../nodes";
+import type { OvalProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-export type OvalProps = RectDef & CustomPaintProps;
-
-const onDraw = createDrawing<OvalProps>(
-  ({ canvas, paint, Skia }, rectProps) => {
-    const rect = processRect(Skia, rectProps);
-    canvas.drawOval(rect, paint);
-  }
-);
-
-export const Oval = (props: AnimatedProps<OvalProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Oval = (props: SkiaProps<OvalProps>) => {
+  return <skOval {...props} />;
 };
 
 Oval.defaultProps = {

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

@@ -1,63 +1,8 @@
 import React from "react";
 
-import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
-import { enumKey } from "../../processors";
-import type { SkPoint, Color, Vector } from "../../../skia/types";
-import { BlendMode } from "../../../skia/types";
-import { createDrawing } from "../../nodes";
-import { processColor } from "../../processors/Color";
+import type { SkiaProps } from "../../processors";
+import type { PatchProps } from "../../../dom/types";
 
-export interface CubicBezierHandle {
-  pos: Vector;
-  c1: Vector;
-  c2: Vector;
-}
-
-export interface PatchProps extends CustomPaintProps {
-  colors?: readonly Color[];
-  patch: readonly [
-    CubicBezierHandle,
-    CubicBezierHandle,
-    CubicBezierHandle,
-    CubicBezierHandle
-  ];
-  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];
-  blendMode?: SkEnum<typeof BlendMode>;
-}
-
-const onDraw = createDrawing<PatchProps>(
-  ({ canvas, paint, opacity, Skia }, { colors, patch, texture, blendMode }) => {
-    // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
-    const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
-    const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
-    canvas.drawPatch(
-      // Patch requires a path with the following constraints:
-      // M tl
-      // C c1 c2 br
-      // C c1 c2 bl
-      // C c1 c2 tl (the redundant point in the last command is removed)
-      [
-        patch[0].pos,
-        patch[0].c2,
-        patch[1].c1,
-        patch[1].pos,
-        patch[1].c2,
-        patch[2].c1,
-        patch[2].pos,
-        patch[2].c2,
-        patch[3].c1,
-        patch[3].pos,
-        patch[3].c2,
-        patch[0].c1,
-      ],
-      colors ? colors.map((c) => processColor(Skia, c, opacity)) : undefined,
-      texture,
-      mode,
-      paint
-    );
-  }
-);
-
-export const Patch = (props: AnimatedProps<PatchProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Patch = (props: SkiaProps<PatchProps>) => {
+  return <skPatch {...props} />;
 };

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

@@ -1,54 +1,10 @@
 import React from "react";
 
-import type {
-  CustomPaintProps,
-  AnimatedProps,
-  PathDef,
-  SkEnum,
-} from "../../processors";
-import { createDrawing } from "../../nodes";
-import { processPath, enumKey } from "../../processors";
-import { FillType } from "../../../skia/types";
+import type { SkiaProps } from "../../processors";
+import type { PathProps } from "../../../dom/types";
 
-interface StrokeOpts {
-  width?: number;
-  strokeMiterlimit?: number;
-  precision?: number;
-}
-
-export interface PathProps extends CustomPaintProps {
-  path: PathDef;
-  start: number;
-  end: number;
-  stroke?: StrokeOpts;
-  fillType?: SkEnum<typeof FillType>;
-}
-
-const onDraw = createDrawing<PathProps>(
-  ({ canvas, paint, Skia }, { start, end, stroke, fillType, ...pathProps }) => {
-    const hasStartOffset = start !== 0;
-    const hasEndOffset = end !== 1;
-    const hasStrokeOptions = stroke !== undefined;
-    const hasFillType = !!fillType;
-    const willMutatePath =
-      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
-    const pristinePath = processPath(Skia, pathProps.path);
-    const path = willMutatePath ? pristinePath.copy() : pristinePath;
-    if (hasFillType) {
-      path.setFillType(FillType[enumKey(fillType)]);
-    }
-    if (hasStrokeOptions) {
-      path.stroke(stroke);
-    }
-    if (hasStartOffset || hasEndOffset) {
-      path.trim(start, end, false);
-    }
-    canvas.drawPath(path, paint);
-  }
-);
-
-export const Path = (props: AnimatedProps<PathProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Path = (props: SkiaProps<PathProps>) => {
+  return <skPath {...props} />;
 };
 
 Path.defaultProps = {

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

@@ -1,26 +1,10 @@
 import React from "react";
 
-import type { CustomPaintProps, SkEnum } from "../../processors";
-import type { SkPoint } from "../../../skia/types";
-import { PointMode } from "../../../skia/types";
-import { enumKey } from "../../processors/Paint";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { createDrawing } from "../../nodes/Drawing";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { PointsProps } from "../../../dom/types";
 
-export interface PointsProps extends CustomPaintProps {
-  points: SkPoint[];
-  mode: SkEnum<typeof PointMode>;
-}
-
-const onDraw = createDrawing<PointsProps>(
-  ({ canvas, paint }, { points, mode }) => {
-    const pointMode = PointMode[enumKey(mode)];
-    canvas.drawPoints(pointMode, points, paint);
-  }
-);
-
-export const Points = (props: AnimatedProps<PointsProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Points = (props: SkiaProps<PointsProps>) => {
+  return <skPoints {...props} />;
 };
 
 Points.defaultProps = {

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

@@ -1,22 +1,8 @@
 import React from "react";
 
-import { createDrawing } from "../../nodes/Drawing";
-import type {
-  CustomPaintProps,
-  RectDef,
-  AnimatedProps,
-} from "../../processors";
-import { processRect } from "../../processors";
+import type { RectProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-export type RectProps = RectDef & CustomPaintProps;
-
-const onDraw = createDrawing<RectProps>(
-  ({ canvas, paint, Skia }, rectProps) => {
-    const rect = processRect(Skia, rectProps);
-    canvas.drawRect(rect, paint);
-  }
-);
-
-export const Rect = (props: AnimatedProps<RectProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Rect = (props: SkiaProps<RectProps>) => {
+  return <skRect {...props} />;
 };

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

@@ -1,23 +1,10 @@
 import React from "react";
 
-import { createDrawing } from "../../nodes";
-import type {
-  CustomPaintProps,
-  RRectDef,
-  AnimatedProps,
-} from "../../processors";
-import { processRRect } from "../../processors";
+import type { RoundedRectProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 
-export type RoundedRectProps = RRectDef & CustomPaintProps;
-
-const onDraw = createDrawing<RoundedRectProps>(
-  ({ canvas, paint, Skia }, rectProps) => {
-    const rrect = processRRect(Skia, rectProps);
-    canvas.drawRRect(rrect, paint);
-  }
-);
-export const RoundedRect = (props: AnimatedProps<RoundedRectProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const RoundedRect = (props: SkiaProps<RoundedRectProps>) => {
+  return <skRRect {...props} />;
 };
 
 RoundedRect.defaultProps = {

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

@@ -1,43 +1,10 @@
 import React from "react";
 
-import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
-import { enumKey } from "../../processors";
-import type { SkPoint } from "../../../skia/types";
-import { BlendMode, VertexMode } from "../../../skia/types";
-import { createDrawing } from "../../nodes";
-import { processColor } from "../../processors/Color";
+import type { SkiaProps } from "../../processors";
+import type { VerticesProps } from "../../../dom/types";
 
-export interface VerticesProps extends CustomPaintProps {
-  colors?: string[];
-  vertices: SkPoint[];
-  textures?: SkPoint[];
-  mode: SkEnum<typeof VertexMode>;
-  blendMode?: SkEnum<typeof BlendMode>;
-  indices?: number[];
-}
-
-const onDraw = createDrawing<VerticesProps>(
-  (
-    { canvas, paint, opacity, Skia },
-    { colors, vertices, textures, blendMode, mode, indices }
-  ) => {
-    // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
-    const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
-    const blend = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
-    const vertexMode = mode ? VertexMode[enumKey(mode)] : VertexMode.Triangles;
-    const vert = Skia.MakeVertices(
-      vertexMode,
-      vertices,
-      textures,
-      colors ? colors.map((c) => processColor(Skia, c, opacity)) : undefined,
-      indices
-    );
-    canvas.drawVertices(vert, blend, paint);
-  }
-);
-
-export const Vertices = (props: AnimatedProps<VerticesProps>) => {
-  return <skDrawing onDraw={onDraw} {...props} />;
+export const Vertices = (props: SkiaProps<VerticesProps>) => {
+  return <skVertices {...props} />;
 };
 
 Vertices.defaultProps = {