@shopify/react-native-skia 1.7.6 → 1.8.0

package/src/sksg/nodes/drawings.ts

@@ -0,0 +1,405 @@
+import {
+  deflate,
+  enumKey,
+  fitRects,
+  inflate,
+  NodeType,
+  processCircle,
+  processPath,
+  processRect,
+  processRRect,
+} from "../../dom/nodes";
+import type {
+  AtlasProps,
+  BoxProps,
+  BoxShadowProps,
+  CircleProps,
+  DiffRectProps,
+  DrawingNodeProps,
+  GlyphsProps,
+  ImageProps,
+  ImageSVGProps,
+  LineProps,
+  OvalProps,
+  ParagraphProps,
+  PatchProps,
+  PathProps,
+  PictureProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  TextBlobProps,
+  TextPathProps,
+  TextProps,
+  VerticesProps,
+} from "../../dom/types";
+import { saturate } from "../../renderer/processors";
+import type {
+  SkCanvas,
+  SkPaint,
+  SkPoint,
+  SkRSXform,
+  Skia,
+} from "../../skia/types";
+import {
+  BlendMode,
+  BlurStyle,
+  ClipOp,
+  FillType,
+  isRRect,
+  PointMode,
+  VertexMode,
+} from "../../skia/types";
+
+import type { Node } from "./Node";
+import { materialize } from "./utils";
+
+interface LocalDrawingContext {
+  Skia: Skia;
+  canvas: SkCanvas;
+  paint: SkPaint;
+}
+
+export const drawLine = (ctx: LocalDrawingContext, 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) => {
+  "worklet";
+  const rect = processRect(ctx.Skia, props);
+  ctx.canvas.drawOval(rect, ctx.paint);
+};
+
+export const drawBox = (
+  ctx: LocalDrawingContext,
+  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();
+  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
+  const shadows = children
+    .map((node) => {
+      if (node.type === NodeType.BoxShadow) {
+        return materialize(node.props);
+      }
+      return null;
+    })
+    .filter((n): n is BoxShadowProps => n !== null);
+  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();
+    });
+};
+
+export const drawImage = (ctx: LocalDrawingContext, props: ImageProps) => {
+  "worklet";
+  const { image } = props;
+  if (image) {
+    const fit = props.fit ?? "contain";
+    const rect = processRect(ctx.Skia, props);
+    const { src, dst } = fitRects(
+      fit,
+      {
+        x: 0,
+        y: 0,
+        width: image.width(),
+        height: image.height(),
+      },
+      rect
+    );
+    ctx.canvas.drawImageRect(image, src, dst, ctx.paint);
+  }
+};
+
+export const drawPoints = (ctx: LocalDrawingContext, props: PointsProps) => {
+  "worklet";
+  const { points, mode } = props;
+  ctx.canvas.drawPoints(PointMode[enumKey(mode)], points, ctx.paint);
+};
+
+export const drawVertices = (
+  ctx: LocalDrawingContext,
+  props: VerticesProps
+) => {
+  "worklet";
+  const { mode, textures, colors, indices, blendMode } = props;
+  const vertexMode = mode ? VertexMode[enumKey(mode)] : VertexMode.Triangles;
+  const vertices = ctx.Skia.MakeVertices(
+    vertexMode,
+    props.vertices,
+    textures,
+    colors ? colors.map((c) => ctx.Skia.Color(c)) : undefined,
+    indices
+  );
+  const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
+  const blend = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
+
+  ctx.canvas.drawVertices(vertices, blend, ctx.paint);
+};
+
+export const drawDiffRect = (
+  ctx: LocalDrawingContext,
+  props: DiffRectProps
+) => {
+  "worklet";
+  const { outer, inner } = props;
+  ctx.canvas.drawDRRect(outer, inner, ctx.paint);
+};
+
+export const drawTextPath = (
+  ctx: LocalDrawingContext,
+  props: TextPathProps
+) => {
+  "worklet";
+  const path = processPath(ctx.Skia, props.path);
+  const { font, initialOffset } = props;
+  if (font) {
+    let { text } = props;
+    const ids = font.getGlyphIDs(text);
+    const widths = font.getGlyphWidths(ids);
+    const rsx: SkRSXform[] = [];
+    const meas = ctx.Skia.ContourMeasureIter(path, false, 1);
+    let cont = meas.next();
+    let dist = initialOffset;
+    for (let i = 0; i < text.length && cont; i++) {
+      const width = widths[i];
+      dist += width / 2;
+      if (dist > cont.length()) {
+        // jump to next contour
+        cont = meas.next();
+        if (!cont) {
+          // We have come to the end of the path - terminate the string
+          // right here.
+          text = text.substring(0, i);
+          break;
+        }
+        dist = width / 2;
+      }
+      // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
+      // line at that position.
+      const [p, t] = cont.getPosTan(dist);
+      const adjustedX = p.x - (width / 2) * t.x;
+      const adjustedY = p.y - (width / 2) * t.y;
+      rsx.push(ctx.Skia.RSXform(t.x, t.y, adjustedX, adjustedY));
+      dist += width / 2;
+    }
+    const derived = ctx.Skia.TextBlob.MakeFromRSXform(text, rsx, font);
+    ctx.canvas.drawTextBlob(derived, 0, 0, ctx.paint);
+  }
+};
+
+export const drawText = (ctx: LocalDrawingContext, 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) => {
+  "worklet";
+  const { texture, blendMode, patch } = props;
+  const defaultBlendMode = props.colors ? BlendMode.DstOver : BlendMode.SrcOver;
+  const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
+  // 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)
+
+  const points = [
+    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,
+  ];
+  const colors = props.colors
+    ? props.colors.map((c) => ctx.Skia.Color(c))
+    : undefined;
+  ctx.canvas.drawPatch(points, colors, texture, mode, ctx.paint);
+};
+
+export const drawPath = (ctx: LocalDrawingContext, props: PathProps) => {
+  "worklet";
+  const {
+    start: trimStart,
+    end: trimEnd,
+    fillType,
+    stroke,
+    ...pathProps
+  } = props;
+  const start = saturate(trimStart);
+  const end = saturate(trimEnd);
+  const hasStartOffset = start !== 0;
+  const hasEndOffset = end !== 1;
+  const hasStrokeOptions = stroke !== undefined;
+  const hasFillType = !!fillType;
+  const willMutatePath =
+    hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
+  const pristinePath = processPath(ctx.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);
+  }
+  ctx.canvas.drawPath(path, ctx.paint);
+};
+
+export const drawRect = (ctx: LocalDrawingContext, props: RectProps) => {
+  "worklet";
+  const derived = processRect(ctx.Skia, props);
+  ctx.canvas.drawRect(derived, ctx.paint);
+};
+
+export const drawRRect = (
+  ctx: LocalDrawingContext,
+  props: RoundedRectProps
+) => {
+  "worklet";
+  const derived = processRRect(ctx.Skia, props);
+  ctx.canvas.drawRRect(derived, ctx.paint);
+};
+
+export const drawTextBlob = (
+  ctx: LocalDrawingContext,
+  props: TextBlobProps
+) => {
+  "worklet";
+  const { blob, x, y } = props;
+  ctx.canvas.drawTextBlob(blob, x, y, ctx.paint);
+};
+
+interface ProcessedGlyphs {
+  glyphs: number[];
+  positions: SkPoint[];
+}
+
+export const drawGlyphs = (ctx: LocalDrawingContext, props: GlyphsProps) => {
+  "worklet";
+  const derived = props.glyphs.reduce<ProcessedGlyphs>(
+    (acc, glyph) => {
+      const { id, pos } = glyph;
+      acc.glyphs.push(id);
+      acc.positions.push(pos);
+      return acc;
+    },
+    { glyphs: [], positions: [] }
+  );
+  const { glyphs, positions } = derived;
+  const { x, y, font } = props;
+  if (font) {
+    ctx.canvas.drawGlyphs(glyphs, positions, x, y, font, ctx.paint);
+  }
+};
+
+export const drawImageSVG = (
+  ctx: LocalDrawingContext,
+  props: ImageSVGProps
+) => {
+  "worklet";
+  const { canvas } = ctx;
+  const { svg } = props;
+  const { x, y, width, height } = props.rect
+    ? props.rect
+    : { x: props.x, y: props.y, width: props.width, height: props.height };
+  if (svg === null) {
+    return;
+  }
+  canvas.save();
+  if (x && y) {
+    canvas.translate(x, y);
+  }
+  canvas.drawSvg(svg, width, height);
+  canvas.restore();
+};
+
+export const drawParagraph = (
+  ctx: LocalDrawingContext,
+  props: ParagraphProps
+) => {
+  "worklet";
+  const { paragraph, x, y, width } = props;
+  if (paragraph) {
+    paragraph.layout(width);
+    paragraph.paint(ctx.canvas, x, y);
+  }
+};
+
+export const drawPicture = (ctx: LocalDrawingContext, props: PictureProps) => {
+  "worklet";
+  const { picture } = props;
+  ctx.canvas.drawPicture(picture);
+};
+
+export const drawAtlas = (ctx: LocalDrawingContext, props: AtlasProps) => {
+  "worklet";
+  const { image, sprites, transforms, colors, blendMode } = props;
+  const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
+  if (image) {
+    ctx.canvas.drawAtlas(image, sprites, transforms, ctx.paint, blend, colors);
+  }
+};
+
+export const drawCircle = (ctx: LocalDrawingContext, 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
+) => {
+  "worklet";
+  ctx.canvas.drawPaint(ctx.paint);
+};

