@shopify/react-native-skia 1.8.0 → 1.8.1

package/src/sksg/Recorder/Visitor.ts

@@ -0,0 +1,324 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  CTMProps,
+  DrawingNodeProps,
+  BoxShadowProps,
+} from "../../dom/types";
+import { NodeType } from "../../dom/types";
+import type { Node } from "../Node";
+import { isImageFilter, isShader, sortNodeChildren } from "../Node";
+
+import type { Recorder } from "./Recorder";
+
+export const processPaint = ({
+  opacity,
+  color,
+  strokeWidth,
+  blendMode,
+  style,
+  strokeJoin,
+  strokeCap,
+  strokeMiter,
+  antiAlias,
+  dither,
+  paint: paintRef,
+}: DrawingNodeProps) => {
+  const paint: DrawingNodeProps = {};
+  if (opacity !== undefined) {
+    paint.opacity = opacity;
+  }
+  if (color !== undefined) {
+    paint.color = color;
+  }
+  if (strokeWidth !== undefined) {
+    paint.strokeWidth = strokeWidth;
+  }
+  if (blendMode !== undefined) {
+    paint.blendMode = blendMode;
+  }
+  if (style !== undefined) {
+    paint.style = style;
+  }
+  if (strokeJoin !== undefined) {
+    paint.strokeJoin = strokeJoin;
+  }
+  if (strokeCap !== undefined) {
+    paint.strokeCap = strokeCap;
+  }
+  if (strokeMiter !== undefined) {
+    paint.strokeMiter = strokeMiter;
+  }
+  if (antiAlias !== undefined) {
+    paint.antiAlias = antiAlias;
+  }
+  if (dither !== undefined) {
+    paint.dither = dither;
+  }
+
+  if (paintRef !== undefined) {
+    paint.paint = paintRef;
+  }
+
+  if (
+    opacity !== undefined ||
+    color !== undefined ||
+    strokeWidth !== undefined ||
+    blendMode !== undefined ||
+    style !== undefined ||
+    strokeJoin !== undefined ||
+    strokeCap !== undefined ||
+    strokeMiter !== undefined ||
+    antiAlias !== undefined ||
+    dither !== undefined ||
+    paintRef !== undefined
+  ) {
+    return paint;
+  }
+  return null;
+};
+
+const processCTM = ({
+  clip,
+  invertClip,
+  transform,
+  origin,
+  matrix,
+  layer,
+}: CTMProps) => {
+  const ctm: CTMProps = {};
+  if (clip) {
+    ctm.clip = clip;
+  }
+  if (invertClip) {
+    ctm.invertClip = invertClip;
+  }
+  if (transform) {
+    ctm.transform = transform;
+  }
+  if (origin) {
+    ctm.origin = origin;
+  }
+  if (matrix) {
+    ctm.matrix = matrix;
+  }
+  if (layer) {
+    ctm.layer = layer;
+  }
+  if (
+    clip !== undefined ||
+    invertClip !== undefined ||
+    transform !== undefined ||
+    origin !== undefined ||
+    matrix !== undefined ||
+    layer !== undefined
+  ) {
+    return ctm;
+  }
+  return null;
+};
+
+const pushColorFilters = (recorder: Recorder, colorFilters: Node<any>[]) => {
+  colorFilters.forEach((colorFilter) => {
+    if (colorFilter.children.length > 0) {
+      pushColorFilters(recorder, colorFilter.children);
+    }
+    recorder.pushColorFilter(colorFilter.type, colorFilter.props);
+    const needsComposition =
+      colorFilter.type !== NodeType.LerpColorFilter &&
+      colorFilter.children.length > 0;
+    if (needsComposition) {
+      recorder.composeColorFilter();
+    }
+  });
+};
+
+const pushPathEffects = (recorder: Recorder, pathEffects: Node<any>[]) => {
+  pathEffects.forEach((pathEffect) => {
+    if (pathEffect.children.length > 0) {
+      pushPathEffects(recorder, pathEffect.children);
+    }
+    recorder.pushPathEffect(pathEffect.type, pathEffect.props);
+    const needsComposition =
+      pathEffect.type !== NodeType.SumPathEffect &&
+      pathEffect.children.length > 0;
+    if (needsComposition) {
+      recorder.composePathEffect();
+    }
+  });
+};
+
+const pushImageFilters = (recorder: Recorder, imageFilters: Node<any>[]) => {
+  imageFilters.forEach((imageFilter) => {
+    if (imageFilter.children.length > 0) {
+      pushImageFilters(recorder, imageFilter.children);
+    }
+    if (isImageFilter(imageFilter.type)) {
+      recorder.pushImageFilter(imageFilter.type, imageFilter.props);
+    } else if (isShader(imageFilter.type)) {
+      recorder.pushShader(imageFilter.type, imageFilter.props);
+    }
+    const needsComposition =
+      imageFilter.type !== NodeType.BlendImageFilter &&
+      imageFilter.children.length > 0;
+    if (needsComposition) {
+      recorder.composeImageFilter();
+    }
+  });
+};
+
+const pushShaders = (recorder: Recorder, shaders: Node<any>[]) => {
+  shaders.forEach((shader) => {
+    if (shader.children.length > 0) {
+      pushShaders(recorder, shader.children);
+    }
+    recorder.pushShader(shader.type, shader.props);
+  });
+};
+
+const pushMaskFilters = (recorder: Recorder, maskFilters: Node<any>[]) => {
+  if (maskFilters.length > 0) {
+    recorder.pushBlurMaskFilter(maskFilters[maskFilters.length - 1].props);
+  }
+};
+
+const pushPaints = (recorder: Recorder, paints: Node<any>[]) => {
+  paints.forEach((paint) => {
+    recorder.savePaint(paint.props);
+    const { colorFilters, maskFilters, shaders, imageFilters, pathEffects } =
+      sortNodeChildren(paint);
+    pushColorFilters(recorder, colorFilters);
+    pushImageFilters(recorder, imageFilters);
+    pushMaskFilters(recorder, maskFilters);
+    pushShaders(recorder, shaders);
+    pushPathEffects(recorder, pathEffects);
+    recorder.restorePaintDeclaration();
+  });
+};
+
+const visitNode = (recorder: Recorder, node: Node<any>) => {
+  const { props } = node;
+  const {
+    colorFilters,
+    maskFilters,
+    drawings,
+    shaders,
+    imageFilters,
+    pathEffects,
+    paints,
+  } = sortNodeChildren(node);
+  const paint = processPaint(props);
+  const shouldPushPaint =
+    paint ||
+    colorFilters.length > 0 ||
+    maskFilters.length > 0 ||
+    imageFilters.length > 0 ||
+    pathEffects.length > 0 ||
+    shaders.length > 0;
+  if (shouldPushPaint) {
+    recorder.savePaint(paint ?? {});
+    pushColorFilters(recorder, colorFilters);
+    pushImageFilters(recorder, imageFilters);
+    pushMaskFilters(recorder, maskFilters);
+    pushShaders(recorder, shaders);
+    pushPathEffects(recorder, pathEffects);
+    // For mixed nodes like BackdropFilters we don't materialize the paint
+    if (node.type === NodeType.BackdropFilter) {
+      recorder.saveBackdropFilter();
+    } else {
+      recorder.materializePaint();
+    }
+  }
+  pushPaints(recorder, paints);
+  if (node.type === NodeType.Layer) {
+    recorder.saveLayer();
+  }
+  const ctm = processCTM(props);
+  const shouldRestore = !!ctm || node.type === NodeType.Layer;
+  if (ctm) {
+    recorder.saveCTM(ctm);
+  }
+  switch (node.type) {
+    case NodeType.Box:
+      const shadows = node.children
+        .filter((n) => n.type === NodeType.BoxShadow)
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        .map(({ props }) => ({ props } as { props: BoxShadowProps }));
+      recorder.drawBox(props, shadows);
+      break;
+    case NodeType.Fill:
+      recorder.drawPaint();
+      break;
+    case NodeType.Image:
+      recorder.drawImage(node.props);
+      break;
+    case NodeType.Circle:
+      recorder.drawCircle(node.props);
+      break;
+    case NodeType.Points:
+      recorder.drawPoints(props);
+      break;
+    case NodeType.Path:
+      recorder.drawPath(props);
+      break;
+    case NodeType.Rect:
+      recorder.drawRect(props);
+      break;
+    case NodeType.RRect:
+      recorder.drawRRect(props);
+      break;
+    case NodeType.Oval:
+      recorder.drawOval(props);
+      break;
+    case NodeType.Line:
+      recorder.drawLine(props);
+      break;
+    case NodeType.Patch:
+      recorder.drawPatch(props);
+      break;
+    case NodeType.Vertices:
+      recorder.drawVertices(props);
+      break;
+    case NodeType.DiffRect:
+      recorder.drawDiffRect(props);
+      break;
+    case NodeType.Text:
+      recorder.drawText(props);
+      break;
+    case NodeType.TextPath:
+      recorder.drawTextPath(props);
+      break;
+    case NodeType.TextBlob:
+      recorder.drawTextBlob(props);
+      break;
+    case NodeType.Glyphs:
+      recorder.drawGlyphs(props);
+      break;
+    case NodeType.Picture:
+      recorder.drawPicture(props);
+      break;
+    case NodeType.ImageSVG:
+      recorder.drawImageSVG(props);
+      break;
+    case NodeType.Paragraph:
+      recorder.drawParagraph(props);
+      break;
+    case NodeType.Atlas:
+      recorder.drawAtlas(props);
+      break;
+  }
+  drawings.forEach((drawing) => {
+    visitNode(recorder, drawing);
+  });
+  if (shouldPushPaint) {
+    recorder.restorePaint();
+  }
+  if (shouldRestore) {
+    recorder.restoreCTM();
+  }
+};
+
+export const visit = (recorder: Recorder, root: Node[]) => {
+  root.forEach((node) => {
+    visitNode(recorder, node);
+  });
+};

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

