fix(🎨): consolidate color processing in the scenegraph (#2891)

Author: wcandillon

Diff for: packages/skia/src/dom/nodes/datatypes/Gradient.ts

@@ -16,6 +16,22 @@ export const transformOrigin = (origin: Vector, transform: Transforms3d) => {
   ];
 };
 
+export const processColor = (
+  Skia: Skia,
+  color: number | string | Float32Array | number[]
+) => {
+  "worklet";
+  if (typeof color === "string" || typeof color === "number") {
+    return Skia.Color(color);
+  } else if (Array.isArray(color) || color instanceof Float32Array) {
+    return color instanceof Float32Array ? color : new Float32Array(color);
+  } else {
+    throw new Error(
+      `Invalid color type: ${typeof color}. Expected number, string, or array.`
+    );
+  }
+};
+
 export const processGradientProps = (
   Skia: Skia,
   { colors, positions, mode, flags, ...transform }: GradientProps
@@ -24,7 +40,7 @@ export const processGradientProps = (
   const localMatrix = Skia.Matrix();
   processTransformProps(localMatrix, transform);
   return {
-    colors: colors.map((color) => Skia.Color(color)),
+    colors: colors.map((color) => processColor(Skia, color)),
     positions: positions ?? null,
     mode: TileMode[enumKey(mode ?? "clamp")],
     flags,

Diff for: packages/skia/src/sksg/Recorder/commands/Box.ts

@@ -1,4 +1,4 @@
-import { deflate, inflate } from "../../../dom/nodes";
+import { deflate, inflate, processColor } from "../../../dom/nodes";
 import type { BoxProps, BoxShadowProps } from "../../../dom/types";
 import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
 import type { Command } from "../Core";
@@ -31,7 +31,7 @@ export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
-      lPaint.setColor(Skia.Color(color));
+      lPaint.setColor(processColor(Skia, color));
       lPaint.setAlphaf(paint.getAlphaf() * opacity);
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)

Diff for: packages/skia/src/sksg/Recorder/commands/ColorFilters.ts

@@ -1,4 +1,4 @@
-import { enumKey } from "../../../dom/nodes";
+import { enumKey, processColor } from "../../../dom/nodes";
 import type {
   BlendColorFilterProps,
   LerpColorFilterProps,
@@ -59,7 +59,7 @@ export const pushColorFilter = (
   if (isColorFilter(command, NodeType.BlendColorFilter)) {
     const { props } = command;
     const { mode } = props;
-    const color = ctx.Skia.Color(props.color);
+    const color = processColor(ctx.Skia, props.color);
     cf = ctx.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
   } else if (isColorFilter(command, NodeType.MatrixColorFilter)) {
     const { matrix } = command.props;

Diff for: packages/skia/src/sksg/Recorder/commands/Drawing.ts

@@ -5,6 +5,7 @@ import {
   inflate,
   NodeType,
   processCircle,
+  processColor,
   processPath,
   processRect,
   processRRect,
@@ -87,7 +88,7 @@ export const drawBox = (
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
-      lPaint.setColor(Skia.Color(color));
+      lPaint.setColor(processColor(Skia, color));
       lPaint.setAlphaf(paint.getAlphaf() * opacity);
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
@@ -105,7 +106,7 @@ export const drawBox = (
       canvas.save();
       canvas.clipRRect(box, ClipOp.Intersect, false);
       const lPaint = Skia.Paint();
-      lPaint.setColor(Skia.Color(color));
+      lPaint.setColor(processColor(Skia, color));
       lPaint.setAlphaf(paint.getAlphaf() * opacity);
 
       lPaint.setMaskFilter(
@@ -170,7 +171,7 @@ export const drawVertices = (ctx: DrawingContext, props: VerticesProps) => {
     vertexMode,
     props.vertices,
     textures,
-    colors ? colors.map((c) => ctx.Skia.Color(c)) : undefined,
+    colors ? colors.map((c) => processColor(ctx.Skia, c)) : undefined,
     indices
   );
   const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
@@ -258,7 +259,7 @@ export const drawPatch = (ctx: DrawingContext, props: PatchProps) => {
     patch[0].c1,
   ];
   const colors = props.colors
-    ? props.colors.map((c) => ctx.Skia.Color(c))
+    ? props.colors.map((c) => processColor(ctx.Skia, c))
     : undefined;
   ctx.canvas.drawPatch(points, colors, texture, mode, ctx.paint);
 };

Diff for: packages/skia/src/sksg/Recorder/commands/ImageFilters.ts

@@ -1,4 +1,4 @@
-import { enumKey, processRadius } from "../../../dom/nodes";
+import { enumKey, processColor, processRadius } from "../../../dom/nodes";
 import type {
   BlendImageFilterProps,
   BlurImageFilterProps,
@@ -113,7 +113,7 @@ const declareDropShadowImageFilter = (
 ) => {
   "worklet";
   const { dx, dy, blur, shadowOnly, color: cl, inner } = props;
-  const color = ctx.Skia.Color(cl);
+  const color = processColor(ctx.Skia, cl);
   let factory;
   if (inner) {
     factory = MakeInnerShadow.bind(null, ctx.Skia, shadowOnly);

Diff for: packages/skia/src/sksg/Recorder/commands/Paint.ts

@@ -1,4 +1,4 @@
-import { enumKey } from "../../../dom/nodes";
+import { enumKey, processColor } from "../../../dom/nodes";
 import type { PaintProps } from "../../../dom/types";
 import {
   BlendMode,
@@ -8,22 +8,6 @@ import {
 } from "../../../skia/types";
 import type { SkPaint, Skia } from "../../../skia/types";
 
-export const processColor = (
-  Skia: Skia,
-  color: number | string | Float32Array | number[]
-) => {
-  "worklet";
-  if (typeof color === "string" || typeof color === "number") {
-    return Skia.Color(color);
-  } else if (Array.isArray(color) || color instanceof Float32Array) {
-    return color instanceof Float32Array ? color : new Float32Array(color);
-  } else {
-    throw new Error(
-      `Invalid color type: ${typeof color}. Expected number, string, or array.`
-    );
-  }
-};
-
 export const setPaintProperties = (
   Skia: Skia,
   paint: SkPaint,

Diff for: packages/skia/src/sksg/Recorder/commands/Shaders.ts

@@ -2,6 +2,7 @@ import {
   enumKey,
   fitRects,
   getRect,
+  processColor,
   processGradientProps,
   processTransformProps,
   rect2rect,
@@ -49,7 +50,7 @@ const declareShader = (ctx: DrawingContext, props: ShaderProps) => {
 const declareColorShader = (ctx: DrawingContext, props: ColorProps) => {
   "worklet";
   const { color } = props;
-  const shader = ctx.Skia.Shader.MakeColor(ctx.Skia.Color(color));
+  const shader = ctx.Skia.Shader.MakeColor(processColor(ctx.Skia, color));
   ctx.shaders.push(shader);
 };