@shopify/react-native-skia 1.7.7 → 1.8.1

package/src/sksg/{nodes/drawings.ts → Recorder/commands/Drawing.ts}

@@ -1,5 +1,3 @@
-"worklet";
-
 import {
   deflate,
   enumKey,
@@ -10,7 +8,7 @@ import {
   processPath,
   processRect,
   processRRect,
-} from "../../dom/nodes";
+} from "../../../dom/nodes";
 import type {
   AtlasProps,
   BoxProps,
@@ -34,15 +32,9 @@ import type {
   TextPathProps,
   TextProps,
   VerticesProps,
-} from "../../dom/types";
-import { saturate } from "../../renderer/processors";
-import type {
-  SkCanvas,
-  SkPaint,
-  SkPoint,
-  SkRSXform,
-  Skia,
-} from "../../skia/types";
+} from "../../../dom/types";
+import { saturate } from "../../../renderer/processors";
+import type { SkPoint, SkRSXform } from "../../../skia/types";
 import {
   BlendMode,
   BlurStyle,
@@ -51,33 +43,30 @@ import {
   isRRect,
   PointMode,
   VertexMode,
-} from "../../skia/types";
-
-import type { Node } from "./Node";
-import { materialize } from "./utils";
-
-interface LocalDrawingContext {
-  Skia: Skia;
-  canvas: SkCanvas;
-  paint: SkPaint;
-}
+} from "../../../skia/types";
+import type { Node } from "../../Node";
+import { materialize } from "../../utils";
+import type { DrawingContext } from "../DrawingContext";
 
