@shopify/react-native-skia 1.7.7 → 1.8.0

package/src/sksg/nodes/context.ts

@@ -1,25 +1,17 @@
-"worklet";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { composeDeclarations, NodeType } from "../../dom/types";
-import type {
-  BlendProps,
-  DeclarationContext,
-  DrawingNodeProps,
-} from "../../dom/types";
+import { NodeType } from "../../dom/types";
+import type { DrawingNodeProps } from "../../dom/types";
 import type { DrawingContext } from "../DrawingContext";
-import { BlendMode } from "../../skia/types";
-import type {
-  SkPathEffect,
-  SkColorFilter,
-  SkImageFilter,
-} from "../../skia/types";
-import { enumKey } from "../../dom/nodes";
+import type { SkImageFilter } from "../../skia/types";
+import {
+  createDeclarationContext,
+  type DeclarationContext,
+} from "../DeclarationContext";
 
 import type { Node } from "./Node";
 import {
   drawAtlas,
   drawBox,
-  drawBoxShadow,
   drawCircle,
   drawDiffRect,
   drawFill,
@@ -41,6 +33,7 @@ import {
   drawVertices,
 } from "./drawings";
 import {
+  composeColorFilters,
   declareLerpColorFilter,
   makeBlendColorFilter,
   makeLinearToSRGBGammaColorFilter,
@@ -49,6 +42,8 @@ import {
   makeSRGBToLinearGammaColorFilter,
 } from "./colorFilters";
 import {
+  composeImageFilters,
+  declareBlend,
   declareBlendImageFilter,
   declareBlurMaskFilter,
   declareDisplacementMapImageFilter,
@@ -72,6 +67,7 @@ import {
 } from "./shaders";
 import { declarePaint } from "./paint";
 import {
+  composePathEffects,
   declareSumPathEffect,
   makeCornerPathEffect,
   makeDashPathEffect,
@@ -81,59 +77,8 @@ import {
   makePath2DPathEffect,
 } from "./pathEffects";
 
-interface ContextProcessingResult {
-  shouldRestoreMatrix: boolean;
-  shouldRestorePaint: boolean;
-}
-
-function composeColorFilters(
-  ctx: DeclarationContext,
-  cf: SkColorFilter,
-  processChildren: () => void
-) {
-  const { Skia } = ctx;
-  ctx.save();
-  processChildren();
-  const cf1 = ctx.colorFilters.popAllAsOne();
-  ctx.restore();
-  ctx.colorFilters.push(cf1 ? Skia.ColorFilter.MakeCompose(cf, cf1) : cf);
-}
-
-function composePathEffects(
-  ctx: DeclarationContext,
-  pe: SkPathEffect,
-  processChildren: () => void
-) {
-  const { Skia } = ctx;
-  ctx.save();
-  processChildren();
-  const pe1 = ctx.pathEffects.popAllAsOne();
-  ctx.restore();
-  ctx.pathEffects.push(pe1 ? Skia.PathEffect.MakeCompose(pe, pe1) : pe);
-}
-
-function composeImageFilters(
-  ctx: DeclarationContext,
-  imgf1: SkImageFilter,
-  processChildren: () => void
-) {
-  const { Skia } = ctx;
-  ctx.save();
-  processChildren();
-  let imgf2 = ctx.imageFilters.popAllAsOne();
-  const cf = ctx.colorFilters.popAllAsOne();
-  ctx.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);
-}
-
 function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
+  "worklet";
   const processChildren = () =>
     node.children.forEach((child) => processDeclarations(ctx, child));
   const { type } = node;
@@ -146,29 +91,13 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
     }
     // Color Filters
     case NodeType.LerpColorFilter: {
-      node.children.forEach((child) => processDeclarations(ctx, child));
+      processChildren();
       declareLerpColorFilter(ctx, props);
       break;
     }
     case NodeType.Blend: {
-      node.children.forEach((child) => processDeclarations(ctx, child));
-      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));
-      }
+      processChildren();
+      declareBlend(ctx, props);
       break;
     }
     case NodeType.BlendColorFilter: {
@@ -198,7 +127,7 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
     }
     // Shaders
     case NodeType.Shader: {
-      node.children.forEach((child) => processDeclarations(ctx, child));
+      processChildren();
       declareShader(ctx, props);
       break;
     }