package/src/sksg/nodes/imageFilters.ts

@@ -0,0 +1,235 @@
+import { enumKey, processRadius } from "../../dom/nodes";
+import type {
+  BlendImageFilterProps,
+  BlendProps,
+  BlurImageFilterProps,
+  BlurMaskFilterProps,
+  DisplacementMapImageFilterProps,
+  DropShadowImageFilterProps,
+  MorphologyImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+} from "../../dom/types";
+import type { SkColor, Skia, SkImageFilter } from "../../skia/types";
+import {
+  BlendMode,
+  BlurStyle,
+  ColorChannel,
+  processUniforms,
+  TileMode,
+} from "../../skia/types";
+import type { DeclarationContext } from "../DeclarationContext";
+import { composeDeclarations } from "../DeclarationContext";
+
+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)
+  );
+};
+
+export const declareBlend = (ctx: DeclarationContext, props: BlendProps) => {
+  "worklet";
+  const { Skia } = ctx;
+  const blend = BlendMode[enumKey(props.mode as BlendProps["mode"])];
+  // Blend ImageFilters
+  const imageFilters = ctx.imageFilters.popAll();
+  if (imageFilters.length > 0) {
+    const composer = Skia.ImageFilter.MakeBlend.bind(Skia.ImageFilter, blend);
+    ctx.imageFilters.push(composeDeclarations(imageFilters, composer));
+  }
+  // Blend Shaders
+  const shaders = ctx.shaders.popAll();
+  if (shaders.length > 0) {
+    const composer = Skia.Shader.MakeBlend.bind(Skia.Shader, blend);
+    ctx.shaders.push(composeDeclarations(shaders, composer));
+  }
+};
+
+export const composeImageFilters = (
+  ctx: DeclarationContext,
+  imgf1: SkImageFilter,
+  processChildren: () => void
+) => {
+  "worklet";
+  const { Skia } = ctx;
+  ctx.imageFilters.save();
+  ctx.colorFilters.save();
+  processChildren();
+  let imgf2 = ctx.imageFilters.popAllAsOne();
+  const cf = ctx.colorFilters.popAllAsOne();
+  ctx.imageFilters.restore();
+  ctx.colorFilters.restore();
+  if (cf) {
+    imgf2 = Skia.ImageFilter.MakeCompose(
+      imgf2 ?? null,
+      Skia.ImageFilter.MakeColorFilter(cf, null)
+    );
+  }
+  const imgf = imgf2 ? Skia.ImageFilter.MakeCompose(imgf1, imgf2) : imgf1;
+  ctx.imageFilters.push(imgf);
+};
+
+const input = (ctx: DeclarationContext) => {
+  "worklet";
+  return ctx.imageFilters.pop() ?? null;
+};
+
+export const makeOffsetImageFilter = (
+  ctx: DeclarationContext,
+  props: OffsetImageFilterProps
+) => {
+  "worklet";
+  const { x, y } = props;
+  return ctx.Skia.ImageFilter.MakeOffset(x, y, null);
+};
+
+export const declareDisplacementMapImageFilter = (
+  ctx: DeclarationContext,
+  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,
+    input(ctx)
+  );
+  ctx.imageFilters.push(imgf);
+};
+
+export const makeBlurImageFilter = (
+  ctx: DeclarationContext,
+  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)],
+    input(ctx)
+  );
+  return imgf;
+};
+
+export const makeDropShadowImageFilter = (
+  ctx: DeclarationContext,
+  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, input(ctx));
+  return imgf;
+};
+
+export const makeMorphologyImageFilter = (
+  ctx: DeclarationContext,
+  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, input(ctx));
+  } else {
+    imgf = ctx.Skia.ImageFilter.MakeDilate(r.x, r.y, input(ctx));
+  }
+  return imgf;
+};
+
+export const makeRuntimeShaderImageFilter = (
+  ctx: DeclarationContext,
+  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, input(ctx));
+  return imgf;
+};
+
+export const declareBlendImageFilter = (
+  ctx: DeclarationContext,
+  props: BlendImageFilterProps
+) => {
+  "worklet";
+  const { mode } = props;
+  const a = ctx.imageFilters.pop();
+  const b = ctx.imageFilters.pop();
+  if (!a || !b) {
+    throw new Error("BlendImageFilter requires two image filters");
+  }
+  const imgf = ctx.Skia.ImageFilter.MakeBlend(mode, a, b);
+  ctx.imageFilters.push(imgf);
+};
+
+export const declareBlurMaskFilter = (
+  ctx: DeclarationContext,
+  props: BlurMaskFilterProps
+) => {
+  "worklet";
+  const { blur, style, respectCTM } = props;
+  const mf = ctx.Skia.MaskFilter.MakeBlur(
+    BlurStyle[enumKey(style)],
+    blur,
+    respectCTM
+  );
+  ctx.maskFilters.push(mf);
+};

