@shopify/react-native-skia 1.7.6 → 1.8.0

package/src/dom/nodes/JsiSkDOM.ts

@@ -58,421 +58,241 @@ import type {
 } from "../types/PathEffects";
 import type { ParagraphProps } from "../types/Paragraph";
 
-import {
-  FillNode,
-  ImageNode,
-  CircleNode,
-  PathNode,
-  LineNode,
-  PatchNode,
-  PointsNode,
-  RectNode,
-  RRectNode,
-  VerticesNode,
-  TextNode,
-  OvalNode,
-  TextPathNode,
-  TextBlobNode,
-  GlyphsNode,
-  DiffRectNode,
-  PictureNode,
-  ImageSVGNode,
-  BackdropFilterNode,
-  BoxNode,
-  BoxShadowNode,
-  AtlasNode,
-} from "./drawings";
-import {
-  BlendImageFilterNode,
-  BlurImageFilterNode,
-  BlurMaskFilterNode,
-  DisplacementMapImageFilterNode,
-  DropShadowImageFilterNode,
-  OffsetImageFilterNode,
-  RuntimeShaderImageFilterNode,
-  CornerPathEffectNode,
-  DiscretePathEffectNode,
-  DashPathEffectNode,
-  Path1DPathEffectNode,
-  Path2DPathEffectNode,
-  SumPathEffectNode,
-  Line2DPathEffectNode,
-  BlendNode,
-} from "./paint";
-import {
-  MatrixColorFilterNode,
-  LumaColorFilterNode,
-  LinearToSRGBGammaColorFilterNode,
-  SRGBToLinearGammaColorFilterNode,
-  BlendColorFilterNode,
-  LerpColorFilterNode,
-} from "./paint/ColorFilters";
-import {
-  LinearGradientNode,
-  ShaderNode,
-  ImageShaderNode,
-  TwoPointConicalGradientNode,
-  TurbulenceNode,
-  SweepGradientNode,
-  RadialGradientNode,
-  FractalNoiseNode,
-  ColorNode,
-} from "./paint/Shaders";
-import { MorphologyImageFilterNode } from "./paint/ImageFilters";
-import { GroupNode } from "./GroupNode";
-import { PaintNode } from "./PaintNode";
-import type { NodeContext } from "./Node";
-import { LayerNode } from "./LayerNode";
-import { ParagraphNode } from "./drawings/ParagraphNode";
-
 export class JsiSkDOM implements SkDOM {
-  constructor(private ctx: NodeContext, private native: boolean) {}
+  constructor() {}
 
   Layer(props?: ChildrenProps) {
-    return this.native
-      ? global.SkiaDomApi.LayerNode(props ?? {})
-      : new LayerNode(this.ctx, props ?? {});
+    return global.SkiaDomApi.LayerNode(props ?? {});
   }
 
   Group(props?: GroupProps) {
-    return this.native
-      ? global.SkiaDomApi.GroupNode(props ?? {})
-      : new GroupNode(this.ctx, props ?? {});
+    return global.SkiaDomApi.GroupNode(props ?? {});
   }
 
   Paint(props: PaintProps) {
-    return this.native
-      ? global.SkiaDomApi.PaintNode(props ?? {})
-      : new PaintNode(this.ctx, props);
+    return global.SkiaDomApi.PaintNode(props ?? {});
   }
 
   // Drawings
   Fill(props?: DrawingNodeProps) {
-    return this.native
-      ? global.SkiaDomApi.FillNode(props ?? {})
-      : new FillNode(this.ctx, props);
+    return global.SkiaDomApi.FillNode(props ?? {});
   }
 
   Image(props: ImageProps) {
-    return this.native
-      ? global.SkiaDomApi.ImageNode(props ?? {})
-      : new ImageNode(this.ctx, props);
+    return global.SkiaDomApi.ImageNode(props ?? {});
   }
 
   Circle(props: CircleProps) {
-    return this.native
-      ? global.SkiaDomApi.CircleNode(props ?? {})
-      : new CircleNode(this.ctx, props);
+    return global.SkiaDomApi.CircleNode(props ?? {});
   }
 
   Path(props: PathProps) {
-    return this.native
-      ? global.SkiaDomApi.PathNode(props ?? {})
-      : new PathNode(this.ctx, props);
+    return global.SkiaDomApi.PathNode(props ?? {});
   }
 
   Line(props: LineProps) {
-    return this.native
-      ? global.SkiaDomApi.LineNode(props ?? {})
-      : new LineNode(this.ctx, props);
+    return global.SkiaDomApi.LineNode(props ?? {});
   }
 
   Oval(props: OvalProps) {
-    return this.native
-      ? global.SkiaDomApi.OvalNode(props ?? {})
-      : new OvalNode(this.ctx, props);
+    return global.SkiaDomApi.OvalNode(props ?? {});
   }
 
   Patch(props: PatchProps) {
-    return this.native
-      ? global.SkiaDomApi.PatchNode(props ?? {})
-      : new PatchNode(this.ctx, props);
+    return global.SkiaDomApi.PatchNode(props ?? {});
   }
 
   Points(props: PointsProps) {
-    return this.native
-      ? global.SkiaDomApi.PointsNode(props ?? {})
-      : new PointsNode(this.ctx, props);
+    return global.SkiaDomApi.PointsNode(props ?? {});
   }
 
   Rect(props: RectProps) {
-    return this.native
-      ? global.SkiaDomApi.RectNode(props)
-      : new RectNode(this.ctx, props);
+    return global.SkiaDomApi.RectNode(props);
   }
 
   RRect(props: RoundedRectProps) {
-    return this.native
-      ? global.SkiaDomApi.RRectNode(props)
-      : new RRectNode(this.ctx, props);
+    return global.SkiaDomApi.RRectNode(props);
   }
 
   Vertices(props: VerticesProps) {
-    return this.native
-      ? global.SkiaDomApi.VerticesNode(props)
-      : new VerticesNode(this.ctx, props);
+    return global.SkiaDomApi.VerticesNode(props);
   }
 
   Text(props: TextProps) {
-    return this.native
-      ? global.SkiaDomApi.TextNode(props)
-      : new TextNode(this.ctx, props);
+    return global.SkiaDomApi.TextNode(props);
   }
 
   TextPath(props: TextPathProps) {
-    return this.native
-      ? global.SkiaDomApi.TextPathNode(props)
-      : new TextPathNode(this.ctx, props);
+    return global.SkiaDomApi.TextPathNode(props);
   }
 
   TextBlob(props: TextBlobProps) {
-    return this.native
-      ? global.SkiaDomApi.TextBlobNode(props)
-      : new TextBlobNode(this.ctx, props);
+    return global.SkiaDomApi.TextBlobNode(props);
   }
 
   Glyphs(props: GlyphsProps) {
-    return this.native
-      ? global.SkiaDomApi.GlyphsNode(props)
-      : new GlyphsNode(this.ctx, props);
+    return global.SkiaDomApi.GlyphsNode(props);
   }
 
   DiffRect(props: DiffRectProps) {
-    return this.native
-      ? global.SkiaDomApi.DiffRectNode(props)
-      : new DiffRectNode(this.ctx, props);
+    return global.SkiaDomApi.DiffRectNode(props);
   }
 
   Picture(props: PictureProps) {
-    return this.native
-      ? global.SkiaDomApi.PictureNode(props)
-      : new PictureNode(this.ctx, props);
+    return global.SkiaDomApi.PictureNode(props);
   }
 
   Atlas(props: AtlasProps) {
-    return this.native
-      ? global.SkiaDomApi.AtlasNode(props)
-      : new AtlasNode(this.ctx, props);
+    return global.SkiaDomApi.AtlasNode(props);
   }
 
   ImageSVG(props: ImageSVGProps) {
-    return this.native
-      ? global.SkiaDomApi.ImageSVGNode(props)
-      : new ImageSVGNode(this.ctx, props);
+    return global.SkiaDomApi.ImageSVGNode(props);
   }
 
   // BlurMaskFilters
   BlurMaskFilter(props: BlurMaskFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.BlurMaskFilterNode(props)
-      : new BlurMaskFilterNode(this.ctx, props);
+    return global.SkiaDomApi.BlurMaskFilterNode(props);
   }
 
   // ImageFilters
   BlendImageFilter(props: BlendImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.BlendImageFilterNode(props)
-      : new BlendImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.BlendImageFilterNode(props);
   }
 
   DropShadowImageFilter(props: DropShadowImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.DropShadowImageFilterNode(props)
-      : new DropShadowImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.DropShadowImageFilterNode(props);
   }
 
   DisplacementMapImageFilter(props: DisplacementMapImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.DisplacementMapImageFilterNode(props)
-      : new DisplacementMapImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.DisplacementMapImageFilterNode(props);
   }
 
   BlurImageFilter(props: BlurImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.BlurImageFilterNode(props)
-      : new BlurImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.BlurImageFilterNode(props);
   }
 
   OffsetImageFilter(props: OffsetImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.OffsetImageFilterNode(props)
-      : new OffsetImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.OffsetImageFilterNode(props);
   }
 
   MorphologyImageFilter(props: MorphologyImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.MorphologyImageFilterNode(props)
-      : new MorphologyImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.MorphologyImageFilterNode(props);
   }
 
   RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.RuntimeShaderImageFilterNode(props)
-      : new RuntimeShaderImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi.RuntimeShaderImageFilterNode(props);
   }
 
   // Color Filters
   MatrixColorFilter(props: MatrixColorFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.MatrixColorFilterNode(props)
-      : new MatrixColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi.MatrixColorFilterNode(props);
   }
 
   BlendColorFilter(props: BlendColorFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.BlendColorFilterNode(props)
-      : new BlendColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi.BlendColorFilterNode(props);
   }
 
   LumaColorFilter() {
-    return this.native
-      ? global.SkiaDomApi.LumaColorFilterNode()
-      : new LumaColorFilterNode(this.ctx);
+    return global.SkiaDomApi.LumaColorFilterNode();
   }
 
   LinearToSRGBGammaColorFilter() {
-    return this.native? global.SkiaDomApi.LinearToSRGBGammaColorFilterNode()
-      : new LinearToSRGBGammaColorFilterNode(this.ctx);
+    return global.SkiaDomApi.LinearToSRGBGammaColorFilterNode();
   }
 
   SRGBToLinearGammaColorFilter() {
-    return this.native
-      ? global.SkiaDomApi.SRGBToLinearGammaColorFilterNode()
-      : new SRGBToLinearGammaColorFilterNode(this.ctx);
+    return global.SkiaDomApi.SRGBToLinearGammaColorFilterNode();
   }
 
   LerpColorFilter(props: LerpColorFilterProps) {
-    return this.native
-      ? global.SkiaDomApi.LerpColorFilterNode(props)
-      : new LerpColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi.LerpColorFilterNode(props);
   }
 
   // Shaders
   Shader(props: ShaderProps) {
-    return this.native
-      ? global.SkiaDomApi.ShaderNode(props)
-      : new ShaderNode(this.ctx, props);
+    return global.SkiaDomApi.ShaderNode(props);
   }
 
   ImageShader(props: ImageShaderProps) {
-    return this.native
-      ? global.SkiaDomApi.ImageShaderNode(props)
-      : new ImageShaderNode(this.ctx, props);
+    return global.SkiaDomApi.ImageShaderNode(props);
   }
 
   ColorShader(props: ColorProps) {
-    return this.native
-      ? global.SkiaDomApi.ColorShaderNode(props)
-      : new ColorNode(this.ctx, props);
+    return global.SkiaDomApi.ColorShaderNode(props);
   }
 
   SweepGradient(props: SweepGradientProps) {
-    return this.native
-      ? global.SkiaDomApi.SweepGradientNode(props)
-      : new SweepGradientNode(this.ctx, props);
+    return global.SkiaDomApi.SweepGradientNode(props);
   }
 
   Turbulence(props: TurbulenceProps) {
-    return this.native
-      ? global.SkiaDomApi.TurbulenceNode(props)
-      : new TurbulenceNode(this.ctx, props);
+    return global.SkiaDomApi.TurbulenceNode(props);
   }
 
   FractalNoise(props: FractalNoiseProps) {
-    return this.native
-      ? global.SkiaDomApi.FractalNoiseNode(props)
-      : new FractalNoiseNode(this.ctx, props);
+    return global.SkiaDomApi.FractalNoiseNode(props);
   }
 
   LinearGradient(props: LinearGradientProps) {
-    return this.native
-      ? global.SkiaDomApi.LinearGradientNode(props)
-      : new LinearGradientNode(this.ctx, props);
+    return global.SkiaDomApi.LinearGradientNode(props);
   }
 
   RadialGradient(props: RadialGradientProps) {
-    return this.native
-      ? global.SkiaDomApi.RadialGradientNode(props)
-      : new RadialGradientNode(this.ctx, props);
+    return global.SkiaDomApi.RadialGradientNode(props);
   }
 
   TwoPointConicalGradient(props: TwoPointConicalGradientProps) {
-    return this.native
-      ? global.SkiaDomApi.TwoPointConicalGradientNode(props)
-      : new TwoPointConicalGradientNode(this.ctx, props);
+    return global.SkiaDomApi.TwoPointConicalGradientNode(props);
   }
 
   // Path Effects
   CornerPathEffect(props: CornerPathEffectProps) {
-    return this.native
-      ? global.SkiaDomApi.CornerPathEffectNode(props)
-      : new CornerPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi.CornerPathEffectNode(props);
   }
 
   DiscretePathEffect(props: DiscretePathEffectProps) {
-    return this.native
-      ? global.SkiaDomApi.DiscretePathEffectNode(props)
-      : new DiscretePathEffectNode(this.ctx, props);
+    return global.SkiaDomApi.DiscretePathEffectNode(props);
   }
 
   DashPathEffect(props: DashPathEffectProps) {
-    return this.native
-      ? global.SkiaDomApi.DashPathEffectNode(props)
-      : new DashPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi.DashPathEffectNode(props);
   }
 
   Path1DPathEffect(props: Path1DPathEffectProps) {
-    return this.native
-      ? global.SkiaDomApi.Path1DPathEffectNode(props)
-      : new Path1DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi.Path1DPathEffectNode(props);
   }
 
   Path2DPathEffect(props: Path2DPathEffectProps) {
-    return this.native
-      ? global.SkiaDomApi.Path2DPathEffectNode(props)
-      : new Path2DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi.Path2DPathEffectNode(props);
   }
 
   SumPathEffect() {
-    return this.native
-      ? global.SkiaDomApi.SumPathEffectNode()
-      : new SumPathEffectNode(this.ctx);
+    return global.SkiaDomApi.SumPathEffectNode();
   }
 
   Line2DPathEffect(props: Line2DPathEffectProps) {
-    return this.native
-      ? global.SkiaDomApi.Line2DPathEffectNode(props)
-      : new Line2DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi.Line2DPathEffectNode(props);
   }
 
   Blend(props: BlendProps) {
-    return this.native
-      ? global.SkiaDomApi.BlendNode(props)
-      : new BlendNode(this.ctx, props);
+    return global.SkiaDomApi.BlendNode(props);
   }
 
   BackdropFilter(props: ChildrenProps) {
-    return this.native
-      ? global.SkiaDomApi.BackdropFilterNode(props)
-      : new BackdropFilterNode(this.ctx, props);
+    return global.SkiaDomApi.BackdropFilterNode(props);
   }
 
   Box(props: BoxProps) {
-    return this.native
-      ? global.SkiaDomApi.BoxNode(props)
-      : new BoxNode(this.ctx, props);
+    return global.SkiaDomApi.BoxNode(props);
   }
 
   BoxShadow(props: BoxShadowProps) {
-    return this.native
-      ? global.SkiaDomApi.BoxShadowNode(props)
-      : new BoxShadowNode(this.ctx, props);
+    return global.SkiaDomApi.BoxShadowNode(props);
   }
 
   // Paragraph
   Paragraph(props: ParagraphProps) {
-    return this.native
-      ? global.SkiaDomApi.ParagraphNode(props)
-      : new ParagraphNode(this.ctx, props);
+    return global.SkiaDomApi.ParagraphNode(props);
   }
 }