@@ -0,0 +1,63 @@
+import { deflate, inflate } from "../../../dom/nodes";
+import type { BoxProps, BoxShadowProps } from "../../../dom/types";
+import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
+import type { Command } from "../Core";
+import { CommandType, materializeProps } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+
+interface BoxCommand extends Command<CommandType.DrawBox> {
+  props: BoxProps;
+  shadows: { props: BoxShadowProps }[];
+}
+
+export const isBoxCommand = (command: Command): command is BoxCommand => {
+  "worklet";
+  return command.type === CommandType.DrawBox;
+};
+
+export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
+  "worklet";
+  command.shadows.forEach((shadow) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    materializeProps(shadow as any);
+  });
+  const shadows = command.shadows.map((shadow) => shadow.props);
+  const { paint, Skia, canvas } = ctx;
+  const { box: defaultBox } = command.props;
+  const opacity = paint.getAlphaf();
+  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
+  shadows
+    .filter((shadow) => !shadow.inner)
+    .map((shadow) => {
+      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+      const lPaint = Skia.Paint();
+      lPaint.setColor(Skia.Color(color));
+      lPaint.setAlphaf(paint.getAlphaf() * 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(Skia.Color(color));
+      lPaint.setAlphaf(paint.getAlphaf() * 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();
+    });
+};

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

@@ -0,0 +1,72 @@
+import {
+  isPathDef,
+  processPath,
+  processTransformProps2,
+} from "../../../dom/nodes";
+import type { ClipDef, CTMProps } from "../../../dom/types";
+import type { Skia, SkPath, SkRect, SkRRect } from "../../../skia/types";
+import { ClipOp, isRRect } from "../../../skia/types";
+import type { DrawingContext } from "../DrawingContext";
+
+const computeClip = (
+  Skia: Skia,
+  clip: ClipDef | undefined
+):
+  | undefined
+  | { clipPath: SkPath }
+  | { clipRect: SkRect }
+  | { clipRRect: SkRRect } => {
+  "worklet";
+  if (clip) {
+    if (isPathDef(clip)) {
+      return { clipPath: processPath(Skia, clip) };
+    } else if (isRRect(clip)) {
+      return { clipRRect: clip };
+    } else {
+      return { clipRect: clip };
+    }
+  }
+  return undefined;
+};
+
+export const saveCTM = (ctx: DrawingContext, props: CTMProps) => {
+  "worklet";
+  const { canvas, Skia } = ctx;
+  const {
+    clip: rawClip,
+    invertClip,
+    matrix,
+    transform,
+    origin,
+    layer,
+  } = props as CTMProps;
+  const hasTransform = matrix !== undefined || transform !== undefined;
+  const clip = computeClip(Skia, rawClip);
+  const hasClip = clip !== undefined;
+  const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
+  const m3 = processTransformProps2(Skia, { matrix, transform, origin });
+  const shouldSave = hasTransform || hasClip || !!layer;
+  if (shouldSave) {
+    if (layer) {
+      if (typeof layer === "boolean") {
+        canvas.saveLayer();
+      } else {
+        canvas.saveLayer(layer);
+      }
+    } else {
+      canvas.save();
+    }
+  }
+  if (m3) {
+    canvas.concat(m3);
+  }
+  if (clip) {
+    if ("clipRect" in clip) {
+      canvas.clipRect(clip.clipRect, op, true);
+    } else if ("clipRRect" in clip) {
+      canvas.clipRRect(clip.clipRRect, op, true);
+    } else {
+      canvas.clipPath(clip.clipPath, op, true);
+    }
+  }
+};

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

@@ -0,0 +1,87 @@
+import { enumKey } from "../../../dom/nodes";
+import type {
+  BlendColorFilterProps,
+  LerpColorFilterProps,
+  MatrixColorFilterProps,
+} from "../../../dom/types";
+import { NodeType } from "../../../dom/types";
+import type { SkColorFilter } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
+import { CommandType } from "../Core";
+import type { Command } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+
+export const isPushColorFilter = (
+  command: Command
+): command is Command<CommandType.PushColorFilter> => {
+  "worklet";
+  return command.type === CommandType.PushColorFilter;
+};
+
+type Props = {
+  [NodeType.BlendColorFilter]: BlendColorFilterProps;
+  [NodeType.MatrixColorFilter]: MatrixColorFilterProps;
+  [NodeType.LerpColorFilter]: LerpColorFilterProps;
+  [NodeType.LumaColorFilter]: Record<string, never>;
+  [NodeType.LinearToSRGBGammaColorFilter]: Record<string, never>;
+  [NodeType.SRGBToLinearGammaColorFilter]: Record<string, never>;
+};
+
+interface PushColorFilter<T extends keyof Props>
+  extends Command<CommandType.PushColorFilter> {
+  colorFilterType: T;
+  props: Props[T];
+}
+
+const isColorFilter = <T extends keyof Props>(
+  command: Command<CommandType.PushColorFilter>,
+  type: T
+): command is PushColorFilter<T> => {
+  "worklet";
+  return command.colorFilterType === type;
+};
+
+export const composeColorFilters = (ctx: DrawingContext) => {
+  "worklet";
+  if (ctx.colorFilters.length > 1) {
+    const outer = ctx.colorFilters.pop()!;
+    const inner = ctx.colorFilters.pop()!;
+    ctx.colorFilters.push(ctx.Skia.ColorFilter.MakeCompose(outer, inner));
+  }
+};
+
+export const pushColorFilter = (
+  ctx: DrawingContext,
+  command: Command<CommandType.PushColorFilter>
+) => {
+  "worklet";
+  let cf: SkColorFilter | undefined;
+  if (isColorFilter(command, NodeType.BlendColorFilter)) {
+    const { props } = command;
+    const { mode } = props;
+    const color = ctx.Skia.Color(props.color);
+    cf = ctx.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
+  } else if (isColorFilter(command, NodeType.MatrixColorFilter)) {
+    const { matrix } = command.props;
+    cf = ctx.Skia.ColorFilter.MakeMatrix(matrix);
+  } else if (isColorFilter(command, NodeType.LerpColorFilter)) {
+    const { props } = command;
+    const { t } = props;
+    const second = ctx.colorFilters.pop();
+    const first = ctx.colorFilters.pop();
+    if (!first || !second) {
+      throw new Error("LerpColorFilter requires two color filters");
+    }
+    cf = ctx.Skia.ColorFilter.MakeLerp(t, first, second);
+  } else if (isColorFilter(command, NodeType.LumaColorFilter)) {
+    cf = ctx.Skia.ColorFilter.MakeLumaColorFilter();
+  } else if (isColorFilter(command, NodeType.LinearToSRGBGammaColorFilter)) {
+    cf = ctx.Skia.ColorFilter.MakeLinearToSRGBGamma();
+  } else if (isColorFilter(command, NodeType.SRGBToLinearGammaColorFilter)) {
+    cf = ctx.Skia.ColorFilter.MakeSRGBToLinearGamma();
+  }
+  if (!cf) {
+    throw new Error(`Unknown color filter type: ${command.colorFilterType}`);
+  }
+  ctx.colorFilters.push(cf);
+};