package/src/sksg/nodes/index.ts

@@ -0,0 +1,3 @@
+export * from "./Node";
+export * from "./context";
+export * from "./utils";

package/src/sksg/nodes/paint.ts

@@ -0,0 +1,75 @@
+import { enumKey } from "../../dom/nodes";
+import type { PaintProps } from "../../dom/types";
+import { BlendMode, PaintStyle, StrokeCap, StrokeJoin } from "../../skia/types";
+import type { DeclarationContext } from "../DeclarationContext";
+
+export const declarePaint = (ctx: DeclarationContext, props: PaintProps) => {
+  "worklet";
+  const {
+    color,
+    strokeWidth,
+    blendMode,
+    style,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    opacity,
+    antiAlias,
+    dither,
+  } = props;
+  const paint = ctx.Skia.Paint();
+  if (color !== undefined) {
+    paint.setColor(ctx.Skia.Color(color));
+  }
+  if (strokeWidth !== undefined) {
+    paint.setStrokeWidth(strokeWidth);
+  }
+  if (blendMode !== undefined) {
+    paint.setBlendMode(BlendMode[enumKey(blendMode)]);
+  }
+  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 (opacity !== undefined) {
+    paint.setAlphaf(opacity);
+  }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
+  if (dither !== undefined) {
+    paint.setDither(dither);
+  }
+  //ctx.save();
+
+  const colorFilter = ctx.colorFilters.popAllAsOne();
+  const imageFilter = ctx.imageFilters.popAllAsOne();
+  const shader = ctx.shaders.pop();
+  const maskFilter = ctx.maskFilters.pop();
+  const pathEffect = ctx.pathEffects.popAllAsOne();
+  //ctx.restore();
+  if (imageFilter) {
+    paint.setImageFilter(imageFilter);
+  }
+  if (shader) {
+    paint.setShader(shader);
+  }
+  if (pathEffect) {
+    paint.setPathEffect(pathEffect);
+  }
+  if (colorFilter) {
+    paint.setColorFilter(colorFilter);
+  }
+  if (maskFilter) {
+    paint.setMaskFilter(maskFilter);
+  }
+  ctx.paints.push(paint);
+};