From 939ad0b7300aaa8f6cfe5f92189e62d95647dc8b Mon Sep 17 00:00:00 2001 From: William Candillon Date: Sun, 12 Jan 2025 21:59:40 +0100 Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=8E=A8):=20consolidate=20color=20proc?= =?UTF-8?q?essing=20in=20the=20scenegraph=20(#2891)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../skia/src/dom/nodes/datatypes/Gradient.ts | 18 +++++++++++++++++- .../skia/src/sksg/Recorder/commands/Box.ts | 4 ++-- .../src/sksg/Recorder/commands/ColorFilters.ts | 4 ++-- .../skia/src/sksg/Recorder/commands/Drawing.ts | 9 +++++---- .../src/sksg/Recorder/commands/ImageFilters.ts | 4 ++-- .../skia/src/sksg/Recorder/commands/Paint.ts | 18 +----------------- .../skia/src/sksg/Recorder/commands/Shaders.ts | 3 ++- 7 files changed, 31 insertions(+), 29 deletions(-) diff --git a/packages/skia/src/dom/nodes/datatypes/Gradient.ts b/packages/skia/src/dom/nodes/datatypes/Gradient.ts index b5d676d324..709410daf3 100644 --- a/packages/skia/src/dom/nodes/datatypes/Gradient.ts +++ b/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 --git a/packages/skia/src/sksg/Recorder/commands/Box.ts b/packages/skia/src/sksg/Recorder/commands/Box.ts index 58cfdb7357..6ded01db74 100644 --- a/packages/skia/src/sksg/Recorder/commands/Box.ts +++ b/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 --git a/packages/skia/src/sksg/Recorder/commands/ColorFilters.ts b/packages/skia/src/sksg/Recorder/commands/ColorFilters.ts index 276ffd10c1..27a2262cc9 100644 --- a/packages/skia/src/sksg/Recorder/commands/ColorFilters.ts +++ b/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 --git a/packages/skia/src/sksg/Recorder/commands/Drawing.ts b/packages/skia/src/sksg/Recorder/commands/Drawing.ts index c196a8b885..e4ed537541 100644 --- a/packages/skia/src/sksg/Recorder/commands/Drawing.ts +++ b/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 --git a/packages/skia/src/sksg/Recorder/commands/ImageFilters.ts b/packages/skia/src/sksg/Recorder/commands/ImageFilters.ts index d54a217587..c2f0424e8a 100644 --- a/packages/skia/src/sksg/Recorder/commands/ImageFilters.ts +++ b/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 --git a/packages/skia/src/sksg/Recorder/commands/Paint.ts b/packages/skia/src/sksg/Recorder/commands/Paint.ts index d2ba489f7b..b4c361c604 100644 --- a/packages/skia/src/sksg/Recorder/commands/Paint.ts +++ b/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 --git a/packages/skia/src/sksg/Recorder/commands/Shaders.ts b/packages/skia/src/sksg/Recorder/commands/Shaders.ts index 9ef6546339..83fb5519da 100644 --- a/packages/skia/src/sksg/Recorder/commands/Shaders.ts +++ b/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); };