@shopify/react-native-skia 1.8.0 → 1.8.1

package/src/sksg/nodes/context.ts

@@ -1,412 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { NodeType } from "../../dom/types";
-import type { DrawingNodeProps } from "../../dom/types";
-import type { DrawingContext } from "../DrawingContext";
-import type { SkImageFilter } from "../../skia/types";
-import {
-  createDeclarationContext,
-  type DeclarationContext,
-} from "../DeclarationContext";
-
-import type { Node } from "./Node";
-import {
-  drawAtlas,
-  drawBox,
-  drawCircle,
-  drawDiffRect,
-  drawFill,
-  drawGlyphs,
-  drawImage,
-  drawImageSVG,
-  drawLine,
-  drawOval,
-  drawParagraph,
-  drawPatch,
-  drawPath,
-  drawPicture,
-  drawPoints,
-  drawRect,
-  drawRRect,
-  drawText,
-  drawTextBlob,
-  drawTextPath,
-  drawVertices,
-} from "./drawings";
-import {
-  composeColorFilters,
-  declareLerpColorFilter,
-  makeBlendColorFilter,
-  makeLinearToSRGBGammaColorFilter,
-  makeLumaColorFilter,
-  makeMatrixColorFilter,
-  makeSRGBToLinearGammaColorFilter,
-} from "./colorFilters";
-import {
-  composeImageFilters,
-  declareBlend,
-  declareBlendImageFilter,
-  declareBlurMaskFilter,
-  declareDisplacementMapImageFilter,
-  makeBlurImageFilter,
-  makeDropShadowImageFilter,
-  makeMorphologyImageFilter,
-  makeOffsetImageFilter,
-  makeRuntimeShaderImageFilter,
-} from "./imageFilters";
-import { materialize } from "./utils";
-import {
-  declareColorShader,
-  declareFractalNoiseShader,
-  declareImageShader,
-  declareLinearGradientShader,
-  declareRadialGradientShader,
-  declareShader,
-  declareSweepGradientShader,
-  declareTurbulenceShader,
-  declareTwoPointConicalGradientShader,
-} from "./shaders";
-import { declarePaint } from "./paint";
-import {
-  composePathEffects,
-  declareSumPathEffect,
-  makeCornerPathEffect,
-  makeDashPathEffect,
-  makeDiscretePathEffect,
-  makeLine2DPathEffect,
-  makePath1DPathEffect,
-  makePath2DPathEffect,
-} from "./pathEffects";
-
-function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
-  "worklet";
-  const processChildren = () =>
-    node.children.forEach((child) => processDeclarations(ctx, child));
-  const { type } = node;
-  const props = materialize(node.props);
-  switch (type) {
-    // Mask Filter
-    case NodeType.BlurMaskFilter: {
-      declareBlurMaskFilter(ctx, props);
-      break;
-    }
-    // Color Filters
-    case NodeType.LerpColorFilter: {
-      processChildren();
-      declareLerpColorFilter(ctx, props);
-      break;
-    }
-    case NodeType.Blend: {
-      processChildren();
-      declareBlend(ctx, props);
-      break;
-    }
-    case NodeType.BlendColorFilter: {
-      const cf = makeBlendColorFilter(ctx, props);
-      composeColorFilters(ctx, cf, processChildren);
-      break;
-    }
-    case NodeType.SRGBToLinearGammaColorFilter: {
-      const cf = makeSRGBToLinearGammaColorFilter(ctx);
-      composeColorFilters(ctx, cf, processChildren);
-      break;
-    }
-    case NodeType.LinearToSRGBGammaColorFilter: {
-      const cf = makeLinearToSRGBGammaColorFilter(ctx);
-      composeColorFilters(ctx, cf, processChildren);
-      break;
-    }
-    case NodeType.MatrixColorFilter: {
-      const cf = makeMatrixColorFilter(ctx, props);
-      composeColorFilters(ctx, cf, processChildren);
-      break;
-    }
-    case NodeType.LumaColorFilter: {
-      const cf = makeLumaColorFilter(ctx);
-      composeColorFilters(ctx, cf, processChildren);
-      break;
-    }
-    // Shaders
-    case NodeType.Shader: {
-      processChildren();
-      declareShader(ctx, props);
-      break;
-    }
-    case NodeType.ImageShader: {
-      declareImageShader(ctx, props);
-      break;
-    }
-    case NodeType.ColorShader: {
-      declareColorShader(ctx, props);
-      break;
-    }
-    case NodeType.Turbulence: {
-      declareTurbulenceShader(ctx, props);
-      break;
-    }
-    case NodeType.FractalNoise: {
-      declareFractalNoiseShader(ctx, props);
-      break;
-    }
-    case NodeType.LinearGradient: {
-      declareLinearGradientShader(ctx, props);
-      break;
-    }
-    case NodeType.RadialGradient: {
-      declareRadialGradientShader(ctx, props);
-      break;
-    }
-    case NodeType.SweepGradient: {
-      declareSweepGradientShader(ctx, props);
-      break;
-    }
-    case NodeType.TwoPointConicalGradient: {
-      declareTwoPointConicalGradientShader(ctx, props);
-      break;
-    }
-    // Image Filters
-    case NodeType.BlurImageFilter: {
-      const imgf = makeBlurImageFilter(ctx, props);
-      composeImageFilters(ctx, imgf, processChildren);
-      break;
-    }
-    case NodeType.OffsetImageFilter: {
-      const imgf = makeOffsetImageFilter(ctx, props);
-      composeImageFilters(ctx, imgf, processChildren);
-      break;
-    }
-    case NodeType.DisplacementMapImageFilter: {
-      processChildren();
-      declareDisplacementMapImageFilter(ctx, props);
-      break;
-    }
-    case NodeType.DropShadowImageFilter: {
-      const imgf = makeDropShadowImageFilter(ctx, props);
-      composeImageFilters(ctx, imgf, processChildren);
-      break;
-    }
-    case NodeType.MorphologyImageFilter: {
-      const imgf = makeMorphologyImageFilter(ctx, props);
-      composeImageFilters(ctx, imgf, processChildren);
-      break;
-    }
-    case NodeType.BlendImageFilter: {
-      processChildren();
-      declareBlendImageFilter(ctx, props);
-      break;
-    }
-    case NodeType.RuntimeShaderImageFilter: {
-      const imgf = makeRuntimeShaderImageFilter(ctx, props);
-      composeImageFilters(ctx, imgf, processChildren);
-      break;
-    }
-    // Path Effects
-    case NodeType.SumPathEffect: {
-      processChildren();
-      declareSumPathEffect(ctx);
-      break;
-    }
-    case NodeType.CornerPathEffect: {
-      const pf = makeCornerPathEffect(ctx, props);
-      composePathEffects(ctx, pf, processChildren);
-      break;
-    }
-    case NodeType.Path1DPathEffect: {
-      const pf = makePath1DPathEffect(ctx, props);
-      composePathEffects(ctx, pf, processChildren);
-      break;
-    }
-    case NodeType.Path2DPathEffect: {
-      const pf = makePath2DPathEffect(ctx, props);
-      composePathEffects(ctx, pf, processChildren);
-      break;
-    }
-    case NodeType.Line2DPathEffect: {
-      const pf = makeLine2DPathEffect(ctx, props);
-      composePathEffects(ctx, pf, processChildren);
-      break;
-    }
-    case NodeType.DashPathEffect: {
-      const pf = makeDashPathEffect(ctx, props);
-      composePathEffects(ctx, pf, processChildren);
-      break;
-    }
-    case NodeType.DiscretePathEffect: {
-      const pf = makeDiscretePathEffect(ctx, props);
-      composePathEffects(ctx, pf, processChildren);
-      break;
-    }
-    // Paint
-    case NodeType.Paint:
-      processChildren();
-      declarePaint(ctx, props);
-      break;
-    default:
-      console.log("Unknown declaration node: ", type);
-  }
-}
-
-const preProcessContext = (
-  ctx: DrawingContext,
-  props: DrawingNodeProps,
-  node: Node<any>
-) => {
-  "worklet";
-  const shouldRestoreMatrix = ctx.processMatrixAndClipping(props, props.layer);
-  const declCtx = createDeclarationContext(ctx.Skia);
-  node.children.forEach((child) => {
-    if (child.isDeclaration) {
-      processDeclarations(declCtx, child);
-    }
-  });
-  const shouldRestorePaint = ctx.processPaint(props, declCtx);
-  return {
-    shouldRestoreMatrix,
-    shouldRestorePaint,
-    extraPaints: declCtx.paints.popAll(),
-  };
-};
-
-const drawBackdropFilter = (ctx: DrawingContext, node: Node) => {
-  "worklet";
-  const { canvas, Skia } = ctx;
-  const child = node.children[0];
-  let imageFilter: SkImageFilter | null = null;
-  if (child.isDeclaration) {
-    const declCtx = createDeclarationContext(ctx.Skia);
-    processDeclarations(declCtx, child);
-    const imgf = declCtx.imageFilters.pop();
-    if (imgf) {
-      imageFilter = imgf;
-    } else {
-      const cf = declCtx.colorFilters.pop();
-      if (cf) {
-        imageFilter = Skia.ImageFilter.MakeColorFilter(cf, null);
-      }
-    }
-  }
-  canvas.saveLayer(undefined, null, imageFilter);
-  canvas.restore();
-};
-
-export function draw(ctx: DrawingContext, node: Node<any>) {
-  "worklet";
-  // Special mixed nodes
-  if (node.type === NodeType.BackdropFilter) {
-    drawBackdropFilter(ctx, node);
-    return;
-  }
-  if (node.type === NodeType.Layer) {
-    let hasLayer = false;
-    const [layer, ...children] = node.children;
-    if (layer.isDeclaration) {
-      const declCtx = createDeclarationContext(ctx.Skia);
-      processDeclarations(declCtx, layer);
-      const paint = declCtx.paints.pop();
-      if (paint) {
-        hasLayer = true;
-        ctx.canvas.saveLayer(paint);
-      }
-    }
-    children.map((child) => {
-      if (!child.isDeclaration) {
-        draw(ctx, child);
-      }
-    });
-    if (hasLayer) {
-      ctx.canvas.restore();
-    }
-    return;
-  }
-  const { type, props: rawProps, children } = node;
-  // Regular nodes
-  const props = materialize(rawProps);
-  const { shouldRestoreMatrix, shouldRestorePaint, extraPaints } =
-    preProcessContext(ctx, props, node);
-  const paints = [ctx.getPaint(), ...extraPaints];
-  paints.forEach((paint) => {
-    const lctx = { paint, Skia: ctx.Skia, canvas: ctx.canvas };
-    switch (type) {
-      case NodeType.Box:
-        drawBox(lctx, props, node.children);
-        break;
-      case NodeType.Image:
-        drawImage(lctx, props);
-        break;
-      case NodeType.Points:
-        drawPoints(lctx, props);
-        break;
-      case NodeType.Path:
-        drawPath(lctx, props);
-        break;
-      case NodeType.Rect:
-        drawRect(lctx, props);
-        break;
-      case NodeType.RRect:
-        drawRRect(lctx, props);
-        break;
-      case NodeType.Oval:
-        drawOval(lctx, props);
-        break;
-      case NodeType.Line:
-        drawLine(lctx, props);
-        break;
-      case NodeType.Patch:
-        drawPatch(lctx, props);
-        break;
-      case NodeType.Vertices:
-        drawVertices(lctx, props);
-        break;
-      case NodeType.DiffRect:
-        drawDiffRect(lctx, props);
-        break;
-      case NodeType.Text:
-        drawText(lctx, props);
-        break;
-      case NodeType.TextPath:
-        drawTextPath(lctx, props);
-        break;
-      case NodeType.TextBlob:
-        drawTextBlob(lctx, props);
-        break;
-      case NodeType.Glyphs:
-        drawGlyphs(lctx, props);
-        break;
-      case NodeType.Picture:
-        drawPicture(lctx, props);
-        break;
-      case NodeType.ImageSVG:
-        drawImageSVG(lctx, props);
-        break;
-      case NodeType.Paragraph:
-        drawParagraph(lctx, props);
-        break;
-      case NodeType.Atlas:
-        drawAtlas(lctx, props);
-        break;
-      case NodeType.Circle:
-        drawCircle(lctx, props);
-        break;
-      case NodeType.Fill:
-        drawFill(lctx, props);
-        break;
-      case NodeType.Group:
-        // TODO: do nothing
-        break;
-      default:
-        if (!node.isDeclaration) {
-          console.warn(`Unsupported node type: ${type}`);
-        }
-    }
-  });
-  children.forEach((child) => {
-    if (!child.isDeclaration) {
-      draw(ctx, child);
-    }
-  });
-  if (shouldRestoreMatrix) {
-    ctx.canvas.restore();
-  }
-  if (shouldRestorePaint) {
-    ctx.restore();
-  }
-}

package/src/sksg/nodes/imageFilters.ts

@@ -1,235 +0,0 @@
-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

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

package/src/sksg/nodes/paint.ts

@@ -1,75 +0,0 @@
-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);
-};