chore(💄): Minor scenegraph refactoring (#2855)

apps/paper/src/Examples/Breathe/Breathe.tsx

@@ -21,25 +21,26 @@ const c2 = "#529ca0";
 interface RingProps {
   index: number;
   progress: SharedValue<number>;
+  total: number;
 }
 
-const Ring = ({ index, progress }: RingProps) => {
+const Ring = ({ index, progress, total }: RingProps) => {
   const { width, height } = useWindowDimensions();
   const R = width / 4;
   const center = useMemo(
     () => vec(width / 2, height / 2 - 64),
     [height, width]
   );
 
-  const theta = (index * (2 * Math.PI)) / 6;
   const transform = useDerivedValue(() => {
+    const theta = (index * (2 * Math.PI)) / total;
     const { x, y } = polar2Canvas(
       { theta, radius: progress.value * R },
       { x: 0, y: 0 }
     );
     const scale = mix(progress.value, 0.3, 1);
     return [{ translateX: x }, { translateY: y }, { scale }];
-  }, [progress, R]);
+  });
 
   return (
     <Circle
@@ -61,10 +62,9 @@ export const Breathe = () => {
 
   const progress = useLoop({ duration: 3000 });
 
-  const transform = useDerivedValue(
-    () => [{ rotate: mix(progress.value, -Math.PI, 0) }],
-    [progress]
-  );
+  const transform = useDerivedValue(() => [
+    { rotate: mix(progress.value, -Math.PI, 0) },
+  ]);
 
   return (
     <View style={{ flex: 1 }}>
@@ -73,7 +73,9 @@ export const Breathe = () => {
         <Group origin={center} transform={transform} blendMode="screen">
           <BlurMask style="solid" blur={40} />
           {new Array(6).fill(0).map((_, index) => {
-            return <Ring key={index} index={index} progress={progress} />;
+            return (
+              <Ring key={index} index={index} progress={progress} total={6} />
+            );
           })}
         </Group>
       </Canvas>

apps/remotion/src/Playground/Playground.tsx

@@ -1,5 +1,5 @@
+import React from "react";
 import { Fill } from "@shopify/react-native-skia";
-import { useCurrentFrame } from "remotion";
 
 import { Background, Canvas } from "../components";
 import {
@@ -8,7 +8,6 @@ import {
   timing,
 } from "../components/animations/Animations";
 
-import { Breathe } from "./Breathe";
 const duration = 20;
 
 const playground = {

packages/skia/src/dom/nodes/datatypes/Circle.ts

@@ -1,14 +1,14 @@
-"worklet";
-
 import type { CircleDef, ScalarCircleDef } from "../../types";
 
 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
   return (def as any).cx !== undefined;
 };
 
 export const processCircle = (def: CircleDef) => {
+  "worklet";
   if (isCircleScalarDef(def)) {
     return { c: { x: def.cx, y: def.cy }, r: def.r };
   }

packages/skia/src/dom/nodes/datatypes/Enum.ts

@@ -1,4 +1,4 @@
-"worklet";
-
-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>;
+};

packages/skia/src/dom/nodes/datatypes/Fitting.ts

@@ -1,5 +1,3 @@
-"worklet";
-
 import { exhaustiveCheck } from "../../../renderer/typeddash";
 import type { SkRect } from "../../../skia/types";
 import type { Fit } from "../../types";
@@ -10,6 +8,7 @@ export interface Size {
 }
 
 export const size = (width = 0, height = 0) => {
+  "worklet";
   return { width, height };
 };
 
@@ -22,6 +21,7 @@ export const rect2rect = (
   { scaleX: number },
   { scaleY: number }
 ] => {
+  "worklet";
   const scaleX = dst.width / src.width;
   const scaleY = dst.height / src.height;
   const translateX = dst.x - src.x * scaleX;
@@ -33,6 +33,7 @@ const inscribe = (
   { width, height }: Size,
   rect: { x: number; y: number; width: number; height: number }
 ) => {
+  "worklet";
   const halfWidthDelta = (rect.width - width) / 2.0;
   const halfHeightDelta = (rect.height - height) / 2.0;
   return {
@@ -44,6 +45,7 @@ const inscribe = (
 };
 
 const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
+  "worklet";
   let src = size(),
     dst = size();
   if (
@@ -112,6 +114,7 @@ export const fitRects = (
   rect: SkRect,
   { x, y, width, height }: SkRect
 ) => {
+  "worklet";
   const sizes = applyBoxFit(
     fit,
     { width: rect.width, height: rect.height },

packages/skia/src/dom/nodes/datatypes/Gradient.ts

@@ -1,24 +1,26 @@
-"worklet";
-
 import type { Skia, SkRect, Transforms3d, Vector } from "../../../skia/types";
 import { TileMode } from "../../../skia/types";
 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 {
@@ -34,6 +36,7 @@ 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;

packages/skia/src/dom/nodes/datatypes/Path.ts

@@ -1,10 +1,9 @@
-"worklet";
-
 import type { Skia } from "../../../skia/types";
 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)
@@ -17,5 +16,6 @@ export const processPath = (Skia: Skia, rawPath: PathDef) => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isPathDef = (def: any): def is PathDef => {
+  "worklet";
   return typeof def === "string" || isPath(def);
 };

packages/skia/src/dom/nodes/datatypes/Radius.ts

@@ -1,9 +1,8 @@
-"worklet";
-
 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);
   }

packages/skia/src/dom/nodes/datatypes/Rect.ts

@@ -1,27 +1,29 @@
-"worklet";
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Skia, SkRect, SkRRect, Vector } from "../../../skia/types";
 import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
 
 import { processRadius } from "./Radius";
 
 export const isEdge = (pos: Vector, b: SkRect) => {
+  "worklet";
   return (
     pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height
   );
 };
 
 // We have an issue to check property existence on JSI backed instances
 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 => {
+  "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 {
@@ -30,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(
@@ -50,6 +53,7 @@ export const inflate = (
   tx = 0,
   ty = 0
 ) => {
+  "worklet";
   return Skia.RRectXY(
     Skia.XYWHRect(
       box.rect.x - dx + tx,
@@ -70,5 +74,6 @@ export const deflate = (
   tx = 0,
   ty = 0
 ) => {
+  "worklet";
   return inflate(Skia, box, -dx, -dy, tx, ty);
 };

packages/skia/src/dom/nodes/datatypes/Transform.ts

@@ -1,10 +1,10 @@
-"worklet";
-
 import type { TransformProps } from "../../types";
 import type { Skia, SkMatrix } from "../../../skia/types";
 import { processTransform } from "../../../skia/types";
 
 export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
+  "worklet";
+
   const { transform, origin, matrix } = props;
   if (matrix) {
     if (origin) {
@@ -26,6 +26,8 @@ export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
 };
 
 export const processTransformProps2 = (Skia: Skia, props: TransformProps) => {
+  "worklet";
+
   const { transform, origin, matrix } = props;
   if (matrix) {
     const m3 = Skia.Matrix();