@@ -246,7 +175,7 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
       break;
     }
     case NodeType.DisplacementMapImageFilter: {
-      node.children.forEach((child) => processDeclarations(ctx, child));
+      processChildren();
       declareDisplacementMapImageFilter(ctx, props);
       break;
     }
@@ -261,7 +190,7 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
       break;
     }
     case NodeType.BlendImageFilter: {
-      node.children.forEach((child) => processDeclarations(ctx, child));
+      processChildren();
       declareBlendImageFilter(ctx, props);
       break;
     }
@@ -272,7 +201,7 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
     }
     // Path Effects
     case NodeType.SumPathEffect: {
-      node.children.forEach((child) => processDeclarations(ctx, child));
+      processChildren();
       declareSumPathEffect(ctx);
       break;
     }
@@ -308,7 +237,7 @@ function processDeclarations(ctx: DeclarationContext, node: Node<any>) {
     }
     // Paint
     case NodeType.Paint:
-      node.children.forEach((child) => processDeclarations(ctx, child));
+      processChildren();
       declarePaint(ctx, props);
       break;
     default:
@@ -321,53 +250,46 @@ const preProcessContext = (
   props: DrawingNodeProps,
   node: Node<any>
 ) => {
+  "worklet";
   const shouldRestoreMatrix = ctx.processMatrixAndClipping(props, props.layer);
-  ctx.declCtx.save();
+  const declCtx = createDeclarationContext(ctx.Skia);
   node.children.forEach((child) => {
     if (child.isDeclaration) {
-      processDeclarations(ctx.declCtx, child);
+      processDeclarations(declCtx, child);
     }
   });
-  const shouldRestorePaint = ctx.processPaint(props);
-  ctx.declCtx.restore();
-  return { shouldRestoreMatrix, shouldRestorePaint };
-};
-
-const postProcessContext = (
-  ctx: DrawingContext,
-  { shouldRestoreMatrix, shouldRestorePaint }: ContextProcessingResult
-) => {
-  if (shouldRestoreMatrix) {
-    ctx.canvas.restore();
-  }
-  if (shouldRestorePaint) {
-    ctx.restore();
-  }
+  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) {
-    ctx.declCtx.save();
-    processDeclarations(ctx.declCtx, child);
-    const imgf = ctx.declCtx.imageFilters.pop();
+    const declCtx = createDeclarationContext(ctx.Skia);
+    processDeclarations(declCtx, child);
+    const imgf = declCtx.imageFilters.pop();
     if (imgf) {
       imageFilter = imgf;
     } else {
-      const cf = ctx.declCtx.colorFilters.pop();
+      const cf = declCtx.colorFilters.pop();
       if (cf) {
         imageFilter = Skia.ImageFilter.MakeColorFilter(cf, null);
       }
     }
-    ctx.declCtx.restore();
   }
   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);
@@ -377,11 +299,9 @@ export function draw(ctx: DrawingContext, node: Node<any>) {
     let hasLayer = false;
     const [layer, ...children] = node.children;
     if (layer.isDeclaration) {
-      const { declCtx } = ctx;
-      declCtx.save();
-      processDeclarations(ctx.declCtx, layer);
+      const declCtx = createDeclarationContext(ctx.Skia);
+      processDeclarations(declCtx, layer);
       const paint = declCtx.paints.pop();
-      declCtx.restore();
       if (paint) {
         hasLayer = true;
         ctx.canvas.saveLayer(paint);
@@ -400,17 +320,15 @@ export function draw(ctx: DrawingContext, node: Node<any>) {
   const { type, props: rawProps, children } = node;
   // Regular nodes
   const props = materialize(rawProps);
-  const result = preProcessContext(ctx, props, node);
-  const paints = ctx.getLocalPaints();
+  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.BoxShadow:
-        drawBoxShadow(lctx, props);
-        break;
       case NodeType.Image:
         drawImage(lctx, props);
         break;
@@ -485,5 +403,10 @@ export function draw(ctx: DrawingContext, node: Node<any>) {
       draw(ctx, child);
     }
   });
-  postProcessContext(ctx, result);
+  if (shouldRestoreMatrix) {
+    ctx.canvas.restore();
+  }
+  if (shouldRestorePaint) {
+    ctx.restore();
+  }
 }

package/src/sksg/nodes/drawings.ts

@@ -1,5 +1,3 @@
-"worklet";
-
 import {
   deflate,
   enumKey,
@@ -63,11 +61,13 @@ interface LocalDrawingContext {
 }
 
 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);
 };