-export const drawLine = (ctx: LocalDrawingContext, props: LineProps) => {
+export const drawLine = (ctx: DrawingContext, props: LineProps) => {
+  "worklet";
   const { p1, p2 } = props;
   ctx.canvas.drawLine(p1.x, p1.y, p2.x, p2.y, ctx.paint);
 };
 
-export const drawOval = (ctx: LocalDrawingContext, props: OvalProps) => {
+export const drawOval = (ctx: DrawingContext, props: OvalProps) => {
+  "worklet";
   const rect = processRect(ctx.Skia, props);
   ctx.canvas.drawOval(rect, ctx.paint);
 };
 
 export const drawBox = (
-  ctx: LocalDrawingContext,
+  ctx: DrawingContext,
   props: BoxProps,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   children: Node<any>[]
 ) => {
+  "worklet";
   const { paint, Skia, canvas } = ctx;
   const { box: defaultBox } = props;
   const opacity = paint.getAlphaf();
@@ -126,14 +115,8 @@ export const drawBox = (
     });
 };
 
-export const drawBoxShadow = (
-  _ctx: LocalDrawingContext,
-  _props: BoxShadowProps
-) => {
-  //throw new Error("drawBoxShadow(): not implemented yet");
-};
-
-export const drawImage = (ctx: LocalDrawingContext, props: ImageProps) => {
+export const drawImage = (ctx: DrawingContext, props: ImageProps) => {
+  "worklet";
   const { image } = props;
   if (image) {
     const fit = props.fit ?? "contain";
@@ -152,15 +135,14 @@ export const drawImage = (ctx: LocalDrawingContext, props: ImageProps) => {
   }
 };
 
-export const drawPoints = (ctx: LocalDrawingContext, props: PointsProps) => {
+export const drawPoints = (ctx: DrawingContext, props: PointsProps) => {
+  "worklet";
   const { points, mode } = props;
   ctx.canvas.drawPoints(PointMode[enumKey(mode)], points, ctx.paint);
 };
 
-export const drawVertices = (
-  ctx: LocalDrawingContext,
-  props: VerticesProps
-) => {
+export const drawVertices = (ctx: DrawingContext, props: VerticesProps) => {
+  "worklet";
   const { mode, textures, colors, indices, blendMode } = props;
   const vertexMode = mode ? VertexMode[enumKey(mode)] : VertexMode.Triangles;
   const vertices = ctx.Skia.MakeVertices(
@@ -176,18 +158,14 @@ export const drawVertices = (
   ctx.canvas.drawVertices(vertices, blend, ctx.paint);
 };
 
-export const drawDiffRect = (
-  ctx: LocalDrawingContext,
-  props: DiffRectProps
-) => {
+export const drawDiffRect = (ctx: DrawingContext, props: DiffRectProps) => {
+  "worklet";
   const { outer, inner } = props;
   ctx.canvas.drawDRRect(outer, inner, ctx.paint);
 };
 
-export const drawTextPath = (
-  ctx: LocalDrawingContext,
-  props: TextPathProps
-) => {
+export const drawTextPath = (ctx: DrawingContext, props: TextPathProps) => {
+  "worklet";
   const path = processPath(ctx.Skia, props.path);
   const { font, initialOffset } = props;
   if (font) {
@@ -225,14 +203,16 @@ export const drawTextPath = (
   }
 };
 
-export const drawText = (ctx: LocalDrawingContext, props: TextProps) => {
+export const drawText = (ctx: DrawingContext, props: TextProps) => {
+  "worklet";
   const { text, x, y, font } = props;
   if (font != null) {
     ctx.canvas.drawText(text, x, y, ctx.paint, font);
   }
 };
 
-export const drawPatch = (ctx: LocalDrawingContext, props: PatchProps) => {
+export const drawPatch = (ctx: DrawingContext, props: PatchProps) => {
+  "worklet";
   const { texture, blendMode, patch } = props;
   const defaultBlendMode = props.colors ? BlendMode.DstOver : BlendMode.SrcOver;
   const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
@@ -262,7 +242,8 @@ export const drawPatch = (ctx: LocalDrawingContext, props: PatchProps) => {
   ctx.canvas.drawPatch(points, colors, texture, mode, ctx.paint);
 };
 
-export const drawPath = (ctx: LocalDrawingContext, props: PathProps) => {
+export const drawPath = (ctx: DrawingContext, props: PathProps) => {
+  "worklet";
   const {
     start: trimStart,
     end: trimEnd,
@@ -292,23 +273,20 @@ export const drawPath = (ctx: LocalDrawingContext, props: PathProps) => {
   ctx.canvas.drawPath(path, ctx.paint);
 };
 
-export const drawRect = (ctx: LocalDrawingContext, props: RectProps) => {
+export const drawRect = (ctx: DrawingContext, props: RectProps) => {
+  "worklet";
   const derived = processRect(ctx.Skia, props);
   ctx.canvas.drawRect(derived, ctx.paint);
 };
 
-export const drawRRect = (
-  ctx: LocalDrawingContext,
-  props: RoundedRectProps
-) => {
+export const drawRRect = (ctx: DrawingContext, props: RoundedRectProps) => {
+  "worklet";
   const derived = processRRect(ctx.Skia, props);
   ctx.canvas.drawRRect(derived, ctx.paint);
 };
 
-export const drawTextBlob = (
-  ctx: LocalDrawingContext,
-  props: TextBlobProps
-) => {
+export const drawTextBlob = (ctx: DrawingContext, props: TextBlobProps) => {
+  "worklet";
   const { blob, x, y } = props;
   ctx.canvas.drawTextBlob(blob, x, y, ctx.paint);
 };
@@ -318,7 +296,8 @@ interface ProcessedGlyphs {
   positions: SkPoint[];
 }
 
-export const drawGlyphs = (ctx: LocalDrawingContext, props: GlyphsProps) => {
+export const drawGlyphs = (ctx: DrawingContext, props: GlyphsProps) => {
+  "worklet";
   const derived = props.glyphs.reduce<ProcessedGlyphs>(
     (acc, glyph) => {
       const { id, pos } = glyph;
@@ -335,10 +314,8 @@ export const drawGlyphs = (ctx: LocalDrawingContext, props: GlyphsProps) => {
   }
 };
 
-export const drawImageSVG = (
-  ctx: LocalDrawingContext,
-  props: ImageSVGProps
-) => {
+export const drawImageSVG = (ctx: DrawingContext, props: ImageSVGProps) => {
+  "worklet";
   const { canvas } = ctx;
   const { svg } = props;
   const { x, y, width, height } = props.rect
@@ -355,10 +332,8 @@ export const drawImageSVG = (
   canvas.restore();
 };
 
-export const drawParagraph = (
-  ctx: LocalDrawingContext,
-  props: ParagraphProps
-) => {
+export const drawParagraph = (ctx: DrawingContext, props: ParagraphProps) => {
+  "worklet";
   const { paragraph, x, y, width } = props;
   if (paragraph) {
     paragraph.layout(width);
@@ -366,12 +341,14 @@ export const drawParagraph = (
   }
 };
 
-export const drawPicture = (ctx: LocalDrawingContext, props: PictureProps) => {
+export const drawPicture = (ctx: DrawingContext, props: PictureProps) => {
+  "worklet";
   const { picture } = props;
   ctx.canvas.drawPicture(picture);
 };
 
-export const drawAtlas = (ctx: LocalDrawingContext, props: AtlasProps) => {
+export const drawAtlas = (ctx: DrawingContext, props: AtlasProps) => {
+  "worklet";
   const { image, sprites, transforms, colors, blendMode } = props;
   const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
   if (image) {
@@ -379,15 +356,14 @@ export const drawAtlas = (ctx: LocalDrawingContext, props: AtlasProps) => {
   }
 };
 
-export const drawCircle = (ctx: LocalDrawingContext, props: CircleProps) => {
+export const drawCircle = (ctx: DrawingContext, props: CircleProps) => {
+  "worklet";
   const { c } = processCircle(props);
   const { r } = props;
   ctx.canvas.drawCircle(c.x, c.y, r, ctx.paint);
 };
 
-export const drawFill = (
-  ctx: LocalDrawingContext,
-  _props: DrawingNodeProps
-) => {
+export const drawFill = (ctx: DrawingContext, _props: DrawingNodeProps) => {
+  "worklet";
   ctx.canvas.drawPaint(ctx.paint);
 };

package/src/sksg/Recorder/commands/ImageFilters.ts

@@ -0,0 +1,255 @@
+import { enumKey, processRadius } from "../../../dom/nodes";
+import type {
+  BlendImageFilterProps,
+  BlurImageFilterProps,
+  BlurMaskFilterProps,
+  DisplacementMapImageFilterProps,
+  DropShadowImageFilterProps,
+  MorphologyImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+} from "../../../dom/types";
+import { NodeType } from "../../../dom/types";
+import type { SkColor, SkImageFilter, Skia } from "../../../skia/types";
+import {
+  BlendMode,
+  BlurStyle,
+  ColorChannel,
+  processUniforms,
+  TileMode,
+} from "../../../skia/types";
+import { composeDeclarations } from "../../utils";
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+
+export enum MorphologyOperator {
+  Erode,
+  Dilate,
+}
+
+const Black = Float32Array.of(0, 0, 0, 1);
+
+const MakeInnerShadow = (
+  Skia: Skia,
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  "worklet";
+  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)
+  );
+};
+
+const declareBlurImageFilter = (
+  ctx: DrawingContext,
+  props: BlurImageFilterProps
+) => {
+  "worklet";
+  const { mode, blur } = props;
+  const sigma = processRadius(ctx.Skia, blur);
+  const imgf = ctx.Skia.ImageFilter.MakeBlur(
+    sigma.x,
+    sigma.y,
+    TileMode[enumKey(mode)],
+    null
+  );
+  ctx.imageFilters.push(imgf);
+};
+
+const declareMorphologyImageFilter = (
+  ctx: DrawingContext,
+  props: MorphologyImageFilterProps
+) => {
+  "worklet";
+  const { operator } = props;
+  const r = processRadius(ctx.Skia, props.radius);
+  let imgf;
+  if (MorphologyOperator[enumKey(operator)] === MorphologyOperator.Erode) {
+    imgf = ctx.Skia.ImageFilter.MakeErode(r.x, r.y, null);
+  } else {
+    imgf = ctx.Skia.ImageFilter.MakeDilate(r.x, r.y, null);
+  }
+  ctx.imageFilters.push(imgf);
+};
+
+const declareOffsetImageFilter = (
+  ctx: DrawingContext,
+  props: OffsetImageFilterProps
+) => {
+  "worklet";
+  const { x, y } = props;
+  const imgf = ctx.Skia.ImageFilter.MakeOffset(x, y, null);
+  ctx.imageFilters.push(imgf);
+};
+
+const declareDropShadowImageFilter = (
+  ctx: DrawingContext,
+  props: DropShadowImageFilterProps
+) => {
+  "worklet";
+  const { dx, dy, blur, shadowOnly, color: cl, inner } = props;
+  const color = ctx.Skia.Color(cl);
+  let factory;
+  if (inner) {
+    factory = MakeInnerShadow.bind(null, ctx.Skia, shadowOnly);
+  } else {
+    factory = shadowOnly
+      ? ctx.Skia.ImageFilter.MakeDropShadowOnly.bind(ctx.Skia.ImageFilter)
+      : ctx.Skia.ImageFilter.MakeDropShadow.bind(ctx.Skia.ImageFilter);
+  }
+  const imgf = factory(dx, dy, blur, blur, color, null);
+  ctx.imageFilters.push(imgf);
+};
+
+const declareBlendImageFilter = (
+  ctx: DrawingContext,
+  props: BlendImageFilterProps
+) => {
+  "worklet";
+  const blend = BlendMode[enumKey(props.mode)];
+  // Blend ImageFilters
+  const imageFilters = ctx.imageFilters.splice(0, ctx.imageFilters.length);
+  const composer = ctx.Skia.ImageFilter.MakeBlend.bind(
+    ctx.Skia.ImageFilter,
+    blend
+  );
+  ctx.imageFilters.push(composeDeclarations(imageFilters, composer));
+};
+
+const declareDisplacementMapImageFilter = (
+  ctx: DrawingContext,
+  props: DisplacementMapImageFilterProps
+) => {
+  "worklet";
+  const { channelX, channelY, scale } = props;
+  const shader = ctx.shaders.pop();
+  if (!shader) {
+    throw new Error("DisplacementMap expects a shader as child");
+  }
+  const map = ctx.Skia.ImageFilter.MakeShader(shader, null);
+  const imgf = ctx.Skia.ImageFilter.MakeDisplacementMap(
+    ColorChannel[enumKey(channelX)],
+    ColorChannel[enumKey(channelY)],
+    scale,
+    map,
+    null
+  );
+  ctx.imageFilters.push(imgf);
+};
+
+const declareRuntimeShaderImageFilter = (
+  ctx: DrawingContext,
+  props: RuntimeShaderImageFilterProps
+) => {
+  "worklet";
+  const { source, uniforms } = props;
+  const rtb = ctx.Skia.RuntimeShaderBuilder(source);
+  if (uniforms) {
+    processUniforms(source, uniforms, rtb);
+  }
+  const imgf = ctx.Skia.ImageFilter.MakeRuntimeShader(rtb, null, null);
+  ctx.imageFilters.push(imgf);
+};
+
+export const composeImageFilters = (ctx: DrawingContext) => {
+  "worklet";
+  if (ctx.imageFilters.length > 1) {
+    const outer = ctx.imageFilters.pop()!;
+    const inner = ctx.imageFilters.pop()!;
+    ctx.imageFilters.push(ctx.Skia.ImageFilter.MakeCompose(outer, inner));
+  }
+};
+
+export const setBlurMaskFilter = (
+  ctx: DrawingContext,
+  props: BlurMaskFilterProps
+) => {
+  "worklet";
+  const { blur, style, respectCTM } = props;
+  const mf = ctx.Skia.MaskFilter.MakeBlur(
+    BlurStyle[enumKey(style)],
+    blur,
+    respectCTM
+  );
+  ctx.paint.setMaskFilter(mf);
+};
+
+export const isPushImageFilter = (
+  command: Command
+): command is Command<CommandType.PushImageFilter> => {
+  "worklet";
+  return command.type === CommandType.PushImageFilter;
+};
+
+type Props = {
+  [NodeType.OffsetImageFilter]: OffsetImageFilterProps;
+  [NodeType.DisplacementMapImageFilter]: DisplacementMapImageFilterProps;
+  [NodeType.BlurImageFilter]: BlurImageFilterProps;
+  [NodeType.DropShadowImageFilter]: DropShadowImageFilterProps;
+  [NodeType.MorphologyImageFilter]: MorphologyImageFilterProps;
+  [NodeType.BlendImageFilter]: BlendImageFilterProps;
+  [NodeType.RuntimeShaderImageFilter]: RuntimeShaderImageFilterProps;
+};
+
+interface PushImageFilter<T extends keyof Props>
+  extends Command<CommandType.PushImageFilter> {
+  imageFilterType: T;
+  props: Props[T];
+}
+
+const isImageFilter = <T extends keyof Props>(
+  command: Command<CommandType.PushImageFilter>,
+  type: T
+): command is PushImageFilter<T> => {
+  "worklet";
+  return command.imageFilterType === type;
+};
+
+export const pushImageFilter = (
+  ctx: DrawingContext,
+  command: Command<CommandType.PushImageFilter>
+) => {
+  "worklet";
+  if (isImageFilter(command, NodeType.BlurImageFilter)) {
+    declareBlurImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.MorphologyImageFilter)) {
+    declareMorphologyImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.BlendImageFilter)) {
+    declareBlendImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.DisplacementMapImageFilter)) {
+    declareDisplacementMapImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.DropShadowImageFilter)) {
+    declareDropShadowImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.OffsetImageFilter)) {
+    declareOffsetImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.RuntimeShaderImageFilter)) {
+    declareRuntimeShaderImageFilter(ctx, command.props);
+  } else {
+    throw new Error("Invalid image filter type: " + command.imageFilterType);
+  }
+};

package/src/sksg/Recorder/commands/Paint.ts

@@ -0,0 +1,77 @@
+import { enumKey } from "../../../dom/nodes";
+import type { PaintProps } from "../../../dom/types";
+import {
+  BlendMode,
+  PaintStyle,
+  StrokeCap,
+  StrokeJoin,
+} from "../../../skia/types";
+import type { SkPaint, Skia } from "../../../skia/types";
+
+export const processColor = (
+  Skia: Skia,
+  color: number | string | Float32Array | number[]
+) => {
+  "worklet";
+  if (typeof color === "string" || typeof color === "number") {
+    return Skia.Color(color);
+  } else if (Array.isArray(color) || color instanceof Float32Array) {
+    return color instanceof Float32Array ? color : new Float32Array(color);
+  } else {
+    throw new Error(
+      `Invalid color type: ${typeof color}. Expected number, string, or array.`
+    );
+  }
+};
+
+export const setPaintProperties = (
+  Skia: Skia,
+  paint: SkPaint,
+  {
+    opacity,
+    color,
+    blendMode,
+    strokeWidth,
+    style,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    antiAlias,
+    dither,
+  }: PaintProps
+) => {
+  "worklet";
+  if (opacity !== undefined) {
+    paint.setAlphaf(paint.getAlphaf() * opacity);
+  }
+  if (color !== undefined) {
+    const currentOpacity = paint.getAlphaf();
+    paint.setShader(null);
+    paint.setColor(processColor(Skia, color));
+    paint.setAlphaf(currentOpacity * paint.getAlphaf());
+  }
+  if (blendMode !== undefined) {
+    paint.setBlendMode(BlendMode[enumKey(blendMode)]);
+  }
+  if (strokeWidth !== undefined) {
+    paint.setStrokeWidth(strokeWidth);
+  }
+  if (style !== undefined) {
+    paint.setStyle(PaintStyle[enumKey(style)]);
+  }
+  if (strokeJoin !== undefined) {
+    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);
+  }
+  if (strokeCap !== undefined) {
+    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);
+  }
+  if (strokeMiter !== undefined) {
+    paint.setStrokeMiter(strokeMiter);
+  }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
+  if (dither !== undefined) {
+    paint.setDither(dither);
+  }
+};