package/src/dom/nodes/datatypes/Circle.ts

@@ -1,14 +1,16 @@
-import type { Skia } from "../../../skia/types";
 import type { CircleDef, ScalarCircleDef } from "../../types";
 
-export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef => {
+  "worklet";
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).cx !== undefined;
+  return (def as any).cx !== undefined;
+};
 
-export const processCircle = (Skia: Skia, def: CircleDef) => {
+export const processCircle = (def: CircleDef) => {
+  "worklet";
   if (isCircleScalarDef(def)) {
-    return { c: Skia.Point(def.cx, def.cy), r: def.r };
+    return { c: { x: def.cx, y: def.cy }, r: def.r };
   }
   return { ...def, c: def.c ?? { x: 0, y: 0 } };
 };

package/src/dom/nodes/datatypes/Enum.ts

@@ -1,2 +1,4 @@
-export const enumKey = <K extends string>(k: K) =>
-  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
+export const enumKey = <K extends string>(k: K) => {
+  "worklet";
+  return (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
+};

package/src/dom/nodes/datatypes/Gradient.ts

@@ -5,18 +5,22 @@ import type { GradientProps, ImageShaderProps } from "../../types";
 import { enumKey } from "./Enum";
 import { processTransformProps } from "./Transform";
 
-export const transformOrigin = (origin: Vector, transform: Transforms3d) => [
-  { translateX: origin.x },
-  { translateY: origin.y },
-  ...transform,
-  { translateX: -origin.x },
-  { translateY: -origin.y },
-];
+export const transformOrigin = (origin: Vector, transform: Transforms3d) => {
+  "worklet";
+  return [
+    { translateX: origin.x },
+    { translateY: origin.y },
+    ...transform,
+    { translateX: -origin.x },
+    { translateY: -origin.y },
+  ];
+};
 
 export const processGradientProps = (
   Skia: Skia,
   { colors, positions, mode, flags, ...transform }: GradientProps
 ) => {
+  "worklet";
   const localMatrix = Skia.Matrix();
   processTransformProps(localMatrix, transform);
   return {
@@ -32,16 +36,12 @@ export const getRect = (
   Skia: Skia,
   props: Omit<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "image">
 ): SkRect | undefined => {
+  "worklet";
   const { x, y, width, height } = props;
   if (props.rect) {
     return props.rect;
-  } else if (
-    x !== undefined &&
-    y !== undefined &&
-    width !== undefined &&
-    height !== undefined
-  ) {
-    return Skia.XYWHRect(x, y, width, height);
+  } else if (width !== undefined && height !== undefined) {
+    return Skia.XYWHRect(x ?? 0, y ?? 0, width, height);
   } else {
     return undefined;
   }

package/src/dom/nodes/datatypes/Path.ts

@@ -3,6 +3,7 @@ import { isPath } from "../../../skia/types";
 import type { PathDef } from "../../types";
 
 export const processPath = (Skia: Skia, rawPath: PathDef) => {
+  "worklet";
   const path =
     typeof rawPath === "string"
       ? Skia.Path.MakeFromSVGString(rawPath)
@@ -14,5 +15,7 @@ export const processPath = (Skia: Skia, rawPath: PathDef) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isPathDef = (def: any): def is PathDef =>
-  typeof def === "string" || isPath(def);
+export const isPathDef = (def: any): def is PathDef => {
+  "worklet";
+  return typeof def === "string" || isPath(def);
+};

package/src/dom/nodes/datatypes/Radius.ts

@@ -2,6 +2,7 @@ import type { Skia, Vector } from "../../../skia/types";
 import type { Radius } from "../../types";
 
 export const processRadius = (Skia: Skia, radius: Radius): Vector => {
+  "worklet";
   if (typeof radius === "number") {
     return Skia.Point(radius, radius);
   }

package/src/dom/nodes/datatypes/Rect.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { Skia, SkRect, Vector } from "../../../skia/types";
+import type { Skia, SkRect, SkRRect, Vector } from "../../../skia/types";
 import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
 
 import { processRadius } from "./Radius";
@@ -12,13 +12,18 @@ export const isEdge = (pos: Vector, b: SkRect) => {
 };
 
 // We have an issue to check property existence on JSI backed instances
-const isRRectCtor = (def: RRectDef): def is RRectCtor =>
-  (def as any).rect === undefined;
+const isRRectCtor = (def: RRectDef): def is RRectCtor => {
+  "worklet";
+  return (def as any).rect === undefined;
+};
 // We have an issue to check property existence on JSI backed instances
-const isRectCtor = (def: RectDef): def is RectCtor =>
-  (def as any).rect === undefined;
+const isRectCtor = (def: RectDef): def is RectCtor => {
+  "worklet";
+  return (def as any).rect === undefined;
+};
 
 export const processRect = (Skia: Skia, def: RectDef) => {
+  "worklet";
   if (isRectCtor(def)) {
     return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);
   } else {
@@ -27,6 +32,7 @@ export const processRect = (Skia: Skia, def: RectDef) => {
 };
 
 export const processRRect = (Skia: Skia, def: RRectDef) => {
+  "worklet";
   if (isRRectCtor(def)) {
     const r = processRadius(Skia, def.r ?? 0);
     return Skia.RRectXY(
@@ -38,3 +44,36 @@ export const processRRect = (Skia: Skia, def: RRectDef) => {
     return def.rect;
   }
 };
+
+export const inflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => {
+  "worklet";
+  return Skia.RRectXY(
+    Skia.XYWHRect(
+      box.rect.x - dx + tx,
+      box.rect.y - dy + ty,
+      box.rect.width + 2 * dx,
+      box.rect.height + 2 * dy
+    ),
+    box.rx + dx,
+    box.ry + dy
+  );
+};
+
+export const deflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => {
+  "worklet";
+  return inflate(Skia, box, -dx, -dy, tx, ty);
+};