@@ -78,6 +78,7 @@ export const drawBox = (
   // 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 +127,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) => {
+  "worklet";
   const { image } = props;
   if (image) {
     const fit = props.fit ?? "contain";
@@ -153,6 +148,7 @@ export const drawImage = (ctx: LocalDrawingContext, props: ImageProps) => {
 };
 
 export const drawPoints = (ctx: LocalDrawingContext, props: PointsProps) => {
+  "worklet";
   const { points, mode } = props;
   ctx.canvas.drawPoints(PointMode[enumKey(mode)], points, ctx.paint);
 };
@@ -161,6 +157,7 @@ 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(
@@ -180,6 +177,7 @@ export const drawDiffRect = (
   ctx: LocalDrawingContext,
   props: DiffRectProps
 ) => {
+  "worklet";
   const { outer, inner } = props;
   ctx.canvas.drawDRRect(outer, inner, ctx.paint);
 };
@@ -188,6 +186,7 @@ export const drawTextPath = (
   ctx: LocalDrawingContext,
   props: TextPathProps
 ) => {
+  "worklet";
   const path = processPath(ctx.Skia, props.path);
   const { font, initialOffset } = props;
   if (font) {
@@ -226,6 +225,7 @@ export const drawTextPath = (
 };
 
 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);
@@ -233,6 +233,7 @@ export const drawText = (ctx: LocalDrawingContext, props: TextProps) => {
 };
 
 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;
@@ -263,6 +264,7 @@ export const drawPatch = (ctx: LocalDrawingContext, props: PatchProps) => {
 };
 
 export const drawPath = (ctx: LocalDrawingContext, props: PathProps) => {
+  "worklet";
   const {
     start: trimStart,
     end: trimEnd,
@@ -293,6 +295,7 @@ export const drawPath = (ctx: LocalDrawingContext, props: PathProps) => {
 };
 
 export const drawRect = (ctx: LocalDrawingContext, props: RectProps) => {
+  "worklet";
   const derived = processRect(ctx.Skia, props);
   ctx.canvas.drawRect(derived, ctx.paint);
 };
@@ -301,6 +304,7 @@ export const drawRRect = (
   ctx: LocalDrawingContext,
   props: RoundedRectProps
 ) => {
+  "worklet";
   const derived = processRRect(ctx.Skia, props);
   ctx.canvas.drawRRect(derived, ctx.paint);
 };
@@ -309,6 +313,7 @@ export const drawTextBlob = (
   ctx: LocalDrawingContext,
   props: TextBlobProps
 ) => {
+  "worklet";
   const { blob, x, y } = props;
   ctx.canvas.drawTextBlob(blob, x, y, ctx.paint);
 };
@@ -319,6 +324,7 @@ interface ProcessedGlyphs {
 }
 
 export const drawGlyphs = (ctx: LocalDrawingContext, props: GlyphsProps) => {
+  "worklet";
   const derived = props.glyphs.reduce<ProcessedGlyphs>(
     (acc, glyph) => {
       const { id, pos } = glyph;
@@ -339,6 +345,7 @@ export const drawImageSVG = (
   ctx: LocalDrawingContext,
   props: ImageSVGProps
 ) => {
+  "worklet";
   const { canvas } = ctx;
   const { svg } = props;
   const { x, y, width, height } = props.rect
@@ -359,6 +366,7 @@ export const drawParagraph = (
   ctx: LocalDrawingContext,
   props: ParagraphProps
 ) => {
+  "worklet";
   const { paragraph, x, y, width } = props;
   if (paragraph) {
     paragraph.layout(width);
@@ -367,11 +375,13 @@ export const drawParagraph = (
 };
 
 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) {
@@ -380,6 +390,7 @@ export const drawAtlas = (ctx: LocalDrawingContext, props: AtlasProps) => {
 };
 
 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);
@@ -389,5 +400,6 @@ export const drawFill = (
   ctx: LocalDrawingContext,
   _props: DrawingNodeProps
 ) => {
+  "worklet";
   ctx.canvas.drawPaint(ctx.paint);
 };

package/src/sksg/nodes/imageFilters.ts

@@ -1,11 +1,9 @@
-"worklet";
-
 import { enumKey, processRadius } from "../../dom/nodes";
 import type {
   BlendImageFilterProps,
+  BlendProps,
   BlurImageFilterProps,
   BlurMaskFilterProps,
-  DeclarationContext,
   DisplacementMapImageFilterProps,
   DropShadowImageFilterProps,
   MorphologyImageFilterProps,
@@ -20,6 +18,8 @@ import {
   processUniforms,
   TileMode,
 } from "../../skia/types";
+import type { DeclarationContext } from "../DeclarationContext";
+import { composeDeclarations } from "../DeclarationContext";
 
 export enum MorphologyOperator {
   Erode,
@@ -38,6 +38,7 @@ const MakeInnerShadow = (
   color: SkColor,
   input: SkImageFilter | null
 ) => {
+  "worklet";
   const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
     Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
     null
@@ -62,7 +63,50 @@ const MakeInnerShadow = (
   );
 };
 
+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;
 };
 
@@ -70,6 +114,7 @@ export const makeOffsetImageFilter = (
   ctx: DeclarationContext,
   props: OffsetImageFilterProps
 ) => {
+  "worklet";
   const { x, y } = props;
   return ctx.Skia.ImageFilter.MakeOffset(x, y, null);
 };
@@ -78,6 +123,7 @@ export const declareDisplacementMapImageFilter = (
   ctx: DeclarationContext,
   props: DisplacementMapImageFilterProps
 ) => {
+  "worklet";
   const { channelX, channelY, scale } = props;
   const shader = ctx.shaders.pop();
   if (!shader) {
@@ -98,6 +144,7 @@ export const makeBlurImageFilter = (
   ctx: DeclarationContext,
   props: BlurImageFilterProps
 ) => {
+  "worklet";
   const { mode, blur } = props;
   const sigma = processRadius(ctx.Skia, blur);
   const imgf = ctx.Skia.ImageFilter.MakeBlur(
@@ -113,6 +160,7 @@ 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;
@@ -131,6 +179,7 @@ export const makeMorphologyImageFilter = (
   ctx: DeclarationContext,
   props: MorphologyImageFilterProps
 ) => {
+  "worklet";
   const { operator } = props;
   const r = processRadius(ctx.Skia, props.radius);
   let imgf;
@@ -146,6 +195,7 @@ export const makeRuntimeShaderImageFilter = (
   ctx: DeclarationContext,
   props: RuntimeShaderImageFilterProps
 ) => {
+  "worklet";
   const { source, uniforms } = props;
   const rtb = ctx.Skia.RuntimeShaderBuilder(source);
   if (uniforms) {
@@ -159,6 +209,7 @@ export const declareBlendImageFilter = (
   ctx: DeclarationContext,
   props: BlendImageFilterProps
 ) => {
+  "worklet";
   const { mode } = props;
   const a = ctx.imageFilters.pop();
   const b = ctx.imageFilters.pop();
@@ -173,6 +224,7 @@ export const declareBlurMaskFilter = (
   ctx: DeclarationContext,
   props: BlurMaskFilterProps
 ) => {
+  "worklet";
   const { blur, style, respectCTM } = props;
   const mf = ctx.Skia.MaskFilter.MakeBlur(
     BlurStyle[enumKey(style)],

package/src/sksg/nodes/paint.ts

@@ -1,10 +1,10 @@
-"worklet";
-
 import { enumKey } from "../../dom/nodes";
-import type { DeclarationContext, PaintProps } from "../../dom/types";
+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,